
html,
body,
.banner {
    height: 100%;
}

.banner {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}

.banner .swiper-slide {
    background: center center;
    background-size: cover;
}
.banner .swiper-slide a{position: absolute;top:0;left: 0;width: 100%;height: 100%;}
.banner .swiper-pagination .swiper-pagination-bullet {
    background: #fff;
    width: 2.5em;
    border-radius: 0;
    height: 3px;
}

.banner .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .swiper-pagination .swiper-pagination-bullet span {
    display: block;
    width: 0%;
    height: 100%;
    background: #e8390d;
}

.banner.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: .5em;
}

.banner .warp {
    position: relative;
}

.banner .text {
    position: absolute;
    color: #fff;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.banner .text h2 {
    font-size: 0.86em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2;
}

.banner .text h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.5;
}

.banner .text .btn,
.b .text .btn,
.c .btn,
.e .btn {
    color: #fff;
    padding: 0.8em 1.5em 0.8em 2em;
    border: 2px solid #fff;
    display: inline-block;
    
    transition: all .3s;
}

.c .btn,
.e .btn {
    color: #57585a;
    border: 2px solid #57585a;
}

.banner .text .btn::after,
.b .text .btn::after,
.c .btn::after,
.e .btn::after {
    content: '';
    border: .4em solid transparent;
    border-left-color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
    transition: all .3s;
}

.c .btn::after,
.e .btn::after {
    border-left-color: #57585a;
}

.banner a {
    font-weight: bold;
}


@media screen and (min-width:1025px) {
    .banner .text .btn:hover,
    .b .text .btn:hover,
    .c .btn:hover,
    .e .btn:hover {
        border-color: #e8390d;
        color: #e8390d;
    }


.banner .text .btn:hover::after,
.b .text .btn:hover::after,
.c .btn:hover::after,
.e .btn:hover::after {
    border-left-color: #e8390d;
}

}
.content {
    position: relative;
    z-index: 1;
    background: #fff;
}


/* z */

.z {
    height: 100%;
}


/* a */

.a {
    background: #f8f8f8;
    padding: 1em 0;
}
.a .map_net{padding-top: 20px;}
.a ul.list {
    overflow: hidden;
}

.a ul.list li {
    width: 25%;
    float: left;
    text-align: center;
    padding: 1em;
    box-sizing: border-box;
    line-height: 1.5;
    color: #666666;
}

.a ul.list h2 {
    color: #e8390d;
    font-weight: bold;
    
}


/* b */

.b {
    padding: 1em 0;
}

.b .tit {
    
    font-weight: bold;
    margin-bottom: 1em;
}

.b .nav {
    font-size: 0;
}

.b .nav li {
    
    display: inline-block;
    padding: 0.8em 2.6em 0.8em 2em;
    border-right: 1px solid #d0d0d0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.b .nav li::after {
    content: '';
    display: block;
    background: #e8390d;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    transform: skew(15deg);
    padding: 0 5em;
    right: 0;
    margin-right: 10px;
    opacity: 0;
    transition: all .3s;
}

.b .nav li.on{
    color: #fff;
    border-right: 1px solid transparent;
    font-weight: bold;
}

.b .nav li.on::after{
    opacity: 1;
}

.b .nav li:last-child {
    border: 0;
}

.b .nav {
    overflow: hidden;
}




.swiper_wrap {
    position: relative;
}

.b .swiper-slide>img {
    width: 100%;
}

.b .text {
    position: absolute;
    padding: 1.6em;
    line-height: 1.5;
    color: #fff;
}

