/* ----------------------------------------------
 * Generated by Animista on 2021-5-27 14:43:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-vertical-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  30% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
    100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  30% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
    100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

/*Demo styles*/
    .swiper-container1 {position:relative; 
      width: 100%;
      height: 540px;
	  overflow:hidden; 
    }

    .swiper-container1 .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;
    }

@keyframes txt_ani01{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes txt_ani02{
    0%{opacity:0}
	50%{opacity:0}
    100%{opacity:1}
}

#wrap {}
#wrap:after {content:''; display:block; clear:both;}

.swiper-wrapper .swiper-slide1 {background:url('../img/visual01.jpg') no-repeat center center; background-size:cover;}
.swiper-wrapper .swiper-slide2 {background:url('../img/visual02.jpg') no-repeat center center; background-size:cover;}
.swiper-wrapper .swiper-slide3 {background:url('../img/visual03.jpg') no-repeat center center; background-size:cover;}


.swiper-container1 .vi_box_txt {position:absolute; width:100%; left:50%; top:50%; transform:translate(-50%, -50%); }
.swiper-container1 .vi_box_txt p {font-size:3rem; font-weight:600; margin-bottom:10px; text-shadow:0 0 10px rgba(0,0,0,.7); }
.swiper-slide2 .vi_box_txt {text-align:right; width:50%;}
.swiper-container1 .vi_box_txt span {font-size:1.5rem; word-break:keep-all ; font-weight:600; width:70%; display:inline-block; text-shadow:0 0 10px rgba(0,0,0,.8); }
#wrap .swiper-container1 .vi_box_txt a {width:150px; }


#main { width:100%; min-width:320px; margin:0 auto; text-align:center; overflow:hidden; }

#main h3 {text-align:center; display:inline-block;font-size:1.7rem; padding-bottom:50px; ; font-weight:600; position:relative; }
#main h3:before {width:148px; height:111px; display:block; content:''; position:absolute; left:-100px; top:-30px; background:url('../img/h3_bef.png')no-repeat 0 0; background-size:cover; }
#main h3 b {font-size:2.4rem; font-weight:600; color:#00bc70; }
#main h3 span {display:block; font-size:1.2rem; color:#ccc; letter-spacing:7px; font-weight:400; }

#main .main_menu .wrap li:hover img {-webkit-animation: flip-vertical-right 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; animation: flip-vertical-right 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;}

#main .section {margin:100px auto 0 auto; }
#main .section1 {max-width:1200px; position:relative; }
#main .section1:before {content:''; display:block; width:246px; height:243px; position:absolute; left:0; top:0; background:url('../img/sec01_bg1.png')no-repeat 0 0; opacity:.2; transition:.2s all; }
#main .section1 ul:before {content:''; display:block; width:177px; height:328px; position:absolute; right:0; bottom:-50px; background:url('../img/sec01_bg2.png')no-repeat 0 0; opacity:.2; transition:.2s all; }
#main .section1 ul {z-index:99999999; max-width:770px; font-size:0; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto; }
#main .section1 ul li {text-align:center; display:inline-block; width:32%; height:32%; padding-bottom:32%; background-color:#91f649; overflow:hidden;  border:1px solid #ddd; margin-bottom:2%; position:relative;  }
#main .section1 ul li a {display:block; width:100%; height:100%;}
#main .section1 ul li a img {min-width:100%; min-height:100%; width:102%; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);  background-color:#fff; transition:.2s all; }
#main .section1 ul li:hover a img {opacity:.5}



#main .section2 {width:100%; height:280px; background:url('../img/banner1.jpg')no-repeat center center; background-size:cover; }
#main .section2 a {width:100%; height:100%; display:block; }
#main .section2 a p {text-align:right; color:#fff; max-width:1200px; margin:0 auto; font-size:1.4rem; padding-top:75px; word-break:keep-all}
#main .section2 a p span {font-size:3rem; font-weight:600; position:relative; }
#main .section2 a p span:before {width:0; height:1px; background-color:#fff; display:block; content:''; position:absolute; left:-3px; bottom:5px; transition:.2s all; }
#main .section2 a:hover p span:before {width:100%;}



#main .section3 {max-width:1200px; }
#main .section3 ul {max-width:900px; font-size:0; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto; }
#main .section3 ul li {text-align:center; display:inline-block; width:32.5%; height:32.5%; padding-bottom:32.5%; background-color:#00bc70; overflow:hidden;  border:1px solid #ddd; margin-bottom:1.2%; position:relative; 
									border-radius:5px; }
