@charset "utf-8";
.pcbr{ display: block;}
body{ background-color: #edede5;}


header{ pointer-events: none; opacity: 0; width: 100%; height: 100px; padding: 0 60px; display: flex; justify-content: space-between; align-items: center; background-color: #64635e; position: fixed; top: 0; left: 0; transition: all 0.3s ease-in-out;}
header.scroll{ opacity: 1; pointer-events: all; z-index: 999;}
.logo a img{ width: 150px;}
#gnb{ height: 100%;}
#gnb .pcGnb{ height: 100%; display: flex; justify-content: space-between; align-items: center; }
.pcGnb > li { height: 100%; padding: 0 36px;}
.pcGnb > li:first-child{ padding-left: 0;}
.pcGnb > li:last-child{ padding-right: 0;}
.pcGnb > li > a{  width: 100%; display: flex; align-items: center; font-size: 16px; color: #f2f4e6; height: 100%;}
.pcGnb > li:hover .subMenu{ opacity: 1; pointer-events: all;}
.subMenu{ opacity: 0; width: 100vw; padding: 30px 60px; position: fixed; top: 100px; left: 0; background-color: #64635e; display: flex; justify-content: space-between; align-items: center; justify-content: flex-end; transition: all 0.3s ease-in-out; pointer-events: none;}
.subMenu .subMImg{ width: 50%; padding: 0 80px; border-right: 1px solid #f2f4e6;}
.subMImg .menuImgCon{ width: 100%; aspect-ratio: 16/9; }
.subMImg .menuImgCon.spaceImg{ background: url(../img/sub2/image16.jpg) no-repeat center/cover; }
.subMImg .menuImgCon.enjoyImg{ background: url(../img/sub3/1/image1.jpg) no-repeat center/cover; }
.subMImg .menuImgCon.noteImg{ background: url(../img/main/image4.jpg) no-repeat center/cover; }
.subMenu .subGnb{ width: 50%;}
.subGnb > li{ text-align: center; padding: 10px 0;}
.subGnb > li > a{ display: block; width: 100%; height: 100%; color: #f2f4e6; text-align: center;}
/* .subGnb > li > a:hover{} */

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

/* footer */
#footer{ border-top: 1px solid #797873; padding: 80px 60px; display: flex; justify-content: space-between; align-items: center;}
#footer .footWrap{ width: 60%; display: flex; justify-content: center; align-items: center;}
#footer .footWrap:last-child{ width: 40%;}
.footWrap .footWrapHalf{ width: 50%; display: flex; justify-content: flex-start; flex-direction: column;}
.footWrapHalf .footLogo img{ width: 180px;}
.footWrapHalf h3{ font-size: 14px; color: #24211c; margin-bottom: 15px;}
.footWrapHalf h3 a{ display: block; width: 100%; height: 100%; font-size: 20px; color: #24211c;}
.footWrapHalf p{ margin-bottom: 30px;}
.footWrapHalf p span{ display: block; font-size: 14px;}

.footWrap .footWrapHalf.footR{ justify-content: space-between;}
.footWrapHalf.footR p img{ width: 30px; vertical-align: middle; margin-bottom: 15px;}
.footWrapHalf.footR p a{ font-size: 14px; transition: all 0.3s ease-in-out;}
.footWrapHalf.footR p a:hover{ color: #ff5a53;}

.footWrap ul{ width: 70%; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.footWrap ul li{ width: 100%; margin-bottom: 30px; position: relative;}
.footWrap ul li::before{ content: '■'; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.footWrap ul li a{ width: 100%; display: flex; flex-direction: column; text-align: center; position: relative; font-family: "Cormorant Garamond", serif;  font-size: 36px; transition: all 1s ease-in-out;}
.footWrap ul li a:hover::before{ content: 'HEALING STAY'; display: block; font-family: "Cormorant Garamond", serif;  font-size: 12px; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);}


/* 반응형 */
@media all and (max-width: 1024px){
    header{ padding: 0 30px; }
    .pcGnb > li{ padding: 0 24px;}
    .subMenu{ padding: 30px;}
    .subMenu .subMImg{ padding: 0 40px;}
    .subMImg .menuImgCon{ aspect-ratio: 4/3;}
    .subGnb > li{ padding: 8px 0;}

    /* footer */
    /* .footWrap ul{ width: 80%;} */
    /* .footWrap ul li a{ font-size: 24px;}
    .footWrap ul li a::before{ font-size: 11px; top: -20px;} */

     /* footer */
    #footer{ flex-direction: column; padding: 40px 30px;}
    #footer .footWrap{ width: 100%;}
    #footer .footWrap:last-child{ margin-top: 30px; display: none;}
}
@media all and (max-width: 768px){
    .pcbr{ display: none;}
    .logo img{ width: 180px; vertical-align: middle;}
    #gnb{ display: none;}
    header.scroll .logo a img{ width: 110px;}
    header.scroll{ height: 80px;}
    .mBtnArea{ display: flex; align-items: center;}
    .mBtnArea .resBtn{ padding-right: 30px; height: 100%;}
    .resBtn a{  display: flex; flex-direction: column; align-items: center; color: #f2f4e6; }
    .resBtn a i{ font-size: 24px; color: #f2f4e6; text-align: center;}
    .resBtn a span{ font-size: 12px; color: #f2f4e6; padding-top: 5px;}

    /* 모바일 메뉴 */
    .mobileMenu{ opacity: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100vh - 80px); position: fixed; top: 80px; left: 0; z-index: 998; background: #64635e; transition: all 0.3s ease-in-out; }
    header.hamBtnOn .mobileMenu{ opacity: 1; pointer-events: all; z-index: 999; }
    .mobileMenu > ul{ width: 40%; padding: 0 20px; display: flex; flex-direction: column; align-items: center; }
    .mobileMenu > ul > li{ margin-bottom: 15px; text-align: center; position: relative; width: 100%; }
    .mobileMenu > ul > li > a{ display: block; width: 100%; font-weight: 600;color: #f2f4e6; font-size: 18px; cursor: pointer; margin-bottom: 10px; }
    .mobileMenu > ul > li:nth-child(2)::after{ content:'+'; position: absolute; top: 5px; right: 0px; transition: all 0.3s ease-in-out; color: #f2f4e6; opacity: 0;}
    .mobileMenu > ul > li:nth-child(3)::after{ content:'+'; position: absolute; top: 5px; right: 0px; transition: all 0.3s ease-in-out; color: #f2f4e6; opacity: 0;}
    .mobileMenu > ul > li:nth-child(4)::after{ content:'+'; position: absolute; top: 5px; right: 0px; transition: all 0.3s ease-in-out; color: #f2f4e6; opacity: 0;}
    .mobileMenu > ul > li.active{ margin-bottom: 30px;}
    .mobileMenu > ul > li.active::after{ content: '+'; transform: rotate(135deg); opacity: 1;}
    .mobileMenu > ul > li > .mSub{ display: none;}
    .mSub > ul > li > a{  font-size: 14px; color: #f2f4e6;}

   
}

@media all and ( max-width: 520px ){
    header{ padding: 0 20px;}
    .mBtnArea .resBtn{ padding-right: 14px;}

    #footer .footWrap{ flex-direction: column;}
    .footWrap .footWrapHalf{ width: 100%;}
    .footWrapHalf h3 a{ font-size: 18px;}
    .footWrap ul{ width: 100%;}
    .footWrap ul li{ margin-bottom: 15px;}
    .footWrapHalf p{ margin-bottom: 15px;}
    .footWrapHalf p:last-child{ margin-bottom: 0;}
    .footWrapHalf p span{ font-size: 12px;}
    .footWrapHalf.footR p a{ font-size: 12px;}
    
}