@charset "UTF-8";

.txt-red {
  color: #fe3232;
}
.txt-box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.15em;
  background-color: #fafafa;
}
.txt-box ul li {
  line-height: 2;
}

/* 이용대상 */
#guest-room {
  width: 100%;
}
#guest-room .user {
  width: 100%;
  margin-bottom: 70px;
}

/* 이용절차 */
#UseStep {
  width: 100%;
  margin-bottom: 70px;
}
#UseStep .use-box {
  display: flex;
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -ms-flex-pack: justify;
  margin: 20px 0;
}
#UseStep .step {
  width: 250px;
  background-image: url("/STAFF_HOME/res/img/cont/3/img-3-line.png");
  background-repeat: no-repeat;
  background-position: center 164px;
  text-align: center;
  font-size: 1.3em;
}
#UseStep dt {
  width: 100%;
  height: 250px;
  border: 1px solid #fff;
  border-radius: 125px;
  padding: 5px;
}
#UseStep .circle1,
#UseStep .step1-tt {
  background-color: #9dc3e6;
}
#UseStep .circle2,
#UseStep .step2-tt {
  background-color: #2e75b6;
}
#UseStep .circle3,
#UseStep .step3-tt {
  background-color: #1f4e79;
}
#UseStep .circle4,
#UseStep .step4-tt {
  background-color: #002060;
}
#UseStep .circle_1 {
  width: 100%;
  height: 100%;
  padding: 82px 0;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 1.15em;
}
#UseStep .circle_1 span {
  display: block;
  line-height: 30px;
}
#UseStep .step-tt {
  padding: 10px 0;
  background-color: #5b5b5b;
  margin-top: 60px;
  color: #fff;
}

#UseStep .step1-tt,
#UseStep .step2-tt,
#UseStep .step3-tt,
#UseStep .step4-tt {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  width: 100%;
  height: 35px;
  color: #fff;
}

#UseStep .step:not(.step4) .step-tt {
  padding: 19.5px 0;
}

#UseStep .step-td {
  padding: 15px;
  border: 1px solid #ccc;
  margin-top: 10px;
  min-height: 94px;
}
#UseStep .step-td span {
  display: block;
}

#UseStep .use-txt {
  width: 100%;
  font-size: 1.1em;
  background-color: #fafafa;
}
#UseStep .use-txt ul {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.25em;
}
#UseStep .use-txt ul li {
  line-height: 2;
}
#UseStep .reserv-stat {
  display: block;
  background-image: url("/STAFF_HOME/res/img/cont/3/stat-btn.png");
  background-position: right center;
  background-repeat: no-repeat;
}
#UseStep .txt-box li a {
  padding: 5px 10px;
  width: 160px;
  margin: 10px 10px 20px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em;
  color: #fff;
  background-color: #18577c;
  border-radius: 5px;
}
#UseStep .txt-box a:hover {
  background-color: #001c55;
}

/* 게스트룸 현황 */
#guest-state {
  width: 100%;
  margin-bottom: 70px;
}
#guest-state .state-box {
  margin-bottom: 30px;
}
#guest-state .state-parent {
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -ms-flex-pack: justify;
}
#guest-state .state-child {
  width: 31.5%;
  text-align: center;
  font-size: 1.3em;
}
#guest-state .state-child a {
  display: block;
  padding: 20px 0;
}
#guest-state .state-child a:not(.active) {
  background-color: #d0d0d0;
}
#guest-state .active {
  background-color: #008ab0;
  color: #fff;
}
#guest-state .state-info {
  text-align: center;
}
#guest-state .state-info:not(.state-info-1) {
  display: none;
}

.s-table {
  text-align: center;
  font-size: 1.3em;
  margin-bottom: 30px;
}
.t-header,
.t-body {
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
}
.t-header:nth-child(1) {
  border-left: 0;
}
.t-body:nth-child(1) {
  border-left: 0;
}
.t-body span {
  display: block;
}
.t-head {
  border-top: 2px solid #646464;
  background-color: #efefef;
}
.aa {
  width: 20%;
}

#guest-state .table-txt {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: left;
  background-color: FAFAFA;
}
#guest-state .table-txt li {
  line-height: 2;
  font-size: 1.3em;
}

/* 결제방법 */
#pay-method {
  width: 100%;
  margin-bottom: 70px;
}
#pay-method .pay-box {
  width: 100%;
  padding: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fafafa;
  background-image: url("/STAFF_HOME/res/img/cont/3/img-pay.png");
  background-repeat: no-repeat;
  background-position: left 40px center;
}
#pay-method .pay {
  width: 100%;
  padding-left: 320px;
}
#pay-method .pay h4 {
  width: 200px;
  padding: 10px 0;
  background-color: #44c1c4;
  color: #fff;
  text-align: center;
  font-size: 1.45em;
  margin-bottom: 10px;
}
#pay-method .pay ul li {
  font-size: 1.2em;
  padding-left: 10px;
  line-height: 2.2;
  background: url("/STAFF_HOME/res/img/index/img-dot.png");
  background-repeat: no-repeat;
  background-position: left 16px;
}

