html{background-color: #F4EFE9; scroll-behavior: smooth;}
p{color: #363636;}
.m-obj{display: none;}
.p-obj{display: block;}
/*header */
#header{z-index: 11111; position: fixed; top: 0; left:0;width: 100%; mix-blend-mode:difference ;}
#header .header-wrap{display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 0 auto; padding: 20px 0 ; box-sizing: border-box;}
#header .header-wrap .menu-btns{display: flex; align-items: center; gap: 20px; margin-right: 60px;}
#header .header-wrap .menu-btns .menu-btns-box{position: relative; width: 40px;cursor: pointer;}
#header .header-wrap .menu-btns .m-reser-btn{display: none;}
#header .header-wrap .menu-btns .m-reser-btn img{max-width: 40px; }
#header .header-wrap .menu-btns .menu-btns-box span{position: absolute; left: 0; width: 40px; height: 2px; background-color:#fff ; }
#header .header-wrap .menu-btns .menu-btns-box span:first-child{top: 0;}
#header .header-wrap .menu-btns .menu-btns-box span:last-child{top: 10px;}
#header .header-wrap .reser-btn img{max-width: 40px;}
.screen{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-image: url('../img/screen-bg.jpg'); z-index:111; opacity: 0; visibility: hidden; transition: 0.3s;}
.screen.active{opacity: 1; visibility: visible;}
.screen .screen-thumbnail{ width: 50%; position: relative;}
.screen .screen-thumbnail img{ opacity: 0; transition: 0.3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);; max-width: 350px;}
.screen .screen-thumbnail div.show img{ opacity: 1;}
.screen .screen-box {display: flex; height: 100%;}
.screen .screen-box .screen-menu{width: 50%; padding-right: 10%;}
.screen .screen-box .screen-menu .menu-list {display: grid; grid-template-columns: repeat(2,1fr); margin-top: 25%; box-sizing: border-box; gap: 50px;}
.screen .screen-box .screen-menu .menu-list li {text-align: center;}
.screen .screen-box .screen-menu .menu-list > li > a{font-size: 30px;font-family: "quiche-sans", sans-serif; font-weight: 500;}
.screen .screen-box .screen-menu .menu-list > li > a + ul{margin-top: 30px; }
.screen .screen-box .screen-menu .menu-list > li > a + ul li a{padding: 10px ; font-size: 18px;}
.screen .screen-box {position: relative; z-index: 11;}
.pc-screen-bg iframe{position: absolute; top: 0; left: 0; height: 1080px !important;}
.menu-btns p{opacity: 0; visibility: hidden;text-align: center; color: #fff; transition: 0.3s;}
.menu-btns-box.active p{ opacity: 1; visibility: visible;}
.menu-btns-box.active span:last-child{display: none;}
@media(min-width:2010px){
.pc-screen-bg iframe{top:0; height: 1440px !important; width: 100%;}
}
@media(max-width:1024px){
#header .header-wrap .logo img{max-width: 70px; width: 100%;}
.pc-screen-bg iframe{display: none;}
#header .header-wrap .menu-btns{margin-right: 0;}
#header .header-wrap .reser-btn{display: none;}
#header .header-wrap .menu-btns .m-reser-btn{display: block;}
#header .header-wrap{padding: 20px;}
#header .header-wrap .menu-btns .menu-btns-box span{top: 23px;}
#header .header-wrap .menu-btns .menu-btns-box span:last-child{top: 2px;}
.m-obj{display: block;}
.p-obj{display: none;}
.screen{ background-position: center;background-size: cover;}
.screen .screen-box{align-items: center;}
.screen .screen-box .screen-menu .menu-list{margin-top: 0;}
.screen .screen-box .screen-menu .menu-list > li > a{font-size: 20px;}
.screen .screen-box .screen-menu .menu-list > li > a + ul li a{padding: 5px 0 ; font-size: 14px;}
.screen .screen-box .screen-menu .menu-list{gap:40px 20px;}
.screen .screen-box .screen-menu{width: 100%; padding-right: 0;}
.screen-thumbnail{display: none;}
}
/*intro*/
.intro .line{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-clip-path: inset(0 100% 0 0); animation: line 2s linear ;animation-fill-mode: forwards; width: 100%;}
.intro .line2{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-clip-path: inset(0 100% 0 0); animation: lineTwo 2s linear ;animation-fill-mode: forwards; width: 100%;}
@keyframes line{
0%{
-webkit-clip-path: inset(0 100% 0 0);
}
100%{
-webkit-clip-path: inset(0 50% 0 0);
}
}
@keyframes lineTwo{
0%{
-webkit-clip-path: inset(0 0 0 100%);
}
100%{
-webkit-clip-path: inset(0 0 0 50%);
}
}
.intro-logo{position: absolute;top: 60%;left: 50%; transform: translate(-50%,-50%);} */
.intro-logo img{max-width: 80px;}
.intro {background-image: url('../img/common/intro-bg.png'); height: 100vh;width: 100vw; z-index: 111111111; background-size: cover; background-repeat: no-repeat;}
/* .intro .img{position: absolute;top: 60%;left: 50%; transform: translate(-50%,-50%);}
.intro .img2{animation-name: imgshow; animation-duration: 1s; animation-fill-mode: forwards; position: fixed; top: 0; left: 0; opacity: 0;} */
@keyframes imgshow{
0%{
opacity: 0;
visibility: hidden;
}
100%{
opacity: 1;
visibility: visible;
}
}
@keyframes introHide{
0%{
opacity: 1;
visibility: visible;
}
100%{
opacity: 0;
visibility: hidden;
}
}
.intro{ animation-name: introHide; /*animation-duration: 2s;*/ animation-fill-mode: forwards; animation-delay: 2.5s; position: fixed; top: 0; left: 0;}
.intro .intro-logo .logo-box{ animation-name: intrologoWidth; animation-duration: 2s; animation-fill-mode: forwards;}
.intro .intro-logo .logo2{animation-name: intrologo1; animation-duration: 2s; animation-fill-mode: forwards; margin-left: -20px;}
.intro .intro-logo .logo3{animation-name: intrologo2; animation-duration: 2s; animation-fill-mode: forwards;margin-bottom: 0;}
.intro .intro-logo .logo4{animation-name: intrologo3; animation-duration: 2s; animation-fill-mode: forwards;margin-left: 10px;}
.intro .intro-logo .typo-logo{animation-name: intrologo4; animation-duration: 2s; animation-fill-mode: forwards; animation-delay: 1.2s; margin-top: 90px; opacity: 0; visibility: hidden; text-align: center;}
@keyframes intrologoWidth{
0%{
margin-left: 0;
}
100%{
margin-left: 30px;
}
}
@keyframes intrologo1{
0%{
margin-bottom: 0;
margin-left: -20px;
}
100%{
margin-left: -70px;
margin-bottom: -70px;
}
}
@keyframes intrologo2{
0%{
margin-bottom: 0;
}
100%{
margin-bottom: -20px;
}
}
@keyframes intrologo3{
0%{
margin-bottom: 0;
margin-left: 10px;
}
100%{
margin-bottom: -40px;
}
}
@keyframes intrologo4{
0%{
opacity: 0; visibility: hidden;
}
100%{
opacity: 1; visibility: visible;
}
}
.pc-line{display: block; width: 100%;}
.m-line{display: none;}
@media(max-width:1024px){
.intro-logo{width: 100%;}
.pc-line{display: none;}
.intro .line{width: 100%;}
.m-line{display: block; width: 100%;}
.intro .intro-logo .logo-box {text-align: center;}
.intro .intro-logo .logo-box > .logo1{width: 55px;}
.intro .intro-logo .logo-box > .logo2{width: 46px;}
.intro .intro-logo .logo-box > .logo3{width: 39px;}
.intro .intro-logo .logo-box > .logo4{width: 39px;}
.intro .intro-logo .typo-logo {text-align: center; margin-top: 60px;}
.intro .intro-logo .typo-logo img{width: 203px; margin: 0 auto;}
.intro-logo{top: 53.5%;}
@keyframes intrologoWidth{
0%{
margin-left: 0;
}
100%{
margin-left: 0;
}
}
@keyframes intrologo1{
0%{
margin-bottom: 0;
margin-left: -20px;
}
100%{
margin-left: -25px;
margin-bottom: -20px;
}
}
@keyframes intrologo2{
0%{
margin-bottom: 0;
}
100%{
margin-bottom: -20px;
}
}
@keyframes intrologo3{
0%{
margin-bottom: 0;
margin-left: 10px;
}
100%{
margin-left: 0px;
margin-bottom: -30px;
}
}
}
.room-slide-view .swiper-button-next, .room-slide-view .swiper-button-prev{display: none;}
/*footer*/
#footer{background-color: #F4EFE9; z-index: 1; position: relative;}
#footer .footer-wrap{ display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 0 auto;}
#footer{margin-top:100px; padding: 40px 20px 80px 20px; box-sizing: border-box;}
#footer .footer-wrap .txt ul li {margin: 10px 0; font-weight: 400;}
#footer .footer-wrap .txt ul li > a{font-weight: 800;}
#footer .footer-wrap .txt .copylight{margin-top: 40px; color: rgba(54,54,54,0.5); font-size: 12px;}
#footer .footer-wrap .txt .copylight > a{margin-top: 5px; text-decoration: underline; text-underline-offset:5px; color:#363636;}
@media(max-width:1024px){
#footer .footer-wrap{flex-direction: column-reverse;}
#footer .footer-wrap .txt ul li{text-align: center;}
#footer .footer-wrap .logo{text-align: center; margin-bottom: 40px;}
#footer .footer-wrap .logo img{width: 100%; max-width: 80%;}
#footer .footer-wrap .txt .copylight{text-align: center;}
}
#prologue .visual-area{padding-top: 150px;}
#prologue .visual-area .thumbnail{text-align: center;}
#prologue .visual-area .thumbnail img{width: 100%; max-width: 1500px; }
#prologue .visual-area .thumbnail iframe {height: 400px !important;}
#main .room-view{max-width: 1500px; margin: 0 auto; padding-bottom: 100px;}
#main .room-view {text-align: center; margin-top: 200px;}
.obj{clip-path:inset(0% 0% 100% 0%); transition: 3s; color: red; font-size: 60px;}
.obj.aos-animate{clip-path:inset(0% 0% 0% 0%)}
@media(max-width:1024px){#prologue .visual-area{padding-top: 50px;}
#prologue .visual-area .thumbnail{padding: 0 10px;position: relative;height: 180px;max-width: 80%;margin: 0 auto;overflow: hidden;}
#prologue .visual-area .thumbnail iframe{height: 150px !important;z-index: 1;width: 100%;overflow: hidden;position: absolute;left: 0;top: 0;transform: scale(2.5);}
#prologue .visual-area .thumbnail img{height: 150px; object-fit: cover;}
}
.mySwiper2 .swiper-slide.swiper-slide h4{clip-path: inset(100% 0 0 0);transform: translateY(5px);transition: 0.8s;font-size: 50px;color: #fff; font-family: "quiche-sans", sans-serif; }
.mySwiper2 .swiper-slide.swiper-slide-active h4{clip-path: inset(0% 0% 0% 0%); transform: translateY(0); }
#main .full-slide {position: relative;}
#main .full-slide .swiper-slide{position: relative;}
#main .full-slide .txt{position: absolute; bottom: 40px; left: 200px; z-index: 1;}
#main .full-slide .txt p strong{font-weight: 700;}
#main .full-slide .swiper-button-next::after,
#main .full-slide .swiper-button-prev::after{content: "";}
#main .full-slide .swiper-pagination{bottom: 70px; font-size: 20px;}
#main .full-slide .swiper-button-prev, #main .full-slide .swiper-button-next{bottom: 15px; top: auto; transition: 0.3s; width: auto;}
#main .full-slide .swiper-button-next{right:46%; bottom:21px; left: auto; }
#main .full-slide .swiper-button-next img{transition: transform 0.3s ease-in-out;transform-origin: 0% 50%;}
#main .full-slide .swiper-button-prev img{transition: transform 0.3s ease-in-out;transform-origin: 100% 50%;}
#main .full-slide .swiper-button-prev:hover img, #main .full-slide .swiper-button-next:hover img{ transform: scaleX(1.2)}
#main .full-slide .swiper-button-prev{left:46%; right: auto;}
@media(max-width:1024px){
#main .full-slide .txt{display: none;}
#main .full-slide{height: 100vh;}
.mySwiper2 .swiper-slide.swiper-slide h4{font-size: 28px; }
#main .room-view{padding-bottom: 30px;}
#main .full-slide .full-swiper, #main .full-slide .full-swiper .swiper-wrapper, #main .full-slide .full-swiper .swiper-wrapper .thumbnail #main .full-slide .swiper-slide .thumbnail img{height: 100%;}
#main .full-slide .swiper-slide .txt{display: none;}
#main .full-slide .swiper-slide {height: 100%;}
#main .full-slide .swiper-slide .thumbnail img{height: 100%; object-fit: cover;}
#main .full-slide .swiper-button-prev{left: 32%;}
#main .full-slide .swiper-button-next{right: 32%;}
}
.scroll-container > div{ position: sticky; top: 0;}
.scroll-container .full-slide{height: 100vh;}
.scroll-container .full-swiper,.scroll-container .full-swiper .swiper-wrapper,
.scroll-container .full-swiper .swiper-wrapper .swiper-slide,
.scroll-container .full-swiper .swiper-wrapper .swiper-slide .thumbnail,
.scroll-container .full-swiper .swiper-wrapper .swiper-slide .thumbnail img{height: 100%; }
.scroll-container .full-swiper .swiper-wrapper .swiper-slide .thumbnail img{width: 100%; object-fit: cover;}
.main-video iframe{height: 1080px !important;}
.main-video .main-video-box{position: relative;}
.main-video .sound-toggles{position: absolute; top: 100px; right:10%; cursor: pointer;}
.main-video .sound-toggles .sound-toggles-box{ display: flex;align-items: center;justify-content: center;width: 50px;height: 50px; background-color: #000; border-radius: 30px;}
.main-video .sound-toggles .sound-toggles-box .sound-off{display: none;}
.main-video .sound-toggles.active .sound-toggles-box .sound-off{display: block;}
.main-video .sound-toggles.active .sound-toggles-box .sound-on{display: none;}
@media(max-width:1024px){
.main-video .sound-toggles .sound-toggles-box{width: 30px; height: 30px;}
.main-video .sound-toggles .sound-toggles-box img{max-width: 20px;}
.main-video .sound-toggles{top: 80px; right:20px;}
.scroll-container > div{position: unset;}
.scroll-container > .main-video {position: relative;}
.main-video iframe {height: 300px !important; }
.main-video{ box-sizing: border-box;}
}
#main .about{margin-top: 200px; position: relative; }
#main .about .line{position: absolute; top: 70%; right: 0; clip-path: inset(0 0 100% 0); z-index: -1;}
#main .about .line1{top: 40%;}
#main .about .box{ max-width: 1700px; position: relative; padding-top: 200px;}
#main .about .box .txt{ margin-left: 53%; position: relative;}
#main .about .box .txt::after{content:"순백의 공간, 고요한 설렘"; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(90deg); opacity: 0.5;}
#main .about .box .txt h2{font-size: 100px; margin-bottom: 100px; font-weight: 600;}
#main .about .box .txt h2 small{ font-family: "quiche-sans", sans-serif; font-weight: 100;}
#main .about .box .txt a, #main .about .box .txt p{margin-left: 100px;font-size: 16px;}
#main .about .box .txt a {margin-top: 20px; font-size: 24px; letter-spacing: -2px;}
#main .about .box .thumbnail img{position: absolute; }
#main .about .box .thumbnail .about-img1{left: 20%; top: 5%; z-index: 1;}
#main .about .box .thumbnail .about-img2{left: 0; top: 30%;}
#main .about .box .thumbnail .about-img3{display: none;}
@media(min-width:2010px){
.main-video iframe{height: 1440px !important;}
#main .about .box{margin: 0 auto;}
.special-view .box .special-view-swiper .swiper-slide .slide-box{justify-content: center;}
}
@media(max-width:1024px){
#main .about .line{top: 90%;}
#main .about{margin-top: 0;}
#main .about .box{padding-top: 100px;}
#main .about .box .thumbnail img{position: unset;}
#main .about .box .thumbnail .about-img3{display: block; width: 100%; max-width: 85%;}
#main .about .box .txt{margin-left: 0; padding: 0 20px; box-sizing: border-box; margin-top: -80px;}
#main .about .box .thumbnail .about-img1,#main .about .box .thumbnail .about-img2{display: none;}
#main .about .box .txt h2{font-size: 50px; text-align: right; margin-bottom: 60px;}
#main .about .box .txt a, #main .about .box .txt p{margin-left: 0;}
#main .about .box .txt a {font-size: 24px;}
#main .about .box .txt p{font-size: 14px;}
#main .about .box .txt::after{content: "";}
}
.special-view{margin-top: 150px; position: relative;}
.special-view .line{position: absolute; bottom:-20%; left: 0; }
.special-view .line2 img{width: 100%;}
.special-view .box .special-view-swiper .swiper-slide .slide-box{display: flex; align-items: center; }
.special-view .box .special-view-swiper .swiper-slide .thumbnail{display: flex; align-items: flex-end; gap: 20px; z-index: 1; position: relative;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail .img {margin:20px 0;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail iframe{height: 670px !important;}
.special-view .box .special-view-swiper .swiper-slide .txt{margin-left: 120px;}
.special-view .box .special-view-swiper .swiper-slide .txt h3{font-size: 80px; position: relative;font-family: "quiche-sans", sans-serif; }
.special-view .box .special-view-swiper .swiper-slide .txt h3::after{content: "Special"; position: absolute; bottom: 25%; right: 22%; font-size:150px ; opacity: 0.05;}
.special-view .box .special-view-swiper .swiper-slide .txt .disc{margin:100px 0 0 80px;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail .right .right-txt{display: none;}
.wave-a{position: relative;height: 28px; overflow: hidden; margin-top: 40px; font-size: 24px; width: 132px; font-weight: 600; letter-spacing: -2px; position: relative; padding-bottom: 10px; box-sizing: border-box;}
.wave-a::after{content: ""; position: absolute; bottom: 0px; left: 0; width: 0; height: 1px; background-color: #363636; transition: 0.3s;}
.wave-a:hover::after{width: 100%;}
.wave-a .wave-txt1 span{transition: 0.3s; font-family: "quiche-sans", sans-serif; font-weight: 300;}
.wave-a .wave-txt1 span:nth-child(1){ transition-delay: 0.12s;}
.wave-a .wave-txt1 span:nth-child(2){ transition-delay: 0.14s;}
.wave-a .wave-txt1 span:nth-child(3){ transition-delay: 0.16s;}
.wave-a .wave-txt1 span:nth-child(4){ transition-delay: 0.18s;}
.wave-a .wave-txt1 span:nth-child(5){ transition-delay: 0.20s;}
.wave-a .wave-txt1 span:nth-child(6){ transition-delay: 0.22s;}
.wave-a .wave-txt1 span:nth-child(7){ transition-delay: 0.24s;}
.wave-a .wave-txt1 span:nth-child(8){ transition-delay: 0.26s;}
.wave-a:hover .wave-txt1 span:nth-child(1){transform: translateY(-110%); transition-delay: 0.1s;}
.wave-a:hover .wave-txt1 span:nth-child(2){transform: translateY(-110%); transition-delay: 0.12s;}
.wave-a:hover .wave-txt1 span:nth-child(3){ transform: translateY(-110%); transition-delay: 0.14s;}
.wave-a:hover .wave-txt1 span:nth-child(4){transform: translateY(-110%); transition-delay: 0.16s;}
.wave-a:hover .wave-txt1 span:nth-child(5){transform: translateY(-110%); transition-delay: 0.18s;}
.wave-a:hover .wave-txt1 span:nth-child(6){transform: translateY(-110%); transition-delay: 0.20s;}
.wave-a:hover .wave-txt1 span:nth-child(7){ transform: translateY(-110%); transition-delay: 0.22s;}
.wave-a:hover .wave-txt1 span:nth-child(8){transform: translateY(-110%); transition-delay: 0.24s;}
.wave-a .wave-txt2 span{transition: 0.3s; transform: translateY(20%); font-family: "quiche-sans", sans-serif; font-weight: 300;}
.wave-a .wave-txt2 span:nth-child(1){ transition-delay: 0.12s;}
.wave-a .wave-txt2 span:nth-child(2){ transition-delay: 0.14s;}
.wave-a .wave-txt2 span:nth-child(3){ transition-delay: 0.16s;}
.wave-a .wave-txt2 span:nth-child(4){ transition-delay: 0.18s;}
.wave-a .wave-txt2 span:nth-child(5){ transition-delay: 0.20s;}
.wave-a .wave-txt2 span:nth-child(6){ transition-delay: 0.22s;}
.wave-a .wave-txt2 span:nth-child(7){ transition-delay: 0.24s;}
.wave-a .wave-txt2 span:nth-child(8){ transition-delay: 0.26s;}
.wave-a:hover .wave-txt2 span:nth-child(1){transform: translateY(-100%); transition-delay: 0.1s;}
.wave-a:hover .wave-txt2 span:nth-child(2){transform: translateY(-100%); transition-delay: 0.12s;}
.wave-a:hover .wave-txt2 span:nth-child(3){ transform: translateY(-100%); transition-delay: 0.14s;}
.wave-a:hover .wave-txt2 span:nth-child(4){transform: translateY(-100%); transition-delay: 0.16s;}
.wave-a:hover .wave-txt2 span:nth-child(5){transform: translateY(-100%); transition-delay: 0.18s;}
.wave-a:hover .wave-txt2 span:nth-child(6){transform: translateY(-100%); transition-delay: 0.20s;}
.wave-a:hover .wave-txt2 span:nth-child(7){ transform: translateY(-100%); transition-delay: 0.22s;}
.wave-a:hover .wave-txt2 span:nth-child(8){transform: translateY(-100%); transition-delay: 0.24s;}
@media(max-width:1024px){
.special-view .box .special-view-swiper .swiper-slide .slide-box{flex-direction: column;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail{gap: 0;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail img{width: 100%;}
.special-view .box .special-view-swiper .swiper-slide .right .img{margin-left: 10px;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail .img:last-child{display:none;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail iframe {width: 152px !important; height: 235px !important;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail .right{margin-bottom:30px; }
.special-view .box .special-view-swiper .swiper-slide .txt{margin-left: 0; width: 100% ; padding: 0 20px; box-sizing: border-box;}
.special-view .box .special-view-swiper .swiper-slide .txt .disc{margin: 40px 0 0 0;}
.special-view .box .special-view-swiper .swiper-slide .txt .disc .wave-a{margin-top: 20px;}
.special-view .box .special-view-swiper .swiper-slide .txt .disc p {font-size: 14px;}
.special-view .box .special-view-swiper .swiper-slide .txt h3{display: none;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail{margin-right: 20px;}
.special-view .box .special-view-swiper .swiper-slide .thumbnail .right .right-txt{display: block;font-size: 25px; position: relative;font-family: "quiche-sans", sans-serif; clip-path: inset(100% 0 0 0);transform: translateY(0); transition: 1.4s; padding-top: 18px; padding-left: 10px;}
.special-view.aos-animate .box .special-view-swiper .swiper-slide.swiper-slide-active .thumbnail .right .right-txt{clip-path: inset(0 0 0 0);transform: translateY(-5px);}
.special-view .box .special-view-swiper .swiper-slide .thumbnail .right .right-txt::after{content: "Special"; position: absolute; bottom: 25%; right: 30%; font-size:36px ; opacity: 0.05;}
}
#main .reser-sec{margin-top: 200px; }
#main .reser-sec .box{display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 0 auto;}
#main .reser-sec .box .thumbnaul-video img{max-width: 872px;width: 100%;}
#main .reser-sec .box .txt{text-align: right;}
#main .reser-sec .box .txt p{font-weight: 400;}
#main .reser-sec .box .txt a{margin-top: 40px; font-size: 24px; font-weight: 700; letter-spacing: -2px;}
#main .reser-sec .box .txt a{width: 145px;}
#main .reser-sec .thumbnaul-video iframe{ width: 872px !important ;height: 488px !important;}
@media(max-width:1024px){
#main .reser-sec .thumbnaul-video iframe{width: 356px !important; ; height: 200px !important;}
#main .reser-sec{margin-top: 75px;}
#main .reser-sec .box{flex-direction: column; padding: 0 10px; box-sizing: border-box;}
#main .reser-sec .box .txt p{display: none;}
#main .reser-sec .box .thumbnaul-video img{width: 100%;}
#main .reser-sec .box .txt{width: 100%; text-align: left;}
#main .reser-sec .box .txt a{margin-top: 15px;}
}
#main .about .box .txt h2{clip-path: inset(100% 0 0 0);transform: translateY(0); transition: 1.4s;}
#main .about.aos-animate .box .txt h2{clip-path: inset(0 0 0 0);transform: translateY(-60px);}
#main .special-view .box .special-view-swiper .swiper-slide .txt h3{clip-path: inset(100% 0 0 0);transform: translateY(0); transition: 1.4s; padding-bottom: 10px;}
#main .special-view.aos-animate .box .special-view-swiper .swiper-slide-active .txt h3 {clip-path: inset(-100% 0 0 -100%);transform: translateY(-60px);}
/*location*/
#location .sub-visual{}
#location .sub-visual .box .thumbnail img{width: 100%;}
#location .map-content .txt{text-align: center; margin: 200px 0;}
#location .map-content .txt h2{margin-bottom: 50px; font-family: "quiche-sans", sans-serif; font-size: 50px;}
#location .map-content .txt p{margin: 5px 0;}
#location .map-content .txt p strong{font-weight: 600;}
#location .map-content .box{max-width: 1400px; margin: 0 auto;}
#location .root_daum_roughmap .cont, #location .root_daum_roughmap .wrap_controllers{display: none !important;}
@media(max-width:1024px){
#main .special-view{margin-top: 100px;}
#main .about.aos-animate .box .txt h2{transform: translateY(0);}
#location .sub-visual img{min-height: 280px; object-fit: cover;}
#location .map-content .txt{margin: 100px 0 50px 0;}
#location .map-content .txt h2{font-size: 38px; margin-bottom: 25px;}
#location .map-content .txt p{font-size:14px;}
#location .root_daum_roughmap { width: 100% !important; height: 400px !important;}
}
#movie .movie-video iframe{ width: 100% !important;height: 850px !important;}
#movie .sub-visual{}
#movie .sub-visual .box .thumbnail img{width: 100%; object-fit: cover; object-position: center;}
#movie .movie-content .txt{text-align: center; margin: 200px 0;}
#movie .movie-content .txt h2{margin-bottom: 50px; font-family: "quiche-sans", sans-serif; font-size: 50px;}
#movie .movie-contentmap-content .txt p{margin: 5px 0;}
#movie .movie-content .txt p strong{font-weight: 600;}
#movie .movie-content .box{max-width: 1400px; margin: 0 auto;}
@media(max-width:1024px){
#movie .movie-video iframe{ width:100% !important;height: 250px !important;}
#movie .sub-visual .box .thumbnail img{height: 280px;}
#movie .movie-content .movie-video{max-width: 90%; margin: 0 auto;}
#movie .movie-content .txt{margin: 100px 0 50px 0;}
#movie .movie-content .txt h2{font-size: 38px; margin-bottom: 25px;}
#movie .movie-content .txt p{font-size: 14px;}
}
#prologue .sub-visual .box .thumbnail img{width: 100%;}
#prologue {overflow: hidden;}
#prologue .prologue-content {margin-top: -10px;}
#prologue .prologue-content .box {display: flex ; }
#prologue .prologue-content .box > div{width: 50%;padding: 200px 0;}
#prologue .prologue-content .box .prologue-window.aos-animate img{border-radius: 230px 230px 0 0; transition: 1s; transition-delay: 0.5s; position: relative; width: 100%; max-width: 450px;}
#prologue .prologue-content .box .prologue-window::after{content:""; position: absolute; top: 0; right: 0; width: calc(100% - 225px);height: 100%; background-color: #A54411; z-index: -1; transition-duration: 5s;}
#prologue .prologue-content .box > div .thumbnail iframe{ width: 381px !important;height: 500px !important;overflow: hidden;border-radius: 300px 300px 0 0;}
#prologue .prologue-content .box .txt{margin-left: 200px;}
#prologue .prologue-content .box .txt .disc{margin-top: 150px;}
#prologue .prologue-content .box .txt .disc h3{font-size: 24px; font-family: "quiche-sans", sans-serif; font-weight: 300; margin-bottom: 20px;}
#prologue .prologue-content .box .txt .logo{display: none;}
#prologue .prologue-content .ani-logo .logo2{margin-bottom: -65px; margin-left: -65px;}
#prologue .prologue-content .ani-logo .logo3{margin-bottom:-50px;}
#prologue .prologue-content .ani-logo .logo4{margin-bottom: -75px; margin-left: 10px;}
#prologue .prologue-content .ani-logo {position: relative;}
#main .marquee-sec{margin-top: 200px;}
#main .marquee-sec .marquee-sec{ margin-top: 200px;}
#main .marquee-sec .marquee {overflow: hidden;position: relative;width: 100%; display: flex;}
.marquee__group {display: flex;width: calc(200%); animation: marquee 40s linear infinite; gap: 10px;}
#main .marquee-sec .marquee__group img {width: auto;height: 400px;}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* .marquee:hover .marquee__group {
animation-play-state: paused;
} */
@media(max-width:1024px){
#main .marquee-sec{margin-top: 150px;}
#main .marquee-sec .marquee__group img{height: 200px;}
#main .marquee-sec .marquee__group iframe{width:150px !important;}
#prologue .marquee-sec{margin-top: 50px;}
#prologue .sub-visual img{min-height: 350px; object-fit: cover;}
#prologue .prologue-content .box > div .thumbnail iframe{height: 340px !important; width: 100% !important;}
#prologu .marquee-sec{ margin-top: 100px;}
#prologue .marquee-sec .marquee__group img{height: 200px;}
#prologue .marquee-sec .marquee__group iframe{height: 200px !important ; width: 150px !important;}
#prologue .prologue-content .ani-logo img{width: 50%; max-width: 45px;}
#prologue .prologue-content .ani-logo .logo2{ margin-bottom: -20px;margin-left: -30px;}
#prologue .prologue-content .ani-logo .logo3 {margin-bottom: -20px;}
#prologue .prologue-content .ani-logo .logo4 {margin-bottom: -35px;margin-left: 10px;}
#prologue .prologue-content .box > div{width: 100%;}
#prologue .prologue-content .box .txt{margin-left: 0; text-align: center;}
#prologue .prologue-content .box .txt .logo img{max-width: 170px; }
#prologue .prologue-content .box .prologue-window{width: 100%; margin: 0 auto;}
#prologue .prologue-content .box{flex-direction: column-reverse; align-items: center; gap: 50px;}
#prologue .prologue-content .box .prologue-window::after{width: 100%; height: 60%;}
#prologue .prologue-content .box > div{padding: 0;}
#prologue .prologue-content .box .prologue-window .thumbnail {width: 100%; max-width: 70%; margin: 0 auto; margin-top:100px}
#prologue .prologue-content .box .txt .disc p {font-size: 13px;}
#prologue .prologue-content .box .txt .disc{margin-top: 50px; padding: 0 20px;}
#prologue .prologue-content .box .txt .disc p br{display: none;}
.kakao-map{pointer-events: none; max-width: 90%; margin: 0 auto;}
}
#prologue .full-slide .swiper-slide{position: relative;}
#prologue .full-slide .swiper-slide .txt{position: absolute; bottom: 70px; left: 200px;}
#prologue .full-slide .swiper-slide .txt p strong{font-weight: 700;}
#prologue .full-slide .swiper-slide .thumbnail img{width: 100%;}
#prologue .full-slide .swiper-button-next::after,
#prologue .full-slide .swiper-button-prev::after{content: "";}
#prologue .full-slide .swiper-pagination{bottom: 70px;}
#prologue .full-slide .swiper-button-prev, #prologue .full-slide .swiper-button-next{bottom: 15px; top: auto; transition: 0.3s; width: auto;}
#prologue .full-slide .swiper-button-next{right:46%; bottom:21px; left: auto; }
#prologue .full-slide .swiper-button-next img{transition: transform 0.3s ease-in-out;transform-origin: 0% 50%;}
#prologue .full-slide .swiper-button-prev img{transition: transform 0.3s ease-in-out;transform-origin: 100% 50%;}
#prologue .full-slide .swiper-button-prev:hover img, #prologue .full-slide .swiper-button-next:hover img{ transform: scaleX(1.2)}
#prologue .full-slide .swiper-button-prev{left:46%; right: auto;}
@media(max-width:1024px){
#prologue .full-slide{height: 330px;}
#prologue .full-slide .full-swiper, #prologue .full-slide .full-swiper .swiper-wrapper, #prologue .full-slide .full-swiper .swiper-wrapper .thumbnail, #prologue .full-slide .swiper-slide .thumbnail img{height: 100%;}
#prologue .full-slide .swiper-slide .txt{display: none;}
#prologue .full-slide .swiper-slide {height: 100%;}
#prologue .full-slide .swiper-slide .thumbnail img{height: 100%; object-fit: cover;}
#prologue .full-slide .swiper-button-prev{left: 32%;}
#prologue .full-slide .swiper-button-next{right: 32%;}
}
/* reser */
#reser .priceTable td{white-space: nowrap;}
#room .priceTable td{white-space: nowrap; background-color: #fff;}
#room .price-box .price-room{margin-bottom: 100px; border-bottom: 1px solid rgba(54,54,54,0.5); padding-bottom: 30px;}
#room .price-box .price-room:nth-child(4){ border-bottom: none;}
#room .price-box .price-room-last:nth-child(1){ border-bottom: none;}
#room .price-box .price-room h3{margin-bottom:20px ; font-size: 25px; font-family: "quiche-sans", sans-serif; text-align: left;}
#room .price-box .price-room {text-align: center;}
#room .price-box .price-room > div, #room .price-box .price-room .room_rprice table .head, #room .price-box .price-room .room_rprice table .state td{background-color: transparent !important;}
#reser .sub-visual .box .thumbnail img{width: 100%;}
#reser .reser-nav-wrap{position: relative;}
#reser .reser-nav-wrap.fixed .reser-nav{position: fixed; margin-top: 0;}
#reser .reser-nav{position: absolute; top: -5%; left: 0; width: 25%; height: 100vh;border-right: 1px solid rgba(54,54,54,0.5);}
#reser .reser-nav ul{display: flex; flex-direction: column;justify-content: center; height: 100%; gap: 50px; margin-left: 200px;}
#reser .reser-nav ul li a{font-size:24px ; font-weight: 400; transition: 0.3s;}
#reser .reser-nav-wrap .reser-nav li.active a{color:#A54411; font-weight: 700;}
@media(max-width:1024px){
#room .price-box{overflow: scroll;}
#room .price-box .price-room{margin-bottom: 50px;}
#reser .reser-nav-wrap .reser-nav li.active a{color: #fff;font-weight: 700; }
#reser .reser-nav ul li a small{display: none;}
#reser .priceTable td{padding: 5px; box-sizing: border-box;}
#reser .price-box > div{overflow-x: scroll;}
#reser .sub-visual .box .thumbnail img{height: 280px; object-fit: cover;}
#reser .reser-nav{height: auto; width: 100%;top: 0px; border-radius: none; margin-top: 20px;}
#reser .reser-nav-wrap.fixed .reser-nav{top: 112px;}
#reser .reser-nav ul{flex-direction: row; margin-left: 0; gap: 10px;}
#reser .reser-nav ul li a{font-size: 13px;}
}
#reser .reser-info{margin-left: 30%; margin-top: 200px;}
#reser .reser-info h2{font-size: 50px; font-family: "quiche-sans", sans-serif; margin-bottom: 50px;}
#reser .reser-info ul li{margin: 20px 0;}
#reser .reser-info ul li span:first-child{font-weight: 700; margin-right: 20px;}
#reser .reser-info ul li a{font-weight: 700;}
#reser .reser-price .box img{width: 100%;}
#reser-info,
#reser-infomation,
#reser-check,
#reser-refund,
#reser-price{scroll-margin-top: 300px;}
#reser .reser-price h2{font-size: 50px; font-family: "quiche-sans", sans-serif; margin-bottom: 50px;}
#reser .reser-price{margin-left: 30% ; margin-top: 200px;}
@media(max-width:1024px){
#reser .reser-price h2{font-size: 32px; margin-bottom: 30px;}
#reser .reser-info ul li span:first-child{margin-bottom: 10px;}
#reser .reser-info h2{font-size: 32px; margin-bottom: 30px;}
#reser .reser-info ul li span{font-size: 14px;}
#reser .reser-price{margin-left: 0; margin-top: 100px;}
#reser .reser-price .box{padding: 0 20px;}
#reser .reser-info{margin-left: 0; margin-top: 100px;}
#reser .reser-info .box{padding: 0 20px;}
}
#reser .reser-infomation h2{font-size: 50px; font-family: "quiche-sans", sans-serif; margin-bottom: 50px;}
#reser .reser-infomation{margin-left: 30% ; margin-top: 200px;}
#reser .reser-infomation .box .content{margin-bottom: 50px;}
#reser .reser-infomation .box .content h5{font-weight: 700; margin-bottom: 20px;}
#reser .reser-infomation .box .content strong{font-weight: 700;}
#reser .reser-infomation .box .content p{margin: 10px 0;}
@media(max-width:1024px){
#reser .reser-infomation .box .content{margin-bottom: 30px;}
#reser .reser-infomation .box .content h5{margin-bottom: 15px;}
#reser .reser-infomation .box .content p{margin: 5px 0;}
#reser .reser-infomation h2{margin-bottom: 30px; font-size: 32px;}
#reser .reser-infomation{margin-left: 0; margin-top: 100px;}
#reser .reser-infomation .box{padding: 0 20px;}
}
#reser .reser-check h2{font-size: 50px; font-family: "quiche-sans", sans-serif; margin-bottom: 50px;}
#reser .reser-check{margin-left: 30% ; margin-top: 200px;}
#reser .reser-check .box .content{margin-bottom: 50px;}
#reser .reser-check .box .content h5{font-weight: 700; margin-bottom: 20px;}
#reser .reser-check .box .content strong{font-weight: 700;}
#reser .reser-check .box .content p{margin: 10px 0;}
@media(max-width:1024px){
#reser .reser-check .box .content{margin-bottom: 30px;}
#reser .reser-check .box .content p{margin: 5px 0;}
#reser .reser-check .box .content h5{margin-bottom: 10px;}
#reser .reser-check h2{margin-bottom: 30px; font-size: 32px;}
#reser .reser-check{margin-left: 0; margin-top: 100px;}
#reser .reser-check .box{padding: 0 20px;}
}
#reser .reser-refund h2{font-size: 50px; font-family: "quiche-sans", sans-serif; margin-bottom: 50px;}
#reser .reser-refund{margin-left: 30% ; margin-top: 200px;}
#reser .reser-refund .reservation-refund-box{max-width: 1240px; padding-top: 50px; margin-bottom: 60px; overflow-x: scroll; overflow-y: hidden;}
#reser .reser-refund table {width: 100%;border-collapse: collapse;}
#reser .reser-refund tr p {padding: 2px 30px; white-space: nowrap;}
#reser .reser-refund tr p {font-weight: 400;}
#reser .reser-refund tr:last-child td:last-child {color: #363636;font-weight: 400;}
#reser .reser-refund tr td:last-child p {border-right: 0;}
#reser .reser-refund th {color: #363636;font-size: 16px;}
#reser .reser-refund td {text-align: center;padding: 20px 0;font-size: 15px;font-weight: 400;color: #363636;}
#reser .reser-refund th , #reser .reser-refund td {border-right: 1px solid #363636;}
#reser .reser-refund th:first-child p, #reser .reser-refund td:first-child p{font-weight: 700 !important;}
#reser .reser-refund td strong{color:#BC3232; font-weight: 600;}
@media(max-width:1024px){
#reser .reser-refund tr:first-child{border-left: none; border-right:1px solid rgba(0,0,0,0.5);}
#reser .reser-refund th, #reser .reser-refund td{border-right: none;}
#reser section p{font-size: 14px;}
#reser .reser-refund h2{font-size: 32px; margin-bottom: 30px;}
#reser .reser-refund{margin-left: 0; margin-top: 100px;}
#reser .reser-refund .reservation-refund-box{padding-top: 0;}
#reser .reser-refund .reservation-guide .reservation-title ,#reser .reser-refund .reservation-title{ flex-direction: column;align-items: flex-start;}
#reser .reser-refund .reservation-guide .reservation-title small, #reser .reser-refund .reservation-title small{padding: 0; margin-top: 10px;}
#reser .reser-refund .reservation-refund .reservation-title{margin-left: 0;}
#reser .reser-refund {padding: 20px; box-sizing: border-box; }
#reser .reser-refund .refund-info p{font-size: 14px; text-indent: -10px; margin-left: 10px;}
#reser .reser-refund table{margin: 40px 0;}
#reser .reser-refund table tbody{display: flex;}
#reser .reser-refund table tbody tr{width: 50%;display: flex;flex-direction: column;}
#reser .reser-refund table tbody th,#reser .reser-refund table tbody td{font-size: 14px;}
#reser .reser-refund table tbody th,#reser .reser-refund table tbody td{padding: 10px 0; display: flex; justify-content: center;}
#reser .reser-refund table tbody td p,#reser .reser-refund tr p{padding: 5px 0 ; text-align: center;}
}
/* visual slide */
.visual-slide{height: 100vh;}
.visual-slide , .visual-slide .swiper-slide{position: relative;}
.visual-slide .full-swiper, .visual-slide .swiper-wrapper, .visual-slide .swiper-slide, .visual-slide .swiper-slide .thumbnail{height: 100%;}
.visual-slide .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}
.visual-slide .txt{position: absolute; bottom: 40px; left: 200px; z-index: 1;}
.visual-slide .txt p strong{font-weight: 700;}
.visual-slide .txt h3{font-size:80px ;font-family: "quiche-sans", sans-serif; }
.visual-slide .txt span{font-size:30px ;font-family: "quiche-sans", sans-serif; }
.visual-slide .txt p {font-size: 22px;}
.visual-slide .swiper-button-next::after,
.visual-slide .swiper-button-prev::after{content: "";}
.visual-slide .swiper-pagination{bottom: 70px;}
.visual-slide .swiper-button-prev, .visual-slide .swiper-button-next{bottom: 15px; top: auto; transition: 0.3s; width: auto;}
.visual-slide .swiper-button-next{right:46%; bottom:21px; left: auto; }
.visual-slide .swiper-button-next img{transition: transform 0.3s ease-in-out;transform-origin: 0% 50%;}
.visual-slide .swiper-button-prev img{transition: transform 0.3s ease-in-out;transform-origin: 100% 50%;}
.visual-slide .swiper-button-prev:hover img, .visual-slide .swiper-button-next:hover img{ transform: scaleX(1.2)}
.visual-slide .swiper-button-prev{left:46%; right: auto;}
@media(max-width:1024px){
.visual-slide .txt p{font-size: 18px;}
.visual-slide .txt{left: 20px; bottom: 100px; display: i}
.visual-slide .txt h3{font-size: 26px;}
.visual-slide .txt span{font-size: 20px;}
.visual-slide {height: 330px;}
.visual-slide .full-swiper, .visual-slide .full-swiper .swiper-wrapper, .visual-slide .full-swiper .swiper-wrapper .thumbnail #main .full-slide .swiper-slide .thumbnail img{height: 100%;}
.visual-slide .swiper-slide .txt{display: none;}
.visual-slide .swiper-slide {height: 100%;}
.visual-slide .swiper-slide .thumbnail img{height: 100%; object-fit: cover; object-position: center;}
.visual-slide .swiper-button-prev{left: 32%;}
.visual-slide .swiper-button-next{right: 32%;}
}
/* special */
#special .special-title{height: 550px; width: 500px; margin: 0 auto; position: relative;}
#special .special-title .box{position: absolute; top: -100%; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: #A54411; border-radius: 0 0 500px 500px; transition: 1s; }
#special .special-title.aos-animate .box{top: -1%; color: #fff;}
#special .special-title .box h3{font-family: "quiche-sans", sans-serif; font-size: 50px; padding-bottom: 40px; position: relative;}
#special .special-title .box p{color: #fff; font-weight: 300;}
#special .special-title .box h3::after{content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 1px; width:calc(0px); background-color: #fff; transition: 1s;}
#special .special-title.aos-animate .box h3::after{width: calc(50px); transition-delay: 0.5s; }
#special .special-title h5{font-weight: 600; margin: 40px 0 20px 0;}
@media(max-width:1024px){
#special .special-title {max-width: 90%; max-height: 300px;}
#special .special-title .box{font-size: 14px; border-radius: 0 0 300px 300px;}
#special .special-title .box h3{font-size: 32px; padding-bottom: 20px;}
#special .special-title h5{margin: 20px 0 10px 0;}
#special .special-title p{margin-bottom: 60px;}
}
#special .special-imgs{margin-top: 100px;}
#special .special-imgs .box{max-width: 1220px; margin: 0 auto;}
#special .special-imgs ul{display: flex; justify-content: space-between; gap: 20px;}
#special .special-imgs ul li {flex: 1;}
#special .special-imgs ul li img{width: 100%;}
#special .special-imgs ul li iframe{height: 216px !important;}
@media(max-width:1024px){
#special .special-imgs ul li iframe{height: 100% !important;}
#special .special-imgs .box{padding: 0 20px; box-sizing: border-box;}
#special .special-imgs ul{flex-direction: column; gap: 10px;}
}
#special .special-main-img{margin-top: 200px ;position: relative; }
#special .special-main-img::after{content: ""; position: absolute; top: -10%; left: 0; width: 100%; max-width: 450px ;height: 1100px; background-color: #A54411;}
#special .special-main-img .box{max-width:1500px; margin:0 auto; position: relative; z-index: 1;}
#special .special-main-img .box .thumbnail img{width: 100%;}
@media(min-width:2000px){
#special .special-main-img::after{max-width: 600px; }
}
@media(max-width:1024px){
#special .special-imgs ul li iframe{height: 184px !important;}
#special .special-main-img .box .thumbnail {max-width: 80%; margin: 0 auto;}
#special .special-main-img .box .thumbnail img{min-height: 180px; object-fit: cover;}
#special .special-main-img{margin-top: 100px;}
#special .special-main-img::after{height: 170%;max-width: 40%;}
}
/*room*/
#room .room-intro{padding-top: 200px;}
#room .room-intro .box{max-width: 1400px; margin: 0 auto;}
#room .room-intro .box ul{display: flex;}
#room .room-intro .box ul li{flex: 1; }
#room .room-intro .box ul li .thumbnail img{width: 100%; transition: 2s; transition-delay: 0.3s;}
#room .room-intro .box ul li.active .thumbnail img{border-radius: 500px 500px 0 0;}
#room .room-intro .box ul li .thumbnail iframe{height: 419px !important;}
#room .room-intro .box ul li.active .thumbnail iframe{border-radius: 500px 500px 0 0;}
#room .room-intro .box ul li:nth-child(2){position: relative; }
#room .room-intro .box ul li:nth-child(2)::before,
#room .room-intro .box ul li:nth-child(2)::after{content: ""; position: absolute; top: 0; height: 0; width: 1px; background-color: rgba(0,0,0,0.5); transition: 1s; transition-delay: 0.3s;}
#room .room-intro .box ul li:nth-child(2)::after{left: 0;}
#room .room-intro .box ul li:nth-child(2)::before{right:0;}
#room .room-intro .box ul li:nth-child(1){padding-right: 75px;}
#room .room-intro .box ul li:nth-child(2){padding: 0 75px;}
#room .room-intro .box ul li:nth-child(3){padding-left: 75px;}
#room .room-intro .box ul li.active:nth-child(2)::after,
#room .room-intro .box ul li.active:nth-child(2)::before {height: 100%;}
#room .room-intro .box ul li .txt{margin-top: 150px;}
#room .room-intro .box ul li .txt h3{font-size: 50px;font-family: "quiche-sans", sans-serif; font-weight: 400;}
#room .room-intro .box ul li .txt p{ margin:150px 0 70px 0 ; opacity: 0;}
#room .room-intro .box ul li .txt p strong{font-weight: 600; margin-bottom: 5px; display: inline-block;}
#room .room-intro .box ul li .txt h3{clip-path: inset(100% 0 0 0);transform: translateY(0); transition: 1s;}
#room .room-intro .box ul li.active .txt h3{clip-path: inset(0 0 0 0);transform: translateY(-20px); }
#room .room-intro .box ul li.active .txt p{transform: translateY(-20px); transition: 1s; transition-delay: 0.5s; opacity: 1;}
#room .room-intro .box ul li.active .txt p small{opacity: 0;}
@media(max-width:1024px){
#room .room-intro{padding-top: 50px;}
#room .room-intro .box ul{flex-direction: column;}
#room .room-intro .box ul li:nth-child(1),
#room .room-intro .box ul li:nth-child(2),
#room .room-intro .box ul li:nth-child(3){padding:0 20px}
#room .room-intro .box ul li .txt p{margin: 40px 0 20px 0;}
#room .room-intro .box ul li:nth-child(2)::after,
#room .room-intro .box ul li:nth-child(2)::before {display: none;}
#room .room-intro .box ul li .txt{margin-top: 60px;}
#room .room-intro .box ul li.active .txt h3{display: none;}
#room .room-intro .box ul li .thumbnail iframe{height: 382px !important;}
}
#room .room-supplies{margin-top: 200px;}
#room .room-supplies .box{max-width: 1400px; margin: 0 auto;}
#room .room-supplies .box ul{display: grid; grid-template-columns: repeat(13,2fr); gap: 40px 10px; align-items: flex-end;}
#room .room-supplies .box ul li{text-align: center;}
#room .room-supplies .box ul li h5{margin-top: 10px;}
#room .room-supplies .box > h5{font-size: 25px; font-family: "quiche-sans", sans-serif; margin-bottom: 50px;}
#room .room-price{margin-top: 200px;}
#room .room-price .box{max-width: 1400px; margin: 0 auto;}
#room .room-price .box > h5{font-size: 25px; font-family: "quiche-sans", sans-serif; margin-bottom: 50px;}
#room .room-price1 .box > h5 {margin-bottom: 10px;}
#room .room-price1 .box > p {margin-bottom: 40px;}
@media(max-width:1024px){
#room .room-price{margin-top:100px}
#room .room-price .box{padding: 0 20px; box-sizing: border-box;}
#room .room-supplies{margin-top: 100px;}
#room .room-supplies .box{padding: 0 20px;}
#room .room-supplies .box ul{ grid-template-columns: repeat(4, 2fr);}
#room .room-supplies .box ul li h5{font-size: 13px;}
}
#room .room-detail {margin-top: 200px;}
#room .room-detail .box{display: flex; max-width: 1440px; margin: 0 auto;}
#room .room-detail .box .txt{display: flex; flex-direction: column; justify-content: space-between;width: 30%; text-align: left;}
#room .room-detail .box .disc{width: 30%;text-align: right;}
#room .room-detail .box .disc p{display: flex;flex-direction: column;justify-content: flex-end;height: 100%; color: #363636;}
#room .room-detail .box iframe{height: 708px !important;}
#room .room-detail .box .txt h2{font-size: 80px; font-family: "quiche-sans", sans-serif; clip-path: inset(100% 0 0 0);transform: translateY(0); transition: 1s;}
#room .room-detail .box .thumbnail {width: 40%;}
#room .room-detail .box .thumbnail img {width: 100%; max-width: 1100px;}
#room .room-detail.aos-animate .box .txt h2{clip-path: inset(0 0 0 0);transform: translateY(-20px); padding-bottom: 10px; font-weight: 300;}
@media(max-width:1600px){
#room .room-detail .box .txt{margin-top: 50px;}
}
@media(max-width:1024px){
#room .room-detail .box iframe{height: 406px !important;}
#room .room-detail .box .thumbnail{width: 100%;}
#room .room-detail{margin-top: 100px;}
#room .room-detail .box .txt{width: 100%; margin: 40px 0 20px 0; padding-left: 20px; box-sizing: border-box;}
#room .room-detail .box .txt h2{font-size: 32px;}
#room .room-detail .box .txt p{font-size: 14px;}
#room .room-detail .box{flex-direction: column;}
}
#room-pre .visual-slide{height: auto;}
#room-pre .rooms-wrap .box {margin: 200px 120px; }
#room-pre .rooms-wrap .box .title h3{font-size:30px ; font-family: "quiche-sans", sans-serif; margin-bottom: 100px; text-align: center;}
#room-pre .rooms-wrap .box ul {display: flex; justify-content: space-between; gap: 40px;}
#room-pre .rooms-wrap .box ul li{flex: 1;}
#room-pre .rooms-wrap .box ul li a{width: 100%;}
#room-pre .rooms-wrap .box ul li .thumbnail img{width: 100%;}
#room-pre .rooms-wrap .box ul li .txt{text-align: center; margin-top: 20px;}
#room-pre .rooms-wrap .box ul li .txt h4, #room-pre .rooms-wrap .box ul li .txt h4{font-weight: 700;}
#room-pre .rooms-wrap .box ul li .txt h4{font-size: 24px;}
#room-pre .rooms-wrap .box ul li .txt h5{margin: 15px 0 10px 0;}
#room-pre .sub-visual .thumbnail img{width: 100%; }
@media(max-width:1921px){
#room-pre .rooms-wrap .box ul{gap: 20px;}
}
@media(max-width:1024px){
#room-pre .rooms-wrap .box{margin: 50px 20px;}
#room-pre .rooms-wrap .box .title h3{margin-bottom: 50px; font-size: 20px;}
#room-pre .rooms-wrap .box ul{display: grid; grid-template-columns: repeat(2,1fr); gap:40px 10px;}
#room-pre .rooms-wrap .box ul li .txt h4{font-size: 16px;}
#room-pre .rooms-wrap .box ul li .txt h5,#room-pre .rooms-wrap .box ul li .txt p{display: none;}
#room-pre .rooms-wrap .box ul li .thumbnail img{width: 100%;}
#room-pre .sub-visual .thumbnail img{min-height: 280px; object-fit: cover;}
}
/*notive*/
/*notice*/
#notice .notice-wrap .box{max-width: 1200px; margin:150px auto 0 auto; }
#notice .notice-wrap h5{max-width: 1500px; margin: 30px auto 0 auto; color: #e0e0e0 ; font-size: 20px; text-align: right; font-family: 'KBIZsmm';}
#notice .sub-visual .thumbnail img{width: 100%; }
@media(max-width:1024px){
#notice .notice-wrap .box{margin: 75px auto 0 auto; padding: 0 20px; box-sizing: border-box;}
#notice .sub-visual .thumbnail img{height: 280px; object-fit: cover;}
}