/*********** swiper start**************/
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        
    }
    .swiper-slide > img{
         width:100%;
         height:100%;
    }
    @font-face{
         font-family:'notosansc';
         src: url(../font/NotoSansSC.ttf);
    }
    *{font-family:"notosansc";margin:0;padding:0;}
 


/*********** swiper end**************/

/* 四个断点：576px 768px 992px 1200px */

/***************
	      
<576px	超小设备
≥576px	平板
≥768px	桌面显示器
≥992px	大桌面显示器
≥1200px	特大桌面显示器
≥1400px  超大桌面显示器

***************/


body #purpose li{
   counter-increment: h3;
}



body #purpose li::marker{
   content: counter(h3) ". ";
}
































@media screen and (max-width: 576px) {

      #header{
         display: flex;
         align-items: center;
      }
      #container > #header > img {
         width:120px  !important;
         height:119px  !important;
         margin-left:10px !important;
      } 
      #container > #header > ul {
         width:210px !important;
         height:89px !important;
         margin-left:8% !important;
      } 
      #container > #header > ul > li{
         width:65px !important;
         height:35px !important;
         line-height: 35px !important;
         margin:5px !important;
         font-size: 12px !important;
      } 

      #container > #header > img {

         margin-left:1px !important;
     } 
      .swiper-container {
         width: 100%;
         height: 141px;
   }
      #about-us{
         width:100%;
         background-image: url('../images/funny.png');
         background-repeat: no-repeat;
         min-height:1000px !important;
         background-size: 100% 33%;
         position: relative;  
     }
      #about-us > h1{
         top:15px !important;
         text-align: center;
         font-size:20px;
         color:#d354bf;
         position: relative;
      }

      #about-us > .summay{
         font-size:25px;
         width:150px;
         top:40px;
         color:#0ca2ba;
         left:55%;
         text-align: right;
         font-weight: 100;
         position: relative;
  
   }
      #about-us > .text{
         width:100% !important;
         min-height:800px;
         margin-top:150px;
         position: relative;
         background-color: #a5e1eb !important;
      }

      #about-us > .text  > .text-block > .text-p{
         z-index: 15 !important;
      }
      #about-us > .text  > .text-block> .block:nth-child(1){

         width:200px !important;
         height:70px !important;
         z-index: 10 !important;
         position: absolute;
         background-color: #ffe7e5 !important;

      }
      #about-us > .text  > .text-block> .block:nth-child(2){
         width:180px !important;
         height:70px !important;
         z-index: 1 !important;
         top:-20px !important;
         position: absolute;
         background-color: #fc847a !important;
      }

      #about-us > .text  > .text-block:nth-child(2)> .block:nth-child(1){
         width:200px !important;
         height:70px !important;
         top:0 !important;
         left:10px !important;
         position: absolute;
         z-index: 3 !important;
         background-color: #daf9d3 !important;
      

      }
      #about-us > .text > .text-block:nth-child(2)>.block:nth-child(2){
         top:-20px !important;
         width:220px !important;
         height:70px !important;
         z-index: 2 !important;
         background-color: #90c685 !important;
      }

      #about-us > .text > .text-block{
         margin:0 auto;
         width:92% !important;
         min-height: 280px !important;
         background-color: rgba(231, 228, 228, 0.5) !important; 
         opacity: 0.9 !important;     
     }

     #about-us > .text > .text-block> .block:nth-child(1){
      width:248px;
      height:75px;
      background-color: #ffe7e5;
      z-index: 10 !important;
      left:0; 
      position: absolute;
   
   }
   #about-us > .text> .text-block > .block:nth-child(2){
       width:248px;
       height:70px;
       background-color: #fc847a;
       z-index: 1 !important;
       top:-50px;
       left:44px; 
       position: absolute;
   }


     #about-us > .text > .text-block > .text-p1{
     
      z-index: 200 !important;
      position: relative;
      padding:0 13px;

      line-height: 38px;
      font-weight: 400 !important;
     }
     #about-us > .text > .text-block > .text-p2{
      z-index:300 !important;
      position: relative;
      padding:0 13px;
      min-height:300px;
      line-height: 38px;
      font-weight: 400 !important;
     }

     #about-us > .text > p{
      letter-spacing:3px !important;
      line-height: 38px;
      font-weight: 400 !important;
      background-color: #f9fdfd !important;
      opacity: 0.9;
      padding-top:20px;
      margin:0 auto;
      padding-left:10px;
      border:2px solid #f9fdfd !important;
      padding-right:10px;
      box-sizing: border-box;
      width:92% !important;
      height:200px;
     }

     #about-us > .text > .text-block{
      z-index: 999 !important; 
      position: relative;
      min-height: 80px;
     }

     
     #about-us > .text > .text-block-l{
      background-color: #f9fdfd !important;
      opacity: 0.9;
      bottom:1px;
      position: relative;
     }

     #about-us > .text > div >.text-p2> p > .title {
      font-size: 23px;
      font-weight: 800;
     }

     #about-us > .text > div >.text-p1> p > .title{
  
      font-size:23px;
      font-weight: 800;
     }
  

     #plv_74135f2616df44eacc8dafcd358579c8_7{
      height:300px;
      margin-top:130px;
      display: flex;
      justify-content: center;
   }


     #video{
         width:100%;
         height:350px !important;
         display: flex;
         align-items: center !important;
      }

      #video > .content{
         width:850px;
         height:530px;
         text-align: center;
         color:#48545e;
         font-size:25px;
     }
     

      #video > .content > strong{
        
         color: #48545e;
         font-size:18px;
         top:-55px;
         font-weight: 400;
         position: relative;
      }
      .plv-player-container{
         top:20px;
         left:15px;
         position: relative;
         background-color: #ffffff !important;
      }

      .plv-player-panel {
         position: absolute;
         width: 90% !important;
         height: 73% !important;
         top: 0;
         left: 0;
         overflow: hidden;
     }

     .plv-player-container .plv-player-skin{
         top:30px !important;
     }

      #product{
         width:100%;
         display: flex;
         justify-content: center;
         height:195px !important;
         background-image: url('../images/product-banner.jpg');
         background-size:100% 72%;
         background-position-y:55px;
         background-repeat: no-repeat;
         position: relative;
      }
      #product > h1{
         color: #2f99e6;
         top:30px;
         font-size:20px;
         position: relative;
       
      }

      #product > ul{
         color: #48545e;
         top:125px;
         right:0;
         margin-right: 3px;
         font-size:10px;
         position: absolute;
         padding-left:20px;
         list-style-type: none;
         line-height: 19px;
      }

      #purpose{
         width:100%;
         min-height:960px;
         position: relative;
         z-index: 1;
      }

      #purpose > .image{
         width:85% !important;
         height:550px;
         background-image: url('../images/product-bg2.png');
         background-size: 100% 100%;
         right:0 !important;
         top:0;
         position: absolute;
      }

      #purpose > .image > img{
         width:140px;
         height:150px;
         right: 0;
         position: absolute;
         right:16px;
      }

      #purpose > .image > .block{
         width:100%;
         height:950px;
         z-index:30;
         bottom: 0;
         position: relative;
      }
       
      #purpose > .image >.block > img{
         width:140px;
         height:150px;
         position: absolute;
         bottom:10px;
         right:16px;
      }
      #purpose > .image >.block> span{
         position: absolute;
         top:500px;
         width:96%;
         line-height:29px;
         color:#767e81;
         display: block;
         text-align: right;
         margin:0 auto;
         letter-spacing:2px;
      }
      #purpose > .image >.block> span > h4{
         text-align: right;
         position: relative;
      }

      #purpose > .text{
         width:85%;
         height:450px;
         /* background-image: url('../images/product-bg1.png'); */
         background: linear-gradient(90deg, rgb(255, 255, 255), rgba(225, 244, 245, 1));
         background-size: 100% 50%;
         z-index: 4;
         bottom:20px;
         left:0;
         position: absolute;
      }
      
      #purpose > .text > span > h4{
         color:#767e81;
         text-align:left;
         left:20px;
         position: relative;
      }

      #purpose > .text > span:nth-child(1){
         top:-350px;
         display: block;
         position: relative;
         line-height:29px;
         color:#767e81;
         
      }

      #purpose > .text > span:nth-child(1) > p{
         padding:0 20px;

         
      }
      #purpose > .text > span:nth-child(1) > ul{
         padding:0 40px;
         
      }

      #purpose > .text > span:nth-child(2){
         width:86%;
         left:0;
         bottom:10px ;
         position: absolute;
       
      }
      #purpose > .text > span:nth-child(2) > p{
         padding-left:20px;
         width:65%;
         margin-top:5px;
         color:#767e81;
         letter-spacing: 3px;
         line-height:29px;   
      }
      #source{
         width:100% !important;
         min-height:1000px !important;
         position: relative;
      }
       #source > img{
         top:0;
         width:180px !important;
         height:190px;
         position: absolute !important;
         z-index: 2 !important;
      }
      #source > #source-group-bg{
         width:100% !important;
         height:300px !important;
         position: absolute;
         bottom:0;
      }
      #source > #source-group-bg .sign{
         bottom: 35px !important;
         width: 280px !important;
         height: 20px !important;
         right: 10% !important;
         z-index: 400 !important;
         position: absolute !important;
         transform: translate(50%, 0%);
      }
      #source >#source-group-bg > img:nth-child(2){
         bottom:30px !important;
         left:30px;
         height:85%;
         width:85% !important;
         position: absolute !important;
      }
      #source >#source-group-bg > img:nth-child(1){
         position: absolute !important;
         z-index:100 !important;
         bottom:30px;
         width:150px;
         right:0;
         height:150px;
     }

      #source >#source-group-bg > img:nth-child(3){
         bottom:35px !important;
         width: 280px !important;
         height:175px !important;
         right:2% !important;
         z-index:400 !important;
         position: absolute !important;
      } 
      #source > ul{
         width:90% !important;
         margin-top:160px !important;
         left:30px !important;
         position: absolute !important;
         z-index: 300 !important;
         color:#48545e;
   
      }
      #source > ul >li{
         margin-top:10px !important;
         line-height:40px;
      }

      #source > .title{ 
         top: 50px !important;
         right: 0 !important;
         position: absolute !important;
      }

      #source > .title > h1 {
         font-size:16px !important;
         right:50px !important;
         font-size:25px !important;
         position: absolute;
      }
      #source > .title > img:nth-child(1) {
         width: 60px !important;
         height: 72px !important;
         left:75px !important;
         top:-13px !important;
         position: absolute;
      }

      #source > .title > img:nth-child(2) {
         width: 107px !important;
         height:30px !important;
         left:103px !important;
         bottom:55px !important;
         position: absolute !important;
     }
      #source > #source-group-bg >.area{
         left: 0 !important;
         position: absolute;
         width: 220px !important;
         height: 70px;
         text-align: right !important;
         color: #f8fbf7;
         background-color: #90c685;
         font-size: 25px;
         font-weight: 500;
         padding-top:10px;
         padding-right:20px;
         bottom: 170px !important;
         z-index: 40;
      }

      #footer{
         height:590px !important;
         font-size:13px;
      }
   
      #footer > div:nth-child(1){
         width:48% !important;
         height:130% !important; 
         float:left;
         position: relative;
         padding:60px 0 0 5%;
         box-sizing: border-box;
         color:white;
         background-image: url('../images/footer-bg1.png');
      }
      #footer > div:nth-child(2){
         width:22%;
         height:130%;
         float:left;
         background-image: url('../images/footer-bg3.png');
      }
      #footer > div:nth-child(3){
         width:30% !important;
         height:130% !important; 
         float:left;
         background-color: #ff9d52;
         text-align: center;
         position: relative;
      }
      #footer > div:nth-child(3)> img{
         width:110px;
         height:130px;
         margin-top:260px;
      }

     
      #footer > div:nth-child(4){
         height:30px !important;
      }
      #footer > div:nth-child(5){
         width:30% !important;
         height:30px !important;;
         float:left;
         background-color: #f97510;
      }
      #footer > div:nth-child(6){
         width:37%;
         height:30px;
         float:left;
         right:0;
         bottom:-207px;
         position: absolute;
         background-image: url('../images/footer-bg2.png');
      }
      #footer >.box-1 > .block{
         width:50% !important;
         height:30px !important;
         bottom: 0;
         right:0;
         position: absolute;
         background-color: #f97510;
      }
      #footer > div:nth-child(1) > p{
         font-size:15px;
         top:5px;
         position: relative;
         margin-top:30px;
      }
      #footer > div:nth-child(1) > h3{
         font-size:20px;
      }
      #footer > div:nth-child(1) > .group-logo{
         list-style-type: none;
         margin-top:30px;
         height:100px;
         right:9px;
         width:150px !important;
         position: relative;
      }
      #footer > div:nth-child(1) > .shop-logo{
         height: 50px;
         margin: 20px 0px 20px 0px;
      }
      #footer > div:nth-child(1) > .group-logo > li{
         float:left;
         border:3px solid rgb(253, 251, 251);
         padding:2px;
         border-radius: 50%;
         width:25px;
         height:25px;
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         margin-left:5px;
         margin-top:5px;
      }
      #footer > div:nth-child(1) > .group-logo > li > a > img{
         /* width:15px !important;
         height:12px !important; */
         position: relative;
         top:1px;
      }
      #footer > div:nth-child(1) > .group-logo > li:nth-child(3) > a > img{
         width:15px;
         height:10px;
         position: relative;
         top:2px;
      }
      #footer > div:nth-child(1) > .contact{
         margin-top:10px !important;
         list-style-type: none;
         clear: both;
         font-size:15px !important;
         font-weight:500;
      }
     
      #footer > div:nth-child(1) > .qrcode{
         margin-top:10px;
         font-size:13px;
         font-weight:500;
         width:120px !important;
         list-style-type: none;
      }
     
       
      #footer > div:nth-child(1) > .contact > li{
         line-height:30px;
      }
     
      #footer > div:nth-child(1) > .qrcode > li{
         line-height:20px !important;
      }
     
     #footer > div:nth-child(1) > .qrcode > li:nth-child(3){
        top:30px;
        position: relative;
     }
     
      #footer > .box-7 > .regular{
        color: #ededed;
        text-align: left;
        margin-top:1%;
        text-indent:10% ;
     }
     
      #footer > .box-7 > .gov{
         text-align:center; 
         text-indent: 0% !important;
     }
     
     
     #footer > .box-7 > .gov > a{
        color:#E2E2E2;
        text-decoration: none;
     }
     #toggleButton,.xhs{
         width:15px;
         height:15px;
     }
     #content{
         position: absolute;
         top:35px;
         width:100px;
         height:100px;
         display: none;
     }

  #about-us-title,#product-title,#contact-title{
     cursor: pointer;
  }
  #container{
      width:100%;
      min-height:500px;
  }
  #header{
      width: 100%;
      height:119px;
      border-bottom:1px solid #ededed;
      box-shadow: 1px 1px 5px #e7e7e7;
  }
  
  #container > #header > ul {
      width:600px;
      height:109px;
      float:right;
      list-style-type: none;
      display: flex;
      align-items: center;
      margin-right:8%;
  } 
  #container > #header > ul > li{
      width:130px;
      height:45px;
      color:white;
      font-weight:700;
      float:left;
      line-height: 45px;
      text-align: center;
      margin:0 40px;
      list-style-type: none;
  } 
  #container > #header > ul > li:nth-child(1){
      background-color: #d354bf;
  } 
  #container > #header > ul > li:nth-child(2){
      background-color: #2f99e6;
  } 
  #container > #header > ul > li:nth-child(3){
      background-color: #ff9d52;
  } 
  
  #about-us > .text{
      width:58%;
      background-color: rgba(255, 255, 255, 0.5); 
      opacity: 0.9; 
      color:#48545e;
      float: right;
      position: relative;
      z-index: 20 !important;
  }

  
  #about-us > .text > .block{
      width:220px;
      height: 70px;
      position: absolute;
  }
  
  #about-us > .text > .text-block:nth-child(2)> .block:nth-child(1){
      background-color: #daf9d3;
      z-index: 10 !important;
      position: absolute;
      left:1px;
      width:248px;
      height:75px;
  
  }
  
  #about-us > .text > .text-block:nth-child(2)> .block:nth-child(2){
      background-color: #90c685;
      z-index: 2 !important;
      position: absolute;
      left:-50px; 
      top:-40px;
      width:248px;
      height:70px;
  }
  
  
  #video{
      width:100%;
      height:780px;
      background-image: url('../images/video-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items:start;
  }
  
  #video > .content{
      width:850px;
      height:530px;
      text-align: center;
      color:#48545e;
      font-size:25px;
  }
  #video > .content > video{
     float:left;
  }
  
   #source{
      width:100%;
      height:700px;
      position: relative;
   }
  
   #source > .title{
      top:70px;
      width:270px;
      height:120px;
      right:10%;
      position: absolute;
   }
   #source > .title > img:nth-child(1){
      width:80px;
      height:95px;
      left:20px;
      position: absolute;
   }
   #source > .title > img:nth-child(2){
      width:152px;
      height:50px;
      left:65px;
      bottom:15px;
      position: absolute;
   }
   #source > .title > h1{
      right:0;
      top:-5px;
      position: absolute;
      letter-spacing:5px;
      color:#48545e;
      font-size:45px;
      font-weight:700;
   }
  
   #footer{
      width:100%;
      height:850px;
      position: relative;
   }
  

   #footer > div:nth-child(3)> img{
      width:90px;
      height:110px;
      margin-top:260px;
   }
   #footer > div:nth-child(3)> ul{
      list-style-type: none;
      color:white;
      font-size:15px;
      font-weight:500;
   }
  
   #footer > div:nth-child(4){
      width:33%;
      height:80px;
      float:left;
      background-image: url('../images/footer-bg4.png');
   }
   #footer > div:nth-child(5){
      width:31%;
      height:80px;
      float:left;
      background-color: #f97510;
   }
   #footer > div:nth-child(7){
      width:100%;
      height:80px;
      float:left;
  
      background-color:#22324b;
   }
  
   #footer >.box-1 > .block{
      width:30%;
      height:50px;
      bottom: 0;
      right:0;
      position: absolute;
      background-color: #f97510;
   }


   #footer > div:nth-child(1) > .contact{
      margin-top:30px;
      list-style-type: none;
      clear: both;
      font-size:25px;
      font-weight:500;
      line-height: 30px;
   }

   #footer > div:nth-child(1) > .qrcode > li > img{
      bottom:20px;
      /* position: relative; */
      width:100px;
      height:100px;
   }
  
    
   #footer > div:nth-child(1) > .contact > li{
      line-height:30px;
   }
  
  #footer > div:nth-child(1) > .qrcode > li:nth-child(3){
     top:30px;
     position: relative;
  }
  
   #footer > .box-7 > .regular{
     color: #ededed;
     text-align: left;
     margin-top:3%;
     text-indent:10% ;
  }
  
   #footer > .box-7 > .gov{
      text-align:center; 
      text-indent: 0% !important;
  }
  
  
  #footer > .box-7 > .gov > a{
     color:#E2E2E2;
     text-decoration: none;
  }
  
     
 
}














































