@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-primary); 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: 35rem 0;transition: background-color .4s, padding .4s, border-bottom-color .3s, transform .4s;/* transform:translateY(-100rem); */background-color: #000;border-bottom: 1px solid transparent;}
#header.hide{transform: translateY(-100%) !important;}

/* === 헤더 리빌 === */
#header[data-header="reveal"]{position:absolute; top:0; left:0;}
#header.is-fixed{position:fixed;}
#header.no-trans{transition:none !important;}

#header h1{font-size:0;}

.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:84rem;height:30rem;background-size:contain;background-position:0 50%;background-repeat:no-repeat;background-image:url(../img/layout/logo_w.png);}
#logo img{height:47rem;}

#header.on{padding:20rem 0;}

/* header-util */
.header-util{display:flex; align-items:center; gap:10rem;}
.header-kakao{display:block; width:26.667rem; height:28rem;}
.header-kakao i{display:block; width:100%; height:100%; background:url(../img/common/ic-kakao_w.svg) no-repeat 50% 50%; background-size:contain;}
#header .header-tel{color:var(--w);}

#header.color-on .header-kakao i{background-image:url(../img/common/ic-kakao.svg);}
#header.color-on .header-tel{color:var(--b-title);}

#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.png);}

/* **************************************** *
 * 모바일 메뉴 버튼
 * **************************************** */
.gnb-mobile-btn{display:none;}

@media all and (max-width:1023px){
	#header{padding: 30rem 0;}
	#header.on{padding:18rem 0;}
	#header::before{display:none;}
}

@media (max-width:860px){
	#logo a{width:75rem; height:27rem;}
}

@media (max-width: 540px){
	#header{padding: 20rem 0;}
	#header.on{padding:16rem 0;}
	#header.color-on #logo a, .scroll-hide #logo a{background-image: url(../img/layout/logo.png) !important;}
	#logo a{width:58rem; height:21rem; background-size: contain;}
	.header-util{gap:8rem;}
}

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

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

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

.footer-left{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; width:490rem;}
#footer-logo a{display:block; width:98rem; height:35rem; background:url(../img/layout/logo_w.png) no-repeat 0 50%; background-size:contain;}

.footer-right{display:flex; flex-direction:column; align-items:flex-start; gap:50rem; width:399rem;}
.footer-address{display:flex; flex-direction:column; align-items:flex-start; gap:18rem;}
.footer-tel{display:flex; align-items:center; gap:10rem;}
.footer-tel .footer-kakao{position:relative;}
.footer-tel .footer-kakao::before{content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%, -50%);} /* px-keep */
.footer-info-rows{display:flex; flex-direction:column; align-items:flex-start; gap:7rem;}
.footer-info-row{display:flex; align-items:center; gap:12rem;}
.footer-info-row__label{min-width:95rem; color:var(--op-w50) !important;}
.footer-info-row__value{color:var(--op-w50) !important;}
.footer-info-row__line{display:block; width:1px; height:16rem; background:var(--op-w10);}
#footer .footer-copyright{line-height:1.2857; color:var(--op-w20) !important;}

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

.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22rem;}
.footer-policy{display:flex; align-items:center; gap:30rem;}
#footer a.footer-policy__adm{color:var(--op-w40) !important;}

.footer-kakao{display:block; width:24.762rem; height:26rem;}
.footer-kakao i{display:block; width:100%; height:100%; background:url(../img/common/ic-kakao_w.svg) no-repeat 50% 50%; background-size:contain;}

@media (hover: hover) and (pointer: fine){
	.footer-policy a:hover{opacity:0.7;}
}

@media (max-width:1480px){
	#footer{padding:60rem 0;}
	.footer-right{gap:38rem;}
	.footer-address{gap:14rem;}
	.footer-divider{margin-top:36rem;}
	.footer-bottom{padding-top:18rem;}
}

@media (max-width:1200px){
	.footer-left{width:460rem;}
	.footer-right{width:340rem;}
	#footer [data-body="xxsm"],
	#footer [data-body="xsm"]{font-size:var(--font-16);}
	.footer-tel{gap:9rem;}
}

@media (max-width:1023px){
	#footer{padding:50rem 0;}
	.footer-right{gap:30rem;}
	.footer-address{gap:12rem;}
	.footer-divider{margin-top:31rem;}
	.footer-bottom{padding-top:16rem;}
}

