body{ font-size:14px; font-family:"微软雅黑";  }
p{ margin:0px; padding:0px;}
ul{ margin:0px; padding:0px;list-style:none;}
img{ border:0px;}
ul,li{ list-style-type:none;}
a { color:#000; text-decoration:none;}
a:hover{color:#F90;text-decoration:none;} 
.hide{display:none}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{*zoom:1}
em,i,s{font-style:normal;}
.clear { clear:both; }

@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;animation:fadeInDown 2s;}

@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;animation:fadeInUp 2s}


@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}75%{-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}90%{-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;animation:bounceInLeft 2s;}


@keyframes bounceInLeftxt{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}75%{-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}90%{-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeftxt{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;animation:bounceInLeftxt 2s;}


@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}75%{-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}90%{-webkit-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight; animation:bounceInRight 2s;}


@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn; animation:zoomIn 2s;}


@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY;animation:flipInY 2s;}


@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;animation:rotateIn 2s;} 

@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX;animation:flipInX 2s;}

.wow{vertical-align:top;zoom:1;}
.qw{ width:1200px; margin:auto; padding:0px;}

.banner1{ z-index: -1000; position: relative; }
.banner{  height: auto; }

.ie{background: url(../image/iebg.png)no-repeat center;
    font-size: 36px;
    line-height: 76px;
    color: #fff;
    font-weight: bold;
    background-size: 100% 100%;
    height: 80px;
    margin-top: 20px;
    text-align: center;
    width: 600px;}
.ie1{ float: left;  margin-left: 60px; letter-spacing: 10px;}
.ie2{ margin: 0px 20px; float: left; }
.ie2 img{ height: 60px; margin-top: 10px; }
.ie3{ float: left; letter-spacing: 10px;}

.bj{ background: url(../image/story1.jpg)no-repeat top; padding-top: 100px; height: 380px; background-size: 100%; margin-top: -4px; }

