@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

/*
 * layout.css.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) 레이아웃설정
 *
 */

/* 1) root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#c59861;
	--color-white:#fff;
	--color-black:#000;
	
	--font-base:16rem;
	--font15:15rem;
	--font17:17rem;
	--font18:18rem;
	--font20:20rem;
	--font22:22rem;
	--font23:23rem;
	--font25:25rem;
	--font28:28rem;
	--font30:30rem;
	--font35:35rem;
	--font40:40rem;
	--font45:45rem;
	--font50:50rem;
	--font60:60rem;
	--font70:70rem;
	--font90:90rem;

	--font-eng:'EB Garamond', Sans-serif;
	--font-eng:'Playfair Display', Sans-serif;
	--font-carlo:'MonteCarlo', Sans-serif;
	--font-combine:'EB Garamond', 'Pretendard', Sans-serif;
	--font-combine:'Playfair Display', 'Pretendard', Sans-serif;
	--trans-ani:0.3s ease 0s;
}
@media (max-width:1024px){
	:root{
		--font-base:clamp(14rem, 1.563vw, 16rem);
		--font15:clamp(14rem, 1.465vw, 15rem);
		--font17:clamp(15rem, 1.66vw, 17rem);
		--font18:clamp(16rem, 1.758vw, 18rem);
		--font20:clamp(18rem, 1.953vw, 20rem);
		--font22:clamp(18rem, 2.148vw, 22rem);
		--font23:clamp(18rem, 2.246vw, 23rem);
		--font25:clamp(20rem, 2.441vw, 25rem);
		--font28:clamp(20rem, 2.734vw, 28rem);
		--font30:clamp(22rem, 2.93vw, 30rem);
		--font35:clamp(22rem, 3.418vw, 35rem);
		--font40:clamp(25rem, 3.906vw, 40rem);
		--font45:clamp(28rem, 4.395vw, 45rem);
		--font50:clamp(30rem, 2.604vw, 50rem);
		--font60:clamp(35rem, 5.859vw, 60rem);
		--font70:clamp(45rem, 6.836vw, 70rem);
		--font90:clamp(55rem, 8.789vw, 90rem);
	}
}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1300px){
    html{font-size:0.077vw /* 1px */;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}
}
@media (max-width:480px){
    html{font-size:0.271vw /* 1.3px */;}	
}

/* 준비중 */
.ready-page{padding:var(--page-top) 0; text-align:center;}
.ready-page strong{display:block; font-size:35rem;}
.ready-page strong i{opacity:0.2; display:block; margin-bottom:10rem; font-size:45rem;}
.ready-page p{margin-top:20rem; font-size:18rem; line-height:1.4;}
@media (max-width:480px){
	.ready-page	strong{font-size:30rem;}
	.ready-page	p{font-size:16rem; word-break:keep-all;}
	.ready-page	p br{display:none;}
}

/* 3) 레이아웃설정 */
body{overflow:inherit; position:relative;}
body.active{overflow:hidden; position:fixed; width:100%;}
	/* header */
#header{position:absolute; top:0; left:0; z-index:90; width:100%;}
#header .inr{display:flex; justify-content:center; align-items:center; position:relative; z-index:20; padding:25rem var(--page-pad);}
#header .logo{opacity:1; position:absolute; left:var(--page-pad); top:50%; width:168rem; aspect-ratio: 168/47; transform:translateY(-50%);}
#header .logo a{display:block; width:100%; height:100%; background:url(../images/common/logo.svg) no-repeat 50% 50%; background-size:100%; font-size:0;}
#header [class*="util-"]{display:flex; align-items:center; font-size:16rem; font-weight:600;}
.util-left{gap:50rem; position:absolute; right:var(--page-pad); top:50%; transform:translateY(-50%);}
.util-left [data-util]{display:inline-flex; align-items:center; gap:5rem;}
.util-list{gap:25rem;}
.util-list li{display:flex; align-items:center; gap:10rem;}
.util-list li:after{content:''; opacity:0.3; display:block; width:1rem; height:25rem; margin-left:15rem; background:var(--color-base);}
.util-list li:last-child:after{display:none;}
[data-util] a{display:flex; justify-content:center; align-items:center; gap:10rem; min-width:180rem; height:45rem; box-sizing:border-box; border:2rem solid rgba(34,34,34,0.2); border-radius:50em; transition:border 0.3s;}
[data-util] a:before{content:''; display:block; width:16rem; height:21rem; background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto;}
[data-util] a:hover{border-color:rgba(34,34,34,0.6);}
[data-util="language"] a:before{background-image:url(../images/common/ico_global.svg);}
[data-util="phone"] a:before{background-image:url(../images/common/ico_phone.svg);}
.mob-util{display:none;}
	/* header - active */
