@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.todaytomorrow { cursor: pointer; color: var(--pointcolor); }
#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;}

#Reservation #captcha { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 2rem auto; }
#Reservation #captcha #captcha_info { width: 100%; text-align: center; display: block; font-size: 1.25rem; margin-top: .5rem; display: none; }

@media(max-width:900px){
    #Reservation #captcha.m_captcha audio { display: none; }
    #Reservation #captcha.m_captcha #captcha_img { width: auto; height: 40px; margin-bottom: 0; }
    #Reservation #captcha.m_captcha #captcha_key { width: auto; height: 40px; padding: 0 1rem; }

}

.swal2-height-auto { padding-right: 0 !important; }
.swal2-container { width: 100%; padding: 0; z-index: 9998; }
.sweetty-popup { position: relative; min-width: 25em; width: auto; font-family: var(--pointfont); padding: 2rem 2.5rem; font-size: 1rem; }
.sweetty-popup .sweetty-title { position: relative; font-size: 1.15rem; font-weight: 500; padding: 0; color: var(--dark-gray); }
.sweetty-popup .sweetty-title h2 { font-size: 1.15rem; }
.sweetty-popup .swal2-close { position: absolute; top: .25rem; right: .25rem; color: var(--subcolor); }
.sweetty-popup .swal2-close:focus, .sweetty-popup .swal2-close:active { border: none; outline: none; box-shadow: none; }
.sweetty-popup .swal2-close:hover { color: var(--pointcolor); }
.sweetty-popup .swal2-html-container p span { display: block; padding: .25rem 0; line-height: 1; }
.sweetty-popup .swal2-html-container a { display: inline-flex; align-items: center; justify-content: center; background-color: #fff; color: #2c2c2c; padding: .5rem 2rem; border: 1px solid #e3e7ea; border-radius: .25rem; transition: .3s; }
.sweetty-popup .swal2-html-container a:hover { border-color: var(--pointcolor); }
.sweetty-popup .swal2-html-container a img { height: 1.3125rem; }
@media(max-width:900px){
    .sweetty-popup { width: 90%; font-size: 1.15rem; }
    .sweetty-popup .swal2-html-container { padding: 1rem 0; }
    .sweetty-popup .swal2-html-container p span { font-size: 1.05rem; }
    .sweetty-popup .swal2-html-container a { padding: .75rem 2.25rem; font-size: 1.15rem; }
}