@charset "utf-8";

#banner{width:100%; height:100%; position:fixed; z-index:1; left:0; top:0; background: #000;}
#banner .swiper-container{height:100%;}
#banner .swiper-wrapper{height:100%;}
#banner .swiper-slide{width:100%; height:100%;}
#banner .swiper-slide>div.img{width:100%; height:100%; position:absolute; z-index:1; left:0; top:0; background-size:cover; background-position:center top; background-repeat:no-repeat; transition:transform 15s;}
#banner .swiper-slide>div.wrap{position:relative; z-index:3; top: 34%;}
#banner .swiper-slide>div.top2{top: 35%;}
#banner .swiper-slide>div.top3{top: 31%;}
#banner .swiper-slide .en{color:#fff; font-size:6rem; display:block; margin:0; transform:translateY(100px); opacity:0;transition:all .5s ease; font-weight: 600; margin-top: 12px;}
#banner .swiper-slide .cn{color:#fff; font-size:5.4rem; margin-top:12px; transform:translateY(100px); opacity:0;transition:all .5s ease;}
#banner .swiper-slide.normal>div.wrap .en{transform:translateY(0px); opacity:1; transition:all .8s;}
#banner .swiper-slide.normal>div.wrap .cn{transform:translateY(0px); opacity:1; transition:all .8s .2s;}
#banner .swiper-slide .s2-t1{color:#fff; font-size:4.6rem; display:block; margin:0; transform:translateY(100px); opacity:0;transition:all .5s ease; margin-top: 10px;}
#banner .swiper-slide .s2-t2{color:#fff; font-size:7.8rem; margin-top:15px; transform:translateY(100px); opacity:0;transition:all .5s ease; font-weight: 300;}
#banner .swiper-slide .s2-t3{color:#fff; font-size:2.2rem; margin-top:25px; transform:translateY(100px); opacity:0;transition:all .5s ease;}
#banner .swiper-slide .ico{color:#fff; font-size:2.2rem; margin-top:50px; transform:translateY(100px); opacity:0;transition:all .5s ease;}
#banner .swiper-slide dl{margin-top: 20px;}
#banner .swiper-slide dt{float: left; width: 36px; height: 36px;}
#banner .swiper-slide dd{float: left; line-height: 36px; margin-left: 10px;}
#banner .swiper-slide.normal>div.wrap .s2-t1{transform:translateY(0px); opacity:1; transition:all .8s;}
#banner .swiper-slide.normal>div.wrap .s2-t2{transform:translateY(0px); opacity:1; transition:all .8s .2s;}
#banner .swiper-slide.normal>div.wrap .s2-t3{transform:translateY(0px); opacity:1; transition:all .8s .4s;}
#banner .swiper-slide.normal>div.wrap .ico{transform:translateY(0px); opacity:1; transition:all .8s .6s;}

#banner .swiper-pagination{bottom: 55px;}
#banner .swiper-pagination-bullet{width: 11px; height: 11px; margin:0 9px; opacity:1; background:rgba(255,255,255,.4); transition:all .25s;}
#banner .swiper-pagination-bullet-active{opacity:1; background:#fff;}

#banner .ani-container{position: relative; z-index: 2; top: 35.566%;}
#banner .ani-container>p.up-near{margin-top: 12px !important;}
#banner .ani-container.center{text-align: center;}
#banner .ani-container>p.up-far{margin-top: 25px !important;}

@media (max-width:1199px){
  #banner{height: 0; padding-bottom: 100%;}
  #banner .swiper-container{width: 100%; position: absolute;}

  #banner .swiper-slide>div.wrap{top: 38%;}
  #banner .swiper-slide .en{font-size: 2.2rem;}
  #banner .swiper-slide .cn{font-size:2.4rem;}
  #banner .swiper-slide .s2-t1{font-size:2.6rem;}
  #banner .swiper-slide .s2-t2{font-size:2.8rem; margin-top:10px;}
  #banner .swiper-slide .s2-t3{color:#fff; font-size:1.8rem; margin-top:12px;}
  #banner .swiper-slide>div.top3{top: 25%;}
  #banner .swiper-slide .ico{font-size:1.5rem; margin-top:25px;}
  #banner .swiper-slide dl{margin-top: 9px;}
  #banner .swiper-slide dt{float: left; width: 24px; height: 24px;}
  #banner .swiper-slide dd{float: left; line-height: 24px; margin-left: 10px;}

  #banner .swiper-pagination{bottom: 20px;}
  #banner .swiper-pagination-bullet{width: 8px; height: 8px; margin:0 6px;}
}


#m1{position: relative; z-index: 2; background: #f8f8f8; padding: 85px 0 120px 0;}
#m1 .tit{font-size: 4.8rem; font-weight: bold; color: #000; text-align: center; position: relative;}
#m1 .tit:after{content: ''; display: block; position: absolute; width: 100px; height: 2px; left: 50%; bottom: -27px; margin-left: -50px; background: #000;}
#m1 .desc{color: #323232; font-size: 1.7rem; text-align: center; max-width: 620px; margin: 50px auto; line-height: 1.6;}

