/*
 * @Author: mikey.xiaojiang 
 * @Date: 2019-05-08 09:33:47 
 * @Last Modified by: jiang.smallstudio
 * @Last Modified time: 2019-07-05 16:43:45
 */

 /* public */
 body{
     overflow-x: hidden;
     font-family: 'microsoft yahei'
 }
ul,li{
    padding: 0;
    list-style: none;
    margin: 0
}
p,h1,h2,h3,h4,h5{
    padding: 0;
    margin: 0
}
a:hover{
    text-decoration: none
}
.fr{
    float: right !important
}
a:focus, a:hover {
    color: #333;
    text-decoration: none;
}
/* header css */
.header{
    height: 120px;
    box-shadow: 0 0 20px rgba(0,0,0,.09);
    padding: 20px 0 0;
    position: relative;
    z-index: 999;
}
.logo{
    padding-left: 0px;
}
.header-right{
    float: right;
    padding-right: 0px;
}
.header-right-top{
    height:40px;
    padding-bottom: 10px;
}
.header-search,.header-tell,.header-language{
    height: 30px;
    line-height: 30px;
    float: right;
}
.header-search input,.header-search button{
    height: 30px;
    padding: 0 15px;
    font-size: 14px;
    float: left;
}
.header-search input{
    border: 1px solid #ddd;
    border-right: none;
    color: #999;
}
.header-search button{
    color: #fff;
    background: #e31f29;
    border: none
}
.header-tell{
    margin-left: 50px;
    font-size: 20px;
    font-weight: 700;
}
.header-tell i,.header-language i{
    color: #666;
    font-size: 22px;
    padding-right: 5px;
}
.header-tell span{
  color: #e31f29
}
.header-language{
    position: relative;
    margin-left: 50px;
}
.header-language i,.header-language em{
    height: 30px;
    float: left;
}
.header-language em{
    margin-left: 5px;
}
.header-language li{
    float: left;
    width: 80px;
    height: 30px;
    color: #333;
    overflow: hidden;
    text-align: center;
}
.header-language li a{
    color: #333;
}
.header-language li a:hover{
    color: #e31f29;
}
.header-language .a-show{
    position: relative;
    z-index: 3;
}
.header-language li:hover{
    background: #f5f5f5;
}
.header-right-nav{
    margin-top: 10px;
    height: 30px;
}
.header-right-nav .list-nav{
    height: 50px;
    float: left;
    padding: 0 32px;
}
.header-right-nav .list-nav > a{
    display: block;
    height: 50px;
    color: #333333;
    font-size: 18px;
}
.header-right-nav .list-nav > a:hover{
    color: #e31f29
}
.header-right-nav .list-nav > a i{
    padding-left: 8px;
    display: inline-block;
}

.header-right-nav .list-nav:hover a i{
    transform: rotateX(180deg);
}
.a-hover > a{
    color: #e41f2b !important
}
.row-line{
    width: 1px;
    height: 20px;
    margin-top: 3px;
    float: left;
    background: #666;
}
.a-last{
    height: 30px;
    float: right;
    color: #333333;
    font-size: 18px;
}
.a-last:hover .line-group i{
    right: -8px;
    top: -8px;
    transition: all linear .1s;
    color: #e31f29;
}
.a-last:hover .line-group span{
    transition: all linear .1s;
    background: #e31f29;
}
.a-last:hover{
    color: #e31f29;
}
.line-group{
    height: 18px;
    float: right;
    margin-left: 8px;
    width: 18px;
    position: relative;
}
.line-group span{
    float: left;
    position: absolute;
    background: #999;
}
.line-group i{
    float: left;
    position: absolute;
    right: -5px;
    top: -5px;
    font-size: 14px;
    color: #333
}
.line-group span:nth-of-type(1){
    left: 0;
    width: 1px;
    height: 18px;
    top: 0
}
.line-group span:nth-of-type(2){
    right:  0;
    width: 1px;
    height: 9px;
    bottom: 0;
}
.line-group span:nth-of-type(3){
    left: 0;
    width:9px;
    height: 1px;
    top: 0
}
.line-group span:nth-of-type(4){
    left: 0;
    width:100%;
    height: 1px;
    bottom:0;
}

/* banner css */
.banner{
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
    position: relative;
}
/* .banner-user .swiper-slide img{
    width: auto;
    height: 100%;
} */
.banner-user .swiper-container .hide{
    opacity:0;
}
.banner-user .swiper-button-next,.banner .swiper-button-prev{
    transition:opacity .5s;
}
.banner-user .swiper-button-prev, .banner .swiper-container-rtl .banner .swiper-button-next {
    background-image: url("../images/left_aimg.png");
    left: 60px;
}
.banner-user .swiper-button-next, .banner .swiper-container-rtl .banner .swiper-button-prev {
    background-image: url("../images/right_aimg.png");
    right:  60px;
}

.banner .swiper-container-horizontal>.swiper-pagination-bullets, .banner .swiper-pagination-custom,.banner  .swiper-pagination-fraction {
    bottom: 100px;
    padding: 0 95px;
    text-align: right;
}
.banner .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    display: inline-block;
}
.banner .swiper-pagination-bullet-active {
    background: #e31f29;
}
.fast-nav{
    position: absolute;
    bottom: -80px;
    height: 160px;
    padding: 20px 0;
    left: 50%;
    z-index: 5;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 80px rgba(0,0,0,.1);
    margin-left: -600px;
}
.fast-nav li{
    text-align: center;
    border-right: 1px solid #ddd;
}
.fast-nav li a{
   display: inline-block;
   height: 120px;
}
.fast-nav li a img,.fast-right{
    float: left;
    margin-top: 30px;
 }
 .fast-right{
    text-align: left;
    margin-left: 20px;
 }
.fast-right h1{
    line-height: 30px;
    color: #0b3775;
    font-size: 18px;
    font-weight: 700;
}
.fast-right h1 i{
    color: #666;
    opacity: 0;
    transition: all ease .2s;
}
.fast-right h1:hover i{
    opacity: 1;
    padding-left: 10px;
}
.fast-right p{
    line-height: 30px;
    color: #666;
    font-size: 14px;
}

.fast-nav li:last-child{
    border-right: none;
}


