@import "base.less";
@import "sweetalert.less";

@base_width: 750;

body {
	background: #ebebeb;
	.message {
		padding: 40px 10% 0;
		margin-top: 20%;
		text-align: center;
		color: @infoColorWeak;
		background: url('img/error.png?v=3') top center no-repeat;
		background-size: 37px auto;
		font-size: 0.9em;
		background-color: black;
	}

}

.header {
	background-image: url(img/coupon/header.png?v=3);
	background-origin: center center;
	background-size: cover;
	position: relative;
	
	.tip {
		position: absolute;
		width: 56%;
		text-align: center;
		right: 4%;
		bottom: 7%;
		height: 2em;
		background: rgba(255, 255, 255, 0.9);
		color: #475f95;
		font-size: 0.8em;
		line-height: 2em;
	}
}

.task-list {
	padding: 0 4% 4%;
}

#icon{
	opacity: 0;
	display: none;
	position: fixed;
	top: 21%;
	left: 17%;
	width: ( 508vw / @base_width ) * 100;
	height: ( 600vw / @base_width ) * 100;
	#iconDay{
		//position: fixed;
		//top: 21%;
		//left: 17%;
		background-image: url("img/coupon/qiandao.png");
		width: ( 508vw / @base_width ) * 100;
		height: ( 600vw / @base_width ) * 100;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.iconday-wrap{
		position: fixed;
		top: 45%;
		left: 21%;
		font-size: (38vw / @base_width ) * 100;
		font-family: 微软雅黑;
		width: ( 445vw / @base_width ) * 100;
		text-align: center;
		.iconday-font{
			color: rgb(248,118,134);
			width: 100%;
			text-align: center;
			margin-top: (10vw / @base_width ) * 100;
			margin-bottom: (12vw / @base_width ) * 100;
		}

		.iconDayCount{
			color: rgb(253,171,3);
		}
	}

	#iconX {
		position: absolute;
		top: 8%;
		right: 9%;
		background-image: url("./img/special/info@2x.png");
		width: ( 50vw / @base_width ) * 100;
		height: ( 50vw / @base_width ) * 100;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	#openRules{
		width: ( 50vw / @base_width ) * 100;
		height: ( 50vw / @base_width ) * 100;
		position: fixed;
		top: 65%;
		right: 21%;
	}
}
#rules-wrap{
	position: absolute;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.9;
	display: none;
}
#rules{
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: rgba(255,255,255,.8);
	box-sizing: border-box;
	padding: 0 5%;
	font-size: ( 26vw / @base_width ) * 100;
	display: none;
	font-family: 微软雅黑;

	.line-top{

		.line-left,.line-right{
			top: ( 165vw / @base_width ) * 100;
			position: absolute;
			width: 25%;
			height: 1px;
			background-color: white;
		}

		.line-left{
			left: ( 60vw / @base_width ) * 100;
			background-color: rgba(255,255,255,.4);
		}

		.line-right{
			right: ( 60vw / @base_width ) * 100;
			background-color: rgba(255,255,255,.4);
		}

		p{
			position: absolute;
			color: white;
			top: ( 113vw / @base_width ) * 100;
			right: ( 315vw / @base_width ) * 100;
			font-size: ( 30vw / @base_width ) * 100;
		}
	}

	.line-bottom{

		.line-left,.line-right{
			top: ( 665vw / @base_width ) * 100;
			position: absolute;
			width: 25%;
			height: 1px;
			background-color: white;
		}

		.line-left{
			left: ( 60vw / @base_width ) * 100;
			background-color: rgba(255,255,255,.4);
		}

		.line-right{
			right: ( 60vw / @base_width ) * 100;
			background-color: rgba(255,255,255,.4);
		}

		p{
			position: absolute;
			top: ( 613vw / @base_width ) * 100;
			right: ( 315vw / @base_width ) * 100;
			font-size: ( 30vw / @base_width ) * 100;
			color: white;
		}
	}

	.rules-content{
		position: absolute;
		margin-top: ( 150vw / @base_width ) * 100;

		li{
			margin-top: ( 30vw / @base_width ) * 100;
			padding-top: ( 35vw / @base_width ) * 100;

			.rules-left{
				float: left;
				width: ( 40vw / @base_width ) * 100;
				height: ( 40vw / @base_width ) * 100;
				background-color: rgb(255,158,63);
				text-align: center;
				line-height: ( 40vw / @base_width ) * 100;
				border-radius: ( 55vw / @base_width ) * 100;
				margin-right: ( 30vw / @base_width ) * 100;
				color: white;
				font-size: ( 20vw / @base_width ) * 100;
			}
			.rules-right{
				float: left;
				text-align: left;
			}
		}
	}

	.rules-rules{
		position: absolute;
		top: (730vw / @base_width ) * 100;
		li{
			margin-top: ( 5vw / @base_width ) * 100;
		}
	}

	.rules-icon-close {
		position: absolute;
		bottom: ( 100vw / @base_width ) * 100;
		right: 47%;
		background-image: url("./img/coupon/shareClose@2x.png");
		width: ( 50vw / @base_width ) * 100;
		height: ( 50vw / @base_width ) * 100;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}
}
.task-item {
	margin-bottom: 5%;
	padding: 3%;
	border-radius: 0.4em;
	background: #fff;
	border: #475f95 0.15em solid;
	box-sizing: border-box;
	width: 100%;

	.info {
		vertical-align: middle;

		div {
			margin: 0 0 0.5em;

			&:last-child {
				margin: 0;
			}
		}

		.title {
			font-size: 1em;
		}

		.description {
			color: #338ffc;
			line-height: 1.1em;
			font-size: 0.85em;
			padding-left: 1.3em;
			.retina('img/task_reward.png', 1em, 1em, 0, 0em);
		}

		.summary {
			color: #666;
			font-size: 0.8em;
			.to-fuli{
				border: none;
				outline: none;
				color: rgb(255,91,130);
				margin-left: ( 15vw / @base_width ) * 100;
			}
		}
	}

	.action {
		width: 25%;
		padding-left: 5%;
		vertical-align: middle;
		pointer-events: none;

		a {
			display: block;
			border-radius: 0.3em;
			height: 2.5em;
			line-height: 2.5em;
			text-align: center;
			background: grey;
			padding: 0 0.5em;
		}
	}
}

@media screen and (min-width: 768px){
	.task-item {
		font-size: 2em;
	}

	.header .tip {
		height: 2.5em;
		font-size: 1.5em;
		line-height: 2.5em;
	}

	#icon{
		.iconday-wrap{
			top:52%;
			font-size : 44px;
		}
		#openRules{
			top: 75%;
		}
	}

	#rules{
		.rules-icon-close{
			bottom: ( 20vw / @base_width ) * 100;
		}
	}
}