40°hot!

html {
	width:100%;
	height:100%;
}
body {
	overflow:hidden;
	position:relative;
	min-width:344px;
}
.height-100vw {
	height:100vh;
}
.width-100vw {
	width:100vw;
}
.center-html-ui {
	background:#000;
}
.uigradients {
	background:#60ffd3;
	background:-webkit-linear-gradient(to right top,#6fa2ff,#60ffd3);
	background:linear-gradient(to right top,#6fa2ff,#60ffd3);
}
.center-block {
	width:344px;
	height:500px;
	margin-top:0vh;
	background:none;
	box-shadow:15px 15px 60px #44abad;
	border-radius:15px;
	overflow:hidden;
	position:relative;
	background:#60ffd3;
	background:-webkit-linear-gradient(to left bottom,#6fbaff,#60ffd3);
	background:linear-gradient(to left bottom,#60ffd3,#6fbaff);
}
.top-two-round {
	width:400%;
	position:absolute;
	left:-92%;
	top:-26%;
	animation:left-right-go 6s;
	animation-iteration-count:infinite;
	animation-timing-function:cubic-bezier(0,0,0,0);
	z-index:100;
}
.top-two-round .col-6-f {
	width:25%;
	float:left;
}
.left-10 {
	margin-left:-10%;
	background:#60ffd3;
	background:-webkit-linear-gradient(to left bottom,#d4ffd2,#d4ffd2);
	background:linear-gradient(to left bottom,#d4ffd2,#d4ffd2);
}
.top-two-round div {
	border-radius:50%;
	height:300px;
	background:#80ffe3;
}
.top-three-round {
	width:500%;
	position:absolute;
	left:-92%;
	top:-5%;
	animation:left-right-go-3 4s;
	animation-iteration-count:infinite;
	animation-timing-function:cubic-bezier(0,0,0,0);
	z-index:50;
}
.top-three-round .col-6-f {
	width:25%;
	float:left;
}
.top-three-round div {
	border-radius:50%;
	height:300px;
	background:#beff85;
}
.top-four-round {
	width:380%;
	position:absolute;
	right:-92%;
	top:-5%;
	animation:left-right-go-4 5s;
	animation-iteration-count:infinite;
	animation-timing-function:cubic-bezier(0,0,0,0);
	z-index:10;
}
.top-four-round .col-6-f {
	width:28%;
	float:left;
}
.top-four-round div {
	border-radius:50%;
	height:300px;
	background:#acddff;
}
.border-radius-1 {
	width:15px;
	height:15px;
	border-radius:10px;
	background:#fff;
	position:absolute;
	left:10%;
	top:5%;
	box-shadow:0px 0px 10px #fff;
	animation:top-down-go 6s;
	animation-iteration-count:infinite;
	animation-timing-function:cubic-bezier(0,0,0,0);
	filter:url(blur.svg#blur);
	-webkit-filter:blur(3px);
	-moz-filter:blur(3px);
	-ms-filter:blur(3px);
	filter:blur(3px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=false);
}
.border-radius-2 {
	width:10px;
	height:10px;
	border-radius:25px;
	background:#fff;
	position:absolute;
	bottom:10%;
	right:20%;
	box-shadow:0px 0px 10px #fff;
	filter:url(blur.svg#blur);
	-webkit-filter:blur(3px);
	-moz-filter:blur(3px);
	-ms-filter:blur(3px);
	filter:blur(3px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=false);
	/* IE6~IE9 */
}
.border-radius-3 {
	width:8px;
	height:8px;
	border-radius:25px;
	background:#fff;
	position:absolute;
	bottom:15%;
	left:20%;
	box-shadow:0px 0px 10px #fff;
	filter:url(blur.svg#blur);
	-webkit-filter:blur(3px);
	-moz-filter:blur(3px);
	-ms-filter:blur(3px);
	filter:blur(3px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=false);
	/* IE6~IE9 */
}
.border-radius-4 {
	width:30px;
	height:30px;
	border-radius:25px;
	background:#fff;
	position:absolute;
	top:20%;
	right:6%;
	box-shadow:0px 0px 10px #fff;
	filter:url(blur.svg#blur);
	-webkit-filter:blur(10px);
	-moz-filter:blur(10px);
	-ms-filter:blur(10px);
	filter:blur(10px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=false);
	/* IE6~IE9 */
}
.border-radius-5 {
	width:9px;
	height:9px;
	border-radius:25px;
	background:#fff;
	position:absolute;
	top:30%;
	right:26%;
	box-shadow:0px 0px 10px #fff;
}
.border-radius-1,.border-radius-3,.border-radius-5 {
	animation:top-down-go 6s;
	animation-iteration-count:infinite;
	animation-timing-function:cubic-bezier(0,0,0,0);
}
.border-radius-4 {
	animation:top-down-go-1 12s;
	animation-iteration-count:infinite;
	animation-timing-function:cubic-bezier(0,0,0,0);
}
@media (max-width:768px) {
	.center-block {
	margin:30vw auto;
	width:344px;
	height:500px;
}
.word-tittle {
	position:absolute;
	top:2.5vw;
	left:3%;
	z-index:999;
}
.hot p {
	margin-top:2vw;
	font-size:18px;
	color:#fff;
}
/*    .border-radius-1,.border-radius-2,.border-radius-3,.border-radius-4,.border-radius-5 {
	display:none;
}
*/}@keyframes left-right-go {
	0% {
	left:-92%;
	top:-33%;
}
25% {
	left:-80%;
	top:-33%;
}
50% {
	left:-68%;
	top:-33%;
}
75% {
	left:-56%;
	top:-33%;
}
100% {
	left:-32%;
	top:-33%;
}
}@keyframes left-right-go-3 {
	0% {
	left:-92%;
	top:-25%;
}
25% {
	left:-74.5%;
	top:-25%;
}
50% {
	left:-59%;
	top:-25%;
}
75% {
	left:-43%;
	top:-25%;
}
100% {
	left:-16%;
	top:-25%;
}
}@keyframes left-right-go-4 {
	0% {
	right:-192%;
	top:-12%;
}
25% {
	right:-172%;
	top:-12%;
}
50% {
	right:-152%;
	top:-12%;
}
75% {
	right:-132%;
	top:-12%;
}
100% {
	right:-122%;
	top:-12%;
}
}@keyframes top-down-go {
	0% {
	margin-left:0;
	margin-top:0;
}
25% {
	margin-left:10px;
	margin-top:30px;
}
50% {
	margin-left:30px;
	margin-top:90px;
}
75% {
	margin-left:10px;
	margin-top:20px;
}
100% {
	margin-left:0;
	margin-top:0;
}
}@keyframes top-down-go-1 {
	0% {
	left:-200px;
	top:10px;
}
25% {
	left:2vw;
	top:10vw;
}
50% {
	left:40vw;
	top:70vw;
}
75% {
	left:55vw;
	top:120vw;
}
100% {
	left:80vw;
	top:190vw;
}
}.word-tittle {
	position:absolute;
	top:2.5vw;
	left:3%;
	z-index:999;
}
.word-tittle h1 {
	font-size:85px;
	color:#fff;
	font-weight:100;
}
.word-tittle h1 small {
	font-size:15px;
	position:relative;
	left:-30px;
	color:#fff;
}
.hot {
	position:absolute;
	z-index:999;
	right:6%;
	width:50%;
}
.hot p {
	margin-top:2vw;
	font-size:18px;
	color:#fff;
}
.bottom-cop {
	position:absolute;
	bottom:3%;
	right:3%;
	font-size:12px;
	color:#d4f7fd;
	z-index:5;
	letter-spacing:8px;
}