@charset "utf-8";


/*main banner*/
.main-bn-swip .s1{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image1.jpg);}
.main-bn-swip .s2{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image2.jpg);}
.main-bn-swip .s3{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image3.jpg);}
.main-bn-swip .s4{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image4.jpg);}
.main-bn-swip .s5{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image5.jpg);}
.main-bn-swip .s6{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image6.jpg);}
.main-bn-swip .s7{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image7.jpg);}
.main-bn-swip .s8{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image8.jpg);}
.main-bn-swip .s9{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image9.jpg);}
.main-bn-swip .s10{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image10.jpg);}
.main-bn-swip .s11{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image11.jpg);}
.main-bn-swip .s12{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image12.jpg);}
.main-bn-swip .s13{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image13.jpg);}
.main-bn-swip .s14{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image14.jpg);}
.main-bn-swip .s15{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image15.jpg);}
.main-bn-swip .s16{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image16.jpg);}
.main-bn-swip .s17{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image17.jpg);}
.main-bn-swip .s18{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image18.jpg);}

.rooms-thumb{width:252px;height:252px;margin:0 auto 50px;border-radius:50%;background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image10.jpg);background-size:cover;background-position:center center;background-repeat:no-repeat;}
.rooms-info-img{width:50%;height:452px;background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image5.jpg);background-size:cover;background-position:center center;background-repeat:no-repeat;}

.rooms-details-conbx:nth-child(1) .rooms-details-img .bg{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image8.jpg);}
.rooms-details-conbx:nth-child(2) .rooms-details-img .bg{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image12.jpg);}
.rooms-details-conbx:nth-child(3) .rooms-details-img .bg{background-image:url(../img/sub3/3/image1.jpg);}
.rooms-details-conbx:nth-child(4) .rooms-details-img .bg{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image17.jpg);}

