.main1{
  background: url(../img/main1.jpg)no-repeat;
  background-size: 100% 100%;
  padding: 50px 0;
  padding: 2.6vw 0;
  position: relative;
}
.common_title{
  text-align: center;
  position: relative;
  margin-bottom: 50px;
  margin-bottom: 2.6vw;
}
.common_title::after{
  content: '';
  width: 75px;
  width: 3.91vw;
  height: 4px;
  background: #0068b7;
  position: absolute;
  left: 50%;
  top: 120%;
  transform: translate(-50%, 0%);
}
.common_title p{
  font-size: 34px;
  font-size: 1.77vw;
  color: #201f1f;
  font-weight: bold;
}
.common_title span{
  font-size: 20px;
  font-size: 1.04vw;
  color: #c7c7c7;
  font-weight: bold;
  text-transform: uppercase;
}
.code{
  margin-top: 62px;
  margin-top: 3.23vw;
}
.code img{
  display: block;
  width: 100px;
  width: 5.21vw;
  height: 100px;
  height: 5.21vw;
}
.m1_cont{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.m1_cont a{
  display: block;
  width: 250px;
  width: 13.02vw;
  height: 275px;
  height: 14.32vw;
  border: 1px solid #e5e5e5;
  text-align: center;
  background: #fff;
  padding-top: 40px;
  padding-top: 2.08vw;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  transition: all 0.3s; 
}
.m1_cont a:hover{
  background: url(../img/m1_hv.png.jpg)no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translateY(-6px); 
  -moz-transform: translateY(-6px); 
  -o-transform: translateY(-6px);   
  -ms-transform: translateY(-6px); 
  transform: translateY(-6px);
  color: #fff;
}
.m1_cont a div{
  height: 80px;
  height: 4.17vw;
}
.m1_cont a p{
  font-size: 19px;
  font-size: .99vw;
  color: #333333;
  font-weight: 600;
  position: relative;
  margin: 20px auto;
  margin: 1.04vw auto;
}
.m1_cont a:hover p{
  color: #fff;
}
.m1_cont a p::after{
  content: '';
  position: absolute;
  width: 2em;
  height: 2px;
  background: #0068b7;
  left: 50%;
  bottom: -10px;
  bottom: -0.52vw;
  margin-left: -1em;
}
.m1_cont a:hover p::after{
  background: #e60012;
}
.m1_cont a span{
  font-size: 16px;
  font-size: .83vw;
  color: #1d1d1d;
  display: block;
}
.m1_cont a:hover span{
  color: #fff;
}
.m1_cont a:nth-child(1) div{background: url(../img/m1_ico1.png)no-repeat center center; background-size: 74px; background-size: 3.85vw;}
.m1_cont a:nth-child(1):hover div{background: url(../img/m1_ico1_on.png)no-repeat center center;}
.m1_cont a:nth-child(2) div{background: url(../img/m1_ico2.png)no-repeat center center; background-size: 78px; background-size: 4.06vw;}
.m1_cont a:nth-child(2):hover div{background: url(../img/m1_ico2_on.png)no-repeat center center;}
.m1_cont a:nth-child(3) div{background: url(../img/m1_ico3.png)no-repeat center center; background-size: 74px; background-size: 3.85vw;}
.m1_cont a:nth-child(3):hover div{background: url(../img/m1_ico3_on.png)no-repeat center center;}
.m1_cont a:nth-child(4) div{background: url(../img/m1_ico4.png)no-repeat center center; background-size: 89px; background-size: 4.64vw;}
.m1_cont a:nth-child(4):hover div{background: url(../img/m1_ico4_on.png)no-repeat center center;}
.m1_cont a:nth-child(5) div{background: url(../img/m1_ico5.png)no-repeat center center; background-size: 73px; background-size: 3.8vw;}
.m1_cont a:nth-child(5):hover div{background: url(../img/m1_ico5_on.png)no-repeat center center;}
.m1_cont a:nth-child(6) div{background: url(../img/m1_ico6.png)no-repeat center center; background-size: 73px; background-size: 3.8vw;}
.m1_cont a:nth-child(6):hover div{background: url(../img/m1_ico6_on.png)no-repeat center center;}
.main2 {background: url(../img/main2_2.jpg)no-repeat; background-size: 100% 100%; padding-top: 90px; padding-top: 4.69vw; position: relative;}
/* .main2 .common_title p{ color: #fff; } */
.main2 .common_title{
  margin-bottom: 90px;
  margin-bottom: 4.69vw;
}
.main2 .common_title::after{ background: #e60012; }
.main2_cont{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.main2_cont a{
  height: 296px;
  height: 15.42vw;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  transition: all 0.3s; 
  position: relative;
}

.main2_cont a p{
  color: #fff;
  font-weight: 600;
  font-size: 34px;
  font-size: 1.77vw;
  position: absolute;
  left: 50%;
  top: 27%;
  -webkit-transform: translateX(-50%); 
  -moz-transform: translateX(-50%); 
  -o-transform: translateX(-50%);   
  -ms-transform: translateX(-50%); 
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  transition: all 0.3s; 
}
.main2_cont a div{
  width: 0%;
  height: 0%;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  transition: all 0.3s; 
}

.main2_cont a:nth-child(1){
  background: url(../img/m2_1.jpg)no-repeat;
  background-size: 100% 100%;
  width: 49%;
  box-shadow: 0 0 1px #505050;
}
.main2 .main2_cont a:hover{
  -webkit-transform: translateY(-10px); 
  -moz-transform: translateY(-10px); 
  -o-transform: translateY(-10px);   
  -ms-transform: translateY(-10px); 
  transform: translateY(-10px);
  box-shadow: 0 0 10px #505050;
}
.main2_cont a:nth-child(1) p{
  color: #000;
}
.main2_cont a:nth-child(1) span{
  font-size: 18px;
  font-size: .94vw;
  color: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%); 
  -moz-transform: translateX(-50%); 
  -o-transform: translateX(-50%);   
  -ms-transform: translateX(-50%); 
  transform: translateX(-50%);
}
.main2_cont a:nth-child(2){
  background: url(../img/m2_2.jpg)no-repeat;
  background-size: 100% 100%;
  width: 49%;
}
.main2_cont a:nth-child(2) span,.main2_cont2 a:nth-child(1) span{
  font-size: 18px;
  font-size: .94vw;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%); 
  -moz-transform: translateX(-50%); 
  -o-transform: translateX(-50%);   
  -ms-transform: translateX(-50%); 
  transform: translateX(-50%);
}

.main2_cont2, .main2_cont3{
  /* margin-top: 26px;
  margin-top: 1.35vw; */
}
.main2-pagination {
  position: absolute;
  z-index: 2;
}
.main2 .swiper-pagination-bullet{
  width: 15px;
  height: 15px;
  background: #fff;
}
.main2_cont2 a:nth-child(1){
  background: url(../img/m2_3.jpg)no-repeat;
  background-size: 100% 100%;
  width: 49%;
}
.main2_cont2 a:nth-child(2){
  background: url(../img/m2_4.jpg)no-repeat;
  background-size: 100% 100%;
  width: 49%;
}

.main2_cont3 a:nth-child(1){
  background: url(../img/m2_5.jpg)no-repeat;
  background-size: 100% 100%;
  width: 49%;
}
.main2_cont3 a:nth-child(2){
  background: url(../img/m2_6.jpg)no-repeat;
  background-size: 100% 100%;
  width: 49%;
}
.main2_cont3 a:nth-child(1) p{
  color: #fff;
}
.main2_cont3 a:nth-child(1) span{
  color: #fff;
}
.main2_cont2 a:nth-child(1) p{
  color: #fff;
}
.main2_cont2 a:nth-child(2) table{
  color: #fff;
  font-size: 18px;
  font-size: .94vw;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%); 
  -moz-transform: translateX(-50%); 
  -o-transform: translateX(-50%);   
  -ms-transform: translateX(-50%); 
  transform: translateX(-50%);
}
.main2_cont2 a:nth-child(2) table td{
  padding: 0 10px;
  padding: 0 .52vw;
}
.main2_banner {
  height: 360px;
  height: 18.75vw;
  padding-top: 20px;
  padding-top: 1.04vw;
  overflow: hidden;
}
.main2_banner2{
  /* overflow: hidden; */
  height: 800px;
  height: 41.67vw;
  position: relative;
}
.main2_banner2 a{
  display: block;
  text-align: center;
  padding: 90px 0;
  padding: 4.69vw 0;
  width: 690px;
  width: 35.94vw;
  height: 295px;
  height: 15.36vw;
}
.main2_banner2 li{
  position: absolute;
  left: 0;
  top: 0;
}
.main2_banner2 a p{
  color: #fff;
  font-weight: 600;
  font-size: 28px;
  font-size: 1.46vw;
}
.main2_banner2 a span{
  font-size: 18px;
  font-size: .94vw;
  color: #fff;
}
.main2_banner2_a1{background: url(../img/m2_1.jpg)no-repeat; background-size: 100% 100%;}
.main2_banner2_a2{background: url(../img/m2_2.jpg)no-repeat; background-size: 100% 100%;}
.main2_banner2_a3{background: url(../img/m2_3.jpg)no-repeat; background-size: 100% 100%;}
.main2_banner2_a4{background: url(../img/m2_4.jpg)no-repeat; background-size: 100% 100%;}
.main2_banner2_a5{background: url(../img/m2_5.jpg)no-repeat; background-size: 100% 100%;}
.main2_banner2_a6{background: url(../img/m2_6.jpg)no-repeat; background-size: 100% 100%;}