#header .inr.active .logo{opacity:0; visibility:hidden;}
#header .inr.active{border-bottom-width:0 !important;}
	/* header white */
#header.white .logo a{background-image:url(../images/common/logo_w.svg);}
#header.white [class*="util-"]{color:var(--color-white);}
#header.white .util-right .button{border-color:rgba(255,255,255,0.6); color:var(--color-white);}
#header.white .util-right .button span{color:var(--color-white);}
#header.white .mega-menu__btn{color:var(--color-white);}
#header.white .mega-menu__btn i:before,
#header.white .mega-menu__btn i:after{background-color:var(--color-white);}
#header.white .util-list li:after{background-color:var(--color-white);}
#header.white [data-util="language"] a:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M14.493,7.171a6.55,6.55,0,0,0-4.06-5.249A13.777,13.777,0,0,1,11.636,8c0,.111,0,.221,0,.33A6.43,6.43,0,0,0,14.493,7.171Zm-.005,1.7a11.348,11.348,0,0,1-2.939.968,11.981,11.981,0,0,1-1.116,4.24A6.552,6.552,0,0,0,14.488,8.87ZM1.529,8.993a6.553,6.553,0,0,0,4.038,5.085A11.913,11.913,0,0,1,4.458,9.9,10.255,10.255,0,0,1,1.529,8.993ZM1.5,7.205a3.8,3.8,0,0,0,1.7.9A10.994,10.994,0,0,0,4.368,8.4c0-.132,0-.266,0-.4a13.777,13.777,0,0,1,1.2-6.078A6.553,6.553,0,0,0,1.5,7.205Zm8.67,1.38c.006-.193.01-.388.01-.585,0-3.648-1.159-6.545-2.182-6.545S5.818,4.352,5.818,8q0,.313.011.618A20.8,20.8,0,0,0,8,8.727,16.9,16.9,0,0,0,10.172,8.585Zm-.117,1.483A18.606,18.606,0,0,1,8,10.182c-.712,0-1.4-.031-2.052-.089C6.279,12.7,7.183,14.545,8,14.545S9.727,12.685,10.055,10.068ZM8,0A8,8,0,1,1,0,8,8,8,0,0,1,8,0Z'/%3E%3C/svg%3E");}
#header.white [data-util="phone"] a:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.5 20.207'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;%7D%3C/style%3E%3C/defs%3E%3Cg id='레이어_2' data-name='레이어 2'%3E%3Cg id='레이어_1-2' data-name='레이어 1'%3E%3Cpath class='cls-1' d='M4.652,9.108A7.593,7.593,0,0,0,6.984,13.53a.727.727,0,0,0,.7.16l2.616-.774a.717.717,0,0,1,.677.144l3.515,3a.717.717,0,0,1,.192.848A4.356,4.356,0,0,1,9.432,19.26,12.341,12.341,0,0,1,1.309,3.813a4.356,4.356,0,0,1,4.913-3,.718.718,0,0,1,.59.64l.479,4.605a.727.727,0,0,1-.254.634L4.906,8.446A.728.728,0,0,0,4.652,9.108Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
#header.white [data-util] a{border-color:rgba(255,255,255,0.2);}
#header.white [data-util] a:hover{border-color:rgba(255,255,255,0.6);}
#header.white .gnb-area .gnb > li > a{color:var(--color-white); }
#header.white .inr.active [class*="util-"],
#header.white .inr.active .mega-menu__btn {color: var(--color-base, #333);}
#header.white .inr.active .mega-menu__btn.active i:before,
#header.white .inr.active .mega-menu__btn.active i:after {background-color: var(--color-base);}
#header.white .inr.active .util-list li:after{background-color:var(--color-base);}
#header.white .inr.active .util-right .button{border-color:rgba(34,34,34,0.6);}
#header.white .inr.active .util-right .button span{color:var(--color-base, #333);}
#header.white .inr.active [data-util] a{border-color:rgba(34,34,34,0.2);}
#header.white .inr.active [data-util="language"]:before{background-image: url(../images/common/ico_global.svg);}
#header.white .inr.active [data-util="phone"] a:before{background-image: url(../images/common/ico_phone.svg);}