/* 주의사항 */
#precautions {
  width: 100%;
  margin-bottom: 70px;
}
#precautions .prec-box {
  display: flex;
  display: -ms-flexbox;
}
#precautions ul:first-of-type {
  margin-right: 150px;
}
#precautions ul li {
  line-height: 2;
}

/* 호실 상세 화면 */
#room-info {
  width: 100%;
}
#room-info .info-btn {
  width: 100%;
  margin-bottom: 20px;
}
#room-info .info-parent {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -ms-flex-pack: justify;
}
#room-info .info-child {
  width: 49%;
  text-align: center;
  font-size: 1.35em;
}
#room-info .info-child a {
  display: block;
  padding: 20px 0;
  border-radius: 5px;
}
#room-info .info-child a:not(.active) {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}
#room-info .active {
  background-color: #44c1c4;
  color: #fff;
  border-radius: 1px solid #44c1c4;
}
#room-info .infoNum {
  width: 100%;
  margin-bottom: 20px;
}
#room-info .infoNum-frame {
  position: relative;
}
#room-info .infoNum img {
  vertical-align: top;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#room-info .infoNum:not(.infoNum-1) {
  display: none;
}
#room-info .slide-box {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}
#room-info .f-slide-controler {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -40px;
  z-index: 101;
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -ms-flex-pack: justify;
}
#room-info .np-control {
  background-color: rgba(0, 27, 84, 0.5);
}
#room-info .np-control a {
  padding: 30px;
  display: block;
}
#room-info .alt-caption {
  width: 100%;
  padding: 20px;
  position: absolute;
  bottom: 0;
  z-index: 101;
}
#room-info .alt-caption span {
  display: block;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 27, 84, 0.6);
  color: #fff;
  font-size: 1.3em;
  padding: 20px;
}
#room-info .adv-custom-pager {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  justify-content: flex-start;
  -ms-flex-pack: start;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  margin-top: 10px;
}
#room-info .adv-custom-pager a {
  width: 24.25%;
  border: 1px solid #ccc;
  margin-top: 10px;
  display: block;
}
#room-info .adv-custom-pager a:not(:last-of-type) {
  margin-right: 1%;
}
#room-info .adv-custom-pager a:nth-of-type(4n) {
  margin-right: 0;
}
#room-info .adv-custom-pager a img {
  width: 100%;
}

#room-info .info-txt ul li {
  line-height: 2;
}
#room-info .txt-blue {
  color: #3b4c6e;
}

/* 사용예약신청 */
#appli-form {
  width: 100%;
}
#appli-form .radio {
  margin-right: 4px;
}
#appli-form tr textarea {
  resize: none;
}
#appli-form .top-t {
  text-align: right;
  padding: 10px;
  font-size: 1.25em;
}
#appli-form .a-table {
  font-size: 1.2em;
}
#appli-form .a-table th,
td {
  border: 1px solid #ccc;
  padding: 10px 20px;
}
#appli-form .a-table th {
  background-color: #f1f1f1;
}
#appli-form .t-name {
  width: 200px;
}
#appli-form .in-box {
  width: 200px;
}
#appli-form .gender-input {
  width: 30px;
}
#appli-form .t-tel {
  width: 200px;
}
#appli-form .telBox {
  width: 40px;
}
#appli-form .slash {
  margin: 0 10px;
}
#appli-form #date {
  width: 120px;
}
#appli-form .date-box span {
  display: block;
}
#appli-form .date-box a {
  display: block;
  align-self: center;
}
#appli-form .calendar {
  margin-left: 10px;
}
#appli-form .til {
  margin: 0 20px;
}
#appli-form .fees span {
  display: block;
  line-height: 1.5;
}
#appli-form .flex-box {
  display: flex;
  display: -ms-flexbox;
}
#appli-form .flex-box span input {
  align-self: center;
  -ms-flex-item-align: center;
}
#appli-form .term {
  margin-right: 30px;
  display: flex;
  display: -ms-flexbox;
}

#appli-form .t-button {
  margin-top: 50px;
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
}
#appli-form .btn-link {
  text-decoration: none;
  width: 150px;
  display: block;
  padding: 20px;
  margin-right: 20px;
  font-size: 1.3em;
  background-color: #fff;
}
#appli-form .apply-btn {
  border: 1px solid #001b54;
}
#appli-form .cancel-btn {
  border: 1px solid #ff0000;
}
#appli-form .apply-btn:hover {
  background-color: #001b54;
  color: #fff;
}
#appli-form .cancel-btn:hover {
  background-color: #ff0000;
  color: #fff;
}

.info-box {
  display: block;
  width: 100%;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.info-box .m-tt {
  display: block;
  width: 100%;
  font-weight: 600;
  margin-bottom: 10px;
}
.info-box .s-tt {
  display: block;
  width: 100%;
  font-size: 1.2em;
  margin-bottom: 10px;
}
.info-box .s-box {
  display: block;
  width: 100%;
  border: 1px dashed #ccc;
  border-radius: 5px;
  background-color: #fff;
  line-height: 1.5;
  font-size: 1.1em;
  padding: 20px;
}

.all_center td {
  text-align: center;
}