@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
 * **************************************** */
body{font-size:17rem;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:absolute;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;}

/* scroll set */
::selection{background: #161264c7;color:#fff;}

/* 스크롤바 커스텀 */
*::-webkit-scrollbar{width:16rem;background-color:#ebebeb;}
*::-webkit-scrollbar-thumb:hover{background-color: #a7a7a7;}
::-webkit-scrollbar-thumb{background-color:#C1C1C1;}

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

	body{}
	body,
	p,
	li,
	a{font-family:'Barlow','Roboto',"Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
}

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

/* **************************************** *
 * HEADER
 * **************************************** */
#header{position: fixed;z-index:51;width:100%;padding-top:55rem;transition:1.5s cubic-bezier(0.25, 0.47, 0.12, 0.99);transform:translateY(-100rem);}
#header:is(.on){transform: translateY(-20%)}
#header h1{font-size:0;}
#header:has(#site-map.active){position:fixed;}

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

.header-inner{display:flex;align-items:center;}
.header-inner::before {opacity: 0; visibility: hidden; position: absolute; left: 50%; top: 50%; content:''; width: calc(100% + 80rem); height: calc(100% + 20rem); border-radius: 100rem; background: var(--f-01); box-shadow: 10rem 15rem 15rem rgba(0, 0, 0, .1); transform: translate(-50%, -50%); transition: var(--trans-01);}
#header.on .header-inner::before {opacity: 1; visibility: visible;}
#header.on.hide .header-inner::before {/* opacity: 0; *//* visibility: hidden; */}
#header.hide {transform: translateY(-120%);}
#header.hide.mid-open{transform: translateY(0%);}

#logo{z-index:81; position:relative; margin-right: 40rem;}
#logo a{display:block;width: 215rem;height: 30rem;background-size: 100%;background-position:50% 50%;background-repeat:no-repeat;background-image:url(../img/layout/logo-new.svg);}
#logo img{height:47rem;}

/* util */
.header-util {z-index: 1; display: flex; align-items: center; margin-left: auto;}
.sign-menu__list a {font-size: 15rem; color: #C3C0BF;}
.sign-menu__list li:nth-child(1) a {padding: 10rem 12rem; padding-right: 20rem;}
.sign-menu__list li:last-child a {display: inline-block; min-width: 100rem; padding: 10rem 20rem; text-align: center; font-size: 13rem; font-weight: 600; color: var(--f-01); background: var(--c-02); border-radius: 20rem;}
.sign-user {margin-right: 20rem; font-size: var(--font-size-15); color: var(--g-02);}
.sign-user strong {color: var(--c-02);}

/* 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: 55rem;}
.lang-menu .select-link::before {opacity: 0; visibility: hidden; position: absolute; left:50%; top:20rem; content:''; display: block; width: 0; height: 0; margin-left: -7rem; border:solid transparent; border-width: 12rem 7rem 12rem 7rem; border-bottom-color: var(--c-01); transition: .3s ease .1s;}
.lang-menu .select-link:has(ul.on)::before {opacity: 1; visibility: visible;top:15rem;}
.lang-menu img{height:24rem;}
.lang-menu i{display:none;}
.lang-menu .select-link__btn::after{display:none;}
.lang-menu .select-link__btn{display:flex; justify-content:center;}
.lang-menu .select-link > ul{margin-top: 15rem; background: linear-gradient(329deg, #F54949 -24.84%, #E21919 88.72%);}
.lang-menu .select-link > ul a{padding:3rem 15rem; font-size:13rem; text-align:center; }
.lang-menu__icon{width:20rem;height: 20rem;background-position:50% 50%;background-image:url(../img/common/ic-lang.svg);background-repeat:no-repeat; background-size: cover;}

/* 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 25rem;transition:var(--trans-01);}
#gnb .gnb-item:last-child:after{background:none;}
#gnb .gnb-item > a{display:inline-block; padding: 20rem 0; color:var(--b-01); font-size:18rem; font-weight: 600; transition:var(--trans-01);}
#gnb .gnb-item .sub-menu > li.on > a{color: var(--f-01) !important;opacity: 1;}
#gnb .gnb-item > a.on{color: var(--c-01) !important;}

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

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

/* **************************************** *
 * MOBILE MENU
 * **************************************** */
.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:3px; background:var(--b-01); 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:var(--bg-01);transition:all 0.3s ease;overflow-y: scroll;}
.gnb-mobile-btn.active span:nth-child(1){top: 8rem;transform:rotate(45deg);}
.gnb-mobile-btn.active span:nth-child(2){transform:rotate(-45deg);}
.gnb-mobile-btn.active span{background:var(--f-01);}
.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:var(--font-size-76); color: var(--f-01);}
.gnb-mobile-menu{position:absolute;top:20vh;width:100%;box-sizing:border-box;padding:0rem 30rem;text-align:center;overflow: auto;}
.gnb-mobile-menu .gnb-item:not(:first-child){margin-top: 12rem;}
.gnb-mobile-menu .sub-menu{display:none; margin-top:19rem;}
.gnb-mobile-menu .sub-menu li a.on{color: var(--c-01);}
.gnb-mobile-menu .gnb-item.active{padding-bottom:25rem;}
.gnb-mobile-menu .gnb-item > a.active {color: #0057d5;}
.gnb-mobile-menu .sub-menu li {display:block; margin: 0 15rem;}
.gnb-mobile-menu .sub-menu li a{opacity: .5; font-size:20rem;font-weight: 600; color: var(--f-01);}
/* .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:-28rem;width:16rem;height:16rem;margin-left:12rem;background:url(../img/common/arrow-basic.svg) no-repeat 50% 50%;} */
.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.2; bottom:30rem; width:100%; font-weight:700; text-align:center; color: var(--f-01);}
.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;}


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

@media (min-width: 1024px){
	#gnb .gnb-item .sub-menu{display:none;position:absolute;opacity:0;visibility:hidden;top: 58rem;left:50%;min-width: 100%;padding:10rem 18rem;background:linear-gradient(329deg, #F54949 -24.84%, #E21919 88.72%);box-shadow:12rem 10rem 14rem rgba(0, 0, 0, 0.12);transition:all 0.4s ease-out;transition-property: opacity, transform, visibility;transition-delay:0s, 0s, 0s;transform:translateX(-50%) translateY(-20rem);}
	#gnb .gnb-item .sub-menu{display:block; transition-delay:0.1s;}	
	#gnb .gnb-item .sub-menu > li > a{opacity: .5;display:block;position:relative;padding:12rem 0rem;font-size: 17rem;border-top:1rem solid rgba(255, 255, 255, .24);color:var(--f-01);text-align:center;transition:var(--trans-01);white-space: nowrap;}
	#gnb .gnb-item .sub-menu > li > a:hover{opacity:1;}
	#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:translateX(-50%) translateY(0);}	
}

@media all and (max-width:1023px){	
	#header{padding: 22rem 0;}
	#header .gnb-full-cover,
	#header::before{display:none;}
	#header.color-on #logo a{background-size:100%; background-image:url(../img/layout/logo_w.svg);}
	.header-inner::before {display: none;}
	#header.on {background: var(--f-01); box-shadow: 5rem 8rem 10rem rgba(0, 0, 0, .1);}
	#header.on.hide {box-shadow: none;}
	#header:is(.hide, .on){transform: translateY(0%) !important;}

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

	.gnb-mobile-menu .gnb-item:has(li:nth-child(2)) > a{margin-left: -13rem;}	
	.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;}
	
	.sub-menu-depth{display:none;}
}

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

	.gnb-mobile-menu{top:19vh;}
	.gnb-mobile-btn {margin-left: 18rem;}
	.gnb-mobile-btn .inner{width: 26rem;height: 11rem;}
	.gnb-mobile-btn.active .inner{width:26rem;}
	.gnb-mobile-btn.active span:nth-child(1){top: 8rem;}
	.gnb-mobile-menu .gnb-item:not(:first-child){margin-top: 19rem;}
	.gnb-mobile-menu .gnb-item > a{font-weight: 900;font-size:21rem;}
	.gnb-mobile-menu .gnb-item > a::after{width: 13rem;height: 14rem;background-size: 100%;margin-left: 8rem;right: -24rem;}
	.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.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:auto;}
	.lang-menu .select-link > ul{min-width: 40rem; margin-top:7rem; margin-left: -12rem; padding:7rem 0rem;}
	.lang-menu__icon{width: 24rem;height: 24rem;}
	.lang-menu .select-link > ul a{font-size:12rem; padding: 3rem 10rem;}	
	.lang-menu i{font-size: 12rem;}

	.sign-menu__list li:nth-child(1) a {display: block; padding: 0 10rem; font-size: 12px;}
	.sign-menu__list li:nth-child(1) a::after { opacity: .7; content:''; display:none; width: 19rem; height: 19rem; background:url(../img/layout/ic-member.svg) no-repeat center / contain;}
	.sign-menu__list li:last-child a {white-space: nowrap; min-width: auto; padding: 8rem 12rem; font-size: 11rem;}
    .sign-user{margin-right: 10rem; margin-left: 4rem;}
    .sign-user i{display: none;}

}