/* gnb */
#header .inr.active	.gnb-area{opacity:0; visibility:hidden;}
.gnb-area .gnb{display:flex;}
.gnb-area .gnb > li a{display:inline-block;}
.gnb-area .gnb > li{position:relative;}
.gnb-area .gnb > li > a{padding:25rem 25rem; font-size:17rem; font-weight:500; text-transform: uppercase;}
.gnb-area .box{opacity:0; visibility:hidden; position:absolute; top:70rem; left:50%; min-width:120rem; padding:20rem; background:var(--color-white); border:1rem solid #222; border-radius:0; box-shadow:0 20rem 30rem rgba(0,0,0,0.1); transform:translateX(-50%); transition:0.3s;}
.gnb-area .gnb > li.active .box{opacity:1; visibility:visible;}
.gnb-area .box li{margin:5rem 0;}
.gnb-area .box li a{padding:3rem 0; white-space:nowrap; color:#999; letter-spacing:-0.5rem; transition:color 0.3s;}
.gnb-area .box li a:hover{color:#000;} 

/* mega menu */
.mega-menu{opacity:0; visibility:hidden; position:fixed; top:0; left:0; z-index:10; width:100%; height:100vh;}
.mega-menu:before{content:''; display:block; position:absolute; z-index:-1; width:100%; height:100%; background-color:var(--color-white);}
.mega-menu nav{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; height:100%; padding:0 20rem;}
.mega-menu .gnb{display:flex; flex-direction:column; width:90%;}
.mega-menu .gnb li.none{display:none !important;}
.mega-menu .gnb > li{display:flex; align-items:center; gap:50rem; padding:20rem 0; border-bottom:1rem solid rgba(34,34,34,0.1);}
.mega-menu .gnb > li a{display:inline-block;}
.mega-menu .gnb > li > a{flex:none; width:22%; font-family:var(--font-eng); font-size:30rem; font-weight:500;}
.mega-menu .gnb .box{flex:auto;}
.mega-menu .gnb .box ul{display:flex; align-items:center; gap:50rem;}
.mega-menu .gnb .box ul > li{transition:opacity 0.3s;}
.mega-menu .gnb .box ul > li:first-child{padding-top:0;}
.mega-menu .gnb .box ul > li > a{display:block; font-size:18rem; font-weight:400;}
.mega-menu .gnb-area .gnb .box ul:has(li:hover) li{opacity:0.4;}
.mega-menu .gnb-area .gnb .box ul:has(li:hover) li.active{opacity:1; color:#000;}
.mega-menu .obj-bg{opacity:0.05; display:block; position:absolute; top:50%; left:50%; z-index:-1; width:634rem; transform:translate(-50%, -50%);}
	/* mega menu - active */
.mega-menu{opacity:0; visibility:hidden; transition:0.1s linear 0.4s; transition-property:opacity, visibility;}
.mega-menu:before{transform:scaleY(0); transform-origin:0 0; transition:transform 0.6s cubic-bezier(.16,1,.3,1);}
.mega-menu.active{opacity:1; visibility:visible; transition-delay:0s;}
.mega-menu.active:before{transform:scaleY(1);}
.mega-menu .gnb > li,
.mega-menu .mob-util{opacity:0; transform:translateY(50rem); transition:0.6s cubic-bezier(.16,1,.3,1);}
.mega-menu.active .gnb > li,
.mega-menu.active .mob-util{opacity:1; transform:translateY(0rem); transition-delay:0.2s;}
.mega-menu .obj-bg{opacity:0; transition:opacity 0.3s cubic-bezier(.16,1,.3,1) 0s;}
.mega-menu.active .obj-bg{opacity:0.05; transition-duration:1.5s; transition-delay:0.3s;}
	/* mega menu - btn */
.mega-menu__btn{display:none; /* display:inline-flex; */ align-items:center; gap:10rem; background-color:transparent; font-size:16rem;}
.mega-menu__btn span{line-height:1cap; font-weight:600;}
.mega-menu__btn i{display:flex; flex-direction:column; justify-content:center; gap:6rem; width:30rem; height:30rem;}
.mega-menu__btn i:before,
.mega-menu__btn i:after{content:''; display:block; width:100%; height:2rem; background-color:var(--color-base); transition:0.3s;}
	/* mega menu - btn - active */
.mega-menu__btn.active i{gap:0;}
.mega-menu__btn.active i:before{transform:rotate(45deg);}
.mega-menu__btn.active i:after{margin-top:-2px; transform:rotate(-45deg);}

/* header - 반응형 */
@media screen and (max-width:1760px){
	/* .gnb-area .gnb > li > a{padding:25rem 15rem;} */
	.gnb-area .gnb > li > a{padding:25rem clamp(5rem, 0.78125000vw, 15rem); font-size: clamp(12rem, 0.88541667vw, 17rem);}
	.util-left{gap:30rem;}
}
@media(max-width:1279px){
	#header .logo{position:static; margin-right:auto; transform:translateY(0)}
	.gnb-area{display:none}

	.util-right{gap:30rem; right:30rem;}
	.mega-menu .gnb > li > a{width:18%; font-size:28rem;}
	.mega-menu .gnb .box ul{gap:30rem;}
	.mega-menu__btn{display:inline-flex;}
}
@media screen and (max-width:1024px){
	#header .inr.active{background-image:linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7) 20%, #fff 60%);}
	.mob-value{display:none !important;}
	.mob-view{opacity:0; visibility:hidden;}
	.mob-util{opacity:0; visibility:hidden; display:block; position:absolute; right:140rem; top:25rem; z-index:30;}
	.mob-util [data-util] a{border-color:rgba(34,34,34,0.1);}
	#header.white .mob-util .util-list{color:var(--color-base);}
	#header.white .mob-util .util-list [data-util="phone"] a:before{background-image:url(../images/common/ico_phone.svg);}
	
	#header .inr.active .mob-view,
	#header .inr.active ~ .mob-util{opacity:1; visibility:visible;}
	.util-list li:after{display:none;}
	
	.mega-menu{height:var(--higMob100);}
	.mega-menu .gnb li.none{display:block !important;}
	.mega-menu nav{overflow-y:auto; justify-content:flex-start; align-content:flex-start; box-sizing:border-box; padding:135rem 30rem 0;}
	.mega-menu .gnb{flex-direction:column; width:100%; padding-bottom:50rem;}
	.mega-menu .gnb > li{flex-direction:column; gap:0;}
	.mega-menu .gnb > li > a{display:block; width:100%; text-align:center;}
	.mega-menu .gnb > li > .box{display:none;}
	.mega-menu .gnb > li .open{display:none;}
	.mega-menu .gnb .box ul{margin-top:30rem;}
	.mega-menu .gnb .box ul:has(li:hover) li{opacity:1;}
	.mega-menu.active .obj-bg{opacity:0.03;}
	.mega-menu .obj-bg{width:clamp(50%, 61.914vw, 634rem);}
}
@media screen and (max-width:768px){
	.util-right{top:100rem; right:20rem;}
	.util-right .button{min-width:inherit; padding:5rem 15rem; font-size:14rem;}
	.mega-menu .gnb .box ul{flex-direction:column; gap:20rem;}
}
@media screen and (max-width:480px){
	#header .logo{width:134rem;}
	[data-util]:before{width:12rem; height:17rem;}
	.mega-menu__btn span{font-size:0;}
	.util-right .button{display:none;}
	.util-left{gap:25rem;}
	.mega-menu nav{padding:100rem 20rem 30rem;}
	.mega-menu .gnb > li > a{font-size:24rem;}
	.mega-menu .gnb .box ul > li > a{font-size:17rem;}
	.mega-menu__btn{gap:0;}
	
	.mob-util{right:auto; left:var(--page-pad);}
	.mob-util button{margin:0;}
	.mob-util .util-list{gap:0;}
	#header.white .mob-util .util-list [data-util="phone"]:before,
	.mob-util .util-list [data-util="phone"]:before{background-image: url(../images/common/ico_phone.svg);}
	.mob-util .util-list a{display:inline-flex; align-items:center; min-height:38rem; box-sizing:border-box; padding:5rem 0; font-size:14rem;}
}

/* footer */
#footer{padding:calc(var(--page-top) - 30rem) var(--page-pad); background:url(../images/common/bg_footer.gif) repeat 0 0; font-size:15rem; color:#777674;}
#footer .inr{display:grid; grid-template-columns:210rem 1fr; gap:0 180rem; position:relative;}
#footer .logo{display:block; width:168rem;}
.footer-info ul{display:flex; align-items:center; gap:45rem;}
.footer-info ul li{display:flex; align-items:center; gap:5rem;}
.footer-info ul.footer-info-list{flex-wrap:wrap; gap:5rem 75rem;}
.footer-info ul .blank{flex-basis:100%;}
.footer-link-list{padding-bottom:30rem; border-bottom:1rem solid rgba(34,34,34,0.1);}
.footer-link-list a{font-weight:500; transition:color 0.3s ease;}
.footer-link-list a:hover{color:#222;}
.footer-info-list{padding-top:50rem;}
ko-copyright{position:absolute; display:block; left:0; bottom:0;}
.btn_top{opacity:0.4; display:flex; justify-content:center; align-items:center; position:absolute; bottom:-40rem; right:0; width:100rem; height:100rem; box-sizing:border-box; border:1rem solid #222; border-radius:100%; transition:opacity 0.3s ease;}
.btn_top span{display:block; width:31rem; height:23rem; background:url(../images/main/btn_arrow.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0; transform:rotate(-90deg);}
.btn_top:hover{opacity:1;}
@media screen and (max-width:1500px){
	#footer .inr{gap:0 100rem;}
	.footer-info ul.footer-info-list{padding-right:130rem;}
	.footer-info ul .blank{display:none;}
}
@media screen and (max-width:1024px){
	#footer .inr{grid-template-columns:1fr; gap:50rem;}
	ko-copyright{position:static;}
	.footer-info ul.footer-info-list{gap:10rem 40rem; padding-top:30rem;}
}
@media screen and (max-width:768px){
	#footer{padding-bottom:60rem;}
	.footer-info ul.footer-info-list{padding-right:0;}
	.btn_top{bottom:auto; top:0;}
}
@media screen and (max-width:480px){
	#footer{padding-bottom:30rem; font-size:14rem;}
	#footer .inr{gap:30rem;}
	.footer-info{margin-top:20rem;}
	.footer-info ul{gap:10rem 20rem; flex-wrap:wrap;}
	.footer-info ul.footer-info-list{flex-direction:column; align-items:flex-start;}
	.btn_top{top:-10rem; width:60rem; height:60rem;}
	.btn_top span{width:25rem; height:18rem;}
}

/* button */
.round-btn{display:inline-flex; justify-content:center; align-items:center; min-width:200rem; height:60rem; box-sizing:border-box; background-color:rgba(0,0,0,0.05); border:2rem solid rgba(255,255,255,0.6); border-radius:50em; box-shadow:0 20rem 30rem rgba(0,0,0,0.2); transition:0.3s ease;}
.round-btn span{display:flex; justify-content:center; align-items:center; gap:10rem;}
.round-btn span{font-size:18rem; color:var(--color-white);}
.round-btn.blur{backdrop-filter:blur(3rem); -webkit-backdrop-filter:blur(3rem);}
.round-btn .icon-calendar{display:block; width:20rem; height:19rem; background:url(../images/common/quick_ico01.svg) no-repeat 0 0; background-size:auto 100%;}
.round-btn:hover{background-color:rgba(255,255,255,0.2); border-color:rgba(255,255,255,1)}

/* scroll */
.scroll-area{display:flex; align-items:center; gap:25rem; position:absolute; right:var(--page-pad); bottom:0; z-index:10; writing-mode:vertical-rl; color:var(--color-white);}
.scroll-area span{opacity:0.6; font-size:13rem; font-weight:500; letter-spacing:1.5rem;}
.scroll-area i{opacity:0.6; width:1rem; height:150rem; background-color:var(--color-white); transform-origin:0 0; animation:scrollAni 7s ease-in-out infinite;}
@keyframes scrollAni{
	0%{transform:scaleY(0);}
	30%,100%{transform:scaleY(1);}
}
@media (max-width:480px){
	.scroll-area{right:10rem;}
	.scroll-area i{height:100rem;}
	.scroll-area span{font-size:12rem;}
}

/* sub layout */
.area-subVisual{padding:80rem var(--page-pad) 0;}
/* .area-subVisual [data-subtitle]{padding-bottom:70rem; font-family:var(--font-eng); font-size:clamp(100rem, 6.25vw, 120rem); font-weight:normal; text-align:center; text-transform:uppercase; line-height:1;} */
.area-subVisual [data-subtitle]{padding-bottom:70rem; font-family:var(--font-eng); font-size:clamp(40rem, 2.86458333vw, 55rem); font-weight:normal; text-align:center; text-transform:uppercase; line-height:1;}
@media (max-width:1024px){
	.area-subVisual{padding-top:40rem;}
	/* .area-subVisual [data-subtitle]{padding-bottom:50rem; font-size:var(--font90);}	 */
	.area-subVisual [data-subtitle]{padding-bottom:50rem; }	
}

/* lnb */
.area-lnb{border-bottom:1rem solid rgba(34,34,34,0.2);}
.area-lnb .lnb ul{--sizeHig:80rem; justify-content:center; margin-bottom:-1rem;}
.area-lnb .lnb ul a{display:flex; justify-content:center; align-items:center; position:relative; height:var(--sizeHig); padding:0 45rem; font-size:22rem; font-weight:500; color:#333;}
.area-lnb .lnb ul a span{display:inline-flex; justify-content:center; align-items:center; position:relative; height:100%;}
.area-lnb .lnb ul a span:after{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:4rem; background-color:var(--color-point); transform:scaleX(0); transition:transform 0.3s ease;}
.area-lnb .lnb ul a.on span{color:var(--color-point);}
.area-lnb .lnb ul a.on span:after{transform:scaleX(1);}
@media (max-width:1024px){
	.area-lnb .lnb ul{--sizeHig:70rem;}	
	.area-lnb .lnb ul a{padding:0 35rem; font-size:18rem;}
}
@media (max-width:480px){
	.area-lnb .lnb ul{--sizeHig:60rem;}
	.area-lnb .lnb ul a{padding:0 15rem; font-size:16rem;}
}