.main4{
  padding: 100px 0;
  padding: 5.21vw 0;
  background: url(../img/main4.jpg)no-repeat;
}
.main4 ul {
  font-size: 0;
}
.main4 ul li{
  display: inline-block;
  width: 230px;
  height: 94px;
  height: 4.9vw;
  width: 11.98vw;
  /* -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  transition: all 0.3s; */
  /* border: 0.5px solid #ccc; */
  box-shadow: 0 0 0.8px #4c4c4c;
}
.main4 ul li a, .main4 ul li a img{
  display: block;
  width: 100%;
  height: 100%;
}
/* .main4 ul li:hover{
  -webkit-transform: translateY(-6px); 
  -moz-transform: translateY(-6px); 
  -o-transform: translateY(-6px);   
  -ms-transform: translateY(-6px); 
  transform: translateY(-6px);
} */

.main3{
  overflow: hidden;
  padding-top: 60px;
  padding-top: 3.13vw;
  background: url(../img/main3.jpg)no-repeat;
  background-size: 100% 100%;
	position: relative;
}

.main3 .swiper-slide{
  width: 527px;
  width: 27.45vw;
	height: 410px;
  height: 21.35vw;
  opacity: 0;
}
.main3 .mirror{
  width: 100%;
  transform: rotateX(180deg);
}
.main3 .mirror div{
  position: relative;
}
.main3 .mirror div::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%,  rgba(228, 228, 233, 1) 24%, rgba(228, 228, 233, 1) 100%);
  background-size: 100% 100%;
  background-position: top center;
}
.main3 .mirror div p{
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  color: #fff;
  font-size: 16px;
  font-size: .83vw;
  line-height: 2em;
  padding: 0 5px;
}
.main3 .swiper-slide div img{
  display: block;
  width: 100%;
}
.main3 .swiper-slide a{
  display: block;
  position: relative;
}
.main3 .swiper-slide a p{
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  color: #fff;
  font-size: 16px;
  font-size: .83vw;
  line-height: 2em;
  padding: 0 5px;
}
.main3 .swiper-slide a img{
  display: block;
  width: 100%;
}
.swiper-slide-active{
  transform: translateX(0px) scale(1) rotateY(0deg) !important;
}
.main3 .swiper-wrapper {
  perspective: 500px; 
  padding: 40px 0 120px 0;  
  padding: 2.08vw 0 6.25vw 0;  
}
.main3 .swiper-slide {
  transition: transform 0.5s ease, filter 0.5s ease;
}
.main3 .main3-active , .main3 .main3-prev,.main3 .main3-next,.main3 .main3-prev2,.main3  .main3-next2{
  opacity: 1;
}
.main3 .main3-active {
  z-index: 4;
}
.main3 .main3-prev{
  transform: scale(0.9) rotateY(3deg) translateX(100px);
  z-index: 3;
}
.main3 .main3-prev2{
  transform: scale(0.8) rotateY(3deg) translateX(500px);
  z-index: 2;
}
.main3 .main3-next{
  transform: scale(0.9) rotateY(-3deg) translateX(-100px);
  z-index: 3;
}
.main3  .main3-next2{
  transform: scale(0.8) rotateY(-3deg) translateX(-450px);
  z-index: 2;
}

