@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
	position: relative;

}

html, body {
	font-family: 'Noto Sans TC', sans-serif;
	width: 100%;
	height:100%;
	margin: 0;
	padding: 0;
}
a {
	text-decoration:none;
	color: #fff;
}
a:link,a:visited,a:active {
　	color: #fff;
}
a:hover{
	color: #ffef00;
}
.share { 
	color: #fff;
	font-size: 10px;
	line-height: 40px;
	float: right;
	left: 50px;
	top: 30px;
	z-index: 8;
	position: absolute;
	vertical-align: middle;
}
.mid {
	height: 80px;
}
.open,.bg,.light,.cloud{
	width: 100%;
	height: 100%;
	overflow: hidden;

}
.open,.bg{
	top: 0px;
	left: 0px;
}
.bg{
	z-index: 0;
}
.light,.cloud,.hotairballoon,.iconA,.title,.deadline{
	position: absolute;
}
.light{
	opacity: 0.6;
	top: -5px;
	z-index: 1;
}
.cloud{
	bottom: -50px;
	z-index: 2;
}
.hotairballoon{
	top: -20%;
	width: 45%;
	z-index: 3;
}
.iconA{
	width: 12%;
	top: 5%;
	right: 5%;
	z-index: 4;
}
.title{
	width: 60%;
	top: 30%;
	right: 50px;
	z-index: 5;
}
.deadline{
	width: 18%;
	bottom: 8%;
	right: 50px;
	z-index: 6;
}
.end{
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0px;
	z-index: 100;
	background-color: #19b5dd;
	color: #fff;
	line-height: 50px;
	text-align: center;
	font-size: 10px;
}
.dot{
	position: relative;
	left: 5%;
	bottom: 20%;
	z-index: 200;
	font-weight: 700;
}
.dotA,.dotB,.dotC,.dotD{
	height: 50px;
	background-color: #19b5dd;
	color: #fff;
	font-size: 30px;
	line-height: 50px;
	display: inline-block;
	padding: 10px 30px;
	margin: 0px 5px;
	border-radius: 15px;
}
.dotA:hover,.dotB:hover,.dotC:hover,.dotD:hover{
	background-color: #a3c144;
	color: #ffef00;
}
.end_phone,.light_phone{
	display: none;
}

@media screen and (max-width: 1366px){
	.deadline{
	width: 30%;
	right: 30px;
	}
	.dot{
	width: 50%;
	left: 30px;
	bottom: 32%;
	}
	.dotA,.dotB{
	width: 35%;
	margin: 5px 0px;
	text-align: center;
	}
	.dotC,.dotD{
	width: 82%;
	margin: 5px 0px;
	text-align: center;
	}
}

