@charset "gb2312";
/* CSS Document */


	




.main{width:65%; margin: 0 auto; text-align:center; color:#999;font-size:14px;line-height:1.8;text-align:center;}
.main img{width:100%; border-radius: 6px; box-shadow: 0 20px 40px #111314;}
.main h8{font-size:20px;font-weight:bold;}

	
	
	
	
.parallax-bg {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-webkit-background-size: cover;background-size: cover;background-position: center;z-index: -1;}
.parallax-bg .ball:nth-child(1) {display: block;opacity: 0.1;}
.bgball-container2 .ball:nth-child(1) {opacity: 0.2;}
.parallax-bg .ball:nth-child(2) {display: none;}
.ball {-webkit-animation: 30s ball_shake infinite;animation: 30s ball_shake infinite;}
/* ball animation*/
.ball1 {position: absolute;height: 396px;top: 153px;right: -200px;
}
@-webkit-keyframes ball_shake {
	20% {-webkit-transform: translate(10%, 10%)}
	40% {-webkit-transform: translate(0, 10%)}
	60% {-webkit-transform: translate(10%, 0)}
	80% {-webkit-transform: translate(0, -10%)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake {
	20% {transform: translate(10%, 10%)}
	40% {transform: translate(0, 10%)}
	60% {transform: translate(10%, 0)}
	80% {transform: translate(0, -10%)}
	100% {transform: translate(0, 0)}
}
@-webkit-keyframes ball_shake2 {
	20% {-webkit-transform: translate(10%, 10%)}
	40% {-webkit-transform: translate(10%, 0)}
	60% {-webkit-transform: translate(0, -10%)}
	80% {-webkit-transform: translate(-10%, -10%)}
	100% {-webkit-transform: translate(0, 0)
	}
}
@keyframes ball_shake2 {
	20% {transform: translate(10%, 10%)}
	40% {transform: translate(10%, 0)}
	60% {transform: translate(0, -10%)}
	80% {transform: translate(-10%, -10%)}
	100% {transform: translate(0, 0)
	}
}
@-webkit-keyframes ball_shake3 {
	20% {-webkit-transform: translate(-10%, 10%)}
	40% {-webkit-transform: translate(-10%, 0)}
	60% {-webkit-transform: translate(0, -10%)}
	80% {-webkit-transform: translate(10%, 10%)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake3 {
	20% {transform: translate(-10%, 10%)}
	40% {transform: translate(-10%, 0)}
	60% {transform: translate(0, -10%)}
	80% {transform: translate(10%, 10%)}
	100% {transform: translate(0, 0)
	}
}
@-webkit-keyframes ball_shake4 {
	20% {-webkit-transform: translate(10%, -10%)}
	40% {-webkit-transform: translate(-10%, -10%)}
	60% {-webkit-transform: translate(0, 10%)}
	80% {-webkit-transform: translate(10%, 0)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake4 {
	20% {transform: translate(10%, -10%)}
	40% {transform: translate(-10%, -10%)}
	60% {transform: translate(0, 10%)}
	80% {transform: translate(10%, 0)}
	100% {transform: translate(0, 0)}
}
@-webkit-keyframes ball_shake5 {
	from {-webkit-transform: translate(0, -10%)}
	to {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake5 {
	from {transform: translate(0, -10%)}
	to {transform: translate(0, 0)}
}
		@-webkit-keyframes ball_shake6 {
	20% {-webkit-transform: translate(10%, -10%)}
	40% {-webkit-transform: translate(-10%, -10%)}
	60% {-webkit-transform: translate(0, 10%)}
	80% {-webkit-transform: translate(10%, 0)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake6 {
	20% {-webkit-transform: translate(10%, 10%)}
	40% {-webkit-transform: translate(0, 10%)}
	60% {-webkit-transform: translate(10%, 0)}
	80% {-webkit-transform: translate(0, -10%)}
	100% {-webkit-transform: translate(0, 0)}
}
@-webkit-keyframes ball_shake7 {
	20% {-webkit-transform: translate(-10%, 10%)}
	40% {-webkit-transform: translate(-10%, 0)}
	60% {-webkit-transform: translate(0, -10%)}
	80% {-webkit-transform: translate(10%, 10%)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake7 {
	20% {transform: translate(-10%, 10%)}
	40% {transform: translate(-10%, 0)}
	60% {transform: translate(0, -10%)}
	80% {transform: translate(10%, 10%)}
	100% {transform: translate(0, 0)}
}
		@-webkit-keyframes ball_shake8 {
	20% {-webkit-transform: translate(10%, -10%)}
	40% {-webkit-transform: translate(-10%, -10%)}
	60% {-webkit-transform: translate(0, 10%)}
	80% {-webkit-transform: translate(10%, 0)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake8 {
	20% {transform: translate(10%, -10%)}
	40% {transform: translate(-10%, -10%)}
	60% {transform: translate(0, 10%)}
	80% {transform: translate(10%, 0)}
	100% {transform: translate(0, 0)}
}
@-webkit-keyframes ball_shake9 {
	20% {-webkit-transform: translate(-10%, 10%)}
	40% {-webkit-transform: translate(-10%, 0)}
	60% {-webkit-transform: translate(0, -10%)}
	80% {-webkit-transform: translate(10%, 10%)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake9 {
	20% {transform: translate(-10%, 10%)}
	40% {transform: translate(-10%, 0)}
	60% {transform: translate(0, -10%)}
	80% {transform: translate(10%, 10%)}
	100% {transform: translate(0, 0)}
}
@-webkit-keyframes ball_shake10 {
	20% {-webkit-transform: translate(-10%, 10%)}
	40% {-webkit-transform: translate(-10%, 0)}
	60% {-webkit-transform: translate(0, -10%)}
	80% {-webkit-transform: translate(10%, 10%)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake10 {
	20% {transform: translate(-10%, 10%)}
	40% {transform: translate(-10%, 0)}
	60% {transform: translate(0, -10%)}
	80% {transform: translate(10%, 10%)}
	100% {transform: translate(0, 0)}
}
@-webkit-keyframes ball_shake11 {
	20% {-webkit-transform: translate(10%, -10%)}
	40% {-webkit-transform: translate(-10%, -10%)}
	60% {-webkit-transform: translate(0, 10%)}
	80% {-webkit-transform: translate(10%, 0)}
	100% {-webkit-transform: translate(0, 0)}
}
@keyframes ball_shake11 {
	20% {transform: translate(10%, -10%)}
	40% {transform: translate(-10%, -10%)}
	60% {transform: translate(0, 10%)}
	80% {transform: translate(10%, 0)}
	100% {transform: translate(0, 0)}
}
.ball2 {position: absolute ;height: 183px;top: 20%; left: 15%;-webkit-animation: 20s ball_shake2 infinite;animation: 20s ball_shake2 infinite;}
.ball3 {position: absolute; height: 234px;top: 36%;left: 2%;-webkit-animation: 20s ball_shake3 infinite;animation: 20s ball_shake3 infinite;}
.ball4 {width: 402px;position: absolute;top: 33%;left: -12%;-webkit-animation: 20s ball_shake4 infinite;animation: 20s ball_shake4 infinite;}
.ball5 {width: 300px;position: absolute;top: 50%;right: -8%;margin-bottom: -1580px;-webkit-animation: 5s ball_shake5 alternate infinite;animation: 5s ball_shake5 alternate infinite;}
.ball6 {width: 80px;position: absolute;top: 45%;right: 8%;margin-bottom: -2080px;-webkit-animation: 20s ball_shake6 alternate infinite;animation: 20s ball_shake6 alternate infinite;}
.ball7 {width: 467px;position: absolute;top: 60%;left: -10%;margin-bottom: -2580px; -webkit-animation: 15s ball_shake7 alternate infinite;animation: 15s ball_shake7 alternate infinite;}
.ball8 {width: 201px;position: absolute;top: 92%;right: 5%;margin-bottom: -3080px;-webkit-animation: 20s ball_shake8 alternate infinite;animation: 20s ball_shake8 alternate infinite;}
.ball9 {width: 467px;position: absolute;top: 93%;left: 70%;margin-bottom: -3380px; -webkit-animation: 15s ball_shake9 alternate infinite;animation: 15s ball_shake9 alternate infinite;}
.ball10 {width: 150px;position: absolute;top: 1%;left: 5%;margin-top: 50px; -webkit-animation: 15s ball_shake9 alternate infinite;animation: 15s ball_shake9 alternate infinite;}
.ball11 {width: 100px;position: absolute;top: 25%;left: 92%;margin-top: 50px; -webkit-animation: 15s ball_shake9 alternate infinite;animation: 15s ball_shake9 alternate infinite;}
.ball13 {width: 200px;position: absolute;top: 80%;left: 8%;margin-top: 50px; -webkit-animation: 15s ball_shake9 alternate infinite;animation: 15s ball_shake9 alternate infinite;}
/*图片放大开始*/		
.image-list{}
.image-list .cover{box-sizing: content-box; box-sizing: border-box; width:25%; padding: 0.8% 1.5%; cursor: pointer;}
.image-list .cover img{width: 100%; border-radius:3px; box-shadow: 0 2px 4px #16171a; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-bottom: -5%;}
.image-list .cover:hover img{box-shadow: 0 5px 10px 2px #16171a ; transform: translateY(-5px);}
/*main CSS*/
#pictureViewer{width: 100%;height: 100%;position: fixed; top: 0;left: 0; background-color: rgba(0,0,0,.3);z-index: 10000;}
#pictureViewer > .content{background-color:#333;position: absolute;width:100%;margin: auto;top: 0;right: 0;bottom: 0;left: 0;}
#pictureViewer .menu-bar{width: 100%;}
#pictureViewer .menu-bar .handel{width: 40px;height: 40px;float: right;background-repeat: no-repeat;background-position: 50%;cursor: pointer;}
#pictureViewer .menu-bar .handel:hover{background-color: #194fd8; -webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;transition: all .3s;}
#pictureViewer .menu-bar .handel.maximization{background-image: url(../img/maximization_black.png);background-size: 14px;}
#pictureViewer .menu-bar .handel.maximization:hover{background-image: url(../img/maximization_white.png);}
#pictureViewer .menu-bar .handel.miniaturization{background-size: 16px;background-image: url(img/miniaturization_black.png);}
#pictureViewer .menu-bar .handel.miniaturization:hover{background-image: url(../img/miniaturization_white.png);}
#pictureViewer .menu-bar .handel.close-view{background-image: url(../img/close_black.png);background-size: 15px;}
#pictureViewer .menu-bar .handel.close-view:hover{background-image: url(../img/close_white.png);}
#pictureViewer .handel-prev,
#pictureViewer .handel-next{display: inline-block;width: 50px; height: 80px;position: relative; top: calc(50% - 80px);background-repeat: no-repeat;background-size: 25px;background-position: 50%;cursor: pointer;
-webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#pictureViewer .handel-prev{background-image:url(../img/prev_blank.png);}
#pictureViewer .handel-next{background-image:url(../img/next_blank.png);}
#pictureViewer .handel-prev:hover,
#pictureViewer .handel-next:hover{background-color: #194fd8;}
#pictureViewer .handel-prev:hover{background-image: url(../img/prev_white.png);}
#pictureViewer .handel-next:hover{background-image: url(../img/next_white.png);}
#pictureViewer .picture-content{display: inline-block; width: 90%; height: calc(100% - 0px); position: absolute;margin: 0 auto;left: 0;right: 0;}
#pictureViewer .picture-content .cover{position: absolute;margin: auto;top:-5%;right: 0;bottom: 0;left: 0; box-shadow: 0 20px 40px #111314; border-radius: 4px;}
#pictureViewer .counter{position: absolute;bottom: 0;height: 40px;line-height: 40px;width: 100%;text-align: center; color: #999;font-size: 14px;}
#pictureViewer .hide{display: none;}
#pictureViewer .left{float: left;}
#pictureViewer .right{float: right;}
#pictureViewer .clear-flex{clear: both;}
#pictureViewer img{max-width: 100%;max-height: 100%; }
/*图片放大结束*/