@media (min-width: 576px) and (max-width: 768px){
   
   .swiper-container {
      width: 100%;
      height: 248px !important;
   }
   #header{
      display: flex;
      align-items: center;
   }
   #container > #header > img {
      width:120px  !important;
      height:119px  !important;
      margin-left:10px !important;
   } 
   #container > #header > ul {
      width:410px !important;
      height:89px !important;
      margin-left:10% !important;
   } 
   #container > #header > ul > li{
      width:85px;
      height:35px;
      color:white;
      font-weight:700;
      float:left;
      line-height: 35px;
      text-align: center;
      list-style-type: none;
      font-size: 12px !important;
      margin-left:15%;
   } 
   #container > #header > img {
      margin-left:1px !important;
   } 
   .swiper-container {
      width: 100%;
      height: 170px;
   }
   #about-us{
      min-height:1000px !important;
      background-size: 100% 43%;
      position: relative;  
   }
   #about-us{
      width:100%;
      background-image: url('../images/funny.png');
      background-repeat: no-repeat;
      position: relative;
  }
   #about-us > h1{
      top:15px !important;
      text-align: center;
      font-size:20px;
      color:#d354bf;
      position: relative;
   }
   #about-us > .summay{
      font-size:25px;
      width:150px;
      top:40px;
      color:#0ca2ba;
      left:55%;
      text-align: right;
      font-weight: 100;
      position: relative;
   }
   #about-us > .text{
      width:100% !important;
      min-height:800px;
      margin-top:220px;
      position: relative;
      background-color: #a5e1eb !important;
   }
   #about-us > .text  > .text-block > .text-p{
      z-index: 15 !important;
   }
   #about-us > .text  > .text-block> .block:nth-child(1){

      width:200px !important;
      height:70px !important;
      z-index: 10 !important;
      position: absolute;
      background-color: #ffe7e5 !important;
   }
   #about-us > .text  > .text-block> .block:nth-child(2){
      width:180px !important;
      height:70px !important;
      z-index: 1 !important;
      top:-20px !important;
      position: absolute;
      background-color: #fc847a !important;
   }
   #about-us > .text  > .text-block:nth-child(2)> .block:nth-child(1){
      width:200px !important;
      height:70px !important;
      top:0 !important;
      left:10px !important;
      position: absolute;
      z-index: 3 !important;
      background-color: #daf9d3 !important;
   }
   #about-us > .text > .text-block:nth-child(2)>.block:nth-child(2){
      top:-20px !important;
      width:220px !important;
      height:70px !important;
      z-index: 2 !important;
      background-color: #90c685 !important;
   }
   #about-us > .text > .text-block{
      margin:0 auto;
      width:92% !important;
      min-height: 280px !important;
      background-color: rgba(231, 228, 228, 0.5) !important; 
      opacity: 0.9 !important;     
   }

  #about-us > .text > .text-block> .block:nth-child(1){
      width:248px;
      height:75px;
      background-color: #ffe7e5;
      z-index: 10 !important;
      left:0; 
      position: absolute;
   }
   #about-us > .text> .text-block > .block:nth-child(2){
      width:248px;
      height:70px;
      background-color: #fc847a;
      z-index: 1 !important;
      top:-50px;
      left:44px; 
      position: absolute;
   }

  #about-us > .text > .text-block > .text-p1{
      z-index: 200 !important;
      position: relative;
      padding:0 13px;
      line-height: 38px;
      font-weight: 400 !important;
  }
  #about-us > .text > .text-block > .text-p2{
      z-index:300 !important;
      position: relative;
      padding:0 13px;
      min-height:300px;
      line-height: 38px;
      font-weight: 400 !important;
  }

  #about-us > .text > p{
      letter-spacing:3px !important;
      line-height: 38px;
      font-weight: 400 !important;
      background-color: #f9fdfd !important;
      opacity: 0.9;
      padding-top:20px;
      margin:0 auto;
      padding-left:10px;
      border:2px solid #f9fdfd !important;
      padding-right:10px;
      box-sizing: border-box;
      width:92% !important;
      height:200px;
  }
  #about-us > .text > .text-block{
      z-index: 999 !important; 
      position: relative;
      min-height: 80px;
  }

  #about-us > .text > .text-block-l{
      background-color: #f9fdfd !important;
      opacity: 0.9;
      bottom:1px;
      position: relative;
  }

  #about-us > .text > div >.text-p2> p > .title {
      font-size: 23px;
      font-weight: 800;
  }

  #about-us > .text > div >.text-p1> p > .title{
      font-size:23px;
      font-weight: 800;
  }

  #plv_74135f2616df44eacc8dafcd358579c8_7{
      height:300px;
      margin-top:130px;
      display: flex;
      justify-content: center;
   }

   .plv-player-container{
      position: relative;
      width:430px !important;
      background-color: #ffffff !important;
   }

   .plv-player-panel {
      position: absolute;
      width: 100% !important;
      height: 80%;
      top: 0;
      left: 0;
      overflow: hidden;
   }

   .plv-player-container .plv-player-skin{
      top:30px;
   }
   #video{
      width:100%;
      height:350px !important;
      display: flex;
      align-items: center !important;
   }
   #video > .content{
      width:850px;
      height:530px;
      text-align: center;
      color:#48545e;
      font-size:25px;
  }
   #video > .content > strong{
      color: #48545e;
      font-size:18px;
      top:-45px;
      font-weight: 400;
      position: relative;
   }
   #product{
      width:100%;
      display: flex;
      justify-content: center;
      height:270px !important;
      background-image: url('../images/product-banner.jpg');
      background-size:100% 85%;
      background-position-y:38px;
      background-repeat: no-repeat;
      position: relative;
   }
   #product > h1{
      color: #2f99e6;
      top:20px;
      position: relative;
    
   }

   #product > ul{
      color: #48545e;
      top:160px;
      right:0;
      margin-right: 3px;
      font-size:10px;
      position: absolute;
      padding-left:20px;
      list-style-type: none;
      line-height: 29px;
   }

   #purpose{
      width:100%;
      min-height:1000px;
      position: relative;
      z-index: 1;
   }

   #purpose > .image{
      width:85% !important;
      height:550px;
      background-image: url('../images/product-bg2.png');
      background-size: 100% 100%;
      right:0 !important;
      top:0;
      position: absolute;
   }

   #purpose > .image > img{
      width:160px;
      height:170px;
      right: 20px;
      position: absolute;
   }

   #purpose > .image > .block{
      width:100%;
      height:950px;
      z-index:30;
      bottom: 0;
      position: relative;
   }
    
   #purpose > .image >.block > img{
      width:160px;
      height:170px;
      position: absolute;
      bottom:20px;
      right: 20px;
   }
   #purpose > .image >.block> span{
      position: absolute;
      top:440px;
      width:96%;
      line-height:29px;
      color:#767e81;
      display: block;
      margin:0 auto;
      padding:0 10px;
      text-align: right;
      letter-spacing:2px;
   }
   #purpose > .image >.block> span > h4{
      text-align: right;
      position: relative;
   }
   #purpose > .text{
      width:85%;
      height:550px;
      /* background-image: url('../images/product-bg1.png'); */
      background: linear-gradient(90deg, rgb(255, 255, 255), rgba(225, 244, 245, 1));
      background-size: 100% 50%;
      z-index: 4;
      bottom:20px;
      left:0;
      position: absolute;
   }
   #purpose > .text > span > h4{
      color:#767e81;
      text-align:left;
      left:20px;
      position: relative;
   }
   #purpose > .text > span:nth-child(1){
      width:77%;
      top:-320px;
      display: block;
      position: relative;
      line-height:29px;
      color:#767e81;     
   }
   #purpose > .text > span:nth-child(1) > p{
      padding:0 20px;
   }
   #purpose > .text > span:nth-child(1) > ul{
      padding:0 40px; 
   }
   #purpose > .text > span:nth-child(2){
      width:100%;
      left:0;
      bottom:20px ;
      position: absolute;
    
   }
   #purpose > .text > span:nth-child(2) > p{
      padding:0 20px;
      width:59%;
      color:#767e81;
      line-height:29px;   
   }
   #source{
      width:100% !important;
      min-height:800px !important;
      position: relative;
   }
    #source > img{
      top:0;
      width:180px !important;
      height:190px;
      position: absolute !important;
      z-index: 2 !important;
   }
   #source > #source-group-bg{
      width:100% !important;
      height:300px !important;
      position: absolute;
      bottom:0;
   }
   #source > #source-group-bg .sign{
      bottom: 40px !important;
      width: 280px !important;
      height: 20px !important;
      right: 10% !important;
      z-index: 400 !important;
      position: absolute !important;
      transform: translate(50%, 0%);
   }
   #source >#source-group-bg > img:nth-child(2){
      bottom:30px !important;
      left:30px;
      height:85%;
      width:85% !important;
      position: absolute !important;
   }
   #source >#source-group-bg > img:nth-child(1){
      position: absolute !important;
      z-index:100 !important;
      bottom:30px;
      width:150px;
      right:0;
      height:150px;
  }

   #source >#source-group-bg > img:nth-child(3){
      bottom:40px !important;
      width: 280px !important;
      height:175px !important;
      right:2% !important;
      z-index:400 !important;
      position: absolute !important;
   } 
   #source > ul{
      width:90% !important;
      margin-top:160px !important;
      left:30px !important;
      position: absolute !important;
      z-index: 300 !important;
      color:#48545e;

   }
   #source > ul >li{
      margin-top:10px !important;
      line-height:40px;
   }

   #source > .title{ 
      top: 50px !important;
      right: 0 !important;
      position: absolute !important;
   }

   #source > .title > h1 {
      font-size:16px !important;
      right:50px !important;
      font-size:25px !important;
      position: absolute;
   }
   #source > .title > img:nth-child(1) {
      width: 60px !important;
      height: 72px !important;
      left:75px !important;
      top:-13px !important;
      position: absolute;
   }

   #source > .title > img:nth-child(2) {
      width: 107px !important;
      height:30px !important;
      left:103px !important;
      bottom:55px !important;
      position: absolute !important;
  }
   #source > #source-group-bg >.area{
      left: 0 !important;
      position: absolute;
      width: 220px !important;
      height: 70px;
      text-align: right !important;
      color: #f8fbf7;
      background-color: #90c685;
      font-size: 25px;
      font-weight: 500;
      padding-top:10px;
      padding-right:20px;
      bottom: 170px !important;
      z-index: 40;
   }

   #footer{
      height:590px !important;
   }
  
   #footer > div:nth-child(1){
      width:55% !important;
      height:120% !important; 
      padding: 20px 0 0 5% !important;

   }
   #footer > div:nth-child(2){
      width:8% !important;
      height:120% !important; 

   }
   #footer > div:nth-child(3){
      width:37% !important;
      height:120% !important; 
      float:left;
      background-color: #ff9d52;
      text-align: center;
      position: relative;
   }
   #footer > div:nth-child(3)> img{
      width:110px;
      height:130px;
      margin-top:260px;
   }
   #footer > div:nth-child(3)> ul{
      list-style-type: none;
      color:white;
      font-size:25px;
      font-weight:500;
   }
  
   #footer > div:nth-child(4){
      height:30px !important;
   }
   #footer > div:nth-child(5){
      width:30% !important;
      height:30px !important;;
      float:left;
      background-color: #f97510;
   }
   #footer > div:nth-child(6){
      height:50px !important;
      width:37% !important;
      bottom:-148px !important;
   }
   #footer > div:nth-child(7){
      height:70px !important;
   }
  
   #footer >.box-1 > .block{
      width:50% !important;
      height:30px !important;
      bottom: 0;
      right:0;
      position: absolute;
      background-color: #f97510;
   }
   #footer > div:nth-child(1) > p{
      margin-top:10px !important;
      font-size:15px;
      top:5px !important;
      position: relative;
   }
   #footer > div:nth-child(1) > h3{
      font-size:15px;
   }
   #footer > div:nth-child(1) > .group-logo{
      list-style-type: none;
      margin-top:30px;
      height:100px;
      right:9px;
      position: relative;
   }
   #footer > div:nth-child(1) > .group-logo > li{
      float:left;
      border:3px solid rgb(253, 251, 251);
      padding:2px;
      border-radius: 50%;
      width:35px;
      height:35px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left:5px;
   }
   #footer > div:nth-child(1) > .group-logo > li > a > img{
      width:22px;
      height:22px;
      position: relative;
      top:1px;
   }
   #footer > div:nth-child(1) > .group-logo > li:nth-child(3) > a > img{
     width:28px;
     height:17px;
     position: relative;
     top:2px;
  }
   #footer > div:nth-child(1) > .contact{
      margin-top:10px !important;
      list-style-type: none;
      clear: both;
      font-size:15px !important;
      font-weight:500;
      line-height: 30px;
   }
  
   #footer > div:nth-child(1) > .qrcode{
      list-style-type: none;
      margin-top:10px !important;
      font-size:15px !important;
      font-weight:500;
    
   }
  
    
   #footer > div:nth-child(1) > .contact > li{
      line-height:30px;
   }
  
   #footer > div:nth-child(1) > .qrcode > li{
      line-height:20px !important;
   }
  
  #footer > div:nth-child(1) > .qrcode > li:nth-child(3){
     top:30px;
     position: relative;
  }
  
   #footer > .box-7 > .regular{
     color: #ededed;
     text-align: left;
     margin-top:1%;
     text-indent:10% ;
  }
  
   #footer > .box-7 > .gov{
      text-align:center; 
      text-indent: 0% !important;
  }
  
  
  #footer > .box-7 > .gov > a{
     color:#E2E2E2;
     text-decoration: none;
  }

  #content{
      position: absolute;
      top:48px;
      display: none;
  }


