@charset "utf-8";

/* 예약확인 */
.customer_res {width:500px;margin:50px auto;}

.sub_menu {width:100%;margin:40px 0;}
.sub_menu li {width:49.5%;font-size:1.2em;display:inline-block;text-align:center;padding:10px;border-bottom:1px solid #ccc;color:#ccc;font-weight:bold;}
.sub_menu .on {color:#d81918;border-bottom:1px solid #d81918;}

.sub_info .frm_input {margin-bottom:10px;height:50px;}
.sub_info .btn_submit {width:100%;height:60px;background:#e72419;color:#fff;font-size:1.2em;line-height:60px;margin:20px auto;}
.sub_info .login_info {text-align: center;font-size:1.1em;}
.sub_info .login_info li {display:inline-block;padding:0px 20px;border-right:1px solid #aaa;}
.sub_info .login_info li:last-child {border:0;}

.res_con_box .confirm_box {width:100%;text-align:center;padding:0px;}
.res_con_box .confirm_box .info {font-size:1.1em;line-height:1.6em;margin:10px 0 20px;background:#f5f5f5;padding:20px;}
.res_con_box .confirm_box input {margin-bottom:10px;padding:0 20px;height:50px;font-size:1.2em;}
.res_con_box .confirm_box input::placeholder {color:#bbb;}
.res_con_box .confirm_box .btn {height:60px;background:#333;color:#fff;font-size:1.1em;line-height:60px;margin:20px auto;border-radius:5px;}
.res_con_box .confirm_box .res_num {border-bottom: 1px solid #999;color:#999;}

.res_number_box {position:absolute;top:50px;left:50%;margin-left:-160px;display:none;z-index: 2001;}
.res_number_box .number_box {float:right;width:320px;border:1px solid #b4b4b4;background:#eeeeee;text-align:center;padding:60px 40px 40px 40px;}
.res_number_box .number_box .info {font-size:14px;line-height:1.6em;margin:10px 0 20px;}
.res_number_box .number_box input {width:210px;height:50px;border:1px solid #c6c6c6;margin-bottom:10px;padding:0 20px;}
.res_number_box .number_box input::placeholder {color:#bbb;}
.res_number_box .number_box .btn {width:240px;height:60px;background:#fff;color:#e72419;border:1px solid #e72419;font-size:14px;line-height:60px;margin-top:48px;}

.kakao_box {clear:both;padding-top:50px;text-align:center;font-size:14px;font-weight:bold;}
.kakao_box .id_confirm {background:#f7e317;padding:15px;width:300px;font-size:14px;font-weight:bold;margin:auto;border-radius:10px;}

/* 예약목록 */
.customer_list {width:100%;}
.customer_list h2 {font-size:1.4em;padding:30px 10px;}
.customer_list .step_info {width:100%;padding:50px;text-align:center;border:1px solid #ddd;border-radius:15px;}
.customer_list .step_info .step_arrow {margin:0 50px;}
.customer_list .ul_list {border-bottom:1px solid #ddd;text-align:center;}
.customer_list .ul_list li {display:inline-block;padding:10px;margin:0;width:14.5%;border:0;}
.customer_list .ul_list .li_date {width:19.5%;}
.customer_list .ul_list .li_datetime {width:29.5%;}
.customer_list .ul_list .li_brc {width:9.5%}
.customer_list .ul_list .li_state {width:9.5%}

/* 예약상세 */
.customer_view {margin:50px auto;}
.view_top {margin-bottom:20px;font-size:1.2em;}
.view_top .res_state {color:#d81918; font-size:1em;border:1px solid #d81918;padding:5px 10px;}
.view_top .cus_name {font-size:1.2em;font-weight:900;padding-left:20px;}
.view_top .res_no {float:right;padding:10px 30px;color:#888;}

.tbl_form {width:100%;border-top:1px solid #aaa;}
.tbl_form thead th {padding:15px 50px;background-color:#f7f7f7;border-bottom:1px solid #ddd;font-size:1.2em;text-align:left;}
.tbl_form tbody th {padding:15px;border-bottom:1px solid #ddd;font-size:1.1em;}
.tbl_form tbody td {padding:15px;border-bottom:1px solid #ddd;font-size:1.1em;}

.div_rent {margin-top:30px;border:1px solid #ddd;border-radius:15px;padding:50px;}
.div_rent .car_img {width:49%;display:inline-block;text-align:center;}
.div_rent .car_info {width:49%;display:inline-block;vertical-align:top;}
.div_rent .car_info h3 {font-size:2em;padding:0 15px 10px;}
.tbl_rent {width:100%;}
.tbl_rent th {padding:7px 15px;font-size:1.2em;line-height:1.6em;border-bottom:1px solid #ddd;text-align:left;width:100px;}
.tbl_rent td {padding:7px 15px;font-size:1.2em;line-height:1.6em;border-bottom:1px solid #ddd;}
.tbl_rent .price {color:#e63a12;font-weight:bold;}
.tbl_rent .price2 {font-weight:bold;}
.tbl_sub {margin-top:10px;}
.tbl_sub th, td {padding:0 20px 0 0;}
.tbl_sub td {font-weight:100;}

.tbl_account {width:100%; margin-top:20px;font-size:1.1em;}
.tbl_account .right {text-align:right;font-weight:bold;}
.tbl_account .gray {background:#eee;}
.tbl_account .red {color:red;}
.tbl_account .btn_bill {color:#fff;background:#888;padding:3px;border-radius:3px;width:45px;display:inline-block;}

.tot_price {font-size:18px;font-weight:bold;text-align:right;padding:20px 10px;}
.bold {font-weight:bold;}

.bank_info {font-size:1em;background:#eee;padding:10px 20px;width:360px;border-radius:20px;margin:auto;}

.btn_area {padding:20px 0;}
.btn_area .btn {padding:7px 15px;font-size:1.2em;border-radius:5px;font-weight:bold;margin-right:10px;background-color:#ddd;}
.btn_area .on {background-color:#e73a12;color:#fff;}
.btn_area .btn_cancel {float:right;background-color:#aaa;color:#fff;line-height:1.4em;}
.btn_area .btn_cancel0 {}
.btn_area .btn_cancel1 {background-color:#e73a12;}
.btn_area .btn_list {background:#666;border-radius:5px;text-align:center;font-size:1.2em;font-weight:bold;color:#fff;padding:7px 15px;display:inline-block;float:right;}

.dimmed{position:fixed;top:0;right:0;bottom:0px;left:0;z-index:2000;width:100%;height:100%;background-color:#000;opacity:.6;filter:alpha(opacity=50)}
.pop_layer{ position:fixed;top:10%;left:50%;margin-left:-150px;width:300px;z-index:4000;background:#fff;padding:25px;border-radius:20px;line-height:1.6em;}
.pop_layer .close {float:right;font-size:1.2em;}
.pop_layer h3 {margin-bottom:20px;text-align:center;font-size:1.2em;}
.pop_layer .tbl_cancel {margin:10px 0 20px;}
.pop_layer .tbl_cancel th {padding:5px !important;line-height:1.6em;}
.pop_layer .tbl_cancel td {padding:5px !important;line-height:1.6em;text-align:right;}
.pop_layer .tbl_cancel .cancel_info {font-size:0.9em;}
.pop_layer select, input {border:1px solid #ddd;height:30px;width:100%;font-size:0.9em;}
.pop_layer .in_bank h4 {display:inline-block;margin:0 10px 10px 0;width:70px;}
.pop_layer .in_bank h5 {color:red;}
.pop_layer .in_bank input[type="text"] {width:190px;margin-top:10px;}
.pop_layer .in_bank2 h4 {display:inline-block;margin:10px 10px 5px 0;width:80px;}
.pop_layer .in_bank2 input {width:200px;margin-top:5px;}
.pop_layer h5 {margin-top:10px;}
.pop_layer .cancel_reason {margin:10px 0;}
.pop_layer .cancel_reason_etc {display:none;}
.pop_layer .btn_area {margin:15px auto 0px;text-align:center;border:0;}
.pop_layer .btn {clear:both;background-color:#e73a12;color:#fff;padding:7px 15px;border-radius:5px;}

/* 견적서 */
#pop {padding:40px 30px;}
.tbl_basic {width:900px;border:2px solid #aaa;border-collapse: collapse;}
.tbl_basic th {font-size:1.1em;border:1px solid #aaa;padding:5px;} 
.tbl_basic td {text-align:center;font-size:1.1em;border:1px solid #aaa;padding:5px;}
.tbl_basic .price {text-align:right;padding-right:10px;}

@media ( max-width: 1200px ) {
    .div_rent .car_info {width:100%;margin-top:20px;}

    .customer_view {width:90%;margin:50px 5%;}
    .customer_list {width:90%;margin:0px 5%;}
}

@media ( max-width: 900px ) {
    .hyear {display:none;}
    .customer_list .step_info {padding:50px 20px;}
    .customer_list .step_info .step_arrow {margin:0 20px;}
}

@media ( max-width: 600px ) {
    .div_rent .car_img {width:100%;max-width:410px;}
    .div_rent .car_img img {width:100%;}
    
    .view_top {font-size:1em;}
    .view_top .cus_name {padding-left:10px;}
    .view_top .res_no {padding:10px;}
    .div_rent {padding:20px;}
    .div_rent .car_info {font-size:0.8em;}
    .customer_res {width:90%;margin:50px 5%;}
    .res_con_box .confirm_box {font-size:0.9em;}
    .res_con_box .confirm_box .info {padding:20px 10px;}
    .tbl_account {font-size:0.9em;}
    .btn_area {padding:10px 0;font-size:0.8em;}
    .btn_area .btn_cancel1 {height:30px;}
    .btn_area .btn_list {height:30px;}
    .pop_layer {padding:20px;}
    .won {display:none;}
    
    .customer_list .step_info {padding:30px 10px;}
    .customer_list .step_info #step_img1 {content:url('./img/customer_step1_m.jpg')}
    .customer_list .step_info #step_img2 {content:url('./img/customer_step2_m.jpg')}
    .customer_list .step_info #step_img3 {content:url('./img/customer_step3_m.jpg?v=1')}
    .customer_list .step_info .step_img {width:20%;}
    .customer_list .step_info .step_arrow {width:11px;vertical-align:top;margin-top:5px;}

    .tbl_wrap .tbl_head01 {display:none;}
    .customer_list .ul_list {border:1px solid #ddd;border-radius:10px;margin-bottom:15px;text-align:left;padding:0;}
    .customer_list .ul_list .li_brc {width:20%;border-radius:10px 0 0 0;text-align:center;z-index:9;position: relative;}
    .customer_list .ul_list .li_date {width:78%;border-radius:0 10px 0 0;z-index:9;position: relative;}
    .customer_list .ul_list .li_carname {display:block;width:100%;font-weight:900;padding:10px 20px 0;}
    .customer_list .ul_list .li_datetime {width:65%;padding:5px 0 0 20px;}
    .customer_list .ul_list .li_price {width:30%;text-align:right;}
    .customer_list .ul_list .li_state {position:absolute;margin-top:-65px;width:90%;text-align:right;right:5%;background-color:#f5f5f5;border-radius:10px 10px 0 0;z-index:0;border:1px solid #ddd;border-bottom:0;padding-right:20px;}
}