.rooms-details-conbx:nth-child(1) .rooms-details-img.other .bg{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image1.jpg);transition:.8s;}
.rooms-details-conbx:nth-child(2) .rooms-details-img.other .bg{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image11.jpg);transition:.8s;}
.rooms-details-conbx:nth-child(3) .rooms-details-img.other .bg{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image3.jpg);transition:.8s;}
.rooms-details-conbx:nth-child(4) .rooms-details-img.other .bg{background-image:url(http://mattaniahp.cdn1.cafe24.com/sub2/2/image18.jpg);transition:.8s;}


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

@media screen and (min-width:1px) and (max-width:1200px){


  .rooms-info{width:100%;padding:50px 20px;}
  .rooms-rate{width:100%;padding:0 20px;}
  .rooms-details{width:100%;padding:0 20px;}


  /*others*/
  .others-in{width:100%;padding:0 20px;}
  .others-tab{width:20%;}
  .others-tab>ul{width:100%;}
  .others-con{width:75%;}
  .others-conbx .others-img{width:60%;}
  .others-txt{width:35%;text-align:right;}
}

@media screen and (min-width:1px) and (max-width:1024px){

  .rooms-thumb{width:200px;height:200px;}
  .rooms-info{flex-direction:column;}
  .rooms-info-img{width:80%;height:350px;margin-bottom:30px;}
  .rooms-info-txt{width:80%;padding-left:0;}

  /*rate*/
  .rooms-rate #tit{font-size:18px;}
  .rooms-rate table .head td{padding:15px 0;}
  .rooms-rate .room_rprice table .ss td{padding:15px 0;}
  .rooms-rate .room_rprice table .rprice td{padding:15px 0;}
  .rooms-rate table td{font-weight:300;}/*border-bottom:1px solid #DADAD9;*/
  .rooms-rate .ssn.sc0003{font-weight:300;}
  .rooms-rate table .rprice .sale{font-size:14px;font-weight:400;}
  .rooms-rate table .state td{padding:15px 0;}
  .rooms-rate .rstate.soff.sc0030{font-weight:300;}
  .rooms-rate .rstate.son.sc0010{font-weight:300;}
  .rooms-rate .ssn.sc0001{font-weight:300;}

  /*details*/
  .rooms-details-tit{margin-bottom:70px;}
  .rooms-details-tit>p{margin-bottom:15px;}
  .rooms-details-tit>h4{font-size:30px;}
  .rooms-details-conbx{position:relative;width:85%;height:570px;}
  .rooms-details-txt h5{font-size:16px;}
  .rooms-details-con{justify-content:center;}
  .rooms-details-conbx:nth-child(1), .rooms-details-conbx:nth-child(2), .rooms-details-conbx:nth-child(3){margin-bottom:70px;}


  /*others*/
  .others-in{flex-direction:column;}
  .others-tab{width:85%;margin:0 auto 50px;}
  .others-tab>ul{display:flex;width:100%;justify-content:space-between;border-top:1px solid #DEDEDE;border-bottom:1px solid #DEDEDE;}
  .others-tab>ul>li:first-child{border:none;}
  .others-tab>ul>li{font-size:14px;border:none;}
  .others-tab>ul>li.on{border-bottom:2px solid #DEDEDE;border-top:none;}
  .others-tab>ul>li.on::after{display:none;}
  .others-con{width:85%;height:570px;}/*height:62vh*/
  .others-conbx{flex-direction:column;}
  .others-txt-in h4::before{content:url(../img/deco2-m.png);display:block;}
  .others-conbx .rooms-img{width:100%;height:50%;}
  .others-txt{display:flex;width:100%;height:45%;padding:30px 0;justify-content:center;text-align:center;}
  .others-txt-in h4{font-size:20px;}
  .others-txt-in ul li{font-size:12px;line-height:23px;}

}

@media screen and (min-width:1px) and (max-width:780px){

  .rooms{margin:80px 0;}
  .rooms-top{margin-bottom:50px;}
  .rooms .con-tit{margin-bottom:30px;}
  .rooms-thumb{width:150px;height:150px;}
  .rooms-top>p{font-size:12px;line-height:22px;}
  .rooms-info-tit{margin-bottom:30px;}
  .rooms-info-tit>p{font-size:11px;}
  .rooms-info-tit>h4{font-size:25px;}
  .rooms-info-img{width:95%;height:320px;}
  .rooms-info-txt{width:95%;}

  .room_data li{margin-bottom:10px;}
  .room_data li .tit{font-size:13px !important;}
  .room_data li .data{font-size:12px !important;}
  .room_data li:nth-child(3) .data{padding-right:30px !important;}

  
  /*rate*/
  .rooms-rate{margin:100px auto;}
  #room_daily_price2{width:100%;}
  .rooms-rate .week_date p{padding:0 5px;}
  .rooms-rate .week_date{margin-bottom:20px;}
  .rooms-rate #tit{font-size:15px;}
  .rooms-rate table .head td{padding:15px 0;font-size:12px;}
  .rooms-rate .room_rprice table .ss td{padding:15px 0;}
  .rooms-rate .room_rprice table .rprice td{padding:15px 0;}
  .rooms-rate table td{font-weight:300;}/*border-bottom:1px solid #DADAD9;*/
  .rooms-rate .ssn.sc0003{font-size:12px;font-weight:300;}
  .rooms-rate table .rprice .sale{font-size:12px;font-weight:400;}
  .rooms-rate table .state td{padding:15px 0;}
  .rooms-rate .rstate.soff.sc0030{font-size:12px;font-weight:300;}
  .rooms-rate .rstate.son.sc0010{font-size:12px;font-weight:300;}
  .rooms-rate .ssn.sc0001{font-size:12px;font-weight:300;}
  .rooms-rate .btn-t{margin:60px auto 0;}

  .deco{margin:50px 0 80px;padding:0 20px;font-size:12px;line-height:22px;}
  .deco>p>span{display:inline;}
  .deco>img{width:100px;}


  /*details*/
  .rooms-details-tit>p{font-size:11px;}
  .rooms-details-tit>h4{font-size:25px;}
  .rooms-details-tit>h4::before{content:url(../img/deco3-m.png);display:block;position:absolute;top:50%;left:-80px;transform:translateY(-50%);}
  .rooms-details-tit>h4::after{content:url(../img/deco3-m.png);display:block;position:absolute;top:50%;right:-80px;transform:translateY(-50%) rotate(180deg);}

  .rooms-details-conbx{width:95%;height:50vh;}
  .rooms-details-conbx .rooms-details-img{width:100%;height:83%;}
  .rooms-details-txt{height:30%;}
  .rooms-details-txt h5{margin-bottom:60px;font-size:14px;}

  /*others*/
  .others-con{width:100%;}
  .others-tab{width:100%}
  .others-conbx{width:100%;}
  .others-conbx .others-img{width:100%;}
  .others-txt{width:100%;}
  .others-tab>ul>li{font-size:12px;}

  
}