/* 产品中心 */
.y-products{
    position: relative;
}
.products-head{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.products-title{
    position: relative;
    width: 50%;
    background-color: #f5f5f5;
}
.products-title .bread{
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 16%;
    margin-left: 12%;
    width: 80%;
}
.products-title .bread .build{
    display: inline-block;
    width: 2%;
    height: 100%;
    margin-right: 2%;
}
.products-title .bread .breadword{
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 1.4%;
    position: relative;
}
.products-title .bread .breadword i.iconfont.icon-a-11 {
    color: #333;
    font-family: Roboto;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.products-title img{
    width: 100%;
    height: 100%;
}
.products-title-txt{
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 12%;
    width: 80%;
}
.products-txt-tit {
    margin-top: 2%;
}
.products-txt-tit h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 50px */
    text-transform: capitalize;
}
.products-txt-tit h3>span{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-transform: capitalize;
}
.products-txt-cont {
    position: relative;
    width: 90%;
}
.products-txt-cont p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
}
.products-txt-btns{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-top: 4%;
}
.products-txt-btn:first-child{
    width: 42%;
}
.products-txt-btn:first-child>a{
    padding-left: 10%;
    padding-top: 4%;
    color: #fff;
    background: #8E0F0F;
}
.products-txt-btn{
    position: relative;
    width: 52%;
}
.products-txt-btn a i.iconfont.icon-a-11 {
    position: absolute;
    right: 8%;
    top: 26%;
    font-size: 12px;
    font-weight: 500;
}
.products-txt-btn>a{
    position: relative;
    display: inline-block;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 20px */
    border: 1px solid #8E0F0F;
    color: #8E0F0F;
    position: relative;
    padding: 3% 14% 3% 8%;
    width: 100%;
    height: 100%;
    transition: all .3s;
}
.products-txt-btn:first-child>a:hover{
    background: #fff;
    color: #8E0F0F;
}
.products-txt-btn>a:hover{
    background: #8E0F0F;
    color: #FFF;
}
.products-content{
    position: relative;
}
.products-box{
    display: flex;
    align-items: center;
    margin-top: 8%;
}
.products-box:first-child .products-content-img{
    position: absolute;
    right: 0;
    z-index: 1;
}
.products-box:first-child .products-content-img img{
    width: 80%
}
.products-box:nth-child(2n){
    flex-direction: row-reverse;
    margin-top: 10%;
}
.products-box:nth-child(2n) .products-content-txt{
    padding: 0 8%;
}
.products-box:nth-child(2n) .products-content-txt .products-content-txt-tit h3 span{
    display: block;
    margin-bottom: 4%;
}
.products-box:nth-child(2n) .products-content-txt .products-content-txt-tit h3 {
    width: 90%;
}
.products-box:nth-child(2n) .products-content-txt .products-content-txt-cont{
    width: 95%;
}
.products-box:nth-child(2n) .products-content-txt .products-content-txt-cont p {
    width: 90%;
}
.products-content-txt{
    width: 56%;
    padding: 0% 6%;
    z-index: 10;
}
.products-content-txt-tit{
    width: 100%;
}
.products-content-txt-tit h3{
    color: #333;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 60px */
    text-transform: capitalize;
}
.products-content-txt-tit h3>span{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-transform: capitalize;
}
.products-content-txt-cont{
    width: 100%;
}
.products-content-txt-cont p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin: 0;
}
.products-content-txt-cont p:last-child{
    margin-top: 2%;
}
.products-content-txt-un{
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-top: 3%;
}
.products-content-txt-un-cont{
    display: flex;
    position: relative;
    width: 35%;
    flex-direction: column;
    margin-right: 7%;
}
.products-content-txt-un-btn{
    width: 40.5%;
    position: relative;
}
.products-content-txt-un-btn>a{
    display: block;
    background: #8E0F0F;
    position: relative;
    border: 1px solid #8E0F0F;
    color: #fff;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 20px */
    padding: 4% 9%;
    width: 100%;
    height: 100%;
    transition: all .3s;
    box-sizing: border-box;
}
.products-content-txt-un-btn a i.iconfont.icon-a-11 {
    position: absolute;
    right: 10%;
    font-size: 12px;
    font-weight: 400;
}
.products-content-txt-un-btn>a:hover{
    background: #fff;
    color: #8E0F0F;
}
.procont-txt-cont{
    margin-top: 2%;
}
.procont-txt-cont>li{
    list-style: disc;
    color: #333;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-transform: capitalize;
}
.procont-txt-cont>li p{
    color: #333;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 21px */
    text-transform: capitalize;
    display: inline;
    margin-left: -3%;
}
.products-content-img{
    width: 51%;
}
.products-content-img img{
    width: 105%;
    height: 100%;
}
.tailored{
    position: relative;
    margin-top: 8%;
    padding: 7% 6%;
    background-image: url(../img/productsbg4.webp);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.tailored-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 44px */
}
.tailored-txt p{
    color: #FFF;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 22px */
}
.tailored-btns{
    position: relative;
    margin-top: 4%;
}
.tailored-btns>.tailored-btn:first-child{
    width: 11.5%;
}
.tailored-btn{
    color: #333;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 17.6px */
    transition: all .3s;
    text-align: center;
}
.tailored-btn:first-child>a{
    padding-top: 8.2%;
    color: #fff;
    background: #8E0F0F;
}
.tailored-btn:first-child>a:hover{
    color: #333;
    background-color: #fff;
}
.tailored-btn>a{
    position: relative;
    display: block;
    color: #333;
    background-color: #fff;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 17.6px */
    width: 100%;
    height: 100%;
    padding: 8% 9%;
    transition: all .3s;
}
.tailored-btn a i.iconfont.icon-a-11 {
    position: absolute;
    right: 8%;
    font-size: 12px;
    font-weight: 500;
}
.tailored-btn:hover{
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 17.6px */
}
.tailored-btn:hover>a{
    color: #fff;
    background: #8E0F0F;
}
.cat-type{
    position: relative;
    display: flex;
    margin-top: 6%;
    padding: 0 6%;
    align-items: center;
}
.cat-type-content{
    position: relative;
    width: 50%;
}
.cat-type-txt{
    display: flex;
    flex-direction: column;
    padding-right: 2%;
}
.cat-type-txt h3{
    color: #333;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    margin: 0;
    margin-bottom: 3%;
}
.cat-type-txt h3 span{
    color: #760D0D;
}
.cat-type-txt p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    margin-top: 1%;
}
.cat-type-txt p:nth-child(8),
.cat-type-txt p:last-child{
    font-weight: 600;
}
.cat-type-content img{
    width: 100%;
}
.customization{
    margin-top: 5%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 6%;
}
.customization-title h3{
    color: #333;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    margin: 0;
}
.customization-txt {
    width: 60%;
}
.customization-txt p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    margin-top: 1%;
}
.customization-btns{
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 60%;
    margin-top: 2%;
}
.customization-btn{
    transition: all .3s;
    box-sizing: border-box;
    width: 31%;
}
.customization-btn>a{
    position: relative;
    display: block;
    color: #000;
    font-family: Lato;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 38.5px */
    text-transform: capitalize;
    border: 1px solid #fff;
    background-color: #F5F5F5;
    border-radius: 14px;
    padding: 5.5% 0% 5.5% 30%;
    transition: all .3s;
}
.customization-btn>a span{
    display: block;
    position: absolute;
    left: 7%;
    top: 10%;
    background-image: url(../img/customization-label.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 56px;
    height: 56px;
}
.customization-btn:nth-child(1)>a span{
    background-image: url(../img/customization-color.webp);
}
.customization-btn:nth-child(3)>a span{
    background-image: url(../img/customization-size.webp);
}
.customization-btn>a.customization-on{
    border-color: #8E0F0F;
    color: #8E0F0F;
}
.customization-btn a:hover{
    color: #8E0F0F;
}
.customization-color,
.customization-Label,
.customization-Size{
    position: relative;
    width: 100%;
    margin-top: 3%;
}
.customization-color-title h4,
.customization-Label-title h4,
.customization-Size-title h4{
    color: #333;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
}
.customization-color-txt p,
.customization-Label-txt p,
.customization-Size-txt p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 20px */
}
.customization-color-content,
.customization-Label-content,
.customization-Size-content{
    width: 95%;
    margin-top: 1%;
}
.customization-color-content img,
.customization-Label-content img,
.customization-Size-content img{
    width: 100%;
}
.products-swiper-box{
    position: relative;
    width: 100%;
    margin-top: 4%
}
.products-swiper-box .products-swipers:first-child{
    background-color: #f5f5f5;
}
.products-swiper-box .products-swipers:first-child h3{
    color: #333;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 60px */
    text-transform: capitalize;
}
.products-swiper-box:first-child .products-swiper-txt p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    width: 90%;
}
.products-swiper-box .products-swipers:last-child h3>span{
    color: #333;
}
.products-swipers{
    position: relative;
    padding: 4% 6% 5%;
}
.products-swiper-title h4{
    color: #333;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 24px */
    margin: 1% 0;
}
.products-swiper-title h3{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    margin: 0;
}
.products-swiper-txt{
    width: 64%;
}
.products-swiper-txt p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
}
.products-swiper-box .products-swipers:first-child .products-swiper-txt{
    width: 68%;
}
.products-swiper-box .products-swipers:last-child .products-swiper-txt{
    width: 68%;
}
.products-swiper-box .products-swipers:first-child .products-swiper-txt p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin-top: 1%;
}
.products-swiper-box .products-swipers:last-child .products-swiper-txt p{
    color: rgba(51, 51, 51, 0.50);
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-transform: capitalize;
    margin-top: 2%;
}
.products-swiper,
.products-first-swiper,
.products-last-swiper
{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}
.products-swiper{
    margin-top: 2%;
}
.products-first-swiper{
    margin-top: 0;
}
.products-last-swiper{
    margin-top: 3%;
}
.products-swiper-cont{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.products-swiper-cont img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.products-swiper-cont p{
    color: #222;
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.products-swipers .products-swiper-next,
.products-swipers .products-swiper-lastnext,
.products-swipers .products-swiper-firstnext{
    top: 60%;
    color: #8E0F0F;
    background-color: #fff;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.products-swipers .products-swiper-firstprev,
.products-swipers .products-swiper-prev,
.products-swipers .products-swiper-lastprev{
    top: 60%;
    color: #fff;
    background-color: #8E0F0F;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.products-swipers .products-swiper-next:hover,
.products-swipers .products-swiper-lastnext:hover,
.products-swipers .products-swiper-firstnext:hover,
.story-delivered .story-delivered-next:hover,
.story-explore .story-explore-next:hover,
.factory-expanded .factory-expanded-next:hover{
    color: #fff;
    background-color: #8E0F0F;
}
.products-swipers .products-swiper-firstprev:hover,
.products-swipers .products-swiper-prev:hover,
.products-swipers .products-swiper-lastprev:hover,
.story-delivered .story-delivered-prev:hover,
.story-explore .story-explore-prev:hover,
.factory-expanded .factory-expanded-prev:hover{
    color: #8E0F0F;
    background-color: #fff;
}
.products-swipers .products-swiper-next,
.products-swipers .products-swiper-firstnext,
.products-swipers .products-swiper-lastnext,
.story-delivered .story-delivered-next,
.story-explore .story-explore-next,
.factory-expanded .factory-expanded-next{
    right: 1.5%;
    padding-left: .2%;
}
.products-swipers .products-swiper-prev,
.products-swipers .products-swiper-firstprev,
.products-swipers .products-swiper-lastprev,
.story-delivered .story-delivered-prev,
.story-explore .story-explore-prev,
.factory-expanded .factory-expanded-prev{
    left: 1.5%;
    padding-right: .2%;
}
.products-swipers .products-swiper-next::after,
.products-swipers .products-swiper-prev::after,
.products-swipers .products-swiper-lastnext::after,
.products-swipers .products-swiper-firstnext::after,
.products-swipers .products-swiper-lastnext::after,
.products-swipers .products-swiper-firstprev::after,
.products-swipers .products-swiper-lastprev::after,
.story-delivered .story-delivered-next::after,
.story-explore .story-explore-next::after,
.story-delivered .story-delivered-prev::after,
.story-explore .story-explore-prev::after,
.factory-expanded .factory-expanded-next::after,
.factory-expanded .factory-expanded-prev::after,
.y-office-upgrade .upgrade-content-next::after,
.y-office-upgrade .upgrade-content-prev::after{
    font-size: 2.2rem;
}



/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .products-txt-tit h3,
    .products-content-txt-tit h3,
    .tailored-title h3,
    .customization-title h3,
    .customization-color-title h4,
    .customization-Label-title h4,
    .customization-Size-title h4,
    .products-swiper-title h3,
    .products-swiper-title h4 {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .products-title .bread,
    .products-title .bread .breadword,
    .products-txt-cont p,
    .products-txt-btn>a,
    .products-content-txt-cont p,
    .products-content-txt-un-btn>a,
    .procont-txt-cont>li,
    .procont-txt-cont>li p,
    .tailored-txt p,
    .tailored-btn,
    .tailored-btn>a,
    .customization-txt p,
    .customization-btn>a,
    .customization-color-txt p,
    .customization-Label-txt p,
    .customization-Size-txt p,
    .products-swiper-txt p,
    .products-swiper-cont p {
        font-size: 14px !important;
    }
    
    /* i标签特殊处理，平板端为8px */
    .products-title .bread .breadword i.iconfont.icon-a-11,
    .products-txt-btn a i.iconfont.icon-a-11,
    .products-content-txt-un-btn a i.iconfont.icon-a-11,
    .tailored-btn a i.iconfont.icon-a-11 {
        font-size: 8px !important;
    }

    /* 布局调整 */
    .products-head {
        flex-direction: column;
    }
    .products-title {
        width: 100%;
    }
    .products-content-txt {
        width: 100%;
        padding: 5% 6%;
    }
    .products-content-img {
        width: 100%;
    }
    .products-box {
        flex-direction: column;
    }
    .products-box:first-child .products-content-img {
        position: relative;
    }
    .customization-btns {
        width: 90%;
    }
    .customization-txt {
        width: 90%;
    }
    .products-swiper-txt {
        width: 100%;
    }
    .tailored-btns>.tailored-btn:first-child {
        width: 20%;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .products-txt-tit h3,
    .products-content-txt-tit h3,
    .tailored-title h3,
    .customization-title h3,
    .customization-color-title h4,
    .customization-Label-title h4,
    .customization-Size-title h4,
    .products-swiper-title h3,
    .products-swiper-title h4 {
        font-size: 16px !important;
    }
    
    /* 其他字体改为8px */
    .products-title .bread,
    .products-title .bread .breadword,
    .products-txt-cont p,
    .products-txt-btn>a,
    .products-content-txt-cont p,
    .products-content-txt-un-btn>a,
    .procont-txt-cont>li,
    .procont-txt-cont>li p,
    .tailored-txt p,
    .tailored-btn,
    .tailored-btn>a,
    .customization-txt p,
    .customization-btn>a,
    .customization-color-txt p,
    .customization-Label-txt p,
    .customization-Size-txt p,
    .products-swiper-txt p,
    .products-swiper-cont p {
        font-size: 8px !important;
    }
    
    /* i标签特殊处理，手机端为4px */
    .products-title .bread .breadword i.iconfont.icon-a-11,
    .products-txt-btn a i.iconfont.icon-a-11,
    .products-content-txt-un-btn a i.iconfont.icon-a-11,
    .tailored-btn a i.iconfont.icon-a-11 {
        font-size: 4px !important;
    }
    .products-txt-tit h3>span{
        font-size: 22px;
    }
    .products-content-txt-tit h3>span{
        font-size: 24px;
    }
    /* 布局调整 */
    .products-head {
        flex-direction: column;
    }
    .products-title {
        width: 100%;
    }
    .products-title .bread,
    .products-title-txt {
        margin-left: 5%;
        width: 90%;
    }
    .products-txt-btns {
        flex-direction: column;
        width: 100%;
    }
    .products-txt-btn,
    .products-txt-btn:first-child {
        width: 100%;
        margin-bottom: 3%;
    }
    .products-box {
        flex-direction: column;
        margin-top: 15%;
    }
    .products-box:nth-child(2n){
        flex-direction: column;
    }
    .products-box:first-child .products-content-img {
        position: relative;
    }
    .cat-type{
        flex-direction: column;   
    }
    .cat-type-content{
        width: 100%;
    }
    .cat-type-txt h3{
        font-size: 24px;
    }
    .cat-type-txt h3 p{
        font-size: 12px;
        margin: 0;
    }
    .products-content-txt {
        width: 100%;
        padding: 5% 3%;
    }
    .products-content-img{
        width: 100%;
    }
    .products-content-img img{
        width: 100%;
    }
    .products-content-txt-un {
        flex-direction: column;
    }
    .products-content-txt-un-cont,
    .products-content-txt-un-btn {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5%;
    }
    .customization-btn>a span{
        top: 20%;
        width: 30px;
        height: 30px;
    }
    .tailored {
        padding: 10% 5%;
        background-size: cover;
    }
    .tailored-btns {
        flex-direction: column;
    }
    .tailored-btns>.tailored-btn:first-child {
        width: 35%;
        margin-bottom: 3%;
    }
    .customization {
        padding-left: 3%;
    }
    .customization-btns {
        flex-direction: column;
        width: 100%;
    }
    .customization-btn {
        width: 100%;
        margin-bottom: 3%;
    }
    .customization-txt {
        width: 100%;
    }
    .products-swiper,
    .products-first-swiper,
    .products-last-swiper {
        flex-wrap: wrap;
    }
    .products-swiper-cont {
        width: 48%;
        margin-bottom: 5%;
    }
    .products-swipers .products-swiper-next,
    .products-swipers .products-swiper-prev,
    .products-swipers .products-swiper-lastnext,
    .products-swipers .products-swiper-firstnext,
    .products-swipers .products-swiper-firstprev,
    .products-swipers .products-swiper-lastprev {
        display: none;
        width: 40px;
        height: 40px;
    }
}


/* 产品详情 */
.product{
    position: relative;
    width: 100%;
}
.product-head{
    position: relative;
    background-image: url(../img/productbg1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8% 0%;
}
.product-head-content{
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-left: 6%;
}
.product-head-content .bread{
    position: relative;
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.product-head-content .bread .build{
    display: inline-block;
    width: 18px;
    background-image: url(../img/build.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 1%;
}
.product-head-content .bread .protitword{
    color: #333;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.product-head-content .bread i.iconfont.icon-a-11{
    color: #333;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: .5%;
}
.product-head-content .bread a.protitword{
    margin-right: .8%;
}
.product-head-txt{
    display: flex;
    flex-direction: column;
    margin-top: 2%;
}
.product-head-txt-title h3{
    color: #333;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 60px */
    text-transform: capitalize;
    margin-bottom: 0;
}
.product-head-txt-title h3 span{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    text-transform: capitalize;
}
.product-head-txt-main{
    width: 80%;
    margin-top: 2%;
}
.product-head-txt-main p{
    color: #000;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    text-transform: capitalize;
}
.protitle{
    color: #FFF;
    font-family: Oswald;
    font-size: 70px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 105px */
}
.productcontent{
    position: relative;
    width: 100%;
}
.products,
.services {
    display: flex;
    width: 100%;
    position: relative;
    margin: 0 auto;
    /* border: 1px solid #ddd; */
}

/* Sidebar within products container */
.product-all-top-l,
.services-all-top-l {
    width: 27%;
    background: #8E0F0F;
    color: white;
    position: relative;
}

.product-all-menu {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 11%;
}
.services-all-menu {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0px;
}

.all-menu1, .all-menu2,
.services-all-menu1, 
.services-all-menu2 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.all-menu1 > li,
.services-all-menu1 > li {
    position: relative;
}
.products .product-all-top-l .all-menu1 > li > a{
    display: block;
    padding: 3% 16%;
    color: #ecf0f1;
    text-decoration: none;
    border-bottom: 1px solid #8E0F0F;
    background-color: #8E0F0F;
    margin-bottom: 0;
    font-family: Arial;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-transform: capitalize;
}
.services .services-all-top-l .services-all-menu1 > li > a{
    display: block;
    padding: 3% 16%;
    color: #ecf0f1;
    text-decoration: none;
    border-bottom: 1px solid #8E0F0F;
    background-color: #8E0F0F;
    margin-bottom: 0;
    font-family: Arial;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-transform: capitalize;
}
.all-menu1 > li > a,
.services-all-menu1 > li > a {
    display: block;
    padding: 3% 20%;
    color: #ecf0f1;
    text-decoration: none;
    border-bottom: 1px solid #8E0F0F;
    background-color: #8E0F0F;
    margin-bottom: 2%;

    font-family: Arial;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
    text-transform: capitalize;
}
.all-menu2,
.services-all-menu2{
    background-color: #f2f2f2;
    padding-bottom: 4%;
}
.all-menu2>li,
.services-all-menu2>li {
    position: relative;
    margin: 0 10%;
    margin-top: 2%;
    /* transition: all .3s; */
}
.product-all-top-l,
.services-all-top-l{
    width: 27%;
    background: #f2f2f2;
    color: white;
    position: relative;
}
.product-all-top-l .all-menu2>li>a,
.services-all-top-l .services-all-menu2>li a {
    display: block;
    padding: 10px 20px 15px 30px;
    text-decoration: none;
    transition: all 0.3s;
    border-bottom: 1px solid #e6e6e6;
    color: #333;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}
.product-all-top-l .all-menu2>li.active>a,
.services-all-top-l .services-all-menu2>li.active>a{
    color: #8E0F0F;
    background-color: #f6f6f6;
}
.all-menu2>li.active>a,
.services-all-menu2>li.active>a{
    color: #8E0F0F;
    background-color: #f6f6f6;
}
.all-menu2>li>a,
.services-all-menu2>li>a {
    display: block;
    padding: 10px 20px 10px 30px;
    color: #333333;
    text-decoration: none;
    transition: all 0.3s;
    border-bottom: 1px solid #e6e6e6;
}
.all-secmenu{
    display: block;
    background-color: #f6f6f6;
    color: #333;
    padding-bottom: 4%;
    transition: all .5s;
    /* 关键：使用height和opacity实现平滑过渡 */
    overflow: hidden; /* 隐藏超出部分，配合height动画 */
    transition: all 0.3s ease-out; /* 动画时长0.3s，缓动效果 */
    height: 0; /* 默认折叠状态（高度为0） */
    opacity: 0; /* 默认透明 */
}
.all-secmenu>ul{
    position: relative;
    margin: 0;
    padding: 0;
}
.all-secmenu>ul>li{
    cursor: pointer;
    list-style: none;
}
.all-secmenu>ul>li>a{
    display: block;
    padding: 10px 20px 15px 30px;
    text-decoration: none;
    transition: all 0.3s;
    color: #333;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}
.all-thirmenu{
    background-color: #f6f6f6;
    color: #333;
    padding-bottom: 4%;
    transition: all .5s;
    /* 关键：使用height和opacity实现平滑过渡 */
    overflow: hidden; /* 隐藏超出部分，配合height动画 */
    transition: all 0.3s ease-out; /* 动画时长0.3s，缓动效果 */
    height: 0; /* 默认折叠状态（高度为0） */
    opacity: 0; /* 默认透明 */
}
/* 展开状态的样式 */
.all-secmenu.expanded, .all-thirmenu.expanded {
    height: auto; /* 自动适应内容高度 */
    opacity: 1; /* 完全显示 */
    margin-top: 8px; /* 展开时增加顶部间距，增强层次感 */
}
/* 鼠标悬停时的菜单项微动效果 */
.all-menu2 > li > a,
.all-secmenu ul li a,
.all-thirmenu ul li a {
    transition: padding-left 0.2s ease; /* 文字缩进动画 */
}
.all-menu2 > li > a:hover,
.all-secmenu ul li a:hover,
.all-thirmenu ul li a:hover {
    padding-left: 35px; /* 悬停时文字向右缩进，增强交互反馈 */
}
.all-thirmenu>ul{
    position: relative;
    margin: 0;
    padding: 0;
}
.all-thirmenu>ul>li{
    cursor: pointer;
    list-style: none;
}
.all-thirmenu>ul>li>a{
    display: block;
    padding: 10px 20px 15px 30px;
    text-decoration: none;
    transition: all 0.3s;
    color: #333;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}
/* 交互状态样式 */
.all-menu1 > li > a:hover,
.all-menu2 > li > a:hover,
.all-thirmenu ul li a:hover {
    color: #8E0F0F;
}
.all-secmenu ul li a:hover{
    color: #8E0F0F;
}
.all-menu2 > li.active {
    background-color: #f6f6f6;
}

.all-menu2 > li.active > a {
    color: #8E0F0F;
}

.all-menu2 > li.active > a::after {
    transform: rotate(90deg);
}

/* 三级菜单容器 - 跟随二级菜单显示/隐藏 */

/* 三级菜单项 */
.all-secmenu ul li a {
    padding-left: 40px;
}

.all-secmenu ul li.active>a {
    color: #8E0F0F;
    font-weight: bold;
}

.all-thirmenu ul li a {
    padding-left: 60px;
}

.all-thirmenu ul li.active a {
    color: #8E0F0F;
}
.all-thirmenu>ul>li>a.active {
    color: #8e0f0f;
    padding-left: 35px;
}
/* .all-menu2 li:hover::before{
    content: "";
    font-size: 20px;
    border-left: 3px solid #004586;
    margin-right: 1%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
} */
.all-menu2>li:hover>a,
.services-all-menu2>li:hover>a{
    color: #8E0F0F;
}
.services-all-menu2 >li> div li {
    padding: 4% 0% 0% 10%;
    cursor: pointer;
}
.all-menu2 >li> div li{
    cursor: pointer;
}
.all-menu2 >li> div li a,
.services-all-menu2 >li> div li a{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    transition: all .3s;
}
.all-menu2 >li> div li a:hover,
.services-all-menu2 >li> div li a:hover{
    color: #8E0F0F;
}
.all-menu2 >li> div li a.focus,
.services-all-menu2 >li> div li a.focus{
    color: #8E0F0F;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
span.search-icon{
    position: absolute;
    right: 5%;
    top: 30%;
    color: #333;
}
/* Search in sidebar */

/* .all-menu2>li:last-child {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: #fff;
} */

.all-menu2>li:last-child input {
    width: 100%;
    height: 100%;
    padding: 1%;
    border: none;
    border-radius: 4px;
    outline: none;
    color: #333;
}
.all-menu2>li:last-child span i.iconfont.icon-a-222 {
    font-size: 18px;
}
.product-all-top-r {
    flex: 1;
    padding: 4%;
    overflow: auto;
}
.services-all-top-r{
    flex: 1;
    overflow: auto;
}
.product-r-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    gap: 16px;
    margin-bottom: 4%;
    list-style: none;
    padding: 0;
}

.product-r-cont {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s;
}

.product-r-cont:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-r-cont:hover>a .product-info .read-more{
    opacity: 1;
}
.read-more{
    opacity: 0;
    transition: all .3s;
    color: #8E0F0F;
    font-family: Arial;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 15px */
    margin: 6% 0;
}
.read-more span i{
    font-size: 15px;
    color: #8E0F0F;
}
.product-r-cont a {
    display: block;
    text-decoration: none;
    color: #333;
}

.product-image {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image img{
    width: 100%;
    height: 100%;
}
.product-info {
    padding: 35px;
    padding-bottom: 30px;
}

.product-info h3 {
    color: #222;
    font-family: Lato;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
    margin-top: 0;
}
.product-info p{
    margin: 0;
    color: rgba(51, 51, 51, 0.50);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 22.5px */
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* Pagination */
.wp-pagenavi span,
.wp-pagenavi a{
    margin: 0 5px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.wp-pagenavi a{
    margin: 0 8px;
    border: 0;
    text-decoration: none;
    color: #333;
    border-radius: 50%;
}
.wp-pagenavi .current {
    background: #1F242C;
    color: white;
}
.wp-pagenavi a:hover {
    background: #f5f5f5;
    color: #333;
}
.wp-pagenavi .previouspostslink:hover, .wp-pagenavi .nextpostslink:hover {
    background-color: #f5f5f5;
}
.wp-pagenavi .previouspostslink:hover, .wp-pagenavi .nextpostslink:hover::before {
    color: #333;
}
/* 基础断点定义 */
/* PC端：默认样式（已在您的代码中实现，屏幕宽度≥1024px） */

/* 平板端：屏幕宽度768px ~ 1023px */
@media (max-width: 1023px) and (min-width: 768px) {
    /* 头部区域调整 */
    .product-head {
        padding: 6% 0; /* 减少头部上下内边距 */
    }
    .product-head-content {
        width: 65%; /* 扩大内容区宽度 */
        margin-left: 4%;
    }
    .product-head-txt-title h3,
    .product-head-txt-title h3 span {
        font-size: 36px; /* 减小标题字体 */
    }
    .product-head-txt-main {
        width: 90%; /* 扩大正文宽度 */
    }
    .product-head-txt-main p {
        font-size: 16px; /* 减小正文字体 */
    }

    /* 侧边栏与内容区布局 */
    .product-all-top-l,
    .services-all-top-l {
        width: 30%; /* 调整侧边栏宽度 */
    }
    .products .product-all-top-l .all-menu1 > li > a,
    .services .services-all-top-l .services-all-menu1 > li > a {
        font-size: 20px; /* 减小菜单字体 */
        padding: 4% 12%; /* 调整内边距 */
    }
    .product-all-top-l .all-menu2>li>a,
    .services-all-top-l .services-all-menu2>li a {
        font-size: 18px; /* 减小二级菜单字体 */
        padding: 8px 15px 8px 25px;
    }

    /* 产品列表网格 */
    .product-r-content {
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); /* 改为2列布局 */
        gap: 14px; /* 减小间距 */
    }
    .product-info {
        padding: 25px; /* 减少产品信息内边距 */
    }
    .product-info h3 {
        font-size: 22px; /* 减小产品标题字体 */
    }
    .product-info p {
        font-size: 16px; /* 减小产品描述字体 */
    }

    /* 分页调整 */
    .pagination-container a, 
    .pagination-container span {
        width: 36px;
        height: 36px;
        line-height: 36px; /* 减小分页按钮大小 */
    }
}

/* 手机端：屏幕宽度≤767px */
@media (max-width: 767px) {
    /* 头部区域调整 */
    .product-head {
        padding: 8% 0 12% 0; /* 增加底部内边距，避免内容挤压 */
    }
    .product-head-content {
        width: 90%; /* 内容区占满屏幕 */
        margin-left: 5%;
    }
    .product-head-content .bread {
        flex-wrap: wrap; /* 面包屑允许换行 */
        font-size: 12px;
    }
    .product-head-content .bread .protitword{
        font-size: 10px;
    }
    .product-head-content .bread i.iconfont.icon-a-11{
        font-size: 6px;
    }
    .product-head-txt-title h3,
    .product-head-txt-title h3 span {
        font-size: 18px; /* 进一步减小标题字体 */
        line-height: 120%;
    }
    .product-head-txt-main {
        width: 100%; /* 正文占满宽度 */
        margin-top: 4%;
    }
    .product-head-txt-main p {
        font-size: 10px;
        line-height: 150%; /* 调整行高，提升可读性 */
    }

    /* 侧边栏与内容区改为垂直堆叠 */
    .products,
    .services {
        flex-direction: column; /* 纵向排列 */
    }
    .product-all-top-l,
    .services-all-top-l {
        width: 100%; /* 侧边栏占满宽度 */
        margin-bottom: 5%;
    }
    .product-all-menu,
    .services-all-menu {
        top: 0; /* 取消粘性定位的偏移 */
    }
    .products .product-all-top-l .all-menu1 > li > a,
    .services .services-all-top-l .services-all-menu1 > li > a {
        font-size: 18px;
        padding: 5% 8%; /* 增加点击区域 */
    }
    .product-all-top-l .all-menu2>li>a,
    .services-all-top-l .services-all-menu2>li a {
        font-size: 16px;
        padding: 6px 10px 6px 20px;
    }

    /* 产品列表网格 */
    .product-r-content {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* 改为1列布局 */
        gap: 12px;
    }
    .product-all-top-r {
        padding: 5% 3%; /* 调整内容区内边距 */
    }
    .product-info {
        padding: 20px;
    }
    .product-info h3 {
        font-size: 20px;
    }
    .product-info p {
        font-size: 14px;
        -webkit-line-clamp: 2; /* 减少显示行数，避免过长 */
    }
    .read-more {
        margin: 4% 0; /* 调整按钮间距 */
        font-size: 14px;
    }

    /* 分页调整 */
    .pagination-container {
        margin-top: 8%;
    }
    .pagination-container a, 
    .pagination-container span {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin: 0 3px; /* 减小间距 */
    }
}






/* 应用中心 */
.y-application{
    position: relative;
    width: 100%;
}
.application-head{
    background-image: url(../img/applicationbg1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 8% 6%;
}
.application-head-txt{
    position: relative;
    width: 38%;
}
.application-head-txt-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    text-transform: capitalize;
    margin: 0;
}
.application-head-txt-cont{
    margin-top: 3%;
}
.application-head-txt-cont p{
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
}
.application-head-bread{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .4% 0;
    padding-left: 6%;
}
.application-head-bread-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    opacity: .5;
}
.application-head-bread-txt{
    position: relative;
    display: flex;
    align-items: center;
}
.application-head-bread-txt a{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.application-head-bread-txt a:hover{
    color: #fff;
}
.application-head-bread-txt i.icon-a-11{
    color: #FFF;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.application-head-bread .appli-bread-word{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1%;
}
.application-content{
    position: relative;
    width: 100%;
}
.versatile{
    position: relative;
    width: 80%;
    margin: 6% auto;
}
.versatile-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    width: 65%;
    margin: 0 auto;
}
.versatile-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-transform: capitalize;
    margin: 2% auto;
    width: 85%;
}
.versatile-content{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.versatile-cont{
    width: 25%;
    position: relative;
    overflow: hidden;
    padding-top: 37%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.versatile-cont:hover>.versatile-cont-wrap{
    top: 8%;
}
.versatile-cont:nth-child(1){
    background-image: url(../img/versatilecont1.webp);
}
.versatile-cont:nth-child(2){
    background-image: url(../img/versatilecont2.webp);
}
.versatile-cont:nth-child(3){
    background-image: url(../img/versatilecont3.webp);
}
.versatile-cont:nth-child(4){
    background-image: url(../img/versatilecont4.webp);
}
.versatile-cont-wrap{
    position: absolute;
    top: 93%;
    left: 6%;
    transition: all .3s;
    height: 100%;
}
.versatile-cont-tit{
    cursor: default;
}
.versatile-cont-tit h3{
    color: #FFF;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 26.4px */
}
.veasatile-cont-txt{
    margin-top: 4%;
    width: 95%;
}
.veasatile-cont-txt p{
    color: #FFF;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
}
.versatile-cont-btn{
    position: absolute;
    width: 40%;
    bottom: 14%;
}
.versatile-cont-btn a{
    color: #8E0F0F;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 16px */
    text-transform: capitalize;
    display: block;
    background-color: #fff;
    padding: 10%;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    transition: all .3s;
}
.versatile-cont-btn a:hover{
    background-color: #8E0F0F;
    color: #fff;
}
.versatile-cont-btn a i.iconfont.icon-a-11{
    position: absolute;
    top: 35%;
    right: 13%;
    font-size: 12px;
    font-weight: 400;
}
.versatile-appli-custom{
    position: relative;
    margin-top: 8%;
    padding: 6% 10%;
    background-color: #f8f8f8;
}
.versatile-appli-custom-txt{
}
.versatile-appli-custom-title{
    width: 40%;
}
.versatile-appli-custom-title h3{
    color: #333;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 60px */
    text-transform: capitalize;
}
.versatile-appli-custom-title p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
    margin: 3% 0;
}
.versatile-appli-custom-content{
    display: flex;
    flex-direction: column;
}
.versatile-appli-custom-cont{
    display: flex;
    margin-top: 2%;
    align-items: center;
}
.versatile-appli-custom-cont span {
    margin-right: 2%;
}
.versatile-appli-custom-cont:last-child{
    width: 100%;
}
.versatile-appli-custom-cont-txt p{
    color: #333;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
    margin: 0;
}
.versatile-appli-custom-img{
    position: absolute;
    top: -10%;
    right: 5%;
}
.versatile-appli-custom-img img{
    width: 100%;
}
.practical{
    position: relative;
    width: 100%;
    margin-top: 8%;
    overflow: hidden;
}
.practical-title{
    width: 80%;
    margin: 0 auto;
}
.practical-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.practical-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-transform: capitalize;
    margin: 2% auto;
    width: 82%;
}
.practical-swiper {
  overflow: hidden;
  padding-bottom: 20px; /* 为分页器留出空间 */
}
.practical-swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.practical-swiper-cont{
    position: relative;
}
.practical-swiper-cont img{
    width: 100%;
}
.practical-swiper-cont.half-selected {
    transform: translateX(-100px);
}
.appli-contact{
    position: relative;
    background-image: url(../img/appli-contactbg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8%;
    margin-top: 4%;
}
.appli-contact-txt{
    width: 80%;
}
.appli-contact-txt h3{
    color: #FFF;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 44px */
}
.appli-contact-txt p{
    color: #FFF;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 25px */
    margin: 1% 0;
    width: 80%;
}
.appli-contact-txt a{
    position: relative;
    display: block;
    color: #8E0F0F;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    background-color: #fff;
    padding: 1% 1.8%;
    width: 24.5%;
    text-decoration: none;
    transition: all .3s;
}
.appli-contact-txt a i.iconfont.icon-a-11 {
    position: absolute;
    top: 32%;
    font-size: 12px;
    right: 10%;
    font-weight: 300;
}
.appli-contact-txt a:hover{
    background-color: #8E0F0F;
    color: #fff;
}


/* 平板端 (768px - 1439px) */
@media (max-width: 1440px) and (min-width: 769px) {
    /* 所有h标签字体改为24px */
    .application-head-txt-title h3,
    .versatile-title h3,
    .versatile-cont-tit h3,
    .versatile-appli-custom-title h3,
    .practical-title h3,
    .appli-contact-txt h3 {
        font-size: 24px;
    }
    
    /* 其他字体改为14px */
    .application-head-txt-cont p,
    .application-head-bread-txt a,
    .application-head-bread .appli-bread-word,
    .versatile-title p,
    .veasatile-cont-txt p,
    .versatile-cont-btn a,
    .versatile-appli-custom-title p,
    .versatile-appli-custom-cont-txt p,
    .practical-title p,
    .appli-contact-txt p,
    .appli-contact-txt a{
        font-size: 14px;
    }
    .application-head-bread-txt i.icon-a-11,
    .versatile-cont-btn a i.iconfont.icon-a-11,
    .appli-contact-txt a i.iconfont.icon-a-11{
        font-size: 8px;
    }
    .application-head-bread-txt a i.iconfont.icon-home {
        font-size: 14px;
    }
    /* 布局调整 */
    .application-head-txt {
        width: 50%;
    }
    .versatile {
        width: 90%;
    }
    .versatile-content {
        flex-wrap: wrap;
    }
    .versatile-cont {
        width: 48%;
        margin-bottom: 4%;
        padding-top: 45%;
    }
    .veasatile-cont-txt p{
        width: 70%;
    }
    .versatile-cont-btn{
        width: 16%;
    }
    .versatile-appli-custom-title {
        width: 50%;
    }
    .versatile-appli-custom-content{
        flex-direction: row;
    }
    .versatile-appli-custom-cont{
        width: 100%;
    }
    .versatile-appli-custom-img {
        width: 40%;
    }
    .appli-contact-txt a {
        width: 30%;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 768px) {
    /* 所有h标签字体改为16px */
    .application-head-txt-title h3,
    .versatile-title h3,
    .versatile-cont-tit h3,
    .versatile-appli-custom-title h3,
    .practical-title h3,
    .appli-contact-txt h3 {
        font-size: 16px;
    }
    
    /* 其他字体改为8px */
    .application-head-txt-cont p,
    .application-head-bread-txt a,
    .application-head-bread .appli-bread-word,
    .versatile-title p,
    .veasatile-cont-txt p,
    .versatile-cont-btn a,
    .versatile-appli-custom-title p,
    .versatile-appli-custom-cont-txt p,
    .practical-title p,
    .appli-contact-txt p,
    .appli-contact-txt a{
        font-size: 8px;
    }
    .application-head-bread-txt i.icon-a-11,
    .versatile-cont-btn a i.iconfont.icon-a-11,
    .appli-contact-txt a i.iconfont.icon-a-11{
        font-size: 4px;
    }
    .application-head-bread-txt a i.iconfont.icon-home {
        font-size: 8px;
    }
    /* 布局调整 */
    .application-head {
        padding: 15% 5%;
        background-size: cover;
    }
    .application-head-txt {
        width: 100%;
    }
    .versatile {
        width: 95%;
        margin: 10% auto;
    }
    .versatile-cont-wrap{
        top: 86%;
    }
    .versatile-title h3,
    .versatile-title p {
        width: 100%;
    }
    .versatile-content {
        flex-direction: column;
    }
    .versatile-cont {
        width: 100%;
        margin-bottom: 6%;
        padding-top: 60%;
    }
    .versatile-cont-btn{
        width: 24%;
    }
    .versatile-appli-custom {
        padding: 10% 5%;
    }
    .versatile-appli-custom-title {
        width: 100%;
    }
    .versatile-appli-custom-img {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        margin-top: 5%;
    }
    .practical-title {
        width: 95%;
    }
    .appli-contact {
        padding: 15% 5%;
    }
    .appli-contact-txt {
        width: 100%;
    }
    .appli-contact-txt p {
        width: 100%;
    }
    .appli-contact-txt a {
        width: 100%;
        padding: 3% 5%;
    }
}





/* our story */
.story{
    width: 100%;
    position: relative;
}
.story-head{
    position: relative;
    display: flex;
    justify-content: space-between;
}
.story-head-e{
    width: 35%;
    position: relative;
    background-color: #333;
}
.story-head-e a{
    width: 70%;
    position: absolute;
    top: 12%;
    left: 22%;
}
.story-head-e a>img:first-child{
    width: 150%;
}
.story-head-e a>img:nth-child(2){
    position: absolute;
    top: 36.5%;
    left: 58%;
    width: 36%;
}
.story-head-e a>i.icon-changjiantouyou{
    position: absolute;
    top: 46.5%;
    left: 72.5%;
    color: #FFF;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    transition: all .3s;
}
.story-head-e a:hover>i.icon-changjiantouyou{
    left: 76.5%;
}


/* 视频弹窗样式 */
.video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.video-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.video-popup-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s ease;
}

.video-popup.active {
    display: flex;
}

.video-popup.active .video-popup-container {
    transform: scale(1);
    opacity: 1;
}

.video-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.video-popup-close:hover {
    background-color: rgba(255, 0, 0, 0.8);
}

.video-wrapper {
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例 */
    position: relative;
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 以上视频弹窗 */


.story-head-r{
    width: 65%;
    background-color: #76000d;
    padding-top: 8%;
    padding-left: 20%;
    padding-bottom: 6%;
    box-sizing: border-box;
}
.story-head-r .bread a i.iconfont.icon-home{
    color: #FFF;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.story-head-r .bread i.iconfont.icon-a-11{
    color: #FFF;
    font-family: Lato;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.story-head-r .bread{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.story-head-r .bread a{
    color: #FFF;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 1%;
}
.story-head-r .bread .build{
    color: #FFF;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}
.story-head-r .bread .storytitword{
    color: #FFF;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 1%;
}
.story-head-r-txt{
    position: relative;
    margin-top: 2%;
}
.story-head-r-txt-title{

}
.story-head-r-txt-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 50px */
    text-transform: capitalize;
    margin-bottom: 0;
    width: 88%;
}
.story-head-r-txt-title p{
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 31.5px */
    text-transform: capitalize;
    margin-top: 0;
}
.story-head-r-txt-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 6%;
}
.story-head-r-txt-cont{
    width: 44%;
    margin-top: 4%;
}
.story-head-r-txt-cont-num{
    color: #FFF;
    font-family: Lato;
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.story-head-r-txt-cont-num p{
    color: #FFF;
    font-family: Lato;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}
.story-head-r-txt-cont-num p span{
    color: #FFF;
    font-family: Lato;
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.story-head-r-txt-cont-word{

}
.story-head-r-txt-cont-word p{
    color: #FFF;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    margin-top: 0;
}
.story-main{
    position: relative;
    margin-top: 6%;
}
.story-why{

}
.story-why-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.story-why-cont{
    width: 50%;
}
.story-why-cont:first-child{
    padding-left: 6%;
}
.story-why-cont-tit{

}
.story-why-cont-tit h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
    margin: 0;
    width: 90%;
}
.story-why-cont-tit h3 span{
    color: #760D0D;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.story-why-cont-tit p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 31.5px */
    text-transform: capitalize;
    width: 86%;
    margin-top: 3%;
    margin-bottom: 1%;
}
.story-why-cont-tit p:last-child{
    margin: 0;
}
.story-why-cont-txt{
    margin-top: 6%;
}
.story-why-cont-txt h4{
    color: #333;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    margin: 0;
}
.story-why-cont-txt p{
    color: #999;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    width: 80%;
}
.story-why-cont-txt p:last-child{
    margin: 0;
}
.story-why-cont img{
    width: 100%;
}
.story-why-what{
    margin-top: 6%;
}
.story-why-what-tit{

}
.story-why-what-tit h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.story-why-what-tit p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 25px */
    text-transform: capitalize;
    width: 58%;
    margin: 0 auto;
}
.story-why-what-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 88%;
    margin: 2% auto 0;
}
.story-why-what-cont{
    width: 19%;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: 0 4px 9.9px 0 rgba(0, 0, 0, 0.10);
    padding: .3% 0;
    transition: all .5s;
}
.story-why-what-cont:hover{
    transform: translateY(-8px);
}
.story-why-what-cont>a{
    display: block;
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 8%;
}
.story-why-what-cont:nth-child(1) a{
    background-image: url(../img/story-what1.webp);
}
.story-why-what-cont:nth-child(2) a{
    background-image: url(../img/story-what2.webp);
}
.story-why-what-cont:nth-child(3) a{
    background-image: url(../img/story-what3.webp);
}
.story-why-what-cont:nth-child(4) a{
    background-image: url(../img/story-what4.webp);
}
.story-why-what-cont:nth-child(5) a{
    background-image: url(../img/story-what5.webp);
}
.story-learn{
    background-image: url(../img/stodybg1.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 4%;
    padding: 8% 0;
}
.story-learn-title{
    width: 80%;
    margin: 0 auto;
}
.story-learn-title h3{
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%; /* 44px */
    text-align: center;
}
.story-learn-title p{
    color: #FFF;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 22px */
    text-align: center;
}
.story-learn-btns{
    display: flex;
    flex-direction: row;
    width: 32.5%;
    margin: 2% auto 0;
    justify-content: flex-start;
    align-items: center;
}
.story-learn-btn{
    position: relative;
    width: 39%;
    margin-right: 0%;
    margin-left: 3%;
}
.story-learn-btn a{
    display: block;
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    padding: 6% 0;
    background-color: #000;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: all .3s;
}
.story-learn-btn:last-child{
    width: 53%;
    margin-left: 4%;
}
.story-learn-btn:last-child a{
    color: #000;
    background-color: #FFF;
    text-align: left;
    padding: 4% 6%;
}
.story-learn-btn a i.iconfont.icon-changjiantouyou {
    position: absolute;
    top: 34%;
    right: 7%;
    font-size: 14px;
    font-weight: 500;
}
.story-learn-btn a:hover{
    background-color: #fff;
    color: #000;
}
.story-learn-btn:last-child a:hover{
    color: #fff;
    background-color: #000;
}
.story-explore{
    margin-top: 4%;
}
.story-explore-title{
    position: relative;
}
.story-explore-title h4{
    color: #8E0F0F;
    text-align: center;
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 37.5px */
    margin: 1% 0;
}
.story-explore-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 60px */
    margin: 0;
}
.story-explore-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
    width: 66%;
    margin: 1% auto;
}
/* 
.story-explore-slide.swiper-slide-prev,
.story-explore-slide.swiper-slide-next {
    width: 377px;
    height: 320px;
    opacity: 0.8;
    z-index: 2;
}

.story-explore-slide.prev-prev,
.story-explore-slide.next-next {
    width: 304px;
    height: 280px;
    transform: scale(0.9);
    opacity: 0.6;
    z-index: 1;
}

.story-explore-slide.swiper-slide-active {
    width: 433px;
    height: 366px;
    opacity: 1;
    z-index: 3;
}
*/
.story-explore-swiper{
    margin-top: 2%;
    padding: 3% 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.story-explore-swiper-wrap{
    display: flex;
    width: 100%;
    align-items: center;
}
/* 基础样式：所有slide默认缩小 */
.story-explore-swiper-wrap .story-explore-slide {
    transition: all .3s;
    transform-origin: center;
    cursor: pointer;
    will-change: transform, opacity;
    box-sizing: border-box;
}
.story-explore-slide.swiper-slide-active {
    z-index: 2; /* 确保当前幻灯片在最上层 */
}

/* 非活动幻灯片的基础样式 */
.story-explore-slide.swiper-slide:not(.swiper-slide-active) {
    z-index: 1;
}
.story-explore-swiper .story-explore-swiper-wrap .story-explore-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 确保克隆元素与原始元素样式一致 */
.story-explore-slide.swiper-slide-cloned {
    opacity: 1 !important;
}
.story-explore .story-explore-swiper .story-explore-pagination{
    bottom: -1%;
}

.story-explore .story-explore-swiper .story-explore-pagination 
.swiper-pagination-bullet-active{
    background-color: #8E0F0F;
}
.story-delivered{
    margin-top: 4%;
    position: relative;
    overflow: hidden;
    padding: 2% 4% 6%;
}
.story-delivered-title{
    position: relative;
}
.story-delivered-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.story-delivered-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-transform: capitalize;
    width: 68%;
    margin: 2% auto 1%;
}
.story-delivered-swiper{
    margin: 0 auto 0;
    width: 93%;
    overflow: hidden;
}
.story-delivered-cont{
    position: relative;
}
.story-delivered-cont img{
    width: 100%;
}
.story-delivered .story-delivered-prev{
    top: 60%;
    color: #fff;
    background-color: #8E0F0F;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.story-explore .story-explore-prev{
    top: 68.5%;
    color: #fff;
    background-color: #8E0F0F;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.story-delivered .story-delivered-next{
    top: 60%;
    color: #8E0F0F;
    background-color: #fff;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.story-explore .story-explore-next{
    top: 68.5%;
    color: #8E0F0F;
    background-color: #fff;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
/* 图片放大弹窗样式 */
.image-zoom-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-zoom-modal.img-active {
    opacity: 1;
}

.image-zoom-container {
    position: relative;
    margin: 0 auto;
}

.image-zoom-content {
    margin: auto;
    display: block;
    width: 60%;
    height: 100vh;
    object-fit: contain;
    animation: zoomIn 0.3s;
    padding: 2% 0;
}

@keyframes zoomIn {
    from {transform: scale(0);}
    to {transform: scale(1);}
}

.image-zoom-close {
    position: absolute;
    top: 15px;
    right: 340px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    background: none;
    border: none;
}

.image-zoom-close:hover,
.image-zoom-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 为可点击图片添加提示样式 */
.zoomable-image {
    cursor: zoom-in;
    transition: transform 0.2s;
}

.zoomable-image:hover {
    transform: scale(1.02);
}

/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .story-head-r-txt-title h3,
    .story-why-cont-tit h3,
    .story-why-cont-tit h3 span,
    .story-why-cont-txt h4,
    .story-why-what-tit h3,
    .story-learn-title h3,
    .story-explore-title h4,
    .story-explore-title h3,
    .story-delivered-title h3 {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .story-head-r .bread a i.iconfont.icon-home,
    .story-head-r .bread i.iconfont.icon-a-11,
    .story-head-r .bread a,
    .story-head-r .bread .build,
    .story-head-r .bread .storytitword,
    .story-head-r-txt-title p,
    .story-head-r-txt-cont-num,
    .story-head-r-txt-cont-num p,
    .story-head-r-txt-cont-word p,
    .story-why-cont-tit p,
    .story-why-cont-txt p,
    .story-why-what-tit p,
    .story-learn-title p,
    .story-learn-btn a,
    .story-learn-btn a i.iconfont.icon-changjiantouyou,
    .story-explore-title p,
    .story-delivered-title p {
        font-size: 14px !important;
    }
    .story-head-r-txt-cont-num p span{
        font-size: 20px;
    }
    /* 图标大小调整 */
    .story-head-e a>i.icon-changjiantouyou {
        font-size: 14px !important;
    }

    /* 布局调整 */
    .story-head-e,
    .story-head-r {
        width: 100%;
    }
    .story-head-e a{
        width: 70%;
        top: 30%;
        left: 15%;
    }
    .story-head-e a>img:first-child{
        width: 100%;
    }
    .story-head-e a>img:nth-child(2){
        top: 31%;
        left: 35%;
        width: 26%;
    }
    .story-head-e a>i.icon-changjiantouyou{
        top: 42.5%;
        left: 45.5%;
    }
    .story-learn-btn:last-child{
        width: 56%;
    }
    i.icon-changjiantouyou{
        display: none;
    }
    .story-head-e a:hover>i.icon-changjiantouyou {
        left: 50.5%;
    }
    .story-head-r {
        padding: 8% 6%;
    }
    .story-head-r-txt-title h3 {
        width: 100%;
    }
    .story-head-r-txt-cont {
        width: 48%;
    }
    .story-why-cont {
        width: 50%;
    }
    .story-why-cont-tit p,
    .story-why-cont-txt p {
        width: 100%;
    }
    .story-why-what-tit p {
        width: 100%;
        padding: 0 5%;
    }
    .story-why-cont img{
        width: 100%;
        height: 100%;
    }
    .story-why-what-cont {
        width: 19%;
        margin-bottom: 4%;
    }
    .story-learn-title {
        width: 90%;
    }
    .story-learn-btns {
        width: 60%;
    }
    .story-explore-title p {
        width: 90%;
    }
    /* 调整轮播图大小 */
    .story-explore-swiper-wrap .story-explore-slide {
        width: 220px;
        height: 200px;
    }
    .story-explore-slide.swiper-slide-prev,
    .story-explore-slide.swiper-slide-next {
        width: 280px;
        height: 240px;
    }
    .story-explore-slide.prev-prev,
    .story-explore-slide.next-next {
        width: 220px;
        height: 200px;
    }
    .story-explore .story-explore-prev,
    .story-explore .story-explore-next {
        width: 40px;
        height: 40px;
        top: 50%;
        display: none;
    }
    .story-explore-slide.swiper-slide-active {
        width: 320px;
        height: 270px;
    }
    .story-delivered-title p {
        width: 90%;
    }
    .story-delivered .story-delivered-prev,
    .story-delivered .story-delivered-next {
        width: 50px;
        height: 50px;
        display: none;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .story-head-r-txt-title h3,
    .story-why-cont-tit h3,
    .story-why-cont-tit h3 span,
    .story-why-cont-txt h4,
    .story-why-what-tit h3,
    .story-learn-title h3,
    .story-explore-title h4,
    .story-explore-title h3,
    .story-delivered-title h3 {
        font-size: 16px !important;
    }
    
    /* 其他字体改为8px */
    .story-head-r .bread a i.iconfont.icon-home,
    .story-head-r .bread i.iconfont.icon-a-11,
    .story-head-r .bread a,
    .story-head-r .bread .build,
    .story-head-r .bread .storytitword,
    .story-head-r-txt-title p,
    .story-head-r-txt-cont-num,
    .story-head-r-txt-cont-num p,
    .story-head-r-txt-cont-word p,
    .story-why-cont-tit p,
    .story-why-cont-txt p,
    .story-why-what-tit p,
    .story-learn-title p,
    .story-learn-btn a,
    .story-learn-btn a i.iconfont.icon-changjiantouyou,
    .story-explore-title p,
    .story-delivered-title p {
        font-size: 8px !important;
    }
    .story-head-r-txt-cont-num p span{
        font-size: 16px;
    }
    /* 图标大小调整 */
    .story-head-e a>i.icon-changjiantouyou {
        font-size: 22px !important;
        top: 45%;
        left: 49%;
    }

    /* 布局调整 */
    .story-head{
        flex-direction: column;
    }
    .story-head-e{
        display: none;
    }
    .story-head-e a{
        width: 90%;
        top: 18%;
        left: 15%;
    }
    .story-head-e a>img:first-child{
        width: 100%;
    }
    .story-head-e a>img:nth-child(2) {
        width: 38%;
        top: 28%;
        left: 33%;
    }
    .story-head-r {
        width: 100%;
        padding: 12% 5%;
    }
    .story-head-r-txt-title h3 {
        width: 100%;
    }
    .story-head-r-txt-content{
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .story-head-r-txt-cont {
        width: 24%;
        margin-top: 6%;
    }
    .story-main {
        margin-top: 10%;
    }
    .story-why-content{
        flex-direction: column;
    }
    .story-why-cont {
        width: 100%;
        margin-bottom: 8%;
    }
    .story-why-cont-tit p,
    .story-why-cont-txt p {
        width: 100%;
    }
    .story-why-what {
        margin-top: 10%;
        padding: 0 5%;
    }
    .story-why-what-tit p {
        width: 100%;
    }
    .story-why-what-content {
        width: 100%;
    }
    .story-why-what-cont {
        width: 19%;
        margin-bottom: 6%;
    }
    .story-learn {
        margin-top: 10%;
        padding: 10% 5%;
    }
    .story-learn-title {
        width: 100%;
    }
    .story-learn-btns {
        width: 100%;
    }
    .story-learn-btn {
        position: relative;
        width: 40%;
    }
    .story-learn-btn:last-child{
        width: 54%;
        margin-left: 4%;
    }
    .story-learn-btn a {
        padding: 6% 0;
    }
    .story-explore {
        margin-top: 10%;
        padding: 0 5%;
    }
    .story-explore-title p {
        width: 100%;
    }
    /* 调整轮播图大小 */
    .story-explore-swiper-wrap .story-explore-slide {
        width: 160px;
        height: 140px;
    }
    .story-explore-slide.swiper-slide-prev,
    .story-explore-slide.swiper-slide-next {
        width: 190px;
        height: 170px;
    }
    .story-explore .story-explore-prev,
    .story-explore .story-explore-next {
        width: 40px;
        height: 40px;
        top: 50%;
        display: none;
    }
    .story-explore-slide.prev-prev,
    .story-explore-slide.next-next {
        display: none; /* 在手机上隐藏较远的轮播项 */
    }
    .story-explore-slide.swiper-slide-active {
        width: 220px;
        height: 190px;
    }
    .story-delivered {
        margin-top: 10%;
        padding: 5% 5% 10%;
    }
    .story-delivered-title p {
        width: 100%;
    }
    .story-delivered .story-delivered-prev,
    .story-delivered .story-delivered-next {
        width: 40px;
        height: 40px;
        top: 50%;
        display: none;
    }
}

/* 资质认证 */
.certified{
    width: 100%;
    position: relative;
}
.certified-head{
    background-image: url(../img/certifiedbg1.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 6.8% 6%;
    position: relative;
}
.certified-head-title{
    width: 49%;
}
.certified-head-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 50px */
    text-transform: capitalize;
}
.certified-head-title p{
    color: #FFF;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 22.5px */
    text-transform: capitalize;
    margin-top: 3%;
}
.certified-head-bread{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .5%;
    padding-left: 6%;
}
.certified-head-bread-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    opacity: .2;
}
.certified-titword{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1%;
}
.certified-titword:hover{
    color: #fff;
}
.certified-head-bread-txt{
    position: relative;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
    flex-direction: row;
}
.certified-head-bread-txt a{
    color: #FFF;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.certified-head-bread-txt span i.iconfont.icon-a-11{
    color: #FFF;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.certified-main{
    width: 100%;
    position: relative;
}
.certified-global{
    position: relative;
    margin-top: 4%;
}
.certified-global-title{
    width: 64%;
    margin: 0 auto;
}
.certified-global-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.certified-global-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 22.5px */
    text-transform: capitalize;
}
.certified-global-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 84%;
    margin: 4% auto 0;
    overflow: hidden;
}
.certified-global-cont{
    width: 19%;
    height: auto !important;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: 0 4px 9.9px 0 rgba(0, 0, 0, 0.10);
    padding: .3% 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.certified-global-cont img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持图片比例并居中显示 */
}
.certified-non{
    position: relative;
    margin-top: 4%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.certified-non-content{
    padding: 8%;
    width: 50%;
}
.certified-non-content:last-child{
    padding: 0;
}
.certified-non-title{

}
.certified-non-title h3{
    color: #333;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.certified-non-title p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 170%; /* 27.2px */
    text-transform: capitalize;
    width: 88%;
    margin-top: 6%;
}
.certified-non-icon{
    margin-top: 6%;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 22%;
}
.certified-non-content img{
    width: 100%;
}
.certified-qualification{
    position: relative;
    padding: 4% 6% 6% 6%;
    margin-top: 2%;
    overflow: hidden;
    background-color: #f5f5f5;
}
.certified-qualification-title{
    width: 54%;
    margin: 0 auto;
}
.certified-qualification-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.certified-qualification-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 22.5px */
    text-transform: capitalize;
}
.certified-qualification-content{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 85px;
}
.certified-qualification-cont{
    width: 21%;
    display: flex;
    flex-direction: column;
    transition: all .3s;
    cursor: pointer;
    margin-top: 4%;
    padding: 1%;
    background-color: #fff;
}
.certified-qualification-cont img{
    width: 100%;
    height: auto;
}
.certified-qualification-cont p{
    color: #333;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-align: center;
    margin: 4% 0; 
}
.certified-qualification-cont:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* 模态框样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal-content {
    position: relative;
    background-color: white;
    padding: 2%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5%;
    height: 85vh;
}

.modal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-caption {
    display: none;
    margin-top: 15px;
    color: #333;
    font-size: 16px;
    text-align: center;
}
.modal.show {
    opacity: 1;
    display: flex;
}

.modal-content {
    transition: transform 0.3s ease;
    transform: scale(0.9);
}

.modal.show .modal-content {
    transform: scale(1);
}
.modal-close{
    display: none;
}
/* 图片容器样式 */
.image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* 放大预览框样式 */
.zoom-preview {
    position: absolute;
    width: 200px; /* 放大框宽度 */
    height: 200px; /* 放大框高度 */
    border: 3px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
    display: none; /* 默认隐藏 */
    pointer-events: none; /* 确保鼠标事件能穿透到下方图片 */
    z-index: 1001;
}

/* 可选：添加一个小提示框，提示用户可以放大 */
/* .image-container:hover::after {
    content: "鼠标移动可放大查看细节";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
} */
/* 关闭按钮 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: #ff0000;
}

/* 导航按钮 */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
    left: -20px;
}

.next-btn {
    right: -20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .certified-qualification-content {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .nav-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .prev-btn {
        left: 5px;
    }
    
    .next-btn {
        right: 5px;
    }
}









/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .certified-head-title h3,
    .certified-global-title h3,
    .certified-non-title h3,
    .certified-qualification-title h3 {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .certified-head-title p,
    .certified-titword,
    .certified-head-bread-txt,
    .certified-head-bread-txt a,
    .certified-global-title p,
    .certified-non-title p,
    .certified-qualification-title p,
    .certified-qualification-cont p {
        font-size: 14px !important;
    }
    .certified-head-bread-txt a i.iconfont.icon-home{
        font-size: 12px;
    }
    /* i标签特殊处理，平板端为8px */
    .certified-head-bread-txt span i.iconfont.icon-a-11 {
        font-size: 8px !important;
    }

    /* 布局调整 */
    .certified-head-title {
        width: 70%;
    }
    .certified-global-title,
    .certified-qualification-title {
        width: 90%;
    }
    .certified-global-content {
        flex-wrap: wrap;
        width: 90%;
    }
    .certified-global-cont {
        width: 48%;
        margin-bottom: 4%;
        padding: 0 3%;
    }
    .certified-non {
        flex-direction: column;
    }
    .certified-non-content {
        width: 100%;
        padding: 5% 0;
    }
    .certified-non-icon {
        width: 40%;
    }
    .certified-qualification-cont img {
        margin-left: 10%;
        width: 80%;
    }
    .swiper-pagination.certified-pagination{
        position: relative;
        left: 0;
        bottom: 0;
    }
    .pagination-container a,
    .pagination-container span{
        width: 26px;
        height: 26px;
        line-height: 26px;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .certified-head-title h3,
    .certified-global-title h3,
    .certified-non-title h3,
    .certified-qualification-title h3 {
        font-size: 16px !important;
    }
    
    /* 其他字体改为8px */
    .certified-head-title p,
    .certified-titword,
    .certified-head-bread-txt,
    .certified-head-bread-txt a,
    .certified-global-title p,
    .certified-non-title p,
    .certified-qualification-title p,
    .certified-qualification-cont p {
        font-size: 8px !important;
    }
    .certified-head-bread-txt a i.iconfont.icon-home{
        font-size: 8px;
    }
    /* i标签特殊处理，手机端为4px */
    .certified-head-bread-txt span i.iconfont.icon-a-11 {
        font-size: 4px !important;
    }

    /* 布局调整 */
    .certified-head {
        padding: 15% 5%;
    }
    .certified-head-title {
        width: 100%;
    }
    .certified-global {
        margin-top: 8%;
    }
    .certified-global-title,
    .certified-qualification-title {
        width: 100%;
    }
    .certified-global-content {
        flex-direction: column;
        width: 90%;
    }
    .certified-global-cont {
        width: 100%;
        margin-bottom: 5%;
        padding: 0;
    }
    .certified-non {
        flex-direction: column;
        margin-top: 8%;
    }
    .certified-non-content {
        width: 100%;
    }
    .certified-non-title p {
        width: 100%;
    }
    .certified-non-icon {
        width: 40%;
    }
    .certified-qualification {
        padding: 8% 5% 20% 5%;
        margin-top: 8%;
    }
    .certified-qualification-cont img {
        margin-left: 0;
        width: 100%;
    }
    .swiper-pagination.certified-pagination{
        position: relative;
        left: 0;
        bottom: 0;
    }
    .pagination-container a,
    .pagination-container span{
        width: 26px;
        height: 26px;
        line-height: 26px;
    }
}


/* 工厂 */
.factory{
    position: relative;
    width: 100%;
}
.factory-head{
    position: relative;
    background-image: url(../img/factorybg1.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 10% 6%;
}
.factory-head-title{

}
.factory-head-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 60px */
    text-transform: capitalize;
}
.factory-head-title p{
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.factory-head-bread{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .6%;
    padding-left: 6%;
}
.factory-head-bread-wrap{
    background-color: #333;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.factory-titword{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1%;
}
.factory-titword:hover{
    color: #fff;
}
.factory-head-bread-txt{
    position: relative;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
}
.factory-head-bread-txt .build{
    position: relative;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
}
.factory-head-bread-txt span i.icon-a-11{
    color: #FFF;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.factory-main{
    position: relative;
    width: 100%;
    margin-top: 6%;
}
.factory-box{
    position: relative;
    margin-top: 4%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 6%;
    align-items: center;
}
.factory-box:nth-child(2n-1){
    flex-direction: row-reverse;
}
.factory-box:nth-child(3) .factory-box-txt h3,
.factory-box:nth-child(4) .factory-box-txt h3{
    width: 103%;
}
.factory-box-txt{
    position: relative;
    padding: 3%;
    width: 50%;
}
.factory-box-txt h3{
    color: #333;
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 30px */
    width: 72%;
}
.factory-box-txt p{
    color: #333;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    width: 94%;
    margin: 0;
}
.factory-box-img{
    position: relative;
}
.factory-box-img img{
    width: 100%;
    height: 100%;
}
.factory-expanded{
    position: relative;
    margin-top: 4%;
    padding: 6%;
    overflow: hidden;
    background-color: #fafafa;
}
.factory-expanded-title{
    width: 67%;
}
.factory-expanded-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.factory-expanded-title h3 span{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.factory-expanded-title p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 31.5px */
    text-transform: capitalize;
}
.factory-expanded-content{
    position: relative;
    overflow: hidden;
    margin-top: 3%;
}
.factory-expanded-cont{
    position: relative;
}
.factory-expanded-cont img{
    width: 100%;
}
.factory-expanded .factory-expanded-next{
    top: 60%;
    color: #8E0F0F;
    background-color: #fff;
    width: 3%;
    height: 7%;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.factory-expanded .factory-expanded-prev{
    top: 60%;
    color: #fff;
    background-color: #8E0F0F;
    width: 3%;
    height: 7%;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}


/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .factory-head-title h3,
    .factory-box-txt h3,
    .factory-expanded-title h3,
    .factory-expanded-title h3 span {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .factory-head-title p,
    .factory-titword,
    .factory-head-bread-txt,
    .factory-head-bread-txt .build,
    .factory-box-txt p,
    .factory-expanded-title p {
        font-size: 14px !important;
    }
    .factory-head-bread-txt .build i.iconfont.icon-home {
        font-size: 14px;
    }
    /* i标签特殊处理，平板端为8px */
    .factory-head-bread-txt span i.icon-a-11 {
        font-size: 8px !important;
    }

    /* 布局调整 */
    .factory-box {
        padding: 0 5%;
    }
    .factory-box-txt,
    .factory-box-img {
        width: 100%;
    }
    .factory-box-txt {
        padding: 0 4%;
    }
    .factory-box-txt h3 {
        width: 100%;
    }
    .factory-expanded-title {
        width: 100%;
    }
    .factory-expanded .factory-expanded-next,
    .factory-expanded .factory-expanded-prev {
        width: 5%;
        height: 5%;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .factory-head-title h3,
    .factory-box-txt h3,
    .factory-expanded-title h3,
    .factory-expanded-title h3 span {
        font-size: 16px !important;
    }
    
    /* 其他字体改为8px */
    .factory-head-title p,
    .factory-titword,
    .factory-head-bread-txt,
    .factory-head-bread-txt .build,
    .factory-box-txt p,
    .factory-expanded-title p {
        font-size: 8px !important;
    }
    .factory-head-bread-txt .build i.iconfont.icon-home {
        font-size: 8px;
    }
    /* i标签特殊处理，手机端为4px */
    .factory-head-bread-txt span i.icon-a-11 {
        font-size: 4px !important;
    }

    /* 布局调整 */
    .factory-head {
        padding: 15% 5%;
    }
    .factory-main {
        margin-top: 10%;
    }
    .factory-box {
        flex-direction: column !important;
        padding: 0 5%;
        margin-top: 8%;
    }
    .factory-box-txt,
    .factory-box-img {
        width: 100%;
    }
    .factory-box-txt {
        padding: 5% 0;
    }
    .factory-box-txt h3,
    .factory-box-txt p {
        width: 100%;
    }
    .factory-expanded {
        padding: 5%;
        margin-top: 8%;
    }
    .factory-expanded-title {
        width: 100%;
    }
    .factory-expanded .factory-expanded-next,
    .factory-expanded .factory-expanded-prev {
        display: none;
        width: 8%;
        height: 4%;
        top: 50%;
    }
}

/* 发展历程 */
.history{
    position: relative;
    width: 100%;
}
.history-head{
    background-image: url(../img/historybg1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 10% 6%;
}
.history-head-title{

}
.history-head-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 60px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 60px */
    text-transform: capitalize;
}
.history-head-title p{
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.history-head-bread{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .6%;
    padding-left: 6%;
}
.history-head-bread-wrap{
    background-color: #333;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.history-titword{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1%;
}
.history-titword:hover{
    color: #fff;
}
.history-head-bread-txt{
    position: relative;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
}
.history-head-bread-txt .build{
    position: relative;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
}
.history-head-bread-txt span i.icon-a-11{
    color: #FFF;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.history-main{
    position: relative;
    width: 100%;
}
.history-beginning{
    margin-top: 4%;
    padding: 0 6%;
}
.history-beginning-title{

}
.history-beginning-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.history-beginning-title h3 span{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.history-beginning-title p{
    color: #333;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 20px */
    margin-top: 1.4%;
}
.history-beginning-content{
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-top: 2%;
}
.history-beginning-txt{
    width: 53.5%;
    overflow: hidden;
    padding: 3% 0px 2.4% 2%;
    position: relative;
}
.history-beginning-txt-slide{
    width: 100%;
}
.history-beginning-txt-slide p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 31.5px */
    text-transform: capitalize;
    margin: 0 0 20px 0;
}

/* 自定义滚动区域样式 */
.custom-scroll-container {
    position: relative;
    overflow: hidden; /* 隐藏默认滚动条 */
    height: 520px;
    background-color: #f5f5f5;
    border-bottom-left-radius: 14px;
    border-top-left-radius: 14px;
}

.scroll-content {
    height: 100%;
    overflow-y: scroll; /* 启用垂直滚动 */
    padding-right: 20px; /* 为滚动条预留空间 */
    scrollbar-width: none; /* 隐藏 Firefox 滚动条 */
}

/* 隐藏 Chrome/Safari 滚动条 */
.scroll-content::-webkit-scrollbar {
    display: none;
}

/* 自定义滚动条样式 */
.scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background-color: #d9d9d9;
    border-radius: 3px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

/* 滚动条滑块 */
.scrollbar-thumb {
    position: absolute;
    width: 100%;
    background-color: #8E0F0F;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.scrollbar-thumb:hover {
    background-color: #a8a8a8;
}

.custom-scroll-container:hover .scrollbar {
    opacity: 1;
}

.history-beginning-img{
    width: 40%;
    margin-left: 1.5%;
}
.history-beginning-img img{
    width: 100%;
}
.history-person{
    margin-top: 4%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    background-color: #f0f0f0;
}
.history-person-content{
    margin-right: 10%;
}
.history-person-title{
    position: relative;
}
.history-person-title h4{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 25px */
    margin: 0;
    margin-bottom: 1%;
}
.history-person-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 50px */
    margin: 0;
}
.history-person-title p{
    color: #333;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 125%; /* 27.5px */
    width: 70%;
    margin-top: 5%;
}
.history-person-txt{
    position: relative;
}
.history-person-txt p{
    color: #333;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 24px */
    text-transform: uppercase;
    padding-top: 7%;
    margin-top: 3%;
}
.history-person-txt img{
    position: absolute;
    right: 0;
    top: 0;
}
.history-person-content>img{
    width: 100%;
}
.history-journey{
    position: relative;
    margin-top: 4%;
}

/* 单个时间点容器 */
.timeline-item {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    justify-content: flex-start;
    margin-right: 15%;
}
/* 时间圆点 */
.timeline-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #333;
    background-color: #fff;       /* 圆点与文字的间距 */
    padding: 8px;
}
.timeline-dot span{
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #333;
}
/* 时间文本 */
.timeline-date {
    margin-left: 40px;
    color: #333;
    text-align: center;
    font-family: Poppins;
    font-size: 46px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 46px */
    text-transform: uppercase;
}

.history-jour-content{
    position: relative;
    margin-left: 18%;
}
.history-jour-cont{
    position: relative;
    width: 80%;
    padding-left: 24%;
    padding-bottom: 6%;
    padding-top: 4%;
    border-left: 2px solid #333;
}
.history-jour-cont:nth-child(4) .history-jour-cont-tit .timeline-item{
    margin-right: 3%;
}
.history-jour-cont-tit{
    width: 100%;
    position: absolute;
    top: -2%;
    left: -2%;
    display: flex;
    align-items: center;
    margin-bottom: 4%;
    justify-content: flex-start;
}
.history-jour-cont-tit h3{
    color: #333;
    font-family: Lato;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%;
    text-transform: capitalize;
    margin: 0;
}
.history-jour-cont-txt{
    width: 97.4%;
}
.history-jour-cont-txt p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    text-transform: capitalize;
    margin: 0;
}
.history-jour-cont-img{
    margin-top: 4%;
}
.history-jour-cont-img img{
    width: 100%;
}
/* 激活状态的时间轴节点（及以上）样式 */
.timeline-item.active .timeline-dot{
    border-color: #8E0F0F;
}
.timeline-item.active .timeline-dot span {
    background-color: #8E0F0F; /* 示例：激活时圆点颜色变亮红 */
}
.timeline-item.active .timeline-date {
    color: #8E0F0F; /* 激活时日期文字颜色同步变化 */
}
.timeline-line.active {
    background-color: #8E0F0F; /* 激活部分的线条颜色改变 */
}
.history-brand{
    padding: 6% 0;
    background-color: #f8f8f8;
}
.history-brand-txt{
    width: 76%;
    margin: 0 auto;
}
.history-brand-txt h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.history-brand-txt h3 span{
    color: #8E0F0F;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.history-brand-txt p{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.history-brand-txt h2{
    color: #333;
    text-align: center;
    font-family: Poppins;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 36px */
    text-transform: uppercase;
}


/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .history-head-title h3,
    .history-beginning-title h3,
    .history-beginning-title h3 span,
    .history-person-title h3,
    .history-jour-cont-tit h3,
    .history-brand-txt h3,
    .history-brand-txt h3 span,
    .history-brand-txt h2 {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .history-head-title p,
    .history-titword,
    .history-head-bread-txt,
    .history-head-bread-txt .build,
    .history-beginning-title p,
    .history-beginning-txt-slide p,
    .history-person-title h4,
    .history-person-title p,
    .history-person-txt p,
    .history-jour-cont-txt p,
    .history-jour-cont-txt p span,
    .history-jour-cont:nth-child(3) .history-jour-cont-txt p:nth-child(2),
    .history-jour-cont:nth-child(3) .history-jour-cont-txt p:nth-child(3),
    .history-brand-txt p,
    .history-brand-txt p:nth-child(4) {
        font-size: 14px !important;
    }
    .timeline-date{
        font-size: 18px;
        margin-left: 15px;
    }
    .history-jour-cont{
        width: 100%;
    }
    .history-jour-cont-tit{
        left: -4%;
    }
    .history-head-bread-txt .build i.iconfont.icon-home{
        font-size: 14px;
    }
    /* i标签特殊处理，平板端为8px */
    .history-head-bread-txt span i.icon-a-11 {
        font-size: 8px !important;
    }

    /* 布局调整 */
    .history-beginning-content {
        flex-direction: column;
    }
    .history-beginning-txt,
    .history-beginning-img {
        width: 100%;
        margin-left: 0;
    }
    .history-beginning-txt {
        height: 300px;
    }
    .custom-scroll-container {
        height: 300px;
    }
    .history-person {
        flex-direction: column;
        align-items: flex-start;
        padding: 2% 5%;
    }
    .history-person-content {
        margin-right: 0;
        width: 100%;
    }
    .history-person-title p {
        width: 100%;
    }
    .history-journey {
        flex-direction: column;
        padding: 0 5%;
    }
    .timeline-item {
        padding-left: 0;
        justify-content: center;
    }
    .timeline-line {
        right: 48%;
    }
    .history-brand-txt {
        width: 90%;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .history-head-title h3,
    .history-beginning-title h3,
    .history-beginning-title h3 span,
    .history-person-title h3,
    .history-brand-txt h3,
    .history-brand-txt h3 span,
    .history-brand-txt h2 {
        font-size: 16px !important;
    }
    .history-jour-cont-tit h3{
        font-size: 12px !important;
    }
    /* 其他字体改为8px */
    .history-head-title p,
    .history-titword,
    .history-head-bread-txt,
    .history-head-bread-txt .build,
    .history-beginning-title p,
    .history-beginning-txt-slide p,
    .history-person-title h4,
    .history-person-title p,
    .history-person-txt p,
    .history-jour-cont-txt p,
    .history-jour-cont-txt p span,
    .history-jour-cont:nth-child(3) .history-jour-cont-txt p:nth-child(2),
    .history-jour-cont:nth-child(3) .history-jour-cont-txt p:nth-child(3),
    .history-brand-txt p,
    .history-brand-txt p:nth-child(4) {
        font-size: 8px !important;
    }
    .timeline-date{
        font-size: 12px;
        margin-left: 10px;
    }
    .history-head-bread-txt .build i.iconfont.icon-home{
        font-size: 8px;
    }
    /* i标签特殊处理，手机端为4px */
    .history-head-bread-txt span i.icon-a-11 {
        font-size: 4px !important;
    }

    /* 布局调整 */
    .history-head {
        padding: 15% 5%;
    }
    .history-beginning {
        margin-top: 8%;
        padding: 0 5%;
    }
    .history-beginning-content {
        flex-direction: column;
    }
    .history-beginning-txt,
    .history-beginning-img {
        width: 100%;
        margin-left: 0;
    }
    .history-beginning-txt {
        height: 200px;
        padding: 5% 0;
    }
    .custom-scroll-container {
        height: 200px;
    }
    .history-person {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 5%;
        margin-top: 8%;
    }
    .history-person-content {
        margin-right: 0;
        width: 100%;
    }
    .history-person-title p {
        width: 100%;
    }
    .history-journey {
        flex-direction: column;
        padding: 0 5%;
        margin-top: 8%;
    }
    .history-jour-cont-tit{
        top: -5%;
        left: -6%;
    }
    .timeline-item {
        padding-left: 0;
    }
    .timeline-dot {
        width: 30px;
        height: 30px;
        padding: 5px;
    }
    .timeline-dot span {
        width: 18px;
        height: 18px;
    }
    .timeline-line {
        right: 46%;
    }
    .history-jour-cont {
        width: 100%;
        padding-bottom: 16%;
    }
    .history-brand {
        margin: 10% 0;
        padding: 0 5%;
    }
    .history-brand-txt {
        width: 100%;
    }
}

/* 案例 */
.appli-case{
    width: 100%;
    position: relative;
}
.appli-case-head{
    background-image: url(../img/appli-casebg1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 11% 6%;
    position: relative;
}
.appli-case-head-title{
    position: relative;
}
.appli-case-head-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    text-transform: capitalize;
}
.appli-case-head-title p{
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
}
.appli-case-head-bread{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .5%;
    padding-left: 6%;
}
.appli-case-head-bread-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #333;
    opacity: .4;
}
.appli-case-head-bread-txt{
    position: relative;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
}
.appli-case-head-bread-txt .build{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.appli-case-head-bread-txt span i.icon-a-11{
    color: #FFF;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.appli-case-titword{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1%;
}
.appli-case-titword:hover{
    color: #fff;
}
.appli-case-main{
    width: 100%;
    position: relative;
    padding: 0 6%;
}
.appli-insights{
    margin-top: 6%;
    position: relative;
}
.appli-insights-title{
    width: 80%;
    margin: 0 auto;
}
.appli-insights-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.appli-insights-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-transform: capitalize;
}
.appli-insights-content{
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 4%;
}
.appli-insights-cont{
    width: 24%;
    display: flex;
    flex-direction: column;
}
.appli-insights-cont-img{
    width: 100%;
}
.appli-insights-cont-img img{
    width: 100%;
}
.appli-insights-cont-txt{
    margin-top: 4%;
}
.appli-insights-cont-txt h4{
    color: #333;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 27.5px */
}
.appli-insights-cont-txt p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    width: 95%;
}
.appli-directly{
    margin-top: 6%;
    position: relative;
    width: 100%;
}
.appli-directly-title{
    width: 75%;
    margin: 0 auto;
}
.appli-directly-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.appli-directly-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-transform: capitalize;
}
.appli-directly-content{
    margin-top: 4%;
}
.appli-directly-content img{
    width: 100%;
}
.appli-acoustic{
    position: relative;
    width: 100%;
    margin: 10% 0 8%;
    overflow: hidden;
}
.appli-acoustic-title{
    width: 75%;
    margin: 0 auto;
}
.appli-acoustic-title h3{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
}
.appli-acoustic-title p{
    color: rgba(51, 51, 51, 0.50);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    text-transform: capitalize;
}
.appli-acoustic-content{
    margin-top: 4%;
}
.appli-acoustic .appli-acoustic-content .appli-acoustic-wrap{
    flex-direction: row;
    align-items: flex-end;
}
.appli-acoustic-slide{
    position: relative;
    overflow: hidden;
}
.appli-acoustic-slide-cont{
    position: relative;
    transition: all .3s;
    cursor: pointer;
}
.appli-acoustic-slide-cont:hover .appli-acoustic-slide-wrap{
    display: block;
}
.appli-acoustic-slide-wrap{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5) ;
}
.appli-acoustic-slide-wrap img{
    position: absolute;
    top: 48%;
    left: 48%;
}
.appli-acoustic-slide-cont>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.appli-acoustic-slide-cont>img:hover{

}
.appli-acoustic-slide-cont>img:last-child{
    margin-top: 5.2%;;
}
.appli-acoustic-slide-cont:nth-child(2n)>img:first-child{
    height: 45%;
}
.appli-acoustic-slide-cont:nth-child(2n+1)>img:last-child{
    height: 45%;
}
/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .appli-case-head-title h3,
    .appli-insights-title h3,
    .appli-insights-cont-txt h4,
    .appli-directly-title h3,
    .appli-acoustic-title h3 {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .appli-case-head-title p,
    .appli-case-head-bread-txt,
    .appli-case-head-bread-txt .build,
    .appli-case-titword,
    .appli-insights-title p,
    .appli-insights-cont-txt p,
    .appli-directly-title p,
    .appli-acoustic-title p {
        font-size: 14px !important;
    }
    .appli-case-head-bread-txt .build i.iconfont.icon-home {
        font-size: 12px;
    }
    /* i标签特殊处理，平板端为8px */
    .appli-case-head-bread-txt span i.icon-a-11 {
        font-size: 8px !important;
    }

    /* 布局调整 */
    .appli-insights-title,
    .appli-directly-title,
    .appli-acoustic-title {
        width: 90%;
    }
    .appli-insights-content {
        flex-wrap: wrap;
    }
    .appli-insights-cont {
        width: 48%;
        margin-bottom: 6%;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .appli-case-head-title h3,
    .appli-insights-title h3,
    .appli-insights-cont-txt h4,
    .appli-directly-title h3,
    .appli-acoustic-title h3 {
        font-size: 16px !important;
    }
    
    /* 其他字体改为8px */
    .appli-case-head-title p,
    .appli-case-head-bread-txt,
    .appli-case-head-bread-txt .build,
    .appli-case-titword,
    .appli-insights-title p,
    .appli-insights-cont-txt p,
    .appli-directly-title p,
    .appli-acoustic-title p {
        font-size: 8px !important;
    }
    .appli-case-head-bread-txt .build i.iconfont.icon-home {
        font-size: 8px;
    }
    /* i标签特殊处理，手机端为4px */
    .appli-case-head-bread-txt span i.icon-a-11 {
        font-size: 4px !important;
    }

    /* 布局调整 */
    .appli-case-head {
        padding: 15% 5%;
    }
    .appli-case-main {
        padding: 0 5%;
    }
    .appli-insights-title,
    .appli-directly-title,
    .appli-acoustic-title {
        width: 100%;
    }
    .appli-insights-content {
        flex-direction: column;
    }
    .appli-insights-cont {
        width: 100%;
        margin-bottom: 8%;
    }
    .appli-acoustic {
        margin: 15% 0 12%;
    }
}


/* 定制服务 */
.y-servise{
    position: relative;
    width: 100%;
}
.y-servise-head{
    background-image: url(../img/servicebg1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10% 6%;
    position: relative;
}
.y-servise-head-title{
    position: relative;
    width: 50%;
}
.y-servise-head-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    text-transform: capitalize;
}
.y-servise-head-title p{
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.y-servise-head-bread{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .5%;
    padding-left: 6%;
}
.y-servise-head-bread-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    opacity: .4;
}
.y-servise-head-bread-txt{
    position: relative;
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
}
.y-servise-head-bread-txt .build{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.y-servise-head-bread .y-servise-titword{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1%;
}
.y-servise-head-bread-txt span i.icon-a-11{
    color: #FFF;
    font-family: Roboto;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.y-servise-main{
    position: relative;
    width: 100%;
}
.service-download{
    padding: 0 16%;
    margin: 15% 0;
}
.service-download img{
    width: 100%;
}
.service-download p{
    color: #333;
    text-align: center;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
}
.services-all-menu2 li:last-child .service-download>span{
    color: #8E0F0F;
    font-family: Lato;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    display: flex;
    justify-content: space-around;
    width: 50%;
    margin: 0 auto;
}
.services-all-menu2 li:last-child .service-download>span i.iconfont.icon-a-6{
    font-size: 24px;
}
.services-all-menu2 li:last-child .service-download>span a{
    color: #8E0F0F;
    font-family: Lato;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 38.5px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: capitalize;
    text-align: center;
    border: 0;
    padding: 0;
}
.services-all-top-r{

}
.service-flexble-main{
    position: relative;
    padding: 6%;
}
.service-flexble-title{

}
.service-flexble-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.service-flexble-title p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    width: 88%;
}
.service-flexble-content{
    display: flex;
    justify-content: space-between;
    margin-top: 2%;
}
.service-flexble-content-l{
    width: 26.5%;
}
.flexble-l-menu{
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    list-style: none;
}
.flexble-l-menu>li{
    position: relative;
    margin-bottom: 11%;
}
.flexble-l-menu>li>a{
    display: block;
    color: #000;
    font-family: Lato;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%; /* 38.5px */
    text-transform: capitalize;
    border-radius: 14px;
    padding: 2%;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    box-sizing: border-box;
    transition: all .3s;
    background-color: #f5f5f5;
}
.flexble-l-menu>li>a span{
    display: inline-block;
    width: 25%;
    height: 100%;
}
.flexble-l-menu>li>a span img{
    width: 60%;
    margin-left: 15%;
}
.flexble-l-menu>li>a.flex-on{
    color: #8E0F0F;
    border: 1px solid #8E0F0F;
}
.flexble-l-menu>li>a:hover{
    color: #8E0F0F;
    border: 1px solid #8E0F0F;
}
.flexble-l-menu>li>a span{
    display: inline-block;
    width: 25%;
    height: 100%;
}
.service-flexble-content-r{
    position: relative;
    width: 67.5%;
}
.flex-color-title,
.flex-logo-title,
.flex-label-title,
.flex-other-title{
    position: relative;
}
.flex-color-title h3,
.flex-logo-title h3,
.flex-label-title h3,
.flex-other-title h3{
    color: #333;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
}
.flex-color-title p,
.flex-logo-title p,
.flex-label-title p,
.flex-other-title p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 20px */
    width: 92%;
}
.flex-color-content,
.flex-logo-content,
.flex-label-content,
.flex-other-content{
    position: relative;
}
.flex-logo-content{
    display: flex;
    justify-content: flex-start;
}
.flex-logo-content img{
    margin-right: 4%;
}
.flex-other-content{
    display: flex;
    justify-content: space-between;
}

.shipments-main{
    position: relative;
    padding: 6%;
}
.shipments-title{
    position: relative;
    width: 90%;
}
.shipments-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.shipments-txt{

}
.shipments-txt p{
    color: #666;
    font-family: Lato;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 33px */
}
.shipments-txt>ul li{
    list-style: disc;
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.shipments-txt>ul li::marker{
    color: #8E0F0F;
}
.shipments-img{
    width: 100%;
    position: relative;
}
.shipments-img img{
    width: 100%;
    height: 100%;
}
.service-cases-main{
    position: relative;
    padding: 6%;
    width: 100%;
}
.service-cases-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.service-cases-title p{
    color: #666;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    width: 96%;
    margin-top: 2%;
}
.service-cases-content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 4%;
}
.service-cases-content img{
    display: block;
    padding: 0 0% 2% 0;
    width: 32%;
}
.service-cases-review{
    position: relative;
    width: 100%;
    padding-left: 6%;
}
.service-cases-review-title{
    width: 70%;
    position: relative;
}
.service-cases-review-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
    display: flex;
    align-items: center;
}
.service-cases-review-title p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.service-cases-review-content{
    position: relative;
    overflow: hidden;
    margin-top: 2%;
    margin-bottom: 2%;
}
.service-cases-review-wrap{

}
.service-case-review-cont{
    padding: 3% 0 3% 3%;
    margin-bottom: 14%;
    width: 69.5% !important;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #f8f8f8;
    cursor: pointer;
}
.service-case-review-cont:last-child{
    margin-right: 30.5%;
}
.service-case-review-cont-title{
    width: 50%;
    position: relative;
}
.service-case-review-cont-title h3{
    color: #000;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 30px */
    display: flex;
    align-items: center;
}
.service-case-review-cont-title h3 span{
    width: 55px;
    height: 55px;
    background-image: url(../img/service-review.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-right: 4%;
    position: relative;
}
.service-case-review-cont>span{
    background-image: url(../img/“.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 7%;
    top: 15%;
    width: 53px;
    height: 30px;
}
.service-case-review-cont-txt{
    position: relative;
    width: 100%;
}
.service-case-review-cont-txt p{
    color: #333;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
}
.service-cases-review-content .service-cases-review-next{
    top: 85%;
    background-color: #A6A6A6;
    color: #fff;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    transition: all .3s;
}
.service-cases-review-content .service-cases-review-prev{
    top: 85%;
    background-color: #8e0f0f;
    color: #fff;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    transition: all .3s;
}
.service-cases-review-content .service-cases-review-next:hover{
    background-color: #8e0f0f;
}
.service-cases-review-content .service-cases-review-prev:hover{
    background-color: #A6A6A6;
}
.service-cases-review-content .service-cases-review-next::after, 
.service-cases-review-content .service-cases-review-prev::after{
    font-size: 14px;
}
.service-cases-review-content .service-cases-review-next{
    left: 4.5%;
}
.service-cases-review-content .service-cases-review-prev{
    left: 0;
}
.service-faq-main{
    width: 100%;
    padding: 6%;
    position: relative;
}
.service-faq-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.service-faq-title p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    width: 80%;
}
.service-faq-content{
    position: relative;
    margin-top: 4%;
    width: 100%;
}
.service-faq-txt{
    width: 100%;
    position: relative;
    padding: 0;
}
.service-faq-txt>li{
    padding: 2% 0;
    border-top: 1px solid #e6e6e6;
    list-style: none;
}
.service-faq-txt li:last-child{
    border-bottom: 1px solid #e6e6e6;
}
.service-faq-q{
    color: #333;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
    margin: 0;
    cursor: pointer;
    transition: color 0.3s; /* 问题文字颜色过渡 */
}
.service-faq-q span{
    text-align: center;
    display: inline-block;
    color: #FFF;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 22.5px */
    text-transform: capitalize;
    background-color: #333;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 2%;
}
.service-faq-a{
    color: #666;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 175%;
    text-transform: capitalize;
    margin: 0;
    opacity: 0; /* 默认透明 */
    height: 0; /* 默认高度为0（隐藏） */
    transition: all .3s; /* 高度和透明度同时过渡 */
    display: flex;
    justify-content: flex-start;
}
.service-faq-txt li.faq-an .service-faq-a {
    opacity: 1;
    height: auto !important;
    margin-top: 2%;
}
.service-faq-txt li.faq-an .service-faq-q{
    color: #C73119;
}
.service-faq-txt li.faq-an .service-faq-q span{
    background-color: #C73119;
}
.service-faq-a span{
    display: inline-block;
    color: #FFF;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 22.5px */
    text-transform: capitalize;
    background-color: #C73119;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 2%;
    text-align: center;
}
.service-faq-a>div{
    width: 100%;
}
.service-faq-a>div p{
    color: #666;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 175%;
    text-transform: capitalize;
    margin: 0;
    width: 100%;
}
.service-faq-pagenation {
    margin-top: 6%;
}

.service-faq-pagenation a {
    display: inline-block;
    padding: .5% 1.2%;
    margin: 0 1%;
    text-decoration: none;
    color: #333;
    border-radius: 50%;
}

.service-faq-pagenation a:hover {
    background-color: #f0f0f0;
}
a.pagination-active {
    color: #fff;
    background-color: #333;
}
a.pagination-active:hover {
    background-color: #333;
}


/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .y-servise-head-title h3,
    .service-flexble-title h3,
    .flex-color-title h3,
    .flex-logo-title h3,
    .flex-label-title h3,
    .flex-other-title h3,
    .shipments-title h3,
    .service-cases-title h3,
    .service-cases-review-title h3,
    .service-case-review-cont-title h3,
    .service-faq-title h3 {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .y-servise-head-title p,
    .y-servise-head-bread-txt,
    .y-servise-head-bread-txt .build,
    .y-servise-titword,
    .service-download p,
    .services-all-menu2 li:last-child .service-download>span,
    .services-all-menu2 li:last-child .service-download>span a,
    .service-flexble-title p,
    .flex-color-title p,
    .flex-logo-title p,
    .flex-label-title p,
    .flex-other-title p,
    .flexble-l-menu>li>a,
    .shipments-txt p,
    .shipments-txt>ul li p,
    .service-cases-title p,
    .service-cases-review-title p,
    .service-case-review-cont-txt p,
    .service-faq-title p,
    .service-faq-q,
    .service-faq-a,
    .service-faq-a span:last-child,
    .service-faq-pagenation a {
        font-size: 14px !important;
    }
    
    /* i标签特殊处理，平板端为8px */
    .y-servise-head-bread-txt span i.icon-a-11,
    .services-all-menu2 li:last-child .service-download>span i.iconfont.icon-a-6,
    .service-faq-q span,
    .service-faq-a span:first-child {
        font-size: 16px !important;
    }

    /* 布局调整 */
    .y-servise-head-title {
        width: 70%;
    }
    .service-download {
        padding: 0 8%;
    }
    .services-all-menu2 li:last-child .service-download>span {
        width: 70%;
    }
    .service-flexble-content {
        flex-direction: column;
    }
    .service-flexble-content-l,
    .service-flexble-content-r {
        width: 100%;
    }
    .flexble-l-menu {
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 5%;
    }
    .flexble-l-menu>li {
        width: 48%;
        margin-right: 2%;
        margin-bottom: 3%;
    }
    .flex-logo-content,
    .flex-other-content {
        flex-wrap: wrap;
    }
    .flex-logo-content img {
        width: 45%;
        margin-bottom: 4%;
    }
    .service-cases-content img {
        width: 48%;
        margin-bottom: 4%;
    }
    .service-cases-review-title,
    .service-case-review-cont {
        width: 100% !important;
    }
    .service-case-review-cont:last-child {
        margin-right: 0;
    }
    .service-faq-title p {
        width: 100%;
    }
    .service-faq-a span:last-child {
        width: 90%;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .y-servise-head-title h3,
    .service-flexble-title h3,
    .flex-color-title h3,
    .flex-logo-title h3,
    .flex-label-title h3,
    .flex-other-title h3,
    .shipments-title h3,
    .service-cases-title h3,
    .service-cases-review-title h3,
    .service-case-review-cont-title h3,
    .service-faq-title h3 {
        font-size: 16px !important;
    }
    
    /* 其他字体改为8px */
    .y-servise-head-title p,
    .y-servise-head-bread-txt,
    .y-servise-head-bread-txt .build,
    .y-servise-titword,
    .service-download p,
    .services-all-menu2 li:last-child .service-download>span,
    .services-all-menu2 li:last-child .service-download>span a,
    .service-flexble-title p,
    .flex-color-title p,
    .flex-logo-title p,
    .flex-label-title p,
    .flex-other-title p,
    .flexble-l-menu>li>a,
    .shipments-txt p,
    .shipments-txt>ul li p,
    .service-cases-title p,
    .service-cases-review-title p,
    .service-case-review-cont-txt p,
    .service-faq-title p,
    .service-faq-q,
    .service-faq-a,
    .service-faq-a span:last-child,
    .service-faq-pagenation a {
        font-size: 10px !important;
    }
    
    /* i标签特殊处理，手机端为4px */
    .services-all-menu2 li:last-child .service-download>span i.iconfont.icon-a-6,
    .service-faq-q span,
    .service-faq-a span:first-child {
        font-size: 14px !important;
    }
    .y-servise-head-bread-txt span i.icon-a-11{
        font-size: 6px !important;
    }
    /* 布局调整 */
    .y-servise-head {
        padding: 15% 5%;
    }
    .y-servise-head-title {
        width: 100%;
    }
    .service-download {
        padding: 0 5%;
        margin: 20% 0;
    }
    .services-all-menu2 li:last-child .service-download>span {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    .service-flexble-main,
    .shipments-main,
    .service-cases-main,
    .service-faq-main {
        padding: 5%;
    }
    .service-flexble-content {
        flex-direction: column;
    }
    .service-flexble-content-l,
    .service-flexble-content-r {
        width: 100%;
    }
    .flexble-l-menu {
        flex-direction: column;
    }
    .flexble-l-menu>li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5%;
    }
    .flex-logo-content,
    .flex-other-content {
        flex-direction: column;
    }
    .flex-color-content img,
    .flex-logo-content img,
    .flex-label-content img,
    .flex-other-content img{
        width: 100%;
    }
    .flex-logo-content img {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5%;
    }
    .shipments-title {
        width: 100%;
    }
    .service-cases-content {
        flex-direction: column;
    }
    .service-cases-content img {
        width: 100%;
        margin-bottom: 5%;
    }
    .service-cases-review {
        padding-left: 5%;
    }
    .service-cases-review-title,
    .service-case-review-cont {
        width: 100% !important;
    }
    .service-case-review-cont {
        padding: 5%;
        margin-bottom: 20%;
    }
    .service-case-review-cont:last-child {
        margin-right: 0;
    }
    .service-case-review-cont-title {
        width: 100%;
    }
    .service-case-review-cont>span {
        width: 30px;
        height: 17px;
    }
    .service-faq-title p {
        width: 100%;
    }
    .service-faq-a {
        flex-direction: column;
    }
    .service-faq-a span:last-child {
        width: 100%;
        margin-top: 2%;
    }
    .service-cases-review-content .service-cases-review-next,
    .service-cases-review-content .service-cases-review-prev {
        width: 30px;
        height: 30px;
    }
}

/* 应用详情 */
.y-office{
    position: relative;
    width: 100%;
}
.y-office-head{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 10% 6%;
    position: relative;
}
.y-office-head-title{

}
.y-office-head-title h3{
    color: #FFF;
    font-family: Inter;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 48px */
    text-transform: capitalize;
}
.y-office-head-title p{
    color: #FFF;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
    width: 39%;
    margin-top: 1.5%;
}
.y-office-head-bread{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .4% 0;
    padding-left: 6%;
}
.y-office-head-bread-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    opacity: .5;
}
.y-office-head-bread-txt{
    position: relative;
    display: flex;
    align-items: center;
}
.y-office-head-bread-txt a{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.y-office-head-bread-txt a:hover{
    color: #fff;
}
.y-office-head-bread-txt i.icon-a-11{
    color: #FFF;
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.y-office-head-bread .y-office-titword{
    color: #FFF;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 1%;
}

.y-office-main{
    width: 100%;
    position: relative;
}
.y-office-upgrade{
    position: relative;
    width: 100%;
    margin-top: 5%;
    padding: 0 6%;
}
.upgrade-title{
    position: relative;
}
.upgrade-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
    width: 50%;
    margin-bottom: 2%;
}
.upgrade-title p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 30.6px */
    text-transform: capitalize;
    width: 78%;
}
.upgrade-content{
    position: relative;
    overflow: hidden;
    margin-top: 3%;
}
.upgrade-content-wrap{
    position: relative;
}
.y-office-upgrade .upgrade-content-next{
    top: 72%;
    color: #8E0F0F;
    background-color: #fff;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.y-office-upgrade .upgrade-content-prev{
    top: 72%;
    color: #fff;
    background-color: #8E0F0F;
    width: 62px;
    height: 62px;
    font-size: 1px;
    border-radius: 50%;
    border: 1px solid #8E0F0F;
    transition: all .3s;
}
.y-office-upgrade .upgrade-content-next:hover{
    background-color: #8e0f0f;
    color: #fff;
}
.y-office-upgrade .upgrade-content-prev:hover{
    background-color: #fff;
    color: #8e0f0f;
}
.y-office-upgrade .upgrade-content-next{
    right: 1.5%;
    padding-left: .2%;
}
.y-office-upgrade .upgrade-content-prev{
    left: 1.5%;
    padding-left: .2%;
}
.y-office-why{
    margin-top: 6%;
    position: relative;
    padding: 0 6%;
}
.y-office-why-title{
    position: relative;
}
.y-office-why-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.y-office-why-title p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
    width: 60%;
}
.y-office-why-content{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 3%;
}
.y-office-why-cont{
    position: relative;
    width: 24%;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: 0 4px 15.2px 0 rgba(0, 0, 0, 0.05);
    padding: 2%;
    transition: all .5s;
    cursor: pointer;
}
.y-office-why-cont:hover{
    transform: translateY(-8px);
}
.y-office-why-cont-tit{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.y-office-why-cont-tit span{
    display: block;
    margin-top: -10%;
}
.y-office-why-cont-tit span i.icon-a-1{
    color: #8E0F0F;
    font-size: 60px;
}
.y-office-why-cont-tit h3{
    color: #333;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 22px */
    margin: 0;
    width: 80%;
}
.y-office-why-cont-tit p{
    color: #666;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    text-transform: capitalize;
}
.y-office-related{
    padding: 6%;
    position: relative;
}
.y-office-related-title{
    position: relative;
}
.y-office-related-title h3{
    color: #333;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 40px */
}
.y-office-related-title p{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    text-transform: capitalize;
    width: 70%;
    margin-top: 2%;
}
.y-office-related-content{
    margin-top: 3%;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    height: 616px;
}
.y-office-related-cont:first-child {
    padding: 6% 0 0 6%;
}
.y-office-related-cont{
    position: relative;
    width: 50%;
    height: 100%
}
.y-office-related-cont-tit{
    position: relative;
}
.y-office-related-cont-tit h4{
    color: #8E0F0F;
    font-family: Lato;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}
.y-office-related-cont-tit h3{
    color: #333;
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
    margin: 6% 0;
    width: 80%;
}
.y-office-related-cont-txt{
    position: relative;
    margin-top: 5%;
}
.y-office-related-cont-txt p:first-child{
    color: var(--grey-paragraph, #636363);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.y-office-related-cont-txt p span{
    position: relative;
    margin-right: 1%;
    font-size: 14px;
    color: #636363;
    opacity: 0.5;
}
.y-office-related-cont-txt p:last-child{
    color: #666;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    width: 90%;
}
.y-office-related-cont img{
    width: 100%;
    height: 100%;
}


/* 平板端 (768px - 1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
    /* 所有h标签字体改为24px */
    .y-office-head-title h3,
    .upgrade-title h3,
    .y-office-why-title h3,
    .y-office-why-cont-tit h3,
    .y-office-related-title h3,
    .y-office-related-cont-tit h3 {
        font-size: 24px !important;
    }
    
    /* 其他字体改为14px */
    .y-office-head-title p,
    .y-office-head-bread-txt a,
    .y-office-head-bread .y-office-titword,
    .upgrade-title p,
    .y-office-why-title p,
    .y-office-why-cont-tit p,
    .y-office-related-title p,
    .y-office-related-cont-tit h4,
    .y-office-related-cont-txt p:first-child,
    .y-office-related-cont-txt p span,
    .y-office-related-cont-txt p:last-child {
        font-size: 14px !important;
    }
    
    /* i标签特殊处理，平板端为8px */
    .y-office-head-bread-txt i.icon-a-11 {
        font-size: 8px !important;
    }
    .y-office-head-bread-txt a i.iconfont.icon-home {
        font-size: 14px;
    }
    .y-office-why-cont-tit span{
        margin-top: 0;
    }
    /* 图标大小调整 */
    .y-office-why-cont-tit span i.icon-a-1 {
        font-size: 40px !important;
    }

    /* 布局调整 */
    .y-office-head-title p {
        width: 60%;
    }
    .upgrade-title h3,
    .upgrade-title p {
        width: 100%;
    }
    .y-office-why-title p {
        width: 100%;
    }
    .y-office-why-content {
        flex-wrap: wrap;
    }
    .y-office-why-cont {
        width: 48%;
        margin-bottom: 4%;
    }
    .y-office-related-title p {
        width: 100%;
    }
    .y-office-related-content {
        height: auto;
    }
    .y-office-related-cont {
        width: 100%;
        height: auto;
    }
    .y-office-related-cont:first-child {
        padding: 5% 0 0 5%;
    }
    .y-office-related-cont-tit h3{
        width: 100%;
    }
    .y-office-upgrade .upgrade-content-next,
    .y-office-upgrade .upgrade-content-prev {
        width: 50px;
        height: 50px;
    }
}

/* 手机端 (<=767px) */
@media (max-width: 767px) {
    /* 所有h标签字体改为16px */
    .y-office-head-title h3,
    .upgrade-title h3,
    .y-office-why-title h3,
    .y-office-why-cont-tit h3,
    .y-office-related-title h3,
    .y-office-related-cont-tit h3 {
        font-size: 16px !important;
    }
    
    /* 其他字体改为8px */
    .y-office-head-title p,
    .y-office-head-bread-txt a,
    .y-office-head-bread .y-office-titword,
    .upgrade-title p,
    .y-office-why-title p,
    .y-office-why-cont-tit p,
    .y-office-related-title p,
    .y-office-related-cont-tit h4,
    .y-office-related-cont-txt p:first-child,
    .y-office-related-cont-txt p span,
    .y-office-related-cont-txt p:last-child {
        font-size: 8px !important;
    }
    .y-office-head-bread-txt a i.iconfont.icon-home {
        font-size: 8px;
    }
    /* i标签特殊处理，手机端为4px */
    .y-office-head-bread-txt i.icon-a-11 {
        font-size: 4px !important;
    }
    .y-office-why-cont-tit span{
        margin-top: 0;
    }
    /* 图标大小调整 */
    .y-office-why-cont-tit span i.icon-a-1 {
        font-size: 30px !important;
    }

    /* 布局调整 */
    .y-office-head {
        padding: 15% 5%;
    }
    .y-office-head-title p {
        width: 100%;
    }
    .y-office-upgrade {
        margin-top: 10%;
        padding: 0 5%;
    }
    .upgrade-title h3,
    .upgrade-title p {
        width: 100%;
    }
    .y-office-why {
        margin-top: 10%;
        padding: 0 5%;
    }
    .y-office-why-title p {
        width: 100%;
    }
    .y-office-why-content {
        flex-direction: column;
    }
    .y-office-why-cont {
        width: 100%;
        margin-bottom: 6%;
    }
    .y-office-related {
        padding: 5%;
        margin-top: 10%;
    }
    .y-office-related-title p {
        width: 100%;
    }
    .y-office-related-content {
        flex-direction: column;
        height: auto;
        margin-top: 6%;
    }
    .y-office-related-cont {
        width: 100%;
        height: auto;
    }
    .y-office-related-cont:first-child {
        padding: 6% 0 0 0;
    }
    .y-office-related-cont-tit h3 {
        width: 100%;
    }
    .y-office-related-cont-txt p:last-child {
        width: 100%;
    }
    .y-office-upgrade .upgrade-content-next,
    .y-office-upgrade .upgrade-content-prev {
        width: 40px;
        height: 40px;
        top: 60%;
        display: none;
    }
}