@charset "utf-8";

.mainBnSwip .swiper-slide.s1{ background: url(../img/sub2/3/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s2{ background: url(../img/sub2/3/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s3{ background: url(../img/sub2/3/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s4{ background: url(../img/sub2/3/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s5{ background: url(../img/sub2/3/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s6{ background: url(../img/sub2/3/image6.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s7{ background: url(../img/sub2/3/image7.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s8{ background: url(../img/sub2/3/image8.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s9{ background: url(../img/sub2/3/image9.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s10{ background: url(../img/sub2/3/image10.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s11{ background: url(../img/sub2/3/image11.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s12{ background: url(../img/sub2/3/image12.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s13{ background: url(../img/sub2/3/image13.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s14{ background: url(../img/sub2/3/image14.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s15{ background: url(../img/sub2/3/image15.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s16{ background: url(../img/sub2/3/image16.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s17{ background: url(../img/sub2/3/image17.jpg) no-repeat center/cover;}

.introTit h3{ text-align: center; color: #A77C52;}
.introTit h2{ text-align: center; color: #A77C52;}
#introSec .introTxtWrap{ width: 640px; aspect-ratio: 16/9; position: absolute; top:0; left: 50%; transform: translateX(-50%); background: #EDE1D1; padding: 60px 50px;}
.introImgWrap .introImg{ background: url(../img/sub2/3/image4.jpg) no-repeat center/cover;}

#room_daily_price2{ width: 1440px; margin: 90px auto 60px;}
.viewBtn{ margin: 0 auto;}

/* ddnayo */
.room_tit{ display: none; }
.room_data{padding-left: 0; }
.room_data li{ display: flex; align-items: center; padding: 0; margin-bottom: 12px;}
.room_data li .data{ display: flex; align-items: center; padding: 0; font-size: 14px; color: #A77C52;}
.room_data li .data p{ font-size: 14px; color: #A77C52;}
.room_data li .data p:after{ content: "\00a0/\00a0"}
.room_data li .data p:last-child:after{ content: "\00a0";}
.room_data li .tit{ font-size: 15px; font-weight: bold; padding: 0; margin-right: 10px; color: #A77C52;}
.room_data li .person_limit table{ display: none;}
.room_data :nth-child(3) .tit{ flex-shrink: 0;}

.room_rprice{ padding: 0;}
.room_rprice table .head{ background: #C1A78C;}
.room_rprice table .head td{ color: #FAF9F4;}
.room_rprice table tr{ background: #FAF9F4;}
.room_rprice table tr.state{ background: #EDE1D1;}

/* roomDetail */
#romDetail{ width: 100%; padding: 0 60px; margin: 120px auto; }
#romDetail .detailIn{ width: 1440px; margin: 0 auto; display: flex; justify-content: space-between;}
.detailIn .detTabContainer{ width: 25%; display: flex; flex-direction: column; justify-content: space-between;}
.detTabContainer .detailTit{ width: 100%;}
.detTabContainer .detailTit:after{ content: ''; display: block; width: 50px; height: 2px; background: #A77C52; margin-top: 10px;}

.detTabTop .detailTit h2{ font-family: 'iceHimchan'; font-size: 42px; color: #A77C52; }
.detTabContainer > .detTabTop  > p{ font-size: 14px; color: #C1A78C; margin: 20px 0px 10px; }
.detTabTop .tabMenu{ display: flex; justify-content: flex-start; align-items: center; width: 50%; margin-bottom: 30px;}
.tabMenu .listCon{ display: flex; justify-content: center; align-items: stretch;  flex-direction: column; margin: 0 15px 0 0;position: relative; cursor: pointer;}
.tabMenu .listCon span{ display: none; margin-top: 10px; font-size: 14px; font-weight: 400; color: #C1A78C; text-align: center; position: absolute; bottom: 0; left: 50%; }
.tabMenu .listCon:hover span{ display: block; width: 100%; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); letter-spacing: 0;}
.tabMenu .listCon.open span{ display: block; width: 100%; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); letter-spacing: 0;}
.tabMenu .listCon .space{ width: 90px; aspect-ratio:1; background-color: #969696; border-radius: 20px;}
.tabMenu .listCon .space.img1{ background: url(../img/sub2/3/image11.jpg)no-repeat center/cover;}
.tabMenu .listCon .space.img2{ background: url(../img/sub2/3/image8.jpg)no-repeat center/cover;}
.tabMenu .listCon .space.img3{ background: url(../img/sub2/3/image15.jpg)no-repeat 80% 50%/cover;}
.tabMenu .listCon .space.img4{ background: url(../img/sub2/3/image1.jpg)no-repeat center/cover;}

.detTabBot p{ font-size: 14px; color: #C1A78C; }

.detailIn .detailImgWrap{ width: 75%; display: flex; justify-content: flex-end; align-items: center;}
.tabCon .detailCon{display: none;}
.tabCon .detailCon.open{ display: block;}
.detailCon .detImgLstWrap{ width: 100%; display: flex; flex-direction: column; }
.detImgLstWrap .detImgLst{ display: flex; align-items: flex-end;justify-content: center; }
.detImgLst .width169{ width: 28vw; aspect-ratio: 16/9; background: #A77C52; margin-right: 20px;}
.detImgLst .height169{ width: 16vw; aspect-ratio: 9/16; background: #969696; margin-right: 20px;}
.detImgLst .width1{ width: 16vw; aspect-ratio: 1; background: #C1A78C;}
.detImgLstWrap .detImgLst2{ display: flex; align-items: flex-start;justify-content: center; margin-top: 20px;}
.detImgLst2 .width480{ width: 33vw; aspect-ratio: 16/9; background: #EDE1D1; margin-right: 20px;}
.detImgLst2 .height270{ width: 19vw; aspect-ratio: 9/16; background: #333333;}

.detImgLst .width169.detImg1{ background: url(../img/sub2/3/image9.jpg)no-repeat center/cover;}
.detImgLst .height169.detImg2{ background: url(../img/sub2/3/image14.jpg)no-repeat 90% 50%/cover;}
.detImgLst .width1.detImg3{ background: url(../img/sub2/3/image11.jpg)no-repeat center/cover;}
.detImgLst2 .width480.detImg4{ background: url(../img/sub2/3/image10.jpg)no-repeat center/cover;}
.detImgLst2 .height270.detImg5{ background: url(../img/sub2/3/image9.jpg)no-repeat 50% 50%/cover;}

.detImgLst .width169.detImg6{ background: url(../img/sub2/3/image2.jpg)no-repeat center/cover;}
.detImgLst .height169.detImg7{ background: url(../img/sub2/3/image3.jpg)no-repeat center/cover;}
.detImgLst .width1.detImg8{ background: url(../img/sub2/3/image4.jpg)no-repeat center/cover;}
.detImgLst2 .width480.detImg9{ background: url(../img/sub2/3/image7.jpg)no-repeat center/cover;}
.detImgLst2 .height270.detImg10{ background: url(../img/sub2/3/image6.jpg)no-repeat 50% 50%/cover;}

.detImgLst .width169.detImg11{ background: url(../img/sub2/3/image16.jpg)no-repeat center/cover;}
.detImgLst .height169.detImg12{ background: url(../img/sub2/3/image15.jpg)no-repeat center/cover;}
.detImgLst .width1.detImg13{ background: url(../img/sub2/3/image15.jpg)no-repeat center/cover; display: none;}
.detImgLst2 .width480.detImg14{ background: url(../img/sub2/3/image15.jpg)no-repeat center/cover;}
.detImgLst2 .height270.detImg15{ background: url(../img/sub2/3/image16.jpg)no-repeat 65% 50%/cover;}

.detImgLst .width169.detImg16{ background: url(../img/sub2/3/image1.jpg)no-repeat center/cover;}
.detImgLst .height169.detImg17{ background: url(../img/sub2/3/image5.jpg)no-repeat 35% 50%/cover;}
.detImgLst .width1.detImg18{ background: url(../img/sub2/3/image2.jpg)no-repeat 100% 50%/cover; }
.detImgLst2 .width480.detImg19{ background: url(../img/sub2/3/image12.jpg)no-repeat center/cover;}
.detImgLst2 .height270.detImg20{ background: url(../img/sub2/3/image13.jpg)no-repeat center/cover;}


#banner{ height: 450px; background: url(../img/sub2/3/image5.jpg) no-repeat center/cover fixed; }
#banner .bannerIn{ align-items: center; justify-content: center;}
.bannerIn .banTitWrap{ justify-content: center; align-items: center;}
.banTitWrap h2{ font-size: 64px; margin-bottom: 30px;}
.banTitWrap .resBtn2{ border-bottom: 0;}

#roomSec{ margin-top:0;}

/* 반응형 */
@media all and (max-width: 1440px){
    .introImgWrap .introImg{ width: 100%;}
    #room_daily_price2{ width: 100%;}

    #romDetail .detailIn{ width: 100%;}
}

@media all and (max-width: 1024px) {
    #romDetail{ padding: 0 30px;}
    .detTabContainer > .detTabTop > p{ font-size: 12px;}
    .detTabBot p{ font-size: 10px;}
}
@media all and (max-width: 768px){
    #introSec .introTxtWrap{ width: 100%; aspect-ratio: auto; position: relative;}

    #romDetail{ margin: 80px auto;}
     #romDetail .detailIn { flex-direction: column;}
     .detailIn .detTabContainer{ width: 100%;}
     .detailIn .detailImgWrap{ width: 100%; justify-content: center;}
     .detTabTop{ display: flex; flex-wrap: wrap; justify-content: center;}
     .detTabBot p{ display: none;}
     .detTabContainer > .detTabTop > p{ display: none;}
     .detTabContainer .detailTit{ margin-bottom: 10px;}
     .detTabTop .tabMenu{ width: 30%; margin-bottom: 45px;}
     .detTabTop .detailTit h2{ text-align: center;}
     .detTabContainer .detailTit:after{ margin: 5px auto; display: none;}

     /* .detailCon .detImgLstWrap{ width: 90%; margin: 0 auto;} */
     .detImgLst .width169{ width: 34vw; aspect-ratio: 4/3;}
     .detImgLst .height169{ width: 25vw; aspect-ratio: 3/4;}
     .detImgLst .width1{ width: 25vw;}
     .detImgLst2 .width480{ width: 44vw; aspect-ratio: 4/3;}
     .detImgLst2 .height270{ width: 33vw; aspect-ratio: 3/4;}

     .bannerIn .banTitWrap{ flex-direction: column;}
}

@media all and (max-width: 520px){
    .mainBnCon h2{ font-size: 20px; text-align: center;}

    #room_daily_price2{ width: 100%;}
    #introSec .introTxtWrap{ padding: 30px 20px;}
    .room_data li{ flex-direction: column; align-items: flex-start;}

    #room_daily_price2{ padding:  0 20px; margin: 90px auto 30px;}
    .week_date p{ font-size: 14px; padding: 0;}
    
    #romDetail{ padding: 0 20px;}
    .detTabTop .tabMenu{ justify-content: flex-start; width: 160px; margin-bottom: 35px;}
    .tabMenu .listCon{ margin: 0 10px;}
    .tabMenu .listCon .space{ width: 60px;}
    .detImgLstWrap .detImgLst{ flex-direction: column;}
    .detImgLst .width169{ width: 100%; aspect-ratio: 16/9; margin-right: 0;}
    .detImgLst .height169{ width: 100%; aspect-ratio: 16/9; margin: 10px auto;}
    .detImgLst .width1{ width: 100%; aspect-ratio: 16/9;}
    .detImgLstWrap .detImgLst2{ flex-direction: column; margin-top: 10px;}
    .detImgLst2 .width480{ width: 100%; aspect-ratio: 16/9;}
    .detImgLst2 .height270{ width: 100%; aspect-ratio: 16/9; margin: 10px auto;}
    .detImgLst2 .width480.detImg14{ display: none;}
    .detImgLst2 .height270.detImg15{ display: none;}
    .detImgLst .width1.detImg18{ display: none;}
    .detImgLst .height169.detImg17{ margin-bottom: 0;}
    

    .tabCon{ width: 100%;}

    #banner{ height: 300px;}
    .banTitWrap h2{ font-size: 42px;}
}

@media all and (max-width: 320px){
    .week_date p{ font-size: 11px;}
    .room_data li .data{ flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    .room_data li .data p:after{ display: none;}
    .room_rprice table .rprice .sale{ font-size: 12px;}

    .detTabTop .tabMenu{ width: 140px;}
    .tabMenu .listCon{ margin: 0 5px;}
}