.banner .banner-img {
    max-height: 51.25rem;
}

.categories-nav {
    height: 6.25rem;
    background-color: #fefefc;
    font-size: 1.25rem;
}

 .categories-nav .nav-link {
     color: #d6b53c;
}

 .categories-nav .active {
     color: #06cecb;
     font-family: MuliBold,sans-serif !important;
     border-bottom: 1px solid #06cecb;
}

.borderwrap{
    border: 1px solid #f2f1d6;
}

.product-number {
    font-size: 5rem;
    min-height: 10.5rem;
    color: #06cecb;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin-top: 3rem;
}

.product-number .tips {
    font-size: 1.25rem;
    color: #999;
    font-weight: 300;
}

.product-categories .imgdiv{
    height: 21.25rem;
}

.product-categories .img-text-wrap{
    width: 25rem;
    height: 2.625rem;
    background-color: #fefefe;
    color: #d6b53c;
    font-size: 1.625rem;
}

.product-categories .categories-type{
    font-size: 1.1rem;
    color: #999999;
}

.product-center-banner {
    margin: 5rem auto;
}

.product-info{
    width: 80%;
    margin: 5rem auto 0;
}

.product-trandy {
    background: url("/template/static/images/v2/products/product_bg_trendy.jpg") no-repeat;
    background-position-x: left;
    background-size: 85% 100%;
    background-origin: revert;
    height: 43.75rem;
}

.product-stationery {
    background: url("/template/static/images/v2/products/product_bg_stationery.jpg") no-repeat;
    background-position-x: right;
    background-size: 85% 100%;
    background-origin: revert;
    height: 43.75rem;
    margin: 5rem auto 0;
}

.product-accessories {
    background: url("/template/static/images/v2/products/product_bg_accessories.jpg") no-repeat;
    background-position-x: left;
    background-size: 85% 100%;
    background-origin: revert;
    height: 43.75rem;
    margin: 5rem auto 0;
}

.product-ipfamily {
    background: url("/template/static/images/v2/products/product_bg_ipfamily.jpg") no-repeat;
    background-position-x: right;
    background-size: 85% 100%;
    background-origin: revert;
    height: 43.75rem;
    margin: 5rem auto 0;
}

.product-series {
    background: url("/template/static/images/v2/products/product_bg_series.jpg") no-repeat;
    background-position-x: left;
    background-size: 85% 100%;
    background-origin: revert;
    height: 43.75rem;
    margin: 5rem auto;
}

.boxwrap {
    position: absolute;
    width: 35rem;
    height: 25rem;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
}

.boxwrap .title {
    color: #d6b53c;
    font-size: 3.25rem;
}

.boxwrap .tips {
    color: #d6b53c;
    font-size: 1.20rem;
}

.morewrap {
    height: 2.875rem;
    width: 10rem;
    border: 1px solid #999;
    font-size: 1.56rem;
    color: #999;
    /* 添加过渡效果 */
    cursor: pointer;
    transition: background-color 0.5s ease;

    &:hover{
        background: #27c8c3;
        border: 1px solid #27c8c3;
        color: #fff;
    }
}

/*ip start*/
.ip-banner {
    height: 800px;
}

.ip-story {
    height: 47.5rem;
    background: #f7f7f7;
}

.ip-story .ip-story-content {
    padding: 5.8125rem 5rem;
}

.ip-story .ip-story-content .left {
    max-width: 38%;
    padding-right: 5rem;
}

.ip-story .ip-story-content .left .title {
    font-size: 2.1rem;
    color: #d6b53c;
}

.ip-story .ip-story-content .right {
    width: 60%;
}

.ip-character {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1400px;
}

.ip-character .imgdiv-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50rem;
    perspective: 1000px;
    min-width: 1400px;
}

.ip-character .ip-character-imgdiv {
    /*width: 31.25rem;*/
    width: 24%;
    position: absolute;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transition: all 0.6s cubic-bezier(0.28, 0.84, 0.42, 1);
    cursor: pointer;
    transform-style: preserve-3d;
    transform: translateX(0) scale(0.8);
    z-index: 1;
    border-radius: 20px;
}

.ip-character .ip-character-imgdiv .img {
    border-radius: 20px;
}

.ip-character .ip-character-imgdiv:nth-child(1) {
    transform: translateX(-48rem) scale(0.8);
}

.ip-character .ip-character-imgdiv:nth-child(2) {
    transform: translateX(-25rem) scale(0.9);
}

