.detail-item {
	display: table;
	width: 100%;
	position: relative;
	overflow: hidden;
	margin-bottom: 5vw;
	
	.background {
		height: 124px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		background-size: cover;
		z-index: -2;
		.blur(10px);
		box-shadow: 0 -40px 40px @backgroundColor inset;

		@media screen and (min-width: 375px){
			height: 144px;
			box-shadow: 0 -50px 50px @backgroundColor inset;
		}
		@media screen and (min-width: 414px){
			height: 164px;
			box-shadow: 0 -60px 60px @backgroundColor inset;
		}
		@media screen and (min-width: 768px){
			height: 240px;
			box-shadow: 0 -60px 120px @backgroundColor inset;
		}
	}


	&>* {
		display: table-cell;
		padding-left: 5%;
		vertical-align: top;
	}


	.thumb {
		width: 30%;
		text-align: center;
		padding-left: 3vw;
		display: block;
		float: left;
		box-sizing: border-box;
		min-height: 1px;
		padding-top: 3vw;

		img {
			width: 100%;
			display: block;
		}
		
		// @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;
		// 	width: 25%;
		// }
	}


	.content {
		position: relative;
		padding: 0 3%;
		font-size: 0.9em;
		width: 70%;
		display: block;
		float: left;
		box-sizing: border-box;
		padding-top: 3vw;

		// @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;
		// 	width: 75%;
		// }

		.viewedInfo {
			font-size: 0.7em;
			color: @titleColor;
			border-radius: 2px;

			background: none;
			padding: 3px 0;
			margin-top: 6px;
			height: 10px;

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

		.actions {
			// margin-top: 1em;
			margin-top: 10px;
			display: table;
			width: 100%;

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

			&>* {
				// display: table-cell;
				display: inline-block;
			}

			.gap {
				// width: 10%;
				width: 7%;
			}

			a {
				border-radius: 3px;
				color: @linkColor;
				width: 45%;
				// display: inline-block;
				box-sizing: border-box;

				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-color: @playButtonBackgroundColor;

				// &:active {
				// 	background-color: @playButtonBackgroundColorActived;
				// }
				background: url('img/detail/detail_play@2x.png?v=1') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;

				&:active{
					background-color: @linkActiveColor;
				}
			}

			a.download {
				// background-color: rgba(0, 0, 0, 0.4);
				// box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);

				// &:active {
				// 	background-color: rgba(0, 0, 0, 0.5);
				// }

				background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
				&:active{
					background-color: @linkActiveColor;
				}
			}

			&.disabled {
				a {
					opacity: 0.4;
				}
			}

			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);
				}
			}	

			a.downloading {
				background: url('img/wait.svg') 5px 5px no-repeat;
				background-size: 18px;
			}

			a.downloaded {
				background: url('img/download_done.svg') 5px 5px no-repeat;
				background-size: 18px;
			}

			@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;
				}
				a.downloading{
					background: url('img/wait.svg') 17px 6px no-repeat;
					background-size: 18px;
				}

				a.downloaded{
					background: url('img/download_done.svg') 17px 6px no-repeat;
					background-size: 18px;
				}
			}
			@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;
				}
				a.downloading{
					background: url('img/wait.svg') 25px 6px no-repeat;
					background-size: 18px;
				}

				a.downloaded{
					background: url('img/download_done.svg') 25px 6px no-repeat;
					background-size: 18px;
				}
			}
			@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;
				}
				a.downloading{
					background: url('img/wait.svg') 30px 6px no-repeat;
					background-size: 18px;
				}

				a.downloaded{
					background: url('img/download_done.svg') 30px 6px no-repeat;
					background-size: 18px;
				}
			}
			@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;
				}
				a.downloading{
					background: url('img/wait.svg') 65px 6px no-repeat;
					background-size: 31px;
				}

				a.downloaded{
					background: url('img/download_done.svg') 65px 6px no-repeat;
					background-size: 31px;
				}
			}

			@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;
				}
				a.downloading{
					background: url('img/wait.svg') 80px 10px no-repeat;
					background-size: 24px;
				}

				a.downloaded{
					background: url('img/download_done.svg') 80px 10px no-repeat;
					background-size: 24px;
				}
			}
		}

		.score-star {
			color: #FFA200;
			background-image: url('img/detail/star_ui.png?v=3');
			background-repeat: no-repeat;
			margin: 0;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
			
			@media screen and (min-width: 320px){
				padding-left: 120px;
				height: 20px;
				line-height: 20px;
				background-size: 160px auto;
				font-size: 1.3em;

				&.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-left: 170px;
				height: 30px;
				line-height: 36px;
				background-size: 150px auto;
				font-size: 1.6em;

				&.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;
				}
			}
		}

		.follow {
			position: absolute;
			top: 4px;
			display: none;
			right: 2%;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url('img/playerSubscribe@2x.png?v=1');
		}

		.hasfollow{
			background-image: url('img/playerSubscribed@2x.png?v=1');
		}

		@media screen and (min-width: 320px){
			.follow {
				width: 30px;
				height: 30px;
				// top: 4px;
			}
		}
		@media screen and (min-width: 375px){
			.follow{
				width: 35px;
				height: 35px;
				// top: 6px;
			}
		}
		@media screen and (min-width: 414px) {
			.follow {
				width: 35px;
				height: 35px;
				// top: 7px;
			}
		}
		@media screen and (min-width: 768px) {
			.follow{
				width: 50px;
				height: 50px;
				top: 15px;
			}
		}
	}
}






