#accessibility {position: relative; width: 100%; margin: 0 auto; z-index: 500;background: #333;color: #fff;}
#accessibility a {display: block;width: 100%;height: 0px;overflow: hidden;white-space: nowrap;background: #333;top: -1000px;color: #fff;text-align: center;}
#accessibility a:focus, #accessibility a:active {top: 0;cursor: pointer;text-decoration: none;height: 40px;line-height: 40px; color: #fff; font-size: 18px; text-align: center;}
.ir {overflow:hidden;display:block;position:absolute;left:0;right:0;z-index:-1;border:0;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px)}
.moShow {display:block !important}
.pcShow {display:none !important}
.mainWrap * {box-sizing:border-box}
.mainWrap .contents {padding-top:15px}
.mainWrap img {display:block}
.mainWrap button {padding:0}
.mainWrap .subTit {margin-top:20px;position:relative;font-size:24px;font-weight:500;color:#222;line-height:1.3}
.mainWrap .subTit strong {font-weight:500}
.mainWrap .subTxt {padding-top:36px;font-size:12px}
.mainWrap .subTxt + .subTit {margin-top:8px}
input[type=text]::-ms-clear {display:none;}
.dimm {position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.7);z-index:100}

/* header */
.mainWrap .header {height:60px;border-bottom:0}
.mainWrap .inner {margin:0 auto;padding:0 20px;position:relative}
.mainWrap .btnSrchToggle {position:fixed;top:15px;left:15px;padding:0;width:30px;height:30px;background:url('../images/icon_search.png') no-repeat center / 20px}
.mainWrap .btnSrchToggle.on {background-image:url('../images/main/icon_close_white.png');background-size:18px}
.mainWrap .btnSrchToggle.on + .headerSrchForm {display:block}
.mainWrap .headerSrchForm {display:none;position:fixed;top:60px;left:0;right:0;padding:10px 20px 18px;width:100%;height:60px;background:#fff}
.mainWrap .headerSrchForm .inpBox {position:relative;margin:0 auto;width:245px}
.mainWrap .headerSrchForm input {width:100%;height:30px;padding:0;font-weight:500;color:#137fd2;border:0;border-bottom:2px solid #137fd2}
.mainWrap input::placeholder {color:#137fd2}
.mainWrap input:-webkit-input-placeholder {color:#137fd2}
.mainWrap input::-webkit-input-placeholder {color:#137fd2}
.mainWrap input::-moz-placeholder {color:#137fd2}
.mainWrap input:-moz-placeholder {color:#137fd2}
.mainWrap .btnSrch {position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:30px;height:30px;background:url('../images/main/icon_search_blue.png') no-repeat center / 16px;}
.mainWrap .header .headerLogo {width:180px;height:20px;margin:20px auto 0}
.mainWrap .header .headerLogo a {display:block;width:100%;max-width:none;background:url('../images/logo_white.svg') no-repeat center / 180px auto}
.mainWrap .header .headerAllMenu {position:fixed;top:15px;right:15px;width:30px;height:30px}
.mainWrap .header .headerAllMenu .btnAllMenu {width:100%;height:100%;background:url('../images/main/icon_menu_bar.png') no-repeat center / 20px auto}

/* mobile */
.moGnbWrap {position:fixed;top:0;right:0;width:290px;height:100vh;background:#137fd2;z-index:101;transform:translateX(100%);transition:all 0.3s}
.moGnbWrap.on {transform:translateX(0);}
.moGnbWrap .gnbHeader {position:relative;padding:20px 15px;height:60px;border-bottom:1px solid #ddd;background:#fff}
.moGnbWrap .gnbHeader .gnbLogo {width:180px}
.moGnbWrap .gnbHeader .btnGnbClose {position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;background:url('../images/main/icon_close_black.png') no-repeat center;background-size:16px}
.moGnbWrap .gnbDep1 {position:relative}
.moGnbWrap .gnbDep1 .dep1 > a {display:flex;justify-content:center;align-items:center;width:84px;height:53px;color:#fff;font-size:14px;font-weight:500;background:#137fd2;text-align:center;}
.moGnbWrap .gnbDep1 .dep1 > a.on {color:#222;background:#fff}
.moGnbWrap .gnbDep1 .dep1 > a.on + .gnbDep2 {display:block}
.moGnbWrap .gnbDep2 {display:none;overflow-y:auto;position:absolute;top:0;left:84px;width:calc(100% - 84px);height:calc(100vh - 60px);background:#fff}
.moGnbWrap .gnbDep2 .dep2 > a {position:relative;display:flex;align-items:center;width:100%;height:53px;padding:0 33px 0 15px;font-size:14px;color:#222;font-weight:500}
.moGnbWrap .gnbDep2 .dep2 > a:after {content:'';overflow:hidden;display:block;position:absolute;top:50%;right:15px;transform:translateY(-50%);width:12px;height:12px;background:url('../images/main/icon_more.png') no-repeat;background-size:100% auto;background-position:0 0}
.moGnbWrap .gnbDep2 .dep2.on > a:after {background-position:0 -15px}
.moGnbWrap .gnbDep3 {display:none;padding-bottom:10px}
.moGnbWrap .gnbDep3 .dep3 {padding:0 15px;}
.moGnbWrap .gnbDep3 .dep3 > a {display:block;height:32px;line-height:32px;font-size:12px;color:#444;border-bottom:1px solid #f5f5f5}
.moGnbWrap .hasDep4 > a {padding-right:15px;position:relative}
.moGnbWrap .hasDep4 > a:after {content:'';display:block;position:absolute;right:1px;top:45%;transform:translateY(-50%) rotate(45deg);width:6px;height:6px;border:solid #666;border-width:0 2px 2px 0}
.moGnbWrap .gnbDep4 {display:none;margin:5px 0}
.moGnbWrap .hasDep4.on > a:after {top:55%;transform:translateY(-50%) rotate(-135deg)}
.moGnbWrap .gnbDep4 .dep4 > a {display:block;padding:2px 0 3px;font-size:11px;font-weight:300;color:#666;letter-spacing:-0.8px}

/* main visual */
.mainVisual {overflow:hidden;position:relative;margin-top:60px;height:513px}
.mainVisualSwiper .swiper-slide {padding-top:43px;height:513px;color:#fff;background-repeat:no-repeat;background-position:center;background-size:cover}
.mainVisualSwiper .swiper-slide.n1 {background-image:url('../images/main/bg_main_visual_mo01.jpg')}
.mainVisualSwiper .swiper-slide.n2 {background-image:url('../images/main/bg_main_visual_mo02.jpg')}
.mainVisualSwiper .swiper-slide.n3 {background-image:url('../images/main/bg_main_visual_mo04.jpg')}
.mainVisualSwiper .visualTit {font-size:30px;font-weight:500;color:#fff;line-height:1.3}
.mainVisualSwiper .visualTxt {margin-top:13px;font-size:14px}
.mainVisualSwiper .btnSwiper {top:222px;width:30px;height:30px;border-radius:50%;background:#137fd2}
.mainVisualSwiper .btnSwiper:after {content:'';display:block;position:absolute;top:50%;width:7px;height:7px;border:solid #fff;border-width:2px 2px 0 0}
.mainVisualSwiper .swiper-button-prev {left:20px}
.mainVisualSwiper .swiper-button-next {right:auto;left:100px}
.mainVisualSwiper .swiper-button-next:after {left:44%;transform:translate(-50%, -50%) rotate(45deg);}
.mainVisualSwiper .swiper-button-prev:after {left:56%;transform:translate(-50%, -50%) rotate(-135deg);}
.mainVisualSwiper .swiper-button-disabled {opacity:1;background:#fff}
.mainVisualSwiper .swiper-button-disabled:after {border-color:#444}
.mainVisualSwiper .swiper-pagination {top:203px;left:58px;bottom:auto;width:auto;color:#fff;}

.mainVisualCont {position:absolute;bottom:0;width:100vw;height:222px;color:#fff;z-index:1}
.mainTab {-webkit-display:flex;-ms-display:flex;-moz-display:flex;-o-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-moz-flex-direction:row;-o-flex-direction:row;flex-direction:row}
.mainTab .tabList {position:relative;display:table;width:76px;height:76px;border-radius:50%;background:#137fd2}
.mainTab .tabList a {display:table-cell;font-size:14px;text-align:center;color:#fff;vertical-align:middle;}
.mainTab .tabList + .tabList {margin-left:10px}
.mainTab .tabList.on {color:#137fd2;background:#fff}
.mainTab .tabList.on a {color:#137fd2;font-size:16px;font-weight:700;border-radius:50%}
.mainTab .tabList.on:before {content:'';display:block;position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:8px;height:7px;background:url('../images/main/icon_tap_on_mo.png') no-repeat center / 100% auto}
.mainTabCont {display:none;margin-top:15px}
.mainTabCont.on {display:block}
.mainTabSwiper {padding-bottom:25px}
.mainTabSwiper .swiper-slide {display:table;width:76px;height:76px;}
.mainTabSwiper .swiper-slide a {display:table-cell;position:relative;font-size:14px;color:#fff;text-align:center;vertical-align:middle;line-height:1.3;border:1px solid #fff;border-radius:10px;overflow:hidden}
.mainTabSwiper .swiper-slide a.arrow:before {content:'';display:block;position:absolute;top:5px;right:5px;width:10px;height:10px;background:url('../images/main/icon_new_link.png') no-repeat center / 100% auto}
.mainTabSwiper .swiper-pagination-bullets {width:100%;bottom:-4px}
.mainTabSwiper .swiper-pagination-bullets .swiper-pagination-bullet {margin:0 5px;width:10px;height:10px;background:#fff;opacity:1}
.mainTabSwiper .swiper-pagination-bullets .swiper-pagination-bullet-active {background:#127bcc;border:2px solid #fff}


.mainNoti1 {position:relative}
.mainNoti1 .btnMore {position:absolute;right:0;top:6px;padding-right:15px;font-size:14px}
.mainNoti1 .btnMore:after {content:'';display:block;position:absolute;right:0;top:5px;width:11px;height:11px;background:url('../images/main/icon_more.png') no-repeat 0 0 / 100% auto;overflow:hidden}
.mainNoti1 .notiList {margin-top:23px;height:78px;overflow:hidden}
.mainNoti1 .notiList li + li {margin-top:3px}
.mainNoti1 .notiList a:hover {color:#222}
.mainNoti1 .notiList .tit {font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mainNoti1 .notiList .tit strong {color:#222}
.mainNoti1 .notiList .date {display:none}
.mainNoti2 .notiSwiper {margin-top:27px}
.mainNoti2 .notiSwiper .swiper-slide {width:230px;border:1px solid #e1e1e1}
.mainNoti2 .notiSwiper a {display: block;}
.mainNoti2 .notiSwiper .btn-swiper {display:none}


.mainBusiness .businessSwiper {margin:0 -20px;padding:27px 20px 40px;}
.mainBusiness .businessSwiper .swiper-slide {position:relative;width:137px;height:170px;border-radius:10px;text-align:center;box-shadow:1px 3px 12px 2px rgba(0, 0, 0, 0.1);background:#fff}
.mainBusiness .businessSwiper .swiper-slide:before {content:'';display:block;position:absolute;top:20px;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:100% auto}
.mainBusiness .businessSwiper .swiper-slide.item01:before {background-image:url('../images/main/bg_business_mo01.png')}
.mainBusiness .businessSwiper .swiper-slide.item02:before {background-image:url('../images/main/bg_business_mo02.png')}
.mainBusiness .businessSwiper .swiper-slide.item03:before {background-image:url('../images/main/bg_business_mo03.png')}
.mainBusiness .businessSwiper .swiper-slide.item04:before {background-image:url('../images/main/bg_business_mo04.png')}
.mainBusiness .businessSwiper .swiper-slide.item05:before {background-image:url('../images/main/bg_business_mo05.png')}
.mainBusiness .businessSwiper .swiper-slide.item06:before {background-image:url('../images/main/bg_business_mo06.png')}
.mainBusiness .businessSwiper .swiper-slide.item07:before {background-image:url('../images/main/bg_business_mo07.png')}
.mainBusiness .businessSwiper .swiper-slide a {display:block;padding:85px 5px 0;height:100%}
.mainBusiness .businessSwiper .swiper-slide .tit {display:block;font-size:17px;color:#111}
.mainBusiness .businessSwiper .swiper-slide .txt {margin-top:8px;font-size:12px;color:#555;letter-spacing:-1px}
.mainBusiness .businessSwiper .btn-swiper {display:none}


.mainSec2 {background:#ecf1f6}
.mainPromote .promoteCont {position:relative}
.mainWrap .snsList {-webkit-display:flex;-ms-display:flex;-moz-display:flex;-o-display:flex;display:flex;-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;-o-flex-direction:row;flex-direction:row;margin-top:20px}
.mainWrap .snsList li {width:25px;height:25px;border-radius:50%;overflow:visible;}
.mainWrap .snsList li a {display:block}
.mainWrap .snsList li + li {margin-left:5px}
.mainWrap .snsList img {width:100%}
.mainPromote .promoteCont .linkMore a {position:absolute;right:0;top:0;padding:3px 25px 4px 9px;font-size:12px;color:#444;border:1px solid #d5d5d5;border-radius:20px;background:#fff;letter-spacing:-0.3px;}
.mainPromote .promoteCont .linkMore a:after {content:'';display:block;position:absolute;right:10px;top:7px;width:11px;height:11px;background:url('../images/main/icon_more.png') no-repeat 0 0 / 100% auto;overflow:hidden}
.mainPromote .promoteSwiper {margin-top:10px}
.mainPromote .promoteSwiper .swiper-slide {width:300px}
.mainPromote .promoteSwiper .swiper-slide a {display:block}
.mainPromote .promoteSwiper .swiper-slide img {display:block}
.mainPromote .videoCont {display: flex;flex-direction: column;width: 100%;margin-top: 10px;} /* 2022.05.03 */
.mainPromote .videoCont .video_txt {padding: 10px; border: none; width: 100%; height: 80px; overflow-y: auto; display: block; font-family: 'Noto Sans KR', sans-serif; color: #444; line-height: 22px; min-height: auto; white-space: pre-line;}


.mainCustomerSvc {padding-bottom:40px}
.mainCustomerSvc .csMenu ul {margin-top:7px;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;align-items:center;}
.mainCustomerSvc .csMenu li {overflow:hidden;margin-top:11px;width:calc((100% - 11px) / 2);height:60px}
.mainCustomerSvc .csMenu li a {display:block;padding:10px 11px 12px 74px;font-size:14px;color:#444;line-height:1.3;border:1px solid #ddd}
.mainCustomerSvc .csMenu .csMenuLi01 a {background:#fff url('../images/main/icon_cs_menu_mo01.png') no-repeat 22px center / 33px auto}
.mainCustomerSvc .csMenu .csMenuLi02 a {background:#fff url('../images/main/icon_cs_menu_mo02.png') no-repeat 20px center / 37px auto}
.mainCustomerSvc .csMenu .csMenuLi03 a {background:#fff url('../images/main/icon_cs_menu_mo03.png') no-repeat 20px center / 33px auto}
.mainCustomerSvc .csMenu .csMenuLi04 a {background:#fff url('../images/main/icon_cs_menu_mo04.png') no-repeat 24px center / 31px auto}
.mainCustomerSvc .csMenu .csMenuLi05 a {background:#fff url('../images/main/icon_cs_menu_mo05.png') no-repeat 23px center / 30px auto}
.mainCustomerSvc .csMenu .csMenuLi06 a {background:#fff url('../images/main/icon_cs_menu_mo06.png') no-repeat 24px center / 30px auto}

/*ÁöºÎÁö»çÃ£±â ¹× ESG¸µÅ© Ãß°¡ÈÄ »èÁ¦ - »ç¿ëÇÏÁö¾ÊÀ½*/
/*
.mainCustomerSvc .csTel {margin-top:10px;padding:13px 0; text-align:center}
.mainCustomerSvc .csTel .tit {font-size:18px;color:#222}
.mainCustomerSvc .csTel .txt {margin-top:12px;font-size:16px}
.mainCustomerSvc .csTel .tel a {font-weight:500;font-size:30px;color:#137fd2;line-height:1.1}
.mainCustomerSvc .csTel .time {margin-top:10px}
*/




.mainSec3 {padding:20px 0}
.companySwiper .swiper-slide {width:90px}
.companySwiper .swiper-slide a {display:block}
.companySwiper .swiper-slide img {display:block}

.fullLayerPop {display:none}


/*¸ÞÀÎ ¸ð´ÞÇüÅÂ ÆË¾÷*/
.mainPopup_openBtn    { position: absolute; z-index: 1000; background-color: #fff; cursor: pointer !important;}
#mainPopup_modalWrap  { display: none; position: fixed; left: 0; top: 0;  z-index: 1000;
                        width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);   }
#mainPopupAR          { position: relative; min-height: calc(100% - 1rem * 2);  padding:0; margin: 0 auto;  }
#mainPopup_closeBtn   { position: absolute;  right: 15px;  top: -50px; color: #ffffff;
                        font-size: 37px; cursor: pointer;width: 32px; height: 32px;
                        color:#fff; text-align: center; line-height: 30px; }
.modalPopup-centered  { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: calc(100%);}

.mainPopup_modal_group{ position: relative; width:1499px; padding-bottom: 30px; margin: 0 auto; 
                        display: flex;  flex-wrap: wrap; justify-content: center; align-items: center;}
.mainPopup_modal_group .popSwiper .swiper-slide     { width:490px; height:530px;/* display: flex; justify-content: center; align-items: center;ÆË¾÷ÀÌ¹ÌÁö Áß¾Ó·Ä½Ã */ }
.mainPopup_modal_group .popSwiper .swiper-slide img { width:490px; max-height: 530px; overflow: hidden; }
.mainPopup_modal_group .popSwiper a { display: block; }
.mainPopup_modal_group .btn-swiper  { display:block;width:40px;height:40px; background:rgba(0,0,0,0); transform:translateY(%);  top: 55%; }
.mainPopup_modal_group .btn-swiper:after   {content:'';color:#fff !important; display:block;position:absolute;
                                            top:50%;width:20px;height:20px; border:solid #fff;border-width:2px 2px 0 0;}
.mainPopup_modal_group .swiper-button-next {right:-35px;}
.mainPopup_modal_group .swiper-button-prev {left:-35px;}
.mainPopup_modal_group .swiper-button-next:after {transform:translate(-50%, -50%) rotate(45deg);left:47%;}
.mainPopup_modal_group .swiper-button-prev:after {transform:translate(-50%, -50%) rotate(-135deg);left:57%;}

.mainPopup_modal_group .swiper-pagination {bottom:-10px;top:auto;text-align:center;width:100%}
.mainPopup_modal_group .swiper-pagination-bullet {margin:0 4px;width:12px; height:12px; background:#fff; opacity:1}
.mainPopup_modal_group .swiper-pagination-bullet:last-of-type {margin-right:0}
.mainPopup_modal_group .swiper-pagination-bullet-active {width:40px; background:#4d7cff;border-radius:15px}


.mainPopup_modal_group .swiper_cookie        { position: absolute; bottom:-60px; color:#fff;display: flex; align-items: center; justify-content: center;}
.mainPopup_modal_group .swiper_cookie input  { width: 25px; height: 25px; margin-right: 15px;}
.mainPopup_modal_group .swiper_cookie form   { display: flex; align-items: center; justify-content: center;}


@media all and (min-width:1024px) {
    .moShow {display:none !important}
    .pcShow {display:block !important}
    .mainWrap .inner {width:1280px;padding:0 25px}
    .mainWrap .subTit {margin-top:13px;font-size:40px}
    .mainWrap .subTxt {padding-top:60px;font-size:20px}
    .mainWrap .subTxt + .subTit {margin-top:3px}

    /* header */
    .mainWrap .header {position:absolute;top:0;height:104px;background:transparent}
    .mainWrap .header .headerLogo {margin:40px 0 0 0;width:283px;height:23px;float:none}
    .mainWrap .header .headerLogo a {background:url('../images/logo_white.png') no-repeat center / 100% auto}
    .mainWrap .headerUtil {position:absolute;right:10px;top:-30px}
    .mainWrap .headerUtil ul {-webkit-display:flex;-ms-display:flex;-moz-display:flex;-o-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-moz-flex-direction:row;-o-flex-direction:row;flex-direction:row}
    .mainWrap .headerUtil li {margin:0 15px;position:relative}
    .mainWrap .headerUtil li + li:before {content:'';display:block;position:absolute;left:-16px;top:18px;width:2px;height:2px;background:#c4c5c9}
    .mainWrap .headerUtil a {color:#fff;font-size:14px}

    /* visual */
    .mainVisual {margin-top:0;height:1024px}
    .mainVisualSwiper .swiper-slide {padding-top:185px;height:1024px;background-size:auto 100%}
    .mainVisualSwiper .swiper-slide.n1 {background-image:url('../images/main/bg_main_visual_pc01.jpg')}
    .mainVisualSwiper .swiper-slide.n2 {background-image:url('../images/main/bg_main_visual_pc02.jpg')}
    .mainVisualSwiper .swiper-slide.n3 {background-image:url('../images/main/bg_main_visual_pc04.jpg')}
    .mainVisualSwiper .visualTit {font-size:44px}
    .mainVisualSwiper .visualTxt {margin-top:23px;font-size:20px}
    .mainVisualSwiper .btnSwiper {width:40px;height:40px;top:438px}
    .mainVisualSwiper .swiper-button-prev {left:50%;margin-left:-615px}
    .mainVisualSwiper .swiper-button-next {left:50%;margin-left:-500px}
    .mainVisualSwiper .swiper-pagination {top:420px;left:50%;margin-left:-558px;font-size:20px}

    .mainVisualCont {height:510px;width:1280px;left:50%;transform:translateX(-50%)}
    .mainVisualCont .mainSrchFrom {position:relative;width:400px;height:60px;border-radius:30px;overflow:hidden;}
    .mainVisualCont .mainSrchFrom input {padding:0 70px 3px 30px;width:100%;height:100%;color:#444;font-size:20px}
    .mainVisualCont .mainSrchFrom input::placeholder {color:#444}
    .mainVisualCont .mainSrchFrom input:-webkit-input-placeholder {color:#444}
    .mainVisualCont .mainSrchFrom input::-webkit-input-placeholder {color:#444}
    .mainVisualCont .mainSrchFrom input::-moz-placeholder {color:#444}
    .mainVisualCont .mainSrchFrom input:-moz-placeholder {color:#444}
    .mainVisualCont .mainSrchFrom .mainSrchBtn {position:absolute;right:15px;top:50%;margin-top:-25px;width:50px;height:50px;background:url('../images/main/icon_search_gray.png') no-repeat center / 20px auto}
    .mainTapWrap {margin-top:60px}
    .mainTab .tabList {width:140px;height:80px;border-radius:45px}
    .mainTab .tabList + .tabList {margin-left:20px}
    .mainTab .tabList.on:before {width:20px;height:10px;bottom:-10px;background:url('../images/main/icon_tap_on_pc.png') no-repeat center / 100% auto}
    .mainTab .tabList a {font-size:24px;line-height:1.2}
    .mainTab .tabList.on a {font-size:24px}
    .mainTabCont {margin-top:30px}
    .mainTabSwiper .swiper-slide {width:145px;height:100px}
    .mainTabSwiper.ty2 .swiper-slide {width:127.7px}
    .mainTabSwiper .swiper-slide a {font-size:18px;border-radius:8px}
    .mainTabSwiper .swiper-slide a:hover {color:#137fd2;background:#fff;}
    .mainTabSwiper .swiper-slide a.arrow:before {width:16px;height:16px;top:8px;right:8px}
    .gnbWrap {margin-top:-140px;height:140px;position:relative;background:rgba(19,127,210,0.7);z-index:100}
    .gnbWrap.fixed {position:fixed;top:0;left:0;right:0;margin-top:0;background:#137fd2}
    .gnbWrap .inner {position:static}
    .gnbWrap .inner:after {content:'';display:block;clear:both;}
    .gnbWrap .gnbDep1 {-webkit-display:flex;-ms-display:flex;-moz-display:flex;-o-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-moz-flex-direction:row;-o-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-align-items:center;-moz-align-items:center;-o-align-items:center;align-items:center;height:140px;float:left}
    .gnbWrap .gnbDep1 .dep1:first-of-type {padding-left:0}
    .gnbWrap .gnbDep1 .dep1 {padding:0 25px;height:140px}
    .gnbWrap .gnbDep1 .dep1sub {padding:0 25px;height:10px}
    .gnbWrap .gnbDep1 .dep1 > a {position:relative;font-size:22px;font-weight:500;color:#fff;line-height:138px}
    .gnbWrap .gnbDep1 .dep1 > a.fz26 {font-size:26px}
    .gnbWrap .btnSrchToggle {float:left;margin:45px 0 0;position:static;width:50px;height:50px;background:url('../images/main/icon_search_white.png') no-repeat center / 27px auto}
    .gnbWrap .btnSrchToggle.on {background-size:24px}
    .gnbWrap .btnAllMenu {float:right;margin:45px -10px 0 0;width:50px;height:50px;background:url('../images/main/icon_menu_bar2.png') no-repeat center / 30px auto}
    .gnbWrap .gnbDep1 .dep1.on > a:after, .gnbWrap .gnbDep1 .dep1 > a:hover:after, .gnbWrap .gnbDep1 .dep1 > a:focus:after {content:'';display:block;position:absolute;bottom:-7px;width:100%;height:2px;background:#fff}
    .gnbWrap .gnbDep1 .dep1.on .gnbSubGroup {display:block}
    .gnbWrap .gnbSubGroup {display:none;position:absolute;top:140px;left:0;right:0;background:#fff;z-index:1}
    .gnbWrap .gnbDep2 {display:flex;flex-direction:row;flex-wrap:wrap;width:1280px;margin:0 auto;padding:25px 130px 75px}
    .gnbWrap .gnbDep2 .dep2 {margin-top:48px;width:25%;min-height:220px}
    .gnbWrap .gnbDep3 {margin-top:5px}
    .gnbWrap .gnbDep3 .dep3 + .dep3 {margin-top:3px}
    .gnbWrap .gnbDep2 .dep2 > a {color:#137fd2;font-size:18px;font-weight:500}
    .gnbWrap .gnbDep3 .dep3 > a {color:#222;font-size:16px}
    .gnbWrap .gnbDep3 .dep3 > a:hover, .gnbWrap .gnbDep3 .dep3 > a:focus, .gnbWrap .gnbDep3 .dep3 > a:active {border-bottom:1px solid #222}
    .gnbSrchForm {display:none;padding:30px 0;height:120px;background:rgba(0,0,0,0.8)}
    .gnbSrchForm .srchFormBox {position:relative;margin:0 auto;width:690px;height:60px;background:#fff;border-radius:30px;overflow:hidden}
    .gnbSrchForm .srchFormBox input {padding:0 80px 1px 30px;width:100%;height:100%;font-size:20px;font-weight:500;color:#137fd2;border:0}
    .gnbSrchForm .srchFormBox .btnSrch {right:22px;width:40px;height:40px;background-size:24px}

    .mainSec1 {background:url('../images/main/bg_hrdk.png') no-repeat center / 1610px auto}
    .mainSec1 .mainInfo {-webkit-display:flex;-ms-display:flex;-o-display:flex;-moz-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-o-flex-direction:row;-moz-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;-ms-justify-content:space-between;-o-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between}
    .mainSec1 .mainInfo .subTit {font-size:30px}
    .mainNoti1 {width:calc(100% - 728px)}
    .mainNoti1 .btnMore {padding-right:20px;top:22px;font-size:18px}
    .mainNoti1 .btnMore:after {top:7px;width:14px;height:14px}
    .mainNoti1 .notiList {margin-top:30px;height:178px}
    .mainNoti1 .notiList li + li {margin-top:12px}
    .mainNoti1 .notiList a {-webkit-display:flex;-ms-display:flex;-o-display:flex;-moz-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-o-flex-direction:row;-moz-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;-ms-justify-content:space-between;-o-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between}
    .mainNoti1 .notiList .tit {position:relative;width:calc(100% - 90px);font-size:18px}
    .mainNoti1 .notiList a:hover .tit:after, .mainNoti1 .notiList a:focus .tit:after {content:'';display:block;position:absolute;bottom:0;width:98%;height:1px;background:#222}
    .mainNoti1 .notiList .date {display:inline-block;color:#444;font-size:16px}

    .mainNoti2 {margin-left:40px;width:688px}
    .mainNoti2 .notiSwiper {margin-top:10px;padding-top:25px}
    .mainNoti2 .notiSwiper .swiper-slide {width:339px}
    .mainNoti2 .notiSwiper .swiper-pagination {top:-12px;bottom:auto;text-align:right;width:100%}
    .mainNoti2 .notiSwiper .swiper-pagination-bullet {margin:0 4px;width:10px;height:10px;background:#fff;border:1px solid #1d85d4;opacity:1}
    .mainNoti2 .notiSwiper .swiper-pagination-bullet:last-of-type {margin-right:0}
    .mainNoti2 .notiSwiper .swiper-pagination-bullet-active {width:40px;background:#1d85d4;border-radius:15px}

    .mainNoti2 .notiSwiper .btn-swiper {display:block;width:40px;height:40px;background:rgba(0,0,0,0.6);transform:translateY(%);top: 55%;}
    .mainNoti2 .notiSwiper .btn-swiper:after {content:'';display:block;position:absolute;top:50%;width:10px;height:10px;border:solid #fff;border-width:2px 2px 0 0;}
	.mainNoti2 .notiSwiper .swiper-button-next {right:0}
    .mainNoti2 .notiSwiper .swiper-button-prev {left:0}
    .mainNoti2 .notiSwiper .swiper-button-next:after {transform:translate(-50%, -50%) rotate(45deg);left:47%;}
    .mainNoti2 .notiSwiper .swiper-button-prev:after {transform:translate(-50%, -50%) rotate(-135deg);left:57%;}
    .mainNoti2 .notiSwiper .swiper-button-disabled {opacity:1}

    .mainBusiness .businessSwiper {margin:0;padding:33px 20px 70px}
    .mainBusiness .businessSwiper .swiper-slide {width:275px;height:365px;box-shadow:1px 3px 12px 5px rgba(0,0,0,0.1);border-radius:15px}
    .mainBusiness .businessSwiper .swiper-slide:before {width:160px;height:160px;top:40px}
    .mainBusiness .businessSwiper .swiper-slide.item01:before {background-image:url('../images/main/bg_business_pc01.png')}
    .mainBusiness .businessSwiper .swiper-slide.item02:before {background-image:url('../images/main/bg_business_pc02.png')}
    .mainBusiness .businessSwiper .swiper-slide.item03:before {background-image:url('../images/main/bg_business_pc03.png')}
    .mainBusiness .businessSwiper .swiper-slide.item04:before {background-image:url('../images/main/bg_business_pc04.png')}
    .mainBusiness .businessSwiper .swiper-slide.item05:before {background-image:url('../images/main/bg_business_pc05.png')}
    .mainBusiness .businessSwiper .swiper-slide.item06:before {background-image:url('../images/main/bg_business_pc06.png')}
    .mainBusiness .businessSwiper .swiper-slide.item07:before {background-image:url('../images/main/bg_business_pc07.png')}
    .mainBusiness .businessSwiper .swiper-slide a {padding-top:235px}
    .mainBusiness .businessSwiper .swiper-slide .tit {font-size:24px}
    .mainBusiness .businessSwiper .swiper-slide .txt {font-size:16px}

    .mainBusiness .businessSwiper .btn-swiper {display:block;width:40px;height:40px;background:rgba(0,0,0,0.6);transform:translateY(-50%)}
    .mainBusiness .businessSwiper .btn-swiper:after {content:'';display:block;position:absolute;top:50%;width:10px;height:10px;border:solid #fff;border-width:2px 2px 0 0;}
    .mainBusiness .businessSwiper .swiper-button-next {right:0}
    .mainBusiness .businessSwiper .swiper-button-prev {left:0}
    .mainBusiness .businessSwiper .swiper-button-next:after {transform:translate(-50%, -50%) rotate(45deg);left:47%;}
    .mainBusiness .businessSwiper .swiper-button-prev:after {transform:translate(-50%, -50%) rotate(-135deg);left:57%;}
    .mainBusiness .businessSwiper .swiper-button-disabled {opacity:1}

    .mainSec2 {padding-bottom:40px}
    .mainSec2 .inner {-webkit-display:flex;-ms-display:flex;-o-display:flex;-moz-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-o-flex-direction:row;-moz-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;-ms-justify-content:space-between;-o-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between}
    .mainSec2 .mainPromote {width:610px}
    .mainWrap .snsList {margin-top:36px}
    .mainWrap .snsList li {width:40px;height:40px}
    .mainWrap .snsList li + li {margin-left:10px}
    .mainPromote .promoteSwiper {margin-top:20px}
    .mainPromote .promoteCont .linkMore a {padding:5px 40px 5px 17px;font-size:16px}
    .mainPromote .promoteCont .linkMore a:after {width:14px;height:14px;right:19px;top:10px}
    .mainPromote .promoteSwiper .swiper-slide {width:610px}
    .mainPromote .videoCont {margin-top: 20px;align-items: center;background: #fff;border: 1px solid #ddd;} /* 2022.05.03 */
	.mainPromote .videoCont .video_txt {border-top: 1px solid #ddd;}

    .mainCustomerSvc {padding-bottom:0;width:580px;background:url('../images/main/bg_character_hrdk.png') no-repeat right 115px / 210px auto}
    .mainCustomerSvc .csCont {margin-top:96px;-webkit-display:flex;-ms-display:flex;-o-display:flex;-moz-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-o-flex-direction:row;-moz-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;-ms-justify-content:space-between;-o-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between}

    /*ÁöºÎÁö»çÃ£±â ¹× ESG¸µÅ© Ãß°¡ÈÄ »èÁ¦ - »ç¿ëÇÏÁö¾ÊÀ½*/
    /*
    .mainCustomerSvc .csTel {margin-top:0;padding:20px;width:305px;height: 397px;text-align:left;}
    .mainCustomerSvc .csTel .tit {font-size:26px}
    .mainCustomerSvc .csTel .txt {margin-top:8px;font-size:18px}
    .mainCustomerSvc .csTel .tel {font-size:34px}
    .mainCustomerSvc .csTel .tel + .txt {margin-top:35px}
    .mainCustomerSvc .csTel .time {font-size:18px}
    */
    .mainCustomerSvc .csMenu {width:265px}
    .mainCustomerSvc .csMenu ul {margin-top:-11px}
    .mainCustomerSvc .csMenu li {width:calc((100% - 10px) / 2);height: 125px;}
    .mainCustomerSvc .csMenu li a {padding:80px 0 0 0;height:100%;font-size:16px;text-align:center}
    .mainCustomerSvc .csMenu .csMenuLi01 a {background:#fff url('../images/main/icon_cs_menu_pc01.png') no-repeat center 30px / 31px auto}
    .mainCustomerSvc .csMenu .csMenuLi02 a {background:#fff url('../images/main/icon_cs_menu_pc02.png') no-repeat center 31px / 49px auto}
    .mainCustomerSvc .csMenu .csMenuLi03 a {background:#fff url('../images/main/icon_cs_menu_pc03.png') no-repeat center 29px / 42px auto}
    .mainCustomerSvc .csMenu .csMenuLi04 a {background:#fff url('../images/main/icon_cs_menu_pc04.png') no-repeat center 27px / 39px auto}
    .mainCustomerSvc .csMenu .csMenuLi05 a {background:#fff url('../images/main/icon_cs_menu_pc05.png') no-repeat center 26px / 49px auto}
    .mainCustomerSvc .csMenu .csMenuLi06 a {background:#fff url('../images/main/icon_cs_menu_pc06.png') no-repeat center 32px / 42px auto}

    .mainSec3 {padding:40px 0}
    .companySwiper .swiper-wrapper {-webkit-display:flex;-ms-display:flex;-o-display:flex;-moz-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-o-flex-direction:row;-moz-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;-ms-justify-content:space-between;-o-justify-content:space-between;-moz-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;margin-top:-10px}
    .companySwiper .swiper-slide {margin-top:10px;width:calc((100% - 50px) / 6)}

    /* layer */
    .fullLayerPop {display:none;position:fixed;top:0;right:0;left:0;bottom:0;background:#fff;z-index:101}
    .fullLayerPop .layerHeader {height:90px;padding:24px 0 29px;background:#137fd2}
    .fullLayerPop .layerHeader .layerTit {font-size:26px;font-weight:500;color:#fff}
    .fullLayerPop .btnLayerClose {position:absolute;right: 50%;top: 25px;transform: translateX(640px);width:40px;height:40px;background:url('../images/main/icon_close_white.png') no-repeat center / 20px}
    .fullLayerPop .layerCont {padding-top:40px;height:calc(100vh - 90px);overflow-y:auto}
    .fullLayerPop .layerCont.bgHrdk {background:#fafbfc url('../images/main/bg_hrdk_big.png') no-repeat center / 1712px auto}
    .fullLayerPop .snsList {margin-top:0;-webkit-justify-content:end;-ms-justify-content:end;-moz-justify-content:end;-o-justify-content:end;justify-content:end}
    .allMenuWrap {margin-top:40px;position:relative}
    .allMenuDep1 .dep1 + .dep1 {margin-top:10px}
    .allMenuDep1 .dep1 > a {display:block;width:184px;height:55px;font-size:20px;border:1px solid #ddd;background:#fff;padding:0 20px;line-height:54px;letter-spacing:-0.5px}
    .allMenuDep1 .dep1.on > a, .allMenuDep1 .dep1 > a:hover {color:#222;border-color:#137fd2;background:#f2f8fe}
    .allMenuDep1 .dep1.on .allMenuDep2 {display:block;-webkit-display:flex;-ms-display:flex;-o-display:flex;-moz-display:flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;-o-flex-direction:row;-moz-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;}
    .allMenuDep2 {display:none;position:absolute;top:0;left:304px;margin-top:-8px}
    .allMenuDep2 .dep2 {margin-bottom:110px;width:308px}
    .allMenuDep2 .dep2 > a {color:#137fd2;font-size:24px;font-weight:500}
    .allMenuDep3 {margin-top:7px}
    .allMenuDep3 .dep3 + .dep3 {margin-top:5px}
    .allMenuDep3 .dep3 > a {font-size:18px}
    .allMenuDep3 .dep3 > a:hover, .allMenuDep3 .dep3 > a:focus {border-bottom:1px solid #222;color:#222}
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .mainVisualSwiper .swiper-pagination {top:443px}
}

/*2023Ãß°¡*/
/*20230214 °í°´¼¾ÅÍ, ÁöºÎÁö»ç Ã£±â, hrdk ESG¸µÅ© Ãß°¡*/
   .csBanner {
        width:310px; height:397px;
        display: flex;
        /* flex-direction: column; */
        justify-content:space-between;
        flex-wrap: wrap;
        align-items: center; }
    .csBanner > div:last-child { border:none;}
    .bannerList     { width:100%; border-bottom: 1px solid #c4c5c9; height:calc(100% / 3); display: flex;}
    .bannerList > a { width:100%; display: flex; flex-direction: row; align-items:center}
    .bannericon { min-width: 90px; height: 90px; border: 1px solid #b5b5b5; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
    .bannericon.bgWhite { background-color: #fff;}
    .bannericon.bgBlue  { background-color: #d5eafd;}
    .bannericon p  { width: 50px; height: 50px; }
    .bannericon p.bg01{
        background-position: center;
        background: url(../images/main/bannericon_01.png) center no-repeat;
        background-size:contain
    }
    .bannericon p.bg02{
        background-position: center;
        background: url(../images/main/bannericon_02.png) center no-repeat;
        background-size:contain
    }
    .bannericon p.bg03{
        background-position: center;
        background: url(../images/main/bannericon_03.png) center no-repeat;
        background-size:contain
    }
    .bannertxt  {padding-left: 8px; letter-spacing: -0.5px }
    .bannertxt h3 { font-weight: 500;font-size: 22px; line-height: 22px}
    .bannertxt h3.branchTitle  {color: #444; font-size: 16px; font-weight: 300; line-height: 18px}
    .bannertxt p { font-weight: 300; font-size: 15px; line-height:17px;padding-top: 10px}
    .bannertxt p.telephone  { font-size: 30px; font-weight: 500; line-height: 30px; padding:0}
    .bannertxt p.branchInfo { font-size: 22px; font-weight: 400; line-height: 22px; letter-spacing: -1.15px }


/*¸ÞÀÎ ¸ð´ÞÇüÅÂ ÆË¾÷*/
@media screen and (max-width: 1400px) {
    #mainPopup_closeBtn { right:85px;} 
    .mainPopup_modal_group  { width:90%;}
    .mainPopup_modal_group .popSwiper   {width:98%;}
    .mainPopup_modal_group .popSwiper .swiper-slide     { width:32.8%; height:430px !important; }
    .mainPopup_modal_group .popSwiper .swiper-slide img { width:100%; max-height: 430px !important;}
    .mainPopup_modal_group .swiper-button-next {right:-35px;}
    .mainPopup_modal_group .swiper-button-prev {left:-35px;}
    .mainPopup_modal_group .swiper-pagination  {bottom:0;}
}

@media screen and (max-width: 1100px) {
    .mainPopup_modal_group  { width:100% ;}
    .mainPopup_modal_group .popSwiper   {width:95%;}
    .mainPopup_modal_group .popSwiper .swiper-slide     { width:50%; height:430px !important; }
    .mainPopup_modal_group .popSwiper .swiper-slide img { width:100%; max-height: 430px !important;}
    .mainPopup_modal_group .swiper-button-next {right:-10px;}
    .mainPopup_modal_group .swiper-button-prev {left:-10px;}
    .mainPopup_modal_group .swiper-pagination   {bottom:0;}
}


@media all and (max-width:1023px)  {
    .mainCustomerSvc .csBanner {  width:100%; height:auto; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px; border-top: 3px solid #137fd2 ; }
     .bannerList > a { width:100%; padding:15px; min-height:150px; display: flex; flex-direction: column; align-items:center; text-align: center;}
     .bannericon     { min-width:45px; height:45px; margin-bottom: 10px; }
     .bannericon p   { width: 35px; height: 35px  }
     .bannertxt h3   { font-weight: 500;font-size: 18px; line-height: 18px}
     .bannertxt h3.branchTitle  {font-size: 14px; line-height: 16px}
     .bannertxt p.telephone     { font-size: 20px; line-height:27px; padding:0}
     .bannertxt p.branchInfo    { font-size: 20px; line-height:20px; letter-spacing: -1.15px }

 }

/*¸ÞÀÎ ¸ð´ÞÇüÅÂ ÆË¾÷*/
@media screen and (max-width: 800px) {
     #mainPopup_closeBtn  { position: absolute;  right:45%;  top:-50px; }
     .mainPopup_modal_group .popSwiper .swiper-slide     { width:98%; height:430px !important;  display: flex; justify-content: center; align-items: center; justify-content: center;}
     .mainPopup_modal_group .popSwiper .swiper-slide img { width:100%; margin: 0 auto; }
     .mainPopup_modal_group .swiper-pagination   { bottom: -20px;}
     .mainPopup_modal_group .swiper-button-next  { display: none;}
     .mainPopup_modal_group .swiper-button-prev  {display: none}
}



