@charset "utf-8";
main { position: relative;  width: 100%; height: 100vh; } 
main .main-slide { width: 100%; height: 100%; overflow: hidden; } 
main .main-slide .swiper-slide { background-size: cover; background-repeat: no-repeat; background-position: center; } 
main .main-slide .swiper-wrapper .s1 { background-image: url('../img/main/image1.jpg'); }
main .main-slide .swiper-wrapper .s2 { background-image: url('../img/main/image2.jpg'); }
main .main-slide .swiper-wrapper .s3 { background-image: url('../img/main/image3.jpg'); }
main .main-slide .swiper-wrapper .s4 { background-image: url('../img/main/image4.jpg'); }
main .main-slide .swiper-wrapper .s5 { background-image: url('../img/main/image5.jpg'); }
main .main-slide .swiper-wrapper .s6 { background-image: url('../img/main/image6.jpg'); }
main .main-slide .swiper-wrapper .s7 { background-image: url('../img/main/image7.jpg'); }
main .main-slide .swiper-wrapper .s8 { background-image: url('../img/main/image8.jpg'); }
main .main-slide .swiper-wrapper .s9 { background-image: url('../img/main/image9.jpg'); }
main .main-slide .swiper-wrapper .s10 { background-image: url('../img/main/image10.jpg'); }
main .main-slide .swiper-wrapper .s11 { background-image: url('../img/main/image11.jpg'); }
main .main-slide .swiper-wrapper .s12 { background-image: url('../img/main/image12.jpg'); }
main .main-slide .swiper-wrapper .s13 { background-image: url('../img/main/image13.jpg'); }
main .main-slide .swiper-wrapper .s14 { background-image: url('../img/main/image14.jpg'); }
main .main-slide .swiper-wrapper .s15 { background-image: url('../img/main/image15.jpg'); }

