@charset "utf-8";

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.flex_col {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}

.flex_jBet {
  justify-content: space-between;
}

.flex_jStar {
  justify-content: start;
}

.flex_jEnd {
  justify-content: flex-end;
}

.flex_aStretch {
  align-items: stretch;
  align-content: stretch;
}

.flex_aStar {
  align-items: flex-start;
  align-content: flex-start;
}

.flex_aEnd {
  align-items: end;
  align-content: end;
}

:root {
  --MainColor: #B7796C;/*Pink*/
  --SubColor: #D8B0A6;/*LightPink*/
  --TextColor: #3F1F0C;/*Brown*/
  --CldHolColor: #FF2626;/*Holiday*/
  --CldLwColor: #4C4C4C;/*LongWeekend*/
  --pd100: 100px 0;
  --m100: 100px;
  --m50: 50px;
  --m30: 30px;
  --m20: 20px;
  --f48: 48px;
  --f40: 40px;
  --f36: 36px;
  --f32: 32px;
  --f28: 28px;
  --f24: 24px;
  --f22: 22px;
  --f20: 20px;
  --f18: 18px;
  --f17: 17px;
  --f16: 16px;
}

@media (max-width:1024px) {
  :root {
    --m50: 40px;
    --m30: 25px;
    --m20: 15px;
    --f48: 40px;
    --f40: 36px;
    --f36: 32px;
    --f32: 28px;
    --f28: 24px;
    --f24: 22px;
    --f22: 20px;
  }
}

@media (max-width:768px) {
  :root {
    --pd100: 70px 0;
    --m100: 70px;
    --m50: 30px;
    --m30: 20px;
    --f48: 32px;
    --f40: 28px;
    --f36: 26px;
    --f32: 24px;
    --f28: 20px;
    --f24: 20px;
    --f20: 18px;
    --f18: 17px;
  }
}

@media (max-width:600px) {
  :root {
    --pd100: 50px 0;
    --m100: 50px;
    --m50: 25px;
    --f48: 28px;
    --f40: 24px;
    --f36: 22px;
    --f32: 20px;
    --f28: 18px;
    --f24: 18px;
    --f22: 18px;
    --f20: 17px;
    --f18: 16px;
    --f17: 15px;
    --f16: 15px;
  }
}

@media (max-width:375px) {
  :root {
    --f48: 24px;
    --f40: 20px;
    --f36: 18px;
    --f32: 18px;
    --f28: 17px;
    --f24: 17px;
    --f22: 17px;
    --f20: 16px;
    --f18: 15px;
  }
}

/* STEP Styling 2024.jun */

.hotel .show_content {
  width: 100%;
  max-width: 1200px;
  position: relative;
  padding: 0;
  font-size: var(--f16);
}

.hotel .main_part {
  width: 100%;
  max-width: 100%;
}

a[name] {
  position: absolute;
  top: -100px;
}

a[name]:target:before {
  content: "";
  display: block;
  height: 120px;
  position: absolute;
  top: 0;
  width: 100%;
}

.stepList {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: #F7F7F7;
  color: var(--TextColor);
  font-size: var(--f20);
  letter-spacing: .15em;
  line-height: 1.2;
  font-family: "微軟正黑體";
}

.stepList li {
  height: 50px;
  width: 25%;
  position: relative;
  padding: 5px 10px;
}

.stepList li:not(:last-child)::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 16px;
  left: 100%;
  top: 0;
  position: absolute;
}

.stepList figure {
  width: 220px;
  max-width: 100%;
  padding-left: 20px;
}

.stepList li:first-child figure {
  padding-left: 00px;
}

.stepList figure span {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  line-height: 1;
  font-size: var(--f16);
  font-weight: bold;
  letter-spacing: 0;
  background: var(--TextColor);
  color: #FFFFFF;
  border-radius: 50px;
  width: 30px;
  height: 30px;
}

.stepList li figure b {
  width: 165px;
  max-width: calc(100% - 40px);
}

.stepList li figure b br {
  display: none;
}

li.stepAct {
  background: var(--MainColor);
  color: #FFFFFF;
  z-index: 5;
}

li.stepAct figure span {
  background: #FFFFFF;
  color: var(--MainColor);
}

li.stepAct::after {
  border-color: transparent transparent transparent var(--MainColor) !important;
}

