/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	/* Fix of Webkit flickering */
	z-index: 1;
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	-webkit-transition-property: -webkit-transform, left, top;
	-webkit-transition-duration: 0s;
	-webkit-transform: translate3d(0px, 0, 0);
	-webkit-transition-timing-function: ease;
	-moz-transition-property: -moz-transform, left, top;
	-moz-transition-duration: 0s;
	-moz-transform: translate3d(0px, 0, 0);
	-moz-transition-timing-function: ease;
	-o-transition-property: -o-transform, left, top;
	-o-transition-duration: 0s;
	-o-transform: translate3d(0px, 0, 0);
	-o-transition-timing-function: ease;
	-o-transform: translate(0px, 0px);
	-ms-transition-property: -ms-transform, left, top;
	-ms-transition-duration: 0s;
	-ms-transform: translate3d(0px, 0, 0);
	-ms-transition-timing-function: ease;
	transition-property: transform, left, top;
	transition-duration: 0s;
	transform: translate3d(0px, 0, 0);
	transition-timing-function: ease;
}

.swiper-free-mode>.swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}

.swiper-slide {
	float: left;
	position: relative;
	overflow: hidden;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}

.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}
.device {
	width: 100%;
	height: 100%;
	background: #111;
	position: relative;
	box-shadow: 0px 0px 5px #000;
}

/*箭头指示引导*/
@-webkit-keyframes moveRight {
	0%{-webkit-transform:translateX(0px)}
	20%{-webkit-transform:translateX(0px)}
	35%{-webkit-transform:translateX(-6px)}
	50%{-webkit-transform:translateX(10px)}
	65%{-webkit-transform:translateX(0px)}
	80%{-webkit-transform:translateX(6px)}
	100%{-webkit-transform:translateX(0px)}
}
@-moz-keyframes moveRight {
	0%{-moz-transform:translateX(0px)}
	20%{-moz-transform:translateX(0px)}
	35%{-moz-transform:translateX(-6px)}
	50%{-moz-transform:translateX(10px)}
	65%{-moz-transform:translateX(0px)}
	80%{-moz-transform:translateX(6px)}
	100%{-moz-transform:translateX(0px)}
}
@keyframes moveRight {
	0%{transform:translateX(0px)}
	20%{transform:translateX(0px)}
	35%{transform:translateX(-6px)}
	50%{transform:translateX(10px)}
	65%{transform:translateX(0px)}
	80%{transform:translateX(6px)}
	100%{transform:translateX(0px)}
}

/*箭头指示引导*/
@-webkit-keyframes moveLeft {
	0%{-webkit-transform:translateX(0px)}
	20%{-webkit-transform:translateX(0px)}
	35%{-webkit-transform:translateX(6px)}
	50%{-webkit-transform:translateX(-10px)}
	65%{-webkit-transform:translateX(0px)}
	80%{-webkit-transform:translateX(-6px)}
	100%{-webkit-transform:translateX(0px)}
}
@-moz-keyframes moveLeft {
	0%{-moz-transform:translateX(0px)}
	20%{-moz-transform:translateX(0px)}
	35%{-moz-transform:translateX(6px)}
	50%{-moz-transform:translateX(-10px)}
	65%{-moz-transform:translateX(0px)}
	80%{-moz-transform:translateX(-6px)}
	100%{-moz-transform:translateX(0px)}
}
@keyframes moveLeft {
	0%{transform:translateX(0px)}
	20%{transform:translateX(0px)}
	35%{transform:translateX(6px)}
	50%{transform:translateX(-10px)}
	65%{transform:translateX(0px)}
	80%{transform:translateX(-6px)}
	100%{transform:translateX(0px)}
}

.groupPicsCon .arrow-left {
	animation: moveLeft 1.5s forwards infinite;
	-webkit-animation: moveLeft 1.5s forwards infinite;
	background: url(../img/arrows.png?123123) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -15px;
	width: 49px;
	height: 60px;
	display:none;
}

.groupPicsCon .arrow-right {
	animation: moveRight 1.5s forwards infinite;
	-webkit-animation: moveRight 1.5s forwards infinite;
	background: url(../img/arrows.png?123123) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -15px;
	width: 49px;
	height: 60px;
	display:none;
}

.swiper-container {
	height: 300px;
	width: 640px;
	background-color: #000;
}

.content-slide {
	padding: 20px;
	color: #fff;
}

.title {
	font-size: 25px;
	margin-bottom: 10px;
}

.pagination {
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 5px;
	width: 100%;
}

.swiper-pagination-switch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #999;
	box-shadow: 0px 1px 2px #555 inset;
	margin: 0 3px;
	cursor: pointer;
}

.swiper-active-switch {
	background: #fff;
}

/*
Scrollbar
*/
.swiper-scrollbar {
	border-radius: 10px;
	position: relative;
	-ms-touch-action: none;
	background: rgba(0, 0, 0, 0.1)
}
.swiper-container-horizontal>.swiper-scrollbar {
	position: absolute;
	left: 1%;
	bottom: 3px;
	z-index: 50;
	height: 5px;
	width: 98%
}
.swiper-container-vertical>.swiper-scrollbar {
	position: absolute;
	right: 3px;
	top: 1%;
	z-index: 50;
	width: 5px;
	height: 98%
}

.swiper-scrollbar-drag {
	height: 100%;
	width: 100%;
	position: relative;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}

.swiper-scrollbar-cursor-drag {
	cursor: move;
}