@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
 *
 * 01) GLOBAL BODY
 * 02) HEADER 
 * 03) FOOTER
 * 04) SCROLL TOP
 * 05) 404        
*/

/* **************************************** *
 * GLOBAL
 * **************************************** */
body{font-size:16rem;overflow-x:hidden;overflow-y:overlay;word-break: keep-all;}
body.scroll-hide{overflow-y:hidden;}
body.scroll-hide #header{position: fixed;}
body::after{content:"";position: fixed;opacity:1;top:0;left:0;z-index:9999;width:100%;height:100%;background:#fff;transition: all 0.7s ease;}
body:has(#main)::after{display: none;}
body.motion-on::after{opacity:0; visibility:hidden;}

body[data-bg="dark"]::after{background:#111;}
div#container {
    transition: all 0.2s ease;
}
body:has(#site-map.active) #container{-webkit-filter:blur(8rem); filter:blur(8rem); pointer-events:none;}

/* scroll set */
::selection{background: var(--c-01);color:#fff;}

/* 스크롤바 커스텀 */
*::-webkit-scrollbar{width:16rem;background-color:var(--br-01);}
*::-webkit-scrollbar-thumb:hover{background-color: #F0761D;}
::-webkit-scrollbar-thumb{background-color:var(--c-01);}

@media (max-width:860px){
	*::-webkit-scrollbar{display:none !important; width:0; height:0;}

	body{font-size:16rem;}
	/* body,
	p,
	li,
	a{font-family:'Work Sans', -apple-system, BlinkMacSystemFont, Sans-serif;} */
}

@media (max-width:540px){
	body{letter-spacing: -0.1rem; font-size:14rem;}
	p {line-height: 1.6;}
}

/* **************************************** *
 * HEADER
 * **************************************** */
#header{position: fixed;z-index:91;width:100%;padding:20rem 0;transition:1.5s cubic-bezier(0.25, 0.47, 0.12, 0.99);transform:translateY(-100rem);}
#header.on {background: var(--f-01); box-shadow:5rem 5rem 20rem rgba(0, 0, 0, 0.1);}
#header.hide{transform: translateY(-100%) !important;}
#header h1{font-size:0;}
#header:has(#site-map.active){position:fixed;}

.motion-on #header{transform:translateY(0rem);}

.header-inner{display:flex;justify-content:space-between;align-items:center;}

#logo{position:relative; z-index:81;}
#logo a{display:block;width: 224rem;height: 35rem;background-size: 100%;background-position:50% 50%;background-repeat:no-repeat;background-image:url(../img/layout/logo.svg);}

/* basic gnb */
.gnb-container{display:inline-block;}
.gnb-full-cover{position:absolute; opacity:0; visibility:hidden; top:0; left:0; z-index:-1; width:100%; height:100%; background:#fff; box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23); transition:var(--trans-01);}

#gnb{text-align:center;}
#gnb .gnb-item{display:inline-block;position:relative;padding: 0 35rem;text-transform: uppercase;transition:var(--trans-01);}
#gnb .gnb-item:last-child:after{background:none;}
#gnb .gnb-item > a{display:inline-block; padding: 20rem 0; font-weight:700; color:var(--b-01); font-size:var(--font-size-18); transition:var(--trans-01);}
#gnb .gnb-item .sub-menu > li.on > a{color: var(--c-01) !important; }
#gnb .gnb-item > a.on{color: var(--c-01) !important;}

.sub-menu-depth{display: none;} /* 3차메뉴 숨김 */

/* full gnb */
#gnb.gnb-full .gnb-item > a{position:relative; padding-bottom:0; }
#gnb.gnb-full .gnb-item .sub-menu{top:80rem; padding:0; background:none; border:0; box-shadow:none; transition:none;}
#gnb.gnb-full .gnb-item .sub-menu > li > a{padding:8rem 0rem; background:none; border:0; color:#666; text-align:center;}
#gnb.gnb-full .gnb-item.active .sub-menu{transition:all 0.4s ease-out; transition-delay:0.2s;}
#gnb.gnb-full .gnb-item > a::after{content:""; position:absolute; bottom:-41rem; left:0; width:100%; height:3px; background:var(--c-01); transition:var(--trans-01); transform:scaleX(0);}
#gnb.gnb-full .gnb-item > a{position:static;}
#gnb.gnb-full .gnb-item:hover > a::after{transform:scaleX(1);}

#header::before{content:""; position:absolute; opacity:0; top:120rem; width:100%; height:1px; background:#eee; transition:var(--trans-01);}
#header.color-on::before{opacity:1;}
#header.color-on #logo a{background-image:url(../img/layout/logo.svg);background-size: 100%;}
#header.color-on .gnb-full-cover{opacity:1;visibility:visible;height: 750rem;}
#header.color-on #gnb .gnb-item > a{color:#111;}
#header.color-on #gnb .gnb-item{padding: 0 35rem;}

.btn_close{opacity:0; font-size:0;}

/* **************************************** *
 * MOBILE MENU
 * **************************************** */
 .gnb-mobile__inr {height: 100%; justify-content: flex-start; padding: 100rem 40rem 50rem;}
.gnb-mobile-btn{display:none; position:relative; z-index:80; padding:10rem 0rem; cursor:pointer;}
.gnb-mobile-btn span{display:block; position:relative; width:100%; height:2px; background:#fff; transition:all 0.4s ease;}
.gnb-mobile-btn .inner{display:grid;width: 32rem;height: 11rem;align-content:space-between;}
.gnb-mobile{position:fixed;opacity:0;visibility:hidden;overflow:hidden;top:0;right: 0;width:100%;height:100vh;background:#000;transition:all 0.3s ease;overflow-y: scroll;}
.gnb-mobile:has(.menu--st01){max-width: 550rem;}
.gnb-mobile-btn.active span:nth-child(1){top: 9rem;transform:rotate(45deg);}
.gnb-mobile-btn.active span:nth-child(2){transform:rotate(-45deg);}
.gnb-mobile-btn.active span{background:#fff !important;}
.gnb-mobile.active{opacity:1; visibility:visible;}
.gnb-mobile-menu .gnb-item > a{display:inline-flex; align-items:center; position:relative; font-weight:700; font-size:27rem; color: var(--f-01); text-transform: uppercase;}
.gnb-mobile-menu{width:100%;box-sizing:border-box;text-align:center;overflow: auto;}
.gnb-mobile-menu .gnb-item {padding: 30rem 0;}
.gnb-mobile-menu .gnb-item:not(:first-child){border-top: 1px solid rgba(255, 255, 255, .1);}
.gnb-mobile-menu .sub-menu{display:none; text-align: left;}
.gnb-mobile-menu .sub-menu li {display: inline-block; margin: 5rem 10rem;}
.gnb-mobile-menu .sub-menu li a.on{color: var(--c-01);}
.gnb-mobile-menu .sub-menu li a{font-size:18rem;display: block; color: var(--f-01);}
.gnb-mobile-menu .gnb-item:has(li:nth-child(2)){}
.gnb-mobile-menu .gnb-item > a {flex-shrink: 0; margin-right: 20rem; font-size: var(--font-size-54); transition: var(--trans-01);}
.gnb-mobile-menu .gnb-item > a::before {opacity: 0; visibility: hidden; position: absolute; left: 0; top: 50%; content:''; width: 12rem; height: 12rem; border-radius: 2rem; background: var(--f-01); transform: translateY(-50%) rotate(45deg); transition: var(--trans-01);}
.gnb-mobile-menu .gnb-item.active > a::before {opacity: 1; visibility: visible;}
.gnb-mobile-menu .gnb-item.active > a{padding-left:30rem;}

.gnb-mobile-img {position: relative; width: 100%; height: 250rem; margin-bottom: 20rem; border-radius: 20rem; background-image: url(../img/layout/menu01.jpg); transition: var(--trans-01);}

.gnb-mobile__copy{position:absolute; opacity:0.3; right: 30rem; bottom:30rem; font-weight:800; color: var(--f-01);}
.gnb-mobile-menu .gnb-item{opacity:0; display: flex; align-items: center; transition:all 0.7s ease; transform:translateY(30rem);}
.gnb-mobile.active  .gnb-item{opacity:1; transform:translateY(0rem);}
.gnb-mobile.active  .gnb-item:nth-child(1){transition-delay:100ms;}
.gnb-mobile.active  .gnb-item:nth-child(2){transition-delay:200ms;}
.gnb-mobile.active  .gnb-item:nth-child(3){transition-delay:300ms;}
.gnb-mobile.active  .gnb-item:nth-child(4){transition-delay:400ms;}
.gnb-mobile.active  .gnb-item:nth-child(5){transition-delay:500ms;}
.gnb-mobile.active  .gnb-item:nth-child(6){transition-delay:600ms;}
.gnb-mobile.active  .gnb-item:nth-child(7){transition-delay:700ms;}

.gnb-mobile.active:has(.gnb-item:nth-child(1).active) .gnb-mobile-img {background-image: url(../img/layout/menu01.jpg);}
.gnb-mobile.active:has(.gnb-item:nth-child(2).active) .gnb-mobile-img {background-image: url(../img/layout/menu02.jpg);}
.gnb-mobile.active:has(.gnb-item:nth-child(3).active) .gnb-mobile-img {background-image: url(../img/layout/menu03.jpg);}
.gnb-mobile.active:has(.gnb-item:nth-child(4).active) .gnb-mobile-img {background-image: url(../img/layout/menu04.jpg);}
.gnb-mobile.active:has(.gnb-item:nth-child(5).active) .gnb-mobile-img {background-image: url(../img/layout/menu05.jpg);}

@media (max-width:1480px){
	#gnb .gnb-item {padding: 0 20rem;}
}

@media (min-width: 1024px){
	#gnb .gnb-item .sub-menu{display:none;position:absolute;opacity:0;visibility:hidden;top: 60rem;right:0;width:100%;padding:10rem 15rem;background:var(--bg-01);box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23);transition:all 0.4s ease-out;transition-property: opacity, transform, visibility;transition-delay:0s, 0s, 0s;transform: translateY(-20rem);}
	#gnb .gnb-item .sub-menu{display:block; transition-delay:0.1s;}	
	#gnb .gnb-item .sub-menu > li > a{display:block;position:relative;padding:12rem 0rem; font-family: var(--lang-ko); font-size: var(--font-size-15); line-height: 1.4; text-align: center; color: var(--f-01); font-weight: 300; border-top:1px solid rgba(255, 255, 255, .05);transition:var(--trans-01);}
	#gnb .gnb-item .sub-menu > li > a:hover{opacity:0.5;}
	#gnb .gnb-item .sub-menu > li:first-child > a{border-top-width:0rem;}
	#gnb .gnb-item.active .sub-menu{opacity:1;visibility:visible;z-index:10;transition-delay:0s, 0s, 0s;transform: translateY(0);}	
}

@media all and (max-width:1023px){
	#header {padding: 25rem 0;}
	#header .gnb-full-cover,
	#header::before{display:none;}
	#header:not(:has(.gnb-mobile-menu.menu--st01)).color-on #logo a{background-size:100%; background-image:url(../img/layout/logo.svg);}

	#logo a {width: 175rem; height: 30rem;}

	.gnb-container-wrap{display:none;}
	.gnb-mobile-btn{display:block;}
	.gnb-mobile-btn.active .inner{width:35rem;}
	.gnb-mobile-btn.active{top: -4rem;}

	.sub-menu-depth{display:none;}

	.lang-menu{position:absolute;right: 50rem;}
	.lang-menu .select-link{width:50rem;}

	#header.on .gnb-mobile-btn span {background: #000;}
}

@media (max-width: 540px){
	#header{padding: 15rem 0;}
	#header.on {box-shadow: 3rem 3rem 10rem rgba(0, 0, 0, .1);}
	#header.color-on #logo a, .scroll-hide #logo a{background-image: url(../img/layout/logo.svg) !important;}
	#logo a{width: 125rem;height:20rem;}

	.gnb-mobile__inr {padding: 80rem 20rem 50rem;}
	.gnb-mobile-btn .inner{width: 26rem;height: 8rem;}
	.gnb-mobile-btn.active .inner{width:26rem;}
	.gnb-mobile-btn.active span:nth-child(1){top: 7rem;}
	.gnb-mobile-menu .gnb-item {flex-direction: column; align-items: flex-start; padding: 20rem 0;}
	.gnb-mobile-menu .gnb-item > a{font-size:22rem;}
	.gnb-mobile-menu .gnb-item > a::before {width: 8rem; height: 8rem; margin-left: 2rem;}
	.gnb-mobile-menu .gnb-item.active > a {padding-left: 23rem;}
	.gnb-mobile-menu .sub-menu li {margin: 5rem; margin-left: 0; margin-right: 15rem;}
	.gnb-mobile-menu .sub-menu li a{font-size:14rem;}
	.gnb-mobile-menu .sub-menu{display:none; margin-top:15rem; padding-left: 23rem;}
	.gnb-mobile-img {height: 150rem; border-radius: 12rem;}
	.gnb-mobile__copy {right: 20rem; bottom: 20rem; font-size: 12rem;}
}

/* **************************************** *
 * full page gnb site map 
 * **************************************** */
 #site-map{position:fixed;opacity:0;visibility:hidden;top: 0;right: 0;z-index:51;width: 40%;height: 100vh;background:#000;transition:var(--trans-01);transition-delay:0.1s;}
 #site-map.active{opacity:1; visibility:visible; transition-delay:0s;}
 #site-map.active .gnb-item{opacity:1; transform:translateY(0rem);}
 #site-map.active .gnb-item:nth-child(1){transition-delay:100ms;}
 #site-map.active .gnb-item:nth-child(2){transition-delay:200ms;}
 #site-map.active .gnb-item:nth-child(3){transition-delay:300ms;}
 #site-map.active .gnb-item:nth-child(4){transition-delay:400ms;}
 #site-map.active .gnb-item:nth-child(5){transition-delay:500ms;}
 #site-map.active .gnb-item:nth-child(6){transition-delay:600ms;}
 #site-map.active .gnb-item:nth-child(7){transition-delay:700ms;} 

 .site-map-inner{display:flex; align-items:center; height:100%;}
 .site-map__img {overflow: hidden; position: relative; display: block; width: 100%; height: 400rem; margin-bottom: 60rem; border-radius: 20rem; background-image: url(../img/layout/menu01.jpg); transition: var(--trans-01);}
 .site-map-info {/* width: 43%; */padding: 0 102rem;display: none;}
 .site-map-info > p {font-weight: 600; color: var(--f-01);}
 .site-map-info > p i {margin-right: 10rem;}
 .site-map-info > p i img {height: 17rem;}
 .site-map-info address {margin-top: 13rem;}
 .site-map-info address * {font-family: var(--lang-ko);}
 .site-map-info address p {font-size: var(--font-size-15); color: var(--g-01);}

 .site-map-inner:has(.gnb-item:nth-child(1) a.active) .site-map__img {background-image: url(../img/layout/menu01.jpg);}
 .site-map-inner:has(.gnb-item:nth-child(2) a.active) .site-map__img {background-image: url(../img/layout/menu02.jpg);}
 .site-map-inner:has(.gnb-item:nth-child(3) a.active) .site-map__img {background-image: url(../img/layout/menu03.jpg);}
 .site-map-inner:has(.gnb-item:nth-child(4) a.active) .site-map__img {background-image: url(../img/layout/menu04.jpg);}
 .site-map-inner:has(.gnb-item:nth-child(5) a.active) .site-map__img {background-image: url(../img/layout/menu05.jpg);}

 .site-map-list {width: 100%;height: 100%;border-left: 1px solid rgba(255, 255, 255, .1);}
 .site-map-list .gnb-item {padding-left: 50rem;padding-right: 50rem;}
 .site-map-list .gnb-item:not(:last-child) {border-bottom: 1px solid rgba(255, 255, 255, .1);}
 .site-map-list .gnb-item > a {opacity: .2;flex-shrink: 0;position: relative;margin-right: 40rem;font-weight:700;font-size: 38rem;color: var(--f-01);text-transform: uppercase;transition: var(--trans-01);}
 .site-map-list .gnb-item > a::before {opacity: 0; visibility: hidden; position: absolute; left: 0; top: 50%; content:''; width: 15rem; height: 15rem; border-radius: 3rem; background: var(--f-01); transform: translateY(-50%) rotate(45deg); transition: var(--trans-01);}
 .site-map-list .gnb-item a.active {opacity: 1; padding-left: 40rem;}
 .site-map-list .gnb-item a.active::before {opacity: 1; visibility: visible;}
 .site-map-list.site-map--row{display:grid;gap:0;padding: 110rem 0rem;}
 .site-map-list.site-map--row :is(.gnb-item, .sub-menu){display:flex; align-items:center;}
 .site-map-list .sub-menu a{color: var(--f-01); transition:var(--trans-01);}
 .site-map-list .sub-menu a:hover,
 .site-map-list .sub-menu a.on{color:var(--c-01);}
 .site-map-list.site-map--row.row-drap .gnb-item{display:flex; align-items: center;}
 .site-map-list.site-map--row.row-drap .gnb-item .sub-menu{display:none; margin-left:0;}
 .site-map-list.site-map--row.row-drap .gnb-item .sub-menu > li{display:inline-block;margin: 0 7rem;padding: 5rem 0;}
 .site-map-list .gnb-item{opacity:0; transition:all 0.7s ease; transform:translateY(30rem);}
 
 .gnb-full-icon{position:relative; width:40rem; height:22rem;}
 .gnb-full-icon > span{display:inline-block; position:absolute; left:0; width:100%; height:2rem; border-radius: 2rem; background:var(--b-01); transition:all 0.3s;}
 .gnb-full-btn .border-01{top:0;}
 .gnb-full-btn .border-02{top:0; bottom:0; margin:auto;}
 .gnb-full-btn .border-03{bottom:0px;}
 .gnb-full-btn .text{display:inline-block; width:100%; font-size:11rem; color:#FFF; text-align:center; transition:all 0.3s;}
 .gnb-full-btn .text::after{content:"MENU"; display:block; margin-top:6rem; font-weight:700;}
 .gnb-full-btn.active .text::after{content:"CLOSE";}
 .gnb-full-btn.active .border-01{transform:translateX(0) translateY(9rem) rotate(45deg) !important;}
 .gnb-full-btn.active .border-02{opacity:0;}
 .gnb-full-btn.active .border-03{transform:translateX(0px) translateY(-11rem) rotate(-45deg) !important;}
 .gnb-full-btn-wrap{position:relative; z-index:100;}
 .gnb-full-btn.active .gnb-full-icon > span{background:var(--b-01);}
 .gnb-full-btn{display:flex;align-items:center;flex-direction:column;cursor: pointer;}
 .gnb-full-btn.active .text,
 #header.color-on .gnb-full-btn .text{color:var(--b-01);}
 .gnb-full-btn.active .gnb-full-icon > span,
 #header.color-on .gnb-full-icon > span{background:#fff;}
 #header:has(#site-map.active) #logo a{background-size:100%; background-image:url(../img/layout/logo.svg);}
  
@media (max-width:1023px){
	.gnb-full-btn-wrap{display: none;}
}

/* **************************************** *
 * footer
 * **************************************** */
#footer *{color:#fff;}
#footer {position:relative;z-index: 51;background: #111;padding: 75rem 0 70rem;}

.footer-logo {display: block;width: 225rem;height: 67rem;margin-bottom: 75rem;background: url(../img/layout/logo-footer.svg) no-repeat center / 100%;}

.footer-menu {position: relative; padding-bottom: 25rem; border-bottom: 1px solid rgba(255, 255, 255, .1);}
.footer-menu li {margin-right: 40rem;}
.footer-menu a {display: inline-block; font-weight: 600;}

.footer-info {margin-top: 25rem;}
.footer-info * {font-size: var(--font-size-14); font-family: var(--lang-ko); color: var(--g-01) !important;}
.footer-info address p {position: relative; padding: 0 20rem; line-height: 1;}
.footer-info address p:not(:last-child) {border-right: 1px solid rgba(255, 255, 255, .1);}
.footer-info address p:first-child {padding-left: 0 !important;}
.footer-info a {display: inline-block;}
.footer-info a:hover {text-decoration: underline;}


@media (max-width:1023px){
	.footer-logo {width: 175rem;height: 53rem;margin-bottom: 60rem;} 
	.footer-info {flex-direction: column; align-items:flex-start}
	.footer-copyright {margin-top: 10rem;}
}

@media (max-width: 860px){
	#footer {padding: 55rem 0 50rem;}
	.footer-menu li {margin-right: 32rem;}
	.footer-info address {flex-direction: column; align-items: flex-start; }
	.footer-info address p {padding:0; margin: 5rem 0;}
	.footer-info address p:not(:last-child) {border-right: 0;}
	.footer-copyright {margin-top: 25rem;}
}

@media (max-width: 540px){
	#footer {padding: 30rem 0;}
	.footer-logo {width: 125rem;height: 41rem;margin-bottom: 23rem;} 
	.privacy-menu {flex-direction: column; align-items: flex-start;}
	.privacy-menu li {margin: 6rem 0;}
	.footer-menu {padding-bottom: 15rem;}
	.footer-menu a {font-size: 14rem;}
	.footer-info {margin-top: 17rem;}
	.footer-info * {font-size: 13rem;}
	.footer-copyright {margin-top: 20rem;}
}

/* **************************************** *
 * SCROLL TOP
 * **************************************** */
a.btn-top {position: absolute; right: 0; bottom: 25rem; font-size: var(--font-size-18); text-align: right; text-transform: uppercase;}
a.btn-top::before {display: block; content:''; width: 35rem; height: 25rem; margin-bottom: 20rem; margin-left: auto; background: url(../img/layout/arrow-basic_w.svg) no-repeat center / contain; transform: rotate(-90deg);}

@media (max-width:540px){
	a.btn-top {bottom: 22rem; font-size: 13rem;}
	a.btn-top::before {width: 30rem; height: 20rem; margin-bottom: 15rem;}
}