@charset "utf-8";

#banner{width: 100%; height: calc(100vh - 100px); position: relative; z-index: 1; background: #eff0f2 url('../img/b-about.jpg') no-repeat center/cover;}
#banner .box{position: relative; top: 30%; width: 1000px; margin: auto;}
#banner .tit{color: #fff; font-size: 2.6rem; margin-top: 40px; font-weight: 900;}
#banner .desc{color: #fff; font-size: 1.86rem; font-weight: 300; margin-top: 40px; line-height: 1.8;}

#banner .scroll{position: absolute; left: 0; right: 0; margin: auto; bottom: 35px; width: 65px; height: 45px; color: #fff; text-align: center; font-weight: 300; font-size: 2.4rem;}
#banner .scroll::before{content: ''; display: block; width: 20px; height: 1px; background: #fff; position: absolute; left: 17px; top: 38px; transform: rotate(42deg); animation: down 1.5s ease infinite;}
#banner .scroll::after{content: ''; display: block; width: 20px; height: 1px; background: #fff; position: absolute; left: 31px; top: 38px; transform: rotate(-42deg); animation: down 1.5s ease infinite;}
@keyframes down{
  0% {top: 38px; opacity: 1;}
  50% {top: 45px; opacity: .8;}
  100% {top: 38px; opacity: 1;}
}


#m1{background: #fff; padding: 85px 0; position: relative; z-index: 2;}
#m1 .tit{font-size: 3.6rem; color: #2b2b2b; font-weight: bold;}
#m1 .box{display: flex; justify-content: space-between; margin-top: 40px;}
#m1 .con, #m1 .con p{font-size: 1.6rem; font-weight: 300; line-height: 1.8;}
#m1 .con{width: 1000px;}
#m1 .con p{margin-bottom: 20px;}
#m1 .point{min-width: 350px; padding-left: 50px; box-sizing: border-box; color: #279830; font-size: 1.6rem; font-weight: 300;}
#m1 .point i{font-size: 2.8rem; color: #279830; vertical-align: middle; margin-right: 12px;}
#m1 .point p{margin-bottom: 30px;}


#m2{background: #2b2b2b url('../img/about-m2.jpg') no-repeat center/cover fixed; height: 460px;}
#m2 .wrap{color: #fff; font-weight: 300; font-size: 3.6rem; text-align: center; position: relative; top: 43.7%;}


#m3{background: #0e55a4; padding: 70px 0 90px 0;}
#m3 .wrap{display: flex; justify-content: space-between;}
#m3 .wrap dl{width: 30%; color: #fff; text-align: center;}
#m3 .wrap dl dt{font-size: 5.4rem; font-family: 'Montserrat';}
#m3 .wrap dl dd{line-height: 1.5; margin-top: 15px; font-size: 1.6rem; font-weight: 300;}


#m4{background: #fff; padding: 85px 0; position: relative; z-index: 2;}
#m4 .tit{font-size: 3.6rem; color: #2b2b2b; font-weight: bold;}
#m4 .box{display: flex; justify-content: space-between; margin-top: 40px;}
#m4 .con, #m4 .con p{font-size: 1.6rem; font-weight: 300; line-height: 1.8;}
#m4 .con{width: 1000px;}
#m4 .con p{margin-bottom: 20px;}
#m4 .point{min-width: 350px; padding-left: 50px; box-sizing: border-box; color: #279830; font-size: 1.6rem; font-weight: 300;}
#m4 .point i{font-size: 2.8rem; color: #279830; vertical-align: middle; margin-right: 12px;}
#m4 .point p{margin-bottom: 30px;}
#m4 .all-container{margin-top: 50px;}
#m4 .all-container>.btn{display: inline-block; padding: 14px 25px; background: #0e55a4; color: #fff; font-size: 1.6rem; border-radius: 30px; transition: all .35s;}
#m4 .all-container>.btn>i{vertical-align: middle; position: relative; top: -1px; margin-left: 6px; font-size: 1.8rem;}
#m4 .all-container>.btn:hover{background: #30a239;}


#m5{height: calc(70vh); background: #2b2b2b; position: relative; z-index: 1;}
#m5 .swiper-container{height: 100%; position: relative; z-index: 1;}
#m5 .swiper-wrapper{height: 100%;}
#m5 .swiper-slide{width: 100%; height: 100%;}
#m5 .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;}

#m5 .prev, #m5 .next{display: block; width: 40px; height: 40px; top: 50%; margin-top: -30px; position: absolute; z-index: 2; text-align: center; line-height: 46px; cursor: pointer; transition: all .2s;}
#m5 .prev:hover, #m5 .next:hover{opacity: .7;}
#m5 .prev i, #m5 .next i{color: #fff; font-size: 4.6rem;}
#m5 .prev{left: 30px; transform: rotate(-180deg);}
#m5 .next{right: 30px;}