@media screen and (max-width: 1024px) and (max-height: 1366px) {
	.cloud{
	top:250px;
	}
	.iconA{
	width: 25%;
	top: 16%;
	right: 6%;
	}
	.hotairballoon{
	width: 55%;
	top: -15%;
	left: 6%;
	}
	.title{
	top: 40%;
	width: 90%;
	right: 50px;
	}
	.deadline{
	width: 33%;
	bottom: 13.5%;
	}
	.dot{
	width: 60%;
	bottom: 30%;
	left: 6%;
	}
	.dotA,.dotB{
	width: 44.5%;
	font-size: 35px;
	padding: 15px 0px;
	margin: 5px 0px;
	}
	.dotC,.dotD{
	font-size: 35px;
	padding: 15px 30px;
	margin: 5px 0px;
	width: 80%;
	text-align: center;
	}

	.end_phone{
	display: block;
	width: 100%;
	height: 100px;
	position: fixed;
	bottom: 0px;
	z-index: 100;
	background-color: #19b5dd;
	color: #fff;
	text-align: center;
	font-size: 16px;
	}
	.end_phone_p{
	padding: 30px 0px 0px 0px;
	}
	.end{
	display: none;
	}
}
@media screen and (max-width: 1024px) and (max-height: 1024px) {
	.iconA{
	width: 20%;
	top: 10%;
	right: 6%;
	}
	.title{
	width: 63%;
	top: 38%;
	right: 30px;
	}
	.hotairballoon{
	width: 45%;
	top: 0%;
	left: 0%;
	}
	.cloud{
	  bottom: -180px;
	}
	.deadline{
	width: 23%;
	right: 30px;
	bottom: 10%;
	}
	.dot{
	left: 3%;
	bottom: 20%;
	width: initial;
	}
	.dotA,.dotB,.dotC,.dotD{
	width: initial;
	height: 40px;
	background-color: #19b5dd;
	color: #fff;
	font-size: 24px;
	line-height: 40px;
	display: inline-block;
	padding: 10px 15px;
	margin: 0px 0px;
	border-radius: 15px;
	}
	.end{
	display: initial;
	}
	.end_phone{
	display: none;
	}
}
@media screen and (max-width: 1000px) {
	.mid {
	height: 50px;
	}
	.cloud{
	top:10%;
	}
	.deadline{
	width: 33%;
	bottom: 13.5%;
	}
	.dot{
	width: 60%;
	bottom: 30%;
	left: 6%;
	}
	.dotA,.dotB{
	width: 30%;
	font-size: 25px;
	padding: 5px 30px;
	margin: 5px 5px;
	}
	.dotC,.dotD{
	font-size: 25px;
	padding: 5px 30px;
	margin: 5px 5px;
	width: 76%;
	text-align: center;
	}

	.end_phone{
	display: block;
	width: 100%;
	height: 80px;
	position: fixed;
	bottom: 0px;
	z-index: 100;
	background-color: #19b5dd;
	color: #fff;
	text-align: center;
	font-size: 12px;
	}
	.end_phone_p{
	padding: 20px 0px 0px 0px;
	}
	.end{
	display: none;
	}
}
@media screen and (max-width: 768px) and (max-height: 1024px) {
	.iconA{
	width: 25%;
	top: 16%;
	right: 6%;
	}
	.hotairballoon{
	width: 55%;
	top: -15%;
	left: 6%;
	}
	.title{
	width: 90%;
	right: 50px;
	}
	.deadline{
	width: 33%;
	bottom: 13.5%;
	}
	.dot{
	width: 60%;
	bottom: 30%;
	left: 6%;
	}
	.dotA,.dotB{
	width: 30%;
	font-size: 25px;
	padding: 5px 30px;
	margin: 5px 5px;
	}
	.dotC,.dotD{
	font-size: 25px;
	padding: 5px 30px;
	margin: 5px 5px;
	width: 76%;
	text-align: center;
	}

	.end_phone{
	display: block;
	width: 100%;
	height: 80px;
	position: fixed;
	bottom: 0px;
	z-index: 100;
	background-color: #19b5dd;
	color: #fff;
	text-align: center;
	font-size: 12px;
	}
	.end_phone_p{
	padding: 20px 0px 0px 0px;
	}
	.end{
	display: none;
	}
}
@media screen and (max-width: 820px) and (max-height: 420px) {
	.iconA{
	width: 15%;
	top: 13%;
	right: 5%;
	}
	.hotairballoon{
	width: 40%;
	top: -40%;
	left: 0px;
	}
	.title{
	width: 50%;
	top:12%;
	right: 20%;
	}
	.deadline{
	width: 20%;
	bottom: 12%;
	}
	.dot{
	left: 3%;
	bottom: 30%;
	width: auto;
	}
	.dotA,.dotB,.dotC,.dotD{
	width: auto;
	font-size: 16px;
	padding: 0px 20px;
	margin: 0px 0px;

	}
	.end{
	display: initial;
	height: 30px;
	line-height: 30px;
	font-size: 6px;
	}
	.end_phone{
	display: none;
	}
}
@media screen and (max-width: 750px) and (max-height: 420px) {
	.hotairballoon{
	top: -20%;
	}
	.title{
	top: 20%;
	}
	.iconA{
	top: 22%;
	}
	.deadline{
	right: 2%;
	bottom: 14%;
	}
}

