@charset "UTF-8";
/*
헤더
헤더가 들어가는 _Layout.cshtml에 링크 삽입 max-width:1656px;
*/

#wrapper > header {position:fixed; z-index:1000; top:0;  right:0; left:0; background-color:rgba(255,255,255,1);/* transition-property:background-color; transition-duration:.1s; transition-timing-function: ease-in; */}
#wrapper > header > #header-pc {display:flex; justify-content:space-between; align-items:center; height:6.5rem; margin:0 auto; transition-property:height; transition-duration:.3s; transition-timing-function: ease-in;}

#header-pc-logo {width:182.5px; height:30px; margin-left:20px; background-repeat:no-repeat; background-position:center center; background-size:contain;}

#header-pc-link {width:30px; padding-right:20px;}

#header-mb-link {width:30px; padding-right:20px;}
#header-mb-link > .header-mb-sitemap {width:30px; height:30px; background-color:transparent; background-image:url('/images/default/sitemap.svg'); background-repeat:no-repeat; background-position:center center; background-size:contain;}
#header-mb-link > .header-mb-sitemap:focus-visible {outline:-webkit-focus-ring-color auto 1px;}
#wrapper > header > #header-mb {position:fixed; z-index:1001; top:0; right:-100%; bottom:0; width:100%; background-color:#fff; transition-property:right; transition-duration:.3s; transition-timing-function:    cubic-bezier(0.7,0.25,0.75,0.2); -ms-user-select: none;  -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;}
#header-mb-back {position:fixed; z-index:1000; top:0; right:0; bottom:-300px; left:0; background-color:rgba(255,255,255,0);}

