@charset "utf-8";
* {
	margin:0;
	padding:0;
	list-style:none;
}
body{font-family:'microsoft yahei';}

.bg{ width:100%; position: fixed;}
.bg img{ width:100%; }

.back{ width:20%; position:absolute; top:2%; left:0.5%;z-index:9996}
.back img{ width:100%;}

.jp{ width:40%; position:absolute; top:9%; left:3%; z-index:9998}
.jp img{ width:100%;}

.xlb{ width:50%; position:absolute;z-index:9997; top:-3%; right:0%;}
.xlb img{ width:100%;}

.sl{ width:100%; position:absolute; z-index:998; top:11%; left:0%;}
.sl img{ width:100%;}

.slider{z-index:9999; width:100%; top:0; bottom:0}
.slider ul{}
.slider ul li{ width:20%;}
.slider ul li:nth-child(1){animation-delay: 0.3s; -webkit-animation-delay: 0.3s;}
.slider ul li:nth-child(2){animation-delay: 0.6s; -webkit-animation-delay: 0.6s;}
.slider ul li:nth-child(3){animation-delay: 0.9s; -webkit-animation-delay: 0.9s;}
.slider ul li:nth-child(4){animation-delay: 1.2s; -webkit-animation-delay: 1.2s;}
.slider ul li:nth-child(5){animation-delay: 1.5s; -webkit-animation-delay: 1.5s;}
.slider ul li:nth-child(6){animation-delay: 1.8s; -webkit-animation-delay: 1.8s;}
.slider ul li:nth-child(7){animation-delay: 2.1s; -webkit-animation-delay: 2.1s;}
.slider ul li img{ width:100%;}
/*.slider ul{}
.slider ul li{ width:16%;}
.slider ul li img{ width:100%;} 
.slider ul li:nth-child(1){position:absolute;top:3.5%; left:8%}
.slider ul li:nth-child(2){position:absolute;top:22%; left:7%}
.slider ul li:nth-child(3){position:absolute;top:42%; left:4%}
.slider ul li:nth-child(4){position:absolute;top:60%; left:7%}
.slider ul li:nth-child(5){position:absolute;top:79%; left:4%}
.slider ul li:nth-child(6){position:absolute;top:83%; right:46%}
.slider ul li:nth-child(7){position:absolute;top:80%; right:14%}
*/



@-webkit-keyframes 'slideLeft' {
 0% {
left: -500px;
}
 100% {
left: 0;
}
}
@-moz-keyframes 'slideLeft' {
 0% {
left: -500px;
}
 100% {
left: 0;
}
}
@-o-keyframes 'slideLeft' {
 0% {
left: -500px;
}
 100% {
left: 0;
}
}
@-ms-keyframes 'slideLeft' {
 0% {
left: -500px;
}
 100% {
left: 0;
}
}
@keyframes 'slideLeft' {
 0% {
left: -500px;
}
 100% {
left: 0;
}
}
.slideLeft:target {
	z-index: 100;
	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-name: slideLeft;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-ms-animation-name: slideLeft;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: 1;
	-o-animation-name: slideLeft;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: 1;
	animation-name: slideLeft;
	animation-duration: 1s;
	animation-iteration-count: 1;
}
 
 
/* Slide Bottom */
 
@-webkit-keyframes 'slideBottom' {
 0% {
top: 350px;
}
 100% {
top: 0;
}
}
@-moz-keyframes 'slideBottom' {
 0% {
top: 350px;
}
 100% {
top: 0;
}
}
@-ms-keyframes 'slideBottom' {
 0% {
top: 350px;
}
 100% {
top: 0;
}
}
@-o-keyframes 'slideBottom' {
 0% {
top: 350px;
}
 100% {
top: 0;
}
}
@keyframes 'slideBottom' {
 0% {
top: 350px;
}
 100% {
top: 0;
}
}
.slideBottom:target {
	z-index: 100;
	-webkit-animation-name: slideBottom;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-name: slideBottom;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-ms-animation-name: slideBottom;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: 1;
	-o-animation-name: slideBottom;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: 1;
	animation-name: slideBottom;
	animation-duration: 1s;
	animation-iteration-count: 1;
}
 
