.sleepnomore {padding-top: 0;word-break: keep-all;}
.sleepnomore .sleepnomore-banner {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.sleepnomore .sleepnomore-banner .banner-img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; background-position: 30% 50%; background-repeat: no-repeat; background-size: cover;}

.sleepnomore .title {display: block; text-align: center; font-size: 72px; font-family: 'disol_headline'; color: #fff; letter-spacing: -0.025em;}
.sleepnomore .subTxt {text-align: center; font-size: 18px; font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: calc(30/18*1em); padding-top: calc(45/18*1em);}

.sleepnomore .aboutTxt {padding-top: 170px; display: flex; flex-direction: column; align-items: center; text-align: center;}
.sleepnomore .aboutTxt b {opacity: .6; font-size: 28px; font-family: 'disol_headline'; color: #f6ac3c; letter-spacing: -0.025em; padding-bottom: calc(15/28*1em);}
.sleepnomore .aboutTxt p {font-size: 24px; font-weight: 500; letter-spacing: -0.025em; color: #fff; line-height: calc(44/24*1em); padding-top: calc(45/24*1em);}
.sleepnomore .aboutTxt p * {-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(110deg, #ffffff2c 0%, transparent 0%, transparent 0%);}

@media screen and (max-width: 1440px) {
    .sleepnomore .title {font-size: clamp(60px, 72/1440*100vw, 72px);}
    .sleepnomore .subTxt {font-size: clamp(16px, 18/1440*100vw, 18px);}
    .sleepnomore .aboutTxt {padding-top: clamp(140px, 170/1440*100vw, 170px);}
    .sleepnomore .aboutTxt b {font-size: clamp(24px, 28/1440*100vw, 28px);}
    .sleepnomore .aboutTxt p {font-size: clamp(20px, 24/1440*100vw, 24px);}
}

@media screen and (max-width: 1280px) {
    .sleepnomore .title {font-size: 65px;}
    .sleepnomore .subTxt {font-size: 17px;}
    .sleepnomore .aboutTxt {padding-top: 150px;}
    .sleepnomore .aboutTxt b {font-size: 26px;}
    .sleepnomore .aboutTxt p {font-size: 22px;}
}

@media screen and (max-width: 1024px) {
    .sleepnomore .title {font-size: 58px;}
    .sleepnomore .subTxt {font-size: 16px;}
    .sleepnomore .aboutTxt {padding-top: 130px;}
    .sleepnomore .aboutTxt b {font-size: 24px;}
    .sleepnomore .aboutTxt p {font-size: 20px;}
}

@media screen and (max-width: 820px) {
    .sleepnomore .title {font-size: 50px;}
    .sleepnomore .aboutTxt {padding-top: 110px;}
    .sleepnomore .aboutTxt b {font-size: 22px;}
    .sleepnomore .aboutTxt p {font-size: 18px; line-height: calc(36/18*1em); max-width: 550px;}
    .sleepnomore .aboutTxt p br {display: none;}
}

@media screen and (max-width: 500px) {
    .sleepnomore .title {font-size: 40px;}
    .sleepnomore .subTxt {font-size: 15px;}
    .sleepnomore .aboutTxt {padding-top: 90px;}
    .sleepnomore .aboutTxt b {font-size: 20px;}
    .sleepnomore .aboutTxt p {font-size: 16px; line-height: calc(32/16*1em);}
    .sleepnomore .aboutTxt p br {display: none;}
}

@media screen and (max-width: 360px) {
    .sleepnomore .title {font-size: 32px;}
    .sleepnomore .subTxt { font-size:  14px;}
    .sleepnomore .aboutTxt {padding-top: 70px;}
    .sleepnomore .aboutTxt b {font-size: 18px;}
    .sleepnomore .aboutTxt p {font-size: 14px; line-height: calc(28/14*1em);}
}


.sleepnomore .bookingWrap {padding-top: 250px;}
.sleepnomore .bookingWrap .calendar { width: 100%; max-width: 1300px; margin: 0 auto; position: relative; display: flex; justify-content: center;}
.sleepnomore .bookingWrap .calendar .calendar-inner {position: relative; box-sizing: border-box; padding: 80px 100px; width: 100%; height: 100%; z-index: 1;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn {position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 40px; color: #fff; opacity: 1; transition: all .4s ease-in-out;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn:hover {opacity: 1;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn.prevBtn {left: 0;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn.nextBtn {right: 0;}

.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header {width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(40/80*1em); padding-bottom: calc(40/80*1em); font-size: 80px;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header > h2 {font-size: 1em; font-family: 'disol_roman'; color: #fff; letter-spacing: -0.02em;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap {display: flex; justify-content: center; align-items: center; gap: calc(20/80*1em); }
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap > div {display: flex; align-items: center; gap: calc(10/20*1em); font-size: 20px;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap > div .dot {width: calc(12/20*1em); height: calc(12/20*1em); border-radius: 50%;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap > div.available .dot {background: #008710;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap > div.soldOut .dot {background: #ff0000;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap > div span {font-size: inherit; font-family: 'disol_headline'; color: #fff; letter-spacing: -0.025em; opacity: .6;}

.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body {width: 100%; display: flex; flex-direction: column;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week.head { padding-bottom: calc(15/30*1em); border-bottom: 2px solid #fff;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day {transition: all .4s ease-in-out; position: relative; --cw: 40px; font-family: 'Roboto'; color: #fff; text-align: center; padding-bottom: calc(0/30*1em); width: var(--cw); font-size: 30px;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day {cursor: pointer; padding: calc(20/30*1em) 0 calc(50/30*1em); position: relative;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day:after {content: ''; position: absolute; left: 50%; bottom: calc(20/30*1em); transform: translate(-50%, 0%); width: calc(12/30*1em); height: calc(12/30*1em); background: transparent; border-radius: 50%; transition: all .4s ease-in-out; z-index: -1;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day.available:after {background: #008710;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day.soldOut:after {background: #ff0000;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day span {position: relative; display: inline-block;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day span::before {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(48/30*1em); height: calc(48/30*1em); background: #fff; opacity: 0; border-radius: 50%; transition: all .4s ease-in-out; z-index: -1;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) + .calendar-week:not(.head) {border-top: 1px solid rgba(255, 255, 255, .2);}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: 20px; font-family: 'disol_headline';}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day.disabled {color: #7c7c7c; pointer-events: none;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day.act {color: #000; font-weight: 700;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day.act span::before {opacity: 1;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer {width: 100%; display: flex; justify-content: center; align-items: center; padding-top: calc(30/80*1em);}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn {font-size: 22px;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn span {width: calc(274/22*1em); height: calc(86/22*1em); display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn .circleWrap {width: calc(270/22*1em); height: calc(250/22*1em);}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn .circleWrap .circle { transition: all .4s ease-in-out; }
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn.active:hover {color: #000;}
.sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn.active:hover .circleWrap .circle {transform: translate(-50%, -50%) rotateX(70deg) rotateY(0deg); opacity: 1; border-color: transparent; background: #f6ad3c;}
@media screen and (max-width: 1440px) {
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header {font-size: clamp(75px, 80/1440*100vw, 80px);}
}
@media screen and (max-width: 1280px) {
    .sleepnomore .bookingWrap {padding-top: 200px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header {font-size: clamp(60px, 75/1280*100vw, 75px);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(26px, 30/1280*100vw, 30px);}
}
@media screen and (max-width: 1024px) {
    .sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn {font-size: 30px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header {font-size: clamp(54px, 60/1024*100vw, 60px);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: clamp(18px, 20/1024*100vw, 20px);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(24px, 26/1024*100vw, 26px);}
}
@media screen and (max-width: 820px) {
    .sleepnomore .bookingWrap {padding: 120px 0 120px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner {padding: 50px; max-width: 550px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn.prevBtn {left: calc(0/40*1em);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn.nextBtn {right: calc(0/40*1em);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header {padding-bottom: calc(30/54*1em);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer {padding-top: calc(80/54*1em);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn {font-size: 20px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn span {height: calc(80/24*1em);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-footer .circleBtn .circleWrap {width: calc(270/24*1em); height: calc(240/24*1em);}
}
@media screen and (max-width: 500px) {
    .sleepnomore .bookingWrap .calendar .calendar-inner .calrndar-arrBtn {font-size: 20px;}
    .sleepnomore .bookingWrap {padding: 100px 0 40px;}
    .sleepnomore .bookingWrap .wrap {width: 100%;}
    .sleepnomore .bookingWrap .calendar .calendar-inner {padding: 35px 25px; max-width: 550px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap > div {font-size: 18px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header {font-size: clamp(40px, 54/480*100vw, 54px);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: clamp(14px, 18/480*100vw, 18px);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(20px, 28/480*100vw, 28px);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day {padding: calc(15/28*1em) 0 calc(65/28*1em);}
}
@media screen and (max-width: 360px) {
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-header .tagViewWrap > div {font-size: 15px;}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: clamp(12px, 14/360*100vw, 14px);}
    .sleepnomore .bookingWrap .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(16px, 20/360*100vw, 20px);}
}


.sleepnomore .attention {padding-top: 200px;}
.sleepnomore .attention ul {padding-top: 60px;}
.sleepnomore .attention ul li {cursor: pointer; font-size: 18px;}
.sleepnomore .attention ul li + li {margin-top: calc(20/18*1em);}
.sleepnomore .attention ul li dl {width: 100%; display: flex; flex-direction: column;}
.sleepnomore .attention ul li dl dt {box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 22px; font-weight: 500; letter-spacing: -0.025em; color: #fff; padding: calc(15/22*1em) calc(25/22*1em); background: #1d1d1e; border-radius: calc(16/22*1em);}
.sleepnomore .attention ul li dl dt .txt {display: flex; align-items: center;}
.sleepnomore .attention ul li dl dt .txt .img {width: 24px;}
.sleepnomore .attention ul li dl dt .txt p {padding-left: calc(10/18*1em);}
.sleepnomore .attention ul li dl dt span {transition: all .3s ease; font-size: 22px; width: calc(37/22*1em); height: calc(37/22*1em); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #070707;;}
.sleepnomore .attention ul li.open dl dt span {transform: scale(-1);}
.sleepnomore .attention ul li dl dd {display: none; width: 100%; box-sizing: border-box; margin-top: calc(20/18*1em); font-size: inherit; padding: calc(40/18*1em) calc(45/18*1em); background: #070707; border-radius: calc(16/18*1em); color: #fff;}
.sleepnomore .attention ul li:first-child dl dd {display: block;}
.sleepnomore .attention ul li dl dd .txt + .txt {padding-top: calc(30/18*1em);}
.sleepnomore .attention ul li dl dd .txt .boldTxt {word-break: keep-all; display: flex; align-items: center; position: relative; font-size: inherit; font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; color: #fff; margin-bottom: calc(15/18*1em);}
.sleepnomore .attention ul li dl dd .txt .boldTxt::before {content: '·'; position: absolute; right: 100%; top: 0; color: #f6ac3c; font-size: calc(24/18*1em); font-weight: bold; letter-spacing: -0.025em; padding-right: calc(15/24*1em); line-height: calc(18/24*1em);}
.sleepnomore .attention ul li dl dd .txt p {font-size: 16px; line-height: calc(30/16*1em); color: #ebebee; font-weight: 200; letter-spacing: -0.025em;}

@media screen and (max-width: 1440px) {
    .sleepnomore .attention {padding-top: 180px;}
    .sleepnomore .attention ul {padding-top: 50px;}
    .sleepnomore .attention ul li dl dt {font-size: clamp(20px, 22/1440*100vw, 22px);}
    .sleepnomore .attention ul li dl dt span {font-size: clamp(20px, 22/1440*100vw, 22px);}
}

@media screen and (max-width: 1280px) {
    .sleepnomore .attention {padding-top: 140px;}
    .sleepnomore .attention ul li + li {margin-top: calc(18/18*1em);}
    .sleepnomore .attention ul li dl dt {font-size: clamp(18px, 20/1280*100vw, 20px);}
    .sleepnomore .attention ul li dl dt span {font-size: clamp(18px, 20/1280*100vw, 20px);}
}

@media screen and (max-width: 1024px) {
    .sleepnomore .attention {padding-top: 130px;}
    .sleepnomore .attention ul {padding-top: 40px;}
    .sleepnomore .attention ul li {font-size: 16px;}
    .sleepnomore .attention ul li dl dt {font-size: clamp(16px, 18/1024*100vw, 18px);}
    .sleepnomore .attention ul li dl dt span {font-size: clamp(16px, 18/1024*100vw, 18px);}
    .sleepnomore .attention ul li dl dd .txt p {font-size: 15px; word-break: keep-all;}
    .sleepnomore .attention ul li dl dd .txt p br {display: none;}
}

@media screen and (max-width: 820px) {
    .sleepnomore .attention {padding-top: 0px;}
    .sleepnomore .attention ul {padding-top: 30px;}
    .sleepnomore .attention ul li + li {margin-top: calc(15/16*1em);}
    .sleepnomore .attention ul li dl dt {padding: calc(12/16*1em) calc(20/16*1em);}
    .sleepnomore .attention ul li dl dt .txt .img {width: 20px;}
    .sleepnomore .attention ul li dl dd {padding: calc(30/16*1em) calc(35/16*1em);}
    .sleepnomore .attention ul li dl dd .txt + .txt {padding-top: calc(25/16*1em);}
}

@media screen and (max-width: 500px) {
    /* .sleepnomore .attention {padding-top: 90px;} */
    .sleepnomore .attention ul {padding-top: 25px;}
    .sleepnomore .attention ul li {font-size: 14px;}
    .sleepnomore .attention ul li + li {margin-top: calc(12/14*1em);}
    .sleepnomore .attention ul li dl dt {font-size: clamp(14px, 16/500*100vw, 16px); border-radius: calc(12/16*1em);}
    .sleepnomore .attention ul li dl dt span {font-size: clamp(14px, 16/500*100vw, 16px);}
    .sleepnomore .attention ul li dl dt .txt .img {width: 18px;}
    .sleepnomore .attention ul li dl dd {padding: calc(25/14*1em) calc(20/14*1em); border-radius: calc(12/14*1em);}
    .sleepnomore .attention ul li dl dd .txt .boldTxt {margin-bottom: calc(10/14*1em);}
    .sleepnomore .attention ul li dl dd .txt p {font-size: 13px; line-height: calc(24/13*1em);}
}

@media screen and (max-width: 360px) {
    .sleepnomore .attention {padding-top: 50px;}
    .sleepnomore .attention ul {padding-top: 20px;}
    .sleepnomore .attention ul li {font-size: 13px;}
    .sleepnomore .attention ul li + li {margin-top: calc(10/13*1em);}
    .sleepnomore .attention ul li dl dt {font-size: clamp(13px, 14/360*100vw, 14px);}
    .sleepnomore .attention ul li dl dt span {font-size: clamp(13px, 14/360*100vw, 14px);}
    .sleepnomore .attention ul li dl dt .txt .img {width: 16px;}
    .sleepnomore .attention ul li dl dd {padding: calc(20/13*1em) calc(15/13*1em);}
    .sleepnomore .attention ul li dl dd .txt p {font-size: 12px; line-height: calc(22/12*1em);}
}


.sleepnomore .review {padding-top: 300px;}
.sleepnomore .review .swiper {width: 100%; margin-top: 70px;}
.sleepnomore .review .swiper .swiper-slide {width: 960px; position: relative; box-shadow: 0 0 100px 80px rgb(0 0 0 / 95%);}
.sleepnomore .review .swiper .swiper-slide::after {content: ''; display: block; padding-top: calc(436/960*100%);}
.sleepnomore .review .swiper .swiper-slide .review-item {filter: brightness(.8); position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 9px; overflow: hidden; transition: .4s;}
.sleepnomore .review .swiper .swiper-slide.swiper-slide-active .review-item {border-radius: 0; filter: brightness(1);}
.sleepnomore .review .swiper .swiper-slide .review-item .bg {position: relative; width: 100%; height: 100%;}
.sleepnomore .review .swiper .swiper-slide .review-item .bg img {transition: .4s; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sleepnomore .review .swiper .swiper-slide .bg_default {opacity: 1;}
.sleepnomore .review .swiper .swiper-slide .bg_act {opacity: 0;}
.sleepnomore .review .swiper .swiper-slide.swiper-slide-active .bg_default {opacity: 0;}
.sleepnomore .review .swiper .swiper-slide.swiper-slide-active .bg_act {opacity: 1;}
.sleepnomore .review .swiper .swiper-slide .txt {text-align: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; box-sizing: border-box; font-size: 32px; font-weight: 600; letter-spacing: -0.025em; color: #fff; line-height: calc(56/32*1em); word-break: keep-all;}
html.en .sleepnomore .review .swiper .swiper-slide .txt{font-size: 26px;}
.sleepnomore .review .swiper .swiper-slide .txt span {position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: inline-block; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; color: #7c7c7c; padding-top: calc(50/20*1em);}

@media screen and (max-width: 1440px) {
    .sleepnomore .review {padding-top: 250px;}
    .sleepnomore .review .swiper {margin-top: 60px;}
    .sleepnomore .review .swiper .swiper-slide {width: 860px; box-shadow: 0 0 80px 60px rgb(0 0 0 / 95%);}
    .sleepnomore .review .swiper .swiper-slide .txt {font-size: 30px; line-height: calc(52/30*1em);}
    .sleepnomore .review .swiper .swiper-slide .txt span {font-size: 18px; padding-top: calc(45/18*1em);}
}

@media screen and (max-width: 1280px) {
    .sleepnomore .review {padding-top: 220px;}
    .sleepnomore .review .swiper {margin-top: 50px;}
    .sleepnomore .review .swiper .swiper-slide {width: 760px; box-shadow: 0 0 70px 50px rgb(0 0 0 / 95%);}
    .sleepnomore .review .swiper .swiper-slide .txt {font-size: 28px; line-height: calc(48/28*1em);}
    html.en .sleepnomore .review .swiper .swiper-slide .txt{font-size: 20px;}
    .sleepnomore .review .swiper .swiper-slide .txt span {font-size: 17px; padding-top: calc(40/17*1em);}
}

@media screen and (max-width: 1024px) {
    .sleepnomore .review {padding-top: 180px;}
    .sleepnomore .review .swiper {margin-top: 40px;}
    .sleepnomore .review .swiper .swiper-slide {width: 600px; box-shadow: 0 0 60px 40px rgb(0 0 0 / 95%);}
    .sleepnomore .review .swiper .swiper-slide .txt {font-size: 24px; line-height: calc(42/24*1em);}
    html.en .sleepnomore .review .swiper .swiper-slide .txt{font-size: 18px;}
    .sleepnomore .review .swiper .swiper-slide .txt span {font-size: 16px; padding-top: calc(35/16*1em);}
}

@media screen and (max-width: 820px) {
    .sleepnomore .review {padding-top: 150px;}
    .sleepnomore .review .swiper {margin-top: 35px;}
    .sleepnomore .review .swiper .swiper-slide {width: 430px; box-shadow: 0 0 50px 30px rgb(0 0 0 / 95%);}
    .sleepnomore .review .swiper .swiper-slide .txt {font-size: clamp(15px, 18/820*100vw, 18px); line-height: 1.7;}
    html.en .sleepnomore .review .swiper .swiper-slide .txt{font-size: 14px;}
    .sleepnomore .review .swiper .swiper-slide .txt span {font-size: 15px; padding-top: calc(10/15*1em); line-height: 1.4; white-space: nowrap;}
}

@media screen and (max-width: 500px) {
    .sleepnomore .review {padding-top: 120px;}
    .sleepnomore .review .swiper {margin-top: 30px;}
    .sleepnomore .review .swiper .swiper-slide {width: 340px; box-shadow: 0 0 40px 20px rgb(0 0 0 / 95%);}
    .sleepnomore .review .swiper .swiper-slide .review-item {border-radius: 6px;}
    .sleepnomore .review .swiper .swiper-slide .txt {padding: 0 calc(10/13*1em); font-size: 13px; line-height: 1.7;}
    html.en .sleepnomore .review .swiper .swiper-slide .txt{font-size: 12px;}
    .sleepnomore .review .swiper .swiper-slide .txt br {display: none;}
    .sleepnomore .review .swiper .swiper-slide .txt span {font-size: 13px;}
}

@media screen and (max-width: 360px) {
    .sleepnomore .review {padding-top: 100px;}
    .sleepnomore .review .swiper {margin-top: 25px;}
    .sleepnomore .review .swiper .swiper-slide {width: 80%; box-shadow: 0 0 30px 15px rgb(0 0 0 / 95%);}
    .sleepnomore .review .swiper .swiper-slide .review-item {border-radius: 5px;}
    .sleepnomore .review .swiper .swiper-slide .txt {font-size: 12px;}
    html.en .sleepnomore .review .swiper .swiper-slide .txt{font-size: 10px;}
    .sleepnomore .review .swiper .swiper-slide .txt span { position: static; transform: translateX(0); font-size: 12px;}
}


.sleepnomore .residents {padding-top: 200px;}
.sleepnomore .residents .content {position: relative; margin-top: 60px; margin-bottom: 100px; overflow: hidden;}
.sleepnomore .residents .content .canvas {width: 95%; max-width: 1245px; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.sleepnomore .residents .content .canvas::after {content: ''; display: block; padding-top: calc(634/1245*100%);}
.sleepnomore .residents .content .canvas canvas {position: absolute; left: 0%; top: 0; width: 100%; height: 100%;}
.sleepnomore .residents .content .profile {position: relative; width: 100%; z-index: 1; padding: 2px 0; transform: translateY(100%);}
.sleepnomore .residents .content .profile:after {content: ''; display: block; padding-top: calc(1000/1720*100%);}
.sleepnomore .residents .content .profile::before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; border: 3px solid #000; border-width: 20px 0 20px 0; z-index: 3;}
.sleepnomore .residents .content .profile .inner {box-sizing: border-box; position: absolute; left: 0; top: 0; padding-top: 50px; width: 100%; height: 100%; overflow: hidden;}
.sleepnomore .residents .content .profile .inner:before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: linear-gradient(to bottom, #000000 0%, transparent 0%, transparent 60%, #000000 95%);}
.sleepnomore .residents .content .profile .inner ul {width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 35px;}
.sleepnomore .residents .content .profile .inner ul li {width: calc(100% / 5 - (35px * 4 / 5)); overflow: hidden; margin-bottom: 70px;}
.sleepnomore .residents .content .profile .inner ul li .img {width: 100%; object-fit: cover; position: relative;}
.sleepnomore .residents .content .profile .inner ul li .img::before {content: ''; display: block; padding-top: calc(456/313*100%);}
.sleepnomore .residents .content .profile .inner ul li .img img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.sleepnomore .residents .content .profile .inner ul li span {display: block; text-align: center; font-size: 22px; font-family: 'disol_headline'; letter-spacing: -0.025em; color: #fff; padding-top: calc(40/22*1em);}

@media screen and (max-width: 1440px) {
    .sleepnomore .residents {padding-top: 180px;}
    .sleepnomore .residents .content {margin-top: 55px; margin-bottom: 90px;}
    .sleepnomore .residents .content .profile .inner {padding-top: 45px;}
    .sleepnomore .residents .content .profile .inner ul {gap: 0 30px;}
    .sleepnomore .residents .content .profile .inner ul li {width: calc(100% / 5 - (30px * 4 / 5)); margin-bottom: 60px;}
    .sleepnomore .residents .content .profile .inner ul li span {font-size: 20px; padding-top: calc(35/20*1em);}
}

@media screen and (max-width: 1280px) {
    .sleepnomore .residents {padding-top: 160px;}
    .sleepnomore .residents .content {margin-top: 50px; margin-bottom: 80px;}
    .sleepnomore .residents .content .profile::before {border-width: 18px 0 18px 0;}
    .sleepnomore .residents .content .profile .inner {padding-top: 40px;}
    .sleepnomore .residents .content .profile .inner ul {gap: 0 25px;}
    .sleepnomore .residents .content .profile .inner ul li {width: calc(100% / 5 - (25px * 4 / 5)); margin-bottom: 50px;}
    .sleepnomore .residents .content .profile .inner ul li span {font-size: 18px; padding-top: calc(30/18*1em);}
}

@media screen and (max-width: 1024px) {
    .sleepnomore .residents {padding-top: 130px;}
    .sleepnomore .residents .content {margin-top: 45px; margin-bottom: 70px;}
    .sleepnomore .residents .content .profile::before {border-width: 15px 0 15px 0;}
    .sleepnomore .residents .content .profile .inner {padding-top: 35px;}
    .sleepnomore .residents .content .profile .inner ul {gap: 0 20px;}
    .sleepnomore .residents .content .profile .inner ul li {width: calc(100% / 5 - (20px * 4 / 5)); margin-bottom: 40px;}
    .sleepnomore .residents .content .profile .inner ul li span {font-size: 17px; padding-top: calc(25/17*1em);}
}

@media screen and (max-width: 820px) {
    .sleepnomore .residents {padding-top: 120px;}
    .sleepnomore .residents .content {margin-top: 40px; margin-bottom: 60px;}
    .sleepnomore .residents .content .canvas {height: 100%;}
    .sleepnomore .residents .content .canvas::after {display: none;}
    .sleepnomore .residents .content .profile::before {border-width: 12px 0 12px 0;}
    .sleepnomore .residents .content .profile:after {padding-top: calc(1500/1720*100%);}
    .sleepnomore .residents .content .profile .inner {padding-top: 30px;}
    .sleepnomore .residents .content .profile .inner ul {gap: 0 15px;}
    .sleepnomore .residents .content .profile .inner ul li {width: calc(100% / 5 - (15px * 4 / 5)); margin-bottom: 35px;}
    .sleepnomore .residents .content .profile .inner ul li span {font-size: 14px; line-height: 1.4; padding-top: calc(20/14*1em);}
}

@media screen and (max-width: 500px) {
    .sleepnomore .residents {padding-top: 100px;}
    .sleepnomore .residents .content {margin-top: 35px; margin-bottom: 50px;}
    .sleepnomore .residents .content .canvas {width: 100%;}
    .sleepnomore .residents .content .profile::before {border-width: 10px 0 10px 0;}
    .sleepnomore .residents .content .profile:after {padding-top: calc(3000/1720*100%);}
    .sleepnomore .residents .content .profile .inner {padding-top: 25px;}
    .sleepnomore .residents .content .profile .inner ul {gap: 0 10px;}
    .sleepnomore .residents .content .profile .inner ul li {width: calc(100% / 2 - (10px * 1 / 2)); margin-bottom: 30px;}
    .sleepnomore .residents .content .profile .inner ul li span {font-size: 16px; padding-top: calc(15/15*1em);}
}

@media screen and (max-width: 360px) {
    .sleepnomore .residents {padding-top: 80px;}
    .sleepnomore .residents .content {margin-top: 30px; margin-bottom: 40px;}
    .sleepnomore .residents .content .profile::before {border-width: 8px 0 8px 0;}
    .sleepnomore .residents .content .profile .inner {padding-top: 20px;}
    .sleepnomore .residents .content .profile .inner ul {gap: 0 8px;}
    .sleepnomore .residents .content .profile .inner ul li {width: calc(100% / 2 - (8px * 1 / 2)); margin-bottom: 25px;}
    .sleepnomore .residents .content .profile .inner ul li span {font-size: 14px; padding-top: calc(12/14*1em);}
}


.popup_booking {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, .5); z-index: 9999;}
.popup_booking .popup_booking_wrap {transition: all .6s ease; display: flex; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.2); opacity: 0; width: calc(1310/1920*100vw); height: calc(870/1080*100vh); border-radius: 19px; border: 1px solid #fff; background: #000; padding: 30px 55px; box-sizing: border-box;  }
.popup_booking .popup_booking_wrap.active {transform: translate(-50%, -50%) scale(1); opacity: 1;}
.popup_booking .popup_booking_wrap .toplnr {display: flex; align-items: flex-start; position: relative; padding-bottom: calc(25/26*1em); font-size: 26px; border-bottom: 1px solid #fff;}
.popup_booking .popup_booking_wrap .toplnr .date {text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; font-size: inherit; font-weight: 500; letter-spacing: -0.025em; color: #fff;}
.popup_booking .popup_booking_wrap .toplnr i {transition: all .3s ease; cursor: pointer; display: flex; align-items: flex-end; font-size: 22px; line-height: calc(26/22*1em); color: #fff; position: absolute; right: 0; top: 0%;}
.popup_booking .mCustomScrollbar {width: 100%; flex-grow: 1; overflow-y: auto; min-height: 0px;}
.popup_booking .mCustomScrollbar .mCustomScrollBox .mCSB_container {margin-right: 15px;}
.popup_booking .mCustomScrollbar .mCustomScrollBox .mCSB_dragger .mCSB_dragger_bar {opacity: 0.3;}
.popup_booking .mCustomScrollbar .mCustomScrollBox .mCSB_dragger:hover .mCSB_dragger_bar {opacity: 1;background: #f6ac3c;}
.popup_booking .mCustomScrollbar .mCustomScrollBox .mCSB_dragger_onDrag .mCSB_dragger_bar {opacity: 1; background: #7c7c7c;}
.popup_booking .mCustomScrollbar .mCSB_scrollTools {top: 50%; bottom: auto; right: 0px; transform: translateY(-50%); width: 3px; height: 90%; background: #333;}
.popup_booking .mCustomScrollbar .mCSB_scrollTools .mCSB_draggerRail {background: transparent;}

.popup_booking .content_ .item {width: 100%; height: calc(172/18*1em); font-size: 18px; display: flex; align-items: center;
    /* 추가 */
    padding: 10px 0;
}
.popup_booking .content_ .item.yellow {background: #f6ac3c28;}
.popup_booking .content_ .item + .item {border-top: 1px solid #333;}
.popup_booking .content_ .item .title {width: calc(280/22*1em); flex-shrink: 0; text-align: center; font-size: 22px; font-weight: bold; letter-spacing: -0.02em; color: #fff;}
.popup_booking .content_ .item .txt {word-break: keep-all; flex-grow: 1; font-size: inherit; letter-spacing: -0.025em; color: #fff; padding: 0 calc(20/18*1em); line-height: calc(30/18*1em);}
.popup_booking .content_ .item .price {width: calc(160/22*1em); flex-shrink: 0; text-align: center; font-size: 22px; font-weight: bold; letter-spacing: -0.025em; color: #fff;}
.popup_booking .content_ .count {position: relative; width: calc(150/22*1em); flex-shrink: 0; text-align: center; font-size: 22px; letter-spacing: -0.025em; color: #fff;}
.popup_booking .content_ .count .gift-order-count {display: flex; align-items: center; justify-content: center;}
.popup_booking .content_ .count .gift-order-count button {transition: all .3s ease; display: flex; align-items: center; justify-content: center; font-size: calc(24/22*1em); color: #fff; letter-spacing: -0.02em; background: transparent; border: none; outline: none; cursor: pointer;}
.popup_booking .content_ .count .gift-order-count input {width: calc(50/22*1em); text-align: center; font-size: inherit; color: #fff; letter-spacing: -0.025em; background: transparent; border: 1px solid rgba(255, 255, 255, .2); outline: none; cursor: pointer;}
.popup_booking .content_ .count span {position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 100%; color: #f6ac3c; font-size: 20px; font-weight: bold; letter-spacing: -0.025em; padding-top: calc(15/20*1em);}
.popup_booking .content_ .count .img {width: 100%;}

.popup_booking .btn-wrap {display: flex; align-items: center; justify-content: flex-end; padding-top: calc(20/18*1em); font-size: 18px; }
.popup_booking .btn-wrap .btn-total {display: inline-flex; align-items: flex-end; font-size: inherit; font-weight: bold; letter-spacing: -0.025em; color: #fff; padding-right: calc(60/18*1em);}
.popup_booking .btn-wrap .btn-total b {padding-left: calc(15/28*1em); font-size: 28px; font-weight: 600; color: #f6ac3c;}
.popup_booking .btn-wrap .btn-booking {transition: all .3s ease; width: calc(150/20*1em); height: calc(50/20*1em); background: #f6ac3c; border-radius: calc(10/20*1em); border: 2px solid #f6ac3c; outline: none; cursor: pointer; font-size: 20px; font-weight: bold; letter-spacing: -0.025em; color: #000;}

@media (min-width: 821px) {
    .popup_booking .popup_booking_wrap .toplnr i:hover {color: #f6ac3c;}
    .popup_booking .content_ .count .gift-order-count button:hover {color: #f6ac3c;}
    .popup_booking .btn-wrap .btn-booking:hover {background: #000; color: #f6ac3c;}
}

@media screen and (max-width: 1440px) {
    .popup_booking .popup_booking_wrap {width: 90%; height: 80vh; padding: 25px 45px;}
    .popup_booking .popup_booking_wrap .toplnr {font-size: 24px;}
    .popup_booking .popup_booking_wrap .toplnr i {font-size: 20px;}
    .popup_booking .content_ .item {font-size: 17px; height: calc(160/17*1em);}
    .popup_booking .content_ .item .title {font-size: 20px;}
    .popup_booking .content_ .item .price {font-size: 20px;}
    .popup_booking .content_ .count {font-size: 20px;}
    .popup_booking .content_ .count span {font-size: 18px;}
    .popup_booking .btn-wrap {font-size: 17px;}
    .popup_booking .btn-wrap .btn-total b {font-size: 26px;}
    .popup_booking .btn-wrap .btn-booking {font-size: 18px;}
}

@media screen and (max-width: 1280px) {
    .popup_booking .popup_booking_wrap {padding: 20px 40px;}
    .popup_booking .popup_booking_wrap .toplnr {font-size: 22px;}
    .popup_booking .popup_booking_wrap .toplnr i {font-size: 18px;}
    .popup_booking .content_ .item {font-size: clamp(15px, 17/1280*100vw, 17px); height: calc(150/16*1em);}
    .popup_booking .content_ .item .title {font-size: clamp(15px, 17/1280*100vw, 17px);}
    .popup_booking .content_ .item .price {font-size: clamp(15px, 17/1280*100vw, 17px);}
    .popup_booking .content_ .count {font-size: clamp(15px, 17/1280*100vw, 17px);}
    .popup_booking .content_ .count span {font-size: 16px;}
    .popup_booking .btn-wrap {font-size: 16px;}
    .popup_booking .btn-wrap .btn-total b {font-size: 24px;}
    .popup_booking .btn-wrap .btn-booking {font-size: 17px;}
}

@media screen and (max-width: 1024px) {
    .popup_booking .popup_booking_wrap {padding: 18px 35px;}
    .popup_booking .popup_booking_wrap .toplnr {font-size: 20px;}
    .popup_booking .popup_booking_wrap .toplnr i {font-size: 16px;}
    .popup_booking .content_ .item {font-size: clamp(13px, 15/1024*100vw, 15px);; height: calc(140/15*1em);}
    .popup_booking .content_ .item .title {font-size: clamp(13px, 15/1024*100vw, 15px);}
    .popup_booking .content_ .item .price {font-size: clamp(13px, 15/1024*100vw, 15px);}
    .popup_booking .content_ .item .txt br {display: none;}
    .popup_booking .content_ .count {font-size: clamp(13px, 15/1024*100vw, 15px);}
    .popup_booking .content_ .count span {font-size: 14px;}
    .popup_booking .btn-wrap {font-size: 15px;}
    .popup_booking .btn-wrap .btn-total b {font-size: 22px;}
    .popup_booking .btn-wrap .btn-booking {font-size: 16px;}
}

@media screen and (max-width: 820px) {
    .popup_booking .popup_booking_wrap {width: 95%; height: 75vh; padding: 15px 25px;}
    .popup_booking .popup_booking_wrap .toplnr {font-size: 18px; padding-bottom: calc(15/18*1em);}
    .popup_booking .popup_booking_wrap .toplnr i {font-size: 15px;}
    .popup_booking .content_ .item {font-size: 14px; height: auto; flex-direction: column; align-items: flex-start; padding: 30px 10px; box-sizing: border-box;}
    .popup_booking .content_ .item .title {margin-bottom: 10px; text-align: left; font-size: 16px; width: 100%;}
    .popup_booking .content_ .item .txt {word-break: keep-all; padding: 0; margin-bottom: 10px; width: 100%;}
    .popup_booking .content_ .item .price {text-align: left; font-size: 16px; width: 100%;}
    .popup_booking .content_ .count {width: 100%; margin-top: 10px;  text-align: left; font-size: 16px;}
    .popup_booking .content_ .count .gift-order-count {justify-content: flex-end;}
    .popup_booking .content_ .count span {font-size: 13px;}
    .popup_booking .content_ .count:has(.img) {display: flex; justify-content: flex-end;}
    .popup_booking .content_ .count .img {display: inline-block; width: calc(90/500*100vw);}
    .popup_booking .btn-wrap {font-size: 14px;}
    .popup_booking .btn-wrap .btn-total b {font-size: 20px;}
    .popup_booking .btn-wrap .btn-booking {font-size: 15px; width: calc(130/15*1em);}
}

@media screen and (max-width: 500px) {
    .popup_booking .popup_booking_wrap {width: 95%; height: 70vh; padding: 12px 15px;}
    .popup_booking .popup_booking_wrap .toplnr {font-size: 16px; padding-bottom: calc(12/16*1em);}
    .popup_booking .popup_booking_wrap .toplnr i {font-size: 14px;}
    .popup_booking .content_ .item {font-size: 13px; padding: 15px 10px; }
    .popup_booking .content_ .item .title {font-size: 15px; width: 100%;  }
    .popup_booking .content_ .item .price {font-size: 15px; width: 100%; }
    .popup_booking .content_ .count {font-size: 15px; width: 100%; }
    .popup_booking .content_ .count span {font-size: 12px; position: relative; transform: none; left: auto; padding-top: 5px;}
    .popup_booking .btn-wrap {font-size: 13px; flex-direction: column; align-items: flex-start;}
    .popup_booking .btn-wrap .btn-total {padding-right: 0; margin-bottom: 15px;}
    .popup_booking .btn-wrap .btn-total b {font-size: 18px;}
    .popup_booking .btn-wrap .btn-booking {font-size: 14px; width: 100%;}
}

@media screen and (max-width: 360px) {
    .popup_booking .popup_booking_wrap {padding: 10px 12px;}
    .popup_booking .popup_booking_wrap .toplnr {font-size: 15px; padding-bottom: calc(10/15*1em);}
    .popup_booking .popup_booking_wrap .toplnr i {font-size: 13px;}
    .popup_booking .mCustomScrollbar .mCustomScrollBox .mCSB_container {margin-right: 5px;}
    .popup_booking .content_ .item {font-size: 12px; padding: 10px;}
    .popup_booking .content_ .item .title {font-size: 14px; margin-bottom: 8px;}
    .popup_booking .content_ .item .price {font-size: 14px;}
    .popup_booking .content_ .count {font-size: 14px;}
    .popup_booking .content_ .count span {font-size: 11px;}
    .popup_booking .btn-wrap {font-size: 12px;}
    .popup_booking .btn-wrap .btn-total b {font-size: 16px;}
    .popup_booking .btn-wrap .btn-booking {font-size: 13px; height: calc(45/13*1em);}
}




/* booking */
.booking .content {padding-top: 200px; display: flex; align-items: flex-end; justify-content: space-between;}
.booking .content .infoBox {display: flex; flex-direction: column; flex-grow: 1;}
.booking .content .infoBox .infoHeader {display: flex; align-items: flex-end; justify-content: space-between; font-size: 70px; padding-bottom: calc(40/70*1em);}
.booking .content .infoBox .infoHeader h2 {font-size: inherit; font-weight: 600; letter-spacing: -0.025em; color: #fff;}
html.en .booking .content .infoBox .infoHeader h2{font-size: clamp(32px, calc(45 / 1920 * 100vw), 50px); }
.booking .content .infoBox .infoHeader .btn-edit {cursor: pointer; font-size: 16px; font-weight: 400; letter-spacing: -0.02em; color: #fff; border: 1px solid #fff; background: transparent; display: flex; align-items: center; box-sizing: border-box; padding: calc(7/16*1em) calc(18/16*1em); border-radius: calc(7/16*1em);}
.booking .content .infoBox .infoHeader .btn-edit i {padding-left: calc(7/16*1em);}

.booking .content .infoBox .infoBody {display: flex; flex-direction: column;  border: 2px solid #fff; border-width: 2px 0 2px 0;}
.booking .content .infoBox .infoBody .infoItem {font-size: 18px; padding: calc(40/18*1em) 0; border-bottom: 1px solid rgba(255, 255, 255, .2);}
.booking .content .infoBox .infoBody .infoItem dt {font-size: inherit; font-weight: 600; letter-spacing: -0.02em; color: #fff; padding-bottom: calc(25/18*1em);}

.booking .content .infoBox .infoBody .dateBox dd {display: flex; flex-direction: column;}
.booking .content .infoBox .infoBody .dateBox dd .dateItem {display: flex; align-items: flex-start; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: #fff; gap: calc(25/24*1em); line-height: 1.25;}
.booking .content .infoBox .infoBody .dateBox dd .dateItem + .dateItem {margin-top: calc(20/24*1em);}
.booking .content .infoBox .infoBody .dateBox dd .dateItem .date {width: calc(140/24*1em); flex-shrink: 0;}
.booking .content .infoBox .infoBody .dateBox dd .dateItem .count {min-width: calc(45/24*1em); flex-shrink: 0; text-align: center;}
.booking .content .infoBox .infoBody .dateBox dd .dateItem .title {flex-grow: 1;}

.booking .content .infoBox .infoBody .personBox dd .personItem {display: flex; flex-direction: column;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock {font-size: 18px; padding-left: calc(15/18*1em); box-sizing: border-box;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock + .personBlock {margin-top: calc(25/18*1em);}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .title {font-size: inherit; letter-spacing: -0.02em; color: #fff; font-weight: 600; position: relative; padding-bottom: calc(20/18*1em); display: inline-block;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .title::before {content: '•'; color: #f6ac3c; line-height: inherit; position: absolute; right: 100%; top: 0; padding-right: calc(5/18*1em);}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList {display: flex; flex-direction: column;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person {display: flex; align-items: center; justify-content: space-between;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person + .person {margin-top: 10px;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap {display: flex; align-items: center; font-size: 18px;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap span {font-size: inherit; letter-spacing: -0.02em; color: #fff; padding-right: calc(20/18*1em);}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap input {height: calc(52/20*1em); border: 1px solid rgba(255, 255, 255, .2); outline: none; background: transparent; font-size: calc(20/18*1em); border-radius: calc(9/20*1em); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.name input { width: calc(120/20*1em);}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.tel input { width: calc(232/20*1em);}
.booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.email input { width: calc(295/20*1em);}

.booking .content .infoBox .infoBody .btnWrap {font-size: 18px; padding: calc(40/18*1em) 0;}
.booking .content .infoBox .infoBody .btnWrap .btn-secret {transition: .4s; font-size: inherit; background: #fff; border: 1px solid #fff; outline: none; border-radius: calc(7/18*1em); font-weight: bold; letter-spacing: -0.025em; color: #000; padding: calc(12/18*1em) calc(15/18*1em); cursor: pointer;}

@media screen and (min-width: 821px) {
    .booking .content .infoBox .infoBody .btnWrap .btn-secret:hover {background: #f6ac3c; color: #000; border-color: #f6ac3c;}
}

@media screen and (max-width: 1440px) {
    .booking .content {padding-top: 180px;}
    .booking .content .infoBox .infoHeader {font-size: 65px; padding-bottom: calc(35/65*1em);}
    .booking .content .infoBox .infoHeader .btn-edit {font-size: 15px;}
    .booking .content .infoBox .infoBody .infoItem {font-size: 17px; padding: calc(35/17*1em) 0;}
    .booking .content .infoBox .infoBody .infoItem dt {padding-bottom: calc(22/17*1em);}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem {font-size: 22px; gap: calc(22/22*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap {font-size: inherit;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock {font-size: 17px;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.name input { width: calc(100/20*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.tel input { width: calc(200/20*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.email input { width: calc(230/20*1em);}
    .booking .content .infoBox .infoBody .btnWrap {font-size: 17px; padding: calc(35/17*1em) 0;}
}

@media screen and (max-width: 1280px) {
    .booking .content {padding-top: 160px;}
    .booking .content .infoBox .infoHeader {font-size: 50px; padding-bottom: calc(30/50*1em);}
    .booking .content .infoBox .infoHeader .btn-edit {font-size: 14px;}
    .booking .content .infoBox .infoBody .infoItem {font-size: 16px; padding: calc(30/16*1em) 0;}
    .booking .content .infoBox .infoBody .infoItem dt {padding-bottom: calc(20/16*1em);}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem {font-size: 20px; gap: calc(20/20*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock {font-size: 16px;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person {flex-direction: column; align-items: flex-start; gap: 5px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .2);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock:last-child .personList .person {border-bottom: none;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap {width: 100%;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap span {width: calc(50/18*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.name input {width: auto; flex-grow: 1;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.tel input {width: auto; flex-grow: 1;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap.email input {width: auto; flex-grow: 1;}
    .booking .content .infoBox .infoBody .btnWrap {font-size: 16px; padding: calc(30/16*1em) 0;}
}

@media screen and (max-width: 1024px) {
    .booking .content {padding-top: 140px;}
    .booking .content .infoBox .infoHeader {font-size: 40px; padding-bottom: calc(25/40*1em);}
    .booking .content .infoBox .infoHeader .btn-edit {font-size: 13px;}
    .booking .content .infoBox .infoBody .infoItem {font-size: 15px; padding: calc(25/15*1em) 0;}
    .booking .content .infoBox .infoBody .infoItem dt {padding-bottom: calc(18/15*1em);}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem {font-size: 18px; gap: calc(18/18*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock {font-size: 15px;}
    .booking .content .infoBox .infoBody .btnWrap {font-size: 15px; padding: calc(25/15*1em) 0;}
}

@media screen and (max-width: 820px) {
    .booking .content {padding-top: 80px; flex-direction: column; align-items: flex-start;}
    .booking .content .infoBox {width: 100%;}
    .booking .content .infoBox .infoHeader {font-size: 40px; padding-bottom: calc(20/40*1em);}
    .booking .content .infoBox .infoHeader .btn-edit {font-size: 12px;}
    .booking .content .infoBox .infoBody .infoItem {font-size: 14px; padding: calc(20/14*1em) 0;}
    .booking .content .infoBox .infoBody .infoItem dt {padding-bottom: calc(15/14*1em);}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem {font-size: 16px; gap: calc(15/16*1em);}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem .date {width: calc(120/16*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock {font-size: 14px;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap span {width: calc(45/14*1em);}
    .booking .content .infoBox .infoBody .btnWrap {font-size: 14px; padding: calc(20/14*1em) 0;}

    html.en .booking .content .infoBox .infoHeader h2{font-size: clamp(22px, calc(32 / 1920 * 100vw), 32px); }
}

@media screen and (max-width: 500px) {
    .booking .content {padding-top: 50px;}
    .booking .content .infoBox .infoHeader {font-size: 32px; padding-bottom: calc(15/32*1em);}
    .booking .content .infoBox .infoHeader .btn-edit {font-size: 11px;}
    .booking .content .infoBox .infoBody .infoItem {font-size: 13px; padding: calc(15/13*1em) 0;}
    .booking .content .infoBox .infoBody .infoItem dt {padding-bottom: calc(12/13*1em);}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem {font-size: 14px; gap: calc(12/14*1em); }
    .booking .content .infoBox .infoBody .dateBox dd .dateItem .date { margin-bottom: 5px;}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem .count {min-width: auto; margin-bottom: 5px;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock {font-size: 13px; padding-left: calc(10/13*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap {font-size: 13px;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap span {width: calc(40/13*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap input {height: calc(40/20*1em);}
    .booking .content .infoBox .infoBody .btnWrap {font-size: 13px; padding: calc(15/13*1em) 0;}
}

@media screen and (max-width: 360px) {
    .booking .content .infoBox .infoHeader {font-size: 28px; padding-bottom: calc(12/28*1em);}
    .booking .content .infoBox .infoHeader .btn-edit {font-size: 10px;}
    .booking .content .infoBox .infoBody .infoItem {font-size: 12px; padding: calc(12/12*1em) 0;}
    .booking .content .infoBox .infoBody .infoItem dt {padding-bottom: calc(10/12*1em);}
    .booking .content .infoBox .infoBody .dateBox dd .dateItem {font-size: 13px; gap: calc(10/13*1em);}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock {font-size: 12px;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap {font-size: 12px;}
    .booking .content .infoBox .infoBody .personBox dd .personItem .personBlock .personList .person .inputWrap span {width: calc(35/12*1em);}
    .booking .content .infoBox .infoBody .btnWrap {font-size: 12px; padding: calc(12/12*1em) 0;}
}



.booking .content .summary {width: 420px; flex-shrink: 0; margin-left: calc(80/1440*100%); font-size: 28px; background: rgba(255, 255, 255, .1); border-radius: calc(19/28*1em); padding: calc(55/28*1em) calc(35/28*1em); box-sizing: border-box; color: #fff;}
.booking .content .summary .summaryHeader h2 {font-size: inherit; font-weight: 600; letter-spacing: -0.025em; padding-bottom: calc(20/28*1em); line-height: 1.25; border-bottom: 2px solid #fff;}
.booking .content .summary .summaryBody dl {font-size: 16px; padding: calc(30/16*1em) 0; display: flex; align-items: flex-start;}
.booking .content .summary .summaryBody dl + dl {border-top: 1px solid rgba(255, 255, 255, .2);}
.booking .content .summary .summaryBody dl.fld-col {flex-direction: column;}
.booking .content .summary .summaryBody dl dt {font-size: inherit; width: calc(110/16*1em); line-height: calc(20/16*1em); letter-spacing: -0.025em; opacity: .6; flex-shrink: 0;}
.booking .content .summary .summaryBody dl.fld-col dt {padding-bottom: calc(20/16*1em);}
.booking .content .summary .summaryBody dl dd {flex-grow: 1; font-weight: 600; font-size: calc(20/16*1em); letter-spacing: -0.025em; }
.booking .content .summary .summaryBody dl dd > * + * {margin-top: calc(20/20*1em);}
.booking .content .summary .summaryBody dl dd .spaceBetween {display: flex; align-items: flex-start; justify-content: space-between;}
.booking .content .summary .summaryBody dl dd .spaceBetween p {padding-right: calc(10/20*1em); box-sizing: border-box;}
.booking .content .summary .summaryBody dl dd .spaceBetween span {flex-shrink: 0;}
.booking .content .summary .summaryBody dl dd .spaceBetween.secret {color: #f6ac3c;}
.booking .content .summary .summaryBody dl dd .spaceBetween.secret small {font-size: 14px; font-weight: 500; letter-spacing: -0.025em; display: inline-block; padding-top: calc(10/14*1em);}

.booking .content .summary .summaryBody dl.totalPrice {align-items: center;}
.booking .content .summary .summaryBody dl.totalPrice dt {line-height: normal;}
.booking .content .summary .summaryBody dl.totalPrice dd p {text-align: right; color: #f6ac3c; font-size: 28px; font-weight: 600; letter-spacing: -0.025em;}

.booking .content .summary .summaryBody .btnWrap {font-size: 28px; padding-top: calc(15/28*1em);}
.booking .content .summary .summaryBody .btnWrap .btn-next {font-family: 'disol_headline'; font-size: inherit; letter-spacing: -0.025em; color: #fff;  width: 100%; padding: calc(10/28*1em); background: #000; border-radius: calc(9/28*1em); border: 1px solid #000; outline: none; cursor: pointer; transition: .4s;}

@media screen and (min-width: 821px) {
    .booking .content .summary .summaryBody .btnWrap .btn-next:hover {background: #f6ac3c; color: #000; border-color: #f6ac3c;}
}

@media screen and (max-width: 1440px) {
    .booking .content .summary {width: 380px; font-size: 26px; padding: calc(50/26*1em) calc(30/26*1em);}
    .booking .content .summary .summaryHeader h2 {padding-bottom: calc(18/26*1em);}
    .booking .content .summary .summaryBody dl {font-size: 15px; padding: calc(25/15*1em) 0;}
    .booking .content .summary .summaryBody dl dt {width: calc(100/15*1em); line-height: calc(18/15*1em);}
    .booking .content .summary .summaryBody dl.fld-col dt {padding-bottom: calc(18/15*1em);}
    .booking .content .summary .summaryBody dl dd {font-size: calc(18/15*1em);}
    .booking .content .summary .summaryBody dl dd > * + * {margin-top: calc(18/18*1em);}
    .booking .content .summary .summaryBody dl dd .spaceBetween.secret small {font-size: 13px; padding-top: calc(8/13*1em);}
    .booking .content .summary .summaryBody dl.totalPrice dd p {font-size: 26px;}
    .booking .content .summary .summaryBody .btnWrap {font-size: 26px; padding-top: calc(12/26*1em);}
}

@media screen and (max-width: 1280px) {
    .booking .content .summary {width: 350px; font-size: 24px; padding: calc(45/24*1em) calc(28/24*1em);}
    .booking .content .summary .summaryHeader h2 {padding-bottom: calc(16/24*1em);}
    .booking .content .summary .summaryBody dl {font-size: 14px; padding: calc(22/14*1em) 0;}
    .booking .content .summary .summaryBody dl dt {width: calc(90/14*1em); line-height: calc(16/14*1em);}
    .booking .content .summary .summaryBody dl.fld-col dt {padding-bottom: calc(16/14*1em);}
    .booking .content .summary .summaryBody dl dd {font-size: calc(17/14*1em);}
    .booking .content .summary .summaryBody dl dd > * + * {margin-top: calc(16/17*1em);}
    .booking .content .summary .summaryBody dl dd .spaceBetween.secret small {font-size: 12px; padding-top: calc(7/12*1em);}
    .booking .content .summary .summaryBody dl.totalPrice dd p {font-size: 24px;}
    .booking .content .summary .summaryBody .btnWrap {font-size: 24px; padding-top: calc(10/24*1em);}
}

@media screen and (max-width: 1024px) {
    .booking .content .summary {width: 320px; font-size: 22px; padding: calc(40/22*1em) calc(25/22*1em);}
    .booking .content .summary .summaryHeader h2 {padding-bottom: calc(14/22*1em);}
    .booking .content .summary .summaryBody dl {font-size: 13px; padding: calc(20/13*1em) 0;}
    .booking .content .summary .summaryBody dl dt {width: calc(80/13*1em); line-height: calc(15/13*1em);}
    .booking .content .summary .summaryBody dl.fld-col dt {padding-bottom: calc(14/13*1em);}
    .booking .content .summary .summaryBody dl dd {font-size: calc(16/13*1em);}
    .booking .content .summary .summaryBody dl dd > * + * {margin-top: calc(14/16*1em);}
    .booking .content .summary .summaryBody dl dd .spaceBetween.secret small {font-size: 11px; padding-top: calc(6/11*1em);}
    .booking .content .summary .summaryBody dl.totalPrice dd p {font-size: 22px;}
    .booking .content .summary .summaryBody .btnWrap {font-size: 22px; padding-top: calc(8/22*1em);}
}

@media screen and (max-width: 820px) {
    .booking .content .summary {width: 100%; margin-left: 0; margin-top: 30px; font-size: 20px; padding: calc(35/20*1em) calc(22/20*1em);}
    .booking .content .summary .summaryHeader h2 {padding-bottom: calc(12/20*1em);}
    .booking .content .summary .summaryBody dl {font-size: 12px; padding: calc(18/12*1em) 0;}
    .booking .content .summary .summaryBody dl dt {width: calc(70/12*1em); line-height: calc(14/12*1em);}
    .booking .content .summary .summaryBody dl.fld-col dt {padding-bottom: calc(12/12*1em);}
    .booking .content .summary .summaryBody dl dd {font-size: calc(15/12*1em);}
    .booking .content .summary .summaryBody dl dd > * + * {margin-top: calc(12/15*1em);}
    .booking .content .summary .summaryBody dl dd .spaceBetween.secret small {font-size: 10px; padding-top: calc(5/10*1em);}
    .booking .content .summary .summaryBody dl.totalPrice dd p {font-size: 20px;}
    .booking .content .summary .summaryBody .btnWrap {font-size: 20px; padding-top: calc(6/20*1em);}
}

@media screen and (max-width: 500px) {
    .booking .content .summary {font-size: 18px; padding: calc(30/18*1em) calc(20/18*1em);}
    .booking .content .summary .summaryHeader h2 {padding-bottom: calc(10/18*1em);}
    .booking .content .summary .summaryBody dl {font-size: 11px; padding: calc(15/11*1em) 0;}
    .booking .content .summary .summaryBody dl dt {width: calc(60/11*1em); line-height: calc(13/11*1em);}
    .booking .content .summary .summaryBody dl.fld-col dt {padding-bottom: calc(10/11*1em);}
    .booking .content .summary .summaryBody dl dd {font-size: calc(14/11*1em);}
    .booking .content .summary .summaryBody dl dd > * + * {margin-top: calc(10/14*1em);}
    .booking .content .summary .summaryBody dl dd .spaceBetween.secret small {font-size: 9px; padding-top: calc(4/9*1em);}
    .booking .content .summary .summaryBody dl.totalPrice dd p {font-size: 18px;}
    .booking .content .summary .summaryBody .btnWrap {font-size: 18px; padding-top: calc(5/18*1em);}
}

@media screen and (max-width: 360px) {
    .booking .content .summary {font-size: 16px; padding: calc(25/16*1em) calc(18/16*1em);}
    .booking .content .summary .summaryHeader h2 {padding-bottom: calc(8/16*1em);}
    .booking .content .summary .summaryBody dl {font-size: 10px; padding: calc(12/10*1em) 0;}
    .booking .content .summary .summaryBody dl dt {width: calc(50/10*1em); line-height: calc(12/10*1em);}
    .booking .content .summary .summaryBody dl.fld-col dt {padding-bottom: calc(8/10*1em);}
    .booking .content .summary .summaryBody dl dd {font-size: calc(13/10*1em);}
    .booking .content .summary .summaryBody dl dd > * + * {margin-top: calc(8/13*1em);}
    .booking .content .summary .summaryBody dl dd .spaceBetween.secret small {font-size: 8px; padding-top: calc(3/8*1em);}
    .booking .content .summary .summaryBody dl.totalPrice dd p {font-size: 16px;}
    .booking .content .summary .summaryBody .btnWrap {font-size: 16px; padding-top: calc(4/16*1em);}
}


/* secretCode popup */
.secret-popup {display: none; position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100vh; background: rgba(0, 0, 0, .5);}
.secret-popup .inner {width: 437px; height: 291px; box-sizing: border-box; padding: calc(60/30*1em) calc(40/30*1em) calc(40/30*1em); border-radius: calc(17/30*1em); font-size: 30px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.secret-popup .inner .btn-close {transition: .4s; position: absolute; right: calc(10/36*1em); top: calc(10/36*1em); font-size: 36px; padding: calc(5/36*1em); cursor: pointer; border: none; outline: none; background: transparent; color: #000;}

.secret-popup .inner b {font-size: inherit; font-weight: 700; letter-spacing: -0.02em; color: #000; text-align: center; display: block; padding-bottom: calc(40/30*1em);}

.secret-popup .inner .selectBox {font-size: 16px; cursor: pointer; position: relative; display: flex; align-items: center; width: 100%; border: 1px solid #000; box-sizing: border-box; border-radius: calc(7/16*1em); padding: calc(13/16*1em) calc(15/16*1em);}
.secret-popup .inner .selectBox input {color: inherit; background: none; cursor: pointer; width: 100%; border: none; padding: 0;}
.secret-popup .inner .selectBox i {display: flex; align-items: center; justify-content: center; font-size: calc(16/18*1em); transition: .4s;}
.secret-popup .inner .selectBox.active i {transform: scaleY(-1);}
.secret-popup .inner .selectBox .optWrap {position: absolute; left: 0; top: 100%; padding-bottom: 10px; width: 100%; text-align: center; cursor: pointer; padding-top: 2px; display: none;}
.secret-popup .inner .selectBox .optWrap ul {max-height: 150px; overflow-y: auto;  width: 100%; background: #dfdede; padding: 5px 0; border-radius: calc(7/16*1em);}
.secret-popup .inner .selectBox .optWrap ul::-webkit-scrollbar {width: 2px;}
.secret-popup .inner .selectBox .optWrap ul::-webkit-scrollbar-thumb {background: #f6ad3c; border-radius: 10px;}
.secret-popup .inner .selectBox .optWrap ul li span {font-size: calc(14/16*1em); padding: calc(11/14*1em) 0; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .4s;}
.secret-popup .inner .selectBox .optWrap ul li:hover span {background: #aaa;}

.secret-popup .inner .btn-set {transition: .4s; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; padding: calc(12/16*1em) calc(25/16*1em); background: #000; color: #fff; border: 1px solid #000; outline: none; cursor: pointer; border-radius: calc(7/16*1em); margin: 0 auto; margin-top: calc(40/16*1em); display: block;}

@media screen and (min-width: 821px) {
    .secret-popup .inner .btn-close:hover {color: #f6ac3c;}
    .secret-popup .inner .btn-set:hover {background: #f6ac3c; color: #000; border-color: #f6ac3c;}
}

@media screen and (max-width: 1440px) {
    .secret-popup .inner {width: 400px; height: 270px; font-size: 28px;}
    .secret-popup .inner .btn-close {font-size: 32px;}
    .secret-popup .inner .selectBox {font-size: 15px;}
    .secret-popup .inner .btn-set {font-size: 15px;}
}

@media screen and (max-width: 1280px) {
    .secret-popup .inner {width: 380px; height: 250px; font-size: 26px;}
    .secret-popup .inner .selectBox .optWrap ul li span {font-size: inherit;}
    .secret-popup .inner .btn-close {font-size: 30px;}
    .secret-popup .inner .selectBox {font-size: 14px;}
    .secret-popup .inner .btn-set {font-size: 14px;}
}

@media screen and (max-width: 1024px) {
    .secret-popup .inner {width: 350px; height: 230px; font-size: 24px;}
    .secret-popup .inner .btn-close {font-size: 28px;}
    .secret-popup .inner .selectBox {font-size: 13px;}
    .secret-popup .inner .btn-set {font-size: 13px;}
}

@media screen and (max-width: 820px) {
    .secret-popup .inner {width: 320px; height: 220px; font-size: 22px; padding: calc(50/22*1em) calc(30/22*1em) calc(30/22*1em);}
    .secret-popup .inner .btn-close {font-size: 26px;}
    .secret-popup .inner b {padding-bottom: calc(30/22*1em);}
    /* .secret-popup .inner .selectBox {font-size: 13px;} */
    .secret-popup .inner .btn-set {margin-top: 30px;}
}

@media screen and (max-width: 500px) {
    .secret-popup .inner {width: 280px; height: 200px; font-size: 20px; padding: calc(40/20*1em) calc(25/20*1em) calc(25/20*1em);}
    .secret-popup .inner .btn-close {font-size: 24px;}
    .secret-popup .inner b {padding-bottom: calc(25/20*1em);}
    /* .secret-popup .inner .selectBox {font-size: 11px;} */
    .secret-popup .inner .btn-set {margin-top: 15px;}
}

@media screen and (max-width: 360px) {
    .secret-popup .inner {width: 250px; height: 180px; font-size: 18px; padding: calc(35/18*1em) calc(20/18*1em) calc(20/18*1em);}
    .secret-popup .inner .btn-close {font-size: 22px;}
    .secret-popup .inner b {padding-bottom: calc(20/18*1em);}
    /* .secret-popup .inner .selectBox {font-size: 10px;} */
    .secret-popup .inner .btn-set {margin-top: 10px;}
}



/* policy-popup */
.policy-popup {color: #fff;  width: 100%; margin-bottom: 150px;}
.policy-popup .inner {display: flex; flex-direction: column; width: 90%; max-width: 1440px; margin: 0 auto; border: 1px solid #fff; box-sizing: border-box; padding: calc(25/34*1em) calc(34/34*1em); border-radius: calc(19/34*1em); font-size: 34px; background: #000;}
.policy-popup .inner .btn-close {transition: .4s; position: absolute; right: calc(10/24*1em); top: calc(10/24*1em); z-index: 1; font-size: 24px; padding: calc(5/24*1em); cursor: pointer; border: none; outline: none; background: transparent; color: #fff;}

.policy-popup .inner h2 {flex-shrink: 0; font-size: inherit; font-weight: bold; letter-spacing: -0.02em; padding-bottom: calc(30/34*1em); border-bottom: 1px solid rgba(255, 255, 255, .2);}
.policy-popup .inner .policyBody {box-sizing: border-box; flex-grow: 1; margin: calc(25/28*1em) 0 40px; font-size: 28px;}
.policy-popup .inner .policyBody::-webkit-scrollbar {width: 5px;}
.policy-popup .inner .policyBody::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, .3); border-radius: 3px;}
.policy-popup .inner .policyBody::-webkit-scrollbar-track {background: rgba(255, 255, 255, .1);}
.policy-popup .inner .policyBody .policyItem + .policyItem {margin-top: 35px;}
.policy-popup .inner .policyBody .policyItem .itemHeader h3 {display: flex; align-items: center; font-size: 28px; font-weight: bold; letter-spacing: -0.025em; padding-top: calc(25/28*1em);}
.policy-popup .inner .policyBody .policyItem .itemHeader h3 span {padding-right: calc(10/28*1em);}
.policy-popup .inner .policyBody .policyItem .itemHeader .small { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; color: #f6ac3c; line-height: calc(28/18*1em);}

.policy-popup .inner .policyBody .policyItem .itemBody {word-break: keep-all; font-size: 16px; padding-top: calc(25/16*1em); letter-spacing: -0.025em; color: #fff; line-height: calc(26/16*1em);}
.policy-popup .inner .policyBody .policyItem .itemBody ul {padding-left: calc(35/16*1em); list-style: disc;}
.policy-popup .inner .policyBody .policyItem .itemBody ul li::marker {color: #f6ac3c;}
.policy-popup .inner .policyBody .policyItem .itemBody ul li + li {margin-top: calc(15/16*1em);}

.policy-popup .inner .policyBody .policyItem .itemBody li table {border: 1px solid #fff;vertical-align: middle;text-align: center;}
.policy-popup .inner .policyBody .policyItem .itemBody li table thead{border: 1px solid #fff;}
.policy-popup .inner .policyBody .policyItem .itemBody li table thead th{width: 50%;border: 1px solid #fff;}
.policy-popup .inner .policyBody .policyItem .itemBody li table tbody td{padding: 5px 10px;text-align: center;border: 1px solid #fff;vertical-align: middle;}


.policy-popup .inner .btnWrap {flex-shrink: 0; display: flex; flex-direction: column; align-items: center;}

.policy-popup .inner .btnWrap .checkWrap {display: flex; align-items: center; cursor: pointer; font-size: 18px;}
.policy-popup .inner .btnWrap .checkWrap input[type="checkbox"] {display: none;}
.policy-popup .inner .btnWrap .checkWrap label {display: flex; align-items: center; cursor: pointer;}
.policy-popup .inner .btnWrap .checkWrap label .checkBox {font-size:inherit; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 4px; margin-right: 10px;}
.policy-popup .inner .btnWrap .checkWrap label .checkBox i {font-size:inherit; color: #fff; transition: .4s;}
.policy-popup .inner .btnWrap .checkWrap label .checkBox i.xi-check-square-o {display: none; color: #f6ac3c;}
.policy-popup .inner .btnWrap .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-check-square-o {display: block;}
.policy-popup .inner .btnWrap .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-checkbox-blank {display: none;}
.policy-popup .inner .btnWrap .checkWrap .lbl {display: flex; align-items: center;}
.policy-popup .inner .btnWrap .checkWrap .lbl p {word-break: keep-all; font-size:inherit; font-weight: 500; font-size: 16px; line-height: 1em; color: #fff; margin-right: 8px;}

.policy-popup .inner .btnWrap .btn-confirm {transition: .4s; cursor: pointer; font-size: 24px; margin-top: calc(20/24*1em); font-weight: bold; letter-spacing: -0.025em; color: #000; background: #f6ac3c; border: 1px solid #f6ac3c; outline: none; border-radius: calc(10/24*1em); width: calc(300/24*1em); height: calc(60/24*1em);}

@media screen and (min-width: 821px) {
    .policy-popup .inner .btn-close:hover {color: #f6ac3c;}
    .policy-popup .inner .btnWrap .btn-confirm:hover {background: #000; color: #f6ac3c; border-color: #f6ac3c;}
}

@media screen and (max-width: 1440px) {
    .policy-popup .inner {width: 1200px; font-size: 30px;}
    .policy-popup .inner .policyBody {font-size: 26px; margin: calc(22/26*1em) 0 35px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader h3 {font-size: 26px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader .small {font-size: 17px;}
    .policy-popup .inner .policyBody .policyItem .itemBody {font-size: 15px;}
    .policy-popup .inner .btnWrap .checkWrap {font-size: 17px;}
    .policy-popup .inner .btnWrap .checkWrap label .checkBox {width: 22px; height: 22px;}
    .policy-popup .inner .btnWrap .checkWrap .lbl p {font-size: 15px;}
    .policy-popup .inner .btnWrap .btn-confirm {font-size: 22px;}
}

@media screen and (max-width: 1280px) {
    .policy-popup .inner {width: 1000px; font-size: 28px;}
    .policy-popup .inner .policyBody {font-size: 24px; margin: calc(20/24*1em) 0 30px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader h3 {font-size: 24px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader .small {font-size: 16px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader .small p + p {margin-top: 5px;}
    .policy-popup .inner .policyBody .policyItem .itemBody {font-size: 14px;}
    .policy-popup .inner .btnWrap .checkWrap {font-size: 16px;}
    .policy-popup .inner .btnWrap .checkWrap label .checkBox {width: 20px; height: 20px;}
    .policy-popup .inner .btnWrap .checkWrap .lbl p {font-size: 14px;}
    .policy-popup .inner .btnWrap .btn-confirm {font-size: 20px;}
}

@media screen and (max-width: 1024px) {
    .policy-popup {margin-bottom: 100px;}
    .policy-popup .inner {width: 800px; font-size: 26px;}
    .policy-popup .inner .btn-close {font-size: 22px;}
    .policy-popup .inner .policyBody {font-size: 22px; margin: calc(18/22*1em) 0 25px;}
    .policy-popup .inner .policyBody .policyItem + .policyItem {margin-top: 30px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader h3 {font-size: 22px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader .small {font-size: 15px;}
    .policy-popup .inner .policyBody .policyItem .itemBody {font-size: 13px;}
    .policy-popup .inner .btnWrap .checkWrap {font-size: 15px;}
    .policy-popup .inner .btnWrap .checkWrap label .checkBox {width: 18px; height: 18px;}
    .policy-popup .inner .btnWrap .checkWrap .lbl p {font-size: 14px;}
    .policy-popup .inner .btnWrap .btn-confirm {font-size: 18px;}
}

@media screen and (max-width: 820px) {
    .policy-popup {margin-bottom: 50px;}
    .policy-popup .inner {width: 90%; font-size: 24px;}
    .policy-popup .inner .btn-close {font-size: 20px;}
    .policy-popup .inner .policyBody {font-size: 20px; margin: calc(15/20*1em) 0 20px;}
    .policy-popup .inner .policyBody .policyItem + .policyItem {margin-top: 25px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader h3 {font-size: 20px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader .small {font-size: 14px;}
    .policy-popup .inner .policyBody .policyItem .itemBody {font-size: 14px;}
    .policy-popup .inner .btnWrap .checkWrap {font-size: 14px;}
    .policy-popup .inner .btnWrap .checkWrap label .checkBox {width: 16px; height: 16px;}
    .policy-popup .inner .btnWrap .checkWrap .lbl p {font-size: 14px;}
    .policy-popup .inner .btnWrap .btn-confirm {font-size: 16px; width: calc(250/16*1em); height: calc(50/16*1em);}
}

@media screen and (max-width: 500px) {
    .policy-popup .inner {width: 95%; font-size: 20px;}
    .policy-popup .inner .btn-close {font-size: 18px;}
    .policy-popup .inner .policyBody {font-size: 18px; margin: calc(12/18*1em) 0 15px;}
    .policy-popup .inner .policyBody .policyItem + .policyItem {margin-top: 20px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader h3 {font-size: 18px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader .small {font-size: 14px;}
    .policy-popup .inner .policyBody .policyItem .itemBody {font-size: 14px;}
    .policy-popup .inner .btnWrap .checkWrap {font-size: 13px;}
    .policy-popup .inner .btnWrap .checkWrap label .checkBox {width: 14px; height: 14px;}
    .policy-popup .inner .btnWrap .checkWrap .lbl p {font-size: 14px;}
    .policy-popup .inner .btnWrap .btn-confirm {font-size: 14px; width: calc(200/14*1em); height: calc(45/14*1em);}
}

@media screen and (max-width: 360px) {
    .policy-popup .inner {width: 95%; font-size: 18px;}
    .policy-popup .inner .btn-close {font-size: 16px;}
    .policy-popup .inner .policyBody {font-size: 16px; margin: calc(10/16*1em) 0 12px;}
    .policy-popup .inner .policyBody .policyItem + .policyItem {margin-top: 15px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader h3 {font-size: 16px;}
    .policy-popup .inner .policyBody .policyItem .itemHeader .small {font-size: 14px;}
    .policy-popup .inner .policyBody .policyItem .itemBody {font-size: 14px;}
    .policy-popup .inner .btnWrap .checkWrap {font-size: 12px;}
    .policy-popup .inner .btnWrap .checkWrap label .checkBox {width: 12px; height: 12px;}
    .policy-popup .inner .btnWrap .checkWrap .lbl p {font-size: calc(14/360*100vw);}
    .policy-popup .inner .btnWrap .btn-confirm {font-size: 12px; width: calc(180/12*1em); height: calc(40/12*1em);}
}








/* creative team */
.creative_team{font-family: 'Roboto';}
.creative_team .title{padding-bottom: 50px; padding-top: 40px;}
.creative_team .wrap{position: relative;}
.creative_team .bg{
	background-image: url(/asset/img/sub/sleepnomore/creative_team_bg.png);
	background-position: center; background-size: contain; background-repeat: no-repeat;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 100%; max-width: 918px; z-index: 0;
	display: none;
}
.creative_team .bg::before {
	content:''; display: block; padding-bottom: calc(723/918*100%);
}
.creative_team .cont{
	position: relative;
	/* box-shadow: 0 0 0 1px dodgerblue; */
	overflow: hidden;

}
.creative_team .cont::before,
.creative_team .cont::after {
	content:''; display: block; position: absolute;
	width: 100%; height: 50px; left: 0; z-index: 1;
}
.creative_team .cont::before{top: 0; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);}
.creative_team .cont::after{bottom: 0; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);}


.creative_team .cont .scroll{
	padding: 100px 0; box-sizing: border-box;
}

.creative_team .cont .top{
	color: #f6ad3c; color: #fff; font-size: 30px; font-weight: 700; line-height: 2;
	text-align: center; margin-bottom: 1em; font-family: 'disol_headline';
}
.creative_team .cont .txtArea{}
.creative_team .cont .txtArea .box{margin-bottom: 16px;}
.creative_team .cont .txtArea .box .row{
	display: flex; align-items: flex-start; justify-content: baseline; gap: 40px;
	font-size: 24px; color: #fff; line-height: calc(36/24); padding: 4px 0;
}
.creative_team .cont .txtArea .box .row > *{width: calc(50% - 20px);}
.creative_team .cont .txtArea .box .row h5{text-align: right;}
.creative_team .cont .txtArea .box .row p{font-weight: 700; text-align: left;}
.creative_team .bottom{color: #fff; text-align: center; padding-top: 50px; padding-bottom: 40px; position: relative;}
.creative_team .bottom .imgBx{}
.creative_team .bottom .imgBx img{max-height: 90px;}
.creative_team .bottom p{
	padding-top: 20px;
	font-weight: 500; letter-spacing: -0.025em; line-height: 1.5;
}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.creative_team .title{padding: 40px 0;}
	.creative_team .cont .top{font-size: 26px;}
	.creative_team .cont .txtArea .box .row{font-size: 20px;}
	.creative_team .bottom{padding: 40px 0;}
	.creative_team .bottom .imgBx img{max-height: 70px;}
}
@media screen and (max-width:820px) {
	.creative_team .cont .top{font-size: 20px;}
	.creative_team .cont .txtArea .box .row{font-size: 18px;}
	.creative_team .bottom p{font-weight: 300; font-size: 12px; max-width: 320px; margin: 0 auto;}
	.creative_team .bottom p br{display: none;}
	.creative_team .bottom .imgBx img{max-height: 60px;}
}
@media screen and (max-width:500px) {
	.creative_team .cont .top{font-size: 18px;}
	.creative_team .cont .scroll{padding: 20px 0;}
	.creative_team .cont .txtArea .box .row{font-size: 13px;}
	.creative_team .bottom .imgBx img{max-height: 50px;}
	.creative_team .bottom p{max-width: 280px;}
}
@media screen and (max-width:320px) {}