.package-page {
    max-width: 2560px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 0;
}

.package-page>.package-content {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    text-align: center;

    .preferential-title {
        margin: auto;
        /* width: auto; */
        border-radius: 32px 32px 32px 32px;
        /* border: 1px solid #EEEEEE; */
        margin-top: 24px;
        display: flex;
        align-items: center;
        column-gap: 8px;
        row-gap: 8px;
        /* background: #FFFFFF; */
        background: rgba(83, 41, 252, 0.1);
        padding: 8px 10px;
        display: inline-block;

        img {
            width: 16px;
            height: 16px;
        }

        span {
            font-weight: 500;
            font-size: 14px;
            color: #5329FC;
        }
    }
}

.package-page>.package-content>p {
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    color: #666666;
    margin-top: 8px;
}

.package-page>.package-content>h2 {
    font-weight: 400;
    font-size: 40px;
    color: #333333;
    text-align: center;
}

.package-page>.package-content>h1 {
    font-family: DM Sans, DM Sans;
    font-weight: 600;
    font-size: 48px;
    color: #000000;
    text-align: center;
    margin-top: 16px;
}

.package-page>.package-content>.tab-box {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    /* width: 178px; */
}

.package-page>.package-content>.tab-box>div {
    border: 1px solid #E5E5E5;
    padding: 3px;
    display: flex;
    align-items: center;
    border-radius: 3px;
}

.package-page>.package-content>.tab-box>div>.tab-left,
.tab-right {
    width: 100%;
    line-height: 38px;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    width: 81px;
    text-align: center;
    cursor: pointer;
}

.package-page>.package-content>.tab-box>div>.active {
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 5px;
}

