@charset "utf-8";

#banner{width:100%; height:100%; position:fixed; z-index:1; left:0; top:0;}
#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%; transform:scale(1.1); position:absolute; z-index:2; left:0; top:0; background-size:cover; background-position:center top; background-repeat:no-repeat; transition:transform 15s;}
#banner .swiper-slide.normal>div.img{transform:scale(1);}
#banner .swiper-slide>div.con{position:absolute; z-index:3; left:155px; top:38%;}
#banner .swiper-slide h1{color:#fff; font-size:7rem; margin:0; transform:translateY(100px); opacity:0;transition:all .5s ease; font-family: Cabin;}
#banner .swiper-slide p{color:#fff; font-size:2rem; font-weight:300; margin-top:15px; transform:translateY(100px); opacity:0;transition:all .5s ease; font-family: Quicksand;}
#banner .swiper-slide.normal>div.con h1{transform:translateY(0px); opacity:1; transition:all .8s;}
#banner .swiper-slide.normal>div.con p{transform:translateY(0px); opacity:1; transition:all .8s .2s;}

#banner .swiper-pagination{bottom:30px;}
#banner .swiper-pagination-bullet{width:8px; height:8px; margin:0 7px; opacity:1; background:none; transition:all .25s; border:2px solid #1885f5;}
#banner .swiper-pagination-bullet-active{width:32px; opacity:1; border-radius:100px; background:#1885f5;}

@media (max-width:1680px){
  #banner .swiper-slide>div.con{left:125px;}
}
@media (max-width:1440px){
  #banner .swiper-slide>div.con{left:100px;}
  #banner .swiper-slide h1{font-size:6.6rem;}
}
@media (max-width:1366px){
  #banner .swiper-slide>div.con{top:39%;}
  #banner .swiper-slide>div.con{left:80px;}
  #banner .swiper-slide h1{font-size:6.2rem;}
  #banner .swiper-slide p{font-size:1.8rem;}
}
@media (max-width:1280px){
  #banner .swiper-slide>div.con{top:40%;}
  #banner .swiper-slide h1{font-size:5.6rem;}
  #banner .swiper-slide p{font-size:1.6rem;}
}
@media (max-width:1080px){
  #banner{height:380px;}
  #banner .swiper-slide>div.img{transform:scale(1.2); transition:transform 13s;}
  #banner .swiper-slide>div.con{left:0; width:100%; top:42%; text-align:center;}
  #banner .swiper-slide h1{font-size:2.6rem; line-height: 1;}
  #banner .swiper-slide p{font-size:1.4rem; padding:0 20px; margin-top:10px; line-height:1.3;}
  #banner .swiper-pagination{bottom:20px;}
  #banner .swiper-pagination-bullet{width:6px; height:6px; margin:0 5px; border:1px solid #1885f5;}
  #banner .swiper-pagination-bullet-active{width:20px;}
}


#space{height:100%;}

#m1{position:relative; z-index:3; background:url('../img/m1.png') no-repeat center bottom; background-color:#fff; padding:85px 155px 90px 155px;}
#m1 .left{width:40%; float:left;}
#m1 .tit{color:#464646; font-size:4.6rem; letter-spacing:normal; font-weight:bold; position:relative; font-family: Cabin;}
#m1 .tit:before{content:''; display:block; height:4px; width:48px; background:#1885f5; position:absolute; left:0; bottom:-30px;}
#m1 .con{font-size:1.6rem; margin-top:70px; font-family: Quicksand;}
#m1 .con p{margin-bottom:16px; line-height:1.66; font-weight:300;}
#m1 .more{display:block; width:150px; height:45px; line-height:44px; background:#1885f5; color:#fff; font-size:1.5rem; text-align:center; border-radius:0 0 10px 0; margin-top:50px;}
#m1 .more i{margin-left:.6rem; transition:all .2s;}
#m1 .more:hover i{margin-left:1.1rem;}

#m1 .right{width:50%; float:right; padding-right:5%; box-sizing:border-box; position:relative; text-align:right;}
#m1 .right .logo{position:absolute; right:20px; top:120px; animation:logo 1.4s ease-out infinite alternate;}
#m1 .right .shadow{position:absolute; right:0; top:280px; animation:shadow 1.4s ease-out infinite alternate;}
@keyframes logo{
  0%   {transform:translateY(0);}
  100% {transform:translateY(-25px);}
}
@keyframes shadow{
  0%   {transform:translateY(0);}
  100% {transform:translateY(-2px) scale(.8); opacity:.7;}
}

