@charset "utf-8";
@import url('fonts.css');

/* CSS Document */
html,body{width:100%;height:100%;background-color:#fff;}
body{padding:0;margin:0;font-family:'Noto Sans KR','sans-serif', 'Meiryo', 'Microsoft YaHei';font-size:14px;color:#000;font-weight:500;line-height: 1.5;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,tr,td,thead,tbody,form,fieldset,legend,input,textarea,button{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
body *{-webkit-box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display: block;}
ul,ol,li,dl,dt,dd {list-style:none;}
i,em,address{font-style:normal;}
label,button{cursor:pointer;-webkit-tap-highlight-color: transparent;}
button{position:relative;outline:none;}
hr,legend {position:absolute;left:-1000%;top:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}
fieldset,iframe {border:none;vertical-align:middle;}
img{max-width:100%;vertical-align:top;border:0;}
caption {/*position:absolute;left:-1000%;top:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden*/line-height:0;visibility:hidden;font-size:0;}
input,select,button{vertical-align:middle;font-family:inherit;outline:none;font:inherit;}
textarea{font:inherit;outline:none;}
button{border:none;-webkit-tap-highlight-color: transparent;color:#000;}
table{border:none; border-collapse:collapse; padding:0; border-spacing:0;}
table th{font-weight:400;}
table img{vertical-align:middle;}
a{text-decoration:none;color:#000;-webkit-tap-highlight-color: transparent; cursor:pointer;}
a:link,a:visited,a:focus{text-decoration:none;}
a:hover,a:active{text-decoration:none;}
.blind{display:block;overflow:hidden;top:-1000em;position:absolute;}
::before, ::after, :before, :after {-webkit-box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;}
a.under{text-decoration:underline;}
p,h1,h2,h3,h4,h5,h6,dl,dt,dd,legend,button,div,span{
  -ms-user-select: none; 
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/*공통부분*/
input[type=text], input[type=password], input[type=tel], input[type=email], input[type=number]{height:42px;border-radius:0;border:1px solid #000;background:#fff;padding:0 16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:box-shadow 0.2s ease;}
textarea{border:1px solid #000;padding:12px 16px;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;resize:none;transition:box-shadow 0.2s ease;color:#000;}
select{border-radius:0;background:#fff;border:1px solid #000;height:42px;margin:0;padding:0 20px 0 12px;vertical-align:middle;background:#fff right 8px center / 10px auto url('../images/select_arrow.png') no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:box-shadow 0.2s ease;color:#000;}
button:active{filter:brightness(90%);}
a:active{filter:brightness(90%);}
input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=number]:focus, textarea:focus, select:focus, textarea:focus{border-color:#000 !important;box-shadow:0 0 5px 1px rgba(0,0,0,0.2);color:#000;}
input[type=text]:disabled, input[type=password]:disabled, input[type=tel]:disabled, input[type=email]:disabled, input[type=number]:disabled, textarea:disabled, select:disabled{background:#ddd !important;border-color:#d4d4d5 !important;color:#7d7d7d !important;color:#000;}
input[type=text]:read-only, input[type=password]:read-only, input[type=tel]:read-only, input[type=email]:read-only, input[type=number]:read-only, textarea:read-only{background:#ddd;border-color:#d4d4d5;color:#7d7d7d;color:#000;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #979797; }
input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: #979797; }
input::-moz-placeholder, textarea::-moz-input-placeholder { color: #979797; }
/*.requiredError:after{display:block;padding-top:2px;font-size:12px;color:#ff0000;content:'필수값을 입력해주세요';}*/
.requiredError input[required], .requiredError select[required]{border-color:#ff0000;}
[required].requiredError{border-color:#ff0000;}
@media (max-width:340px) {
    input[type=text], input[type=password], input[type=tel], input[type=email], input[type=number]{padding:0 12px;}
    textarea{padding:10px 12px;}
}

/**/
#wrap{position:relative;min-height:100%;padding-bottom:24px;background:#fff;}
#wrap.fixbtn{padding-bottom:calc(24px + 52px);}
#wrap.bg{background:#f1f6fa;}
#wrap.fullScreen{margin-top: 45px;min-height: unset;}
@media (max-width:340px) {
    #wrap{position:relative;min-height:100%;padding-bottom:18px;background:#fff;}
    #wrap.fixbtn{padding-bottom:calc(18px + 52px);}
}

/**/
.content {padding:24px 24px 0 24px;background:#fff;}
.content.nps {padding:24px 0 0 0;}
.content.npt {padding-top:0;}
.content.login {padding-top:30px;}
.content.boardList {padding:0 !important;background:transparent;}
@media (max-width:340px) {
    .content {padding:18px 18px 0 18px;background:#fff;}
    .content.nps {padding:18px 0 0 0;}
    .content.npt {padding-top:0 !important;}
    .content.login {padding-top:24px !important;}
}

/**/
.fixBtn{position:fixed;z-index:10;left:0;right:0;bottom:0;width:100%;display:flex;}
.fixBtn > button, .fixBtn > a{display:block;width:100%;height:52px;text-align:center;background:#176b55;color:#fff;font-weight:500;font-size:16px;flex:1;}
.fixBtn > a{line-height:52px;}
.fixBtn > button.type1, .fixBtn > a.type1{background:#fff;border-top:1px solid #d7e2e4;color:#000;}
/* 210506 추가 */
.fixBtn button.passButton{
	background: #f1f6fa;
	color: #000;
   	border-top: solid 1px #d7e2e4;
}

/**/
.formWrap {padding:0 24px;}
.content:not(.nps) .formWrap{padding:0;}
.formWrap > .title{padding-bottom:16px;text-align:center;font-size:16px;}
.formField {padding-bottom:30px;}
.formField.policyField{font-size:12px;}
.formField + .formField {padding-top:24px;border-top:1px solid #d7e2e4;}
.formField:last-of-type{padding-bottom:0;}
.formField > li{}
.formField.policyField > li:not(:first-child){padding-left:8px;padding-right:8px;}
.formField > li.twin{display:flex;}
.formField > li + li{padding-top:16px;}
.formField > li.submit {padding-top:30px;}
.formField > li.msg{font-size:12px;}
.formField .formLabel{display:block;padding-bottom:6px;}
.formField > li.twin .formLabel{flex:0 0 90px;}
.formField .formGroup{position:relative;display:flex;}
.formField > li.twin .formGroup{flex:1;}
.formField .formGroup .chkForm {position:relative;overflow:hidden;display:flex;align-items:center;min-height:32px;}
.formField .formGroup .chkForm a{margin-left:auto;text-decoration:underline;}
.formField .formGroup input[type=text], 
.formField .formGroup input[type=password], 
.formField .formGroup input[type=tel], 
.formField .formGroup input[type=email],
.formField .formGroup input[type=number],
.formField .formGroup select,
.formField .formGroup textarea,
.formField .formGroup .chkForm,
.formField .formGroup .btnChk {
    flex:1;
    width:100%;
}
.formField .formGroup * + *:not(button):not(label):not(li){margin-left:6px;}
.formField .formGroup input[type=checkbox], .formField .formGroup input[type=radio]{position:absolute;display:none;left:-999em;top:-999em;opacity:0;}
.formField .formGroup .chkLabel {position:relative;display:block;min-height:24px;/*margin-top:4px;*/padding-left:32px;line-height:23px;}
.formField .formGroup .chkLabel:before{position:absolute;left:0;top:0;width:24px;height:24px;border:1px solid #000;border-radius:100%;transition:all 0.2s ease;content:'';}
.formField .formGroup input[type=checkbox] + .chkLabel:not(.full):after{content:'';}
.formField .formGroup input[type=radio] + .chkLabel:not(.full):after{left:6px;top:6px;width:12px;height:12px;background:#000;border-radius:100%;transition:all 0.1s ease;transform:scale(0);content:'';}
.formField .formGroup input:checked + .chkLabel{/*color:#176b55;*/}
.formField .formGroup input:checked + .chkLabel:before{border-color:#176b55;background:#176b55 center center / 20px auto url('/kdtf/common/images/ico_chkbox_on.png') no-repeat;}
.formField .formGroup input[type=checkbox]:checked + .chkLabel:after{}
.formField .formGroup input[type=radio]:checked + .chkLabel:after{transform:scale(1);background:#176b55;}
.formField .formGroup .chkLabel.full{display:flex;flex:0 0 100%;align-items:center;min-height:48px;/*margin-bottom:4px;*/padding:10px 24px 10px 50px;font-size:14px;border:1px solid #000;border-radius:4px;transition:all 0.2s ease;}
.formField .formGroup .chkLabel.full:before{border:none;left:20px;top:50%;width:20px;height:20px;transform:translateY(-50%);background:transparent center center / 20px auto url('../images/ico_chkbox_off.png') no-repeat;}
.formField .formGroup input:checked + .chkLabel.full{border-color:#176b55;background:#176b55;color:#fff;}
.formField .formGroup input:checked + .chkLabel.full:before{background:transparent center center / 20px auto url('../images/ico_chkbox_on.png') no-repeat;}
.formField .formGroup > input + button{flex:0 0 64px;margin-left:8px;text-align:center;background:#000;color:#fff;border-radius:4px;}

/* 210507 추가 */
.cardArea{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
    border-radius: 12px;
    border: dashed 1px #3273d5;
    margin: 16px 7px;
    height: 180px;	
}
.cardArea .plusImage{
    margin-bottom: 8px;	
}
.cardArea .plusImage img{
	width: 32px;
    height: 32px;	
}
.cardArea .cardMsg{
    font-size: 16px;
    font-weight: normal;
    color: #3273d5;	
}
.cardArea .cardSubMsg{
	font-weight: normal;
	color: #98a6ac;
}
.repPaycardWrap{
	display: flex;
    justify-content: space-between;		
}
.repPaycardWrap div{
	display: flex;
	justify-content: center;
	align-items: center;
}
.repPaycard img{
	width: 24px;
	height: 24px;
}

@media (max-width:340px) {
    .formWrap {padding:0 18px;}
    .formField {padding-bottom:24px;}
    .formField > li + li{padding-top:12px;}
    .formField + .formField {padding-top:24px;}
    .formField > li.submit {padding-top:24px;}
}

/**/
.boardList{background:#fff;}
.boardList > li{border-bottom:1px solid #d7e2e4;}
.boardList > li.notfound{
	text-align: center;
    height: 100vh;
    padding: calc(50vh - 100px) 0;
 }
.boardList > li > a, .boardList > li > .alarm{display:block;padding:16px 24px;background:#fff;}
.boardList > li .date{margin-top:8px;font-size:12px;text-align:right;}
.boardList > li .subj{font-size:14px;word-break:break-all;}
.boardList > li .infor{display:flex;margin-top:8px;align-items:flex-start;justify-content:space-between;font-size:12px;}
.boardList > li .infor > .date{margin-top:0;}
.boardList > li .new{display:inline-block;width:16px;height:16px;margin-top:-2px;vertical-align:middle;background:center center / 16px auto url('../images/ico_new.png') no-repeat;}
.boardMore{padding:24px 24px 0 24px;background:#f1f6fa;}

.boardView{}
.boardView > li{padding:16px 24px;background:#fff;}
.boardView > li.cont{padding:6px 24px;border-top:1px solid #d7e2e4;}
.boardView > li .date{margin-top:4px;font-size:12px;}
.boardView > li .subj{font-size:14px;word-break:break-all;}
.boardView > li .img{padding:24px 0;}
.boardView > li .text{padding:24px 0;word-break:break-all;font-size:14px;}
.boardView > li .img + .text{padding:0 0 24px 0;}

@media (max-width:340px) {
    .boardList > li > a, .boardList > li > .alarm{padding:12px 18px;}
    .boardMore{padding:18px 18px 0 18px;}

    .boardView > li{padding:12px 18px;}
    .boardView > li.cont{padding:6px 18px;}
    .boardView > li .img{padding:18px 0;}
    .boardView > li .text{padding:18px 0;}
    .boardView > li .img + .text{padding:0 0 18px 0;}
}

/*gallery*/
.couponList{background:#fff;display:flex;flex-wrap:wrap;align-items: flex-start;padding:24px 24px 16px 24px;}
.couponList > li{overflow:hidden;flex:0 1 calc(50% - 7px);padding-bottom:16px;}
.couponList > li:nth-of-type(odd){margin-right:7px;}
.couponList > li:nth-of-type(even){margin-left:7px;}
.couponList > li > a{display:block;}
.couponList > li .thumb{margin-bottom:14px;}
.couponList > li .thumb img{}
.couponList > li .subj{margin-bottom:4px;font-size:12px;word-break:break-all;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.couponList > li .price{font-size:14px;word-break:break-all;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;font-weight:600;}

.couponView{}
.couponView > .wrap{padding:24px;background:#fff;}
.couponView > .wrap + .wrap{border-top:1px solid #e0e9eb;}
.couponView .infor{}
.couponView .infor > .thumb{margin-bottom:16px;}
.couponView .infor > .subj{display:flex;flex-wrap:wrap;align-items:center;justify-content: space-between;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #d7e2e4;}
.couponView .infor > .subj .price{font-size:16px;font-weight:600;color:#176b55;}
.couponView .detail:not(:first-child){margin-top:24px;padding-top:24px;border-top:1px solid #d7e2e4;}
.couponView .detail > dt{margin-bottom:12px;font-weight:600;}
.couponView .detail > dd{position:relative;padding-left:10px;}
.couponView .detail > dd:before{position:absolute;left:0;top:9px;height:10px;line-height:0;content:'-';}

@media (max-width:340px) {
    .couponList {padding:18px 18px 12px 18px;}
    .couponView > .wrap{padding:18px;}
    .couponView .infor > .subj{margin-bottom:18px;padding-bottom:18px;}
    .couponView .detail:not(:first-child){margin-top:18px;padding-top:18px;}
}

/**/
.settingList {}
.settingList > dt{padding:14px 24px 8px;font-size:12px;}
.settingList > dd{background:#fff;font-size:16px;}
.settingList > dd:last-of-type{margin-top:8px;}
.settingList .w{display:flex;justify-content:space-between;align-items:center;margin:0 24px;padding:16px 0;border-top:1px solid #e0e9eb;}
.settingList > dd:first-of-type .w, .settingList > dd:last-of-type .w{border-top:none;}
.settingList .version{font-size:14px;color:#979797;}
.settingList .update{display:flex;justify-content:center;align-items:center;width:84px;height:32px;font-size:12px;text-align:center;border:1px solid #ff5555;border-radius:24px;background:#fff;color:#ff5555;}

@media (max-width:340px) {
    .settingList > dt{padding:14px 18px 8px;}
    .settingList .w{margin:0 18px;padding:12px 0;}
}

/**/
.couponResult{display:flex;flex-wrap:wrap;align-items:center;justify-content: space-between;margin-top:24px;padding-top:24px;border-top:1px solid #d7e2e4;}
.couponResult .price{font-size:16px;font-weight:600;color:#176b55;}
.couponResult .price strong{font-size:20px;}

.disCouponResult{display:flex;flex-wrap:wrap;align-items:center;justify-content: space-between;margin-top:24px;padding-top:24px;border-top:1px solid #d7e2e4;}
.disCouponResult .couponName{font-size:16px;font-weight:600;color:#3273d5;}
.disCouponResult .couponName strong{font-size:20px;}

/**/
.historyList{background:#fff;}
.historyList > li{position:relative;padding:16px 24px;border-bottom:1px solid #d7e2e4;}
/* .historyList > li.approved, .historyList > li.reject, .historyList > li.progress {padding-left:66px;} */
/* .historyList > li.approved:before, .historyList > li.reject:before, .historyList > li.progress:before{position:absolute;display:flex;left:24px;top:50%;width:30px;height:30px;justify-content: center;align-items:center;color:#fff;transform:translateY(-50%);font-size:12px;border-radius:100%;} */
.historyList > li:not(.deposit):not(.cancelComplete):not(.withdraw):not(.cancel):not(.c-withdraw):not(.c-acc){padding-left:24px;margin-top:3px;}
.historyList > li:before {display:flex;left:24px;top:50%;width:62px;height:24px;justify-content: center;align-items:center;text-align:center;vertical-align:middle;color:#fff;line-height:1;transform:translateY(-20%);font-size:12px;border-radius:4px;white-space:pre;margin-top:3px;}

.historyList > li.receipt_request:before {padding-top:1px;background:#4fe0ba;font-size:12px;content:'접수 요청';}
.historyList > li.receipt_complete:before {padding-top:1px;background:#176b55;font-size:12px;content:'접수 완료';}
.historyList > li.dispatch_complete:before {padding-top:1px;background:#000;font-size:12px;content:'배차 완료';}
.historyList > li.driving:before {padding-top:1px;background:#000;color:#70e8a1;font-size:12px;content:'운행 중';}
.historyList > li.driving_complete:before {padding-top:1px;background:#000;color:#fff;font-size:12px;content:'운행 완료';}
.historyList > li.admin_cancel:before {padding-top:3px;background:#E0E0E0;border:1px solid #E0E0E0;color:#333333;font-size:11px;content:'관리자 취소';}
.historyList > li.user_cancel:before {padding-top:3px;background:#E0E0E0;border:1px solid #E0E0E0;color:#333333;font-size:11px;content:'사용자 취소';}
.historyList > li.pay_error:before {padding-top:1px;background:#000;color:#d12828;font-size:12px;content:'결제 미완료';}

.historyList > li .result{display:flex;flex-wrap:wrap;align-items:top;justify-content: space-between;}
.historyList > li .result ~ .result {margin-top:3px;font-size:13px;padding-right:24px;}
.historyList > li .result > *:first-of-type{max-width:160px;padding-right:24px;}
.historyList > li .resultDetail{margin:12px 0;text-align:right;font-size:12px;}
.historyList > li .resultDetail > li:not(:first-of-type){margin-top:4px;}
.historyList > li .resultDetail .name{display:inline-block;padding-right:10px;vertical-align:top;}
.historyList > li.approved .price, .historyList > li.deposit .price{color:#176b55;}
.historyList > li.reject .price, .historyList > li.withdraw .price{color:#ff5555;}
.historyList > li.cancel .price{color:#000;}
.historyList > li.cancelComplete .price{color:#bcbcbc;}
.historyList > li.cancelComplete .price strong{text-decoration: line-through;}
.historyList > li.progress .price{color:#4fe0ba;}

.historyList > li.c-acc .price{color:#ff5555;}
.historyList > li.c-withdraw .price{color:rgb(238, 238, 238);}
.historyList > li .cashback{display:flex;flex-wrap:wrap;align-items:top;justify-content: space-between;}
.historyList > li .cashback ~ .cashback {margin-top:6px;font-size:14px;font-weight:normal;}
.historyList > li .cashback > *:first-of-type{max-width:160px;}
.historyList > li .cashback .date {font-size:12px;}
.historyList > li:after { 
  background: url('/kdtf/common/images/history_arrow.png') no-repeat;
  content: "";
  background-size: 10px auto; /* Adjust the size as needed */
  width: 24px; /* Set the width of the pseudo-element */
  height: 30px; /* Set the height of the pseudo-element */
  margin-right: 5px; /* Spacing between the image and text */
  position: absolute;
  top: 85%;
  right: 0; /* Align to the right */
  transform: translateY(-110%);

}

@media (max-width:340px) {
    .historyList > li{padding:12px 18px;}
/*     .historyList > li.approved, .historyList > li.reject, .historyList > li.progress{padding-left:60px;} */
/*     .historyList > li.approved:before, .historyList > li.reject:before, .historyList > li.progress:before{left:18px;} */
	.historyList > li:not(.deposit):not(.withdraw){padding-left:70px;}
  	.historyList > li:before{left:18px;}
}

/**/
.btnChk{display:flex;flex-wrap:wrap;}
.formLabel + .btnChk{margin-top:6px;}
.btnChk > li {overflow:hidden;flex:0 0 calc(50% - 4px);}
.btnChk > li:nth-of-type(odd) {margin-right: 8px;}
.btnChk > li:nth-of-type(n+3) {margin-top: 12px;}
/* .btnChk > li:nth-child(-n+3){margin-top:0;} */
/* .btnChk > li:nth-child(3n){margin-right:0;} */
.btnChk > li > input[type=checkbox], .btnChk > li > input[type=radio] {position:absolute;display:none;left:-999em;top:-999em;opacity:0;}
.btnChk > li > label, .btnChk.nonChk > li > a{display:flex;justify-content: center;align-items: center;padding:8px;height:42px;border-radius:24px;border:1px solid #979797;color:#979797;font-size:14px;transition:all 0.2s ease;}
/*.btnChk > li > :checked + label, .btnChk.nonChk > li > a.active{border-color:#ff5555;color:#ff5555;}*/
.btnChk > li > :checked + label, .btnChk.nonChk > li > a.active{border-color:#ff5555;background:#ff5555;color:#fff;}
/*.btnChk > li > :checked + label, .btnChk.nonChk > li > a.active{border-color:#ff5555;color:#ff5555;border-width:3px;font-weight:600;}*/

/**/
.switchBtn{position:relative;overflow:hidden;display:flex;}
.switchBtn input{position:absolute;display:none;left:-999em;top:-999em;opacity:0;}
.switchBtn input ~ label{position:relative;overflow:hidden;width:40px;height:24px;background:#d7e2e4;border-radius:24px;border:1px solid #98a6ac;transition:all 0.2s ease;}
.switchBtn input ~ label:before{position:absolute;top:-1px;width:24px;height:24px;margin-left:-1px;border-radius:100%;background:#fff;border:1px solid #98a6ac;transform:translateX(0);transition:all 0.2s ease;content:'';}
.switchBtn :checked ~ label{background:#0cc695;border-color:#176b55;}
.switchBtn :checked ~ label:before{border-color:#176b55;transform:translateX(calc(100% - 8px));}

/*tabs*/
.tabWrap{display:flex;flex-wrap:wrap;padding:0 18px;}
.tabWrap > a{display:flex;justify-content:center;align-items:center;text-align:center;margin-left:3px;padding:0 12px;font-size:14px;background:#fff;color:#98a6ac;border-bottom:4px solid transparent;transition:all 0.2s ease;}
.tabWrap.full{padding:0;}
.tabWrap.full > a{position:relative;flex:1;height:60px;margin-left:0;}
.tabWrap.full > a:not(:first-of-type){padding-left:13px;}
.tabWrap.full > a:not(:first-of-type):before{position:absolute;left:0;top:50%;width:1px;height:22px;transform:translateY(-50%);background:#d7e2e4;content:'';}
.tabWrap > a:first-of-type{margin-left:0;}
.tabWrap > a.active{border-color:#3273d5;color:#3273d5;font-weight:600;}

/**/
.arcodianList {}
.formWrap + .arcodianList{margin-top:30px;}
.arcodianList > .list{overflow:hidden;max-height:50px;border-top:1px solid #d7e2e4;border-bottom:1px solid #d7e2e4;transition:all 0.4s ease;}
.arcodianList > .list.active{max-height:1000px;}
.arcodianList > .list + .list{border-top:none;}
.arcodianList > .list > .button{position:relative;display:block;height:48px;line-height:48px;padding:0 44px 0 24px;word-break:break-all;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.arcodianList > .list > .button:after{position:absolute;right:24px;top:50%;width:0;height:0;border-top:6px solid #000;border-left:5px solid transparent;border-right:5px solid transparent;transform:translateY(-50%) rotate(0);transition:all 0.2s ease;content:'';}
.arcodianList > .list.active > .button{}
.arcodianList > .list.active > .button:after{transform:translateY(-50%) rotate(180deg);}
.arcodianList > .list .content {overflow:hidden;padding:0 24px 16px;word-break:break-all;color:#98a6ac;}
@media (max-width:340px) {
    .arcodianList > .list > .button{padding:0 38px 0 18px;}
    .arcodianList > .list > .button:after{right:18px;}
}

/*board*/
.arcodianBoard {}
.formWrap + .arcodianBoard{margin-top:30px;}
.arcodianBoard > .list{overflow:hidden;border-top:1px solid #d7e2e4;border-bottom:1px solid #d7e2e4;transition:all 0.4s ease;}
.arcodianBoard > .list.active{/*max-height:1000px;*/}
.arcodianBoard > .list + .list{border-top:none;}
.arcodianBoard > .list > .button{
    position:relative;
    display:block;
    box-sizing:content-box;
    overflow:hidden;
    background:#fff;
    max-height:calc(4.2em + 30px);
    padding:15px 44px 15px 24px;
}
.arcodianBoard > .list > .button > p {
    box-sizing:content-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
    line-height: 1.4em;
    max-height: 4.2em;
}
.arcodianBoard > .list > .button:after{position:absolute;right:24px;top:22px;width:0;height:0;border-top:6px solid #000;border-left:5px solid transparent;border-right:5px solid transparent;transform:rotate(0);transition:all 0.2s ease;content:'';}
.arcodianBoard > .list.active > .button{}
.arcodianBoard > .list.active > .button:after{transform:rotate(180deg);}
.arcodianBoard > .list .content {overflow:hidden;padding:0 24px;word-break:break-all;color:#98a6ac;max-height:0;transition:all 0.4s ease;}
.arcodianBoard > .list .content > div {padding-bottom:16px;}
.arcodianBoard > .list.active .content{max-height:1000px;}
/* FAQ 페이지 깨짐. 수정 2020-07-30 peter
@media (max-width:340px) {
    .arcodianBoard > .list > .button{padding:0 38px 0 18px;}
    .arcodianBoard > .list > .button:after{right:18px;}
}
*/

/**/
.buttonList {}
.formWrap + .buttonList{margin-top:30px;}
.buttonList > dt{padding:14px 24px 8px;font-size:12px;background:#f1f6fa;}
.buttonList > .list{overflow:hidden;border-top:1px solid #d7e2e4;border-bottom:1px solid #d7e2e4;transition:all 0.4s ease;}
.buttonList > .list + .list{border-top:none;}
.buttonList > .list > .button{position:relative;display:block;height:58px;padding:0 44px 0 24px;line-height:58px;background:#fff right 16px center / 16px auto url('../images/ico_arrow_right_bold.png') no-repeat;}

@media (max-width:340px) {
    .buttonList > dt{padding:10px 18px 8px;}
    .buttonList > .list > .button{padding:0 38px 0 18px;}
    .buttonList > .list > .button:after{right:18px;}
}

/*mileage*/
.useMileage {position:relative;display:flex;overflow:hidden;align-items:center;justify-content:center;height:48px;margin-bottom:16px;padding:0 8px;border-radius:24px;border:1px solid #d7e2e4;color:#000;background-color:#fff;}
.useMileage.type2 {justify-content:left;margin-bottom:20px;padding:0 8px 0 24px;}
.useMileage:before{padding-right:8px;font-size:12px;color:#000;font-weight:500;content:'잔액';}
.useMileage .cash{font-size:20px;color: #176b55;}
.useMileage .cash:after{padding-left:2px;font-size:16px;font-weight:500;content:'원';}
.useMileage > button{margin-left:auto;width:84px;height:32px;border-radius:24px;background:#176b55;text-align:center;color:#ffe21b;font-size:12px;}

.useMileageCard{margin-top:24px;padding:16px 10px;border-radius:8px;border:1px solid #d7e2e4;background-color:#fff;}
.useMileageCard > .mileage{position:relative;display:flex;overflow:hidden;align-items:center;justify-content:center;margin-bottom:12px;}
.useMileageCard > .mileage:before{padding-right:8px;font-size:12px;color:#000;font-weight:500;content:'잔액';}
.useMileageCard > .mileage .cash{font-size:20px;color: #176b55;}
.useMileageCard > .mileage .cash:after{padding-left:2px;font-size:16px;font-weight:500;content:'원';}
.useMileageCard > .card{display:flex;flex-direction: column;text-align:center;}
.useMileageCard > .card .tit{margin-bottom:2px;color:#98a6ac;}

.cardBtn{position:relative;display:block;overflow:hidden;width:100%;height:48px;padding:0 28px 0 48px;border-radius:24px;font-size:14px;text-align:left;border:1px solid #98A6AC;color:#000;background:#fff right 12px center / 16px auto url('../images/ico_arrow_right.png') no-repeat;}
.cardBtn:before{position:absolute;left:24px;top:50%;width:16px;height:16px;transform:translateY(-50%);content:'';}
.cardBtn.mileage:before{background:left center / 16px auto url('../images/ico_mileage.png') no-repeat;}
.cardBtn.coupon:before{background:left center / 16px auto url('../images/ico_coupon.png') no-repeat;}

.mileageOpt{display:flex;align-items:flex-start;}
.mileageOpt > li{position:relative;flex:1;padding-left:1px;}
.mileageOpt > li:before {position:absolute;left:0;top:50%;width:1px;height:40px;margin-top:-20px;background-color:#d7e2e4;content:'';}
.mileageOpt > li:first-of-type{padding-left:0;}
.mileageOpt > li:first-of-type:before{display:none;}
.mileageOpt > li > a {display:block;padding:45px 5px 5px;text-align:center;font-size:14px;text-align:center;background-size:30px auto;background-position:center 5px;background-repeat:no-repeat;line-height:1.2;}
.mileageOpt > li > a.charge{background-image:url('../images/ico_mileage_charge.png');}
.mileageOpt > li > a.coupon{background-image:url('../images/ico_coupon_add.png');}
.mileageOpt > li > a.withdraw{background-image:url('../images/ico_mileage_withdraw.png');}

.autoUsed{padding:2px 24px;background:#176b55;color:#ffe21b;text-align:center;}
.autoUsed + .content{padding-top:18px;}

.chargeDetail > li{display:flex;overflow:hidden;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:16px 0;}
.chargeDetail > li:not(:first-of-type){border-top:1px solid #d7e2e4;}
.chargeDetail > li .title{max-width:120px;color:#98a6ac;font-weight:normal;}
.chargeDetail > li .cont{text-align:right;}
.chargeDetail > li .cont .name{display:inline-block;vertical-align:top;padding-right:10px;max-width:90px;word-break:break-all;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.chargeDetail > li .cont > p + p{margin-top:12px;}

/*gift*/
.giftWrap{background:#f7f8f8;}
.giftWrap .formWrap{padding:0;}
.giftWrap .prdInfor{margin-bottom:8px;padding:20px 24px;font-size:16px;font-weight:bold;word-break:break-all;background: #fff;}
.giftWrap .prdInfor:before{display:block;margin-bottom:4px;font-size:14px;font-weight:normal;content:'상품명';}
.giftWrap .giftDetail{margin-bottom:8px;padding:20px 24px;background: #fff;}
.giftWrap .giftDetail > li{display:flex;overflow:hidden;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:16px 0;}
.giftWrap .giftDetail > li:not(:first-of-type){border-top:1px solid #d7e2e4;}
.giftWrap .giftDetail > li .title{max-width:85px;color:#98a6ac;font-weight:normal;}
.giftWrap .giftDetail > li .cont{text-align:right;}
.giftWrap .giftDetail > li .cont .name{display:inline-block;vertical-align:top;padding-right:10px;max-width:90px;word-break:break-all;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.giftWrap .giftDetail > li .cont > p + p{margin-top:12px;}
.giftWrap .infor{margin-bottom:8px;padding:24px;background:#fff;}
.giftWrap .infor > .thumb{margin-bottom:16px;}
.giftWrap .infor > .subj{display:flex;flex-wrap:wrap;align-items:center;justify-content: space-between;}
.giftWrap .infor > .subj .price{font-size:16px;font-weight:600;color:#176b55;}
.giftWrap .formField > li{padding:20px 24px !important;background:#fff;}
.giftWrap .formField > li.msg{padding-top:0 !important;padding-bottom:0 !important;}
.giftWrap .formField > li + li:not(.msg){margin-top:8px;}

@media (max-width:340px) {
    .giftWrap .prdInfor{padding:14px 18px;}
    .giftWrap .giftDetail{padding:14px 18px;}
    .giftWrap .infor{padding:18px;}
    .giftWrap .formField > li{padding:14px 18px !important;}
}

.giftUser > .head{display:flex;align-items:center;padding-bottom:10px;border-bottom:1px solid #d7e2e4;}
.giftUser > .head .tit{font-size:14px;font-weight:normal;}
.giftUser > .head .giftAdd{margin-left:auto;background:none;border:none;font-size:16px;color:#176b55;}

.giftList > li{position:relative;padding:20px 50px 20px 28px;border-bottom:1px solid #d7e2e4;}
.giftList > li .listDel, .giftList > li .bookSync{position:absolute;top:50%;transform:translateY(-50%);}
.giftList > li .listDel{left:0;width:20px;height:20px;background:#fff center center / 20px auto url('../images/ico_delete.png') no-repeat;}
.giftList > li .bookSync{right:0;width:42px;height:42px;padding-top:24px;text-align:center;color:#98a6ac;font-size:11px;background:#fff center 4px / 20px auto url('../images/ico_addressbook.png') no-repeat;}
.giftList > li:first-child:nth-last-child(1) .listDel{display:none;}
.giftList > li .formGroup input + input {flex:0 0 55% !important;margin-left:8px;}

/**/
.withdrawalWrap{background:#f1f6fa;}
.withdrawalWrap > *{background:#fff;}
.withdrawalWrap .userInfor{padding:16px 0;border-top:1px solid #d7e2e4;}
.withdrawalWrap .userInfor > li{display:flex;overflow:hidden;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:4px 0;}
.withdrawalWrap .userInfor > li .title{max-width:85px;color:#98a6ac;font-weight:normal;}
.withdrawalWrap .userInfor > li .cont{max-width:200px;text-align:right;}

/*myinfo*/
.myInfor{padding:22px 0;}
.myInfor .infor{display:flex;justify-content:space-between;flex-wrap:wrap;font-size:20px;}
.myInfor .logout{display:flex;justify-content:center;align-items:center;width:84px;height:32px;font-size:12px;text-align:center;border:1px solid #98a6ac;border-radius:24px;background:#fff;}
.myInfor .infor .tel{color:#176b55;}
.myInfor .shield{display:inline-block;padding-right:18px;padding-left:7px;color:#ff5555;background:right center / 16px auto url('../images/ico_arrow_right_red.png') no-repeat;}
.myInfor .infor + .badge, .myInfor .infor + .shield{margin-top:10px;}

/*mycard*/
.myCard {position:relative;max-width:300px;height:168px;margin:0 auto 24px;background:#176b55;color:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.2);}
.myCard:before{position:absolute;left:20px;top:28px;width:112px;height:22px;background:center center / auto 22px url('../images/logo2.png') no-repeat;content:'';}
.myCard:after{position:absolute;right:24px;top:24px;width:55px;height:43px;background:center center / auto 43px url('../images/logo1.png') no-repeat;content:'';}
.myCard + *{border-top:1px solid #d7e2e4;}
.myCard .cardNum{position:absolute;left:20px;bottom:20px;}
.myCard .cardNum .title{font-size:12px;}
.myCard .cardNum .num{font-size:16px;color:#ffe21b;}
@media (max-width:340px) {
    .myCard {margin:0 auto 20px;}
}

/**/
.policy{}
.policy + .policy{margin-top:30px;}
.policy > dt{font-size:16px;font-weight:600;word-break:break-all;}
.policy > dd{font-size:14px;margin-top:15px;word-break:break-all;}
.policy > dd > p:not(:first-of-type){margin-top:8px;}

/* completeMsg */
.completeMsg{padding:40px 0;}
.completeMsg .icon{position:relative;display:block;overflow:hidden;width:34px;height:34px;margin:0 auto;border-radius:100%;}
.completeMsg .icon span{position:absolute;display:block;height:3px;background:#fff;border-radius:2px;animation-name:iconBar;animation-duration:0.5s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);}
.completeMsg .icon span:first-of-type{left:10px;bottom:16px;max-width:11px;transform:rotate(50deg);transform-origin:left top;animation-delay:0.8s;}
.completeMsg .icon span:last-of-type{right:20px;bottom:11px;max-width:16px;transform:rotate(130deg);transform-origin:right bottom;animation-delay:1s;}
.completeMsg .icon:before{display:block;overflow:hidden;width:100%;height:100%;background:#176b55;border-radius:100%;transform:scale(0);animation-name:iconCircle;animation-duration:0.5s;animation-delay:0.3s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);content:'';}
.completeMsg .msg{margin-top:8px;text-align:center;font-size:18px;}
.completeMsg .submsg{margin-top:16px;text-align:center;font-size:12px;}

/* failMsg */
.failMsg{padding:40px 0;}
.failMsg .icon{position:relative;display:block;overflow:hidden;width:34px;height:34px;margin:0 auto;border-radius:100%;}
.failMsg .icon span{position:absolute;display:block;height:3px;background:#fff;border-radius:2px;animation-name:iconBar;animation-duration:0.5s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);}
.failMsg .icon span:first-of-type{left:10px;bottom:22px;max-width:22px;transform:rotate(45deg);transform-origin:left top;animation-delay:0.8s;}
.failMsg .icon span:last-of-type{right:10px;top:9px;max-width:22px;transform:rotate(315deg);transform-origin:right top;animation-delay:0.8s;}
.failMsg .icon:before{display:block;overflow:hidden;width:100%;height:100%;background:#FF5555;border-radius:100%;transform:scale(0);animation-name:iconCircle;animation-duration:0.5s;animation-delay:0.3s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);content:'';}
.failMsg .msg{margin-top:10px;text-align:center;font-size:18px;}
.failMsg .submsg{margin-top:16px;text-align:center;font-size:12px;color:#98a6ac;font-weight:normal;font-size: 14px;}

.failMsg .submsg .errMsg{
	color: #000;
    padding: 4px 16px;
    background: #f1f6fa;
    width: 100%;
    margin: 12px auto 24px;
}

@keyframes iconCircle {
    from {
        transform:scale(0);
    }
    to {
        transform:scale(1);
    }
}
@keyframes iconBar {
    from {
        width:0;
    }
    to {
        width:100%;
    }
}

/*btns*/
.btns_g{display:block;overflow:hidden;width:100%;height:48px;padding:0 10px;border-radius:4px;font-size:14px;text-align:center;border:1px solid #000;color:#000;background-color:#fff;background-repeat:no-repeat;background-position:center center;word-break:break-all;}
a.btns_g{display:flex;justify-content: center;align-items: center;}
.btns_g.min{height:32px;font-size:13px;}
.btns_g.submit{background-color:#176b55;border-color:#176b55;color:#ffe21b;font-size:16px;font-weight:600;}
.btns_g.login{background-color:#176b55;border-color:#176b55;color:#ffe21b;font-size:16px;font-weight:600;}
.btns_g.kakao{background-color:#f7cf46;border-color:#f7cf46;color:#381f1f;}
.btns_g.kakao:before{display:inline-block;width:20px;height:18px;margin-right:8px;vertical-align:text-bottom;background:center center / cover url('../images/ico_kakao.png') no-repeat;content:'';}
.btns_g.type1{background-color:#176b55;border-color:#176b55;color:#fff;}/**/ 
.btns_g.type2{border-color:#d7e2e4;color:#1b2727;}/**/ 
.btns_g.type3{background-color:#fff;border-color:#176b55;color:#176b55;}
.btns_g.PaycardManage{background-color:#3273d5;border-color:#3273d5;color:#fff;}
.btns_g.PaycardManage:before{display:inline-block;width:20px;height:18px;margin-right:8px;vertical-align:text-bottom;background:center center / cover url('') no-repeat;}

/*font-color*/
.fc_type1{color:#176b55 !important;}
.fc_type2{color:#ffe21b !important;}/**/ 
.fc_type3{color:#ff5555 !important;}/**/
.fc_type4{color:#381f1f !important;}/*카카오 로그인용*/  
.fc_type5{color:#3273d5 !important;}/*HDM, SINSA*/  

/**/
.fs_12{font-size:12px !important;}
.fs_14{font-size:14px !important;}
.fs_16{font-size:16px !important;}
.fs_18{font-size:18px !important;}
.fs_20{font-size:20px !important;}

/*title*/
.mainTitle{text-align:center;padding:12px 24px;font-size:14px;color:#176b55;border-bottom:1px solid #d7e2e4;background:#fff;}
.mainTitle.nbg { background:#fff; border-bottom: 1px solid #e0e9eb; color: #3e82f4; }
.mainTitle + * {border-top:none !important;}

/*etcmsg*/
.botMsg{padding-top:32px; text-align:center;}
.botMsg a{border-bottom:1px solid #000;}
.formField + .botMsg{padding-top:8px;}
.subMsg{padding:10px 20px;text-align:center;font-size:12px;background:#f1f6fa;}

/*badge*/
.badge {display:inline-block;padding:3px 10px;font-size:12px;background:#fff;border:1px solid #000;border-radius:2px;}
.badge.kakao{background-color:#f7cf46;border-color:#f7cf46;color:#381f1f;}
.badge.apple{background-color:#000000;border-color:#000000;color:#ffffff;}
.badge.unlinked{background-color:#98a6ac;border-color:#98a6ac;color:#ffffff;}

/*sysmodal*/
.sysModal{position:fixed;z-index:100;left:0;top:0;right:0;bottom:0;visibility:hidden;pointer-events:none;touch-action: manipulation;}
.sysModal:before{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);opacity:0;transition:all 0.3s ease;content:'';}
.sysModal .modalWrap{position:fixed;left:50%;top:50%;width:312px;height:auto;padding-bottom:52px;transform:translate3d(-50%, calc(-50% - 30px), 0);opacity:0;transition:all 0.3s ease;}
.sysModal.show{display:block;visibility: visible;pointer-events:all;}
.sysModal.show:before{opacity:1;}
.sysModal.show .modalWrap{opacity:1;/*transform:translate3d(-50%, -50%, 0);*/}
.sysModal .content{position:relative;padding:24px 30px;}
.sysModal .content > .title{margin-bottom:16px;font-size:16px;font-weight:600;word-break:break-all;}
.sysModal .content > .msg{word-break:break-all;}
.sysModal .btn_wrap{position:absolute;display:flex;left:0;right:0;bottom:0;width:100%;}
.sysModal .btn_wrap button{display:block;width:100%;height:52px;background:#176b55;color:#fff;font-weight:500;font-size:16px;}
.sysModal .btn_wrap button.type1{background:#fff;border-top:1px solid #d7e2e4;color:#000;}

/*200915 Ayaan 서비스상세내역*/
.historyDetail{background:#f1f6fa;padding:12px 0;}
.historyDetail > li{position:relative;padding:12px 24px 12px 66px;}
.historyDetail > li:before{position:absolute;display:block;left:31px;top:50%;width:10px;height:10px;background-color:#fff;border:1px solid #000;transform:translateY(-50%);font-size:0;border-radius:100%;content:'';}
.historyDetail > li:first-of-type:before{background-color:#ffe21b;}
.historyDetail > li:not(:first-of-type):after {position:absolute;left:35px;top:-10px;width:1px;height:20px;background-color:#d7e2e4;content:'';}
.historyDetail > li .result{display:flex;flex-wrap:wrap;align-items:top;justify-content: space-between;}
.historyDetail > li .result ~ .result {margin-top:2px;font-size:12px;font-weight:normal;}
.historyDetail > li .result > *:first-of-type{max-width:120px;}
.historyDetail > li .resultDetail{margin:12px 0;text-align:right;font-size:12px;}
.historyDetail > li .resultDetail > li:not(:first-of-type){margin-top:4px;}
.historyDetail > li .resultDetail .name{display:inline-block;padding-right:10px;vertical-align:top;}
.historyDetail > li .price{color:#176b55;}
.historyDetail > li .cancel{}
.historyDetail > li .cancel a{color:#ff5555;text-decoration:underline;}

.historyInfor {padding:20px 0;}
.historyInfor > dt {margin-bottom:4px;font-size:16px;font-weight:700;}
.historyInfor > dd{display:flex;overflow:hidden;align-items:flex-start;flex-wrap:wrap;padding:16px 0;}
.historyInfor > dd:not(:first-of-type){border-top:1px solid #d7e2e4;}
.historyInfor > dd .title{max-width:100px;padding-right:8px;font-weight:500;color: #828282;font-size: 14px;line-height:20px;}
.historyInfor > dd .cont{flex:1;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

@media (max-width:340px) {
    .historyDetail > li{padding:10px 18px 10px 60px;}
    .historyDetail > li:before{left:28px;}
    .historyDetail > li:not(:first-of-type):after {left:32px;}
}

/*20201111 Ayaan 현황판*/
#wrap.status {height:100%;padding-bottom:52px;padding-bottom: 0;}
#wrap.status .content {display:flex; flex-direction: column; overflow:hidden;height:100%; padding: 0; }
#wrap.status .tabWrap { position: relative; z-index: 2; background: #fff; border-bottom: 1px solid #d7e2e4; }
.nowDriving { position: relative; z-index: 2; height: auto; padding: 18px 24px; background: #fff; }
.drivingRoute {}
.drivingRoute > li { display: flex; align-items: center; padding: 4px 0; }
.drivingRoute .step { position: relative; color: #3273d5; padding-right: 11px; margin-right: 10px; }
.drivingRoute .step:after { position: absolute; right:0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: #3273d5; content: '';}
.drivingRoute .route { flex: 1; word-break:break-all;text-overflow:ellipsis;word-wrap:normal;overflow:hidden; }
.drivingInfor {}
.drivingInfor > li:not(:first-child) {padding: 0;}
.drivingInfor > li { display: flex; align-items: center; padding: 6px 0; }
.drivingInfor .price {}
.drivingInfor .distance { margin-left: auto; color: #77889c; }
.drivingInfor .number {}
.drivingInfor .cancel { margin-left: auto; }
.statusWrap { display: none; flex: 1; margin:0 24px; padding:18px 0; }
.statusWrap.active { display: flex; }
.statusMsgWrap { display: flex; flex:1; flex-direction: column; justify-content: flex-start; align-items: center;}
.statusStepWrap {position:relative;z-index:2;display:flex;flex: 1;width:140px;flex-direction: row;justify-content: flex-end;align-items: baseline;}
.callAnimateWrap {position:relative;z-index:1;width:110px;height:110px;margin:20px 0 20px 30px; border-radius:100%;}
.callAnimateWrap:before {position:absolute;left:0;top:0;right:0;bottom:0;transform:scale(1);background:#C7D3F8;opacity:0.5;border-radius:100%;animation-name:callAnimateFrame;animation-duration:1.5s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);content:'';}
.callAnimateWrap.contact:before {animation-name:contactAnimateFrame;animation-iteration-count:1;animation-duration:0.8s;}
.callAnimateWrap .innerAnimate {position:relative;width:100%;height:100%;border-radius:100%;background:#4770EA center center / 32px auto url('../images/ico_serching.png') no-repeat;}
.callAnimateWrap.contact .innerAnimate {background:#4770EA center center / 32px auto url(/kdtf/common/images/ico_searching_complete_hdm.png) no-repeat;}
.stepMsg {position:relative;z-index:2;font-size:18px;line-height:1.5;}
.feeBtnBox {position:relative;z-index:2;margin-top:18px;}
.btnChangeFee {width:125px;height:42px;border:1px solid #98a6ac;border-radius:20px;background:#fff;text-align:center;}
.statusStep {margin-bottom:20px;}
.statusStep > li{position:relative;padding:8px 24px 8px 42px;font-size:14px;color:#d7e2e4;font-weight:700;}
.statusStep > li:before{position:absolute;display:block;left:15px;top:50%;width:10px;height:10px;background-color:#fff;border:1px solid #98a6ac;transform:translateY(-50%);font-size:0;border-radius:100%;content:'';}
.statusStep > li:not(:first-of-type):after {position:absolute;left:17px;top:-2px;width:0;height:0;border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #d7e2e4;content:'';}
.statusStep > li.active {color:#ff5555;}
.statusStep > li.active:before{background-color:#ffe21b; border-color: #000;}
.statusStep > li.active ~ li {color:#000;}
.statusStep > li.active ~ li:before {border-color: #000;}
.btnCallCancel {margin-bottom:auto;margin-left:auto;font-size:16px;font-weight:700;/*border-bottom:1px solid #000;*/background:transparent;}
.fixBtn .driverContact {background:#ff5555;}
.fixBtn .driverContact:disabled {background: #98a6ac;}
.modalFee .btn_wrap button:first-of-type {flex:0 0 112px;}
.modalFee .content {padding:0;}
.modalFee .useMileage {justify-content:left;height:56px;margin-bottom:0;padding:0 20px;border-radius:0;}
.modalFee .useMileage:before{display:flex;justify-content:center;align-items:center;width:20px;height:20px;margin-right:8px;padding:0;text-align:center;background:#98a6ac;border-radius:100%;color:#fff;font-weight:500;content:'M';}
.modalFee .useMileage a.under {margin-left:auto;font-size:16px;}
.modalFee .feeWrap {padding:28px 20px;}
.modalFee .feeWrap .section {position:relative;}
.modalFee .feeWrap .section + .section {padding-top:25px;}
.modalFee .feeWrap .section + .section:before {position:absolute;left:50%;top:8px;width:0;height:0;margin-left:-10px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 9px solid #98a6ac;content:'';}
.modalFee .feeWrap .tit {margin-bottom:10px;text-align:center;font-size:16px;}
.modalFee .feeWrap .fee {position:relative;display:flex;justify-content:center;align-items:center;height:38px;padding:0 45px;text-align:center;font-size:26px;font-weight:700;}
.modalFee .feeWrap .fee.changed_fee {color:#ff5555;}
.modalFee .feeWrap .fee:after {padding-left:4px;content:'원';}
.modalFee .feeWrap .feeBtn {position:absolute;overflow:hidden;top:50%;width:30px;height:30px;margin-top:-15px;border:2px solid #ff5555;background:#fff;border-radius:100%;}
.modalFee .feeWrap .feeBtn:before, .modalFee .feeWrap .feeBtn:after {position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:#ff5555;}
.modalFee .feeWrap .feeBtn.minus {left:15px;}
.modalFee .feeWrap .feeBtn.plus {right:15px;}
.modalFee .feeWrap .feeBtn.minus:before {content:'';}
.modalFee .feeWrap .feeBtn.plus:before {content:'';}
.modalFee .feeWrap .feeBtn.plus:after {transform:rotate(90deg);content:'';}

/*20201209 결제페이지*/
.paymentView{}
.paymentView > .wrap{padding:18px 24px;background:#fff;}
.paymentView > .wrap + .wrap{border-top:1px solid #d7e2e4;}
.paymentView > .wrap:last-child {padding-bottom:0;}

.paymentView .payBox {}
.paymentView .payBox + .payBox {margin-top:24px;}

.paymentView .payBox.multi {display:flex;align-items:center;font-size:16px;}
.paymentView .payBox.multi > dt {padding-right:24px;}
.paymentView .payBox.multi > dt strong{font-weight:700;}
.paymentView .payBox.multi > dd {flex:1;text-align:right;}

.paymentView .payBox.single {font-size:16px;}
.paymentView .payBox.single > dt {margin-bottom:16px;}
.paymentView .payBox.single > dt strong{font-weight:700;}
.paymentView .payBox.single > dd {overflow:hidden;}

.paymentView .payBox.tops {padding-top:18px;border-top:1px solid #d7e2e4;}

.paymentView .fee {position:relative;float:right;display:flex;justify-content:center;align-items:center;min-width:178px;height:28px;padding:0 38px;text-align:center;font-size:18px;font-weight:700;}
.paymentView .fee .value, .paymentView .fee:after {line-height:1;}
.paymentView .fee:after {padding-left:4px;content:'원';}
.paymentView .fee.mileage_fee:after {content:'점';}
.paymentView .feeBtn {position:absolute;overflow:hidden;top:50%;width:28px;height:28px;margin-top:-14px;background:#3273d5;border-radius:100%;}
.paymentView .feeBtn:before, .paymentView .feeBtn:after {position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:#fff;}
.paymentView .feeBtn.minus {left:0;}
.paymentView .feeBtn.plus {right:0;}
.paymentView .feeBtn.minus:before {content:'';}
.paymentView .feeBtn.plus:before {content:'';}
.paymentView .feeBtn.plus:after {transform:rotate(90deg);content:'';}

.paymentView .price {font-size:20px;font-weight:600;}
.paymentView .price.before {color:#3273d5;}
.paymentView .price.after {color:#ff5555;}

.paymentView .tabList {display:flex;flex-wrap:wrap;}
.paymentView .tabList > li{overflow:hidden;flex:1;margin-left:12px;/*margin-top:6px;*/}
.paymentView .tabList > li:first-of-type {margin-left:0;}
/*.paymentView .tabList > li:nth-child(-n+3){margin-top:0;}
.paymentView .tabList > li:nth-child(3n){margin-right:0;}*/
.paymentView .tabList > li > a{display:flex;justify-content: center;align-items: center;padding:8px;height:42px;border-radius:24px;border:1px solid #3273d5;color:#3273d5;font-size:16px;transition:all 0.2s ease;box-sizing:border-box;}
.paymentView .tabList > li > a.active{background:#3273d5;;color:#fff;}

.paymentView #easePay {}
.paymentView #normalPay {display:none;}
.paymentView .addCard {display:block;min-height:24px;padding-right:24px;line-height:23px;;font-size:16px;background:right center / 16px auto url('../images/ico_arrow_right_bold.png') no-repeat;}
.paymentView .payList {display:none;overflow:hidden;margin-top:24px;}
.paymentView .payList > li {float:left;}
.paymentView .payList > li:not(:first-of-type) {float:left;margin-left:50px;}
.paymentView .payList input[type=radio]{position:absolute;display:none;left:-999em;top:-999em;opacity:0;}
.paymentView .payList .payLabel {position:relative;display:block;min-height:24px;/*margin-top:4px;*/padding-left:24px;line-height:23px;font-size:16px;}
.paymentView .payList .payLabel:before{position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;border:1px solid #000;border-radius:100%;transition:all 0.2s ease;content:'';}
.paymentView .payList input[type=radio] + .payLabel:after{position:absolute;left:3px;top:50%;width:10px;height:10px;margin-top:-5px;background:#3273d5;border-radius:100%;transition:all 0.1s ease;transform:scale(0);content:'';}
.paymentView .payList input:checked + .payLabel{}
.paymentView .payList input[type=radio]:checked + .payLabel:after{transform:scale(1);}

.paymentView .btnBox {margin-top:24px;}
.paymentView .btnBox .btnSubmit {display:block;width:100%;height:48px;text-align:center;background:#3273d5;color:#fff;font-weight:500;font-size:16px;border-radius:4px;}

@media (max-width:340px) {
    .paymentView > .wrap{padding:16px 18px;}
}

@keyframes callAnimateFrame {
    from {
      opacity:0.5;
      transform:scale(1);
    }
    to {
      opacity:0;
      transform:scale(20);
    }
}

@keyframes contactAnimateFrame {
  from {
      transform:scale(1);
  }
  to {
    transform:scale(1.5);
  }
}


@media (max-width:340px) {
    .nowDriving { padding: 12px 18px;}
    .drivingRoute > li { padding: 4px 0; }
    .drivingInfor > li { display: flex; align-items: center; padding: 4px 0; }
    .callAnimateWrap {margin: 20px 0 40px; border: 8px solid #9ABBFF;}
    .stepMsg {font-size:16px;}
    .statusWrap { margin: 0 18px; padding:12px 0; }
    .statusStep {margin-bottom:10px;}
    .statusStep > li{padding:6px 24px 6px 42px;}
    .feeBtnBox { margin-top: 16px; }
}

/*210117 cashback added*/
.cashbackHead {padding: 16px 24px; border-bottom: 1px solid #d7e2e4;}
.cashbackHead .title {font-size: 12px;}
.cashbackHead .nowCash {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cashbackHead .nowCash .amount {font-size: 24px; line-height: 32px;}
.cashbackHead .nowCash strong {font-weight: 700; color: #ff5555;}
.cashbackHead .nowCash .btnWithdraw {height: 32px; padding:0 18px; background-color: #000; color: #fff; text-align: center; font-size: 12px; border-radius: 24px;}
.cashbackHead .msg {color:#98a6ac; font-size: 12px; letter-spacing: -0.5px;}

.cashbackBox{margin-top:24px;padding:16px 10px;border-radius:8px;border:1px solid #d7e2e4;background-color:#fff;}
.cashbackBox > .cashback{position:relative;display:flex;overflow:hidden;align-items:center;justify-content:center;}
.cashbackBox > .cashback:before{padding-right:8px;font-size:12px;color:#000;font-weight:500;content:'캐시백 잔액';}
.cashbackBox > .cashback .amount{font-size:20px;color:#3273d5;}
.cashbackBox > .cashback .amount:after{padding-left:2px;font-size:16px;font-weight:500;content:'원';}

@media (max-width:340px) {
    .cashbackHead {padding: 12px 18px;}
}

/* 210707 Peter No History List */  
.noHistoryList{
 	text-align: center;
  	background-color: #f1f6fa;
}  
.noHistoryList li{
   position: absolute;
   width: 100%;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);	
   font-size: 16px;	
}

/**/
.paymentCard {}

.paymentCard .paycardList {overflow:hidden;}
.paymentCard .paycardList > li {border-bottom:1px solid #d7e2e4;background:#fff;transform:scale(1);box-shadow:none;transition:transform 0.1s ease;}
.paymentCard .paycardList > li.ui-sortable-helper {position:relative;z-index:1000;box-shadow:0 0 8px 1px rgba(0, 0, 0, 0.1);transform:scale(1.05);}
.paymentCard .paycardList > li.ui-sortable-placeholder {background:#f1f6fa;visibility:visible !important;}
.paymentCard .paycardList > li .cardBox {display:flex; align-items:center; padding:12px 16px;}
.paymentCard .paycardList > li .cardThumb {overflow:hidden;width:82px;height:52px;border-radius:4px;background-size:cover;background-repeat:no-repeat;background-position:center center;border:1px solid #d7e2e4;}
.paymentCard .paycardList > li .cardData {position:relative;flex:1;overflow:hidden;margin-left:16px;}
.paymentCard .paycardList > li .cardName {display:flex;align-items:center;margin-bottom:2px;}
.paymentCard .paycardList > li .cardName .name {position:relative;display:inline-block;max-width:100%;height:20px;line-height:20px;padding-right:40px;font-size:16px;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;box-sizing:border-box;}
.paymentCard .paycardList > li:first-of-type .cardName .name:after{position:absolute;display:inline-flex;align-items:center;justify-content:center;right:0;top:0%;width:52px;height:20px;text-align:center;background:#ff5555;color:#fff;font-size:11px;border-radius:16px;content:'대표카드';}
.paymentCard .paycardList > li .cardNo {padding-right:40px;color:#98a6ac;max-width:100%;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;box-sizing:border-box;}
.paymentCard .paycardList > li .btnDelete {position:absolute;right:0;bottom:1px;background:transparent;border:none;font-size:12px;text-decoration:underline;}

.paymentCard .msg {padding:16px 24px;color:#98a6ac;line-height:1.5;}


/**/
/* 210701 수정 */
.cardAdded {}
.cardAdded .addedHead {display: flex; align-items: flex-end; margin-bottom: 6px; font-size:14px;}
.cardAdded .title {display: flex; align-items: center; margin-right: auto;}
.cardAdded .title > .tit {}
.btnBusinessCard {margin-left: auto; padding-left: 24px; color: #77889c; background: left center / 20px auto url('/kdtf/assets/img/common/chk_blank.png') no-repeat;}
.btnBusinessCard.active {color: #3e82f4; background: left center / 20px auto url('/kdtf/assets/img/common/chk_active.png') no-repeat;}
.cardAdded .cardThumb {overflow:hidden;width:40px;height:26px; margin-right: 6px; background-size:cover;background-repeat:no-repeat;background-position:center center;}
.cardAdded .cardThumb.hidden{display: none;}
.cardAddForm {}
.cardAddForm > li {visibility: visible; opacity: 1; transition: all 0.2s ease;}
.cardAddForm > li.hidden {visibility: hidden; opacity: 0;}
/* .cardAddForm > li + li {margin-top:16px;} */
/* .cardAddForm > li + li:not(:last-child) {margin-top: -1px;} */
.cardAddForm .line {display:flex;}
.cardAddForm .group:not(.btnWrap) {position:relative;display: flex; align-items: center; flex:1; height:48px;padding-left:12px;/*padding-left: 76px;*/padding-right:12px;box-sizing:border-box;/*border:1px solid #d7e2e4;*/border: 1px solid #000;transition: all 0.2s ease;}
.cardAddForm > li + li .group:not(.btnWrap) {border-top: none;}
.cardAddForm > li:last-child {margin-top: 20px;}
.cardAddForm .group.npl {padding-left: 12px;}
.cardAddForm .group.complete {border-color:#000;}
/* .cardAddForm .group.error {border-color:#ff5555 !important;} */
.cardAddForm .group + .group {/*margin-left: 12px;*/border-left: none;}
.cardAddForm .msg {margin-top:6px;font-size:12px;}
.cardGroup {display: flex;height:100%;}
.cardGroup .nums {position:relative;flex:1;padding-left:18px;}
.cardGroup .nums:first-child {padding-left: 0;}
.cardGroup .nums:not(:first-child):before {position:absolute;left:0;top:0;width:18px;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;content:'-';}
.cardGroup .input {text-align:center; font-size: 16px;}
.cardGroup .input[type=password] {font-size:16px;}
.cardAddForm .group .label {display:flex;align-items:center;justify-content:center;left:0;top:0;/*width:76px;*/padding-right: 16px; height:100%;text-align:center;font-size: 12px;}
.cardAddForm .group.error .label {color:#ff5555;}
.cardAddForm .group .input {flex: 1;width:100%;height:100%;border:none;padding:0;background:none;box-shadow:none !important; font-size: 16px;}
.cardAddForm .group.error .input {color:#ff5555;}

/* 시스템 점검 중 */
.error-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    font-weight: 700;
    font-size: 16px;
    color: #FF4B4B;
    background-color: rgba(255, 75, 75, 0.2);
}
.error-head:before {
    width: 22px;
    height: 22px;
    margin-right: 4px;
    background: center center / 22px auto url('../images/ico_negative.png') no-repeat;
    content: '';
}

.cnt-call-wrap {
    padding: 12px 0;
}
.cnt-call-wrap__chara-thumb {
    display: block;
    width: 240px;
    margin: 0 auto 20px;
}
.cnt-call-wrap__msg-wrap {
    margin-bottom: 20px;
    text-align: center;
    font-size: 22px;
}
.cnt-call-wrap__msg-line {
    padding: 3px 0;
    line-height: 1;
}
.cnt-call-wrap__msg-line strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 10px;
    border: 2px solid #3F82F4;
    color: #3F82F4;
    font-weight: 700;
    border-radius: 100px;
}
.cnt-call-wrap__msg-line .ico-fast {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: center center / 20px auto url('../images/ico_fast.png') no-repeat;
}

.cnt-call-btn-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 206px;
    height: 206px;
    margin: 0 auto;
}
.cnt-call-btn-wrap:before {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #3F82F4;
    opacity: 0.1;
    border-radius: 100%;
    content: '';
}
.cnt-call-btn-wrap:after {
    position: absolute;
    z-index: 2;
    left: 19px;
    right: 19px;
    top: 19px;
    bottom: 19px;
    background-color: #3F82F4;
    opacity: 0.2;
    border-radius: 100%;
    content: '';
}
.cnt-call-btn-wrap__btn-call {
    position: relative;
    z-index: 3;
    display: block;
    width: 132px;
    height: 132px;
    padding: 6px;
    border-radius: 100%;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(97,152,245,1) 0%, rgba(59,116,214,1) 100%);
}
.cnt-call-btn-wrap__btn-call span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #3F82F4;
    border-radius: 100%;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}
.cnt-call-btn-wrap__btn-call span:before {
    width: 38px;
    height: 38px;
    background: center center / 38px auto url('../images/ico_fast_w.png') no-repeat;
    content: '';
}

/* 230106 my page */
.close-button {
    background: right center / 26px auto url('/kdtf/common/images/ico_mp_cancel.png') no-repeat;
    width: 26px;
    height: 26px;
    position: absolute;
    right: 30px;
    top: 14px;
}
.mypage {}
.mypage__section {
    padding: 0 24px;
}
.mypage__section:not(:first-child) {
    border-top: 10px solid #F0F3FB;
}

/* */
.mypage__section.top {
    padding-top: 16px;
    padding-bottom: 16px;
}
.mypage__section.top .user-name {
    display: inline-block;
    padding-right: 20px;
    font-size: 18px;
    color: #333;
    background: right center / 20px auto url('../images/ico_n_arrow_r.png') no-repeat;
}
.mypage__section.top .user-name strong {
    font-size: 20px;
    font-weight: 700;
}
.mypage__section.top .user-point {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}
.mypage__section.top .point-title {
    font-size: 14px;
    color: #333;
}
.mypage__section.top .now-point {
    font-size: 16px;
    padding-right: 20px;
    color: #333;
    background: right center / 20px auto url('../images/ico_n_arrow_r.png') no-repeat;
}
.mypage__section.top .now-point strong {
    font-size: 22px;
    color: #3E82F4;
    margin-right: 4px;
}
.mypage__section.top .point-msg {
    margin-top: 10px;
    color: #828282;
    font-size: 12px;
}
.mypage__section.point {
    padding: 16px 0 0;
}
.mypage__section.point .reward-list {
    display: flex;
}
.mypage__section.point .reward-wrap {
    padding: 0 24px;
}
.mypage__section.point .reward-wrap.cash {
    flex: 4;
    padding-right: 10px;
    border-right: 1px solid #f2f2f2;
}
.mypage__section.point .reward-wrap.coupon {
    flex: 2.5;
    padding-left: 20px;
}
.mypage__section.point .reward-title {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-bottom: 4px;
    padding-right: 20px;
    font-size: 14px;
    color: #333;
    background: right center / 20px auto url('../images/ico_n_arrow_r.png') no-repeat;
}
.mypage__section.point .reward-wrap .ico {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    margin-right: 6px;
}
.mypage__section.point .reward-wrap.cash .ico {
    background: right center / 20px auto url('../images/ico_n_cash.png') no-repeat;
}
.mypage__section.point .reward-wrap.coupon .ico {
    background: right center / 22px auto url('../images/ico_n_coupon.png') no-repeat;
}
.mypage__section.point .reward-count {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}
.mypage__section.point .reward-btns {
    margin-top: 14px;
}
.mypage__section.point .reward-btns .btns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #333;
    color: #333;
    font-size: 14px;
    border-radius: 62px;
}

.mypage__section.point .reward-btns .btns.charge {
    margin-left: 2px;
    color: #3E82F4;
    border-color: #3E82F4;
}
.mypage__section.point .easy-pay {
    display: flex;
    align-items: center;
    height: 70px;
    margin-top: 24px;
    padding: 0 56px 0 24px;
    border-top: 1px solid #f2f2f2;
    background: right 24px center / 20px auto url('../images/ico_n_arrow_r.png') no-repeat;
}
.mypage__section.point .easy-pay .ico {
    width: 28px;
    height: 28px;
    margin-right: 6px;
    background: center center / 28px auto url('../images/ico_n_card.png') no-repeat;
}
.mypage__section.point .easy-pay .title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.mypage__section.point .easy-pay .msg {
    margin-left: auto;
    font-size: 14px;
    color: #ff766d;
}

/* */
.mypage__section.quick {
    padding: unset;
}
.mypage__section.quick .quick-wrap {
    display: flex;
    padding: 12px 24px;
}
.mypage__section.quick .quick-wrap-second {
    display: flex;
    padding: 12px 24px;
    border-top: 1px solid #f2f2f2;
}
.mypage__section.quick .quick-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 90px;
}
.mypage__section.quick .quick-item.call-driver{
    flex-direction: unset;
    border-top: 1px solid #f2f2f2;
    height: 68px;
    margin: 0 -24px;
}
.mypage__section.quick .quick-item.new:before {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -24px;
    background: #ff5555;
    border-radius: 100%;
    content: '';
}
.mypage__section.quick .quick-item i {
    width: 36px;
    height: 36px;
    flex: 1;
    /*margin-bottom: 6px;*/
}
.mypage__section.quick .quick-item i.gift {
    background: center center / 36px auto url('/kdtf/common/images/ico_mp_gift.png') no-repeat;
}
.mypage__section.quick .quick-item i.event {
    background: center center / 36px auto url('/kdtf/common/images/ico_mp_event.png') no-repeat;
}
.mypage__section.quick .quick-item i.bookmark {
    background: center center / 36px auto url('/kdtf/common/images/ico_mp_bookmark.png') no-repeat;
}
.mypage__section.quick .quick-item i.driver {
    background: center center / 36px auto url('/kdtf/common/images/ico_mp_driver.png') no-repeat;
}
.mypage__section.quick .quick-item i.daily {
    background: center center / 36px auto url('/kdtf/common/images/ico_mp_daily.png') no-repeat;
}
.mypage__section.quick .quick-item i.tacsong {
    background: center center / 36px auto url('/kdtf/common/images/ico_mp_tac.png') no-repeat;
}
.mypage__section.quick .quick-item.call-driver i.driver{
    margin-bottom: 6px;
    margin-right: 6px;
    flex: unset;
}

.mypage__section.quick .quick-item p {
    display: flex;
    align-items: center;
    text-align: center;
    flex: 1;
}
.mypage__section.quick .quick-item.call-driver p{
    flex: unset;
}

/* */
.mypage__section.menu {
    padding: 0;
}
.mypage__section.menu .menu-list {}
.mypage__section.menu .menu-item {}
.mypage__section.menu .menu-item a {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 68px 0 30px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    background: right 24px center / 20px auto url('../images/ico_n_arrow_r.png') no-repeat;
}
.mypage__section.menu .call-driver {
    display: block;
    margin: 16px;
    padding: 16px 60px 16px 20px;
    color: #333;
    background: #f0f3fb right 24px center / 20px auto url('../images/ico_n_arrow_r.png') no-repeat;;
    border-radius: 8px;
}
.mypage__section.menu .call-driver strong {
    font-weight: 700;
}

/* 230106 setting */
.setting-wrap {
    padding: 0 24px 24px;
}
.setting-wrap .setting-title{
    font-size: 24px;
    padding: 11px 0;
}

.setting-wrap__setting-list {
    margin-bottom: 20px;
}
.setting-wrap__setting-list dd {
    color: #828282;
    font-size: 12px;
    font-weight: 400;
    width: 80%;
}
.setting-wrap__setting-list dd.sns {
    padding-top: 24px;
    width: 100%;
}

.setting-wrap__setting-list .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 8px;
    color: #333;
}
.setting-wrap__setting-list .setting-item img{
    width: 20px;
}
.setting-wrap__setting-list .setting-item:last-child {
    margin-top: 24px;
    padding: 24px 0;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
}
.setting-wrap__setting-list .setting-item-text.sns {

}
.setting-wrap__setting-list .setting-item p {
    margin-right: auto;
    font-size: 18px;
}
.setting-wrap__setting-list .setting-item .version {
    margin-right: 0;
    margin-left: auto;
    font-size: 14px;
    color: #828282;
}

.setting-wrap__setting-list .setting-toggle {
    display: flex;
    position: relative;
}
.setting-wrap__setting-list .setting-toggle input {
    position: absolute;
    display: none;
    left: -999em;
    top: -999em;
    opacity: 0;
}
.setting-wrap__setting-list .setting-toggle input ~ label {
    position: relative;
    width: 32px;
    height: 16px;
    background: #d7e2e4;
    border-radius: 12px;
    background: #e0e0e0;
    transition: all 0.2s ease;
}
.setting-wrap__setting-list .setting-toggle input ~ label:before {
    position: absolute;
    top: -4px;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    border-radius: 100%;
    background: #fff;
    border: 1px solid #E0E0E0;
    transform: translateX(0);
    transition: all 0.2s ease;
    content: '';
}
.setting-wrap__setting-list .setting-toggle input:checked ~ label {
    background: #3E82F4;
}
.setting-wrap__setting-list .setting-toggle input:checked ~ label:before {
    border-color: #3E82F4;
    transform: translateX(calc(100% - 8px));
}

/* */
.setting-wrap__withdrawal {
    margin-top: 24px;
}
.setting-wrap__btn-logout {
    width: 100%;
    height: 46px;
    text-align: center;
    font-size: 16px;
    color: #333;
    border: 1px solid #bdbdbd;
    background-color: #fff;
    border-radius: 6px;
}
.setting-wrap__withdrawal .msg {
    margin-top: 40px;
    color: #333;
}
.setting-wrap__withdrawal .msg a {
    text-decoration: underline;
}

/* */
.wrap-bg {
    background: #f1f6fa !important;
}

#footer {
    padding: 30px 24px;
    color: #828282;
    background: #f1f6fa;
}
#footer .company {
    font-weight: 700;
}
#footer .weather {
    margin-top: 24px;
}
#footer .logo {
    margin-top: 8px;
}
#footer .logo img {
    margin-right: 12px;
    height: 24px;
}

/* 230106 sign up */
.sign-up {
    margin: 0 -6px;
}
/* */
.sign-up__title {
    overflow: hidden;
    margin: 0 6px 24px;
    color: #333;
    font-size: 22px;
    font-weight: 700;
    border-radius: 6px;
}

/* */
.sign-up__terms-list {
    overflow: hidden;
    padding: 0 8px;
    border: 1px solid #333;
    border-radius: 6px;
}
.sign-up__terms-item {
    position: relative;
    padding-right: 62px;
    border-top: 1px solid #e0e0e0;
}
.sign-up__terms-item:first-child {
    border-top: none;
}
.sign-up__terms-list .chk-label {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    padding-bottom: 4px;
    padding-left: 38px;
    line-height: 1;
}
.sign-up__terms-list .chk-label.all {
    font-size: 16px;
}
.sign-up__terms-list input[type=checkbox] {
    position: absolute;
    left: 4px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border-radius: 100%;
    background: #fff center center / 18px auto url('/kdtf/assets/img/common/ico_signup_chkoff.png') no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sign-up__terms-list .chk-label.all input[type=checkbox] {
    background: #BDBDBD center center / 12px auto url('/kdtf/assets/img/common/ico_signup_allchk.png') no-repeat;
}
.sign-up__terms-list input[type=checkbox]:checked {
    background: #fff center center / 18px auto url('/kdtf/assets/img/common/ico_signup_chkon.png') no-repeat;
}
.sign-up__terms-list .chk-label.all input[type=checkbox]:checked {
    background: #3E82F4 center center / 12px auto url('/kdtf/assets/img/common/ico_signup_allchk.png') no-repeat;
}

/* */
.sign-up__form-list {}
.sign-up__form-item {
    position: relative;
    margin-top: 16px;
}
.sign-up__form-item .step-label {
    display: block;
    margin: 0 6px 8px;
    font-size: 14px;
}
.sign-up__form-item .step-label em {
    padding-left: 6px;
    font-size: 12px;
    color: #3e82f4;
}
.sign-up__form-item .btn-evt {
    display: none;
    position: absolute;
    z-index: 1;
    bottom: 10px;
    right: 12px;
    width: 68px;
    height: 34px;
    font-size: 14px;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 62px;
    color: #333;
}

.sign-up__form-item .btn-evt-new {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    right: 12px;
    width: 68px;
    height: 34px;
    font-size: 14px;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 62px;
    color: #333;
}
.sign-up__form-item input[type=tel] {
    width: 100%;
    height: 54px;
    padding: 0 96px 0 16px;
    border-radius: 6px;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    border: 1px solid #333;
}
.sign-up__form-item .now-step,
.sign-up__form-item .now-step:focus {
    border: 2px solid #3e82f4 !important;
}
.sign-up__form-item .btn-submit {
    width: 100%;
    height: 54px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: #3e82f4;
    border-radius: 6px;
}

.terms-agree {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 21px;
    margin-top: -12px;
    background: #fff center center / 8px auto url('/kdtf/assets/img/common/ico_terms_arrow_r.png') no-repeat;
}

.sign-up__terms-item__arrow{
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 24px;
    margin-top: -12px;
    background: #fff center center / 14px auto url('/kdtf/assets/img/common/ico_signup_toggle.png') no-repeat;
}

.sign-up__terms-item__arrow.arrow__down {
    transition-duration: 0.2s;
    transform:rotate(180deg);
}

 .sign-up__title{ 
    animation-name: firstFadeOut;
    animation-duration: 1s; 
   	animation-iteration-count : 1;
    animation-timing-function: linear;
}  

.sign-up__title-certi {
    overflow: hidden;
    margin: 0 6px 24px;
    color: #333;
    font-size: 22px;
    font-weight: 700;
    border-radius: 6px;
    animation-name: certiFadeOut;
    animation-iteration-count : 1;
    animation-duration: 1s; 
    animation-timing-function: linear;
}

.sign-up__terms-list .chk-label {
    padding-bottom: 0;
}

@keyframes firstFadeOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes certiFadeOut {
  from {
    opacity: 0;

  }
  to {
    opacity: 1;
  }
}


/* */
.sign-up-complete {
    position: relative;
    margin-top: 32px;
    padding-top: 158px;
}
.sign-up-complete:before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 200px;
    height: 150px;
    margin-left: -100px;
    background: center center / 200px auto url('/kdtf/assets/img/common/signup_complete.png') no-repeat;
    content: '';
}
.sign-up-complete__title {
    margin-bottom: 16px;
    color: #333;
    font-size: 28px;
    text-align: center;
    font-weight: 700;
}
.sign-up-complete__msg {
    position: relative;
    margin-bottom: 50px;
    color: #333;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}
.sign-up-complete__msg strong {
    color: #3E82F4;
    font-weight: 700;
}
.sign-up-complete__msg em {
    color: #F2994A;
    font-weight: 700;
}
.sign-up-complete__btn-wrap {
    margin-bottom: 30px;
}
.sign-up-complete__btn-card-add {
    display: flex;
    align-items: center;
    height: 80px;
    padding-right: 36px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: right center / 20px auto url('/kdtf/assets/img/common/ico_n_arrow_r.png') no-repeat;
}
.sign-up-complete__btn-wrap i {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    background: #F2F2F2 center center / 28px auto url('/kdtf/assets/img/common/ico_n_card.png') no-repeat;
    border-radius: 100%;
}
.sign-up-complete__btn-wrap .btn-content {
    flex: 1;
    color: #333;
}
.sign-up-complete__btn-wrap .btn-title {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
}
.sign-up-complete__btn-wrap .btn-msg {
    font-size: 14px;
}
.sign-up-complete__btn-submit {
    width: 100%;
    height: 54px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: #3e82f4;
    border-radius: 6px;
}

.sign-up-complete__btn-wrap .ico-coupon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 28px;
  margin: 0 2px;
  padding: 0 18px 1px 8px;
  border-radius: 5px;
  border: 1px solid #000;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  background-color: #FFDF45;
}
.sign-up-complete__btn-wrap .ico-coupon:after {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 0;
  border-left: 1px dashed #000;
  content: '';
}

/* call modal */
.call-drv-modal {
    position: fixed;
    z-index: 9999;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
}
.call-drv-modal.show {
    display: flex;
}

.call-drv-modal__inner {
    position: relative;
    overflow: hidden;
    width: 326px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
}
.call-drv-modal__inner-content {
    padding: 40px 16px 16px;
    text-align: center;
    color: #333;
}
.call-drv-modal__inner-content .ico {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto 16px;
}
.call-drv-modal__inner-content .ico.call {
    background: center center / 90px auto url('/kdtf/common/images/ico_green_call.png') no-repeat;
}
.call-drv-modal__inner-content .ico.cs {
    background: center center / 90px auto url('/kdtf/common/images/ico_cs.png') no-repeat;
}
.call-drv-modal__inner-content .title {
    font-size: 20px;
    font-weight: 700;
}
.call-drv-modal__inner-content .msg {
    font-size: 16px;
}
.call-drv-modal__notice {
    padding: 16px;
    background-color: #f5f5f5;
}
.call-drv-modal__notice .notice-list {}
.call-drv-modal__notice .notice-list dt {}
.call-drv-modal__notice .notice-list dd {
    position: relative;
    padding-left: 10px;
}
.call-drv-modal__notice .notice-list dd:before {
    position: absolute;
    left: 0;
    top: 2px;

    line-height: 1;
    content: '•';
}
.call-drv-modal__btn-wrap {
    padding: 16px;
}
.call-drv-modal__btn-call {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 52px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    background-color: #2DDA53;
    border-radius: 8px;
}
.call-drv-modal__btn-close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 36px;
    height: 36px;
    background: center center / 26px auto url('/kdtf/common/images/ico_modal_close_lg.png') no-repeat;
}
/*타임피커*/
.timepicker       {}
.timepicker .layerClose{display:none !important; }
.timepicker .tit       {position:relative; text-align: center; font-size: 18px; font-weight: 500;padding-top:10px; }
.timepicker .tit span.chk  {position:absolute; right:0; top:2px;  }
.timepicker .tit span.chk label  {font-size: 12px; vertical-align: top; line-height:20px; }
.timepicker .timePick  {position:relative; display:flex; height:200px; overflow: hidden; justify-content: center; font-size:24px; margin-top:30px;}
.timepicker .timePick .hour   { position:relative; z-index:5; width:36px; overflow: scroll; overflow-x: hidden; }
.timepicker .timePick .txt    { position:relative; z-index:5; margin:auto 0; padding:0 8px; }
.timepicker .timePick .minute { position:relative; z-index:5; width:36px; overflow: scroll; overflow-x: hidden; }
.timepicker .timePick div::-webkit-scrollbar {  display: none;}
.timepicker .timePick div button {width:100%; padding:0; font-size:24px;height:36px; background: transparent; text-align: center; color:#BDBDBD }
.timepicker .timePick div button.on {color:#333 }
.timepicker .timePick ul {}
.timepicker .timePick ul li { height:40px;  }
.timepicker .timePick span.focus { position:absolute; z-index: 1; top:82px; width:100%; height:36px; background:#D8ECFE; opacity: .3; border-radius: 8px; }
/* .timepicker .timePick span.focus1 { position:absolute; z-index: 10; top:42px; width:100%; height:36px; background:#fff;  opacity: .5; border-radius: 8px; }
.timepicker .timePick span.focus2 { position:absolute; z-index: 10; top:122px; width:100%; height:36px; background:#fff; opacity: .5; border-radius: 8px; } */
.timepicker .timePick span.focus3 { position:absolute; z-index: 10; top:0px; width:100%; height:40px; background:#fff;   opacity: .8; border-radius: 8px; }
.timepicker .timePick span.focus4 { position:absolute; z-index: 10; top:162px; width:100%; height:40px; background:#fff; opacity: .8; border-radius: 8px; }

.layerWrap.bottom .timepicker .layerBtn    {padding:0 24px 32px; gap:10px;}
.layerWrap.bottom .timepicker .layerBtn button   {border-radius: 8px;}
.layerWrap.bottom .timepicker .layerBtn .btn     {background:#fff; border:1px solid #E0E0E0}
.layerWrap.bottom .timepicker .layerBtn .btnOK   {min-width: 10%;}

.layerWrap.show         {top:0; }
.layerWrap.show::before   {opacity: 1; transition: .3s;}
.layerWrap.show .layerBody   {transition:.3s .1s; transform: translateY(0);  opacity: 1;}
.layerWrap.show.bottom .layerBody   {width:95%;transition:.3s .1s; transform: translateY(0);  opacity: 1; margin-top:50%;}

.layerWrap {
    position: fixed;
    display: block;
    z-index: 1000;
    top: 100%;
    width: 100%;
    height: 100%;
}
.layerWrap::before      {content: ''; position:absolute; width:100%; height:100%; opacity:0; background:rgba(0,0,0,0.5); }
.layerWrap .layerBody   { position:relative;  z-index:10;  display:flex; flex-direction: column; margin:auto; width:336px; min-height:190px; overflow: hidden; opacity: 0; background:#fff; border-radius: 4px; transform: translateY(25%);   }
.layerWrap .layerBody .layerClose   {display:none; position: absolute; right:16px; top:20px; width:24px; height:24px; background: url(../images/layer_close.png) no-repeat;}
.layerWrap.bottom      {}
.layerWrap.bottom .layerBody   {width:360px; margin:auto auto 0; border-radius: 4px; overflow: hidden; transform: translateY(100%);  }
.layerWrap.bottom .layerBody .layerClose   {display:block; }
.layerWrap.bottom .layerBtn   {padding:0 16px 24px; gap:10px  }
.layerWrap.bottom .layerBtn button   {border-radius: 24px;}
.layerWrap.bottom .layerBtn button   {border-radius: 24px;}

.layerWrap .layerBtn   { width:100%; display:flex; margin-top:auto;  }
.layerWrap .layerBtn button   { width:100%; height:48px; text-align: center; border-radius: 0; }
.layerWrap .layerBtn button.btn   { border:0; background:#F5F5F5;  }
.layerWrap .layerBtn .btnOK   { min-width:60%}
.layerWrap .layerBody .ment   { display:flex; height:150px;  }
.layerWrap .layerBody .ment p   {margin: auto;}
.layerWrap .layerCont   { padding:20px 20px 35px; max-height: calc(100vh - 65px); overflow: auto; }
.layerWrap .managerContact .titBox   { display:flex; padding:0  0 15px 0; justify-content: space-between;}
.layerWrap .managerContact .titBox strong    {font-size:16px; font-weight: 400; }
.layerWrap .managerContact .titBox button    {flex:0; white-space: nowrap; font-size:14px; }
.error    {font-size: 12px; color:#FF5757; margin-top:6px; }

.layerWrap .layerBody label {
    font-size: 18px;
    font-weight: 400;
    line-height: 2rem;
}

.layerWrap .layerBody [type="radio"] {
    appearance: none;
    border: max(2px, 0.1em) solid gray;
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    margin-top: 8px;
}

.layerWrap .layerBody [type="radio"]:checked {
    border: 0.4em solid #3E82F4;
}

.layerWrap .layerBody [type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted #3E82F4;
}

.layerWrap .layerBody [type="radio"]:hover {
    cursor: pointer;
}

.layerWrap .layerBody [type="radio"]:hover + span {
    cursor: pointer;
}

.layerWrap .layerBody [type="radio"]:disabled {
    background-color: lightgray;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

.layerWrap .layerBody [type="radio"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}

/*!* Global CSS *!*/
/*fieldset {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    border: none;*/
/*    margin: 0;*/
/*    padding: 40px 20px;*/
/*}*/

/**,*/
/**::before,*/
/**::after {*/
/*    box-sizing: border-box;*/
/*}*/

.mail{
    background-color: #F0F3FB;
    padding-bottom: 20px;
}
.mail-list {
    list-style: none;
    padding: 16px 0px;
    margin: 0;
}

.mail-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;
    font-size: 14px;
    color: #333;
}

.mail-item span:first-child {
    font-weight: bold;
    color: #0B2375;
}

.mail-item span:last-child {
    color: #333333;
    padding-left: 20px;
}

.mypage__section.mail .copy-msg{
    color:#333333;
    font-size: 11px;
    text-align: center;
}

.mypage__section.mail .mail-list i.csCenter {
    background: center center / 300px auto url('../images/mypage_mail_center.png') no-repeat;
    width: 300px; /* .csCenter의 크기를 명시적으로 지정 */
    height: 20px; /* 이미지 비율에 따라 설정 */
    display: inline-block; /* display 속성 설정 */

}
.mypage__section.mail .mail-list i.sales {
    background: center center / 300px auto url('../images/mypage_mail_sales.png') no-repeat;
    width: 300px; /* .csCenter의 크기를 명시적으로 지정 */
    height: 20px; /* 이미지 비율에 따라 설정 */
    display: inline-block; /* display 속성 설정 */

}

.mypage__section.mail .mail-list i.marketing {
    background: center center / 300px auto url('../images/mypage_mail_marketing.png') no-repeat;
    width: 300px; /* .csCenter의 크기를 명시적으로 지정 */
    height: 20px; /* 이미지 비율에 따라 설정 */
    display: inline-block; /* display 속성 설정 */
}

#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    padding: 15px 20px;
    transform: translate(-50%, 10px);
    border-radius: 30px;
    overflow: hidden;
    font-size: .8rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s, visibility .5s, transform .5s;
    background: rgba(0, 0, 0, .85);
    color: #fff;
    z-index: 10000;
}

#toast.reveal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

#toast.hide {
    opacity: 0;
    transform: translate(-50%, 10px);
    visibility: hidden;
}