/* Zoom In */
 
@-webkit-keyframes 'zoomIn' {
 0% {
-webkit-transform: scale(0.1);
}
 100% {
-webkit-transform: none;
}
}
@-moz-keyframes 'zoomIn' {
 0% {
-moz-transform: scale(0.1);
}
 100% {
-moz-transform: none;
}
}
@-ms-keyframes 'zoomIn' {
 0% {
-ms-transform: scale(0.1);
}
 100% {
-ms-transform: none;
}
}
@-o-keyframes 'zoomIn' {
 0% {
-o-transform: scale(0.1);
}
 100% {
-o-transform: none;
}
}
@keyframes 'zoomIn' {
 0% {
transform: scale(0.1);
}
 100% {
transform: none;
}
}
.zoomIn:target {
	z-index: 100;
	-webkit-animation-name: zoomIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-name: zoomIn;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-ms-animation-name: zoomIn;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: 1;
	-o-animation-name: zoomIn;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: 1;
	animation-name: zoomIn;
	animation-duration: 1s;
	animation-iteration-count: 1;
}
 
/* Zoom Out */
 
@-webkit-keyframes 'zoomOut' {
 0% {
-webkit-transform: scale(2);
}
 100% {
-webkit-transform: none;
}
}
@-moz-keyframes 'zoomOut' {
 0% {
-moz-transform: scale(2);
}
 100% {
-moz-transform: none;
}
}
@-ms-keyframes 'zoomOut' {
 0% {
-ms-transform: scale(2);
}
 100% {
-ms-transform: none;
}
}
@-o-keyframes 'zoomOut' {
 0% {
-o-transform: scale(2);
}
 100% {
-o-transform: none;
}
}
@keyframes 'zoomOut' {
 0% {
transform: scale(2);
}
 100% {
transform: none;
}
}
.zoomOut:target {
	z-index: 100;
	-webkit-animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-name: zoomOut;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-ms-animation-name: zoomOut;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: 1;
	-o-animation-name: zoomOut;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: 1;
	animation-name: zoomOut;
	animation-duration: 1s;
	animation-iteration-count: 1;
}
 
/* Rotate */
 
@-webkit-keyframes 'rotate' {
 0% {
-webkit-transform: rotate(-360deg) scale(0.1);
}
 100% {
-webkit-transform: none;
}
}
@-moz-keyframes 'rotate' {
 0% {
-moz-transform: rotate(-360deg) scale(0.1);
}
 100% {
-moz-transform: none;
}
}
@-ms-keyframes 'rotate' {
 0% {
-ms-transform: rotate(-360deg) scale(0.1);
}
 100% {
-ms-transform: none;
}
}
@-o-keyframes 'rotate' {
 0% {
-o-transform: rotate(-360deg) scale(0.1);
}
 100% {
-o-transform: none;
}
}
@keyframes 'rotate' {
 0% {
transform: rotate(-360deg) scale(0.1);
}
 100% {
transform: none;
}
}
.rotate:target {
	z-index: 100;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-name: rotate;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-ms-animation-name: rotate;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: 1;
	-o-animation-name: rotate;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: 1;
	animation-name: rotate;
	animation-duration: 1s;
	animation-iteration-count: 1;
}
 
/* Not Target */
 
@-webkit-keyframes 'notTarget' {
 0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}
@-moz-keyframes 'notTarget' {
 0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}
@-ms-keyframes 'notTarget' {
 0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}
@-o-keyframes 'notTarget' {
 0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}
@keyframes 'notTarget' {
 0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}
 .bg:not(:target) {
 -webkit-animation-name: notTarget;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -moz-animation-name: notTarget;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: 1;
 -ms-animation-name: notTarget;
 -ms-animation-duration: 1s;
 -ms-animation-iteration-count: 1;
 -o-animation-name: notTarget;
 -o-animation-duration: 1s;
 -o-animation-iteration-count: 1;
 animation-name: notTarget;
 animation-duration: 1s;
 animation-iteration-count: 1;
}

@media screen and (max-width: 320px) and (max-height: 480px){/*iphone4,4s*/
.slider ul li{ width:15.5%;}
}