/**  ------  **/

#about-us-title,#product-title,#contact-title{
  cursor: pointer;
}
#container{
   width:100%;
   min-height:500px;
}
#header{
   width: 100%;
   height:119px;
   border-bottom:1px solid #ededed;
   box-shadow: 1px 1px 5px #e7e7e7;
}

#container > #header > ul {
   width:600px;
   height:109px;
   float:right;
   list-style-type: none;
   display: flex;
   align-items: center;
   margin-right:8%;
} 
#container > #header > ul > li:nth-child(1){
   background-color: #d354bf;
} 
#container > #header > ul > li:nth-child(2){
   background-color: #2f99e6;
} 
#container > #header > ul > li:nth-child(3){
   background-color: #ff9d52;
} 

#about-us > .text{
   width:58%;
   background-color: rgba(255, 255, 255, 0.5); 
   opacity: 0.9; 
   color:#48545e;
   float: right;
   position: relative;
   z-index: 20 !important;
}


#about-us > .text > .block{
   width:220px;
   height: 70px;
   position: absolute;
}

#about-us > .text > .text-block:nth-child(2)> .block:nth-child(1){
   background-color: #daf9d3;
   z-index: 10 !important;
   position: absolute;
   left:1px;
   width:248px;
   height:75px;

}

#about-us > .text > .text-block:nth-child(2)> .block:nth-child(2){
   background-color: #90c685;
   z-index: 2 !important;
   position: absolute;
   left:-50px; 
   top:-40px;
   width:248px;
   height:70px;
}


#video{
   width:100%;
   height:780px;
   background-image: url('../images/video-bg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
   align-items:start;
}

#video > .content{
   width:850px;
   height:530px;
   text-align: center;
   color:#48545e;
   font-size:25px;
}
#video > .content > video{
  float:left;
}

#source{
   width:100%;
   height:700px;
   position: relative;
}

