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

/*
 * layout.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) open-control
 * 4) 언어선택
 * 5) 준비중
 * 6) 관련사이트-목록열기형
 * 7) 레이아웃설정
 *
 */

.inr{position:relative; margin:0 auto; max-width:1400rem; width:92%;}
.inr-wide{max-width:1500rem;}

/* 애니메이션 */
[data-motion="blur"]{filter:blur(10px); opacity:0; transform:scale(1.1); transition:1s ease 0s;}
[data-motion="blur"].motion_in{filter:blur(0); opacity:1; transform:scale(1);}
[data-motion="slide-up"]{opacity:0; transform:translateY(50rem); transition:1s ease 0s;}
[data-motion="slide-up"].motion_in{opacity:1; transform:translateY(0);}
[data-motion="slide-left"]{opacity:0; transform:translateX(50rem); transition:1s ease 0s;}
[data-motion="slide-left"].motion_in{opacity:1; transform:translateX(0);}
[data-motion="slide-right"]{opacity:0; transform:translateX(-50rem); transition:1s ease 0s;}
[data-motion="slide-right"].motion_in{opacity:1; transform:translateX(0);}

/* 1) root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#f38758;
	--color-white:#fff;
	--color-black:#000;
	--color-navy:#0d365a;
	--font-base:16rem;
	
	--font-pop:'Poppins', Sans-serif;
	--font-combine:'Poppins', 'Pretendard', Sans-serif;
	--trans-ani:0.3s ease 0s;
    
    --header-height:100rem;
    
    @media(max-width:1024px){
        --header-height:90rem;
    }
    @media(max-width:768px){
        --header-height:70rem;
    }
    @media(max-width:480px){
        --header-height:55rem;
    }
}

/* 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 */;}	
}

/* 3) open-control */
/* div.open-control
 *     button.open-control__btn
 *     div.list or ul.list
 * */
