@charset "utf-8";

.br{ display: block;}

/* header */
#header{ width: 100%; }
#header .gnb{ width: 100%; height: 100px; position: relative; }
#header .gnb.scroll{ position: fixed; top: 0; display: block; z-index: 999; transition: all 0.3s ease-in-out;}
.gnb .gnbIn{ height: 100%; padding: 0 0px 0 60px; display: flex; justify-content: space-between; align-items: center;border-bottom: 1px solid #6A2F2B; background: #F5E0CB; }
.gnbIn .logo a{ display: block;}
.gnbIn .logo a img{ width: 150px;}
.gnbIn .btnArea{ width: 15%; height: 100%; display: flex; justify-content: center; align-items: center;  border-left: 1px solid #6A2F2B;} 
.btnArea .resBtn{ margin-right: 25px;}
.resBtn a{ display: block; text-align: center;}
.resBtn a::after{ content: '펀스테이예약'; opacity: 0; display: flex; flex-direction: column; text-align: center; font-size: 0.75rem; line-height: 0.8em; padding-top: 3px;}
.resBtn a:hover::after{ content: '펀스테이 예약'; opacity: 1; display: flex; flex-direction: column; text-align: center; font-size: 0.75rem; color: #212529; line-height: 0.8em; padding-top: 3px; }
.resBtn a i{ font-size: 32px; color: #DD793B; text-align: center;}
.resBtn a:hover i{ color: #212529;}

.hamBtn{ position: relative; width: 30px; background-color: transparent; border: none; cursor: pointer; top: 0; margin: 0 10px 12px 25px;}
.hamBtn::before, .hamBtn::after, .hamBtn div{ content: ''; display: block; height: 2px; margin: 8px 0; transition: all 0.3s ease-in-out; background-color: #6A2F2B; }
.hamBtnOn .hamBtn::before{ transform: translateY(9px) rotate(135deg); background-color: #6A2F2B; }
.hamBtnOn .hamBtn::after{ transform: translateY(-11px) rotate(-135deg); background-color: #6A2F2B; width: 100%; }
.hamBtnOn .hamBtn div{ transform: scale(0); opacity: 0;}

/* menu */
.menu{width: 100%; position: relative; right: 0; top: 0; z-index: 998;}
.menu .menuIn{ width: 14.6%; height: calc(100vh - 100px); position: fixed; bottom: 0; right: -100%; background-color: #6A2F2B; display: flex; align-items: center; transition: right 0.5s ease-in-out; }
.menuIn .menuCon{ background-color: #6A2F2B; width: 100%; display: flex; justify-content: space-between; flex-direction: column; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); }
.menuIn .menuCon li{ margin: 7px 0; text-align: center; background-color: #6A2F2B;}
.menuIn .menuCon > li > a{ font-weight: 600; font-size: 16px; position: relative; cursor: pointer; background-color: transparent; color: #F5E0CB;}
.menuIn .menuCon > li:nth-child(2) > a::after{ content: "+"; position: absolute; top: 0; left: 70px; }
.menuIn .menuCon > li:nth-child(3) > a::after{ content: "+"; position: absolute; top: 0; left: 77px;}
.menuIn .menuCon > li:nth-child(4) > a::after{ content: "+"; position: absolute; top: 0; left: 70px;}
.menuIn .menuCon > li.on > a::after{ content: '+'; transform: rotate(45deg);}
.menuIn .menuCon > li > .sub{ padding: 10px 0 15px; display: none; background-color: #6A2F2B;}
.menuIn .menuCon > li.open > .sub{display: block;}
.menuIn .menuCon > li > .sub > li > a{ display: block; font-weight: 500; color: #F5E0CB; font-size: 14px; background-color: #6A2F2B;}

header.hamBtnOn .menu .menuIn{ right: 0; }

/* footer */
#footer{ width: 100%; border-top: 1px solid #6A2F2B; padding: 60px; display: flex; justify-content: space-between; align-items: flex-end;}
.footCon .logo a{ display: block;}
.footCon .logo h1{ font-family: "Bodoni Moda", serif; font-size: 36px; color: #6A2F2B; }
.footCon .footNum{ margin-top: 30px;}
.footNum > p{ margin-bottom: 6px; font-size: 16px; color: #212529;}
.footNum > p > a{ display: block; width: 100%; height: 100%; font-size: 20px; color: #212529;}
.footCon > p > span{ display: block; font-size: 0.875rem;}
.footCon .footR{ display: flex; justify-content: flex-end; flex-direction: column; text-align: right; align-items: flex-end; }
.footCon .footR img{ width: 40px; display: block; text-align: right; margin-bottom: 10px;}
/* .footR > span > a{ font-size: 14px; margin-bottom: 10px;} */
.footR > span > a{ transition: all 0.3s ease-in-out;}
.footR > span > a:hover{ color: #ff5a53; }

/* 반응형 */
@media all and (max-width: 1024px){
    .menu .menuIn{ width: 21.4%;}
    .gnb .gnbIn{ padding: 0 0 0 30px;}
    .gnbIn .btnArea{ width: 22%;}
    .btnArea .resBtn{ margin-right: 0;}
    #footer{ padding: 60px 30px;}
    .footCon > p > span{ font-size: 12px;}
    
}
@media all and (max-width: 768px){
    .br{ display: none;}
    #header .gnb{ height: 80px;}
    .menu .menuIn{ height: calc(100vh - 80px);}
    .gnb .gnbIn{ padding: 0 0 0 20px;}
    .gnbIn .logo h1{ font-size: 24px;}
    .gnbIn .btnArea{ width: auto; justify-content: space-between; padding: 0 20px; border: none;}
    
    .btnArea .resBtn{ margin-right: 0px;}
    .resBtn a{ margin-right: 0px;}
    .resBtn a::after{opacity: 1; color: #DD793B; }
    .resBtn a:hover i{ color: #DD793B;}
    .resBtn a:hover::after{ color: #DD793B;}
    .menu .menuIn{ width: 100%;}

    #footer{ flex-direction: column; padding: 60px 20px; align-items: flex-start;}
    #footer .footCon{ margin-bottom: 20px;}
    .footCon .footR{ align-items: flex-start;}

}
@media all and (max-width: 320px){
    .hamBtn{ margin: 0 10px 12px 10px;}
}