/* **************************************** *
 * footer
 * **************************************** */
#footer{position:relative;z-index: 100;background: var(--f-01); background-size:cover; border-top: 1px solid var(--br-01);}
.fooer-inr {padding: 87rem 0 95rem;}
.footer-logo {width: 127rem; height: 26rem; font-size: 0; background: url(../img/layout/logo.svg) no-repeat center / contain;}
.footer-info {margin-top: 85rem;}
.footer-info p + p {margin-top: 3rem;}
.footer-info span {margin-right: 20rem; color: var(--g-02); font-family: var(--lang-ko);}
.footer-info a {transition: var(--trans-01);}
.footer-info a:hover {color: var(--b-01);}

.footer-menu {position: absolute; right: 0; top: 0; width: 165rem;}
.privacy-menu li + li {margin-top: 15rem;}
.privacy-menu li a {font-size: var(--font-size-14); color: var(--g-02);}
.footer-menu__lang {margin-top: 28rem;}
.footer-menu__lang li {margin-right: 7rem;}
.footer-menu__lang a {display: inline-block; padding: 7rem 15rem 8rem; line-height: 1; font-weight: 600; color: var(--f-01); border-radius: 50rem; background: #e1e1e1;}
.footer-menu__lang a.on {background: var(--gr-01);}

.footer-bottom {padding: 30rem 0;border-top: 1px solid var(--br-01);}
.footer-copyright {color: #494949;}

@media (max-width: 1024px){
    [lang="en-US"] .footer-info{padding-right: 180rem}
}

@media (max-width: 540px){
	#footer{margin-top: 0;/* padding-bottom: 100rem; */background-position:0 0;}
	#footer address{margin-top: 29rem;font-size: 14rem;}
	#footer address p span{margin-right:11rem;}

	.fooer-inr{padding:57rem 0 30rem;}
	.footer-menu{position:relative; top:0; right:0; width:100%; margin-top:40rem;}
	.privacy-menu{display:flex; gap:15rem;}
	.privacy-menu li + li{margin-top:0;}
	.footer-menu__lang{position:absolute; top:-191rem; right:0rem; right:auto; left:142rem;}
	.footer-menu__lang a{padding:5rem 13rem 6rem; font-size:14rem;}
	.footer-menu__lang li{margin-right:4rem;}

	.footer-bottom{padding: 20rem 0;}

    [lang="en-US"] .footer-info{padding-right: 0;}
    [lang="en-US"] .footer-menu__lang{top: -190rem; margin-top: 0;}
}

/* **************************************** *
 * SCROLL TOP
 * **************************************** */
a.btn-contact {backdrop-filter: blur(20rem);position: fixed;right: 0;bottom: 80rem;display: inline-flex !important;padding: 18rem 20rem;border-radius: 90rem 0 0 90rem;border: 1px solid rgba(100, 100, 100, .2);border-right: 0;background: rgba(255, 255, 255, .08);transition: var(--trans-01);z-index: 9;}
a.btn-contact i {position: relative; display: block; width: 52rem; height: 52rem; }
a.btn-contact i::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: url(../img/layout/symbol-red.svg) no-repeat center / contain; animation:rotate360 3s linear infinite}
a.btn-contact.fixed.active{position:fixed;opacity:1;visibility:visible;top:auto;bottom:80rem;}
a.btn-contact.active{position:absolute; opacity:1; visibility:visible; bottom:130rem;}
a.btn-contact p {overflow: hidden; opacity: 1; visibility: visible; width: 120rem; transition: var(--trans-01);}
a.btn-contact p span {opacity: 1;visibility: visible;display: block;padding-left: 25rem;font-size: var(--font-size-15);font-weight: 800;color: #747474;white-space: nowrap;transition: var(--trans-01);transition-delay: .1s;mix-blend-mode: color-burn;}

a.btn-top {display:inline-flex;align-items:center;position: relative;padding-right: 25rem; font-weight: 700; transition: var(--trans-01); color: var(--b-01);}
a.btn-top::before{position: absolute; right: 0; top: 6rem; content:""; display:block; height:10rem; background-image:url(../img/common/arrow-basic.svg); background-repeat: no-repeat; background-position: center; background-size: contain; transform:rotate(180deg); min-width:11rem; transition: var(--trans-01);}
a.btn-top:hover {color: var(--c-01);}
a.btn-top:hover::before {background-image: url(../img/common/arrow-basic_c.svg);}

@media (hover: hover) and (pointer: fine){
	a.btn-contact:hover p {opacity: 1; visibility: visible; width: 120rem;}
	a.btn-contact:hover span {opacity: 1; visibility: visible;}
}

@media (max-width:540px){
	a.btn-top{right: 0;width:auto;height: 27rem;font-weight:700;font-size:10rem;padding-right: 18rem;top: -270rem;}
	a.btn-top::before{background-size:10rem;margin-bottom: 0;top: 8rem;height: 11rem;}
	a.btn-top.fixed.active{bottom: 20rem;	}

	a.btn-contact{bottom: 30rem;padding: 11rem 13rem;background: #fff;}
	a.btn-contact p{opacity:1;visibility:visible;width:auto;position: relative;z-index: 8;}
	a.btn-contact span{opacity:1; visibility:visible;}
	a.btn-contact i{width: 37rem;height: 37rem;}
	a.btn-contact p span{opacity:1;visibility:visible;padding-left: 11rem;position: relative;}
	a.btn-contact.fixed.active,
	a.btn-contact.active{position:fixed; bottom:30rem;}
}