@charset "utf-8";

/* room */
.room{}
.room .top_cont{position: relative; margin-bottom: 50px;}
.room .top_cont .images{display: flex; justify-content: space-between;}
.room .top_cont .images .img1{width: 72.42857%}
.room .top_cont .images .img2{width: 26.57142%}
.room .top_cont .images img{width: 100%;}
.room .top_cont .more{position: absolute; z-index: 2; bottom: 0; left: 0; display: flex;}
.room .top_cont .more .l_cont{background-color: #fff; display: flex; align-items: center; padding: 0 40px;}
.room .top_cont .more .l_cont h3{font-weight: 700; font-size: var(--fz14); color: #313131; margin-right: 25px;}
.room .top_cont .more .l_cont p{font-size: var(--fz14); font-weight: 300; color: #666666;}
.room .top_cont .more .l_cont p span{display: inline-block; margin: 0 10px;}
.room .top_cont .more .r_cont{}
.room .top_cont .more .r_cont a{background-color: #000000; display:flex; height: 100%; color: #fff; justify-content: center; align-items: center; font-size: var(--fz14); font-weight: 500; padding: 20px 42px;}

@media all and (max-width:976px){
    .room .top_cont .images .img1{width: 100%;}
    .room .top_cont .images .img2{display: none;}
    .room .top_cont .more .l_cont{padding: 0 20px;}
    .room .top_cont .more .r_cont a{padding: 15px 20px;}
}
@media all and (max-width:640px){
    .room .top_cont .more{width: 100%; position: relative;}
    .room .top_cont .more .l_cont{flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px 20px; gap:5px 0; width: 240px;}
    .room .top_cont .more .l_cont h3{margin-right: 15px; font-size: var(--fz16)}
    .room .top_cont .more .r_cont{width: calc(100% - 240px);}
}

.room .mid_cont{padding-bottom: 50px;}
.room .mid_cont.bottom{background-color: #f8f8f8; position: relative;}
.room .mid_cont.bottom::before{content: ''; background-color: #f8f8f8; position: absolute; width: 100%; height: 258px; top: -250px; z-index: -1;}
.room .mid_cont.flex{display: flex; justify-content: space-between; position: relative; align-items: flex-start;}
.room .mid_cont.flex .l_cont{width: 72.42857%}
.room .mid_cont .l_cont .box{}
.room .mid_cont .l_cont .box h3{font-size: var(--fz24); font-weight: 600; color: #000000; margin-bottom: 25px;}
.room .mid_cont .l_cont .box p{font-size: var(--fz14); color: #666; line-height: 1.8em; word-break: keep-all;}
.room .mid_cont .l_cont .box .store{display: flex; gap:0 18px; margin-bottom: 60px;}
.room .mid_cont .l_cont .box .store .info{background-color: #f3f3f3; width: 100%; padding: 30px; margin-top: 40px;}
.room .mid_cont .l_cont .box .store .info h4{font-size: var(--fz16); color: #000000; font-weight: 600; margin-bottom: 20px;}
.room .mid_cont .l_cont .box .store .info ul{}
.room .mid_cont .l_cont .box .store .info ul li{}
.room .mid_cont .l_cont .box .store .info ul li a{font-size: var(--fz14); color: #225a59;}
.room .mid_cont .l_cont .box .store .info ul li a::before{content: '◎'; margin-right: 3px;}
.room .mid_cont .l_cont .box .store .info ul li:not(:last-child) {margin-bottom: 15px;}
.room .mid_cont .l_cont .box > ul{display: flex; flex-wrap: wrap; margin-bottom: 35px;gap:20px 0;}
.room .mid_cont .l_cont .box > ul li{width: 25%; display: flex; align-items: center; }
.room .mid_cont .l_cont .box > ul li b{color: #000; font-weight: 600;}
.room .mid_cont .l_cont .box > ul li .img{width: 34px; margin-right: 10px; text-align: center;}
.room .mid_cont .l_cont .box > ul li .img img{}
.room .mid_cont .l_cont .box > ul li p{font-size: var(--fz14); color: #444444;}
.room .mid_cont .l_cont a.more{font-size: var(--fz14); font-weight: 600; color: #225a59; text-decoration: underline; text-underline-position: under;}
.room .mid_cont .r_cont{width: 26.57142%; position: sticky; top: 30px; background-color: #fbfbfb; padding: 50px 40px; border: 1px solid #eeeeee;}
.room .mid_cont .moBtn{display: none; background-color: #000; color: #fff; font-weight: 700; padding: 20px 10px;}
.room .mid_cont .r_cont .tit{display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.room .mid_cont .r_cont .tit h3{font-family: 'Monserrat', sans-serif; font-size: var(--fz24); color: #000000; font-weight: 600;}
.room .mid_cont .r_cont .tit span{background-color: #ff5840; color: #fff; font-size: var(--fz12); padding: 6px 10px; border-radius: 20px;}
.room .mid_cont .r_cont .txt{}
.room .mid_cont .r_cont .txt p{font-size: var(--fz14); color: #666666; line-height: 1.6em; margin-bottom: 25px;}
.room .mid_cont .r_cont .txt h4{font-size: var(--fz14); color: #313131; font-weight: 500; margin-bottom: 35px;}
.room .mid_cont .r_cont .txt h4 span{display: inline-block; margin: 0 5px;}
.room .mid_cont .r_cont .reser{background-color: #000; text-align: center;}
.room .mid_cont .r_cont .reser a{color: #fff; font-size: var(--fz14); font-weight: 700; padding: 20px 10px; display: block;}
.room .wrap_controllers{display: none;}
.room .mid_cont .other{}
.room .mid_cont .other li{margin-right: 30px; max-width: 446.33333px;}
.room .mid_cont .other li a{}
.room .mid_cont .other li a .img{}
.room .mid_cont .other li a .img img{max-width: 100%;}
.room .mid_cont .other li a .txt{margin-top: 25px;}
.room .mid_cont .other li a .txt .tit{display: flex; align-items: center; justify-content: space-between;}
.room .mid_cont .other li a .txt .tit h3{font-size: var(--fz16); font-weight: 600; color: #000000;}
.room .mid_cont .other li a .txt .tit span{font-size: var(--fz12); color: #fff; background-color: #ff5840; padding: 6px 12px; border-radius: 20px; }
.room .mid_cont .other li a .txt p{font-size: var(--fz14); color: #666666; line-height: 1.6em; margin-top: 20px;}

@media all and (max-width:1280px){
    .room .mid_cont .l_cont .box h3{font-size: var(--fz22); margin-bottom: 15px;}
    .room .mid_cont .l_cont .box p br{display: none;}
    .room .mid_cont .l_cont .box p br.mo{display: block;}
    .room .mid_cont .r_cont{padding: 30px 30px;}
    .room .mid_cont .r_cont .tit h3{font-size: var(--fz20);}
}
@media all and (max-width:976px){
    .room .mid_cont.flex .l_cont{width: 100%;}
    .room .mid_cont.flex .r_cont{display: block; position: fixed; bottom: -100%; top: auto; width: 100%; z-index: 99; left: 50%; transform: translateX(-50%); transition: .3s ease-in-out;}
    .room .mid_cont.flex .r_cont.on{bottom: 0;}
    .room .mid_cont .moBtn{display: block; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); width: 94%; text-align: center; font-size: var(--fz16); z-index: 99; cursor: pointer;}
    .room .mid_cont .moBtn.on{display: none;}
    .bg{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 98;}
    .bg.on{display: block;}
    .room .mid_cont .l_cont .box .store{flex-direction: column; margin-bottom: 40px;}
    .room .mid_cont .l_cont .box .store .info{margin-top: 30px;}
    .room .mid_cont .l_cont .box .store .info:last-child{margin-top: 20px;}
    .root_daum_roughmap .wrap_map{height: 60vw !important;}
    .room .mid_cont .other li{max-width: 360px; margin-right: 20px;}
}
@media all and (max-width:640px){
    .room .mid_cont .l_cont .box > ul li{width: 33.33333%;}
    .room .mid_cont .l_cont .box > ul li:nth-child(n+7){display: none;}
    .room .mid_cont .other li{max-width: 320px;}
}
@media all and (max-width:500px){
    .room .mid_cont .l_cont .box > ul li{width: 50%;}
    .room .mid_cont .l_cont .box > ul li:nth-child(n+7){display: flex;}
}


/* location */
.wrap_controllers{display: none;}
.location{}
.location .txt{padding: 30px 0 60px;}
.location .txt h3{font-size: var(--fz20); color: #000; font-weight: 700; margin-bottom: 20px;}
.location .txt h4{text-underline-position: under; text-decoration: underline; color: #000; font-size: var(--fz18); font-weight: 300;}
.location .txt p{font-size: var(--fz16); color: #777; margin-top: 10px;}
.location .txt a.more{display: inline-block; background-color: #000; color: #fff; padding: 14px 30px; margin-top: 30px; font-size: var(--fz16); font-weight: 500;}


/* infomation */
.info_top{display: flex;}
.info_top .img{width: 50%; background: url(/images/sub/info_img1_230713.png) no-repeat center center / cover;}
.info_top .txt{background-color: #fff; width: 50%; padding: 70px; padding-right: 0;}
.info_top .txt h3{font-size: var(--fz32); color: #777; font-weight: 500; margin-bottom: 30px;}
.info_top .txt h3 span{color: #000; font-weight: 700;}
.info_top .txt .box{}
.info_top .txt .box p{font-size: var(--fz16); color: #666; line-height: 1.8em; padding-left: 60px; position: relative; word-break: keep-all;}
.info_top .txt .box p span{display: inline-block; width: 56px; color: #000; font-weight: 500; position: absolute; left: 0; top: 0;}
.info_top .txt .box2{margin-top: 20px; padding-top: 20px; border-top: 1px dashed #ccc;}
.info_top .more{display: inline-block; background-color: #000; color: #fff; padding: 16px 60px; margin-top: 80px; font-size: var(--fz16); font-weight: 500;}

@media all and (max-width:1280px){
    .info_top .txt{padding: 40px; padding-right: 0;}
    .info_top .txt h3{margin-bottom: 20px;}
    .info_top .more{margin-top: 40px;}
}
@media all and (max-width:640px){
    .info_top{flex-wrap: wrap;}
    .info_top .img{width: 100%; height: 60vw;}
    .info_top .txt{width: 100%; padding: 0; padding-top: 30px;}
    .info_top .more{margin-top: 30px;}
    .info_top .txt .box2{margin-top: 15px; padding-top: 15px;}
}

.info_box{padding: 30px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 60px 0;}
.info_box h4{font-size: var(--fz20); font-weight: 600; color: #222; margin-bottom: 25px;}

.priceTable {border-collapse: collapse;text-align: center;width:100%;color:#808080;font-size:13px;}
.priceTable th{border:1px solid #d2d2d2;padding:7px 0;}
.priceTable td{border:1px solid #d2d2d2;padding:7px 0;}
.priceTable th.nm{background:#f3f3f3;}
.priceTable th.nm p{padding:8px 0;}
.priceTable th.type{background:#fff;font-weight: 300;}
.priceTable th.sz{background:#f3f3f3;}
.priceTable th.ss{background:#ececec; color:#222; }
.priceTable th.wk{background:#f3f3f3;width:10%;}
.priceTable th.ad{background:#ececec; color:#222; width:25%;}
.priceTable th p.small{font-size:12px;}

.info_box{}
.info_box .cont_box{display: flex;}
.info_box .cont_box .l_cont{border-top: 1px solid #000; width: 20%;padding: 30px;}
.info_box .cont_box .l_cont h5{font-size: var(--fz17); color: #333;}
.info_box .cont_box .r_cont{border-top: 1px solid #ccc; width: 80%; padding: 30px;}
.info_box .cont_box .r_cont > p{position: relative; padding-left: 12px; font-size: var(--fz15); line-height: 1.8em; word-break: keep-all;}
.info_box .cont_box .r_cont > p::before{content: '-'; position:absolute; left: 0; top: 0;}
.info_box .cont_box .r_cont table{width: 100%; margin-top: 20px; font-size: 12px; border-bottom: 1px solid #aaa; padding: 10px 0;}
.info_box .cont_box .r_cont table tr th{font-weight: 700;}
.info_box .cont_box .r_cont table tr:nth-child(1) th{background-color: #f3f3f3;}
.info_box .cont_box .r_cont table tr td p{text-align: center; padding: 10px 0; font-weight: 500;}
.info_box .cont_box .r_cont table tr td{text-align: center; padding: 10px 0;}
.info_box .cont_box .r_cont table tr:nth-child(1) td{border-bottom: 1px solid #eee; background-color: #f3f3f3; }

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

@media all and (max-width:976px){
    .info_top .txt h3{font-size: var(--fz28);}
    .info_box{padding: 25px 0; margin: 40px 0;}
    .scroll{overflow-x: scroll;}
    .scroll table{min-width: 976px;}
    .info_box .cont_box .l_cont{padding: 20px;}
    .info_box .cont_box .r_cont{padding: 20px;}
}
@media all and (max-width:640px){
    .info_box .cont_box{flex-direction: column;}
    .info_box .cont_box .l_cont{width: 100%; padding-left: 0; padding-right: 0;}
    .info_box .cont_box .r_cont{width: 100%; padding-left: 0; padding-right: 0;}
}

#popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#popup-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px 30px;
  width: 94%;
    max-width: 400px;
  text-align: left;
  z-index: 10000;
    text-align: center;
}

#popup-overlay2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#popup-container2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    width: 100%; text-align: center;
}

#popup-container2 .images{}
#popup-container2 .images .img{ margin-right: 20px;}
#popup-container2 .images img{ max-width: 100%;}
#popup-container2 .slick-slider .slick-track{transition: .5s;}

#popup-close2 {
  margin-top: 10px; color: #fff; font-size: var(--fz15); font-family: 'SUIT', sans-serif;
}

#popup-container .cont_box{display: flex; flex-direction: column; text-align: left;}
#popup-container .cont_box .l_cont{}
#popup-container .cont_box .l_cont h5{font-size: var(--fz14); color: #333; padding: 5px 0;}
#popup-container .cont_box .r_cont{border-top: 1px solid #ccc;padding: 10px 0;}
#popup-container .cont_box .r_cont p{position: relative; margin-right: 15px; font-size: var(--fz15); line-height: 1.8em; word-break: keep-all; display: inline-block;}

#popup-close {
  margin-top: 10px; font-size: 13px; font-weight: 700; margin: 10px auto 0; font-family: 'SUIT', sans-serif;
}

.youtube{position: relative; padding-top: 56.25%; width: 100%;}
.youtube iframe{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}