#source > .title{
   top:70px;
   width:270px;
   height:120px;
   right:10%;
   position: absolute;
}
#source > .title > img:nth-child(1){
   width:80px;
   height:95px;
   left:20px;
   position: absolute;
}
#source > .title > img:nth-child(2){
   width:152px;
   height:50px;
   left:65px;
   bottom:15px;
   position: absolute;
}
#source > .title > h1{
   right:0;
   top:-5px;
   position: absolute;
   letter-spacing:5px;
   color:#48545e;
   font-size:45px;
   font-weight:700;
}

#footer{
   width:100%;
   height:850px;
   position: relative;
}

#footer > div:nth-child(1){
   width:41%;
   height:750px;
   float:left;
   position: relative;
   padding:60px 0 0 5%;
   box-sizing: border-box;
   color:white;
   background-image: url('../images/footer-bg1.png');
}
#footer > div:nth-child(2){
   width:23%;
   height:750px;
   float:left;
   background-image: url('../images/footer-bg3.png');
}
#footer > div:nth-child(3)> img{
   width:110px;
   height:130px;
   margin-top:260px;
}
#footer > div:nth-child(3)> ul{
   list-style-type: none;
   color:white;
   font-size:25px;
   font-weight:500;
}

#footer > div:nth-child(4){
   width:33%;
   height:80px;
   float:left;
   background-image: url('../images/footer-bg4.png');
}
#footer > div:nth-child(5){
   width:31%;
   height:80px;
   float:left;
   background-color: #f97510;
}
#footer > div:nth-child(6){
   width:36%;
   height:130px;
   float:left;
   right:0;
   bottom:80px;
   position: absolute;
   background-image: url('../images/footer-bg2.png');
}
#footer > div:nth-child(7){
   width:100%;
   height:80px;
   float:left;

   background-color:#22324b;
}

#footer >.box-1 > .block{
   width:30%;
   height:50px;
   bottom: 0;
   right:0;
   position: absolute;
   background-color: #f97510;
}
#footer > div:nth-child(1) > p{
   margin-top:30px;
   font-size:25px;
   top:15px;
   position: relative;
}
#footer > div:nth-child(1) > h3{
   font-size:32px;
}
#footer > div:nth-child(1) > .group-logo{
   list-style-type: none;
   margin-top:20px;
   height:100px;
   right:9px;
   position: relative;
}
#footer > div:nth-child(1) > .shop-logo{
   height: 50px;
   margin: 20px 0px 20px 0px;
}
#footer > div:nth-child(1) > .group-logo > li{
   float:left;
   border:3px solid rgb(253, 251, 251);
   padding:2px;
   border-radius: 50%;
   width:35px;
   height:35px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left:5px;
}
#footer > div:nth-child(1) > .group-logo > li > a > img{
   width:22px;
   height:22px;
   position: relative;
   top:1px;
}
#footer > div:nth-child(1) > .group-logo > li:nth-child(3) > a > img{
  width:28px;
  height:17px;
  position: relative;
  top:2px;
}
#footer > div:nth-child(1) > .contact{
   margin-top:30px;
   list-style-type: none;
   clear: both;
   font-size:25px;
   font-weight:500;
}

#footer > div:nth-child(1) > .qrcode{
   list-style-type: none;
   margin-top:30px;
   font-size:18px;
   font-weight:500;
}

 
#footer > div:nth-child(1) > .contact > li{
   line-height:30px;
}

#footer > div:nth-child(1) > .qrcode > li{
   line-height:30px;
}

#footer > div:nth-child(1) > .qrcode > li:nth-child(3){
  top:30px;
  position: relative;
}

#footer > .box-7 > .regular{
  color: #ededed;
  text-align: left;
  margin-top:1%;
  text-indent:10% ;
}

#footer > .box-7 > .gov{
   text-align:center; 
   text-indent: 0% !important;
}


#footer > .box-7 > .gov > a{
  color:#E2E2E2;
  text-decoration: none;
}

}






































@media (min-width: 768px) and (max-width: 992px){
   
   .swiper-container {
      width: 100%;
      height: 350px !important;
    }
    #header{
      display: flex;
      align-items: center;
   }
   #container > #header > img {
      width:120px  !important;
      height:119px  !important;
      margin-left:10px !important;
   } 
   #container > #header > ul {
      width:460px !important;
      height:89px !important;
      margin-left:15% !important;
   } 
   #container > #header > ul > li{
      width:130px;
      font-size:12px;
      color:white;
      font-weight:700;
      height:35px;
      line-height:35px;
      float:left;
      text-align: center;
      margin:0 40px;
      list-style-type: none;
   } 

   #container > #header > img {

      margin-left:1px !important;
  } 
   .swiper-container {
      width: 100%;
      height: 170px;
}
   #about-us{
      min-height:1000px;
      background-size: 100% 50%;
      position: relative;  
      width:100%;
      background-image: url('../images/funny.png');
      background-repeat: no-repeat;
   }

   #about-us > h1{
      top:15px !important;
      text-align: center;
      font-size:20px;
      color:#d354bf;
      position: relative;
   }

   #about-us > .summay{
      font-size:25px;
      width:150px;
      top:40px;
      color:#0ca2ba;
      left:55%;
      text-align: right;
      font-weight: 100;
      position: relative;
   }
   #about-us > .text{
      width:100%;
      min-height:800px;
      margin-top:220px;
      position: relative;
      background-color: #a5e1eb;
      opacity: 0.9; 
      color:#48545e;
      float: right;
      position: relative;
      z-index:20;
   }
   #about-us > .text  > .text-block > .text-p{
      z-index: 15 !important;
   }
   #about-us > .text  > .text-block> .block:nth-child(1){

      width:200px !important;
      height:70px !important;
      z-index: 10 !important;
      position: absolute;
      background-color: #ffe7e5 !important;

   }
   #about-us > .text  > .text-block> .block:nth-child(2){
      width:180px !important;
      height:70px !important;
      z-index: 1 !important;
      top:-20px !important;
      position: absolute;
      background-color: #fc847a !important;
   }

   #about-us > .text  > .text-block:nth-child(2)> .block:nth-child(1){
      width:200px !important;
      height:70px !important;
      top:0 !important;
      left:10px !important;
      position: absolute;
      z-index: 3 !important;
      background-color: #daf9d3 !important;
   

   }
   #about-us > .text > .text-block:nth-child(2)>.block:nth-child(2){
      top:-20px !important;
      width:220px !important;
      height:70px !important;
      z-index: 2 !important;
      background-color: #90c685 !important;
   }

   #about-us > .text > .text-block{
      margin:0 auto;
      width:92% !important;
      min-height: 280px !important;
      background-color: rgba(231, 228, 228, 0.5) !important; 
      opacity: 0.9 !important;     
  }

  #about-us > .text > .text-block> .block:nth-child(1){
   width:248px;
   height:75px;
   background-color: #ffe7e5;
   z-index: 10 !important;
   left:0; 
   position: absolute;

}
#about-us > .text> .text-block > .block:nth-child(2){
    width:248px;
    height:70px;
    background-color: #fc847a;
    z-index: 1 !important;
    top:-50px;
    left:44px; 
    position: absolute;
}


  #about-us > .text > .text-block > .text-p1{
   z-index: 200 !important;
   position: relative;
   padding:0 13px;
   line-height: 38px;
   font-weight: 400 !important;
  }
  #about-us > .text > .text-block > .text-p2{
   z-index:300 !important;
   position: relative;
   padding:0 13px;
   min-height:300px;
   line-height: 38px;
   font-weight: 400 !important;
  }

  #about-us > .text > p{
   letter-spacing:3px !important;
   line-height: 38px;
   font-weight: 400 !important;
   background-color: #f9fdfd !important;
   opacity: 0.9;
   padding-top:20px;
   margin:0 auto;
   padding-left:10px;
   border:2px solid #f9fdfd !important;
   padding-right:10px;
   box-sizing: border-box;
   width:92% !important;
   height:200px;
  }

  #about-us > .text > .text-block{
   z-index: 999 !important; 
   position: relative;
   min-height: 80px;
  }

  
  #about-us > .text > .text-block-l{
   background-color: #f9fdfd !important;
   opacity: 0.9;
   bottom:1px;
   position: relative;
  }

  #about-us > .text > div >.text-p2> p > .title {
   font-size: 23px;
   font-weight: 800;
  }

  #about-us > .text > div >.text-p1> p > .title{

   font-size:23px;
   font-weight: 800;
  }


#plv_74135f2616df44eacc8dafcd358579c8_7{
   height:300px;
   margin-top:130px;
   display: flex;
   justify-content: center;
}

.plv-player-container{
   left:10px;
   width:400px !important;
   position: relative;
   text-align: center !important;
   background-color: #ffffff !important;
}

.plv-player-container .plv-player-skin{
   top:10px !important;
}
.plv-player-panel {
   position: absolute;
   width: 100% !important;
   height: 80%;
   top: 0;
   left: 100px;
   overflow: hidden;
}

