@charset "utf-8";



/* CSS Document */



html, body{



	/*min-width: 980px;*/



	height: 800px;



}



.w{

	width: 1280px;

	margin: 0 auto;
}

.three img{
	-webkit-transition: all 1s ease !important;
	-moz-transition: all 1s ease !important;
	-ms-transition: all 1s ease !important;
	-o-transition: all 1s ease !important;
	transition: all 1s ease !important;
}
.myimg_sca{
	animation: bannerIn 2s forwards;
}









/*INDEX*/



.iban-wrap{



	height: 590px;



}



.iban{



	height: 590px;

}



.iban .imglist li.active{



	animation: bannerIn 8s forwards;



}


/*动画区*/
@keyframes bannerIn{



	100%{



		transform: scale(1.2);



	}



}


@keyframes banTop_bot{
	100%{
		transform: scale(1.2);
	}
}


.iban .w{

	height: 570px;

	/* padding-top: 110px; */
}



.iban .list li{

	position: absolute;

	left: 0;

	top: 0;

	width: 1280px;

	height: 415px;

	display: none;
}



.iban .list .tips{

	top: 0;

	width: 1280px;

	font-size: 24px;

	line-height: 42px;

	color: #fff;
}



.iban .list b{



	font-size: 48px;



	line-height: 66px;



}



.iban .list strong{



	font-size: 48px;



	line-height: 66px;



}



.iban .ban_bt{



	display: inline-block;



	width: 76px;



	padding: 0 10px;



	background: #0c4da2;



	margin-top: 50px;



	font-size: 12px;



	line-height: 30px;



	transition: all 0.5s;



}



.iban .ban_bt:hover{



	background: #fff;



}



/*.iban .list a{



	display: inline-block;



	width: 76px;



	padding: 0 10px;



	background: #0c4da2;



	margin-top: 50px;



	font-size: 12px;



	line-height: 30px;



	transition: all 0.5s;



}*/



/*.iban .list a:hover{



	background: #fff;



}*/



.iban .list span{



	display: inline-block;



	color: #fff;



}



.iban .list a:hover span{



	color: #0c4da2;



}



.iban .list span.fr{



	display: inline-block;



	width: 5px;



	height: 30px;



	background: url(../img/bg_sign03.png) no-repeat 0 0;



}



.iban .list a:hover span.fr{



	background-position: 0 -30px;



}



.iban .list .l{



	left: -200px;



	filter:alpha(opacity=0);



	opacity: 0;



}



.iban .list .r{



	top: 0px;



	right: -200px;



	filter:alpha(opacity=0);



	opacity: 0;



	text-align: right;



}



.iban .line{



	left: 0;



	bottom: 0;



	width: 100%;



	height: 5px;



}



.iban .line-in{



	width: 0;



	background: url(../img/bg_line01.png);



	/*background: #0f37bd;*/



}



.iban li img{



	top: 0px;



}



.iban-box{



	left: 50%;



	bottom: 76px;



	width: 980px;



	height: 161px;




	margin-left: -490px;



}



.iban-box .fi{



	width: 273px;



	height: 145px;



	padding: 16px 27px 0;



}



.iban-box .se{



	width: 268px;



	height: 93px;



	padding: 68px 30px 0;



}



.iban-box .th{




	cursor: pointer;



}



.iban-box a{



	display: inline-block;



	width: 100%;



	font-size: 11px;



	line-height: 28px;



	color: #aab9d5;



	transition: color 0.5s;



}



.iban-box a.tit{



	font-size: 14px;



	line-height: 28px;



	color: #fff;



}



.iban-box a.more{



	position: absolute;



	left: 26px;



	bottom: 19px;



	display: inline-block;



	width: 65px;



	padding: 0 9px 0 22px;



	border: 1px solid #89a4c6;



	font-size: 11px;



	line-height: 26px;



	color: #89a4c6;



	transition: all 0.5s;



}



.iban-box .se a.more{



	border: 1px solid #888582;



	color: #888582;



}



.iban-box a.more span.fr{



	display: inline-block;



	width: 3px;



	height: 26px;



	background: url(../img/bg_sign04.png) no-repeat center;



	filter:alpha(opacity=50);



	opacity: 0.5;



	transition: all 0.5s;



}



.iban-box a:hover{



	color: #fff;



}



.iban-box a.more:hover{



	border: 1px solid #fff;



	color: #fff;



}



.iban-box a.more:hover span.fr{



	filter:alpha(opacity=100);



	opacity: 1;



}



.iban .btns{

	left: 50%;

	bottom: 15%;

	height: 6px;
}



