@charset "utf-8";

.pagecm{position:relative;padding:40px 5%;border-radius:20px 20px 0 0;font-size:16px;font-weight:500;color:#888;line-height:1.65;background:#f5f5f5}
.pagecm *{word-break:keep-all}
.titcm{margin-bottom:30px;font-size:30px;font-weight:700;color:#222;text-align:center;font-family:var(--k-font)}
.titcm span{display:block;position:relative;width:7px;height:7px;margin:15px auto;border-radius:50%;background:var(--primary)}
.titcm span:before, .titcm span:after{display:block;content:"";position:absolute;left:-16px;width:100%;height:100%;border-radius:50%;background:var(--primary)}
.titcm span:after{left:16px}
.stitcm{margin-bottom:5px;font-size:24px;font-weight:700;color:#222;text-align:center;font-family:var(--k-font)}

/* 예약하기 */
#rsvWirte .copy_btn{position:absolute;top:20px;right:20px;;width:max-content;margin-left:auto;padding:7px 15px;border-radius:20px;font-size:13px;font-weight:500;color:#888;background:#fff}
#rsvWirte .copy_btn i{margin-right:5px}
#rsvWirte .item{padding:25px;border-radius:12px;background:#fff}
#rsvWirte .item figure{display:flex;gap:20px}
#rsvWirte .item figcaption{display:flex;flex-flow:column;justify-content:center;flex-grow:1;gap:4px}
#rsvWirte .item .thum{flex-shrink:0;overflow:hidden;width:160px;height:160px;border-radius:12px;background:#fff}
#rsvWirte .item .thum img{width:100%;height:100%;object-fit:cover}
#rsvWirte .item .name{margin-bottom:5px;font-size:18px;font-weight:700;color:#222}
#rsvWirte .item p{color:#777}
#rsvWirte .item p i{margin-right:5px;color:var(--primary)}
#rsvWirte .item .btns {display:flex;gap:6px}
#rsvWirte .item .btns a{display:flex;align-items:center;justify-content:center;gap:5px;width:50%;padding:8px 20px;margin-top:8px;border-radius:20px;border:1px solid #e1e1e1;font-size:14px;font-weight:600;text-align:center;color:#222}
#rsvWirte .item .btns a i{font-size:13px}
#rsvWirte .info{padding:25px;margin-top:20px;border-radius:12px;background:#fff}
#rsvWirte .info div{font-size:15px}
#rsvWirte .rsv_area{padding:25px;margin-top:20px;border-radius:12px;background:#fff}
#rsvWirte .rsv_area dl dt{text-align:center}
#rsvWirte .rsv_area dl .time{display:grid;padding:40px 0 25px;border-top:1px solid #e1e1e1;text-align:center}
#rsvWirte .rsv_area dl .time.active{grid-template-columns:repeat(4, 1fr);gap:6px}
#rsvWirte .rsv_area dl .time .hide_input{display:none}
#rsvWirte .rsv_area dl .time .dft_btn{padding:12px 0;border:1px solid #e1e1e1;border-radius:30px;font-size:14px;color:#222;text-align:center;cursor:pointer}
#rsvWirte .rsv_area dl .time .dft_btn.closed{background:#f1f1f1;color:#aaa}
#rsvWirte .rsv_area dl .time .hide_input:checked + .dft_btn{border-color:var(--primary);color:#fff;background:var(--primary)}
#rsvWirte .rsv_area .rsv_btn{width:100%;height:55px;border-radius:30px;font-size:16px;font-weight:600;color:#fff;background:var(--primary); font-family: var(--k-font);}
#rsvWirte .rsv_area .ps{padding:25px;margin-bottom:25px;border-radius:12px;font-size:15px;background:#f5f5f5}
#rsvWirte .rsv_area .ps ul li:before{display:inline-block;content:"";vertical-align:4px;width:3px;height:3px;border-radius:50%;margin-right:8px;background:var(--primary)}
#mara_cal_view .red{color:#e60000!important}
#mara_cal_view .blue{color:#007bda!important}
#mara_cal_view .gray{color:#999}
#mara_cal_view.mo{width:100%;padding:30px 0;font-size:14px;letter-spacing:-.3px;line-height:1.8}
#mara_cal_view.mo .title{display:flex;justify-content:space-evenly;align-items:center;margin-bottom:20px;font-size:18px;font-weight:600;color:#222;line-height:1;font-family:'Poppins'}
#mara_cal_view.mo .arr{width:35px;height:35px;border-radius:14px;font-size:17px;text-align:center;line-height:35px;color:#777;box-shadow:2px 2px 5px rgba(0,0,0,.1)}
#mara_cal_view.mo .tbl_mara{padding:0 20px}
#mara_cal_view.mo .tbl_mara table{width:100%;color:#777}
#mara_cal_view.mo .tbl_mara table th{width:calc(100% / 7);height:40px;font-size:15px;font-weight:500}
#mara_cal_view.mo .tbl_mara table td{height:40px;font-weight:500;text-align:center;letter-spacing:0;font-size:15px;line-height:1.25;font-family:'poppins', 'Pretendard'}
#mara_cal_view.mo .gray{color:#ccc}
#mara_cal_view.mo .tbl_mara table button{border:none;font-size:15px;font-weight:500;background:none}
#mara_cal_view.mo .tbl_mara table .select{display:inline-block;width:38px;height:38px;margin:0 auto;border-radius:50%;font-size:15px;font-weight:500;line-height:38px;color:#fff!important;background-color:#333}

/*예약내역*/
.order_form .order_sch{margin-top:20px;padding:25px;border-radius:12px;background:#fff}
.order_form .order_sch ul{display:flex;gap:5px}
.order_form .order_sch ul+ul{margin-top:5px}
.order_form .order_sch li{width:33.33%}
.order_form .order_sch input{width:100%;padding:10px;border-radius:3px;border:1px solid #e1e1e1}
.order_form .order_sch select{width:100%;padding:10px;border-radius:3px;border:1px solid #e1e1e1}
.order_form .order_sch .order_srt{width:calc(100% - 15px)}
.order_form .tabs{display:flex;justify-content:center;align-items:center;gap:20px;text-align:center}
.order_form .tabs li{width:130px}
.order_form .tabs a{display:block;height:100%;padding:8px 20px;border-radius:50px;border:1px solid #e1e1e1;font-size:17px;background:#fff;font-family:var(--k-font);transition:all .3s}
.order_form .tabs .on a{border:none;color:#fff;background:var(--primary)}
.order_form .tbl_wrap{overflow:auto}
.order_form table{width:100%;text-align:center}
.order_form table *{padding:7px;color:#111}
.order_form table thead tr th{border-top:2px solid var(--primary);font-weight:700;color:var(--primary);background:#e6f1f9}
.order_form table tbody tr:nth-child(even) td{background:#f7f7f7}
.order_form table tbody td{border-bottom:1px solid #e1e1e1;white-space:nowrap}
.order_form table tbody td+td{border-left:1px dashed #e1e1e1}
.order_form table select{border:1px solid #e1e1e1;border-radius:50px}
.order_form .pg_wrap{display:block;float:none;margin-top:20px;font-size:13px;text-align:center}
.order_form .pg_wrap .pg_current{border:none;background:#333}
.order_form .mypage_wrt{display:flex;justify-content:center;align-items:center;width:120px;margin:20px 0 0 auto;padding:10px;border-radius:3px;color:#fff;background:#333}

.ordercm .sch_btn{display:flex;gap:5px}
.ordercm .sch_btn input{width:100%;border:none;font-weight:500;border-radius:3px;padding:0;line-height:40px;color:#fff;background:#333;font-family:'pretendard'}
.ordercm .sch_btn li{width:50%}
.ordercm .sch_btn a{display:flex;justify-content:center;align-items:center;border-radius:3px;line-height:40px;color:#fff;background:#aaa}
.ordercm .tbl_area{margin-top:20px;padding:25px;border-radius:12px;font-weight:400;background:#fff}

#order_hold .hold_wrt{display:flex;justify-content:center;align-items:center;margin-top:20px;padding:10px;border-radius:50px;font-size:18px;color:#fff;background:#111;font-family:var(--k-font)}
.od_wrt ul+ul{margin-top:10px}
.od_wrt .op{width:80px;border-radius:3px;font-weight:700;line-height:40px;text-align:center;color:#fff;background:var(--primary)}
.od_wrt div>input{width:100%;padding:10px;border:none;border-bottom:1px solid #e1e1e1;border-radius:0}
.od_wrt .no_line{width:100%;border-bottom:1px solid #e1e1e1;line-height:40px}
.od_wrt .time_wrap p{display:inline-flex;justify-content:space-between;align-items:center;gap:5px;padding:7px 15px;border:1px solid #e1e1e1;border-radius:50px}
.od_wrt .time_wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}
.od_wrt .row{display:flex;gap:10px;justify-content:space-between}
.od_wrt .road{display:flex;gap:10px;width:100%}
.od_wrt .half{width:50%}
.od_wrt .road input{width:100%;padding:10px;border:1px solid #e1e1e1;border-radius:3px}
.od_wrt .sch_btn{margin-top:30px}

@media(max-width:480px){
.pagecm{padding:40px 20px;font-size:13px}    
.titcm{font-size:26px}  
.titcm span{width:5px;height:5px;margin-top:10px}
.stitcm{font-size:20px}
#rsvWirte .copy_btn{top:15px;right:15px;font-size:12px}
#rsvWirte .item{padding:20px 15px}
#rsvWirte .item figure{gap:15px}
#rsvWirte .item .thum{width:95px;height:95px}
#rsvWirte .item .name{margin:0;font-size:16px}
#rsvWirte .item .btns a{padding:5px 15px;font-size:13px}
#rsvWirte .item .btns a i{font-size:11px}
#rsvWirte .info div{font-size:13px}
#rsvWirte .info{padding:20px 15px}
#rsvWirte .rsv_area{padding:20px 15px}
#rsvWirte .rsv_area .ps{padding:15px;font-size:13px}
#rsvWirte .rsv_area .ps ul li:before{width:2px;height:2px;margin-right:6px}
#mara_cal_view.mo .tbl_mara{padding:0 10px}

.order_form .order_sch{padding:20px 15px}
.order_form .tbl_area{padding:20px 15px}
.order_form .tabs{gap:10px}
.order_form .tabs a{padding:5px 20px;font-size:18px}

.order_form .date{overflow:hidden;display:block !important}
.order_form .date .srt{float:left;width:50%}
.order_form .date .end{float:right;width:50%;margin-bottom:5px}
.order_form .date .time{width:100%}

.od_wrt th{width:80px}
.od_wrt input{width:100%}
.od_wrt .op{line-height:35px}
.od_wrt .row{display:block}
.od_wrt .road{width:100%}
.od_wrt .row li+li{margin-top:5px}
.od_wrt ul+ul{margin-top:5px}
.od_time .op{width:100%}
}
@media(max-width:380px){
#rsvWirte .item figure{flex-flow:column}
#rsvWirte .item .thum{width:100%;height:180px}
.od_wrt .time_wrap{grid-template-columns:repeat(3,1fr)}
}