
* { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300;  }
body { font-family: '微软雅黑', sans-serif; color: white; font-weight: 300; overflow:hidden; }
body ::-webkit-input-placeholder {
  /* WebKit browsers */
  font-family: '微软雅黑', sans-serif;
 color: white;
 font-weight: 300;
}
body :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-family: '微软雅黑', sans-serif;
 color: white;
 opacity: 1;
 font-weight: 300;
}
body ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-family: '微软雅黑', sans-serif;
 color: white;
 opacity: 1;
 font-weight: 300;
}
body :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-family: '微软雅黑', sans-serif;
 color: white;
 font-weight: 300;
}
.htmleaf-container{background:#0C6FB1;}
.jhsm{ text-align:left; font-size:12px; color:#fff; line-height:23px; width:280px; margin:0 auto;}
.wrapper { background: #51A0C5 ; background: -webkit-linear-gradient(top left, #51A0C5  0%, #0C6FB1 100%); background: linear-gradient(to bottom right, #51A0C5  0%, #0C6FB1 100%); opacity: 0.8; width: 100%; height:100%; }
.wrapper.form-success .container h1 { -webkit-transform: translateY(85px); -ms-transform: translateY(85px); transform: translateY(85px); }
.container { width: 400px; margin: 0 auto; padding: 80px 0; height: 400px; text-align: center; position: absolute; left:50%; top:50%; margin-left:-200px; margin-top:-220px; z-index:999; }
.container h1 { font-size: 40px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in-put; transition-timing-function: ease-in-put; font-weight: 200; }
.container p{ font-size:12px; line-height:25px; margin-bottom:8px;}
.container p span{ font-size:16px;}
form { padding: 20px 0; position: relative; z-index: 2; }
form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); width: 250px; border-radius: 3px; padding: 10px 15px; margin: 0 auto 10px auto; display: block; text-align: center; font-size: 18px; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; }
form input:hover { background-color: rgba(255, 255, 255, 0.4); }
form input:focus { background-color: white; width: 300px; color: #000; }
form button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background-color: white; border: 0; padding: 10px 15px; color: #0A7A56; border-radius: 3px; width: 250px; cursor: pointer; font-size: 18px; font-weight:bold; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-family:"微软雅黑", "宋体", "新宋体";}
form button:hover { background-color: #f5f7f9; }
.bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.bg-bubbles li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); bottom: -160px; -webkit-animation: square 25s infinite; animation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; }
.bg-bubbles li:nth-child(1) { left: 10%; }
.bg-bubbles li:nth-child(2) { left: 20%; width: 80px; height: 80px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 17s; animation-duration: 17s; }
.bg-bubbles li:nth-child(3) { left: 25%; -webkit-animation-delay: 4s; animation-delay: 4s; }
.bg-bubbles li:nth-child(4) { left: 40%; width: 60px; height: 60px; -webkit-animation-duration: 22s; animation-duration: 22s; background-color: rgba(255, 255, 255, 0.25); }
.bg-bubbles li:nth-child(5) { left: 70%; }
.bg-bubbles li:nth-child(6) { left: 80%; width: 120px; height: 120px; -webkit-animation-delay: 3s; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); }
.bg-bubbles li:nth-child(7) { left: 32%; width: 160px; height: 160px; -webkit-animation-delay: 7s; animation-delay: 7s; }
.bg-bubbles li:nth-child(8) { left: 55%; width: 20px; height: 20px; -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation-duration: 40s; animation-duration: 40s; }
.bg-bubbles li:nth-child(9) { left: 25%; width: 10px; height: 10px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 40s; animation-duration: 40s; background-color: rgba(255, 255, 255, 0.3); }
.bg-bubbles li:nth-child(10) { left: 90%; width: 160px; height: 160px; -webkit-animation-delay: 11s; animation-delay: 11s; }
@-webkit-keyframes square {  0% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 100% {
 -webkit-transform: translateY(-700px) rotate(600deg);
 transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {  0% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 100% {
 -webkit-transform: translateY(-700px) rotate(600deg);
 transform: translateY(-700px) rotate(600deg);
}
}
