@charset "utf-8";

#banner{width: 100%; height: 600px; position: relative; z-index: 1; left: 0; top: 0; background: #eff0f2;}
#banner .swiper-container{height: 100%; position: relative; z-index: 1;}
#banner .swiper-wrapper{height: 100%;}
#banner .swiper-slide{width: 100%; height: 100%;}
#banner .swiper-slide>div{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-pagination{display: none;}

#banner .swiper-slide>.pc{display: block;}
#banner .swiper-slide>.mp{display: none;}

#banner .wrap{position: relative;}
#banner .btn{display: block; height: 110px; background: #0e45a0; width: 360px; position: absolute; right: 0; bottom: -55px; transition: all .25s; z-index: 2;}
#banner .btn:hover{background: #255ebe;}
#banner .btn i{display: block; width: 110px; height: 110px; line-height: 116px; color: #fff; font-size: 5.4rem; text-align: right; float: left;}
#banner .btn .box{width: 230px; float: right; color: #fff;}
#banner .btn .box .t1{font-size: 1.8rem; margin-top: 31px; font-weight: 300;}
#banner .btn .box .t2{font-size: 2.4rem; margin-top: 7px; font-weight: bold;}

#banner .prev, #banner .next{display: block; width: 40px; height: 40px; background: rgba(0,0,0, .4); top: 50%; margin-top: -25px; position: absolute; z-index: 2; text-align: center; line-height: 46px; cursor: pointer; transition: all .25s; opacity: 0;}
#banner .swiper-container:hover .prev, #banner .swiper-container:hover .next{opacity: 1;}
#banner .prev:hover, #banner .next:hover{background: rgba(0,0,0, .6);}
#banner .prev i, #banner .next i{color: #fff; font-size: 1.9rem;}
#banner .prev{left: 30px; transform: rotate(-180deg);}
#banner .next{right: 30px;}

#banner .b2{height: 100%; background: no-repeat center/cover;}

@media (max-width:1440px){
  #banner{height: 540px;}
  #banner .btn{width: 300px;}
  #banner .btn i{width: 105px;}
  #banner .btn .box{width: 180px;}
  #banner .btn .box .t1{font-size: 1.6rem;}
  #banner .btn .box .t2{font-size: 2rem;}
}
@media (max-width:1366px){
  #banner{height: 516px;}
  #banner .btn{width: 280px;}
  #banner .btn i{width: 100px; font-size: 5rem; line-height: 112px;}
  #banner .btn .box{width: 165px;}
  #banner .btn .box .t1{font-size: 1.5rem;}
  #banner .btn .box .t2{font-size: 1.9rem;}
}
@media (max-width:1280px){
  #banner{height: 460px;}
}
@media (max-width:1024px){
  #banner{height: 360px;}

  #banner .next, #banner .prev{display: none;}
  #banner .swiper-pagination{display: block; bottom: 15px;}
}
@media (max-width:1000px){
  #banner{height: calc(75vw);}
  #banner .swiper-slide>.pc{display: none;}
  #banner .swiper-slide>.mp{display: block;}

  #banner .next, #banner .prev{display: none;}
  #banner .swiper-pagination{display: block; bottom: 15px;}

  #banner .btn{height: 96px; width: 100%; position: relative; bottom:0;}
  #banner .btn i{display: block; width: 96px; height: 100%; line-height: 96px; font-size: 4.2rem;}
  #banner .btn .box{width: calc(100% - 120px);}
  #banner .btn .box .t1{font-size: 1.8rem; margin-top: 24px;}
  #banner .btn .box .t2{font-size: 1.8rem; margin-top: 8px;}
}


#m1{margin-top: 100px;}