@media (max-width:1680px){
  #m1{padding:85px 155px 90px 125px;}
}
@media (max-width:1440px){
  #m1{padding:80px 125px 85px 100px;}
  #m1 .left{width:50%;}
  #m1 .tit{font-size:4.2rem;}
  #m1 .con{font-size:1.6rem;}

  #m1 .right .logo{width:300px;}
  #m1 .right .shadow{width:310px; right:5px;}
}
@media (max-width:1366px){
  #m1{padding:70px 100px 75px 80px;}
  #m1 .con{font-size:1.5rem;}

  #m1 .right .logo{width:280px;}
  #m1 .right .shadow{width:300px; right:5px;}
}
@media (max-width:1080px){
  #space{height:380px;}

  #m1{position:relative; z-index:3; padding:40px 20px;}
  #m1 .left{width:100%; float:none;}
  #m1 .tit{font-size:3.2rem;}
  #m1 .tit:before{height:3px; width:33px; bottom:-20px;}
  #m1 .con{font-size:1.6rem; margin-top:55px;}
  #m1 .more{width:130px; height:43px; line-height:41px; margin-top:40px;}

  #m1 .right{width:100%; float:none; height:250px; padding-right:0; text-align:center;}
  #m1 .right .logo{right:0; left:0; width:100%; text-align:center; top:100px;}
  #m1 .right .logo>img{height:60px;}
  #m1 .right .shadow{position:absolute; right:0; width:100%; text-align:center; top:180px;}
  #m1 .right .shadow>img{height:25px;}
}



#m2, #m3{height:650px; position:relative; z-index:3; background:#fff;}
#m2 .left{width:50%; height:100%; float:left; color:#fff; overflow:hidden; position:relative;}
#m2 .swiper-container, #m3 .swiper-container{width:100%; height:100%; transition:all .5s;}
#m2 .swiper-slide:after, #m3 .swiper-slide:after{content:''; display:block; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.35); transition:all .3s; z-index:1;}
#m2 .swiper-slide .img, #m3 .swiper-slide .img{width:100%; height:100%; background-size:cover; background-position:center; transition:all .5s;}
#m2 .left:hover .swiper-container, #m3 .right:hover .swiper-container{transform:scale(1.08);}
#m2 .left:hover .swiper-slide:after, #m3 .right:hover .swiper-slide:after{opacity:0;}
#m2 .left:hover:after, #m3 .right:hover:after{background:rgba(0,0,0,.1);}
#m2 .swiper-pagination, #m3 .swiper-pagination{width:100%; bottom:35px; z-index:2; text-align:center;}
#m2 .swiper-pagination-bullet, #m3 .swiper-pagination-bullet{width:8px; height:8px; margin:0 7px; opacity:.6; background:#fff; transition:all .25s;}
#m2 .swiper-pagination-bullet-active, #m3 .swiper-pagination-bullet-active{width:22px; opacity:1; border-radius:100px; background:#1885f5;}

#m2 .right{width:50%; height:100%; float:right; padding:80px 155px 80px 155px; box-sizing:border-box; background:#f4f5f6;}
#m3 .left>.tit, #m2 .right>.tit{font-size:4.6rem; font-weight:bold; position:relative; font-family: Cabin; text-transform: uppercase; color: #464646;}
#m2 .right>.desc, #m3 .left>.desc{font-size:1.56rem; margin-top:20px; line-height:1.6; font-family: Quicksand;}
#m2 .item, #m3 .item{margin-top:50px;}
#m2 .item>a, #m3 .item>a{display:block; background:#fff; width:290px; height:70px; margin:10px 20px 10px 0; font-size:1.4rem; color:#464646; float:left; position:relative; transition:all .25s; overflow:hidden;}
#m2 .item>a:before, #m3 .item>a:before{content:''; display:block; position:absolute; width:200px; height:200px; background:rgba(255,255,255,.0); transform:rotate(45deg); left:-80px; top:-100px; transition:all .45s ease;}
#m2 .item>a>p, #m3 .item>a>p{display:inline-block; width:70px; height:70px; text-align:center; line-height:70px; vertical-align:middle;}
#m2 .item>a>p img, #m3 .item>a>p img{width:60px; height:60px; vertical-align:middle;}
#m2 .item>a>span, #m3 .item>a>span{display:inline-block; vertical-align:middle; width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#m2 .item>a:after, #m3 .item>a:after{display:inline-block; content:''; vertical-align:middle; height:100%;}
#m2 .item>a:hover, #m3 .item>a:hover{background:#1885f5; color:#fff;}
#m2 .item>a:hover:before, #m3 .item>a:hover:before{left:-30px; background:rgba(255,255,255,.16);}


