@charset "utf-8";
/* ===================首页样式========================== */

.banner{width: 100%;height: 100vh;overflow: hidden;position: relative;}
.banner .swiper {height: 100%;}
.banner picture{width:100%;height:100%;display:block;overflow:hidden}
.banner .bg{width: 100%;height:100%; object-fit: cover;}
.banner .banner-cont{width:100%;height:100%;position:absolute;left:0;top:0;padding: 0px 0px 40px;}
.banner .banner-cont .contain {height: 100%;display: flex;flex-direction: column;justify-content: center;}
.banner .banner-cont .title,.banner .banner-cont .sm-title,.banner .banner-cont .desc {color: #ffffff;}
.banner .banner-cont .title {font-size: 60px;font-weight: bold;margin-bottom: 80px;}
.banner .banner-cont .sm-title {font-size: 40px;margin-bottom: 20px;}
.banner .banner-cont .desc {font-size: 24px;margin-bottom: 80px;}
.banner .banner-cont .com-btn {color: #fff;font-size: 18px;display: block;width: 140px;height: 50px;line-height: 48px;text-align: center;border-radius: 3px;border:1px solid #ffffff;}
.banner .swiper-slide-active .title{animation:com-animate 1s ease both .2s}
.banner .swiper-slide-active .sm-title{animation:com-animate 1s ease both .4s}
.banner .swiper-slide-active .desc{animation:com-animate 1s ease both .6s}
.banner .swiper-slide-active .com-btn{animation:com-animate 1s ease both .8s}

.banner .swiper-pagination{width: 100%;display: flex;justify-content: center;bottom: 20px;}
.banner .swiper-pagination-bullet {width: 8px;height: 8px;border-radius: 10px;background: #ffffff;opacity: 0.5;position: relative;margin: 0 4px !important;}
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 20px;background: #FFFFFF;opacity: 1}

.banner .swiper-button-next, .banner .swiper-button-prev {width: 60px;height: 60px;background-color: #099AEB;border-radius: 50%; -moz-background-size: 15px 24px; -webkit-background-size: 15px 24px; background-size: 15px 24px; }

/* 动画 */
.com-animate,.com-animate-f{opacity: 0}
.animate.com-animate{animation: com-animate 1.5s ease both}
.animate.com-animate-f{animation: com-animate 1s ease both}
@keyframes com-animate{0%{opacity:0;transform:scale(.95) translateY(40px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes to-up{from{opacity:0;filter:Alpha(opacity=0);-webkit-transform:translateY(50px);transform:translateY(50px)}to{opacity:1;filter:Alpha(opacity=100);-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes to-down{from{opacity:0;filter:Alpha(opacity=0);-webkit-transform:translateY(-50px);transform:translateY(-50px)}to{opacity:1;filter:Alpha(opacity=100);-webkit-transform:translateY(0);transform:translateY(0)}}


.indspace{padding-top: 100px;position: relative;}


.product{width: 100%;}
.product-menu {width: 100%; font-size: 0; margin-top: 32px; user-select: none; text-align: center;}
.product-menu ul li {display: inline-block; vertical-align: middle; font-size: 18px; height: 50px; line-height: 48px; border: 1px solid #cccccc; border-radius: 30px; padding: 0px 30px; margin: 0 15px; cursor: pointer; text-align: center;}
.product-menu ul li:hover {color: #099AEB; border-color: #099AEB;}
.product-menu ul li.active {color: #ffffff; border-color: #099AEB; background-color: #099AEB;}

.product-wrap{width: 100%;position: relative;}
.product-wrap a{display: block;width: 100%;position: relative;border: 1px solid #EBEBEB;position: relative;transition: all .4s ease;}
.product-wrap a .image {width: 100%;text-align: center;padding-bottom: 20px;overflow: hidden;}
.product-wrap a .image img {width: 100%;object-fit: cover;transition: all 1s ease;}
.product-wrap a .info {width: 100%;padding: 24px 20px;position: relative;z-index: 2;}
.product-wrap a .info .title {color:#222;font-size: 18px;font-weight: bold;transition: all .4s ease;}
.product-wrap a .info .title:hover {color: #E30083;}
.product-wrap a .info .cont {width: 100%; font-size: 16px;color: #686868; margin-top: 10px; }
.product-wrap a .info .cont p {display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden; transition: all .4s ease;}
.product-wrap a .info .more {color: #E30083;display: inline-block;margin-top: 20px;}
.product-wrap a .info .more:after {content: '>>';margin-left: 8px;}
.product-wrap a:hover .image img{transform: scale(1.05);}
.product-wrap .swiper-button-prev {left: -80px;}
.product-wrap .swiper-button-next {right: -80px;}

.about-box .about-cont {width: 60%;float: left;}
.about-box .about-cont h6 { color: #222;font-size: 64px;font-weight: bold; margin-bottom: 20px;}
.about-box .about-cont .desc p {font-size: 20px; color: #222; line-height: 28px;}
.about-box .about-cont a.btn {display: block; color: #fff; font-size: 20px; width: 250px; height: 75px; line-height: 75px; text-align: center; background: #E30083; border:1px solid #E30083;border-radius: 50px; margin-top: 50px; transition: all .4s ease;}
.about-box .about-cont a.btn:hover {background: #fff;color: #E30083;}


.about-box .about-num {margin-top: 50px;display: flex;justify-content: space-between;}
.about-box .about-num li {text-align: center;}
.about-box .about-num li p {font-size: 72px;font-weight: bold;}
.about-box .about-num li .about-num-h4 {color: #767676;font-size: 20px;} 
.about-box .about-image {float: right;border-radius: 30px 30px 0px 0px;overflow: hidden;}


.advantages-box {display: flex;position: relative;}
.advantages-box .image {overflow: hidden;border-radius: 20px;}
.advantages-box .wrap {position: absolute;right: 0;max-width: 720px;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.advantages-box .wrap .list {display: flex;align-items: center;background: #FFFFFF;border: 1px solid #EBEBEB;border-radius: 30px;padding: 32px;margin: 10px 0px;transition: all .4s ease;}
.advantages-box .wrap .list .icon {width: 85px;height: 85px;margin-right: 30px;}
.advantages-box .wrap .list .icon img {display: block;width: 100%;height: 100%;}
.advantages-box .wrap .list .cont {flex: 1;overflow: hidden;}
.advantages-box .wrap .list .cont .title {color: #202020;font-size: 36px;font-weight: bold;transition: all .4s ease;}
.advantages-box .wrap .list .cont p {color: #666666;font-size: 20px;transition: all .4s ease;}
.advantages-box .wrap .list:hover {background: #E30083;}
.advantages-box .wrap .list:hover .cont .title {color: #ffffff;}
.advantages-box .wrap .list:hover .cont p {color: #ffffff;}


.factory-box {display: flex;align-items: flex-start;justify-content: space-between;}
.factory-box .item {width: calc(100% / 3 - 13px);}
.factory-box .item .img-box {margin-bottom: 26px;overflow: hidden;}

.cert {padding-bottom: 100px;margin-top: 100px;background-color: #F5F5F5;}
.cert-box {position: relative;}
.cert-box .swiper-slide img {width: 100%;}
.cert-box .swiper-button-prev {left: -80px;}
.cert-box .swiper-button-next {right: -80px;}

.contact {padding-bottom: 100px;}
.contact-box {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 460px;border-radius: 20px;overflow: hidden;background-image: url('../images/about-bg.jpg');background-repeat: no-repeat;background-size: cover;}
.contact-box .pubTitle h6 {color: #fff;}
.contact-box .pubTitle p {color: #fff;}
.contact-box .contact-form {margin-top: 80px;}
.contact-box .contact-form .contact_form {display: flex;}
.contact-box .contact-form input {width: 460px; height: 60px; background: #FFFFFF; border-radius: 12px; padding: 0px 20px; color: #666; font-size: 18px;}
.contact-box .contact-form button {width: 160px; height: 60px; background: #E30083; border-radius: 12px; color: #ffffff; font-size: 18px; cursor: pointer;}


.news-wrap {width: 100%;}
.news-wrap a .image {width: 100%;text-align: center;margin-bottom: 20px;border-radius: 10px;overflow: hidden;}
.news-wrap a .image img {display: block;width: 100%;object-fit: cover;transition: all 1s ease;}
.news-wrap a .cont .title {color: #202020;font-size: 20px;text-align: center;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden; transition: all .4s ease;}
.news-wrap a .cont .title:hover {color: #E30083;}
.news-wrap a:hover .image img{transform: scale(1.05);}


.news-wrap .swiper-button-next,.news-wrap .swiper-button-prev,.news-wrap .swiper-pagination {position: static;margin-top: 0px;}
.news-pagination {display: flex;align-items: center;justify-content: center;margin-top: 50px;}
.news-pagination .swiper-pagination {width: auto;margin: 0px 15px;}
.news-pagination .swiper-pagination .swiper-pagination-bullet {background: #999999;margin: 0px 5px;}
.news-pagination .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #E30083;opacity: 1}
/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900/1024/1200) */
  
}

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */
    /* 产品 / 认证 轮播箭头移入容器内，避免被裁切 */
    .product-wrap .swiper-button-prev {left: 6px;}
    .product-wrap .swiper-button-next {right: 6px;}
    .cert-box .swiper-button-prev {left: 6px;}
    .cert-box .swiper-button-next {right: 6px;}
}

@media all and (max-width:1439px) {
    /* 1360 × (768) */
    .banner .banner-cont .title {font-size: 48px;margin-bottom: 50px;}
    .banner .banner-cont .sm-title {font-size: 32px;}
    .banner .banner-cont .desc {font-size: 20px;margin-bottom: 50px;}
    .about-box .about-cont h6 {font-size: 48px;}
    .advantages-box .wrap .list .cont .title {font-size: 28px;}
    .advantages-box .wrap .list .cont p {font-size: 16px;}
}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */
    .product-wrap .swiper-button-prev,
    .product-wrap .swiper-button-next,
    .cert-box .swiper-button-prev,
    .cert-box .swiper-button-next,
    .news-wrap .swiper-button-next, 
    .news-wrap .swiper-button-prev {width: 44px;height: 44px;}
    .factory-box .item .img-box {margin-bottom: 18px;}
}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
    .advantages-box .wrap {max-width: 600px;}
    .contact-box .contact-form input {width: 380px;}
}

@media all and (max-width:1151px) {
    /* 1024 × (600/768) */
    .banner .banner-cont .title {font-size: 40px;margin-bottom: 40px;}
    .banner .banner-cont .sm-title {font-size: 26px;}
    .banner .banner-cont .desc {font-size: 18px;margin-bottom: 40px;}
}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .banner {height: 360px;}
    .banner .swiper-pagination {bottom: 5px;}
    .banner .swiper-pagination-bullet {width: 10px;}
    
    .cert {margin-top: 58px;padding-bottom: 58px;}
    .indspace {padding-top: 58px;}   

   

    .case-menu li {margin: 0 28px;}
    .case-list {margin-top: 35px;}
    .case-list .case-item.case-item-large {width: 100%;}
    .case-list .case-item {width: calc(50% - 30px)}

    .about-box .about-cont {width: 100%;float: none;}
    .about-box .about-cont h6 {font-size: 24px;}
    .about-box .about-cont a.btn {font-size: 17px; width: 210px; height: 60px; line-height: 60px; border-radius: 34px; margin-top: 35px;}

    .about-box .about-num {width: 100%;margin-top: 35px;}
    .about-box .about-num ul li {width: 25%;padding: 0px 10px;text-align: center;}
    .about-box .about-num ul li p span {font-size: 48px;}
    .about-list {margin-top: 35px;}
    .about-list .about-list-li {width: calc((100% - 40px)/3);height: 400px;margin-right: 20px;padding: 20px;}
    .about-list .about-list-li .about-title h6 {font-size: 24px;}
    .about-list .about-list-li .about-img img {width: 90px;height: 90px;}
    .about-list .about-list-li .about-wd p {font-size: 14px;height: 84px;}

    .client {padding-bottom: 58px;margin-top: 58px;}
    .client-list {margin-top: 35px;}

    .indnews {padding: 58px 0px;}
    .news-list li {margin-top: 35px;}
    .news-img img {height: 200px;}
    .news-wd {padding: 15px;}

    /* ---------- 首页区块适配（平板 720） ---------- */
    .banner .banner-cont .title {font-size: 34px;margin-bottom: 30px;}
    .banner .banner-cont .sm-title {font-size: 24px;margin-bottom: 16px;}
    .banner .banner-cont .desc {font-size: 16px;margin-bottom: 30px;}
    .banner .banner-cont .com-btn {width: 120px;height: 44px;line-height: 42px;font-size: 16px;}

    /* 产品 / 认证轮播箭头在触屏端隐藏（支持滑动） */
    .product-wrap .swiper-button-prev,
    .product-wrap .swiper-button-next,
    .cert-box .swiper-button-prev,
    .cert-box .swiper-button-next {display: none;}

    /* 优势区：图文改为上下堆叠 */
    .advantages-box {flex-direction: column;}
    .advantages-box .image {width: 100%;}
    .advantages-box .wrap {position: static;max-width: 100%;width: 100%;padding: 24px 0;}
    .advantages-box .wrap .list {margin: 10px 0;padding: 24px;}

    /* About 图片改为整宽 */
    .about-box .about-image {float: none;width: 100%;margin-top: 30px;border-radius: 0px;}

    /* 工厂图集：3 列 → 2 列 */
    .factory-box {flex-wrap: wrap;}
    .factory-box .item {width: calc(50% - 13px);}
    .factory-box .item.center {width: 100%;order: -1;}

    /* 联系表单：横向居中、可换行 */
    .contact {padding-bottom: 58px;}
    .contact-box {height: auto;padding: 60px 20px;}
    .contact-box .pubTitle {margin-bottom: 30px;}
    .contact-box .contact-form {margin-top: 30px;display: flex;flex-wrap: wrap;justify-content: center;gap: 14px;}
    .contact-box .contact-form input {width: 100%;max-width: 460px;}
    .contact-box .contact-form button {width: 160px;}

    /* 新闻卡片标题 */
    .news-wrap a .cont .title {font-size: 18px;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .banner {height: 240px;}

    .cert {margin-top: 40px;padding-bottom: 40px;}
    .indspace {padding-top: 40px;}   

    .product-menu ul li {margin: 5px;width: calc(50% - 10px);}

    .about-box .about-num {margin-top: 15px;}
    .about-box .about-num ul li {width: 50%;padding: 10px;}
    .about-box .about-num ul li p span {font-size: 32px;}
    .about-list .about-list-li {width: 100%;height: auto;margin-bottom: 15px;}
    .about-list .about-list-li .about-title h6 {margin-top: 10px;font-size: 20px;}
    .about-list .about-list-li .about-img {margin: 20px 0px;}
    .about-list .about-list-li .about-wd p {height: auto;}

    .case-menu li {margin: 0 20px; margin-top: 20px;}
    .case-list .case-item {width: calc(50% - 15px);margin-left: 10px;margin-bottom: 10px;}
    .case-list .case-item .case-wd {padding: 10px 85px 10px 15px;}
    .case-list .case-item .case-wd .btn {width: 60px;}

    .client {padding-bottom: 40px;margin-top: 40px;}
    .client-list ul li {width: 33.3333333%;}
    .client-list ul li .img {height: 85px;}

    .indnews {padding: 40px 0px;}
    .news-list ul {margin-left: 0px;}
    .news-list li {width: 100%;margin-left: 0px;}
    .news-img img {height: 240px;}

    /* ---------- 首页区块适配（手机 360+） ---------- */
    .banner .banner-cont .title {font-size: 24px;margin-bottom: 20px;}
    .banner .banner-cont .sm-title {font-size: 18px;margin-bottom: 12px;}
    .banner .banner-cont .desc {font-size: 14px;margin-bottom: 20px;}

    /* 优势卡片：图标与文字纵向居中 */
    .advantages-box .wrap .list {flex-direction: column;text-align: center;padding: 20px;}
    .advantages-box .wrap .list .icon {margin: 0 0 14px;}
    .advantages-box .wrap .list .cont .title {font-size: 22px;}
    .advantages-box .wrap .list .cont p {font-size: 15px;}

    /* About 文字 */
    .about-box .about-cont h6 {font-size: 24px;}
    .about-box .about-cont a.btn {font-size: 15px; width: 170px; height: 50px; line-height: 50px; border-radius: 28px; margin-top: 25px;}
    .about-box .about-cont .desc p {font-size: 16px;line-height: 24px;}

    /* 工厂图集：2 列 → 1 列 */
    .factory-box {flex-direction: column;}
    .factory-box .item,
    .factory-box .item.center {width: 100%;order: 0;}
    .factory-box .item .img-box {margin-bottom: 16px;}

    /* 联系表单：全宽纵向堆叠 */
    .contact {padding-bottom: 40px;}
    .contact-box {padding: 30px 16px;}
    .contact-box .contact-form {flex-direction: column;align-items: stretch;}
    .contact-box .contact-form input {flex: 1;height: 54px;padding: 0px 10px;font-size: 16px;}
    .contact-box .contact-form button {width: 100px;height: 54px;margin-left: 10px;}
    .news-wrap a .cont .title {font-size: 16px;}
}