.tit-container{position: relative; padding-left: 20px;}
.tit-container::after{content: ''; display: block; width: 3px; height: 100%; background: #1c69bf; position: absolute; left: 0; top: 0;}
.tit-container .tit{color: #111; font-size: 2.6rem; font-weight: 700;}
.tit-container .desc{font-size: 1.6rem; margin-top: 15px; line-height: 1.5;}

#m1 .list{display: flex; justify-content: space-between; margin-top: 40px;}
#m1 .list a{display: block; width: 30%;}
#m1 .list a .img{background: #111; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; position: relative;}
#m1 .list a .img>img{width: 100%; height: 100%; transition: all .5s; position: absolute; left: 0; top: 0;}
#m1 .list a:hover .img>img{transform: scale(1.08);}
#m1 .list a .box{background: #eff0f2; height: 165px; position: relative; transition: all .45s;}
#m1 .list a:hover .box{background: #0e55a4;}
#m1 .list a .box .tit{color: #111; font-size: 1.9rem; padding: 26px 30px; line-height: 1.3; height: 25px; transition: all .3s;}
#m1 .list a:hover .box .tit{color: #fff;}
#m1 .list a .box i{display: block; width: 36px; height: 36px; background: #fff; border-radius: 50%; text-align: center; line-height: 36px; font-size: 1.4rem; color: #111; position: absolute; left: 30px; bottom: 30px;}

@media (max-width:1000px){
  #m1{margin-top: 145px; padding: 0 15px;}

  #m1 .list{display: block;}
  #m1 .list a{width: 100%; margin-bottom: 25px;}
}


.all-container{margin-top: 50px;}
.all-container>.btn{display: inline-block; padding: 14px 25px; background: #0e55a4; color: #fff; font-size: 1.6rem; border-radius: 30px; transition: all .35s;}
.all-container>.btn>i{vertical-align: middle; position: relative; top: -1px; margin-left: 6px; font-size: 1.8rem;}
.all-container>.btn:hover{background: #30a239;}


hr{height: 1px; width: 100%; display: block; background: #ccc; margin-top: 70px; border: 0px none;}


#m2{margin-top: 70px;}
#m2 .wrap{position: relative;}
#m2 .tit-container .desc{max-width: 50%;}
#m2 .content{margin-top: 50px;}
#m2 .content .l{width: 45%; font-size: 1.6rem;}
#m2 .content .l p{line-height: 1.6; color: #111;}
#m2 .content .r{width: 45%; height: 310px; background: url('../img/a.jpg?1') no-repeat center/cover; position: absolute; top: -10px; right: 0;}


@media (max-width:1440px){
  #m2 .content .r{right: 30px;}
}
@media (max-width:1366px){
  #m2 .content .r{right: 30px;}
}
@media (max-width:1000px){
  #m2{padding: 0 15px;}
  #m2 .content .l{width: 100%;}
  #m2 .content .r{width: 100%; position: relative; top: unset; margin-top: 50px;}
}


#m3{margin-top: 70px;}
#m3 .content{margin-top: 50px; display: flex; justify-content: space-between;}
#m3 .content .box-l{display: block; width: calc((100% - 20px) / 2); height: 0; padding-bottom: 57.25%; position: relative; overflow: hidden;}
#m3 .content .box-l .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eff0f2 url('../img/adv-01.jpg') no-repeat center/cover; transition: all .6s;}
#m3 .content a:hover .img{transform: scale(1.08);}

#m3 .content .box{background: rgba(255,255,255, .95); padding: 25px; position: absolute; display: flex; justify-content: space-between; transition: all .45s;}
#m3 .content .box i{color: #111; position: relative; top: 3px; transition: all .45s;}
#m3 .content .box .desc{font-size: 1.6rem; line-height: 1.4; padding-left: 15px; transition: all .45s;}

#m3 .content a:hover .box{background: #0e55a4;}
#m3 .content a:hover .box i{color: #fff;}
#m3 .content a:hover .box .desc{color: #fff;}

#m3 .content .box-l .box i{font-size: 5.2rem;}
#m3 .content .box-l .box{left: 50px; top: 50px; width: 50%;}

#m3 .content .box-r{width: calc((100% - 20px) / 2); display: flex; justify-content: space-between;}
#m3 .content .box-r-l{width: calc((100% - 20px) / 2); height: 100%;}
#m3 .content .box-r-l-1{display: block; height: calc((100% - 20px) * 0.42); position: relative; overflow: hidden;}
#m3 .content .box-r-l-1 .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eff0f2 url('../img/adv-02.jpg') no-repeat center/cover; transition: all .6s;}
#m3 .content .box-r-l-1 .box{left: 25px; bottom: 25px; width: calc(100% - 100px);}
#m3 .content .box-r-l-1 .box i{font-size: 3.8rem;}
#m3 .content .box-r-l-1 .box .desc{font-size: 1.42rem;}
#m3 .content .box-r-l-2{display: block; height: calc((100% - 20px) * 0.58); margin-top: 20px; position: relative; overflow: hidden;}
#m3 .content .box-r-l-2 .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eff0f2 url('../img/adv-03.jpg') no-repeat center/cover; transition: all .6s;}
#m3 .content .box-r-l-2 .box{left: 25px; top: 25px; width: calc(100% - 100px);}
#m3 .content .box-r-l-2 .box i{font-size: 3.8rem;}
#m3 .content .box-r-l-2 .box .desc{font-size: 1.42rem;}

#m3 .content .box-r-r{width: calc((100% - 20px) / 2); height: 100%;}
#m3 .content .box-r-r-1{display: block; height: calc((100% - 20px) * 0.58); position: relative; overflow: hidden;}
#m3 .content .box-r-r-1 .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eff0f2 url('../img/adv-04.jpg') no-repeat center/cover; transition: all .6s;}
#m3 .content .box-r-r-1 .box{left: 25px; bottom: 25px; width: calc(100% - 100px);}
#m3 .content .box-r-r-1 .box i{font-size: 3.8rem;}
#m3 .content .box-r-r-1 .box .desc{font-size: 1.42rem;}
#m3 .content .box-r-r-2{display: block; height: calc((100% - 20px) * 0.42); margin-top: 20px; position: relative; overflow: hidden;}
#m3 .content .box-r-r-2 .img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #eff0f2 url('../img/adv-05.jpg') no-repeat center/cover; transition: all .6s;}
#m3 .content .box-r-r-2 .box{left: 25px; top: 25px; width: calc(100% - 100px);}
#m3 .content .box-r-r-2 .box i{font-size: 3.8rem;}
#m3 .content .box-r-r-2 .box .desc{font-size: 1.42rem;}

@media (max-width:1024px){
  #m3 .content{display: block;}
  #m3 .content .box-l{width: 100%; padding-bottom: 72.5%;}
  #m3 .content .box-r{width: 100%; display: block; margin-top: 20px;}
  #m3 .content .box-r-l, #m3 .content .box-r-r{width: 100%; height: calc(50vh); display: flex; justify-content: space-between;}
  #m3 .content .box-r-l::after, #m3 .content .box-r-r::after{display: none;}
  #m3 .content .box-r-l-1, #m3 .content .box-r-l-2, #m3 .content .box-r-r-1, #m3 .content .box-r-r-2{width: calc((100% - 20px)/2); height: 100%;}
  #m3 .content .box-r-l-2, #m3 .content .box-r-r-2{margin-top: 0;}
  #m3 .content .box-r-l-2 .box, #m3 .content .box-r-r-2 .box{top: unset; bottom: 25px;}
  #m3 .content .box-r-r{margin-top: 20px;}
}
@media (max-width:1000px){
  #m3{margin-top: 60px; padding: 0 15px;}
  #m3 .content{display: block;}
  #m3 .content .box-l{width: 100%; padding-bottom: 72.5%;}

  #m3 .content .box{background: rgba(255,255,255, .8); padding: 20px; position: relative; box-sizing: border-box;}
  #m3 .content .box i{color: #111; position: relative; top: 3px; transition: all .45s;}
  #m3 .content .box .desc{font-size: 1.6rem; line-height: 1.4; padding-left: 15px; transition: all .45s;}

  #m3 .content .box-l .box{left: unset; top: unset; width: 100%; height: auto;}

  #m3 .content .box-r{width: 100%; display: block; margin-top: 25px;}
  #m3 .content .box-r-l{width: 100%; display: block; height: 100%;}
  #m3 .content .box-r-l-1{width: 100%; display: block; height: 0; padding-bottom: 72.5%;}
  #m3 .content .box-r-l-1 .box{left: unset; bottom: unset; width: 100%;}
  #m3 .content .box-r-l-1 .box i{font-size: 5.2rem;}
  #m3 .content .box-r-l-1 .box .desc{font-size: 1.6rem;}
  #m3 .content .box-r-l-2{width: 100%; display: block; height: 0; padding-bottom: 72.5%; margin-top: 25px;}
  #m3 .content .box-r-l-2 .box{left: unset; top: unset; bottom: 0; width: 100%;}
  #m3 .content .box-r-l-2 .box i{font-size: 5.2rem;}
  #m3 .content .box-r-l-2 .box .desc{font-size: 1.6rem;}

  #m3 .content .box-r-r{width: 100%; height: auto; margin-top: 25px; display: block;}
  #m3 .content .box-r-r-1{width: 100%; display: block; height: 0; padding-bottom: 72.5%;}
  #m3 .content .box-r-r-1 .box{left: unset; bottom: unset; width: 100%;}
  #m3 .content .box-r-r-1 .box i{font-size: 5.2rem;}
  #m3 .content .box-r-r-1 .box .desc{font-size: 1.6rem;}
  #m3 .content .box-r-r-2{width: 100%; display: block; height: 0; padding-bottom: 72.5%; margin-top: 25px;}
  #m3 .content .box-r-r-2 .box{left: unset; top: unset; bottom: 0; width: 100%;}
  #m3 .content .box-r-r-2 .box i{font-size: 5.2rem;}
  #m3 .content .box-r-r-2 .box .desc{font-size: 1.6rem;}
}


#m4{background: #111 url('../img/m4.jpg?1') no-repeat center/cover fixed; padding-bottom: 120px; margin-top: 80px;}
#m4>.tit{background: rgba(16,50,136,.86); padding: 60px 0; text-align: center; color: #fff;}
#m4>.tit .tit-h2{font-size: 2.6rem; font-family: 'Montserrat';}
#m4>.tit .tit-h5{font-size: 1.8rem; margin-top: 20px; font-weight: 300; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255, .16);}

#m4 .icos{display: flex; justify-content: space-between; padding-top: 40px;}
#m4 .icos a{display: block; width: 33.33333%; text-align: center; transition: all .3s;}
#m4 .icos a:hover{opacity: .7;}
#m4 .icos a>div>i{font-size: 6.8rem; color: #fff;}
#m4 .icos a>span{display: block; text-align: center; font-size: 1.7rem; color: #fff; margin-top: 10px;}

#m4 .content{margin-top: 120px; display: flex; justify-content: space-between;}
#m4 .content .item{width: calc((100% - 50px) /2); min-height: 100px; background: rgba(0,0,0,.5); display: flex; justify-content: space-between; transition: all .35s;}
#m4 .content .item:hover{background: rgba(0,69,142,.8);}
#m4 .content .ico{width: 200px; height: 100%; background: rgba(0,0,0, .9); display: flex; flex-direction: column; justify-content: center; opacity: .66;}
#m4 .content .ico i{color: #fff; display: block; text-align: center; font-size: 4.2rem;}
#m4 .content .ico .tit{text-align: center; color: #fff; margin-top: 10px; font-size: 1.6rem; font-weight: 300;}
#m4 .content .box{color: #fff; font-size: 1.6rem; flex: 1; padding: 30px; font-weight: 300;}
#m4 .content .box p{margin-bottom: 9px; line-height: 1.3;}
#m4 .content .box a{color: #fff;}
#m4 .content .box a:hover{text-decoration: underline;}

@media (max-width:1440px){
  #m4{padding-bottom: 100px;}
  #m4 .content{margin-top: 100px;}
}
@media (max-width:1024px){
  #m4 .content .item{display: block;}
  #m4 .content .ico{width: 100%; height: 110px;}
  #m4 .content .ico i{font-size: 3.6rem;}
  #m4 .content .ico .tit{font-size: 1.4rem;}
  #m4 .content .box{font-size: 1.4rem; padding: 25px;}
}
@media (max-width:1000px){
  #m4{background: #111 url('../img/m4.jpg?1') no-repeat center/cover; padding-bottom: 0;}
  #m4>.tit{padding: 50px 15px 55px 15px;}
  #m4>.tit .tit-h2{line-height: 1.3;}
  #m4>.tit .tit-h5{font-size: 1.6rem;}

  #m4 .icos{display: block;}
  #m4 .icos a{width: 100%; text-align: center; transition: all .3s; margin-bottom: 30px;}
  #m4 .icos a>div>i{font-size: 4.8rem; color: #fff;}
  #m4 .icos a>span{font-size: 1.5rem; color: #fff; margin-top: 10px;}

  #m4 .content{margin-top: 0px; display: block;}
  #m4 .content .item{width: 100%; min-height: 100px; display: block;}
  #m4 .content .ico{width: 100%; height: auto; display: block; padding: 20px 0;}
  #m4 .content .ico .tit{font-size: 1.6rem;}
  #m4 .content .box{font-size: 1.4rem; padding: 30px 15px;}
}