/* main body */
.block-one-view{
    margin: 0 auto;
    width: 1400px;
    margin-top: 180px;
    padding-bottom: 100px;
    /* overflow: hidden; */
}
.one-left-view{
    background-image: linear-gradient(to right bottom,#fc6570,#e978cd);
    border-radius: 8px;
    padding: 100px 180px 150px 100px;
    position: relative;
    animation: linear-color linear 5s infinite;
}
@keyframes linear-color{
    0%{
        background-image: linear-gradient(to right bottom,#fc6570,#e978cd);
    }
   
    50%{
        background-image: linear-gradient(to right top,#e978cd,#fc6570);
    }
    
    100%{
        background-image: linear-gradient(to right bottom,#fc6570,#e978cd);
    }
}
.one-block-content h1{
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}
.one-block-content p{
    color: #fff;
    font-size: 18px;
    padding: 20px 0;
    line-height: 30px;
}
.img-pra{
    position: absolute;
    right: -65px;
    top: 190px;
    z-index: 2;
}
.a-more-3{
    font-size: 24px;
    color: #fff;
    padding-top: 30px;
    display: inline-block;
    line-height: 40px;
}
.a-more-3 i{
    padding-left: 10px;
    font-size: 35px;
    float: right;
    transition: all linear .2s;
}
.one-right-view{
    padding: 0;
    float: right;
    margin-right: 100px;
}
.one-block-show{
    float: left;
    width: 100%;
    overflow: hidden;
    background: #e6edf5;
    border-radius: 8px;
}
.one-block-show img{ 
    width: 100%;
    height: auto;
}
.infos-right-view{
    padding: 45px;
}
.infos-right-view h5{
    font-size: 16px;
    color: #666;
}
.infos-right-view h1{
    font-size: 30px;
    color: #333;
    font-weight: 700;
    line-height: 35px;
    margin-top: 20px;
}
.infos-right-view p{
    font-size: 18px;
    color: #333;
    line-height: 30px;
    margin-top: 30px;
}
.a-more-4{
    font-size: 24px;
    color: #333;
    line-height: 60px;
    display: inline-block;
    /*margin-top: 20px;*/
    margin-top: 30px;
    height: 30px;
}
.a-more-4 i{
  padding-left: 15px;
  font-size: 30px;
  transition: all linear .2s;
  display: inline-block;
}
.one-block-show:hover i,.one-left-view:hover i{
    transform: translateX(10px)
}
.one-left-view:hover img{
    transform: translateY(-10px);
    transition: all linear .2s;
}
.block-two-view{
    width: 1400px;
    /*padding: 90px 100px;*/
    background: #e3f4fb;
    margin: 0 auto;
    overflow: hidden;
}
.top-h1{
    height: 28px;
    border-bottom: 1px solid #000;
    text-align: center;
}
.top-h1 span{
    font-size: 16px;
    height: 20px;
    display: inline-block;
    padding: 0 20px;
    background: #e3f4fb;
    margin-top: -10px;
}
.two-right-view{
    float: right;
    text-align: right
}
.middle-word{
    height: 90px;
    margin-top: 20px;
}
.middle-word h1{
    float: left;
    font-size: 100px;
    font-weight: 700;
    line-height: 100px;
    color: #000;
}
.right-word{
    float: right;
}
.right-word h3{
   font-size: 30px;
   margin-top: 10px;
   font-weight: 700;
}
.right-word p{
    font-size: 30px;
    margin-top: 8px;
    background: #000;
    height: 35px;
    line-height: 35px;
    color: #f8ca65;
    text-align: center
 }
 .bottom-word{
     clear: both;
 }
 .bottom-word h1{
    height: 95px;
    line-height: 85px;
    color: #000;
    text-align: center;
    font-size: 40px;
    background: #ffc981
}
.bottom-word h1 span{
    font-size: 80px;
    font-weight: 700;
    display: inline-block;
    animation-delay: 1s
}
.bottom-word p{
    height: 55px;
    line-height: 55px;
    color: #000;
    text-align: center;
    font-size: 32px;
    border: #ffc981 3px solid;
    animation-delay: .5s
}
.two-left-view > h3{
    height: 55px;
    line-height: 55px;
    color: #000;
    text-align: center;
    font-size: 25px;
    animation-delay: 1.2s
}
.heigs{
   height: 100px;
   clear: both;
}
.heigs2{
    height: 100px;
    clear: both;
 }
.block-three-view{
    width:1400px;
    margin: 0 auto;
    clear: left;
}
#swiper2{
    padding-bottom: 60px;
}
.marmid{
    margin: 0 auto;
}
.title-h1{
    font-size: 36px;
    font-weight: 700;
    color: #333;
    line-height:40px;
}
.title-h1 a{
    font-size: 24px;
    font-weight: normal;
    color: #333;
    float: right;
    line-height:40px;
}
.title-h1 i{
    padding-left: 10px;
    display: inline-block;
    font-size: 24px;
}
.title-h1 a:hover i{
    transition: all ease .2s;
    transform: translateX(10px)
}
.next-a{
    width: 100px;
    float: left;
    text-align: center;
    height: 520px;
    vertical-align: middle
}
.scroll-hyqz{
    margin-top: 50px;
}
.scroll-hyqz .swiper-button-prev, .scroll-hyqz .swiper-container-rtl .scroll-hyqz .swiper-button-next {
    background-image: url("../images/left_aimg.png");
    left: 35px;
}
.scroll-hyqz .swiper-button-next, .scroll-hyqz .swiper-container-rtl .scroll-hyqz .swiper-button-prev {
    background-image: url("../images/right_aimg.png");
    right:  35px;
}



.scroll-hyqz .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    display: inline-block;
}
.scroll-hyqz .swiper-pagination-bullet-active {
    background: #e31f29;
}

.left-hyqz{
    background: #e6edf5;
    border-radius: 8px 0 0 8px;
    padding: 50px 80px;
    margin-top:65px;
}
.right-hyqz{
    padding: 0;
}
.right-hyqz img{
width: auto;
    border-radius: 8px;
    float: right;
}
.left-hyqz > span{
    font-size: 16px;
    color:#666;
}
.left-hyqz > h1{
    font-size: 28px;
    margin-top: 15px;
    font-weight: 700;
}
.left-hyqz > h1 a{
    color:#333;
}
.left-hyqz p{
    margin-top: 20px;
    line-height: 30px;
    font-size: 18px;
    color: #333
}
.a-more-4:hover{
    color: #000;
}
.a-more-4:hover i{
    transition: all ease .2s;
    transform: translateX(10px)
}

.block-four-view{
    margin: 0 auto;
    width: 1200px;
}

.block-four-list{
 
    margin-top: 60px;
    padding:0 35px;
}
.block-four-list-wrap{
    background: #e6edf5;
    
    border-radius: 8px 8px 0 0 
}
.block-four-list img{ 
    width: 100%;
    border-radius: 8px 8px 0 0;
    height: auto;
transition:all .3s;
}

.block-four-list img:hover{ 
  transform:translateX(15px)
}

.infos-right-view2{
    padding: 45px;
    background: #e6edf5;
    border-radius: 0 0 8px 8px;
}
.infos-right-view2 h5{
    font-size: 16px;
    color: #666;
}
.infos-right-view2 h1{
    height: 50px;
    font-size:24px;
    color: #333;
    font-weight: 700;
    line-height: 35px;
    margin-top: 20px;
margin-bottom: 20px;
}
.infos-right-view2 p{
    font-size: 18px;
    color: #333;
    line-height: 30px;
   
 <!-- margin-top: 30px; -->
}
.block-five-view{
    margin: 0 auto;
    width: 1200px;
    margin-top: 90px;
    padding-bottom: 100px;
}
.block-five-list{
    float: right;
    margin-top: 60px;
}
.block-five-list li{
    margin-bottom:50px;
}
.block-five-list li h5{
   font-size: 16px;
   color: #666
}
.block-five-list li h5{
    font-size: 16px;
    color: #666
}
.block-five-list li p{
    margin-top: 8px;
    font-size: 18px;
    line-height: 30px;
}
.block-five-list li p a{
    color: #333;
}
.footer-nav-list h1 i,.footer-nav-list a i{
    display: none;
    padding-left: 5px;
}
.footer-nav-list h1 i{
    font-size: 20px;
}
.title-h1 em{
    display: none;
    font-size: 36px;
}

.infos-right-view3{
    padding: 25px 45px;
    background: #e6edf5;
    border-radius: 0 0 8px 8px;
}
.infos-right-view3 h5{
    font-size: 16px;
    color: #666;
}
.infos-right-view3 h1{
    font-size:24px;
    color: #333;
    font-weight: 700;
    line-height: 35px;
    margin-top: 20px;
}
.infos-right-view3 p{
    font-size: 18px;
    color: #333;
    line-height: 30px;
    margin-top: 20px;
}

/* footer css */
.footer-top{
    background: #f2f2f2;
    padding: 40px 0;
}
.footer-nav{
    padding: 0;
}
.footer-nav-list h1{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    clear: both;
    overflow: hidden;
}
.footer-nav-list h1 a{
  color: #333;
}
.footer-nav-list > a{
    color: #333;
    font-size: 16px;
    line-height: 30px;
    display: block;
}
.bottom-logos{
    overflow: hidden;
}
.infos-group-footer{
    margin-top: 40px;
    overflow: hidden;
}
.footer-tell,.footer-wechat{
    float: left;
}

.footer-bottom{
    padding: 20px 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    background: #333;
    line-height: 25px;
}
.padclear{
    padding: 0;
}
.copyright a{
color:#fff;
}
.footer-bottom-li{
    text-align: right;
    vertical-align: middle;
}
.footer-bottom-li a{
    color: #fff;
    height: 25px;
    display: inline-block;
}
.footer-bottom-li span{
    height:15px;
    float: right;
    width: 1px;
    background: #fff;
    margin: 5px 25px 0;
}
.footer-tell i{
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    color: #666;
    margin-top: 10px
}
.right-tell{
    float: left;
    height: 50px;
    margin-left: 5px;
    margin-bottom: 35px;
}
.right-tell p{
    font-size: 16px;
    color: #333;
}
.right-tell h1{
    font-size: 24px;
    color: #e41f2b;
    font-weight: 700;
}
.a-btn-use{
    display: block;
    clear: both;
    padding: 0 30px;
    height: 35px;
    line-height: 35px;
    background: #e41f2b;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.a-btn-use:hover{
   color: #fff;
   background: #ac0000;
   transition: all ease .3s;
}
.footer-wechat{
    width: 120px;
    margin-left: 20px;
    text-align: center
}
.footer-wechat img{
   width: 100%;
   height: auto;
   margin-bottom: 10px;
}
.footer-smallico{
    float: right;
    width: 20px;
}
.footer-smallico a{
    width: 20px;
    height: 20px;
    display: block;
    color: #333;
    font-size: 20px;
    margin-bottom: 12px;
}
.footer-smallico a:hover{
    color: #e41f2b;
    transition:  all linear .3s;
}



/*  slide nav*/
.slide-nav-views{
    display: none;
    position: fixed;
    z-index: 3;
    top: 100px;
    height: 400px;
    opacity: 0;
height:370px;
}
.a-hover .slide-nav-views{
    opacity: 1;
    animation: opGradient linear .4s;
    display: block;
    position: absolute;
}
@keyframes opGradient {
    0% {
        -webkit-transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}
  
.bgcolor-white{
    background: #f5f5f5;
    height: 370px;
    position: relative;
    z-index: 1;
}
.bgcolor-gray{
    background: #ebebeb;
    height: 370px;
    position: relative;
    z-index: 1;
}
.bgcolor-gray-lighter{
    background: #f5f5f5;
    height: 370px;
    position: relative;
    z-index: 1;
}
.slide-nav-views-main{
    position: absolute;
    z-index: 4;
    height: 370px;
    top: 0;
    left: 50%;
    padding: 50px 0;
    margin-left: -600px;
}

.product-left{
    position: relative;
    text-align: left
}
.a-more{
    position: absolute;
    right: 0px;
    bottom: 0;
    background: #e41f2b;
    color: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 18px;
}
.a-more:hover{
    color: #fff;
    transition: all ease .3s;
    border-radius: 0;
}
.product-middle{
    margin-top: 30px;
}
.product-middle li{
    width: 33.3333333%;
    float: left;
    text-align: center;
    height: 120px;
}
.product-middle li a{
   color: #333;
   font-size: 18px;
}
.img-we{
    display: block;
    height: 60px;
}
.img-we:hover img{
    transform: translateY(-5px);
    transition: all ease .3s;
}
.product-middle li:nth-of-type(1) .img-we{
    padding-top:6px;
}
.product-middle li:nth-of-type(2) .img-we{
    padding-top:17px;
}
.product-middle li:nth-of-type(3) .img-we{
    padding-top:5px;
}
.product-middle li:nth-of-type(4) .img-we{
    padding-top:12px;
}
.product-middle li:nth-of-type(5) .img-we{
    padding-top:10px;
}
.product-middle li:nth-of-type(6) .img-we{
    padding-top:3px;
}
.p-normal{
    text-align: left;
    padding-left: 30px;
    font-size: 16px;
}
.p-normal a{
   color: #e41f2b;
   padding: 0 5px;
}

.product-right h1{
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
}
.product-right > a{
    text-align: left;
    display: block;
    font-size: 16px;
    color: #333;
    line-height: 30px;
}
.product-right .p-normal {
    padding-left: 0;
    margin-top: 100px;
}

.case-left h1,.case-middle h1{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
}
.case-left h1 a,.case-middle h1 a{
    color: #333
}
.case-left > a{
    color: #333;
    font-size: 16px;
    padding-right: 40px;
    line-height: 30px;
}
.case-middle p{
    font-size: 16px;
    line-height: 30px;
}
.a-more-2{
    font-size: 16px;
    color: #e41f2b;
    display: block;
    margin-top: 70px;
}
.a-more-2 span{
   padding-left: 5px;
}
.nav-case-img{
    width: 47%;
    float: left;
    background: #fff;
    border-radius: 0 0 8px 8px;
}
.nav-case-img:nth-of-type(2){
    width: 47%;
    float: right;
}
.nav-case-img img{
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}
.nav-case-img p{
   padding: 10px 15px;
   line-height: 30px;
   color: #333;
   font-size: 14px;
}
.server-left a{
    width: 200px;
    display: block;
    border-bottom: 1px solid #999;
    font-size: 18px;
    line-height: 45px;
    color: #333;
}
.server-left a:hover{
    width: 250px;
    transition: all linear .3s;
}
.server-middle h1{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
}
.server-middle h1 a{
    color: #333
}
.server-middle p{
    font-size: 16px;
    line-height: 30px;
}
.ani-tim-1{
    animation-delay: .3s;
}
.ani-tim-2{
    animation-delay:.5s
}
.ani-tim-3{
    animation-delay:.7s
}
.ani-tim-4{
    animation-delay:.9s
}

.block-news-list{
    overflow: hidden;
    margin-top: 60px;
    
}
.block-news-list-wrap{
    background: #e6edf5;
    overflow: hidden;
}

.block-news-list img{ 
    width: 100%;
    border-radius: 6px 6px 0 0;
    height: auto;
}

.footer-smallico-phone{
    float: left;
    width: 95%;
    display: none;
    margin-bottom: 20px;
    margin-left: 15px;
}
.footer-smallico-phone a{
    width: 30px;
    height: 30px;
    float: left;
    color: #333;
    font-size: 30px;
    margin-right: 15px;
}
.footer-smallico-phone a:hover{
    color: #e41f2b;
    transition:  all linear .3s;
}








.one-left-view-phone{
    background-image: linear-gradient(to right bottom,#fc6570,#e978cd);
    border-radius: 0;
    margin-bottom: 50px;
    padding: 100px 30px 150px 30px;
    width: 100%;
    position: relative;
    display: none;
    animation: linear-color linear 5s infinite;
}
.wrap-dingwei{
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 3
}
.one-block-content-phone h1{
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}
.one-block-content-phone p{
    color: #fff;
    font-size: 18px;
    padding: 20px 0;
    line-height: 30px;
}
.img-pra-phone{
    position: absolute;
    right: 50px;
    top: -60px;
    z-index: 2;
}
.a-more-3{
    font-size: 24px;
    color: #fff;
    padding-top: 30px;
    display: inline-block;
    line-height: 40px;
}
.a-more-3 i{
    padding-left: 10px;
    font-size: 35px;
    float: right;
    transition: all linear .2s;
}







/* phone css */
.fiexe-size{
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
}
.mobile-header{
    box-shadow: 0 0 20px rgba(0,0,0,.09);
    z-index: 51;
    height: 80px;
    padding: 15px 0;
    width: 100%;
    position: fixed;
    background: #fff;
    display: none;
    top: 0
}
.mobile-logo{
    float: left;
    height: 50px;
    margin-left: 15px;
}
.img-logo{
    height: 100%;
    width: auto;
}
.mobile-right{
    float: right;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
    margin-right: 15px;
}
.mobile-right a{
    float: left;
    height: 40px;
    line-height: 40px;
    color: #333;
    font-size: 24px;
}
.mobile-right span{
    float: left;
    height: 40px;
    width: 1px;
    background: #ccc;
    margin: 0 15px;
}
.transform-top{
    transform: translateY(-80px);
    transition:all .3s 
}
.transform-header{
    position: fixed;
    width: 100%;
    background: #fff;
    left: 0;
    top: 0;
}
.transform-header2{
    transform: translateY(-120px);
    transition:all 1.2s 
}
.page-nav-fixed{
    position: fixed;
    width: 100%;
    background: #fff;
    left: 0;
    top: 120px;
    z-index: 5;
}
.page-nav-transform{
    transform: translateY(-120px);
    transition:all 1.2s 
}
.mobile-search-view{
    height: 80px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    z-index: 7;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    display: none;
}
.mobile-search-view form{
    width: 95%;
    padding: 0 10px;
    border-radius: 8px;
    border:1px solid #ddd;
    float: left;
    height: 50px;
    line-height: 50px;
}
.mobile-search-view form input{
    width: 70%;
    border:none;
    background: transparent;
    float: left;
    height: 50px;
    line-height: 50px;
}
.mobile-search-view form button{
    width: 50px;
    height:50px;
    text-align: right;
    border:none;
    background: transparent;
    float: right;
    line-height: 50px;
    color: #333;
    font-size: 18px;
}
.mobile-search-view form button i{
    color: #333;
    font-size: 30px;
}
.close-search{
    float: right;
    position: absolute;
    right: 5px;
    top: 15px;
    height: 50px;
    line-height: 50px;
    text-align: right;
    color: #333;
    font-size: 24px;
}
.bg-black{
    width: 100%;
    height: 100%;
    padding: 15px 0;
    z-index: 6;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    display: none;
}
.mobile-son-menu{
    position: fixed;
    z-index: 50;
    left: 110%;
    top: 0;
    padding-top: 80px;
    background: #f5f5f5;
    width: 100%;
    height: 100%;
}
.transform-left-show{
    transition: all .3s;
    transform: translateX(-110%);
}
.mobile-menu i,.mobile-menu em{
    font-size: 24px;
}
.mobile-menu em{
   display: none
}
.son-menu-bottom{
    background: #333;
    padding: 15px;
    height: 50px;
    line-height: 20px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 14px;
    z-index: 10;
}
.son-menu-bottom > a{
    color: #fff;
}
.son-menu-bottom > a i{
    padding-left: 10px;
    font-size: 14px;
    display: inline-block;
}
.left-click-a{
    float: left;
}
.right-click-a{
    float: right;
}
.language-mobile{
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 4;
    width: 100%;
    background: #fff;
    padding: 80px 15px 80px;
    display: none;
}
.flink-mobile{
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 4;
    width: 100%;
    background: #fff;
    padding: 80px 0 80px;
    display: none;
}
.language-mobile a{
    display: block;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
    color: #333;
}
.language-mobile li,.flink-mobile ul{
    width: 100%;
    height: 100%;
    overflow-y: auto
}
.rotate-i{
    transform: rotateX(180deg)
}
.flink-mobile ul li{
    padding: 20px 15px;
    border-bottom:1px solid #ddd;
}
.flink-mobile ul li h1{
   font-size: 18px;
   line-height: 40px;
}
.flink-mobile ul li h1 a{
    color: #e41f2b;
 }
 .flink-mobile ul li p{
    color: #333;
    font-size: 14px;
    line-height: 35px;
 }
 .list-have-son{
    background: #fff;   
 }
.list-have-son h1{
    font-size: 24px;
    color: #333;
    padding: 10px 15px;
    border-bottom: 1px solid #d4d4d4;
    box-shadow: 0 0 2px #cccccc;
}
.list-have-son h1 i{
   float: right;
   font-size: 24px;
}
.list-have-son li{
    display: none;
}
.list-have-son li a{
    padding: 10px 25px;
    display: block;
    color: #555;
    font-size: 18px;
    border-bottom:1px solid #ddd;
}
.bg-change{
    background: #666 !important;
    color: #fff !important;
}
.bg-change i{
    color: #fff;
}
.list-no-son{
    background: #fff; 
    margin-top: 30px;  
}
.list-no-son h1{
    font-size: 24px;
    padding: 10px 15px;
    border-bottom: 1px solid #d4d4d4;
    box-shadow: 0 0 2px #cccccc;
}
.list-no-son h1 a{
    color: #333;
}
.list-no-son h1 i{
   float: right;
   font-size: 24px;
}
.mobile-fast-nav {
    box-shadow: 0 0 80px rgba(0,0,0,.1); 
    display: none;
}
.mobile-fast-nav li{
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    height: 60px;
    line-height: 30px;
}
.mobile-fast-nav li a{
    color: #333;
    font-size: 24px;
}
.mobile-fast-nav li i{
   float: right;
   line-height: 30px;
   font-size: 24px;
}








/* page csss */
.page-nav{
    height: 40px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
}
.page-nav a{
    height: 39px;
    float: left;
    line-height: 39px;
    border-bottom: 1px solid #fff;
    color: #333
}
.page-nav span{
    width: 1px;
    height: 14px;
    float: left;
    background: #333;
    margin:13px 10px 0;
}
.page-nav span:last-child{
    width: 0;
}
.a-hover-unline{
    border-bottom-color: #e41f2b !important;
}
.page-nav a:hover{
    border-bottom-color: #e41f2b;
}
.page-mbx li{
    line-height: 35px;
    margin-top: 25px;
    margin-bottom: 50px;
    color: #333;
    font-size: 14px;
}
.page-mbx li a{
    color: #333
}
.baiumap-size{
    height: 450px;
}

.page-h1-title{
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 5px;
}
.contact-info{
    margin-top: 80px;
}
.contact-left{
    padding-left: 0;
}
.contact-left h1{
   font-size: 24px;
   font-weight: 700;
   color: #333;
   border-bottom:1px solid #ddd;
   padding-bottom: 10px;
}
.contact-left li{
    margin-top: 40px;
}
.contact-left li h3{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.contact-left li p{
    font-size: 18px;
    line-height: 35px;
}
.contact-right{
    float: right;
    background: #fff;
    box-shadow: 0 0 50px rgba(0,0,0,.1);
    border-radius: 8px;
    padding: 40px;
}
.contact-right h1{
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
}
.contact-right h1 span{
    font-size: 18px;
    font-weight: normal;
    color: #666
}
.contact-message .form-group{
    margin-top: 15px;
    overflow: hidden;
}
.contact-message .form-group label{
     line-height: 40px;
     font-size: 18px;
     padding: 0
}
.contact-message .form-group label i{
   padding-right: 5px;
}
.contact-message  input{
    line-height: 40px;
    height: 40px;
    border-color: #333;
}
.contact-message  textarea{
    line-height: 30px;
    border-color: #333;
}
.user-botton-message{
    background: #e41f2b;
    padding: 0 54px;
    line-height: 40px;
    margin-top: 15px
}
.add-gg{
    font-size: 24px;
    color: #333
}
.add-gg span{
    font-size: 18px;
    color: #808080
}
.server-message .form-group{
    margin-top: 15px;
    overflow: hidden;
}
.server-message .form-group label{
     line-height: 40px;
     font-size: 18px;
     padding: 0;
     font-weight: normal;
}
.server-message .form-group label i{
   padding-right: 5px;
}
.server-message  input{
    line-height: 40px;
    height: 40px;
    border-color: #ccc;
}
.server-message  textarea{
    line-height: 30px;
    border-color: #ccc;
}
.server-right{
    float: right;
    border-radius: 8px;
    padding: 20px 40px;
}
.server-right img{
    margin-top: -20px;
}
.server-right h1{
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
}
.server-right li{
    margin-top: 40px;
}
.server-right li h3{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.server-right li p{
    font-size: 18px;
    line-height: 35px;
}
.about-content{
    margin-left: -15px;
    margin-right: -15px;
    overflow: hidden;
}
.about-left-content p{
    font-size: 18px;
    line-height: 35px;
    text-indent: 36px;
}
.about-right-img img{
    width: 100%;
    border-radius: 8px;
    height: auto;
}
.about-info-h1{
    font-size: 36px;
    color: #333;
    font-weight: 700;
}
.about-list{
    margin-left: -15px;
    margin-right: -15px;
}
.join-img{
    height: 400px;
    padding: 0;
    overflow: hidden;
}
.join-img img{
    width: 100%;
    height: 100%;
}
.join-img img:hover{
    transform: scale(1.4) rotate(15deg);
    transition: all .5s;
}
.join-word{
    height: 400px;
    background: #fafafa;
    padding: 50px;
    overflow: hidden;
}
.join-word h1{
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}
.join-word p{
   line-height: 30px;
   font-size: 18px;
}
.p-group{
    overflow: hidden;
    height: 230px;
}
.join-phone{
    display: none
}
.join-flex-box{
    position: relative;
}
.join-flex-box .modal-header {
    padding: 40px 40px 0;
    border-bottom:none;
}
.join-flex-box .modal-header h1{
    color: #333;
    font-size: 24px;
    font-weight: 700;
}
.join-flex-box .modal-header h1 .close {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-align: right;
    filter: alpha(opacity=100);
    opacity: 1;
}
.join-close {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-align: right;
    filter: alpha(opacity=100);
    opacity: 1;
    width: 100%;
}

.join-flex-box .modal-header h1 em{
    color: #666;
    font-size:18px;
    font-style: normal;
    font-weight: normal
}
.join-flex-box .modal-body{
    padding: 0 40px 40px;
    overflow: hidden;
}
.join-flex-box .modal-body li h3{
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    margin-top: 40px;
}
.join-flex-box .modal-body li p{
    font-size: 18px;
    color: #333;
    line-height: 30px;
}
.join-sq-btn{
    background: #e41f2b;
    cursor: pointer;
    padding: 10px 30px;
}
.join-flex-box .modal-footer{
    text-align: left;
    padding: 0 40px 40px;
    border-top: none;
}
.join-messages{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 40px;
    background: #fff;
    left: 0;
    top: 0;
}
.join-message-control{
    width: 48%;
    float: left;
    margin-left: -15px;
    margin-right: -15px;
}
.join-message-views{
    width: 65%;
    margin-top: 15%;
}
.join-message-block{
    margin-top: 5%;
}
.join-message-control label{
    text-align: left !important;
    font-size: 15px;
    font-weight: normal
}
.join-message-control label i{
    padding-right: 5px;
}
.join-forms{
    margin-top: 40px;
}
.page-fenye{
    text-align: center;
    clear: both;
    overflow: hidden;
}

.pagination{
    display: block;
    overflow: hidden;
    text-align: center;
    margin: 40px 0 0;
    border-radius: 0;
}

/*复制*/
.tcdPageCode{
    display: block;
    overflow: hidden;
    text-align: center;
    margin: 40px 0 0;
    border-radius: 0;

}
.tcdPageCode>li>a, .tcdPageCode>li>span {
    display: inline-block;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #333;
    float: none;
    border:1px solid #ddd;
}


.tcdPageCode li, .tcdPageCode li {
    display: inline-block;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #333;
    float: none;
}

.tcdPageCode>li>a:hover{
    background: #e41f2b;
    color: #fff;
    border-color: #e41f2b
}


/*end*/


.pagination>li>a, .pagination>li>span {
    display: inline-block;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #333;
    float: none;
}
.pagination>li:first-child>a, .pagination>li:first-child>span{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.pagination>li>a:hover{
    background: #e41f2b;
    color: #fff;
    border-color: #e41f2b
}
.cases-list {
    margin-left: -15px;
    margin-right: -15px;
}
.down-li-nav{
    height: 50px;
    border-bottom: 1px solid #ddd;
}
.down-li-nav a{
    display: inline-block;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #333;
    margin-right: 40px;
}
.down-li-nav a:hover{
    border-bottom: 2px solid #e41f2b;
}
.a-line-red{
    border-bottom: 2px solid #e41f2b !important;
}
.down-content{
    padding-top: 30px;
}
.wrap-down{
    background: #dee8f4;
    overflow: hidden;
    margin-top: 20px;
}
.left-down-list{
    padding: 20px;
    height: 210px;
}
.left-down-list span{
   color: #666;
   font-size: 16px;
}
.left-down-list h1{
    color: #333;
    font-size: 24px;
    font-weight: 700;
    margin: 12px 0 12px 
}
 .left-down-list p{
    color: #333;
    font-size: 18px;
    line-height: 30px;
 }
 .righ-down-list{
    padding: 90px;
    height: 210px;
    background: #e6edf5;
    border-left: 1px solid #fff;
 }
 .righ-down-list a{
     font-size: 24px;
     color: #333
 }
 .righ-down-list a i{
   float: right;
   font-size: 24px;
}
.righ-down-list2{
    padding:35px;
    height: 210px;
    background: #e6edf5;
    border-left: 1px solid #fff;
 }
.righ-down-list2 li{
    height: 35px;
    
}
.righ-down-list2 li h3{
     float: left;
     line-height: 35px;
     height: 35px;
     font-size: 18px;
     color: #333;
     font-weight: 700;
}
.righ-down-list2  li a {
    float: right;
    font-size: 18px;
    color: #333;
    text-align: right;
    line-height: 35px;
}
.righ-down-list2  li a i{
    float: right;
    font-size: 18px;
    padding-left: 40px;
}
.infines{
    position: relative;
    z-index: 10;
    animation-iteration-count: infinite;
}
.new-left-select{
    padding: 0;
    padding-right: 130px;
}
.select-block h1{
    color: #333;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    border-bottom:1px solid #ccc;
}
.select-block h1 a{
    color: #e41f2b;
    font-weight: normal;
    float: right;
}
.select-block .radio{
    height: 60px;
    line-height: 60px;
    position: relative
}
.radio-userd{
    height: 20px;
    width: 20px;
    float: left;
    margin-top: 15px;
    border:1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    padding: 4px;
    box-sizing: content-box
}
.radio-userd span{
    border-radius: 50%;
    height: 100%;
    width: 100%;
    float: left;
    background: #e41f2b;
    display: none;
}
.select-block .radio label input{
    position: absolute;
    height: 22px;
    width: 22px;
    float: left;
    top: 16px;
    left: 20px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}
.select-block .radio label {
    color: #333;
    font-size: 18px;
}
.select-block .radio i {
   font-size: 16px;
   color: #333;
   height: 60px;
   line-height: 60px;
   float: right;
   font-style: normal
}
.news-item{
    background: #e6edf5;
    overflow: hidden;
    display: block;
    margin-top: 15px;
}
.left-newlist-left{
    padding: 30px;
    width: 66%;
    float: left;
    height: 150px;
    overflow: hidden;
}
.left-newlist-left span{
    font-size: 16px;
    color: #333;
}
.left-newlist-left h1{
    font-size: 24px;
    color: #333;
    font-weight: 700;
    margin-top:20px;
}
.left-newlist-left p{
    font-size: 16px;
    color: #333;
    line-height: 25px;
    margin-top:20px;
}
.new-right-select{
    padding: 0;
}
.right-newlist-img{
    float: right;
    width:30%;
    height: 150px;
    overflow: hidden;
}
.right-newlist-img img{
    width: 100%;
    height:100%;
}
.text-right-w{
    text-align: right !important;
}
.view-news-info > h1{
    font-size: 36px;
    color: #0075be;
    font-weight: 700
}
.view-news-info > li{
    font-size: 16px;
    color: #b0adae;
    margin: 20px 0;
}
.news-contents{
    line-height: 35px;
}
.news-contents p{
    font-size: 18px;
    color:  #333;
    line-height: 40px;
}
.biaoti-share{
    float: left;
    line-height:30px;
}
.baidu-share{
    margin-top: 40px;
}
.fangan-banner{
    position: relative;
    overflow: hidden;
}
.fangan-banner img{
    width: 1920px;
    position: relative;
    height: auto;
    left: 50%;
    margin-left: -960px;
    top: 0
}
.wrap-banner{
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    float: left;
}
.add-banner-world{
    overflow: hidden;
    padding: 0;
}
.add-banner-world h1{
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-top:80px;
}
.add-banner-world p{
    color: #fff;
    margin-top:30px;
    font-size: 24px;
}

.jiejue-mbx{
    background: #fafafa
}
.jiejue-mbx li{
    color: #333;
    font-size: 14px;
    padding: 10px 0;
}
.jiejue-mbx li a{
    color: #333
}



.nav-bar{
    height: 60px;
    border-bottom: 1px solid #ddd;
	overflow: hidden;
}
.nav-bar a{
    float: left;
    height: 59px;
    line-height:59px;
    margin-right: 50px;
    font-size: 18px;
	color: #666;
	text-decoration: none;
    float: left;
}
.nav-bar a:last-child{
	border-right:none;
}
.on{
	color: #333 !important;
	border-bottom: #e41f2b 1px solid;
}
.scroll-item{
	padding-top:70px;
	list-style: none;
}
.scroll-item > h1{
	color: #333;
    font-size: 36px;
    font-weight: 700;
    text-align: center
}
.summary {
	margin-top: 50px;
}
.summary p{
	line-height: 35px;
	color: #333;
	font-size: 18px;
	text-align: left;
}
.jiejue-wraps{
    position: relative;
}
.world-jiejue{
    position:absolute;
    right: 0;
    top: 0;
    background: rgba(0,0,0,.8);
    height: 100%;
    padding: 70px 80px 40px;
}
.world-jiejue h1{
   color: #fff;
   font-size: 30px;
   font-weight: 700;
}
.world-jiejue p{
    color: #fff;
    font-size: 18px;
    line-height: 35px;
    margin-top: 35px;
    margin-bottom: 35px;
}
.world-jiejue a:hover{
    color: #fff
}
.world-jiejue a:hover i{
    transition: all .3s;
   transform: translateX(10px)
 }
 .jiejue-scroll{
     margin-top: 60px;
 }
.img-jiejue{
    padding: 0
}
.img-jiejue img{

    width: 100%;
    height: auto;
}
.pro-dian-divs{
    position: absolute;
    right: 0;

    top: 30px;
}
.user-circle-click .swiper-pagination-current,.user-circle-click .swiper-pagination-total{
    color: #fff;
}
.user-circle-click{
    color: #fff;
    bottom: auto;
    text-align: left;
    padding-left: 145px;
}
.pos-circle-span{
    top: 48px;
    width: 25px;
    border-radius: 50%;
    background: #fff;
    height: 25px;
    cursor: pointer;
    background-image: none;
    text-align: center;
    color: #000;
    font-size: 16px;
    line-height: 25px;
}
.pos-circle-prev{
    left: 80px !important;
}
.pos-circle-next{
    left: 220px !important;
}
.pro-circle-divs{
    position: absolute;
    top: 0;
    right:  0;
    height: 25px;
}
.block-chuangxin{
    text-align: center;
    overflow: hidden;
    margin-top: 60px;
}
.block-chuangxin li{
    display: inline-block;
    margin: 0 120px;
}
.block-chuangxin li a{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #e41f2b;
}
.block-chuangxin li p{
    display: block;
    color: #333;
    line-height: 30px;
    font-size: 18px;
}
.check-more{
    display: block;
    text-align: center;
    color: #333;
    font-size: 24px;
    line-height: 40px;
    margin-top: 30px;
}
.check-more i{
   padding-left: 15px;
   font-size: 20px;
   display: inline-block
}
.check-more:hover{
    color: #333;
}
.check-more:hover i{
    transition: all .3s;
    transform: translateX(10px)
}
.span-ie{
    color: #333;
    font-size: 16px;
    display: block;
    margin-top: 10px;
}
.prod-nice{
    margin-top: 60px;
}
.product-tjs{
    padding: 50px;
    background: #e6edf5;
    border-radius: 8px;
}
.product-infosw h1 {
    font-size: 24px;
    color: #333;
    font-weight: 700;
    line-height: 35px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.hzhb-h3{
    font-size: 18px;
    text-align: center;
    color: #333;
    margin:35px 0;
}
.hzhb-left-span{
    background: #ccc;
    width: 30px;
    height: 33px;
    text-align: center;
    line-height: 33px;
}
.hzhb-left-span i{
    color: #fff;
    font-size: 20px;
}
.hzhb-left-pre{
    left: 0
}
.hzhb-left-next{
    right: 0;
}
.wrap-imgs-border{
    border-radius: 8px;
    border:1px dashed #ddd;
    padding: 30px;
    margin-bottom: 15px;
}
.wrap-imgs-border img{
   width: 100%;
   height: auto;
}
.product-tjs img{
    width: 100%;
    height: auto;
}
.jjfa-titss{
    margin-top:60px;
    margin-bottom: 0;
}
.kkfa-view-os{
    margin-top: 55px;
overflow:hidden;
}
.left-img-jjl,.right-word-jjl{
    padding: 0
}
.left-img-jjl img{
    width: 100%;
    height: auto;
    border-radius: 8px
}
.right-word-jjl{
    background: #e6edf5;
    padding: 40px 60px;
    border-radius: 0 8px 8px 0;
    margin-top: 20px;
}
.right-word-jjl h4{
   font-size: 30px;
   color: #333;
   margin-bottom: 20px;
   
}
.right-word-jjl p{
    font-size: 18px;
    color: #333;
    line-height: 35px;
 }
 .text-h1-left{
     text-align: left !important;
color:#333;
 }
 .tabs-product-views{
     margin: 0 -15px;
     overflow: hidden;
 }
 .tabs-product-views li{
     position: relative;
     margin-top: 20px;
 }
 .tabs-product-views li > a{
    display: block;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    color: #333;
    border-bottom: 1px solid #ccc;
}
.tabs-product-views li a i,.tabs-product-views li a em{
    float: right;
    color: #333;
    font-size: 18px;
}
.tabs-product-views li a i{
    display: none;
    color: #fff !important;
}
.display-show{
    display: block !important;
}
.display-hide{
    display: none !important;
}
.sub-product-view{
    position: relative;
    left: 0;
    top: 0;
    width: 205%;
    display: none;
    overflow: hidden;
    z-index: 10;
}
.main-view-product{
    background: #f5f5f5;
    overflow: hidden;
    padding: 25px;
   
}
.main-view-product h3{
    font-size: 30px;
    color: #333;
    margin-bottom: 30px;
}
.main-view-product a{
    color: #333;
    width: 50%;
    font-size: 18px;
    float: left;
    line-height: 35px;
}
.add-some-a{
    background: #4d4d4d !important;
    color: #fff !important;
    padding: 0 15px;
}
.i-color{
    color: #fff !important;
}
.product-search-ico{
    background: transparent !important;
    color: #e41f2b !important;
    border: 1px solid #ddd !important;
}
.container-products{
    position: relative;
}
.search-flex-product{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 5;
    background: #fff;
    display: none
}
.search-flex-product h2{
    margin-top: 88px;
    height: 55px;
    padding: 10px 0;
    line-height: 35px;
    border-bottom: 1px solid #ddd;
    color: #666;
    font-size: 18px;
}
.search-flex-product h2 a{
    height: 33px;
    line-height: 33px;
    border: 1px solid #ddd;
    float: right;
    text-align: center;
    color:#666;
    font-size: 18px;
    padding: 0 5px;
}
.view-search-result{
    padding: 20px 0;
}
.view-search-result a{
    line-height: 45px;
    color: #333;
    font-size: 18px;
    display: block
}

.view-search-result a span{
  font-weight: 700;
}

.view-search-result a em{
    padding-right: 15px;
    font-size: 24px;
    text-align: left
  }
  .a-product-nav{
    overflow: hidden;
      margin-top: 70px;
  }
  .a-product-nav a{
   display: inline-block;
   height: 50px;
   background: #f5f5f5;
   color: #333;
   font-size: 18px;
   padding: 0 30px;
   position: relative;
   line-height: 50px;
   margin-right: 30px;
}
.a-product-nav a span{
    position: absolute;
    top: 0;
    z-index: 2;
    height: 50px;
    width: 11px;
}
.a-product-nav a:hover{
    background: #e41f2b;
    color: #fff
}
.a-product-nav a span:nth-of-type(1){
   left: 0;
   background: url('../images/pro_nav_bg_left.jpg') no-repeat left top
}
.a-product-nav a span:nth-of-type(2){
    right: 0;
    background: url('../images/pro_nav_bg_right.jpg') no-repeat right top
 }
 .a-product-nav a:hover span:nth-of-type(1){
    background: url('../images/pro_nav_bg_hover_left.jpg') no-repeat left top
}
.a-product-nav a:hover span:nth-of-type(2){
    background: url('../images/pro_nav_bg_hover_right.jpg') no-repeat left top
}
.on-as{
    background: #e41f2b !important;
    color: #fff !important
}
.a-product-nav a.on-as span:nth-of-type(1){
    background: url('../images/pro_nav_bg_hover_left.jpg') no-repeat left top
}
.a-product-nav a.on-as span:nth-of-type(2){
    background: url('../images/pro_nav_bg_hover_right.jpg') no-repeat left top
}

.loop-product{
    padding: 40px;
    border:1px solid #ddd;
}
.product-views-show{
    overflow: hidden;
    margin-top: 60px;
}
.loop-product img{
    width: 100%;
    height: auto;
}
.loop-product h1{
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 15px;
}
.loop-product h1 a{
    color: #333;
}
.loop-product p{
    color: #333;
    font-size: 16px;
    line-height: 35px;
}
.whitebgs{
    background: #fff;
}



.info-right-summary{
    float: right;
}
.thumb-img-items li img{
    width: 100%;
    height: auto;
}
.info-right-summary h1{
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}
.summary-word{
    font-size: 18px;
    color: #333;
    line-height: 30px;
}
.info-right-summary > a{
    padding: 15px 40px;
    background: #e41f2b;
    margin-right: 30px;
    display: inline-block;
    color: #fff;
    font-size: 18px;
    margin-top: 40px;
}
.info-bottom-product{
    margin-top: 70px;
}
.info-tabs{
    height: 50px;
    border-bottom: 1px solid #ddd;
}
.info-tabs a{
    height: 50px;
    line-height: 50px;
    display: inline-block;
    margin-right: 30px;
    font-size: 18px;
    color: #666;
}
.info-tabs a:hover{
    color: #333;
    border-bottom: 1px solid #e41f2b;
}
.info-on-a{
    color: #333 !important;
    border-bottom: 1px solid #e41f2b !important;
}
.p-wraps p{
    font-size: 18px;
    color: #333;
    line-height: 60px;
}
.p-wraps p span{
    width: 300px;
    float: left;
  font-weight: 700;
  padding-right: 100px
}
.info-div-views{
    padding: 50px 0;
    overflow: hidden;
    display: none;
}
.show-info-views{
    display: block !important;
}
.info-div-views img{
    max-width: 100%
}


.channel-left-img{
    border-radius: 8px;
    
    text-align: center;
    padding: 30px 0
}
.channel-left-img img{
    display: inline-block;
    max-width:100%; 
}
.channel-right-img{
    float: right;
}
.channel-right-img h1{
    text-align: left;
    color: #333;
    font-size: 30px;
    margin-top: 50px;
    font-weight: 700;
}
.summary-channel{
    margin-top: 30px;
    color: #333;
    font-size: 18px;
    line-height: 35px;
}
.view-channel{
    overflow: hidden;
}
.channel-titles{
    font-size: 30px;
    color: #333;
    text-align: center;
    clear: both;
    margin: 40px 0 60px;
    font-weight: 700;
}
.why-select-us{
    overflow: hidden;
}
.why-select-us li{
    text-align: center;
}
.why-select-us li h3{
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 20px 0;
}

.why-select-us li p{
    font-size: 18px;
    color: #333;
}
.why-tabs{
    overflow: hidden;
}
.why-tabs a{
    margin-bottom: 20px;
}
.why-tabs a i{
    display: block;
    background: #e31f29;
    border-radius: 8px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-style: normal
}
.why-product-view-list{
    overflow: hidden;
    border-radius: 8px;
    padding: 50px;
    margin-top: 20px;
}
.bgcolor-one{
    background: #bff5ff;
}
.bgcolor-two{
    background: #fbe3fe;
}
.left-why-prod-list img{
    max-width: 100%;
}
.right-why-prod-list h1{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 50px;
}
.right-why-prod-list p{
    font-size: 18px;
    line-height: 35px;
}

.right-why-prod-list a{
    font-size: 24px;
    color: #333;
    line-height: 30px;
    display: inline-block;
    margin-top: 40px;
    height: 30px;
}
.right-why-prod-list a i{
  padding-left: 15px;
  font-size: 30px;
  transition: all linear .2s;
  display: inline-block;
}
.right-why-prod-list a:hover{
    color: #000;
}
.right-why-prod-list a:hover i{
    transition: all ease .2s;
    transform: translateX(10px)
}

.produ-banner{
    overflow: hidden;
}
.produ-banner img{
    width: 100%;
    height: auto;
}
.ad-gallery .ad-thumbs li a img{
    width: 100px
}
.user-next, .user-prev {
   
    margin-top: -52px;
  
}
.one-div-1{
width:77% !important;
}
.one-div-2{
width:23% !important;
}

.two-div-1{
width:33% !important;
}
.two-div-2{
width:67% !important;
}

.three-div-1{
    width:38% !important;
}
.three-div-2{
    width:62% !important;
}
.four-div-1{
    width:38% !important;
}
.four-div-2{
    width:62% !important;
}
.about-right-img{
    float: right;
}
.phone-banner{
    display: none;
}
.pcs{
    display: block;
}
.phones{
    display: none;
}
	/* 基础布局 */
			.product-grid0319 {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 30px;
				max-width: 1400px;
				margin: 0 auto;
				padding: 50px 20px 0;
			}

			/* 产品项容器 */
			.product-item0319 {
				position: relative;
				overflow: hidden;
				border-radius: 12px;
				aspect-ratio: 4/3;
				box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
			}

			/* 产品图片 */
			.product-image0319 {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
			}

			/* 现代感遮罩层 */
			.mask0319 {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 12px;
				background: linear-gradient(160deg, rgba(25, 25, 25, 0.95) 30%, rgba(0, 0, 0, 0.7));
				color: white;
				padding: 20px 25px;
				/* 调整上下间距 */
				opacity: 0;
				transform: scale(0.98);
				transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
				display: flex;
				flex-direction: column;
				justify-content: center;
				/* 改为居中显示 */
			}


			/* 悬停效果 */
			.product-item0319:hover .mask0319 {
				opacity: 1;
				transform: scale(1);
			}

			.product-item0319:hover .product-image0319 {
				transform: scale(1.03);
				filter: brightness(0.8);
			}

			/* 文字内容样式 */
			.product-name0319 {
				font-size: 1.6em;
				/* 适当缩小字号 */
				font-weight: 600;
				margin-bottom: 5px;
				position: relative;
				padding-left: 18px;
				line-height: 1.3;
				/* 增加行高 */
				overflow-wrap: break-word;
				/* 防止文字溢出 */
			}

			.product-name0319::before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				width: 4px;
				height: 70%;
				/* 缩短竖条高度 */
				background: #e41f2b;
				transform: translateY(-50%);
			}
			}

			.recommend-reason0319 {
				font-size: 0.85em;
				color: #e41f2b;
				margin-bottom: 12px;
				opacity: 0;
				transform: translateY(15px);
				transition: all 0.3s 0.15s;
				line-height: 1.4;
				/* 增加行高 */
				max-width: 90%;
				/* 防止溢出 */
			}

			.product-desc0319 {
				font-size: 0.9em;
				line-height: 1.5;
				margin-top: 5px;
				color: rgba(255, 255, 255, 0.9);
				opacity: 0;
				transform: translateY(15px);
				transition: all 0.3s 0.2s;

				/* 高度控制 */
				max-height: calc(100% - 80px);
				/* 动态计算高度 */
				overflow-y: auto;

				/* 文字换行处理 */
				word-break: break-word;
				hyphens: auto;
				padding-right: 8px;

				/* 滚动条优化 */
				scrollbar-width: thin;
				/* Firefox */
				scrollbar-color: #e41f2b rgba(0, 0, 0, 0.1);
				/* Firefox */
			}

			/* 悬停时文字动画 */
			.product-item0319:hover .product-name0319,
			.product-item0319:hover .recommend-reason0319,
			.product-item0319:hover .product-desc0319 {
				opacity: 1;
				transform: translateY(0);
			}

			/* 装饰元素 */
			.mask0319::after {
				content: "";
				position: absolute;
				top: 25px;
				left: 25px;
				width: 40px;
				height: 2px;
				background: #e41f2b;
				opacity: 0;
				transition: opacity 0.3s 0.25s;
			}

			.product-item0319:hover .mask0319::after {
				opacity: 1;
			}

			.product-desc0319::-webkit-scrollbar {
				width: 6px;
				height: 6px;
			}

			.product-desc0319::-webkit-scrollbar-thumb {
				background: #e41f2b;
				border-radius: 3px;
			}

			.view-more0319 {
				position: absolute;
				bottom: 60px;
				right: 20px;
				display: inline-flex;
				align-items: center;
				padding: 8px 30px;
				background: rgba(228, 31, 43, 0.9);
				color: #FFF;
				font-size: 0.85em;
				border-radius: 20px;
				text-decoration: none;
				transition: all 0.3s ease;
				opacity: 0;
				transform: translateY(10px);
				z-index: 2;
			}

			.view-more0319:hover {
				background: #f52532;
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
			}

			/* 按钮动画 */
			.product-item0319:hover .view-more0319 {
				opacity: 1;
				transform: translateY(0);
				transition-delay: 0.25s;
			}

			/* 移动端优化 */
			@media (max-width: 768px) {
				.view-more0319 {
					bottom: 30px;
					right: 15px;
					padding: 8px 30px;
					/* 增大点击区域 */
					font-size: 0.5em;
				}

				/* 提升移动端点击体验 */
				.view-more0319:active {
					transform: scale(0.95);
				}
			}

			@media (hover: hover) {
				.view-more0319:hover {
					background: #f52532;
					transform: translateY(-2px);
				}
			}

			@media (hover: none) {
				.product-desc0319 {
					-ms-overflow-style: none;
					scrollbar-width: none;
				}

				.product-desc0319::-webkit-scrollbar {
					display: none;
				}
			}

			/* 电脑端特定优化 */
			@media (min-width: 769px) {
				.product-desc0319 {
					max-height: calc(100% - 100px);
					/* 增加可用高度 */
					font-size: 0.95em;
					/* 稍大字号 */
					line-height: 1.6;
					/* 优化阅读体验 */
				}

				/* 大屏幕优化 */
				@media (min-width: 1200px) {
					.product-desc0319 {
						max-height: calc(100% - 120px);
						padding-right: 12px;
					}
				}
			}

			/* 响应式设计 */
			@media (max-width: 992px) {
				.product-grid0319 {
					grid-template-columns: repeat(2, 1fr);
					gap: 20px;
				}
			}

			@media (max-width: 768px) {
				.product-grid0319 {
					grid-template-columns: 1fr;
					padding: 20px 0;
					margin-top: 60px;
				}

				.product-item0319 {
					aspect-ratio: 16/11;
				}

				.mask0319 {
					padding: 15px 20px;
					height: 100%;
				}

				.product-name0319 {
					font-size: 1.3em;
					padding-left: 15px;
				}

				.recommend-reason0319 {
					font-size: 0.8em;
				}

				.product-desc0319 {
					max-height: calc(100% - 80px);
					/* 移动端调整 */
					font-size: 0.85em;
					line-height: 1.6;
				}
			}
			@media (max-width: 1430px){
.block-nine-view {
    width: 100%;
    padding: 0 15px;
}}
	/* 基本样式 */
			:root {
				--primary-color: #ff0000;
				--text-color: #333;
				--shadow-color: rgba(0, 0, 0, 0.3);
			}

			body {
				font-family: "microsoft yahei";
				margin: 0;
				padding: 0;
			}


			/* 封面图片容器 */
			.main-video .image-container {
				width: 100%;
				height: 0;
				padding-bottom: 56.25%;
				position: relative;
				overflow: hidden;
				border-radius: 8px 0 0;
			}

			.video-container {
				display: flex;
				flex-wrap: wrap;
				align-items: stretch;
				/* 确保左右两边高度一致 */
				padding: 20px;
				margin: auto;
			}

			.left-section,
			.right-section {
				flex: 1;
				padding: 10px;
			}

			/* 大视频封面样式 */
			.main-video {
				position: relative;
				cursor: pointer;
				border-radius: 8px;
				overflow: hidden;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}


			/* 渐变背景 */
			.main-video .image-container::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50%;
				/* 渐变区域的高度 */
				background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
				/* 从纯黑向上渐变透明 */
			}


			/* 标题样式 */
			.main-video .video-title {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 92%;
				margin: 0;
				padding: 20px 4%;
				/* 调整内边距 */
				font-size: 1.5rem;
				/* 增大字体大小 */
				line-height: 1.5;
				font-weight: bold;
				color: white;
				/* 标题颜色 */
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
				/* 添加文字阴影 */
				z-index: 1;
				/* 确保标题在渐变背景上方 */
			}


			/* 图片容器 */
			.image-container {
				width: 100%;
				height: 0;
				padding-bottom: 56.25%;
				position: relative;
				overflow: hidden;
				border-radius: 8px 8px 0 0;
			}



			/* 鼠标悬停效果 */
			.main-video:hover {
				box-shadow: 0 8px 16px var(--shadow-color);
			}

			.main-video:hover .image-container img {
				filter: brightness(0.8);
				transform: scale(1.1);
			}

			.main-video:hover .video-title {
				color: var(--primary-color);
				/* 悬停时标题颜色变为红色 */
			}

			.image-container img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.3s ease, filter 0.3s ease;
			}

			/* 小视频封面样式 */
			.video-item {
				position: relative;
				cursor: pointer;
				border-radius: 8px;
				overflow: hidden;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}

			.video-item .video-title {
				margin: 10px 0;
				/* font-size: 1rem; */
				line-height: 1.875rem;
				padding-left: 0.9375rem;
				font-weight: bold;
				color: var(--text-color);
				transition: color 0.3s ease;
			}

			.video-item:hover {
				box-shadow: 0 8px 16px var(--shadow-color);
			}

			.video-item:hover .image-container img {
				filter: brightness(0.8);
				transform: scale(1.1);
			}

			.video-item:hover .video-title {
				color: var(--primary-color);
			}

			.video-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}

			/* 遮罩层样式 */
			.overlay {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.8);
				justify-content: center;
				align-items: center;
				z-index: 999;
			}

			.overlay-content {
				background: #fff;
				padding: 20px;
				border-radius: 8px;
				text-align: center;
				width: 80%;
				max-width: 800px;
			}

			.overlay-content iframe {
				width: 100%;
				height: 400px;
			}

			.close-btn {
				margin-top: 10px;
				padding: 10px 20px;
				background: var(--primary-color);
				color: #fff;
				border: none;
				border-radius: 5px;
				cursor: pointer;
			}

			/* 手机端样式 */
			@media (max-width: 768px) {
				.video-container {
					flex-direction: column;
					width: 90%;
					margin: 0 auto;
					padding: 0 5%;
				}

				.left-section,
				.right-section {
					flex: none;
					width: 100%;
					padding: 30px 0 10px;
				}

				.video-grid {
					grid-template-columns: 1fr;
					gap: 10px;
				}

				.overlay-content iframe {
					height: 200px;
				}

				.main-video .video-title {
					font-size: 1rem !important;
					padding: 5px 10px 5px 0.9rem;
				}

				.video-black {
					height: 30px !important;
				}
			}

			.video-black {
				width: 100%;
				border-radius: 0 0 8px 8px;
				height: 60px;
				background-color: #000;
			}