/**
 * tb_detail.css
 */

/* placeHeader */
#placeHeader .mainVisual {
  height: 250px;
}
#placeHeader .inner .data .btn {
  position: static;
  margin: 0 0 10px 0;
}
#placeHeader .inner .data .title {
  padding: 0 0 5px 0;
}

@media screen and (max-width: 400px) {
  #placeHeader .inner .thumb {
    width: 80px;
  }
  #placeHeader .inner .data {
    width: calc(100% - 95px);
  }
}

/* detailContainer */
.contentBox .contentBoxTitle {
  font-size: 18px;
}
#detailContainer .placeInfoContainer .placeInfo .review {
  border-left: 1px solid #bbb;
}

#detailContainer .placeInfoContainer .placeInfo .station,
#detailContainer .placeInfoContainer .placeInfo .review {
  max-width: 100%;
}
#detailContainer .placeInfoContainer .placeInfo .planLink {
  max-width: 100%;
}

#detailContainer .roomSlide .slick-track li {
  height: 250px;
}

#roomList .roomLayoutDownload {
  position: relative;
  float: right;
  margin: 0 0 10px 0;
  top: 0;
}


@media screen and (max-width: 400px) {
  #placeData .data {
    padding: 20px;
  }
  #placeData .data table tr th,
  #placeData .data table tr td {
    display: block;
  }
  #placeData .data table tr th {
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0 0 0;
  }
}

#review .reviewContainer .comprehens {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-right: none;
  border-bottom: 1px solid #ccc;
  padding: 0 0 20px 0;
  margin: 0 0 20px 0;
}
@media screen and (max-width: 450px) {
  #review .reviewContainer .comprehens .meters .meterRow .label {
    float: left;
    width: 100%;
    text-align: left;
  }
  #review .reviewContainer .reviews .review .reviewHeader .name {
    display: block;
  }
}
#review .reviewContainer .reviews {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

#otherInfo .info .infoBox {
  width: 100%;
  margin: 0 0 10px 0;
}

#media .info .infoBox {
  width: 48%;
  margin: 0 1% 10px 1%;
}


@media screen and (max-width: 500px) {
  #media .info .infoBox {
    width: 100%;
    margin: 0 0 10px 0;
  }
}



.reccomend .reccomendTitle {
  font-size: 18px;
}


/* room detail */
.pageDetailRoom #placeHeader .inner .data .update {
  top: -22px;
}
.pageDetailRoom #placeHeader .inner .data .topBtn {
  position: static;
  margin: 0 0 10px 0;
  display: inline-block;
  vertical-align: top;
}
.pageDetailRoom #placeHeader .inner .data .topBtn .btnClick {
  padding: 0;
  height: 24px;
  line-height: 24px;
  font-size: 11px;
  padding: 0 10px;
}
.pageDetailRoom #placeHeader .inner .data .btn {
  display: inline-block;
  vertical-align: top;
}
@media screen and (max-width: 400px) {
  .pageDetailRoom #placeHeader .inner .data .topBtn {
    display: none;
  }
  .pageDetailRoom #placeHeader .inner .data .placeInfo .review {
    margin: 2px 0 0 0;
  }
}



@media screen and (max-width: 650px) {
  .pageDetailRoom #roomDesc .left {
    width: 100%;
    clear: both;
    float: none;
  }
  .pageDetailRoom #roomDesc .right {
    margin: 0 auto 30px;
    clear: both;
    float: none;
  }
}
@media screen and (max-width: 500px) {
  .pageDetailRoom #roomDesc .leftBtns {
    height: 108px;
  }
  .pageDetailRoom #roomDesc .leftBtns .btn {
    width: 48%;
    margin: 0 1% 1%;
  }
}


