﻿@charset "utf-8";
@media screen and (min-width:1200px) {

.swiper-container{height:500px;}
.inner{
	position:relative;
	display:block;
	width:1200px;
	height:500px;
	margin:0 auto;
}

.slide1 .s1{left: 50%;margin-left: -425.5px;top: 100px;}
.slide1 .s2{left: 50%;margin-left: -550px;top: 170px}
.slide1 .s4{left: 50%;margin-left: 0px; bottom:20px;}

.slide2 .zh-a-1{left:50%; margin-left:-500px;top:200px;z-index: 9;}
.slide2 .zh-a-2{left:50%;margin-left:-200px;top:100px;}

.slide3 .b-1 {right: 0px;top: 260px;}
.slide3 .b-2 {left: 0px;top: 260px;}
.slide3 .b-3 {left: 50%;margin-left: -381px;top: 100px;}

.slide4 .zh-a-1a{left: 50px;top:100px;z-index: 9;}

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.swiper-container{height:500px;}
.inner{
	position:relative;
	display:block;
	width:1200px;
	height:500px;
	margin:0 auto;
}

.slide1 .s1{left: 50%;margin-left: -470px;top: 110px; }
.slide1 .s2{left: 50%;margin-left: -540px;top: 180px; width:480px}
.slide1 .s4{left: 50%;margin-left:-40px; top: 180px; width:480px}

.slide2 .zh-a-1{left:50%; margin-left:-500px;top:200px;z-index: 9; width:900px}
.slide2 .zh-a-2{left:50%;margin-left:-300px;top:100px;}

.slide3 .b-1 {right:150px; top: 260px; width:500px}
.slide3 .b-2 {left:50px; top: 260px; width:500px}
.slide3 .b-3 {left: 50%;margin-left: -381px;top: 100px;}

.slide4 .zh-a-1a{left: 10px;top:100px;z-index: 9;}

	}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.swiper-container{height:400px;}
.inner{
	position:relative;
	display:block;
	width:1000px;
	height:400px;
	margin:0 auto;
}


.slide1 .s1{left: 50%;margin-left: -350px;top: 100px; width:600px}
.slide1 .s2{left: 50%;margin-left:-400px;top: 170px;  width:350px;}
.slide1 .s4{right:50%; margin-right:-300px; top:170px; width:350px}

.slide2 .zh-a-1{left:50%; margin-left:-500px;top:200px;z-index: 9;}
.slide2 .zh-a-2{left:50%;margin-left:-200px;top:100px;}
.slide3 .b-1 {right: 0px;top: 260px;}
.slide3 .b-2 {left: 0px;top: 260px;}
.slide3 .b-3 {left: 50%;margin-left: -381px;top: 100px;}


.slide4 .zh-a-1a{left: 50px;top:100px;z-index: 9;}

}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	 .swiper-container{height:300px;}
.inner{
	position:relative;
	display:block;
	width:750px;
	height:300px;
	margin:0 auto;
}

.slide1 .s1{left: 50%; margin-left: -250px;top:50px; width:500px}
.slide1 .s2{left: 50%; margin-left: -200px;top: 120px;  width:200px;}
.slide1 .s4{right:50%; margin-right:-200px; top:120px; width:200px}

.slide2 .zh-a-1{left:50%; margin-left:-230px; top:120px; width:380px;}
.slide2 .zh-a-2{left:50%; margin-left:-230px; top:30px; width:380px}

.slide3 .b-1 {left:50%; margin-left:-300px; top:120px; width:280px}
.slide3 .b-2 {left:50%; margin-left:0px; top:120px; width:280px}
.slide3 .b-3 {left:50%; margin-left:-200px; top:50px; width:350px}

.slide4 .zh-a-1a{left:50%; margin-left:-380px; top:70px; width:600px;}

	}
