.clearfix{*zoom:1}
i,em{ font-style:normal;}

body{ overflow-x:hidden;}

.banner{ height:700px; overflow:hidden;}
.banner a{ display:block; height:700px;}
.banner .swiper-pagination .swiper-pagination-bullet{ width:12px; height:12px; border-radius:12px; background:#e30124;}
.banner .swiper-pagination .swiper-pagination-bullet-active{ width:30px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e30224+0,ee850e+100 */
background: rgb(227,2,36); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(227,2,36,1) 0%, rgba(238,133,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(227,2,36,1) 0%,rgba(238,133,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(227,2,36,1) 0%,rgba(238,133,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30224', endColorstr='#ee850e',GradientType=1 ); /* IE6-9 */}
.banner .swiper-button-prev,.banner .swiper-button-next{ font-size:30px; width:60px; height:60px; border-radius:60px; text-align:center; font-family:"宋体"; top:40%;color:#fff; line-height:60px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e30224+0,ee850e+100 */
background: rgb(227,2,36); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(227,2,36,1) 0%, rgba(238,133,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(227,2,36,1) 0%,rgba(238,133,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(227,2,36,1) 0%,rgba(238,133,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30224', endColorstr='#ee850e',GradientType=1 ); }
.banner .swiper-button-next{ right:5%;}
.banner .swiper-button-prev{ left:5%;}


.tit{ font:48px "Microsoft Yahei"; text-align:center; color:#333;}
.tit a{ display:block; color:#333;}
.tit b{ display:block; text-align:center; line-height:5px;}
.tit em{ display:block; font:24px "Microsoft Yahei";color#fff; letter-spacing:2px; margin-top:10px;}

.guide{ min-width:1200px; max-width:1920px; width:86.45833%; margin:100px auto 0; height:1000px;}
.guide1{ margin-top:100px;}
.guide1 dl{ width:18.80%; float:left; background:#fff; box-shadow:0 0 1rem #ccc; margin-top:80px;}
.guide1 dl:nth-child(2n){ margin-top:0;}
.guide1 dt{ overflow:hidden;}
.guide1 dt img{ display:block; position:relative; margin-left:-150px;}
.guide1 dd{ padding:1rem 0 1.6rem 8%; font-size:1.25rem; color:#444444;}
.guide1 dd span{ display:block; font-size:2.625rem; color:#777777;}
.guide1 dd span em{ display:inline-block; width:24px; height:24px; background:#e30024; color:#fff; text-align:center; line-height:24px; font-size:0.875rem; border-radius:24px;}
.guide1 .cur{ width:31.867%; margin:80px -4% 0 -4%; position:relative; z-index:88;background: rgb(227,2,36); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(227,2,36,1) 0%, rgba(238,133,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(227,2,36,1) 0%,rgba(238,133,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(227,2,36,1) 0%,rgba(238,133,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30224', endColorstr='#ee850e',GradientType=1 );}
.guide1 .cur dt img{ margin:0;}
.guide1 dl:nth-child(2n).cur{ margin:0 -4%;}
/*.guide1 dl:nth-child(1).cur{width:31.867%; margin:80px -8% 0 0;}*/
.guide1 .cur dd,.guide1 .cur span{ color:#fff;}
.guide1 .cur dd span em{ background:#73150e;}
@media (min-width: 1200px) and (max-width: 1366px) {
    .guide1 .cur dt img{margin-left:-90px;}
}

.pro{ background:url(../images/pro_bg.jpg) no-repeat center top; padding:90px 0;}
.pro .tit a,.pro .tit em{ color:#333;}
.pro01{ min-width:1200px; max-width:1920px; width:72.92%; margin:50px auto 0; background:#f8f8f8; border-radius:10px; overflow:hidden;}
.prot{ width:17.7%; float:left; height:100%;}
.prot h3{ width:100%; height:25%; background:#fff; border-bottom:1px solid #ececec; box-sizing:border-box; position:relative; padding:0.3rem 0;}
.prot h3 img{ display:block; width:100%;}
.prot h3 em{ display:block; font:18px "Microsoft YaHei UI"; text-align:center; position:absolute; bottom:10px; text-align:center; width:100%;}
.prot .cur{ width:120%; box-shadow:0 0 1rem #ccc; border:0; position:relative; z-index:8; border-radius:10px;}
.prot .cur img{ display:block; width:92%; margin:0 auto;}
.prot .cur em{ display:none;}
.pro2{ width:82.2%; float:right;}
.pro2 dt img{ display:block; width:100%;}
.pro2 dd{ padding:2.2rem 5% 0;}
.pro2 dd h4 a{ display:block; width:15%; float:left; font-size:1.675rem; color:#333; font-weight:normal; margin-top:0.2rem;}
.pro2 dd p{ width:65%; font-size:0.875rem; line-height:1.5rem; color:#666; float:left;}
.pro2 dd span a{ display:block; width:10.9rem; height:3.1875rem; font-size:1rem; padding-left:2.5%; box-sizing:border-box; background:url(../images/pro_btn.png) no-repeat; background-size:100% auto; line-height:3.1875rem; color:#fff; float:right;}

.super{ margin-top:70px; background:url(../images/ys_bg.jpg) no-repeat center 313px; position:relative;}
.super .content{ position:relative;}
.super:before{ content:""; position:absolute; top:230px; left:0; width:100%; height:1px; background:#efefef; z-index:-1;}
.supert{ height:134px; margin-top:45px;}
.supert h3{ width:185px; float:left; margin-right:140px; font:20px "Microsoft YaHei UI"; text-align:center; color:#020000; background:url(../images/y_hover1.png) no-repeat center 53px;}
.supert h3 em{ display:block; font:60px Arial, Helvetica, sans-serif; font-weight:bold; color:#d3d3d3; height:45px; margin-bottom:35px; overflow:hidden;}
.supert h3:last-child{ margin-right:0;}
.supert .cur{background:url(../images/y_hover2.png) no-repeat center 53px;}
.supert .cur em{ color:#e62129;}
.super dl{ height:830px;}
.super dt img{ display:block; width:1179px; height:586px; border:10px solid #fff; box-shadow:0 0 1.5rem #ccc; margin-top:20px;}
.super dd{ width:1005px; margin:40px auto 50px; text-align:center;}
.super dd h3{ font:30px "Microsoft YaHei UI"; color:#42423f;}
.super dd h3 em{ color:#e30323;}
.super dd p{ font:16px "Microsoft YaHei UI"; line-height:30px; color:#666666; margin-top:16px;}
.super h5{ width:320px; height:137px; background:url(../images/ys_vr.jpg) no-repeat center top; margin:0 auto; font:18px "Microsoft YaHei UI"; line-height:64px;}
.super h5 a{ display:block; color:#fff; padding-left:93px;}
.super h5:hover{transform: translateY(-10px);transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
.super .super_l{ width:72px; height:72px; border-radius:72px; border:1px solid #c9c9c9; font:30px "宋体"; font-weight:bold; text-align:center; line-height:72px; color:#c9c9c9; position:absolute; top:555px; left:-220px; cursor:pointer;}
.super .super_r{ width:72px; height:72px; border-radius:72px; border:1px solid #c9c9c9; font:30px "宋体"; font-weight:bold; text-align:center; line-height:72px; color:#c9c9c9; position:absolute; top:555px; right:-220px;cursor:pointer;}
.super .super_l:hover,.super .super_r:hover{ color:#e62129; border:1px solid #e62129;}

.case .tit{ padding:60px 0; background:#eff0f2;}
.gallery-top{ height:686px;min-width:1200px; max-width:1920px;}
.gallery-top dl{ height:686px; position:relative;}
.gallery-top dt{height:686px;}
.gallery-top dd{ width:29.9%; background:rgba(255,255,255,0.8); box-shadow:0 0 1rem #ccc; padding:3rem; position:absolute; top:95px; left:13%; height:400px;}
.gallery-top dd h3 a{ display:block; font-size:2.25rem; font-weight:normal; color:#282828; padding-bottom:1rem; position:relative; padding-top:2rem;}
.gallery-top dd h3 a:before{ content:""; position:absolute; bottom:0; width:75px; height:3px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e30324+0,ee830f+100 */
background: rgb(227,3,36); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(227,3,36,1) 0%, rgba(238,131,15,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(227,3,36,1) 0%,rgba(238,131,15,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(227,3,36,1) 0%,rgba(238,131,15,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30324', endColorstr='#ee830f',GradientType=1 ); /* IE6-9 */}
.gallery-top dd p{ font:1rem "Microsoft YaHei UI"; line-height:1.875rem; color:#666; margin:40px 0;}
.gallery-top dd span a{display:block; width:10.9rem; height:3.1875rem; font-size:1rem; padding-left:4.5%; box-sizing:border-box; background:url(../images/pro_btn.png) no-repeat; background-size:100% auto; line-height:3.1875rem; color:#fff;box-sizing:border-box;}
.gallery-thumbs{ margin-bottom:75px; min-width:1200px; max-width:1920px; width:83.33%; position:relative;}
.gallery-thumbs:before{ content:""; position:absolute; bottom:71px; width:100%; height:1px; background:#f4f4f4;}
.gallery-thumbs .swiper-slide{ width:15.75%;}
.gallery-thumbs img{ display:block; width:100%;}
.gallery-thumbs em{ display:block; height:72px; font:20px "Microsoft YaHei UI"; text-align:center; color:#282828; line-height:72px;position:relative;}
.gallery-thumbs .swiper-slide-active em{ font-weight:bold; color:#e30324;}
.gallery-thumbs .swiper-slide-active em:before{ content:""; position:absolute; top:-1px; left:0; width:100%; height:3px;background: rgb(227,3,36); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(227,3,36,1) 0%, rgba(238,131,15,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(227,3,36,1) 0%,rgba(238,131,15,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(227,3,36,1) 0%,rgba(238,131,15,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30324', endColorstr='#ee830f',GradientType=1 );}

.coop{ margin:95px 0 0 0; position:relative; min-width:1200px; max-width:1920px; width:100%;}
.coop dt img{ display:block; width:100%;}
.coop dd{ width:43.83%; position:absolute; top:16%; right:13%; text-align:right; font:48px "Microsoft YaHei UI"; color:#333333;}
.coop dd em{ display:block; font:22px "Microsoft YaHei UI"; margin-top:5%; line-height:34px;}

.news{ margin:100px 0 65px;}
.news .content{ min-width:1200px; max-width:1920px; width:72.92%; margin:0 auto;}
.news1{ margin-top:75px; width:30.714%; overflow:hidden; float:left;}
.news1:nth-child(2){ margin-right:3.857%;}
.news1:nth-child(4){ float:right;}
.tit2{ height:70px; overflow:hidden; font:24px "Microsoft YaHei UI"; line-height:70px; padding-left:18px; position:relative;}
.tit2 a{ display:block; color:#333333;}
.tit2:before{ content:""; position:absolute; top:24px; left:0; width:3px; height:23px; background:#e30024;}
.tit2 a:hover{ font-weight:bold; color:#e30024;}
.news1 dt{ overflow:hidden;border:1px solid #f1f1f1; box-sizing:border-box;}
.news1 dt img{ display:block; width:100%;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.news1 dd{ height:80px; padding:20px 0; border-bottom:1px solid #e5e5e5; margin-bottom:30px;}
.news1 dd span{ display:block; float:left; width:19%; border-right:1px solid #e5e5e5; font:3rem Arial, Helvetica, sans-serif; color:#222;}
.news1 dd span em{ display:block; font:1rem "Microsoft YaHei UI"; color:#999;}
.news1 dd h4{ width:73.9%; float:right;}
.news1 dd h4 a{ display:block; font:1.125rem "Microsoft YaHei UI"; color:#333333;}
.news1 dd p{ font-size:0.875rem; color:#999; line-height:1.375rem; height:2.75rem; overflow:hidden; margin-top:.8rem; font-weight:normal;}
.news1 dl:hover dt img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.news li{  font:1rem "Microsoft YaHei UI";height:2.25rem; line-height:2.25rem; overflow:hidden; padding-left:3%; position:relative;}
.news li a{ display:block; color:#999;}
.news li:before{ content:""; position:absolute; top:1rem; left:0; width:4px; height:4px; border-radius:4px; background:#e30024;}
.news li a:hover,.news1 dl:hover h4 a{ font-weight:bold; color:#e30423;}
.news h5 a{display:block; width:10.9rem; height:3.1875rem; font-size:1rem; padding-left:2.5%; box-sizing:border-box; background:url(../images/pro_btn.png) no-repeat; background-size:100% auto; line-height:3.1875rem; color:#fff; font-weight:normal; margin:40px auto 0;}

.about{ position:relative; margin-bottom:80px;}
.about .tit{ width:100%; position:absolute; top:9%;}
.about dt img{ display:block; width:100%;}
.about dd{ width:1200px; padding:40px 100px; background:#fff; margin:-80px auto 0; position:relative; z-index:5; box-shadow:0 0 1rem #ccc; font:16px "Microsoft YaHei UI"; text-align:center; line-height:30px; color:#666666;}
.about dd a{ color:#e30224;}

.pic{ min-width:1200px; max-width:1920px; width:72.92%; margin:0 auto 100px;}
.pict{ width:12.85%; float:left; overflow:hidden;}
.pict h3{ height:4.125rem; margin-bottom:1px;}
.pict h3 a{ display:block; font-size:1.125rem; color:#666666; line-height:4.125rem; font-weight:normal; background:#e6e6e6 url(../images/pic_arr1.png) no-repeat 85% center; padding-left:15%;}
.pict .cur{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e30024+0,ee850e+100 */
background: rgb(227,0,36); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(227,0,36,1) 0%, rgba(238,133,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(227,0,36,1) 0%,rgba(238,133,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(227,0,36,1) 0%,rgba(238,133,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e30024', endColorstr='#ee850e',GradientType=1 ); /* IE6-9 */}
.pict .cur a{ background: url(../images/pic_arr2.png) no-repeat 85% center; color:#fff;}
.pic1{ width:85%; float:right;}
.pic1 li{ width:23.5294%; float:left; margin-right:1.84%;}
.pic1 li:last-child{ margin-right:0;}
.pic1 li img{ display:block; width:100%; height:12.5rem;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pic1 li:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}

.link{ float:right; width:110px; height:33px; background:#fff; position:relative;margin:-48px 14.585% 0 0; z-index:8;}
.link h3{ font:0.875rem "Microsoft YaHei UI"; color:#909090; line-height:33px; padding-left:10%; position:relative; cursor:pointer;}
.link h3:before{ content:""; position:absolute; top:8px; left:78%; width:1px; height:17px; background:#c7c7c7;}
.link h3:after{ content:""; position:absolute; top:16px; right:8%; width:0; height:0; border-top:3px solid #c7c7c7; border-left:3px solid rgba(0,0,0,0);border-right:3px solid rgba(0,0,0,0);}
.link p{ display:none; background:#fff; position:absolute; bottom:33px; left:0; width:100%; padding:1rem 0;}
.link p a{ display:block; font:14px "Microsoft YaHei UI"; line-height:30px; color:#666; text-align:center;}
.link p a:hover{font-weight:bold; text-decoration:underline; color:#e82129;}
.link:hover p{ display:block;}

@keyframes living {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top:0px;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
}
@keyframes living1 {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 0;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top: 0;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 0;
    }
}
@-webkit-keyframes spin{
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

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

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*animation*/
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}