#m3 .left{width:50%; height:100%; float:left; background:#f4f5f6; padding:80px 155px 80px 155px; box-sizing:border-box;}
#m3 .right{width:50%; height:100%; float:right; overflow:hidden; position:relative;}


#m2 .tit .more, #m3 .tit .more{display:block; background:#1885f5; width:100px; height:37px; line-height:35px; position:absolute; right:0; bottom:5px; color:#fff; font-size:1.3rem; font-weight:normal; text-align:center; border-radius:0 0 10px 0; text-transform: capitalize; font-family: 'Open Sans';}
#m2 .tit .more i, #m3 .tit .more i{font-size:1rem; vertical-align:top; margin-left:.1rem; transition:all .2s;}
#m2 .tit .more:hover i, #m3 .tit .more:hover i{margin-left:.5rem;}

@media (max-width:1680px){
  #m2 .right, #m3 .left{padding:80px 125px 80px 125px;}
  #m2 .item>a, #m3 .item>a{width:280px; height:66px;}
  #m2 .item>a:nth-child(2n+0), #m3 .item>a:nth-child(2n+0){margin-right:0;}
  #m2 .item>a>p, #m3 .item>a>p{width:66px; height:66px; line-height:66px;}
  #m2 .item>a:hover:before, #m3 .item>a:hover:before{left:-40px;}
}
@media (max-width:1440px){
  #m2, #m3{height:600px;}
  #m2 .right, #m3 .left{padding:70px 100px;}
  #m3 .left>.tit, #m2 .right>.tit{font-size:4.2rem;}
  #m2 .right>.desc, #m3 .left>.desc{font-size:1.5rem; margin-top:20px;}

  #m2 .item>a, #m3 .item>a{width:245px; height:65px; font-size:1.3rem;}
  #m2 .item>a:nth-child(2n+0), #m3 .item>a:nth-child(2n+0){margin-right:0;}
  #m2 .item>a>p, #m3 .item>a>p{width:65px; height:65px; line-height:65px;}
  #m2 .item>a>p img, #m3 .item>a>p img{width:50px; height:50px; margin-top:-2px;}
  #m2 .item>a>span, #m3 .item>a>span{width:165px;}
  #m2 .item>a:hover:before, #m3 .item>a:hover:before{left:-56px;}
}
@media (max-width:1366px){
  #m2, #m3{height:560px;}
  #m2 .right, #m3 .left{padding:60px 80px;}
  #m3 .left>.tit, #m2 .right>.tit{font-size:4rem;}
  #m2 .right>.desc, #m3 .left>.desc{font-size:1.4rem;}
}
@media (max-width:1280px){
  #m2, #m3{height:535px;}
  #m2 .right, #m3 .left{padding:60px 80px;}
  #m3 .left>.tit, #m2 .right>.tit{font-size:3.6rem;}
  #m2 .right>.desc, #m3 .left>.desc{font-size:1.4rem;}

  #m2 .tit .more, #m3 .tit .more{width:96px; height:34px; line-height:32px; font-size:1.2rem;}
  #m2 .tit .more i, #m3 .tit .more i{margin-left:.3rem;}

  #m2 .item>a, #m3 .item>a{width:225px; height:60px; font-size:1.3rem;}
  #m2 .item>a>p, #m3 .item>a>p{width:55px; height:50px; line-height:60px; padding-bottom:5px;}
  #m2 .item>a>p img, #m3 .item>a>p img{width:45px; height:45px; margin-top:-2px;}
  #m2 .item>a>span, #m3 .item>a>span{width:165px;}
  #m2 .item>a:hover:before, #m3 .item>a:hover:before{left:-66px;}
}
@media (max-width:1080px){
  #m2, #m3{height:auto;}
  #m2 .left{width:100%; height:320px; float:none;}
  #m2 .swiper-pagination, #m3 .swiper-pagination{bottom:20px;}
  #m2 .right{width:100%; height:auto; float:none; padding:40px 20px 60px 20px;}
  #m3 .left>.tit, #m2 .right>.tit{font-size:3.2rem;}
  #m2 .right>.desc, #m3 .left>.desc{font-size:1.5rem; margin-top:16px;}
  #m2 .item, #m3 .item{margin-top:30px; display:flex; flex-wrap:wrap;}
  #m2 .item>a, #m3 .item>a{width:48%; height:60px; margin:4% 4% 0 0; font-size:1.3rem; float:none; display:flex;}
  #m2 .item>a>p, #m3 .item>a>p{display:block; width:50px; height:50px; line-height:50px; flex:none; margin:5px 0 5px 5px;}
  #m2 .item>a>span, #m3 .item>a>span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; -webkit-box-pack:center; width:unset; flex:1; white-space:unset; height:35px; margin-top:11px; padding-right:5px; line-height:1.3;}
  #m2 .item>a:hover:before, #m3 .item>a:hover:before{left:-106px;}

  #m3 .right{width:100%; height:320px; float:none;}
  #m3 .left{width:100%; height:auto; float:none; padding:40px 20px 60px 20px;}

  #m2 .tit .more, #m3 .tit .more{width:86px; height:32px; line-height:30px; font-size:1.1rem;}
}