.main3-button-prev, .main3-button-next{
  width: 63px;
  width: 3.28vw;
  height: 63px;
  height: 3.28vw;
  position: absolute;
  top: 88%;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.main3-button-prev{
  background: url(../img/prev.png)no-repeat;
  background-size: 100% 100%;
  left: 25%;
}
.main3-button-next{
  background: url(../img/next.png)no-repeat;
  background-size: 100% 100%;
  right: 25%;
}
.main3:hover .main3-button-prev{
  opacity: 1;
  left: 30%;
}
.main3:hover .main3-button-next{
  opacity: 1;
  right: 30%;
}
.main5{
  background: url(../img/main_5.jpg)no-repeat;
  background-size: 100% 100%;
  padding: 50px ;
  padding: 2.6vw 0;
}
.main5 {
  height: 500px;
  height: 26.04vw;
}
.main5 .w{
  height: 100%;
}
.main5 .w>div{
  position: relative;
}

.main5 .common_title p{
  color: #fff;
}
.main5 .common_title::after{
  background: #e60012;
}
.m5_cont{
  position: relative;
  width: 100%;
  height: 100%;
}
.m5_cont p{
  color: #fff;
  font-size: 30px;
  font-size: 1.56vw;
  font-weight: 600;
  font-style: italic;
}
.m5_cont span{
  font-size: 16px;
  font-size: .83vw;
  color: #fff;
}
.m5_cont1::after{
  content: '';
  width: 320px;
  height: 120px;
  width: 16.67vw;
  height: 6.25vw;
  background: #00479d;
  background: rgba(0, 0, 0, 0.67);
  position: absolute;
  left: -50%;
  top: -45%;
  z-index: -1;
  -webkit-transform: skewX(-16deg);
  -moz-transform: skewX(-16deg);   
  -ms-transform: skewX(-16deg);     
  -o-transform: skewX(-16deg); 
  transform: skewX(-16deg);  

  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;   
  -ms-transform-origin: bottom left;     
  -o-transform-origin: bottom left;
  transform-origin: bottom left;  
}
.m5_cont1{
  position: absolute;
  left: 55.9%;
  z-index: 1;
  top: 12%;
}
.m5_cont2{
  position: absolute;
  left: 28.1%;
  top: 50%;
  z-index: 1;
}
.m5_cont2::after{
  content: '';
  width: 320px;
  height: 120px;
  width: 16.67vw;
  height: 6.25vw;
  background: #00479d;
  background: rgba(0, 71, 157, 0.67);
  position: absolute;
  left: -27%;
  top: -45%;
  z-index: -1;
  -webkit-transform: skewX(-16deg);
  -moz-transform: skewX(-16deg);   
  -ms-transform: skewX(-16deg);     
  -o-transform: skewX(-16deg); 
  transform: skewX(-16deg);  

  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;   
  -ms-transform-origin: bottom left;     
  -o-transform-origin: bottom left;
  transform-origin: bottom left;  
}
#canvas_1,#canvas_3,#canvas_5{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 1000px) {
  .common_title {
    margin-bottom: 30px;
  }
  .common_title p{
    font-size: 20px;
  }
  .common_title span{
    font-weight: normal;
  }
  .common_title::after{
    width: 100px;
    height: 2px;
    top: 102%;
  }
  /* .m1_cont{display: none;} */
  .main1{
    overflow: hidden;
  }
  .m1_cont {
    width: 100%;
    height: 180px;
    justify-content: start;
    overflow-x: scroll;
    padding-left: 1%;
  }

  .m1_cont a{
    width: 180px;
    height: 164px;
    margin-right: 15px;
    min-width: 47%;
  }
  .main2{
    overflow: hidden;
  }

  .m1_cont a div{
    width: 60px;
    height: 50px;
    background-size: 85% !important;
    margin: 0 auto;
  }
  .m1_cont a p{
    font-size: 15px;
  }
  .m1_cont a span{
    font-size: 14px;
  }
  .main5{
    background: url(../img/main_5.jpg)no-repeat bottom center;
    background-size: cover;
    height: 300px;
    overflow: hidden;
  }
  .m5_cont1{
    left: 59%;
  }
  .m5_cont p{
    font-size: 15px;
  }
  .m5_cont1::after{
    width: 160px;
    height: 70px;
  }
  .m5_cont1::after{
    left: -42%;
  }
  .m5_cont2::after{
    width: 184px;
    height: 70px;
  }
  .m5_cont2{
    position: absolute;
    left: 4%;
    top: 36%;
  }
  .main5{
    padding-top: 22px;
  }
  .main4 ul{
    
width: 100%;
    
padding: 0 2%;
  }
  .main4 ul li{

width: 33%;

height: 50px;

}
.main2_banner2{
  height: 300px;
}
.main2_banner2 a{
  width: 200px;
  height: 100px;
}
.main2_banner2 a p{
  font-size: 18px;
}
.main2_banner2 a span{
  font-size: 14px;
}
.main3 .swiper-slide{
  width: 250px;
  height: 200px;
}
.main3 .mirror{
  display: none;
}
.main3 .swiper-slide a p{
  font-size: 18px;
}
}