.index-banner {
    position: relative;
    z-index: 9;
}
.banner_swiper {
    width:100vw;
    height:100vh;
}

.banner_swiper img{
    width:100vw;
    height:100vh;
}

.index-banner .navigation .banner_prev{position:absolute;left:5%;top:50%;width:71px;height:71px;margin-top:-35.5px;background:url(../images/banner_quan.png) no-repeat left top;z-index:9}
.index-banner .navigation .banner_prev_left{position:absolute;top:50%;left:5%;margin-left:28px;width:12px;height:20px;margin-top:-10px;z-index:5;background:url(../images/banner_jt.png) no-repeat left -21px;}

.index-banner .navigation .banner_next{position:absolute;right:5%;top:50%;width:71px;height:71px;margin-top:-35.5px;background:url(../images/banner_quan.png) no-repeat right top;z-index:9}
.index-banner .navigation .banner_next_right{position:absolute;top:50%;right:5%;margin-right:28px;width:12px;height:20px;margin-top:-10px;z-index:5;background:url(../images/banner_jt.png) no-repeat right -21px;}

.index-banner .banner_prev:hover,.index-banner .banner_next:hover {
    animation: rotation 0.1s linear infinite
}
.index-banner .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom:5%;
}
.index-banner .swiper-pagination-bullet {
    width:16px;
    height:16px;
}

@keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}





.home-tit{text-align: center; padding: 50px 0;}

