
.introduce_box .op_wrap {
    height: 100%;
}

.com_baffle{
	width: 100%;
	height: 22px;
	bottom: -1px;
	left: 0;
	font-size: 0;
}
.com_baffle .baffle{
	width: 40.5%;
	height: 22px;
	background: #fff;
}
.com_baffle .baffle_btn{
	width: 19%;
	height: 22px;
	background: url(../images/icon_arrow_down.png) center top no-repeat;
	background-size: 20px 13px;
}

.information_list a{
	width: 100%;
	height: 91px;
	border-top: 1px solid #ededed;
	overflow: hidden;
	font-size: 0;
}
.information_list a:nth-child(1){
	border-top:none;
}
.information_list a:nth-child(n+6){
	/*display: none;*/
}
.information_list a img{
	width: 120px;
	margin: 16px 13px 16px 20px;
}
.information_list a span{
	width: calc(100% - 20px - 120px - 20px - 13px);
	height: 60px;
}
.information_list a span i{
	color: #000;
	font-size: 13px;
	line-height: 20px;
}
.information_list a span dfn{
	display: block;
	height: 15px;
	line-height: 15px;
	color: #a3a3a3;
	font-size: 12px;
	margin-top: 5px;
	text-align: right;
}
.mask_introduce{
	width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
}
.pop_introduce{
	width: 100%;
	max-width: 960px;
	height: auto;
	background: #fff;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 600;
}
.pop_introduce .introduce_box{
	height: 100px;
}
.introduce_gamedetails{
	width: calc(100% - 40px);
	max-height: 150px;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0 auto 15px;
}
.introduce_gamedetails p{
	color: #737373;
    font-size: 12px;
    line-height: 21px;
}
.features_title,
.introduce_close{
	display: none;
}
.introduce_features{
	width: calc(100% - 20px);
	height: 145px;
	margin-left: 20px;
}
.introduce_features .introduce_features_scroll .swiper-slide{
	width: auto;
	font-size: 0;
}
.introduce_features .introduce_features_scroll .swiper-slide img{
	height: 100%;
	margin-right: 13px;
}
.pop_introduce .swiper-scrollbar-features{
	display: none;
}
.introduce_arrow{
	height: 20px;
	background: #fff;
}
.introduce_arrow .arrow_up{
	width: 19%;
    height: 22px;
    background:#fff url(../images/icon_arrow_up.png) center top no-repeat;
    background-size: 20px 13px;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
}
@keyframes bounceInDown{
	0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0% {
        opacity: 0;
        transform: translate3d(-50%,-3000px,0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-50%,25px,0);
    }
    75% {
        transform: translate3d(-50%,-10px,0);
    }
    90% {
        transform: translate3d(-50%,5px,0);
    }
    to {
        transform: translate3d(-50%,0,0);
    }
}
@keyframes fadeIn{
	from{
		opacity: 0;
		transform: translate(-50%,-50%) scale(.3);
	}
	to{
		opacity: 1;
		transform: translate(-50%,-50%) scale(1);
	}
}