li.stepLast01 {
  background: var(--SubColor);
  color: #FFFFFF;
  z-index: 6;
}

li.stepLast01 figure span {
  background: #FFFFFF;
  color: var(--SubColor);
}

li.stepLast01::after {
  border-color: transparent transparent transparent var(--SubColor)
}

li.stepLast02 {
  background: #DEBCB3;
  color: #FFFFFF;
  z-index: 7;
}

li.stepLast02 figure span {
  background: #FFFFFF;
  color: #DEBCB3;
}

li.stepLast02::after {
  border-color: transparent transparent transparent #DEBCB3
}

li.stepLast03 {
  background: #E3C6BE;
  color: #FFFFFF;
  z-index: 8;
}

li.stepLast03 figure span {
  background: #FFFFFF;
  color: #E3C6BE;
}

li.stepLast03::after {
  border-color: transparent transparent transparent #E3C6BE
}


li.stepNext01 {
  background: #D5D5D5;
  z-index: 4;
}


li.stepNext01::after {
  border-color: transparent transparent transparent #D5D5D5;
}

li.stepNext02 {
  background: #E5E5E5;
  z-index: 3;
}

li.stepNext02::after {
  border-color: transparent transparent transparent #E5E5E5;
}

/* title */
h6.hotel_title, .hotel_title {
  font-size: var(--f20);
  font-weight: bold;
  color: var(--TextColor);
  padding: 10px 10px 10px 60px;
  background: url(../images/title_arr.svg) left 20px center no-repeat, #F3E7E4;
  overflow: hidden;
}

h6.hotel_title.hotel_rooms_title{
  color: #FFFFFF;
  background: url(../images/btn_arrR.svg) left 20px center no-repeat, var(--TextColor);
}

*+h6.hotel_title, .hotel_title {
  margin-top: var(--m20);
}

.hotel_title+* {
  padding: var(--m30) var(--m20);
}

.daycare_form h6.hotel_title {
  color: #333333;
  background: url(../images/title_arr.svg) left 20px center no-repeat, #F6F6F6;
}

/* Calendar Styling 2022.05.05 */
.calendar {
  background: #fff;
}

.calendar .month {
  margin-top: 0;
  font-weight: normal;
  font-size: 15px;
  color: #fff;
  background: var(--MainColor);
  text-align: center;
  position: relative;
  padding: 0 5px;
  height: 40px;
  line-height: 1.8;
}

.calendar .month h6 {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .1em;
}

.calendar .month a {
  color: #fff;
  padding: 10px;
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.month_choice {
  font-size: 14px;
  line-height: 35px;
  color: #fff;
}

.month_choice.left {
  left: 0px;
}

.month_choice.right {
  right: 0px;
}

.calendar ol {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.calendar ol li {
  border-width: 0px 0 0 1px;
  border-style: solid;
  border-color: #CCCCCC;
}

.calendar ol li .calendar .day-names {
  border-bottom: 1px solid #eee;
}

.calendar .day-names li {
  padding: .5em 0;
  background: #EEEEEE;
  text-align: center;
  color: var(--TextColor);
  font-weight: 1000;
}

.calendar .days li {
  border-width: 0px 0 1px 1px;
  border-style: solid;
  border-color: #CCCCCC;
  font-size: 15px;
  background: #fff;
  padding: 0 0 10px 0;
  min-height: 120px;
}

.calendar ol.days {
  border-top: 1px solid #CCCCCC;
}

.calendar ol li:nth-child(7n) {
  border-right-width: 1px;
}

.calendar .days li .date {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  color: var(--TextColor);
}

.calendar .days li .text_total {
  padding: 10px 3px;
  margin: auto;
  color: var(--MainColor);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.calendar .days li .text_total em {
  font-style: normal;
  font-size: 15px;
  color: var(--TextColor);
  background: #F5F5F5;
  padding: 2px 10px;
  margin: 0 5px;
  text-align: center;
}

.calendar .days li .text_total b {
  font-weight: normal;
}

.calendar .days li .checkRoom {
  background: #AAAAAA;
  font-size: 15px;
  color: white;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  padding: 5px 10px;
  width: calc(100% - 10px);
  margin: 0 auto;
}

.calendar .days li .checkRoom br {
  display: none;
}

.calendar .days li .checkRoom:hover {
  background: var(--MainColor);
}

.calendar .days li.weekend,
.calendar .days li.booked_upweekend {
  background: #EEF1F6;
}

.calendar .days li.booked_up {}

.calendar .days li.holiday {
  background: #fadaa8;
}

.calendar .days li.outside .date {
  color: #ddd;
}

.timeCheck {
  background: #F7F7F7;
}

.hotel_form .timeCheck {
  background: transparent;
}

.timeCheck ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px var(--m20);
}

.hotel_form .timeCheck ul {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  grid-gap: 0;
}

.timeCheck li {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-gap: var(--m20);
  padding: var(--m20) 0;
}

.hotel_form .timeCheck li {
  max-width: 400px;
  width: 50%;
}

.timeCheck li h6 {
  font-size: var(--f18);
  font-weight: bold;
  color: #444444;
  display: flex;
  align-content: center;
  align-items: center;
}

.timeCheck li dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--m20);
}

