@charset "utf-8";

@font-face {
    src: url("../font/Noto_Serif_KR/NotoSerifKR-Regular.otf");
    font-family: "Noto Serif KR";
}

@font-face {
    src: url("../font/Noto_Sans_KR/NotoSansKR-Light.otf");
    font-family: "Noto Sans KR";
}

@font-face {
    src: url("../font/aAutoSignature.otf");
    font-family: "a Auto Signature";
}


* { box-sizing: border-box; list-style: none; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: #f7f7f7; }
::-webkit-scrollbar-thumb { background-color: #e0e0e0; border-radius: 5px; }
*::selection { background-color: #ece8e5; color: #FFF; }
html { scroll-behavior: smooth; }
a { text-decoration: none; color: #000000; }
body { margin: 0px; font-family: 'Noto Sans KR'; color: #000000; background: #fff; }
main { overflow: hidden; position: relative; }
ul { margin: 0px; padding: 0px; }
li { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, p { margin: 0px; }
/* section { margin-left: 270px; margin-right: 110px; } */
 
/*to top start*/

.totop { position: fixed; z-index: 999; right: -100px; bottom: 45px; width: 50px; height: 50px; background: url(../img/totop.png), #f8f8f8; background-repeat: no-repeat; background-position: center; transition: .4s; box-shadow: 0px 0px 4px rgb(0 0 0 / 20%); }
.totop:hover { background: url(../img/totop.png), #ffffff; background-repeat: no-repeat; background-position: center; }
.totop.on { right: 2.36%; }

/*reservation*/
.reser-btn { display:flex;position: fixed; z-index: 999; left: 50%; transform:translateX(-50%); bottom: -100px; width: 180px; height: 50px; background: #5b7b63d3; background: #5b667bd3; transition: .4s; font-size:14px;color:#fff;justify-content:center;align-items:center;}
.reser-btn.reser-on {bottom:30px; }

/*header start*/

.header { position: fixed; z-index: 1000; width: 100%; height: 120px; transition: .4s; border-right: 1px solid #ece8e5; }
/*.header.on { background: #fff; padding: 0px 2.36%; }*/

/*
.header.on .header-in a img { top: 12.5px; }
.header.on .header-in a img:nth-of-type(2) { display: block; }
.header.on .header-in > div > ul { margin-left: 90px; }
.header.on .header-in > div > ul > li { margin-top: 0px; }
.header.on .header-in > div > ul > li:nth-child(n+2) { margin-left: 40px; }
.header.on .header-in > div > ul > li > ul { top: 25px; }
.header.on .header-in > div > ul > li > a { color: #525252; line-height: 70px; }
.header.on .header-in a:nth-of-type(2) { top: 20px; }
.header.on .header-in a:nth-of-type(2) > p { color: #525252; }
.header.on .header-in a:nth-of-type(2) > img:nth-of-type(1) { display: none; }
.header.on .header-in a:nth-of-type(2) > img:nth-of-type(2) { display: inline-block; }
.header.on .header-in > div > ul > li.in::after { bottom: 22.5px; }
.header.on .header-in > div > ul > li::after { bottom: 22.5px; }
*/

.header .header-in { display:flex;position: relative; width:1600px; height: 100%; margin:0 auto;justify-content:space-between;align-items:center;}
/* .header .header-in > a:nth-of-type(1) { position: relative; display: block; height: 210px; border-bottom: 1px solid #ece8e5; } */
/* .header .header-in > a:nth-of-type(1) > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } */

/* .header .header-in .menu a:nth-of-type(2) { position: absolute; top: 5.5px; right: 16px; height: 20px; font-family: 'EB Garamond'; font-size: 13px; color: #fff; text-align: center; line-height: 20px; transition: .4s; font-weight: 600; }
.header .header-in .menu a:nth-of-type(2):hover { opacity: .5; } */
.header .header-in > a{position:relative;display:block;width:120px;height:100%;}
.header .header-in > a > img { position:absolute;left:0;top:50%; transform: translateY(-50%); width:130px; }
.header .header-in > a > img:nth-child(1){opacity:1;}
.header .header-in > a > img:nth-child(2){opacity:0;}
.header.on .header-in > a > img:nth-child(1){opacity:0;}
.header.on .header-in > a > img:nth-child(2){opacity:1; filter: invert(1);}
.header .header-in > .menu { display:flex;position: relative; height:100%;align-items:center;}
.header .header-in > .menu > ul {display:flex;height:100%;align-items:center;}
.header .header-in > .menu > ul > li { position: relative; padding:0 15px;text-align: center; overflow: hidden; overflow: visible; }
.header .header-in > .menu > ul > li > a { position: relative; display:block; line-height:120px;font-size: 13px; font-weight: 500; letter-spacing: 1; color: #fff; z-index: 102; text-shadow:0 0 1px rgba(0,0,0,0.2);}
.header .header-in > .menu > ul > li a::after { content: ''; position: absolute; right : -10px; bottom: 50%; width: 0%; height: 1px; background: #fff; transition: .3s; transform:translateY(-50%);}
.header.on .header-in > .menu > ul > li a::after { background: #000; }
.header .header-in > .menu > ul > li:hover > a::after { width: 20px; }

.header .header-in > .menu > ul > li > ul { position: absolute; top: 120px; left:50%; width: 0px; transition: .4s; overflow: hidden; cursor: pointer; opacity: 0; transform:translateX(-50%)}
.header .header-in > .menu > ul > li:hover > ul { opacity: 1; width: 180px; }
.header .header-in > .menu > ul > li:hover > .menu-c { width: 280px; }
.header .header-in > .menu > ul > li:hover > .menu-c li { width: 320px; }
.header .header-in > .menu > ul > li > ul > li { width:100%;background: #44604b; background: #445660; width: 276px; padding: 0px 100px 0px 30px; text-align: left; }
.header .header-in > .menu > ul > li > ul > li:nth-child(1) { padding-top: 30px; }
.header .header-in > .menu > ul > li > ul > li:last-child { padding-bottom: 30px; }
.header .header-in > .menu > ul > li > ul > li > a { position: relative; font-size: 12px; color: #fff;  letter-spacing: 4; }
.header .header-in > .menu > ul > li > ul > li > a::after { content: ''; position: absolute; right : -10px; bottom: 50%; width: 0%; height: 1px; background: #fff; transition: .3s; transform:translateY(-50%);}
.header.on .header-in > .menu > ul > li > ul > li > a::after { background: #fff; }
.header .header-in > .menu > ul > li > ul > li > a:hover::after { width: 20px; }
.header .menu>a{margin-left:20px;font-size: 13px; font-weight: 500; letter-spacing: 1; font-weight:600;color: #fff; z-index: 102;}
.header.on{background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,0.05);}
.header.on .header-in > .menu > ul > li > a { color:#000; }
.header.on .menu>a{color:#658b6f; color:#65798b; }

/*header-mobile start*/

.header-mobile { display: none; position: fixed; top:0; z-index: 1000; width: 100%; height: 78px; background: #fff; }

.header-mobile > a:nth-of-type(1) > img { width: 130px; position: absolute; top: 50%;; left: 20px; transform: translateY(-50%); z-index: 100; filter: invert(1);}
.header-mobile > a:nth-of-type(2) { position: absolute; top: 24px; right: 65px; font-size: 18px; text-align: center; }
.header-mobile > a:nth-of-type(2) > p { margin: 0px; font-size: 10px; }
.header-mobile > a:nth-of-type(3) { position: absolute; top: 24px; right: 95px; font-size: 18px; text-align: center; }
.header-mobile > a:nth-of-type(3) > p { margin: 0px; font-size: 10px; }
    
.header-mobile .header-in { position: fixed; top:78px; z-index: 999; width: 100%; }
.header-mobile .header-mobile-in ul, .header-mobile .header-mobile-in li { margin: 0; padding: 0; font-size: 12px; }
.header-mobile .header-mobile-in a { color: #FFF; font-weight: 300; }

.header-mobile .header-mobile-in { margin: 0px auto; width: 100%; height: 0px; overflow: hidden; transition-timing-function: ease-in-out; transition: .4; }
.header-mobile .header-mobile-in.on { height: auto; }

.header-mobile .header-mobile-in ul { font-weight:500; background: #44604b; background: #445660; }
.header-mobile .header-mobile-in ul li a { padding-left: 20px; }

.header-mobile .header-mobile-in ul li:nth-child(1) a,
.header-mobile .header-mobile-in ul li:nth-child(2) a,
.header-mobile .header-mobile-in ul li:nth-child(5) a,
.header-mobile .header-mobile-in ul li:nth-child(6) a,
.header-mobile .header-mobile-in ul li:nth-child(7) a,
.header-mobile .header-mobile-in ul li:nth-child(8) a { display: block; width: 100%; }
    
.header-mobile .header-mobile-in ul li a:hover { opacity: .75; }
    
.header-mobile .header-mobile-in > ul { margin-top: 78px; margin-bottom: 0px; padding: 0px 20px;  }
.header-mobile .header-mobile-in > ul > li { position: relative; line-height: 40px; cursor: pointer; }
.header-mobile .header-mobile-in > ul > li > img { position: absolute; top: 15px; right: 20px; cursor: pointer; }
.header-mobile .header-mobile-in > ul > li > img.arrow_toggle {  transform: rotate(180deg); }

.header-mobile.on .header-mobile-in > ul > li > img { top: -80px; }
.header-mobile .header-mobile-in > ul > li { border-top: 1px solid #5b7b63; border-top: 1px solid #5b6c7b; }
.header-mobile .header-mobile-in > ul > li:nth-child(1) { border: none; }

.header-mobile .header-mobile-in > ul > li > ul > li { border-top: 1px solid #5b7b63; border-top: 1px solid #5b6c7b; opacity: 0.7; }
.header-mobile .header-mobile-in > ul > li > ul > li > a { display: block; padding-left: 20px; font-weight: 200; width: 100%; }
.header-mobile .header-mobile-in ul li .depth2 { overflow: hidden; transition: none; display: none; background: #44604b; background: #445660; }

input[id="hamburger"] { display: none; }
 
input[id="hamburger"] + label { display: block; width: 30px; height: 20px; position: absolute; right: 20px; top: 27.5px; cursor: pointer; }
input[id="hamburger"] + label span { display: block; position: absolute; width: 100%; height: 2px; border-radius: 10px; transition: all 0.35s; background: #44604b; background: #000; }

input[id="hamburger"] + label span:nth-child(1) {top: 1px; }
input[id="hamburger"] + label span:nth-child(2) {top: 46.8%;}
input[id="hamburger"] + label span:nth-child(3) {bottom: 1px;}
    
input[id="hamburger"]:checked + label {z-index: 100;}

input[id="hamburger"]:checked + label span:nth-child(1) {top: 50%;}
input[id="hamburger"]:checked + label span:nth-child(3) {bottom: 50%;}
    
.hamburger_toggle1 {top: 50%; transform: translateY(-50%) rotate(45deg);}
.hamburger_toggle2 {opacity: 0;}
.hamburger_toggle3 {bottom: 50%; transform: translateY(50%) rotate(-45deg);}


.header-bottom { display: none; position: fixed; z-index: 999; left: 50%; bottom: 0px; width: 165px; height: 50px; bottom: 20px; background: #44604b; transform: translateX(-82.5px); text-align: center; line-height: 50px; box-shadow: 0px 0px 4px rgb(0 0 0 / 20%); }
.header-bottom a { display: block; width: 100%; height: 100%;}
.header-bottom a div { display: flex; justify-content: center; }
.header-bottom a div svg { margin-right: 10px; margin-top: 17.5px; color: #fff; }
.header-bottom a div p { font-size: 14px; font-weight: 600; letter-spacing: 1.5; color: #fff; }

/*footer start*/

#footer { margin-top: 80px;}
#footer .footer-in { position: relative; padding: 120px 0px; background: #44604b; background: #445660; color: #fff; text-align: center; font-size: 12px; }
#footer .footer-in > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#footer .footer-in .footer-wrap { position: relative; }
#footer .footer-in .footer-wrap .first { font-family: 'Mulish'; font-size: 18px; letter-spacing: 4; }
#footer .footer-in .footer-wrap .second { margin-top: 40px; line-height: 25px; }
#footer .footer-in .footer-wrap .third { margin-top: 40px; line-height: 25px; color: #fff; }
#footer .footer-in .footer-wrap .third a { color: #fff; }
#footer .footer-in a.who{ transition: all .2s ease-out;}
#footer .footer-in a.who:hover{color: #ff5a53;}



@media (max-width:1600px){
    .header .header-in { width:100%;padding:0 20px;}

}
@media (max-width: 1305px) {
    .header-mobile .popup .popup-wrap .content{ display:none !important; }
	#popup1 { display: none; }
	
    .totop { bottom: 20px; }
    .totop.on { right: 20px; bottom: 20px; }
    .header { display: none; }
    .header-sub { display: none; }
    .header-mobile { display: block; } 
	.header-bottom { display: block; }
	
    section { margin: 0px; }
    
}

@media (max-width: 780px) {
    
    .reser-btn { width: 150px; height: 40px; font-size:12px;}
    .reser-btn.reser-on {bottom:20px; }

    #footer .footer-in { padding: 80px 0px; }
    
}

@media (max-width: 480px) {
    
    .header-mobile > a:nth-of-type(1) > img { top: 50%; transform: translateY(-50%); width: 120px;}
    .header-mobile .header-mobile-in ul li a { padding-left: 10px; }
    

    #footer { margin-top: 60px; }
    #footer .footer-in { padding: 60px 20px 80px; }
    #footer .footer-in .footer-wrap .second { margin-top: 30px; font-size: 11px; line-height: 22px; }
    #footer .footer-in .footer-wrap .third { margin-top: 30px; font-size: 11px; line-height: 22px; }
    
}
/*
::-webkit-scrollbar-thumb:vertical{height:0px;}
::-webkit-scrollbar-thumb:horizontal{width:0px;}
::-webkit-scrollbar{width:0; height:0;}*/