.plv-player-container .plv-player-skin{
   top:30px;
}

  #video{
      width:100%;
      height:350px !important;
      display: flex;
      align-items: center !important;
   }

   #video > .content{
      width:850px;
      height:530px;
      text-align: center;
      color:#48545e;
      font-size:25px;
  }
  

   #video > .content > strong{
      color: #48545e;
      font-size:18px;
      top:-45px;
      font-weight: 400;
      position: relative;
   }
 

   #product{
      width:100%;
      display: flex;
      justify-content: center;
      height:270px !important;
      background-image: url('../images/product-banner.jpg');
      background-size:100% 75%;
      background-position-y:55px;
      background-repeat: no-repeat;
      position: relative;
   }
   #product > h1{
      color: #2f99e6;
      top:30px;
      position: relative;
    
   }

   #product > ul{
      color: #48545e;
      top:160px;
      right:0;
      margin-right: 3px;
      font-size:10px;
      position: absolute;
      padding-left:20px;
      list-style-type: none;
      line-height: 29px;
   }

   #purpose{
      width:100%;
      min-height:1000px;
      position: relative;
      z-index: 1;
   }

   #purpose > .image{
      width:85% !important;
      height:550px;
      background-image: url('../images/product-bg2.png');
      background-size: 100% 100%;
      right:0 !important;
      top:0;
      position: absolute;
   }

   #purpose > .image > img{
      width:160px;
      height:170px;
      right: 20px;
      position: absolute;
   }

   #purpose > .image > .block{
      width:100%;
      height:950px;
      z-index:30;
      bottom: 0;
      position: relative;
   }
    
   #purpose > .image >.block > img{
      width:160px;
      height:170px;
      position: absolute;
      bottom:20px;
      right:20px;
   }
   #purpose > .image >.block> span{
      position: absolute;
      top:440px;
      width:96%;
      line-height:29px;
      color:#767e81;
      display: block;
      margin:0 auto;
      padding:0 10px;
   }
   #purpose > .image >.block> span > h4{
      text-align: right;
      position: relative;
   }

   #purpose > .text{
      width:85%;
      height:550px;
      /* background-image: url('../images/product-bg1.png'); */
      background: linear-gradient(90deg, rgb(255, 255, 255), rgba(225, 244, 245, 1));
      background-size: 100% 50%;
      z-index: 4;
      bottom:20px;
      left:0;
      position: absolute;
   }
   
   #purpose > .text > span > h4{
      color:#767e81;
      text-align:left;
      left:20px;
      position: relative;
   }

   #purpose > .text > span:nth-child(1){
      width:77%;
      top:-320px;
      display: block;
      position: relative;
      line-height:29px;
      color:#767e81;
      
   }

   #purpose > .text > span:nth-child(1) > p{
      padding:0 20px;

      
   }
   #purpose > .text > span:nth-child(1) > ul{
      padding:0 40px;
      
   }

   #purpose > .text > span:nth-child(2){
      width:100%;
      left:0;
      bottom:80px;
      position: absolute;
    
   }
   #purpose > .text > span:nth-child(2) > p{
      padding:0 20px;
      width:59%;
      color:#767e81;
      line-height:29px;   
   }
   #source{
      width:100% !important;
      min-height:750px !important;
      position: relative;
   }
    #source > img{
      top:0;
      width:180px !important;
      height:190px;
      position: absolute !important;
      z-index: 2 !important;
   }
   #source > #source-group-bg{
      width:100% !important;
      height:300px !important;
      position: absolute;
      bottom:0;
   }
   #source > #source-group-bg .sign{
      bottom: 35px !important;
      width: 280px !important;
      height: 20px !important;
      right: 10% !important;
      z-index: 400 !important;
      position: absolute !important;
      transform: translate(50%, 0%);
   }
   #source >#source-group-bg > img:nth-child(2){
      bottom:30px !important;
      left:30px;
      height:85%;
      width:85% !important;
      position: absolute !important;
   }
   #source >#source-group-bg > img:nth-child(1){
      position: absolute !important;
      z-index:100 !important;
      bottom:30px;
      width:150px;
      right:0;
      height:150px;
  }

   #source >#source-group-bg > img:nth-child(3){
      bottom:35px !important;
      width: 280px !important;
      height:175px !important;
      right:2% !important;
      z-index:400 !important;
      position: absolute !important;
   } 
   #source > ul{
      width:90% !important;
      margin-top:160px !important;
      left:30px !important;
      position: absolute !important;
      z-index: 300 !important;
      color:#48545e;

   }
   #source > ul >li{
      margin-top:10px !important;
      line-height:40px;
   }

   #source > .title{ 
      top: 50px !important;
      right: 0 !important;
      position: absolute !important;
   }

   #source > .title > h1 {
      font-size:16px !important;
      right:50px !important;
      font-size:25px !important;
      position: absolute;
   }
   #source > .title > img:nth-child(1) {
      width: 60px !important;
      height: 72px !important;
      left:75px !important;
      top:-13px !important;
      position: absolute;
   }

   #source > .title > img:nth-child(2) {
      width: 107px !important;
      height:30px !important;
      left:103px !important;
      bottom:55px !important;
      position: absolute !important;
  }
   #source > #source-group-bg >.area{
      left: 0 !important;
      position: absolute;
      width: 220px !important;
      height: 70px;
      text-align: right !important;
      color: #f8fbf7;
      background-color: #90c685;
      font-size: 25px;
      font-weight: 500;
      padding-top:10px;
      padding-right:20px;
      bottom: 170px !important;
      z-index: 40;
   }

   #footer{
      height:590px !important;
   }
  
   #footer > div:nth-child(1){
      width:55% !important;
      height:100% !important; 
      padding: 20px 5% 0 5% !important;

   }
   #footer > div:nth-child(2){
      width:8% !important;
      height:100% !important; 

   }
   #footer > div:nth-child(3){
      width:37% !important;
      height:100% !important; 
      float:left;
      background-color: #ff9d52;
      text-align: center;
      position: relative;
   }
   #footer > div:nth-child(3)> img{
      width:110px;
      height:130px;
      margin-top:260px;
   }
   #footer > div:nth-child(3)> ul{
      list-style-type: none;
      color:white;
      font-size:25px;
      font-weight:500;
   }
  
   #footer > div:nth-child(4){
      height:30px !important;
   }
   #footer > div:nth-child(5){
      width:30% !important;
      height:30px !important;;
      float:left;
      background-color: #f97510;
   }
   #footer > div:nth-child(6){
      height:50px !important;
      width:37% !important;
      bottom:-30px !important;
   }
   #footer > div:nth-child(7){
      height:70px !important;
   }
  
   #footer >.box-1 > .block{
      width:50% !important;
      height:30px !important;
      bottom: 0;
      right:0;
      position: absolute;
      background-color: #f97510;
   }
   #footer > div:nth-child(1) > p{
      margin-top:10px !important;
      font-size:15px;
      top:5px !important;
      position: relative;
   }
   #footer > div:nth-child(1) > h3{
      font-size:15px;
   }
   #footer > div:nth-child(1) > .group-logo{
      list-style-type: none;
      margin-top:30px;
      height:50px;
      right:9px;
      position: relative;
   }
   #footer > div:nth-child(1) > .group-logo > li{
      float:left;
      border:3px solid rgb(253, 251, 251);
      padding:2px;
      border-radius: 50%;
      width:35px;
      height:35px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left:5px;
   }
   #footer > div:nth-child(1) > .group-logo > li > a > img{
      width:22px;
      height:22px;
      position: relative;
      top:1px;
   }
   #footer > div:nth-child(1) > .group-logo > li:nth-child(3) > a > img{
     width:28px;
     height:17px;
     position: relative;
     top:2px;
  }
   #footer > div:nth-child(1) > .contact{
      margin-top:10px !important;
      list-style-type: none;
      clear: both;
      font-size:15px !important;
      font-weight:500;
      display: flex;
      justify-content: space-between;
   }
  
   #footer > div:nth-child(1) > .qrcode{
      list-style-type: none;
      margin-top:10px !important;
      font-size:15px !important;
      font-weight:500;
    
   }
  
    
   #footer > div > .contact > div > li{
      line-height:30px;
   }
  
   #footer > div:nth-child(1) > .qrcode > li{
      line-height:20px !important;
   }
  
  #footer > div:nth-child(1) > .qrcode > li:nth-child(3){
     top:30px;
     position: relative;
  }
  
   #footer > .box-7 > .regular{
     color: #ededed;
     text-align: left;
     margin-top:1%;
     text-indent:10% ;
  }
  
   #footer > .box-7 > .gov{
      text-align:center; 
      text-indent: 0% !important;
  }
  
  
  #footer > .box-7 > .gov > a{
     color:#E2E2E2;
     text-decoration: none;
  }

  #content{
      position: absolute;
      top:48px;
      display: none;
  }


/**  ------  **/

#about-us-title,#product-title,#contact-title{
  cursor: pointer;
}
#container{
   width:100%;
   min-height:500px;
}
#header{
   width: 100%;
   height:119px;
   border-bottom:1px solid #ededed;
   box-shadow: 1px 1px 5px #e7e7e7;
}

#container > #header > ul {
   width:600px;
   height:109px;
   float:right;
   list-style-type: none;
   display: flex;
   align-items: center;
   margin-right:8%;
} 

#container > #header > ul > li:nth-child(1){
   background-color: #d354bf;
} 
#container > #header > ul > li:nth-child(2){
   background-color: #2f99e6;
} 
#container > #header > ul > li:nth-child(3){
   background-color: #ff9d52;
} 
#about-us > .text > .block{
   width:220px;
   height: 70px;
   position: absolute;
}

#about-us > .text > .text-block:nth-child(2)> .block:nth-child(1){
   background-color: #daf9d3;
   z-index: 10 !important;
   position: absolute;
   left:1px;
   width:248px;
   height:75px;

}

#about-us > .text > .text-block:nth-child(2)> .block:nth-child(2){
   background-color: #90c685;
   z-index: 2 !important;
   position: absolute;
   left:-50px; 
   top:-40px;
   width:248px;
   height:70px;
}


#video{
   width:100%;
   height:780px;
   background-image: url('../images/video-bg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
   align-items:start;
}

#video > .content{
   width:850px;
   height:530px;
   text-align: center;
   color:#48545e;
   font-size:25px;
}
#video > .content > video{
  float:left;
}

#source{
   width:100%;
   height:700px;
   position: relative;
}

#source > .title{
   top:70px;
   width:270px;
   height:120px;
   right:10%;
   position: absolute;
}
#source > .title > img:nth-child(1){
   width:80px;
   height:95px;
   left:20px;
   position: absolute;
}
#source > .title > img:nth-child(2){
   width:152px;
   height:50px;
   left:65px;
   bottom:15px;
   position: absolute;
}
#source > .title > h1{
   right:0;
   top:-5px;
   position: absolute;
   letter-spacing:5px;
   color:#48545e;
   font-size:45px;
   font-weight:700;
}

#footer{
   width:100%;
   height:850px;
   position: relative;
}

#footer > div:nth-child(1){
   width:41%;
   height:690px;
   float:left;
   position: relative;
   padding:60px 0 0 5%;
   box-sizing: border-box;
   color:white;
   background-image: url('../images/footer-bg1.png');
}
#footer > div:nth-child(2){
   width:23%;
   height:690px;
   float:left;
   background-image: url('../images/footer-bg3.png');
}
#footer > div:nth-child(3)> img{
   width:110px;
   height:130px;
   margin-top:260px;
}
#footer > div:nth-child(3)> ul{
   list-style-type: none;
   color:white;
   font-size:25px;
   font-weight:500;
}

#footer > div:nth-child(4){
   width:33%;
   height:80px;
   float:left;
   background-image: url('../images/footer-bg4.png');
}
#footer > div:nth-child(5){
   width:31%;
   height:80px;
   float:left;
   background-color: #f97510;
}
#footer > div:nth-child(6){
   width:36%;
   height:130px;
   float:left;
   right:0;
   bottom:80px;
   position: absolute;
   background-image: url('../images/footer-bg2.png');
}
#footer > div:nth-child(7){
   width:100%;
   height:80px;
   float:left;

   background-color:#22324b;
}

#footer >.box-1 > .block{
   width:30%;
   height:50px;
   bottom: 0;
   right:0;
   position: absolute;
   background-color: #f97510;
}
#footer > div:nth-child(1) > p{
   margin-top:30px;
   font-size:25px;
   top:15px;
   position: relative;
}
#footer > div:nth-child(1) > h3{
   font-size:32px;
}
#footer > div:nth-child(1) > .group-logo{
   list-style-type: none;
   margin-top:30px;
   height:50px;
   right:9px;
   position: relative;
}
#footer > div:nth-child(1) > .group-logo > li{
   float:left;
   border:3px solid rgb(253, 251, 251);
   padding:2px;
   border-radius: 50%;
   width:35px;
   height:35px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left:5px;
}
#footer > div:nth-child(1) > .group-logo > li > a > img{
   width:22px;
   height:22px;
   position: relative;
   top:1px;
}
#footer > div:nth-child(1) > .group-logo > li:nth-child(3) > a > img{
  width:28px;
  height:17px;
  position: relative;
  top:2px;
}
#footer > div:nth-child(1) > .contact{
   margin-top:30px;
   list-style-type: none;
   clear: both;
   font-size:25px;
   font-weight:500;
}

#footer > div:nth-child(1) > .qrcode{
   list-style-type: none;
   margin-top:30px;
   font-size:18px;
   font-weight:500;
}

 
#footer > div:nth-child(1) > .contact > li{
   line-height:30px;
}

#footer > div:nth-child(1) > .qrcode > li{
   line-height:30px;
}

#footer > div:nth-child(1) > .qrcode > li:nth-child(3){
  top:30px;
  position: relative;
}

#footer > .box-7 > .regular{
  color: #ededed;
  text-align: left;
  margin-top:1%;
  text-indent:10% ;
}

#footer > .box-7 > .gov{
   text-align:center; 
   text-indent: 0% !important;
}


#footer > .box-7 > .gov > a{
  color:#E2E2E2;
  text-decoration: none;
}


}













