.iban .btns span{



	display: inline-block;



	float: left;



	width: 60px;



	height: 8px;



	background: #000;



	margin: 0 10px;



	filter:alpha(opacity=30);



	opacity: 0.3;



	transition: background 0.5s;



	cursor: pointer;



}



.iban .btns span.cur{



	filter:alpha(opacity=60);



	opacity: 0.6;



}




.iban .list .ban_top{top:-120px;-webkit-transition: all 0.6s ease;
	animation: bannerTop 2s forwards;
	-webkit-animation: bannerTop 2s forwards;
	-moz-animation: bannerTop 2s forwards;
	-ms-animation: bannerTop 2s forwards;
	-o-animation: bannerTop 2s forwards;
}
.iban .list .ban_bot{
	top:200px;
	left:200px;
	animation: bannerBot 2s forwards;
	-webkit-animation: bannerBot 2s forwards;
	-moz-animation: bannerBot 2s forwards;
	-ms-animation: bannerBot 2s forwards;
	-o-animation: bannerBot 2s forwards;
}
.iban .list .two{
	left: -455px;
	top: -90px;
	animation: bannerRight 2s forwards;
	-webkit-animation: bannerRight 2s forwards;
	-moz-animation: bannerRight 2s forwards;
	-ms-animation: bannerRight 2s forwards;
	-o-animation: bannerRight 2s forwards;
}
.iban .list .two1{
	left: -1000px;
	top: 130px;
	animation: bannerRight1 2s forwards;
	-webkit-animation: bannerRight1 2s forwards;
	-moz-animation: bannerRight1 2s forwards;
	-ms-animation: bannerRight1 2s forwards;
	-o-animation: bannerRight1 2s forwards;
}
.iban .list .two2{
	left: -660px;
	top: 130px;
	opacity: 0;
	filter: opacity(0);
	animation: bannerRight2 2s 0.5s forwards;
	-webkit-animation: bannerRight2 2s 0.5s forwards;
	-moz-animation: bannerRight2 2s 0.5s forwards;
	-ms-animation: bannerRight2 2s 0.5s forwards;
	-o-animation: bannerRight2 2s 0.5s forwards;
}
.iban .list .two3{
	left: -320px;
	top: 130px;
	opacity: 0;
	filter: opacity(0);
	animation: bannerRight3 2s 1s forwards;
	-webkit-animation: bannerRight3 2s 1s forwards;
	-moz-animation: bannerRight3 2s 1s forwards;
	-ms-animation: bannerRight3 2s 1s forwards;
	-o-animation: bannerRight3 2s 1s forwards;
}
.iban .list .two4{
	left: 30px;
	top: 130px;
	opacity: 0;
	filter: opacity(0);
	animation: bannerRight4 2s 1.5s forwards;
	-webkit-animation: bannerRight4 2s 1.5s forwards;
	-moz-animation: bannerRight4 2s 1.5s forwards;
	-ms-animation: bannerRight4 2s 1.5s forwards;
	-o-animation: bannerRight4 2s 1.5s forwards;
}

@-o-keyframes bannerRight{0%{top:-90px;opacity: 0;filter: opacity(0);  }100%{top:-60px;opacity: 1;filter: opacity(100);} }
@-webkit-keyframes bannerRight{0%{top:-90px;opacity: 0;filter: opacity(0);  }100%{top:-60px;opacity: 1;filter: opacity(100);} }
@-moz-keyframes bannerRight{0%{top:-90px;opacity: 0;filter: opacity(0);  }100%{top:-60px;opacity: 1;filter: opacity(100);} }
@-ms-keyframes bannerRight{0%{top:-90px;opacity: 0;filter: opacity(0);  }100%{top:-60px;opacity: 1;filter: opacity(100);} }
@-o-keyframes bannerRight{0%{top:-90px;opacity: 0;filter: opacity(0);  }100%{top:-60px;opacity: 1;filter: opacity(100);} }

@-o-keyframes bannerRight2{0%{left:-710px;opacity: 0 !important;filter: opacity(0) !important;  }100%{left:-660px;opacity: 1 !important;filter: opacity(100) !important;} }
@-webkit-keyframes bannerRight2{0%{left:-710px;opacity: 0;filter: opacity(0) !important;  }100%{left:-660px;opacity: 1;filter: opacity(100);} }
@-moz-keyframes bannerRight2{0%{left:-710px;opacity: 0;filter: opacity(0) !important;  }100%{left:-660px;opacity: 1;filter: opacity(100);} }
@-ms-keyframes bannerRight2{0%{left:-710px;opacity: 0;filter: opacity(0) !important;  }100%{left:-660px;opacity: 1;filter: opacity(100);} }
@-o-keyframes bannerRight2{0%{left:-710px;opacity: 0;filter: opacity(0) !important;  }100%{left:-660px;opacity: 1;filter: opacity(100);} }