@media screen and (max-width: 600px) {
  .pageDetailRoom #overview table tbody tr td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px !important;
    border: none;
    border-bottom: 1px solid #ccc;
  }
  .pageDetailRoom #overview table tbody tr td:last-child {
    border-bottom: none;
  }
  .pageDetailRoom #overview table tbody tr td.price:before,
  .pageDetailRoom #overview table tbody tr td.price:after,
  .pageDetailRoom #overview table tbody tr td.capacity:before,
  .pageDetailRoom #overview table tbody tr td.capacity:after {
    position: static;
    display: inline-block;
    margin: 0 4px 0;
  }
  .pageDetailRoom #overview table tbody tr td.access:before {
    display: none;
  }
  .pageDetailRoom #overview table tbody tr td.access:before {
    display: none;
  }
  .pageDetailRoom #overview table tbody tr td.purpose:before {
    display: none;
  }

  .pageDetailRoom #plan .planList li .planName,
  .pageDetailRoom #plan .planList li .price,
  .pageDetailRoom #plan .planList li .btn {
    display: block;
    width: 100%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .pageDetailRoom #plan .planList li .price {
    padding: 0;
  }
  .pageDetailRoom #plan .planList li .btn {
    text-align: center;
  }
}





.pageDetailRoom #schedule .calendarContainer {
  width: 100%;
  float: none;
  margin: 0 0 50px 0;
}
.pageDetailRoom #schedule .calendarContainer .month {
  text-align: center;
  margin: 0 0 15px 0;
}
.pageDetailRoom #schedule .calendarContainer .controller {
  position: static;
  text-align: center;
  margin: 0 0 20px 0;
}
.pageDetailRoom #schedule .calendarContainer .calendar table tbody tr td {
  height: auto;
  padding: 5px;
  width: 10px;
  text-align: center;
  vertical-align: middle;
}
.pageDetailRoom #schedule .calendarContainer .calendar table tbody tr td .day {
  position: static;
}
.pageDetailRoom #schedule .planContainer {
  float: none;
  margin: 0 auto 20px;
  width: 300px;
}
.pageDetailRoom #schedule .planContainer .tabContainer .tab li {
  min-width: 94px;
}

@media screen and (max-width: 600px) {
  .pageDetailRoom #schedule .displayPlan {
    float: none;
    width: 100%;
    display: block;
    height: auto;
    padding: 10px;
  }
  .pageDetailRoom #schedule .displayPlan .date {
    display: block;
    border: none;
    margin: 0 0 10px 0;
    height: auto;
  }
  .pageDetailRoom #schedule .displayPlan .selectPlan {
    display: block;
    padding: 0;
    height: auto;
  }
}


.pageDetailRoom #equipment .equipmentContainer .equipmentItem {
  width: 100%;
  margin: -1px 0 0 0;
}
.pageDetailRoom #equipment .equipmentContainer .equipmentItem .itemname {
  padding: 0 10px;
}
.pageDetailRoom #equipment .equipmentContainer .equipmentItem .amount {
  border: none;
}

.pageDetailRoom .otherOption .otherOptionContainer .otherOptionItem .thumb {
  display: block;
  width: 95px;
  float: left;
}
.pageDetailRoom .otherOption .otherOptionContainer .otherOptionItem .data {
  display: block;
  width: calc(100% - 115px);
  padding: 20px 0;
  float: right;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.pageDetailRoom .otherOption .otherOptionContainer .otherOptionItem .data .open {
  float: none;
  width: 100%;
}
.pageDetailRoom .otherOption .otherOptionContainer .otherOptionItem .price {
  width: 100%;
  display: block;
  border-top: 1px solid #ccc;
  border-left: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
}
.pageDetailRoom .otherOption .otherOptionContainer .otherOptionItem .input {
  width: 100%;
  padding: 20px 0;
  display: block;
  border-top: 1px solid #ccc;
  border-left: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
  text-align: center;
}
.pageDetailRoom .otherOption .otherOptionContainer .otherOptionItem .input .optionCheckBox {
  display: inline-block;
  margin: 0;
  vertical-align: bottom;
  margin: 0 0 0 10px;
  text-align: left;
}


.pageDetailRoom #amount .items .item .label {
  width: 100%;
  margin: 0 0 5px 0;
}