@media only screen and (min-width: 480px) and (max-width: 575px) {
	.swiper-container{height:200px;}
.inner{
	position:relative;
	display:block;
	width:480px;
	height:200px;
	margin:0 auto;
}
.slide1 .s1{left: 50%; margin-left: -150px;top:30px; width:400px}
.slide1 .s2{left: 50%; margin-left: -100px;top: 100px;  width:100px;}
.slide1 .s4{right:50%; margin-right:-100px; top:100px; width:100px}

.slide2 .zh-a-1{left:50%; margin-left:-130px; top:80px; width:250px;}
.slide2 .zh-a-2{left:50%; margin-left:-130px; top:10px; width:250px}

.slide3 .b-1 {left:50%; margin-left:-150px; top:80px; width:150px}
.slide3 .b-2 {left:50%; margin-left:20px; top:80px; width:150px}
.slide3 .b-3 {left:50%; margin-left:-100px; top:30px; width:250px}

.slide4 .zh-a-1a{left:50%; margin-left:-180px; top:50px; width:300px;}
	}

@media only screen and (min-width: 320px) and (max-width: 479px) {
	 
	.swiper-container{height:200px;}
.inner{
	position:relative;
	display:block;
	width:320px;
	height:200px;
	margin:0 auto;
}
.slide1 .s1{left: 50%; margin-left: -150px;top:30px; width:400px}
.slide1 .s2{left: 50%; margin-left: -100px;top: 100px;  width:100px;}
.slide1 .s4{right:50%; margin-right:-100px; top:100px; width:100px}

.slide2 .zh-a-1{left:50%; margin-left:-130px; top:80px; width:250px;}
.slide2 .zh-a-2{left:50%; margin-left:-130px; top:10px; width:250px}

.slide3 .b-1 {left:50%; margin-left:-150px; top:80px; width:150px}
.slide3 .b-2 {left:50%; margin-left:20px; top:80px; width:150px}
.slide3 .b-3 {left:50%; margin-left:-100px; top:30px; width:250px}

.slide4 .zh-a-1a{left:50%; margin-left:-180px; top:50px; width:300px;}

	}


.arrow-left {
  background: url(../images/arrows.png) no-repeat left top;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
  z-index:10;
}
.arrow-right {
  background: url(../images/arrows.png) no-repeat left bottom; 
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
  z-index:10;
}
.pagination {
  position: absolute;
  text-align: center;
  bottom:5px;
  width:100%; margin:0px auto
}
.swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #999;
  margin: 0 3px;
  cursor: pointer;
}
.swiper-active-switch {
  background: #fff;
}
.swiper-slide{
	position:relative;
	opacity:0;
	transition: opacity 0.7s ease-in-out;
}
.swiper-slide-active{
	opacity:1;
}
.swiper-slide .img{
	position:absolute; max-width:100%
}
.slide1{
	background:url(/static/upload/image/20181212/1544612641724105.jpg) center center no-repeat;
	 background-size:cover;
}
.slide2{
	background:url(/static/upload/image/20181212/1544612825138384.jpg) center center no-repeat;
	 background-size:cover;
}
.slide3{
	background:url(/static/upload/image/20181212/1544612903108209.jpg) center center no-repeat;
	 background-size:cover;
}
.slide4{
	background:url(/banner/image/1.jpg) center center no-repeat; background-size:cover;
}
.loop{
	animation-iteration-count: infinite;/*无限*/
	animation-timing-function:linear;/*平滑*/
}
.targetBtn {
    margin-top: 20px;
    position: absolute;
    bottom: 60px;
    left: 352px;
    z-index: 999;
}
.targetBtn a{
	height:50px;
	border-radius:50px;
	background:rgba(0,0,0,.5);
	float:left;
	line-height:50px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	}
.targetBtn .a1{
	width:110px;
	}
.targetBtn .a2{
	width:170px;
	margin-left:15px;
	}	
	
	

/*自定义CSS动画*/
.moveRight{-webkit-animation-name:moveRight;animation-name:moveRight}
@-webkit-keyframes moveRight{0%{opacity: 0;left:0px;}
10%{opacity: 1;}
100%{opacity: 1;left:550px;}}
@keyframes moveRight{0%{opacity: 0;left:0px;}
10%{opacity: 1;}
100%{opacity: 1;left:550px;}}

.moveLeft{-webkit-animation-name:moveLeft;animation-name:moveLeft}
@-webkit-keyframes moveLeft{0%{opacity:0;left:390px;}
10%{opacity:1;}
100%{opacity:1;left:-370px;}}
@keyframes moveLeft{0%{opacity:0;left:390px;}
10%{opacity:1;}
100%{opacity:1;left:-370px;}}