#m1 .box{padding-top: 30px;}
#m1 .swiper-container{padding-bottom: 50px;}
#m1 .swiper-slide{width: 360px; height: 360px; background: #fff;}
#m1 .swiper-pagination{bottom: 0; display: none;}
#m1 .swiper-pagination-bullet{width: 9px; height: 9px; margin:0 6px; opacity:1; background:#ccc; transition:all .25s;}
#m1 .swiper-pagination-bullet-active{opacity:1; background:#0076ce;}

#m1 .swiper-slide a{display: block; width: 100%; height: 100%; position: relative;}
#m1 .swiper-slide .img{width: 268px; height: 268px; margin: auto;}
#m1 .swiper-slide .img:after{content:''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: all .3s;}
#m1 .swiper-slide a:hover .img:after{background: rgba(0,0,0, .1);}
#m1 .swiper-slide .con{height: 92px; background: #0076ce; color: #fff; overflow: hidden; position: relative; transition: all .25s;}
#m1 .swiper-slide .con .l{width: 260px; margin: 21px auto auto 26px;}
#m1 .swiper-slide .con .series{font-size: 2.4rem; font-weight: 300;}
#m1 .swiper-slide .con .name{font-size: 1.5rem; font-weight: 300; margin-top: 7px;}
#m1 .swiper-slide .con i{width: 82px; height: 92px; background: url('../img/cls@arr.png') no-repeat center; position: absolute; right: 0; top: 0; transition: all .15s;}
#m1 .swiper-slide a:hover i{right: -7px;}
#m1 .swiper-slide a:hover .con{background: #0185e7;}

@media (max-width:1199px){
  #m1{padding: 50px 0 60px 0;}
  #m1 .tit{font-size: 3.2rem;}
  #m1 .tit:after{width: 60px; margin-left: -30px;}
  #m1 .desc{font-size: 1.5rem; line-height: 1.6;}

  #m1 .box{padding-top: 0;}
}


#m2{height: 750px; position: relative; z-index: 2; background: url('../img/m2@bg.jpg') no-repeat center/cover;}
#m2 .l{width: 50%; float: left; height: 500px; margin: 125px 0 0 0; background: url('../img/m2@img.jpg') no-repeat center/cover;}
#m2 .r{width: 550px; margin: 125px 0 0 45px; float: left; color: #fff;}
#m2 .r .tit-cn{font-size: 3rem; margin-top: 20px;}
#m2 .r .tit-en1{font-size: 6rem; font-family: Arial; font-weight: 600; text-transform: uppercase; margin-top: 12px;}
#m2 .r .tit-en2{font-size: 4.8rem; font-family: Arial; text-transform: uppercase; margin-top: 2px; position: relative;}
#m2 .r .tit-en2:after{position: absolute; width: 50px; height: 2px; background: #fff; content: ''; display: block; left: 0; bottom: -20px;}
#m2 .r .con{font-size: 1.4rem; margin-top: 45px;}
#m2 .r .con p{line-height: 2; margin-top: 30px;}

#m2 .more{display: block; width: 150px; height: 50px; background: #fff; font-size: 1.4rem; text-align: center; line-height: 50px; font-family: Arial; color: #0076ce; border-radius: 4px; margin-top: 30px; transition: all .25s;}
#m2 .more:hover{background: #0076ce; color: #fff;}

@media (max-width:1199px){
  #m2{height: auto; padding-bottom: 40px;}
  #m2 .l{width: 100%; float: none; height: 200px; margin: 0;}
  #m2 .r{width: 100%; margin: 0; float: none; padding: 25px 15px; box-sizing: border-box;}
  #m2 .r .tit-cn{font-size: 3.2rem;}
  #m2 .r .tit-en1{font-size: 3.2rem;}
  #m2 .r .tit-en2{font-size: 2.6rem; margin-top: 5px;}
  #m2 .r .tit-en2:after{width: 40px;}

  #m2 .more{width: 120px; height: 40px; line-height: 40px;}
}


#m3{position: relative; z-index: 2; background: #fff; padding-top: 120px;}
#m3 .tit{font-size: 4.8rem; font-weight: bold; color: #000; text-align: center; position: relative;}
#m3 .tit:after{content: ''; display: block; position: absolute; width: 100px; height: 2px; left: 50%; bottom: -27px; margin-left: -50px; background: #000;}
#m3 .desc{color: #323232; font-size: 1.7rem; text-align: center; max-width: 420px; margin: 50px auto; line-height: 1.6;}