.b .text h2 {
    margin-bottom: 0.5em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.b .text p{line-height: 24px;height: 48px;
   display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.index_but{display: none;}
.index_but .swiper-button-next,
.index_but .swiper-button-prev {
    background: #ffffff;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    left: 0;
    margin-left: -0.5em;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all .3s;
}

.index_but .swiper-button-prev i,
.index_but .swiper-button-next i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.index_but .swiper-button-next {
    right: 0%;
    left: auto;
    margin-right: -0.5em;
}
.b .index_but .swiper-button-next {
    left: 80%;
}




/* c */


/* d */

.d {
    padding: 1em 0;
}

.d h2.tit {
    
    position: relative;
    display: inline-block;
    margin-bottom: 2em;
    font-weight: bold;
}

.d ul li img {
    width: 3.3em;
    height: 3.3em;
        transition: all .3s;
}

.d ul li {
    float: left;
    width: calc(20% - 16px);
    text-align: center;
    margin-right: 20px;
}
.d ul li:last-child{
    margin-right: 0;
}
.d ul {
    overflow: hidden;
    padding-top: 20px;
}

.d ul li h3 {
    margin: 0 0.5em;
    padding-bottom: 1.5em;
    padding-top: 1.5em;
    border-bottom: 1px solid #e8390d;
    font-weight: bold;
    
    transition: all .3s;
    position: relative;
}
.index_h3{line-height: 24px;height: 48px;
      display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
} 

.d ul li p {
    padding: 0 0.5em;
    line-height: 1.5;
    color: #666666;
    margin: 1em 0.5em;
    opacity: 0;
    height: 3em;
    overflow: hidden;
    transition: all .3s;
}

.d ul li h3::after {
    content: '';
    display: block;
    border: 0.4em solid transparent;
    border-top-color: #e8390d;
    position: absolute;
    bottom: 0;
    transform: rotate(45deg);
    margin-bottom: -0.4em;
    margin-left: -0.4em;
    left: 0;
    transition:all 0.6s;-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;
}

@media screen and (min-width:1025px) {
    .d ul li:hover h3 {
        margin-top: -1em;
        color: #e8390d;
    }
    .d ul li:hover img {
        margin-top: -20px;
    }

    .d ul li:hover p {
        opacity: 1;
      
    }
    .d ul li:hover h3::after{left:100%;}
}

/* e */

.e {
    padding: 1em 0;
    padding-top: 0;
}

.e h2.tit {
    
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
    font-weight: bold;
}

.e .cont {
    line-height: 1.5;
    padding: 0.8em;
    background: #f8f8f8;
    color: #666666;
}

.e .cont h2 {
    color: #000000;
    line-height: 1.2em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    overflow: hidden;
    margin-bottom: 1em;
    transition: all .3s;
    font-weight: bold;
}

.e .cont p {
    line-height: 24px;
    height: 72px;
      display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}



.e a .cover {
    transition: background .3s;
}



.btn_wrap {
    margin-top: 0.5em;
    text-align: center;
}

@media screen and (min-width:1025px) {
    .e a:hover .cont h2 {
        color: #e8390d;
    }   
    .e a:hover .cover {
        background-size: 110% 110%;
    }
}

/* f */

.f {
    position: relative;
}

.f video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.f .wrap {
    position: relative;
    height: 100%;
}

.f .text {
    
    position: absolute;
    z-index: 5;
    color: #fff;
    top: 50%;
    width: 100%;
    font-weight: bold;
    text-align: center;
    left: 0;
    margin-top: -0.5em;
}

@media screen and (max-width:1024px) {
    .index_but .swiper-button-next, .index_but .swiper-button-prev{margin-left:-0.3em;}
    .index_but .swiper-button-next{margin-right: -0.3em;}
    .b .index_but .swiper-button-next {
        right:0;left: auto;
            margin-right: -0.3em;
    }
    .b .swiper-slide>img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .b .text {
        position: relative;
    }
    
    .a ul.list {
        font-size: 0;
    }
    .a ul.list li {
       
        display: inline-block;
        float: none;
        vertical-align: top;
        padding: 10px;
    }
   

    .banner .swiper-slide video {
        position: absolute;
        top: 0;
        left: 0;
    }
    .banner {
        height: auto !important;
        position: relative;
    }
    .banner .swiper-slide{height: 400px;}
    .banner .text {
        position: relative;
        top: 0;
        transform: none;
        padding: 2em 0;
    }
    .z {
        display: none;
    }
    .d ul li {
        width: 33.33%;
        float: left;
        display: block;
        margin: 0;
        margin-top: 1em;
    }
    .d ul li:nth-child(3n+1){clear: both;}
    .d ul li h3{padding: 10px 0;}
    .d ul li p {
        opacity: 1;
    }
    .d ul li:hover h3 {
        margin-top: 0;
    }

    .f{
      height: 250px !important;
    }

}
@media screen and (max-width:1024px) {
.a ul.list h2 span{font-size: 44px;}
}

@media screen and (max-width:767px) {
.banner .swiper-slide{height: 200px;}

.index_h3{height: auto;}
.d ul li{float: none;width: 100%;}
.d ul li img{width: 80px;height: 80px;}
.d ul li h3{padding-top: 10px;}
.d ul li:first-child{margin-top: 0;}

.d h2.tit{margin-bottom: 20px;}

}



/**************************************/
.index_slider_box{position: relative;}

.index_ic {padding: 30px  0;}
.icons_box li{float: left;text-align: center;padding: 0 40px;border-right: 1px solid #ccc;}
.icons_box li:last-child{border: 0;padding-right: 0;}
.icons_box li img{width: 35px;margin: auto;vertical-align: middle;display: none;}
.icons_box li div{padding-top: 4px;font-size: 14px;}
.icons_box{overflow: hidden;}

.index_ic ul{display: none;}
.index_ic ul:first-child{display: block;}

.c {
    overflow: hidden;
    color: #fff;
    line-height: 1;
    background-size: cover;
        background-position: center center;
}
.c h2 {
    
    position: relative;
    padding: 2em 0em .8em 0em;
    display: inline-block;
    margin-bottom: 1em;
    font-weight: bold;
}

.c h2::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
    border: 2px solid #fff;
}
.c .cont {line-height: 24px;}

.index_pro {margin:60px 0;}
.index_pro ul{overflow: hidden;position: relative;height: 340px;}
.index_pro li{width: 60%;height: 100%; position: absolute;
    transition:all 0.6s;-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;
}
.index_pro_01 h3{font-size: 20px;    line-height: 30px;}
.index_pro_02 h3{font-size: 40px;}
.index_pro_01,.index_pro_02{padding: 1em;box-sizing:border-box;position: absolute;top:0;left: 0;width: 100%;height: 100%;}
.index_pro_01{width: 33.4%;text-align: center;border-right: 1px solid #fff;box-sizing:border-box;}
.index_pro_01 img{width: 79px;height: 79px;margin-bottom: 20px;}
.index_pro_02 h3{margin-bottom: 20px;}
.index_pro_02{opacity: 0;visibility: hidden;}
.index_pro_02 p{line-height: 24px;height: 72px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.index_pro li.on{background: rgba(255,255,255,0.8);color: #57585a;}
.index_pro li.on .index_pro_01{visibility: hidden;opacity: 0;}
.index_pro li.on .index_pro_02{visibility: visible;opacity: 1;}



.index_pro li:nth-child(1){  left:0}
.index_pro li:nth-child(2){  left:60%}
.index_pro li:nth-child(3){  left:80%}

.stateindex_2 li:nth-child(1){  left:0}
.stateindex_2 li:nth-child(2){  left:20%}

.stateindex_3 li:nth-child(1){  left:0}
.stateindex_3 li:nth-child(2){  left:20%}
.stateindex_3 li:nth-child(3){  left:40%}

@media screen and (min-width:1025px) {

.index_but .swiper-button-prev:hover,
.index_but .swiper-button-next:hover {
    background: #e8390d;
    color: #fff;
}

}
@media screen and (max-width:1440px) {
.index_pro_02 p{margin-bottom: 20px;}
.index_pro ul{height: 280px;}
.index_pro_02 h3{font-size: 32px;}
.index_pro_01 h3{font-size: 18px;}

.index_pro_01, .index_pro_02{padding: 40px 20px;}


}



.banner .phone_video{display: none;position: absolute;left: 0;top:0;width: 100%;height: 100%;}
@media screen and (max-width:1024px) {
.banner .phone_video{display: block;}
.banner .pc_video{display: none;}
.banner .phone_video a{height: 100%;}
.banner .phone_video a em{z-index: 9;}

.icons_box li{padding: 0 20px;}
.index_ic{padding: 40px 0;}

.index_f .f{display: none;}
.index_f .phone_video{height: 250px;}
.index_f .phone_video a{text-align: center;height: 100%;}
.index_f .phone_video em span{display: block;color: #fff;padding-top:20px;}
.index_f .phone_video em{z-index: 2;width:100%;padding: 0 3%;box-sizing:border-box;}
.banner .text .btn, .b .text .btn, .c .btn, .e .btn{padding: 5px 10px;}

.index_pro_02 h3{font-size: 24px;}
.index_pro_01 h3{font-size: 16px;line-height: 24px;}
.index_pro_01 img{width: 60px;height: 60px;}
.index_pro ul{height: 230px;}
.index_pro_02 h3{margin-bottom: 10px;}
.index_pro_02 p{margin-bottom: 10px;}
.index_pro{margin: 50px 0;margin-top: 30px;}

.b,.e{opacity:hidden;}

.b .nav li::after{transform: skew(0deg);margin: 0;}
.b .nav li{font-style: normal;}
}

@media screen and (max-width:767px) {
.icons_box li{padding: 0 1%; width: 23%;margin-bottom: 20px;}
.icons_box li:nth-child(4n+1){clear: both;}
.index_ic{padding: 20px 0;padding-bottom: 0;}


.a{padding-top: 20px;}
/*.b .nav li{display: block;border: 0;}*/
.b .nav li{display: block;border: 0;width: 33.33%;float: left;box-sizing: border-box;padding: 10px 0;font-size: 14px;text-align: center;}

.a ul.list h2 span{font-size: 28px;}
.a ul.list li{float: left;width: 50%;}
.a ul.list li:nth-child(2n+1){clear: both}

.e .cont h2{height: auto;max-height: 3.6em;}
.d ul li p{height: auto;}
.e .cont p{height: auto;}
.e .cont h2{margin-bottom: 10px;}

.b .text{padding: 30px;}

.index_pro ul{height: auto;}
.index_pro ul li{position: static;left: 0 !important;width: 100%;padding: 30px 0;border-bottom: 1px solid rgba(255,255,255,0.4)}
.index_pro_01, .index_pro_02{position: static;padding: 0;width: 100%;border: 0;visibility: visible;opacity: 1;    text-align: center;}
.index_pro_02 h3{display: none;}
.index_pro_01 h3{font-size: 18px;}
.index_pro_01 img{margin-bottom: 10px;}
.index_pro_01{margin-bottom: 10px}
.c .btn{color: #fff;border-color:#fff;}
.c .btn::after {    border-left-color: #fff;}
.index_pro_02 p{height: auto;max-height: 72px;}
.index_pro ul li:first-child{padding-top:0;}
.index_pro ul li:last-child{border-bottom: 0;}
.index_pro{margin: 20px 0;}
.d h2.tit{margin-bottom: 0;}
.d ul li img{width: 60px;height: 60px;}
.banner .swiper-pagination .swiper-pagination-bullet{width: 40px;}

}


.navbody .banner .swiper-slide video{display: none;}

@media screen and (min-width:1025px) {
.b .nav li:hover{color: #e8390d;}
.b .nav li.on:hover{color: #fff;}



}


.swiper_wrap .swiper-slide:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.25)}
.swiper_wrap .swiper-slide-next:after{background:rgba(0,0,0,0.5);}
.swiper_wrap .swiper-slide .text{z-index:2;}

.swiper_wrap  .swiper-slide{height: 400px;}
@media screen and (max-width:1366px) {
.swiper_wrap  .swiper-slide{height: 360px;}
}

@media screen and (max-width:1280px) {
.swiper_wrap  .swiper-slide{height: 300px;}
}
@media screen and (max-width:1024px) {
.swiper_wrap  .swiper-slide{height: 250px;}
.swiper_wrap .swiper-slide-next:after{background:rgba(0,0,0,0.25);}
}
@media screen and (max-width:767px) {
.swiper_wrap  .swiper-slide{height: 200px;}
}


/*2021-01-28*/

.banner a{display: block;}
.banner .wrap{position: relative;height: 100%;}
.banner .bannr_text{position: absolute;left: 0;bottom: 16.8%;color: #fff;width: 60%}
.banner .bannr_text h1{font-size: 50px; margin-bottom: 20px;line-height: 60px;max-height: 120px;
 display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.banner .bannr_text p{font-weight: normal;margin-bottom: 40px;line-height: 30px;max-height: 60px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.banner_more span{transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;display: block;width: 112px;height: 36px;line-height: 36px;text-align: center;background: #05ddbe;border-radius: 5px;}
.banner_more{height: 36px;}
@media screen and (max-width:1366px) {
.banner .bannr_text h1{font-size: 40px;line-height: 50px;max-height: 100px;}
.banner .bannr_text p{margin-bottom: 30px;}
}
@media screen and (max-width:1024px) {
.banner .bannr_text h1{font-size: 30px;line-height: 40px;max-height: 80px;margin-bottom: 10px;}
.banner .bannr_text p{margin-bottom: 20px;}
}
@media screen and (max-width:767px) {
.banner .bannr_text{width: 100%;}
.banner .bannr_text h1{font-size: 18px;line-height:24px;margin-bottom: 5px;}
.banner .bannr_text p{font-size: 14px;line-height: 24px;max-height: 48px;margin-bottom: 10px;}
.banner_more span{width: 80px;height: 30px;line-height: 30px;}
}



@media screen and (min-width:1025px) {
.banner_more span:hover{opacity: 0.8;}
}