@media screen and (max-width: 670px){
	.dot{
	bottom: 35%;
	}
	.dotA,.dotB,.dotC,.dotD{
	width: 70%;
	}
}
@media screen and (max-width: 670px) and (max-height: 420px) {
	.dot{
	left: 3%;
	bottom: 30%;
	}
	.dotA,.dotB,.dotC,.dotD{
	font-size: 16px;
	padding: 0px 15px;
	margin: 0px 0px;
	width: initial;
	}
	.end_phone{
	display: block;
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0px;
	z-index: 100;
	background-color: #19b5dd;
	color: #fff;
	text-align: center;
	font-size: 12px;
	}
	.end_phone_p{
	padding: 8px 0px 0px 0px;
	}
	.end{
	display: none;
	}
}
@media screen and (max-width: 420px){
	.share { 
	left: 20px;
	}
	.mid {
		height: 40px;
	}
	.light_phone{
	width: 100%;
	position: absolute;
	display: initial;
	opacity: 0.6;
	top: -5px;
	z-index: 1;
	}
	.light{
	display: none;
	}
	.cloud{
	width: 140%;
	left: -20%;
	top:150px;
	}
	.iconA{
	width: 30%;
	top: 10%;
	right: 3%;
	}
	.hotairballoon{
	width: 62%;
	top: 0%;
	left: 2%;
	}
	.title{
	width: 90%;
	right: 5%;
	top: 45%;
	}
	.deadline{
	width: 33%;
	bottom: 15.5%;
	right: 15px;
	}
	.dot{
	width: 57%;
	bottom: 31%;
	left: 6%;
	}
	.dotA,.dotB{
	width: auto;
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	padding: 0px 18px;
	margin: 3px 0px;
	border-radius: 10px;
	}
	.dotC,.dotD{
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	padding: 0px 30px;
	margin: 3px 3px;
	width: 67%;
	text-align: center;
	border-radius: 10px;
	}

	.end_phone{
	display: block;
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0px;
	z-index: 100;
	background-color: #19b5dd;
	color: #fff;
	text-align: center;
	font-size: 10px;
	}
	.end_phone_p{
	padding: 13px 0px 0px 0px;
	}
	.end{
	display: none;
	}
}
@media screen and (max-width: 375px) and (max-height: 812px) {
	.cloud{
	width: 140%;
	left: -20%;
	bottom: -100px;
	z-index: 2;
	}
	.iconA{
	top: 35%;
	}
	.hotairballoon{
	width: 80%;
	}
	.title{
	top: 50%;
	}
	.dot{
	bottom: 28%;
	}
	.dotA,.dotB{
	padding: 0px 14px;
	}
}
@media screen and (max-width: 375px) and (max-height: 667px) {
	.cloud{
	width: 140%;
	left: -20%;
	top:80px;
	z-index: 2;
	}
	.iconA{
	top: 20px;
	}
	.hotairballoon{
	width: 60%;
	top:-1%;
	}
	.title{
	top: 46%;
	}
	.dot{
	bottom: 31%;
	}
}
@media screen and (max-width: 360px) and (max-height: 640px) {
	.dot{
	width: 57%;
	bottom: 31%;
	left: 6%;
	}
	.dotA,.dotB{
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	padding: 0px 12px;
	margin: 3px 3px;
	border-radius: 10px;
	}
	.dotC,.dotD{
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	padding: 0px 30px;
	margin: 3px 3px;
	width: 67%;
	text-align: center;
	border-radius: 10px;
	}
}
@media screen and (max-width: 320px){
	.deadline{
	width: 33%;
	top:120px;
	right: 15px;
	}
	.title{
	top: 35%;
	}
	.hotairballoon{
	top:-10%;
	}
	.dot{
	width: 87%;
	bottom: 40%;
	left: 8%;
	}
	.dotA,.dotB{
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	padding: 0px 31px;
	margin: 3px 3px;
	border-radius: 10px;
	}
	.dotC,.dotD{
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	padding: 0px 30px;
	margin: 3px 3px;
	width: 73%;
	text-align: center;
	border-radius: 10px;
	}
}