/**iphone**/
@media only screen and (max-width:767px) and (min-width:320px) {
	.information_list a span i{
		height: 40px;
		display: -webkit-box !important;
		overflow: hidden;
		-webkit-text-overflow: ellipsis;
		-moz-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-ms-box-orient: vertical;
		box-orient: vertical;
		-webkit-line-clamp: 2;
		-moz-line-clamp: 2;
		-o-line-clamp: 2;
		-ms-line-clamp: 2;
		line-clamp: 2;
	}
	.information_list a span em{
		display: none;
	}
	.bounceInDown{
		animation: bounceInDown .7s forwards;
	}
}
/**ipad**/
@media only screen and (max-width:991px) and (min-width:768px) {
	.bounceInDown{
		animation: bounceInDown .7s forwards;
	}
	.pop_introduce .introduce_box{
		height: 140px;
	}
	.introduce_gamedetails p{
		line-height: 23px;
		font-size: 14px;
	}
	.information_list a{
		height: 122px;
	}
	.information_list a img{
		width: 150px;
		margin: 24px 20px;
	}
	.information_list a span{
		width: calc(100% - 210px);
		height: 80px;
	}
	.information_list a span i{
		font-size: 15px;
		line-height: 25px;
		display: block;
		overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
	}
	.information_list a span em{
		font-size: 13px;
		color: #737373;
		min-height: 20px;
		max-height: 40px;
		display: -webkit-box !important;
		overflow: hidden;
		-webkit-text-overflow: ellipsis;
		-moz-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-ms-box-orient: vertical;
		box-orient: vertical;
		-webkit-line-clamp: 2;
		-moz-line-clamp: 2;
		-o-line-clamp: 2;
		-ms-line-clamp: 2;
		line-clamp: 2;
	}
	
}
/**windows**/
@media only screen and (max-width:1920px) and (min-width:992px) {
	.introduce_arrow{
		display: none;
	}
	.features_title{
		color: #000;
		font-size: 24px;
		line-height: 68px;
		display: block;
		width: calc(100% - 100px);
		margin: 0 auto;
	}
	.pop_introduce{
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.bounceInDown{
		animation: fadeIn .7s forwards;
	}
	.introduce_close{
		width: 50px;
		height: 50px;
		background: #fff;
		top: -70px;
		right: 0;
		text-indent: -999em;
		display: block;
	}
	.introduce_close::before{
		content: '';
		width: 18px;
		height: 18px;
		background: url(../images/icon_close.png) no-repeat;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -9px 0 0 -9px;
		transition: all .3s;
	}
	.introduce_close:hover::before{
		transform: rotate(180deg);
	}
	.pop_introduce{
		padding-bottom: 58px;
	}
	.pop_introduce .introduce_box{
		height: 180px;
	}
	.introduce_box .op_wrap {
        right: 50px;
    }
	.pop_introduce .introduce_gamedetails{
		width: calc(100% - 100px);
		padding-bottom:0;
	}
	.pop_introduce .introduce_gamedetails p{
		font-size: 16px;
		line-height: 30px;
	}
	.pop_introduce .introduce_features{
		width: calc(100% - 100px);
		height: 288px;
		margin: 0 auto;
	}
	.pop_introduce .introduce_features .introduce_features_scroll .swiper-slide{
		height: 250px;
	}
	.pop_introduce .introduce_features .introduce_features_scroll .swiper-slide img{
		height: 100%;
		margin-right: 15px;
	}
	.pop_introduce .swiper-scrollbar-features{
		background: #f5f5f8;
    	border-radius: 0;
    	display: block;
	}
	.pop_introduce .swiper-container-horizontal>.swiper-scrollbar{
		width: 100%;
    	left: 0;
    	height: 14px;
	}
	.pop_introduce .swiper-scrollbar-drag{
		background: #cdcdcd;
		border-radius: 0;
	}
	.information_list a{
		height: 178px;
		position: relative;
		transition: all .3s;
	}
	.information_list a:hover{
		transform: translateX(15px);
	}
	.information_list a img{
		width: 198px;
		margin: 40px 40px 40px 0;
	}
	.information_list a span{
		width: 630px;
		height: 100px;
	}
	.information_list a span i{
		font-size: 18px;
		line-height: 30px;
		display: block;
		overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
	}
	.information_list a span em{
		font-size: 16px;
		color: #737373;
		min-height: 30px;
		max-height: 60px;
		line-height: 30px;
		display: -webkit-box !important;
		overflow: hidden;
		-webkit-text-overflow: ellipsis;
		-moz-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-ms-box-orient: vertical;
		box-orient: vertical;
		-webkit-line-clamp: 2;
		-moz-line-clamp: 2;
		-o-line-clamp: 2;
		-ms-line-clamp: 2;
		line-clamp: 2;
	}
	.information_list a span dfn{
		position: absolute;
		right: 0;
		font-size: 16px;
		top: 50%;
		height: 20px;
		line-height: 20px;
		margin-top: -10px;
	}
}
.shows{
	width: 100%;
	height: 100%;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}
.show_prev{
	width: 50px;
	height: 50px;
	background: url(../../images/pop_prev.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -25px;
}
.show_next{
	width: 50px;
	height: 50px;
	background: url(../../images/pop_next.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -25px;
}
.mask_img .photos img{
	animation: bounceIn 1s ease both;
}
@keyframes bounceIn{
	0% {
		opacity: 0;
		transform: translate(-50%,-50%) scale(.3);
	}
	50% {
		opacity: 1;
		transform: translate(-50%,-50%) scale(1.05);
	}
	70% {
		transform: translate(-50%,-50%) scale(.9);
	}
	100% {
		transform: translate(-50%,-50%) scale(1);
	}
}