.story{ float: left; width: 100%; }
.story img{ height:40px; }
.story1{ border-bottom: 10px solid #0E4BFC; margin: 15px 0px;width: 100px; float: left; }
.story2{ float: left; width: 54%; color: #282828; font-size: 20px; line-height: 50px; }

.superiority{ text-align: center; }
.superiority img{ height: 40px; margin-bottom: 15px; }
.superleft{ float: left;width: 570px; }
.superleft img{ width: 100%; margin-top: 50px; }
.superright{ width: 630px; margin-top: 50px; float: right; color: #000; font-size: 26px; line-height: 50px; text-align: center; }

.hlw{color: #0E5CCB; font-size: 34px; font-weight: bold;}

@-webkit-keyframes zoomIn1{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn1{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn1{-webkit-animation-name:zoomIn1;animation-name:zoomIn1; animation:zoomIn1 2s;}

.wldw{font-size: 20px;font-weight: bold;color: #282828; float: left; margin-left: 13%;}
.tpdd{font-size: 30px;font-weight: bold;color: #0E5CCB;float: left; margin: 5px 30px 0px 30px;}
.zzq{font-size: 20px;font-weight:bold; color: #0E5CCB; float: left;}

.szsjl{font-size: 30px;font-weight: bold;color: #0E5CCB; margin: 5px 30px 0px 30px;}

.xyb{font-size: 26px;font-weight:bold; color: #282828;margin: 5px 30px 0px 30px; float: left;}

.dbt{font-size: 18px;font-weight: bold;color: #282828; float: left; margin-left: 14%; font-weight: bold;}
.ysd{font-size: 24px;font-weight:bold; color: #0E5CCB; float: left;margin-left:5%;}

.zxpp{font-size: 28px;font-weight: bold;color: #282828; text-align:center;}





.circle {width: 20px;height: 20px;border-radius: 50%;border: 2px solid #0E5CCB;justify-content: center;align-items: center;  margin-top: 20px; margin-right: 10px; float: left;}
.circle::before {content: "";display: block;width: 13px;height: 7px;border: 2px solid #0E5CCB;border-right: none;border-top: none;transform: rotate(-45deg) translate(-2px, 5px);}

.decade{ background: url(../image/fzlc.jpg)no-repeat bottom; height: 800px;}
.decade1{ color: #000; text-align: center; line-height: 40px; font-size: 20px; }

.brand{ text-align: center; margin-top: 70px; margin-bottom: 15px; }

.brand img{ height: 40px; }
.brand1{ color: #000; text-align: center; line-height: 40px; font-size: 20px; width: 56%; margin: auto; }


.pre_banner_3d{
    margin:auto;
    width:1200px;
    height:400px;
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.contrves{
    width:100%;
    height:auto;
    position:absolute;
    
}
.nav_banners{
    width:100%;
    height:auto;
    border-bottom: 1px solid #f2f2f2;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content:space-between;
}
.nav_banners>li{
    display:inline-block;
    padding:5px 16px;
    margin:12px 0;
    border-radius: 5px;
    font-size:14px;
    cursor: pointer;
}
.blue_nav{
    background:#63B504;
    color:#fff;
}
.banner_tree{
    width:100%;
    height:400px;
    position:absolute;
    bottom:0;
    overflow: hidden;
}
.show_phone_s{
    width:414px;
    height:736px;
    position:absolute;
    top:0;
    left:0;
    bottom: 0;
    right:0;
    margin:auto;
    z-index: 10
}
.color_font{
    background:#0B58CC;
    color:#fff;
    width: 45px;
    height: 100px;
    font-size:24px;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    font-weight: 700;
    position:absolute;
    top:0;bottom:0;
    margin:auto;
    z-index: 50;
    cursor: pointer;
}
.left_btn{
    left:0;
}
.right_btn{
    right:0;
}
.img_phone{
    width:100%;
    height:100%;
}
.show_s_ui{
    width:100%;
    height:100%;
    margin-left: -3.3%;
    position:relative;
}
.show_s_ui>li{
    width:200px;
    height:133px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    z-index: 30;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0;
    font-size:30px;
}
.show_s_ui>li>div{
    position: absolute;
    top:-10%;
    left: -5%;
    width:109%;
    height:120%!important;
    background:#0B58CC;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    opacity: 0.8;
    display:none;
    text-align: center; color: #fff; 
    font-size: 40px;
}

.show_s_ui>li>img{
    width:100%;
    height:100%;
    /*border: 1px solid #000;*/
}
#middel_shows{
    width:300px;
    height:200px;
    left:35.5%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity:1;
}
#left_shows{
    left:8%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    opacity: 0.6;
}
#right_shows{
    left:73%;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
#small_left,#small_right{
    width:154px;
    height:249px;
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
#small_left{
    left:-15%;
}
#small_right{
    left:102.5%;
}
@media screen and (max-width:1200px){
    .pre_banner_3d {width:1024px;height:763px;}
    #middel_shows {left: 35.5%;}
    .show_s_ui>li { width: 175px;height: 282px;}
    #small_left, #small_right {width: 131px;height: 194px;}
}
@media screen and (max-width:1024px){
    .pre_banner_3d {width: 875px;height: 765px;}
    .show_phone_s {width: 375px;height: 667px;}
    #middel_shows {left: 34.8%;}
    #middel_shows {width: 267px;height: 457px;}
}
@media screen and (max-width:879px){
    .pre_banner_3d {width: 746px;height: 735px;}
    #middel_shows {left: 31.8%;}
    #middel_shows {width: 269px;height: 457px;}
    .show_s_ui>li {width: 145px;height: 232px;}
}
@media screen and (max-width:768px){
    .pre_banner_3d {width: 675px;height: 586px;}
    .show_phone_s {width: 320px;height: 568px;}
    #middel_shows {left: 33.1%;}
    #middel_shows {width: 227px;height: 389px;}
    .show_s_ui>li {width: 138px;height: 215px;}
    #right_shows {left: 72%;}
    .banner_tree {height: 539px;}
}
@media screen and (max-width:685px){
    .color_font{display:none}
    #small_left {left: -55%;}
    .pre_banner_3d {width: 520px;}
    #small_right {left: 109.5%;}
    .show_phone_s {width: 300px;height: 496px;}
    #middel_shows {left: 29.7%;}
    #middel_shows {width: 213px;height: 340px;}
    #left_shows {left: 0%;}.show_s_ui>li {width: 106px;height: 190px;}
    #right_shows {left: 79.5%;}
}
@media screen and (max-width:521px){
    .pre_banner_3d {width: 359px;}
    #left_shows {left: -41%;}
    #right_shows {left: 107.5%;}
    #middel_shows {left: 20.4%;}
    #middel_shows {width: 214px;height: 340px;}
    .show_phone_s {width: 349px;height: 568px;}
    #middel_shows {left: 15.5%;}
    #middel_shows {width: 246px;height: 390px;}
}
@media screen and (max-width:359px){
    .pre_banner_3d {width: 320px;}
    .show_phone_s {width: 320px;height: 520px;}
    #middel_shows {left: 14.5%;}
    #middel_shows {width: 228px;height: 356px;}
}


.activity{ text-align: center; margin-top: 30px; margin-bottom: 15px; }
.activity img{ height: 40px; }



.grids {
  max-width: 136rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
}

/*.card-one {
  grid-column: 1/4;
}

.card-two {
  grid-column: 1/4;
}

.card-three {
  grid-column: 1/4;
}

.card-four {
  grid-column: 1/4;
}

.card-five {
  grid-column: 1/4;
}

.card-six {
  grid-column: 1/4;
}

.card-seven {
  grid-column: 1/4;
}*/

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 25rem;
  width: 100%;
  transition: all ease-in-out 400ms;
  cursor: pointer;
}

.card:hover {
  /*transform: scale(1.05);*/
}

.card:active {
  transform: translateY(-1px);
}

.card__side {
  transition: all 0.8s ease;
  color: white;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  height: 25rem;
  width: 100%;
  backface-visibility: hidden;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.8);
}

.card__side--front {
  background-color: #2196f3;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card__side--back {
  background-color: #303f9f;
  transform: rotateY(180deg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.showGreen {
  transform: rotateY(-180deg);
}

.showRed {
  transform: rotateY(0);
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.text-box-top {
  font-size: 2.2rem;
  text-shadow: 2px 2px 10px #0000006c;
  font-weight: 400;
}

.text-box-middle {
  font-size: 5.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 10px #0000006c;
}

.text-box-lower {
  font-size: 2rem;
  text-shadow: 2px 2px 10px #0000006c;
  font-weight: 400;
}

.heading {
  transition: all 0.6s linear;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

.show {
  visibility: visible;
  opacity: 1;
}

#front-1 {
    width: 195px; height: 130px;
  background: url("../image/1.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-1 {
    width: 195px; height: 130px;
  background: url("../image/1-1.jpg") no-repeat;
  background-size: 100% 100%;
}


#front-2 {
 width: 250px; height: 166px;
  background: url("../image/2.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-2 {
    width: 250px; height: 166px;
  background:url("../image/2-1.jpg") no-repeat;
  background-size: 100% 100%;

 }

#front-3 {
    width: 195px; height: 130px;
  background:url("../image/3.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-3 {
    width: 195px; height: 130px;
  background:url("../image/3-1.jpg") no-repeat;
  background-size: 100% 100%;
}

#front-4 {
 width: 250px; height: 166px;
  background: url("../image/4.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-4 {
    width: 250px; height: 166px;
  background:url("../image/4-1.jpg") no-repeat;
  background-size: 100% 100%;
 }

 #front-5 {
 width: 250px; height: 166px;
  background: url("../image/5.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-5 {
    width: 250px; height: 166px;
  background:url("../image/5-1.jpg") no-repeat;
  background-size: 100% 100%;
 }

#front-6 {
 width: 250px; height: 166px;
  background: url("../image/6.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-6 {
    width: 250px; height: 166px;
  background:url("../image/6-1.jpg") no-repeat;
  background-size: 100% 100%;
 }


 #front-7 {
    width: 195px; height: 130px;
  background: url("../image/7.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-7 {
    width: 195px; height: 130px;
  background: url("../image/7-1.jpg") no-repeat;
  background-size: 100% 100%;
}


#front-8 {
 width: 250px; height: 166px;
  background: url("../image/8.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-8 {
    width: 250px; height: 166px;
  background:url("../image/8-1.jpg") no-repeat;
  background-size: 100% 100%;
 }

#front-9 {
    width: 195px; height: 130px;
  background:url("../image/9.jpg") no-repeat;
  background-size: 100% 100%;
}
#back-9 {
    width: 195px; height: 130px;
  background:url("../image/9-1.jpg") no-repeat;
  background-size: 100% 100%;
}






@media screen and (min-width: 1024px) {
  html {
    font-size: 62.5%;
  }

  .grids {
    width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 0rem;
    grid-row-gap: 1rem;
    margin-top: 30px;
    margin-left: 70px;
  }



  .card-one {
    width: 195px; height: 130px;
    float: left;
    margin-left: 184px;
    margin-top: 37px;
  }

  .card-two {
    width: 250px; height: 166px;
    float: left;
    padding-left: 32px;
  }

  .card-three {
    width: 195px; height: 130px;
    float: left;
    margin-top: 37px;
  }

  .card-four {
    width: 250px; height: 166px;
    float: left;
    padding-left: 128px;
  }

  .card-five {
    width: 250px; height: 166px;
    float: left;
    padding-left: 32px;
  }

  .card-six {
    width: 250px; height: 166px;
    float: left;

  }


  .card-seven {
    width: 195px; height: 130px;
    float: left;
    margin-left: 184px;

  }

  .card-eight {
    width: 250px; height: 166px;
    float: left;
    padding-left: 32px;
  }

  .card-nine {
    width: 195px; height: 130px;
    float: left;

  }

  
}



#lanren {width: 1200px;height: 200px;margin: 0 auto;overflow: hidden;position: relative; margin-top: 30px;}
#lanren2{position: absolute;left: 0;top: 0;}
#lanren2 li {width: 326px;height:185px; text-align:center; line-height:40px;margin:0 10px;display: block;float: left;list-style: none;}
.lan{ margin-top: -40px; position: relative; text-align: center; color: #fff; font-size: 20px;background: url(../image/hz.png); width: 100%; float: left; }
#lanren img{width: 326px;height:185px; }
#lanren1 {width: 1200px;height: 200px;margin: 0 auto;overflow: hidden;position: relative;}
#lanren12{position: absolute;left: 0;top: 0;}
#lanren12 li {width: 326px;height:185px; text-align:center; line-height:40px;margin:0 10px;display: block;float: left;list-style: none;}
#lanren1 img{width: 326px;height:185px; }

.foot{ background: url(../image/foot.jpg) no-repeat center; height: 300px; margin-top: 40px; background-size: 100%; }


.fztime{ color: #fff; font-size: 18px;font-weight: bold; }
.fztitle{ color: #fff; line-height: 30px; font-size: 15px; }

.fz1{ width: 10%; float: left; text-align: center; margin-left:1%; margin-top: 23%; }
@-webkit-keyframes fadeInUp1{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp1{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp1{-webkit-animation-name:fadeInUp1;animation-name:fadeInUp1;animation:fadeInUp1 1s}
.fz2{ width: 10%; float: left;text-align: center;  margin-left: 0.6%; margin-top: 18%; }
@-webkit-keyframes fadeInUp2{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp2{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp2{-webkit-animation-name:fadeInUp2;animation-name:fadeInUp2;animation:fadeInUp2 2s}

.fz3{ width: 11%; float: left; text-align: center;  margin-left: 1.7%; margin-top: 13%;}
@-webkit-keyframes fadeInUp3{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp3{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp3{-webkit-animation-name:fadeInUp3;animation-name:fadeInUp3;animation:fadeInUp3 3s}

.fz4{ width: 10%; float: left;text-align: center;  margin-left:2.6%; margin-top: 14%; }
@-webkit-keyframes fadeInUp4{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp4{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp4{-webkit-animation-name:fadeInUp4;animation-name:fadeInUp4;animation:fadeInUp4 4s}

.fz5{ width: 10%; float: left;text-align: center;  margin-left:4%; margin-top: 9%; }
@-webkit-keyframes fadeInUp5{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp5{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp5{-webkit-animation-name:fadeInUp5;animation-name:fadeInUp5;animation:fadeInUp5 5s}

.fz6{ width: 11%; float: left;text-align: center;  margin-left:3.2%; margin-top: 10%; }
@-webkit-keyframes fadeInUp6{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp6{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp6{-webkit-animation-name:fadeInUp6;animation-name:fadeInUp6;animation:fadeInUp6 6s}

.fz7{ width: 10%; float: left;text-align: center;  margin-left:2.9%; margin-top: 10%; }
@-webkit-keyframes fadeInUp7{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp7{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp7{-webkit-animation-name:fadeInUp7;animation-name:fadeInUp7;animation:fadeInUp7 7s}

.fz8{ width: 10%; float: left;text-align: center;  margin-left:1.5%; margin-top: 7%; }
@-webkit-keyframes fadeInUp8{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp8{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp8{-webkit-animation-name:fadeInUp8;animation-name:fadeInUp8;animation:fadeInUp8 8s}


.animated1 { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { border-radius: 50%; position: fixed; bottom: 0; right: 220px; opacity: 0; z-index: 700; }

.livechat-girl.animated1 { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }


.livechat-girl .animated-circles.animated1 .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated1 .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated1 .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 }
.livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
@media only screen and (max-width:1599px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important }
}
@media only screen and (max-width:1309px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important }
}
@media only screen and (max-width:1124px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important }
}
.rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 }
.rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 }
.rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 }
.rd-notice-type-success { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #26c7fc }
.rd-notice-type-success:after { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }

.ljzc{  background: linear-gradient(to top, #F79808 , #FD6C01); padding: 5px 20px; margin-top: 5px; margin-left: -10px; float: left; border-radius: 5px; color: #fff; font-size: 20px; font-weight: bold;}
.ljzc:hover{  background: linear-gradient(to top, #F79808 , #FD6C01); padding: 5px 20px; margin-top: 5px; margin-left: -10px; float: left; border-radius: 5px; color: #fff; font-size: 20px; font-weight: bold;}


    .video-box{
        position: relative;
        background: url(../image/banner.jpg) no-repeat;
        background-size: 100%;
    }
    .video-box video{
        display: inline-block;
      vertical-align: baseline;
    }
    .video-box .video-img{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 999;
        cursor:pointer
    }



    .shadow-effect {
            text-align: center;
             width: 220px; height: 160px;


        }
        #customers-testimonials .shadow-effect p {
            background:#333;
            font-family: inherit;
            font-size: 14px;
            line-height: 40px;
            margin-top:-40px;
            z-index:100;
            position:absolute;
            width:380px;
            color:#FFF;
            font-weight: 300;
        }
        .testimonial-name {
            width:100%; 
            margin-left:-9px;
            margin-top:-77%;
            height: 100%;
            display: table;
            line-height:40px;
            font-size:16px;
            text-align: center;
            z-index: 100; position: relative; background: #0B58CC;
            opacity: 0.8;
            color: #fff;
    
        }

        .testimonial-name p{ font-size: 22px;line-height: 40px; }
        #customers-testimonials .item1 {
            text-align: center;
            padding: 10px;
             width: 238px; height: 145px;
            opacity: .8;
            /*transform: scale3d(0.8, 0.8, 1);*/
            transition: all 0.3s ease-in-out;
        }
        .item1 .testimonial-name{ display:none }
        .center .testimonial-name{ display:block!important }
        #customers-testimonials .owl-item.active.center .item1 {
            opacity: 1;
            transform: scale3d(1.0, 1.0, 1);
        }
        .owl-carousel .owl-item img {
      
            width: 220px; height: 146px;
             border: 1px solid #ccc;
           
   
        }
        #customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
#customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span {
            background: #3190E7;
            transform: translate3d(0px, -50%, 0px) scale(0.7);
        }
#customers-testimonials.owl-carousel .owl-dots{
    display: inline-block;
    width: 100%;
    text-align: center;
    display:none
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot{
    display: inline-block;
}
        #customers-testimonials.owl-carousel .owl-dots .owl-dot span {
    background: #3190E7;
    display: inline-block;
    height: 20px;
    margin: 0 2px 5px;
    transform: translate3d(0px, -50%, 0px) scale(0.3);
    transform-origin: 50% 50% 0;
    transition: all 250ms ease-out 0s;
    width: 20px;
    border-radius: 10px;
        }

.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative;}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none; text-align: center;}
.owl-carousel .owl-item img{display:block; webkit-transform-style:preserve-3d}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:block;}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.owl-prev{background:url(../image/prev.png) no-repeat; width: 50px; height: 50px; float: left; margin-top: -100px; margin-left: -60px;}
.owl-next{background:url(../image/next.png) no-repeat; width: 50px; height: 50px; float: right;margin-top: -100px; margin-right: -60px;}
.owl-carousel.owl-loaded{display:block}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{display:none}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.no-js .owl-carousel{display:block}
.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:-webkit-transform .1s ease;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-webkit-transform:scale(1.3,1.3);-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}