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

	.interest-container {
		margin: 3vw 0;

		a {
			display: inline-block;
			height: 7.5vw;
			width: 24vw;
			border: #fff 1px solid;
			text-align: center;
			line-height: 7.5vw;
			border-radius: 0.8vw;
			margin-right: 1vw;
			font-size: 1em;
			position: relative;
			vertical-align: middle;
			background-size: 5vw 5vw;
			background-repeat: no-repeat;
			background-position: 1vw center;

			&.wished {
				border-color: rgba(255,255,255,0.5);
				color: rgba(255,255,255,0.7);
			}

			&.did {
				border-color: rgba(255,255,255,0.5);
				color: rgba(255,255,255,0.7);
				background-image: url('img/interest_did@2x.png');
			}

			// &.loading {
			// 	background-image: url('img/rolling.svg');
			// }

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

		        & {
		            width: 17vw;
		            height: 5.5vw;
		            line-height: 5.5vw;
		            font-size: 1.3em;
		            background-size: 4vw 4vw;
		        }
		    }
		}
	}

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

		.viewedInfo {
			font-size: 3vw;
			color: @titleColor;
			margin-top: 2.5vw;

			@media screen and (min-width: 768px) {
				font-size: 2vw;
			}
		}

		.actions {
			margin-top: 2.5vw;
			display: table;
			width: 100%;

			&>* {
				display: inline-block;
			}

			.gap {
				width: 7%;
			}

			a {
				border-radius: 1vw;
				color: @linkColor;
				width: 45%;
				box-sizing: border-box;
				border: 1px solid @infoColor;
				line-height: 8vw;
				height: 8vw;
				text-align: left;
				font-size: 3.8vw;
				font-weight: normal;
				background-repeat: no-repeat;
				background-size: 5.5vw;

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

			a.play {
				background-image: url('img/detail/detail_play@2x.png?v=1');
				background-position: 5vw center;
				padding-left: 13vw;
				margin-right: 5vw;
			}

			a.download {
				background-image: url('img/detail/detail_download@2x.png?v=1');
				background-position: 5vw center;
				padding-left: 13vw;
			}

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

			a.complex-episode {
				background-image: url('img/detail/detail_download@2x.png?v=1');
				background-position: 3vw center;
				padding-left: 10vw;
			}	

			a.downloading {
				background-image: url('img/wait.svg');
				background-size: 4.7vw;
				background-position: 5vw center;
			}

			a.downloaded {
				background-image: url('img/download_done.svg');
				background-size: 4.7vw;
				background-position: 5vw center;
			}


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

				a {
					font-size: 2.8vw;
					height: 6vw;
					line-height: 6vw;
					border-radius: 0.5vw;
				}

				a.play {
					background-size: 4.2vw;
					background-position: 6vw center;
				}
				a.download {
					background-size: 4.2vw;
					background-position: 6vw center;
				}
				a.complex-episode {
					background-position: 4vw center;
				}
				a.downloading {
					background-size: 3.8vw;
				}

				a.downloaded {
					background-size: 3.8vw;
				}
			}
		}

		.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;
			}
		}
		@media screen and (min-width: 375px){
			.follow{
				width: 35px;
				height: 35px;
			}
		}
		@media screen and (min-width: 414px) {
			.follow {
				width: 35px;
				height: 35px;
			}
		}
		@media screen and (min-width: 768px) {
			.follow{
				width: 50px;
				height: 50px;
				top: 15px;
			}
		}
	}
}



.copyright-info {
	color: @infoColor;
	margin-top: 2.5vw;
	font-size: 3vw;
	line-height: 1.4;

	@media screen and (min-width: 768px){
		font-size: 2vw;
	}

	a {
		color: @infoColor;
		text-decoration: underline;
	}
}

.no-play{
	color: @contentColor;
	margin-top: 3vw;
	font-size: 3.5vw;

	@media screen and (min-width: 768px){
		font-size: 2.4vw;
	}
}


