/* skip nav */
.skip-nav { position:absolute; left:0; top:-3rem; z-index:9999; }
.skip-nav li { position:absolute; left:0; top:0; width:20rem; }
.skip-nav a { position:absolute; left:1rem; top:0; display:block; width:100%; height:3rem; line-height:3rem; color:#fff; background:var(--black); text-align:center; }
.skip-nav a:focus { top:4rem; }
.skip-nav a:focus,
.skip-nav a:focus-visible {outline: 0.4rem dashed #000; outline-offset: 0.3rem;}

/* header가 고정이어서 포커스 시에 적절하게 이동하도록 수정 */
#contents :focus{scroll-margin-top: 180px; scroll-margin-bottom: 20px;}

/* header */
#header{position:relative; z-index:10; box-sizing:border-box;}
.header-top{ margin:0 auto; padding: 0 2.4rem; height:11rem; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items: center;}
.header-top-inner { width: var(--width-max); margin: 0 auto;height: 11rem;box-sizing: border-box; display: flex;flex-wrap: wrap; align-items: center;}
#header .header-logo > a { display: block;position: relative; width: 27.8rem;height: 3.7rem;}
#header .header-logo > a::before  {display:block; content:'' ;  min-width: 22.9rem; height: 4rem; background: url("/images/eng/common/top_logo.png") no-repeat 0 0 / auto 100%;}
#header.on:not(.active) .header-logo > a::before  {display:block; content:'' ;  min-width: 22.9rem;height: 4rem; background: url("/images/eng/common/top_logo_w.png") no-repeat 0 0 / auto 100%;}

.header-nav .gnav-dep2 a.blank:after{display:inline-block;content:''; width:1.6rem;height:1.6rem; background:url(/images/eng//common/ic_window.svg) 0 0 no-repeat; margin-left:0.5rem; vertical-align:middle;}

#header.header_main{position:absolute;left:0;right:0;top:0;}
#header.active .header-top {background-color: #fff;}
#header.fixed .header-top {position:fixed;left:0;right:0;top:0;box-shadow:0 0.5rem 3rem rgba(0,0,0,0.35);background-color:#fff !important;}
#header.fixed.on .header-top .header-nav .gnav-dep1 > li > a{color:#2d2d2d;}

#header.header_main.fixed.on .header-logo > a::before{background:url("../../images/common/img_top_logo.png") no-repeat 0 0 / auto 100%;}
#header.header_main.on:not(.active) .header-nav .gnav-dep1 > li > a {color: #fff;}
#header.header_main.on .header-nav .gnav-dep1 > li:not(.active) > a::after {background-image: url("/images/common/arr_gnav_dep1_down_w.svg");}

.btn-menu-mobile{width:5.7rem;height:8.5rem; background: url(/images/eng/common/ic_menu.svg) center center / 3.6rem auto no-repeat; text-align:left; text-indent:-9999rem; overflow:hidden; position:absolute;right:0;top:0; display:none;}
.btn-menu-mobile.close:before{background-image: url(/images/eng/common/ic_menu_close.svg);}

.header-nav{flex: 1;max-width: 90rem;margin: 0 auto;}
.header-nav .gnav-dep1{display:flex; align-items: flex-start; justify-content: space-around;}
.header-nav .gnav-dep1 > li{box-sizing:border-box;}
.header-nav .gnav-dep1 > li > a{display:flex; align-items: center; justify-content: center; height: 11rem; padding: 0 2rem; text-align:center; font-size: 1.8rem; font-weight:600; color:var(--gray-70); position:relative;}
.header-nav .gnav-dep1 > li.active a::after {background-image: url("/images/common/arr_gnav_dep1_up.svg");}
.header-nav .gnav-dep1 > li > a::after{content: '';display: block;width: 2rem;height:2rem;margin-left: .8rem;background: url("/images/common/arr_gnav_dep1_down.svg") center no-repeat;}
.header-nav .gnav-dep1 > li > a:hover{color:var(--primary);}

.header-nav .gnav-dep2{border-top: 0.1rem solid #cecece; position: absolute; height: 6rem; top: 100%; left: 0; right:0; background-color: rgba(255, 255, 255, 0.97);   box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.05); display:none;}
.header-nav .gnav-dep2 ul{max-width:90rem;width:fit-content; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.header-nav .gnav-dep2 li{float: left; flex: 0 1 auto; text-align: center;}
.header-nav .gnav-dep2 a{display:block; padding:0 3rem; font-size: 1.4rem; line-height: 6rem; color:var(--gray-70); font-weight:500;}
.header-nav .gnav-dep2 a:hover{color:var(--primary); text-decoration:underline;text-underline-position : under;}
.header-nav .gm2 .gnav-dep2{padding-left:9.5rem;}
.header-nav .gm3 .gnav-dep2{padding-left:30rem;}
.header-nav .gm4 .gnav-dep2{padding-left:65rem;}
.header-nav .gm5 .gnav-dep2 ul{justify-content: flex-end;}

/* active */
.header-nav .gnav-dep1 > li.active > a{color:var(--primary); position:relative;}
.header-nav .gnav-dep1 > li.active > a::before{display:block; content:''; width: 100%; height:0.2rem; position:absolute; left: 0; top:100%; background-color:var(--primary); z-index:10; }
.header-nav .gnav-dep1 > li.active .gnav-dep2{display:block;}


/* mobile nav */
.mobile-nav{position:fixed;left:0;top:0;right:0;bottom:0; background-color:#fff; z-index:90; box-sizing:border-box; display:none;}
.mobile-nav.active{display:block;}

.mobile-nav-header{background-color:var(--primary);padding:2rem; height:8.5rem; box-sizing:border-box; display:flex; align-items: center; position:relative;}
.mobile-nav-header .tit{color:#fff; font-size:1.8rem; margin-right:2rem;}
.mobile-nav-header .lang-select{background-color:#2E3F83;}
.mobile-nav-header .lang-select a{background-color:#2E3F83; color:#fff;}
.mobile-nav-header .lang-select a.selected{ background-color:#fff; color:#2E3F83;}

.mobile-nav .btn-menu-close{width:4rem;height:4rem; text-align:left; text-indent:-9999rem; overflow:hidden; position:absolute;right:1rem;top:50%; margin-top:-2rem; background:url(/images/eng//common/ic_menu_close.svg) center / 2.2rem auto no-repeat;}

#gnav-m{height:100%; overflow-y:auto;}

.mobile-nav .gnav-dep1{position:relative; height:100%;}
.mobile-nav .gnav-dep1 > li > a{display:flex; align-items: center; width:13rem; height:5.4rem; font-size:1.4rem; color:var(--gray-70); position:relative; padding:1rem 0; border-bottom: 0.1rem solid #ccc; padding:0 1.5rem; box-sizing:border-box;  white-space:nowrap; font-weight:500;}

.mobile-nav .gnav-dep2{padding:1rem 0; display:none; position:absolute;left:13rem;right:0;top:0;bottom:0; border-left: 0.1rem solid #ccc;}
.mobile-nav .gnav-dep2 > li > a{display:block; padding: 1.5rem 2rem; font-size:1.4rem; color:var(--gray-70); position:relative;}

.mobile-nav .gnav-dep3{padding:1rem; background-color: #F8F8F8; display:none;}
.mobile-nav .gnav-dep3 > li > a{padding:1rem 0 1rem 2rem; box-sizing: border-box; font-size:1.4rem; display:block;;position: relative;}

.mobile-nav .gnav-dep1 > li.active > a{color: var(--primary); font-weight:600;}
.mobile-nav .gnav-dep1 > li.active .gnav-dep2{display:block;}
.mobile-nav .gnav-dep2 > li.active .gnav-dep3{display:block;}

.mobile-nav .gnav-dep2 > .is-sub > a:before,
.mobile-nav .gnav-dep2 > .is-sub > a:after {
    content: "";
    position: absolute;
    display: block;
    width: 1.2rem;
    height: 0.2rem;
    border-radius: 1.2rem;
    background-color: #545656;
    right: 2.5rem;
    top: 50%;
    margin-top:-0.1rem;
    transition: 0.3s;
}
.mobile-nav .gnav-dep2 > .is-sub > a:before {
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
.mobile-nav .gnav-dep2 > .is-sub.active > a:before{transform: rotate(0);}

.lang-select{display:inline-flex; align-items: center;  background-color: #7991B4; border-radius:1.2rem;}
.lang-select a{display:inline-flex; align-items: center; padding: 0 1rem; font-weight: 500; color: #fff; border-radius: 1.2rem; background-color: #7991B4; font-size:1.4rem; height:2.4rem;}
.lang-select a.selected{background-color: var(--primary);}
.lang-select a:focus-visible{outline-style:dashed; outline-width:0.3rem;}

/* footer */
#footer{border-top:0.1rem solid #888;}
.footer-inner{max-width:var(--width-max); margin:0 auto; padding:4rem 2rem 8rem; display:flex;}
.footer-contents{flex: 0 1 46rem; width: 46rem; padding-right: 7rem; box-sizing:border-box;}

.footer-logo{margin-bottom:3rem;}
.footer-logo img{height:3rem;}

.footer-info{position:relative;}
.footer-address{color:var(--gray-70); margin-bottom:1rem;}
.footer-copyright{font-size:1.2rem; color:var(--gray-50);}

.footer-sitemap{flex: 1 1 auto; padding: 1rem 0 0 7rem; position: relative; font-size:1.4rem; border-left:0.1rem solid #E8E8E8;}
.footer-sitemap .dep1{display:flex;}
.footer-sitemap .dep1 > li{width:20%; box-sizing:border-box; padding-right:1rem;}
.footer-sitemap .dep1 > li > a{font-weight:600;}
.footer-sitemap .dep2{margin-top:1.5rem;}
.footer-sitemap .dep2 > li > a{font-size:1.3rem;}
.footer-sitemap .dep2 > li + li{margin-top:1.5rem;}

.go-top{position:fixed; right:2rem; bottom:2rem; transition: 0.3s; /* opacity: 0; visibility: hidden; */ }
.btn-float{width: 6.4rem; height: 6.4rem; appearance: none; background-color: transparent; position: relative; padding: 1.7rem 2.2rem; background-color: #fff; border-radius: 50%; box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3); text-align: left; text-indent: -9999rem; overflow: hidden;}
.btn-float:after{content: ""; display: block; width: 2rem; height: 2.3rem; background-image: url(/images/eng//common/ic_float.png); background-repeat: no-repeat; background-size: cover; position: absolute; left: 50%; top: 50%; margin: -1.1rem 0 0 -1rem;}

/* sub */
.container-inner{width: var(--width-max);max-width: calc(100% - 4.8rem);margin: 0 auto;display: flex;align-items: flex-start;padding: 4rem 0 10rem;}

.side-wrap{width:32rem; margin-right:6rem; flex-shrink: 0;}
.side-header{height:7.5rem; box-sizing:border-box; text-align:left; display:flex;}
.side-header h2{font-size:2.4rem; color:var(--gray-70); font-weight:700;}
.side-nav{border: 0.1rem solid #E8E8E8; border-radius: 2rem; padding:2.5rem 3rem;}
.side-nav a{display:block;}
.side-nav a.blank:after{display:inline-block;content:''; width:1.6rem;height:1.6rem; background:url(/images/eng//common/ic_window.svg) 0 0 no-repeat; margin-left:0.5rem; vertical-align:middle;}
.snav-dep1 > li{border-bottom: 1px solid #E8E8E8;}
.snav-dep1 > li > a{color:var(--gray-70); padding: 1.5rem 0; font-weight: 700; font-size: 1.8rem; position:relative;}
.snav-dep1 > li.is-sub > a:before,
.snav-dep1 > li.is-sub > a:after{content: ""; position: absolute; display: block; width: 1.2rem; height: 0.2rem; border-radius:0.2rem; background-color: #545656; right: 2.5rem; top: 50%;}
.snav-dep1 > li.is-sub > a:before{right:2.5rem; width: 1.2rem; height: 0.2rem; margin-top:-0.1rem;}
.snav-dep1 > li.is-sub > a:after{right:3rem; width: 0.2rem; height: 1.2rem; margin-top:-0.6rem;}
.snav-dep1 > li > a:hover{color:var(--primary);}
.snav-dep2{padding:2rem 0; border-top: 0.1rem solid #E8E8E8; display:none;}
.snav-dep2 > li > a{font-size: 1.6rem; font-weight:500; padding: 0.8rem 2rem; position: relative;}
.snav-dep2 > li > a:before{content: ""; display: block; position: absolute; top: 2rem; left: 1rem; width: 0.3rem; height: 0.3rem; border-radius: 0.3rem; background-color: #545656;}
.snav-dep2 > li > a:hover{color:var(--primary);}

.snav-dep1 > li.is-sub.active > a:after{display:none;}
.snav-dep1 > li.active{position:relative;}
.snav-dep1 > li.active:before{display: block; content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: #425ABE; position: absolute; left: 0; top: 2.8rem;}
.snav-dep1 > li.active > a{color:var(--primary); padding-left:1rem;}
.snav-dep1 > li.active .snav-dep2{display:block;}
.snav-dep2 > li.active > a{color:var(--primary); text-decoration:underline 0.1rem; text-underline-position:under; font-weight:600;}

.content-wrap{width: calc(100% - 38rem);}

.sub-header{margin-bottom:3rem;}
.sub-header .sub-route{height:7.5rem; display:flex; justify-content: flex-end; font-size:1.4rem; box-sizing:border-box; padding-top:0.5rem;}
.sub-header .sub-route ul{display:flex; flex-wrap:wrap; line-height:2rem; padding-left:5rem; position:relative;}
.sub-header .sub-route li{white-space:nowrap; position:relative; padding-right:2rem; margin-right:1rem;}
.sub-header .sub-route li:after{content:'';display:block; width:1rem;height:1rem; background:url(/images/eng//common/arr_route.svg) center / cover no-repeat; position:absolute;right:0;top:0.5rem;}
.sub-header .sub-route li:last-child{font-weight:600; color:var(--gray-70); margin:0;}
.sub-header .sub-route li:last-child:after{display:none;}
.sub-header .sub-route .home{height:2rem; position:absolute;left:0;top:0;}
.sub-header .sub-route .home span{display:block;width:2rem;height:2rem; background:url(/images/eng//common/ic_home.svg) center center no-repeat; text-align:left; text-indent:-9999rem; overflow:hidden;}
.sub-header .sub-title{color:var(--gray-90); height:5.5rem; border-bottom:0.2rem solid #6A6A6A; box-sizing:border-box;font-size:2.4rem; font-weight:600; box-sizing:border-box; padding-top:0.5rem;}

.sub-contents{min-height:40rem;}

/* 만족도조사 */
.page-satisfaction{padding:3rem; background-color: #F7F9FB; border-radius: 2rem; overflow:hidden; margin-top:8rem; display:flex; align-items: flex-end;}
.satisfaction-survey{flex:1;}
.satis-survey-form{display:flex; align-items: flex-end;}
.satis-survey-item{flex:1;}
.satis-survey-form .qustion{font-size:1.6rem; color:var(--gray-70); font-weight:600; margin-bottom:2rem;}
.satis-survey-form .options{display:flex;}
.satis-survey-form .options li{margin-right:1rem; flex:1;}
.satis-survey-form .options label{flex: 1 1 auto; width:100%; height: 10rem; border: 0.1rem solid #E8E8E8; border-radius: 1rem; position:relative; overflow:hidden; text-align:center; padding:1.5rem 0 0 0; margin:0; font-size:1.4rem; box-sizing:border-box;}
.satis-survey-form .options label input{position:absolute;left:-0.1rem;top:-0.1rem; width:0.1rem;height:0.1rem;}
.satis-survey-form .options label span{display:block;margin:0; position:relative;}
.satis-survey-form .options label span:before{display:block;content:''; width:3.4rem;height:3.2rem; margin:0 auto 1.5rem auto; background-position:0 0; background-repeat:no-repeat;}
.satis-survey-form .options label span.stat1:before{background-image:url(/images/eng//common/ico_satis1.png);}
.satis-survey-form .options label span.stat2:before{background-image:url(/images/eng//common/ico_satis2.png);}
.satis-survey-form .options label span.stat3:before{background-image:url(/images/eng//common/ico_satis3.png);}
.satis-survey-form .options label span.stat4:before{background-image:url(/images/eng//common/ico_satis4.png);}
.satis-survey-form .options label span.stat5:before{background-image:url(/images/eng//common/ico_satis5.png);}
.satis-survey-form .btn-submit{width:8rem;height:10rem; border-radius:1rem; background-color: #2457A9; color:#fff; font-size:1.4rem; font-weight:600; padding:0; flex-shrink: 0;}
.satis-survey-form .btn-submit:focus-visible{outline:0.3rem dotted #000;}

.satis-survey-form .options label:focus-within{background-color:#fff; border-color:#2457A9;}
.satis-survey-form .options label input:checked + span{font-weight:bold;}
.satis-survey-form .options label input:checked + span:before{background-position:0 -3.5rem;}

.page-satisfaction .call-center{position:relative; padding-left:5.2rem; margin:1.5rem 0; margin-left:3rem; display:flex; flex-wrap:wrap; align-items: baseline; min-height:5.2rem; width:22rem; flex-shrink: 0; box-sizing:border-box;}
.page-satisfaction .call-center:before{display:block;content:''; width:5.2rem;height:5.2rem; background:url(/images/eng//common/ico_callcenter.png) 0 0 / contain no-repeat; position:absolute;left:0;top:-0.3rem;}
.page-satisfaction .call-center .call-title{font-size:2rem; color: #2457A9; position:relative; margin-right:1rem;}
.page-satisfaction .call-center .call-number{font-size:2rem; font-weight:bold; color: #6A6A6A;}
.page-satisfaction .call-center .call-number b:nth-child(1){color: #F49302;}
.page-satisfaction .call-center .call-number b:nth-child(2){color: #13A538;}
.page-satisfaction .call-center .call-number b:nth-child(3),
.page-satisfaction .call-center .call-number b:nth-child(4){color: #2B2171;}

/* 담당자 */
.manager-wrap {display: flex; justify-content: flex-end; margin: 8rem 0 4rem;}
.manager-wrap .manager-box {display: flex; align-items: center; justify-content: center; border: 0.1rem solid #E8E8E8; line-height: 2.4rem; border-radius: 2rem; padding: 1rem 2rem; font-size: 1.2rem; color: #6A6A6A;}
.manager-wrap .manager-info { padding-left: 1.8rem; position: relative;}
.manager-wrap .manager-info:before { content: ""; display: block; position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 0.1rem; height: 0.8rem; background-color: #E8E8E8;}
.manager-wrap .manager-info li {line-height: 1.5;}
.manager-wrap .manager-info li + li { margin-top: 0.5rem; }
.manager-wrap .manager-info li > span + span {position: relative; padding-left: 1.5rem;}
.manager-wrap .manager-info li > span + span:before {content: "-"; display: block; position: absolute; left: 0.4rem; top: 50%; transform: translateY(-50%);}


/* mobile */
@media all and (max-width:1320px){
    /* .container-inner{width:auto; padding:3.5rem 2rem 10rem 2rem;} */
}

@media all and (max-width:1280px){
    .side-wrap{width:25%;}
}

@media all and (min-width:1080px){
    .mobile-nav{display:none !important;}
}

@media all and (max-width:1080px){

    #header{height:8.5rem; position:fixed;left:0;top:0;right:0; background-color:#fff; border-bottom: 0.1rem solid #CECECE;}
    .header-top-inner{height:5rem;}
    .header-top{height:8.5rem; padding:1.4rem 2rem;}
    .header-top h1{margin:0; display:inline-flex; align-items: center;}
    .header-top h1 img{height:3.7rem;}
    .header-top .lang-select{display:none;}
    .top-search{display:none;}
    .top-links{display:none; margin:0;}
    .zoom-control{display:none;}
    .header-nav{display:none;}
    .btn-menu-mobile{display:block;}

    .container-inner{margin-top:0; display:block; padding:0 2rem 6rem 2rem;}

    .side-wrap{display:none;}

    .content-wrap{width:auto;padding-top:8.5rem;}
    
    .sub-header{margin-bottom:3rem;}
    .sub-header .sub-title{font-size:1.8rem; margin-top:2.5rem; color: #425ABE; height:auto; padding-bottom:1.5rem; border-color:#D9D9D9;}
    .sub-header .sub-route{height:auto; font-size:1.2rem; justify-content: flex-start; padding: 1.5rem 2rem; background-color: #F8F8F8; margin:0 -2rem;}

    .page-satisfaction{margin-top:4rem; margin-bottom:-2rem; padding:0; background:none; flex-wrap:wrap;}
    .satisfaction-header{padding:2rem;}
    .satisfaction-header .slogan{font-size:1.4rem;}
    .satisfaction-header .person-info{font-size:1.2rem;}
    .satisfaction-survey{padding:2rem; background-color: #F7F9FB; width:100%;}
    .page-satisfaction .call-center{margin:4rem 0 0 0; width:100%;}

    #footer{border-top:none; background-color: #F3F3F3;}
    .footer-inner{padding:4rem 2rem; display:block;}
    .footer-contents{flex: 0 1 auto; width: auto; padding: 0;}
    .footer-sitemap{display:none;}

    .footer-logo{margin-bottom:2rem;}
    .footer-notice{display:none;}
    .footer-links{margin-bottom:1rem;}
    .footer-links a{padding:0 0.5rem; font-weight:500; font-size:1.1rem;}
    .footer-address{font-size:1.2rem; font-weight:500;}
    .footer-outlinks{margin-top:2rem;}
    .footer-mark{display:none;}

    .manager-wrap {justify-content: flex-start;}
    .manager-wrap .manager-box {border: 0; padding: 0; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; }
    .manager-wrap .tit{display: inline-block; font-size: 1.4rem; font-weight: 700; color: #fff; background-color: #425ABE; padding: 0 1rem; border-radius: 1rem 0;}
    .manager-wrap .manager-info {padding-left: 0; margin-top: 1rem;}
    .manager-wrap .manager-info:before {content: none;}
    .manager-wrap + .page-satisfaction {margin-top: 3rem;}

}

@media all and (max-width:1024px){
	.content-wrap{padding-top:2rem;}
}

@media all and (max-width:768px){

    .header-top h1{height: 100%;}
    .satisfaction-header .person-info{width:100%; margin:0.8rem 0 0 0;}

}

@media all and (max-width:600px){

    .satis-survey-form{flex-wrap:wrap; position:relative;}
    .satis-survey-form .options{flex-wrap:wrap; margin:-0.2rem;}
    .satis-survey-form .options li{width:calc(100% / 3 - 0.4rem); margin:0.2rem; flex:0 0 auto;}
    .satis-survey-form .btn-submit{position:absolute;right:0;bottom:0; width:calc(100% / 3 - 0.2rem);}

    .page-satisfaction .call-center .call-title{font-size:1.6rem;}

}

@media all and (max-width:430px){

    .footer-links{display:block; margin-bottom:2rem;}
    .footer-links .outer-links{margin:1.5rem 0 0 0;}
    .related-links summary{width:100%;}

}