.subscription {
}

    .subscription .page-banner {
        height: 30rem;
        display: flex;
        align-items: center;
    }

        .subscription .page-banner:after {
            background: linear-gradient(90deg, #1F1F1F00 0%, #2424243D 14%, #1F1F1FA3 29%, #141414 46%, #070707 100%);
        }

    .subscription .banner-wrapper {
        width: 50%;
        padding: 0 10%;
        margin-left: 50%;
        position: relative;
        z-index: 1;
    }

    .subscription .page-banner .banner-content {
        display: inline-block;
    }

    .subscription .page-banner .banner-title {
        color: var(--primary);
        font-size: 2.285rem;
        font-weight: 700;
    }

    .subscription .page-banner .banner-desc {
        margin-top: 1.7142857rem;
        color: #FFFFFF;
        font-size: 1rem;
    }

    .subscription .page-banner .banner-button-holder {
        margin-top: 2.14285rem;
    }

        .subscription .page-banner .banner-button-holder .but-click {
            width: 11.7857rem;
            margin-top: 0.714285rem;
            margin-right: 0.857rem;
        }

            .subscription .page-banner .banner-button-holder .but-click:last-child {
                margin-right: 0;
            }

        .subscription .page-banner .banner-button-holder .but-action {
            border: 1px solid #575757;
        }

    .subscription .inner-wrapper {
        max-width: 70rem;
        margin: 0 auto;
    }

    .subscription .subscribe-section {
        padding-top: 5.142857rem;
        padding-bottom: 7.42857rem;
    }

        .subscription .subscribe-section .section-title {
            font-size: 2.285rem;
            font-weight: 700;
            text-align: center;
        }

    /*----*/
    .subscription .plan-holder {
        margin: 2.5714rem 0 7.42857rem;
    }

        .subscription .plan-holder .plan-tab-holder {
            padding-left: 6.7857rem;
        }

            .subscription .plan-holder .plan-tab-holder .swiper {
                padding-bottom: 1.0714rem;
            }

            .subscription .plan-holder .plan-tab-holder .plan-tab {
                padding: 0.857rem 1.7142857rem;
                margin-right: 0.857rem;
                border: 1px solid #D9D9D9;
                color: var(--third-text);
                font-size: 1rem;
                font-weight: 700;
            }

                .subscription .plan-holder .plan-tab-holder .plan-tab:last-child {
                    margin-right: 0;
                }

                .subscription .plan-holder .plan-tab-holder .plan-tab.active {
                    background-color: var(--main);
                    border: 0 none;
                    color: #FFFFFF;
                }

        .subscription .plan-holder .plan-table {
            margin-top: 2rem;
            display: flex;
        }

            .subscription .plan-holder .plan-table .plan-type {
                height: 3.57rem;
            }

            .subscription .plan-holder .plan-table .plan-img {
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                height: 9.2857rem;
            }

            .subscription .plan-holder .plan-table .plan-price {
                height: 3.2857rem;
                padding: 0 1.4285rem;
            }

            .subscription .plan-holder .plan-table .plan-details {
                padding: 1.14285rem 1.4285rem 1.4285rem;
            }

                .subscription .plan-holder .plan-table .plan-details .plan-fleet {
                    height: 2.857rem;
                }

                .subscription .plan-holder .plan-table .plan-details .plan-addon {
                    height: 4.2857rem;
                    margin-top: 1.14285rem;
                }

                .subscription .plan-holder .plan-table .plan-details .but-submit {
                    width: 100%;
                    padding: 1rem;
                    margin-top: 3.142857rem;
                    border: 1px solid #575757;
                    color: var(--primary-text);
                    font-size: 1rem;
                    font-weight: 700;
                    text-align: center;
                }

                    .subscription .plan-holder .plan-table .plan-details .but-submit:hover {
                        background-color: var(--main);
                        color: #FFFFFF;
                    }


            .subscription .plan-holder .plan-table .plan-td-label {
                width: 6.7857rem;
                padding-top: 13.57rem;
                text-align: right;
                flex-shrink: 0;
            }

                .subscription .plan-holder .plan-table .plan-td-label > div {
                    padding-left: 0;
                    font-size: 1.14285rem;
                    font-weight: 600;
                }

                .subscription .plan-holder .plan-table .plan-td-label .plan-price {
                    line-height: 3.2857rem;
                }

            .subscription .plan-holder .plan-table .plan-td-panel {
                flex-grow: 1;
                display: flex;
            }

                .subscription .plan-holder .plan-table .plan-td-panel .swiper-wrapper {
                    padding: 0.714285rem 0;
                }

            .subscription .plan-holder .plan-table .plan-panel {
                background-color: #FFFFFF;
                width: 14.7142857rem;
                margin-right: 0.714285rem;
                border-radius: 0.357rem;
                box-shadow: 0 0.2142857rem 1.14285rem rgba(0,0,0,0.1);
                overflow: hidden;
                flex-shrink: 0;
            }

                .subscription .plan-holder .plan-table .plan-panel:last-child {
                    margin-right: 0;
                }

                .subscription .plan-holder .plan-table .plan-panel .plan-type {
                    background-color: #E0E0E0;
                    color: var(--primary-text);
                    font-size: 1.2857rem;
                    text-align: center;
                    line-height: 3.57rem;
                    font-weight: 600;
                }

                .subscription .plan-holder .plan-table .plan-panel .plan-price {
                    background-color: var(--primary);
                    color: var(--primary-text);
                    font-size: 1.14285rem;
                    font-weight: 700;
                    line-height: 3.2857rem;
                }

                .subscription .plan-holder .plan-table .plan-panel .plan-fleet {
                    color: var(--primary-text);
                    font-size: 1rem;
                    font-weight: 600;
                }

                .subscription .plan-holder .plan-table .plan-panel .plan-addon {
                    color: var(--primart-text);
                    font-size: 1rem;
                    opacity: 0.8;
                }

    .subscription .plan-error-note {
        margin-top: 1.14285rem;
        font-size: 1.14285rem;
        color: #8f8f8f;
        text-align: center;
    }

    /*----*/
    .subscription .subscription-inner-body {
        width: 100%;
    }

    /*----*/
    .subscription .why-holder {
        margin-top: 3.42857rem;
    }

        .subscription .why-holder .row {
            flex-wrap: wrap;
        }

        .subscription .why-holder .why-panel {
            width: 25%;
            margin-bottom: 2.857rem;
            flex-shrink: 0;
        }

            .subscription .why-holder .why-panel .why-icon {
                background-color: var(--main);
                background-size: 3.2142857rem;
                width: 6.857rem;
                height: 6.857rem;
                margin: 0 auto;
                border-radius: 50%;
            }

                .subscription .why-holder .why-panel .why-icon.icon-low-rate {
                    background-image: url("/images/icons/icon-why-low-rate.svg");
                }

                .subscription .why-holder .why-panel .why-icon.icon-commitment {
                    background-image: url("/images/icons/icon-why-commitment.svg");
                }

                .subscription .why-holder .why-panel .why-icon.icon-assistance {
                    background-image: url("/images/icons/icon-why-assistance.svg");
                }

                .subscription .why-holder .why-panel .why-icon.icon-hassle-free {
                    background-image: url("/images/icons/icon-why-hassle-free.svg");
                }

                .subscription .why-holder .why-panel .why-icon.icon-deposit {
                    background-image: url("/images/icons/icon-why-deposit.svg");
                }

                .subscription .why-holder .why-panel .why-icon.icon-flexi-plan {
                    background-image: url("/images/icons/icon-why-flexi-plan.svg");
                }

                .subscription .why-holder .why-panel .why-icon.icon-pay {
                    background-image: url("/images/icons/icon-why-pay.svg");
                }

                .subscription .why-holder .why-panel .why-icon.icon-road {
                    background-image: url("/images/icons/icon-why-road.svg");
                }

            .subscription .why-holder .why-panel .why-desc {
                margin-top: 1.4285rem;
                color: var(--primary-text);
                text-align: center;
                opacity: 0.8;
            }


    /*---*/
    .subscription .howto-section {
        background-color: #F5F5F5;
        padding-top: 3.142857rem;
        padding-bottom: 4.57rem;
    }

        .subscription .howto-section .howto-holder {
            margin-top: 3.42857rem;
            display: flex;
        }

        .subscription .howto-section .howto-divider {
            position: relative;
            flex-grow: 1;
        }

            .subscription .howto-section .howto-divider:before {
                width: 100%;
                border-top: 1px solid #D9D9D9;
                content: '';
                position: absolute;
                top: 3.42857rem;
                left: 0;
            }

        .subscription .howto-section .howto-panel {
            width: 10rem;
            flex-shrink: 0;
        }

            .subscription .howto-section .howto-panel .howto-icon {
                background-color: #FFFFFF;
                background-size: 3.42857rem;
                width: 6.857rem;
                height: 6.857rem;
                margin: 0 auto;
                border-radius: 50%;
                box-shadow: 1px 0.2142857rem 0.2857rem rgba(0,0,0,0.1);
            }

                .subscription .howto-section .howto-panel .howto-icon.icon-subscribe {
                    background-image: url("/images/icons/icon-howto-subscribe.svg");
                }

                .subscription .howto-section .howto-panel .howto-icon.icon-payment {
                    background-image: url("/images/icons/icon-howto-payment.svg");
                }

                .subscription .howto-section .howto-panel .howto-icon.icon-pickup {
                    background-image: url("/images/icons/icon-howto-pickup.svg");
                }

                .subscription .howto-section .howto-panel .howto-icon.icon-exchange {
                    background-image: url("/images/icons/icon-howto-exchange.svg");
                }


            .subscription .howto-section .howto-panel .howto-details {
                margin-top: 1.4285rem;
                color: var(--primary-text);
                text-align: center;
            }

                .subscription .howto-section .howto-panel .howto-details .details-title {
                    font-size: 1.14285rem;
                    font-weight: 700;
                }

                .subscription .howto-section .howto-panel .howto-details .details-desc {
                    margin-top: 0.857rem;
                    font-size: 1rem;
                    opacity: 0.8;
                }

    /*----*/
    .subscription .faq-section .anno-holder {
        max-width: 57.857rem;
        margin: 2.857rem auto 0;
    }


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

    .subscription .subscribe-section .section-title {
        font-size: 1.7142857rem;
    }

    /*---*/
    .subscription .page-banner {
        height: 28rem;
    }

        .subscription .page-banner .banner-title {
            font-size: 1.4285rem;
        }

        .subscription .page-banner .banner-desc {
            margin-top: 1rem;
        }

        .subscription .page-banner .banner-button-holder {
            margin-top: 1.0714rem;
        }

    /*---*/
    .subscription .why-holder {
        margin-top: 1.7142857rem;
    }

        .subscription .why-holder .why-panel {
            width: 33%;
            margin-bottom: 1.4285rem;
        }

            .subscription .why-holder .why-panel .why-desc {
                margin-top: 0.714285rem;
            }
}


@media only screen and (max-width: 640px) {
    .subscription .howto-section {
    }

        .subscription .howto-section .howto-holder {
            margin-top: 1.7142857rem;
            flex-wrap: wrap;
        }

        .subscription .howto-section .howto-divider {
            height: 3.57rem;
            margin: 0.714285rem;
        }

            .subscription .howto-section .howto-divider:before {
                width: 0;
                height: 100%;
                border-right: 1px solid #D9D9D9;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }

        .subscription .howto-section .howto-panel {
            width: 100%;
        }

            .subscription .howto-section .howto-panel .howto-details {
                margin-top: 0.714285rem;
            }

                .subscription .howto-section .howto-panel .howto-details .details-desc {
                    margin-top: 0.5714285rem;
                }
}


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

    .subscription .why-holder .why-panel {
        width: 50%;
    }
}