@charset "utf-8";

*{box-sizing: border-box;}
.page-section{box-sizing: border-box; margin-bottom: 4rem; overflow: hidden;}
.page-section.title{overflow: visible;}
.border-b{border-bottom: 1px solid #ddd; padding-bottom: 4rem;}
.mb-0{margin-bottom: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
.page-con{width: 100%; margin: 0 auto;}

.ver-line{width: 1px; height: 100px; background-color: #292929; margin: 0 auto 2rem;}

/* roompreview */
.page-flex{width: 100%; display: flex; flex-wrap: wrap;}
.page-fbox{flex: 0 0 auto; box-sizing: border-box; padding: 0 .5rem; width: 25%; margin-bottom: 1rem;}
.room-struc{padding: 12px 0.2rem; border: 1px solid #575757; text-align: center; font-size: 14px; border-radius: 5px; position: relative; overflow: hidden; transition: all .3s; z-index: 1; color: #292929; line-height: 1.5;}
.room-struc::after{content: ""; z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #575757; transition: all .5s; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;}
.room-struc:hover::after{height: 200%;}
.room-struc:hover{color: #fff;}
.room-tit{margin-bottom: 30px; color: #292929;}
.room-tit > h2{font-size: 26px; font-weight: 700; opacity: 0; transform: translateY(50px); transition: 1s;}
.room-tit > h5{font-size: 18px; font-weight: 700; margin-bottom: 20px; opacity: 0; transform: translateY(50px); transition: 1s; color: #292929; display: flex; align-items: center;}
.room-tit > h5 > span{margin-right: 10px; display: inline-block; width: 20px; text-align: center; font-size: 15px;}
.room-tit > ul.ani{opacity: 0; transform: translateY(50px); transition: 1.2s;}
.room-tit > h2.ani.act{opacity: 1; transform: translateY(0);}
.room-tit > h5.ani.act{opacity: 1; transform: translateY(0);}
.room-tit > ul.ani.act{opacity: 1; transform: translateY(0);}
.room-tit > ul > li{box-sizing: border-box; padding-left: 1rem; position: relative; font-size: 16px; margin-bottom: 5px; color: #575757;}
.room-tit > ul > li::before{content: ""; width: 5px; height: 5px; background-color: #575757; border-radius: 50%; position: absolute; left: 0; top: 40%; }

.room-wrap{margin-bottom: 3rem;}
.room-wrap.border-b{
  padding-bottom: 3rem;
  border-bottom: 1px solid #ddd;
}
.room-wrap.border-b .room-tit{
  margin-bottom: 0;
}
.room-wrap:last-child{margin-bottom: 0;}

.page-flex.room-struc-wrap{margin-bottom: 15px; opacity: 0; transform: translateY(50px); transition: 1.5s;}
.page-flex.room-struc-wrap.ani.act{opacity: 1; transform: translateY(0);}

.room-info{margin-bottom: 2rem;}
.room-info:last-child{margin-bottom: 0;}
.room-info > h3{font-size: 30px; margin-bottom: 1.5rem; font-weight: 500; opacity: 0; transform: translateY(50px); transition: 1s;}
.room-info > ul{opacity: 0; transform: translateY(50px); transition: 1s;}
.room-info > ul > li{box-sizing: border-box; padding-left: 1rem; position: relative; font-size: 18px; margin-bottom: 5px;}
.room-info > ul > li::before{content: ""; width: 5px; height: 5px; background-color: #333; border-radius: 50%; position: absolute; left: 0; top: 48%; }
.room-info > h3.ani.act{opacity: 1; transform: translateY(0);}
.room-info > ul.ani.act{opacity: 1; transform: translateY(0);}

.room-etc > p.ani{font-size: 14px; opacity: 0; transform: translateY(50px); transition: 1s; color: #575757;}
.room-etc > p.ani.act{opacity: 1; transform: translateY(0);}


/* location */
.page-con.location{width: 100%; max-width: 1440px; margin: 0 auto; }
.loca-map{width: 100%; margin-bottom: 1.5rem;}
.loca-map .root_daum_roughmap{width: 100%;}
.loca-map .root_daum_roughmap .wrap_controllers{display: none;}
.loca-info > h3{font-size: 16px; margin-bottom: 10px;}
.loca-info > h3 > .lo-tit{color: #eab454; margin-right: 3px;}
.loca-info > h3 .lo-btn{display: inline-block; margin-left: 1rem; padding: 5px 10px; background-color: #eab454; color: #fff; cursor: pointer;}

/* media-query */

@media(min-width:1200px){
  .pt-3{padding-top: 3rem;}
  .pt-5{padding-top: 5rem;}
  .d-lg-block{display: block;}
  .d-lg-none{display: none;}
}

@media(max-width:1199px){
  .d-block{display: block;}
  .d-none{display: none;}
  .page-section{margin-bottom: 2rem;}
  .page-tit{font-size: 30px;}
  .ver-line{height: 50px;}
  .page-con{padding: 0;}
  .psf-tit{padding: 0 15px;}
  .psf-tit > h2{font-size: 35px;}
  .psf-tit > h5{font-size: 16px;}
  .root_daum_roughmap .wrap_map{height: 300px !important;}
  .page-flex{flex-wrap: wrap;}
  .page-fbox{width: 50%; padding: 0 5px; margin-bottom: 1rem;}
  .page-fbox:first-child{padding-left: 5px;}
  .page-fbox:last-child{padding-right: 5px;}
  .room-wrap{margin-bottom: 2rem;}
  .border-b{padding-bottom: 2rem;}
  .page-flex.room-struc-wrap{margin-bottom: 0;}
  .room-info > h3{font-size: 22px;}
  .room-info > ul > li{font-size: 14px;}

  /* reservation */
  .info-caption > p{font-size: 16px;}
  .info-caption > p > span{font-size: 12px;}
  .page-section.rv-info{padding: 0 15px 2rem;}
  
}
@media(max-width:600px){
  /* location */
  .loca-info > h3{font-size: 14px; line-height: 1.8;}
  
}