@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";
@import "list.less";
.pageView{
	z-index: 2;
	
	.message {
		margin-top: 0;
	}
}
.detail-item{
	padding-top: 10px;
	// @media screen and (min-width: 320px){
	// 	padding-top: 100px;
	// }
	@media screen and (min-width: 375px){
		padding-top: 13px;
	}
	@media screen and (min-width: 414px){
		padding-top: 15px;
	}
	@media screen and (min-width: 768px){
		padding-top: 25px;
	}
	.content{
		position: relative;
		.score-star{
			color: #FFA200;
			background-image: url('img/detail/star_ui.png?v=3');
			background-repeat: no-repeat;
			// margin-bottom: 5px;
			
			@media screen and (min-width: 320px){
				padding-left: 120px;
				height: 20px;
				line-height: 20px;
				background-size: 160px auto;
				font-size: 1.3em;
			}
			@media screen and (min-width: 768px){
				padding-left: 170px;
				height: 30px;
				line-height: 36px;
				background-size: 150px auto;
				font-size: 1.6em;
			}
		}
		@media screen and (min-width: 320px){
			.star-0{
				background-position: 0 0;
			}
			.star-5{
				background-position: 0 -29px;
			}
			.star-10{
				background-position: 0 -59px;
			}
			.star-15{
				background-position: 0 -88px;
			}
			.star-20{
				background-position: 0 -118px;
			}
			.star-25{
				background-position: 0 -148px;
			}
			.star-30{
				background-position: 0 -178px;
			}
			.star-35{
				background-position: 0 -208px;
			}
			.star-40{
				background-position: 0 -237px;
			}
			.star-45{
				background-position: 0 -267px;
			}
			.star-50{
				background-position: 0 -296px;
			}
		}
		@media screen and (min-width: 768px){
			padding-top: 16px;
			.star-0{
				background-position: 0 -300px;
			}
			.star-5{
				background-position: 0 -335px;
			}
			.star-10{
				background-position: 0 -371px;
			}
			.star-15{
				background-position: 0 -407px;
			}
			.star-20{
				background-position: 0 -442px;
			}
			.star-25{
				background-position: 0 -477px;
			}
			.star-30{
				background-position: 0 -512px;
			}
			.star-35{
				background-position: 0 -547px;
			}
			.star-40{
				background-position: 0 -582px;
			}
			.star-45{
				background-position: 0 -617px;
			}
			.star-50{
				background-position: 0 -652px;
			}
		}
	}
	.background{
		// height: 175px;
		// box-shadow: 0 -100px 40px #000 inset;
		// @media screen and (min-width: 375px){
		// 	height: 150px;
		// }
		// @media screen and (min-width: 414px){
		// 	height: 165px;
		// }
		height: 80px;
		box-shadow: 0 -40px 40px @backgroundColor inset;

		@media screen and (min-width: 375px){
			height: 100px;
			box-shadow: 0 -50px 50px @backgroundColor inset;
		}
		@media screen and (min-width: 414px){
			height: 120px;
			box-shadow: 0 -60px 60px @backgroundColor inset;
		}
		@media screen and (min-width: 768px){
			height: 160px;
			box-shadow: 0 -80px 80px @backgroundColor inset;
		}
		filter: none;
	}	
}
.follow{
	position: absolute;
	top: 0px;
	// display: none;
}
@media screen and (min-width: 320px){
	.follow{
		right: 13px;
		width: 25px;
		height: 25px;
		background: url('img/playerSubscribe@2x.png?v=4') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=4');
		background-size: cover;
	}
}
@media screen and (min-width: 375px){
	.follow{
		// right: 8px;
		// width: 35px;
		// height: 35px;
		background: url('img/playerSubscribe@2x.png?v=4') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=4');
		background-size: cover;
	}
}
@media screen and (min-width: 414px) {
	.follow{
		right: 10px;
		// width: 35px;
		// height: 35px;
		background: url('img/playerSubscribe@2x.png?v=4') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=4');
		background-size: cover;
	}
}

