@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";
@import "list.less";
@import "sweetalert.less";
@import "detail-movie.less";

.pageView{
	z-index: 2;
	
	.message {
		margin-top: 0;
	}
}
.siteListWrapper{

	padding-top: 10px;

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

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

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

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

.pageView .detail-cards{
	.buttons{
		visibility: hidden;
		width: 70%;
		margin: 0 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%;
		}

		.graphstory-item {
			position: relative;
			background-size: cover;
			background-position: center;
			border-radius: 3px;
			height: 40vw;
			margin-bottom: 5vw;

			.mask {
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.2);
				z-index: 1;
			}

			.title {
				position: relative;
				z-index: 2;
				font-weight: bold;
				padding: 0 3vw;
				line-height: 3em;
				font-size: 4vw;
				color: #fff !important;
				position: absolute;
				bottom: 0;
				box-sizing: border-box;
				width: 100%;
				text-align: center;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%) repeat scroll 0 0;
			}

			.time {
				position: relative;
				z-index: 2;
				color: rgba(255, 255, 255, 0.7);
				position: absolute;
				padding: 0 1vw;
				right: 1vw;
				top: 1vw;
				font-size: 0.8em;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 3px;
				line-height: 2em;
			}

			.play {
				z-index: 2;
				position: absolute;
				width: 14vw;
				height: 14vw;
				background-image: url(img/play@2x.png);
				background-size: contain;
				top: 50%;
				left: 50%;
				margin-top: -7vw;
				margin-left: -7vw;
			}
		}

		@media screen and (min-width: 768px) {
			.graphstory-item {
				height: 30vw;

				.title {
					font-size: 3vw;
				}

				.time {
					font-size: 1em;
				}

				.play {
					width: 10vw;
					height: 10vw;
					margin-top: -5vw;
					margin-left: -5vw;
				}
			}
		}

		.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;
			
			.video-celebrity{
				box-shadow: inset 0 -1px 1px -1px @lineColorRetina;
				padding-bottom: 10px;
				margin-bottom: 15px;
			}
			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;
			}
			
		}
	}
}

.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: #fff;
            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=5");
                background-position: center center;
                background-size: cover;
                display: block;
                height: 100%;
                width: 100%;
            }
            .info {
                bottom: 0;
                color: #fff;
                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;
            }
        }
	}	
}

.email-link {
	color: #0099cc;
	font-weight: normal;
	display: block;
	text-align: center;
}

.copyright-info {
	color: rgba(255,255,255,0.6);
	padding-top: 10px;
	font-size: 0.7em;

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

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

	a {
		color: rgba(255,255,255,0.6);
		text-decoration: underline;
	}
}

.no-play{
	color: rgba(255,255,255,0.9);
	padding-top: 10px;
	font-size: 0.8em;

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

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

	@media screen and (min-width: 768px){
		padding-top: 30px;
		font-size: 1.1em;
	}
}

.download-guide{
	font-size: 0.85em;
	text-align: right;
	display: none;
	opacity: 0.7;
}

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

		}
	}
}

.report-pop{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;

	.report-con-bg{

		height: 100%;
		width: 100%;
		position: relative;

		.report-bg{
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.7);
		}

		.report-con{
			text-align: left;
			background-color: #fff;
			border-radius: 5px;
			width: 300px;
			padding: 20px 0 30px;
			position: absolute;
			top: 3%;
			left: 50%;
			margin-left: -150px;
			z-index: 99;

			p{
				padding: 5px 30px;
				margin: 0;
				color: #555;

				textarea{
					resize: none;
					height: 100px;
					width: 100%;
					padding: 5px 8px;
					box-sizing: border-box;
					font-size: 12px;
					display: none;
				}
				
			}

			.btn-con{
				text-align: center;

				button{
					border: none;
				    border-radius: 5px;
				    color: #fff;
				    background-color: rgb(208, 208, 208);
				    cursor: pointer;
				    font-size: 17px;
				    font-weight: 500;
				    margin: 20px 5px 0;
				    padding: 10px 28px;
				}

				.confirm-btn{
					background-color: rgb(221, 107, 85);
	    			box-shadow: 0 0 2px rgba(221, 107, 85, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
				}
			}

			input{
				display: inline-block;
				height: auto;
				width: auto;
				margin: 0 10px 0 0;
				// pointer-events: none;
			}

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

			@media screen and (min-width: 768px){
				top: 20%;
				width: 600px;
				padding: 30px 0 50px;
				margin-left: -300px;
				font-size: 18px;

				p{
					padding: 10px 40px;

					textarea{
						height: 150px;
						padding: 5px 8px;
						font-size: 16px;
					}

				}

				.btn-con{

					button{
					    margin: 20px 10px 0;
					}
				}

				input{
					margin: 0 15px 0 0;
				}
				
			}
		}

	}

}

.report-link{
	margin-top: 5px;
	display: inline-block;
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.5);

	@media screen and (min-width: 768px){
		margin-top: 10px;
		font-size: 1.2em;
	}
}

.sweet-alert{

	@media screen and (min-width: 375px){
		left: 30px;
		right: 30px;
	}
	

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

		left: 50%;
		right: auto;
		
	}
}

.sweet-alert fieldset{
	display: none;
}

.sweet-alert h2 {
	font-size: 1.5em;
	margin: 0 0 0.5em;
	font-weight: normal;
}

.sweet-alert p{
	text-align: left;
	padding: 0;
	margin: 0;
	color: #555;
}

