@charset "utf-8";

/******************************************** common ********************************************/
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
.lenis-stopped {overflow: hidden; }
html.sr .load-hidden { visibility: hidden; }
[data-scroll-y="false"] { overflow-y: hidden; }
[role="button"] { cursor: pointer; }
.main { z-index: 2; }
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }
.inner { position: relative; margin-left: auto; margin-right: auto; max-width: var(--inner); width: 90%; }
.sub-container .inner { max-width: 1480px;  }
.mo-br{display:none;}
.mobile{display:none;}
.color-primary { color: var(--clr-primary); }


/* dropdown */
.dropdown { z-index: 10; position: relative; }
.dropdown .dropdown-toggle { position: relative; padding: 0 64px 0 24px; height: 60px; font-size: 16px; font-weight: 600; color: var(--clr-dark); background: #fff; border:1px solid #E0E0E0; border-radius: 8px; transition:all ease .35s; }
.dropdown .dropdown-toggle::after { content: ''; position: absolute; top: 0; bottom: 0; right: 24px; margin: auto; width: 24px; height: 24px; background: url('/images/chevron-up-light.svg') no-repeat center / auto 100%; transform: scaleY(-1); transition: all ease .35s; filter:invert(1); }
.dropdown .dropdown-list {position: absolute; top: 100%; margin-top: 8px; padding: 8px; width: 100%; background: #fff; border: 1px solid #E0E0E0; border-radius: 8px; max-height: 260px;  overflow-y: auto; visibility: hidden; opacity: 0; transition: all ease .15s;}
.dropdown .dropdown-list .scrollable-container{max-height:220px;}
.dropdown .dropdown-list::-webkit-scrollbar {width:6px; display:none;}
.dropdown .dropdown-list::-webkit-scrollbar-track { background-color: transparent;}
.dropdown .dropdown-list::-webkit-scrollbar-thumb { background-color: #aaa;}
.dropdown .dropdown-list::-webkit-scrollbar-button {display: none;}
.dropdown .dropdown-list::-webkit-scrollbar-track,
.dropdown .dropdown-list::-webkit-scrollbar-thumb {border-radius: 5px;}
.dropdown .dropdown-button { display: block; padding: 10px 16px; width: 100%; height: auto; line-height: 1.3; font-size: 16px; border-radius: 4px; transition: all ease .15s; }
.dropdown .dropdown-button.active{background: #F2F2F2; color: #000;}
.dropdown .dropdown-toggle[aria-expanded="true"]{ color: #fff; background: #212121; }
.dropdown .dropdown-toggle[aria-expanded="true"]::after { transform: none; filter:invert(0);}
.dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-list { visibility: visible; opacity: 1;}
.dropdown-cont .content {display: none;}
.dropdown-cont .content.active {display: block;}

/* 스크롤 라이브러리 스타일 */
.scrollable-container{ height:100%; overflow-y:auto;}
.simplebar-track {background-color: transparent;  border-radius: 10px;}
.simplebar-scrollbar::before {width:6px;  background-color: #aaa;   border-radius: 10px; opacity: 1;  transition: background-color 0.35s ease;}


@media (hover: hover) and (pointer: fine) {
    .dropdown .dropdown-button:hover { background: #F2F2F2;  color: #000}
	.dropdown .dropdown-toggle:hover{ color: #fff; background: #212121; }
	.dropdown .dropdown-toggle:hover::after {  filter:invert(0);}
}


@media screen and (max-width: 820px) {
	.dropdown .dropdown-toggle{height:50px; padding: 0 54px 0 20px; font-size: 14px;}
	.dropdown .dropdown-button{padding:8px 12px;font-size: 14px;  }
	.dropdown .dropdown-list{margin-top: 4px;  }
	.dropdown .dropdown-toggle::after{ width: 18px; height: 18px; right:18px;}
}
/* floating */
.floating-container { z-index: 2; position: absolute; bottom: calc(100% + 48px); right:48px; }
.scroll-top { pointer-events: none; }
.scroll-top a { display: block; margin: auto; width: 60px; height: 60px; background: #111 url('/images/scroll-top-arrow.svg') no-repeat center / auto 35%; opacity: 0; visibility: hidden; transition: ease .6s; border-radius:4px;}
.scroll-top a:hover{background-color:#005EB8;}
[data-scroll-top="true"] .scroll-top a { opacity: 1; visibility: visible; transition: ease .3s; }
[data-scroll-top="true"] .scroll-top { pointer-events: auto; }
:lang(fr)[data-scroll-top="true"] .floater,
:lang(de)[data-scroll-top="true"] .floater,
:lang(zh)[data-scroll-top="true"] .floater,
:lang(en)[data-scroll-top="true"] .floater,
:lang(ja)[data-scroll-top="true"] .floater,
[data-scroll-top="true"] .floater {   overflow: hidden; bottom:80px;}
[data-scroll-top="true"] .floater .link { transform: translateX(100%);  }
[data-scroll-top="true"] .floater .link .text{ transform: translateX(14px);    }

/* quick */
.floater { z-index: 10; position: fixed; bottom: 72px; right: 0; width: 190px;   transition: all ease .3s ;     pointer-events: none;}
:lang(fr) .floater{width: 310px;}
:lang(en) .floater{width: 250px;}
:lang(zh) .floater{width: 210px;}
:lang(de) .floater{width: 300px;}
:lang(ja) .floater{width: 230px;}
.floater .list { display: flex; flex-direction: column; align-items: flex-end; overflow:hidden; padding-bottom: 10px; padding-top: 10px; }
.floater .item { margin-bottom: 12px; }
.floater .item:last-child { margin-bottom: 0; }
.floater .item:first-child .link { color: #fff; background: #005EB8; }
.floater .link { overflow:hidden; display: inline-flex; align-items: center; margin-right: 60px; padding: 0 20px; height: 50px; line-height: 50px; font-size: 15px; font-weight: 600; background: #fff; border-radius: 4px 0 0 4px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1), 0 0 4px 0 rgba(0, 0, 0, .1); transform: translateX(60px); transition: all ease .3s;     pointer-events: auto; }
.floater .link .text {  display: block; transition: all ease .3s; white-space: nowrap; font-size: 16px;}
.floater .link .icon { margin-right: 8px; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; }
.floater .link .icon-1 { background-image: url('/images/floater-icon-1.svg'); }
.floater .link .icon-2 { background-image: url('/images/floater-icon-2.svg'); }
.floater .link .icon-3 { background-image: url('/images/floater-icon-3.svg'); }
.floater .link .icon-4 { background-image: url('/images/floater-icon-4.svg'); }

@media (hover: hover) and (pointer: fine) {
	:lang(fr) .floater.active,
	:lang(zh) .floater.active,
	:lang(de) .floater.active,
	:lang(en) .floater.active,
	:lang(ja) .floater.active,
	.floater.active{width:auto;}
    .floater .link:hover { transform: translateX(60px); }
    .floater .link:hover .text { transform: none; }
}
@media screen and (max-width:1280px){
	.pc-br{display:none;}
}
@media screen and (max-width:1024px){
    .scroll-top a { width: 55px; height: 55px; }
	.floating-container{ right: 5%; } 
 	[data-scroll-top="true"] .floater .link,
	.floater .link { transform: translateX(0); width:50px;  overflow:hidden; margin-right: 0; padding:0 16px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1), 0 0 2px 0 rgba(0, 0, 0, .1);}
	.floater .link .text{ transform: translateX(12px); display:none;   }
	.floater .item{margin-bottom: 6px; width:50px;} 
	.floater .link:hover{transform: translateX(0); }
}
@media screen and (max-width:820px){
    .floating-container { bottom: calc(100% + 24px); }
    .scroll-top { bottom: 15px; }
    .scroll-top a { width: 45px; height: 45px; }
	.mo-br{display:block;}
	.mobile{display:block;}
	.desktop{display:none;}

}


/* icon */
.icon { display: inline-block; vertical-align: top; pointer-events: none;}
.icon::before { content: ''; display: block; width: 24px; height: 24px; margin-right: -2px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.icon-download::before { background-image: url('/images/icon-download.svg'); }
.icon-arrow-right::before { background-image: url('/images/arrow-right.svg'); }
.icon-arrow-right-light::before { background-image: url('/images/arrow-right-light.svg'); }
.icon-arrow-right-big::before { background-image: url('/images/arrow-right-big.svg'); }
.icon-arrow-down-light::before { background-image: url("/images/arrow-down-light.svg"); }
.icon-external-link::before { background-image: url('/images/icon-external-link.svg'); }
.icon-external-link-light::before { background-image: url('/images/icon-external-link-light.svg'); }
.icon-external-link-small::before { background-image: url('/images/icon-external-link-small.svg'); }
.icon-external-link-big::before { background-image: url('/images/icon-external-link-big.svg'); }
.icon-close::before { background-image: url('/images/icon-close.svg'); }
.icon-map::before { background-image: url('/images/icon-map.svg'); }
.icon-map2::before { background-image: url('/images/icon-map2.svg'); }
.icon-phone::before { background-image: url('/images/icon-phone.svg'); }
.icon-email::before { background-image: url('/images/icon-email.svg'); }
.icon-youtube::before { background-image: url('/images/icon-youtube.svg'); }
.icon-reset::before { background-image: url('/images/icon-reset.svg'); }
.icon-rotate::before { background-image: url('/images/icon-rotate.svg'); }
.icon-plus::before { background-image: url('/images/icon-plus-primary.svg'); }
.icon-delete::before { background-image: url('/images/icon-delete.svg'); }
.icon-share::before { background-image: url('/images/icon-share.svg'); }
.icon-print::before { background-image: url('/images/icon-print.svg'); }

.button-container { display: flex; }
.button-container .button { display: inline-flex; align-items: center; justify-content: center; padding: 0 1em; height: 50px; line-height: 50px; text-align: center; color: var(--clr-dark); background-color: #fff; border: 1px solid transparent; border-radius: 6px; transition-property: color, background-color, border-color; transition-timing-function: ease; transition-duration: .15s; }
.button-container .button-primary { color: #fff; background-color: #00287C; border-color: #00287C; }
.button-container .button-border { border-color: var(--clr-dark); }
.button-container .button-border-gray { border-color: #ddd; }
.button-container .button-border-primary { color: #00287C; border-color: #00287C; }
.button-container .button:disabled { pointer-events: none; opacity: .4; }
@media (hover: hover) and (pointer: fine) {
    .button:hover .icon-media::before { background-image: url('/images/icon-media-light.svg'); }
    .button:hover .icon-download::before { background-image: url('/images/icon-download-light.svg'); }
    .button:hover .icon-plus::before { background-image: url('/images/icon-plus-light.svg'); }
    .button:hover .icon-share::before { background-image: url('/images/icon-share-light.svg'); }
    .button:hover .icon-print::before { background-image: url('/images/icon-print-light.svg'); }

    .button-container .button:hover { background-color: #f1f1f1; }
    .button-container .button-primary:hover { color: #fff; background-color: var(--clr-dark); border-color: var(--clr-dark); }
    .button-container .button-border:hover,
    .button-container .button-border-gray:hover,
    .button-container .button-border-primary:hover { color: #fff; background-color: var(--clr-dark); border-color: var(--clr-dark); }
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 820px) {
	.button{font-size: 14px;}
	.icon::before{width: 20px; height: 20px;}
}


/* button */
.button-blur { background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.button-border-light { color: #fff; border-color: #fff; }
.button .icon:last-child { margin-left: 10px; }
.hover-under{position:relative;}
.hover-under:before{content:''; width:0; height:2px; background: #151515; position:absolute; right:0; bottom:-6px; transition:all ease .35s;}
.hover-under .icon{ transition:all ease .35s;}
@media (hover: hover) and (pointer: fine) {
	.hover-under:hover:before{width:100%; right:auto; left:0;}
}


/******************************************** header ********************************************/

/* skip-nav */
.skip-nav{position:relative;z-index:2000;}
.skip-nav a{position: absolute;top: -32px;left: 0;width:50%;height:32px;background: #333; color: white;text-align: center;}
.skip-nav a:active,
.skip-nav a:focus{top: 0;text-decoration:none;z-index: 1000;}
@media all and (max-width:750px){
	.skip-nav a {background: transparent;}
}



/* setting */
#wrap{width:100%;}
#wrap:before {content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.7); z-index: -1; opacity: 0; }
.opened-gnb-mask #wrap:before,
.opened-search-mask #wrap:before {z-index: 100; opacity: 1;}
body.opened-search-mask #wrap{height: 100%; overflow-y: hidden;}
body.opened-search-mask .menu-toggle {opacity: 0;}
body.opened-gnb-mask .header{background: #fff; z-index:103;}
body:not(.opened-mo-nav) .header.scroll-down { pointer-events: none; top:-100px;}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans{background: transparent;}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .gnb a.dep1{color: #fff;}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .snb-list li a{color: #fff; border-color:rgba(255,255,255,0.3);}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .snb-list li:last-child a{background: rgba(255,255,255,0.1);}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .snb-list li a .icon{filter:invert(1);}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .logo img{ filter: brightness(0) invert(1);}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .lang-btn::before{filter:invert(1);}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .lang-btn::after{filter:invert(1);}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .logo-secondary { background-image: url('/images/logo-secondary-light-en.png'); }
:lang(ko) body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .logo-secondary { background-image: url('/images/logo-secondary-light.svg'); }
:lang(zh) body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .logo-secondary { background-image: url('/images/logo-secondary-light-cn.svg'); }
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .nav .menu-toggle .ico span{background: #fff;}



/* nav */
.header{position: fixed; z-index:101;  width: 100%; background: #fff; transition:top ease .35s; left:0; top:0;}
.header.fixed{top:0 !important;}
.header .logo{display:flex; align-items:center; gap:5px;}
.header .logo-secondary { z-index: 11; width: 140px; height: 17px; background-image: url('/images/logo-secondary-en.png'); background-repeat: no-repeat; background-position:center center; background-size:contain; }
:lang(ko) .header .logo-secondary { width: 113px; background-image: url('/images/logo-secondary.svg'); }
:lang(zh) .header .logo-secondary { width: 90px; background-image: url('/images/logo-secondary-cn.svg'); }
.header > .w-inner{height:90px; padding:0 36px;}
.header .w-inner,
.header .nav,
.header .nav .snb,
.header .nav .gnb-list,
.header .logo,
.header .search-box{display: -ms-flexbox; display: -webkit-flex; display: flex;}
.header > .w-inner,
.header .nav,
.header .nav .snb,
.header .nav .gnb > ul,
.header .logo,
.header .search-box{-webkit-align-items: center; -ms-flex-align: center; align-items: center;}
.header .w-inner,
.header .nav {-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
.header .nav .snb,
.header .search-box{-webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
.header .logo{-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
.header .btn .ico,
.header a .ico{display:block;}
.header .logo{ }
.header .logo img{display:block; width:121px;}
.header .nav{width:auto;}
.header .nav a{position:relative;}
.header .nav .menu-toggle{display:none;}
.header .gnb > ul > li + li{margin-left:0;}
.header .gnb a.dep1{font-weight: 600; text-align: center; padding:0 60px; line-height: 90px; letter-spacing: -0.4px; white-space: nowrap;}
:lang(fr) .header .gnb a.dep1,
:lang(de) .header .gnb a.dep1,
:lang(en) .header .gnb a.dep1{padding:0 50px;}
.header .dep-wrap {position: absolute; left: 0; top: 90px; width: 100%;  z-index: 8; visibility: hidden; opacity: 0;background: #fff;}
.header .dep-wrap .w-inner > ul > li > a{font-size: 20px; font-weight: 600; color: #888;}
.header .dep-wrap .w-inner > ul > li > ul{  -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.header .dep-wrap .w-inner a.dep2{display:block; padding: 8px 0; color: #151515;   }
.header .dep-wrap .w-inner a.dep2 .icon:before{width: 32px; height: 32px; }
.header .dep-wrap .w-inner a .icon:before{ filter: brightness(5);}
.header .dep-wrap .w-inner > ul > li > ul > li:first-child {color: #151515; font-weight: 600;}
.header .dep-wrap .w-inner > ul > li > ul > li a{display:block; padding:8px 0; color: #888; font-weight: 500;}
.header .dep-wrap .w-inner > ul > li > ul > li span.disabled{display:block; padding:8px 0; color:rgba(0, 0, 0, 0.2); font-weight: 500; cursor:not-allowed;}
.header .dep-wrap .w-inner > ul > li > ul > li a .icon{margin-top: 1px;}
.header .dep-wrap .w-inner > ul > li > ul > li > ul{position:absolute; left:240px; top:0; background: #fff;}
.header .dep-wrap .w-inner .item-wrap{position:relative; height:500px; width:50%; display:none;}
.header .dep-wrap .w-inner .item-wrap .item-txt{position:absolute; left:60px; bottom:60px; color: #fff; font-weight: 300;}
.header .dep-wrap .w-inner .item-wrap .item-txt strong{display:block; margin-bottom: 16px; font-size: 36px;  font-weight: 500;}
.header .dep-wrap .w-inner .item-wrap .gnb-banner{position:absolute; left:0; top:0; width:100%; height:100%;}
.header .dep-wrap .w-inner .item-wrap .gnb-banner img{display: block; width: 100%; height:100%; object-fit:cover;}

/* search */
.header .search-bar{position: absolute; right: calc( (100vw - 1440px) / 2 ); top: 0; width: 404px; height: 90px; z-index: 8; visibility: hidden; opacity: 0; background: white;  -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.header .search-bar.active {visibility: visible; opacity: 1;}
.header .search-bar .search-box {height:90px;}
.header .search-bar .search-box .input-text.medium{width: 361px;padding-right:32px;}
.header .search-bar .search-box .btn{padding:20px 10px;}
.header .search-bar .search-box .btn.search-word{position:absolute;right:44px;}
.header .search-bar .search-box .btn.search-word .ico{opacity: .5;}
.header .search-bar .search-box .input-text.medium:focus + .btn.search-word .ico{opacity: 1;}


/* lang */
.header .snb-lang { position:relative;  }
.header .lang-btn { display:block; position:relative; width: 70px; height: 50px; line-height:50px; text-align:left; font-size:15px; color:inherit; font-weight:600; border: 1px solid transparent;border-radius: 40px;transition: all ease .35s; padding-left: 10px; }
.header .lang-btn::before { content: '';display:block; width: 20px; height: 20px; background: url('/images/language-globe.svg') no-repeat center / auto 100%; transition: all ease .35s; }
.header .lang-btn::after { content: ''; display: block; position: absolute; top: 50%; transform:translateY(-50%); right: 18px; width: 10px; height: 6px; background: url('/images/language-arrow.svg') no-repeat center / auto 100%; transition-property: transform, background; transition-timing-function: ease;  }
.header .lang-list { z-index: 8;position:absolute; left:50%; top:48px; padding: 8px 0; width:80px; background: #fff; border:1px solid transparent;  transform:translateX(-50%); visibility:hidden; opacity:0; transition:all ease 0.35s; box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.12);     border-radius: 4px;}
.header .lang-list::before { content: ''; z-index: -1; position: absolute; top: -8px; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; }
.header .lang-list a { display:block; padding:8px 0; line-height: 1; text-align:center; font-size:15px; color:#111; transition:all ease 0.35s; }
.header .lang-list a:hover,
.header .lang-list a.on{ color: #097CD3;}
.header .snb-lang.active .lang-list { visibility:visible; opacity:1;}
.header .snb-lang.active .lang-btn::after{transform: rotate(180deg) translateY(-50%); transform-origin: top;}
.header:has(.snb-lang.active){z-index:103; transition: none;}


/* snb */
.header .snb-list{ display: flex; align-items: center; margin-right: 10px; }
.header .snb-list li a { display: inline-flex; align-items:center; margin-right: 8px; padding: 0 16px; height: 35px;  font-size: 14px; font-weight: 600; background-color: transparent; border: 1px solid #ddd; border-radius: 6px; transition:all ease .35s; font-size: 15px; white-space: nowrap;}
.header .snb-list li a .icon{ transition:all ease .35s; }
.header .snb-list li a .icon::before{width: 21px; height: 21px; margin-top: -1px;}
.header .snb-list li:last-child a:hover,
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header.trans .snb-list li:last-child a:hover,
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header .snb-list li a:hover{background: #151515;color: #fff; border-color:#151515;}
body:not(.opened-mo-nav):not(:has(.store .sec-map)) .header .snb-list li a:hover .icon{filter:invert(1);}


/* pc only */
@media all and (min-width:1281px){
	.header .nav .gnb a.dep1:hover{color: #005EB8;}
	.header .nav .gnb a.dep1:first-child {padding-left: 20px;} 

	.header .dep-wrap .w-inner > ul{display:flex;  justify-content:center;  width:50%;  position:relative; max-width:1200px;  height: 450px;   margin : 0 auto;  width: 100%;   }
	.header .dep-wrap .w-inner > ul ul{ }
	/* min-width:25%는 4컬럼 전제였다 — 제품 & 솔루션에 보안(5번째 dep2)이 추가되며 5×25%=125%가 되어
	   1281~1480px대 태블릿 가로/노트북 폭에서 메뉴가 잘렸다(HM PR #236 리뷰). 컬럼 수에 무관하게
	   균등 분배되도록 flex 비율로 전환한다. */
	.header .dep-wrap .w-inner > ul > li{flex: 1 1 0; padding: 28px;}
	.header .dep-wrap .w-inner > ul > li.active,
	.header .dep-wrap .w-inner > ul > li.on {background: #f7f7f7; }
	.header .dep-wrap .w-inner > ul > li.active > a,
	.header .dep-wrap .w-inner > ul > li.on > a{ color: #005EB8;}
	.header .dep-wrap .w-inner a:hover .icon:before{filter:none;}
	.header .dep-wrap .w-inner a.dep2{border-bottom:1px solid #ddd; margin-bottom: 12px; padding-bottom: 10px;}
	.header .dep-wrap .w-inner a.dep2:hover .icon:before{background-image: url('/images/icon-external-link-on.svg'); filter:none;}
	.header .dep-wrap .w-inner > ul > li > ul > li.on > a,
	.header .dep-wrap .w-inner > ul > li > ul > li.active > a{color: #151515;}
	.header .dep-wrap .w-inner > ul > li > ul > li a:hover{color: #151515;}
	.header .dep-wrap .w-inner > ul > li.off{background: #fff;}
	.header .dep-wrap .w-inner > ul > li.off > a{ color: #151515;}
	.header .dep-wrap .w-inner > ul > li.off > ul > li a{color: #888;}

	.header .nav{width:88%;}
	.header .nav .snb > a + a{margin-left:5px;}
	.header .nav .snb{margin-right:-10px;}
	.header .nav .snb{min-width: 400px;}
	.header .nav .gnb .dep-wrap{border-top:1px solid #ddd;}
    .header .nav .gnb > ul > li .dep-wrap { z-index: 1; pointer-events: none; }
    .header .nav .gnb > ul > li.on { z-index: 2; }
    .header .nav .gnb > ul > li.on > a { color: var(--clr-primary); }
	.header .nav .gnb > ul > li.on .dep-wrap {z-index: 2;visibility: visible; opacity: 1; pointer-events: auto; }


}

@media all and (min-width:1281px) and (max-width:1460px){
	.header .nav .gnb a.dep1{padding-right: 50px;}
	:lang(fr) .header .gnb a.dep1,
	:lang(de) .header .gnb a.dep1,
	:lang(en) .header .gnb a.dep1{padding-right: 0;}
}
@media all and (max-width:1280px){
	body.opened-mo-nav #wrap{overflow-y: hidden;}
	body.opened-mo-nav .header{background: transparent;}
	body.opened-mo-nav .header .logo{z-index:-1;}
	body.opened-mo-nav .header .logo img{ filter: brightness(0) invert(1);}
	body.opened-mo-nav .header .nav .menu-toggle{z-index:2;}
	body.opened-mo-nav .header .gnb{position:fixed;display:block;right:0;top:0;width:80%;height:100%; background: white; padding : 40px 0; box-sizing: border-box;}

	.header .gnb .dim{ position: fixed; top: 0; left: 0; width: 20%; bottom: 0; left: 0; background: rgba(0,0,0,.7); z-index: -1; opacity: 0; transition: opacity .35s; visibility:hidden;}
	body.opened-mo-nav .header .gnb .dim{  z-index:100; opacity:1;  visibility:visible;}
	body.opened-mo-nav .header .nav .menu-toggle .ico{justify-content:center;}
	body.opened-mo-nav .header .nav .menu-toggle .ico span{  margin: -1px;  background: #151515; }
	body.opened-mo-nav .header .nav .menu-toggle .ico span:nth-child(1){transform:rotate(45deg);}
	body.opened-mo-nav .header .nav .menu-toggle .ico span:nth-child(2){display:none;}
	body.opened-mo-nav .header .nav .menu-toggle .ico span:nth-child(3){transform:rotate(-45deg);}



	.header > .w-inner{height:60px; }
	.header .gnb {display:none;}
	.header .snb-lang{margin-right: 0;}
	.header .nav{  gap:20px;}
	.header .nav .menu-toggle{display: inline-block;-webkit-order: 1;  -ms-flex-order: 1; order: 1;}
	.header .nav .menu-toggle{height:100%;}
	.header .nav .menu-toggle .ico{display: flex;flex-direction: column;justify-content: space-around; width:21px;height:21px; }
	.header .nav .menu-toggle .ico span{display:block; width: 100%; height:2px; background: #151515; transition:all ease .3s;}


	.header .nav .snb-list{margin-right: 20px;}
	.header .gnb .gnb-list{width:100%;-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding:0 5%;  overflow-y:auto;   height: calc(100% - 50px);  margin-top: 10px;}
	.header .gnb .gnb-list > li{ border-bottom:1px solid #ddd; }
	.header .gnb .gnb-list > li.active{z-index: 2;  position: relative;}
	.header .gnb .gnb-list li + li{margin-left:0; }
	.header .gnb .gnb-list li{width:100%; }
	.header .gnb .gnb-list li a:after{position:absolute;content:'';display:block;}
	.header .gnb a.dep1{color: #000; line-height: 1.2; padding:20px 0; display:block;width:100%; font-size: 17px; text-align:left;  }
	:lang(fr) .header .gnb a.dep1,
	:lang(de) .header .gnb a.dep1,
	:lang(en) .header .gnb a.dep1{padding:20px 0;}
	.header .gnb a.dep1:after{top:calc(50% - 3px);right:0;width:16px; height:8px;background: url(/images/language-arrow.svg) no-repeat center / auto 100%;transition-property: transform, background;transition-timing-function: ease;transition-duration: .1s, .35s;}
	.header .gnb .active a.dep1:after{-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
	.header .gnb li.active .dep-wrap{position: static; padding:0 0 36px 5%; visibility: visible; opacity: 1; }
	.header .dep-wrap{display:none;}
	.header .gnb li.active .dep-wrap{display:block;}
	.header .dep-wrap .w-inner{display:block;}
	.header .dep-wrap .w-inner > ul > li.active > a{color: #005EB8;}
	.header .dep-wrap .w-inner > ul > li:has(ul) .dep2:after{top:calc(50% - 4px);right:0;width:16px; height:7px;background: url(/images/language-arrow.svg) no-repeat center / auto 100%;transition-property: transform, background;transition-timing-function: ease;transition-duration: .1s, .35s; opacity:.6;}
	.header .dep-wrap .w-inner > ul > li.active > a:after{-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
	.header .dep-wrap .w-inner > ul > li.active > ul,
	.header .dep-wrap .w-inner > ul > li > ul > li > ul{ position: static; visibility: visible; opacity: 1;display:block;}
	.header .dep-wrap .w-inner > ul > li > ul,
	.header .dep-wrap .w-inner .item-wrap {display:none;}
	.header .dep-wrap .w-inner a.dep2{padding:8px 0;font-size: 16px;  }
	.header .dep-wrap .w-inner a.dep2 .icon:before{width: 21px; height: 21px; margin-top: 1px;}
	.header .dep-wrap .w-inner > ul > li > ul{background: none; padding:0; padding-left: 5%;  }
	.header .dep-wrap .w-inner > ul > li > ul > li a{font-weight: 500; padding:5px 0; font-size: 15px;}
	.header .dep-wrap .w-inner > ul > li > ul > li.active a{color: #151515;}
}

@media all and (max-width:820px){
	.header .nav{  gap:10px;}
	.header .logo img{width: 110px;}
	.header > .w-inner{ padding:0 5%;}
	.header .lang-btn{width: 60px;}
	.header .lang-btn::after{right:8px;}
	.header .snb .snb-list{display:none;}
	.header .snb-list{margin-top: 20px; padding-left: 5%;  margin-right: 0; }
	.header .snb-list li a{ padding: 0 12px; font-size: 14px; margin-right: 4px;}
	.header .gnb li.active .dep-wrap{  padding:0 0 24px 5%;}
	.header .logo-secondary{background-position: center right; width: 71px;   background-size: auto 15px;}
	:lang(ko) .header .logo-secondary{width: 84px;}
	:lang(zh) .header .logo-secondary{width: 80px;}
}



/******************************************** footer ********************************************/ 
body:has(.main) .footer{z-index:2;}
.footer-primary {position:relative; color: #fff; font-size: 15px; letter-spacing: -0.05em; background: #121212;  }
.footer-primary .row { padding: 30px 0; }
.footer-primary .row .inner { display: flex; align-items: center; justify-content: space-between; }
.footer-primary .row:first-child { padding: 100px 0; border-bottom: 1px solid #222; }
.footer-primary .row:first-child .inner { align-items: flex-start; gap:20vw }
.footer-primary .row:first-child .col:first-child { flex: 1 1; }
.footer-primary .row:last-child .col { display: flex; align-items: center; }
.footer-logo { width: 120px; height: 17px; background: url('/images/logo-light.svg') no-repeat center / auto 100%; }
.footer-info ul { display: flex; flex-wrap: wrap; }
.footer-info li:last-child { width: 100%; }
.footer-links ul { margin: 24px 0 0; text-align: right; }
.footer-links li { position: relative; }
.footer-links li + li{margin-top: 10px; }
.footer-links a {   font-size: 16px; font-weight: 700; color: #A1A1A1; transition: color ease .15s; }
.footer-links b { color: #fff; font-weight: 600; }
.footer-copyright { margin-left: 30px; font-size: 15px; letter-spacing: -0.01em; }
.footer-family { position: relative; width: 270px; margin-top: -20px; }
.footer-family .toggle { display: block; position: relative; padding: 0 48px 0 24px; height: 60px; line-height: 60px; letter-spacing: 0.04em; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; transition: all ease .3s; }
.footer-family .toggle::after { content: ''; position: absolute; top: 0; right: 13px; bottom: 0; margin: auto; width: 22px; height: 22px; background: url('/images/family-site-arrow.svg') no-repeat center / auto 30%; transition: all ease .3s; }
.footer-family .listbox { z-index: 11; position: absolute; bottom: 100%; left: 0; margin-bottom: -1px; padding: 10px 20px; width: 100%; background: #fff; border: 1px solid #e0e0e0; opacity: 0; visibility: hidden; border-radius:4px;}
.footer-family .listbox li a{ display: block; padding: 5px 0; color: #666; }
.footer-family[aria-expanded="true"] .toggle::after { transform: scaleY(-1); }
.footer-social { display: flex; align-items: center; }
.footer-social-text + .footer-social-text{ margin-left: 24px; }
.footer-social-link { transition: opacity ease .1s;  opacity:.3;}
.footer-social-link .icon { display: block; width: 24px; height: 24px; }
.footer-social-link .icon-instagram::before { background-image: url('/images/instagram.svg'); }
.footer-social-link .icon-linkedin::before { background-image: url('/images/linkedin.svg'); }
.footer-social-link .icon-youtube::before { background-image: url('/images/youtube.svg'); }
.footer-social-link .icon-facebook::before { background-image: url('/images/facebook.svg'); }
.footer-sitemap { display: flex; align-items: stretch; margin: 0 -30px; }
.footer-sitemap .col { flex: 1 1; padding: 0 30px; }
.footer-sitemap .title { margin-bottom: 20px; font-size: 20px; font-weight: 700; color: inherit; }
.footer-sitemap .lists > li { margin-top: 8px; }
.footer-sitemap .lists a { font-size: 16px; opacity: 0.6; transition: color ease .15s; }
.footer-sitemap .sub-lists { margin-top: 2px; }
.footer-sitemap .sub-lists a { font-size: 14px; color: #666666; }
@media (hover: hover) and (pointer: fine) {
	.footer-family .listbox li a:hover{color:var(--clr-dark); }
    .footer-primary .links a:hover { opacity: .7; }
    .footer-links a:hover { color: #fff; }
    .footer-family[aria-expanded="true"] .toggle,
    .footer-family .toggle:hover {background: #fff;  color:var(--clr-dark);  border-color:#e0e0e0; }
    .footer-family[aria-expanded="true"] .toggle::after,
    .footer-family .toggle:hover::after { filter:invert(1); }
    .footer-sitemap .lists a:hover { opacity: 1;  }
	.footer-social-link:hover{opacity:1;}
}
@media screen and (max-width: 1180px) {
	.footer-primary .row:first-child .inner{gap:5vw;}
	.footer-sitemap .col{padding:0 10px;}
}
@media screen and (max-width: 1023px) {
    .footer-primary .row:first-child .col:has(.footer-sitemap){display:none;}
	.footer-primary .row .inner{flex-wrap:wrap; flex-direction: column-reverse;  align-items: flex-start;  gap: 20px; }
	.footer-primary .row:first-child{padding:40px 0;}
	.footer-primary .row:first-child .inner{gap:0; display:block;}
	.footer-family{margin-top: 0; width: 100%;}
	.footer-links ul{text-align:left;}
	.footer-primary .row:last-child .col{ flex-direction: column;  align-items: flex-start; gap:10px;}
	.footer-copyright{margin-left: 0;}
	.footer-primary .row{padding:20px 0;}
}

@media (hover: hover) and (pointer: fine) {
    [data-cursor] { cursor: grab; }
    .cursor { z-index: 100; position: fixed; top: 0; left: 0; margin: 15px 0 0 20px; pointer-events: none; }
    .cursor-wrap { width: 100%; height: 100%; min-width: 80px; height: 35px; line-height: 35px; background: #fff; font-size: 14px; font-weight: 500; color: var(--clr-dark); border-radius: 4px; transform: scale(0); transition: transform ease .35s; }
    .cursor .drag { display: flex; align-items: center; justify-content: center; padding: 0 0.5em; }
    .cursor .drag::before { content: ''; display: block; margin-right: 0.5em; width: 10px; height: 10px; background: url('/images/subdirectory-arrow-right.svg') no-repeat center / auto 100%; }
    .cursor .drag::after { content: 'Drag'; letter-spacing: 0.015em; }
	.cursor[data-cursor-state="on"] .cursor-wrap { transform: none; }
}
@media screen and (max-width: 1024px) {
	.cursor { display: none; }
}
@media screen and (max-width: 820px) {
	.footer-social-text + .footer-social-text{margin-left: 12px;}
	.footer-links a{font-size: 14px;}
	.footer-links a i{margin-top: 2px;}
}

@media screen and (max-width: 540px) {
	.header .logo img {width: 92px;}
}