@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */
 
#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

:root {--header-height:148px;}

.contain {max-width:1280px; margin:0 auto; padding-right:40px; padding-left:40px;}

body {background:#fff;}
#wrapper {position:relative; padding-top:var(--header-height);}

/* header */
#header {position:fixed; top:0; left:0; z-index:100; width:100%; background:#fff;}
.header-fixed #header {box-shadow:0 0 10px rgba(0, 0, 0, 0.1);}

.header-bar {height:98px; border-bottom:1px solid #eee; background:#fff;}
.header-bar .contain {display:flex; align-items:center; gap:50px; height:100%;}

.sitelogo {flex-shrink:0; margin:0;}
.sitelogo a {display:block;}
.sitelogo img {display:block; width:168px; height:74px; object-fit:contain;}

.header-search {display:flex; align-items:center; justify-content:space-between; width:350px; height:45px; padding:5px 20px; border:1.5px solid #666; border-radius:30px; background:#fff;}
.header-search input {flex:1; min-width:0; height:100%; padding:0; border:0; background:transparent; color:#111; font-size:14px; font-weight:400; line-height:1.2;}
.header-search input::-webkit-search-decoration,
.header-search input::-webkit-search-cancel-button {display:none;}
.header-search input::placeholder {color:#666;}
.header-search button {flex-shrink:0; width:24px; height:24px; padding:0; border:0; background:transparent;}
.header-search button img {display:block; width:24px; height:24px;}

#gnb {height:50px; border-bottom:1px solid #666; background:#fff;}
#gnb .contain {display:flex; align-items:center; justify-content:space-between; height:100%;}
#gnb> .contain > ul {display:flex; align-items:center; gap:50px;}
#gnb> .contain > ul > li > a {display:block; color:#666; font-size:14px; font-weight:400; line-height:1.2; letter-spacing:0;}
#gnb> .contain > ul > li.active > a {color:#111; font-weight:600;}
.gnb-promo {color:#666; font-size:14px; font-weight:400; line-height:1.2;}

/* for mobile */ 
.btn-m-search {display:none; flex-shrink:0; width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer;}
.btn-m-search img {display:block; width:28px; height:28px;}
.btn-m-menu {display:none; position:relative; width:24px; height:24px;}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#121212;}

.mobile-navigation {position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; height:var(--header-height); padding:0 20px; border-bottom:1px solid #ddd;;}
.mobile-navigation .home img {height:clamp(44px, calc(74 / var(--inner) * 100vw), 74px);}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:12px 48px 12px 20px; display:block; color:#242424; font-size:18px; font-weight:700; line-height:1.5em;}
/* .mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;} */
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--color-primary);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:15px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);}
.mobile-navigation .close {position:absolute; top:15px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}