@import "base.less";
@import "loading.less";
.special-list{
	padding-top: 10px;
	a{
		width: 100%;
		margin-bottom: 10px;
		display: block;
		overflow: hidden;
		position: relative;

		img{
			width: 100%;
			position: absolute;
			top: -10px;
		}

		.background{
			background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			background: -webkit-gradient(linear, 0% 60%, 0% 90%,from(rgba(0,0,0,0)),to(rgba(0, 0, 0, 0.8)));
			background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000);
			// height: 50%;
			height: 100%;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		div.title-con{
			// box-shadow: 0 -25px 25px #191919 inset;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 50px;
			width: 100%;
			color: #fff;
			padding: 7px 10px;
			font-size: 1.0em;
			box-sizing: border-box;
			line-height: 3.5em;

			.caption{
				font-size: 0.85em;
				display: block;
			}
			
		}
	} 

	a.native-ad{

		.ad-bg{
			background: #007bff none repeat scroll 0 0;
		    height: 60px;
		    right: -30px;
		    opacity: 0.7;
		    position: absolute;
		    top: -30px;
		    .rotation(-45deg);
		    width: 60px;
		}

		// .ad-notice{
		// 	color: #fff;
		//     height: 28px;
		//     right: -7px;
		//     line-height: 28px;
		//     position: absolute;
		//     text-align: center;
		//     top: 0px;
		//     width: 40px;
		//     .rotation(45deg);
		//     font-size: 0.8em;
		// }

		.ad-notice{
			position: absolute;
			top: 0;
			right: 0;
			background-image: url('img/ad_logo@2x.png');
			background-size: cover;
			width: 20px;
			height: 14px;
		}

		div.title-con{
			height: 16px;
			line-height: 18px;
			width: 80%;
			padding: 0 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			bottom: 10px;
		}

		.ad-icon{
			width: 30px;
			height: 15px;
			line-height: 15px;
			font-size: 10px;
			border: 1px solid rgba(255, 255, 255, 0.3);
			color: rgba(255, 255, 255, 0.4);
			text-align: center;
			border-radius: 3px;
			position: absolute;
			right: 10px;
			bottom: 9px;
		}
	}
	
	.placeholder{
		background-color: #d8d8d8;
	    background-image: url("img/placeholder.png?v=1");
	    background-position: center center;
	    background-repeat: no-repeat;
	    background-size: contain;
	}
} 
@media screen and (min-width: 414px){
	.special-list{
		padding-top: 15px;
		a{
			margin-bottom: 15px;
			div.title-con{
				height: 60px;
				font-size: 1.2em;
				// box-shadow: 0 -30px 30px #191919 inset;
				line-height: 3.4em;
			}

		}

		a.native-ad{

			div.title-con{
				height: 20px;
				line-height: 22px;
			}

			.ad-icon{
				height: 20px;
    			line-height: 20px;
    			width: 35px;
    			font-size: 12px;
			}
		}
	}
	
}

@media screen and (min-width: 768px){
	.special-list{
		padding-top: 20px;
		a{
			margin-bottom: 20px;
			div.title-con{
				height: 100px;
				// box-shadow: 0 -50px 50px #191919 inset;
				font-size: 1.4em;
				padding: 15px 20px;
				line-height: 5.5em;
			}

		}

		a.native-ad{

			.ad-bg{
			    height: 100px;
			    right: -50px;
			    top: -50px;
			    width: 100px;
			}

			div.title-con{
				height: 22px;
				line-height: 24px;
			}

			.ad-icon{
				height: 22px;
    			line-height: 22px;
    			width: 40px;
			}

			.ad-notice{
				background-image: url('img/ad_logo@3x.png');
				background-size: cover;
				width: 40px;
				height: 28px;
			}
		}
	}
	
}