@media screen and (min-width: 375px) {

	.detail-item {

		.content {

			.actions {
				margin-top: 12px;

				a {
					border-radius: 4px;
				}
			}
		}
	}
}

@media screen and (min-width: 768px) {

	.detail-item {

		.content {
			font-size: 1.1em;

			p {
				margin: 0.5em 0 0;
			}

			.actions {
				margin-top: 15px;
				a {
					line-height: 2.5em;
				}
			}
		}
	}
}


.siteListExtended {
	margin: 10px 0;
	font-size: 0.8em;

    a:active {
    	background-color: @linkActiveColor;
    }

	.site-item {
		display: block;
		height: 30px;
		line-height: 30px;
		.lineBottom();
		padding-left: 40px;
	    background-image: url('img/source/other_on@2x.png?v=6');
        background-position: left center;
        background-size: 26px auto;
        background-repeat: no-repeat;

        &.m56 {background-image: url('img/source/56_on@2x.png?v=6')}

        &.ku6 {background-image: url('img/source/ku6_on@2x.png?v=6')}

        &.baomihua {background-image: url('img/source/baomihua_on@2x.png?v=6')}

        &.bilibili {background-image: url('img/source/bilibili_on@2x.png?v=6')}

        &.cntv {background-image: url('img/source/cntv_on@2x.png?v=6')}

        &.cztv {background-image: url('img/source/cztv_on@2x.png?v=6')}

        &.funshion {background-image: url('img/source/funshion_on@2x.png?v=6')}

        &.hunantv {background-image: url('img/source/hunantv_on@2x.png?v=6')}

        &.ifeng {background-image: url('img/source/ifeng_on@2x.png?v=6')}

        &.iqiyi {background-image: url('img/source/iqiyi_on@2x.png?v=6')}

        &.letv {background-image: url('img/source/letv_on@2x.png?v=6')}

        &.letvlb {background-image: url('img/source/letv_on@2x.png?v=6')}

        &.m1905 {background-image: url('img/source/m1905_on@2x.png?v=6')}

        &.pps {background-image: url('img/source/pps_on@2x.png?v=6')}

        &.pptv {background-image: url('img/source/pptv_on@2x.png?v=6')}

        &.qq {background-image: url('img/source/qq_on@2x.png?v=6')}

        &.sohu {background-image: url('img/source/sohu_on@2x.png?v=6')}

        &.taomi {background-image: url('img/source/taomi_on@2x.png?v=6')}

        &.tudou {background-image: url('img/source/tudou_on@2x.png?v=6')}

        &.tv189 {background-image: url('img/source/tv189_on@2x.png?v=6')}

        &.wasu {background-image: url('img/source/wasu_on@2x.png?v=6')}

        &.kankan {background-image: url('img/source/kankan_on@2x.png?v=6')}

        &.yinyuetai {background-image: url('img/source/yinyuetai_on@2x.png?v=6')}

        &.youku {background-image: url('img/source/youku_on@2x.png?v=6')}

        &.zjstv {background-image: url('img/source/zjstv_on@2x.png?v=6')}

        &.cloud {background-image: url('img/source/cloud_on@2x.png?v=6')}

        &.clouda {background-image: url('img/source/cloud_on@2x.png?v=6')}

        &.chaogao {background-image: url('img/source/cloud_on@2x.png?v=6')}

        &.acfun {background-image: url('img/source/acfun_on@2x.png?v=7')}

        &.xiaokaxiu {background-image: url('img/source/xiaokaxiu_on@2x.png?v=6')}

        .name {
        	color: @titleColor;
        }

        .arrow {
        	height: 30px;
        	width: 30px;
        	float: right;
			background-image: url('img/app-arrow.svg');
	        background-position: right center;
	        background-size: 20px auto;
	        background-repeat: no-repeat;
	        opacity: 0.5;
        }
	}

    .site-more {
    	height: 38px;
    	line-height: 38px;
    	color: @infoColor;
    	display: block;
    }


	@media screen and (min-width: 375px) {
		font-size: 0.9em;

		.site-item {		
			height: 32px;
			line-height: 32px;

	        .arrow {
	        	height: 32px;
	        	width: 32px;
		        background-size: 22px auto;
	        }
		}
	}

	@media screen and (min-width: 414px) {
		font-size: 1em;

		.site-item {		
			height: 36px;
			line-height: 36px;

	        .arrow {
	        	height: 36px;
	        	width: 36px;
		        background-size: 24px auto;
	        }
		}
	}

	@media screen and (min-width: 768px){
		font-size: 1em;

		.site-item {
			height: 50px;
			line-height: 50px;
			padding-left: 60px;
	        background-size: 36px auto;

	        .arrow {
	        	height: 50px;
	        	width: 50px;
		        background-size: 30px auto;
	        }
		}

	    .site-more {
	    	height: 44px;
	    	line-height: 44px;
	    }
	}
}