.hotel_form .timeCheck li dl {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.hotel_form .timeCheck li dd+dd {
  margin-left: var(--m20);
}

.timeCheck li dd input,
.timeCheck li dd select {
  border: 1px solid #DDDDDD;
  padding: 5px;
  width: 100%;
  font-size: var(--f16);
}

.bookNote {
  padding: 10px var(--m20);
}

.order_table {
  list-style: none;
  display: table;
  width: 100%;
  border-bottom: 2px #ccc solid;
}

.order_table li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 15px 7px;
  width: 20%;
  font-size: 17px;
  color: #333;
}

.order_table li .order_table li select {
  border: 2px #ccc solid;
  padding: 3px;
}

.order_table li img {
  width: 100px;
  height: 100px;
}

input[type="button"].ask_del {
  background: url(../images/del.png) no-repeat center center;
  width: 30px;
  height: 30px;
}

.order_box2 {
  padding: 0;
}

.order_table2 {
  list-style: none;
  display: table;
  width: 100%;
  border-bottom: 2px #ccc solid;
}

.order_table2 li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 15px 7px;
  width: 25%;
  font-size: 17px;
  color: #333;
}

.order_table2 li span {
  display: block;
  font-size: 15px;
  color: #2f4b97;
  font-weight: 1000;
}

.order_table2 li img {
  width: 100px;
  height: 100px;
}

.rent_finish_info {
  max-width: 600px;
  margin: 0 auto 20px;
}

.rent_finish_info table {
  width: 100%;
}

.rent_finish_info td {
  background: #fff;
  border: 1px #ccc solid;
  color: #333;
  padding: 10px;
  word-break: break-all;
}

.rent_finish_info td:nth-child(1) {
  font-size: 17px;
  color: #506BB2;
  background: #f6f6f6;
  width: 100px;
  font-weight: 600;
}

.rent_finish_info .rent_finish_head td {
  background: #506BB2;
  font-size: 24px;
  color: #fff;
  text-align: center;
}

.rent_finish_img {
  text-align: center;
}

.rent_finish_img img {
  max-width: 300px;
}

.rent_finish {
  text-align: center;
  padding: 10px;
}

.rent_finish a {
  display: inline-block;
  vertical-align: top;
  background: #000;
  font-size: 17px;
  color: #fff;
  padding: 10px 30px;
  margin: 7px;
}

.rent_finish a.go_rent_history {
  background: #3C4563;
}

.rent_finish a.go_rent_member {
  background: #506BB2;
}


/* record lightBox */
body.lightBox_open {
  overflow: hidden;
}

.lightBox {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  content: '';
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
}

.lightBox>a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.lightBox_box {
  max-width: calc(100% - 20px);
  width: 800px;
  max-height: calc(100% - 40px);
  height: auto;
  line-height: 1.4;
  padding: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  background: #fff;
  text-align: center;
  font-size: 17px;
  z-index: 10;
}

.ligbtBox_main {
  width: 100%;
  height: auto;
  font-family: "微軟正黑體";
  overflow-y: auto;
}

.ligbtBox_main::-webkit-scrollbar {
  width: 5px;
}

.ligbtBox_main::-webkit-scrollbar-thumb {
  background: var(--SubColor);
  border-radius: 5px;
}