.ip-character .ip-character-imgdiv:nth-child(3) {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 3;
}

.ip-character .ip-character-imgdiv:nth-child(4) {
    z-index: 2;
    transform: translateX(25rem) scale(0.9);
}

.ip-character .ip-character-imgdiv:nth-child(5) {
    transform: translateX(48rem) scale(0.8);
}

.ip-withus {
    height: 60.625rem;
    background: #f7f7f7;
}

.ip-withus .title {
    padding-top: 5rem;
    color: #d6b53c;
    font-size: 3.75rem;
}

.ip-withus .tips {
    padding-top: 2rem;
    color: #999999;
    font-size: 1.125rem;
}

.ip-withus .imgbox {
    width: 80%;
    margin: 0 auto;
    padding: 3rem 0;
}

.ip-withus .imgbox .imgdiv {
    width: 29.48%;
}

.ip-withus .imgbox .imgdiv img {
    border-radius: 20px;
}

.ip-withus .imgbox .imgdiv .img-text {
    bottom: 2.5rem;
    height: 5.25rem;
    width: 71.5%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #FFFFFF;
}

.img-text1 {
    background: #f8e44d;
}

.img-text2 {
    background: #74ded4;
}

.img-text3 {
    background: #eeb7fa;
}
/*ip end*/

/*theme start*/
.w-10 {
    width: 10%;
    min-width: 150px;
}

.text-wrap .title {
    color: #d6b53c;
    font-size: 2.5rem;
}

.text-wrap .tips {
    color: #999999;
    font-size: 1rem;
}

.original-icon {
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
}

.original-icon .tips {
    color: #d6b53c;
    font-size: 1rem;
}

.theme-imgdiv {
    width: 100%;
    height: 100%;
}

.theme-imgtext {
    height: 10rem;
}

.theme-imgtext .title {
    color: #d6b53c;
    font-size: 2.5rem;
}

.theme-imgtext .tips {
    color: #d6b53c;
    font-size: 1rem;
}

/*theme end*/

/*系列start*/
.series-banner {
    height: 34.375rem;
}

.series-nav {
    height: 100px;
}

.series-nav .nav-link {
    color: #d6b53c;
    font-size: 1.20rem;
    height: 100%;
}

.series-nav .active {
    color: #06cecb;
    font-size: 1.20rem;
    font-family: MuliBold, sans-serif !important;
    border-bottom: 2px solid #06cecb;
}

.series{
    width: 80%;
    margin: 0 auto;
}

.series-mid-banner {
    height: 46.25rem;
}

.series-wrap {
    margin: 0 auto 3rem;
}

.series-wrap .series-wrap-img {
    height: 43.75rem;
}

.spring-mid-wrap {
    height: 15rem;
    font-size: 2.125rem
}

.spring-text-title {
    font-size: 2.125rem;
    color: #d6b53c;
}
/*系列end*/


/*系列*/

.product-stationery-img{
    width: 80%;
    margin: 0 auto;
}

.product-stationery-text {
    height: 15.35rem;
}

.product-stationery-text .title {
    font-size: 2.525rem;
}

.product-stationery-img .mid-img-div {
    width: 49%;
}

.product-stationery-img .stationery-imgdiv {
    /*height: 36rem;*/
}

.vedio {
    background: url("/template/static/images/v2/vedio_background.jpg");
    background-size: 100%;
}

.vedio .vedio-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}


/*product-certified-story*/

.product-certified-story{
    width: 86%;
    margin: 0 auto;
    padding-top: 3rem;
}

.product-certified-story .left {
    width: 39.5%;
    height: 30rem;
    background: #f7f7f7;
}

.product-certified-story .left .content {
    height: 100%;
    width: 90%;
    margin: 0 auto;
    justify-content: center;
}

.product-certified-story .left .content .title {
    font-size: 2.2rem;
}

.product-certified-story .left .content .tips {
    color: #999999;
}

.product-certified-story .left .content img {
    height: 5.5rem;
}

.product-certified-story .right {
    width: 60.5%;
}

