@charset "utf-8";

#m1{background: #eee; height: 800px; position: relative; z-index: 2;}
#m1 .bg{width: 50%; position: absolute; height: 100%; right: 0; top: 0; background: url('../img/about@factory.jpg') no-repeat center/cover;}
#m1 .wrap .l{width: 50%; padding-top: 136px; padding-right: 40px; box-sizing: border-box;}
#m1 .wrap .l .tit{font-size: 4rem; color: #323232;}
#m1 .wrap .l .tit-en{font-size: 3.2rem; color: #323232; text-transform: uppercase; font-family: Arial; font-weight: bold; margin-top: 18px;}
#m1 .wrap .l .line{width: 40px; height: 3px; background: #0076ce; margin-top: 35px;}
#m1 .wrap .l .con{font-size: 1.4rem; color: #323232;}
#m1 .wrap .l .con>p{margin-top: 30px; line-height: 2;}


@media (max-width:1199px){
  #m1{height: auto;}
  #m1 .bg{width: 100%; position: unset; height: 260px;}
  #m1 .wrap .l{width: 100%; padding-top: 50px; padding-right: 0;}
  #m1 .wrap .l .tit{font-size: 3rem;}
  #m1 .wrap .l .tit-en{font-size: 2rem; margin-top: 12px;}
  #m1 .wrap .l .line{margin-top: 25px;}
  #m1 .wrap .l .con{padding-bottom: 50px;}
  #m1 .wrap .l .con>p{margin-top: 25px;}
}


#m2{height: 350px; background: #000 url('../img/about@m2.jpg') no-repeat center/cover; position: relative; z-index: 2;}
#m2 .l{width: 50%; float: left; margin-top: 70px;}
#m2 .r{width: 50%; float: right;}
#m2 .l .tit{font-size: 4rem; color: #fff;}
#m2 .l .tit-en{font-size: 3.2rem; color: #fff; text-transform: uppercase; font-family: Arial; font-weight: bold; margin-top: 18px;}
#m2 .r dl{width: 50%; float: left; padding-left: 22px; box-sizing: border-box; position: relative; margin-top: 70px;}
#m2 .r dl:before{content: ''; display: block; width: 4px; height: 30px; background: #fff; position: absolute; left: 0; top: 1px;}
#m2 .r dl dt{font-size: 3rem; color: #fff;}
#m2 .r dl dd{font-size: 1.4rem; color: #fff; margin-top: 25px;}

@media (max-width:1199px){
  #m2{height: auto; background: #eee; border: 1px solid transparent; padding-bottom: 70px;}
  #m2 .l{width: 100%; float: none; margin-top: 50px;}
  #m2 .r{width: 100%; float: none;}
  #m2 .l .tit{font-size: 3rem; color: #323232;}
  #m2 .l .tit-en{font-size: 2rem; color: #323232; margin-top: 12px;}
  #m2 .r dl{width: 100%; float: none; padding-left: 20px; margin-top: 40px;}
  #m2 .r dl:before{height: 25px; background: #323232; top: 0;}
  #m2 .r dl dt{font-size: 2.6rem; color: #323232;}
  #m2 .r dl dd{color: #323232; margin-top: 20px;}
}


#m3{background: #fff; padding: 110px 0 100px 0; position: relative; z-index: 2;}
#m3 .tit{font-size: 4rem; color: #323232; text-align: center;}
#m3 .tit-en{font-size: 3.2rem; color: #323232; text-transform: uppercase; font-family: Arial; font-weight: bold; margin-top: 18px; text-align: center;}

#m3 .box{overflow: hidden; margin-top: 65px;}
#m3 .box .swiper-container{padding-bottom: 20px;}
#m3 .box .swiper-slide{width: 200px; height: 340px;}
#m3 .box .swiper-slide a{display: block; width: 100%; height: 100%;}
#m3 .box .swiper-slide a .img{width: 100%; height: 282px; background: #eee;}
#m3 .box .swiper-slide a .img>img{width: 100%; height: 100%;}
#m3 .box .swiper-slide a .title{font-size: 1.6rem; text-align: center; margin-top: 16px;}
#m3 .swiper-pagination{bottom: 0; display: none;}
#m3 .swiper-pagination-bullet{width: 9px; height: 9px; margin:0 6px; opacity:1; background:#ccc; transition:all .25s;}
#m3 .swiper-pagination-bullet-active{opacity:1; background:#0076ce;}