.report-con p{
	padding: 10px;

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

		padding: 20px;
		
	}
}

.sweet-alert .video-report{
	width: auto;
	height: auto;
	margin: 0;
	display: inline;
}

.go-app-con{
	display: none;
	text-align: center;
	// position: absolute;
	// top: 0;
	// left: 0;
	padding-left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	.lineBottom();

	a{
		
		display: inline-block;
		height: 36px;
		line-height: 36px;
		// padding-left: 35px;
		font-size: 12px;

	}

	.app-link-bg{
		// background-image: url('img/source/other_off@2x.png?v=6');
		background-image: url('img/app-arrow.svg');
        background-position: right 9px;
        background-size: 20px auto;
        background-repeat: no-repeat;
        padding-right: 20px;
        opacity: 0.8;

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

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

}

.error-refresh{
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1.1em 0 0 -15%;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: rgb(255, 255, 255);
	width: 30%;
	height: 2.2em;
	line-height: 2.2em;
	text-align: center;
	border-radius: 4px;
}

.i-want{
	display: inline-block;
	margin-top: 1em;
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: rgb(255, 255, 255);
	width: 40%;
	height: 2.2em;
	line-height: 2.2em;
	text-align: center;
	border-radius: 4px;
	font-size: 0.9em;

	@media screen and (min-width: 375px){
		width: 35%;
		font-size: 1em;
	}

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

.episode{
	position: relative;

	.icon-tv{
		position: absolute;
		right: 3px;
		top: 3px;
		background-repeat: no-repeat;
		background-size: 10px;
		height: 10px;
		width: 10px;
	}

	.downloading{
		background-image: url('img/wait_list.svg');
	}

	.downloaded{
		background-image: url('img/done_list.svg');
	}

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

		.icon-tv{
			right: 5px;
			top: 5px;
		}
		
	}
	.summary{
		position: relative;
		.icon-show{
			position: absolute;
			right: 0;
			bottom: 0;
			background-repeat: no-repeat;
			background-size: 10px;
			background-position: center left;
			height: 16px;
			width: auto;
			font-size: 0.9em;
			padding-left: 12px; 
			line-height: 16px;

		}

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

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

			
		}

		@media screen and (min-width: 768px){
			.icon-show{
				height: 16px;
				font-size: 0.9em;
				padding-left: 12px; 
				line-height: 16px;
			}
		}
	}
	
}

.detail-ads {
	margin: 0 3vw 5vw;

	.gamead-link {
		height: 15vw;
		display: block;
		background-color: @linkActiveColor;
		position: relative;
		
		.thumb {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 25%;
			// float: left;
			background-size: cover;
		}

		.content {
			margin-left: 27%;
			padding: 2vw;
			margin-right: 10%;
		}

		.title {
			.ellipsis();
			line-height: 1.3;
			font-size: 3.8vw;
			margin-bottom: 1.5vw;
			margin-right: 5vw;
		}

		.description {
			.ellipsis();
			// line-height: 14px;
			font-size: 3vw;
			color: @infoColor;
		}

		.label {
			width: 8vw;
			height: 4vw;
			font-size: 2.4vw;
			line-height: 4vw;
			text-align: center;
			color: @infoColorWeak;
			float: right;
			border-radius: 0.6vw;
			border: @lineColor 1px solid;
		}

		.close {
			width: 5vw;
			height: 5vw;
			position: absolute;
			right: 3vw;
			top: 5vw;
			// background: red;
			background-image: url(img/cancel@3x.png);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border-radius: 2.5vw;
			background-color: rgba(0, 0, 0, 0.5);
		}

		// .icon {
		// 	position: absolute;
		// 	left: 10px;
		// 	top: 8px;
		// 	width: 30px;
		// 	height: 30px;
		// 	background-size: 30px;
		// 	background-repeat: no-repeat;
		// 	background-position: center;
		// 	border-radius: 6px;
		// }

		// .arrow {
		// 	background-size: auto 14px;
		// 	background-position: right center;
		// 	background-image: url('img/next.svg');
		// 	background-repeat: no-repeat;
		// 	position: absolute;
		// 	height: 45px;
		// 	width: 15px;
		// 	right: 5px;
		// 	top: 0px;
		// }
	}
}


@media screen and (min-width: 768px) {
	.detail-ads {
		margin: 0 15vw 10vw;

		.gamead-link {
			height: 11vw;
			// display: block;
			// background-color: @linkActiveColor;
			// position: relative;
			
			.thumb {
				height: 100%;
				width: 25%;
				// position: absolute;
				// left: 0;
				// top: 0;
				// float: left;
				// background-size: cover;
			}

			.content {
				margin-left: 25%;
				padding: 2vw;
				margin-right: 13%;
			}

			.title {
				// .ellipsis();
				// line-height: 1.3;
				font-size: 2.5vw;
				margin-bottom: 1vw;
				margin-right: 5vw;
			}

			.description {
				.ellipsis();
				font-size: 2vw;
				line-height: 4vw;
				// line-height: 14px;
				// color: @infoColor;
			}

			.label {
				width: 5vw;
				height: 3vw;
				font-size: 2vw;
				line-height: 3vw;
				border-radius: 0.5vw;
				border: @lineColor 1px solid;
				color: @infoColorWeak;
				// text-align: center;
				// float: right;
			}

			.close {
				width: 4vw;
				height: 4vw;
				position: absolute;
				right: 3vw;
				top: 3.5vw;
				border-radius: 2vw;
			}
		}
	}
}