@charset "utf-8";
/* CSS Document */

html,body{overflow:hidden;overflow-y:auto; background-color:#f8f8f8 ;}

.banner{ clear: both;}
/*.banner img{width:55%; margin:0px 0 0 20%; }*/
.banner{ width:100%; margin: 20px auto 0; background: url(../images/bannerbj.jpg)center 0 no-repeat;background-size: 100% 100%; }
.banner2{ width:100%; margin: 20px auto 0; background: url(../images/banner1.png)center top no-repeat;background-size: 70% 100%; }

canvas{
  position: absolute;
  width: 100%;
 height: 100%;
  /* background: #111a22;*/
 z-index: 100;
}

.clear{clear:both;}

.con{ margin: 0 auto;}
.con p{color: #585b62; clear: both;}
/*.con h4{z-index:5;  margin: 0 auto; font-weight: bold; text-align: center; padding: 5px; height: 50px; width:30%;line-height: 50px; color: #666; background: #f6f6f6; border-radius:5px ; border:1px solid #efefef; }*/
.con h4{ margin: 0 auto; font-weight: bold; text-align: center; color: #666; }

.con h5{ text-align: center; color: #7d4699;}


/*.line {background: #efefef; height: 1px; margin: -70px auto 80px; z-index: 1; }*/
.line {background: #efefef; height: 1px; margin: 10px auto; }
.con1,.con2,.con3,.con4,.con5{width:100%; margin: 20px auto;}
.con1 .con1left{ float:left;  background: #efefef; }
.con1 .con1right{ float:left; }
.con1 p{text-indent: 2em; }


.con2 ul{ width:100%;}
.con2 ul li{background:#eeeeee ; padding: 20px; float:left;}
.con2 ul li img{width:100%; margin: 0 auto;}
.con2 p{width: 96%; margin: 0 0 0 2%; }
.con2 p span{ color: #9e6cc1; float:left; font-weight: bold;}
.con2 p i{ float:right; font-style: normal;}
.con .button{width:40%; background: #9e6cc1;  color: #fff; height: 60px; line-height: 60px; text-align: center; border-radius: 50px; margin: 10px auto;}
.con .button a {color: #fff;font-size: 23px;}

.con3 p{ text-indent: 2em; margin-bottom: 20px;}
.con4 p{text-align: center; margin: 20px auto;}
.con4 img{display: block;     margin: 0 auto;}
.con4lr,.con4zs{width:100%; overflow: hidden;}
.con4zs ul li img{width:100%; margin: 0 auto;}
.con4 ul{width:100%;}
.con4 ul li{float:left; text-align: center;}

.con5 li{ float:left; text-align: center;}
.con5 ul .list-video video{width: 100%;}

.footer{background: #eee; padding-top: 10px; border-top: 1px solid #d8d8d8; text-align: center; width: 100% !important; clear: both; position:absolute;  left: 0;}
.footer strong{font-weight: bold; color: #757575; }
.swiper-container,.swiper-container2{ margin: 20px auto;}
.swiper-container{width:80%;}
 .swiper-container2 {
      /*width: 100%;
      height: 100%;*/
    }
    .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;
	  transition: 300ms;
	  transform: scale(0.8);
    }
    .swiper-slide img{width:100%;}
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
            
   .place{ border-bottom: 1px solid #eee;padding-bottom: 10px; margin-bottom: 20px;}       
  .pagelist li{width:100%; text-align: center; margin: 20px auto;}    
  .listbox ul{margin: 20px auto;}
  .listbox li img a{width:30%; float:left; margin-right: 3%;}         
  .listbox .info{float:left;}          
  .listbox .intro{float:right;}     
  
  .viewbox .intro{text-indent: 2em; margin: 20px auto;}  
  .content{margin: 0 auto 20px;}
  .content img{width:auto; margin: 0 auto;}
  
  .contact{width:90%; margin: 0 auto;}
  .contact p{text-indent: 0;}
  .contact p strong{font-weight: bold;}
  .map,.usmapl{width:100%; margin: 20px auto;}
    
 /* 手机等小屏幕手持设备 */   
 @media screen and (min-width: 320px) and (max-width: 768px) {
        .top { height: 0.5rem; background: #eee; border-bottom: 1px solid #d8d8d8;}
        .top p{height: 0.5rem; line-height: 0.5rem;}
        .top img{width:0.35rem; margin-left: 0.1rem;}
        .topleft{display: none;}
        .topright{text-align: center;margin: 0 auto;}
        /* .menu{box-sizing: border-box; padding: 0 20px} */
        .menu-wrap span a{font-size:0.35rem; }
        .logo { text-align: center; margin: 0.2rem auto;} 
        .logo img{width:60%;}       
        .menu-wrap{height: 0.5rem; line-height: 0.5rem;}
        /*.menu-wrap a{font-size:0.25rem; }*/
        .menu-list-item{margin: 0 0.1rem;}
        .con{width: 100%;padding:0 0;} 
        .con h4{font-size:0.4rem ;}
        .con h5{ font-size:0.25rem; line-height: 0.4rem;}
				.con1left{width:100%; margin: 0.2rem 0 0.2rem 0;}
        .con1right{width:100%; }
        .con1right p{margin-bottom: 0.1rem;}
        /* .con{width:98%;} */
        .con .button {height: 0.7rem; line-height: 0.7rem;}
        .con .button a{font-size:0.35rem;}
        .con3 .swiper-container{ width: 90%; padding:0 5% }
        .header{width:80%; }
        canvas{ width:100%; height: 100%; padding-top: 20%;}
        .banner{background-size: auto 100%; height: 400px;}
        .banner img{width:100%; margin:120px 0 0 0;}
        .con2 ul li{margin: 0.2rem auto;}
        .propic img{width:80px;}
        .con1right p,.con2 p span,.con2 p i,.con2 p,.con3 p,.con4 p,.con5 p,.place a,.place strong,.pageinfo,.listbox .intro p,.viewbox .info,.viewbox .info small,.listbox p span,.listbox .info small,.viewbox .intro,.content p,.contact p,.contact p strong{font-size:0.35rem; line-height: 0.5rem;}
        /*.con2 p span,.con2 p i,.header li,.header_nav .con1 p,.con3 p,.con2 p,.con4 p ,.con5 p{font-size:0.25rem; line-height:0.4rem; }*/
        .con2 ul li:nth-of-type(3),.con2 ul li:nth-of-type(4),.con5 ul li:nth-of-type(2),.con5 ul li:nth-of-type(3),.header_nav_topright{ display:none ;}
        .con5 ul li{width:100%; margin: 0 auto;}
        .con4zs ul li{width:44%; margin: 0 3%; text-align: center;}
         .footer strong{font-size:0.3rem; line-height: 30px;}
         .footer p{font-size:0.3rem; color: #757575;line-height: 0.45rem;}
         .footer{height: 3rem;}

        .listbox,.viewbox{width:100%;}  
        .listbox li img{width:60%; margin: 0 auto; display: block;}     
        .listbox .intro{ width:98%;  margin: 0.1rem auto;}    
  		.intro p a,.title h2{font-size: 0.35rem; font-weight: bold; line-height: 0.6rem;}
  		.title h2,.viewbox .info{text-align: center;}
		.map,.usmapl{}
		.content img{width:90%; }
		.con5 ul li img{width:96%; margin: 20px 2%}
    .content .video{width:90%; margin: 20px 5%; text-align: center;}
    } 

    /* 平板之类的宽度 1024 以下设备 */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    	
       	.top {height: 0.75rem;}
        .top p{height: 0.75rem; line-height: 0.75rem; font-size: 0.4rem;}
        .top img{width:0.5rem; margin-left: 10px;}
        .topleft{display: none;}
		.topright{text-align: center;margin: 0 auto;}
		.logo img{width:60%;}
        /* .menu{box-sizing: border-box; padding: 0 20px} */
        .menu-wrap{height: 0.7rem; line-height:0.7rem;}
        .menu-wrap span a{font-size:0.4rem; }
        .menu-list-item{margin: 0 0.1rem;}
        .con h4{font-size:0.5rem ;}
        .con h5{ font-size:0.3rem; line-height: 0.5rem;}
		.con1left{width:94%; margin: 20px 3%;}
        .con1right{width:100%; }
        .con1right p{margin-bottom: 10px;}
        .con{width: 96%;padding:0 2%} 
        .header{width:80%; }
        .banner{height:auto;}
        .banner img{width:70%; margin:30px 0 0 0;}
        .con2 ul li{width:94%; margin: 20px 3%;padding:0}
        .con1right p,.con2 p span,.con2 p i,.con2 p,.con3 p,.place a,.place strong,.con4 p,.con5 p,
        .pageinfo,.listbox .intro p,.viewbox .info,.listbox .info small,.listbox p span,.viewbox .info small,
        .viewbox .intro,.content p,.contact p,.contact p strong{font-size:0.4rem; line-height: 0.6rem;}
        /* .con1right p{
            font-size:0.4rem;
        } */
        .con3 .swiper-container{ width: 90%; padding:0 5% }
       
        /*.con2 p span,.con2 p i,.header li,.header_nav .con1 p,.con3 p,.con2 p,.con4 p ,.con5 p{font-size:0.35rem; line-height:0.5rem; }*/
        /*.con p{font-size:0.35rem; line-height:0.5rem; }*/
        .con2 ul li:nth-of-type(3),.con2 ul li:nth-of-type(4),.con5 ul li:nth-of-type(2),.con5 ul li:nth-of-type(3),.header_nav_topright{ display:none ;}
        .con5 ul li{width:94%; margin: 20px 3%;}
        .con4zs ul li{width:44%; margin: 0 3%; text-align: center;}
         .footer strong{font-size:0.4rem; line-height: 0.5rem;}
         .footer p{font-size:0.35rem; color: #757575;line-height: 0.5rem;}
         .footer{height:3rem;}
         .con .button a{font-size:0.4rem;}
		
        .listbox,.viewbox{width:100%;}  
        .listbox li img{width:60%; margin: 0 auto; display: block;}     
        .listbox .intro{ width:98%;  margin: 0.1rem auto;}    
  		.intro p a,.title h2{font-size: 0.45rem; font-weight: bold; line-height: 0.9rem;}
  		.title h2,.viewbox .info{text-align: center;}
		.map,.usmapl{}
		
		.con5 ul li img{width:96%; margin: 20px 2%}
        .content .video{width:70%; margin: 20px 15%; text-align: center;}
    }
    /* PC客户端或大屏幕设备: 1028px 至更大 */
    @media only screen and (min-width: 1029px) {
    	.top {height: 35px;}
        .top p{height: 35px; line-height: 35px;}
        .top img{width:17px; margin-left: 10px;}
        .topleft{display:inline-block; float:left; margin-left:1em;}
		.topright{float:right;}
        .menu-wrap{height: 40px; line-height: 40px;}
        .menu-wrap a{font-size:20px; }
        .menu-list-item{margin: 0 50px;}
        .con h4{font-size:30px ;}
        .con h5{ font-size:17px; line-height: 30px;}
		.con1left{width:46%;margin: 20px 1%;}
        .con1right{width:46%; margin: 10px 1%; }
        .con1right p{margin-bottom: 10px;}
        .con{width:1200px;}
        .header{width:80%; }
        .banner{height:560px;}
        canvas{height: 560px;}
        .banner img{width:55%; margin: 120px 0 0 10%;}
        .con2 ul li{width:42%; margin: 20px 2%;}
        .con2 p span,.con2 p i,.header li,.header_nav .menu ul li a,.con p,.place a,.place strong,.pageinfo,.listbox .intro p,.viewbox .info,.listbox .info small,.listbox p span,.viewbox .info small,.viewbox .intro,.content p,.contact p,.contact p strong{font-size:17px; line-height:30px; }
        .con5 ul li{width: 31%; margin: 0 1% 0 1%; height: 380px;}
        .con4zs ul li {width: 31%; margin: 0 1% 0 1%; text-align: center;}
         .footer strong{font-size:20px; line-height: 30px;}
         .footer p{font-size:17px; color: #757575;line-height: 31px;}
         .footer{height: 170px;}
         /*列表页*/
         .place{padding-bottom: 15px;}
         .listbox,.viewbox{width:90%; margin: 0 auto;}  
        .listbox li img{width:20%;margin-left: 10%;}     
        .listbox .intro{ width:60%; margin-right: 8%; margin-top:20px;}    
  		.intro p a,.title h2{font-size: 24px; font-weight: bold; line-height: 60px;}
  		.title h2,.viewbox .info{text-align: center;}
  		.viewbox .info{}
  		
         /*联系我们页*/
        .map,.usmapl{}
        
        .con5 ul li img{width:96%; margin: 20px 2%}
        .content .video{width:50%; margin: 20px 25%; text-align: center;}
         
    }