@media screen and (min-width: 768px) {
	.follow{
		right: 20px;
		width: 40px;
		height: 40px;
		background: url('img/playerSubscribe@3x.png?v=4') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@3x.png?v=4');
		background-size: cover;
	}
}
.detail-item{
	.thumb{
		padding-left: 3%;
		display: block;
		float: left;
		box-sizing: border-box;
		min-height: 1px;
		@media screen and (min-width: 667px){
			width: 20%;
		}
	}
	.content{
		padding: 0 3%;
		// padding-top: 8px;
		width: 70%;
		display: block;
		float: left;
		box-sizing: border-box;
		@media screen and (min-width: 375px){
			// padding-top: 28px;
		}
		@media screen and (min-width: 414px){
			// padding-top: 42px;
		}
		@media screen and (min-width: 667px){
			padding: 0 5%;
			width: 80%;
		}
		.viewedInfo{
			background: none;
			padding: 3px 0;
			margin-top: 6px;
			height: 10px;

			@media screen and (min-width: 375px){
				margin-top: 9px;
			}
		}
		.actions{

			margin-top: 0;

			@media screen and (min-width: 375px){
				margin-top: 5px;
			}
			
			.gap{
				width: 7%;
			}
			a{
				border: 1px solid @titleColor;
				line-height: 2.2em;
				height: 2.2em;
				text-align: left;
				font-size: 1.0em;
				font-weight: normal;
				color: @titleColor;
				@media screen and (min-width: 667px){
					font-size: 1.1em;
					line-height: 2.4em;
					height: 2.4em;
				}
			}
			a.play{
				background: url('img/detail/detail_play@2x.png?v=2') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
				&:active{
					background-color: rgba(255, 255, 255, 0.2);
				}
			}
			a.download{
				background: url('img/detail/detail_download@2x.png?v=2') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
				&:active{
					background-color: rgba(255, 255, 255, 0.2);
				}
			}
			a.complex-episode{
				background: url('img/detail/detail_download@2x.png?v=2') 5px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 29px;
				&:active{
					background-color: rgba(255, 255, 255, 0.2);
				}
			}	
			@media screen and (min-width: 320px){
				a.play{
					background: url('img/detail/detail_play@2x.png?v=2') 17px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 45px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=2') 17px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 45px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=2') 8px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 33px;
				}
			}
			@media screen and (min-width: 375px){
				a.play{
					background: url('img/detail/detail_play@2x.png?v=2') 25px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 55px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=2') 25px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 55px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=2') 16px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 42px;
				}
			}
			@media screen and (min-width: 414px){
				a.play{
					background: url('img/detail/detail_play@2x.png?v=2') 30px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 62px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=2') 30px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 62px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=2') 21px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 50px;
				}
			}
			@media screen and (min-width: 667px){
				a.play{
					background: url('img/detail/detail_play@3x.png?v=2') 70px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.download{
					background: url('img/detail/detail_download@3x.png?v=2') 65px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@3x.png?v=2') 60px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 115px;
				}
			}

			@media screen and (min-width: 667px) and (-webkit-min-device-pixel-ratio : 1){

				a.play{
					background: url('img/detail/detail_play@1.5x.png?v=2') 85px 9px no-repeat;
					background-size: 26px 26px;
					padding-left: 125px;
				}
				a.download{
					background: url('img/detail/detail_download@1.5x.png?v=2') 80px 7px no-repeat;
					background-size: 26px 26px;
					padding-left: 125px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@1.5x.png?v=2') 75px 7px no-repeat;
					background-size: 26px 26px;
					padding-left: 115px;
				}

			}
		}
	}
}   
.siteListWrapper{
	padding-left: 0;
	padding-top: 10px;
	padding-bottom: 0;
	padding-right: 0;
	position: relative;
	height: 30px;

	@media screen and (min-width: 375px){
		padding-top: 18px;
	}

	@media screen and (min-width: 414px){
		padding-top: 20px;
	}

	@media screen and (min-width: 667px){
		padding-top: 22px;
		height: 40px;

	}
	.siteList{

		position: absolute;

		a{
			background-image: url("img/source/other_off@2x.png?v=7");
			background-position: left center;
			// padding-left: 0;
			// padding-right: 8px;
		}
	}
}

