:root {
    /* color */
    --main-color:#0055FF;
    --sub-color:#00256C;
    --dec-color:rgba(0,85,255,10%);    
    --gray-color:#808080;
    --bar-color:#EFEFEF;

    /* font-size */
    --title-ft:34px;
    --subtitle1-ft:32px;
    --subtitle2-ft:24px;
    --des-ft:22px;
}

* {color: #1d1d1f;}

#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;}

input::placeholder, textarea::placeholder{font-size: 17px;}
button, select, input[type="month"]{cursor: pointer;}
input.inputtext{cursor: auto;}
#container{margin-top: 86px;}
.inner, #container .inner{width: 550px; margin: 0 auto;}

/* division */
.requestImg{height: 150px;margin-top: 80px;}
.division{margin-bottom: 80px;}
.division .left h1{font-size: var(--subtitle1-ft);line-height: 1.45;margin-bottom: 25px;}
.division .left h3, .division .left h4{font-size: var(--subtitle2-ft); line-height: 1.45;}

/* mainTitle */
.mainTitle{margin-top: 50px;}
.mainTitle .inner img{height: 120px; margin-top: 20px;}
.mainTitle .inner h1{line-height: 1.4; padding: 20px 0 50px; font-size: 25px;}

/* 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: #f5f6f8; box-sizing: border-box; margin-bottom: 12px; font-size: 17px; resize: none; font-family: 'Noto Sans KR', sans-serif; border-radius: 8px; height: 70px;}

div > h3, div > h4{margin-bottom: 20px; font-size: 18px;}
.Box{padding: 15px 0;}
.gray-bar{border: 1px solid #EFEFEF;margin: 35px 0 100px 0;}

/* carBox */
.carBox{background: var(--dec-color); padding: 30px 30px 25px; border-radius: 10px; box-sizing: border-box;}
.carBox select#serviceType, .carBox select#manufacturer, .carBox select#carModel, .carBox select#carWashType{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/request/img/service_intro/iconSelect.png?var=2030824) no-repeat center right 10px/ 12px; outline: none;}

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

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

/* priceBox */
.priceBox{padding: 30px; background: #f5f6f8; border-radius: 10px; margin: 40px 0;}
.priceBox .row, .totalBox .row{margin: 30px 0; color: var(--gray-color); font-size: 20px; 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: 27px; font-weight: 600; color: #121212;}
.priceBox .row span.totalPrice{color: var(--main-color);}
.totalPriceBox{position: relative;}
.totalPriceBox .row{margin-top: 30px !important;}
.priceBox .bubble{position: absolute; right: 0; bottom: -48px; 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: -6px; right: 20px;}
.priceBox .bubble span{color: #fff; font-size: 16px;}

/* 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, .birthBox, .petBox{display: flex; gap: 30px; padding-bottom: 10px;}
.payBox .pay, .birthBox .birth{margin-bottom: 12px;}
.radio{width: 22px; height: 22px; 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: 30px; height: 30px; 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: 3px; 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: 16px; padding-bottom: 10px;}

#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: 20px; line-height: 1.5;}
#container .agree_check label span{color: var(--sub-color); font-size: 20px;}
#container .agree_check.choice label, #container .agree_check.choice input{float: inherit !important;}

p.notice.last{margin: 0; padding: 0; padding-bottom: 50px;}

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

.totalBox{position: fixed;width: 550px;background: var(--sub-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;box-sizing: border-box;}
.totalBox .row p{font-size: 20px; color: #fff;}
.totalBox .row span{font-size: 22px; color: #fff;}
.totalBox.visible {opacity: 1; height: 80px;}

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

/* nomination_box */
.nomination_box .notice, .pet_notice{margin:10px 0 20px; font-size: 16px; background: var(--dec-color); padding: 20px; border-radius: 5px; line-height: 1.45;}
.nomination_box .notice span{color: #636569; display: block; margin: 8px 0; position: relative; padding-left: 15px;}
.nomination_box .notice span.blue{color: var(--sub-color);}
.nomination_box .notice p.title{font-weight: 700; color: var(--sub-color); font-size: 18px;}
.nomination_box .notice p.title::before{content: "!"; display: inline-block; width: 20px; height: 20px; background: var(--sub-color); color: #fff; border-radius: 50%; text-align: center; font-size: 14px; line-height: 20px; margin-right: 8px; vertical-align: 2px;}
.nomination_box .notice span::before{position: absolute; content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--gray-color); position: absolute; left: 0; top: 10px;}

/* pet_notice */
.pet_notice h4{margin-bottom: 10px; color: var(--main-color);}

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

/* optionAdd */
#optionContainer{margin-top: 32px; border-top: 2px dashed #d7d7d7; padding-top: 32px;}
.optionAdd{width: 100%; height: 70px; border: none; font-family: 'Noto Sans KR', sans-serif; background: #bdd4ff; border-radius: 5px; color: var(--sub-color); font-weight: 600; font-size: 18px;}
#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; border-radius: 10px 10px 0 0; font-weight: 500;}
.description{padding: 0 20px 20px; font-size: 15px; line-height: 1.5; color: #666; background: #fff; border-radius: 0 0 10px 10px;}

/* datepicker */
#ui-datepicker-div{z-index: 101 !important;width: 544px;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:#f5f6f8 url(/m/request/img/service_intro/iconSelect_gray.png) no-repeat center right 7px/ 10px; padding: 7px; font-size: 16px;}
.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: 14px;}
.ui-datepicker .ui-datepicker-buttonpane button{font-size: 14px;}

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

/* memo */
.memo_box textarea{height: 120px;}

/* popup */
.popupLayer{width: 100%; height: 100%; position: fixed; top:0; left:0; background: rgba(0,0,0,0.6); z-index: 10000;}
.popup_box{width:550px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001; background: #fff; border-radius: 15px;}
.popup_contents{padding: 35px 25px; box-sizing: border-box; }
.popup_contents .closeImg{position: absolute; top: 10px; right: 0; padding: 15px; cursor: pointer;}
.popup_contents .closeImg img{height: 40px;}
.popup_contents h3{font-size: 26px; 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; height: 45vh; overflow: auto;}
.popup_contents .service_info p{position: relative; font-size: 17px; 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{margin-top: 25px; margin-bottom: 0;}
.popup_contents .service_info::-webkit-scrollbar{width: 8px; border-radius: 50px;}
.popup_contents .service_info::-webkit-scrollbar-thumb{background-color: #ccc;  border-radius: 50px;}

.no-scroll{overflow: hidden;}