@charset "utf-8";

.mainBnIn{ width: 100%; height: 100vh; background-color: #d9d9d9; position: relative;}
.mainBnSlide{ width: 100%; height: 100%; }
.mainBnSlide .swiper-slide{width: 100%; height: 100%; background-size: cover; background-position: center;}
.mainBnSlide .s1{background-image:url(../img/sub2/1/image1.jpg);}
.mainBnSlide .s2{background-image:url(../img/sub2/1/image2.jpg);}
.mainBnSlide .s3{background-image:url(../img/sub2/1/image3.jpg);}
.mainBnSlide .s4{background-image:url(../img/sub2/1/image4.jpg);}
.mainBnSlide .s5{background-image:url(../img/sub2/1/image5.jpg);}
.mainBnSlide .s6{background-image:url(../img/sub2/1/image6.jpg);}
.mainBnSlide .s7{background-image:url(../img/sub2/1/image7.jpg);}
.mainBnSlide .s8{background-image:url(../img/sub2/1/image8.jpg);}
.mainBnSlide .s9{background-image:url(../img/sub2/1/image9.jpg);}
.mainBnSlide .s10{background-image:url(../img/sub2/1/image10.jpg);}
.mainBnSlide .s11{background-image:url(../img/sub2/1/image11.jpg);}
.mainBnSlide .s12{background-image:url(../img/sub2/1/image12.jpg);}
.mainBnSlide .s13{background-image:url(../img/sub2/1/image13.jpg);}
.mainBnSlide .s14{background-image:url(../img/sub2/1/image14.jpg);}
.mainBnSlide .s15{background-image:url(../img/sub2/1/image15.jpg);}
.mainBnSlide .s16{background-image:url(../img/sub2/1/image16.jpg);}
.mainBnSlide .s17{background-image:url(../img/sub2/1/image17.jpg);}
.mainBnSlide .s18{background-image:url(../img/sub2/1/image18.jpg);}
.mainBnSlide .s19{background-image:url(../img/sub2/1/image19.jpg);}
.mainBnSlide .s20{background-image:url(../img/sub2/1/image20.jpg);}
.mainBnSlide .s21{background-image:url(../img/sub2/1/image21.jpg);}
.mainBnSlide .s22{background-image:url(../img/sub2/1/image22.jpg);}
.mainBnSlide .s23{background-image:url(../img/sub2/1/image23.jpg);}
.mainBnSlide .s24{background-image:url(../img/sub2/1/image24.jpg);}
.mainBnSlide .s25{background-image:url(../img/sub2/1/image25.jpg);}

.mainBnConIn{ position: relative; height: 100%;}

.mainBnSlide .mainBnCon{ pointer-events: none; width: 1400px; height: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; display: flex; justify-content: center; flex-direction: column; margin: 0 auto;}
.mainBnConIn .conCenter{ width: 100%; display: flex;  justify-content: space-between; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mainBnTit .mainBnLogo{ display: block; text-align: center; margin-bottom: 50px; }
.mainBnTit .mainBnLogo img{ width: 200px;}
.mainBnTit p{ font-family: 'GyeonggiR'; font-size: 14px; font-weight: 400; text-align: center; line-height: 1.5em; color: #fff; text-shadow: 1px 2px 1px #030303; writing-mode: vertical-lr;}

.mainBnBottom{ pointer-events: all; display: flex; flex-direction: column;  position: absolute; bottom: 3%; left: 50%;transform: translateX(-50%); }
.mainpage { display: flex; align-items: center; flex-direction: column;}
.rightPage{ position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.rightPage .mainpage .mainPage{ text-align: center; color: #fff !important; font-family: 'Paperlogy4'; font-size: 14px; vertical-align: middle; writing-mode: vertical-lr; display: flex; align-items: center; position: relative;}
.swiper-pagination-current, .swiper-pagination-total{ writing-mode: horizontal-tb;}
.mainpage .pageArrow{ display: flex; pointer-events: visible; }
.mainpage .pageArrow .mainSwipPrev{ margin-right: 20px;}
.swiper-pagination-current, .swiper-pagination-total{color: #fff;}
.mainSwipNext i, .mainSwipPrev i{ color: #fff;}

.mainBnBottom .scrollDown{ margin-bottom: 20px; }
.scrollDown{ position: relative;}
.scrollDown a{ display: block; padding-top: 55px;}
.scrollTxt{ display: block; width: 100%; text-align: center; color: #fff; font-family: 'Paperlogy1'; font-style: italic }
.scrollDown a span{ position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -webkit-animation: scroll 2s infinite; animation: scroll 2s infinite; box-sizing: border-box;}
@-webkit-keyframes scroll{
    0%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
    20%{
        -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    }
    40%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
}

@keyframes scroll{
    0%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
    20%{
        -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    }
    40%{
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
}

/* intro */
.introIn{ width: 1400px; margin: 120px auto 0;}
.introIn .introTit h3{ font-family: 'Paperlogy4'; font-size: 24px; color: #44484c; text-align: center; letter-spacing: 0; }
.introIn .introTit h2{ font-family: 'GyeonggiB'; font-size: 48px; color: #191919; text-align: center; }
.introIn .introTit p{ font-family: 'GyeonggiR'; font-size: 14px; color: #646a70; text-align: center; margin-top: 30px; }
.introIn .introImgList{ display: flex; justify-content: space-between; margin-top: 80px;}
.introImgList .imgListL{ width: 20%; padding-right: 15px; display: flex; align-items: flex-end;}
.introImgList .imgListL .introImg{ width: 100%; aspect-ratio: 1; background:url(../img/sub2/1/image4.jpg) no-repeat 80% 50%/cover;}
.introImgList .imgListC{ width: 60%; padding:0 15px;}
.introImgList .imgListC .introImg{ width: 100%; aspect-ratio: 1;background:url(../img/sub2/1/image14.jpg) no-repeat center/cover;}
.introImgList .imgListR{ width: 20%; padding-left: 15px;}
.introImgList .imgListR .introImg{ width: 100%; aspect-ratio: 1;background:url(../img/sub2/1/image21.jpg) no-repeat center/cover;}

/* roomInfo */
.roomInfoIn{ width: 1400px; margin: 120px auto 0;}
.roomInfoIn .roomInfo{ display: flex; justify-content: space-between; margin-bottom: 80px; }
.roomInfoIn .roomInfo .infoTxt{ width: 50%; height: 100%;}
.roomInfoIn .roomInfo .infoImg{ width: 50%; aspect-ratio: 5/4; background: url(../img/sub2/1/image1.jpg) no-repeat center/cover;}
.roomInfoIn .roomInfo .infoTit h2{ font-family: 'Paperlogy5'; font-size: 24px; color: #44484c; }

.roomResBtn{ margin-top: 60px; position: relative; }
.roomResBtn a{ font-family: 'Paperlogy4'; font-size: 16px; font-weight: 400; color: #191919; letter-spacing: 1px;}
.roomResBtn a::after{ content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #868f96; position: absolute; top:-2px; left: -5px; z-index: -1;}

/* .roomResBtn{ display: inline-block; position: absolute; bottom: 80px; left: 120px;  margin-left: 10px;}
.roomResBtn a{ display: inline-block;font-family: 'Paperlogy4'; font-size: 14px; font-weight: 400; color: #191919; letter-spacing: 1px;}
.roomResBtn a::before{ content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #cccac4; position: absolute; top:-4px; left: -8px; z-index: -1;} */

/* 떠나요 연동 */
#room_des{ padding-right: 20px;}
.room_data{ padding: 0;}
.room_tit{ display: none;}
.room_data li{ display: flex; justify-content: flex-start; align-items: center;}
.room_data li .person_limit table{ display: none;}
.room_data li .tit{ font-family: 'Paperlogy6'; font-size: 14px; color: #44484c; display: inline-block;}
.room_data li .data{ display: inline-block; padding: 0; font-family: 'Paperlogy4'; font-size: 14px; color: #656565; letter-spacing: 0;}
.room_data li .data p{ display: inline-block; font-family: 'Paperlogy4'; font-size: 14px; color: #656565; letter-spacing: 0;}
.room_data li .tit{ padding: 10px 0; width: 10%;}
.room_data li .data p::after{ content: "\00a0/\00a0";}
.room_data li .data p:last-child::after{ content: "\00a0";}

.week_date{ margin-bottom: 15px;}
.week_date p{font-family: 'Paperlogy4'; font-size: 14px; letter-spacing: 0;}

/* layoutIn */
/* .layoutIn{ width: 1400px; margin: 120px auto; }
.layoutTit h2{ font-family: 'Paperlogy4'; font-size: 48px; color: #44484c;  }
.layoutIn .layoutImg{ width: 100%; aspect-ratio: 16/5; background: url(http://rangdongstay.cdn1.cafe24.com/sub2/1/layout.jpg) no-repeat center/cover;} */

/* Room Details */
.detailIn{ width: 1400px; margin: 120px auto 0; position: relative;}
.detailIn .dtTit{ position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: 9;}
.detailIn .dtTit h2{ font-family: 'Paperlogy4'; font-size: 150px; color: #44484c; }
.detailIn .dtTit h2:last-child{color: #a6a49f; margin-top: 20px; margin-left: 390px; line-height: 0em; }
.detailIn .dtImgLst{ display: flex; justify-content: space-between;  }
.dtImgLst .dtConL{ width: 25%; aspect-ratio: 3/5; margin-top: 120px; margin-right: 20px;}
.dtImgLst .dtConL .dtImg1{ width: 100%; height: 100%; background: url(../img/sub2/1/image15.jpg) no-repeat center/cover;}
.dtImgLst .dtConC{ width: 50%;  display: flex; justify-content: space-between; margin-top: 120px; margin-right: 20px; position: relative;}
.dtImgLst .dtConC .dtImg2{ width: 49%; aspect-ratio: 1; background: url(../img/sub2/1/image12.jpg) no-repeat center/cover; position: absolute; bottom: 30px; left: 0;}
.dtImgLst .dtConC .dtImg3{ width: 48%; aspect-ratio: 1; background: url(../img/sub2/1/image14.jpg) no-repeat center/cover; position: absolute; bottom: 160px; right: 0;}
.dtImgLst .dtConR{ width: 25%; aspect-ratio: 3/5; background-color: #191919;margin-top: 120px; margin-right: 0px;}
.dtImgLst .dtConR .dtImg4{ width: 100%; height: 100%; background: url(../img/sub2/1/image2.jpg) no-repeat 50% 50%/cover;}


/* banner */
.bannerIn{ width: 1400px; margin: 120px auto; display: flex; justify-content: center; align-items: center; position: relative; }
.bannerIn .bgImg{ width: 315px; aspect-ratio: 3/4; background: url(../img/sub2/1/image22.jpg) no-repeat 70% 50%/cover;}
.bannerIn .bannerTxt{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9; /*mix-blend-mode: exclusion;*/}
.bannerIn .bannerTxt p{font-family: 'Paperlogy5'; font-size: 120px; font-weight: 500; text-align: center; color: #263238; }

.bannerResBtn{ display: inline-block; position: absolute; bottom: 80px; left: 24%;  margin-left: 10px;}
.bannerResBtn a{ display: inline-block;font-family: 'Paperlogy4'; font-size: 14px; font-weight: 400; color: #191919; letter-spacing: 1px;}
.bannerResBtn a::before{ content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #cccac4; position: absolute; top:-4px; left: -8px; z-index: -1;}

/* rooms Swip */
.roomsWrap{ width: 1400px; margin: 0 auto 120px; display: flex; justify-content: space-between;}
.roomsWrap .roomsL{ width: 50%; aspect-ratio: 4/3; padding-top: 30px; padding-left: 15px; position: relative;}
.roomsL .roomTxtSwip{ width: 100%; }
.roomsL .roomsSwipTit{ margin-bottom: 50px;}
.roomsL .roomsSwipTit h3{ font-family: 'Paperlogy4'; font-size: 24px; color: #44484c; margin-bottom: 0px; }
.roomsL .roomsSwipTit h2{ font-family: 'GyeonggiB'; font-size: 48px; color: #191919;  }
.roomsL .roomTxt p{ font-family: 'GyeonggiR'; font-size: 14px; color: #646a70; }
.roomsL .roomTxt p:last-child{ margin-top: 10px; }
.roomsL .roomsPage{ position: absolute; bottom: 0; left: 15px; display: flex; justify-content: flex-start; align-items: center;}
.roomsL .roomsPage .roomsPrev{ margin-right: 50px;}
.roomsL .roomsPage .roomsPrev i{ font-size: 30px; color: #646a70;  cursor: pointer;}
.roomsL .roomsPage .roomsNext i{ font-size: 30px; color: #191919;  cursor: pointer;}

.roomsWrap .roomsR{ width: 50%; aspect-ratio: 4/3; background-color: #030303;}
.roomsWrap .roomsR .roomsImgSwip{ width: 100%; height: 100%;}
.roomsWrap .roomsR .roomsImgSwip .swiper-slide a{ display: block; width: 100%; height: 100%; }
.roomsWrap .roomsR .roomsImgSwip .roomImg1{ background: url(../img/sub2/2/image1.jpg) no-repeat center/cover;}
.roomsWrap .roomsR .roomsImgSwip .roomImg2{ background: url(../img/sub2/2/image2.jpg) no-repeat center/cover;}
.roomsWrap .roomsR .roomsImgSwip .roomImg3{ background: url(../img/sub2/2/image4.jpg) no-repeat center/cover;}
.roomsWrap .roomsR .roomsImgSwip .roomImg4{ background: url(../img/sub2/2/image7.jpg) no-repeat center/cover;}
.roomsWrap .roomsR .roomsImgSwip .roomImg5{ background: url(../img/sub2/2/image3.jpg) no-repeat center/cover;}
.roomsWrap .roomsR .roomsImgSwip .roomImg6{ background: url(../img/sub2/2/image9.jpg) no-repeat center/cover;}
.roomsWrap .roomsR .roomsImgSwip .roomImg7{ background: url(../img/sub2/2/image12.jpg) no-repeat center/cover;}
.roomsWrap .roomsR .roomsImgSwip .roomImg8{ background: url(../img/sub2/1/image1.jpg) no-repeat center/cover;}

/* --------------------------------------------------- 반응형  --------------------------------------------------- */

@media all and (max-width: 1400px){
    .mainBnSlide .mainBnCon{width: 95%;}
    .bannerIn{width: 95%;}
    .introIn{ width: 95%;}
    .layoutIn{ width: 95%;}
    .roomInfoIn{ width: 95%;}
    .detailIn{ width: 95%;}
    .roomsWrap{ width: 95%;}
}

@media all and (max-width: 1024px){

    /* banner */
    .bannerIn .bannerTxt p{ font-size: 90px;}
    .bannerResBtn{left: 20%; bottom: 100px;}
    .introIn .introImgList{ margin-top: 50px;}
    .introImgList .imgListL{ padding-right: 5px;}
    .introImgList .imgListC{ padding: 0 5px;}
    .introImgList .imgListR{ padding-left: 5px;}

    /* 떠나요 */
    
    .room_data li{ flex-direction: column; align-items: flex-start;}
    .room_data li .tit{ width: auto; padding: 20px 0 10px;}
    .room_data li .data p{display: block;}
    .room_data li .data p::after{content: "\00a0";}
    .room_data li .data{display: block;}

    /* room detail */
    .dtImgLst .dtConL{margin-top: 64px;}
    .dtImgLst .dtConC{ margin-top: 64px;}
    .dtImgLst .dtConR{ margin-top: 64px;}
    .dtImgLst .dtConC .dtImg3{ bottom: 120px;}
    .detailIn .dtTit{ top: -72px;}
    .detailIn .dtTit h2{ font-size: 120px;}
    .detailIn .dtTit h2:last-child{ margin-left: 250px;}

    /* rooms swip */
    .roomsWrap .roomsL{ aspect-ratio: 1;}
    .roomsWrap .roomsR{ aspect-ratio: 1;}
    .roomsL .roomsSwipTit{ margin-bottom: 30px;}
    .roomsL .roomsSwipTit h3{ font-size: 18px;}
    .roomsL .roomsSwipTit h2{ font-size: 36px;}


}

@media all and (max-width: 768px){

    /* intro */
    .introIn .introTit h3{ font-size: 18px;}
    .introIn .introTit h2{ font-size: 36px;}
    .introIn .introTit p{ margin-top: 30px;}

    /* roomInfo */
    .roomInfoIn{ margin: 50px auto 0;}
    .roomInfoIn .roomInfo{ flex-direction: column; margin-bottom: 50px;}
    .roomInfoIn .roomInfo .infoTxt{ width: 100%;}
    .roomInfoIn .roomInfo .infoImg{ width: 100%;}
    .roomResBtn{ margin-top: 30px; margin-bottom: 50px;}
    .roomInfoIn .roomInfo .infoImg{ aspect-ratio: 16 / 9;}

    /* room detail */
    .detailIn .dtTit h2{ font-size: 72px;}
    .dtImgLst .dtConL{ margin-top: 10px;}
    .dtImgLst .dtConC{ margin-top: 10px;}
    .dtImgLst .dtConR{ margin-top: 10px;}
    .detailIn .dtTit h2:last-child{ margin-left: 200px;}
    .dtImgLst .dtConC .dtImg3{ bottom: 70px;}
    .dtImgLst .dtConC .dtImg2{ bottom: 10px;}
    

    /* banner */
    .bannerIn .bgImg{ width: 200px;}
    .bannerIn .bannerTxt p{ font-size: 60px;}
    .bannerResBtn{ left: 30%; bottom: 60px; display: none;}

    /* rooms swip */
    .roomsWrap{ flex-direction: column;}
    .roomsWrap .roomsL{ width: 100%; aspect-ratio: 16/5; margin-bottom: 30px; padding: 0;}
    .roomsWrap .roomsR{ width: 100%; aspect-ratio: 4/3;}
    .roomsL .roomsPage .roomsNext i{ font-size: 24px;}
    .roomsL .roomsPage .roomsPrev{ margin-right: 30px;}
    .roomsL .roomsPage .roomsPrev i{ font-size: 24px;}
    .roomsL .roomsPage{ left: 0;}
    

}

@media all and (max-width: 520px){
    .mainBnIn{ height: 75vh;}

    .week_date p{ font-size: 12px;}
    #room_des{ padding-right: 0;}

    .introIn .introTit p{ font-size: 13px;}


    /* room detail */
    .detailIn .dtTit{ top: -58px;}
    .detailIn .dtTit h2{ font-size: 60px;}
    .detailIn .dtTit h2:last-child{ margin-left: 100px; color: #ededed;}
    .detailIn .dtImgLst{ flex-direction: column;}
    .dtImgLst .dtConL{ width: 100%; aspect-ratio: 16/9;}
    .dtImgLst .dtConC{ flex-direction: column; width: 100%;}
    .dtImgLst .dtConC .dtImg2{ position: relative; top: 0; left: 0; width: 100%; aspect-ratio: 16/9; margin-bottom: 10px;}
    .dtImgLst .dtConC .dtImg3{ position: relative; top: 0; left: 0; width: 100%; aspect-ratio: 16/9;}
    .dtImgLst .dtConR{ width: 100%; aspect-ratio: 16/9;}

    .bannerIn{ margin: 80px auto;}
    .bannerIn .bgImg{ width: 150px;}
    .bannerIn .bannerTxt p{ font-size: 36px; color: #000;}
    .bannerResBtn{ left: 20px; bottom: 0px; display: none;}

    /* rooms swip */
    .roomsWrap .roomsL{ padding-top: 0; padding-left: 0; aspect-ratio: 16/10;}
    .roomsL .roomsSwipTit{ margin-bottom: 20px;}
    .roomsL .roomsSwipTit h3{ font-size: 16px; margin-bottom: 6px;}
    .roomsL .roomsSwipTit h2{ font-size: 24px;}
    .roomsL .roomTxt p{ font-size: 14px;}
    .roomsL .roomsPage .roomsPrev{ margin-right: 30px;}

}

@media all and (max-width: 320px){
    .roomsWrap .roomsL{ aspect-ratio: 16/12;}
}