@charset "UTF-8";

/* sub Top */
.subTop {height:40.625rem; position:Relative; margin-top:70px; left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.05); transition:transform 2s var(--ani); }
.subTop .subTopImg.on {opacity:1;transform:scale(1)}

.subTop .inner {position: relative; max-width: 1410px; width: 90%; top:12rem; margin: auto;}
.subTop .navEnTit {font-family: var(--pointfont); color:rgba(255,255,255,.1); font-weight: 700;}

#subnav {display: flex; align-items: center; gap:1rem;}

/* Reservation */
#Reservation .calendar .month {background-color: var(--pointcolor); display: flex; align-items: center; justify-content: center; gap:0 2rem; border-radius: .75rem; padding: 1rem; color:#fff;}
#Reservation .calendar .arrow {display: flex; align-items: center;cursor: pointer;}

#Reservation .calendarTb {width: 100%; border-spacing: 0;}

#Reservation .calendarTb { border-bottom:1px solid rgba(20,49,79,.15); }
#Reservation .calendarTb td:first-child, #Reservation .Red  {color:#ba201f;}
#Reservation .star {position: relative; padding-left: 1rem;}
#Reservation .star:after {content:'*'; color:#ba201f; font-weight: 700; position: absolute; left: 0; top:0;}
#Reservation .calendarTb td:last-child {color:#1f6ac6;}
#Reservation .calendarTb td {padding: 1.1rem 0; border-bottom:1px solid rgba(20,49,79,.15);}
#Reservation .calendarTb tr:last-child td { border-bottom: 0; }
#Reservation .calendarTb td span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: transparent; color: #141414; }
#Reservation .calendarTb td span.none { cursor: default; color: #ccc; }
#Reservation .calendarTb td span.usual { cursor: pointer; }
#Reservation .calendarTb td span.usual.on { background-color: var(--pointcolor); color: #fff; }

#Reservation .TimeBox {margin-right: 1rem;}
#Reservation .TimeBox .box {background-color: #f3f4f9; padding: 1rem 0; color:var(--pointcolor); border-radius: .75rem;}

#Reservation .scrollBox {padding-right: .7rem; padding-top: .7rem; border-radius: .75rem; border:1px solid #e5e5e5;}
#Reservation .TimeList { max-height: 22.375rem; overflow-y: auto;}
#Reservation .TimeList::-webkit-scrollbar {width: 3px;}
#Reservation .TimeList ul {padding: 0 .7rem .7rem; display: flex; flex-direction: column; gap:.7rem;}
#Reservation .TimeList li {padding: .5rem; border-radius: .75rem; border:1px solid #e5e5e5;cursor: pointer;}

#Reservation .TimeList li.on {border-color:var(--pointcolor); background-color: var(--pointcolor); color:#fff; font-weight: 700;}
#Reservation .TimeList li.off {background-color: #f5f5f5; color:#838383;}

#Reservation .Line {width: 100%; height: 2px; background-color: rgba(56,74,139,.2); margin: 3rem 0;}

#Reservation .input_box {display: flex;} 
#Reservation .input_box .inputTit {font-weight: 700; max-width: 8.5rem; width: 100%;}
#Reservation .input_box .inputTxt {width: calc(100% - 8rem); display: flex; align-items: center; gap:.5rem; justify-content: space-between;}
#Reservation .input_box span {position: relative; padding-right: 1rem;}
#Reservation .input_box span:after {content:'*'; color:#ba201f; font-weight: 400; position: absolute; right: 0; top:0;}

#Reservation .input_box input[type='text'], #Reservation .input_box input[type='password'], #Reservation .input_box select, #Reservation .select_box select {padding: 1rem 1.2rem; border-radius: 0; border:1px solid #e5e5e5; box-shadow: none; min-height: 3.75rem; height: 100%;}
#Reservation .input_box select {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; appearance:none; background:url('/img/sub/select_arrow.png') no-repeat right .875rem center; background-size: 1rem;}

#Reservation .Phone select {width: 28%;}
#Reservation .Phone input[type='text'] {width: 34%;}

#Reservation .check_box .box {display: flex; align-items: center; gap:.5rem;}
#Reservation input[type='radio'] { appearance: none; width: 1.375rem; height: 1.375rem; padding: 0; box-shadow: 0 0 0 1px #dfdfdf; border: 4px #dfdfdf; border-radius: 50%; background-color: #fff;} 
#Reservation input[type='radio']:checked {box-shadow: 0 0 0 1px #dfdfdf; border: 4px solid #fff; background-color: var(--pointcolor);}

#Reservation textarea {padding: 1rem 1.2rem; border-radius: 0; border:1px solid #e5e5e5; width: 90%; height: 11.25rem;}
#Reservation .BR_Btn {padding: 1rem 5.5rem; border-radius: 1.875rem;}