@charset "utf-8";
/*
 * Name     : service.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-08-06
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. SERVICE AND PARTNER
    02. SERVICE FORM
    03. SERVICE CHECK
    04. MEDIA QUERIES
---------------------------------------------------
*/

/* ------------------------------
 * SERVICE AND PARTNER
------------------------------ */
/* sequence */
.sequence-section .row-sequence .col-item .vertical-slide-wrap {font-size:0; height: 760px; margin-left: -8px; margin-right: -8px; overflow: hidden}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide {position: relative; display:inline-flex; width:50%; padding-left: 8px; padding-right: 8px}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul {position: absolute; left: 8px; right: 8px; animation: moveSlideUp 14s linear infinite}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul:last-child {transform: translateY(100%); animation: moveSlideUpSecond 14s linear infinite}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide.right ul {animation: moveSlideUp 17s linear infinite}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide.right ul:last-child {animation: moveSlideUpSecond 17s linear infinite}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul li {position: relative; display: -ms-flexbox; display: flex; height:350px; align-items: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius:30px; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul li p {position: relative; font-size:22px; font-weight: 700; color: var(--white); z-index: 10; text-shadow: 2px 2px 4px rgba(0,0,0,.48)}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul li::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.24); z-index: 5}
.sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul li {margin-top: 16px}

@keyframes moveSlideUp {
    0% {
        transform: translateY(0)
    }
    100% { 
        transform: translateY(-100%)
    }
}

@keyframes moveSlideUpSecond {
    0% {
        transform: translateY(100%)
    }
    100% { 
        transform: translateY(0%)
    }
}

.sequence-section .row-sequence .col-item .vertical-slide-wrap > ul li p {position: relative; font-size:22px; font-weight: 700; color: var(--white); z-index: 10; text-shadow: 2px 2px 4px rgba(0,0,0,.48)}

/* promise */
.promise-section {padding-top: 160px; padding-bottom: 120px}
.promise-section .row-service .nav-tabs {border:0}
.promise-section .row-service .nav-tabs li {display:block; width:100%}
.promise-section .row-service .nav-tabs li > a {position: relative; margin-bottom:0; padding: 28px 16px 28px 32px; opacity: .6; transition: opacity .15s linear}
.promise-section .row-service .nav-tabs li > a::before {content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background-color: var(--grey-200)}
.promise-section .row-service .nav-tabs li > a.active {opacity: 1}
.promise-section .row-service .nav-tabs li > a.active::before {left: -3px; width: 4px; background-color: var(--primary)}
.promise-section .row-service .nav-link {border:0; padding:0; margin:0; border-radius:0}
.promise-section .nav-tabs .nav-item.show .nav-link, .promise-section .nav-tabs .nav-item.show .nav-link {border:0}