.ligbtBox_main>h6 {
  font-weight: normal;
  line-height: 1.4;
  font-size: var(--f20);
  padding-bottom: var(--m20);
  letter-spacing: .1em;
  color: var(--TextColor);
  background: #FFFFFF;
  position: sticky;
  top: 0;
}

.ligbtBox_main>h6 b {
  font-weight: bold;
  display: block;
  letter-spacing: .05em;
}


.close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: absolute;
  top: -20px;
  right: -20px;
  border-radius: 100%;
  background: #000000;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  line-height: 1;
  font-size: 32px;
  transition: .3s;
}

.close-btn::before, .close-btn::after {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%) rotate(-45deg);
  left: 50%;
  top: 50%;
  width: calc(100% - 20px);
  height: 3px;
  background: #FFFFFF;
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

a.close-btn:hover {
  transform: scale(.9);
  transition: .3s;
}

.hotelLb_tb01 {
  width: 100%;
  letter-spacing: .1em;
  font-size: 16px;
}

.hotelLb_tb01 th,
.hotelLb_tb01 td {
  padding: 10px;
  border: 1px solid var(--SubColor);
}

.hotelLb_tb01 th {
  background: var(--MainColor);
  color: #FFFFFF;
  font-weight: normal;
}

.roomNo {
  width: 44px;
}

.roomType {
  width: calc(57% - 44px);
}

td.roomType {
  text-align: left;
}

.roomOpen,
.roomLeft {
  width: 21.5%;
}

.transform-in, .transform-out {
  display: flex;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.transform-in {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.transform-out {
  -webkit-transform: translate(-50%, -50%) scale(.5);
  transform: translate(-50%, -50%) scale(.5);
}

.hotel_btns {
  width: 380px;
  max-width: 100%;
  margin: var(--m30) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--m20);
}

.hotel_btns input,
.hotel_btns button,
.hotel_btns a {
  width: 100%;
  padding: 10px var(--m20);
  color: #FFFFFF;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  letter-spacing: .1em;
  font-size: var(--f18);
}

.hotel_rewrite {
  background: var(--SubColor);
}

.hotel_rewrite::before {
  content: '';
  width: 19px;
  height: 16px;
  display: block;
  background: url(../images/btn_arrL.svg) center left no-repeat;
  transition: .3s;
}

.hotel_rewrite:hover::before {
  transform: translateX(-5px);
}

.hotel_next {
  background: var(--MainColor);
}

.hotel_next::after {
  content: '';
  width: 19px;
  height: 16px;
  background: url(../images/btn_arrR.svg) center right no-repeat;
  display: block;
  transition: .6s;
}

.hotel_next:hover::after {
  transform: translateX(5px);
}

/* 選擇房型頁面 */
.hotel_rooms {
  padding: 0 !important;
}

.hotel_rooms#booking_box{
  background: #F9F5EE;
}

.hotel_rooms section {
  padding: var(--m50) var(--m20);
}

.hotel_rooms section+section {
  border-top: 1px solid #E5E5E5;
}

.hotel_rooms#booking_box section+section{
  border-color: var(--TextColor);
}

.hotel_roomPic {
  width: 400px;
  padding-top: 23%;
  overflow: hidden;
  max-width: 35%;
  position: relative;
}

.hotel_roomPic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.hotel_roomData {
  width: 720px;
  max-width: calc(65% - 20px);
}

.hotel_roomData li {
  display: grid;
  grid-template-columns: 40px repeat(3, 1fr);
  grid-gap: 20px;
  padding: 10px 0;
}

.hotel_formCheck .hotel_roomData li {
  grid-template-columns: repeat(3, 1fr);
}

.petsDataHead li .petDel {
  text-align: center;
}

.petsDataList {
  margin-bottom: var(--m20)
}

.hotel_formCheck .petsDataList {
  margin-bottom: 0;
}

.petsDataList li+li {
  border-top: 1px dotted #CCCCCC;
}

.petsDataList li:first-child .petDelBtn {
  cursor: default;
  pointer-events: none;
  opacity: .2;
  filter: grayscale(10);
}

.petsDataList li .petDelBtn i {
  position: relative;
  background-color: var(--MainColor);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  color: #FFFFFF;
  width: 16px;
  height: 16px;
  text-align: center;
  border-radius: 50px;
}