.i-want{
	display: inline-block;
	margin-top: 2.5vw;
	border: @infoColor 1px solid;
	color: @titleColor;
	width: 40%;
	height: 7vw;
	line-height: 7vw;
	text-align: center;
	border-radius: 1vw;
	font-size: 3.5vw;

	@media screen and (min-width: 768px){
		margin-top: 2.5vw;
		width: 30%;
		height: 5vw;
		line-height: 5vw;
		text-align: center;
		border-radius: 1vw;
		font-size: 2.4vw;
	}
}


.more-select-con{
	position: fixed;
	right: 9px;
	top: 12px;
	z-index: 5;

	.more-select{
		position: relative;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 5px;

		.arrow{
			position: absolute;
			width: 13px;
			height: 7px;
			background-image: url('img/detail/list_sanjiao.png');
			background-repeat: no-repeat;
			background-size: cover;
			top: -7px;
			right: 15px;
		}

		a{
			font-size: 16px;
			height: 40px;
			line-height: 40px;
			display: block;
			padding: 0 10px 0 45px;
			width: 90px;
			box-sizing: border-box;
			background-size: 18px 18px;
			background-position: 15px 11px;
		}

		.more-share{
			background-image: url('img/detail/share@2x.png');
			background-repeat: no-repeat;
		}

		.more-report{
			background-image: url('img/detail/view@2x.png');
			background-repeat: no-repeat;
			background-position: 16px 11px;
		}

		.separator-line{
			height: 1px;
			background-color: rgba(255, 255, 255, 0.1);
		}
	}

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

		right: 11px;

		.more-select{

			.arrow{
				// right: 35px;
			}

		}
	}

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

		right: 12px;

		.more-select{

			.arrow{
				// right: 40px;
			}

		}

	}

	@media screen and (min-width: 768px){
		
		right: 10px;
		top: 20px;

		.more-select{

			.arrow{
				top: -13px;
				right: 15px;
				width: 25px;
				height: 13px;
			}

			a{
				font-size: 18px;
				height: 40px;
				line-height: 40px;
				padding: 0 15px 0 55px;
				width: 115px;
				background-size: 20px 20px;
				background-position: 23px 10px;
			}

			.more-report{
				background-position: 25px 10px;
			}

		}
	}
}


// 视频源选择
.siteListWrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 8vw;
    padding-top: 2vw;

	@media screen and (min-width: 768px){
		// padding-top: 20px;
		height: 6vw;
	}
}

.siteList {
    height: 8vw;
    margin-top: 2.5vw;
    display: -webkit-box;
    overflow-x: scroll;

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

    a {
        display: block;
        width: 8vw;
        height: 8vw;
        background-image: url('img/source/other_off@2x.png?v=6');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 2vw;
        opacity: 0.7;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


        &.selected {
        	opacity: 1;

            background-image: url('img/source/other_on@2x.png?v=6');

            &.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')}
        }
    }
}


.siteListExtended {
	margin: 3vw 0;
	font-size: 3.5vw;

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

	.site-item {
		display: block;
		height: 8vw;
		line-height: 8vw;
		.lineBottom();
		padding-left: 10vw;
	    background-image: url('img/source/other_on@2x.png?v=6');
        background-position: left center;
        background-size: 6vw auto;
        background-repeat: no-repeat;
        display: flex;
        justify-content: space-between;

        &.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;
        }
		
		.info {
			display: flex;

	        .status {
	        	// margin-right: 1vw;
	        	color: @infoColor;
	        }

	        .arrow {
	        	height: 8vw;
	        	width: 8vw;
				background-image: url('img/app-arrow.svg');
		        background-position: right 70%;
		        background-size: 6vw auto;
		        background-repeat: no-repeat;
		        opacity: 0.5;
	        }
		}
	}

    .site-more {
    	height: 10vw;
    	line-height: 10vw;
    	color: @infoColor;
    	display: block;
    }

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

		.site-item {
			height: 6vw;
			line-height: 6vw;
			padding-left: 8vw;
	        background-size: 5vw auto;
			
			.info {

		        .arrow {
		        	height: 6vw;
		        	width: 6vw;
			        background-size: 4vw auto;
		        }
			}
		}

	    .site-more {
	    	height: 8vw;
	    	line-height: 8vw;
	    }
    }
}