/* section1 */
#section1 .text-wrap{ position: absolute; width: 355px; height: 255px; top: 32%; left: 0; right: 0; margin: 0 auto; z-index: 10; text-align: center; text-shadow: 2px 0 2px rgba(51,51,51,0.6);}
#section1 .text-wrap h3{ font-size: 130px; line-height: 130px; padding-bottom: 15px; }
#section1 .text-wrap p.kob{ font-size: 30px; padding-bottom: 35px;}
#section1 .text-wrap p.kor{ font-size: 20px; word-break: keep-all; line-height: 24px;}


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section1{ margin-top: 75px;}

    #section1 .text-wrap{ position: absolute; width: 175px; height: 125px; top: 32%; left: 0; right: 0; margin: 0 auto; z-index: 10; text-align: center; text-shadow: 2px 0 2px rgba(51,51,51,0.6);}

    #section1 .text-wrap h3{ font-size: 30px; line-height: 30px; padding-bottom: 7.5px; }
    #section1 .text-wrap p.kob{ font-size: 12px; padding-bottom: 10px;}
    #section1 .text-wrap p.kor{ font-size: 10px; display: none;}
}




/* section2 */
#section2{ padding: 80px 0; position: relative;}
#section2 .deco{ position: fixed; font-size: 250px; transform: rotate(90deg); opacity: 0; top: 550px; left: -350px; pointer-events: none;} 
#section2 .deco.visible{ opacity: .1!important;  }

#section2 .wrap1200 { overflow: hidden;}
#section2 .wrap1200 > .fl{ height: 600px; }
#section2 .wrap1200 .fl .img{ width: 100%; height: 600px; padding-top: 0;}

#section2 .wrap1200 .fl.roomtext{ padding-left: 55px; padding-top: 30px;}
#section2 .wrap1200 .fl.roomtext h3{ font-size: 50px; padding-bottom: 55px;}

#section2 .roomtext .slidedown{ padding-bottom: 55px; display: block;}
#section2 .roomtext .slidedown li{ padding-bottom: 15px; overflow: hidden;}
#section2 .roomtext .slidedown li:nth-child(4), #section2 .roomtext .slidedown li:nth-child(5){ padding-bottom: 30px;}


#section2 .roomtext .slidedown p{ display: inline-block; line-height: 20px; word-break: keep-all; font-size: 14px;}

#section2 .roomtext .slidedown p.p-tit{ width: 125px;}
#section2 .roomtext .slidedown p.p-info{ width: calc(100% - 125px);}
#section2 .roomtext .slidedown p.p-info span{ font-size: 12px; }

#section2 .clear{  clear: both; padding-top: 80px; text-align: center;}
#section2 .clear iframe{ height: 400px!important;}
#section2 .clear .btn02{ margin-top: 0;}


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section2{ padding: 40px 0; position: relative;}
    #section2 .deco{ position: absolute; font-size: 125px; top: 440px; left: -500px; pointer-events: none; width: 1000px; opacity: .1;} 

    #section2 .wrap1200 { overflow: visible;}
    #section2 .wrap1200 > .fl{ height: auto; }
    #section2 .wrap1200 .fl .img{ width: 100%; height: 82.67vw; padding-top: 0;}

    #section2 .wrap1200 .fl.roomtext{ padding-left: 0; padding-top: 22.5px;}
    #section2 .wrap1200 .fl.roomtext img{ width: 40px;}
    #section2 .wrap1200 .fl.roomtext h3{ font-size: 30px; padding-bottom: 35px;}
    #section2 .wrap1200 .fl.roomtext h3 span{ font-size: 30px;}



    #section2 .roomtext .slidedown{ padding-bottom: 0; }
    #section2 .roomtext .slidedown li{ padding-bottom: 10px; overflow: hidden; padding-left: 10px;}
    #section2 .roomtext .slidedown li:nth-child(4), #section2 .roomtext .slidedown li:nth-child(5){ padding-bottom: 10px;}
    
    #section2 .roomtext .slidedown p.p-tit{ width: 67.5px; font-size: 12px;}
    #section2 .roomtext .slidedown p.p-info{ font-size: 10px;}
    #section2 .roomtext .slidedown p.p-roomtext{ width: calc(100% - 67.5px);}
    #section2 .roomtext .slidedown p.p-roomtext span{ font-size: 10px; }

    #section2 .clear{  clear: both; padding-top: 40px; text-align: center;}
    #section2 .clear .btn02{ margin-top: 20px;}
}


/* section3 */
#section3 .top { position: relative; background-color: #333;}
#section3 .top .img{ padding-top: 0; height: 440px; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; opacity: .5;}
#section3 .top h3{ position: absolute; top: 45%; width: 100%; text-align: center; font-size: 50px; text-shadow: 2px 0 2px rgba(51,51,51,0.6);}

#section3 .mid{ background-image: url(../img/room/section3-bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0;}

#section3 .mid ul{ overflow: hidden; width: 100%;}
#section3 .mid ul li{ height: 440px; margin-bottom: 30px;}
#section3 .mid ul li:nth-child(2n - 1){ padding-right: 15px;}
#section3 .mid ul li:nth-child(2n){ padding-left: 15px;}
#section3 .mid ul li.big{ width: 660px;}
#section3 .mid ul li.small{ width: calc(100% - 660px);}
#section3 .mid ul li .img{ width: 100%; height: 100%; padding-top: 0; }


/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section3 .top .img{ padding-top: 0; height: 40.00vw;}
    #section3 .top h3{ position: absolute; top: 40%; width: 100%; font-size: 25px;}

    #section3 .mid{ background-image: url(../img/room/m-section3-bg.jpg); padding: 30px 0 15px;}
    #section3 .mid ul li{ height: 33.33vw; margin-bottom: 15px;}
    #section3 .mid ul li:nth-child(2n - 1){ padding-right: 7.5px;}
    #section3 .mid ul li:nth-child(2n){ padding-left: 7.5px;}

    #section3 .mid ul li.big{ width: 70%;}
    #section3 .mid ul li.small{ width: 30%;}
}






#section4{ text-align: center; padding: 80px 0; position: relative;}
#section4::after{ position: absolute; content: ''; width: calc(100% - 60px); left: 0; right: 0; margin: 0 auto; bottom: 0; height: 1px; background-color: #263a4f; opacity: .4;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section4{ text-align: center; padding: 30px 0; position: relative;}
    #section4::after{ position: absolute; content: ''; width: 100%; left: 0; right: 0; margin: 0 auto; bottom: 0; height: 1px; background-color: #263a4f; opacity: .4;}

    .room-next, .room-prev {top: 50%; }
}






/* animation */
#one .img, #two .img, #three .img , #four .img{ position: relative; top: 100px; opacity: 0; transition: 1s;}
#two .img{transition-delay: .5s;}
#three .img{transition-delay: 1s; }
#four .img{ transition-delay: 1.5s;}
#one .img.visible, #two .img.visible, #three .img.visible, #four .img.visible{ top: 0; opacity: 1!important;  }

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #one .img, #two .img, #three .img, #four .img{ top: 0; opacity: 1!important;  }

}