.content-section .content-inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px 0;
}


/* static */
.service-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px 0;
}

.service-group .title-group {
    gap: 12px 0;
}

.service-group>.title-group .group-title {
    text-align: left;
}

.service-box {
    width: auto;
}

.service-box ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0 20px;
}

.service-box ul li {
    width: auto;
    background-color: var(--colorPrimary100);
    border: 1px solid var(--colorPrimary);
    box-sizing: border-box;
    border-radius: var(--borderRadiusSm);
    transition: background-color .5s;
}

.service-box ul li a {
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px 0;
}

.service-box .title-group {
    text-align: center;
}
/* static */


/* static-normal */
.payment-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px 0;
}

.payment-list-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px 0;
}

.payment-list-group>.group-title {
    text-align: left;
}

.period-select-area .select-box {
    grid-template-columns: auto 1fr 16px;
}

.select-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: var(--fontSizeSm);
    color: var(--colorPrimary);
    font-weight: var(--fontWeightBold);
}

.total-amount {
    width: 100%;
    border: 2px solid var(--colorPrimary);
    background-color: var(--colorPrimary100);
    border-radius: var(--borderRadiusSm);
    box-sizing: border-box;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total-amount>p {
    font-size: var(--fontSizeMd);
    line-height: var(--lineHeightMd);
    font-weight: var(--fontWeightBold);
}

.amount-price {
    display: flex;
    align-items: center;
    gap: 0 10px;
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightBase);
    color: var(--colorGray400);
}

.amount-price span {
    font-size: var(--fontSize2Xl);
    font-weight: var(--fontWeightExtrabold);
    line-height: var(--lineHeight2Xl);
    color: var(--colorBlack);
}

.btn-group {
    display: flex;
}

/* static-normal */


/* static-billing */
.billing-period {
    width: 100%;
    height: 48px;
    border: 1px solid var(--colorGray200);
    border-radius: var(--borderRadiusXs);
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.billing-period span {
    font-size: var(--fontSizeSm);
    line-height: var(--lineHeightSm);
    font-weight: var(--fontWeightBold);
    color: var(--colorGray500);
}

/* static-billing */


/* ticket */
.ticket-group {
    width: 100%;
    padding: 24px 30px;
    box-sizing: border-box;
    background-color: var(--colorGray100);
    border-radius: var(--borderRadiusSm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ticket-group>p {
    font-size: var(--fontSizeMd);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightMd);
}

.count-group {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0 8px;
    font-size: var(--fontSizeSm);
    line-height: var(--lineHeightSm);
}

.count-group .input-label {
    width: 330px;
}

/* ticket */





@media (hover: hover) and (pointer: fine) {
    .service-box ul li:hover {
        background-color: var(--colorPrimary);
    }

    .service-box ul li:hover .group-title,
    .service-box ul li:hover .desc {
        color: var(--colorWhite);
    }

    .service-box ul li:hover .btn {
        background-color: var(--colorWhite);
        border: 1px solid var(--colorGray200);
        color: var(--colorBlack);
    }
}





/* responsive css */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .service-group .title-group {
        gap: 8px 0;
    }

    .service-box ul {
        gap: 0 10px;
    }

    .service-box ul li a {
        width: 100%;
        padding: 60px 30px 40px;
    }

    .service-box ul li a img {
        width: 60px;
    }

    .service-box .group-title{
        font-size: var(--fontSizeLg);
        line-height: var(--lineHeightLg);
    }
    /* static */


    /* static-normal */
    .total-amount {
        padding: 22px 30px;
    }

    .amount-price {
        gap: 0 6px;
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .amount-price span {
        font-size: var(--fontSizeXl);
        line-height: var(--lineHeightXl);
    }
    /* static-normal */
}

@media screen and (max-width: 767px) {
    .content-section .content-inner {
        gap: 30px 0;
    }


    /* static */
    .service-group {
        gap: 20px 0;
    }

    .service-group .title-group {
        gap: 12px 0;
    }

    .service-box ul {
        grid-template-columns: 1fr;
        gap: 10px 0;
    }

    .service-box ul li a {
        padding: 40px 20px 30px;
    }

    .service-box ul li a>img {
        width: 60px;
    }

    .service-box ul li a .btn {
        width: 100%;
    }

    /* static */


    /* static-normal */
    .payment-list-group {
        gap: 20px 0;
    }

    .period-select-area {
        width: auto;
    }

    .total-amount {
        padding: 24px 20px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px 0;
    }

    .total-amount>p {
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .amount-price {
        gap: 0 6px;
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .amount-price span {
        font-size: var(--fontSizeXl);
        line-height: var(--lineHeightXl);
    }

    .btn-group {
        width: 100%;
    }

    /* static-normal */


    /* ticket */
    .ticket-group {
        padding: 24px 20px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px 0;
    }

    .ticket-group>p {
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .count-group {
        width: auto;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .count-group .input-label {
        width: auto;
    }

    /* ticket */
}