:root {
    /* color */
    --main-color:#ab5c2f;
    --sub-color:#221e1f;
    --dec-color: #fff9f5;    
    --gray-color:#808080;
    --bar-color:#EFEFEF;

    /* font-size */
    --title-ft:30px;
    --subtitle1-ft:27px;
    --subtitle2-ft:20px;
    --des-ft:18px;

    /* space */
    --section-space: 100px;

    /* common */
}

body{color: #121212; letter-spacing: -0.25px;}
#snackbar {visibility: hidden; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: 30px; font-size: 17px;}
#snackbar.show {visibility: visible; animation: fadein 0.3s, fadeout 0.3s 2.5s;}

header span{padding: 20px; display: inline-block;}
header span img{height: 28px;}
.blind {position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden;}

/* subHeader */
.subHeader{position: fixed; height: 60px; width: 100%; top: 0; left: 0; background: #fff; z-index: 801;}
.subHeader h2{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--des-ft) !important; margin-bottom: 0 !important; z-index: 801;}
.subHeader #header{height: 60px; border-bottom: 1px solid #eee;}
.subHeader #header #headerIn{height: 100%;}
.subHeader #header .mBtn{padding: 17px 2px;}
.subHeader #header #headerIn svg{padding: 16px 2px;}
.subHeader #header.fix .mBtn{top: 0;}

/* mainTitle */
#container .inner, .mainTitle .inner{width: 90%; margin: 0 auto;}
.mainTitle .inner img{height: 120px; margin-top: 20px;}
.mainTitle .inner p{padding: 8px 0; color: gray; font-size: 16px;}
.mainTitle .inner h1{line-height: 1.4; padding-bottom: 24px; font-size: 32px;}
.mainTitle .inner h2{padding-bottom: 36px; line-height: 1.4; font-weight: 500;}

/* common */
select, .inputtext, #email_box{margin-bottom: 10px; outline: none;}
.inputtext, #email_box {padding: 20px; border-radius: 2px; border: none; width: 100%; margin-bottom: 15px; background: #f4f4f7; box-sizing: border-box; margin-bottom: 12px; font-size: 15px; resize: none; font-family: 'Noto Sans KR', sans-serif; border-radius: 8px;}

div > h3{margin-bottom: 20px; font-size: 16px;}
.Box{padding: 15px 0;}
.gray-bar{border: 5px solid #EFEFEF; margin: 35px 0;}

/* carBox */
.carBox{background: var(--dec-color); padding: 18px 20px 30px 20px; border-radius: 10px; box-sizing: border-box;}
.carBox select#serviceType, .carBox select#manufacturer, .carBox select#carModel, .carBox select#carWashType, .carBox .membership{border: none; border-bottom: 2px solid var(--main-color); padding: 12px 35px 12px 0; font-family: 'Noto Sans KR', sans-serif; font-size: var(--des-ft); color: var(--main-color); font-weight: 600; background: url(/m/insigniabp/img/select_arrow.svg) no-repeat center right 5px/ 20px; outline: none;}

.carBox select#serviceType, .carBox select#carWashType{width: 100%;}
.carBox .membership{padding-top: 0; margin-bottom: 10px; background: transparent; display: none;}
.carBox span, .carBox p{font-size: var(--des-ft); font-weight: 600;}
.carBox p{margin-top: 16px;}
.carBox span.space{margin-right: 10px;}

/* carInfo */
.carInfo{padding: 60px 0 20px;}

/* addOption */
.Box select, .addOption select, .event_box select, #pop2 select{background: #f4f4f7 url(/m/request/img/service_intro/iconSelect_gray.png) no-repeat center right 20px/ 12px; font-size: 15px; padding: 20px; border-radius: 2px; border: none; width: 100%; margin-bottom: 12px; font-family: 'Noto Sans KR', sans-serif; border-radius: 8px;}

/* priceBox */
.priceBox{padding: 20px; background: #f4f4f7; border-radius: 10px; margin: 40px 0;}
.priceBox .row, .totalBox .row{margin: 25px 0; color: var(--gray-color); font-size: 16px; display: flex; justify-content: space-between;}
.priceBox .row:first-child{margin-top: 15px;}
.priceBox .row span{font-weight: 500; color: #656565;}
.priceBox .line{width: 100%; height: 1px; background: #c9c9c9;}
.priceBox .row span.basic{text-decoration:line-through; color: var(--gray-color);}
.priceBox .row p.total, .priceBox .row span.totalPrice{font-size: var(--subtitle2-ft); font-weight: 600; color: #121212;}
.priceBox .row span.totalPrice{color: var(--main-color); font-size: 22px;}
.totalPriceBox{position: relative;}
.totalPriceBox .row{margin-top: 25px !important;}
.priceBox .bubble{position: absolute; right: 0; bottom: -44px; background: var(--sub-color); color: #fff; border-radius: 5px; padding: 4px 8px; font-size: 14px;}
.priceBox .bubble::after{content: ""; border: 8px solid transparent; position: absolute; border-bottom-color: var(--sub-color); border-top: 0; top: -8px; right: 20px;}

.membership.priceBox{padding: 10px 20px;}

/* address */
#pop1, #pop2, #pop3, #pop4, #pop5, #clock, #price, #optionPrice1, #optionPrice2, #optionPrice3, #level, #address_num, #package_select, #pay_select, #birth_select, #choice_select, #must_select{display: none;}
#address_box {border: 1px solid #dedede; position: relative; z-index: 10; margin-bottom: 12px; display: none;}
#address_box img{cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1}

/* payBox */
#payBox{margin: 10px 0;}
.payBox, .birthBox, .petBox{display: flex; gap: 30px;}
.payBox .pay, .birthBox .birth{margin-bottom: 12px;}
.radio{width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 50%;  cursor: pointer; position: relative;}
.radio::after{content: ''; display: block; width: 10px; height: 10px; background-color: #c5c6cb; border-radius: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.radio:checked {background: var(--main-color); border: 1px solid var(--main-color);}
.radio:checked:after{background-color: #fff; width: 8px; height: 8px;}
.check{width: 22px; height: 22px; background-color: #dcdfe4; border-radius: 5px;  cursor: pointer; position: relative;}
.check::after{content: ''; display: block; width: 13px; height: 13px; border-radius: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 11px; color: #fff; background: url('/m/chabot/img/check.png') no-repeat; background-size:cover;}
.check:checked {background: var(--main-color); border: 1px solid var(--main-color);}
input, label{cursor: pointer;}
label{margin-left: 5px; font-size: var(--des-ft); vertical-align: 2px; font-weight: 500;}
.lightbox_img{font-weight: normal; font-size: 14px; color: #111; vertical-align: 3px; position: relative;}
.lightbox_img img{width: 20px; transform: rotate(270deg); vertical-align: -5px; margin-left: -4px;}
.lightbox_img::before{content: '+'; display: block; position: absolute; top: 3px; right: -20px; font-size: 16px; width: 14px; height: 14px; background: #c5c6cb47; border-radius: 50%; text-align: center; line-height: 12px; color: gray;}

.tag{color: var(--sub-color); font-size: 13px; padding-bottom: 15px;}

#container .agree_check{display: flex; justify-content:space-between; align-items: center; padding: 20px 0;}
#container .agree_check.all{border-bottom: 1px solid #c9c9c9;}
#container .agree_check.choice h2{display: block;}
#container .agree_check.all label{margin-left: 0; font-size: var(--subtitle2-ft); font-weight: 600;}
#container .agree_check label{margin-left: 0; font-size: 16px; line-height: 1.5;}
#container .agree_check label span{color: var(--sub-color); font-size: 15px;}
#container .agree_check.choice label, #container .agree_check.choice input{float: inherit !important;}

.pay_box, .birth_box{padding-bottom: 27px;}
p.notice.last{margin: 0; padding: 0; padding-bottom: 50px;}

#google-submit{background: var(--main-color); color: #fff; margin-bottom: 40px; font-weight: 400; width: 100%; border: none; border-radius: 10px; height: 60px; font-family: 'Noto Sans KR', sans-serif; font-size: 18px; border: 2px solid var(--main-color); position: relative; z-index: 1;}

.totalBox{position: fixed; width: calc(100% - 20%); background: var(--main-color); bottom: 20px; left: 50%; padding: 0 20px; border-radius: 10px; transform: translateX(-50%); font-weight: 600; opacity: 0; height: 0; transition: opacity 0.2s ease-in-out; z-index: 101;}
.totalBox .row p{font-size: 20px; color: #fff;}
.totalBox .row .totalPrice{font-size: 22px; color: #fff;}
.totalBox.visible {opacity: 1; height: auto;}

/* .totalPriceBox .row, .totalBox .row{margin-bottom: 15px;} */
.totalPriceBox .monthBox, .totalBox .monthBox{color: #fff; text-align: right; font-weight: 400; font-size: 16px; margin-bottom: 25px;}
.totalPriceBox .monthBox{color: #255b98;}

input.err{border: 1px solid #bd0000; box-sizing: border-box;}
.err_msg{color: #bd0000; margin-left: 5px; margin-bottom: 8px; display: none; font-size: 14px;}
#email_box.err{border: 1px solid #bd0000;}
.err_msg.hidden{display: none !important;}

/* nomination_box */
.nomination_box .notice{margin:10px 0 20px; font-size: 0.85rem; background: #e2efff; padding: 12px 16px; border-radius: 5px; line-height: 1.35;}
.nomination_box .notice span{color: #898e97; display: block; margin: 8px 0;}
.nomination_box .notice span.blue{color: #0062ff;}
.nomination_box .notice span.title{font-weight: 700; color: #0062ff; font-size: 1rem; padding-bottom: 5px;}
.nomination_box .notice span img{height: 20px; vertical-align: -4px;}

/* payBox */
p.title{font-size: 14px; margin-bottom: 12px;}

/* optionAdd */
#optionContainer{margin-top: 32px; border-top: 2px dashed #d7d7d7; padding-top: 32px;}
.optionAdd{width: 100%; height: 55px; border: none; font-family: 'Noto Sans KR', sans-serif; background: #ffe3d1; border-radius: 5px; color: var(--main-color); font-weight: 600; font-size: 16px;}
#optionContainer select{background: #fff url(/m/request/img/service_intro/iconSelect_gray.png) no-repeat center right 20px/ 12px; margin-top: 12px; margin-bottom: 0;}
.description{padding: 0 20px 20px; font-size: 15px; line-height: 1.5; color: #666; background: #fff; border-radius: 0 0 10px 10px;}

/* memo */
.memo_box{padding-top: 10px;}
.memo_box textarea{height: 120px;}

/* datepicker */
#ui-datepicker-div{z-index: 101 !important;width: calc(100% - 12%);left: 50% !important;transform: translateX(-50%);}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{display: none !important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{background:#f4f4f7 url(/m/request/img/service_intro/iconSelect_gray.png) no-repeat center right 7px/ 10px; padding: 7px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top:8px;}
.ui-datepicker td span, .ui-datepicker td a{padding: 0.7em; font-size: 12px;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{border: 1px solid var(--main-color) !important; background: #e5eeff !important; color: var(--main-color) !important;}

/* must */
.inner.must .Box h3 {position: relative; padding-left: 15px;}
.inner.must .Box h3::before{content: '*'; display: block; position: absolute; left: 0; top: 4px; font-size: 18px; color: red;}

/* complete */
.complete_box{position: absolute; top: calc(50% - 60px); left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; letter-spacing: -0.5px;}
.complete img{width: 110px;}
.complete h2{font-size: 24px; margin-top: 22px; line-height: 1.25;}
.complete P{line-height: 1.5; font-size: 16px; margin-top: 10px;}
.happy_call{margin-top: 66px;}
.happy_call a{font-size: 14px; padding: 6px 12px; border: 1px solid #666; border-radius: 50px; color: #666;}
.happy_call p{margin-top: 22px; color: #888;}
.happy_notice{position: absolute; bottom: 0; left: 0; width: 100%; background: #f5f5f5; padding: 24px 28px; box-sizing: border-box; text-align: left; color: #999;}
.happy_notice h4{margin-bottom: 10px; font-size: 15px;}
.happy_notice p{position: relative; margin-left: 11px; font-size: 14px; padding-bottom: 5px;}
.happy_notice p:last-child{padding-bottom: 0;}
.happy_notice p::after{content: ''; display: block; position: absolute; top: 8px; left: -10px; background: #bdbdbd; width: 3px; height: 3px; border-radius: 50%;}

/* popup */
#all_popup{display: none;}
.popupLayer{width: 100%; height: 100%; position: fixed; top:0; left:0; background: rgba(0,0,0,0.6); z-index: 10000;}
.popup_box{width:100%; position: fixed; bottom:0; left: 0; z-index: 10001; background: #fff; border-radius: 15px 15px 0 0;}
.popup_contents{padding: 30px 25px; box-sizing: border-box; }
.popup_contents .close{position: absolute; top: 10px; right: 0; padding: 15px;}
.popup_contents .close img{height: 40px;}
.popup_contents h3{font-size: 22px; line-height: 1.4;}
.popup_contents .apply{ display: flex; gap: 20px; justify-content: space-between;}
.popup_contents .apply_btn{background: var(--main-color); width: 50%; border: none; border-radius: 3px;}
.popup_contents .apply_btn a{color: #fff; display: block; padding: 20px;}
.popup_contents .apply_btn:nth-child(2){background: #38393b;}
.popup_contents .apply_btn h4{font-size: 18px; padding-bottom: 8px; font-weight: 700; line-height: 1.35;}
.popup_contents .apply_btn p{font-size: 15px;}

/* autocomplete */
.autocomplete-container {position: relative;}  
.autocomplete {display: flex;}  
.autocomplete-results {position: absolute; margin-top: -1px; border: 1px solid rgba(0, 0, 0, 0.54); padding: 4px 0; width: calc(100% - 40px); z-index: 1; background: #fff; margin: 0; padding: 0; list-style: none; transition: none;}  
.autocomplete-result, .no-results { cursor: default; padding: 10px 8px; font-size: 14px;}
.autocomplete-result:hover {background: rgba(0, 0, 0, 0.12);}
.autocomplete-result.selected {background: rgba(0, 0, 0, 0.12);}
.search-result {margin-top: 64px; text-align: center;}
.hidden {display: none;}

/* popup */
#all_popup{display: none;}
.popupLayer{width: 100%; height: 100%; position: fixed; top:0; left:0; background: rgba(0,0,0,0.6); z-index: 10000;}
.popup_box{width:100%; position: fixed; bottom:0; left: 0; z-index: 10001; background: #fff; border-radius: 15px 15px 0 0;}
.popup_contents{padding: 30px 25px; box-sizing: border-box; }
.popup_contents .close{position: absolute; top: 10px; right: 0; padding: 15px; cursor: pointer;}
.popup_contents .close img{height: 40px;}
.popup_contents h3{font-size: 22px; line-height: 1.4;}
.popup_contents h3 span{color: var(--main-color);}
.popup_contents .service_info{background-color: #f5f5f5; padding: 20px; box-sizing: border-box; border-radius: 5px;}
.popup_contents .service_info p{position: relative; font-size: 15px; line-height: 1.5; padding-bottom: 10px; padding-left: 15px;}
.popup_contents .service_info p::before{content: ''; display: block; width: 4px; height: 4px; background-color: #393939; border-radius: 50%; position: absolute; left: 0; top: 9px;}
.popup_contents .service_info p:last-child{padding-bottom: 0;}
.popup_contents button{width: 100%; border: none; background-color: var(--main-color); height: 55px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; margin-top: 25px; border-radius: 5px;}

/* pet_notice */
.pet_notice{margin-top: 20px; margin-bottom: 0; font-size: 0.85rem; background: var(--dec-color); padding: 20px; border-radius: 5px; line-height: 1.35;}
.pet_notice h4{margin-bottom: 10px; color: var(--main-color); font-size: 16px;}

/* media */
@media (min-width:481px){
    .imageMap, #wrap, .complete_box, .happy_notice > div{width: 500px; margin: 0 auto;}
    .totalBox{width: calc(500px - 80px)}
    #ui-datepicker-div{width: calc(500px - 55px)}
    header span, input, select, button{cursor: pointer;}

    .carInfo select, .addOption select, .event_box select, #pop2 select, .inputtext, #email_box, .inputtext::placeholder, #email_box::placeholder, #container .agree_check label span, .priceBox .bubble, .notice, .err_msg, .tag{font-size: 16px;}
    .mainTitle .inner p, .optionAdd,.inner.must .Box h3, #container .agree_check label, .priceBox p, .priceBox .row span, div > h3, .complete P{font-size: 18px;}
    .optionAdd{height: 60px;}
    .mainTitle .inner h1{font-size: 34px;}
    .mainTitle .inner h2{font-size: 20px;}
    .carBox select#serviceType, .carBox select#manufacturer, .carBox select#carModel, .carBox select#carWashType, .carBox .membership, .carBox span, .carBox p, #google-submit{font-size: 20px;}
    #container .agree_check.all label, .priceBox .row p.total, .priceBox .row span.totalPrice{font-size: 22px;}
    .priceBox .row span.totalPrice{font-size: 24px;}
    .complete h2{font-size: 26px;}
    
    .check{height: 26px;width: 26px;}

    input[type=month]{cursor: inherit;}

    .complete_box{top: calc(50% - 20px);}    
    .complete P{margin-bottom: 15px;}
    .happy_call, .happy_notice{display: none;}
    .pc_notice{padding: 32px; box-sizing: border-box; background: whitesmoke; border-radius: 5px; color: #999; margin-top: 35px;}
    .pc_notice h4{margin-bottom: 25px; font-size: 18px;}
    .pc_notice p{position: relative; margin-left: 11px; font-size: 16px; padding-bottom: 10px;}
    .pc_notice p:last-child{padding-bottom: 0;}

    .autocomplete-results{width: 450PX;}

    .popup_box{width: 450PX; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; bottom: inherit; border-radius: 15px;}
    
    .optionAdd{cursor: inherit;}
}
@media (max-width:481px){
    .pc_notice{display: none;}
}