@charset "utf-8";

/* 
    author:sdw;
    date:2024-05-20;
    Copyright:©sdw;
*/

/*--wrap-title--*/
/* .wrap-title{text-align:center;color:#003243;animation:fadeInUpSmall 1s;}
.wrap-title h2{font-size:42px;color:#1c1e24;}
.wrap-title h2 a{color:#1c1e24;}
.wrap-title h2 a:hover{color:var(--vi-color);}
.wrap-title:after{display:block;margin:15px auto 0;width:40px;height:4px;content:"";background:var(--vi-color);}
@media(max-width:1200px){
.wrap-title h2{font-size:24px;}
} */
/*--end wrap-title--*/


/* banner */
.banner { overflow: hidden;background: #fff;}
.banner .inner { position: relative;}
.banner .inner .item{display:block;overflow: hidden;}
.banner .inner .banner-arrow {animation: lignt 2s infinite  linear;position: absolute;right: 250px;top: 90px;text-align: center;}
.banner .inner .banner-arrow i { font-size: 16px; color: #999;}
.banner .inner .banner-arrow p { margin-top: 10px; font-size: 14px; color: #ccc;}
.banner .banner-pic { position: relative; cursor: pointer;}
.banner .videoPlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width:57px; height: 57px; z-index: 3;}
.banner .banner-text {padding: 30px 0 30px;margin: 0 auto;width:1400px; animation: fadeInLeftSmall 1.2s;}
.banner .banner-text h3 { font-size: 62px; color: #333;}
.banner .banner-text p { font-size: 24px; color: #999;}
.banner .swiper-pager {position: absolute;left: calc(50% - 700px);bottom: 60px;width: 1400px;z-index: 3;text-align:center;}
.banner .swiper-pager span.swiper-pagination-bullet { margin-right: 15px; width: 12px; height: 12px; background: transparent; border:1px solid #000}
.banner .swiper-pager span.swiper-pagination-bullet-active { background: var(--vi-color); border: 1px solid var(--vi-color);}
.banner .prev,.banner .next{  opacity: 0; font-size:38px; position:absolute;z-index:9;top:50%;width:60px;height:60px;line-height:58px;color:#fff;text-align:center;cursor:pointer;outline:none;}
.banner:hover .prev,.banner:hover .next {opacity: .7;}
.banner .prev{left:5%;}
.banner .next{right:5%;}
.banner .prev:hover,.banner .next:hover{color:var(--vi-color);opacity:1;font-weight: bold;}
@keyframes lignt {
    0% { transform: translateY(-20px); }
    50% { transform: translateY(0);}
    100% {transform: translateY(20px); opacity: 0;}
}
@media (max-width:1600px) {
    .banner .banner-text  { width: 1200px;}
    .banner .swiper-pager { left: calc(50% - 600px); width: 1200px;}
}

@media (max-width:1200px) {
    .banner .banner-text { padding: 20px 20px 20px;width: 100%;background-color:#f4f4f4;}
    .banner .banner-text h3 { font-size: 30px;}
    .banner .banner-text p { font-size: 18px;}
    .banner .inner .banner-arrow { display: none;}
    .banner .swiper-pager  { bottom: 20px; text-align: center;}
    .banner .swiper-pager span.swiper-pagination-bullet { margin-right: 10px; width: 8px; height: 8px;}
    .banner .videoPlay { width: 40px; height: 40px;}
}

/* banner */


/* duck */
.duck {position: relative;width: 100%;padding: 50px 0 315px;background: url(../images/Index/duck01-bg.jpg) no-repeat top center;}
.duck .wrapper { position: relative; display: flex; justify-content: space-between;}
.duck .duck-const .duck-more {margin-top: 80px;}
.duck .duck-const .duck-more a  { color: #c1c1c1;}
.duck .duck-const .duck-more a span { display: inline-block; font-size: 16px; height: 25px; border-bottom: 1px solid #c1c1c1;}
.duck .duck-const .duck-more a i { margin-left: 20px; display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; border:1px solid #c1c1c1; text-align: center; font-size: 18px;} 
.duck .duck-const .duck-more a:hover span {border-bottom: 1px solid var(--vi-color); color:var(--vi-color);}
.duck .duck-const .duck-more a:hover i { background: var(--vi-color); border: 1px solid var(--vi-color); color: #fff;}
.duck .duck-const-sum { margin-top: 190px;animation: fadeInUpSmall 1.2s;}
.duck .duck-const-sum i { margin-bottom: 30px; display: block; width: 2px; height: 115px; background: #c2c2c2;}
.duck .duck-const-sum p {line-height:1.5; font-size: 18px; color: #333;}
.duck .duck-pic {position: absolute;right: 230px;bottom: -310px;width: 700px;animation: fadeInLeftSmall 1s;}
.duck .duck-pic .cir li {cursor: pointer;position: absolute; border-radius: 50%;}
.duck .duck-pic .cir li p {display: none; position: absolute;text-align: center;width: 100px;padding: 5px;border-radius: 20px;background: var(--vi-color);color: #fff;font-size: 18px;z-index: 4;}
.duck .duck-pic .cir li p::after { content: ''; display: block; position: absolute; left: calc(50% - 8px); bottom: -16px; width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid transparent;border-top: 8px solid var(--vi-color);}
.duck .duck-pic .cir li span { position:absolute;   border-radius: 50%; width: 16px; height: 16px;background: var(--vi-color);left: calc(50% - 8px); top: calc(50% - 8px);}
.duck .duck-pic .cir li span::after { content: ""; position: absolute;border-radius: 50%;background: #fff;width: 6px; height: 6px;left: calc(50% - 3px); top: calc(50% - 3px);}
.duck .duck-pic .cir li::after { animation: lignt2 2s infinite  linear; content: ""; position: absolute;background: rgba(230,0,19,.5); border-radius: 50%; width: 100%; height: 100%;}
.duck .duck-pic .cir li:nth-child(1) {width: 50px;height: 50px; top: 95px;left: 30px; }
.duck .duck-pic .cir li:nth-child(2) {width: 55px;height: 55px;top: 175px;left: 125px}
.duck .duck-pic .cir li:nth-child(3) {width: 70px;height: 70px;top: 175px;left: 325px}
.duck .duck-pic .cir li:nth-child(4) {width: 86px;height: 86px;bottom: 80px;left: 207px;}
.duck .duck-pic .cir li:nth-child(1) p {top: -30px;left: -25px;}
.duck .duck-pic .cir li:nth-child(2) p {top: -25px;left: -25px;}
.duck .duck-pic .cir li:nth-child(3) p {top: -20px;left: -15px;}
.duck .duck-pic .cir li:nth-child(4) p {top: -10px;left: -7px;}
.duck .duck-pic .cir li:hover p { display: block;opacity:1; }
@keyframes lignt2 {
    0% { transform:scale(.7); opacity: .2;}
    50% { transform: scale(1); opacity: .5;}
    100% {transform:scale(.7);opacity:.2;}
}
@media (max-width:1600px) {
    .duck .duck-pic { width: 650px; right: 230px; bottom: -300px;}
    .duck .duck-const-sum p { font-size: 16px;}
}
@media (max-width:1200px) {
    .duck .wrapper { flex-wrap: wrap;}
    .duck {padding: 40px 20px 140px; background-size: 260%;}
    .duck .duck-pic {  right: unset; left: 0; top: 230px; width: 240px;}
    .duck .duck-const-sum i { display: none;}
    .duck .duck-const-sum {margin-left: 200px;position: relative;margin-top: 30px;}
    .duck .duck-const-sum p { font-size: 14px;}
    .duck .duck-pic .cir li span { width: 8px; height: 8px; left: calc(50% - 4px); top: calc(50% - 4px);}
    .duck .duck-pic .cir li span::after { width: 4px; height: 4px;left: calc(50% - 2px); top: calc(50% - 2px);}
    .duck .duck-pic .cir li:nth-child(1) {width: 30px;height: 30px; top: 8px;left: 5px; }
    .duck .duck-pic .cir li:nth-child(2) {width: 35px;height: 35px;top: 25px;left: 35px;}
    .duck .duck-pic .cir li:nth-child(3) {width: 40px;height: 40px;top: 50px;left: 125px}
    .duck .duck-pic .cir li:nth-child(4) {width: 48px;height: 48px;bottom: 200px;left: 65px;}
    .duck .duck-pic .cir li p { display: none; width: 80px; padding: 2px; border-radius: 10px; font-size: 14px;opacity:0;}

    .duck .duck-pic .cir li:nth-child(2) p { top: 35px;}
    .duck .duck-pic .cir li:nth-child(2) p::after { top: -12px; bottom: 0; border-bottom: 6px solid var(--vi-color);border-top: 6px solid transparent;}
    .duck .duck-pic .cir li p::after { border-width:6px; bottom: -12px;}
    .duck .duck-const .duck-more {margin-top: 25px;}
    .duck .duck-const .duck-more a i { margin-left: 15px; width: 35px; height: 35px; line-height: 35px; font-size: 14px;}
    .duck .duck-const .duck-more a span { font-size: 14px;}
}
/* duck end */

/* indexAdv */
.indexAdv {background: #fff;padding-bottom: 100px;}
.indexAdv-const{display:flex;}
.adv-left-slide{position:relative;z-index:2;width:63.54%;margin-right:50px;overflow:hidden;}
.adv-left-slide .item{position:relative;}
.adv-left-slide .item .pic{overflow:hidden;}
.adv-left-slide .item .pic img{transition:all 1s;}
.adv-left-slide .item .text{position:absolute;top:0;left:0;padding:11% 21%;width:100%;height:100%;color:#fff;display:flex;flex-direction:column;}
.adv-left-slide .item .text a {color:#fff;}
.adv-left-slide .item .text i{display:block;width:52px;height:52px;}
.adv-left-slide .item .text h3{margin-top:45px;font-size:42px;}
.adv-left-slide .item .text p{margin-top:25px;font-size:18px;}
.adv-left-slide .item .text a {display:flex;align-items:center;margin-top:65px;font-size:16px;color:#fff;}
.adv-left-slide .item .text a  span{display:block;height:25px;border-bottom:#fff solid 1px;}
.adv-left-slide .item .text a  i{display:flex;align-items: center;justify-content: center;margin-left:20px;font-size:16px;width:50px;height:50px;color:#fff;border:#fff solid 1px;border-radius:50%;}
.adv-left-slide .item .text a:hover span{color:var(--vi-color);border-color:var(--vi-color);}
.adv-left-slide .item .text a:hover i{border-color:var(--vi-color);background-color:var(--vi-color);}
.adv-left-slide .item:hover .pic img{transform:scale(1.05);}

.adv-right-slide{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;width:340px;}
.adv-right-slide .item{overflow:hidden;opacity:0;transition:all .5s;}
.adv-right-slide .item .pic{overflow:hidden;}
.adv-right-slide .item .pic img{transition:all 1s;}
.adv-right-slide .item .title{margin-top:20px;overflow:hidden;}
.adv-right-slide .item .title h3{font-size:24px;color:#999999;}
.adv-right-slide .item.swiper-slide-active,.adv-right-slide .item.swiper-slide-next{opacity:1;}
.adv-right-slide .swiper-arrow{display:flex;align-items:center;height:50px;}
.adv-right-slide .swiper-arrow div{display:flex;align-items:center;justify-content:center;margin-right:20px;width:50px;height:50px;border:#d7d7d7 solid 1px;border-radius:50%;}
.adv-right-slide .swiper-arrow div:hover{color:#fff;background:var(--vi-color);border-color:var(--vi-color);}
@media(max-width:1600px){
.adv-left-slide .item .text{padding:10% 20%;}
.adv-right-slide{width:300px;}
}

@media(max-width:1500px){
.adv-left-slide .item .text{padding:10% 16%;}
.adv-right-slide{width:260px;}
}

@media(max-width:1200px){
.indexAdv{padding:50px 20px;}
.adv-left-slide{display:none;}
.adv-right-slide{width:100%;}
.adv-right-slide .item{opacity:1;}
.adv-right-slide .item .title{margin-top:10px;}
.adv-right-slide .item .title h3{font-size:16px;}
.adv-right-slide .swiper-arrow{display:none;}
}
/* indexAdv end */

/*--products--*/
.products{padding:0px 0 80px;overflow:hidden;background:#fff;}
.products-menu{margin-top:36px;overflow:hidden;}
.products-menu ul{display:flex;flex-wrap:wrap;justify-content:flex-start;}
.products-menu li{width:150px;text-align:center;border-right:#d8d8d8 solid 1px;}
.products-menu li:nth-child(1){border-left:#d8d8d8 solid 1px;}
.products-menu li a{display:block;padding:15px 0;}
.products-menu li i{display:block;margin:0 auto;width:40px;height:40px;overflow:hidden;}
.products-menu li i img{display:block;transform:translateX(-100%);filter:drop-shadow(40px 0px #999);}
.products-menu li span{display:block;margin-top:8px;font-size:16px;color:#999;}
.products-menu li:hover i img,.products-menu li.cur i img{filter:drop-shadow(40px 0px var(--vi-color));}
.products-menu li:hover span,.products-menu li.cur span{color:var(--vi-color);}
.products-main{margin-top:40px;}
.products-list{display:flex;flex-wrap:wrap;margin:-15px;}
.products-list .item{margin:15px;width: calc(25% - 30px);overflow:hidden;transition:all 1s;background: #fff;}
.products-list .pic{overflow:hidden;background:#ededed;}
.products-list .pic img{transition:all 1s;}
.products-list .tit{padding: 0 40px;line-height:70px;font-size:18px;overflow:hidden;} 
.products-list .tit a{display:block;color:#333;transition:all 1s;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.products-list .tit a:before{display:block;float:right;font-family:"iconfont";content:"\e694";}
.products-list .item:hover{background:#fff;box-shadow:0 0 20px rgba(0,0,0,.1);}
.products-list .item:hover .pic img{transform:scale(1.1);}
.products-list .item:hover .tit a{padding:0 10px;color:var(--vi-color);}
.products-main .more{margin-top:50px;}
.products-main .more a{display:flex;align-items: center;justify-content: center;font-size:16px;color:#666;}
.products-main .more a span{display:block;height:25px;border-bottom:#ccc solid 1px;}
.products-main .more a i{display:flex;align-items: center;justify-content: center;margin-left:20px;font-size:16px;width:50px;height:50px;border:#ccc solid 1px;border-radius:50%;}
.products-main .more a:hover span{color:var(--vi-color);border-color:var(--vi-color);}
.products-main .more a:hover i{color:#fff;border-color:var(--vi-color);background-color:var(--vi-color);}
@media(max-width:1600px){
.products-menu li{width:140px;}
}
@media(max-width:1200px){
.products{padding:0 20px 40px;}
.products-menu{display:none;margin-top:25px;}
.products-menu li{width:20%;border:none !important;}
.products-menu li a{padding:10px 0;}
.products-menu li i{width:20px;height:20px;}
.products-menu li span{margin-top:5px;font-size:14px;}
.products-menu li:hover i img,.products-menu li.cur i img{transform:translateX(-100%);filter:drop-shadow(20px 0px var(--vi-color));}
.products-main{margin-top:20px;}
.products-list{margin:-5px;}
.products-list .item{margin:5px;width:calc(50% - 10px);}
.products-list .tit{padding:0;line-height:35px;font-size:14px;}
}
/*--end products--*/


/* factory */
.factory {  padding: 100px 0; height: 1195px; background: url(../images/Index/factory-bg.jpg) no-repeat center;}
.factory .inner { display: flex; }
.factory .const-title { width: 60%;}
.factory .factory-more   {margin-top: 70px;display: inline-block;color: #c1c1c1;overflow: hidden;}
.factory .factory-more span { display: inline-block; font-size: 16px; height: 25px; border-bottom: 1px solid #c1c1c1;}
.factory .factory-more span::after { display: none;}
.factory .factory-more i { margin-left: 20px; display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; border:1px solid #c1c1c1; text-align: center; font-size: 18px;} 
.factory .factory-more:hover span {border-bottom: 1px solid var(--vi-color); color:var(--vi-color);}
.factory .factory-more:hover i { background: var(--vi-color); border: 1px solid var(--vi-color); color: #fff;}
.factory .factory-list { margin-left: 140px;}
.factory .factory-list  li { margin-bottom: 40px;}
.factory .factory-list  li span { display: block;}
.factory .factory-list  li i { position: relative; font-size: 62px; color: var(--vi-color); font-weight: bold;}
.factory .factory-list  li i::after { content: '+'; display: block; position: absolute; top: -10px; right: 0; font-size: 16px; color: var(--vi-color);}
.factory .factory-list  li p { display: inline-block; font-size: 18px; color: #666; padding: 5px; border: 1px solid #c9c9c9;}
@media (max-width:1200px) {
    .factory { padding: 70px 20px 150px; height: auto; background-size:150%;background-color:#d9d9d9;background-position-y:bottom;}
    .factory .inner { flex-wrap: wrap;}
    .factory .const-title { width: 100%;}
    .factory .factory-more { margin-top: 40px;}
    .factory .factory-more span { font-size: 14px;}
    .factory .factory-more i { margin-left: 15px; width: 35px; height: 35px; line-height: 35px; font-size: 14px;}
    .factory .factory-list { margin: 40px 0 0; width: 100%;}
    .factory .factory-list ul { display: flex; justify-content: space-between;}
    .factory .factory-list li i { font-size: 28px;}
    .factory .factory-list li p { font-size: 12px;}
    .factory .factory-list li i::after { font-size: 14px;}
}
/* factory end */


/* news */
.news { padding: 60px 0; background: #fff;}
.news-top-slide{position:relative;overflow:hidden;}
.news-top-slide .item{display:flex;flex-wrap:wrap;justify-content:space-between;}
.news-top-slide .item .pic{width:60%;overflow:hidden;}
.news-top-slide .item .pic img{transition:all 1s;}
.news-top-slide .item .pic:hover img{transform:scale(1.1);}
.news-top-slide .item .text{width:35%;overflow:hidden;}
.news-top-slide .item .text em{display:block;width:90px;height:20px;line-height:20px;text-align:center;font-size:12px;color:#fff;background:var(--vi-color);}
.news-top-slide .item .text h3{margin-top:8px;max-height:calc(32px * 1.5 * 3);font-size:32px;line-height:1.5;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow:hidden;text-overflow: ellipsis;}
.news-top-slide .item .text h3 a{color:#333;}
.news-top-slide .item .text h3 a:hover{color:var(--vi-color);}
.news-top-slide .item .text p{margin-top:16px;font-size:18px;line-height:1.5;color:#666;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow:hidden;text-overflow: ellipsis;}
.news-top-slide .swiper-arrow{position:absolute;z-index:9;right:0;bottom:0;width:35%;display:flex;align-items:center;}
.news-top-slide .swiper-arrow div{display:flex;align-items:center;justify-content:center;margin-right:20px;width:50px;height:50px;background:#fff;border:#e0e0e0 solid 1px;border-radius:50%;}
.news-top-slide .swiper-arrow div:hover{color:#fff;cursor:pointer;background:var(--vi-color);border-color:var(--vi-color);}
.news-top-slide .swiper-pager{position:absolute;z-index:9;left:0;bottom:30px;width:60%;text-align:center;}
.news-top-slide .swiper-pager span{background:#ccc;opacity:1;}
.news-top-slide .swiper-pager span.swiper-pagination-bullet-active{background:var(--vi-color);}

.news-slide{position:relative;margin-top:50px;}
.news-slide .item{display:block;}
.news-slide .item .pic{overflow:hidden;}
.news-slide .item .pic img{transition:all 1s;}
.news-slide .item .text{padding:10px;overflow:hidden;background:#f0f0f0;}
.news-slide .item .text h3{height:calc(16px * 1.5 * 3);font-size:16px;line-height:1.5;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow:hidden;text-overflow: ellipsis;}
.news-slide .item:hover .pic img{transform:scale(1.1);}
.news-slide .item:hover .text h3{color:var(--vi-color);}
.news-slide .swiper-arrow{}
.news-slide .swiper-arrow div{display:flex;align-items:center;justify-content:center;position:absolute;z-index:9;top:50%;width:50px;height:50px;cursor:pointer;background:#fff;border:#e0e0e0 solid 1px;border-radius:50%;transform:translateY(-50%);}
.news-slide .swiper-arrow div.prev{left:-80px;}
.news-slide .swiper-arrow div.next{right:-80px;}
.news-slide .swiper-arrow div:hover{color:#fff;background:var(--vi-color);border-color:var(--vi-color);}
.news-slide .swiper-arrow div.swiper-button-disabled{cursor:default;opacity:0.5;}
.news-slide .swiper-pager{margin-top:30px;width:100%;text-align:center;}
.news-slide .swiper-pager span{background:#ccc;opacity:1;}
.news-slide .swiper-pager span.swiper-pagination-bullet-active{background:var(--vi-color);}

@media(max-width:1200px){
.news{padding:40px 20px;}
.news-top-slide .item .pic{width:100%;}
.news-top-slide .item .text{margin-top:20px;width:100%;}
.news-top-slide .item .text h3{height:calc(18px * 1.5 * 3);font-size:18px;}
.news-top-slide .item .text p{display:none;}
.news-top-slide .swiper-arrow{display:none;}
.news-top-slide .swiper-pager{position:static;margin:-top:20px;width:100%;}

.news-slide{margin-top:25px;}
.news-slide .item .text h3{height:calc(14px * 1.5 * 2);font-size:14px;-webkit-line-clamp: 2;}
.news-slide .swiper-arrow{display:none;}
.news-slide .swiper-pager{margin-top:20px;}
}
/* news end */