body {background-color: #000;}
.intro {height: 100vh; position: relative; overflow: hidden; transition: all .4s ease-in-out;}
.intro.teaser {height: auto;}
.intro.end {opacity: 0;}
.intro .txt {pointer-events: none; opacity: 1; position: relative; z-index: 3; font-size: 130px;  padding-top: calc(100/130*1em); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;}
.intro.teaser .txt { position: absolute; left: 0; top: 0; width: 100%; height: auto;}
.intro .txt .logo {width: 80%; max-width: calc(237/130*1em);}
.intro .txt .logo img {width: 100%; height: 100%; object-fit: cover; opacity: 0;  transform: translateY(40px);}
.intro .txt .logo svg {width: 100%; height: 100%; object-fit: cover; opacity: 0;  transform: translateY(40px);}
.intro .txt .vs_txt {width: 100%; height: 100%; padding-top: calc(30/130*1em);}
.intro .txt .vs_txt p {opacity: 0; transform: translateY(40px); font-family: 'disol_headline';  color: #fff; text-align: center; line-height: 1em;}
@media screen and (max-width: 1440px){
    .intro .txt {font-size: clamp(90px, 100/1440*100vw, 100px);}
}
@media screen and (max-width: 1280px){
    .intro .txt {font-size: clamp(80px, 90/1280*100vw, 90px);}
}
@media screen and (max-width: 1024px){
    .intro .txt {font-size: clamp(70px, 80/1024*100vw, 80px);}
}
@media screen and (max-width: 820px){
    .intro .txt {font-size: clamp(59px, 70/820*100vw, 70px);}
}
@media screen and (max-width: 500px){
    .intro .txt {font-size: clamp(34px, 59/480*100vw, 59px); padding-top: calc(160/59*1em);}
    .intro .txt .logo {max-width: calc(193/59*1em);}
    .intro .txt .vs_txt p {line-height: calc(70/59*1em);}
}

.intro .intro-bg {pointer-events: none; opacity: 1; padding-top: calc(1100/1920*100%); position: absolute; top: 0; left: 0; width: 100%; z-index: 2;}
.intro.teaser .intro-bg {position: relative;}
/* .intro .intro-bg::after {content: ''; display: block; padding-top: calc(1625/1920*100%);} */
/* .intro.teaser .intro-bg::after {display: none;} */
.intro .intro-bg img {width: 100%; position: absolute; left: 0; bottom: 0;}
/* .intro.teaser .intro-bg img {bottom: 0; top: auto;} */
/* .intro.teaser .intro-bg img:first-child {position: relative;} */
.intro .intro-bg img.intro-size {opacity: .5;}
.intro .intro-bg img.intro-bg-hotel_thunderBg {opacity: 0 !important; z-index: 1; mix-blend-mode: overlay;}
.intro .intro-bg img.intro-bg-hotel_thunder {opacity: 0;}
.intro .intro-bg img.intro-bg-hotel_light {filter: brightness(3); }

.intro .intro-bg .fogWrap {width: 100%; position: absolute; left: 0; bottom: 0; z-index: 1; display: flex;}
.intro .intro-bg .fogWrap img {width: auto; position: static;}
@keyframes fog {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}
}
.intro .intro-bg .fogWrap {animation: fog 60s infinite linear; opacity: .8;}

@media screen and (max-width: 820px){
    .intro .intro-bg {padding-top: 0;}
    .intro .intro-bg img.intro-first {position: relative;}
    .intro .intro-bg img.intro-bg-hotel_thunder {width: 900px; max-width: none;}
    .intro .intro-bg img.intro-bg-hotel_thunder.thunder_left {left: 0; top: 0; bottom: auto;}
    .intro .intro-bg img.intro-bg-hotel_thunder.thunder_right {right: 0; left: auto; top: 0; bottom: auto;}
    .intro.teaser .intro-bg {bottom: 0;}
    .intro .intro-bg img.intro-size {width: 1400px; max-width: none; left: 55%; transform: translateX(-50%); top: 0;}
}
@media screen and (max-width: 360px) {
    .intro .intro-bg img.intro-bg-hotel_thunder {width: 600px;}
    .intro .intro-bg img.intro-size {width: 1000px;}
}

.intro .vid {pointer-events: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; overflow: hidden; opacity: .3; mix-blend-mode: difference;}
.intro .vid video {width: 100%;}
.intro .vid video::-webkit-media-controls {
    display:none !important;
}
.intro.teaser .vid video {width: 100%; height: 100%; object-fit: cover;}
@media screen and (max-width: 820px) {
    .intro .vid {height: 100%; width: auto; mix-blend-mode: screen;}
    .intro .vid video {height: 100%; width: auto;}
}

.intro .inside {pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.intro .inside .inside-bg {width: 100%; height: 100%; position: relative;}
.intro .inside .inside-bg:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 85%), linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgb(0, 0, 0) 100%); z-index: 1;}
.intro .inside .inside-bg img {transform: translateY(-40px) scale(1.1); width: 100%; height: 100%; object-fit: cover;}
.intro .lang {opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; display: flex; justify-content: center; align-items: center; gap: calc(250/48*1em); font-size: 48px;}
.intro .lang .bell {width: 410px; position: relative;}
.intro .lang .bell > div {transition: all .4s ease-in-out;}
.intro .lang .bell .default {width: 100%; opacity: 1; position: relative; z-index: 1;}
.intro .lang .bell .on {width: 100%; position: absolute; left: 0; top: 0; opacity: 0;}
.intro .lang .bell.on .on {opacity: 1;}
.intro .lang .bell.on .default {opacity: 0;}
@media screen and (max-width: 820px) {
    .intro .lang {flex-direction: column; gap: calc(80/48*1em);}
    .intro .lang .bell {order: 3; width: calc(250/480*100vw); margin-top: 40px;}
}
@media screen and (max-width: 360px) {
    .intro .lang {font-size: 40px;}
}
.circleBtn {display: inline-block; padding: calc(10/48*1em); box-sizing: border-box; cursor: pointer; transition: all 0.3s; color: #fff; font-size: inherit; letter-spacing: -0.025em; font-family: 'disol_roman'; position: relative;}
.circleBtn span {position: relative; z-index: 1;}
.circleBtn.active,
.circleBtn:hover {color: #f6ad3c;}
.circleBtn .circleWrap {pointer-events: none; position: absolute; left: 50%; top: 50%; width: calc(314/48*1em); height: calc(314/48*1em); transform: translate(-50%, -50%);}
.circleBtn .circleWrap .circle { position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; transition: transform .6s ease-in-out, opacity .4s ease-in-out; opacity: 0;}
.circleBtn .circleWrap .circle:nth-child(1) {transform: translate(-50%, -50%) rotateX(120deg) rotateY(120deg);}
.circleBtn .circleWrap .circle:nth-child(2) {transform: translate(-50%, -50%) rotateX(360deg) rotateY(180deg);}
.circleBtn .circleWrap .circle:nth-child(3) {transform: translate(-50%, -50%) rotateX(-120deg) rotateY(-120deg);}
.circleBtn.active .circleWrap .circle,
.circleBtn:hover .circleWrap .circle { opacity: .15;}
.circleBtn.active .circleWrap .circle:nth-child(1),
.circleBtn:hover .circleWrap .circle:nth-child(1) {transform: translate(-50%, -50%) rotateX(70deg) rotateY(10deg);}
.circleBtn.active .circleWrap .circle:nth-child(2),
.circleBtn:hover .circleWrap .circle:nth-child(2) {transform: translate(-50%, -50%) rotateX(70deg);}
.circleBtn.active .circleWrap .circle:nth-child(3),
.circleBtn:hover .circleWrap .circle:nth-child(3) {transform: translate(-50%, -50%) rotateX(70deg) rotateY(-10deg);}
@media screen and (max-width: 820px) {

}

.rectBtn {position: relative; margin: 0 auto;  margin-top: calc(50/20*1em); display: flex; align-items: center; justify-content: center; width: calc(300/20*1em); height: calc(70/20*1em); box-sizing: border-box; cursor: pointer; transition: all 0.3s; color: #fff; border: 1px solid #fff; border-radius: calc(10/20*1em); font-size: 20px; letter-spacing: -0.025em; font-family: 'disol_ragular'; font-weight: 700; position: relative; overflow: hidden;}
.rectBtn span {position: relative; z-index: 1;}
.rectBtn .circle {position: absolute; left: 50%; top: 50%; width: 105%; transform: translate(-150%, -50%); transition: .6s; background: #f6ad3c; border-radius: 50%;}
.rectBtn .circle::after {content: ''; display: block; padding-top: 100%;}
.rectBtn:hover {color: #000; border-color: #f6ad3c;}
.rectBtn:hover .circle {transform: translate(-50%, -50%);}
@media screen and (max-width: 820px) {
    .rectBtn {font-size: 16px;}
}

.header {opacity: 0; visibility: hidden;}

.scrolldown {font-size: 14px; display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: calc(20/14*1em) 0; z-index: 100;}
.scrolldown span {padding-bottom: calc(5/14*1em); color: #fff; font-size: inherit; letter-spacing: -0.025em; opacity: .8;}
.scrolldown .arr {display: flex; flex-direction: column;}
.scrolldown .arr i {font-size: inherit; color: #fff; opacity: 0.2;}
.scrolldown .arr i:not(:nth-child(1)) {margin-top: calc(-2/14*1em);}
@keyframes scroll {
    0% {opacity: 0.2;}
    50% {opacity: 1;}
    100% {opacity: 0.2;}
}
.scrolldown .arr i:nth-child(1) {animation: scroll 1s infinite;}
.scrolldown .arr i:nth-child(2) {animation: scroll 1s infinite 0.33s;}
.scrolldown .arr i:nth-child(3) {animation: scroll 1s infinite 0.66s;}

.main {position: relative; overflow: hidden;}
.main .secWrap { width: 100%; height: 100vh; overflow: hidden; z-index: 1; position: absolute; left: 0; top: 0;}
.main .secTitle {text-align: center; font-size: 120px; font-family: 'disol_headline'; color: #fff; letter-spacing: -0.025em; padding-bottom: calc(80/120*1em);}
@media screen and (max-width: 1440px) {
    .main .secTitle {font-size: clamp(100px, 120/1440*100vw, 120px);}
}
@media screen and (max-width: 1280px) {
    .main .secTitle {font-size: clamp(80px, 100/1280*100vw, 100px);}
}
@media screen and (max-width: 1024px) {
    .main .secTitle {font-size: clamp(60px, 80/1024*100vw, 80px);}
}
@media screen and (max-width: 500px) {
    .main .secTitle {font-size: clamp(50px, 60/480*100vw, 60px);}
}

.main .s1 {z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; }
.main .s1 .s1-bg {width: auto; min-width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main .s1 .s1-bg img {width: 100%; height: 100%; max-width: none; object-fit: cover;}
.main .s1 .s1-bg img.pc_img {display: block;}
.main .s1 .s1-bg img.m_img {display: none;}
.main .s1 .s1-content {width: 100%; height: 100%; position: relative; z-index: 1; display: flex; align-items: center;}
.main .s1 .s1-content .txt {width: 100%; font-size: 200px; display: flex; justify-content: center; align-items: center;}
.main .s1 .s1-content .txt > p {font-size: inherit; color: #fff; font-family: 'disol_headline'; letter-spacing: -0.025em; display: flex; align-items: center;}
.main .s1 .s1-content .txt > p b {color: #fff;}
.main .s1 .s1-content .txt > p span {display: block; overflow: hidden; color: transparent; -webkit-text-stroke: 1px #fff;}
.main .s1 .s1-content .txt .top {text-align: right; justify-content: flex-end; transform: translateY(calc(-100 / 200*1em));}
.main .s1 .s1-content .txt .bottom { justify-content: flex-end; transform: translateY(calc(100 / 200*1em));}
@media screen and (max-width: 1440px) {
    .main .s1 .s1-content .txt {font-size: 160px;}
}
@media screen and (max-width: 1280px) {
    .main .s1 .s1-content .txt {font-size: 125px;}
}
@media screen and (max-width: 1024px) {
    .main .s1 .s1-content .txt {font-size: 90px;}
}
@media screen and (max-width: 820px) {
    .main .s1 .s1-content .txt {font-size: clamp(50px, 90/500*100vw, 130px);}
    .main .s1 .s1-content .txt > p span {overflow: visible;}
    .main .s1 .s1-content .txt > p.bottom span {text-align: right; display: flex; justify-content: flex-end;}
}
@media screen and (max-width: 500px) {
    .main .s1 .s1-bg {width: 100%; display: flex; justify-content: center; align-items: center;}
    .main .s1 .s1-bg img.pc_img {display: none;}
    .main .s1 .s1-bg img.m_img {display: block; width: 500px; max-width: none;}
}


.main .s2 {position: relative; z-index: 1; width: 100%; height: 100vh; opacity: 0; overflow: hidden;}
.main .s2 .s2-bg {z-index: 2; width: auto; min-width: 100%; height: 100vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main .s2 .s2-bg img {width: 100vw; height: 100vh; max-width: none; object-fit: cover;}

.main .s2 .key {z-index: 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main .s2 .keyHall {filter: brightness(.5); z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; min-width: 100%; height: 100%;}
.main .s2 .keyHall img {width: 100%; height: 100%; max-width: none; object-fit: cover;}
.main .s2 .keyHall img.pc_img {display: block;}
.main .s2 .keyHall img.m_img {display: none;}
@media screen and (max-width: 1280px) {
    .main .s2 .key {width: calc(250/1280*100vw);}
}
@media screen and (max-width: 820px) {
    .main .s2 .key {width: calc(211/480*100vw); max-width: 230px;}
    .main .s2 .keyHall {width: 100%; height: 100vh;}
}
@media screen and (max-width: 500px) {
    .main .s2 .keyHall {width: calc(180/500*100vw); display: flex; justify-content: center; align-items: center;}
    .main .s2 .keyHall img.pc_img {display: none;}
    .main .s2 .keyHall img.m_img {display: block; width: 500px; max-width: none;}
}

.main .s3 {height: 100vh; position: relative; overflow: hidden; opacity: 0;}
.main .s3 .mov {opacity: 1; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.main .s3 .mov iframe {height: 100vh; min-width: 1920px; min-height: calc(1080/1920*100vw); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main .s3 .mov video {width: 109%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


.main .s4 {padding: 115px 0 170px;}
.main .s4 .calendar { width: 100%; max-width: 1300px; margin: 0 auto; position: relative; display: flex; justify-content: center;}
/* .main .s4 .calendar:after {content: ''; padding-top: calc(798/1183*100%); display: block;} */
/* .main .s4 .bg {width: auto; min-width: 1193px; position: relative; left: 50%; top: 0%; transform: translate(-50%, 0%); display: flex; justify-content: center; align-items: center;}
.main .s4 .bg img {width: 100%; height: 100%; max-width: none; object-fit: cover;} */
.main .s4 .calendar .calendar-inner {position: relative; box-sizing: border-box; padding: 80px 190px; width: 100%; height: 100%; z-index: 1;}
.main .s4 .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;}
.main .s4 .calendar .calendar-inner .calrndar-arrBtn:hover {opacity: 1;}
.main .s4 .calendar .calendar-inner .calrndar-arrBtn.prevBtn {left: calc(80/40*1em);}
.main .s4 .calendar .calendar-inner .calrndar-arrBtn.nextBtn {right: calc(80/40*1em);}

.main .s4 .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;}
.main .s4 .calendar .calendar-inner .calendar-header > h2 {font-size: 1em; font-family: 'disol_roman'; color: #fff; letter-spacing: -0.02em;}
.main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap {display: flex; justify-content: center; align-items: center; gap: calc(20/80*1em); }
.main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap > div {display: flex; align-items: center; gap: calc(10/20*1em); font-size: 20px;}
.main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap > div .dot {width: calc(12/20*1em); height: calc(12/20*1em); border-radius: 50%;}
.main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap > div.available .dot {background: #008710;}
.main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap > div.soldOut .dot {background: #ff0000;}
.main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap > div span {font-size: inherit; font-family: 'disol_headline'; color: #fff; letter-spacing: -0.025em; opacity: .6;}

.main .s4 .calendar .calendar-inner .calendar-body {width: 100%; display: flex; flex-direction: column;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week.head { padding-bottom: calc(15/30*1em); border-bottom: 2px solid #fff;}
.main .s4 .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;}
/* .main .s4 .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day {cursor: pointer; padding: calc(15/30*1em) 0 calc(40/30*1em);} */
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day {cursor: pointer; padding: calc(20/30*1em) 0 calc(50/30*1em); position: relative;}
.main .s4 .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;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day.available:after {background: #008710;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day.soldOut:after {background: #ff0000;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day span {position: relative; display: inline-block;}
.main .s4 .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;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week:not(.head) + .calendar-week:not(.head) {border-top: 1px solid rgba(255, 255, 255, .2);}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: 20px; font-family: 'disol_headline';}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week .day.disabled {color: #7c7c7c; pointer-events: none;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week .day.act {color: #000; font-weight: 700;}
.main .s4 .calendar .calendar-inner .calendar-body .calendar-week .day.act span::before {opacity: 1;}
.main .s4 .calendar .calendar-inner .calendar-footer {width: 100%; display: flex; justify-content: center; align-items: center; padding-top: calc(30/80*1em);}
.main .s4 .calendar .calendar-inner .calendar-footer .circleBtn {font-size: 22px;}
.main .s4 .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%;}
.main .s4 .calendar .calendar-inner .calendar-footer .circleBtn .circleWrap {width: calc(270/22*1em); height: calc(250/22*1em);}
.main .s4 .calendar .calendar-inner .calendar-footer .circleBtn .circleWrap .circle { transition: all .4s ease-in-out; }
.main .s4 .calendar .calendar-inner .calendar-footer .circleBtn.active:hover {color: #000;}
.main .s4 .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) {
    .main .s4 .calendar .calendar-inner .calendar-header {font-size: clamp(75px, 80/1440*100vw, 80px);}
}
@media screen and (max-width: 1280px) {
    .main .s4 .calendar .calendar-inner .calendar-header {font-size: clamp(60px, 75/1280*100vw, 75px);}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(26px, 30/1280*100vw, 30px);}
}
@media screen and (max-width: 1024px) {
    .main .s4 .calendar .calendar-inner .calrndar-arrBtn {font-size: 30px;}
    .main .s4 .calendar .calendar-inner .calendar-header {font-size: clamp(54px, 60/1024*100vw, 60px);}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: clamp(18px, 20/1024*100vw, 20px);}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(24px, 26/1024*100vw, 26px);}
    /* .main .s4 .calendar .bg {min-width: 1100px;} */
}
@media screen and (max-width: 820px) {
    .main .s4 {padding: 120px 0 120px;}
    .main .s4 .calendar .calendar-inner {padding: 80px 50px; max-width: 550px;}
    .main .s4 .calendar .calendar-inner .calrndar-arrBtn.prevBtn {left: calc(0/40*1em);}
    .main .s4 .calendar .calendar-inner .calrndar-arrBtn.nextBtn {right: calc(0/40*1em);}
    .main .s4 .calendar .calendar-inner .calendar-header {padding-bottom: calc(30/54*1em);}
    .main .s4 .calendar .calendar-inner .calendar-footer {padding-top: calc(80/54*1em);}
    .main .s4 .calendar .calendar-inner .calendar-footer .circleBtn {font-size: 20px;}
    .main .s4 .calendar .calendar-inner .calendar-footer .circleBtn span {height: calc(80/24*1em);}
    .main .s4 .calendar .calendar-inner .calendar-footer .circleBtn .circleWrap {width: calc(270/24*1em); height: calc(240/24*1em);}
}
@media screen and (max-width: 500px) {
    .main .s4 {padding: 70px 0 80px;}
    .main .s4 .wrap {width: 95%;}
    /* .main .s4 .calendar .bg {min-width: clamp(1100px, 1400/500*100vw, 1400px);} */
    .main .s4 .calendar .calendar-inner {padding: 80px 30px; max-width: 550px;}
    .main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap > div {font-size: 18px;}
    .main .s4 .calendar .calendar-inner .calendar-header {font-size: clamp(40px, 54/480*100vw, 54px);}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: clamp(14px, 20/480*100vw, 20px);}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(20px, 32/480*100vw, 32px);}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week:not(.head) .day {padding: calc(15/32*1em) 0 calc(65/32*1em);}
}
@media screen and (max-width: 360px) {
    /* .main .s4 .calendar .bg {min-width: clamp(900px, 1025/360*100vw, 1025px);} */
    .main .s4 .calendar .calendar-inner .calendar-header .tagViewWrap > div {font-size: 15px;}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week.head .day {font-size: clamp(12px, 14/360*100vw, 14px);}
    .main .s4 .calendar .calendar-inner .calendar-body .calendar-week .day {font-size: clamp(16px, 20/360*100vw, 20px);}
}



/* s4 달력 주석 처리해달라고 하셔서 패딩 추가 주석 해제시 이것도 삭제필요 */
.main .s5{padding-top: 120px;}




.main .s5 {width: 100%; position: relative;}
.main .s5 .cast {margin-bottom: 125px; overflow: hidden;}
.main .s5 .cast .castScroll {display: flex; overflow: visible;}
.main .s5 .cast .castScroll.top {justify-content: flex-start;}
.main .s5 .cast .castScroll.bottom {flex-direction: row-reverse;}
.main .s5 .cast .castScroll .swiper-wrapper { transition-timing-function: linear;}
.main .s5 .cast .castScroll + .castScroll {padding-top: 60px;}
.main .s5 .cast .castScroll .item {width: 230px; position: relative; flex-shrink: 0;}
.main .s5 .cast .castScroll.top .item + .item {margin-left: 20px;}
.main .s5 .cast .castScroll.bottom .item + .item {margin-right: 20px;}
.main .s5 .cast .castScroll .item .itemInner {width: 100%; height: 100%; display: flex; flex-direction: column;}
.main .s5 .cast .castScroll .item .imgBox {width: 100%; position: relative;}
.main .s5 .cast .castScroll .item .imgBox:after {content: ''; padding-top: calc(378/270*100%); display: block;}
.main .s5 .cast .castScroll .item .imgBox img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main .s5 .cast .castScroll .item .txt {width: 100%; text-align: center; padding-top: calc(15/26*1em); font-size: 26px; font-family: 'Trattatello'; color: #fff; letter-spacing: -0.02em;}
.main .s5 .cast_mo {display: none;}

.main .s5 .s5_bottom {width: 100%; display: flex; justify-content: center; align-items: center;}
.main .s5 .circleBtn {font-size: 22px;}
.main .s5 .circleBtn span {width: calc(274/22*1em); height: calc(86/22*1em); display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.main .s5 .circleBtn .circleWrap {width: calc(270/22*1em); height: calc(250/22*1em);}
.main .s5 .circleBtn .circleWrap .circle { transition: all .4s ease-in-out; }
.main .s5 .circleBtn.active:hover {color: #000;}
.main .s5 .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: 1600px) {
    .main .s5 .cast .castScroll .item {width: clamp(200px, 230/1920*100vw, 230px);}
    .main .s5 .cast .castScroll .item .txt {font-size: clamp(20px, 24/1920*100vw, 24px);}
}
@media screen and (max-width: 1440px) {
    .main .s5 .cast .castScroll .item {width: clamp(180px, 200/1600*100vw, 200px);}
    .main .s5 .cast .castScroll .item .txt {font-size: clamp(18px, 20/1600*100vw, 20px);}
}
@media screen and (max-width: 1280px) {
    .main .s5 .cast .castScroll + .castScroll {padding-top: 30px;}
    .main .s5 .cast .castScroll .item .txt {font-size: clamp(18px, 20/1280*100vw, 20px);}
    .main .s5 .cast .castScroll .item {width: clamp(160px, 180/1440*100vw, 180px);}
}
@media screen and (max-width: 1024px) {
    .main .s5 .cast .castScroll + .castScroll {padding-top: 20px;}
    .main .s5 .cast .castScroll .item .txt {font-size: clamp(16px, 18/1024*100vw, 18px);}
    .main .s5 .cast .castScroll .item {width: clamp(140px, 160/1024*100vw, 160px);}
}
@media screen and (max-width: 820px) {
    .main .s5 .wrap {display: flex;}
    .main .s5 .cast_pc {display: none;}
    .main .s5 .cast_mo {display: block; margin-bottom: 75px;}
    .main .s5 .cast_mo .swiper {width: 100%;}
    .main .s5 .cast_mo .swiper-wrapper {transition-timing-function: linear;}
    .main .s5 .cast_mo .swiper-slide {width: 270px; max-width: 270px;}
    .main .s5 .cast_mo .imgBox {width: 100%; position: relative;}
    .main .s5 .cast_mo .imgBox:after {content: ''; padding-top: calc(378/270*100%); display: block;}
    .main .s5 .cast_mo .imgBox img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
    .main .s5 .cast_mo .txt {font-size: clamp(16px, 26/480*100vw, 26px); text-align: center; padding-top: calc(15/26*1em); font-family: 'Trattatello'; color: #fff; letter-spacing: -0.02em;}
    .main .s5 .circleBtn {font-size: 24px;}
    .main .s5 .circleBtn span {height: calc(80/24*1em);}
    .main .s5 .circleBtn .circleWrap {width: calc(270/24*1em); height: calc(240/24*1em);}
}

.main .s6 {width: 100%; position: relative; margin-top: 200px; overflow: hidden;}
.main .s6 .maskImg {width: 121px; display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-bottom: 50px; }
.main .s6 .maskImg img {width: 100%;}
.main .s6 .cont {opacity: 0;}
.main .s6 .cont .txt {display: flex; justify-content: center;}
.main .s6 .cont .txt svg {width: 1120px; overflow: visible;}
.main .s6 .cont .cardWrap {pointer-events: none; display: flex; justify-content: center; margin-top: 140px; position: relative;}
.main .s6 .cont .cardWrap_mo {display: none;}
.main .s6 .cont .cardWrap.act {pointer-events: auto;}
.main .s6 .cont .cardWrap .card {cursor: pointer;  border-radius: 14px; width: 257px; position: absolute; top: 0%; flex-shrink: 0; perspective: 1000px;}
.main .s6 .cont .cardWrap .card.act {z-index: 1;}
.main .s6 .cont .cardWrap .card:after {content: ''; padding-top: calc(411/294*100%); display: block;}
.main .s6 .cont .cardWrap .card .cardInner {border-radius: 14px; box-shadow: 0 0 30px #000; z-index: 1; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: transform 0.6s; transform-style: preserve-3d;  transform-style: preserve-3d;}
.main .s6 .cont .cardWrap .card:hover .cardInner {transform: scale(1.15);}
.main .s6 .cont .cardWrap .card.act .cardInner {transform: rotateY(180deg) scale(1.15);}
.main .s6 .cont .cardWrap .card .cardInner > div {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); backface-visibility: hidden;}
.main .s6 .cont .cardWrap .card .cardInner > div > img {width: 100%;}
.main .s6 .cont .cardWrap .card .cardInner > div.cardImg {position: relative; z-index: 1;}
.main .s6 .cont .cardWrap .card .cardInner > div.cardTxt {transform: translate(-50%, -50%) rotateY(180deg);}
.main .s6 .cont .cardWrap .card { transform: translateX(-500px) translateY(90px) rotate(-12deg);}
.main .s6 .cont .cardWrap .card:not(:nth-child(1)) {opacity: 0;}

.main .s6 .cont .cardWrap .card._3 {transform: translateX(-255px) translateY(30px) rotate(-5deg);}
.main .s6 .cont .cardWrap .card._4 {transform: translateX(0px) translateY(0px) rotate(0deg);}
.main .s6 .cont .cardWrap .card._5 {transform: translateX(255px) translateY(30px) rotate(5deg);}

.main .s6 .cont .cardWrap_mo {display: none; height: 0px; max-height: 0px; margin-top: 70px; position: relative; z-index: 1;}
.main .s6 .cont .cardWrap_mo .swiper {overflow: visible; width: 250px; max-width: 250px; margin: 0 auto;}
.main .s6 .cont .cardWrap_mo .swiper-slide {width: 100%; transform-origin: center 250%; filter: brightness(0.5); border-radius: 30px; overflow: visible; }
.main .s6 .cont .cardWrap_mo .swiper-slide .card {  border-radius: 30px; width: 100%; flex-shrink: 0; perspective: 1000px;}
.main .s6 .cont .cardWrap_mo .swiper-slide .card .cardInner {border-radius: 30px; box-shadow: 0 0 30px #000; z-index: 1; width: 100%; height: 100%; position: relative; transition: transform 0.6s; transform-style: preserve-3d;  transform-style: preserve-3d;}
.main .s6 .cont .cardWrap_mo .swiper-slide .card .cardInner > div {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); backface-visibility: hidden;}
.main .s6 .cont .cardWrap_mo .swiper-slide .card .cardInner > div > img {width: 100%;}
.main .s6 .cont .cardWrap_mo .swiper-slide .card .cardInner > div.cardImg {position: relative; left: 0; top: 0; transform: none;}
.main .s6 .cont .cardWrap_mo .swiper-slide .card .cardInner > div.cardTxt {transform: translate(-50%, -50%) rotateY(180deg);}
.main .s6 .cont .cardWrap_mo .swiper-slide.swiper-slide-active .card .cardInner {transform: rotateY(180deg);}
.main .s6 .cont .cardWrap_mo .swiper-slide.swiper-slide-active {filter: brightness(1);}
.main .s6 .cont .cardWrap_mo .swiper-pagination {position: relative; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 35px;}
.main .s6 .cont .cardWrap_mo .swiper-pagination {font-size: 18px; color: #fff; font-family: 'Roboto'; letter-spacing: -0.02em;}
.main .s6 .cont .cardWrap_mo .swiper-pagination span {padding: 0 10px;}

@media screen and (max-width: 1440px) {
    .main .s6 .cont .txt svg {width: 1000px;}
}
@media screen and (max-width: 1280px) {
    .main .s6 .cont .txt svg {width: clamp(800px, 1000/1280*100vw, 1000px);}

    .main .s6 .cont .cardWrap {transform: scale(0.8);}
}
@media screen and (max-width: 1024px) {
    .main .s6 .maskImg {width: clamp(80px, 121/1024*100vw, 121px); margin-bottom: 35px;}
    .main .s6 .cont .txt svg {width: clamp(600px, 800/1024*100vw, 800px);}

    .main .s6 .cont .cardWrap {transform: scale(0.6); margin-top: 70px;  padding-bottom: 100px;}
}
@media screen and (max-width: 820px) {
    .main .s6 .maskImg {width: clamp(60px, 80/480*100vw, 80px); max-width: 480px;}
    .main .s6 .cont .txt svg {width: clamp(300px, 400/480*100vw, 600px);}
    .main .s6 .cont .cardWrap {display: none;}
    .main .s6 .cont .cardWrap_mo {display: block; padding-bottom: 50px;}
}
@media screen and (max-width: 700px) {
    .main .s6 .cont .cardWrap_mo { padding-bottom: 120px;}
}
@media screen and (max-width: 600px) {
    .main .s6 .cont .cardWrap_mo { padding-bottom: 170px;}
}
@media screen and (max-width: 500px) {
    .main .s6 .maskImg {max-width: none; }
    .main .s6 .cont .cardWrap_mo { padding-bottom: 270px;}
}
@media screen and (max-width: 360px) {
    .main .s6 .maskImg { width: clamp(50px, 80/480*100vw, 80px); margin-bottom: 20px;}
    .main .s6 .cont .txt svg {width: clamp(200px, 300/360*100vw, 300px);}
    .main .s6 .cont .cardWrap_mo {margin-top: 30px;}
    /* .main .s6 .cont .cardWrap_mo .swiper {transform: scale(0.8);} */
    .main .s6 .cont .cardWrap_mo .swiper-slide {width: 180px;}
    .main .s6 .cont .cardWrap_mo .swiper-pagination {padding-top: 15px;}
}

.main .s7 {width: 100%; position: relative; padding-bottom: 60px;}
.main .s7.teaser {margin-top: 100px;}
.main .s7 .s7Inner {position: relative; z-index: 1; max-width: 1290px; margin: 0 auto;}
/* .main .s7 .s7Inner:after {content: ''; padding-top: calc(910/1290*100%); display: block;} */
.main .s7 .s7Inner .bg {width: auto; min-width: 1193px; position: relative; left: 50%; top: 0%; transform: translate(-50%, 0%); display: flex; justify-content: center; align-items: center;}
.main .s7 .s7Inner .bg img {width: 100%; height: 100%; max-width: none; object-fit: cover;}
.main .s7 .s7Inner .bg .pc_img {display: block;}
.main .s7 .s7Inner .bg .m_img {display: none;}
.main .s7 .s7Inner .s7Txt { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%;}
.main .s7 .s7Inner .s7Txt .s7Title {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.main .s7 .s7Inner .s7Txt .s7Title .top {font-size: 56px; padding-bottom: calc(25/56*1em);}
.main .s7 .s7Inner .s7Txt .s7Title .top > b {display: block; text-align: center; font-size: inherit; font-family: 'disol_headline'; color: #fff; letter-spacing: -0.025em; text-align: center; line-height: calc(60/56*1em);}
.main .s7 .s7Inner .s7Txt .s7Title .top > b:nth-child(2) {padding-top: 0.1em;}
.main .s7 .s7Inner .s7Txt .s7Title .top > b:nth-child(3) {margin-top: -0.13em;}
.main .s7 .s7Inner .s7Txt .s7Title p {font-size: 20px; color: #fff; letter-spacing: -0.02em; text-align: center;}
.main .s7 .s7Inner .s7Txt .s7Title p br {display: none;}
.main .s7 .s7Inner .s7Txt .form {padding-top: 55px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
/* .main .s7 .s7Inner .s7Txt .form #inquiryform{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;} */
.main .s7 .s7Inner .s7Txt .form .inputWrap {width: 100%; max-width: 400px; padding: 0 0 calc(13/20*1em); text-align: center; border-bottom: 1px solid #818181; outline: none; background: transparent; color: #979797; font-size: 18px; font-family: 'Roboto'; font-weight: 500; letter-spacing: -0.02em;margin: 0 auto;}
.main .s7 .s7Inner .s7Txt .form .inputWrap input {width: 100%; background: transparent; border: none; outline: none; text-align: center; font-size: inherit; color: inherit; font-family: inherit; letter-spacing: inherit; font-weight: inherit;}
.main .s7 .s7Inner .s7Txt .form .inputWrap input::placeholder {transition: .4s;}
.main .s7 .s7Inner .s7Txt .form .inputWrap input:focus::placeholder {color: transparent;}
.main .s7 .s7Inner .s7Txt .form .inputWrap+.inputWrap {margin-top: calc(20/20*1em);}
.main .s7 .s7Inner .s7Txt .form .checkWrap {display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: calc(30/16*1em); font-size: 16px;}
.main .s7 .s7Inner .s7Txt .form .checkWrap input[type="checkbox"] {display: none;}
.main .s7 .s7Inner .s7Txt .form .checkWrap label {cursor: pointer; display: flex; align-items: center;}
.main .s7 .s7Inner .s7Txt .form .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;}
.main .s7 .s7Inner .s7Txt .form .checkWrap label .checkBox i {display: block; font-size: calc(24/16*1em); color: #6B6B6B; transition: .2s;}
.main .s7 .s7Inner .s7Txt .form .checkWrap label .checkBox i.active {display: none;}
.main .s7 .s7Inner .s7Txt .form .checkWrap input[type="checkbox"]:checked + label .checkBox i {color: #f6ad3c;}
.main .s7 .s7Inner .s7Txt .form .checkWrap input[type="checkbox"]:checked + label .checkBox i.default {display: none;}
.main .s7 .s7Inner .s7Txt .form .checkWrap input[type="checkbox"]:checked + label .checkBox i.active {display: block;}
.main .s7 .s7Inner .s7Txt .form .checkWrap .lbl {display: flex; align-items: center;flex-direction: column;}
.main .s7 .s7Inner .s7Txt .form .checkWrap .lbl p {font-size:inherit; font-weight: 500; line-height: 1em; color: #6B6B6B; transition: .2s;text-align: center;}
.main .s7 .s7Inner .s7Txt .form .checkWrap input[type="checkbox"]:checked + label .lbl p {color: #f6ad3c;}
.main .s7 .s7Inner .s7Txt .form .checkWrap input[type="checkbox"]:checked + label .lbl .check_eng {color: #f6ad3c;}
.main .s7 .circleBtn {font-size: 24px;}
.main .s7 .circleBtn span {width: calc(300/22*1em); height: calc(86/22*1em); display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.main .s7 .circleBtn .circleWrap {width: calc(300/22*1em); height: calc(250/22*1em);}
.main .s7 .circleBtn .circleWrap .circle { transition: all .4s ease-in-out; }
.main .s7 .circleBtn.active:hover {color: #000;}
.main .s7 .circleBtn.active:hover .circleWrap .circle {transform: translate(-50%, -50%) rotateX(70deg) rotateY(0deg); opacity: 1; border-color: transparent; background: #f6ad3c;}


/* teaser */

.main.teaser .s7 .s7Inner .s7Txt .form .check_eng {font-size: 10px; color: #6b6b6b;font-weight: 500; letter-spacing: -0.02em;padding-top: 5px;text-align: center;transition: .2s;}

.main.teaser .s7 .s7Inner .s7Txt .form .pricyBtn {text-align: center;padding-top: 40px;cursor: pointer;}
.main.teaser .s7 .s7Inner .s7Txt .form .pricyBtn span:hover{
    color: #f6ad3c;
}
.main.teaser .s7 .s7Inner .s7Txt .form .pricyBtn span{
    font-size: 14px;color: #6b6b6b;font-weight: 500; letter-spacing: -0.02em;
}

@media screen and (max-width: 1280px) {
    .main .s7 .s7Inner .s7Txt .s7Title .top {font-size: clamp(48px, 56/1280*100vw, 56px);}
    .main .s7 .s7Inner .s7Txt .s7Title p {font-size: clamp(18px, 20/1280*100vw, 20px);}
    .main .s7 .s7Inner .s7Txt .form .inputWrap {font-size: clamp(16px, 18/1280*100vw, 18px);}
}
@media screen and (max-width: 1024px) {
    .main .s7 .s7Inner .s7Txt .s7Title .top {font-size: clamp(44px, 48/1024*100vw, 48px);}
    .main .s7 .s7Inner .s7Txt .s7Title p {font-size: clamp(16px, 18/1024*100vw, 18px);}
    .main .s7 .s7Inner .s7Txt .form .inputWrap {font-size: clamp(14px, 16/1024*100vw, 16px);}
}
@media screen and (max-width: 820px) {
    .main .s7 .s7Inner .bg {min-width: 679px;}
    .main .s7 .s7Inner .bg .pc_img {display: none;}
    .main .s7 .s7Inner .bg .m_img {display: block;}
    .main .s7 .circleBtn {font-size: 24px;}
    .main .s7 .circleBtn span {height: calc(80/24*1em);}
    .main .s7 .circleBtn .circleWrap {width: calc(270/24*1em); height: calc(240/24*1em);}
}
@media screen and (max-width: 500px) {
    .main .s7 .s7Inner .s7Txt .s7Title .top {font-size: clamp(22px, 44/480*100vw, 44px); line-height: calc(54/44*1em);}
    .main .s7 .s7Inner .s7Txt .s7Title p {line-height: calc(34/20*1em); font-size: clamp(14px, 20/480*100vw, 20px);}
    .main .s7 .s7Inner .s7Txt .s7Title p br {display: block;}
    .main .s7 .s7Inner .s7Txt .form {padding-top: 70px;}
    .main .s7 .s7Inner .s7Txt .form .inputWrap {font-size: clamp(14px, 18/480*100vw, 18px); padding: 0 0 calc(15/18*1em);}
    .main .s7 .s7Inner .s7Txt .form .checkWrap {margin-top: calc(50/18*1em); font-size: clamp(13px, 18/480*100vw, 18px);}
    .main .s7 .circleBtn {margin-top: calc(70/24*1em);}
}


/* .topBtn {z-index: 100; position: fixed; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; color: #fff; font-family: 'Roboto'; font-weight: 500; letter-spacing: -0.02em; opacity: 0; transition: all .4s ease-in-out;}
.topBtn {opacity: 1;} */

.smoke {z-index: -1; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); min-width: 1920px; opacity: 0.5;}
.smoke:after {content: ''; z-index: 1; position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 15%; display: block; background: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);}
.smoke video {width: 100%;}
@media screen and (min-width: 1921px) {
    .smoke {min-width: 100%;}
}

@media screen and (max-width: 820px) {
    .smoke {min-width: 1280px;}
}


.teaser .bookBtnWrap {width: 100%; display: flex; align-items: center; justify-content: center; padding-top: 100px;}
.teaser .bookBtn { transition: all .3s ease-in-out; font-size: 40px; font-family: 'disol_headline'; font-weight: 500; letter-spacing: -0.02em; color: #fff; padding: calc(15/24*1em) calc(40/24*1em) calc(11/24*1em); box-sizing: border-box; border: 1px solid #fff; border-radius: calc(8/24*1em);}
.teaser .bookBtn:hover {background-color: #fff; color: #000;}
@media screen and (max-width: 820px) {
    .teaser .bookBtnWrap {padding-top: 50px;}
    .teaser .bookBtn {font-size: clamp(24px, 30/820*100vw, 30px);}
}