@media (max-width:860px){
	.footer-top{flex-direction:column; align-items:flex-start; gap:36rem;}
	.footer-left, .footer-right{width:100%;}
	.footer-left{gap:20rem;}
	.footer-tel{gap:8rem;}
	.footer-tel .footer-kakao{order:-1;}
	#footer-logo a{width:85rem; height:30rem;}
}

@media (max-width: 540px){
	#footer{padding:40rem 0;}
	#footer-logo a{width:68rem; height:24rem;}
	.footer-right{gap:24rem;}
	.footer-address{gap:10rem;}
	.footer-divider{margin-top:27rem;}
	.footer-bottom{flex-direction:column; align-items:flex-start; gap:20rem; padding-top:20rem;}
	.footer-policy{flex-wrap:wrap; gap:16rem 20rem;}
	.footer-info-rows{gap:6rem;}
	.footer-info-row{flex-wrap:wrap; gap:8rem;}
	#footer .footer-desc{font-size:var(--font-15);}
	#footer .footer-tel{font-size:var(--font-16);}
	#footer [data-body="xsm"], #footer [data-body="xxsm"]{font-size:var(--font-15);}
}

/* **************************************** *
 * QUICK MENU
 * **************************************** */
.quick-menu{position:fixed; right:40rem; bottom:40rem; z-index:60; display:flex; flex-direction:column; align-items:center; gap:10rem;}
.quick-menu span{display:block; color:var(--w);}

.quick-menu__sample{display:flex; flex-direction:column; align-items:center; justify-content:center; width:120rem; height:120rem; padding:20rem; gap:12rem; background:var(--bg-secondary-dark); border:0; border-radius:20rem; filter:drop-shadow(10rem 10rem 5rem var(--op-b10)); text-align:center; cursor:pointer; transition:opacity .3s ease, visibility .3s ease;}
.quick-menu.is-on-sample .quick-menu__sample{opacity:0; visibility:hidden; pointer-events:none;}
.quick-menu__sample i{display:block; width:32.222rem; height:20rem; background:url(../img/common/ic-quick-sample.svg) no-repeat 50% 50%; background-size:contain;}

.quick-menu__top{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6rem; padding:10rem; background:none; border:0; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12rem); pointer-events:none; transition:opacity .3s ease, visibility .3s ease, transform .3s ease;}
.quick-menu__top::after{content:""; position:absolute; left:50%; bottom:0; width:44px; height:44px; transform:translateX(-50%);} /* px-keep */
.quick-menu__top.is-visible{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.quick-menu__top span{color:var(--w); transition:color .25s ease;}
.quick-menu__top i{display:block; width:14rem; height:14rem; background-color:var(--w); -webkit-mask-image:url(../img/common/btn-arrow-lg.svg); mask-image:url(../img/common/btn-arrow-lg.svg); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:50% 50%; mask-position:50% 50%; -webkit-mask-size:contain; mask-size:contain; transform:rotate(-90deg); transition:background-color .25s ease;}

.quick-menu.is-on-light .quick-menu__top span{color:var(--bg-secondary-dark);}
.quick-menu.is-on-light .quick-menu__top i{background-color:var(--bg-secondary-dark);}

@media (prefers-reduced-motion:reduce){
	.quick-menu__top span, .quick-menu__top i, .quick-menu__sample{transition:none;}
}

@media (max-width:1023px){
	.quick-menu{right:24rem; bottom:24rem; gap:8rem;}
	.quick-menu__sample{width:100rem; height:100rem; padding:16rem; gap:10rem;}
	.quick-menu__sample i{width:26.85rem; height:16.67rem;}
	.quick-menu__top{gap:5rem; padding:8rem;}
	.quick-menu__top i{width:12rem; height:12rem;}
}

@media (max-width: 540px){
	.quick-menu{right:16rem; bottom:16rem; gap:6rem;}
	.quick-menu__sample{width:84rem; height:84rem; padding:12rem; gap:8rem; background:var(--c-primary);}
	.quick-menu__sample i{width:22.55rem; height:14rem;}
	.quick-menu__top{gap:4rem; padding:6rem;}
	.quick-menu__top i{width:11rem; height:11rem;}
}

/* **************************************** *
 * 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:0rem;}
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:10rem;margin-bottom:5rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;transform: rotate(270deg);min-width:11rem;}

@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{background-size:10rem;margin-bottom: 2rem;}
}