@media (min-width: 992px) and (max-width: 1200px){
   
   .swiper-container {
      width: 100%;
      height: 420px !important;
   }
   #header{
      display: flex;
      align-items: center;
   }
   #container > #header > img {
      width:120px  !important;
      height:119px  !important;
      margin-left:10px !important;
   } 
   #container > #header > ul {
      width:510px !important;
      height:89px !important;
      margin-left:18% !important;
   } 
   #container > #header > ul > li{
      width:85px !important;
      height:35px !important;
      line-height: 35px !important;
      margin-left:15%;
      font-size: 12px !important;
   } 

   #container > #header > img {

      margin-left:1px !important;
  } 
   .swiper-container {
      width: 100%;
      height: 170px;
}
   #about-us{
      min-height:1000px !important;
      background-size: 100% 55%;
      position: relative;  
   }

   #about-us{
      width:100%;
      background-image: url('../images/funny.png');
      background-repeat: no-repeat;
      position: relative;
  }
   #about-us > h1{
      top:15px !important;
      text-align: center;
      font-size:20px;
      color:#d354bf;
      position: relative;
   }

   #about-us > .summay{
      font-size:25px;
      width:150px;
      top:40px;
      color:#0ca2ba;
      left:55%;
      text-align: right;
      font-weight: 100;
      position: relative;

}
   #about-us > .text{
      width:100% !important;
      min-height:800px;
      margin-top:290px;
      position: relative;
      background-color: #a5e1eb !important;
   }

   #about-us > .text  > .text-block > .text-p{
      z-index: 15 !important;
   }
   #about-us > .text  > .text-block> .block:nth-child(1){

      width:200px !important;
      height:70px !important;
      z-index: 10 !important;
      position: absolute;
      background-color: #ffe7e5 !important;

   }
   #about-us > .text  > .text-block> .block:nth-child(2){
      width:180px !important;
      height:70px !important;
      z-index: 1 !important;
      top:-20px !important;
      position: absolute;
      background-color: #fc847a !important;
   }

   #about-us > .text  > .text-block:nth-child(2)> .block:nth-child(1){
      width:200px !important;
      height:70px !important;
      top:0 !important;
      left:10px !important;
      position: absolute;
      z-index: 3 !important;
      background-color: #daf9d3 !important;
   

   }
   #about-us > .text > .text-block:nth-child(2)>.block:nth-child(2){
      top:-20px !important;
      width:220px !important;
      height:70px !important;
      z-index: 2 !important;
      background-color: #90c685 !important;
   }

   #about-us > .text > .text-block{
      margin:0 auto;
      width:92% !important;
      min-height: 280px !important;
      background-color: rgba(231, 228, 228, 0.5) !important; 
      opacity: 0.9 !important;     
  }

  #about-us > .text > .text-block> .block:nth-child(1){
   width:248px;
   height:75px;
   background-color: #ffe7e5;
   z-index: 10 !important;
   left:0; 
   position: absolute;

}
#about-us > .text> .text-block > .block:nth-child(2){
    width:248px;
    height:70px;
    background-color: #fc847a;
    z-index: 1 !important;
    top:-50px;
    left:44px; 
    position: absolute;
}


  #about-us > .text > .text-block > .text-p1{
  
   z-index: 200 !important;
   position: relative;
   padding:0 13px;

   line-height: 38px;
   font-weight: 400 !important;
  }
  #about-us > .text > .text-block > .text-p2{
   z-index:300 !important;
   position: relative;
   padding:0 13px;
   min-height:300px;
   line-height: 38px;
   font-weight: 400 !important;
  }

  #about-us > .text > p{
   letter-spacing:3px !important;
   line-height: 38px;
   font-weight: 400 !important;
   background-color: #f9fdfd !important;
   opacity: 0.9;
   padding-top:20px;
   margin:0 auto;
   padding-left:10px;
   border:2px solid #f9fdfd !important;
   padding-right:10px;
   box-sizing: border-box;
   width:92% !important;
   height:200px;
  }

  #about-us > .text > .text-block{
   z-index: 999 !important; 
   position: relative;
   min-height: 80px;
  }

  
  #about-us > .text > .text-block-l{
   background-color: #f9fdfd !important;
   opacity: 0.9;
   bottom:1px;
   position: relative;
  }

  #about-us > .text > div >.text-p2> p > .title {
   font-size: 23px;
   font-weight: 800;
  }

  #about-us > .text > div >.text-p1> p > .title{

   font-size:23px;
   font-weight: 800;
  }


  #plv_74135f2616df44eacc8dafcd358579c8_7{
   height:300px;
   margin-top:130px;
   display: flex;
   justify-content: center;
}


  #video{
      width:100%;
      height:350px !important;
      display: flex;
      align-items: center !important;
   }

   #video > .content{
      width:850px;
      height:530px;
      text-align: center;
      color:#48545e;
      font-size:25px;
  }
  

   #video > .content > strong{
     
      color: #48545e;
      font-size:18px;
      top:-50px;
      font-weight: 400;
      position: relative;
   }
   .plv-player-container{
      top:-12px;
      left:15px;
      width:520px !important;
      position: relative;
      background-color: #ffffff !important;
   }

   .plv-player-panel {
      position: absolute;
      width: 90% !important;
      height: 100% !important;
      top: 0;
      left: 0;
      overflow: hidden;
  }

  .plv-player-container .plv-player-skin{
      top:10px !important;
  }

   #product{
      width:100%;
      display: flex;
      justify-content: center;
      height:370px !important;
      background-image: url('../images/product-banner.jpg');
      background-size:100% 80%;
      background-position-y:55px;
      background-repeat: no-repeat;
      position: relative;
   }
   #product > h1{
      color: #2f99e6;
      top:30px;
      position: relative;
    
   }

   #product > ul{
      color: #48545e;
      top:160px;
      right:0;
      margin-right: 3px;
      font-size:10px;
      position: absolute;
      padding-left:20px;
      list-style-type: none;
      line-height: 29px;
   }

   #purpose{
      width:100%;
      min-height:1000px;
      position: relative;
      z-index: 1;
   }

   #purpose > .image{
      width:85% !important;
      height:550px;
      background-image: url('../images/product-bg2.png');
      background-size: 100% 100%;
      right:0 !important;
      top:0;
      position: absolute;
   }

   #purpose > .image > img{
      width:160px;
      height:170px;
      right: 20px;
      position: absolute;
   }

   #purpose > .image > .block{
      width:100%;
      height:950px;
      z-index:30;
      bottom: 0;
      position: relative;
   }
    
   #purpose > .image >.block > img{
      width:160px;
      height:170px;
      position: absolute;
      bottom:20px;
      right:20px;
   }
   #purpose > .image >.block> span{
      position: absolute;
      top:440px;
      width:96%;
      line-height:29px;
      color:#767e81;
      display: block;
      margin:0 auto;
      padding:0 10px;
   }
   #purpose > .image >.block> span > h4{
      text-align: right;
      position: relative;
   }

   #purpose > .text{
      width:85%;
      height:550px;
      /* background-image: url('../images/product-bg1.png'); */
      background: linear-gradient(90deg, rgb(255, 255, 255), rgba(225, 244, 245, 1));
      background-size: 100% 50%;
      z-index: 4;
      bottom:20px;
      left:0;
      position: absolute;
   }
   
   #purpose > .text > span > h4{
      color:#767e81;
      text-align:left;
      left:20px;
      position: relative;
   }

   #purpose > .text > span:nth-child(1){
      width:77%;
      top:-320px;
      display: block;
      position: relative;
      line-height:29px;
      color:#767e81;
      
   }

   #purpose > .text > span:nth-child(1) > p{
      padding:0 20px;

      
   }
   #purpose > .text > span:nth-child(1) > ul{
      padding:0 40px;
      
   }

   #purpose > .text > span:nth-child(2){
      width:100%;
      left:0;
      bottom:20px ;
      position: absolute;
    
   }
   #purpose > .text > span:nth-child(2) > p{
      padding:0 20px;
      width:59%;
      color:#767e81;
      line-height:29px;   
   }
   #source{
      width:100% !important;
      min-height:800px !important;
      position: relative;
   }
    #source > img{
      top:0;
      width:180px !important;
      height:190px;
      position: absolute !important;
      z-index: 2 !important;
   }
   #source > #source-group-bg{
      width:100% !important;
      height:300px !important;
      position: absolute;
      bottom:0;
   }
   #source > #source-group-bg .sign{
      bottom: 40px !important;
      width: 280px !important;
      height: 20px !important;
      right: 10% !important;
      z-index: 400 !important;
      position: absolute !important;
      transform: translate(50%, 0%);
   }
   #source >#source-group-bg > img:nth-child(2){
      bottom:30px !important;
      left:30px;
      height:85%;
      width:85% !important;
      position: absolute !important;
   }
   #source >#source-group-bg > img:nth-child(1){
      position: absolute !important;
      z-index:100 !important;
      bottom:30px;
      width:150px;
      right:0;
      height:150px;
  }

   #source >#source-group-bg > img:nth-child(3){
      bottom:50px !important;
      width: 280px !important;
      height:175px !important;
      right:2% !important;
      z-index:400 !important;
      position: absolute !important;
   } 
   #source > ul{
      width:90% !important;
      margin-top:160px !important;
      left:30px !important;
      position: absolute !important;
      z-index: 300 !important;
      color:#48545e;

   }
   #source > ul >li{
      margin-top:10px !important;
      line-height:40px;
   }

   #source > .title{ 
      top: 50px !important;
      right: 0 !important;
      position: absolute !important;
   }

   #source > .title > h1 {
      font-size:16px !important;
      right:50px !important;
      font-size:25px !important;
      position: absolute;
   }
   #source > .title > img:nth-child(1) {
      width: 60px !important;
      height: 72px !important;
      left:75px !important;
      top:-13px !important;
      position: absolute;
   }

   #source > .title > img:nth-child(2) {
      width: 107px !important;
      height:30px !important;
      left:103px !important;
      bottom:55px !important;
      position: absolute !important;
  }
   #source > #source-group-bg >.area{
      left: 0 !important;
      position: absolute;
      width: 220px !important;
      height: 70px;
      text-align: right !important;
      color: #f8fbf7;
      background-color: #90c685;
      font-size: 25px;
      font-weight: 500;
      padding-top:10px;
      padding-right:20px;
      bottom: 170px !important;
      z-index: 40;
   }

   #footer{
      height:590px !important;
   }
  
   #footer > div:nth-child(1){
      width:55% !important;
      height:100% !important; 
      padding: 20px 5% 0 5% !important;
   }
   #footer > div:nth-child(2){
      width:8% !important;
      height:100% !important; 

   }
   #footer > div:nth-child(3){
      width:37% !important;
      height:100% !important; 
      float:left;
      background-color: #ff9d52;
      text-align: center;
      position: relative;
   }
   #footer > div:nth-child(3)> img{
      width:110px;
      height:130px;
      margin-top:260px;
   }
   #footer > div:nth-child(3)> ul{
      list-style-type: none;
      color:white;
      font-size:25px;
      font-weight:500;
   }
  
   #footer > div:nth-child(4){
      height:30px !important;
   }
   #footer > div:nth-child(5){
      width:30% !important;
      height:30px !important;;
      float:left;
      background-color: #f97510;
   }
   #footer > div:nth-child(6){
      height:50px !important;
      width:37% !important;
      bottom:-30px !important;
   }
   #footer > div:nth-child(7){
      height:70px !important;
   }
  
   #footer >.box-1 > .block{
      width:50% !important;
      height:30px !important;
      bottom: 0;
      right:0;
      position: absolute;
      background-color: #f97510;
   }
   #footer > div:nth-child(1) > p{
      margin-top:10px !important;
      font-size:15px;
      top:5px !important;
      position: relative;
   }
   #footer > div:nth-child(1) > h3{
      font-size:15px;
   }
   #footer > div:nth-child(1) > .group-logo{
      list-style-type: none;
      margin-top:30px;
      height:50px;
      right:9px;
      position: relative;
   }
   #footer > div:nth-child(1) > .group-logo > li{
      float:left;
      border:3px solid rgb(253, 251, 251);
      padding:2px;
      border-radius: 50%;
      width:35px;
      height:35px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left:5px;
   }
   #footer > div:nth-child(1) > .group-logo > li > a > img{
      width:22px;
      height:22px;
      position: relative;
      top:1px;
   }
   #footer > div:nth-child(1) > .group-logo > li:nth-child(3) > a > img{
     width:28px;
     height:17px;
     position: relative;
     top:2px;
  }
   #footer > div:nth-child(1) > .contact{
      margin-top:10px !important;
      list-style-type: none;
      clear: both;
      font-size:15px !important;
      font-weight:500;
      display: flex;
      justify-content: space-between;
   }
  
   #footer > div:nth-child(1) > .qrcode{
      list-style-type: none;
      margin-top:10px !important;
      font-size:15px !important;
      font-weight:500;
    
   }
  
    
   #footer > div > .contact > div > li{
      line-height:30px;
   }
  
   #footer > div:nth-child(1) > .qrcode > li{
      line-height:20px !important;
   }
  
  #footer > div:nth-child(1) > .qrcode > li:nth-child(3){
     top:30px;
     position: relative;
  }
  
   #footer > .box-7 > .regular{
     color: #ededed;
     text-align: left;
     margin-top:1%;
     text-indent:10% ;
  }
  
   #footer > .box-7 > .gov{
      text-align:center; 
      text-indent: 0% !important;
  }
  
  
  #footer > .box-7 > .gov > a{
     color:#E2E2E2;
     text-decoration: none;
  }

  #content{
      position: absolute;
      top:48px;
      display: none;
  }


