@charset "utf-8";

#banner{width:100%; height: 470px; background: #fafafa no-repeat center/cover;}
#banner .wrap{position: relative; top: 41.6%; left: -10px; font-size: 4.2rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; color: #2b2b2b;}
#banner .wrap>span{display: inline-block;}


#space{height: 100px;}

@media (max-width:1279px){ /*mp*/
  #banner{display: none;}
  #mp-head{background: #1f53be; height: 80px;}
  #space{height: 120px;}
}


/* 鏍忕洰鑿滃崟 */
#child{background: none; padding: 0; position: relative; top: -40px;}
#child .wrap>a{width: 20%;}

@media (max-width:1279px){ /*mp*/
  #child .wrap{height: 48px;}
  #child .wrap>a{line-height: 47px; font-size: 1.3rem;}
  #child .wrap>a::after{height: 1.3rem; top: 17px;}
}


/* 绠€浠 */
#about{padding: 30px 0 0 0;}
#about .m1{background: url('../img/building.png') no-repeat right bottom; position: relative; padding-bottom: 260px;}
#about .m1::after{content: ''; display: block; width: 100%; height: 220px; background: rgba(30,121,239, .92); position: absolute; left: 0; bottom: 0; z-index: 1;}
#about .m1>.wrap>.tit{font-size: 3.9rem; color: #2b2b2b; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
#about .m1>.wrap>.tit-en{color: #bbb; font-size: 1.5rem; font-family: 'Montserrat'; margin-top: 12px;}
#about .m1>.wrap>.desc{margin: 60px 0; font-size: 1.7rem; font-weight: 300; line-height: 1.9; max-width: 55%;}

#about .m1>.wrap .box{max-width: 55%; display: flex; flex-wrap: wrap;}
#about .m1>.wrap .box .item{width: 50%; margin-bottom: 50px;}
#about .m1>.wrap .box .item .tit i{font-size: 3.5rem; display: inline-block; vertical-align: middle; width: 50px;}
#about .m1>.wrap .box .item .tit .icon-nianling{font-size: 3rem;}
#about .m1>.wrap .box .item .tit .icon-zhishichanquanguanli{font-size: 3.2rem;}
#about .m1>.wrap .box .item .tit .icon-zhengshu{font-size: 3.8rem;}
#about .m1>.wrap .box .item .num{font-size: 4.2rem; font-family: 'Montserrat'; font-weight: 700; vertical-align: middle;}
#about .m1>.wrap .box .item .plus{font-size: 3rem; vertical-align: middle; font-weight: bold; position: relative; top: -4px;}
#about .m1>.wrap .box .item .desc{max-width: 260px; margin: 15px 0 0 0; line-height: 1.6; font-size: 1.6rem; font-weight: 300;}

#about .m1 .brand{width: 100%; height: 220px; position: absolute; left: 0; bottom: 0; z-index: 2;}
#about .m1 .brand>.wrap{display: flex; justify-content: space-between; align-items: center; height: 100%;}
#about .m1 .brand>.wrap .slogan{color: #fff; font-size: 3.8rem;}
#about .m1 .brand>.wrap .slogan span{font-weight: bold; vertical-align: middle; display: inline-block; letter-spacing: .1rem; position: relative; top: -4px;}
#about .m1 .brand>.wrap .slogan i{font-style: normal; font-size: 1.2rem; vertical-align: middle; display: inline-block; margin: 0 25px; position: relative; top: -4px;}


#about .m2{padding: 100px 0 0 0;}
#about .m2 .wrap{padding-bottom: 200px; background: url('../img/about-m2.png') no-repeat center bottom/100% auto; display: flex; justify-content: space-between; align-items: center;}
#about .m2 .wrap .l{width: 70%;}
#about .m2 .wrap .tit{font-size: 2.8rem; color: #2e2d3c;}
#about .m2 .wrap .con{font-size: 1.6rem; margin-top: 40px; line-height: 2.1;}
#about .m2 .wrap .con p{font-size: 1.6rem; margin-bottom: 25px; line-height: 2.1; font-weight: 300;}

#about .m2 .wrap .r{width: 25%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#about .m2 .wrap .r>.img{width: 23%; height: 0; padding-bottom: 23%; margin-right: 2%; box-sizing: border-box; margin-bottom: 30px; position: relative; text-align: center;}
#about .m2 .wrap .r>.img:nth-child(4n){margin-right: 0;}
#about .m2 .wrap .r>.img>img{max-width: 100%; max-height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}


