@charset "utf-8";

/*CSS reset*/
html {
	overflow-x: hidden;
	overflow-y: auto;
	color: #333;
	font-size: 62.5%;
	font-family: Microsoft Yahei,simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {
	margin: 0;
	padding: 0
}
fieldset, img {
	border: 0
}
address, caption, cite, code, dfn, em, th, var, optgroup {
	font-style: normal;
	font-weight: 400
}
del, ins {
	text-decoration: none
}
li {
	list-style: none
}
caption, th {
	text-align: left
}
q:before, q:after {
	content: ''
}
abbr, acronym {
	border: 0;
	font-variant: normal
}
sup {
	vertical-align: baseline
}
sub {
	vertical-align: baseline
}
legend {
	color: #000
}
input, button, textarea, select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit
}
input, button, textarea, select {
	outline:none;
	*font-size: 100%
}
textarea{resize:none}

a {
	outline: 0;
	text-decoration: none;
}
a:hover {
	outline: 0;
	text-decoration: none;
}
.clearfix, .cf {
	zoom: 1
}
.clearfix:after, .cf:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	outline:none;
}
/*start*/
.cloudy{
  position: absolute;
  top: 50%;left: 50%;
  width:200px;height:260px;
  transform: translate(-50%, -50%);
  text-align:center;
  font-size:200%;
  color:#fff;
  background:#2EB5E5;
  border-radius:5px;
}
.cloudy:before {
  content: "";
  text-indent:23px;
  font-size:22px;
  line-height:40px;
  color:#333;
  position: absolute;
  height: 50px;width: 50px;
  background: #FFFFFF;
  left:30%;
  top:45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    #FFFFFF 65px -15px 0 -5px,
    #FFFFFF 25px -25px,
    #FFFFFF 30px 10px,
    #FFFFFF 60px 15px 0 -10px,
    #FFFFFF 85px 5px 0 -5px,
    #C8C8C8 35px -35px,
    #C8C8C8 66px -27px 0 -5px,
    #C8C8C8 91px -10px 0 -8px;
  animation: cloudy 5s ease-in-out infinite;
}
.cloudy:after{
  content:"";
  position: absolute;
  top: 80%;left: 50%;
  height: 15px;
  width: 120px;
  background:rgba(0,0,0,.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
  50%{
    transform: translate(-50%, -70%);
  }
  100%{
    transform: translate(-50%, -50%);
  }
}
@keyframes cloudy_shadow {
  50%{
    transform: translate(-50%, -50%) scale(0.8);
    background:rgba(0,0,0,.2);
  }
  100%{
    transform: translate(-50%, -50%) scale(1);
      background:rgba(0,0,0,.5);
  }
}