@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 레이아웃 관련만 선언합니다.
 *
 * 01) GLOBAL BODY
 * 02) HEADER 
 * 03) FOOTER
 * 04) SCROLL TOP
 * 05) 404        
*/

/* **************************************** *
 * GLOBAL
 * **************************************** */
html{scrollbar-gutter:stable;}
body{overflow-x:hidden; overflow-y:overlay;}
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.fixed{overflow:hidden; top:0; right:0; bottom:0; left:0; width:100%; height:100%;}*/

body[data-bg="dark"]::after{background:#111;}

a.btn-adm{padding:5rem 14rem;background:var(--c-primary);font-size:14rem;color:#fff;border-radius:30rem;position: absolute;left: 0;bottom: -29rem;}

/* 드레그 컬러 세팅 */
::selection{background: var(--c-gold); color:#fff;}

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

/* **************************************** *
 * HEADER
 * **************************************** */
#header{position: fixed;z-index:51;width:100%;padding: 40rem 0;transition: background-color .4s, padding .4s, border-bottom-color .3s, transform .4s;background-color: transparent;border-bottom: 1px solid transparent;}
#header.hide{transform: translateY(-100%) !important;}
#header h1{font-size:0;}

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

#logo{position:relative; z-index:81;}
#logo a{display:block;overflow:hidden;width: 114rem;height: 32rem;font-size:0;text-indent:-9999rem;background-size: 100%;background-position:50% 50%;background-repeat:no-repeat;background-image:url(../img/layout/logo-header-white.svg);}
#logo img{height:47rem;}

#header.on{background-color: #fff;padding:20rem 0;border-bottom-color: #eee;}

/* 언어 전환 / 회원 메뉴 */
.lang-menu,
.member-menu{display:none;}

/* global btn */
.lang-menu{gap:10rem;}
.lang-menu a{opacity: 0.5 !important;color:#fff;font-weight: 800;}
.lang-menu li.on a{opacity: 1 !important;}
.lang-menu .select-link{width: 60rem;}
.lang-menu img{height:24rem;}
.lang-menu i{color: var(--w);}
.lang-menu .select-link__btn::after{background-image: url(../img/board/arrow-select_w.svg);position: relative;background-size: 12rem;}
.lang-menu .select-link__btn{display:flex; justify-content:center;}
.lang-menu .select-link > ul{}
.lang-menu .select-link > ul a{padding:3rem 15rem; font-size:13rem; text-align:center;}
.lnag-menu__icon{min-width: 20rem;height: 20rem;background-position:50% 50%;background-image:url(../img/common/ic-lang_w.svg);background-repeat:no-repeat;}

#header:is(.color-on, .on) .gnb-mobile-btn span{background:var(--b-title);}
#header:is(.color-on, .on) .lang-menu a{color:#aaa;}
#header:is(.color-on, .on) .lang-menu li.on a{color:var(--c-primary);}
#header:is(.color-on, .on) .lnag-menu__icon{background-image:url(../img/common/ic-lang.svg);}
#header:is(.color-on, .on) .lang-menu i{color: var(--b-01);}
#header:is(.color-on, .on) .lang-menu .select-link__btn::after{background-image: url(../img/board/arrow-select.svg);}

/* basic gnb */
.gnb-container-wrap{margin-left:auto;}
.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;position: relative;top: 10rem;}
#gnb .gnb-item{display:inline-block;position:relative;padding: 0 24rem;transition:var(--trans-01);}
#gnb .gnb-item:last-child:after{background:none;}
#gnb .gnb-item > a{display:inline-block;padding-bottom: 25rem;font-family:var(--lang-ui);font-weight:500;color:#fff;font-size:16rem;transition:var(--trans-01);}
#gnb .gnb-item .sub-menu > li.on > a{color: var(--c-primary) !important;font-weight: 700 !important;}
#gnb .gnb-item > a.on{color: var(--c-primary) !important;}

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

/* full gnb */
#gnb.gnb-full{top: 0;}
#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:3rem; background:var(--c-primary); 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:is(.color-on, .on) #logo a{background-image:url(../img/layout/logo-header-dark.svg);}
#header.color-on .gnb-full-cover{opacity:1;visibility:visible;height: 750rem;}
#header:is(.color-on, .on) #gnb .gnb-item > a{color:var(--b-title);}

/* inline gnb */
#header.color-on:has(.gnb-inline) .gnb-full-cover{height:185rem;}
#header:has(.gnb-inline) .gnb-full-cover{transition:all 0.3s ease;}
#gnb.gnb-inline .gnb-item .sub-menu{display:flex; left:0; width:auto; padding:0; background:none; border:0; white-space:nowrap;}
#gnb.gnb-inline .gnb-item .sub-menu > li > a{padding:0; background:none; border:0;}
#gnb.gnb-inline .gnb-item .sub-menu > li:not(:last-child){margin-right:20rem;}
#gnb.gnb-inline .gnb-item .sub-menu{display:flex; justify-content:center; top:85rem; box-shadow:none; transform:translateY(0rem); transform:translateX(-20rem);}
#gnb.gnb-inline .gnb-item > a{padding-bottom:0;}
#gnb.gnb-inline .gnb-item.active .sub-menu{transform:translateX(0rem);}

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

/* **************************************** *
 * MOBILE MENU
 * **************************************** */
.gnb-mobile-btn{display:none; position:absolute; right:0; z-index:80; padding:10rem 0rem; cursor:pointer;}
.gnb-mobile-btn span{display:block; position:relative; width:100%; height:2rem; background:#fff; transition:all 0.4s ease;}
.gnb-mobile-btn .inner{display:grid;position:relative;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:#fff;transition:all 0.3s ease;overflow-y: scroll;}
.gnb-mobile:has(.menu--st01){max-width: 550rem;}
/* 햄버거 X 활성 스타일 */
.gnb-mobile-btn.active span{position:absolute; top:50%; left:0; margin-top:-1px;}
.gnb-mobile-btn.active span:nth-child(1){transform:rotate(45deg);}
.gnb-mobile-btn.active span:nth-child(2){transform:rotate(-45deg);}
.gnb-mobile-btn.active span{background:#222;}
.gnb-mobile.active{opacity:1; visibility:visible;}
.gnb-mobile-menu{position:absolute;top: 12vh;width:100%;box-sizing:border-box;padding:0rem 30rem;overflow: auto;counter-reset:gnb-idx;}
.gnb-mobile-menu .gnb-item{counter-increment:gnb-idx; border-top:1px solid var(--op-b10);}
.gnb-mobile-menu .gnb-item:last-child{border-bottom:1px solid var(--op-b10);}
.gnb-mobile-menu .gnb-item > a{display:flex;align-items:center;position:relative;width:100%;gap:20rem;padding:24rem 0;font-family:var(--lang-en);font-weight:300;font-size:27rem;color: var(--b-01);}
.gnb-mobile-menu .gnb-item > a::before{content:counter(gnb-idx, decimal-leading-zero);min-width:36rem;font-family:var(--lang-en);font-weight:300;font-size:14rem;letter-spacing:0.05em;color:var(--c-gold);}
.gnb-mobile-menu .gnb-item > a.on{color:var(--c-gold);}
.gnb-mobile-menu .sub-menu{display:none; margin-top:22rem;}
.gnb-mobile-menu .sub-menu li a.on{color: var(--c-primary);}
.gnb-mobile-menu .gnb-item.active{padding-bottom:15rem;}
.gnb-mobile-menu .sub-menu li a{font-size:18rem;display: block;}
.gnb-mobile-menu .sub-menu li:not(:first-child){margin-top:12rem;}
.gnb-mobile-menu .gnb-item:has(li:nth-child(2)){}
.gnb-mobile-menu .gnb-item > a::after{content:"";display:none;position:absolute;right: 0;width: 26rem;height: 26rem;background: url(../img/board/arrow-select.svg) no-repeat 50% 50%;background-size: 16rem;}

@media (hover:hover) and (pointer:fine){
	.gnb-mobile-menu .gnb-item > a:hover{color:var(--c-gold);}
}
.gnb-mobile-menu .gnb-item.active:has(li:nth-child(2)) > a::after{transform: rotate(180deg);}
.gnb-mobile-menu .gnb-item:has(li:nth-child(2)) > a::after{display:block;}
.gnb-mobile__copy{position:absolute; opacity:0.3; bottom:30rem; width:100%; font-weight:800; text-align:center;}
.gnb-mobile-menu .gnb-item{opacity:0; 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  .gnb-item:nth-child(8){transition-delay:800ms;}

/* st 1 */
.gnb-mobile-menu.menu--st01{top:auto; bottom:0; height:calc(100% - 100rem); border-top:1px solid #f3f3f3; text-align:left;}
.gnb-mobile-menu.menu--st01::before{content:""; position:absolute; top:0; right:0; width:50%; height:100%; background:#f7f7f7;}
.gnb-mobile-menu.menu--st01 .gnb-item{width:50%;}
.gnb-mobile-menu.menu--st01 .sub-menu{position:absolute; top:0; left:100%; width:100%; box-sizing:border-box; margin-top:0;}
.gnb-mobile-menu.menu--st01 .gnb-item.active{padding:0;}
.gnb-mobile-menu.menu--st01 .gnb-item > a{font-size:20rem;}
.gnb-mobile-menu.menu--st01 .gnb-item:nth-child(1){margin-top:40rem;}
.gnb-mobile-menu.menu--st01 .gnb-item > a{display:flex;}
.gnb-mobile-menu.menu--st01 .gnb-item > a::after{right:25rem; width:12rem; height:12rem; transform:rotate(-90deg) !important;}
.gnb-mobile-menu.menu--st01 .gnb-item:not(:first-child){margin-top:23rem;}
.gnb-mobile-menu.menu--st01 .gnb-item.active > a{color:var(--c-primary);}
.gnb-mobile-menu.menu--st01 .gnb-item.active > a::after{background-image:url(../img/common/arrow-basic_c.svg);}
.gnb-mobile-menu.menu--st01 .sub-menu.active{opacity:1; visibility:visible; transform:translateY(0rem);}
.gnb-mobile-menu.menu--st01 .sub-menu{display:block; opacity:0; visibility:hidden; transition:var(--trans-01); transform:translateY(15rem);}

@media (max-width:1480px){
	#header.on{padding:18rem 0;}
}

@media (max-width:1200px){
	#header.on{padding:16rem 0;}
}

@media all and (max-width:1023px){
	#header{padding: 30rem 0;}
	#header.on{padding:14rem 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-header-dark.svg);}

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

	.gnb-mobile-menu.menu--st01 .gnb-item:has(li:nth-child(2)) > a{margin-left:0;}
	.gnb-mobile-menu.menu--st01 .sub-menu li a{display:block; padding:4rem 20rem; font-size:16rem;}
	.gnb-mobile-menu .gnb-item.active{padding-bottom:13rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item:not(:first-child){margin-top:19rem;}

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

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

@media (max-width:860px){
	#header.on{padding:12rem 0;}
	.gnb-mobile-menu .gnb-item.active{padding-bottom:12rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item:not(:first-child){margin-top:16rem;}
}

@media (max-width: 540px){
	#header{padding: 20rem 0;}
	#header.on{padding:10rem 0;}
	#header.color-on #logo a, .scroll-hide #logo a{background-image: url(../img/layout/logo-header-dark.svg) !important;}
	#logo a{width: 90rem;height:25rem;background-size: 100%;}

	.gnb-mobile-menu{top:14vh;padding-bottom: 7vh;}
	.gnb-mobile-btn .inner{width: 26rem;height: 8rem;}
	.gnb-mobile-btn.active .inner{width:26rem;}
	.gnb-mobile-menu .gnb-item > a{gap:14rem; padding:18rem 0; font-weight:300; font-size:21rem;}
	.gnb-mobile-menu .gnb-item > a::before{min-width:28rem; font-size:12rem;}
	.gnb-mobile-menu .gnb-item > a::after{width: 18rem;height: 18rem;background-size: 12rem;right: 0;}
	.gnb-mobile-menu .sub-menu li a{font-size:16rem;}
	.gnb-mobile-menu .sub-menu li:not(:first-child){margin-top: 12rem;}
	.gnb-mobile-menu .sub-menu{display:none; margin-top:18rem;}
	.gnb-mobile-menu .gnb-item.active{padding-bottom:10rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item:not(:first-child){margin-top:13rem;}

	.gnb-mobile-menu.menu--st01{height: calc(100% - 80rem); padding:0rem 20rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item > a{font-size:16rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item > a::after{right:20rem; width:10rem; height:10rem;}
	.gnb-mobile-menu.menu--st01 .sub-menu li a{padding:2rem 18rem; font-size:14rem;}
	.gnb-mobile-menu.menu--st01 .gnb-item:nth-child(1){margin-top:25rem;}

	.lang-menu{right: 30rem;margin-top: -1rem;}
	.lang-menu .select-link{width:50rem;}
	.lang-menu .select-link > ul{margin-top:7rem; padding:7rem 0rem;}
	.lnag-menu__icon{margin-right: 7rem;min-width:15rem;}
	.lang-menu .select-link > ul a{font-size:12rem;}
	.lang-menu i{font-size: 12rem;}

	.gnb-mobile-menu{padding:0 20rem}
	.gnb-mobile-btn span{height:1px}
	.gnb-mobile-btn.active span{margin-top:-0.5px;}
}

/* **************************************** *
 * footer
 * **************************************** */
#footer *{color:var(--w);}

#footer{position:relative;z-index: 50;background:var(--bg-dark);padding:50rem 0 26rem;margin-top: 0;}

.footer-top{display:flex; justify-content:space-between; align-items:flex-start;}

#footer-logo a{display:block; overflow:hidden; width:121rem; height:34rem; font-size:0; text-indent:-9999rem; background:url(../img/layout/logo-footer-white.svg) no-repeat 50% 50%; background-size:100%;}

/* footer gnb */
.footer-gnb__menu{display:flex; flex-wrap:wrap; align-items:center; gap:48rem;}
.footer-gnb__menu .gnb-item > a{display:block; font-family:var(--lang-ui); font-weight:500; font-size:16rem; transition:var(--trans-01);}
.footer-gnb__menu .sub-menu, .footer-gnb__menu .sub-menu-depth{display:none;}

@media (hover: hover) and (pointer: fine){
	.footer-gnb__menu .gnb-item > a:hover{opacity:0.6;}
	.footer-links a:hover{opacity:0.6;}
}

#footer .footer-mid{display:flex; justify-content:space-between; align-items:center; margin-top:110rem;}
.footer-mid__left{display:flex; flex-direction:column; align-items:flex-start; gap:21rem; width:524rem;}

.footer-sns{display:flex; align-items:center; gap:20rem; height:20rem;}
.footer-sns a{opacity:0.4; transition:var(--trans-01);}
.footer-sns img{display:block;}
@media (hover:hover) and (pointer:fine){
	.footer-sns a:hover{opacity:1;}
}

.footer-info{display:flex; flex-wrap:wrap; align-items:center; width:100%; gap:1rem 15rem; font-size:14rem; line-height:1.786; letter-spacing:0.01em;}
.footer-info li{display:flex; align-items:center; gap:6rem; font-family:var(--lang-ui), var(--lang-ko); white-space:nowrap;}
#footer .footer-info i{font-style:normal; font-weight:500; color:var(--op-w40);}
#footer .footer-info span, #footer .footer-info a{color:var(--op-w90); font-weight:400;}

.footer-email{font-family:var(--lang-en); font-size:44rem; line-height:0.568; font-weight:300; letter-spacing:0.01em;}
#footer .footer-email a{color:var(--op-w90);}

.footer-divider{margin-top:22rem; height:1px; background:var(--op-w10);}

.footer-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:24rem; font-size:14rem; line-height:1.786; letter-spacing:0.01em;}
#footer .footer-copyright{font-family:var(--lang-ui); color:var(--op-w40); font-weight:400;}

.footer-links{display:flex; align-items:center; gap:44rem;}
#footer .footer-links li{position:relative; color:var(--op-w40);}
.footer-links li:not(:first-child)::before{content:"";position:absolute;top: 6rem;bottom:0;left: -22rem;width:1px;height: 14rem;background:var(--op-w20);}
#footer .footer-links a{font-weight: 300;color: var(--op-w40);}
#footer .footer-links__admin a{color:var(--w);}

@media (max-width:1480px){
	.footer-gnb__menu{gap:40rem;}
	#footer .footer-mid{margin-top:90rem;}
	.footer-mid__left{gap:19rem; width:474rem;}
	.footer-email{font-size:40rem;}
	.footer-bottom{margin-top:21rem;}
	.footer-links{gap:20rem;}
	.footer-links li:not(:first-child)::before{left:-10rem;}
}

@media (max-width:1200px){
	.footer-gnb__menu{gap:36rem;}
	#footer .footer-mid{margin-top:80rem;}
	.footer-mid__left{gap:17rem; width:424rem;}
	.footer-email{font-size:36rem;}
	.footer-bottom{margin-top:19rem;}
	.footer-links{gap:18rem;}
	.footer-links li:not(:first-child)::before{left:-9rem;}
}

@media all and (max-width:1023px){
	.footer-gnb__menu{gap:28rem;}
	#footer .footer-mid{margin-top:70rem;}
	.footer-mid__left{gap:15rem; width:374rem;}
	.footer-divider{margin-top:18rem;}
	.footer-email{font-size:32rem;}
	.footer-bottom{margin-top:16rem;}
	.footer-links{gap:16rem;}
	.footer-links li:not(:first-child)::before{left:-8rem;}
}

@media (max-width:860px){
	.footer-top{flex-direction:column; gap:24rem;}
	#footer .footer-mid{flex-direction:column; align-items:flex-start; gap:48rem; margin-top:60rem;}
	.footer-mid__left{gap:13rem; width:100%;}
	.footer-email{font-size:28rem; line-height: 1;}
	.footer-email a{font-family: 'Nyght Serif';}
	.footer-bottom{margin-top:14rem;}
	.footer-links{gap:14rem;}
	.footer-links li:not(:first-child)::before{left:-7rem;}
}

@media (max-width: 540px){
	.footer-sns{gap:14rem;}
	#footer{padding:40rem 0 22rem;background-position:0 0;}
	.footer-gnb__menu{gap:16rem;}
	#footer .footer-mid{margin-top:40rem;}
	.footer-mid__left{gap:11rem;}
	.footer-divider{margin-top:15rem;}
	.footer-email{font-size:24rem;}
	
	.footer-bottom{flex-direction:column; align-items:flex-start; gap:14rem; margin-top:12rem;}
	.footer-info{font-size:13rem;}
	.footer-links{gap:22rem;}
	.footer-links li:not(:first-child)::before{left: -10rem;height: 12rem;top: 6rem;}
}

/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.btn-top-wrap{position: fixed;bottom: 50rem;right:50rem;visibility: hidden;opacity: 0;transition: var(--trans-01);}
.btn-top-wrap.fixed.active{position:fixed;opacity:1;visibility:visible;top:auto;bottom:50rem;}
.btn-top-wrap.active{position:absolute; opacity:1; visibility:visible; top:-100rem;}
a.btn-top{display:flex;align-items:center;font-family:var(--lang-en);font-size: 12rem;flex-direction:column;transition: var(--trans-01);background: var(--b-01);width: 70rem;height: 70rem;justify-content: center;border-radius: 100%;font-weight: 700;}
a.btn-top i{position:relative; margin-bottom:10rem;}
a.btn-top::before{content:"";display:block;height:8rem;min-width:14rem;margin-bottom:8rem;background:url(../img/common/arrow-top.svg) no-repeat 50% 50%;background-size:14rem 8rem;}

@media (max-width:540px){
	.btn-top-wrap{right:20rem;}
	.btn-top-wrap.fixed.active{bottom: 20rem;	}
	a.btn-top{width:55rem; height:55rem; font-weight:700; font-size:10rem; }
	a.btn-top::before{min-width:11rem; background-size:11rem 6rem; margin-bottom:4rem;}
	.btn-top-wrap.active{top:-70rem}
}