#header-mb-header {display:flex; justify-content:space-between; align-items:center; position:absolute; top:0; right:0; left:0; height:30px; padding:13px 20px 23px; background-color:#fff;}
#header-mb-header > .header-mb-logo {width:146px; height:24px; background-repeat:no-repeat; background-position:center center; background-size:contain;}
#header-mb-header > div {display:flex; justify-content:space-between;}
#header-mb-header > div > .header-mb-changelang {display:flex; justify-content:space-between; align-items:center; margin-right:9px;}
#header-mb-header > div > .header-mb-changelang > button {display:block; margin-right:20px; background-color:transparent; line-height:24px; font-size:14px; color:#777;}
#header-mb-header > div > .header-mb-changelang > button.lang-active {border-bottom:1px solid #a72429; font-weight:500; color:#000;}
#header-mb-header > div > .header-mb-close {width:30px; height:30px; background-repeat:no-repeat; background-position:center center; background-size:contain;}
#header-mb-header > div > .header-mb-close:focus-visible {outline:-webkit-focus-ring-color auto 1px;}
#header-mb-nav {position:absolute; top:66px; right:0; bottom:0; left:0; overflow-y:scroll;}
#header-mb-nav::-webkit-scrollbar{display:none;}
.header-mb-navs > .header-mb-nav {cursor:pointer;}
.header-mb-nav-title {display:flex; justify-content:space-between; align-items:center; width:100%; height:6.3rem; padding:0 15px; border-bottom:2px solid #ebebeb;}
.header-mb-nav-title:focus-visible {outline:-webkit-focus-ring-color auto 1px;}
.header-mb-nav-title > span {font-size:1.8rem; font-weight:500;}
.header-mb-nav-title > svg {fill:#444; transition-property:transform; transition-duration:.3s; transition-timing-function: ease-in;}
.header-mb-nav-title.mb-nav-active {background-color:#a72429;}
.header-mb-nav-title.mb-nav-active > span {color:#fff;}
.header-mb-nav-title.mb-nav-active > svg {fill: #fff;}
.header-mb-subnavs {display:none; background-color:#f3f3f3;}
.header-mb-subnavs > li > a {display:block; padding:14px 30px 13px; border-bottom:1px solid #ebebeb;}
.header-mb-subnavs > li > a > span {display:in line-block; line-height:2.5rem; font-size:1.7rem; color:#444;}
.header-mb-subnavs > li > a > span.mb-nav-active {/* border-bottom:1px solid #a72429; */ font-weight:500; color: #a72429;}
.header-mb-link {display:flex; justify-content:center; align-items:center; margin:32px 0 23px;}
.header-mb-link > * {display:block; text-align:center; line-height:2rem; font-size:1.4rem; font-weight:300; color:#777;}
.header-mb-link > span {width:1px; height:1rem; margin:0 14px; background-color:#b7b7b7;}
.header-mb-sns {display:flex; justify-content:center; align-items:center; height:3rem; padding-bottom:20px;}
.header-mb-sns > a {display:inline-block; margin:0 13px;}
.header-mb-sns > a > img {width:30px;}

#header-mb-location {display:flex; align-items:center; padding:13px 30px; background-color:#efefef;}
#header-mb-location > div {line-height:20px; font-size:14px; color:#4c5a5a;}
#header-mb-location > svg {margin:0 15px;}

#header-mb-footer {position:absolute; right:0; bottom:0; left:0; height:5rem; background-color:#fff;}
#header-mb-footer > .header-mb-footer-link {display:flex; justify-content:space-between; align-items:center; text-align:center; width:200px; height:5rem; margin:0 auto;}
#header-mb-footer > .header-mb-footer-link > * {display:block; height:1rem; line-height:1rem; font-size:.8rem; color:#777;}
#header-mb-footer > .header-mb-footer-link > span {width:1px; height:.8rem; background-color:#b7b7b7;}

/***** 액티브 클래스 *****/
#wrapper > header > #header-mb.header-mb-active {right:0;}



/*************** PC 기준 ***************/
@media all and (min-width: 1200px){
    /* sub.css에서 작동 */
}

/*************** PC 기준 (메인) ***************/
@media all and (min-width: 1310px){
    #wrapper > header > #header-pc {max-width:1760px; height:8.6rem;}

    #header-pc-logo {width:226px; height:40px;}
    
    #header-pc-nav > .header-pc-navs {position:relative; display:flex;}
    .header-pc-nav {display:flex; justify-content:center; align-items:center;height:84px; padding:2px 32px 0; border-bottom:2px solid rgba(255,255,255,0);}
    .header-pc-nav.pc-nav-active,
    .header-pc-nav:hover {border-bottom:2px solid #a72429;}
    .header-pc-nav.pc-nav-active > .header-pc-nav-title > a,
    .header-pc-nav:hover > .header-pc-nav-title > a {color:#a72429;}
    .header-pc-nav > .header-pc-nav-title {font-size:1.8rem; font-weight:bold; text-align:center; line-height:2.6rem;}
    .header-pc-nav > .header-pc-nav-title > a {color:#000;/*  transition-property:color; transition-duration:.3s; transition-timing-function: ease-in; */}    
    .header-pc-nav > .header-pc-subnavs {display:none; position:absolute; z-index:11; top:8.6rem; right:0; left:0; height:6.5rem; text-align:center;}
    .header-pc-nav > .header-pc-subnavs > ul {display:flex; justify-content:center; align-items:center;}
    .header-pc-nav > .header-pc-subnavs > ul > li > a {display:block; padding:19px 42px; line-height:2.7rem; font-size:1.8rem; font-weight:500; color:#000;}

    .header-pc-subnavs > ul > li:not(.header-pc-sns) > a:hover {color:#a72429;}
    .header-pc-subnavs > ul > li > a.pc-nav-active {color:#a72429;}
    
    #header-pc-nav-back {display:none; position:absolute; z-index:10; top:8.6rem; right:0; left:0; height:6.5rem; border-top:1px solid #ccc; border-bottom:1px solid #ebebeb; background:#fff;}
    /* #header-pc-nav-back > div {position:absolute; top:0; right:0; left:50%; max-width:848px; height:27rem;}
    #header-pc-nav-back > div > .header-pc-subnavs {position:absolute; z-index:11; top:0; right:50px; height:27rem;}
    #header-pc-nav-back > div > .header-pc-subnavs > li {margin-bottom:3rem;}
    #header-pc-nav-back > div > .header-pc-subnavs > li > a {font-weight:500;}
    .header-pc-subnavs > li:first-child {margin-top:3.5rem;}
    .header-pc-subnavs > .header-pc-sns {display:flex; align-items:center; height:2.4rem;}
    .header-pc-subnavs > .header-pc-sns > a {display:block; width:24px; height:24px; margin-right:15px; color:#777;}
    .header-pc-subnavs > .header-pc-sns > a > img {width:25px;} */
    
    #header-pc-link {display:flex; justify-content:space-between; align-items:center; width:auto;}
    #header-pc-link > * {display:block;}
    #header-pc-link > a {display:none; margin-right:32px; line-height:2rem; font-size:1.5rem; font-weight:500; color:#000;}
    #header-pc-link > button {background-color:transparent; font-size:1.6rem; font-weight:bold; color:#b7b7b7; cursor:pointer;}
    #header-pc-link > button:first-of-type {width:45px;}
    #header-pc-link > button.lang-active {color:#000;/*  transition-property:color; transition-duration:.3s; transition-timing-function: ease-in; */}
    #header-pc-link > span {width:1px; height:1.4rem; margin:0 10px; background-color:#d8d8d8;}
}

@media all and (min-width: 1700px) {
    #header-pc-link > a {display:block;}
}