.pageView .detail-cards{
	.buttons{
		visibility: hidden;
		width: 80%;
		margin: 15px auto 10px;
		border: 1px solid @titleColor;
		border-radius: 5px;
		line-height: 27px;
		font-size: 13px;
		@media screen and (min-width: 768px){
			line-height: 35px;
		}
		.button{
			color: rgba(0, 0, 0, 1);
		}
		.button.current{
			background: @titleColor;
			color: rgb(255, 255, 255);
		}
		.separator{
			background: @titleColor;
			display: table-cell;
			line-height: 30px;
			width: 1px;
		}
	}
	.cards{
		border: none;
		box-shadow: none;
		.card{
			padding: 3%;
		}
		.card#card-select{
			@media screen and (min-width: 320px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 375px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 414px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 768px){
				padding: 0 0 3%;
			}
			
		}
		.card#card-summary{
			line-height: 1.7em;
			padding: 0 3% 3%;
			.video-celebrity{
				// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				box-shadow: inset 0 -1px 1px -1px @lineColorRetina;
				padding-bottom: 10px;
				padding-top: 5%;
				margin-bottom: 15px;
				@media screen and (min-width: 768px){
					padding-top: 3%;
				}
			}
			div{
				color: @titleColor;
				.video-celebrity-info{
					margin: 0 0 5px 0;

					.video-celebrity-title{
						// width: 15%;
						// color: @contentColor;
						// float: left;
					}
					.video-celebrity-words{
						// float: left;
						// width: 85%;
						color: @infoColor;
					}

					a{
						// color: rgba(255, 255, 255, 0.5);
						color: #005397;
						opacity: 0.7;
					}
				}
				.long-info{
					.video-celebrity-title{
						// width: 25%;
					}
					.video-celebrity-words{
						// width: 75%;
						color: @infoColor;
					}
				}
			}
			
		}
		#card-related{
			@media screen and (min-width: 320px){
				padding: 5% 1%;
			}
			@media screen and (min-width: 375px){
				padding: 5% 2%;
			}
			@media screen and (min-width: 414px){
				padding: 5% 0;
			}
			@media screen and (min-width: 768px){
				padding: 3% 1%;
			}
			
		}
		
	}
}
.tvList{
	padding: 5% 1% 0;
	@media screen and (min-width: 768px){
		padding-top: 3%;
	}
	a{
		margin: 0 2% 3%;
		width: 21%;
	}
}
.rangeSelectWrapper .rangeSelect{
	padding-top: 2%;
}
.yearSelectWrapper .yearSelect{
	padding: 5px 0px;

	@media screen and (min-width: 768px){
		a{
			padding: 10px 24px;
		}
	}
	
} 
.list_item .touch-link .icon{
	padding-left: 10px;

	@media screen and (min-width: 375px){
		padding-left: 12px;
	}
	
	@media screen and (min-width: 768px){
		padding-left: 24px;
	}
}
.goto-apps{
	width: 100%;
	height: 43px;

	@media screen and (min-width: 375px){
		height: 50px;
	}
	
	@media screen and (min-width: 414px){
		height: 55px;
	}

	@media screen and (min-width: 768px){
		height: 102px;
	}

	img{
		width: 100%;
	}
}

.error-notice{
	color: #fff;
	text-align: center;
	font-size: 1.2em;

	p{
		margin-top: 40px;
	}

	.unfollow{
		color: #fff;
		display: inline-block;
		padding: 7px 15px;
		border: 1px solid #fff;
		border-radius: 3px;
	}
}

.native-ad{
	margin: 0 6px;
	height: 161px;
	display: block;
	overflow: hidden;
	position: relative;
	margin-top: 20px;

	img{
		width: 100%;
	}

	.close{
		background-image: url('img/close@2x.png?v=2');
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		width: 24px;
		height: 24px;
		top: 5px;
		right: 5px;
	}

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

	.title-con{
		position: absolute;
		bottom: 0;
		left: 0;
		height: 27%;
		width: 100%;
		color: #fff;
		padding: 5px 5px;
		font-size: 14px;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.75);

		.title{
			line-height: 22px;
		}

		.caption{
			font-size: 10px;
			display: block;
			color: rgba(255, 255, 255, 0.6);
		}

		.ad-icon{
			float: right;
			margin-top: 10px;
			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;
		}
		
	}
}

