html{scroll-behavior: smooth;}
select{ appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; background: url(/static/kjz_mobile/img/icon/select_arrow.png) no-repeat 98% 50% #000; background-size: 12px; }
select::-ms-expand{ display:none; }
input,textarea { -webkit-appearance: none; -webkit-border-radius: 0; }
input[type='checkbox']{-webkit-appearance:checkbox}
input:checked[type="checkbox"] {background-color:#fff;-webkit-appearance:checkbox;}

.estimate_text_area{padding: 20px 30px; border-bottom: 1px solid #e7e5e5; }
.estimate_text_area .estimate_text_1{font-size: 20px; font-weight: bold;}
.estimate_text_area .estimate_text_2{color: #434343; margin: 10px 0;}

.item_info_area{padding: 20px 30px; border-bottom: 1px solid #e7e5e5;;}
.item_info_area .item_info{ background-color: #f4f4f4; border-radius: 12px; padding: 20px;  max-width: 450px;}
.item_info_area .item_info .row{margin: 0; display: flex; align-items: center; justify-content: center;}
.item_info_area .item_info .row .item_info_logo{width: 38px;}
.item_info_area .item_info .row .item_info_logo img{width: 100%;}
.item_info_area .item_info .row .item_info_class{ padding: 0 10px; font-size: 18px; font-weight: bold;}
.item_info_area .item_info .row .item_info_class .line_type{ border: 1px solid #1e1d29; height: 20px; opacity: 0.4; margin: 0 6px;}
.item_info_area .item_info .text_detail{text-align: center; font-size: 11px;}
.item_info_area .item_info .item_info_img{margin: 0 auto; width:100%; padding: 5px 0 ;}
.item_info_area .item_info .item_info_img img{width: 100%;}

.item_info_area .item_info .item_info_price{ }
.item_info_area .item_info .item_info_price .row{display: flex; justify-content: space-between; margin-top:15px; }
.item_info_area .item_info .item_info_price .row .price_item{font-weight:bold; font-size: 16px; margin-right:auto;}
.item_info_area .item_info .item_info_price .row .price{}
.item_info_area .item_info .item_info_price .row .total_detail{font-size: 18px; font-weight: bold; margin-right: auto;}
.item_info_area .item_info .item_info_price .row .price.type{font-size: 18px; font-weight: bold; margin:0;}
/* .item_info_area .item_info .item_info_price .row .price #total_price{font-size:18px;font-weight:bold; } */
.item_info_area .item_info .item_info_price hr{ margin: 10px 0; border: 1px solid #111;}

.item_option_area{padding: 20px 30px; border-bottom:1px solid #eee;}
.item_option_area .item_text{font-weight: bold; margin-bottom: 20px;}
.item_option_area .option_list{margin-bottom: 25px; border-bottom:1px solid #ccc;}
.item_option_area .option_list .option_text{font-weight:bold; font-size:18px; width:100%;}
.item_option_area .option_list .row{margin:0;}
.item_option_area .option_list .row.accordion_area{background:#424242; padding:10px; color:#fff; display:flex; margin-bottom:10px; justify-content: space-between; align-items: center;}
.item_option_area .option_list .row .accordion_text{color:#888;margin-right:auto; font-size:16px;}
.item_option_area .option_list .row .accordion_text.selected { color : black; font-size : 16px; font-weight : bold; line-height:20px; width:95%; margin-right:auto;}

.item_option_area .option_list .row .fa-chevron-up{font-size:18px;}
.item_option_area .option_list.on .row .fa-chevron-up{ transform: rotate(180deg); }
/* .item_option_area .option_list .row .fa-chevron-up.on{ transform: rotate(180deg);} */
.item_option_area .option_list .sub_accodion{display: none;}
.item_option_area .option_list.on .sub_accodion{display: block;}
/* .item_option_area .option_list .sub_accodion.on{display: block;} */
.item_option_area .option_list .sub_accodion .sub_page{}
.item_option_area .option_list .sub_accodion .sub_page .row{}
.item_option_area .option_list .sub_accodion .sub_page .row .sub_item{font-size: 12px;}
.item_option_area .option_list .sub_accodion .sub_page .row .sub_item.type1{float: left;}
.item_option_area .option_list .sub_accodion .sub_page .row .sub_item.type1 .sub_item_detail{width: 30px; height: 17px; border: 1px solid lightgray;margin-right: 5px;}
.item_option_area .option_list .sub_accodion .sub_page .row .sub_item.type2{float: right;}
.item_option_area .option_list .sub_accodion .sub_page .row .sub_item.type3{float: right; border: 1px solid #ededed; font-size: 10px; padding: 1px 3px; margin-left: 4px;}

.payment_info_area{padding: 20px 30px 80px 30px;}
.payment_info_area .item_text{font-weight: bold; margin-bottom: 10px;}
.payment_info_area .item_text span{color: #fa6400;} 
.payment_info_area .payment_method_area{ display: flex; justify-content: space-between; margin-bottom: 15px;}
.payment_info_area .payment_method_area .row{margin: 0;width:100%;}
.payment_info_area .payment_method_area .row:last-child{margin-left:15px;}
.payment_info_area .payment_method_area .row .payment_type {width:100%;}
.payment_info_area .payment_method_area .row .payment_type .payment_item{color: #000; width: 100%; height:40px; border: 1px solid #707070; font-size: 14px; line-height:40px; margin-bottom: 15px; text-align: center;  border-radius: 12px; background-color: #fcfcfc;}
.payment_info_area .payment_method_area .row .payment_type input:checked + .payment_item{background:#ffec05; border-color:#ffec05;}

.payment_info_area .purchase_info_area{ margin-bottom: 10px;}
.payment_info_area .purchase_info_area .purchase_item{}
.payment_info_area .purchase_info_area .purchase_item input{width: 100%; height: 40px; line-height: 40px; border: 1px solid #e2e2e2; border-radius: 15px;}
.payment_info_area .purchase_info_area .purchase_item textarea{width: 100%; height: 150px; border: 1px solid #e2e2e2;}
.payment_info_area .purchase_info_area .purchase_item select{width: 100%; height: 40px; border: 1px solid #ffbb00; background-color: #fff; padding: 0 6px;}
.payment_info_area .purchase_info_area .purchase_item #tab1_city,
.payment_info_area .purchase_info_area .purchase_item #tab2_city, 
.payment_info_area .purchase_info_area .purchase_item #tab3_city, 
.payment_info_area .purchase_info_area .purchase_item #tab4_city{ margin-top:8px;}

.payment_info_area .purchase_info_area .purchase_item.type{height: 40px; line-height: 40px; text-align: right; border: 1px solid #e2e2e2; border-radius: 15px; padding:0 15px 0 0;}
.payment_info_area .purchase_info_area .purchase_item.type input{border: 0; height: 32px; line-height:32px; width: 90%; outline: none;}

.payment_info_area .check_item_area{display: flex; justify-content: space-between; margin-bottom: 10px;}
.payment_info_area .check_item_area .check_item{width: 100%;}
.payment_info_area .check_item_area .check_item:last-child{margin-left:15px;}
.payment_info_area .check_item_area .check_item input{}
.payment_info_area .check_item_area .check_item label{ width: 100%; height: 40px; border: 1px solid #ccc; text-align: center; line-height: 40px; border-radius: 12px;}
.payment_info_area .check_item_area .check_item input:checked + label{border:none; background:#ffec05;}
.payment_info_area .check_item_area .check_item.type input:checked + label{border:none; background:#ffec05;}

.payment_info_area .payment_tab_area{}
.payment_info_area .payment_tab_area .payment_content { display : none;}
.payment_info_area .payment_tab_area .payment_content.active { display : block; }

.estimate_text_3{ background:#666; margin: 30px -30px; text-align: center; color: #fff; font-size: 12px; }
.estimate_text_3 p {padding:10px;}

.estimate_btn_area{text-align: center;}
#tab1_btn_submit{width: 100%; height: 50px; line-height: 50px; font-size:18px; font-weight: bold; border-radius: 12px; background-image:linear-gradient(to left, #ffbb00, #ffec05); display: block; color: #000; margin: 20px auto; text-align: center;}
#tab2_btn_submit{width: 100%; height: 50px; line-height: 50px; font-size:18px; font-weight: bold; border-radius: 12px; background-image:linear-gradient(to left, #ffbb00, #ffec05); display: block; color: #000; margin: 20px auto; text-align: center;}
#tab3_btn_submit{width: 100%; height: 50px; line-height: 50px; font-size:18px; font-weight: bold; border-radius: 12px; background-image:linear-gradient(to left, #ffbb00, #ffec05); display: block; color: #000; margin: 20px auto; text-align: center;}
#tab4_btn_submit{width: 100%; height: 50px; line-height: 50px; font-size:18px; font-weight: bold; border-radius: 12px; background-image:linear-gradient(to left, #ffbb00, #ffec05); display: block; color: #000; margin: 20px auto; text-align: center;}

.bank_type_area{ }
.bank_type_area .bank_list{border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;}
.bank_type_area .bank_list.on { background:#ffec05; border:none;}
.bank_type_area .bank_list .row{margin: 0; display:flex; justify-content: space-between; align-items: center;}
.bank_type_area .bank_list .row .card_info_area { background:#fff; border:1px solid #ddd; border-radius:100%; width:30px; height:30px;}
.bank_type_area .bank_list .row .card_info_area .card_info_btn{background:none; border:none; border-radius: 100%; width:100%; height:100%; padding:0;}
.bank_type_area .bank_list .row .card_info_area .card_info_btn i{color:#bbb;}
.bank_type_area .bank_list .row .card_info_area .card_info{z-index:1; display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-60%); background:#fff; border-radius:8px; width:90%; }
.bank_type_area .bank_list .row .card_info_area .card_info .card_info_title{padding:15px; font-weight: bold; font-size:16px;}
.bank_type_area .bank_list .row .card_info_area .card_info .card_info_dsec { max-height: 200px; overflow-y: auto; overflow-x: hidden; padding:0 15px 15px 15px; }
.bank_type_area .bank_list .row .card_info_area .card_info #close_btn{background:none; border:none; display:block; width:100%; text-align: center; font-size:16px; font-weight:bold; color:#ffbb00; padding:15px 0; border-top:1px solid #ffbb00;}

.bank_type_area .bank_list .row .bank_text{width: 80%; margin-right:auto; letter-spacing: -0.5px;}
.card_info_overlay{display:none; position:fixed; background:rgba(0,0,0,0.6); top:0;bottom:0;right:0;left:0;}
/* .bank_type_area .bank_list .row .recommendation{width: 50px; height:22px; line-height:22px; background-color: #444; color: #fff; text-align: center;} */
.bank_type_area .bank_list .bank_text_2{font-size: 10px;  color: #808184; width: 83%;}

.tab_text{background-color: #444; color: #fff; text-align: center; margin: 30px -30px; font-size: 12px;}
.tab_text p {padding:10px; }

.range_bar_area{margin: 10px 0;}
.range_bar_area .range_text_area{}
.range_bar_area .range_text_area .row{ margin: 0;}
.range_bar_area .range_text_area .row .range_text{float: left; font-weight: bold;}
.range_bar_area .range_text_area .row .range_text span{font-weight: normal; font-size: 12px; border-radius: 8px; border: 1px solid #e4e5e6; padding: 4px;}
.range_bar_area .range_text_area .row .range_price{float: right;}
.range_bar_area .range_text_area .row .range_price .range_price_detail{}
.range_bar_area .bar_area{}
.range_bar_area .bar_area .range_detail{height: 32px; margin: 10px 0; -webkit-appearance: none; width: 100%; opacity: 0.7; }
.range_bar_area .bar_area .range_detail::-webkit-slider-runnable-track { width: 100%; height: 30px; cursor: pointer; background: #e4e5e6; border-radius: 20px;  }
.range_bar_area .bar_area .range_detail::-webkit-slider-thumb{ height: 30px; width: 30px; border-radius: 15px; background:#ffbb00; border:1px solid #ffbb00; cursor: pointer; -webkit-appearance: none; }
.range_bar_area .bar_area .bar_detail{display: flex; justify-content: space-between; height: auto; overflow: hidden; margin-top: 6px;}
.range_bar_area .bar_area .bar_detail option{}

.memberinfo_area{margin-top: 25px;}

.terms_area{}
.terms_area .terms_check{display:flex; align-items: center; justify-content: space-between;} 
.terms_area .terms_check input{width:16px; height:16px; background:#fff; border:1px solid #ddd; margin:0;}
.terms_area .terms_check label{margin:0; }

.terms_detail_btn{}
.terms_detail_btn .terms_show{width: 100px; border: 1px solid #e2e2e2;; height: 30px; line-height: 30px; text-align: center; border-radius: 10px; margin-top:5px;}
.rent_text{text-align: center; background-color: #eee; font-size: 12px; letter-spacing: -0.5px; margin: 10px -30px; padding: 10px; color: #000;}

.row.on{background-image:linear-gradient(to left, #ffbb00, #ffec05);}
/* 트림 */
#trim_wrap .sub_btn_detail {margin-top:0;}
.trim_rows{padding: 10px;}
.trim_rows.on{background-image:linear-gradient(to left, #ffbb00, #ffec05);}
.row.trim_rows:first-child{padding-bottom:0;}
.row.trim_rows:last-child{padding-top:0;}
.row.trim_rows .item_name {display: flex; justify-content:space-between; align-items:flex-start; }
.row.trim_rows .item_name .name {width: 70%;}

/* 외장 */
.sub-page.outer_item{margin: 10px 0; border: 1px solid #111; padding:10px;}
.sub-page.outer_item .row {overflow : hidden; display: flex;flex-direction:column; justify-content: space-between; align-items: center; }
.sub-page.outer_item .desc{font-size:12px; margin:10px 0 0 0; color:#666;}
.sub-page.outer_item.on{background-image:linear-gradient(to left, #ffbb00, #ffec05); }
.sub-page.outer_item .row .color{width: 80%; height:120px; background-size: contain; background-position: center; background-repeat: no-repeat;}

/* 내장 */
.sub-page.inner_item{margin: 10px 0; border: 1px solid #111; padding: 10px;}
.sub-page.inner_item.on{background-image:linear-gradient(to left, #ffbb00, #ffec05); }
.sub-page.inner_item .row {flex-direction: column; overflow : hidden; display:flex; justify-content: space-between; align-items: center; }
.sub-page.inner_item .desc{font-size:12px; color:#666; margin:0;margin-bottom:10px;}
.sub-page.inner_item .row .color{width: 100%; height:140px; background-size: cover; background-position: center; background-repeat: no-repeat;}

.sub-page.option_item.on{background-image:linear-gradient(to left, #ffbb00, #ffec05); }
.sub-page.trim_item.on{background-image:linear-gradient(to left, #ffbb00, #ffec05); }
.sub-page.acc_item.on{background-image:linear-gradient(to left, #ffbb00, #ffec05); }
.sub-page.dc_item.on{background-image:linear-gradient(to left, #ffbb00, #ffec05); }

.option_item{ border: 1px solid #ededed;}
.dc_item{margin:10px 0; border:1px solid #111; padding:10px; height:62px;}
.dc_item .row{display: flex; justify-content: space-between;}
.dc_item .row .name{width:70%; margin-right:auto;}
.dc_item.dc_item_input { height : auto; padding-bottom : 10px; }
#option_area .sub_btn_detail, #acc_area .sub_btn_detail{margin-top:0;}
.sub_btn_detail{width:80px; margin-top:10px; border: 1px solid #dcdcdc; padding:2px 4px; background-color: white; color: black;}
.sub_item.type2{text-align: right;}
.sub_item.type3{text-align: right; margin-left:auto; line-height:26px;}
.sub_item.type5{text-align: right; display:flex; justify-content: space-between; width:100%;}
.sub_item.type6{}
.sub_item.type7{float: left;}
.sub_item.type8{text-align:right;}

.sample{display: none;}

/* 모달 */
#modal_trim .modal_overlay{position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.5)}
#modal_trim .modal-dialog .modal-content{}
#modal_trim .img_content{ max-width:100%; display:block; margin:0 auto; margin-bottom:10px; }
#modal_trim .modal-dialog .modal-content .trim_content{max-height:400px; overflow-y: auto;}
#modal_trim h2.trim_name{ font-size:18px; line-height:24px; font-weight: bold; margin:0;}
#modal_trim .modal-footer{ text-align: center; }
#modal_trim .modal-footer button{ background:#ffec05; border:none; padding:8px 30px; font-weight: bold; }

#modal_option .modal_overlay{position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.5)}
#modal_option .modal-dialog .modal-content{}
#modal_option .img_content{ max-width:100%; display:block; margin:0 auto; margin-bottom:10px; }
#modal_option .modal-dialog .modal-content .option_content{max-height:400px; overflow-y: auto;}
#modal_option h2.option_name{ font-size:18px; line-height:24px; font-weight: bold; margin:0;}
#modal_option .modal-footer{ text-align: center; }
#modal_option .modal-footer button{ background:#ffec05; border:none; padding:8px 30px; font-weight: bold; }

#lease_rent_btn_modal h2.title{ font-size:18px; line-height:24px; font-weight: bold; margin:0; text-align: center;}
#lease_rent_btn_modal .modal-header{border-bottom:none; padding-top:30px;}
#lease_rent_btn_modal .modal-body{text-align: center;}
#lease_rent_btn_modal .modal-footer{ text-align: center; border-top:none; padding-bottom:30px;}
#lease_rent_btn_modal .modal-footer button{ background:#ffec05; border:none; padding:8px 30px; font-weight: bold; }
 
#modal_alert_tuix button{ background:#ffec05; border:none; padding:8px 30px; font-weight: bold; }
#modal_alert_tuix .modal-body{padding-bottom:30px; text-align: center;}

.preview_bottom{z-index:2; position:fixed; bottom:60px; width:100%; height: 50px; background:#fff; border-top:2px solid #ffbb00; left:50%; transform:translateX(-50%);}
.preview_bottom .row{margin:0; display: flex; width:100%; height:100%; justify-content: space-between; padding: 0 30px; align-items: center;}
.preview_bottom .row .preview_bottom_total{width:50%; font-weight:bold;}
.preview_bottom .row .preview_bottom_price{width:50%; margin-right:auto; text-align: right;}
.preview_bottom_modal_overlay{display:none; overflow:hidden; position:fixed; background-color:rgba(0,0,0,0.6); left:0; top:0; right:0; bottom:0;}
#preview_bottom .arrow_up{position:absolute; top:-25px; left:50%; transform:translateX(-50%); width:45px;height:45px;border-radius:50%; background:linear-gradient(to bottom, #ffbb00, #ffec05); background-size: 200% 200%;}
#preview_bottom .arrow_up i {position:relative; top:12px; left:14px; font-size:20px; color:#000; }
#preview_bottom_total_price {color: #ffbb00; font-size:22px; font-weight:bold; line-height:22px;}

.gradient{ animation: gradient 2s ease infinite; }
@keyframes gradient {
    50%{background-position:50% 100%}
    0%{background-position:50% 0%}
}
/* .arrow-up-down{ animation:arrow-up-down 1.2s linear infinite; } */
@keyframes arrow-up-down{
    from{
        top: 20px;
        opacity:0;
    }
    to{
        top: 8px;
        opacity:1;
    }
}

/* preview 모달 스크롤 */
#preview_bottom_option_wrap {overflow-y: auto; max-height:90px;}
#preview_bottom_dc_wrap {overflow-y: auto; max-height:90px;}
.not_scroll{overflow: hidden;}

#preview_modal{display:none; z-index:1; padding:0; position:fixed; bottom: 110px; width:100%; background:#fff; border-top-left-radius: 15px;border-top-right-radius: 15px;}
#preview_modal .row{border-top:1px solid #111; margin:0; display: flex; width:100%; height:100%; justify-content: space-between; padding: 25px 30px 0 30px; align-items: center;}
#preview_modal .row:first-child{border-top:none; padding-bottom:20px;}
#preview_modal .row .price_item{width:50%; margin-right:auto;font-weight: bold;}
#preview_modal .price_value{font-weight:bold;}
#preview_bottom .arrow_up i.rotate { -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); }

@media (max-width:380px){
    .preview_bottom .row{
        padding:0 10px;
    }
    #preview_bottom_total_price {
        font-size: 20px;
        line-height:20px;
    }
}