#main .section3 ul li a {display:block; width:100%; height:100%;}
#main .section3 ul li a img {min-width:100%; min-height:100%; width:102%; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);  background-color:#fff; transition:.2s all; }
#main .section3 ul li:hover a img {opacity:.5}
#main .section3 ul li p {position:absolute; left:50%; top:20%; transform:translate(-50%,-50%); font-size:1.5rem; width:100%; font-weight:600; color:#fff;  opacity:0; transition:.3s all;}
#main .section3 ul li:hover p {top:50%; opacity:1; }
#main .section3 .more {display:block; width:150px; line-height:45px; border:1px solid #00bc70; text-align:center; margin:0 auto; border-radius:23px; margin-top:30px; position:relative; overflow:hidden; }
#main .section3 .more div {width:0; height:45px; background-color:#00bc70; position:absolute; left:0; top:0; transition:.2s all; }
#main .section3 .more p {color:#00bc70; font-size:1.1rem; position:relative; }
#main .section3 .more:hover div {width:100%;}
#main .section3 .more:hover p {color:#fff; }

#main .section4 {margin-bottom:0;}
#main .section4 .wrap {width:100%; border-top:1px solid #ddd; }
#main .section4 .wrap .swiper-container2 {max-width:1200px; margin:0 auto; padding:20px 50px; }
#main .section4 .wrap .swiper-container2 .swiper-wrapper {height:auto}
#main .section4 .wrap .swiper-container2 .swiper-slide { background:none;height:auto;}
/* #main .section4 .wrap .swiper-container2 .swiper-slide img {height:100%; } */
#main .section4 .wrap .swiper-container2 .swiper-button-prev {width:50px; height:100%; background:#fff url('../img/sec04_prev.gif')no-repeat center center; top:22px; left:0;}
#main .section4 .wrap .swiper-container2 .swiper-button-next {width:50px; height:100%; background:#fff url('../img/sec04_next.gif')no-repeat center center; top:22px; right:0; }




@media all and (max-width:1500px){

.swiper-slide2 .vi_box_txt {width:80%;}

}



@media all and (max-width:1200px){


#main .section {}
#main .section1 {padding:0 3%;}


#main .section2 {}
#main .section2 a {padding:0 3%; }

#main .section3 {padding:0 3%;}


#main .section4 {}









@media all and (max-width:1000px){





}






}



@media all and (max-width:800px){






}




@media all and (max-width:700px){

#main .section1:before {left:-100px; }
#main .section1 ul:before {right:-50px; }



}





@media all and (max-width:600px){



.swiper-wrapper .swiper-slide1 {background:url('../img/m_visual01.jpg') no-repeat center center; background-size:cover;}
.swiper-wrapper .swiper-slide2 {background:url('../img/m_visual02.jpg') no-repeat center center; background-size:cover;}
.swiper-wrapper .swiper-slide3 {background:url('../img/m_visual03.jpg') no-repeat center center; background-size:cover;}

.swiper-container .vi_box_txt p {font-size:2.5rem !important; font-weight:600 !important; margin-bottom:10px; }
.swiper-container .vi_box_txt span {font-size:1.3rem !important; word-break:keep-all ; width:70%; display:inline-block; }




#main h3 {font-size:1.5rem; word-break:keep-all; padding-bottom: 20px;}
#main h3:before {left:-50px; top:-15px; width:100px; height:75px; }
#main h3 b {font-size:2rem; }
#main h3 span {font-size:1rem; }


#main .section {margin-top:70px; }


#main .section2 {background:url('../img/m_banner1.jpg')no-repeat center center; }
#main .section2 a p {font-size:1.2rem; padding-top:75px; }
#main .section2 a p span {font-size:2.3rem; }

#main .section3 ul li p {font-size:1.2rem; }




}






@media all and (max-width:450px){


#main .section1:before {left:-150px; }
#main .section1 ul:before {right:-100px; }

#main .section3 ul li p {font-size:1rem; }


}