@charset "utf-8";

/* mainBn */
.mainBnSwip .swiper-slide.s1{ background: url(../img/sub2/1/image1.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s2{ background: url(../img/sub2/1/image2.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s3{ background: url(../img/sub2/1/image3.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s4{ background: url(../img/sub2/1/image4.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s5{ background: url(../img/sub2/1/image5.jpg) no-repeat center/cover;}
.mainBnSwip .swiper-slide.s6{ background: url(../img/sub2/1/image6.jpg) no-repeat center/cover;}

/* roomInfo */
#roomInfo{ width: calc(100% - 320px); margin: 200px auto 80px;}
#roomInfo .infoConWrap{ display: flex; justify-content: space-between;}
.infoConL{ position: relative; width: 50%; display: flex; justify-content: center;}
.infoConL::after{ content: ''; display: block; width: 350px; aspect-ratio: 4/3; background: url(../img/deco2.png) no-repeat center/cover; transform: rotate(-220deg); position: absolute; top: 0; left: 0;}
.infoConL .infoImg{ width: 68%; aspect-ratio: 3/4; background: url(../img/sub2/1/image2.jpg) no-repeat center/cover; border-radius: 300px 300px 0 0;}
.infoConWrap .infoConR{ width: 50%; display: flex; justify-content: space-between; flex-direction: column; position: relative; }
.infoConWrap .infoConR::before{ content: ''; width: 120%; aspect-ratio: 16/7.9; position: absolute; bottom: 0; right: 0; background: #ecf0f6; z-index: -1;}
/* .infoConR .infoTit{ margin-bottom: 60px;} */
.infoTit h2{ font-family: "Noto Serif KR", serif; font-size: 42px; text-align: right; }
.infoConR .infoTxt{ display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 50px 0; padding: 100px;}
.infoTxt .roomResBtn{ width: 180px; height: 50px; background: #333;}
.infoTxt .roomResBtn a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;  font-family: "Cormorant", serif; font-size: 16px; text-align: center; color: #FAFAF8;}

/* ddnayo */
#room_des{ width: 100%;}
.room_tit{ display: none;}
.room_data{ display: flex; flex-direction: column; gap: 10px 0;}
.room_data li{ display: flex; align-items: center; padding: 0; gap: 10px 20px;}
.room_data{ padding-left: 0;}
.room_data li .tit{ padding: 0; font-size: 15px; font-weight: 500; color: #C5C5C5; flex-shrink: 0;}
.room_data li .data{ display: flex; justify-content: center; align-items: center; padding: 0; font-family: "Noto Sans KR", sans-serif; font-size: 14px; color: #333;}
.room_data li .data p:last-child{ display: none;}
.room_data li .data p::after{ content: "\00a0/\00a0"; }
.room_data li .data p:nth-child(2):after{ content: "\00a0"; }
.room_data li .data p:last-child:after{ content: "\00a0"; }
.room_data li .person_limit table{ display: none;}

#room_daily_price2{ width: 100%;}
.room_rprice{ padding: 0;}

/* roomCal */
#roomCal{ width: calc(100% - 320px); margin: 0px auto;}

/* roomDetail */
#roomDetail{ width: calc(100% - 320px); margin: 200px auto;}
#roomDetail .detailTit{ display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 50px;}
#roomDetail .detailTit::before{ content:url(../img/deco1.png); display: block;}
.detailTit h2{ font-family: "Cormorant", serif; font-size: 3.75rem; line-height: 1.25em; }
#roomDetail .detailWrap{ display: flex; justify-content: space-between; flex-direction: column; gap: 40px 0px;  }
.detailWrap .detailLst{ display: flex; justify-content: space-between; gap: 0 40px;}
.detailWrap .detailLst div{ position: relative;  }
.detailWrap .detailLst div p{ width: 230px; height: 60px;display: flex; justify-content: center; align-items: center; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: #FAFAF8; font-family: "Cormorant", serif; font-size: 16px; font-weight: 600;}
.detailLst .detailConS{ width: 40%; aspect-ratio: 16/9; }
.detailLst .detailConS.ds1{ background: url(../img/sub2/1/image1.jpg) no-repeat center/cover;}
.detailLst .detailConS.ds2{ background: url(../img/sub2/1/image6.jpg) no-repeat center/cover;}
.detailLst .detailConL{ width: 60%; aspect-ratio: 16/9; }
.detailLst .detailConL.dl1{ background: url(../img/sub2/1/image2.jpg) no-repeat center/cover;}
.detailLst .detailConL.dl2{ background: url(../img/sub2/1/image5.jpg) no-repeat center/cover;}

/* 반응형 */

@media all and (max-width: 1440px){
    #roomInfo{ width: 100%; padding: 0 160px; }
    .infoConL::after{ width: 250px;}
    .infoConR .infoTxt{ padding: 70px 100px;}
    .infoConWrap .infoConR{ justify-content: flex-end;}
    .infoConR .infoTit{ margin-bottom: 40px;}

    #roomCal{ width: 100%; padding: 0 160px;}
    #roomDetail{ width: 100%; padding: 0 160px;}
}
@media all and (max-width: 1024px){
    #roomInfo{ width: 100%; padding: 0 30px; margin: 80px auto;}
    .infoConL::after{ width: 200px;}
    .infoTit h2{ font-size: 30px;}
    .infoConR .infoTxt{ padding: 40px 20px; gap: 30px 0;}
    .infoConL .infoImg{ width: 88%;}
    .infoTxt .roomResBtn{ width: 160px; height: 40px;}

    /* ddnayo */
    .room_data li .tit{ font-size: 14px;}
    .room_data li .data{ font-size: 13px;}
    .room_data li .data p{ font-size: 13px;}

    #roomCal{ width: 100%; padding: 0 30px;}

    #roomDetail{ width: 100%; padding: 0 30px; margin: 120px auto;}
    .detailTit h2{ font-size: 48px;}
    .detailWrap .detailLst div p{ width: 180px; height: 45px; font-size: 13px;}
}
@media all and (max-width: 768px){
    .infoConWrap .infoConR::before{ aspect-ratio: 4/3.3;}
    .room_data li .data{ flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 5px 0;}
    .infoTit h2{ font-size: 24px;}
    .room_data li .data p::after{ display: none;}

    #roomDetail .detailWrap{ gap: 20px 0;}
    .detailWrap .detailLst{ gap: 0 20px;}
    #roomDetail .detailTit::before{ margin-bottom: 10px;}
    .detailTit h2{ font-size: 36px;}
}
@media all and (max-width: 520px){
    #roomInfo{ margin: 80px auto 40px;}
    #roomInfo .infoConWrap{ flex-direction: column; gap: 30px 0;}
    .infoConL{ width: 100%;}
    .infoConWrap .infoConR{ width: 100%;}
    .infoConR .infoTit{ margin-bottom: 30px;}
    .infoTit h2{ text-align: center;}
    .infoConWrap .infoConR::before{ top: 25%; width: 100%; }
    .infoTxt .roomResBtn{ width: 100%;}

    /* ddnayo */
    .week_date{ display: flex; align-items: center; justify-content: space-evenly; margin-bottom: 10px;}
    .week_date p{ font-size: 14px; font-weight: 600; color: #333; padding: 0 5px;}
    .week_date .prv{ width: 1.875rem; height: auto; aspect-ratio: 1; background-position: 0; background-size: 200%; }
    .week_date .next{ width: 1.875rem; height: auto; aspect-ratio: 1; background-position: -30px 0px; background-size: 200%; }

    .detailWrap .detailLst{ flex-direction: column; gap: 20px 0}
    .detailLst .detailConL{ width: 100%;}
    .detailLst .detailConS{ width: 100%;}
    .detailTit h2{ font-size: 30px;}
}

@media all and (max-width: 375px){
    .infoConR .infoTit{ margin-bottom: 0px;}
    .infoConWrap .infoConR::before{ top: 20%;}
}

@media all and (max-width: 320px){
    .infoConWrap .infoConR::before{ top: 16%;}
    .infoTit h2{ font-size: 20px;}
    .week_date p{ font-size: 11px;}
    .week_date .prv{ width: 1.5rem;}
    .week_date .next{ width: 1.5rem; background-position: -24px 0;}
    .room_data li .data{ font-size: 11px;}
    .room_data li .data p{ font-size: 11px;}
    .room_data li .tit{ font-size: 12px;}
}