.header{ background: transparent; }

.bgfff{ background: #fff;}

.banner{ position: relative; z-index: 88; padding: 0; margin-top: -100px; text-align: center; background: url("images/banner.png") no-repeat center/cover; }
.banner .wrap{ position: relative; padding: 180px 0; }
.banner .txt h2{ font-size: 100px; line-height: 1.1; margin-bottom: 2.6em;
    text-shadow: 0 1px 0 #0078b8; }
.zt-more{ display: inline-block; color: #000; font-size: 32px; width: 12em; line-height: 2.5em; font-weight: bold; background: #fff; border-radius: 1.6em; text-align: center; }
.zt-more svg{ position: relative; top: 0.2em; margin-right: 0.4em; width: 1.4em; height: auto;}
.zt-more:hover{ background: #c8000a; color: #fff;}
.zt-more:hover svg{ fill: #fff;}
.zt-item .visible-xs{ display: none;}
.zt-item p{text-align: justify; }

.chanpin{ position: relative; margin-top: -100px; padding: 140px 0 120px; background: #0e2a54; background: radial-gradient(circle at 50% 20%,#2a66a9, #0e2a54) no-repeat center 0/cover; border-radius: 0 0 300px 0; overflow: hidden;}
.chanpin::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 97%; background: #0e2a54; background: radial-gradient(circle at 50% 20%,#2a66a9, #0e2a54) no-repeat center 0/cover; border-radius: 0 0 300px 0; overflow: hidden; }
.chanpin .wrap{ position: relative; z-index: 88;}
.chanpin ul{ margin: 0 -44px;}
.chanpin li{ float: left; width: 25%; padding: 0 44px;}
.chanpin li:nth-child(5){ margin-left: 12.5%;}
.chanpin li:nth-child(n + 5){ margin-top: -20px;}
.chanpin li .pic{ position: relative;}
.chanpin li p{ position: absolute; left: 0; width: 100%; color: #fff; bottom: 21%; text-align: center;}
.chanpin li p span{ display: inline-block;}
.chanpin .bg-img{ position: absolute; width: 100%; max-width: 100%; bottom: -8%; left: 0%;  }
.chanpin .zt-more{ display: none;}

.zt-item{ line-height: 2;}
.zt-title{ font-size: 60px; position: relative; display: inline-block; line-height: 1.1; padding-bottom: 0.3em; margin-bottom: 0.5em;}
.zt-title::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 4px solid;}

.kehu{ padding-top: 100px; }
.kehu .txt{ float: left; width: 42%; }
.kehu .txt p{ margin-bottom: 30px;}
.kehu .txt .img2{ display: none;}
.kehu .pic{ float: right; width: 50%; padding-top: 100px; }
.kehu .zt-more{ display: none;}

.zhuangbei{ padding: 100px 0;}
.zhuangbei .txt{ float: right; width: 33%;}
.zhuangbei .zt-title::before{ width: 60%;}
.zt-more i{ display: inline-block; position: relative; top: 0.15em; font-size: 1.3em; margin-right: 0.4em;}
.zt-more-black{ color: #fff; background: #313131;}
.zhuangbei .zt-more{ width: 100%; margin-top: 2em;}
.zhuangbei .pic{ position: relative; float: left; width: 50%;}
.zhuangbei .pic ul{ margin: -20px -10px 0;}
.zhuangbei li{ float: left; width: 50%; padding: 0 10px; margin-top: 20px; }
.zhuangbei li .img{ position: relative;}
.zhuangbei li span{ position: absolute; color: #fff; line-height: 1;}
.zhuangbei .li1 span,.zhuangbei .li2 span{ bottom: 10px;}
.zhuangbei .li3 span,.zhuangbei .li4 span{ top: 10px;}
.zhuangbei .li1 span,.zhuangbei .li3 span{ right: 10px;}
.zhuangbei .li2 span,.zhuangbei .li4 span{ left: 10px;}
.zhuangbei .pic .p{ position: absolute; top: 0; right: -140px; font-size: 12px; line-height: 16px; width: 124px;}
.zhuangbei .pic p{ position: relative; padding-left: 25px; margin-bottom: 10px;}
.zhuangbei .pic p span{ position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #000; color: #fff; text-align: center; line-height: 16px;}

.jiance{ color: #fff; background: #0e2a54; background: radial-gradient(circle at 50% 20%,#2a66a9, #0e2a54) no-repeat center 0/cover;}
.jiance .zt-title::before{ width: 73%;}
.jiance .txt{ float: left; width: 27%;}
.jiance .zt-more{ background: #fff; color: #000;}
.jiance .zt-more:hover{ background: #c8000a; color: #fff;}
.jiance .pic{ float: right;}
.jiance .pic li{ width: 33.33%;}
.zhuangbei li span{ right: 10px!important; bottom: 10px!important; top: auto!important; left: auto!important; text-shadow: 0 2px 8px rgba(32, 44, 60, 1);}
.jiance .pic .p{ left: -150px; width: 150px;}
.jiance .pic .p span{ background: #fff; color: #20508a;}
.jiance .mpics{ display: none;}

.shili .video{ position: relative; padding-top: 28.2%; background: #ccc; }
.shili .video iframe,
.shili .video video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.shili .video iframe::before{ position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: url("images/shili.jpg") no-repeat center/cover;}

.renzheng{ padding-bottom: 100px;}
.renzheng .zt-title::before{ width: 62%;}
.renzheng ul{ margin: 50px -10px 0;}
.renzheng li{ float: left; width: 25%; padding: 0 10px; margin-top: 20px;}
.renzheng li:nth-child(-2n+6){ position: relative; top: -100px; }
.renzheng li .zt-more{ width: 6em; height: 6em; padding-top: 1.15em; display: block; margin: 3em auto 0; font-size: 40px; background: #313131; color: #fff; border-radius: 50%;}
.renzheng li .zt-more i{ display: block; margin-right: 0;}
.renzheng li .zt-more:hover{ background: #c8000a; }

.lianxi{ position: relative; padding: 70px 0 90px!important; background: #ebebeb;}
.lianxi::before{ position: absolute; content: ''; top: 0; left: 0; width: 44%; height: 100%;  background: #0e2a54; background: radial-gradient(circle at 50% 20%,#2a66a9, #0e2a54) no-repeat center 0/cover;}
.lianxi .wrap{ position: relative;}
.lianxi .zt-more2{ margin-top: 0; font-size: 20px; line-height: 3; font-weight: bold; width: 60%; color: #000; background: transparent; border: 2px solid;}
.lianxi .zt-more2 svg{ width: 1em; height: auto; }
.lianxi .zt-more2:hover{ background: #c8000a; color: #fff; border-color: #c8000a;}
.lianxi .zt-more2:hover svg{ fill: #fff;}

.biaodan{ float: left; width: 33%; color: #fff;}
.biaodan .zt-title::before{ display: none;}
.biaodan h4{ font-size: 30px; line-height: 1;  margin-bottom: 0.5em;}
.biaodan li{ width: 50%; margin-bottom: 55px;}
.biaodan li .txt{ padding: 0; background: transparent; border: none; color: #fff; border-bottom: 2px solid #fff; line-height: 1; height: 36px; padding-bottom: 10px;}
.biaodan li label{ left: 10px; line-height: 1; top: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease ;
    -ms-transition: all .3s ease ;
    -o-transition: all .3s ease ;
    transition: all .3s ease ;}
.myform .saytext label{ line-height: 1; top: 0;}
.biaodan .submit{width: 100%; color: #fff; line-height: 3; border-radius: 1.6em; margin-top: 0.55em;}
.about{ float: right; width: 50%;}
.about p{ margin: 30px 0 60px;}
.biaodan li.value label{ font-size: 14px; top: -20px; opacity: 0.5; }

.meiti{ padding: 80px 0;}
.meiti ul{}
.meiti li{ position: relative; float: left; width: 164px; text-align: center; padding-bottom: 30px;}
.meiti li span{ display: inline-block;}
.meiti li p{ position: absolute; bottom: 0; left: 50%; width: 150%; font-size: 18px; font-weight: bold;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);}
.meiti li + li{ margin-left: 300px;}
.meiti li .nohover{ position: absolute; top: 0; left: 0; width: 100%; background: #fff;}
.meiti li .img1{
    -webkit-animation: flipOutYtest 0.5s linear;
    animation: flipOutYtest 0.5s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.meiti li .img2{
    -webkit-animation: flipInYtest 0.5s linear;
    animation: flipInYtest 0.5s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;  }
@-webkit-keyframes flipInYtest {
    from {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        opacity: 0;
    }

    50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
        opacity: 1;
    }
}
@-webkit-keyframes flipOutYtest {
    from {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
    }

    40% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        opacity: 1;
    }

    50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }

    to {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        opacity: 0;
    }
}



@media (max-width: 1759px){
    .banner .txt h2{ font-size: 94px;}

    .zt-item{ padding: 90px 0;}
    .zt-title{ font-size: 54px;}

    .kehu,.shili{ padding-bottom: 0!important; }
    .kehu .txt{ width: 43%;}

    .zhuangbei .txt{ width: 36%;}
    
    .biaodan ul{ margin: 20px -10px;}
    .about p{margin: 28px 0 58px;}

    .meiti{ padding: 70px 0;}
    .meiti li + li{ margin-left: 234px;}
}
@media (max-width: 1559px){
    .chanpin{ border-radius: 0 0 250px 0;}
    .chanpin{ border-radius: 0 0 250px 0;}
    .chanpin::after{ border-radius: 0 0 250px 0;}
    .banner .wrap{ padding: 160px 0;}
    .banner .txt h2{ font-size: 88px; margin-bottom: 2.2em;}

    .chanpin{ padding: 130px 0 90px;}
    .chanpin ul{ margin: 0 -30px;}
    .chanpin li{ padding: 0 30px;}

    .zt-item{ padding: 80px 0;}
    .zt-title{ font-size: 48px;}
    .zt-item p{letter-spacing: -0.6px;}

    .renzheng li .zt-more{ font-size: 34px;}

    .zhuangbei .txt{ width: 34%;}
    .zhuangbei .zt-more{ margin-top: 1.5em;}

    .lianxi{ padding: 50px 0 70px!important;}
    .biaodan{ width: 34%;}
    .myform li{ margin-bottom: 30px;}
    .about p { margin: 10px 0 30px;}

    .meiti li + li{ margin-left: 166px;}

}
@media (max-width: 1359px){
    .banner .txt h2{ font-size: 72px; }

    .chanpin{ padding: 120px 0 70px; border-radius: 0 0 200px 0;}
    .chanpin::after{ border-radius: 0 0 200px 0;}
    .chanpin ul{ margin: 0 -20px;}
    .chanpin li{ padding: 0 20px;}

    .zt-item{ padding: 70px 0;}
    .zt-title{ font-size: 42px;}

    .shili .txt{ width: 36%;}

    .renzheng li .zt-more{ margin-top: 2em; font-size: 30px;}

    .biaodan{ width: 36%;}
    .biaodan li{ margin-bottom: 45px;}

    .meiti li + li{ margin-left: 100px;}

}
@media (max-width: 1024px){
    .banner{ margin-top: 0;}
    .banner .wrap{ padding: 0.8rem 0 3.53rem;}
    .banner .txt h2{ font-size: 0.647rem; margin-bottom: 0;}
    .banner .txt .zt-more{ display: none;}

    .chanpin{ margin-top: -0.7rem; padding: 1.2rem 0 1.2rem; border-radius: 0;}
    .chanpin::after{ display: none;}
    .chanpin .bg-img{ bottom: 0;}
    .chanpin ul{ margin: 0 -0.196rem;}
    .chanpin li{ padding: 0 0.196rem; width: 33.33%; margin-bottom: 0.4rem;}
    .chanpin li:nth-child(4){ display: none;}
    .chanpin li:nth-child(5){ margin-left: 0;}
    .chanpin li:nth-child(n + 5){ margin-top: 0;}
    .chanpin li p{ font-size: 0.24rem;}

    .zt-item{ padding: 0.8rem 0; font-size: 0.3rem;}
    .zt-title{ font-size: 0.7rem;}
    .zt-title::before{ left: -1.87rem; width: 4.8rem!important; border-top-width: 0.04rem;}
    .zt-item .txt{ width: 100%!important; padding-left: 1.6rem;}
    .zt-item p{ letter-spacing: 0;}
    .zt-item .pic{ width: 100%; padding-top: 0.3rem;}

    .zt-item .zt-more{ display: block; width: 8rem; font-size: 0.32rem; margin: 0.8rem auto 0;}
    .zt-item .visible-xs{ display: block;}

    .kehu .zt-more{ font-size: 0.32rem; width: 8rem; display: block; margin: 0.8rem auto 0.3rem;}
    .kehu .txt p{ letter-spacing: -0.009rem;}

    .zhuangbei{ padding-bottom: 0!important;}
    .zhuangbei .zt-title::before{ width: 6.8rem!important;}
    .zhuangbei .txt .zt-more{ display: none;}
    .zhuangbei li span{ display: none;}
    .zhuangbei ul{ margin: 0;}
    .zhuangbei li{ position: relative; width: 100%; padding: 0; margin-top: 0.2rem;}
    .zhuangbei .pic p{ position: absolute; width: 2.2rem; font-size: 0.244rem; line-height: 1.2; padding: 0; margin: 0; }
    .zhuangbei .pic p::before{ content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 9px 14px 9px 0; border-color: transparent #000 transparent transparent;}
    .zhuangbei li:first-child,.zhuangbei li:last-child{ padding-right: 2.4rem;}
    .zhuangbei li:nth-child(2),.zhuangbei li:nth-child(3){ padding-left: 2.4rem;}
    .zhuangbei li:first-child p,
    .zhuangbei li:last-child p{ right: 0; bottom: 0;}
    .zhuangbei li:nth-child(2) p,
    .zhuangbei li:nth-child(3) p{ left: 0; top: 0; text-align: right;}
    .zhuangbei li:first-child p::before,
    .zhuangbei li:last-child p::before{ top: -0.26rem; left: 0;}
    .zhuangbei li:nth-child(2) p::before,
    .zhuangbei li:nth-child(3) p::before{ bottom: -0.26rem; right: 0; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #000; }


    .jiance{ background: #fff; color: #000;}
    .jiance .zt-title::before{ width: 6.8rem!important;}
    .jiance .txt .zt-more{ display: none;}
    .jiance ul{ margin: 0 -0.15rem;}
    .jiance li{ width: 33.33%; padding: 0 0.15rem!important; }
    .jiance .pic p{position: static; width: 100%; text-align: center!important; padding-top: 0.1rem; }
    .jiance .pic p::before{ display: none; }

    .shili{padding-bottom: 0!important;}
    .shili .txt{ font-size: 0.28rem; margin-bottom: 0.3rem;}
    .shili .txt .zt-more{ display: none;}
    .shili .video{ padding-top: 56.3%;}

    .renzheng .zt-title::before{ width: 7.6rem!important;}
    .renzheng .mpic-cont{ overflow-x: scroll; margin: 0 -0.15rem;}
    .renzheng li:nth-child(-2n+6){ top: 0;}
    .renzheng ul{ margin: 0; width: 300%; }
    .renzheng li{ width: 16.66%; padding: 0 0.15rem; }
    .renzheng li:nth-child(n+7){ display: none;}
    .renzheng .mpic p{ text-align: center; padding-top: 0.2rem; line-height: 1;}

    .lianxi{ padding: 0!important; background: #fff;}
    .lianxi .wrap{ padding: 0;}
    .lianxi::before{ display: none;}
    .biaodan,.about{ width: 100%; padding: 0.7rem 0.27rem;}
    .biaodan{background: #0e2a54; background: radial-gradient(circle at 50% 20%,#2a66a9, #0e2a54) no-repeat center 0/cover; }
    .biaodan ul{ margin: 0 -10px;}
    .biaodan li{ margin-bottom: 0.4rem; font-size: 0.3rem; line-height: 1;}
    .lianxi .zt-more{ margin-top: 0; line-height: 2; width: 7rem;}
    .about-cont{ padding-left: 1.6rem;}
    .about .zt-more{ display: none;}
    .about .mpics{ margin: 0 -0.15rem;}
    .about .mpics li{ float: left; width: 50%; padding: 0 0.15rem; margin-top: 0.3rem;}
    .about .mpics li:last-child{ width: 100%;}
}
@media (max-width: 750px){
    .banner .wrap{ padding: 0.8rem 0 3.86rem;}
    .banner .txt h2{ font-size: 0.72rem; }

    .chanpin ul{ margin: 0 -0.165rem;}
    .chanpin li{ padding: 0 0.165rem; width: 50%; }
    .chanpin li p{ font-size: 0.4rem;}
    .chanpin .zt-more{ font-size: 0.43rem; margin: 0.5rem auto 0;}

    .zt-item{ padding: 1.2rem 0; font-size: 0.4rem;}
    .zt-title{ font-size: 0.64rem;}
    .zt-title::before{ left: -2.4rem; width: 5rem!important; border-top-width: 0.053rem;}
    .zt-item .txt{ padding-left: 2rem;}
    .zt-item .pic{ padding-top: 0.3rem;}
    .zt-item .zt-more{ width: 5rem; font-size: 0.48rem;}

    .kehu .txt p{ margin-bottom: 0;}
    .kehu .img1{ display: none;}
    .kehu .txt .img2{ display: block; max-width: 9.2rem; margin: 0.4rem 0 0.4rem -2rem;}
    .kehu .zt-more{ font-size: 0.48rem; width: 6.08rem;}

    .zhuangbei li{margin-top: 0.4rem;}
    .zhuangbei .pic p{ width: 3.5rem; font-size: 0.32rem; }
    .zhuangbei li:first-child, .zhuangbei li:last-child{ padding-right: 3.62rem;}
    .zhuangbei li:nth-child(2), .zhuangbei li:nth-child(3){ padding-left: 3.62rem;}
    .zhuangbei li:first-child p::before,
    .zhuangbei li:last-child p::before{ border-width: 0.12rem 0.18rem 0.12rem 0; }
    .zhuangbei li:nth-child(2) p::before,
    .zhuangbei li:nth-child(3) p::before{ border-width: 0.12rem 0 0.12rem 0.18rem;}

    .jiance ul{ margin: 0;}
    .jiance .pcpics li{ position: relative; width: 100%; padding: 0!important; }
    .jiance .pcpics li:nth-child(n+6){ display: none;}
    .jiance .pcpics p{ padding-top:0; position: absolute; width: 3.6rem; }
    .jiance .pcpics p::before{ display: block;}
    .jiance .pcpics li:nth-child(odd){ padding-right: 3.72rem!important;}
    .jiance .pcpics li:nth-child(even){ padding-left: 3.72rem!important;}
    .jiance .pcpics li:nth-child(odd) p{ right: 0; bottom: 0; top: auto; left: auto; text-align: left!important;}
    .jiance .pcpics li:nth-child(even) p{ left: 0; top: 0; bottom: auto; right: auto; text-align: right!important;}
    .jiance .pcpics li:nth-child(odd) p::before{ left: 0; top: -0.26rem; right: auto; bottom: auto; border-width: 0.12rem 0.18rem 0.12rem 0; border-color: transparent #000 transparent transparent; }
    .jiance .pcpics li:nth-child(even) p::before{ right: 0; bottom: -0.26rem; left: auto; top: auto; border-width: 0.12rem 0 0.12rem 0.18rem; border-color: transparent transparent transparent #000;}
    .jiance .mpics{ display: block;}
    .jiance .mpics-cont{ overflow-x: scroll;}
    .jiance .mpics ul{ width: 300%; margin: 0;}
    .jiance .mpics li{ padding: 0!important; }
    .jiance .mpics li img{ width: 100%;}
    .jiance .mpics p{ width: 100%; padding-top: 0.2rem;}

    .shili .video{ padding-top: 56.3%;}

    .renzheng .mpic-cont{ margin: 0 -0.13rem;}
    .renzheng ul{ width: 400%; }
    .renzheng li{ width: 16.66%; padding: 0 0.13rem; }
    .renzheng .mpic p{  padding-top: 0.2rem; line-height: 1;}

    .lianxi{ padding: 0;}
    .biaodan,.about{ padding: 1.2rem 0.4rem;}
    .biaodan h4{ font-size: 0.5rem;}
    .biaodan li{ margin-bottom: 0.4rem;}
    .biaodan li .txt{ line-height: 50px; height: 52px;}
    .biaodan .submit{ font-size: 0.4rem; width: 6rem;}

    .about-cont{ padding-left: 2rem;}
    .about .mpics li{ width: 100%; }
}