/*예약 접수 공통*/
.step-group { margin-bottom: 54px; padding: 68px 0; box-sizing: border-box; background: #f7f7f7; }
.step-group .inner { max-width: 1200px; margin: 0 auto; }

.list-step { display: flex; align-items: center; }
.list-step li { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 160px; height: 160px; border: 2px solid transparent; border-radius: 50%; box-sizing: border-box; }
.list-step li:not(:last-child) { margin-right: 160px; }
.list-step li:not(:last-child):after { content: ''; display: block; position: absolute; top: calc(50% - 1px); right: -110px; width: 60px; height: 2px; background: url('../img/img_line1.svg') center center no-repeat; }
.list-step .num { margin-bottom: 4px; font-size: 16px; font-weight: 700; color: #000; }
.list-step .tit { font-size: 16px; font-weight: 400; color: #000; }

.list-step li.active { border-color: #0740e4; }
.list-step li.active .num,
.list-step li.active .tit { color: #0740e4; }


/*예약 접수 STEP 1*/
.reserve { padding-top: 0; }
.reserve .box-group { margin-top: 40px; }
.reserve .box-group .box { margin-bottom: 10px; padding: 42px 0 52px; box-sizing: border-box; background: #f7f7f8; }
.reserve .box-group .box:last-child { margin-bottom: 0; }
.reserve .box-group .box > .inner { max-width: 1200px; margin: 0 auto; }
.reserve .box-group .box .ck-group { margin-bottom: 40px; }


/*예약 접수 STEP 2*/
.payment { padding-top: 0; }
.payment .agree-group { margin-top: 40px; }
.payment .agree-group .ck-group { padding: 8px 0; box-sizing: border-box; }
.payment .agree-group .ck-group:not(:last-child) { margin-bottom: 10px; }


/*예약 접수 STEP 3*/
.reserve-result { padding-top: 0; }
.reserve-result-v1 { padding-top: 54px; box-sizing: border-box; }
.reserve-result .reserve-number { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 40px; padding: 40px 0; border-radius: 16px; box-sizing: border-box; background: #f7f7f8; }
.reserve-result .reserve-number .tit { font-size: 18px; font-weight: 400; color: #101010; line-height: 27px; }
.reserve-result .reserve-number .txt { font-size: 24px; font-weight: 700; color: #101010; line-height: 36px; }

.reserve-result .txt-group { text-align: center; }
.reserve-result .txt-group img { display: block; margin: 0 auto 20px; }
.reserve-result .txt-group .txt { font-size: 18px; font-weight: 400; color: rgba(16, 16, 16, 0.5); line-height: 27px; }
.reserve-result .txt-group .btn-custom { margin: 60px auto 0; }


/*예약 조회*/
.order-inquiry .wrap { max-width: 1160px; padding: 60px 40px; border: 1px solid #c2c2c2; box-sizing: border-box; }

.frm-inquiry { max-width: 360px; margin: 0 auto; }
.frm-inquiry .top { margin-bottom: 40px; font-size: 24px; font-weight: 700; color: #101010; text-align: center; line-height: 36px; }
.frm-inquiry .inp-group-inquiry:not(:last-child) { margin-bottom: 11px; }
.frm-inquiry .btn-custom { margin: 90px auto 0; }


/*예약 현황*/
.order-history .top-page { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.order-history .top-page .tit { font-size: 32px; font-weight: 700; color: #000; }
.order-history .top-page .btn-download { display: flex; justify-content: center; align-items: center; height: 52px; padding: 0 20px; border: 1px solid #101010; box-sizing: border-box; font-size: 16px; font-weight: 700; color: #101010; }
.order-history .top-page .btn-download img { margin-right: 10px; }

.tbl-order { width: 100%; border-collapse: collapse; margin-bottom: 80px; border: 1px solid #c2c2c2; box-sizing: border-box; }
.tbl-order th,
.tbl-order td { position: relative; padding: 20px; border: 1px solid #c2c2c2; box-sizing: border-box; }
.tbl-order th { width: 220px; font-size: 18px; font-weight: 700; color: #101010; text-align: left; }
.tbl-order td { width: calc(100% - 220px); font-size: 16px; font-weight: 400; color: #101010; }
.tbl-order .btn-modify { position: absolute; top: 20px; right: 20px; border: none; background: none; font-size: 16px; font-weight: 400; color: #0740e4; text-decoration: underline; }

.tbl-order .state-group { display: flex; align-items: center; }
.tbl-order .state-group .state-v1 { color: #0066ff; }
.tbl-order .state-group .state-v2 { color: #ff592a; }
.tbl-order .state-group .btn-payment { display: flex; justify-content: center; align-items: center; height: 40px; margin-left: 20px; padding: 0 20px; border-radius: 20px; box-sizing: border-box; background: #101010; font-size: 16px; font-weight: 400; color: #fff; }

.tbl-order .reserve-info .txt-group { display: flex; align-items: center; }
.tbl-order .reserve-info .txt-group:not(:last-child) { margin-bottom: 4px; }
.tbl-order .reserve-info .txt-group .tit { width: 130px; font-size: 16px; font-weight: 400; color: #101010; line-height: 24px; }
.tbl-order .reserve-info .txt-group .txt { width: calc(100% - 130px); font-size: 16px; font-weight: 700; color: #101010; line-height: 24px; }

.tbl-order .reserve-schedule .top { margin-bottom: 20px; }
.tbl-order .reserve-schedule .top .tit { font-size: 21px; font-weight: 700; color: #101010; }
.tbl-order .reserve-schedule .top .tit span { margin-left: 10px; color: #0066ff; }

.timeline-group .box { padding: 30px 40px; border-radius: 16px; box-sizing: border-box; background: #f6f6f6; }
.timeline-group .box:not(:last-child) { margin-bottom: 10px; }
.timeline-group .tit { margin-bottom: 10px; font-size: 21px; font-weight: 700; color: rgba(16, 16, 16, 0.4); }

.list-timeline li { display: flex; position: relative; }
.list-timeline li:not(:last-child) { padding-bottom: 20px; box-sizing: border-box; }
.list-timeline li:not(:last-child):after { content: ''; display: block; position: absolute; top: 50%; width: 17px; height: 50%; background: url('../img/img_line2.png') center center; background-repeat: repeat-y; background-size: contain; }
.list-timeline .time { display: flex; width: 220px; font-size: 21px; font-weight: 400; color: #101010; }
.list-timeline .time:before { content: ''; display: block; position: relative; z-index: 1; width: 17px; height: 17px; margin-top: 4px; margin-right: 10px; border-radius: 50%; box-sizing: border-box; background: url('../img/ico_circle1.svg') center center no-repeat #f6f6f6; }
.list-timeline .time span { display: flex; justify-content: center; align-items: center; height: 25px; margin-left: 10px; padding: 0 8px; border: 1px solid #0066ff; border-radius: 13px; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #0066ff; }
.list-timeline .location { width: calc(100% - 220px); padding-top: 3px; box-sizing: border-box; }/*서비스 소개*/
.tab-menu-service { display: flex; justify-content: space-between; align-items: center; margin-bottom: 100px; }
.tab-menu-service .tab { display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; margin-right: 24px; border: 1px solid #101010; border-radius: 30px; box-sizing: border-box; font-size: 24px; font-weight: 700; color: #101010; text-align: center; }
.tab-menu-service .tab:last-child { margin-right: 0; }
.tab-menu-service .tab.active { background: #101010; color: #fff; }


/*서비스 소개 > 운행 과정 소개*/
.process .tab-menu { display: none; justify-content: center; align-items: center; margin-bottom: 50px; }
.process .tab-menu .tab { font-size: 22px; font-weight: 700; color: rgba(16, 16, 16, 0.25); cursor: pointer; }
.process .tab-menu .tab.active { color: #101010; }
.process .tab-menu .tab:not(:last-child):after { content: '|'; margin: 0 16px; font-size: 22px; font-weight: 300; color: rgba(16, 16, 16, 0.25); }
.process .tab-content { display: block; }
.process .tab-content:not(:last-child) { margin-bottom: 166px; }

.process .top-article { margin-bottom: 55px; font-size: 24px; font-weight: 700; color: #101010; }

.process-group { position: relative; }
.process-group .bg { position: relative; width: 1163px; height: 36px; background: #f3f3f3; }
.process-group .bg:after { content: ''; display: block; position: absolute; top: calc(50% - 38px); right: -37px; width: 38px; height: 76px; background: url('../img/ico_triangle1.svg') center center no-repeat; }

.pin-group { display: flex; justify-content: space-between; }
.pin { position: absolute; margin-top: -43px; }
.pin:nth-child(1) { left: 52px; }
.pin:nth-child(2) { left: 397px; }
.pin:nth-child(3) { left: 695px; }
.pin:nth-child(4) { left: 1035px; }

.process-group-v1 .pin:nth-child(1) { left: 52px; }
.process-group-v1 .pin:nth-child(2) { left: 277px; }
.process-group-v1 .pin:nth-child(3) { left: 556px; }
.process-group-v1 .pin:nth-child(4) { left: 774px; }
.process-group-v1 .pin:nth-child(5) { left: 1035px; }

.pin img { display: block; width: 50px; height: 50px; margin: 0 auto 16px; }
.pin .tit-group .tit { font-size: 18px; font-weight: 600; color: #101010; text-align: center; }
.pin .tit-group .txt { margin-top: 16px; font-size: 14px; font-weight: 400; color: rgba(16, 16, 16, 0.6); text-align: center; line-height: 22.4px; }

.pin-between .txt { position: absolute; top: calc(50% - 9px); font-size: 16px; font-weight: 500; color: rgba(16, 16, 16, 0.6); text-align: center; }
.pin-between .txt:nth-child(1) { left: 212px; }
.pin-between .txt:nth-child(2) { left: 551px; }
.pin-between .txt:nth-child(3) { left: 850px; }

.process-group-v1 .txt:nth-child(1) { left: 172px; }
.process-group-v1 .txt:nth-child(2) { left: 418px; }
.process-group-v1 .txt:nth-child(3) { left: 670px; }
.process-group-v1 .txt:nth-child(4) { left: 889px; }


/*서비스 소개 > 딜리버리란*/
.list-info-delivery { display: flex; align-items: center; margin-bottom: 100px; }
.list-info-delivery li { position: relative; width: 50%; height: 440px; overflow: hidden; }
.list-info-delivery .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: center center no-repeat; transition: .5s all ease-out; }
.list-info-delivery li:hover .bg { transform: scale(1.1); }
.list-info-delivery li:nth-child(1) .bg { background-image: url('../img/bg_car1.png'); }
.list-info-delivery li:nth-child(2) .bg { background-image: url('../img/bg_car2.png'); }
.list-info-delivery .txt-group { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; }
.list-info-delivery .txt-group .tit { margin-bottom: 35px; font-size: 36px; font-weight: 700; color: #fff; text-align: center; }
.list-info-delivery .txt-group .txt { font-size: 18px; font-weight: 500; color: #fff; text-align: center; line-height: 28.8px; }
.list-info-delivery .txt-group .txt.m { display: none; }

.delivery-info .brand-group .tit { margin-bottom: 40px; font-size: 24px; font-weight: 700; color: #101010; }
.delivery-info .brand-group .tit br { display: none; }
.delivery-info .brand-group .img-group { display: flex; justify-content: space-between; align-items: center; }
.delivery-info .brand-group .img-group img { zoom: 0.5; }


@media only screen and (max-width: 1280px) {
	/*예약 접수 공통*/
	.step-group { display: none; }
	
	.reserve,
	.payment { padding-top: 40px; box-sizing: border-box; }
	
	/*예약 접수 STEP 1*/
	.reserve .box-group .box { padding: 40px 20px; box-sizing: border-box; }
	.reserve .ck-custom + label .custom { width: 28px; height: 28px; margin-right: 12px; }
	.reserve .ck-custom + label .label { width: calc(100% - 40px); font-size: 16px; }
	
	/*예약 접수 STEP 2*/
	.payment .agree-group .ck-group { padding: 0; }
	.payment .agree-group .ck-group:not(:last-child) { margin-bottom: 20px; }
	
	/*예약 접수 STEP 3*/
	.reserve-result { padding: 40px 20px; box-sizing: border-box; }
	.reserve-result .reserve-number { padding: 20px; box-sizing: border-box; }
	
	.reserve-result .txt-group .txt { font-size: 16px; line-height: 24px; }
	
	/*예약 조회*/
	.order-inquiry .wrap { padding: 0 20px; border: none; box-sizing: border-box; }
	
	.frm-inquiry { max-width: none; }
	.frm-inquiry .top { font-size: 21px; text-align: left; line-height: 31.5px; }
	.frm-inquiry .inp-group-inquiry:not(:last-child) { margin-bottom: 20px; }
	
	/*예약 현황*/
	.order-history { padding: 40px 20px; box-sizing: border-box; }
	.order-history .top-page .tit { font-size: 24px; }
	.order-history .top-page .btn-download { height: 40px; padding: 0 15px; box-sizing: border-box; font-size: 14px; }
	
	.tbl-order { margin-bottom: 40px; }
	.tbl-order th,
	.tbl-order td { padding: 16px 8px; box-sizing: border-box; }
	.tbl-order th { width: 80px; font-size: 14px; text-align: center; }
	.tbl-order td { width: calc(100% - 80px); font-size: 14px; }
	.tbl-order .btn-modify { position: static; margin-top: 15px; font-size: 14px; }
	
	.tbl-order .state-group .btn-payment { height: 30px; margin-left: 10px; padding: 0 15px; box-sizing: border-box; font-size: 12px; }
	
	.tbl-order .reserve-info .txt-group .tit { width: 76px; font-size: 14px; line-height: 21px; }
	.tbl-order .reserve-info .txt-group .txt { width: calc(100% - 76px); font-size: 14px; line-height: 21px; }
	
	.tbl-order .reserve-schedule .top .tit { font-size: 18px; }
	
	.timeline-group .box { padding: 11px 10px; border-radius: 8px; box-sizing: border-box; }
	.timeline-group .tit { font-size: 16px; }
	
	.list-timeline li { display: block; }
	.list-timeline li:not(:last-child) { padding-bottom: 30px; box-sizing: border-box; }
	.list-timeline li:not(:last-child):after { top: 17px; height: 100%; }
	.list-timeline .time { width: 100%; font-size: 18px; }
	.list-timeline .time span { height: 22px; font-size: 12px; }
	.list-timeline .location { width: 100%; padding-top: 6px; padding-left: 27px; box-sizing: border-box; font-size: 13px; }
	
	/*서비스 소개*/
	.tab-menu-service { display: block; width: calc(100% - 40px); margin: 0 auto 40px; }
	.tab-menu-service .tab { height: 56px; margin-right: 0; margin-bottom: 12px; font-size: 20px; }
	.tab-menu-service .tab:last-child { margin-right: 0; }
	
	/*서비스 소개 > 운행 과정 소개*/
	.process .tab-menu { display: flex; }
	.process .tab-content { display: none; }
	.process .tab-content:first-child { display: block; }
	
	.process .top-article { display: none; }
	
	.process-group .bg { width: 36px; height: 744px; margin: 0 auto; }
	.process-group .bg-v1 { height: 937px; }
	.process-group .bg:after { top: auto; left: 0; right: 0; bottom: -38px; transform: rotate(90deg); width: 38px; height: 76px; margin: 0 auto; background-size: contain; }
	
	.pin-group { display: block; }
	.pin { left: 0 !important; right: 0 !important; margin: 0 auto; }
	.pin:nth-child(1) { top: 44px; }
	.pin:nth-child(2) { top: 234px; }
	.pin:nth-child(3) { top: 424px; }
	.pin:nth-child(4) { top: 614px; }
	
	.process-group-v1 .pin:nth-child(2) { top: 234px; }
	.process-group-v1 .pin:nth-child(3) { top: 424px; }
	.process-group-v1 .pin:nth-child(4) { top: 614px; }
	.process-group-v1 .pin:nth-child(5) { top: 804px; }
	
	.pin .tit-group { display: flex; flex-direction: column; position: absolute; top: 15px; }
	.pin:nth-child(odd) .tit-group { align-items: flex-end; right: calc(50% + 40px); }
	.pin:nth-child(even) .tit-group { align-items: flex-start; left: calc(50% + 40px); }
	
	.pin-between .txt { display: flex; justify-content: center; align-items: center; left: 0 !important; right: 0 !important; margin: 0 auto; writing-mode : vertical-lr; letter-spacing: -5px; word-spacing: 10px; }
	.pin-between .txt:nth-child(1) { top: 112px; }
	.pin-between .txt:nth-child(2) { top: 321px; }
	.pin-between .txt:nth-child(3) { top: 492px; }
	
	.process-group-v1 .txt:nth-child(2) { top: 309px; }
	.process-group-v1 .txt:nth-child(3) { top: 512px; }
	.process-group-v1 .txt:nth-child(4) { top: 682px; }
	
	/*서비스 소개 > 딜리버리란*/
	.list-info-delivery { display: block; margin-bottom: 50px; }
	.list-info-delivery li { width: 100%; height: 426px; }
	.list-info-delivery .txt-group .tit { font-size: 28px; }
	.list-info-delivery .txt-group .txt { display: none; font-size: 16px; line-height: 25.6px; }
	.list-info-delivery .txt-group .txt.m { display: block; }
	
	.delivery-info .brand-group .tit { margin-bottom: 24px; font-size: 20px; text-align: center; line-height: 28px; }
	.delivery-info .brand-group .tit br { display: block; }
	.delivery-info .brand-group .img-group { flex-wrap: wrap; justify-content: center; }
 }