.main .ygap4 {--y-gap:4rem;}

.enTit {font-size: 3.75rem; font-family: var(--pointfont); line-height: 1.2; text-transform: uppercase;}
.subTit {color: var(--pointcolor); font-weight: 500;}
@media(max-width:500px) {
    .enTit {font-size: 2.75rem;}
} 

.main .swiper-button-next, .main .swiper-button-prev {position: relative; right: auto; left: auto; top: auto; width: auto; margin-top: 0; height: auto; opacity: 1;}
.main .swiper-button-prev img {transform: scaleX(-1);}

.main.en, .main.cn {font-family: 'Noto Sans';}
/* .main .blind {overflow: hidden; display: inline-block; position: absolute; z-index: -1; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);} */

/* visual */
#visual {width: 100%; height: 100vh; position: relative; background-color: var(--black);}
#visual .reveal {visibility: hidden; position: relative; overflow: hidden; width: 100%; height: 100%;}
#visual .reveal img {width: 100%; height: 100%; object-fit: cover;}

#visual .visual_Logo {position: absolute; left: 12%; top: 50%; width: 16.125rem; transform: translateY(-50%); z-index: 9; opacity: 0; visibility: hidden; pointer-events: none; }
#visual .visual_Logo img {display: block; width: 100%; height: auto; user-select: none;}
#visual .fix_Logo {position: fixed; left: 12%; top: 1rem; width: 7.5rem; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none;}
#visual .fix_Logo img {display: block; width: 100%; height: auto;}
@media(max-width:600px) {
    #visual .visual_Logo {top: 45%;}
    #visual .fix_Logo {left: 2rem;}
}


/* view */
#view .DescInner {display: flex; align-items: center; gap: 3rem; justify-content: space-between;}
#view .Desc {text-transform: uppercase; letter-spacing: 0; font-size: 1.125rem;}

#view .BtnBox {width: fit-content; position: relative; display: flex; align-items: center; gap: 1rem;}
#view .swiper-button-next, #view .swiper-button-prev {padding: 2rem 0; pointer-events: auto;}
#view .swiper-button-next img, #view .swiper-button-prev img {width: 3rem;}
#view .swiper-button-next:after, #view .swiper-button-prev:after {content:''; width: 0rem; height: 0rem; border-radius: 50%; background-color: var(--pointcolor); mix-blend-mode: multiply; opacity: .5; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); transition: .3s;} 
#view .swiper-button-next:hover:after, #view .swiper-button-prev:hover:after {width: 2.5rem; height: 2.5rem; transition: .3s;}



/* private */
#private .Line {width: .125rem; height: 56.25rem; background-color: var(--black); position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

#private .Left {padding-right: 2rem;}

#private .Right .Inner {max-width: 41.25rem; margin-left: auto; padding-left: 2rem;}
#private .Right img {border-radius: var(--radius); overflow: hidden; width: 41.25rem;}
#private .Right .enTxt {font-family: var(--pointfont); font-size: 2.5rem; text-align: right; margin-top: 17vh; margin-bottom: 3rem;}
@media(max-width:600px) {
    #private .Left {order: 1; padding-right: 0;}
    #private .Line {left: 0; height: 50rem;}

    #private .Right .enTxt {margin-top: 10vh;}
    #private .Right img {max-width: 90%; margin-left: auto;}
}


/* spa */
#spa .flexList {--x-gap:1.25rem; --y-gap:1.25rem;}
#spa .box {overflow: hidden;}
#spa .box img {object-fit: cover; transform: scale(1); transition: ease 1.5s;}
#spa .box:hover img {transform: scale(1.2); transition: ease 1.5s;}



/* room */
#room .TabMenu {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap:1rem 2.5rem; font-family: var(--pointfont); text-transform: uppercase;}
#room .TabMenu li {cursor: pointer; white-space: nowrap;}
#room .TabMenu li.active {border-bottom: 1px solid var(--pointcolor); font-weight: 500;}

#room .slideFlex {display: flex; align-items: flex-end; gap: 1.25rem;}
#room .slideBox {max-width: 46.875rem;}
#room .thumBox {width: calc((100% - 46.875rem) - 1.25rem);}
@media(max-width:990px) {
    #room .slideBox {width: 50%;}
    #room .thumBox {width: calc(50% - 1.25rem);}
}
@media(max-width:600px) {
    #room .slideFlex {flex-direction: column;}
    #room .slideBox,   #room .thumBox {width: 100%; max-width: 100%;}
}


/* service */
#service {background-color: rgba(117,91,77,.2); border-radius: 0 7.5rem 0 0;}
#service .Inner {max-width: 1642px; width: 97%;}



/* anook */
#anook .Img {align-self: stretch; aspect-ratio: 12 / 13.5;}
#anook .Img img {object-fit: cover;}
#anook .Desc {padding: 1rem;}
#anook .Deco {font-size: 7.2vw; white-space: nowrap; line-height: 1; font-family: var(--pointfont); color:#fff; position: absolute; left: 0; bottom: 0;}
@media(max-width:600px) {
    #anook .Desc {order: -1; padding-bottom: 4rem; justify-content: flex-start;}
    #anook .Deco {font-size: 13.5vw;}
}


/* location */
#location {background-color: rgba(117,91,77,.15);}
#location .flexList {--x-gap:5rem;}
#location #map {max-width: 714px; position: relative; width: 100%; aspect-ratio: 12 / 10; margin-left: auto;}
#location #map .mapCover {position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,0); left: 0; top: 0; z-index: 3;}
@media(max-width:768px) {
    #location .map {order:1;}
    #location .Desc {justify-content: flex-start; padding-bottom: 3rem;}
}


footer {background-color: #715444; color: var(--white); padding: 9.375rem 0;}
footer .footer_Logo {height: 4.625rem;}
footer span {padding: 0 .5rem;}