@-o-keyframes bannerRight3{0%{left:-370px;opacity: 0 !important;filter: opacity(0) !important;  }100%{left:-320px;opacity: 1 !important;filter: opacity(100) !important;} }
@-webkit-keyframes bannerRight3{0%{left:-370px;opacity: 0 !important;filter: opacity(0) !important;  }100%{left:-320px;opacity: 1;filter: opacity(100);} }
@-moz-keyframes bannerRight3{0%{left:-370px;opacity: 0 !important;filter: opacity(0) !important;  }100%{left:-320px;opacity: 1;filter: opacity(100);} }
@-ms-keyframes bannerRight3{0%{left:-370px;opacity: 0;filter: opacity(0) !important;  }100%{left:-320px;opacity: 1;filter: opacity(100);} }
@-o-keyframes bannerRight3{0%{left:-370px;opacity: 0;filter: opacity(0) !important;  }100%{left:-320px;opacity: 1;filter: opacity(100);} }

@-o-keyframes bannerRight4{0%{left:-20px;opacity: 0;filter: opacity(0) !important;  }100%{left:30px;opacity: 1;filter: opacity(100);} }
@-webkit-keyframes bannerRight4{0%{left:-20px;opacity: 0;filter: opacity(0) !important;  }100%{left:30px;opacity: 1;filter: opacity(100);} }
@-moz-keyframes bannerRight4{0%{left:-20px;opacity: 0;filter: opacity(0) !important;  }100%{left:30px;opacity: 1;filter: opacity(100);} }
@-ms-keyframes bannerRight4{0%{left:-20px;opacity: 0;filter: opacity(0) !important;  }100%{left:30px;opacity: 1;filter: opacity(100);} }
@-o-keyframes bannerRight4{0%{left:-20px;opacity: 0;filter: opacity(0) !important;  }100%{left:30px;opacity: 1;filter: opacity(100);} }

@keyframes bannerTop{
	0%{
		top:-150px;
	}
	100%{
		top:-80px;
	}
}
@-webkit-keyframes bannerTop{
	0%{
		top:-150px;
	}
	100%{
		top:-80px;
	}
}
@-moz-keyframes bannerTop{
	0%{
		top:-150px;
	}
	100%{
		top:-80px;
	}
}
@-ms-keyframes bannerTop{
	0%{
		top:-150px;
	}
	100%{
		top:-80px;
	}
}
@-o-keyframes bannerTop{
	0%{
		top:-150px;
	}
	100%{
		top:-80px;
	}
}

@keyframes bannerBot{
	0%{
		top:200px;
	}
	100%{
		top:-100px;
	}
}
@-webkit-keyframes bannerBot{
	0%{
		top:200px;
	}
	100%{
		top:-100px;
	}
}
@-moz-keyframes bannerBot{
	0%{
		top:200px;
	}
	100%{
		top:-100px;
	}
}
@-ms-keyframes bannerBot{
	0%{
		top:200px;
	}
	100%{
		top:-100px;
	}
}
@-o-keyframes bannerBot{
	0%{
		top:200px;
	}
	100%{
		top:-100px;
	}
}

@keyframes bannerRight1{
	0%{
		left:-1050px;
		opacity: 0;
		filter: opacity(0);
	}
	100%{
		left:-1000px;
		opacity: 1;
		filter: opacity(100);
	}
}
@-webkit-keyframes bannerRight1{
	0%{
		left:-1050px;
		opacity: 0;
		filter: opacity(0);
	}
	100%{
		left:-1000px;
		opacity: 1;
		filter: opacity(100);
	}
}
@-moz-keyframes bannerRight1{
	0%{
		left:-1050px;
		opacity: 0;
		filter: opacity(0);
	}
	100%{
		left:-1000px;
		opacity: 1;
		filter: opacity(100);
	}
}
@-ms-keyframes bannerRight1{
	0%{
		left:-1050px;
		opacity: 0;
		filter: opacity(0);
	}
	100%{
		left:-1000px;
		opacity: 1;
		filter: opacity(100);
	}
}
@-o-keyframes bannerRight1{
	0%{
		left:-1050px;
		opacity: 0;
		filter: opacity(0);
	}
	100%{
		left:-1000px;
		opacity: 1;
		filter: opacity(100);
	}
}