@media (max-width:1199px){
  #m3{padding: 50px 0 70px 0;}
  #m3 .tit{font-size: 3rem; text-align: left; padding-left: 15px;}
  #m3 .tit-en{font-size: 2rem; margin-top: 12px; text-align: left; padding-left: 15px;}

  #m3 .box{overflow: hidden; margin-top: 35px;}
}


#m4{background: #000 url('../img/about@m4.jpg') no-repeat center/cover; position: relative; z-index: 2; height: 300px; display: flex; flex-direction: column; justify-content: center;}
#m4 .tit{font-size: 4rem; color: #fff; text-align: center;}
#m4 .tit-en{font-size: 3.2rem; color: #fff; text-transform: uppercase; font-family: Arial; font-weight: bold; margin-top: 18px; text-align: center;}

#m4-container{padding: 70px 0 60px 0; position: relative; z-index: 2; background: #fff;}
#m4-container .wrap{display: flex; flex-direction: row; justify-content: space-around;}
#m4-container .wrap:after{display: none;}
#m4-container dl{width: 280px; text-align: center;}
#m4-container dl dt{width: 174px; height: 174px; background: #0076ce; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; font-size: 2.4rem; color: #fff; margin: auto;}
#m4-container dl dd{color: #323232; font-size: 1.4rem; margin-top: 30px; line-height: 2;}
#m4-container .wrap>span{display: block; background: url('../img/about@m4@arr.png') no-repeat center; width: 128px; height: 128px; margin-top: 26px;}

@media (max-width:1199px){
  #m4{height: 200px;}
  #m4 .tit{font-size: 3rem; text-align: left; padding-left: 15px;}
  #m4 .tit-en{font-size: 2rem; margin-top: 12px; text-align: left; padding-left: 15px;}

  #m4-container{padding: 10px 0 20px 0;}
  #m4-container .wrap{flex-direction: column; justify-content: unset;}
  #m4-container dl{width: 100%; margin-top: 40px;}
  #m4-container dl dt{width: 120px; height: 120px; font-size: 2rem; text-align: center;}
  #m4-container dl dd{margin-top: 20px;}
  #m4-container .wrap>span{display: none;}
}




#m5{background: #fff; padding: 110px 0 0 0; position: relative; z-index: 2; background: #f7f7f7; }
#m5 .tit{font-size: 4rem; color: #323232; text-align: center;}
#m5 .tit-en{font-size: 3.2rem; color: #323232; text-transform: uppercase; font-family: Arial; font-weight: bold; margin-top: 18px; text-align: center;}

#m5 .box{ position: relative; overflow: hidden; margin-top: 65px;}
#m5 .box .swiper-container{padding-bottom: 20px;}
#m5 .box .swiper-slide{width:auto!important;cursor:move;}
#m5 .box .swiper-slide img{ position:relative; height:450px; width:auto; transition:all .6s;}
#m5 .box .swiper-slide:after{ position:absolute;z-index:34;left:0;top:0; width:100%;height:100%; background:#0076ce;opacity:0; content:'';transition:all .6s;}
#m5 .box .swiper-slide:hover:after{opacity:.6;}
#m5 .box .button-next{ position:absolute;z-index:9; right:20%; top:50%; margin-top:-30px; width:60px; height:60px;outline:none; background:url("../img/arr_right.png") no-repeat; background-position:50% 50%; background-size:100% auto;cursor:pointer; transition:all .35s;}
#m5 .box .button-prev{ position:absolute;z-index:9; left:20%; top:50%; margin-top:-30px; width:60px; height:60px;outline:none; background:url("../img/arr_left.png") no-repeat; background-position:50% 50%; background-size:100% auto; cursor:pointer; transition:all .35s;}

@media (max-width:1199px){

  #m5{padding: 50px 0 70px 0;}
  #m5 .tit{font-size: 3rem; text-align: left; padding-left: 15px;}
  #m5 .tit-en{font-size: 2rem; margin-top: 12px; text-align: left; padding-left: 15px;}

  #m5 .box{overflow: hidden; margin-top: 35px;}
}