
/*
*@author:Jacobwang
*@date:2015-04-15
*@info:main.css
*/

/*reset*/

body { font-family: Microsoft YaHei, "Source Sans Pro", Helvetica, Arial, sans-serif; }

a { cursor: pointer; }

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wrap-index {
	position: absolute;
	top:0;
	width: 100%;
	height: 100%;
	left: 0;
	 overflow: hidden; 
	 }

.dark-green { color: #4c5b52; }

.light-green { color: #00853e; }

.mb-50 { margin-bottom: 50px; }

/*slider*/

.slider { float: left; }

.slider .jquery-reslider .slider-block {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 97;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0;
}
.slider .jquery-reslider .slider-block span{
	display: block;
	font-size: 15px;
	color: #FFFFFF;
	padding-left: 0;
	padding-right: 0;
	line-height: 30px;
	position: absolute;
	bottom: 20%;
	right: 14%;
	box-sizing: border-box;
}
.slider .jquery-reslider .slider-direction {
  width: 60px;
  height: 60px;
  position: absolute;
  z-index: 99;
  cursor: pointer;
}

.slider .jquery-reslider .slider-direction.slider-direction-prev {
  left: 0;
  background: url('../img/icon/last.png') no-repeat;
}

.slider .jquery-reslider .slider-direction.slider-direction-next {
  right: 0;
  background: url('../img/icon/next.png') no-repeat
}

.slider .jquery-reslider .slider-dots {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 80px;
}

.slider .jquery-reslider .slider-dots li {
  width: 15px;
  height: 15px;
  border-radius: 100px;
  display: inline-block;
  margin: 10px;
  border: 1px solid #ffffff;
  cursor: pointer;
}

.slider .jquery-reslider .slider-dots li.active { background-color: #ffffff; }
@media screen and (max-width: 768px) {

.slider .jquery-reslider .slider-direction { zoom: .8; }

.slider .jquery-reslider .slider-dots { position: absolute; }
}
.scrollpic{max-width:1048px;min-height:550px;margin:20px auto;}
#myscroll{display:block; width:100%; position:relative; height:490px; overflow:hidden;}
#myscroll #myscrollbox{display:block; float:left; position:absolute; left:0; top:0; width:1000000px;}
#myscroll ul{display:block; float:left; list-style-type:none; padding:0; margin:0;}
#myscroll ul li{display:block; float:left; width: 212px; padding:0; 
  margin: 0;}
#myscroll ul li a{display:block; float:left; width:212px; padding:0 0; position:relative; height:430px; color:#333;}
#myscroll a .intro{position:absolute; left:0; z-index:10; background-color:rgba(255,255,255,.80); padding:0 10px;}
#myscroll a .intro h5{padding:0; margin:0; font-size:16px; font-weight:bold; padding:0 47px 0 15px; background:url(images/go.png) right no-repeat; height:40px; width:180px; line-height:40px; border-bottom:1px solid rgba(215,0,15,.2);}
#myscroll a .intro p{font-size:13px; line-height:20px; margin:10px 15px; height:40px; overflow:hidden;}
#myscroll a .intro{bottom:-61px;}
#myscroll a:hover .intro{bottom:0px;}
#myscroll ul li a img{
	width: 100%;
	height: 100%;
}
#mybtns{ 
  width: 100%;
  display: block;
  height: 42px;
  position: absolute;
  top: 50%;
  margin-top: -21px;
  z-index: 1000;
  }
#mybtns a{width:42px; height:42px; display:block; float:left; margin-right:1px; background-color: #c1c1c1;}
#mybtns a:hover{background-color: #d7000f;}
#mybtns a:hover, #myscroll, #mybtns a,#myscroll a:hover .intro, #myscroll a .intro,#myscroll #myscrollbox{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#mybtns #left{background:url(../img/icon/left-hover.png) no-repeat; position: absolute;
left: 0; background-size: 100% 100%;
}
#mybtns #right{background: url(../img/icon/right-hover.png) no-repeat;
 position: absolute;
 right: 0; background-size: 100% 100%;
}

@media(min-width:1572px){
.scrollpic{max-width:1572px; width:100%;}
#myscroll{width:1572px;}
}
@media(max-width:1571px){
.scrollpic{max-width:1310px; width:100%;}

#myscroll{width:1310px;}
}
@media(max-width:1309px){
.scrollpic{max-width:1048px; width:100%;}
#myscroll{width:1048px;}
}
@media(max-width:1047px){
.scrollpic{max-width:786px; width:100%;}
#myscroll{width:786px;}
}
@media(max-width:767px){
.scrollpic{max-width:524px; width:100%;}
#myscroll{width:524px;}
}
@media(max-width:523px){
.scrollpic{ width:100%; position: relative;}
#myscroll{width:212px; margin: 30% auto 0;}
}