.petsDataList li .petDelBtn i::before {
  content: '';
  width: 6px;
  height: 2px;
  background: #ffffff;
  position: absolute;
}

.petsDataList li button {
  background: transparent;
}

.petsDataList li>* {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.petsDataList li select {
  width: 100%;
  border: 1px solid #CCCCCC;
  padding: 5px;
  border-radius: 5px;
}

.hotel_roomData dt {
  font-size: var(--f28);
  font-weight: bold;
  color: var(--TextColor);
  line-height: 1.6;
  border-bottom: 3px dotted #CCCCCC;
  letter-spacing: .1em;
}

.hotel_roomData dd {
  color: #333;
  margin: var(--m20) 0;
  font-size: var(--f17);
  /* display: -webkit-box; */
  /* -webkit-box-orient: vertical; */
  /* -webkit-line-clamp: 4; */
  display: block;
  overflow: hidden;
}

.hotel_roomData article {
  padding: var(--m20) var(--m30);
  background: #F7F7F7;
}

#booking_box .hotel_roomData article{
  background: rgba(255,255,255,.5);
}

.petsDataHead {
  border-bottom: 1px solid #CCCCCC;
  margin-bottom: 10px;
}

.hotel_formCheck .petsDataHead {
  margin-bottom: 0;
}

.addOtherBtn {
  width: 200px;
  height: 30px;
  border: 1px solid var(--MainColor);
  color: var(--MainColor);
  border-radius: 50px;
  background: transparent;
  transition: .6s;
}

.addOtherBtn:hover {
  background: var(--MainColor);
  color: #FFFFFF;
}


.choosRoom {
  color: #333333;
  font-size: var(--f17);
  padding: 10px 0;
}

.choosRoom p b {
  color: var(--MainColor);
  font-size: var(--f24);
  margin-left: 30px;
  display: inline-block;
}

.choosRoom_check input {
  visibility: hidden;
}

.choosRoom_check label {
  width: 150px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--MainColor);
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
}

#booking_box .choosRoom_check label{
  background: var(--TextColor);
}

/* .choosRoom_check input:checked+label {
  background: var(--TextColor);
} */

.hotel_formCheck {
  line-height: 1.2;
}

input.hotel_checkInput {
  width: 20px;
  height: 20px;
  margin: 0;
  margin-right: 10px;
}

.hotel_formMain {
  color: #444444;
}

.hotel_formBox .red {
  color: var(--MainColor);
  text-align: left;
}

.hotel_formBox .star.red{
  padding-top: 0;
  padding-bottom: 0;
}

.hotel_formBox .red.note {
  padding: 10px 0;
}

.hotel_formMain li {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 10px;
}

.hotel_formMain .captcha_img .fa {
  font-size: 1em;
  line-height: 1;
  vertical-align: unset;
  transition: 1s;
}

.hotel_pay {
  padding: var(--m30);
}

.hotel_pay p {
  color: #333;
  position: relative;
}

.hotel_pay p label {
  padding: 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.hotel_pay p label::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 1px solid var(--MainColor);
  border-radius: 20px;
  margin-right: 10px;
}

.hotel_pay p input[type="radio"] {
  margin: 0 7px 0 0;
  width: 20px;
  height: 20px;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

.hotel_pay p input[type="radio"]:checked+label::before {
  background: var(--MainColor);
  box-shadow: inset 0px 0px 0px 3px #FFFFFF;
}

.hotel_formPs a {
  color: var(--MainColor);
  text-decoration: underline;
}

.hotel_total {
  border-top: 3px solid var(--MainColor);
  padding: var(--m20);
  position: relative;
}

#booking_box + .hotel_total{
  border-color: var(--TextColor);
}

.hotel_total>a[name], .hotel_total>a[name]:target {
  position: absolute;
  left: 0;
  top: -140px;
}

.hotel_total p b {
  font-size: var(--f24);
  color: var(--MainColor);
  margin-left: var(--m20);
}


/* 訂單完成頁面 */
.hotel_finishBox {
  color: #444444;
  padding: var(--m100) 0;
}

.hotel_finishBox>*+* {
  margin-top: var(--m50);
}

h4.hotel_finish_t {
  font-size: var(--f40);
  font-weight: bold;
  color: var(--TextColor);
  border-bottom: 3px dashed var(--SubColor);
}

