_whatever_magazine.scss 5.54 KB
.mags-container{
	width: 924px;
	margin: 0 auto;	
}
.newest-mags{
	margin: 46px 0 0 0;
}
.mags-info{
	float: left;
	width: 546px;
	h2{
		margin: 23px 0 0 0;
		height: 70px;
		background: url("../assets/images/magazine/mags-title.png") no-repeat center center;
	}
	.mags-text{
		margin: 24px auto 0;
		width: 360px;  
		line-height: 20px;
		font-size: 14px;
		text-align: center;
		color: #444444; 
	}
	.date-price{ 
		margin: 35px 0 0 0;
		p{
			font-size: 17px;
			color: #333333;
			text-align: center; 
		}
		.price{
			color: #666666;
			font-size: 14px;
		}
	}
	.mags-buy{
		margin: 18px 0 0 0;
		.buy-btn{
			display: block;
			margin: 0 auto;
			width: 137px;
			height: 29px;
			line-height: 29px;
			font-size: 17px;
			color: #fff;
			text-align: center;
			background-image: url("../assets/images/magazine/buy-btn-1024.png");
			background-position: center center;
			background-repeat: no-repeat;
		}
	}
}

.mags-slide{
	float: left;
	width: 292px;
	.slide-box{
		width: 100%;
		height:366px;
		overflow: hidden;
		li{
			float: left;
			width: 292px;
			height: 366px;
			img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
	.slide-ctrl{
		margin: 10px 0 0 0;
		text-align: center;
		.slide-ctrl-tabs{
			display: inline-block;
		}
		a{
			float: left;
			margin: 0 0 0 14px;
			width: 10px;
			height: 10px;
			background-image: url("../assets/images/magazine/slide-ctrl-1024.png");
			text-indent: -50px;
			overflow: hidden;
		}
		a:first-child{
			margin: 0;
		}
		a.activeSlide{
			background-image: url("../assets/images/magazine/slide-ctrl-current-1024.png");
		}
		a:focus{
			outline:none;
		}
	}
}

.column-slide{
	margin: 41px 0 0 0;
	position: relative;
	.slide-box{
		width: 100%;
		height: auto;
		overflow: hidden;
		position:relative;
		height: 312px;
		.loading-img{
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -23px 0 0 -23px;
		}
		.slide-piclist{
			position: relative;
			width:940px;
			top: 0;
			left: 0; 
		}
		li{
			position: relative;
			width: 218px;
			float: left;
			margin: 0 17px 0 0;
			.img-wrap{
				position: relative;
				.border{
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					border: 1px solid #ccc;
				}
				.special-icon{
					position: absolute;
					left: 0;
					top: 0;
					width: 36px;
					height: 15px;
					background: url("../assets/images/magazine/special.png");
				}
			}
			img{
				width: 100%;
				height: 274px;
				display: block;
			}
			span{
				display: block;
				margin: 18px 0 0 0;
				line-height: 20px;
				text-align: center;
				font-size: 16px;
				color: #000;
				font-weight: bold;
			}
		}
	}
	.slide-ctrl{
		display: none;
		a{
			position: absolute;
			width: 40px;
			height: 43px;
			top: 50%;
			margin-top: -40px;
			background-image: url("../assets/images/magazine/slide-ctrl-btn-1024.png");
		}
		a.slide-ctrl-prev{
			background-position: 0 0;
			left: -55px;
		}
		a.slide-ctrl-next{
			background-position: -40px 0;
			right: -55px;
		}
	}
}
.column-slide.magazine-list{
	.slide-box{
		width: 940px;
		li{
			width:235px;
			margin: 0;
			a{
				display: block;
				width: 218px;
			} 
		}
	}
}

.mags-column{
	margin: 43px 0 0 0;
	h2{	
		line-height: 25px;
		font-size: 24px;
		text-align: center;
		color: #000;
		font-weight: bold;
	}
	.column-slide{
		margin: 4px 0 20px 0;
		h4{
			line-height: 47px;
			font-size: 17px;
			font-weight: bold; 
		}
		.slide-box{
			margin: 0;
			height: 362px;
			line-height: 362px;
			text-align: center;
			.slide-piclist{
				float: left;
				width: 928px;
				height: 362px;
			}
			li{
				margin: 0 14px 0 0;
				width: 102px;
				height: 181px;
				.img-wrap{
					width: 102px;
					height: 153px;
				}
				img{
					width: 102px;
					height: 153px;
				}
				span{
					margin: 0;
					line-height: 28px;
					font-size: 14px;
				}
			}
		}
		.slide-ctrl{
			a{
				margin-top: -20px;				
			}
		}
	}
}
.column-slide.mags-app-download{
	margin: 20px 0 0 0;
	.slide-box{
		height: auto;
		li{
			img{
				width: auto;
				margin: 0 auto;
			}
			span{
				margin: 0;
				display: block;
				font-weight: bold;
				font-size: 15px;
				line-height: 20px;
				text-align: center;
			}
			h6{
				margin: 15px 0 0 12px;
				font-size: 22px;
			}
			p{
				margin: 0 0 0 12px;
				line-height: 20px;
				color: #666666;
				font-size: 16px;
			}
			strong{
				display: block;
				margin: 22px 0 0 12px;
				line-height: 18px;
				font-size: 14px;
				color: #000;
			}
		}
		li.column-slide01{
			img{
				width: 170px;
				height: 150px;
			}
		}
		li.column-slide02{
			img{
				margin: 11px 0 0 55px;
				width: 170px;
				height: 130px;
			}
		}
		li.column-slide03{
			img{
				width: 129px;
				height: 124px;
			}
		}
	}
}

.column-slide.rule{
	margin: 33px 0 0 0;
	h2{
		line-height: 48px;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}
	.slide-box{
		margin: 11px 0 0 0;
		height: 332px;
	}
	.slide-ctrl{
		a{
			margin-top: 0;
		}
	}
}
/*大图弹层样式*/
.imgZoom{
	display:none;
	vertical-align: middle;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 999;
	width: 470px;
	img{
		width: 100%;
	}
	.guideBtn{
		position: absolute;
		width: 20px;
		height: 34px;
		top: 50%;
		margin-top: -17px;
		background-image: url("../assets/images/arrow-girl.png");   
		background-repeat: no-repeat;
	}
	.prev{
		background-position: 0 0;
		left: -112px;
	}
	.next{
		background-position: -20px 0;
		right: -112px;
	}
}
.imgZoom.show{
	display: block;
} 
.overlay{
	display:none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.7;
	filter:alpha(opacity=70);
	z-index: 998;  
}