#m4{background-color:#fff; position:relative; z-index:3; padding:80px 55px;}
#m4 .tit{color:#464646; font-size:4.6rem; letter-spacing:normal; font-weight:bold; position:relative; padding-left:100px; font-family: Cabin; text-transform: uppercase;}
#m4 .tit:before{content:''; display:block; height:4px; width:48px; background:#1885f5; position:absolute; left:100px; bottom:-30px;}

#m4 .wrap{position:relative; margin-top:60px; padding:0 50px; text-align: center;}


@media (max-width:1680px){
  #m4{padding:80px 25px;}
}
@media (max-width:1440px){
  #m4{padding:70px 0;}
}
@media (max-width:1366px){
  #m4 .tit{padding-left:80px;}
  #m4 .tit:before{left:80px;}
  #m4 .wrap{padding:0 35px;}
}
@media (max-width:1280px){
  #m4{height:760px;}
  #m4 .wrap{margin-top:45px;}
}
@media (max-width:1080px){
  #m4{height:auto; padding:40px 0;}
  #m4 .tit{font-size:3.2rem; padding-left:20px;}
  #m4 .tit:before{height:3px; width:33px; left:20px; bottom:-20px;}
}



#m5{height:100%; min-height: 700px; position:relative; z-index:3; background:#fff url('../img/m5.jpg') no-repeat center/cover;}
#m5 .tit{color:#fff; font-size:4.6rem; letter-spacing:normal; font-weight:bold; text-align: center; font-family: Cabin; text-transform: uppercase; position: relative; z-index: 5; padding-top: 86px;}
#m5 .tit:before{content:''; display:block; height:4px; width:48px; background:#1885f5; position:absolute; left:50%; bottom:-30px; margin-left: -24px;}
#m5 .desc{position: relative; z-index: 5; color: #fff; font-family: Quicksand; text-align: center; margin: 62px auto 0 auto; font-size: 1.5rem; max-width: 860px; line-height: 2;}
#m5 .black{position: absolute; z-index: 2; width: 100%; height: 100%; background: rgba(0,0,0,.5); left: 0; top: 0; transition: all .3s;}
#m5 .black.active{background: rgba(0,0,0,.3);}
#m5 .content{position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 0;}
#m5 .content>a{display: block; width: 33.333333%; height: 100%; float: left; transition: all .3s; color: #fff; position: relative;}
#m5 .content>a:hover{background: rgba(0,0,0,.25);}
#m5 .content>a .ico{width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; position: absolute; left: 50%; margin-left: -50px; bottom: 48%; text-align: center; line-height: 100px; transition: all .4s;}
#m5 .content>a .ico>i{font-size: 7.8rem;}
#m5 .content>a:first-child .ico>i{font-size: 9rem;}
#m5 .content>a .title{position: absolute; left: 50%; width: 70%; margin-left: -35%; bottom: 43%; text-align: center; color: #fff; font-family: Quicksand; font-size: 2rem; transition: all .4s;}
#m5 .content>a:hover .ico{bottom: 14%; color: #1885f5; width: 60px; height: 60px; line-height: 60px; margin-left: -30px;}
#m5 .content>a:hover .ico>i{font-size: 4.3rem;}
#m5 .content>a:hover .title{bottom: 10%; font-size: 1.5rem;}
#m5 .video{position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0;}
#m5 .video>div{display: none;}


