@charset "utf-8";

html {scroll-behavior: smooth; } 
#wrap{ position: relative; width: 100%; min-height: 100%; /*padding-bottom: 384px;*/ padding-bottom: 200px; min-width: 1280px;  overflow-x: clip;}
header{ position: fixed; top:0; left: 0; right: 0; height: 82px; z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0); transition: all 0.5s;}
header.sub{ border-bottom:1px solid rgba(255,255,255,0.19); background-color:transparent; height: 64px; z-index: 9999; color: #fff;}
header.sub .logo-w{ display: none;}

header.main{transition: 0.5s all ease;}
header.main .logo a{ transition: 0.5s all ease;}
header.main .logo a img{ opacity: 1; transition: 0.5s all ease; width: 100%;}
header.main .logo2{display: none;}
header.main .top-menu a{ color: #000;  /*transition: 0.5s all ease;*/}
header.main .menu-btn { background-color: transparent;}

/*---메뉴---*/
#menu {background-color: #21322D; height: 0;right: 0;opacity: 0;overflow: hidden;position: fixed;text-align: center;top: 0;-webkit-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;visibility: hidden;width: 100%;z-index: 1100;min-width: 1280px;}
#menu.open {opacity: 1;visibility: visible;height: 100%;}
.top-menu.open{ position: absolute; top:25px; right:103px; z-index: 1110; font-size: 15px;}
.top-menu.open .login-btn{background: #CAA07A; border-radius: 20px 0 0 20px; color: #fff; font-weight: 300; padding: 8px 20px; float: left; width: 110px; text-align: center;}
.top-menu.open .join-btn{background: #DE3B18; border-radius: 0 20px 20px 0; color: #fff; font-weight: 300; padding: 8px 20px; width: 110px; text-align: center;}

#menu.open li:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
#menu.open li:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#menu.open li:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#menu.open li:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#menu.open li:nth-child(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#menu.open li:nth-child(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#menu.open li:nth-child(7) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
#menu.open li {
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}
#menu ul:hover a {opacity: 0.5;color: #fff;}
#menu ul a {
	-webkit-transform: translateZ(0);
	-webkit-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	display:inline-block;
	color: #fff;
}
#menu ul a:hover {opacity: 1;}
#menu ul a:hover::before{content: '▶'; position: absolute; bottom: 4px; left: -5px; color: red; font-size: 12px;}
#menu ul a:hover::after{content: '◀'; position: absolute; bottom: 4px; right: -5px; color: red; font-size: 12px;}
#menu ul a.big:hover::before{display: none;}
#menu ul a.big:hover::after{display: none;}
.main-nav h1 img{margin: 0 auto; width: 35%;}
#menu .main-nav {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	width:80%;
	margin: 0 auto;
    padding: 0 clamp(5rem, -8.7143rem + 17.1429vw, 12.5rem);
} 
#menu .main-nav h1{ color: #fff; text-align: center; font-size: 30px; width: 100%; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-weight: 500; margin-bottom: 80px;}
#menu .main-nav ul {list-style: none;margin: 0;padding: 0; position: relative;}
#menu .main-nav li {display: inline-block;vertical-align: top; text-align: center;margin-right: 20px; width: 12%;}
#menu .main-nav li:last-child{margin-right: 0;}
#menu .main-nav a.big {	font-size:22px;text-transform: uppercase;font-weight: 400;text-align: center; display: block; margin-bottom: 50px;}
#menu .main-nav li::before{content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.1); position: absolute; top: 55px; left: 0;}
#menu .main-nav a.big span { font-size: 12px;font-family: 'Roboto', sans-serif; font-weight:900; display: block;}
#menu .main-nav a.small {font-size: 18px;text-transform: uppercase;font-weight: 200;margin: 35px 0; display: block;}
/* .nav-line{border-bottom: 1px solid rgba(255,255,255,0.3); position: absolute; top: 55px; left: 0; width: 100%;} */
/*---햄버거메뉴---*/
.toggle-menu {background-color: transparent;border: none;cursor: pointer;display: inline-block;height: 30px;outline: none;padding: 0;pointer-events: initial;position: relative;vertical-align: middle;width: 38px;z-index: 1110;}
.toggle-menu span {background-color: #0F0F0F;content: "";display: block;height: 1px;right: calc(50% - 13px );position: absolute;top: calc(50% - 1px );-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;width: 22px;border-radius: 8px;}
#m_header.black .toggle-menu span {background-color: #0F0F0F;}
.toggle-menu span:after {background-color: #0F0F0F;content: "";display: block;height: 1px;position: absolute;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;border-radius: 8px;right: 0;}
#m_header.black .toggle-menu span {background-color: #000;}
#m_header.black .toggle-menu span:before , #m_header.black .toggle-menu span:after {background-color: #000;}
.toggle-menu span:before {top: 10px;width: 30px;height: 1px;}
.toggle-menu span:after {top: -10px;width: 38px;height: 1px;}
.toggle-menu.active span {background-color: #fff;-webkit-transition: 0.2s ease-out;transition: 0.2s ease-out;transform: rotate(45deg);width: 30px;}
.toggle-menu.active span:before, .toggle-menu.active span:after {-webkit-transition: top 0.2s ease-out, -webkit-transform 0.2s 0.2s ease-out;transition: top 0.2s ease-out, -webkit-transform 0.2s 0.2s ease-out;transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out, -webkit-transform 0.2s 0.2s ease-out;background-color: #fff !important;width:30px;}
.toggle-menu.active span:before {top: 0;-webkit-transform: rotate3d(0, 0, 1, -45deg);transform: rotate3d(0, 0, 1, -45deg);}
.toggle-menu.active span:after {top: 0;-webkit-transform: rotate3d(0, 0, 1, 90deg);transform: rotate3d(0, 0, 1, 90deg);}
/*---//햄버거메뉴끝---*/
/*---//메뉴끝---*/

header{ width: 100%; position: fixed; top:0; left: 0; right:0; z-index: 100; transition: background 0.2s ease-out; min-width: 600px;}
.sub_top{position: relative; z-index: 10;}
header .top_menu_left{position: absolute; top:9px; left: 30px; width: 163px; overflow: hidden;}
header .top_menu_left a.sub_Log{ float: left; display: inline-block; width: 163px; height: 53px;}
header .top_menu_box{ text-align: center; font-size: 0;}
header .top_menu_box li{ display: inline-block; height: 70px;}
header .top_menu_box li a{ display: block; color: #fff; font-size: 16px; text-transform: uppercase; padding: 20px;}
header .top_menu_btn{ position: absolute; top:30px; right: 35px; width:38px; height: 70px;}

header .top_menu_btn.sub{position: absolute; top:25px; right: 15px; width:38px; height: 70px;}
header.sub .menu-container{width: 75px; height: 64px; position:absolute; right: 0; background: #21322D;}
header .top_menu_btn.sub .toggle-menu span{background-color: #fff;content: "";display: block;height: 2px;right: calc(50% - 13px );position: absolute;top: calc(50% - 1px );-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;width: 22px;border-radius: 8px;}
header .top_menu_btn.sub .toggle-menu span:after{background-color: #fff;content: "";display: block;height: 2px;position: absolute;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;border-radius: 8px;right: 0;}
header .top_menu_btn.sub .toggle-menu.active span{width: 30px; transform: rotate(45deg);}

header .top_menu_right{ position: absolute; top:0; right:0px; width: 160px; height: 70px; font-size: 0;}
header .top_menu_right li{ width: 80px; height: 70px; display:inline-block; background-color: #0e3165;}
header .top_menu_right li:first-child{ width: 80px; height: 70px; display:inline-block; background-color: #193c70;}
header .top_menu_right a{ display: inline-block; width: 80px; height: 70px; text-align: center;  padding: 18px 0;}

/* .top-menu.active .join-btn{background: #DE3B18; border-radius: 0 15px 15px 0; padding: 5px; color: #fff; transition: all 0.3s; width: 110px; text-align: center;} */

/* header sub */
header.whiteBg{ background-color: #fff; border-bottom: 1px solid rgba(222,222,222,1); z-index: 1001; transition: all 0.5s;}
header.whiteBg .logo a{ display: block;}
header.whiteBg .logo a img{ opacity: 1; width: 100%;}
header.whiteBg .top-menu a{ color: #000;}
header.whiteBg .menu-btn__burger,header.main.whiteBg .menu-btn__burger::before, header.main.whiteBg .menu-btn__burger::after{ background-color: #000;}
header.whiteBg .menu-btn.open .menu-btn__burger,header.main.whiteBg .menu-btn.open .menu-btn__burger::before, header.main.whiteBg .menu-btn.open .menu-btn__burger::after{ background-color: #fff;}

header .logo{ position: absolute; top:12px; left: 31px;}

header .top-menu{ position: absolute; top:25px; right:103px; z-index: 1100;}
header .top-menu a{ padding: 0 10px; display: inline-block;}
header nav .nav-top{ position: absolute; top:24px; right:103px; }
header nav .nav-top a{ padding: 0 20px; display: inline-block; color: #fff;}

/* sub header*/
header.sub .top-menu{ position: absolute; top:20px; right:103px;}
header.sub .top-menu a{ padding: 0 10px; display: inline-block;}
header.sub .logo{ position: absolute; top:6px; left: 31px;}
header.sub .logo2{ position: absolute; top:6px; left: 31px;}
.logo2 a img{width: 300px;}

/* reservation sub header*/
header.resersub{ border-bottom:1px solid rgba(0,0,0,0.1); background-color:#fff; height: 64px; z-index: 9999;}
header.resersub .logo{ position: absolute; top:5px; left: 31px;}
header.resersub .logo-w{ display: none;}
header.resersub .top-menu{ position: absolute; top:20px; right:103px;}
header.resersub .top-menu a{ padding: 0 10px; display: inline-block;}
header.resersub .menu-container{width: 75px; height: 64px; position:absolute; right: 0; background:  #21322D; top: 0;}
header .top_menu_btn.resersub .toggle-menu span{background-color: #fff;content: "";display: block;height: 2px;right: calc(50% - 13px );position: absolute;top: calc(50% - 1px );-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;width: 22px;border-radius: 8px;}
header .top_menu_btn.resersub .toggle-menu span:after{background-color: #fff;content: "";display: block;height: 2px;position: absolute;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;border-radius: 8px;right: 0;}
header .top_menu_btn.resersub .toggle-menu.active span{width: 30px; transform: rotate(45deg);}
header.resersub .top_menu_btn{ position: absolute; top:25px; right: 15px; width:38px; height: 70px;}

.none{display: none;}
.block{display: block;}

/*footer*/
footer{ position: absolute; bottom:0; left: 0; width: 100%; background-color: #fff; color: #000; text-align: center; padding: 20px 0; /*height: 247px;*/ height: 200px;}
footer.main{ position: absolute; bottom:0; left: 0; right:0; background-color: #000; color: #fff;}

footer ul{ font-weight: 300;}
footer .footer-img{ display: inline-block; position: relative; font-size: 16px; padding: 0 25px;}
footer .footer-img img{width: 100%;}
/* footer li:first-child::after{ content: ''; width: 1px; height: 15px; background-color: #000; display: block; position: absolute; right: 0; top: 2px;} */
footer address{ line-height: 2em; font-weight: 400; color: #434343;letter-spacing: -0.5px;}
footer address ul li{display: inline-block; position: relative; font-size: 16px; padding: 0 10px;}
footer address a{margin: 0 10px; font-weight: 400;}
footer p{ line-height: 1.5em; font-weight: 300; color: #353535; font-size: 25px; padding-top: 30px; }
footer p a{ display: inline-block; padding: 0 6px 0;}

/*메인 인덱스 스크롤시 오른쪽 하단 전체 고정 css*/
/* .move-btn{position: fixed;bottom: 0; right: 0; z-index: 1; width: 100%;}  */
.main-cal-wrap{position: fixed; bottom: 44px; right: 28px; z-index: 3; background: #000; padding: 23px 19px; border-radius: 10px; width: 81px; height: 81px; box-shadow: 0 3px 6px 0 rgb(0 0 0 / 39%);} 
.main-cal-wrap img{transition: all .3s;}
.main-cal-wrap:hover img{margin-top: -3px; transition: all .3s;}

/* main reservation btn */
.main-reser-btn{position: fixed; right: 0; bottom: 0; width: 305px; height: 83px; z-index: 2; background: #f15a22; border-radius: 15px 0 0 0; padding: 20px 50px; color: #fff; font-size: 20px; overflow: hidden;}
.main-reser-btn h2{text-indent: 5px;}
.main-reser-btn img{margin-top: -10px; transition: all .3s;}
.main-reser-btn:hover img{margin-left: 10px; transition: all .3s;}

/* main weather */
.weather{ position: fixed; bottom:110px; right: 140px; color: #21322D; z-index: 10; font-family: 'Nanum Gothic'; font-weight: 300;}
.weather li{font-size: 15px;}
.weather li p{ display: inline-block; padding-left: 12px; vertical-align: middle;}
.weather li p img{ width: 100%; max-width: 40px;}
.weather li span{ font-size: 30px; font-weight: 100; display: inline-block; vertical-align: top;}
.weather li b{ vertical-align: bottom; padding-left: 10px;}

/*20230919 추가 main-social-btn*/
.main-social-btn1{position: fixed;right: 400px;bottom: 15px;z-index: 2;overflow: hidden;
}
.main-social-btn2{position: fixed;right: 335px;bottom: 15px;z-index: 2;overflow: hidden;
}