.home-tit .en{
    display: block;
    color: transparent;
    -webkit-text-stroke-color: #c3c3c3;
    -webkit-text-stroke-width: 1px;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: .5;
}
.home-tit .cn{color: #0c86e0; font-size: 42px; position: relative;z-index: 2; top: -22px; font-weight:bold}
.home-tit p{font-size: 16px; color: #666; margin: 0;font-weight: normal;position: relative;z-index: 2;}




.index-product {
    position: relative;
    height:100vh;
}
.product_bg{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    /*background-image: url(../images/productbg.png);*/
    /*background-repeat: no-repeat;*/
    /*background-position: center center;*/
    /*-webkit-background-size: cover;*/
    /*-o-background-size: cover;*/
    /*background-size: cover;*/
}
.product_bg img{
    height:100%;
    opacity: 0.2;
    filter: grayscale(100%);
}

.pro_carousel {
    position: relative;
    overflow: hidden;
    padding-top: 30px;
}


.pro_block .inner_box{
    position: relative;
    display: block;
    text-align: center;
    background: #fff;
    overflow: hidden;
}


.pro_block figure {
    margin: 0;
}
.pro_block .inner_box .image_box{
    position: relative;
    display: block;
    background: #0c86e0;
    overflow: hidden;
}

.pro_block .inner_box .image_box img{
    width: 100%;
    transition: all 500ms ease;
}


.pro_block .inner_box .lower_content{
    position: relative;
    display: block;
    padding: 20px 15px 18px 15px;
    transition: all 500ms ease;
    height:120px;
}

.pro_block .inner_box .lower_content:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transform: scale(.9) translateY(20px);
    -ms-transform: scale(.9) translateY(20px);
    transform: scale(.9) translateY(20px);
    background: #0c86e0;
    transition: all 500ms ease;
}

.pro_block:hover .inner_box .lower_content:before {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0px);
    -ms-transform: scale(1) translateY(0px);
    transform: scale(1) translateY(0px);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.pro_block .inner_box .lower_content h4{
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 28px;
    color: #0c86e0;
    font-weight: 700;
    margin-bottom: 0;
    transition: all 500ms ease;
}

.pro_block .inner_box .lower_content h4 a{
    color: #0c86e0;
}

.pro_block:hover .inner_box .lower_content h4,
.pro_block:hover .inner_box .lower_content h4 a{
    color: #fff;
}






.index-about{position: relative;overflow: hidden;background: url(../images/company.jpg)  no-repeat  center bottom}
.index-about .about_inner{position: relative;float: right;width: 90%;padding:200px 0 100px;}
.index-about .about_content{float: left;width: 40%;min-width: 400px;}
.index-about .about_tags{position: absolute;top: 50%;right: 5%;transform: translateY(-45%);width: 50%;height: 0;padding-bottom: 50%;overflow: hidden;}
.index-about .about_tit{position: relative;margin-bottom: 95px;}
.about_tit span{position: relative;display: block;font-size: 50px;line-height: 1;color: #000;}
.about_text .about_intro{margin-bottom: 86px;}
.about_text .about_intro p{font-size:19px;line-height:32px;text-align: justify;color: #6f6f6f;}
.about_more{display: inline-flex;justify-content: space-between;align-items: center;}
.about_more span{font-size:20px;display: inline-block;padding: 2px 0;color: #0c86e0;border-bottom: 1px solid #0c86e0;}
.about_more:hover span{color: #5aa5e2;border-bottom-color: #5aa5e2;}

.about_tags .circle{position: absolute;height: 0;background: #f5f5f5;border-radius: 50%;}
.about_tags .circle1{top: 16%;right: 47%;;width: 6%;padding-bottom: 6%;}
.about_tags .circle2{top: 37%;right: 41%;width: 5%;padding-bottom: 5%;}
.about_tags .circle3{top: 38%;left: 0;width: 5%;padding-bottom: 5%;}
.about_tags .circle4{top: 77%;right: 52%;width: 5%;padding-bottom: 5%;}
.about_tags .circle5{top: 4%;right: -5%;width: 30%;padding-bottom: 30%;background: #e9f3fb;}
.about_tags .circle6{top: 13%;right: 26%;width: 20%;padding-bottom: 20%;background: #e9f3fb;}
.about_tags .circle7{top: 22%;right: 48%;width: 24%;padding-bottom: 24%;background: #e9f3fb;}
.about_tags .circle8{top: 39%;right: 72%;width: 20%;padding-bottom: 20%;background: #e9f3fb;}
.about_tags .circle9{top: 53%;right: 54%;width: 20%;padding-bottom: 20%;background: #f5f5f5;}
.about_tags .circle10{top: 38%;right: 8%;width: 40%;padding-bottom: 40%;background: #e9f3fb;}
.about_tags .circle_inner{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex-wrap: wrap;}
.about_tags .circle5 img{display: block;max-width: 90%;height: auto;}
.about_tags .circle_num{
    margin-bottom: 14px;font-weight: bold;line-height: .8em;color: #0c86e0;
    background: url(../images/num-bg2.png) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fn 8s linear infinite;
}
@keyframes fn{
    0%{
        background-position:0 center;
    }
    100%{
        background-position:-574px center;
    }
}
.about_tags .circle_text{font-size: 16px;color: #0c86e0;
    background: url(../images/num-bg2.png?1) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fn 8s linear infinite;
}
.about_tags .circle_inner{font-size: 60px;}
.about_tags .circle6 .circle_num{font-size: .5em;}
.about_tags .circle7 .circle_num{display: flex;align-items: center;font-size: .7em;}
.about_tags .circle7 .circle_num span{font-size: .5em;line-height: .8em;}
.about_tags .circle8 .circle_num{font-size: .7em;}
.about_tags .circle9 .circle_num{font-size: .5em;}
.about_tags .circle10 .circle_num{font-size: .7em;}




.index-sl .index_sl_ul {
    height: 100vh;
}
.index-sl .index_sl_ul li {
    height: 100%;
    width: 25%;
    float: left;
    overflow: hidden;
    position: relative;
}
.index-sl .index_sl_ul li .img_bg {
    height: 100%;
    width: 100%;
}
.index-sl .index_sl_ul li .box_center {
    text-align: center;
    padding: 0 0.625rem;
    display: table-cell;
    vertical-align: middle;
}
.index-sl .index_sl_ul li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.index-sl .index_sl_ul li a {
    position: absolute;
    z-index: 5;
    width: 100%;
    display: table;
    left: 0;
    top: 0;
    height: 100%;
    margin: auto;
    color: #fff;
}
.index-sl .index_sl_ul li a .p1 {
    font-size: 1.875rem;
    margin-top: 1.9375rem;
    position: relative;
    padding-bottom: 0.625rem;
}
.index-sl .index_sl_ul li a .p1::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 1px;
    background: #0c86e0;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.index-sl .index_sl_ul li a .p2 {
    font-size: 1rem;
    line-height: 1.7;
    width: 80%;
    margin: 0 auto;
    display: none;
}
.index-sl .index_sl_ul li a .p2 > div {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
}
.index-sl .index_sl_ul li .img_bg {
    transition: 400ms ease-in-out;
    -moz-transition: 400ms ease-in-out;
    -webkit-transition: 400ms ease-in-out;
    -o-transition: 400ms ease-in-out;
}
.index-sl .index_sl_ul li.active {
    width: 40%;
    transition: 400ms ease-in-out;
    -moz-transition: 400ms ease-in-out;
    -webkit-transition: 400ms ease-in-out;
    -o-transition: 400ms ease-in-out;
}
.index-sl .index_sl_ul li.active a .p2 {
    margin-top: 2rem;
    display: block;
}
.index-sl .index_sl_ul li.active .wz_sl {
    opacity: 1;
    left: 0;
    top: 0;
    transition: 400ms ease-in-out;
    -moz-transition: 400ms ease-in-out;
    -webkit-transition: 400ms ease-in-out;
    -o-transition: 400ms ease-in-out;
}
.index-sl .index_sl_ul li.active .img_bg {
    transition: 400ms ease-in-out;
    -moz-transition: 400ms ease-in-out;
    -webkit-transition: 400ms ease-in-out;
    -o-transition: 400ms ease-in-out;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.index-sl .index_sl_ul li.active1 {
    width: 20%;
    transition: 400ms ease-in-out;
    -moz-transition: 400ms ease-in-out;
    -webkit-transition: 400ms ease-in-out;
    -o-transition: 400ms ease-in-out;
}












.index-ys {
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    background: #fff;
}
.index-ys img {
    display: block;
}
.index-ys .ys_box {
    width: 82%;
    margin: 0 auto;
    display: flex;
}
.index-ys .ys_box .box_left {
    width: 50%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}
.index-ys .ys_box .box_left .image {
    width: 94%;
    padding: 25% 0;
    position: relative;
    z-index: 2;
}
.index-ys .ys_box .box_left .image img {
    width: 100%;
}
.index-ys .ys_box .box_left .image .text {
    position: absolute;
    z-index: 2;
    bottom: 4%;
    left: 20%;
    max-width: 95%;
    display: flex;
    justify-content: flex-start;
}
.index-ys .ys_box .box_left .image .text span {
    max-width: 100%;
    box-sizing: border-box;
    color: #fff;
    padding: 14px 8px;
    border-radius: 15px;
    border: 5px solid #57c6ff;
    background-color: #0081ff;
    font-weight: 600;
    font-size: 28px;
    transform: skewX(-10deg);
}
.index-ys .ys_box .box_left .img_box {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.index-ys .ys_box .box_left .img_box img {
    position: absolute;
    top: 50%;
    left: 50%;
}
.index-ys .ys_box .box_left .img_box .a {
    width: 100%;
    margin-top: -50%;
    margin-left: -50%;
}
.index-ys .ys_box .box_left .img_box .b {
    width: 92%;
    margin-top: -46%;
    margin-left: -46%;
}
.index-ys .ys_box .box_left .img_box .c {
    width: 86%;
    margin-top: -43%;
    margin-left: -43%;
}
.index-ys .ys_box .box_left .img_box .d {
    width: 64%;
    margin-top: -32%;
    margin-left: -32%;
}
.index-ys .ys_box .box_right {
    width: 50%;
    box-sizing: border-box;
    padding-left: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.index-ys .ys_box .box_right .listbox {
    width: 100%;
    margin-bottom: 45px;
}
.index-ys .ys_box .box_right .listbox .list {
    width: 100%;
    display: flex;
    align-items: center;
    transition: 400ms;
}
.index-ys .ys_box .box_right .listbox .list img {
    width: 85px;
    border-radius: 50%;
    border: 5px solid #2270a9;
}
.index-ys .ys_box .box_right .listbox .list .text {
    margin-left: 15px;
    width: calc(100% - 100px);
}
.index-ys .ys_box .box_right .listbox .list .text strong {
    display: block;
    color: #333;
    font-size: 23px;
    position: relative;
}

.index-ys .ys_box .box_right .listbox .list .text p {
    margin: 0;
    margin-top: 10px;
    text-align: justify;
    color: #333;
    line-height: 26px;
    font-size: 17px;
}
.index-ys .ys_box .box_right .listbox .list:hover {
    transform: scale(1.05);
}
.index-ys .ys_box .box_right .listbox:nth-last-child(1) {
    margin-bottom: 0;
}
.index-ys .ys_box .box_right .listbox:nth-child(1) {
    margin-left: -15%;
}
.index-ys .ys_box .box_right .listbox:nth-child(2) {
    margin-left: -5%;
}
.index-ys .ys_box .box_right .listbox:nth-child(3) {
    margin-left: -5%;
}
.index-ys .ys_box .box_right .listbox:nth-child(4) {
    margin-left: -10%;
}
@keyframes rotate_1 {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate_2 {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-360deg);
    }
}
@keyframes rotate_3 {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-360deg);
    }
}
.rotate_1 {
    animation: rotate_1 16000ms linear infinite;
}
.rotate_2 {
    animation: rotate_2 16000ms linear infinite;
}
.rotate_3 {
    animation: rotate_3 16000ms linear infinite;
}







.al_main{position: relative;height: 800px;overflow: hidden;}
.al_main .top{position: absolute; left:5.21%;top: 94px; color: #fff;z-index: 9;}
.al_main .top .tit{margin-bottom: 15px;font-weight: bold; font-size: 50px;line-height: 30px;}

.al_main .navigation .al_prev{position:absolute;left:5%;top:50%;width:71px;height:71px;margin-top:-35.5px;background:url(../images/banner_quan.png) no-repeat left top;z-index:9}
.al_main .navigation .al_prev_left{position:absolute;top:50%;left:5%;margin-left:28px;width:12px;height:20px;margin-top:-10px;z-index:5;background:url(../images/banner_jt.png) no-repeat left -21px;}

.al_main .navigation .al_next{position:absolute;right:5%;top:50%;width:71px;height:71px;margin-top:-35.5px;background:url(../images/banner_quan.png) no-repeat right top;z-index:9}
.al_main .navigation .al_next_right{position:absolute;top:50%;right:5%;margin-right:28px;width:12px;height:20px;margin-top:-10px;z-index:5;background:url(../images/banner_jt.png) no-repeat right -21px;}

.al_main .al_prev:hover,.al_main .al_next:hover {
    animation: rotation 0.1s linear infinite
}
.al_main .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom:5%;
}
.al_main .swiper-pagination-bullet {
    width:16px;
    height:16px;
}

@keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}










.index-news{position: relative;padding:30px;}
.news_inner{position: relative;}
.news_main{}
.news_ul{display: flex;justify-content: space-between;}
.news_ul .item{width: 24%;box-sizing: border-box;}
.news_ul .item a{display: block;padding: 8px 0;}
.news_ul .item .item_img{margin-bottom: 32px;overflow: hidden;transition: all .3s;}
.news_ul .item .item_img img{display: block;width: 100%;transition: all .5s;}
.news_ul .item .item_text{padding: 20px 10px 5px;}
.news_ul .item .item_text .text_tit{-webkit-line-clamp: 1;height: 3em;;margin-bottom: 1.3em;font-size: 20px;}
.news_ul .item .item_text .text_date{line-height: .8;color: #666;}
.news_ul .item a:hover{box-shadow: 0 0 6px rgba(0,0,0,.1);}
.news_ul .item a:hover .item_img{transform: scale(.95);}
.news_ul .item a:hover .item_img img{transform: scale(1.05);}
.news_ul .item a:hover{color: #0c86e0;}
.news_more_box{margin-top: 60px;text-align: center;}
.news_more_box .more{position: relative;display: inline-block;padding: 0 40px;color: #0c86e0;border: 2px solid #0c86e0;border-radius: 40px;overflow: hidden;transition: color 0.2s linear 0.1s, border-color 0.2s linear 0.3s, background 0.2s linear 0.3s;}
.news_more_box .more .label{position: relative;display: block;line-height: 40px;text-align: center;}
.news_more_box .more:hover{color: #fff;background: #0c86e0;}
.news_more_box .more:hover .circle{transform: scale(2);opacity: 1;}