@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";
@import "list.less";
.pageView{
	z-index: 2;
}
.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: -5px;
	display: none;
}
@media screen and (min-width: 320px){
	.follow{
		right: 8px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
@media screen and (min-width: 375px){
	.follow{
		right: 8px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
@media screen and (min-width: 414px) {
	.follow{
		right: 9px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}

@media screen and (min-width: 768px) {
	.follow{
		right: 8px;
		width: 50px;
		height: 50px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		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 rgba(255, 255, 255, 0.6);
				line-height: 2.2em;
				height: 2.2em;
				text-align: left;
				font-size: 1.0em;
				font-weight: normal;
				@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=1') 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=1') 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=1') 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=1') 17px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 45px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 45px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=1') 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=1') 25px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 55px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=1') 25px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 55px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=1') 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=1') 30px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 62px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=1') 30px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 62px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=1') 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=1') 70px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.download{
					background: url('img/detail/detail_download@3x.png?v=1') 65px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@3x.png?v=1') 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=1') 85px 9px no-repeat;
					background-size: 26px 26px;
					padding-left: 125px;
				}
				a.download{
					background: url('img/detail/detail_download@1.5x.png?v=1') 80px 7px no-repeat;
					background-size: 26px 26px;
					padding-left: 125px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@1.5x.png?v=1') 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: 70%;
		margin: 15px auto 10px;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 5px;
		line-height: 30px;
		@media screen and (min-width: 768px){
			line-height: 40px;
		}
		.button{
			color: rgba(255, 255, 255, 1);
		}
		.button.current{
			background: rgba(255, 255, 255, 0.6);
			color: #111111;
		}
		.separator{
			background: rgba(255, 255, 255, 0.6);
			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%;
			.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: rgba(255, 255, 255, 0.8);
				.video-celebrity-info{
					margin: 0 0 5px 0;
					color: rgba(255, 255, 255, 0.5);
					.video-celebrity-title{
						// width: 15%;
						color: rgba(255, 255, 255, 0.8);
						// float: left;
					}
					.video-celebrity-words{
						// float: left;
						// width: 85%;
					}

					a{
						// color: rgba(255, 255, 255, 0.5);
						color: #3487c2;
						opacity: 0.7;
					}
				}
				.long-info{
					.video-celebrity-title{
						// width: 25%;
					}
					.video-celebrity-words{
						// width: 75%;
					}
				}
			}
			
		}
		#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;
			}
			
		}
	}
}