
.index_banner {
    width:100%;
    height: 100vh;
    position: relative;
}
.index_banner img {
    width:100%;
    height:100vh;
}

.index_banner .swiper-pagination-bullets {
    bottom:5%;
}
.index_banner .swiper-pagination-bullet {
    width:1rem;
    height:1rem;
}

.index_banner .swiper-button-prev {
    left:5%
}
.index_banner .swiper-button-next {
    right:5%
}

@media  screen and (max-width: 1000px){
    .index_banner {
        height:auto;
    }
    .index_banner .swiper-slide img {
        height:auto;
        display: block;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 1rem;
    }
    .index_banner .swiper-pagination-bullet {
        width:0.5rem;
        height:0.5rem;
    }
}


.home-tit{text-align: center; padding: 1rem 0;}

.home-tit .en{
    display: block;
    color: transparent;
    -webkit-text-stroke-color: #c3c3c3;
    -webkit-text-stroke-width: 1px;
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: .5;
}
.home-tit .cn{color: var(--comcolor); font-size: 2.5rem; position: relative;z-index: 2; top: -1.2rem; font-weight:bold}
.home-tit p{font-size: 1rem; color: #666; margin: 0;font-weight: normal;}




.index_products {width:100%;padding:0 0 2rem 0;background: #fff;position:relative;z-index: 9;overflow-x: hidden;}

.pro_list .product {
    width:100%;
    border: 1px solid #6969694f;
}
.pro_list .product:hover {
    box-shadow: 2px 2px 10px #909090;
}
.pro_list .product .pro_img {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.pro_list .product .pro_img img {
    width: 100%;
    display: block;
}
.pro_list .product p {
    transition: All 0.4s ease-in-out;
    font-size: 1rem;
    line-height: 2rem;
    height:2rem;
    color: #333;
    padding: 0 2%;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    overflow: hidden;
}


@media  screen and (min-width: 1000px){
    .pro_box {
        display: flex;
        justify-content: space-between;
    }
    .pro_box .pro_left{
        width:18%;
    }
    .pro_box .pro_left{
        border-right: 1px solid #dedede;
    }
    .pro_box .pro_left ul li{
        position:relative;
        background: #f4f4f4;
        margin: 5px;
    }
    .pro_box .pro_left ul li:after{
        content:"";
        position:absolute;
        width:0;
        top:0;
        left:0;
        height:100%;
        background: linear-gradient(to right, var(--comcolor), rgba(78, 78, 78, 0.36));
        transition:all .5s;

    }
    .pro_box .pro_left ul li.active:after{
        width:100%;
    }
    .pro_box .pro_left ul li.active .cate{
        color:#fff;
    }
    .pro_box .pro_left ul li .cate{
        position:relative;
        z-index:2;
        height:3.75rem;
        padding:0 1.2rem;
        color:#333;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .pro_box .pro_left ul li .cate span{
        font-size: 1rem;
    }
    .pro_box .pro_left ul li i {
        font-size:1rem;
    }

    .pro_box .pro_right{
        width:81%;
        margin-left: 1%;
    }
    .pro_list li {
        float: left;
        width:32%;
        margin-bottom: 1.6rem;
        margin-right: 2%;
    }
    .pro_list li:nth-child(3n) {
        margin-right: 0;
    }
    .pro_list li:nth-child(3n+1) {
        clear: both;
    }
}

@media  screen and (max-width: 1000px){
    .pro_box {
    }
    .pro_box .pro_left{
    }
    .pro_box .pro_left ul li{
        width:48%;
        margin-right: 4%;
        position:relative;
        background: #f4f4f4;
        float: left;
        margin-bottom: 5px;
    }
    .pro_box .pro_left ul li:nth-child(2n){
        margin-right: 0;
    }
    .pro_box .pro_left ul li:after{
        content:"";
        position:absolute;
        width:0;
        top:0;
        left:0;
        height:100%;
        background: linear-gradient(to right, var(--comcolor), #e71f1d00);
        transition:all .5s;
    }
    .pro_box .pro_left ul li.active:after{
        width:100%;
    }
    .pro_box .pro_left ul li.active .cate{
        color:#fff;
    }
    .pro_box .pro_left ul li .cate{
        position:relative;
        z-index:2;
        height:3rem;
        padding:0 0.5rem;
        color:#333;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .pro_box .pro_left ul li .cate span{
        font-size:1rem;
    }
    .pro_box .pro_left ul li i {
        font-size:1rem;
    }

    .pro_box .pro_right{
        margin-top:0.5rem;
    }
    .pro_list li {
        float: left;
        width:48%;
        margin-bottom: 1rem;
        margin-right: 4%;
    }
    .pro_list li:nth-child(2n) {
        margin-right: 0;
    }
    .pro_list li:nth-child(2n+1) {
        clear: both;
    }
    .pro_list .product {
        width:100%;
        border: 1px solid #6969694f;
    }
    .pro_list .product:hover {
        box-shadow: 2px 2px 10px #909090;
    }
}










.index_about{padding:2rem 0;background: url(../images/index_about.jpg) no-repeat center bottom;}
.index_about .cont {display: flex;justify-content: space-between;align-items: center;}
.index_about .cont .left{width:48%;position: relative;}
.index_about .cont .left h1{font-size:2rem;margin-bottom: 3rem;}
.index_about .cont .left .intro p{font-size: 1rem;line-height: 2rem;}
.index_about .cont .right{width:48%;}
.index_about .cont .right img{width: 100%;}

@media  screen and (max-width: 1000px){
    .index_about .cont {display: block}
    .index_about .cont .left{width:100%;margin-bottom: 1rem;}
    .index_about .cont .left h1{font-size:1.8rem;margin-bottom: 2rem;}
    .index_about .cont .right{width:100%;}
}



.index_ys{padding:5rem 0;background:url(../images/ys/bg.jpg) no-repeat center top;background-size: cover;overflow: hidden;}
.index_ys h2{text-align: center; margin-bottom: 4rem;}
.index_ys h2 span{display: inline-block; font-size: 2.5rem;color:#FFF;padding:0 1.5rem;position: relative;font-weight: normal;}
.index_ys h2 span:first-child {color:var(--comcolor); font-weight: bold;}
.index_ys .cont{position: relative;padding-top:3rem;}
.index_ys .cont ul {width:100%;display: flex;justify-content:space-between;}
.index_ys .cont ul li{width:50%; margin-bottom: 5rem;display: flex;align-items: center;}
.index_ys .cont ul li i{display: inline-block; width:4.625rem; height:5.25rem;overflow: hidden;}
.index_ys .cont ul li i img{width:100%; transition: .5s;}
.index_ys .cont ul li .des{display: inline-block;width: calc(100% - 5.5rem);padding-left: 1rem;}
.index_ys .cont ul li .des span{display: block;font-size:1.5rem;margin-bottom: 1rem; color:#ffffff;font-weight: bold;}
.index_ys .cont ul li .des p{font-size: 1rem;line-height: 2rem; color:#dddddd; }
.index_ys .cont ul li:hover i img{margin-top:-5.25rem;}

@keyframes rotate_1 {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate_2 {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-360deg);
    }
}
@media  screen and (min-width: 1000px){
    .index_ys .cont ul li:nth-child(odd){padding-right: 20%;}
    .index_ys .cont ul li:nth-child(even){padding-left: 20%;}
    .index_ys .cont .center {width:30vw;height:30vw;position: absolute; left:50%; top:50%;transform: translate(-50%,-50%);display: flex;align-items: center;justify-content: center;}
    .index_ys .cont .center img{width:70%;}
    .index_ys .cont .center .q1 {position: absolute;width:90%;height:90%;left:5%;top:5%;animation: rotate_1 16000ms linear infinite;}
    .index_ys .cont .center .q2 {position: absolute;width:80%;height:80%;left:10%;top:10%;animation: rotate_2 16000ms linear infinite;}
}
@media  screen and (max-width: 1000px){
    .index_ys .cont .center {width:100%;max-width:600px;aspect-ratio: 1 / 1;margin: 0 auto;position: relative;display: flex;align-items: center;justify-content: center;}
    .index_ys .cont .center img{width:70%;}
    .index_ys .cont .center .q1 {position: absolute;width:90%;left:5%;top:5%;animation: rotate_1 16000ms linear infinite;}
    .index_ys .cont .center .q2 {position: absolute;width:80%;left:10%;top:10%;animation: rotate_2 16000ms linear infinite;}
}
@media  screen and (max-width: 500px){
    .index_ys .cont ul {display: block;}
    .index_ys .cont ul li{width:100%; margin-bottom: 2rem;}
    .index_ys .cont ul li:nth-child(even){margin-bottom: 0;}
}




.index_news{position: relative;margin-bottom: 2rem;}
.index_news .item{background-color: #fff;padding:0;transition: all .3s;}
.index_news .item .img{width: 100%;overflow: hidden;transition: all .3s;position:relative;}
.index_news .item .img img{display: block;width: 100%;transition: all .3s;}
.index_news .item .wz{position: relative;padding:1rem;}
.index_news .item .wz h3{font-size: 1.2rem;height: 2rem;overflow: hidden; color: #000;margin-bottom: 1rem;transition: all .3s;white-space: nowrap;text-overflow: ellipsis;}
.index_news .item .wz .intro{font-size: 1rem;line-height: 1.8rem;height: 3.6rem; overflow: hidden;color: #595353;margin-bottom: 1rem;transition: all .3s;}
.index_news .item .wz .time{font-size: 1rem;color: var(--comcolor);}



@media  screen and (min-width: 1000px){
    .index_news .item{width:23.5%;margin-right: 2%;float:left;border:1px solid rgba(38,61,145,0.06);}
    .index_news .item:last-child {margin-right: 0;}
    .index_news .item:hover{box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.15);}
    .index_news .item:hover .wz{background:var(--comcolor)}
    .index_news .item:hover .wz::before{opacity:0;}
    .index_news .item:hover .wz h3{color: #ffffff;}
    .index_news .item:hover .wz .time,.index_news .item:hover .wz .intro{color:#FFFFFF;}
}


@media  screen and (max-width: 1000px){
    .index_news .item{width:100%;margin-bottom: 0.5rem;padding-bottom:0.5rem;border-bottom:1px solid rgba(38,61,145,0.06);}
    .index_news .item a {display: flex;justify-content: space-between;align-items: center;}
    .index_news .item .img {width:50%;}
    .index_news .item .wz {width:48%;}
    .index_news .item .wz h3{margin-bottom: 0.5rem;}
    .index_news .item .wz .intro{margin-bottom: 0.5rem;}
}