/**  ------  **/

#about-us-title,#product-title,#contact-title{
  cursor: pointer;
}
#container{
   width:100%;
   min-height:500px;
}
#header{
   width: 100%;
   height:119px;
   border-bottom:1px solid #ededed;
   box-shadow: 1px 1px 5px #e7e7e7;
}

#container > #header > ul {
   width:600px;
   height:109px;
   float:right;
   list-style-type: none;
   display: flex;
   align-items: center;
   margin-right:8%;
} 
#container > #header > ul > li{
   width:130px;
   height:45px;
   color:white;
   font-weight:700;
   float:left;
   line-height: 45px;
   text-align: center;
   margin:0 40px;
   list-style-type: none;
} 
#container > #header > ul > li:nth-child(1){
   background-color: #d354bf;
} 
#container > #header > ul > li:nth-child(2){
   background-color: #2f99e6;
} 
#container > #header > ul > li:nth-child(3){
   background-color: #ff9d52;
} 

#about-us > .text{
   width:58%;
   background-color: rgba(255, 255, 255, 0.5); 
   opacity: 0.9; 
   color:#48545e;
   float: right;
   position: relative;
   z-index: 20 !important;
}


#about-us > .text > .block{
   width:220px;
   height: 70px;
   position: absolute;
}

#about-us > .text > .text-block:nth-child(2)> .block:nth-child(1){
   background-color: #daf9d3;
   z-index: 10 !important;
   position: absolute;
   left:1px;
   width:248px;
   height:75px;

}

#about-us > .text > .text-block:nth-child(2)> .block:nth-child(2){
   background-color: #90c685;
   z-index: 2 !important;
   position: absolute;
   left:-50px; 
   top:-40px;
   width:248px;
   height:70px;
}


#video{
   width:100%;
   height:780px;
   background-image: url('../images/video-bg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   display: flex;
   justify-content: center;
   align-items:start;
}

#video > .content{
   width:850px;
   height:530px;
   text-align: center;
   color:#48545e;
   font-size:25px;
}
#video > .content > video{
  float:left;
}

#source{
   width:100%;
   height:700px;
   position: relative;
}

#source > .title{
   top:70px;
   width:270px;
   height:120px;
   right:10%;
   position: absolute;
}
#source > .title > img:nth-child(1){
   width:80px;
   height:95px;
   left:20px;
   position: absolute;
}
#source > .title > img:nth-child(2){
   width:152px;
   height:50px;
   left:65px;
   bottom:15px;
   position: absolute;
}
#source > .title > h1{
   right:0;
   top:-5px;
   position: absolute;
   letter-spacing:5px;
   color:#48545e;
   font-size:45px;
   font-weight:700;
}

#footer{
   width:100%;
   height:850px;
   position: relative;
}

#footer > div:nth-child(1){
   width:41%;
   height:690px;
   float:left;
   position: relative;
   padding:60px 0 0 5%;
   box-sizing: border-box;
   color:white;
   background-image: url('../images/footer-bg1.png');
}
#footer > div:nth-child(2){
   width:23%;
   height:690px;
   float:left;
   background-image: url('../images/footer-bg3.png');
}
#footer > div:nth-child(3)> img{
   width:110px;
   height:130px;
   margin-top:260px;
}
#footer > div:nth-child(3)> ul{
   list-style-type: none;
   color:white;
   font-size:25px;
   font-weight:500;
}

#footer > div:nth-child(4){
   width:33%;
   height:80px;
   float:left;
   background-image: url('../images/footer-bg4.png');
}
#footer > div:nth-child(5){
   width:31%;
   height:80px;
   float:left;
   background-color: #f97510;
}
#footer > div:nth-child(6){
   width:36%;
   height:130px;
   float:left;
   right:0;
   bottom:80px;
   position: absolute;
   background-image: url('../images/footer-bg2.png');
}
#footer > div:nth-child(7){
   width:100%;
   height:80px;
   float:left;

   background-color:#22324b;
}

#footer >.box-1 > .block{
   width:30%;
   height:50px;
   bottom: 0;
   right:0;
   position: absolute;
   background-color: #f97510;
}
#footer > div:nth-child(1) > p{
   margin-top:30px;
   font-size:25px;
   top:15px;
   position: relative;
}
#footer > div:nth-child(1) > h3{
   font-size:32px;
}
#footer > div:nth-child(1) > .group-logo{
   list-style-type: none;
   margin-top:30px;
   height:50px;
   right:9px;
   position: relative;
}
#footer > div:nth-child(1) > .group-logo > li{
   float:left;
   border:3px solid rgb(253, 251, 251);
   padding:2px;
   border-radius: 50%;
   width:35px;
   height:35px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left:5px;
}
#footer > div:nth-child(1) > .group-logo > li > a > img{
   width:22px;
   height:22px;
   position: relative;
   top:1px;
}
#footer > div:nth-child(1) > .group-logo > li:nth-child(3) > a > img{
  width:28px;
  height:17px;
  position: relative;
  top:2px;
}
#footer > div:nth-child(1) > .contact{
   margin-top:30px;
   list-style-type: none;
   clear: both;
   font-size:25px;
   font-weight:500;
}

#footer > div:nth-child(1) > .qrcode{
   list-style-type: none;
   margin-top:30px;
   font-size:18px;
   font-weight:500;
}

 
#footer > div:nth-child(1) > .contact > li{
   line-height:30px;
}

#footer > div:nth-child(1) > .qrcode > li{
   line-height:30px;
}

#footer > div:nth-child(1) > .qrcode > li:nth-child(3){
  top:30px;
  position: relative;
}

#footer > .box-7 > .regular{
  color: #ededed;
  text-align: left;
  margin-top:1%;
  text-indent:10% ;
}

#footer > .box-7 > .gov{
   text-align:center; 
   text-indent: 0% !important;
}


#footer > .box-7 > .gov > a{
  color:#E2E2E2;
  text-decoration: none;
}

}















































