.sc_reser {position: relative; min-height: calc(100vh - 199px);}
.sc_reser .visual {position: relative;}
.sc_reser .visual img {width: 100%; height: 100%; min-height: 600px; object-fit: cover;}
.sc_reser .visual .tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 1240px; padding: 0 20px; font-size: 68px; color: white; font-weight: 700; line-height: 1.3; text-align: right; }
.sc_reser .txtBox { padding: 100px 20px 200px; text-align: center;}
.sc_reser .txtBox p { font-size: 20px; font-weight: 300; line-height: 1.5; word-break: keep-all; letter-spacing: -0.008em; }
.sc_reser .txtBox .btns { display: flex; align-items: center; justify-content: center; margin-bottom:100px;}
.sc_reser .txtBox .btns .btn {width: 100%; max-width: 274px; height: 60px; display: flex; align-items: center; justify-content: center; border: 1px solid #003057; background-color: #003057; color: white; font-size: 18px; font-weight: 500;}
.sc_reser .txtBox .btns .btn + .btn {margin-left: 30px; border-color: #284E80 ; background-color: white; color: #284E80;}

.floatBtn { display: none; position: fixed; bottom: 70px; right: 15px; width: 68px; height: 68px; padding-bottom: 7px; border-radius: 50px; box-shadow: 0px 4px 14px -6px rgba(0, 0, 0, 0.10), 0px 4px 14px -4px rgba(0, 0, 0, 0.18); background-color: white; z-index: 1; z-index:1000;}
.floatBtn img {width: 28px;}
.floatBtn span { display: block; margin-top: 3px; color: #284E80; font-size: 13px; font-weight: 500; letter-spacing: -0.26px;}

.stepBox {position:relative; width: 100%; max-width: 840px; min-height: calc(100vh - 199px); padding: 0px 20px 80px; margin: auto;}
.stepBox .titBox {position: relative; height: 177px; width: 100%; display: flex; align-items: center; justify-content: center;}
.stepBox .titBox .tit { font-size: 40px; font-weight: 400; }
.stepBox .titBox .close {position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 35px; height: 35px; background: url(./images/ico_close.png) no-repeat center center/ 100%;}
.stepBox .stepInfo {display: flex; align-items: center; margin-bottom: 60px;}
.stepBox .stepInfo p {display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; font-size: 22px; font-weight: 500; color:#C8D6EC ; border-radius: 5px; border: 1px solid #C8D6EC}
.stepBox .stepInfo p.on {color: white; background-color: #003057; border-color: #003057;}
.stepBox .stepInfo p + p { margin-left: 13px;}
.stepBox .ti {display: block; margin-bottom: 25px; color: #141414; font-size: 20px; font-weight: 500; }
.stepBox .btns {display: flex; align-items: center; justify-content: center; margin-top: 60px;}
.stepBox .btns .btn {width: 100%; max-width: 240px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: #003057; border: 1px solid #003057; border-radius: 5px; }
.stepBox .btns .btn + .btn {margin-left: 12px; color: white; background-color: #003057;}

/*.step1Box section + section { margin-top: 40px; }*/
.step1Box .info {background-color: #FAFAFA; border-radius: 5px; padding: 42px 44px;}
.step1Box .info .flexBox {display: flex; align-items: center; width: 100%;}
.step1Box .info .flexBox + .flexBox {margin-top: 30px;}
.step1Box .info .flexBox .row {display: flex; align-items: center; flex-grow: 1;}
.step1Box .info .flexBox > span { display: inline-block; min-width: 130px; font-size: 15px; font-weight: 400; line-height: 18px; }
.step1Box .info .flexBox .row > input {flex-grow: 1; height: 48px; padding: 0 15px; background-color: white; border-radius: 5px; font-size: 14px; font-weight: 400; border: 1px solid #eee;}
.step1Box .info .flexBox input::placeholder {color: #AAAAAA;}
.step1Box .info .flexBox .inputBox {flex-grow: 1; display: flex; align-items: center; height: 48px; border: 1px solid #eee; background-color: white; border-radius: 5px; overflow: hidden;}
.step1Box .info .flexBox .inputBox select,
.step1Box .info .flexBox .inputBox input {position: relative;  height: 100%; padding: 0 15px; font-size: 15px; font-weight: 300;}
.step1Box .info .flexBox .inputBox select {width: calc(100%/3);background: url(./images/ico_select.png) no-repeat right 15px center / 8px auto;}
.step1Box .info .flexBox .inputBox select.disabled { pointer-events: none; cursor: not-allowed; }
.step1Box .info .flexBox .inputBox span {width: calc(100%/3); height: 100%; position: relative;}
.step1Box .info .flexBox .inputBox span::after {position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 20px; background-color: #eee;}
.step1Box .info .flexBox .inputBox input {width: 100%;}
.step1Box .info .flexBox .certiInput.confirmed input { color: #1C6BBA; background-color: #EEEEEE; }

.step1Box .info .flexBox .btn {width: 100%; max-width: 162px; height: 48px;border-radius: 5px;font-size: 15px; font-weight: 300; }
.step1Box .info .flexBox .btn1 {margin-left: 10px; border: 1px solid #1C6BBA; color: #1C6BBA; background-color: white;}
.step1Box .info .flexBox .btn2 {margin-left: 7px; background-color: #1C6BBA; color: white;}
.step1Box .info .flexBox.name input {max-width: 260px;}
.step1Box .info .flexBox.num .btn {max-width: 78px;}
.step1Box .info .flexBox.certiInput .btn {max-width: 78px;}
.step1Box .info + .ti {margin-top: 40px;}
.step1Box label {position: relative; width: 100%; height: 64px; display: flex; align-items: center; padding: 0 15px; background-color: white; border: 1px solid #eee; border-radius: 5px;}
.step1Box label + label {margin-top: 15px;}
.step1Box label input {position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden;}
.step1Box label em {position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #1C6BBA;}
.step1Box label em::after {position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background-color: white; }
.step1Box label p {margin-left: 10px; font-size: 15px; font-weight: 400; color: #999999;}
.step1Box label p span {display: inline-block; margin-left: 10px; font-size: 15px;  font-weight: 400; color: black; }
.step1Box label p + p {margin-left: 15px;}
.step1Box label:has(input:checked) {border-color: #1C6BBA;}
.step1Box label:has(input:checked) em::after {background-color: #1C6BBA;}

.step1Box ul.notice {width:100%; padding:30px 5px 0; /*margin-bottom:60px;*/}
.step1Box ul.notice li {font-size:15px; font-weight:300; color:#888; line-height:1.4; padding-left:10px; text-indent:-10px; text-align:justify;}
.step1Box ul.notice li + li {margin-top:10px; }
.step1Box ul.notice li span.eng {font-weight:300;}

.step1Box section#carInfo {margin-top:40px;}

@media (max-width:600px) {
	.step1Box ul.notice li {font-size:14px;}
}


.step2Box .serviceBox {width: 100%; padding: 30px 7px 30px 30px; border: 1px solid #eee; border-radius: 5px;}
.step2Box .service { display: flex; flex-wrap: wrap; justify-content: space-between; overflow-y: auto; width: 100%; height: 284px; padding-right: 28px;}
.step2Box .service::-webkit-scrollbar {width: 5px; border-radius: 5px;}
.step2Box .service::-webkit-scrollbar-thumb {width: 5px; border-radius: 5px; background-color: #707070;}
.step2Box .service::-webkit-scrollbar-track {width: 5px; border-radius: 5px; background-color: #F5F5F5;}
.step2Box .service li {position: relative; width: 48.5%; height: 56px; margin-bottom: 10px; border-radius: 10px; background-color: #F5F5F5;}
.step2Box .service li label {width: 100%; height: 100%; padding: 0 10px; display: flex; align-items: center; justify-content: center;}
.step2Box .service li label input {position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden;}
.step2Box .service li label span { word-break: keep-all; text-align: center; line-height: 1.4; font-size: 15px; font-weight: 400; }
.step2Box .service li:has(input:checked) {background-color: white; border: 1px solid #1C6BBA;}
.step2Box .service li:has(input:checked) span {color: #1C6BBA;}
.step2Box #etcServiceWrap { display: none; margin-top: 30px; }
.step2Box .serviceBox + .ti {margin: 30px 0 20px;}
.step2Box .captionBox input {display: block; margin-bottom: 13px; width: 100%; height: 48px; padding: 0 15px; border-radius: 5px; font-size: 15px; font-weight: 300; background-color: white; border: 1px solid #eee;}
.step2Box .captionBox input::placeholder {color:#cfcfcf;}
.step2Box .captionBox .caption {display: block; text-align: justify; word-break: break-all; padding-left: 10px; text-indent: -10px; font-size: 14px; font-weight: 300; line-height: 1.5; color: #707070; }
.step2Box .captionBox .topCaption {padding: 14px 0 0 10px; margin-top: 40px; border-top: 1px solid #eee; }
.step2Box .captionBox .caption + .caption {margin-top:10px;}

.step3Box .search {display: flex; align-items: center; width:100%; min-height: 92px; padding: 30px 44px; background-color: #F5F5F5; }
.step3Box .search .search_select { min-width:118px; height:46px; background: #FFFFFF; border: 1px solid #F5F5F5; border-radius: 5px; }
.step3Box .search .search_select select {width:100%; height:100%; padding: 0 15px; font-weight: 400; background: url(./images/ico_select_r.png) no-repeat right 10px center; background-size: 24px 24px; font-size: 15px; color: #aaa;}
.step3Box .search .search_input {display: flex; align-items: center; margin-left: 10px; padding-right: 10px; flex-grow: 1; height: 46px; background: #FFFFFF; border: 1px solid #F5F5F5; border-radius: 5px;}
.step3Box .search .search_input input {width:100%; height:100%;padding:0 15px; font-weight: 400; font-size: 15px;color: #000; }
.step3Box .search .search_input input::placeholder {color:#aaa;}
.step3Box .search .search_input a {width:24px; height:24px; display:block; background: url(./images/ico_search.png) no-repeat center center / 100%; }
.step3Box .search .etc_btns {display:flex; align-items:center; justify-content:space-around;}
.step3Box .search .etc_btns .info_acc_center {width:50%; font-size:14px; color:#000; padding-left:14px; font-weight:400; line-height:1.2; background-image:url('/images/center/marker_acc.png'); background-repeat:no-repeat; background-size:11px;}
.step3Box .search .etc_btns .btn_myposition {width:50%; }
.step3Box .search .etc_btns .btn_myposition:after {display:block; clear:both; content:"";}
.step3Box .search .etc_btns .btn_myposition a {display:block; float:right; font-size:13px; height:14px; line-height:14px; font-weight:400; letter-spacing:-0.03em; color:#1868b9; width:140px; text-align:right; background-image:url('./../../images/center/btn_myposition.svg'); background-repeat:no-repeat; background-position:left center 3px; padding-left:15px;}
.step3Box .map_wrap .result_list {padding: 26px 0 18px;}
.step3Box .map_wrap .result_list .info {display: flex; align-items: center; justify-content: end; font-size: 15px; font-weight: 400; }
.step3Box .map_wrap .result_list .info span { font-size: 14px; font-weight: 300; color: #888; }
.step3Box .map_wrap .result_list .info img {display: inline-block; margin-right: 5px; width: 14px;}
.step3Box .serviceBox { margin-top: 18px; padding: 30px 7px 0px 44px; border: 1px solid #eee; border-radius: 5px;}
.step3Box .serviceBox .service {position: relative; width: 100%; height: 428px; padding:0 32px 30px 30px; overflow-y: auto;}
.step3Box .serviceBox .service::-webkit-scrollbar { width: 5px;}
.step3Box .serviceBox .service::-webkit-scrollbar-thumb { background: #707070; border-radius: 5px;}
.step3Box .serviceBox .service::-webkit-scrollbar-track { background: #F5F5F5; border-radius: 5px;}


.map_wrap .service.padding {padding-top: 5px;}
.map_wrap .service .listTop:first-of-type {border-top: 1px solid #eee;}
.map_wrap .service .listTop {position:relative; width:100%; height: auto; min-height:60px; border-bottom: 1px solid #eee;  }
.map_wrap .service .listTop > p {position: relative; display: flex; height: 60px; align-items: center; font-weight: 400; font-size: 18px; color: #141414; }
.map_wrap .service .listTop > p::after {position: absolute; content: ""; top: 50%; right: 20px; transform: translateY(-50%); width: 24px; height: 24px; background: url('./images/ico_arr.png') no-repeat center center / 100%;}
.map_wrap .service .listTop.ov {border-bottom: none;}
.map_wrap .service .listTop.ov p::after {transform: translateY(-50%) rotate(180deg);}

.map_wrap .service label {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; width: 100%; height: 60px; border-radius: 5px; box-shadow: 0px 2px 10px 0px #00000026; background: #FFFFFF;}
.map_wrap .service label input {position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden;}
.map_wrap .service label .leftBox {display: flex; align-items: center;}
.map_wrap .service label .leftBox em {position: relative; width: 20px; height: 20px; border-radius: 20px; border: 1px solid #284E80;}
.map_wrap .service label .leftBox em::after {position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background-color: white; }
.map_wrap .service label .leftBox p {margin-left: 10px; font-size: 15px; font-weight: 400; }
.map_wrap .service label .leftBox img {display: inline-block; width: 14px; margin-left: 5px;}
.map_wrap .service label .rightBox {display: flex; align-items: center; justify-content: end;}
.map_wrap .service label .rightBox span {font-size: 14px;font-weight: 300; color: #777; }
.map_wrap .service label .rightBox button {margin-left: 12px; width: 22px; height: 22px;}
.map_wrap .service label .rightBox button img {width: 100%;}
.map_wrap .service label:has(input:checked) {border: 1px solid #1C6BBA;}
.map_wrap .service label:has(input:checked) .leftBox p {color: #1C6BBA; font-weight: 500;}
.map_wrap .service label:has(input:checked) .leftBox em::after {background-color: #1C6BBA;}

.map_wrap .service > li .list_btn {display:block; width:100%; height:72px; line-height:72px;background-image: url('./../../images/center/select_arr.png'); background-repeat:no-repeat; background-size:15px; background-position:right 3px center;  }
.map_wrap .service > li .list_btn .title {height: 100%; align-items: center;display: flex;font-weight: 400; font-size: 18px; line-height: 18px;  letter-spacing: -0.8px; color: #141414;}
.map_wrap .service > li.no_result { text-align:left; padding: 20px 5px; font-size:14px; color:#333; line-height:1.4;}
.map_wrap .service > li.no_result a {transition:background-color 0.2s;display:block;width:80px;padding:5px; padding-left:0; border-radius:5px;  padding-right:20px;color:#1868b9;font-size:14px;letter-spacing:-0.06em;font-weight:400; margin-top:10px;}
.map_wrap .service .listitme + .listitme {margin-top: 10px;}
.map_wrap .innerList {display: none; padding-bottom: 10px;}

.popup {opacity: 0; pointer-events: none;position: fixed; top:100%; left: 0; width: 0; height: 0; overflow: hidden; z-index: 999;}
.popup .bg {opacity: 0; pointer-events: none; transition:opacity .3s; position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.8);}
.popup .popinner { display: none; position: fixed; top: 50%; left: 50%; width:95%; max-width: 712px; max-height: 95%; overflow-y: auto; transform: translate(-50%,-50%); padding: 0 95px 26px; background-color: white; border-radius: 10px;}
.popup  .closePop {position: absolute; top: 25px; right: 25px; width: 28px; height: 28px; background: url(./images/ico_close.png) no-repeat center/ 100% ; z-index: 1;}
.popup .top {display: flex; align-items: center; justify-content: center; height: 130px;}
.popup .top p {display: flex; align-items: center; font-size: 20px; font-weight: 500; }
.popup .top p img {display: inline-block; width: 14px; margin-left: 10px;}
.popup .imgBox {width: 100%; max-width: 521px; height: 317px; background-color: #FAFAFA; margin: 0 auto 33px; }
.popup .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.popup .txtBox {width: 100%; max-width: 521px; margin: auto;}
.popup .txtBox .tit { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; margin-bottom: 16px; border-bottom: 1px solid #EEEEEE;}
.popup .txtBox .tit .leftBox {position: relative;display: flex; align-items: center;}
.popup .txtBox .tit .leftBox:has(strong)::before { content: ""; display: block; margin-right: 6px; width: 19px; height: 19px; background: url(./images/charging.png) no-repeat center center / 100%;}
.popup .txtBox .tit strong { font-size: 16px; font-weight: 400; color: #1C6BBA; }
.popup .txtBox .tit span {display: inline-block; margin-left: 5px; padding: 6px; font-size: 12px; color: #FFFFFF; border-radius: 3px; background-color: #1C6BBA; }
.popup .txtBox .tit .date { font-size: 14px; font-weight: 300; color: #707070; }
.popup .txtBox .row {display: flex; align-items: baseline; margin-bottom: 12px;}
.popup .txtBox .row p {min-width: 60px; margin-right: 11px; font-size: 15px; font-weight: 400; color: #1C6BBA; }
.popup .txtBox .row span {word-break: keep-all; font-size: 15px; font-weight: 300; line-height: 1.5; color: #1C6BBA; }

.popup.on,
.popup.on .bg {opacity: 1; pointer-events: all;}
.popup.on .popinner {display: block;}

.popup.idxPop .popinner {padding: 0 34px 34px;}
.popup.idxPop .popinner::-webkit-scrollbar {width: 5px;}
.popup.idxPop .popinner::-webkit-scrollbar-thumb {background-color: #707070; border-radius: 5px;}
.popup.idxPop .popinner::-webkit-scrollbar-track { margin: 10px 0; background-color: #F5F5F5; border-radius: 5px;}
.popup.idxPop .top {height: 103px;}
.popup.idxPop .middle {padding: 10px 37px 20px; border-radius: 5px; background-color: #FAFAFA;}
.popup.idxPop .middle .flexBox {display: flex; align-items: center;}
.popup.idxPop .bottom {text-align: center;}
.popup.idxPop .bottom .btn { display: flex; align-items: center; justify-content: center; width: 60%; max-width: 240px; height: 60px; margin: 30px auto 0 ; border-radius: 5px; background-color: #003057; font-size: 15px; font-weight: 400; color: white; }

.popup#popup_1 .middle .flexBox p {display: block; min-width: 120px;}
.popup#popup_1 .middle .inputBox {width: 100%; padding: 5px; background-color: white; border: 1px solid #EEEEEE}
.popup#popup_1 .middle .inputBox.name {max-width: 323px;}
.popup#popup_1 .middle .inputBox span {position: relative; width: 100%;}
.popup#popup_1 .middle .inputBox span::after {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 14px; border-radius: 5px; background-color: #EEEEEE; }
.popup#popup_1 .middle .inputBox input,
.popup#popup_1 .middle .inputBox select {width: 100%; height: 100%; padding: 10px; font-size: 15px; font-weight: 300; color: #141414; }
.popup#popup_1 .middle .inputBox select {background: url(./images/ico_select.png) no-repeat right 16px center / 8px auto;}
.popup#popup_1 .middle .inputBox select.disabled { pointer-events: none; cursor: not-allowed; }
.popup#popup_1 .middle .inputBox input::placeholder {color: #AAAAAA;}
.popup#popup_1 .middle .inputBox .btn {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 120px; height: 38px; border-radius: 3px; font-size: 15px; font-weight: 300; border: 1px solid #1C6BBA; color: #1C6BBA; background-color: white; }
.popup#popup_1 .middle .certiInput .inputBox .btn { max-width: 78px; }
.popup#popup_1 .middle .certiInput .inputBox.confirmed { color: #1C6BBA; background-color: #EEEEEE; }
.popup#popup_1 .middle .certiInput .inputBox.confirmed input { color: #1C6BBA; }
.popup#popup_1 .middle .inputBox .btn + .btn {margin-left: 5px;}
/*.popup#popup_1 .middle .inputBox .btn[type=submit] {margin-left:0;}*/
.popup#popup_1 .middle .inputBox .btn2 {background-color: #1C6BBA; color: white;}
.popup#popup_1 .middle .flexBox + .flexBox {margin-top: 20px;}

.popup#popup_2 .middle { max-height: calc(100dvh - 300px); padding-right: 32px; overflow-y: auto; scrollbar-gutter: stable;}
.popup#popup_2 .middle::-webkit-scrollbar {width: 5px;}
.popup#popup_2 .middle::-webkit-scrollbar-thumb {background-color: #707070; border-radius: 5px;}
.popup#popup_2 .middle::-webkit-scrollbar-track { margin: 10px 0;background-color: #F5F5F5; border-radius: 5px;}
.popup#popup_2 .middle > .flexBox {justify-content: space-between;}
.popup#popup_2 .middle li {padding: 20px 0 ;}
.popup#popup_2 .middle .infoBox p { font-size: 16px; font-weight: 500; letter-spacing: -0.8px; color: #141414; }
.popup#popup_2 .middle .infoBox span { font-size: 14px; letter-spacing: -0.8px; font-weight: 300; color: #707070; }
.popup#popup_2 .middle .infoBox img { display: inline-block; margin-right: 5px; width: 22px;}
.popup#popup_2 .middle .flexBox.phone {margin: 14px 0 10px;}
.popup#popup_2 .middle .infoFlexBox {display: flex;}
.popup#popup_2 .middle .btn {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 123px; height: 45px; border-radius: 5px; font-size: 14px; font-weight: 400; letter-spacing: -0.01em; color: white; background-color: #003057;}
.popup#popup_2 .middle .btn.cancel {background-color:#d7d7d7;}
.popup#popup_2 .middle li + li {border-top: 1px solid #EEEEEE;}
.popup#popup_2 .middle .infoFlexBox .flexBox + .flexBox {margin-left: 20px;}
.popup#popup_2 .middle li.empty p { padding: 15px 0 5px; text-align: center; font-size: 16px; color: #888888; }
.popup#popup_2 .selectGroup { display: flex; margin-bottom: 30px; }
.popup#popup_2 .selectGroup .box-select { display: flex; width: 50%; height: 48px; border: 1px solid #CCC; border-radius: 5px; }
.popup#popup_2 .selectGroup .box-select + .box-select { margin-left: 15px; }
.popup#popup_2 .selectGroup .box-select i { display: flex; align-items: center; flex: none; padding: 0 12px; height: 100%; }
.popup#popup_2 .selectGroup .box-select select { width: 100%; height: 100%; font-size: 16px; color: #141414; }
.popup#popup_2 .selectGroup .box-select select { background-image: url(./images/ico_select_arr.png); background-repeat: no-repeat; background-position: center right 20px; }

.popup.idxPop .popinner.infoPopInner .middle strong { display: block; padding: 15px 0 10px; border-bottom: 1px solid #EEEEEE; font-size: 16px; font-weight: 500; letter-spacing: -0.8px; color: #141414; }
.popup.idxPop .popinner.infoPopInner .middle li {display: flex; align-items: baseline;margin-top: 15px;}
.popup.idxPop .popinner.infoPopInner .middle li span {display: inline-block; min-width: 110px; font-size: 15px; font-weight: 400; color: #284E80; }
.popup.idxPop .popinner.infoPopInner .middle li p { font-size: 15px; font-weight: 300; color: #141414; word-break: keep-all; line-height: 1.4;}
.popup.idxPop .popinner.infoPopInner .middle li p em {font-size: 15px; font-weight: 500; }
.popup.idxPop .popinner.infoPopInner .middle li img {width: 18px;}
.popup.idxPop .popinner.infoPopInner .bottom .cancel {margin: 20px auto 0; font-size: 14px; font-weight: 200;text-decoration: underline; text-align: center; color: #707070; }
.popup.idxPop .popinner.infoPopInner .bottom .caption { margin-top:30px; display: block; word-break: keep-all; font-size: 14px; font-weight: 200; line-height: 1.5; text-align: center; color: #707070; }
.popup.idxPop .popinner.infoPopInner .bottom .caption + .caption {margin-top:0;}

.step4Box .flexBox {display: flex;}
.step4Box .flexBox > div {width: 50%;}
.step4Box .flexBox .tit {display: block; width: 100%; margin-bottom: 25px; font-size: 20px; font-weight: 500; }
.step4Box .flexBox .wrapBox {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 15px; min-height: 455px; border: 1px solid #eee; border-radius: 5px;}
.step4Box .flexBox .rightBox {display: flex; flex-direction: column; align-items: center;  margin-left: 12px;}

.step4Box .flexBox .wrapBox .disable { display: flex; justify-content: flex-start; align-items: center; padding: 15px 15px 0; width: 100% }
.step4Box .flexBox .wrapBox .disable p { display: flex; justify-content: flex-start; align-items: center; font-size: 12px; color: #AEB0BB; }
.step4Box .flexBox .wrapBox .disable p:before { content: ""; margin-right: 5px; width: 16px; height: 16px; border-radius: 2px; background-color: #ECECEC; }

.step4Box .timePick {width: 100%; height: 100%; margin: auto;}
.step4Box .timePick .timeTit {display: block; width: 100%; max-width: 334px; margin:0 auto 8px; font-size: 15px; font-weight: 400; color: #707070;}
.step4Box .timePick .chkDate {display: flex; flex-wrap: wrap;  width: 100%; max-width: 334px; margin:0 auto; }
.step4Box .timePick .chkDate label {position: relative; width: calc(100%/3 - 6px); height: 50px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; margin-right: 8px; border: 1px solid #ECECEC; background-color: white; border-radius: 4px;}
.step4Box .timePick .chkDate label input {position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden;}
.step4Box .timePick .chkDate label span {font-size: 15px; font-weight: 400; color: #707070; }
.step4Box .timePick .chkDate label:nth-of-type(3n) {margin-right: 0;}
.step4Box .timePick .chkDate label:has(input:disabled) {background-color: #E0E0E0;}
.step4Box .timePick .chkDate label:has(input:disabled) span {color: #AEB0BB;}
.step4Box .timePick .chkDate label:has(input:checked) {border-color: #1C6BBA;}
.step4Box .timePick .chkDate label:has(input:checked) span {color: #1C6BBA;}
.step4Box .timePick .chkDate + .timeTit {margin-top: 20px;}
.step4Box .btns {margin-top: 90px;}

#calendar {width: 100%; max-width: 327px; background-color: #fff; border-radius: 0 0 10px 10px;}
.calendar caption { text-align: center; padding: 0px 0 9px; font-weight: 400; font-size: 24px; line-height: 24px; letter-spacing: -0.008em;color: #333333;background-color: #fff; border-radius: 10px 10px 0 0;}
.calendar caption .box { display: flex; justify-content: center; }
.calendar caption a { display: block; width: 9px; height: 16px; }
.calendar thead{position:relative;}
.calendar thead tr {position:relative;}
.calendar tr {display:flex;}
.calendar th {display:flex;justify-content:center;align-items:center;flex:1;text-align:center;height: 70px;vertical-align:middle;border-bottom: 1px solid #eee;font-weight: 400; font-size: 14px;  line-height: 14px; text-align: center;  letter-spacing: -0.008em; color: #999999;}
.calendar td {display:flex;justify-content:center;align-items:center;flex:1; vertical-align:middle;height: 34px; font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: -0.008em; color: #999999;}
.calendar td a {transition:background 0.2s,border-color 0.2s;display:flex;width:34px;height:34px; justify-content:center;align-items:center;font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: -0.008em; color: #333333;}
.calendar td a.disabled { color: #999999; }
.calendar td a.on {background-color: #1c6bba;border-radius:5px;color: white;}
.calendar td a:active{background-color: rgba(0, 0, 0, .05);}
.calendar tr.t1 {padding-top: 10px;}
.calendar tr.tl {padding-bottom: 10px;}

.calendar .prev, .calendar .next {
    transition: 0.2s;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    width: 33px;
    height: 33px;
}

.calendar .prev:active, .calendar .next:active {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .05);
}

.calendar .prev i, .calendar .next i {
    display: block;
    width: 13px;
    height: 13px;
}

.calendar .prev i {
    background: url(/service-center-reservation/images/calendar_leftArrow.png) no-repeat center / auto 13px;
}

.calendar .next i {
    background: url(/service-center-reservation/images/calendar_rightArrow.png) no-repeat center / auto 13px;
}

.cust_mile_wrap {width:100%; }
.cust_mile_wrap .info {padding-top:0;}
.cust_mile_wrap .info .flexBox > span { display: inline-block; min-width: 130px;font-size: 15px;font-weight: 400;line-height: 18px;  margin-top:-40px;}
.cust_mile_wrap .info .flexBox .row { display: block;flex-grow: 1; }
.cust_mile_wrap .info .input-box { display:flex; align-items:center; flex-grow: 1; height: 48px; padding-right:15px; background-color: white; border-radius: 5px; border: 1px solid #eee; max-width:260px; }
.cust_mile_wrap .info .input-box input { width:calc(100% - 30px); font-size: 14px; font-weight: 400; height: 48px; padding: 0 15px;}
.cust_mile_wrap .info .input-box span {width:30px; font-size:15px; color:#999; font-weight:400;}
.cust_mile_wrap p.desc {padding-top:15px; font-size:14px; color:#999; letter-spacing:-0.05rem; line-height:1.5; padding-left:8px; text-indent:-8px;}


@media (max-width:1200px) {
    .sc_reser .visual img {object-position: 32%; height: 50vw; min-height: 450px;}
}
@media (max-width: 1024px) {
    /* .floatBtn {display: block;} */
}
@media (max-width:800px) {
    .sc_reser .visual img { height: 56vw; min-height: 280px; max-height: 450px;}
    .sc_reser .visual .tit {text-align: center; font-size: 45px;}

    .stepBox .stepInfo p {height: 60px;}
    .step1Box .info {padding: 30px;}
    .step1Box .info .flexBox > span {min-width: 100px;}
    .step1Box .info .flexBox .btn {max-width: 140px;}
    .step1Box .info .flexBox.num .btn {max-width: 65px;}

    .popup .popinner {padding:0 25px 26px;}

    .popup.idxPop .popinner {padding: 0 25px 30px;}
    .popup.idxPop .middle {padding: 10px 20px 20px;}

    .popup#popup_2 .middle { max-height: calc(100dvh - 260px); padding-right: 15px;}

    .step4Box .flexBox {flex-wrap: wrap; justify-content: center;}
    .step4Box .flexBox > div {width: 100%; max-width: 500px;}
    .step4Box .flexBox .rightBox {margin: 50px 0 0; }
    .step4Box .flexBox .wrapBox {min-height: auto; padding: 50px 15px;}
}
@media (max-width:600px) {
    .sc_reser .visual .tit {font-size: 32px;}
    .sc_reser .txtBox {padding: 60px 15px 100px;}
    .sc_reser .txtBox p {font-size: 16px;}
    .sc_reser .txtBox .btns {flex-direction: column; margin-bottom: 60px;}
    .sc_reser .txtBox .btns .btn {max-width: 400px; height: 52px;}
    .sc_reser .txtBox .btns .btn + .btn {margin-left: 0; margin-top: 10px;}

    .stepBox {padding: 0 15px 80px;}
    .stepBox .stepInfo {margin-bottom: 40px;}
    .stepBox .titBox {height: 100px;}
    .stepBox .titBox .tit {font-size: 24px;}
    .stepBox .titBox .close {width: 25px; height: 25px;}
    .stepBox .stepInfo p {height: 48px; font-size: 16px;}
    .stepBox .stepInfo p + p {margin-left: 5px;}
    .stepBox .ti {font-size: 18px; margin-bottom: 15px;}
    .stepBox .btns {margin-top: 40px;}
    .stepBox .btns .btn {height: 52px;}
    .stepBox .btns .btn + .btn {margin-left: 10px;}

    .step1Box .info {padding: 25px 15px;}
    .step1Box .info .flexBox {flex-wrap: wrap;}
    .step1Box .info .flexBox > span {width: 100%; margin-bottom: 10px;}
    .step1Box .info .flexBox + .flexBox {margin-top: 20px;}
    .step1Box .info .flexBox.phone .row {flex-wrap: wrap;}
    .step1Box .info .flexBox.phone .btn {margin: 10px 0 0; max-width: 100%;}
    .step1Box .info .flexBox.num span {display: none;}
    .step1Box label p {margin-left: 15px; min-width:70px;}
    .step1Box label p span {display: block; margin: 5px 0 0;}
    .step1Box label p + p {margin-left: 20px;}

	.step1Box .info .flexBox.name input {max-width:100%;}

    .step2Box .serviceBox {padding: 25px 5px 25px 15px;}
    .step2Box .service {padding-right: 10px;}
    .step2Box .service li {width: 49%; height: 52px;}
    .step2Box .service li label span {font-size: 13px;}
    .step2Box .captionBox .caption {font-size: 12px;}

    .step3Box .search {padding: 20px;}
    .step3Box .serviceBox {padding-left: 0;}
    .step3Box .serviceBox .service {padding: 5px 15px 30px 25px;}

    .step4Box .flexBox .tit {font-size: 18px; margin-bottom: 15px;}
    .step4Box .flexBox .wrapBox {padding: 35px 15px;}
    .step4Box .flexBox .rightBox {margin-top: 35px;}

    .popup .popinner {padding: 0 15px 15px;}
    .popup .top {height: 80px;}
    .popup .closePop { top: 15px; right: 15px; width: 22px; height: 22px; }
    .popup .top p {font-size: 18px;}
    .popup .top p img {margin-left: 5px;}
    .popup .imgBox {height: 180px; margin-bottom: 20px;}
    .popup .txtBox .tit {flex-wrap: wrap; flex-direction: column-reverse;}
    .popup .txtBox .tit .leftBox {width: 100%; }
    .popup .txtBox .tit .date {width: 100%; margin-bottom: 12px; font-size: 13px; text-align: right;}
    .popup .txtBox .row p
    .popup .txtBox .row span {font-size: 14px;}

    .popup.idxPop .popinner {padding: 0 15px 30px;}
    .popup.idxPop .top p {padding: 0 10px; text-align: center; word-break: keep-all; line-height: 1.4;}
    .popup.idxPop .bottom .btn {height: 52px;}

    .popup#popup_1 .middle {padding: 25px 15px;}
    .popup#popup_1 .middle > .flexBox {flex-wrap: wrap;}
    .popup#popup_1 .middle > .flexBox p {margin-bottom: 15px;}
    .popup#popup_1 .middle .inputBox.name {max-width: 100%;}
    .popup#popup_1 .middle .flexBox.inputBox {position: relative; margin-bottom: 48px;}
    .popup#popup_1 .middle .flexBox.inputBox .btn {position: absolute; top: 120%; left: 0; height: 40px; max-width: 100%;}
    .popup#popup_1 .middle .flexBox.inputBox .btn1 { top:calc(120% + 45px); margin-left:0; border:none; font-size:14px; height:30px;}
    .popup#popup_1 .middle .flexBox.inputBox .btn2 {margin-left:0;}

    .popup#popup_2 .middle { max-height: calc(100dvh - 211px);}
    .popup#popup_2 .middle > .flexBox {flex-wrap: wrap; cursor:pointer;}
    .popup#popup_2 .middle .btn {max-width: 100%; margin-top: 15px;}

    .popup.idxPop .popinner.infoPopInner .middle li span { min-width: 85px; font-size: 14px;}
    .popup.idxPop .popinner.infoPopInner .middle li p,
    .popup.idxPop .popinner.infoPopInner .middle li p em {font-size: 14px;}
    .popup.idxPop .popinner.infoPopInner .bottom .caption {font-size: 13px;}

	.popup .popinner {width:100%; height:100%; max-height:100%; border-radius:0;}

	.cust_mile_wrap .info .input-box {max-width:100%;}

	.cust_mile_wrap .info {padding-top:0;}
	.cust_mile_wrap .info .flexBox > span {margin-top:0;}
}
@media (max-width:500px) {
    .sc_reser {min-height: calc(100vh - 232px);}
    .sc_reser .txtBox p br {display: none;}
    .sc_reser .txtBox p br.mBlock {display: block;}
    .sc_reser .txtBox .btns .btn {font-size: 16px;}

    .stepBox {min-height: calc(100vh - 232px);}

    .step3Box .search {padding: 15px 10px;}
    .step3Box .search .search_select {min-width: 100px;}
    .step3Box .search .search_select select { font-size: 13px; background-position: right 5px center;}
    .step3Box .search .search_input input {font-size: 13px; }
    .step3Box .map_wrap .result_list .info,
    .step3Box .map_wrap .result_list .info span {font-size: 13px;}

    .map_wrap .service .listTop > p {font-size: 16px;}
    .map_wrap .service label {flex-wrap: wrap; height: auto; padding: 15px;}
    .map_wrap .service label .leftBox p {font-size: 14px; margin-left: 7px;}
    .map_wrap .service label .rightBox {width: 100%; margin-top: 2px;}
    .map_wrap .service label .rightBox span {font-size: 13px;}
    .map_wrap .service label .rightBox button {margin-left: 4px;}
}

#resvt_pop {position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.5); z-index:999; display:none;}
#resvt_pop .inner {position:relative; width:90%; max-width:460px; padding:31px 24px; background:#fff; border-radius:10px;}
#resvt_pop .inner .btn_close {width:35px; height:35px; position:absolute; top:16px; right:14px;}
#resvt_pop .inner .btn_close img {width:100%;}
#resvt_pop .inner .inner_top { margin-bottom:20px;}
#resvt_pop .inner .inner_top h3 {font-size:20px; color:#333; line-height:1.5; text-align:center; font-weight:500;}

#resvt_pop ul.chk-boxs { border-top:solid 1px #EEE; border-bottom:solid 1px #EEE; padding:15px 7px 17px; margin-bottom:30px;}
#resvt_pop ul.chk-boxs li:first-child { padding-bottom:15px; }
#resvt_pop ul.chk-boxs li + li {padding-top:15px; border-top:solid 1px #EEE; }
#resvt_pop ul.chk-boxs li label {display:flex; align-items:flex-start; }
#resvt_pop ul.chk-boxs li label .chkbox {width:35px; margin-top:3px;}
#resvt_pop ul.chk-boxs li label .chktxt {width:calc(100% - 35px); font-size:15px; font-weight:400; text-align:justify; line-height:1.5; word-break:break-all; color:#777;}

#resvt_pop .submit_btn_wrap {width:100%; display:flex; justify-content:center;}
#resvt_pop .submit_btn_wrap a.submit_btn {width:100%; max-width:240px; height:60px; line-height:60px; background:#003057; color:#fff; text-align:center; border-radius:5px; font-size:15px; font-weight:500; letter-spacing:-0.04rem; }

#resvt_pop input[type=checkbox] { border-radius: 4px; width: 22px; height: 22px; border: 1px solid #D9D9D9;}
#resvt_pop input[type=checkbox]:checked { background-color:#003057; background-image: url(./images/ico_Check.png); background-position:center; background-size:13px 13px; background-repeat:no-repeat;  border-color: #003057; }
#resvt_pop.on { display:flex; align-items:center; justify-content:center;}


@media (max-width:600px) {
	#resvt_pop .inner {position:relative; width:90%; max-width:360px;}
	#resvt_pop ul.chk-boxs li label .chktxt {font-size:14px;}
	#resvt_pop ul.chk-boxs li:first-child { padding-bottom:10px; }
	#resvt_pop ul.chk-boxs li + li {padding-top:10px; border-top:solid 1px #EEE; }

	#resvt_pop .submit_btn_wrap a.submit_btn {height:52px; line-height:52px; max-width:200px;}

	#resvt_pop .inner .btn_close {width:25px; height:25px;}

}


#pop_kasp {position:fixed; top:0; left:0; z-index:999; width:100%; height:100vh; display:none;}
#pop_kasp .pop_kasp { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:393px; padding:27px 27px 34px; border-radius:5px; background:#fff; }
#pop_kasp .pop_kasp .pop_kasp_inner {width:100%; height:100%;  text-align:center; }
#pop_kasp .pop_kasp .pop_kasp_inner .ico {margin-bottom:8px;}
#pop_kasp .pop_kasp .pop_kasp_inner .tit {font-size:20px; color:#333; font-weight:500; line-height:1.4; letter-spacing:-0.05rem; margin-bottom:12px;}
#pop_kasp .pop_kasp .pop_kasp_inner .tit b {font-weight:500; color:#FF6A00;}
#pop_kasp .pop_kasp .pop_kasp_inner .txt {font-size:15px; font-weight:400; color:#777; line-height:1.4; letter-spacing:-0.05rem; margin-bottom:15px;}
#pop_kasp .pop_kasp .pop_kasp_inner .btn_pop {width:180px; height:45px; margin:0 auto;}
#pop_kasp .pop_kasp .pop_kasp_inner .btn_pop a {display:flex; width:100%; height:100%; align-items:center; justify-content:center; border-radius:5px; background:#284E80; color:#fff; }
#pop_kasp .pop_kasp_bg {width:100%; height:100vh; background: rgba(0, 0, 0, 0.50);}

#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info { width:100%; padding:12px 10px; border-radius: 5px; background: #FEF7F2; margin-bottom:24px;}
#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul {margin:0;}
#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li {display:flex; align-items:center; justify-content:flex-start; color:#1A60B1; font-size:14px; font-weight:300; letter-spacing:-0.05rem; margin:0; text-align:left;}
#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li + li {margin-top:8px;}
#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li.info {color:#FF6A00;}
#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li em.ico_info {width:16px; height:16px; min-width:unset; margin-right:5px; background:url(./images/kasp_ico_info.svg) no-repeat; background-size:contain;}
#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li em.ico_car {width:16px; height:16px; min-width:unset; margin-right:5px; background:url(./images/kasp_ico_car.svg) no-repeat; background-size:contain;}


@media (max-width:600px) {
	#pop_kasp .pop_kasp { max-width:320px; padding:27px 15px 34px;}
	#pop_kasp .pop_kasp .pop_kasp_inner .tit {font-size:18px;}
	#pop_kasp .pop_kasp .pop_kasp_inner .txt {font-size:14px;}
	#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li  {font-size:12px;}
	#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li + li {margin-top:5px;}
	#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li em.ico_info {width:15px; height:15px;}
	#pop_kasp .pop_kasp .pop_kasp_inner .kasp_info ul li em.ico_car {width:15px; height:15px;}

}