@charset "utf-8";

/* ==================== 首页旗下企业 ==================== */
.index-subsidiary{background:#f7fafd;display:flex;align-items:center;justify-content:center; padding-top:0.8rem; padding-bottom:1rem; }
.index-subsidiary-main{width:100%;}
.index-subsidiary-tit{color:#08233f;text-align:center;position:relative;display:inline-block;left:50%;transform:translateX(-50%); font-size:0.4rem; }
.index-subsidiary-desc{color:#08233f;text-align:center;line-height:1.8;margin-bottom:.3rem; font-size:0.18rem;}
.index-subsidiary-list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;}
.index-subsidiary-list .item{flex:0 0 auto;width:calc((100% - 1.2rem) / 5);background:#fff;border-radius:.15rem;padding:.6rem .25rem .4rem;text-align:center;box-shadow:0 0 .1rem rgba(0,0,0,.03);transition:.3s;border:1px solid #f0f1f2;position:relative;margin-top:.45rem;}
.index-subsidiary-list .item:hover{box-shadow:0 0 .2rem rgba(0,104,206,.1);transform:translateY(-5px);}
.index-subsidiary-list .item .ico{width:.9rem;height:.9rem;position:absolute;left:50%;top:-0.45rem;transform:translateX(-50%);border-radius:50%;overflow:hidden;}
.index-subsidiary-list .item .ico img{width:100%;height:100%;}
.index-subsidiary-list .item .name{color:#08233f;line-height:1.5;min-height:1.2rem;display:flex;align-items:center;justify-content:center; font-size:0.24rem;}
.index-subsidiary-list .item:hover{ box-shadow:0 0 .2rem rgba(0,104,206,.1);  transform:translateY(-5px);}

/* ==================== 吹塑成型页面专属样式 ==================== */

/* 面向医药包装应用的全链路吹塑成型能力 */
.chuisu-ability-section{padding:1rem 0;background:#fff;}
.chuisu-ability-main{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.chuisu-ability-l{flex:0 0 auto;width:42%;}
.chuisu-ability-r{flex:0 0 auto;width:52%;}
.chuisu-ability-r .imgbox{border-radius:.15rem;overflow:hidden;}
.chuisu-ability-r .imgbox img{width:100%;display:block;}
.chuisu-ability-tit{color:#08233f;line-height:1.4;margin-bottom:.5rem;position:relative;}
.chuisu-ability-tit::after{content:"";position:absolute;left:0;bottom:-0.2rem;width:0.8rem;height:0.05rem;background-color:#4078dd;border-radius:0.03rem;}
.chuisu-ability-desc{color:#08233f;line-height:1.875;margin-top:.4rem;}

/* 工艺方向 */
.chuisu-dir-section{padding:1rem 0;background:#f7fafd;}
.chuisu-dir-section .section-title{color:#08233f;text-align:center;margin-bottom:.6rem;position:relative;display:inline-block;left:50%;transform:translateX(-50%);}
.chuisu-dir-section .section-title::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-0.15rem;width:0.8rem;height:0.05rem;background-color:#4078dd;border-radius:0.03rem;}
.chuisu-dir-list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;}
.chuisu-dir-list .item{flex:0 0 auto;width:calc((100% - 0.6rem) / 3);background:#fff;border-radius:.15rem;padding:.4rem;display:flex;align-items:center;gap:.2rem;box-shadow:0 0 .1rem rgba(0,0,0,.03);transition:.3s;border:1px solid #f0f1f2;}
.chuisu-dir-list .item:hover{box-shadow:0 0 .2rem rgba(0,104,206,.1);}
.chuisu-dir-list .item .ico{width:.8rem;height:.8rem;flex:0 0 auto;}
.chuisu-dir-list .item .ico img{width:100%;height:100%;}
.chuisu-dir-list .item .text{flex:1 1 auto;}
.chuisu-dir-list .item .name{color:#08233f;margin-bottom:.1rem;}
.chuisu-dir-list .item .desc{color:#707983;font-size:.16rem;line-height:1.6;}

/* 鑫富达如何做好注拉吹与注吹成型 */
.chuisu-cap-section{padding:1rem 0;background:#fff;}
.chuisu-cap-section .section-title{color:#08233f;text-align:center;margin-bottom:.6rem;position:relative;display:inline-block;left:50%;transform:translateX(-50%);}
.chuisu-cap-section .section-title::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-0.15rem;width:0.8rem;height:0.05rem;background-color:#4078dd;border-radius:0.03rem;}
.chuisu-cap-main{display:flex;align-items:stretch;justify-content:space-between;gap:.4rem;}
.chuisu-cap-img{flex:0 0 auto;width:42%;border-radius:.15rem;overflow:hidden;}
.chuisu-cap-img img{width:100%;height:100%;object-fit:cover;display:block;}
.chuisu-cap-list{flex:1 1 auto;display:flex;flex-direction:column;gap:0;}
.chuisu-cap-item{display:flex;align-items:flex-start;gap:.2rem;padding:.25rem 0;border-bottom:1px solid #e4edfb;}
.chuisu-cap-item:last-child{border-bottom:none;}
.chuisu-cap-num{color:#4078dd;font-size:.32rem;font-weight:600;flex:0 0 auto;width:.55rem;line-height:1;font-family:Barlow,sans-serif;}
.chuisu-cap-text{flex:1 1 auto;}
.chuisu-cap-name{color:#08233f;margin-bottom:.08rem;font-family:HarmonyOS_Sans_SC_Medium,sans-serif;}
.chuisu-cap-desc{color:#08233f;font-size:.16rem;line-height:1.6;}

/* 技术优势 */
.chuisu-adv-section{padding:1rem 0;background:#fff;}
.chuisu-adv-section .section-title{color:#08233f;text-align:center;margin-bottom:.6rem;position:relative;display:inline-block;left:50%;transform:translateX(-50%);}
.chuisu-adv-section .section-title::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-0.15rem;width:0.8rem;height:0.05rem;background-color:#4078dd;border-radius:0.03rem;}
.chuisu-adv-list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;}
.chuisu-adv-list .item{flex:0 0 auto;width:calc((100% - 1.2rem) / 5);background:#fff;border-radius:.15rem;padding:.35rem;text-align:center;box-shadow:0 0 .1rem rgba(0,0,0,.03);transition:.3s;border:1px solid #f0f1f2;}
.chuisu-adv-list .item:hover{box-shadow:0 0 .2rem rgba(0,104,206,.1);}
.chuisu-adv-list .item .ico{width:.7rem;height:.7rem;margin:0 auto .2rem;}
.chuisu-adv-list .item .ico img{width:100%;height:100%;}
.chuisu-adv-list .item .name{color:#08233f;margin-bottom:.1rem;}
.chuisu-adv-list .item .desc{color:#707983;font-size:.14rem;line-height:1.6;}

/* ==================== 视频展示页面专属样式 ==================== */

/* 播放按钮小三角 */
.ico-play{display:inline-block;width:0;height:0;border-top:.08rem solid transparent;border-bottom:.08rem solid transparent;border-left:.14rem solid currentColor;}

/* banner */
.video-banner{position:relative;height:auto;overflow:hidden;background:no-repeat center center;background-size:cover;}
.video-banner .banTxt{position:relative;left:0;top:0;width:100%;padding:2.5rem 0 1.5rem 0;}
.video-banner-l{width:45%;}
.video-banner-l .t1{color:#08233f;font-size:.6rem;margin-bottom:.2rem;}
.video-banner-l .t2{color:#022866;font-size:.2rem;line-height:1.8;margin-bottom:.4rem;width:75%;}
.video-banner-btns{display:flex;align-items:center;gap:.2rem;}
.video-banner-btns .btn{display:inline-flex;align-items:center;gap:.1rem;padding:.15rem .3rem;border-radius:.1rem;border:1px solid #4078dd;color:#0245c2;font-size:.16rem;transition:.3s; background-color:#dfecfc;}
.video-banner-btns .btn:hover,.video-banner-btns .btn.active{background:#0245c2;color:#fff;}
.video-banner-btns .btn .ico-play{border-left-color:currentColor;}

/* 视频列表页 banner */
.video-list-page .pbanner .banTxt{padding-top:1.5rem;box-sizing:border-box;}
.video-list-page .pbanner .t1{color:#08233f;}

/* 视频列表公共 */
.video-section{padding:1rem 0;background:#fff; }
.video-section.nopt { padding-top:0; }
.video-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;}
.video-section-title{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;}
.video-section-title .ico{width:.4rem;height:.4rem;flex:0 0 auto;}
.video-section-title .ico img{width:100%;height:100%;}
.video-section-title .name{color:#4078dd;}
.video-section-title .desc{color:#08233f;font-size:.18rem;}
.video-more{display:inline-flex;align-items:center;gap:.05rem;color:#4078dd;font-size:.16rem;}
a.video-more {color:#4078dd;}
.video-list{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;}
.video-list .item{flex:0 0 auto;width:calc((100% - 0.9rem) / 4);background:#fff;border-radius:.15rem;overflow:hidden;box-shadow:0 0 .1rem rgba(0,0,0,.03);transition:.3s;border:1px solid #f0f1f2;}
.video-list .item:hover{box-shadow:0 0 .2rem rgba(0,104,206,.1);}
.video-list .item .imgbox{position:relative;padding-bottom:60%;overflow:hidden;}
.video-list .item .imgbox img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:.8s;}
.video-list .item:hover .imgbox img{transform:scale(1.05);}
.video-list .item .imgbox .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.6rem;height:.6rem;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;color:#4078dd;}
.video-list .item:hover .imgbox .play{background:#fff;transform:translate(-50%,-50%) scale(1.1);}
.video-list .item .imgbox .play .ico-play{border-top:.1rem solid transparent;border-bottom:.1rem solid transparent;border-left:.18rem solid currentColor;margin-left:.04rem;}
.video-list .item .imgbox .time{position:absolute;left:.15rem;bottom:.15rem;background:rgba(0,0,0,.5);color:#fff;font-size:.14rem;padding:.05rem .1rem;border-radius:.05rem;}
.video-list .item .text{padding:.2rem;position:relative;}
.video-list .item .tit{color:#08233f;margin-bottom:.08rem;font-size:.2rem;}
.video-list .item .desc{color:#707983;font-size:.16rem;line-height:1.6;padding-right:.3rem;}
.video-list .item .arrow{position:absolute;right:.2rem;bottom:.2rem;color:#4078dd;font-size:.16rem;}

/* 响应式 */
@media(max-width:1024px){
.index-subsidiary-list .item{width: calc((100% - 0.6rem) / 3);}
.chuisu-ability-l,.chuisu-ability-r{width:100%;}
.chuisu-ability-r{margin-top:.3rem;}
.chuisu-dir-list .item{width: calc((100% - 0.3rem) / 2);}
.chuisu-cap-section .chuisu-cap-main{flex-direction:column;}
.chuisu-cap-section .chuisu-cap-img{width:100%;}
.chuisu-adv-list .item{width: calc((100% - 0.6rem) / 3);}
.video-banner-l{width:60%;}
.video-list .item{width: calc((100% - 0.3rem) / 2);}
}

@media(max-width:768px){
.index-subsidiary{padding:0.4rem 0;}
.index-subsidiary-tit{ font-size:24px; }
.index-subsidiary-desc{ font-size:16px;}
.index-subsidiary-list{justify-content:center;}
.index-subsidiary-list .item{width:100%;max-width:4rem;margin-top:.5rem;}
.index-subsidiary-list .item .ico{width:1rem;height:1rem;top:-0.5rem;}

.chuisu-ability-section,.chuisu-dir-section,.chuisu-cap-section,.chuisu-adv-section{padding:0.4rem 0;}
.chuisu-dir-list .item{width:100%;}
.chuisu-adv-list .item{width: calc((100% - 0.3rem) / 2);}
.video-banner .banTxt{padding:0.8rem 0;}
.video-banner-l{width:90%;}
.video-banner-l .t1{font-size:.4rem;}
.video-section{padding:0.4rem 0;}
.video-section-title .desc{width:100%;margin-top:0;}
.video-list .item{width:100%;}
.video-section-head { display:block; }
.video-more { margin-top:0.1rem; }

}