.hotel_orderNo {
  padding: 5px var(--m20);
  border-radius: 5px;
  background: var(--MainColor);
  color: #FFFFFF;
  letter-spacing: .1em;
  text-align: center;
}

.hotel_orderNo span {
  padding: 5px var(--m20);
  background: #FFFFFF;
  color: var(--MainColor);
  font-weight: bold;
  margin-left: 10px;
  font-size: var(--f20);
}

.hotel_orderNo+p {
  text-align: center;
  line-height: 1.6;
  letter-spacing: .1em;
}

.bank_info {
  width: 600px;
  max-width: 100%;
  margin: var(--m50) auto 0;
  letter-spacing: .1em;
  font-size: var(--f17);
}

.bank_info h6 {
  text-align: center;
  background: var(--MainColor);
  padding: 10px;
  color: #FFFFFF;
  font-size: var(--f18);
  font-weight: bold;
}

.bank_info ul {
  border: 1px solid var(--MainColor);
}

.bank_info li {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
}

.bank_info li+li {
  border-top: 1px solid var(--MainColor);
}

.bank_info li>* {
  padding: 10px var(--m20);
}

.bank_info li p {
  border-left: 1px solid var(--MainColor);
}

/* 安親表單 */
.daycare_form {
  font-family: "微軟正黑體";
}

.daycare_formList li.serday_choice .form__insert,
.daycare_formList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

.daycare_formList li.serday_choice .form__insert{
  grid-gap: 30px;
}

.daycare_formList li {
  width: 100%;
  padding: 0;
  display: block;
}

.daycare_formList l.last {
  grid-column: 1 / span 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

.daycare_formList .form__insert {
  margin-top: 10px;
}

.daycare_formList li>* {
  display: block;
}

.daycare_formList li.serday_choice {
  grid-column: 1 / span 2;
}

.daycare_formList li.serday_choice .form__insert p{
  margin-bottom: 10px;
}

.hotel_input {
  padding: 5px;
  border: 1px solid #c2bcb4;
  border-radius: 5px;
}

.daycare_formList .sertime_choice .form__insert select, 
.daycare_formList li.serday_choice .form__insert select{
  width: calc((100% - 2em) / 2);
}


input.hotel_input[type=text],
input.hotel_input[type=date],
textarea.hotel_input,
select.hotel_input, 
input.hotel_input[type=datetime-local],
input.hotel_input[type=time] {
  width: 100%;
}

input.captcha[type=text] {
  width: auto;
}

.daycare_formList .form__insert:has(input[type=radio]),
.daycare_formList .form__insert:has(input[type=checkbox]) {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 15px 1fr);
}

.last .animated-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
}

.daycare_formList+.last{margin-top: 20px;}

.last .animated-arrow input {
  padding: 0 10px;
  text-align: center;
}