/* smart */
.smart-section {padding-bottom: 120px}
.smart-section .container-xl {position:relative}
.smart-section .row-smart-slide .col-img-item {position: relative}
.smart-section .row-smart-slide .col-txt-item h3 {font-size:18px; font-weight:500; color:var(--secondary); letter-spacing:-0.02em}
.smart-section .row-smart-slide .col-txt-item h4 {margin-bottom: 0.75rem}
.smart-section .row-smart-slide .col-txt-item p {font-size:16px; font-weight: 600; color:var(--grey-800)}
.smart-section .row-smart-slide .col-txt-item ul {margin-top:30px}
.smart-section .row-smart-slide .col-txt-item ul li {position:relative; font-size:16px; color: var(--grey-700); padding-left: 16px}
.smart-section .row-smart-slide .col-txt-item ul li:before {content:''; position:absolute; width:6px; height:2px; background-color: var(--grey-300); top:10px; left:0}
.smart-section .navigation-arrow {position:absolute; bottom:0; right: 0; z-index:10; font-size:0}
.smart-section .navigation-arrow button {padding:0; margin:0; width:50px; height:50px; outline: none; background-color:#ffc000; border:0}
.smart-section .navigation-arrow button:last-child {border-left:1px solid #ffee00}
.smart-section .navigation-arrow button i {font-size:18px; color:var(--white)}

/* partner */
.partner-section {padding-bottom: 160px}
.partner-section .parnter-slide-wrapper {position: relative; overflow: hidden}
.partner-section .parnter-slide-wrapper::after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 320px; background-image: linear-gradient(to left, rgba(255,255,255,.9) 24%, rgba(255,255,255,.5) 51%, transparent); z-index: 10}

/* ------------------------------
 * SERVICE FORM
------------------------------ */
.service-form-section {padding-top: 220px; padding-bottom: 160px}
.service-form-section .service-form-group .service-card {padding: 48px 64px; border-radius: 16px; box-shadow: 0 5px 20px 0 rgba(0,0,0,.1)}
.service-form-section .service-form-group .service-card blockquote {padding: 1.5rem 1.75rem; border: 1px solid var(--grey-200); border-radius: 0.75rem; background-color: var(--grey-100)}
.service-form-section .service-form-group .service-card .info-box {margin-top: 28px}
.service-form-section .service-form-group .service-card .info-box > ul > li {position: relative; font-size: 14px; color: var(--grey-600); line-height: 1.6; letter-spacing: -0.02em; padding-left: 10px}
.service-form-section .service-form-group .service-card .info-box > ul > li::before {content: ''; position: absolute; top: 9px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: var(--grey-300)}
/*
h.service-form-section .service-form-group {margin-bottom: 48px; padding: 32px; border: 1px solid var(--grey-200); border-radius: 16px; background-color: var(--grey-50)}
*/
.service-form-section .service-form-group .form-item {margin-bottom: 24px}
.service-form-section .error-container {margin-top: 48px}
.service-form-section .error-container ul li {position: relative; font-size: 14px; font-weight: 500; color: var(--danger-600); line-height: 1.6; letter-spacing: -0.02em; padding-left: 10px}
.service-form-section .error-container ul li::before {content: ''; position: absolute; top: 9px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: var(--danger-300)}
.service-form-section .attach-list li {position: relative; font-size: 15px; letter-spacing: -0.02em; line-height: 1.8; padding-left: 4rem}
.service-form-section .attach-list li b {position: absolute; top: 0; left: 0; font-weight: 500; color: var(--grey-600)}
.service-form-section .attach-list li a {position: relative; color: var(--black)}
.service-form-section .attach-list li a::after {content: ''; position: absolute; display: block; bottom: -1px; right: 0; width: 0; height: 1px; background-color: var(--black); transition: width .3s}
.service-form-section .attach-list li a:hover::after {left: 0; right: auto; width: 100%}
.service-form-section .bottom-submit-button {padding-top: 48px; text-align: center}
.service-form-section .service-estimate-wrapper .inner-content {height: 100%; border-radius: 20px; background-color: #f6f6f6; overflow: hidden}
.service-form-section .service-estimate-wrapper .bg-header {display: -ms-flexbox; display: flex; padding: 24px 28px; height: 108px; background-color: var(--primary); -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center}
.service-form-section .service-estimate-wrapper .bg-header strong {display: block; color: var(--black)}
.service-form-section .service-estimate-wrapper .estimate-summary .summary-content {padding: 28px}
.service-form-section .service-estimate-wrapper .switch-wrapper .switch-label label {font-size: 15px; font-weight: 600; color: var(--grey-800); letter-spacing: -0.02em; margin-bottom: 0; cursor: pointer}
.service-form-section .service-estimate-wrapper .switch-wrapper .switch-checker {font-size: 0}
.service-form-section .service-estimate-wrapper .switch-wrapper + .switch-wrapper {margin-top: 12px}
.service-form-section .service-estimate-wrapper .estimate-summary hr {margin-top: 32px; margin-bottom: 32px; border-color: rgba(0,0,0,.08)}
.service-form-section .service-estimate-wrapper .estimate-content .inner-content {padding: 28px}
/* .service-form-section .service-estimate-wrapper .estimate-content .content-header {text-align: center} */
.service-form-section .service-estimate-wrapper .estimate-content .content-header h3 {margin-bottom: 6px}
.service-form-section .service-estimate-wrapper .estimate-step .step-content {padding: 28px}
.service-form-section .service-estimate-wrapper .estimate-step .button-step {display: block; width: 100%; text-align: left; padding: 14px 20px; border: 0; border-radius: 12px; background-color: var(--white); outline: 0}
.service-form-section .service-estimate-wrapper .estimate-step .button-step + .button-step {margin-top: 12px}
.service-form-section .service-estimate-wrapper .estimate-step .button-step span {display: block; font-size: 14px; font-weight: 500; color: var(--grey-500)}
.service-form-section .service-estimate-wrapper .estimate-step .button-step p {font-weight: 600; color: var(--grey-800)}
.service-form-section .service-estimate-wrapper .estimate-step .button-step.active {background-color: #ffc107}
.service-form-section .service-estimate-wrapper .estimate-step .button-step.active span {color: rgba(255,255,255,.7)}
.service-form-section .service-estimate-wrapper .estimate-step .button-step.active p {color: var(--white)}
.service-form-section .service-estimate-wrapper .estimate-step .button-step[disabled] {opacity: .6; cursor: not-allowed}

#addressListModal .table-solid .cell-addr-subject {width: 200px; font-size: 0}
#addressListModal .table-solid .cell-mng {width: 100px}
#addressListModal .table-solid .cell-mng .button {width: 100%}
#addressListModal .default-button-check {position: relative; overflow: hidden}
#addressListModal .default-button-check input {position: absolute; top: 0; left: 0; width: 0; height: 0; margin: -1px; clip: rect(0 0 0 0 ); visibility: hidden}
#addressListModal .default-button-check input + label {cursor: pointer}
#addressListModal .default-button-check .button-check {color: var(--success-600); border-color: var(--success-600); background-color: var(--white)}
#addressListModal .default-button-check input:checked + .button-check {color: var(--white); background-color: var(--success-600)}

/* ------------------------------
 * SERVICE CHECK
------------------------------ */
.service-check-section {padding-top: 220px; padding-bottom: 160px}
.service-check-section .check-filters {position: relative; text-align: right; margin-bottom: 48px; z-index: 10}
.service-check-section .check-filters .selectric-wrapper {min-width: 200px}
.service-check-section .check-filters .selectric-wrapper .selectric {width: 100%}
.service-check-section .check-filters .selectric-wrapper, .service-check-section .check-filters .filter-input-group {display: inline-flex; vertical-align: middle}
.service-check-section .check-filters .filter-input-group {width: 280px}
.service-check-section .check-filters .filter-input-group span {color: var(--grey-400)}
.table-list thead th {font-weight: 500; color: var(--grey-800); border-top-color: var(--grey-200); border-bottom: 1px solid var(--grey-200); background-color: var(--grey-100)}
.table-list thead th, .table-list tbody th, .table-list tbody td {font-size: 1rem; letter-spacing: -0.02em; padding: 16px 16px; vertical-align: middle}
.table-list tbody th, .table-list tbody td {border-top: 0; border-bottom: 1px solid var(--grey-200)}
.table-list tbody td {color: var(--grey-600)}
.table-list .cell-basicinfo {width: 200px}
.table-list .cell-basicinfo a {font-weight: 700; color: var(--grey-900)}
.table-list .cell-basicinfo .date {display: block; font-size: 14px; color: var(--grey-500)}
.table-list .cell-receipt {width: 220px}
.table-list .cell-receipt .receipt-info {font-size: 0; text-align: right}
.table-list .cell-receipt .receipt-info dt, .table-list .cell-receipt .receipt-info dd {display: inline-block; font-size: 15px; line-height: 1.66; vertical-align: top}
.table-list .cell-receipt .receipt-info dt {width: 64px; font-weight: normal; color: var(--grey-600)}
.table-list .cell-receipt .receipt-info dd {width: calc(100% - 64px); font-weight: 500; color: var(--grey-800)}
.table-list .cell-path {width: 280px; text-align: center}
.table-list .cell-path .path-info > div {position: relative}
.table-list .cell-path .path-info > div + div::before {content: '\F138'; font-family: 'bootstrap-icons'; position: absolute; top: 50%; left: -7px; color: var(--grey-600); transform: translateY(-50%)}
.table-list .cell-path p {font-weight: 700}
.table-list .cell-path span {display: block; font-size: 12px; font-weight: 500; color: var(--grey-500)}
.table-list .cell-path .departure p {color: var(--danger-600)}
.table-list .cell-path .destination p {color: #228be6}
.table-list .cell-price {width: 160px; text-align: right}
.table-list .cell-price strong {font-weight: 700; color: var(--black)}
.table-list .cell-status {text-align: center}
.table-list .cell-status span {display: inline-flex; width: 80px; height: 38px; font-size: 14px; font-weight: 700; border-radius: 6px; align-items: center; justify-content: center}
.table-list .cell-status span.status-01 {color: #2f9e44; background-color: #ebfbee}
.table-list .cell-status span.status-02 {color: var(--grey-900); background-color: var(--primary)}
.table-list .cell-status span.status-03 {color: var(--grey-400); background-color: var(--grey-200)}
.table-list .cell-file {width: 90px; text-align: center}
.table-list .cell-file span {color: var(--grey-500)}
.table-list .cell-file a {font-size: 22px; color: #2f9e44}

.history-wrap {position: relative; max-width: 760px; margin: auto; padding-top: 30px; padding-bottom: 125px; z-index: 5}
.history-wrap::before {content: ''; position: absolute; top: 0; left: 50%; bottom: 0; display: block; width: 1px; margin-left: -0.5px; background-color: #412210; z-index: -1}
.history-wrap .history-group {text-align: center}
.history-wrap .history-group + .history-group {margin-top: 64px}
.history-wrap .history-group > .row {margin-left: -20px; margin-right: -20px}
.history-wrap .year-subject {display: inline-block; font-size: 12px; font-weight: 900; color: #fff; letter-spacing: -0.075em; margin-bottom: 10px; padding: 4px; background-color: #412210}
.history-wrap .col-history {padding-left: 20px; padding-right: 20px}
.history-wrap .col-history + .col-history {margin-top: 38px}
.history-wrap .col-history figure {position: relative; margin-bottom: 0; border: 1px solid #412210}
.history-wrap .col-history figure img {display: block; width: 100%}
.history-wrap .col-history figure::before, .history-wrap .col-history figure::after {content: ''; position: absolute; display: block; z-index: 2}
.history-wrap .col-history figure::before {top: 8px; left: 100%; border: 10px solid transparent; border-left-color: #412210}
.history-wrap .col-history figure::after {top: 10px; left: calc(100% + 13px); width: 16px; height: 16px; border: 4px solid #412210; border-radius: 50%; background-color: #fff}
.history-wrap .col-history figure figcaption {position: absolute; left: 8px; bottom: 8px; right: 8px; text-align: left; padding: 8px 12px; background-color: rgba(65,34,16,.8); z-index: 5}
.history-wrap .col-history figure figcaption h5 {font-size: 16px; font-weight: 900; color: #fff; letter-spacing: -0.075em; margin-bottom: 6px}
.history-wrap .col-history figure figcaption p {font-size: 11px; color: #fff; letter-spacing: -0.075em}
.history-wrap .col-history.rightside figure::before {left: auto; right: 100%; border-left-color: transparent; border-right-color: #412210}
.history-wrap .col-history.rightside figure::after {left: auto; right: calc(100% + 13px)}

.checkPage_noti {width:90%; max-width:800px; margin:auto;margin-top:6%;background-color:var(--grey-200);padding:20px;}
/* ------------------------------
 * MEDIA QUERIES
------------------------------ */
@media (max-width: 991px) {
    .service-form-section {padding-top: 160px; padding-bottom: 120px}
    .service-check-section {padding-top: 160px; padding-bottom: 120px}

    .sequence-section .row-sequence .col-item .vertical-slide-wrap {height: 480px}
}

@media (max-width: 767px) {
    .service-form-section {padding-top: 120px; padding-bottom: 80px}
    .service-check-section {padding-top: 120px; padding-bottom: 80px}
    .service-form-section .service-form-group .service-card {padding: 28px 32px}
    .service-form-section .error-container {margin-top: 36px}
    .service-form-section .bottom-submit-button {padding-top: 36px}
    .service-check-section .check-filters .selectric-wrapper {min-width: 180px}
    .service-check-section .check-filters .filter-input-group {width: auto}

    .sequence-section {padding-top: 60px; padding-bottom: 60px}
    .sequence-section .col-left-item {margin-bottom: 48px}
    .sequence-section .row-sequence .col-item .vertical-slide-wrap {position: relative}
    .sequence-section .row-sequence .col-item .vertical-slide-wrap::before, .sequence-section .row-sequence .col-item .vertical-slide-wrap::after {content: ''; position: absolute; display: block; left: 0; right: 0; height: 100px; z-index: 5}
    .sequence-section .row-sequence .col-item .vertical-slide-wrap::before {top: 0; background-image: linear-gradient(0deg, transparent 8%, rgba(255,255,255,1) 65%)}
    .sequence-section .row-sequence .col-item .vertical-slide-wrap::after {bottom: 0; background-image: linear-gradient(180deg, transparent 8%, rgba(255,255,255,1) 65%)}
    .sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul li p {font-size: 18px}

    .promise-section {padding-top: 0; padding-bottom: 60px}
    .promise-section .row-service .nav-tabs li > a {padding: 12px 0 12px 24px}
    .promise-section .row-service .nav-tabs li > a.active::before {left: -2px; width: 3px}
    .promise-section .row-service .col-content {margin-top: 48px}
    .promise-section .row-service .col-content .tab-pane img {display: block; width: 100%}
    
    .smart-section {padding-bottom: 60px}
    .smart-section .row-smart-slide .col-txt-item h3 {font-size: 16px}
    .smart-section .row-smart-slide .col-txt-item p {font-size: 14px}
    .smart-section .row-smart-slide .col-txt-item ul {margin-top: 20px}
    .smart-section .row-smart-slide .col-txt-item ul li {font-size: 14px}
    .partner-section {padding-bottom: 80px}
}

@media (max-width: 616px) {
    .service-check-section .check-filters .selectric-wrapper, .service-check-section .check-filters .filter-input-group {display: block}
    .service-check-section .check-filters .selectric-wrapper {width: 100%; margin-bottom: 8px}
    .service-check-section .check-filters .filter-input-group {width: 100%; margin-bottom: 8px}
}

@media (max-width: 575px) {
    .table-list .cell-receipt {min-width: 100px}
    .table-list .cell-datetime {min-width: 140px}
    .table-list .cell-price {min-width: 130px}

    .sequence-section .row-sequence .col-item .vertical-slide-wrap .vertical-slide ul li {height: 220px}
    .smart-section .row-smart-slide .col-txt-item {margin-top: 32px}

    #addressAddModal .form-inline .form-input {width: auto}
}