@media (max-width:1680px){

}
@media (max-width:1440px){
  #m5 .content>a .ico{bottom: 45%;}
  #m5 .content>a .title{bottom: 40%; font-size: 1.6rem;}
}
@media (max-width:1366px){

}
@media (max-width:1280px){

}
@media (max-width:1080px){
  #m5 .tit{font-size:3.2rem;}
  #m5 .desc{margin: 50px auto 0 auto; font-size: 1.4rem; line-height: 1.7; padding: 0 20px;}
  #m5 .video{display: none;}
  #m5 .content{padding-top: 280px;}
  #m5 .content>a{display: block; height: 100px; float: none; width: 100%;}
  #m5 .content>a .ico{width: 60px !important; height: 60px !important; bottom: 0 !important; line-height: 60px; left: 30px !important; margin: 0 !important;}
  #m5 .content>a:first-child .ico>i{font-size: 5.6rem !important;}
  #m5 .content>a .ico>i{font-size: 4.6rem !important;}
  #m5 .content>a .title{bottom: 25px !important; font-size: 1.3rem !important; left: 100px !important; text-align: left; left: 110px !important; margin: 0 !important;}
  #m5 .content>a:hover{background: none;}
}



#m7{height:100%; background:url('../img/m7.jpg') no-repeat center; background-size:cover; position:relative; z-index:3;}
#m7 .wrap{width:1332px; height:654px; position:absolute; left:50%; top:50%; margin:-327px 0 0 -666px;}
#m7 .wrap .left{width:654px; height:100%; position:relative; float:left; overflow:hidden; display:block;}
#m7 .wrap .right{width:654px; height:100%; float:right;}
#m7 .wrap .right .top{width:100%; height:315px; display:block; position:relative; overflow:hidden;}
#m7 .wrap .right .btm{width:100%; height:315px; display:block; margin-top:24px; position:relative; overflow:hidden;}
#m7 .img{width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center; transition:all .45s;}
#m7 i{position:absolute; left:30px; bottom:30px; color:#fff; font-size:5.2rem; z-index:2; transition:all .45s ease;}
#m7 .tit{position:absolute; left:90px; bottom:35px; color:#fff; font-size:2.8rem; z-index:2; transition:all .35s ease; font-family: Cabin; text-transform: uppercase;}
#m7 .wrap .right .btm .tit{left:96px;}
#m7 .wrap .left:after, #m7 .wrap .right .top:after, #m7 .wrap .right .btm:after{content:''; display:block; width:100%; height:100%; position:absolute; z-index:1; left:0; top:0; background:rgba(0,0,0,0); transition:all .35s;}
#m7 .wrap .left:hover:after,  #m7 .wrap .right .top:hover:after, #m7 .wrap .right .btm:hover:after{background:rgba(0,0,0,.4);}
#m7 .wrap .left:hover .img,  #m7 .wrap .right .top:hover .img, #m7 .wrap .right .btm:hover .img{transform:scale(1.06);}
#m7 .wrap .left:hover .tit,  #m7 .wrap .right .top:hover .tit, #m7 .wrap .right .btm:hover .tit{left:30px; bottom:30px; font-size:4.2rem;}
#m7 .wrap .left:hover i,  #m7 .wrap .right .top:hover i, #m7 .wrap .right .btm:hover i{font-size:2.6rem; opacity: 0;}

@media (max-width:1366px){
  #m7 .wrap{width:1148px; height:564px; margin:-282px 0 0 -574px;}
  #m7 .wrap .left{width:564px;}
  #m7 .wrap .right{width:564px;}
  #m7 .wrap .right .top{height:272px;}
  #m7 .wrap .right .btm{height:272px; margin-top:20px;}
  #m7 i{font-size:4.2rem;}
  #m7 .tit{left:80px; font-size:2.4rem;}
  #m7 .wrap .right .btm .tit{left:86px;}
  #m7 .wrap .left:hover .tit,  #m7 .wrap .right .top:hover .tit, #m7 .wrap .right .btm:hover .tit{left:30px; bottom:30px; font-size:3.6rem;}
}
@media (max-width:1080px){
  #m7{height:auto; padding:50px 30px 80px 30px; box-sizing:border-box;}
  #m7 .wrap{width:100%; height:auto; position:relative; left:0; top:0; margin:0;}
  #m7 .wrap .left{width:100%; height:300px; float:none;}
  #m7 .wrap .right{width:100%; height:auto; float:none; margin-top:20px;}
  #m7 .wrap .right .top{height:200px;}
  #m7 .wrap .right .btm{height:200px;}

  #m7 i{left:20px; bottom:20px;}
  #m7 .tit{left:70px; bottom:25px; font-size:2rem;}
  #m7 .wrap .right .btm .tit{left:72px;}

  #m7 .wrap .left:hover .tit,  #m7 .wrap .right .top:hover .tit, #m7 .wrap .right .btm:hover .tit{left:20px; bottom:20px; font-size:3.2rem;}
}