.img_ban{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/*index_gn*/
.index_gn{
	width: 85%;
	height: 95%;
	position: relative;
	top: 5%;
	margin:0 auto ;
}
.index_gntext{
	width: 25%;
	position: absolute;
	left: -20%;
	opacity: 0;
	top: 23%;
	transition: all 0.4s ease-out 0.2s;
}
.index_cur{
	left: 13%;
	opacity: 1;
}
.index_gntext img{
	width: 100%;
}
.index_gnimg{
	width: 54%;
	position: absolute;
	top: 10%;
	right: -50%;
	opacity: 0;
	transition: all 0.5s ease-out 0.2s;
}
.index_curimg{
	right: 10%;
	opacity: 1;
}
.index_gnimg img{
	width: 100%;
}
/*index_hg*/
.index_hg{
	width: 68%;
	height: 90%;
	position: relative;
	top: 10%;
	margin:0 auto ;
}
.index_hgtext{
	width: 35%;
	position: absolute;
	left: -25%;
	opacity: 0;
	top: 13%;
	transition: all 0.4s ease-out 0.2s;
}
.index_hgcur{
	left: 8%;
	opacity: 1;
}
.index_hgtext img{
	width: 100%;
}
.index_hgimg{
	width: 20%;
	position: absolute;
	top: 31%;
	left: -25%;
	opacity: 0;
	transition: all 0.4s ease-out 0.2s;
}
.index_hgcur1{
	left: 8%;
	opacity: 1;
}
.index_hgimg img{
	width: 90%;
}
.index_hgimg1{
	width: 75%;
	position: absolute;
	right: -15%;
	/*opacity: 1;*/
	bottom: 0;
}
.index_hgcur2{
	width: 100% !important;
	margin-top: 0 !important;
	opacity: 1 !important;
}
.index_hgimg1 img{
	width: 0;
	margin-top:25%;
	
	opacity: 0;
	display: block;
	transition: all 0.4s ease-out 0.2s;
}
/*index_ty*/
.index_ty{
	width: 90%;
	height: 95%;
	position: relative;
	top: 5%;
	margin:0 auto ;
}
.index_tytext{
	width: 30%;
	position: absolute;
	left: -25%;
	opacity: 0;
	top: 17%;
	transition: all 0.4s ease-out 0.2s;
}
.index_tycur{
	left:20% ;
	opacity: 1;
}
.index_tytext img{
	width: 100%;
}
.index_tyimg{
	width: 16%;
	position: absolute;
	top: 43%;
	left: -25%;
	opacity: 0;
}
.index_tycur1{
	bottom: -30px !important;
	opacity: 1 !important;
}
.index_tyimg img{
	width: 90%;
}
.index_tyimg1{
	/*width: 65%;*/
	width:100%;
	position: absolute;
	right: -8%;
	opacity: 0;
	bottom: -30%;
	transition: all 0.5s ease-out 0.2s;
}
.index_tyimg1 img{
	width: 100%;
}
/*index_sl*/
.index_sl{
	width: 95%;
	height: 95%;
	position: relative;
	top: 5%;
	margin:0 auto ;
}
.index_sltext{
	width: 15%;
	position: absolute;
	left: -25%;
	opacity: 0;
	top: 18%;
	transition: all 0.4s ease-out 0.2s;
}
.index_slcur{
	left: 22%;
	opacity: 1;
}
.index_sltext img{
	width: 100%;
}
.index_slimg{
	width: 10%;
	position: absolute;
	top: 40%;
	left: -25%;
	opacity: 0;
	transition: all 0.5s ease-out 0.2s;
}

.index_slcur1{
	left: 22%;
	opacity: 1;
}
.index_slimg img{
	width: 90%;
}
.index_slimg1{
	width: 0%;
	position: absolute;
	right: 0;
	opacity: 0;
	bottom: 25%;
	transition: all 1s ease-out 0.2s;
	transform:rotate(0deg);
	-ms-transform:rotate(0deg); 	/* IE 9 */
	-moz-transform:rotate(0deg); 	/* Firefox */
	-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
	-o-transform:rotate(0deg);
}
.index_slcur2{
	right: 0;
	width: 60%;
	opacity: 1;
	bottom: 0;
	transform:rotate(720deg);
-ms-transform:rotate(720deg); 	/* IE 9 */
-moz-transform:rotate(720deg); 	/* Firefox */
-webkit-transform:rotate(720deg); /* Safari 和 Chrome */
-o-transform:rotate(720deg);
}
.index_slimg1 img{
	width: 100%;
}
.index_slimg2{
	width: 50%;
	position: absolute;
	right: 10%;
	bottom: -25%;
	opacity: 0;
}
.index_slimg2 img{
	width: 100%;
}
/*index_rw*/
.index_rw{
	width: 90%;
	height: 97%;
	margin: 0 auto;
	top: 3%;
	position: relative;
}
.index_rwtext{
	width: 30%;
	position: absolute;
	left: 14%;
	top:-20%;
	opacity: 0;
	transition: all 0.4s ease-out 0.2s;
}
.index_rwcur{
	top: 15%;
	opacity: 1;
}
.index_rwtexts{
	width: 70%;
	position: absolute;
	right: 5%;
	bottom:0%;
	opacity: 1;
}
.index_rwtext img,
.index_rwtexts img{
	width: 100%;
}
.index_tao{
	transform: scale3d(0.8, 0.8, 1);
}