.package-page>.package-content>.left-box {
    display: block;
    margin-top: 40px;
    max-width: 1440px;
    width: 100%;

    &>div {
        display: flex;
        column-gap: 20px;
        row-gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
}

.package-page>.package-content>.left-box>div>.left-box-item {
    border-radius: 7px 7px 7px 7px;
    border: 1px solid #E5E5E5;
    background: url('/static/common/package/img/static_package_BG.png') no-repeat;
    background-size: 100% auto;
    padding: 30px;
}

.package-page>.package-content>.left-box>div>.left-box-item:hover {
    background-image: url('/static/common/package/img/static_package_BG_hover.png');
}

.package-page>.package-content>.left-box>div>.left-box-item>div {
    /* max-width: 400px; */
    width: 400px;
    height: 270px;

    /* margin: 30px; */
    .left-box-item-head {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>h3 {
            font-weight: 600;
            font-size: 24px;
            color: #000000;
        }

        &>span {
            font-weight: 600;
            font-size: 15px;
            color: #0BAF63;
            background: rgba(11, 175, 99, 0.1);
            border-radius: 31px 31px 31px 31px;
            width: 98px;
            height: 32px;
            text-align: center;
            line-height: 32px;
        }
    }

    .left-box-item-content {
        margin-top: 56px;

        &>p {
            text-align: center;
            font-weight: 600;
            font-size: 15px;
            color: #333333;
            line-height: 18px;
            margin-top: 8px;
        }
    }

    .left-box-item-content>div {
        display: flex;
        align-items: flex-end;
        justify-content: center;

        &>p {
            font-weight: 600;
            font-size: 40px;
            color: #333333;
            line-height: 45px;
        }

        &>span {
            font-weight: 600;
            font-size: 20px;
            color: #333333;
            /* line-height: 45px; */
        }
    }

    .left-box-item-bottom {
        margin-top: 40px;

        &>p {
            text-align: center;
            font-weight: 600;
            font-size: 15px;
            color: #A09E9F;
            line-height: 18px;
            margin-bottom: 14px;
        }

        &>a {
            width: 100%;
            display: inline-block;
            text-align: center;
            line-height: 44px;
            font-weight: 600;
            font-size: 15px;
            color: #FFFFFF;
            height: 44px;
            background: #000000;
            border-radius: 4px 4px 4px 4px;
            transition: all 0.3;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* &>a:hover{ background-color: rgba(83,41,252,0.9); } */
    }
}

.package-page>.package-content>.right-box {
    /* display: none; */
    margin-top: 70px;

    &>div {
        display: flex;
        column-gap: 20px;
        row-gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.package-page>.package-content>.right-box>div>.right-box-item:last-child {
    &>.best-popular {
        background: linear-gradient(90deg, #273AFF 0%, #932CFF 31%, #FF4D20 66%, #FFB600 100%);
    }

    &>.right-box-item-interior {
        &>.right-box-item-bottom {
            a {
                background: linear-gradient(90deg, #273AFF 0%, #932CFF 31%, #FF4D20 66%, #FFB600 100%);
            }

            /* &>a:hover{ background-color: rgba(83,41,252,0.9); } */
        }
    }
}

.package-page>.package-content>.right-box>div>.right-box-item {
    border-radius: 7px 7px 7px 7px;
    border: 1px solid #E5E5E5;
    background: url('/static/common/package/img/static_package_BG.png') no-repeat;
    background-size: 100% auto;
    padding: 30px;
    position: relative;

    .best-popular {
        position: absolute;
        top: -25px;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 4px;
        text-align: center;
        background-color: #000000;
        color: #FFFFFF;
        border-radius: 6px 6px 0px 0px;
    }
}

.package-page>.package-content>.right-box>div>.right-box-item:hover {
    /* background-image: url('/static/common/package/img/static_package_BG_hover.png'); */
    /* background-color: #5329FC; */
    background-color: #F0EDFF;
    border: 1px solid #5329FC;

    &>.best-popular {
        background-color: #5329FC;
    }

   
}

.package-page>.package-content>.right-box>div>.right-box-item>.right-box-item-interior {
    width: 280px;
    height: 400px;
    box-sizing: border-box;

    /* margin: 30px; */
    &>.stepper {
        display: flex;
        column-gap: 4px;
        row-gap: 4px;
        margin-top: 40px;

        span {
            display: inline-block;
            color: #333333;
            font-size: 26px;
            min-width: 40px;
            min-height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #E5E5E5;
            cursor: pointer;
            user-select: none;
            background-color: #FFFFFF;
        }

        .stepper-value {
            width: calc(100% - 88px);
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #EEEEEE;
            font-weight: 600;
            font-size: 20px;
            color: #000000;
        }
    }

    &>.total-price {
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        color: #333333;
        margin-top: 40px;
    }

    .right-box-item-head {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>h3 {
            font-weight: 600;
            font-size: 24px;
            color: #000000;
        }

        &>span {
            font-weight: 600;
            font-size: 15px;
            color: #0BAF63;
            background: rgba(11, 175, 99, 0.1);
            border-radius: 31px 31px 31px 31px;
            width: 98px;
            height: 32px;
            text-align: center;
            line-height: 32px;
        }
    }

    .right-box-item-content {
        margin-top: 56px;

        &>p {
            text-align: center;
            font-weight: 600;
            font-size: 15px;
            color: #333333;
            line-height: 18px;
            margin-top: 8px;
        }

        &>h1 {
            font-weight: 600;
            font-size: 48px;
            color: #000000;
        }
    }

    .right-box-item-content>div {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        color: #5329FC;

        &>p {
            font-weight: 600;
            font-size: 40px;
            /* color: #333333; */
            line-height: 45px;
        }

        &>span {
            font-weight: 600;
            font-size: 20px;
            /* color: #333333; */
            /* line-height: 45px; */
        }
    }

    .right-box-item-bottom {
        margin-top: 40px;
        position: relative;

        &>p {
            text-align: center;
            font-weight: 600;
            font-size: 15px;
            color: #A09E9F;
            line-height: 18px;
            margin-bottom: 14px;
        }

        &>a {
            width: 100%;
            display: inline-block;
            text-align: center;
            line-height: 44px;
            font-weight: 600;
            font-size: 15px;
            color: #FFFFFF;
            height: 44px;
            background: #000000;
            border-radius: 4px 4px 4px 4px;
            transition: all 0.3;
            position: relative;
            transition: all .3s;
            /* border: 1px solid rgba(255, 255, 255, 0.2); */
        }

        a:hover::after {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            z-index: 999;
            top: 0;
            left: 0;
            border-radius: 4px;
            opacity: 0.2;
        }
    }

    /* .right-box-item-bottom:after {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000000;
        z-index: 999;
    } */
}

.package-page>.package-content>.package-title {
    max-width: 1440px;
    margin: auto;
    width: 100%;
    height: 239px;
    background: #101010;
    border-radius: 7px 7px 7px 7px;
    border: 1px solid #E5E5E5;
    color: #FFFFFF;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    &>.package-title-left {
        height: 100%;
        box-sizing: border-box;
        padding: 45px;

        &>h3 {
            font-weight: 600;
            font-size: 24px;
            color: #FFFFFF;
            margin-bottom: 13px;
        }

        &>div {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            column-gap: 60px;
            row-gap: 20px;
            margin-top: 23px;

            &>p {
                width: 368px;
                font-weight: 400;
                font-size: 15px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.package-page>.package-content>.package-introduce {
    max-width: 1440px;
    margin: auto;
    width: 100%;
    /* height: 239px; */
    box-sizing: border-box;
    background: #101010;
    border-radius: 16px 16px 16px 16px;
    /* background: linear-gradient(102deg, #101010 0%, #19234B 50%, #2E6A8A 100%); */
    background: linear-gradient(102deg, #2E6A8A 0%, #19234B 50%, #101010 100%);
    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.4);
    /* border-radius: 7px 7px 7px 7px; */
    /* border: 1px solid #E5E5E5; */
    border: 7px solid #101010;
    color: #FFFFFF;
    margin-top: 30px;
    /* display: flex; justify-content: space-between; */
    padding-left: 30px;

    .package-introduce-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 10px;
        row-gap: 10px;
        text-align: left;

        .introduce-content-item {
            display: flex;
            flex-direction: column;
            column-gap: 10px;
            row-gap: 10px;

            p {
                display: flex;
                align-items: center;
                column-gap: 6px;
                row-gap: 6px;

                img {
                    height: 16px;
                    width: 16px;
                }
            }
        }

        .buy-more-ip {
            &>p {
                font-weight: 500;
                font-size: 20px;
                color: #FFFFFF;
            }

            &>a {
                display: inline-block;
                background: #FFFFFF;
                border-radius: 10px;
                font-weight: 500;
                font-size: 16px;
                color: #101010;
                width: 140px;
                height: 38px;
                padding: 5px;
                margin-top: 15px;
                line-height: 38px;
                text-align: center;
                background-clip: content-box;
            }

            &>a:hover {
                padding: 0px;
                background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
                box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
                border: 5px solid rgba(255, 255, 255, 0.4);
                background-clip: content-box;
            }
        }
    }
}

.package-illustrate {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: linear-gradient(102deg, #101010 0%, #19234B 50%, #2E6A8A 100%);
    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.4);
    border-radius: 16px 16px 16px 16px;
    border: 7px solid #101010;
    margin-top: 23px;

    &>div {
        text-align: center;
        background: url('/static/common/package/img/Group\ 1171275822@2x.png') no-repeat;
        background-size: 100% 100%;

        &>.package-illustrate-content {
            &>p {
                text-align: center;
                font-size: 18px;
                color: #FFFFFF;
                font-weight: 500;
                margin-top: 40px;
            }

            &>.illustrate-content {
                width: 680px;
                max-width: 100%;
                margin: auto;
                display: flex;
                flex-wrap: wrap;
                column-gap: 18px;
                row-gap: 18px;
                justify-content: space-between;
                margin-top: 40px;

                &>.illustrate-content-item {
                    width: 200px;
                    display: flex;
                    align-items: center;
                    column-gap: 8px;
                    row-gap: 8px;
                    font-weight: 400;
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.6);

                    &>img {
                        width: 16px;
                        height: 16px;
                    }
                }
            }

            &>.package-contact-button {
                display: inline-block;
                text-align: center;
                background-color: #FFFFFF;
                color: #333333;
                border-radius: 10px;
                font-weight: 700;
                font-size: 16px;
                margin: 50px;
                cursor: pointer;
                padding: 5px;
                width: 150px;
                height: 38px;
                line-height: 38px;
            }

            &>.package-contact-button:hover {
                color: #000000;
                padding: 0px;
                background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
                box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
                border: 5px solid rgba(255, 255, 255, 0.4);
                background-clip: content-box;
            }
        }
    }
}

.unlimited-bandwidth-title {
    max-width: 1440px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #EEEEEE;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 80px;
    column-gap: 30px;
    row-gap: 30px;

    .bandwidth-title-left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .bandwidth-title-right {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 30px;
        row-gap: 30px;

        .title-box {
            display: flex;
            flex-direction: column;
            column-gap: 20px;
            row-gap: 20px;
        }

        .title-item {
            display: flex;
            width: 350px;
            align-items: center;
            column-gap: 8px;
            row-gap: 8px;
            font-size: 14px;
            color: #333333;
        }
    }
}

.black-button {
    &>a {
        width: 100%;
        display: inline-block;
        text-align: center;
        line-height: 44px;
        font-size: 15px;
        color: #FFFFFF;
        height: 44px;
        background: #000000;
        border-radius: 4px 4px 4px 4px;
        transition: all 0.3;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
}

.hot-country {
    margin: 80px 0;

    h2 {
        font-weight: 600;
        font-size: 40px;
        color: #333333;
    }

    &>div {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 20px;
        margin-top: 40px;
        max-width: 100%;

        .hot-country-item {
            display: flex;
            justify-content: space-between;
            max-width: 100%;

            &>div {
                display: flex;
                align-items: center;
                column-gap: 6px;
                row-gap: 6px;
                width: 223px;
                max-width: 100%;
                border-radius: 10px;
                box-sizing: border-box;
                border: 1px solid #EEEEEE;
                padding: 12px;

                img {
                    width: 40px;
                    height: 40px;
                }
            }
        }
    }

}

.faq-list-cont {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    margin-bottom: 54px;
    margin-top: 100px;
    background: #fff;
    padding: 100px 20px;
    text-align: left;
}

.faq-list-cont>h2 {
    font-weight: bold;
    font-size: 40px;
    color: #000000;
    line-height: 48px;
    text-align: center
}

.faq-list-cont>.faq-list {
    border-bottom: 1px solid #CCCCCC;
    padding: 14px 0;
    cursor: pointer;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto
}

.faq-list-cont>.faq-list.on>div:nth-of-type(1)>span {
    transform: rotate(180deg)
}

.faq-list-cont>.faq-list>div:nth-of-type(1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0
}

.faq-list-cont>.faq-list>div:nth-of-type(1)>p {
    font-weight: bold;
    font-size: 20px;
    color: #09162E;
    line-height: 24px
}

.faq-list-cont>.faq-list>div:nth-of-type(1)>span {
    width: 48px;
    height: 48px;
    background: url(../img/faq_select.png) no-repeat center center;
    background-size: cover;
    cursor: pointer
}

.faq-list-cont>.faq-list>div.faq-answer {
    display: none;
    font-size: 16px;
    color: rgba(3, 0, 87, 0.4);
    line-height: 22px;
    text-align: left;
}

@media screen and (max-width: 450px) {
    .package-page>.package-content>.right-box>div>.right-box-item {
        width: 100%;
        text-align: center;
    }

    .package-page>.package-content>.right-box>div>.right-box-item>.right-box-item-interior {
        width: 100%;
        box-sizing: border-box;

        /* margin: 10px; */
        .left-box-item-bottom {
            a {
                width: 100%;
                box-sizing: border-box;
            }
        }
    }

}

@media screen and (max-width: 1440px) {
    .package-page {
        box-sizing: border-box;
        padding: 80px 20px;

        .package-title-left {
            width: 100%;

            &>h3 {
                width: 100%;
            }

            &>div {
                width: 100%;

                &>p {
                    width: 100%;
                }
            }
        }
    }

    .package-page>.package-content>.left-box>div>.left-box-item {
        width: 100%;
        text-align: center;
    }

    .package-page>.package-content>.left-box>div>.left-box-item>div {
        width: 100%;
        box-sizing: border-box;

        /* margin: 10px; */
        .left-box-item-bottom {
            a {
                width: 100%;
                box-sizing: border-box;
            }
        }
    }

    .package-page>.package-content>.right-box>div>.right-box-item {
        /* width: 100%; */
        text-align: center;
    }

    .package-page>.package-content>.right-box>div>.right-box-item>.right-box-item-interior {
        /* width: 100%; */
        box-sizing: border-box;

        /* margin: 10px; */
        .left-box-item-bottom {
            a {
                width: 100%;
                box-sizing: border-box;
            }
        }
    }

    .package-page>.package-content>.package-introduce {
        padding: 0px;

        &>.package-introduce-content {
            flex-wrap: wrap;
            /* justify-content: center; */
            padding: 10px;

            .introduce-content-item {
                width: 100%;
                /* p{ justify-content: center; } */
            }

            &>img {
                /* width: 100%; height: auto; */
                display: none;
            }

            .buy-more-ip {
                width: 100%;

                &>a {
                    width: 100%;
                    /* box-sizing: border-box; */
                    text-align: center;
                }
            }
        }
    }

    .faq-list-cont>.faq-list>div:nth-of-type(1)>span {
        width: 30px;
        height: 30px;
    }
}