#m5 .swiper-pagination{bottom: 30px;}
#m5 .swiper-pagination-bullet{background: #fff;}

#m5 .box{position: absolute; z-index: 2; text-align: center; top: 36.5%; left: 0; right: 0; width: 1000px; margin: auto;}
#m5 .box .tit{color: #fff; font-size: 7rem; letter-spacing: -.16rem; font-weight: 700;}
#m5 .box .view-more{display: inline-block; width: 160px; height: 47px; font-size: 1.6rem; text-align: center; line-height: 46px; border: 1px solid #fff; margin-top: 50px; color: #fff; font-weight: 300; border-radius: 30px; transition: all .2s;}
#m5 .box .view-more:hover{background: #fff; color: #0e55a4;}

@media (max-width:1440px){
  #m1 .tit{font-size: 3.4rem;}
  #m1 .con, #m1 .con p{font-size: 1.5rem;}
  #m1 .point{font-size: 1.5rem;}
  #m1 .point i{font-size: 2.6rem;}

  #m3{padding: 60px 0 80px 0;}

  #m4 .tit{font-size: 3.4rem;}
  #m4 .con, #m4 .con p{font-size: 1.5rem;}
  #m4 .point{font-size: 1.5rem;}
  #m4 .point i{font-size: 2.6rem;}

  #m5 .box .tit{font-size: 6rem;}
}
@media (max-width:1366px){
  #banner .box img{height: 60px;}
  #banner .tit{font-size: 2.4rem;}
  #banner .desc{font-size: 1.68rem;}

  #m1 .tit{font-size: 3.2rem;}

  #m2 .wrap{font-size: 3.4rem;}

  #m3{padding: 60px 0 80px 0;}

  #m4 .tit{font-size: 3.2rem;}

  #m5 .box .tit{font-size: 5rem;}
}
@media (max-width:1024px){
  #banner .box{text-align: center; width: 80%;}
  #banner .box img{height: 40px;}
  #banner .tit{font-size: 2.6rem;}
  #banner .desc{font-size: 1.7rem;}

  #m3 .wrap dl dt{font-size: 4rem;}

  #m5 .box{width: 700px;}
}
@media (max-width:1000px){
  #banner .box{text-align: center; width: 90%;}
  #banner .box img{height: 40px;}
  #banner .tit{font-size: 2.2rem;}
  #banner .desc{font-size: 1.5rem;}

  #m1{padding: 45px 15px;}
  #m1 .tit{font-size: 2.6rem;}
  #m1 .box{display: block;}
  #m1 .con, #m1 .con p{font-size: 1.4rem; line-height: 1.7;}
  #m1 .con{width: 100%;}
  #m1 .point{min-width: unset; padding-left: 0; font-size: 1.4rem; margin-top: 30px;}
  #m1 .point i{font-size: 2.2rem;}
  #m1 .point p{margin-bottom: 15px;}

  #m2{height: 400px;}
  #m2 .wrap{font-size: 2.6rem; top: 36%; padding: 0 15px; line-height: 1.4;}

  #m3{padding: 50px 0 50px 0;}
  #m3 .wrap{display: block;}
  #m3 .wrap dl{width: 100%; color: #fff; text-align: center; margin-bottom: 30px;}
  #m3 .wrap dl dt{font-size: 4.6rem;}
  #m3 .wrap dl dd{margin-top: 10px; font-size: 1.4rem;}

  #m4{padding: 45px 15px;}
  #m4 .tit{font-size: 2.6rem;}
  #m4 .box{display: block;}
  #m4 .con, #m4 .con p{font-size: 1.4rem; font-weight: 300; line-height: 1.7;}
  #m4 .con{width: 100%;}
  #m4 .point{min-width: unset; padding-left: 0; font-size: 1.4rem; margin-top: 30px;}
  #m4 .point i{font-size: 2.2rem;}
  #m4 .point p{margin-bottom: 15px;}

  #m5{height: 400px;}
  #m5 .swiper-container{height: 100%; position: relative; z-index: 1;}

  #m5 .prev, #m5 .next{width: 32px; height: 32px; line-height: 32px;}
  #m5 .prev i, #m5 .next i{color: #fff; font-size: 3.2rem;}
  #m5 .prev{left: 15px; transform: rotate(-180deg);}
  #m5 .next{right: 15px;}

  #m5 .swiper-pagination{bottom: 15px;}

  #m5 .box{width: 70%;}
  #m5 .box .tit{font-size: 3.6rem;}
  #m5 .box .view-more{width: 145px; height: 42px; font-size: 1.5rem; line-height: 42px;}
}