.open-control{position:relative;}
.open-control .list{display:none; position:absolute; top:100%; width:100%; padding:15rem; background-color:#fff; border:1rem solid #eee;}
.open-control .list a{display:inline-block;}

/* 4) 언어선택 */
.lang-area{position:relative; min-width:120rem;}
.lang-area .open-control__btn{display:flex; align-items:center; gap:10rem; background-color:transparent; font-size:17rem; font-weight:500;}
.lang-area .list ul{display:flex; flex-direction:column; gap:5rem; font-size:15rem;}
.lang-area .list a{opacity:0.5; font-weight:600; transition:0.3s ease;}
.lang-area .list a:hover{opacity:1;}

/* 5) 준비중 */
.ready-page{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{}
	.ready-page	strong{font-size:30rem;}
	.ready-page	p{font-size:16rem; word-break:keep-all;}
	.ready-page	p br{display:none;}
}

/* 6) 관련사이트-목록열기형 */
.relate-site{position:relative; max-width:260rem;}
.relate-site .open-control__btn{position:relative; width:100%; height:55rem; box-sizing:border-box; padding:0 30rem 0 20rem; background-color:transparent; border:1rem solid rgba(14,14,14,0.15); font-size:15rem; font-weight:600; text-align:left; color:#333; transition:0.3s ease;}
.relate-site .open-control__btn .xi-plus-min{position:absolute; right:20rem; top:50%; margin-top:-10rem; font-size:20rem; transition:transform 0.3s;}
.relate-site .open-control__btn.active{border-color:#111;}
.relate-site .open-control__btn.active .xi-plus-min{transform:rotate(45deg);}
.relate-site .list{display:none; position:absolute; bottom:100%; top:auto; width:100%; box-sizing:border-box; padding:35rem 20rem; background:#fff; border:1rem solid #111; border-bottom:0;}
.relate-site .list ul > li{margin-top:10rem;}
.relate-site .list ul > li:first-child{margin-top:0;}
.relate-site .list a{opacity:0.5; display:inline-block; font-size:14rem; font-weight:500; transition:opacity 0.3s;}
.relate-site .list a:hover{opacity:1;}
@media (max-width:480px){
	.relate-site{max-width:100%;}
}

/* 7) 레이아웃설정 */
#header *{box-sizing:border-box; word-break:keep-all;}
#header > *:not(.gnb-bg):not(.mega-menu){z-index:10;}
#header{display:flex; justify-content:space-between; align-items:center; position:fixed; left:0; top:0; padding:0 50rem; z-index:90; width:100%; height:var(--header-height); transition:.3s ease;}
#header h1{position:relative;}
#header h1 a{display:block; height:50rem; transition:.3s ease;}
#header h1 img{display:block; position:absolute; left:0; top:0; height:100%; transition:.3s ease;}
#header h1 img.logo1{opacity:0;}
#header.hide{top:calc(-1 * var(--header-height));}
.isScrolled #header,
#header.active{background:#fff; border-bottom:1px solid #ddd;}
.isScrolled #header h1 img.logo1,
#header.active h1 img.logo1{opacity:1;}
.isScrolled #header h1 img.logo2,
#header.active h1 img.logo2{opacity:0;}
body:not(isScrolled) #header.hide{background:none; border-bottom:1px solid rgba(255,255,255,0.2);}
@media(max-width:1600px){
    #header{padding:0 4%;}
}
@media(max-width:1024px){
    #header{padding:0 2.1% 0 4%;}
}
@media(max-width:768px){
    #header h1 a{height:40rem;}
}
@media(max-width:480px){
    #header h1 a{height:34rem;}
}

/* gnb */
#header nav{--sizeGnb:160rem; position:absolute; left:50%; top:0; transform:translateX(-50%);}
#header nav .gnb{display:flex; align-items:center; padding-left:calc(var(--sizeGnb) / 2);}
#header nav .gnb li a{display:inline-block; word-break:keep-all;}
#header nav .gnb > li{position:relative;}
#header nav .gnb > li > a{display:flex; justify-content:flex-start; align-items:center; width:var(--sizeGnb); font-weight:500; font-size:20rem; color:#fff; height:var(--header-height); transition:.3s ease;}
#header nav .gnb > li .box:not(.depth03){width:100%;}
#header nav .gnb > li .box:not(.depth03) > ul{gap:10rem; padding-top:30rem; padding-bottom:30rem;}
#header nav .gnb > li .box:not(.depth03) li+li{margin-top:3rem;}
#header nav .gnb > li .box:not(.depth03) a{display:block; font-weight:500; transition:opacity 0.3s ease; font-size:17rem; text-align:left;}
/* #header nav .gnb > li .box:not(.depth03):is(:hover) a{opacity:0.5;} */
#header nav .gnb > li .box:not(.depth03):is(:hover) a:hover{opacity:1; color:var(--color-point);}
#header nav .gnb > li .box:not(.depth03):is(:hover) > ul > li.active > a{opacity:1;}
#header nav .gnb .box > ul{display:flex; flex-direction:column; align-items:flex-start; gap:5rem;}
#header nav .gnb .box > ul li{width:100%;}
#header nav .gnb > li .box.depth03 > ul{padding:10rem 0;}
#header nav .gnb > li .box.depth03 > ul > li{position:relative; padding-left:10rem;}
#header nav .gnb > li .box.depth03 > ul > li:before{content:''; display:block; position:absolute; left:0; top:7rem; width:3rem; height:3rem; background-color:#999;}
#header nav .gnb > li .box.depth03 a{font-size:15rem;}
	/* gnb active */
#header nav .gnb .box:not(.depth03){opacity:0; visibility:hidden; position:absolute; left:50%; transform:translate(-50%, -30rem); transition:0.3s ease; transition-property:opacity, visibility, transform;}
#header nav .gnb .box.active:not(.depth03){opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0.2s, 0.2s, 0.2s;}
	/* gnb black */	
.isScrolled #header nav .gnb > li > a,
 #header.active nav .gnb > li > a{color:#111;} 
 #header.active nav{--sizeGnb:190rem;}
	/* gnb - edit 20250702 */
#header .gnb_bg{display:none; position:absolute; top:0; left:0; z-index:1 !important; width:100%; background-color:rgba(255,255,255,1); box-shadow:0 10rem 20rem rgba(0,0,0,0.05);}
#header .gnb_bg:before{content:''; display:block; position:absolute; width:100%; height:1px;}
#header .gnb_bg:before{top:var(--header-height); background-color:#ddd;}

@media(max-width:1600px){
	#header nav{--sizeGnb:140rem;}
}
@media(max-width:1500px){
    #header nav{--sizeGnb:120rem;}
	#header.active nav{--sizeGnb:140rem;}
}
@media(max-width:1400px){
    #header nav{display:none;}
}
@media(max-width:768px){}
@media(max-width:480px){}

/* maga menu */
.mega-menu{opacity:0; visibility:hidden; display:flex; align-items:stretch; position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; background-color:rgba(0,0,0,0.6); transition:0.3s ease; transition-property:opacity, visibility;}
.mega-menu.active{opacity:1; visibility:visible;}
.gnb-mob{overflow-y:auto; width:80%; background-color:#fff;}
.gnb-mob .gnb{padding:30rem;}
.gnb-mob .gnb > li{position:relative; border-bottom:1rem solid rgba(0,0,0,0.1);}
.gnb-mob .gnb > li > a{display:flex; align-items:center; padding:20rem 20rem; font-size:23rem; font-weight:500;}
.gnb-mob .gnb > li .open{position:absolute; top:20rem; right:20rem; width:20rem; height:20rem; background-color:transparent; font-size:0;}
.gnb-mob .gnb > li .open:before{content:'\e913'; display:block; font-family:xeicon !important; font-size:20rem;}
.gnb-mob .gnb > li > a.active ~ .open:before{content:'\e91a';}
.gnb-mob .gnb > li > a.on{color:var(--color-point);}
.gnb-mob .box{display:none; padding:30rem; background-color:#f3f3f3;}
.gnb-mob .box.depth03{margin-top:5rem; background-color:#fff; padding:20rem; border-radius:8rem;}
.gnb-mob .box ul{display:flex; flex-direction:column; gap:10rem;}
.gnb-mob .box a{display:block; font-size:18rem;}
.gnb-mob .box a span{line-height:1.4; background:linear-gradient(90deg, #222, #222); background-size:0 2rem; background-repeat:no-repeat; background-position:0 100%; transition:0.5s;}
.gnb-mob .box a.on span{/*background-size:100% 2rem;*/ font-weight:800; color:var(--color-navy);}
.gnb-mob .box.depth03 a span{color:#777;}
.gnb-mob .box.depth03 a.on span{background-size:0; font-weight:700; color:var(--color-navy);}
	/* maga control */
[class*="mega-menu__"]{display:block; width:60rem; height:60rem; background-color:transparent;}
[class*="mega-menu__"] span{display:block; position:relative; width:30rem; height:18rem; margin:0 auto; font-size:0;}
[class*="mega-menu__"] span i,
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{display:block; position:absolute; height:2rem; background:#fff; transform:rotate(0);}
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{content:''; width:100%;}
[class*="mega-menu__"] span:before{right:0; top:0; transition:0.5s ease 0s;}
[class*="mega-menu__"] span:after{left:0; bottom:0; transition:0.5s ease 0s;}
[class*="mega-menu__"] span i{opacity:1; left:0; top:8rem; width:100%; transition:opacity 0.3s, transform 0.5s ease 1.1s;}
[class*="mega-menu__"].active i{opacity:0;}
[class*="mega-menu__"].active span:before{right:0; top:5rem; transform:rotate(45deg);}
[class*="mega-menu__"].active span:after{left:0; bottom:7rem; transform:rotate(-45deg);}
.isScrolled [class*="mega-menu__"].menuOpen span i,
.isScrolled [class*="mega-menu__"].menuOpen span:before,
.isScrolled [class*="mega-menu__"].menuOpen span:after{background:#222;}
.active [class*="mega-menu__"].menuOpen span i,
.active [class*="mega-menu__"].menuOpen span:before,
.active [class*="mega-menu__"].menuOpen span:after{background:transparent;}
	/* mega menu - open btn */
	/* pc에서만 사용한다면 display none처리 */
.mega-menu__btn{display:none;}
	/* mega menu - close btn */
.mega-menu__close{flex:auto; width:auto; height:auto; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}
.mega-menu__close em{display:flex; justify-content:center; align-items:center; width:60rem; height:60rem;}
.mega-menu__close span{width:26rem; height:24rem;}
.mega-menu__close span i,
.mega-menu__close span:before,
.mega-menu__close span:after{background-color:#fff;}
.mega-menu__close.active span:before{top:11rem;}
.mega-menu__close.active span:after{bottom:11rem;}
.mega-menu__close:focus{outline:none;}
@media (hover: hover){
	.gnb-mob .box a:hover span{background-size:100% 2rem;}
}
@media (max-width:1400px){
	[class*="mega-menu__"]{display:block;}
	.mega-menu__close{display:flex; justify-content:flex-end; padding-right:30rem;}
	.mega-menu .open{display:block;}
}
@media (max-width:480px){
	.mega-menu__close{padding-right:10rem;}
	.gnb-mob .gnb{padding:20rem 0;}
	.gnb-mob .gnb > li > a{font-size:18rem;}
	.gnb-mob .box{padding:25rem 20rem;}
	.gnb-mob .box a{font-size:16rem;}
}

/* util */
.util-area{display:flex; align-items:center; gap:10rem; position:relative;}
.util-area .lang{display:flex; align-items:center; justify-content:center; height:50rem; width:130rem; border-radius:30rem; background:#fff; border:1px solid var(--color-point);}
.util-area .lang li a{display:block; padding:0 10rem; font-size:16rem; color:#bbb; font-family:var(--font-pop); font-weight:bold; line-height:1;}
.util-area .lang li a.on{color:var(--color-point);}
.util-area .lang li+li a{border-left:1px solid #ddd;}
.util-area .btn_reservation{display:flex; align-items:center; justify-content:center; height:50rem; width:160rem; border-radius:30rem; font-size:18rem; color:#fff; font-weight:bold; line-height:1; background:var(--color-point);}
.util-area .btn_reservation img{display:block; margin-left:15rem; width:22rem;}
@media(max-width:1500px){
    .util-area .lang{width:120rem;}
    .util-area .btn_reservation{width:140rem;}
    .util-area .btn_reservation img{margin-left:8rem;}
}
@media(max-width:1024px){
    .util-area .lang{width:105rem; height:42rem;}
    .util-area .lang li a{font-size:15rem;}
    .util-area .btn_reservation{font-size:16rem; width:125rem; height:42rem;}
    .util-area .btn_reservation img{width:18rem;}
}
@media(max-width:768px){
    .util-area{gap:0;}
    .util-area .lang{width:85rem; height:32rem;}
    .util-area .lang li a{padding:0 8rem; font-size:13rem;}
    .util-area .btn_reservation{display:none;}
}


/* footer */
#footer{background:#333;}
#footer .inr{padding:70rem 0;}
#footer .top{display:flex; align-items:center; gap:60rem; margin-bottom:35rem; padding-bottom:30rem; border-bottom:1px solid rgba(255,255,255,.2);}
#footer .top .fLogo{display:block; height:50rem;}
#footer .top .fLogo img{display:block; height:100%;}
#footer .top .link{display:flex; gap:30rem;}
#footer .top .link a{display:block; font-size:16rem; color:#ddd; font-weight:500;}
#footer address{font-size:14rem; color:#bbb; font-weight:300;}
#footer address span{display:inline-block; margin-right:30rem; margin-bottom:8rem; line-height:1.4;}
#footer .copy{display:block; margin-top:15rem; font-size:14rem; font-weight:300; color:#888; line-height:1.4;}
#footer .top-btn{position:fixed;}
@media(max-width:1024px){
    #footer .inr{padding:50rem 0;}
    #footer .top{margin-bottom:25rem; padding-bottom:25rem;}
    #footer .top .fLogo{height:40rem;}
    #footer .top .link a{font-size:15rem;}
}
@media(max-width:768px){
    #footer .inr{padding:40rem 0;}
    #footer .top{display:block;}
    #footer .top .fLogo{height:34rem;}
    #footer .top .link{margin-top:25rem; gap:25rem;}
    #footer .top .link a{font-size:14rem;}
    #footer .info{width:calc(100% - 60rem);}
    #footer address{font-size:13rem;}
    #footer .copy{font-size:12rem;}
}


/* fixed */
.fixed{position:fixed; right:2%; bottom:30rem; z-index:10}
.fixed li+li{margin-top:10rem;}
.fixed li:nth-child(1){display:none;}
.fixed a{display:flex; align-items:center; justify-content:center; box-shadow:0 0 15rem rgba(0,0,0,.15); width:70rem; aspect-ratio:1/1; border-radius:50%;}
.fixed_reservation{flex-direction:column; background:var(--color-point); font-size:13rem; color:#fff; font-weight:500;}
.fixed_reservation img{display:block; margin-bottom:3rem; width:18rem;}
.fixed_top{background:rgba(206,177,132,.5);}
.fixed_top span{display:block; margin-top:4rem; font-size:0; width:13rem; aspect-ratio:1/1; border-top:3rem solid #fff; border-right:3rem solid #fff; transform:rotate(-45deg);}
@media(max-width:480px){
    .fixed{bottom:20rem;}
    .fixed li:nth-child(1){display:block;}
    .fixed a{width:52rem;}
    .fixed_top span{width:11rem;}
}