.warehouses{

    .warehouses-sqm{

        width: 86%;
        margin: 0 auto;

        .left{
            width: 34%;
            height: 34rem;
            background: #f7f7f7;
            .content{
                height: 100%;
                justify-content: center;
                align-items: center;
            }
        }

        .right{
            width: 66%;
        }
    }

    .warehouses-story-content {

        width: 86%;
        margin: 5rem auto 0;

        .left{
            order: 2;
            width: 43.5%;
            height: 40rem;
            .content{
                width: 80%;
                margin: 0 auto;
                text-align: justify;
                font-size: 1.85rem;
            }
        }

        .right{
            width: 56.5%;
            height: 44rem;
        }
    }

    .logistics{
        height: 55rem;
        margin-top: 5rem;
        background: #fff url("/template/static/images/v2/products/prduct_logistics_01.png") no-repeat;
        background-size: contain;

        .title-wrap{
            height: 12.5rem;
            width: 58%;
            margin: 0 auto
        }
    }
}


@media (max-width: 768px) {

    .categories-nav .w-50 {
        width: 100% !important;
    }

    .product-info{
        display: none;
    }

    .product-info-wap{
        display: flex !important;
        width: 90%;
        margin:0 auto;

        .text-box{
            height: 6.25rem;

            .text-wrap{
                font-size: 2.5rem;
            }

            .more-wrap{
                height: 30px;
                width: 60px;
                border: 1px solid #999;
            }
        }
    }

    .product-content .product-certified-story {

        flex-wrap: wrap;

        .left{
            width: 100%;
        }

        .right{
            width: 100%;
        }
    }

    .warehouses .warehouses-sqm {

        flex-wrap: wrap;

        .left{
            width: 100%;
        }

        .right{
            width: 100%;
        }
    }

    .warehouses .warehouses-story-content {

        flex-wrap: wrap;

        .left {
            width: 100%;
        }

        .right {
            width: 100%;
        }

    }

    .warehouses .logistics{

        height: auto;

        .title-wrap {
            width: 90%;
            margin: 0 auto 3rem;
        }

    }

    /*theme*/
    .original .text-wrap{

        width: 90%;
        margin: 0 auto;

        .title{
            font-size: 1.6rem;
            align-items: start !important;
        }

    }

    .original-icon {
        flex-wrap: wrap;
        width: 96%;
        margin: 0 auto;

        .w-10 {
            width: 30%;
            min-width: 90px;
            margin-bottom: 2rem;
        }

        .imgdiv{
            width: 6.25rem;
        }

    }

    .img-wrap{
        width: 96%;
        margin: 0 auto 2.5rem;

        .theme-imgtext{
            height: auto;
        }

        .title{
            font-size: 1.6rem;
        }

        .tips{
            width: 100%;
        }
    }

    /*theme*/

    .series-wrap .series-wrap-img {
        height: auto;
        width: 100%;
    }

    .series-mid-banner{
        height: auto;
    }

    .series-wrap{
        flex-wrap: wrap;
    }

    .series{
        width: 90%;
    }

    .ip-story {
        height: auto;
        background: #f7f7f7;
    }

    .ip-story .ip-story-content {
        padding: 2rem;
        flex-wrap: wrap;
    }

    .ip-story .ip-story-content .left {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        order: 2;
        font-size: 1.4rem;
    }

    .ip-story .ip-story-content .right {
        width: 100%;
    }

    .ip-withus{
        height: auto;
    }

    .ip-withus .imgbox {
        width: 96%;
        margin: 0 auto;
        flex-wrap: wrap;
        height: auto;
    }

    .ip-withus .imgbox .imgdiv {
        width: 100%;
        margin-bottom: 3rem;
    }

    .ip-character {

        min-width: auto;
    }

    .ip-character .imgdiv-wrap {
        min-width: auto;
        height: 44rem;
    }

    .ip-character .ip-character-imgdiv {
        /*width: 31.25rem;*/
        width: 80%;
    }

    .ip-character .ip-character-imgdiv:nth-child(1) {
        transform: translateX(-6rem) scale(0.8);
    }

    .ip-character .ip-character-imgdiv:nth-child(2) {
        transform: translateX(-4rem) scale(0.9);
    }

    .ip-character .ip-character-imgdiv:nth-child(3) {
        transform: translateX(0) scale(1);
        opacity: 1;
        z-index: 3;
    }

    .ip-character .ip-character-imgdiv:nth-child(4) {
        z-index: 2;
        transform: translateX(4rem) scale(0.9);
    }

    .ip-character .ip-character-imgdiv:nth-child(5) {
        transform: translateX(6rem) scale(0.8);
    }

    .product-stationery-img{
        width: 98%;
    }

}