@media (max-width:1679px){ /*1440*/
  #about .m1>.wrap>.tit{font-size: 3.8rem;}
  #about .m1>.wrap>.tit-en{font-size: 1.4rem;}
  #about .m1>.wrap>.desc{font-size: 1.6rem;}

  #about .m1>.wrap .box .item .tit i{font-size: 3.4rem;}
  #about .m1>.wrap .box .item .tit .icon-nianling{font-size: 2.8rem;}
  #about .m1>.wrap .box .item .tit .icon-zhishichanquanguanli{font-size: 3rem;}
  #about .m1>.wrap .box .item .tit .icon-zhengshu{font-size: 3.6rem;}
  #about .m1>.wrap .box .item .num{font-size: 4rem;}
  #about .m1>.wrap .box .item .plus{font-size: 2.8rem;}
  #about .m1>.wrap .box .item .desc{font-size: 1.5rem;}

  #about .m2 .wrap .con{font-size: 1.5rem;}
  #about .m2 .wrap .con p{font-size: 1.5rem; }
}
@media (max-width:1439px){ /*1366*/
  #banner{height: 450px;}

  #about .m1>.wrap>.desc{font-size: 1.5rem;}

  #about .m1>.wrap .box .item .tit i{font-size: 3.2rem;}
  #about .m1>.wrap .box .item .tit .icon-nianling{font-size: 2.6rem;}
  #about .m1>.wrap .box .item .tit .icon-zhishichanquanguanli{font-size: 2.8rem;}
  #about .m1>.wrap .box .item .tit .icon-zhengshu{font-size: 3.4rem;}
  #about .m1>.wrap .box .item .num{font-size: 3.6rem;}
  #about .m1>.wrap .box .item .plus{font-size: 2.6rem;}
  #about .m1>.wrap .box .item .desc{font-size: 1.4rem;}

  #about .m2 .wrap .con{font-size: 1.4rem;}
  #about .m2 .wrap .con p{font-size: 1.4rem; }
}
@media (max-width:1365px){ /*1280*/

}
@media (max-width:1279px){ /*mp*/
  #about{padding: 0 15px 0 15px;}

  #about .m1{background: none; padding-bottom: 180px;}
  #about .m1::after{height: 150px;}
  #about .m1>.wrap>.tit{font-size: 2.4rem;}
  #about .m1>.wrap>.tit-en{font-size: 1.2rem; margin-top: 6px;}
  #about .m1>.wrap>.desc{margin: 30px 0; font-size: 1.5rem; line-height: 1.7; max-width: unset;}

  #about .m1>.wrap .box{max-width: unset; display: flex; flex-wrap: wrap;}
  #about .m1>.wrap .box .item{width: 50%; margin-bottom: 30px;}
  #about .m1>.wrap .box .item .tit{height: 32px;}
  #about .m1>.wrap .box .item .tit i{font-size: 2.6rem; width: 36px;}
  #about .m1>.wrap .box .item .tit .icon-nianling{font-size: 2.1rem;}
  #about .m1>.wrap .box .item .tit .icon-zhishichanquanguanli{font-size: 2.3rem;}
  #about .m1>.wrap .box .item .tit .icon-zhengshu{font-size: 2.9rem;}
  #about .m1>.wrap .box .item .num{font-size: 2.4rem;}
  #about .m1>.wrap .box .item .plus{font-size: 2.2rem; top: -2px;}
  #about .m1>.wrap .box .item .desc{max-width: unset; margin: 10px 15px 0 0; line-height: 1.6; font-size: 1.3rem;}

  #about .m1 .brand{height: 150px;}
  #about .m1 .brand>.wrap{display: block;}
  #about .m1 .brand>.wrap .slogan{font-size: 2rem; text-align: center; margin-top: 10px;}
  #about .m1 .brand>.wrap .slogan span{font-weight: bold;}
  #about .m1 .brand>.wrap .slogan i{transform: scale(.5); margin: 0 5px;}
  #about .m1 .brand>.wrap .slogan i:nth-of-type(2){display: none;}
  #about .m1 .brand>.wrap .logo{text-align: center; padding-top: 20px;}
  #about .m1 .brand>.wrap .logo>img{height: 60px;}

  #about .m2{padding: 50px 0 0 0;}
  #about .m2 .wrap{padding-bottom: 60px; display: block;}
  #about .m2 .wrap .l{width: 100%;}
  #about .m2 .wrap .tit{font-size: 2rem;}
  #about .m2 .wrap .con{font-size: 1.4rem; margin-top: 30px; line-height: 1.8;}
  #about .m2 .wrap .con p{font-size: 1.4rem; margin-bottom: 20px; line-height: 1.8;}

  #about .m2 .wrap .r{width: 100%; padding: 0 20px; box-sizing: border-box;}
  #about .m2 .wrap .r>.img{width: 20%; height: 0; padding-bottom: 20%; margin-right: 5%; box-sizing: border-box; margin-bottom: 20px; position: relative; text-align: center;}
}