﻿@charset "utf-8";
*{
	padding:0;
	margin:0;
}
.swiper-container_youran{
	height:680px;overflow:hidden;
}



.tags{width: 1200px;

margin-bottom: 98px;
height: 100%;
	
	
	}

.tags ul{width: 1200px;border: 1px solid #e3e3e3;
float: left;}


.tags ul li{
    padding: 0 14px;
    float: left;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px dashed #e3e3e3;
    font-size: 14px;
    color: #72757e;
    cursor: pointer;
    width: 90px;
    height: 50px;
    overflow: hidden;
    text-align: left;
}


@media only screen and (max-width: 640px){
.tags{width: 100%;

margin-bottom: 98px;
height: 100%;
	
	
	}

.tags ul{width: 96%;
border: 1px solid #e3e3e3;
float: left;
margin-left: 2%;}


.tags ul li{
    padding: 0 14px;
    float: left;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px dashed #e3e3e3;
    font-size: 14px;
    color: #72757e;
    cursor: pointer;
    width: 90px;
    height: 50px;
    overflow: hidden;
    text-align: left;
}

}


@media only screen and (max-width: 640px){
.sai-lb-banner{		width:100%;height:100% !important;	}
.swiper-container_youran{		width:100%;height:250px;	}
.arrow-left {    top: 35%;  }
.arrow-right{    top: 35%;  }





}
.infotextkey {font-size:12px;}
.arrow-left {
  background: url(../images/arrows.png) no-repeat left top;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;

}
.arrow-right {
  background: url(../images/arrows.png) no-repeat left bottom;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
  
}
.banner-pagination {
  position: absolute;
text-align: center;
z-index: 99;
width: 100%;
top: 710px;
}
.banner-pagination span{
	width:14px;height:14px;background:#999;opacity:1;
}
.banner-pagination .swiper-pagination-bullet-active{
	background:#eee;
}
@media only screen and (max-width: 640px){
	.banner-pagination span{
		width:8px;height:8px;
	}

}
.swiper-pagination-switch {
  display: inline-block;
  width: 15px;
  height: 15px;
  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;
}
.inner{
	position:relative;
	display:block;
	width:1000px;
	height:500px;
	margin:0 auto;
}

.slide1{
	background: url(../images/s_diyizhangbj1.jpg) no-repeat;
}
.slide2{
	background: url(../images/s_diyizhangbj2.jpg) no-repeat;
}
.slide3{
	background: url(../images/s_diyizhangbj3.jpg) no-repeat;
}

.slide1 .s0{left: 50%;margin-left: -154px; top: 182px}
.slide1 .s1{left: 50%; margin-left: -458.5px;  top: 336px; width: 90%;}
.slide1 .s2{left: 50%; margin-left: -455px; top: 430px;  width: 90%;}
.slide1 .s3{left: 0;bottom: 0px;z-index: 5;height:190px}
.slide1 .s4{right: 0;bottom: 0px;z-index: 0;height: 160px}
.slide2 .zh-a-1{left: 40px;top: 192px;z-index: 9;}
.slide2 .zh-a-2{left: 43px;top: 358px;}
.slide3 .b-1 {right: 51px;top: 180px;}
.slide3 .b-2 {left: 30px;top: 180px;}
.slide3 .b-3 {left: 50%;margin-left: -338px;top: 330px;}
.slide3 .b-s-1 {     width: 94%;left: 21px; bottom:0px;}
.slide3 .b-s-2 {    width: 94%;left: 160px;width: 160px;bottom:0px;}
.slide3 .b-s-3{    width: 94%;left: 390px;width: 58px;bottom:0px;}
.slide3 .b-s-4{right: 359px; width: 103px;bottom:0px;}
.slide3 .b-s-5{right: 250px;width: 150px;bottom:0px;}
.slide3 .b-s-6{right: 0;width: 65px;bottom:0px;}
.slide3 .b-y-1 {top:40px;left: 50%; margin-left: -20px;}
.slide3 .b-y-2{top:40px;left:0}
.slide3 .b-y-3{top:40px;right: 0}

@media only screen and (max-width: 640px){
	.slide3,.slide2,.slide1{background-size:cover}
	.swiper-container_youran .swiper-slide{display:flex;align-items:center;}
	.inner{	width:auto;height:auto;text-align:center;}
	.inner img{max-width:90%;position:relative !important;display:inline-block;}

	.slide1 .s0{left:auto;margin-left:auto; top:auto;width:40%;margin:0 0 20px 0;}
	.slide1 .s1{left:auto; margin-left:auto;  top: auto; width: 90%;margin:0}
	.slide1 .s2{left:auto; margin-left:auto; top: auto;  width: 90%;}
	.slide1 .s3{left: 0;bottom: 0px;z-index: 5;height:auto}

	.slide2 .zh-a-1{left:auto;top: auto;z-index: 9;}
	.slide2 .zh-a-2{left: auto;top: auto;margin:20px 0;}

	.slide3 .b-1 {right:auto;top:auto;width:40%;}
	.slide3 .b-2 {left: auto;top: auto;width:35%;float:left;margin-left:10%;}
	.slide3 .b-3 {left: auto;margin-left: auto;top: auto;}
	.slide3 .b-s-1 {     width: auto;left: auto; bottom:0px;}
	.slide3 .b-s-2 {    width: auto;left: auto;width: auto;bottom:0px;}
	.slide3 .b-s-3{    width: auto;left: auto;width: auto;bottom:0px;}
	.slide3 .b-s-4{right: auto; width: auto;bottom:0px;}
	.slide3 .b-s-5{right: auto;width: auto;bottom:0px;}
	.slide3 .b-s-6{right: 0;width: auto;bottom:0px;}
	.slide3 .b-y-1 {top:auto;left: auto; margin-left: auto;}
	.slide3 .b-y-2{top:auto;left:0}
	.slide3 .b-y-3{top:auto;right: 0}
}

.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;}}