@media screen and (min-width: 375px) {
	.native-ad{
		height: 184px;
		margin: 10px 11px 0;

		.close{
			top: 10px;
			right: 10px;
		}

		.title-con{
			padding: 7px 10px;
			font-size: 16px;	

			.title{
				line-height: 24px;
			}	

			.caption{
				font-size: 12px;
			}	
		}
	}
}

@media screen and (min-width: 414px) {
	.native-ad{
		height: 205px;

		.title-con{

			.title{
				line-height: 28px;
			}

			.caption{
				
			}

			.ad-icon{
				margin-top: 15px;
			}
			
		}
	}
}

@media screen and (min-width: 768px) {
	.native-ad-con{

		padding-left: 20px;

	}

	.native-ad{
		height: 185px;
		margin: 30px 20px 0 0;
		float: left;
		width: 354px;

		.close{
			top: 10px;
			right: 10px;
			width: 36px;
			height: 36px;
		}

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

		.title-con{
			padding: 0 10px;

			.title{
				line-height: 30px;
				font-size: 18px;
			}

			.caption{
				font-size: 14px;
			}

			.ad-icon{
				margin-top: 15px;
				width: 40px;
				height: 20px;
				font-size: 12px;
				border-radius: 4px;
				line-height: 20px;
			}
			
		}
	}
}

.series-video{
	.lineTop();

	// padding: 5% 1%;
	padding: 5% 0; 

	h3{
		margin: 0 9px 10px;
		color: #fff;
		font-weight: normal;
		font-size: 1em;
	}

	.series-scroller-con{
		overflow-x: auto;

		.detail-scroller{
			padding-right: 9px;
		}
	}

	.video-item {
        color: #333;
        display: inline-block;
        margin: 0 0 20px;
        position: relative;
        text-align: center;
        vertical-align: top;
        // width: 33.3%;
        width: 84px;
        padding-left: 9px;
        .title {
            color: @titleColor;
            font-size: 0.9em;
            line-height: 17px;
            margin-top: 10px;
            max-height: 51px;
            overflow: hidden;
        }
        .cover {
            margin: 0 auto;
            position: relative;
            // width: 86px;
            width: 84px;
            // height: 128px;
            height: 112px;
            img {
                background-color: rgba(255, 255, 255, 0.05);
                background-image: url("img/placeholder.png?v=1");
                background-position: center center;
                background-size: cover;
                display: block;
                height: 100%;
                width: 100%;
            }
            .info {
                bottom: 0;
                color: @infoColor;
                font-size: 0.8em;
                height: 18px;
                left: 0;
                line-height: 18px;
                padding: 5% 5% 0;
                position: absolute;
                text-align: left;
                width: 90%;
            }
        }
    }

	@media screen and (min-width: 375px){
		// padding: 5% 2%;

		h3{
			margin: 0 11px 15px;
		}

		.series-scroller-con{

			.detail-scroller{
				padding-right: 11px;
			}
		}

		.video-item {
			width: 100px;
			padding-left: 11px;
            
            .cover{
                height: 145px;
                // width: 110px;
                width: 100px;
            }
        }
	}
	@media screen and (min-width: 414px){
		// padding: 5% 0;

		h3{
			margin: 0 12px 15px;
		}

		.series-scroller-con{

			.detail-scroller{
				padding-right:12px;
			}
		}

		.video-item {
			width: 110px;
			padding-left: 12px;
            
            .cover{
                height: 145px;
                // width: 110px;
                width: 110px;
            }
        }
	}
	@media screen and (min-width: 768px){
		// padding: 3% 1%;
		padding: 3% 0;

		h3{
			font-size: 1.2em;
			margin: 0 23px 15px;
		}

		.series-scroller-con{

			.detail-scroller{
				padding-right:23px;
			}
		}

		.video-item {
            // width: 20%;
            width: 120px;
            padding-left: 23px;

            .cover{
                height: 160px;
                width: 120px;
            }
        }
	}

	
}

.no-play{
	color: rgba(255,255,255,0.6);
	padding-top: 25px;
	font-size: 1.2em;

	@media screen and (min-width: 375px){
		padding-top: 37px;
	}

	@media screen and (min-width: 414px){
		padding-top: 45px;
	}

	@media screen and (min-width: 768px){
		padding-top: 40px;
	}
}