/* static */
.payment-introduction-group {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px 0;
}

.info-guide-group {
    width: 100%;
    padding: 40px 30px;
    box-sizing: border-box;
    background-color: var(--colorGray100);
    border-radius: var(--borderRadiusXs);
}

.service-info-group {
    width: 100%;
    display: grid;
    align-items: flex-start;
    grid-template-columns: auto 1fr;
    gap: 0 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--colorGray200);
}

.service-info-group p {
    display: flex;
    align-items: center;
    gap: 0 14px;
    font-size: var(--fontSizeXl);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightLg);
}

.service-info-group span {
    font-size: var(--fontSizeMd);
    line-height: var(--lineHeightBase);
}

.info-guide-group .guide-box {
    padding: 20px 0 0 0;
    margin: 0;
}

.service-price-group {
    background: var(--colorWhite);
}

.service-price-group:first-child {
    border: 1px solid var(--colorSecondary);
}

.service-price-group:last-child {
    border: 1px solid var(--colorPrimary);
}

.service-title,
.service-price-group ul li {
    color: var(--colorBlack);
}

.service-price-group .btn {
    width: 100%;
}

/* static */


/* static-normal */
.static-normal-table tr {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.static-normal-table .select-area {
    width: 180px;
}

.detail-info-group {
    padding: 30px 0 20px;
    margin-top: 60px;
}

.info-content {
    display: flex;
    align-items: center;
    gap: 0 20px;
}

.info-content .input-label {
    width: 400px;
}

.point {
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightSm);
}

.method-group {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--colorGray200);
}

.total-price {
    width: 100%;
    padding: 20px 10px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0 20px;
}

.total-price p {
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightSm);
}

.amount {
    font-size: var(--fontSize4Xl);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeight3Xl);
    color: var(--colorPrimary);
}

.between-btn-group {
    width: 100%;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* static-normal */


/* dynamic-normal */
.dynamic-normal-table tr {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.dynamic-normal-table .select-area {
    width: 180px;
}

/* dynamic-normal */


/* static-billing */
.billing-table tr {
    grid-template-columns: 100px 1fr 1fr 1fr;
}

.billing-table td {
    gap: 0 5px;
}

/* static-billing */


/* ticket */
.ticket-table tr {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.table td .input-label {
    width: 180px;
}

.ticket-info-group {
    margin: 20px 0 30px;
    border: 0;
    padding: 40px 30px;
    background-color: var(--colorGray100);
    box-sizing: border-box;
    border-radius: var(--borderRadiusXs);
}

/* ticket */





/* responsive css */
@media screen and (min-width: 768px) and (max-width: 1279px) {

    /* static */
    .service-info-group {
        grid-template-columns: 1fr;
        gap: 16px 0;
    }

    .service-info-group span br {
        display: none;
    }

    /* static */


    /* static-normal */
    .static-normal-table tr {
        grid-template-columns: 1fr 1fr 100px 1fr 160px;
    }

    .static-normal-table .select-area {
        width: 100%;
    }

    .detail-info-group {
        padding: 20px 0;
        margin-top: 40px;
    }

    .amount {
        font-size: 36px;
        line-height: 50px;
    }

    .between-btn-group {
        margin-top: 20px;
    }

    /* static-normal */


    /* dynamic-normal */
    .dynamic-normal-table .select-area {
        width: 100%;
    }

    /* dynamic-normal */


    /* ticket */
    .ticket-info-group {
        margin: 20px 0;
    }

    /* ticket */
}

@media screen and (max-width: 767px) {

    /* static */
    .payment-introduction-group {
        margin-top: 12px;
        gap: 12px 0;
    }

    .info-guide-group {
        padding: 30px;
    }

    .service-info-group {
        grid-template-columns: 1fr;
        gap: 16px 0;
    }

    .service-info-group p {
        gap: 0 10px;
        font-size: var(--fontSizeLg);
        line-height: var(--lineHeightMd);
    }

    .service-info-group p img {
        width: 28px;
    }

    .service-info-group span {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightSm);
    }

    .service-info-group span br {
        display: none;
    }

    /* static */


    /* static-normal */
    .mo-normal-table li {
        align-items: flex-start !important;
        grid-template-columns: 1fr auto;
        gap: 10px 6px !important;
    }

    .mo-normal-table .select-area {
        grid-column: span 2;
        width: 100%;
    }

    .mo-normal-table .columns-grid {
        gap: 0;
    }

    .more-info-margin {
        margin-top: 4px;
    }

    .detail-info-group {
        padding: 20px 0;
        margin-top: 30px;
    }

    .info-content {
        justify-content: flex-end;
    }

    .column-li {
        grid-template-columns: 1fr !important;
        gap: 10px 0 !important;
    }

    .column-li .info-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px 0;
    }

    .info-content .input-label {
        width: 100%;
    }

    .point {
        align-self: flex-end;
    }

    .total-price {
        padding: 20px 0 0;
        justify-content: space-between;
    }

    .amount {
        font-size: var(--fontSize2Xl);
        line-height: var(--lineHeightXl);
    }

    .between-btn-group {
        margin-top: 20px;
        width: 100%;
        flex-direction: column;
        gap: 10px 0;
    }

    .between-btn-group .btn {
        width: 100%;
    }

    /* static-normal */


    /* static-billing */
    .mo-billing-table li {
        align-items: flex-start !important;
        grid-template-columns: 1fr auto;
        gap: 10px !important;
    }

    .mo-billing-table .check-label {
        grid-column: span 2;
    }

    .price-dc {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }

    .price-dc p {
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    /* static-billing */

    /* ticket */
    .mo-normal-table .input-label {
        grid-column: span 2;
        width: 100%;
    }

    .ticket-info-group {
        margin: 12px 0 30px;
        padding: 30px;
    }

    /* ticket */
}