@media(min-width: 1200px){
   .swiper-container {
      width: 100%;
      height: 500px;
   }
  .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      
  }
  .swiper-slide > img{
      width:100%;
      height: 500px;
  }
   #product{
      width:100%;
      height:600px;
      background-image: url('../images/product-banner.jpg');
      background-size: 100% 100%;
      position: relative;
      background-repeat: no-repeat;
   }
  
   #product > h1{
     text-align: center;
     color:#2f99e5;
     top:40px;
     letter-spacing: 6px;
     position: relative;
     font-size:25px;
     font-weight: 700;

   } 
  
   #product > ul{
     text-align: left;
     /* left:65%;
     top:320px; */
     left: 60%;
     top: 380px;
     font-weight: 700;
     color:#48545e;
     position: absolute;
     line-height: 50px;
     font-size:25px;
   }

   #plv_74135f2616df44eacc8dafcd358579c8_7{
      height:500px;
      margin-top:105px;
      display: flex;
      justify-content: center;
   }

   #video > .content > strong{
      top:-33px;
      position: relative;
      font-size:25px;
      font-weight: 500;
   }

   #about-us{
      width:100%;
      background-image: url('../images/funny.png');
      background-repeat: no-repeat;
      position: relative;
  }

   #about-us > .summay{
      width:300px;
      height:200px;
      font-size:40px;
      color: #0CA2BA !important;
      float: right;
      text-align: right;
      right:120px;
      position: relative;
   }

   #purpose > .text > span > .pth-4{

      right:23px;
      font-weight:400;
      font-size: 25px;
      position: relative;
   }
   #purpose > .text > span > h1{
      font-weight:700 !important;
      font-size: 25px !important;
      position: relative;
      
   }
   #purpose > .text > span:nth-child(1) > .pth-4{
      right:23px;
      font-size:14px !important;
      position: relative;
   }

   #purpose > .text > span:nth-child(1) > ul{
      font-weight: 400;
      font-size: 14px !important;
   }

   #purpose > .text > span:nth-child(2) > p{
      font-weight: 400;
      font-size: 14px !important;
   }

   #purpose > .text > span > h4{
      color:#767e81;
      font-size:25px;
      font-weight: 700;
      text-align: left;

   }

   #purpose > .text > span > .th4{
      left:-25px;
      position: relative;
   }

   #purpose > .image >.block> span{
      position: absolute;
      top:-65px;
      width:87%;
      line-height:40px;
      right: 0;
      color:#767e81;
      font-weight: 400;
      font-size: 14px;
   }
   #purpose > .image >.block> span > h4{
      color:#767e81;
      text-align: right;
      font-size:25px;
      font-weight: 700;
      margin:20px 20px; 
   }
   #purpose > .text > span:nth-child(1){
      width:76%;
      height:260px;
      left:20px;
      top:60px;
      position: absolute;
      line-height:40px;
      color:#767e81;
   }
   #purpose > .text > span:nth-child(2){
      width:76%;
      height:200px;
      position: absolute;
      left:0;
      top:380px;
      line-height:40px;
      color:#767e81;
   }

    

   #purpose > .image >.block > img{
      width:200px;
      height:220px;
      position: absolute;
      bottom:0;
      left:8%;
   }

   #about-us{
      height:1000px;
      background-position-x: -180px !important;
  }
  
   #about-us > h1{
      color:#d354bf;
      text-align: center;
      float: center;
      top:60px;
      font-size:25px;
      font-weight: 700;
      position: relative;
      letter-spacing: 6px;
   }
   #about-us > .text{
      width:50% !important;
      background-color: rgba(255, 255, 255, 0.5); 
      opacity: 0.9 !important; 
      height:900px !important;
      color:#48545e;
      float: right;
      top:190px !important;
      right:20px !important;
      position: absolute !important;
      z-index: 20 !important;
  }

   #about-us > .text >.text-block>.text-p1{

      z-index:1000 !important;
      font-size:14px !important;
      font-weight: 400;
      position: relative;
      padding-left:40px;
      padding-right:5% !important;
      padding-bottom:30px;
   }

   #about-us > .text >.text-block>.text-p2{

      z-index:1000 !important;
      font-size:14px !important;
      font-weight: 400;
      position: relative;
      padding-left:40px;
      padding-right:5% !important;
   }

   #about-us > .text  > .text-block> .block:nth-child(1){

      width:220px !important;
      height:70px !important;
      z-index: 10 !important;
      position: absolute;
      left:-60px !important;
      background-color: #ffe7e5 !important;

   }
   #about-us > .text  > .text-block> .block:nth-child(2){
      width:200px !important;
      height:70px !important;
      z-index: 1 !important;
      top:-30px !important;
      position: absolute;
      background-color: #fc847a !important;
   }

   #about-us > .text  > .text-block:nth-child(2)> .block:nth-child(1){
      width:200px !important;
      height:70px !important;
      top:-10px !important;
      left:0 !important;
      position: absolute;
      z-index: 3 !important;
      background-color: #daf9d3 !important;
   

   }
   #about-us > .text > .text-block:nth-child(2)>.block:nth-child(2){
      top:-40px !important;
      width:220px !important;
      height:70px !important;
      z-index: 2 !important;
      background-color: #90c685 !important;
   }


   #about-us > .text > .text-block{
      margin:0 auto;
      width:92% !important;
      min-height: 300px !important;
      opacity: 0.9 !important;    
      position: relative; 
  }

   
   #about-us > .text > div >.text-p1> p{
      font-size:14px;
      letter-spacing:3px;
      line-height:40px;
   }
   #about-us > .text > div >.text-p2> p > .title{

      font-size:25px;
      font-weight: 800;
   }

   #about-us > .text > div >.text-p2> p{
      font-size:14px;
      letter-spacing:3px;
      line-height:40px;
   }

   #about-us > .text > p{
      font-size:14px;
      margin-top:50px;
      letter-spacing:3px;
      line-height:40px;
      font-weight: 400;
      padding-left:73px;
      padding-bottom:130px;
      padding-right:8% !important;

  }

  #source > img:nth-child(3){
      top:-100px;
      width:400px;
      height:400px;
      position: absolute;
   }

   #source-group-bg {
      height:700px;
      width:900px;
      position: absolute;
      right:0;
      bottom:0;
   }
   #source > #source-group-bg .sign{
      right: 30%;
      bottom: 170px;
      width: auto;
      height: 40px;
      z-index: 30;
      position: absolute;
      max-width: 60%;
      transform: translate(50%, 0%);
   }
   #source >  #source-group-bg >img:nth-child(1){
      right:0;
      bottom:80px;
      position: absolute;
      width:380px;
      height:350px;
      z-index:20;
   }
   #source > ul{
      width:40%;
      line-height:50px;
      left:210px;
      top:222px;
      z-index:10;
      color:#48545e;
      font-weight: 400;
      font-size:14px;
      position: absolute;
   }
   #source >  #source-group-bg >img:nth-child(2){
      right:150px;
      bottom:80px;
      width:750px;
      position: absolute;
   
   }
   #source > #source-group-bg >img:nth-child(3){
      /* left:40%;
      bottom:140px;
      width:400px;
      height:260px;
      z-index:30;
      position: absolute; */
      right: 0%;
      bottom: 180px;
      width: auto;
      height: 260px;
      z-index: 30;
      position: absolute;
      max-width: 65%;
   }
   #source >img{
      width:400px;
      height:400px;
   }
   #source > #source-group-bg> .area{
      left:44%;
      bottom:60px;
      position: absolute;
      width:225px;
      height:60px;
      text-align:right;
      color:#f8fbf7;
      background-color: #90c685;
      font-size:20px;
      font-weight:500;
      padding:20px 15px;
      z-index:40;
   }
   #container > #header > img {
      width:120px;
      height:119px;
      float:left;
      margin-left:100px;
   } 

   #footer > div:nth-child(1) > h3{
      font-weight: 700 !important;
   }

   #footer > div:nth-child(1) > .group-logo > li > #toggleButton{
      cursor: pointer;
   }

   #footer > div:nth-child(1) > .group-logo > li > #content{
      position: absolute;
      top:48px;
      display: none;
     
   }

/**  ------  **/
  
  #about-us-title,#product-title,#contact-title{
     cursor: pointer;
  }
  #container{
      width:100%;
      min-height:500px;
  }
  #header{
      width: 100%;
      height:119px;
      border-bottom:1px solid #ededed;
      box-shadow: 1px 1px 5px #e7e7e7;
  }
  
  #container > #header > ul {
      width:600px;
      height:109px;
      float:right;
      list-style-type: none;
      display: flex;
      align-items: center;
      margin-right:8%;
  } 
  #container > #header > ul > li{
      width:130px;
      height:45px;
      color:white;
      font-weight:700;
      float:left;
      line-height: 45px;
      text-align: center;
      margin:0 40px;
      list-style-type: none;
  } 
  #container > #header > ul > li:nth-child(1){
      background-color: #d354bf;
  } 
  #container > #header > ul > li:nth-child(2){
      background-color: #2f99e6;
  } 
  #container > #header > ul > li:nth-child(3){
      background-color: #ff9d52;
  } 
  
  #about-us > .text{
      width:58%;
      background-color: rgba(255, 255, 255, 0.5); 
      opacity: 0.9; 
      color:#48545e;
      float: right;
      position: relative;
      z-index: 20 !important;
  }
  #about-us > .text > div >.text-p1> p > .title{
  
      font-size:25px;
      font-weight: 800;
  }
  
  #about-us > .text > .block{
      width:220px;
      height: 70px;
      position: absolute;
  }
  
  #about-us > .text > .text-block:nth-child(2)> .block:nth-child(1){
      background-color: #daf9d3;
      z-index: 10 !important;
      position: absolute;
      left:1px;
      width:248px;
      height:75px;
  
  }
  
  #about-us > .text > .text-block:nth-child(2)> .block:nth-child(2){
     
      background-color: #90c685;
      z-index: 2 !important;
      position: absolute;
      left:-50px; 
      top:-40px;
      width:248px;
      height:70px;
  }

  #video{
      width:100%;
      height:680px;
      background-image: url('../images/video-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items:start;
  }
  
  #video > .content{
      width:850px;
      height:530px;
      text-align: center;
      color:#48545e;
      font-size:25px;
  }
  
  #video > .content > video{
     float:left;
  }
  
   #purpose{
      width:100%;
      height:850px;
      position: relative;
      z-index: 1;
      margin-top:20px;
   }
   #purpose > .text{
      width:55%;
      height:670px;
      float:left;
      /* background-image: url('../images/product-bg1.png'); */
      background: linear-gradient(90deg, rgb(255, 255, 255), rgba(225, 244, 245, 1));
      position: absolute;
      background-size: 100% 100%;
      top:80px;
      left:10%;
      z-index: 4;
   }
  
   #purpose > .image{
      width:38%;
      height:95%;
      float:right;
      background-image: url('../images/product-bg2.png');
      position: absolute;
      background-size: 100% 100%;
      right:10%;
   }
  
   #purpose > .image > img{
      width:200px;
      height:220px;
      position: absolute;
      right:0;
   }
  
   #purpose > .image > .block{
      width:100%;
      height:65%;
      position: absolute;
      bottom:0;
      z-index:30 !important;
   }
  
   #source{
      width:100%;
      height:700px;
      position: relative;
   }
  
   #source > .title{
      top:70px;
      width:270px;
      height:120px;
      right:10%;
      position: absolute;
   }
   #source > .title > img:nth-child(1){
      width:80px;
      height:95px;
      left:20px;
      position: absolute;
   }
   #source > .title > img:nth-child(2){
      width:152px;
      height:50px;
      left:65px;
      bottom:15px;
      position: absolute;
   }
   #source > .title > h1{
      right:0;
      top:-5px;
      position: absolute;
      letter-spacing:5px;
      color:#48545e;
      font-size:45px;
      font-weight:700;
   }
  
   #footer{
      width:100%;
      height:850px;
      position: relative;
   }
  
   #footer > div:nth-child(1){
      width:41%;
      height:850px;
      float:left;
      position: relative;
      padding:60px 5% 0 5%;
      box-sizing: border-box;
      color:white;
      background-image: url('../images/footer-bg1.png');
   }
   #footer > div:nth-child(2){
      width:23%;
      height:850px;
      float:left;
      background-image: url('../images/footer-bg3.png');
   }
   #footer > div:nth-child(3){
      width:36%;
      height:850px;
      float:left;
      background-color: #ff9d52;
      text-align: center;
   }
   #footer > div:nth-child(3)> img{
      width:110px;
      height:130px;
      margin-top:260px;
   }
   #footer > div:nth-child(3)> ul{
      list-style-type: none;
      color:white;
      font-size:25px;
      font-weight:500;
   }
  
   #footer > div:nth-child(4){
      width:33%;
      height:80px;
      float:left;
      background-image: url('../images/footer-bg4.png');
   }
   #footer > div:nth-child(5){
      width:31%;
      height:80px;
      float:left;
      background-color: #f97510;
   }
   #footer > div:nth-child(6){
      width:36%;
      height:130px;
      float:left;
      right:0;
      bottom:-80px;
      position: absolute;
      background-image: url('../images/footer-bg2.png');
   }
   #footer > div:nth-child(7){
      width:100%;
      height:80px;
      float:left;
  
      background-color:#22324b;
   }
  
   #footer >.box-1 > .block{
      width:30%;
      height:50px;
      bottom: 0;
      right:0;
      position: absolute;
      background-color: #f97510;
   }
   #footer > div:nth-child(1) > p{
      margin-top:30px;
      font-size:25px;
      top:15px;
      position: relative;
   }
   #footer > div:nth-child(1) > h3{
      font-size:32px;
   }
   #footer > div:nth-child(1) > .group-logo{
      list-style-type: none;
      margin-top:30px;
      height:50px;
      right:9px;
      position: relative;
   }
   #footer > div:nth-child(1) > .group-logo > li  > a > img {
      top:2px;
      position: relative;
      max-width: 100%
   } 
   #footer > div:nth-child(1) > .group-logo > li{
      float:left;
      border:3px solid rgb(253, 251, 251);
      padding:2px;
      border-radius: 50%;
      width:35px;
      height:35px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left:5px;
   }

   .xhs{
      width:24px;
      height:17px;
   }

   #footer > div:nth-child(1) > .contact{
      margin-top:30px;
      list-style-type: none;
      clear: both;
      font-size:25px;
      font-weight:500;
      display: flex;
      justify-content: space-between;
   }
  
   #footer > div:nth-child(1) > .qrcode{
      list-style-type: none;
      margin-top:30px;
      font-size:18px;
      font-weight:500;
   }
  
    
   #footer > div > .contact > div > li{
      line-height:30px;
      font-size: 20px;
   }
  
   #footer > div:nth-child(1) > .qrcode > li{
      line-height:30px;
   }
  
  #footer > div:nth-child(1) > .qrcode > li:nth-child(3){
     top:30px;
     position: relative;
  }
  
   #footer > .box-7 > .regular{
     color: #ededed;
     text-align: left;
     margin-top:1%;
     text-indent:10% ;
  }
  
   #footer > .box-7 > .gov{
      text-align:center; 
      text-indent: 0% !important;
  }
  
  
  #footer > .box-7 > .gov > a{
     color:#E2E2E2;
     text-decoration: none;
  }
  
}