#m3 .box{margin-top: 75px;}
#m3 .box>a{display: block; height: 0; width: 33.3333333333333%; float: left; padding-bottom: 18.23%; position: relative; overflow: hidden;}
#m3 .box>a:after{content: ''; display: block; width: 101%; height: 101%; left: 0; top: 0; position: absolute; z-index: 2; transition: all .3s;}
#m3 .box>a:hover:after{background: rgba(0,0,0, .7);}
#m3 .box>a .img{width: 101%; height: 100%; position: absolute; z-index: 1;}
#m3 .box>a .img>img{width: 100%; height: 100%; transform: scale(1.0001); transition: all .25s;}
#m3 .box>a:hover .img>img{transform: scale(1.06);}
#m3 .box>a .con{position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: table; z-index: 3;}
#m3 .box>a .con>p{display: table-cell; vertical-align: middle; text-align: center; color: #fff;}
#m3 .box>a .con>p .cn{font-size: 2.4rem; display: inline-block; opacity: 0; transform: translateY(30px); transition: all .3s;}
#m3 .box>a .con>p .en{font-size: 2.2rem; display: inline-block; margin-top: 10px; transform: translateY(30px); opacity: 0; transition: all .3s;}
#m3 .box>a:hover .con>p .cn{opacity: 1; transform: translateY(0); transition: all .3s;}
#m3 .box>a:hover .con>p .en{opacity: 1; transform: translateY(0); transition: all .3s .15s;}

@media (max-width:1199px){
  #m3{padding-top: 60px;}
  #m3 .tit{font-size: 3.2rem;}
  #m3 .tit:after{width: 60px; margin-left: -30px;}
  #m3 .desc{ font-size: 1.5rem;}

  #m3 .box{margin-top: 55px; display: flex; flex-wrap: wrap;}
  #m3 .box>a{width: 50%; float: none; padding-bottom: 30%;}
  #m3 .box>a .con>p .cn{font-size: 1.6rem;}
  #m3 .box>a .con>p .en{font-size: 1.4rem; margin-top: 8px;}
}

.space-4{position: relative; z-index: 2; height: 90px; background: #fff;}
#m4{position: relative; z-index: 3; background: #ededed; height: 620px;}
#m4 .tit{font-size: 4.8rem; font-weight: bold; color: #000; text-align: center; position: relative; padding-top: 85px;}
#m4 .tit:after{content: ''; display: block; position: absolute; width: 100px; height: 2px; left: 50%; bottom: -27px; margin-left: -50px; background: #000;}
#m4 .box{width: 930px; margin: 95px auto; display: flex; flex-direction: row; justify-content: space-between;}
#m4 .box:after{display: none;}
#m4 .box dl{text-align: center;}
#m4 .box dl:nth-child(2){position: relative; left: 45px;}
#m4 .box dl dt{height: 50px; line-height: 50px;}
#m4 .box dl dd .t{color: #323232; font-size: 1.8rem; font-family: Arial; margin-top: 15px;}
#m4 .box dl dd .con{color: #777; font-size: 2rem; margin-top: 20px; line-height: 1.5;}
#m4 .box dl dd .con>a{color: #777;}

@media (max-width:1199px){
  .space-4{height: 80px;}
  #m4{height: auto;}
  #m4 .tit{font-size: 3.2rem; padding-top: 55px;}
  #m4 .tit:after{width: 60px; margin-left: -30px;}
  #m4 .box{width: 100%; margin: 50px auto; display: flex; flex-direction: column; padding-bottom: 10px;}
  #m4 .box dl{margin-top: 20px;}
  #m4 .box dl:nth-child(2){left: 0;}
  #m4 .box dl dt{height: 40px; line-height: 40px;}
  #m4 .box dl dd .t{font-size: 1.6rem;}
  #m4 .box dl dd .con{font-size: 1.7rem; margin-top: 8px;}
}

#m4 .block{width: 930px; height: 340px; box-sizing: border-box; padding: 55px 0 45px 0; position: absolute; background: #000; left: 50%; bottom: -150px; margin-left: -465px;}
#m4 .block .row{padding: 0 65px;}
#m4 .block .row>.l, #m4 .block .row>.r{width: 48%; float: left;}
#m4 .block .row .l .r{margin-bottom: 20px;}
#m4 .block .row>.r{float: right;}
#m4 .block input, #m4 .block textarea{border: 1px solid #707070; background: none; padding: 12px; font-size: 1.4rem; width: 100%; box-sizing: border-box;}
#m4 .block input{height: 45px;}
#m4 .block textarea{height: 175px;}
#m4 .send-container{margin-top: 10px; text-align: right;}
#m4 .send-container>a{display: inline-block; width: 150px; height: 50px; line-height: 50px; background: #0076ce; color: #fff; text-align: center; font-size: 1.4rem; font-family: Arial; transition: all .3s;}
#m4 .send-container>a:hover{background: #0185e7;}


.space-5{height: 150px; background: #fff; position: relative; z-index: 2;}

@media (max-width:1199px){
  #m4 .block{width: 100%; height: auto; padding: 50px 15px; position: relative; left: 0; bottom: 0; margin-left: 0; box-sizing: border-box;}
  #m4 .block .row{padding: 0}
  #m4 .block .row>.l, #m4 .block .row>.r{width: 100%; float: none;}
  #m4 .block .row .l .r{margin-bottom: 20px;}
  #m4 .block .row>.r{float: none;}
  #m4 .send-container{text-align: left; margin-top: 20px;}
  #m4 .send-container>a{width: 130px; height: 45px; line-height: 45px;}

  .space-5{height: 0px;}
}