main .txt-box { position: absolute; left: 50%; bottom: 55px; transform: translateX(-50%); padding: 0 3%; color: #fff; z-index: 3; margin: 0 auto; } 
main .txt-box h1 { font-size: 30px; margin-bottom: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); pointer-events: none; } 
main .txt-box p { margin-bottom: 50px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); pointer-events: none; } 
.main-swiper-pagination { margin: 0px 15px; } 
main .swiper-button-prev, .swiper-button-next { position: static; width: auto; height: auto; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } 
.swiper-button-prev:after, .swiper-button-next:after { font-size: 16px; font-weight: 400; } 
.main-swiper-pagination { width: auto; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); } 
.main-pagination-progress { position: relative; background: rgba(255, 255, 255, 0.28); width: 220px !important; margin-left: 30px;  } 
main .swiper-pagination-progressbar-fill { background-color: #fff !important; } 


.about> :first-child { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-image: url('../img/main/image8.jpg'); background-size: cover; background-position: left top; } 
.about .content-box { position: absolute; top: calc(50% + 50px); left: 50%; transform: translate(-50%, -50%); height: 576px; background: #fff; padding: 0 70px; } 
.about .content-box .txt-box h2 { font-size: 30px; margin-bottom: 55px; } 
.about .content-box .txt-box h2 span { display: block; font-size: 12px; margin-bottom: 15px; line-height: 1em; font-weight: 400; }
.about .content-box .txt-box p { font-size: 16px; color: #757575; padding-right: 40px; } 
.about .content-box> :last-child { width: 500px; height: 360px; background: url('../img/main/image4.jpg') center/cover no-repeat; } 


.rooms .rooms-left { position: relative; width: 50%; height: 100%; overflow: hidden; } 
.rooms .rooms-left .txtbox { display: none; }
.rooms .rooms-left .swiper-wrapper>.s1 { background-image: url('../img/sub2/1/image5.jpg');} 
.rooms .rooms-left .swiper-wrapper>.s2 { background-image: url('../img/sub2/2/image15.jpg'); } 
.rooms .content-box { position: absolute; top: calc(50% + 50px); left: 50%; transform: translate(-50%, -50%); display: flex; height: 576px; z-index: 5; } 
.rooms .content-box .white-box { width: 400px; height: 100%; pointer-events: none; } 
.rooms .content-box .white-box p { font-family: 'MapoFlowerIsland'; font-size: 55px; line-height: 1.5em; } 
.rooms .content-box .rooms-slide { position: absolute; right: 0; width: 440px; height: 576px; display: block; overflow: hidden; } 
.rooms .content-box .rooms-slide .swiper-wrapper { display: flex; } 
.rooms .content-box .rooms-slide .swiper-wrapper .swiper-slide { display: flex; flex-flow: column; align-items: end; } 
.rooms .content-box .rooms-slide .swiper-wrapper .swiper-slide .rooms-img { width: 400px; height: 315px; margin-bottom: 20px; background-size: cover; background-repeat: no-repeat; background-position: center; display: block; cursor: pointer; } 
.rooms .content-box .rooms-slide .swiper-wrapper .swiper-slide .outside-img { background-image: url('../img/sub2/1/image1.jpg'); } 
.rooms .content-box .rooms-slide .swiper-wrapper .swiper-slide .indoor-img { background-image: url('../img/sub2/2/image1.jpg'); } 
.rooms .content-box .rooms-slide .swiper-slide .txt-box { text-align: right; font-size: 16px; } 
.rooms .content-box .rooms-slide .swiper-slide .txt-box h3 { font-size: 30px; margin-bottom: 25px; } 
.rooms .content-box .rooms-slide .swiper-slide .txt-box h3 span { display: block; font-size: 18px; line-height: 1.2em; }
.rooms .content-box .rooms-slide .swiper-slide .txt-box p { color: #757575; } 
.rooms .content-box .rooms-slide .swiper-slide .txt-box .small-p { font-size: 14px; margin-bottom: 25px; color: #272727; } 
.room-swiper-pagination { background: rgba(0, 0, 0, 0.28); width: 440px !important; margin-top: 576px; margin-left: 960px; right: 0; left: auto; } 
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #555; } 


.facilities { width: 100%; height: 100vh; color: #fff; } 
.facilities .facility-slide { width: 100%; height: 100%; overflow: hidden; } 
.facility-slide .swiper-wrapper { display: flex; } 
.facility-slide .swiper-wrapper .s1 { background-image: url('../img/sub3/1/image2.jpg'); } 
.facility-slide .swiper-wrapper .s2 { background-image: url('../img/sub3/2/image2.jpg'); } 
.facility-slide .swiper-wrapper .s3 { background-image: url('../img/sub3/3/image1.jpg'); } 
.facility-slide .swiper-wrapper .s4 { background-image: url('../img/sub3/4/image1.jpg'); } 
.facility-slide .swiper-wrapper .s5 { background-image: url('../img/sub3/5/image1.jpg'); } 

.facilities .content-box { position: absolute; height: 100%; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; } 
.facilities .content-box .facilty-txt-slide { position: absolute; top: 55%; width: 100%; font-family: '-KITA-Regular'; font-size: 120px; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); transform: translateY(-50%); line-height: 1.5em; } 
.facilities .content-box .facilty-txt-slide div div> :first-child { display: block; font-family: 'SUIT-Regular'; font-size: 16px; line-height: 1em; }
.facilities .content-box .facilty-txt-slide div div> :last-child { display: none; }
.facilities .content-box .view-txt p { position: absolute; left: 58px; bottom: 180px; font-size: 24px;  pointer-events: all; text-shadow: 0 1px 3px rgba(0, 0, 0, .4);  } 
.facilities .content-box .view-txt span { position: absolute; bottom: 165px; display: block; width: 85px; height: 85px; border-radius: 50%; background: rgba(255, 255, 255, 0.36); } 
.facilities .content-box .facility-pagination { position: absolute; left: 50%; bottom: 75px; transform: translateX(-50%); width: 100%; pointer-events: all; } 
.facilities .content-box .facility-pagination .facility-tabs { width: 100%;} 
.facilities .content-box .facility-pagination .facility-tabs div { width: calc(100% / 5); text-align: center; font-size: 20px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4);  } 
.facilities .content-box .facility-pagination .facility-tabs :nth-child(3) { margin-right: 25px; } 
.facility-swiper-pagination { background: rgba(255, 255, 255, 0.28); position: relative !important; } 
.facility-swiper-pagination .swiper-pagination-progressbar-fill { background-color: #fff !important}
.swiper-pagination-bullet { width: 100%; min-height: 40px; background: transparent; opacity: 1; } 
.swiper-pagination-bullet-active { font-weight: 800; } 

 
.contacts { width:100%; height: calc(100vh - 200px); overflow: hidden; background: url(../img/main/image12.jpg) no-repeat center/cover; }
.contacts> div { position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%); background: #fff; padding: 40px; }
.contacts div .txtbox h2 { font-size: 30px; margin-bottom: 55px; }
.contacts div .txtbox h2 span { display: block; font-family: 'SUIT-Regular'; font-size: 13px; line-height: 1em; font-weight: 400; margin-bottom: 10px; }
.contacts div .txtbox ul li { line-height: 2em; }

.root_daum_roughmap .cont .section.lst { display: none; }
#daumRoughmapContainer1762736773633 { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

@media screen and (max-width: 1440px){
    .room-swiper-pagination{margin-left:760px;}
}

@media screen and (max-width: 1400px){
    .swiper-horizontal>.swiper-pagination-progressbar { width: 100% !important; } 
    .room-swiper-pagination{margin-left:65%;}
    .facilities .content-box .facility-pagination { width: calc(100% - 50px); } 
}

@media screen and (max-width: 1200px) {
    .about .content-box { width: 1000px; padding: 70px 40px; } 
    .room-swiper-pagination{margin-left:60%;}
    /* .facilities .content-box .facility-pagination .facility-tabs { display: none; }  */
 }

@media screen and (max-width: 1024px){
    main .txt-box { width: 100%; padding: 0 25px; }

    .about .content-box { width: 90%; } 
    .about .content-box .txt-box p { font-size: 14px; }

    .rooms .content-box .white-box { background: rgba(255, 255, 255, .8); height: auto; padding: 80px 0; }
    .rooms .content-box .white-box p { font-size: 45px; }
    .rooms .content-box .rooms-slide .swiper-slide .txt-box p{font-size: 14px;}
    .room-swiper-pagination{margin-left: 55%;}

    .facilities .content-box .facilty-txt-slide { font-size: 100px; }
    .facilities .content-box .facility-pagination { width: calc(100% - 50px); } 

    .contacts { background: none; height: calc(100vh - 240px); }
 }

@media screen and (max-width: 840px) {
    main { z-index: 1; height: 65vh;} 
    main .txt-box { bottom: 40px; } 
    main .txt-box h1 { font-size: 24px; margin-bottom: 10px; } 
    main .txt-box p { margin-bottom: 40px; font-size: 14px; } 
    .main-pagination-progress { width: 150px !important; } 
    main .main-paginations { width: 100%; } 
    main .swiper-pagination-current, main .swiper-pagination-total { font-size: 14px; }

    .about { height: auto; background: #fff; padding: 80px 0; }
    .about> :first-child { background: none; } 
    .about .content-box { height: auto; padding: 0 25px; width: 100%; flex-direction: column; align-items: start; transform: none; position: static; } 
    .about .content-box .txt-box h2 { font-size: 24px; margin-bottom: 30px; } 
    .about .content-box .txt-box p { padding-right: 0; } 
    .about .content-box> :last-child { width: 100%; height: auto; aspect-ratio: 4/3; margin-top: 40px; } 

    .rooms { height: auto; padding: 0 0 80px;  } 
    .rooms .rooms-left { width: 100%; height: 350px; margin-bottom: 80px; } 
    .rooms .rooms-left .txtbox { display: block; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255, 255, 255, 0.8); width: 80%; padding: 40px 0; z-index: 9; }
    .rooms .rooms-left .txtbox span { display: block; font-family: 'SUIT-Regular'; font-size: 13px; line-height: 1em; font-weight: 400; margin-bottom: 10px; }
    .rooms .rooms-left .txtbox p { font-family: 'MapoFlowerIsland'; font-size: 32px; line-height: 1.5em; }
    .rooms .rooms-left .txtbox p br { display: none; }
    .rooms .content-box { position: relative; top: auto; left: auto;  transform: none; height: auto; margin: 0 auto; } 
    .rooms .content-box .white-box { display: none; } 
    .rooms .content-box .rooms-slide { position: static; width: 100%; height: auto; margin: 0 0 40px; } 
    .rooms .content-box .rooms-slide .swiper-wrapper .swiper-slide { align-items: start; } 
    .rooms .content-box .rooms-slide .swiper-wrapper .swiper-slide .rooms-img { width: 100%; height: 350px; } 
    .rooms .content-box .rooms-slide .swiper-slide .txt-box { text-align: left; width: 100%; } 
    .rooms .content-box .rooms-slide .swiper-slide .txt-box h3 { font-size: 24px; }
    .room-swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal { width: 100% !important; top: auto; bottom: 0; margin: 0; } 
    .swiper-pagination-progressbar-fill { bottom: 0; }

    .facilities { height: 550px; }
    .facilities .content-box .facilty-txt-slide { font-size: 55px; top: 50%; } 
    .facilities .content-box .view-txt p { left: 45px; font-size: 20px; } 
    .facilities .content-box .view-txt span { width: 60px; height: 60px; } 
    .facilities .content-box .facility-pagination { width: 100%; bottom: 40px; } 
    /* .facilities .content-box .facility-pagination .facility-tabs { display: none;} */
    .facilities .content-box .facility-pagination .facility-tabs div { font-size: 16px; }

    .contacts{height: auto; padding: 80px 0;}
    .contacts> div { position: static; transform: none; margin: 0 auto; flex-direction: column; }
    .contacts div .txtbox h2 { font-size: 24px; }
    .contacts div .txtbox ul li { font-size: 14px; }
    #daumRoughmapContainer1762736773633 { width: 100%; margin-top: 40px; }
}

@media screen and (max-width: 600px) {
    main .main-paginations { flex-wrap: wrap; }
    .main-pagination-progress { width: 100% !important; margin: 15px 0 0 0; height: 3px !important; }

    .about .content-box { padding: 0 20px; }

    .rooms .rooms-left { height: 250px; }
    .room-swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal { height: 3px; }

    .facilities { height: 500px; }
    .facilities .content-box .facilty-txt-slide div div> :first-child { display: none; }
    .facilities .content-box .facilty-txt-slide div div> :last-child { display: block; font-family: 'SUIT-Regular'; font-size: 14px; line-height: 1em; }
    .facilities .content-box .facility-pagination .facility-tabs { display: none; }
    .facilities .content-box .view-txt p { bottom: 100px; } 
    .facilities .content-box .view-txt span { bottom: 85px; }
    .facilities .content-box .facility-pagination { bottom: 40px; }
    .facility-swiper-pagination { height: 3px !important; }

    .contacts> div { padding: 40px 20px; }
    .contacts div .txtbox h2 { margin-bottom: 30px; text-align: center; }
}

@media all and (max-width: 480px){
    .facilities .content-box .facilty-txt-slide { /*bottom: 306px;*/ font-size: 40px; } 
    /* .contacts{height: 300px;} */
}

@media all and (max-width: 320px){
    main .txt-box h1 { font-size: 20px; }
}