@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: #d6d6d6; color: #FFF; }
html { scroll-behavior: smooth; }
a { text-decoration: none; color: #8c857a; }
body { margin: 0px; font-family: 'Noto Serif KR'; color: #8c857a; background: #fff; }
main { overflow: hidden; position: relative; }
ul { margin: 0px; padding: 0px; }
li { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, p, span { margin: 0px; }
 

/*to top start*/

.totop { position: fixed; z-index: 999; right: -50px; bottom: 60px; width: 50px; height: 50px; background: url(../img/totop.png), #f8f7f4; 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), #faf9f5; background-repeat: no-repeat; background-position: center; }
.totop.on { right: 100px; }

/*header start*/

.header { position: fixed; z-index: 1000; padding: 45px 100px 0px; width: 100%; height: 82px; transition: .4s; }
.header.on { background: #f8f7f4; padding: 32.5px 100px 0px; }
.header.on .header-in > div > ul > li > a { color: #8c857a; }
.header.on .header-in a:nth-of-type(2) > p { color: #8c857a; }
.header.on .header-in a img { top: -20px; }
.header.on .header-in a:nth-of-type(2) { top: 0px; }
.header.on .header-in a img:nth-of-type(2) { display: block; }
.header.on .header-in > div > ul > li::after { background: #8c857a; }
.header.on .header-in a:nth-of-type(2) { border: 1px solid rgba(140,133,122,1); top: -15px; }
.header.on .header-in a:nth-of-type(2):hover { border: 1px solid rgba(140,133,122,0.3); }
.header.on .header-in > div > ul > li > ul > li { background: #f8f7f4; }

.header .header-in { position: relative; width: 100%; }
.header .header-in a img { position: absolute; top: -20px; left: 50%; transform: translateX(-50%);}
.header .header-in a img:nth-of-type(2) { display: none; }
.header .header-in a:nth-of-type(2) { position: absolute; width: 142px; height: 45px; top: -17.5px; right: 0px; font-family: 'Crimson Text'; font-size: 16px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,1); line-height: 45px; transition: .4s; }
.header .header-in a:nth-of-type(2):hover { border: 1px solid rgba(255,255,255,0.3); }
.header .header-in a:nth-of-type(2) > p { margin: 0px; }
.header .header-in > img { position: absolute; top: -10px; right: 0px; cursor: pointer; }
.header .header-in > div > ul { display: flex; justify-content: space-between; margin: 0px auto; width: 900px; }
.header .header-in > div > ul > li { position: relative; display: inline-block; text-align: center; overflow: hidden; }
.header .header-in > div > ul > li:hover { overflow: visible; }
.header .header-in > div > ul > li:nth-child(4) { margin-left: 200px; } 
/*.header .header-in > div > ul > li:nth-child(5) { margin-left: 200px; } >> 한옥독채 메뉴 추가될 경우*/
.header .header-in > div > ul > li > a { font-family: 'Noto Serif KR'; font-size: 12px; font-weight: 600; color: #fff; }
.header .header-in > div > ul > li::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0%; height: 1px; background: #fff; transition: .4s; }
.header .header-in > div > ul > li:hover::after { width: 100%; }

.header .header-in > div > ul > li > ul { position: absolute; top:13px; left: -65px; padding: 35px 35px 0px; opacity: 0; transition: .4s; }
.header .header-in > div > ul > li:hover > ul { opacity: 1; }
.header .header-in > div > ul > li > ul > li { background: #fff; width: 175px; padding: 0px 30px; text-align: left;}
.header .header-in > div > ul > li > ul > li:nth-child(1) { padding-top: 10px; }
.header .header-in > div > ul > li > ul > li:last-child { padding-bottom: 10px; }
.header .header-in > div > ul > li > ul > li > a { display: block; width: 100%; font-size: 12px; color: #9d9d9d; line-height: 38px; border-bottom: 1px solid #eeeeee; }
.header .header-in > div > ul > li > ul > li:last-child > a { border-bottom: none; }

/*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 { position: absolute; top: 10px; left: 40px; z-index: 100; }
.header-mobile > a:nth-of-type(2) { position: absolute; top: 24px; right: 85px; 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: 122px; 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: #837b6d; }
.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(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 #a29d96; }
.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 #a29d96; 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: #837b6d; }

input[id="hamburger"] { display: none; }
 
input[id="hamburger"] + label { display: block; width: 30px; height: 20px; position: absolute; right: 40px; 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: #8c857a; }

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);}


/*footer start*/

#footer {  background: #837b6d; color: #fff; }
#footer a { color: #fff; }
#footer .footer-in { width: 1200px; margin: 0px auto; }

#footer .footer-in .top { display: flex; }
#footer .footer-in .top div img { width: 100%; margin-top: -88px; position: relative; }

#footer .footer-in .cont { padding: 50px 0px; display: flex; justify-content: space-between; }
#footer .footer-in .cont .left { position: relative; width: 33%; }
#footer .footer-in .cont .left img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

#footer .footer-in .cont .div { text-align: left; }
#footer .footer-in .cont div li { font-size: 13px; line-height: 28px; }
#footer .footer-in .cont div li span { display: inline-block; font-weight: 500; }
#footer .footer-in .cont div li p { margin-left: 5px; display: inline-block; opacity: 0.7; }

#footer .footer-in .bottom { height: 112px; text-align: center; border-top: 1px solid #c1bdb6; }
#footer .footer-in .bottom p { font-size: 12px; line-height: 112px; opacity: 0.8;}
#footer .footer-in .bottom p a { font-size: 12px; line-height: 112px; color:#fff; transition: all 0.2s ease-out; }
#footer .footer-in .bottom p a:nth-child(2):hover { color:#ff5a53; }
#footer .footer-in .bottom p br { display: none; }


@media (max-width: 1280px) {
    
    .header .header-in a:nth-of-type(2) { right: -60px; }
    
}


@media (max-width: 1380px) {
    
    .totop { bottom: 20px; }
    .totop.on { right: 20px; bottom: 20px; }
    .header { display: none; }
    .header-mobile { display: block; } 
    #footer .footer-in .top { width: 100%; }
    
}

@media (max-width: 980px) {
    
    #footer .footer-in .cont .left { width: 25%; }
    
}

@media (max-width: 768px) {
    
    #footer .footer-in .cont { display: block; text-align: center; }
    #footer .footer-in .cont .left  { text-align: center; width: 100%; }
    #footer .footer-in .cont .left img { position: relative; left: auto; top: auto; margin: 0px auto; transform: none; }
    
    #footer .footer-in .cont .center { margin-top: 30px; }
    #footer .footer-in .cont div li { font-size: 12px; line-height: 24px; }
    #footer .footer-in .bottom { height: auto; padding: 25px 0px; }
    #footer .footer-in .bottom p { font-size: 12px; line-height: 24px; }
    #footer .footer-in .bottom p br { display: block; }
    
}


@media (max-width: 480px) {
    
    .header-mobile > a:nth-of-type(1) > img { width: 100px; top: 12.5px; }
    
}

@media (max-width: 420px) {
    
    #footer .footer-in .cont div li { font-size: 11px; line-height: 24px; }
    #footer .footer-in .bottom p { font-size: 11px; }
    
    
}


@media (max-width: 380px) {
    
    .header-mobile > a:nth-of-type(1) > img { left: 20px; }
    input[id="hamburger"] + label { right: 20px; }
    .header-mobile > a:nth-of-type(2) { right: 65px; }
    .header-mobile > a:nth-of-type(3) { right: 102px; }
    
}