.captchaBox .form__insert {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

@media (max-width:1024px) {}

@media (max-width:980px) {
  .hotel .main_part {
    padding: 50px 20px;
  }

  .hotel_roomPic {
    max-width: 100%;
    width: calc(50% - 10px);
    height: auto;
    aspect-ratio: 4/3;
    padding: 0;
  }

  .hotel_roomPic img {
    position: relative;
  }

  .hotel_roomData {
    width: calc(50% - 10px);
    max-width: 100%;
    margin-top: var(--m30);
  }

  .hotel_roomData article {
    padding: var(--m30) var(--m20);
  }

  .hotel_roomData li {
    grid-template-columns: 40px 100px repeat(2, 1fr);
    grid-gap: 5px;
  }

  ul.petsDataHead {
    display: none !important;
  }

  .petsDataList li {
    grid-template-columns: 25px 1fr;
  }

  .hotel_formCheck .petsDataList li {
    grid-template-columns: repeat(3, 1fr);
  }

  .petsDataList li p {
    display: grid;
    grid-template-columns: 80px 1fr;
  }

  .hotel_formCheck .petsDataList p {
    grid-template-columns: 1fr;
    font-weight: bold;
    color: var(--TextColor);
  }

  .petsDataList li p.petDel {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    grid-row: 1 / span 3;
  }

  .hotel_formCheck .hotel_roomData li p::before {
    font-size: 14px;
    color: #666666;
    margin-bottom: 5px;
    font-weight: normal;
  }

  .petsDataList li .petNum::before {
    content: '寵物數量';
  }

  .petsDataList li .petWei::before {
    content: '寵物重量';
  }

  .petsDataList li .petFood::before {
    content: '飼料';
  }

  .addOther {
    justify-content: center;
  }
}

@media (max-width:768px) {

  h6.hotel_title, .hotel_title,
  .daycare_form h6.hotel_title {
    padding-left: 35px;
    background-position: left 10px center;
  }

  .calendar {
    margin: 20px auto 0;
  }

  .calendar .day-names * {
    font-size: 13px !important;
  }

  .calendar .days * {
    font-size: 13px !important;
  }

  .calendar .days li .date {
    padding: 7px;
    width: auto;
    height: auto;
    display: inline-block;
  }

  .calendar .days li .checkRoom {
    padding: 1px;
  }

  .calendar .days li .checkRoom span {
    display: none;
  }

  .calendar .days li .text_total p {
    width: 100%;
    text-align: center;
    line-height: 1.8;
  }

  .stepList {
    letter-spacing: 0;
  }

  .hotel_title+* {
    padding: var(--m20) 10px;
  }

  .timeCheck ul {
    grid-template-columns: 1fr;
  }

  .timeCheck li {
    padding: 0;
  }

  .timeCheck li+li {
    margin-top: 10px;
  }

  .hotel_form .timeCheck li+li {
    margin-top: 0;
  }

  .lightBox_box {
    padding: var(--m50) var(--m20) var(--m20);
  }

  .close-btn {
    right: unset;
    left: calc((100% - 40px) / 2);
    top: -25px;
  }

  .hotel_rooms section {
    padding: var(--m50) 0;
  }
}

@media (max-width:650px) {
  .order_thead {
    margin-bottom: 10px;
  }

  .order_thead li {
    display: block;
    width: 100%;
    display: none;
  }

  .order_thead li:nth-child(1) {
    display: block;
  }

  .order_table {
    position: relative;
    padding: 0 0 20px 110px;
  }

  .order_table li {
    display: block;
    width: auto;
    text-align: left;
    padding: 7px;
  }

  .order_table li:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
  }

  .order_table li:nth-child(2):before,
  .order_table li:nth-child(3):before,
  .order_table li:nth-child(4):before {
    content: attr(data-str);
    display: inline-block;
    vertical-align: top;
    width: 80px;
  }

  .order_table li select {
    width: calc(50% - 50px);
  }

  .order_table li:nth-child(5) {
    position: absolute;
    top: 110px;
    left: 0;
  }

  input[type="button"].ask_del {
    border: 5px #506BB2 solid;
    border-radius: 100px;
    width: 42px;
    height: 42px;
    background-color: #fff;
  }


  .order_table2 {
    position: relative;
    padding: 0 0 20px 120px;
  }

  .order_table2 li {
    display: block;
    width: auto;
    text-align: left;
    padding: 7px;
  }

  .order_table2 li:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
  }

  .order_table2 li span {
    display: inline-block;
    margin-right: 15px;
    width: 60px;
  }

  .stepList figure {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .stepList li {
    padding: 10px;
    height: auto;
  }

  .stepList figure {
    padding-left: 0;
  }

  .stepList li figure b {
    max-width: 100%;
    margin-top: 5px;
  }

  .stepList li:not(:last-child)::after {
    border-width: 10px 0 10px 8px;
    top: 10px;
  }

  .bookNote {
    padding: 0;
  }

  .hotel_roomData,
  .hotel_roomPic {
    width: 100%;
  }

  /* ul.petsDataHead {
    display: none !important;
  }

  .petsDataList li {
    grid-template-columns: 25px 1fr;
  }

  .hotel_formCheck .petsDataList li {
    grid-template-columns: repeat(3, 1fr);
  }

  .petsDataList li p {
    display: grid;
    grid-template-columns: 80px 1fr;
  }

  .hotel_formCheck .petsDataList p {
    grid-template-columns: 1fr;
    font-weight: bold;
    color: var(--TextColor);
  }

  .petsDataList li p.petDel {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    grid-row: 1 / span 3;
  }

  .hotel_formCheck .hotel_roomData li p::before {
    font-size: 14px;
    color: #666666;
    margin-bottom: 5px;
    font-weight: normal;
  }

  .petsDataList li .petNum::before {
    content: '寵物數量';
  }

  .petsDataList li .petWei::before {
    content: '寵物重量';
  }

  .petsDataList li .petFood::before {
    content: '飼料';
  }

  .addOther {
    justify-content: center;
  } */

  .hotel_form .timeCheck li {
    width: 100%;
    grid-template-columns: 80px 1fr;
  }

  .hotel_form .timeCheck li+li {
    margin-top: 10px;
  }

  .hotel_formMain li {
    grid-gap: 10px;
    grid-template-columns: 1fr;
  }

  .daycare_formList li.serday_choice{
    grid-column: unset;
  }

  .hotel_formMain .form__insert {
    padding-left: 13px;
  }

  .hotel_formCheck .hotel_formMain .form__label {
    font-weight: bold;
  }

  .hotel_formCheck .hotel_formMain .form__insert {
    padding-left: 0;
    color: #666666;
  }

  input.hotel_checkInput {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  .daycare_formList li.serday_choice .form__insert, 
  .daycare_formList {
    grid-template-columns: 1fr;
  }

  .daycare_formList li {
    padding: 0;
  }

  .daycare_formList li.last {
    grid-column: unset;
  }

  .daycare_formList .form__insert {
    padding-left: 0;
  }

  .daycare_form .information_left, .daycare_form .information_right {
    padding: 0;
  }
}

@media (max-width:570px) {}

@media (max-width:480px) {

  .order_table li:nth-child(2):before,
  .order_table li:nth-child(3):before {
    display: block;
    width: 100%;
    color: #06F;
    font-weight: 600;
    padding-bottom: 5px;
  }

  .order_table li select {
    width: calc(50% - 5px);
  }

  .order_table2 {
    padding-left: 0;
  }

  .order_table2 li:nth-child(1) {
    position: static;
  }

  .calendar .days li .checkRoom br {
    display: inline;
  }

  .calendar .days li .text_total {
    padding: 5px 3px;
  }

  .calendar .days li .text_total em {
    width: 100%;
  }

  .calendar .days li .text_total b {
    display: none;
  }

  .stepList li figure b br {
    display: inline;
  }

  .hotel_btns {
    grid-gap: 10px;
  }

  .hotelLb_tb01 {
    letter-spacing: 0;
  }

  .hotel_title+* {
    padding: var(--m20) 5px;
  }

  .hotel_title+*.timeCheck {
    padding: var(--m20) 10px;
  }

  .choosRoom {
    justify-content: flex-end;
  }

  .choosRoom p {
    width: 100%;
    margin-bottom: 10px;
  }

  .choosRoom_check {
    width: 100%;
  }

  .choosRoom_check label {
    width: 100%;
  }

  .hotel_formCheck .petsDataList li {
    grid-template-columns: repeat(2, 1fr);
  }

  .hotel_formCheck .petsDataList p:first-child {
    grid-column: 1 / span 2;
  }

  .hotel_formCheck .petsDataList p {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }

  .hotel_formCheck .petsDataList p+p {
    margin-top: 10px;
  }

  .hotel_formCheck .hotel_roomData li p::before {
    width: 56px;
    margin-bottom: 0;
    margin-right: 10px;
    text-align: right;
  }

  .daycare_formList li .form__label {
    font-weight: bold;
  }

  .daycare_formList .form__insert:has(input[type=radio]),
  .daycare_formList .form__insert:has(input[type=checkbox]) {
    grid-template-columns: repeat(2, 13px 1fr);
    grid-gap: 5px;
  }
}

@media (max-width:375px) {

  .hotel .main_part {
    padding: 50px 15px;
  }

  .calendar .days li .checkRoom {
    font-size: 12px !important;
  }

  .calendar .days li .text_total {
    padding: 3px 0;
  }

  .timeCheck li {
    grid-template-columns: 1fr;
  }

  .bank_info li>* {
    letter-spacing: 0;
    padding: 10px;
  }

}

@media (max-width:350px) {
  .hotel_formCheck .petsDataList li {
    grid-template-columns: 1fr;
  }

  .hotel_formCheck .petsDataList p:first-child {
    grid-column: unset;
  }
}