@charset "UTF-8";
/***
	@description:重置样式;
	@Author:ray;
	@create date:2015-07-31;
***/
body { margin: 0; background-color: #FFF; }

body, button, input, select, textarea { font: 14px/1.5 "Microsoft YaHei", "tahoma", "arial", "sans-serif"; color: #666; }

dl, dd, p, form { margin: 0; }

ol, ul, li { margin: 0; padding: 0; list-style-type: none; }

em, i { font-style: normal; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }

table { border-collapse: collapse; border-spacing: 0; }

a { color: #666; text-decoration: none; outline: none; cursor: pointer; -moz-transition: color 0.2s; -o-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; }

img { border: 0; vertical-align: top; }

input, select, button, textarea { outline: 0; }

/*html5*/
article, aside, dialog, footer, header, section, footer, nav, figure, menu { display: block; }

/*placeholder*/
input::-webkit-input-placeholder { color: #d0d0d0; }

input::-moz-placeholder { color: #d0d0d0; }

input:-ms-input-placeholder { color: #d0d0d0; }

/*滚动条*/
::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-button:vertical { display: none; }

::-webkit-scrollbar-track:vertical { background-color: black; }

::-webkit-scrollbar-track-piece { background-color: #F5F5F5; }

::-webkit-scrollbar-thumb:vertical { margin-right: 10px; background-color: #A6A6A6; }

::-webkit-scrollbar-thumb:vertical:hover { background-color: #888; }

::-webkit-scrollbar-corner:vertical { background-color: #535353; }

::-webkit-scrollbar-resizer:vertical { background-color: #FF6E00; }

/***
	@description: css3 动画;
	@Author:ray;
	@create date:2016-09-13;
***/
@-moz-keyframes rotate { from { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }
@-webkit-keyframes rotate { from { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }
@-o-keyframes rotate { from { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }
@-ms-keyframes rotate { from { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }
@keyframes rotate { from { -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } }
@-moz-keyframes cardZoomIn { 0% { -moz-transform: scale(0) translateY(-200px); -ms-transform: scale(0) translateY(-200px); -webkit-transform: scale(0) translateY(-200px); transform: scale(0) translateY(-200px); }
  100% { -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }
@-webkit-keyframes cardZoomIn { 0% { -moz-transform: scale(0) translateY(-200px); -ms-transform: scale(0) translateY(-200px); -webkit-transform: scale(0) translateY(-200px); transform: scale(0) translateY(-200px); }
  100% { -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }
@-o-keyframes cardZoomIn { 0% { -moz-transform: scale(0) translateY(-200px); -ms-transform: scale(0) translateY(-200px); -webkit-transform: scale(0) translateY(-200px); transform: scale(0) translateY(-200px); }
  100% { -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }
@-ms-keyframes cardZoomIn { 0% { -moz-transform: scale(0) translateY(-200px); -ms-transform: scale(0) translateY(-200px); -webkit-transform: scale(0) translateY(-200px); transform: scale(0) translateY(-200px); }
  100% { -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }
@keyframes cardZoomIn { 0% { -moz-transform: scale(0) translateY(-200px); -ms-transform: scale(0) translateY(-200px); -webkit-transform: scale(0) translateY(-200px); transform: scale(0) translateY(-200px); }
  100% { -moz-transform: scale(1) translateY(0px); -ms-transform: scale(1) translateY(0px); -webkit-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } }
@-moz-keyframes cardLeftIn { 0% { opacity: 0; -moz-transform: translateX(246px); -ms-transform: translateX(246px); -webkit-transform: translateX(246px); transform: translateX(246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-webkit-keyframes cardLeftIn { 0% { opacity: 0; -moz-transform: translateX(246px); -ms-transform: translateX(246px); -webkit-transform: translateX(246px); transform: translateX(246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-o-keyframes cardLeftIn { 0% { opacity: 0; -moz-transform: translateX(246px); -ms-transform: translateX(246px); -webkit-transform: translateX(246px); transform: translateX(246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-ms-keyframes cardLeftIn { 0% { opacity: 0; -moz-transform: translateX(246px); -ms-transform: translateX(246px); -webkit-transform: translateX(246px); transform: translateX(246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@keyframes cardLeftIn { 0% { opacity: 0; -moz-transform: translateX(246px); -ms-transform: translateX(246px); -webkit-transform: translateX(246px); transform: translateX(246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-moz-keyframes cardRightIn { 0% { opacity: 0; -moz-transform: translateX(-246px); -ms-transform: translateX(-246px); -webkit-transform: translateX(-246px); transform: translateX(-246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-webkit-keyframes cardRightIn { 0% { opacity: 0; -moz-transform: translateX(-246px); -ms-transform: translateX(-246px); -webkit-transform: translateX(-246px); transform: translateX(-246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-o-keyframes cardRightIn { 0% { opacity: 0; -moz-transform: translateX(-246px); -ms-transform: translateX(-246px); -webkit-transform: translateX(-246px); transform: translateX(-246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-ms-keyframes cardRightIn { 0% { opacity: 0; -moz-transform: translateX(-246px); -ms-transform: translateX(-246px); -webkit-transform: translateX(-246px); transform: translateX(-246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@keyframes cardRightIn { 0% { opacity: 0; -moz-transform: translateX(-246px); -ms-transform: translateX(-246px); -webkit-transform: translateX(-246px); transform: translateX(-246px); }
  100% { opacity: 1; -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-moz-keyframes cardZoomOut { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; }
  100% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } }
@-webkit-keyframes cardZoomOut { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; }
  100% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } }
@-o-keyframes cardZoomOut { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; }
  100% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } }
@-ms-keyframes cardZoomOut { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; }
  100% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } }
@keyframes cardZoomOut { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; }
  100% { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } }
@-moz-keyframes cloudMove { 0% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
  25% { -moz-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  50% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  75% { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-webkit-keyframes cloudMove { 0% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
  25% { -moz-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  50% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  75% { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-o-keyframes cloudMove { 0% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
  25% { -moz-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  50% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  75% { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-ms-keyframes cloudMove { 0% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
  25% { -moz-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  50% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  75% { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@keyframes cloudMove { 0% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
  25% { -moz-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  50% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  75% { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } }
@-moz-keyframes rocket { 0% { -moz-transform: scale(0) translate(20px, 30px); -ms-transform: scale(0) translate(20px, 30px); -webkit-transform: scale(0) translate(20px, 30px); transform: scale(0) translate(20px, 30px); }
  100% { -moz-transform: scale(1) translate(0px, 0px); -ms-transform: scale(1) translate(0px, 0px); -webkit-transform: scale(1) translate(0px, 0px); transform: scale(1) translate(0px, 0px); } }
@-webkit-keyframes rocket { 0% { -moz-transform: scale(0) translate(20px, 30px); -ms-transform: scale(0) translate(20px, 30px); -webkit-transform: scale(0) translate(20px, 30px); transform: scale(0) translate(20px, 30px); }
  100% { -moz-transform: scale(1) translate(0px, 0px); -ms-transform: scale(1) translate(0px, 0px); -webkit-transform: scale(1) translate(0px, 0px); transform: scale(1) translate(0px, 0px); } }
@-o-keyframes rocket { 0% { -moz-transform: scale(0) translate(20px, 30px); -ms-transform: scale(0) translate(20px, 30px); -webkit-transform: scale(0) translate(20px, 30px); transform: scale(0) translate(20px, 30px); }
  100% { -moz-transform: scale(1) translate(0px, 0px); -ms-transform: scale(1) translate(0px, 0px); -webkit-transform: scale(1) translate(0px, 0px); transform: scale(1) translate(0px, 0px); } }
@-ms-keyframes rocket { 0% { -moz-transform: scale(0) translate(20px, 30px); -ms-transform: scale(0) translate(20px, 30px); -webkit-transform: scale(0) translate(20px, 30px); transform: scale(0) translate(20px, 30px); }
  100% { -moz-transform: scale(1) translate(0px, 0px); -ms-transform: scale(1) translate(0px, 0px); -webkit-transform: scale(1) translate(0px, 0px); transform: scale(1) translate(0px, 0px); } }
@keyframes rocket { 0% { -moz-transform: scale(0) translate(20px, 30px); -ms-transform: scale(0) translate(20px, 30px); -webkit-transform: scale(0) translate(20px, 30px); transform: scale(0) translate(20px, 30px); }
  100% { -moz-transform: scale(1) translate(0px, 0px); -ms-transform: scale(1) translate(0px, 0px); -webkit-transform: scale(1) translate(0px, 0px); transform: scale(1) translate(0px, 0px); } }
@-moz-keyframes rocketLeave { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-webkit-keyframes rocketLeave { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-o-keyframes rocketLeave { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-ms-keyframes rocketLeave { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@keyframes rocketLeave { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-moz-keyframes icoMove { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-webkit-keyframes icoMove { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-o-keyframes icoMove { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-ms-keyframes icoMove { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@keyframes icoMove { 0% { -moz-transform: scale(1) translate(0, 0); -ms-transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); }
  100% { -moz-transform: scale(1) translate(-200px, -300px); -ms-transform: scale(1) translate(-200px, -300px); -webkit-transform: scale(1) translate(-200px, -300px); transform: scale(1) translate(-200px, -300px); } }
@-moz-keyframes float { 0% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes float { 0% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes float { 0% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes float { 0% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes float { 0% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -webkit-transform: translateY(-8px); transform: translateY(-8px); }
  100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
/*** @Author:ray; @create date:2016-01-06
***/
.ico-sprite, .ico-android, .ico-iso, .ico-pc { background-image: url('../images/ico-se9cb09c88d.png'); background-repeat: no-repeat; }

.ico-android { background-position: 0 0; height: 20px; width: 18px; }

.ico-iso { background-position: 0 -20px; height: 20px; width: 17px; }

.ico-pc { background-position: 0 -40px; height: 20px; width: 15px; }

.ico { display: inline-block; vertical-align: middle; }

/***
	@Author:ray;
	@create date:2016-09-12;
***/


.fl { float: left; display: inline; }

.fr { float: right; display: inline; }

.icon { display: inline-block; background-image: url(../images/icon.png); background-repeat: no-repeat; }

.icon-logo { width: 112px; height: 112px; background-position: 0px -84px; }

.btn-download {display: inline-block;vertical-align: top;width: 206px;height: 60px;line-height: 60px;text-align: center;background-color: #FFF;border: 2px solid #285396;font-size: 28px;color: #285396;border-radius: 6px;margin-top: 5px;-moz-transition: background-color 0.3s, color 0.3s;-o-transition: background-color 0.3s, color 0.3s;-webkit-transition: background-color 0.3s, color 0.3s;transition: background-color 0.3s, color 0.3s;}
.btn-download:hover { background-color: #285396; color: #FFF; }

.wrapper { width: 1200px; margin-left: auto; margin-right: auto; }

.header { width: 100%; height: 56px; position: fixed; z-index: 99; background-color: #fff; border-bottom: 1px solid #e6e6e6; }
.header .wrapper { position: relative; height: 100%; }
.header .logo { display: inline-block; width: 285px; height: 56px; background: url(../images/icon.png) no-repeat 0px 10px; }

.topbar { position: absolute; top: 10px; right: 0; }
.topbar a { margin-left: 20px; }
.topbar .btn { display: inline-block; vertical-align: top; height: 23px; line-height: 23px; padding: 7px 15px; font-size: 16px; text-align: center; background-color: #34aeff; color: #FFF; border-radius: 4px; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
.topbar .btn:hover .code { visibility: visible; opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.topbar .btn em { margin-left: 5px; }
.topbar .ico { vertical-align: -3px; margin-right: 8px; }
.topbar .btn-blue {background-color:  #507bc3;}
.topbar .btn-blue:hover { background-color: #6694fb; }
.topbar .btn-orange { background-color: #6694fb; }
 
.topbar .btn-orange:hover { background-color: #f17417; }
.topbar .btn-blueD {background-color:#1d4481;}
.topbar .btn-blueD:hover { background-color: #4f81f2; }
.topbar .icon-code { width: 23px; height: 23px; display: inline-block; vertical-align: top; background-position: -217px -256px; margin-left: 8px; }
.topbar .code { position: absolute; z-index: 300; visibility: hidden; margin: 40px 0 0 -89px; padding: 5px; background-color: #FFF; border: 1px solid #e6e6e6; border-radius: 4px; opacity: 0; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); -moz-transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform-origin: center top; -moz-box-shadow: 0px 0px 8px rgba(52, 174, 255, 0.5); -webkit-box-shadow: 0px 0px 8px rgba(52, 174, 255, 0.5); box-shadow: 0px 0px 8px rgba(52, 174, 255, 0.5); -moz-transition: visibility 0.4s, opacity 0.4s, -moz-transform 0.4s; -o-transition: visibility 0.4s, opacity 0.4s, -o-transform 0.4s; -webkit-transition: visibility 0.4s, opacity 0.4s, -webkit-transform 0.4s; transition: visibility 0.4s, opacity 0.4s, transform 0.4s; }
.topbar .code img { display: block; width: 140px; height: 140px; }
.topbar .code em, .topbar .code i { position: absolute; top: 0; left: 50%; width: 0; height: 0; border-bottom: 6px solid #e6e6e6; border-right: 6px solid transparent; border-left: 6px solid transparent; margin: -6px 0 0 -6px; }
.topbar .code i { border-bottom-color: #FFF; margin-top: -5px; }
.topbar .link { display: inline-block; margin-left: 30px; line-height: 37px; font-size: 16px; }
.topbar .link:hover { color: #34aeff; }

.navbar { position: fixed; top: 50%; right: 50px; margin-top: -28px; list-style: none; z-index: 200; }
.navbar li { width: 14px; height: 14px; border: 2px solid #e6e6e6; border-radius: 50%; margin-bottom: 18px; -moz-box-shadow: 0px 3px 6px rgba(52, 174, 255, 0); -webkit-box-shadow: 0px 3px 6px rgba(52, 174, 255, 0); box-shadow: 0px 3px 6px rgba(52, 174, 255, 0); -moz-transition: all, 0.3s; -o-transition: all, 0.3s; -webkit-transition: all, 0.3s; transition: all, 0.3s; }
.navbar li.active {background-color: #285396;border-color: #285396;-moz-box-shadow: 0px 3px 6px #34aeff;-webkit-box-shadow: 0px 3px 6px #34aeff;box-shadow: 0px 3px 6px #34aeff;}

.pages {   background-color: #FFF; position:relative; height: 100%; width: 100% }
.pages .page { height: 100%; position: relative;  overflow: hidden; padding: 50px;}
.pages .page-inner {   width: 1000px; margin: 0 auto }
.pages .page1 { background: #ecf3ff url(../images/page-bg.png) no-repeat center 112px; }
.pages .page1 .page-inner {   }
.pages .page1 .download { height: 402px; position: relative;  text-align: center; padding-top: 50px }
.pages .page1 .download .name { display: inline-block; vertical-align: top; width: 500px; text-align: left; *display: inline; *zoom: 1; }
.pages .page1 .download .logo-version { width: 458px; height: 112px; display: inline-block; vertical-align: top; position: relative; background: url(../images/logo-version.png) no-repeat; margin-right: 80px; text-align: center; }
.pages .page1 .download .logo-version .num { width: 55px; font-size: 21px; font-family: arial; position: absolute; top: 23px; right: 5px; color: #fffefe; text-transform: uppercase; display: none; }
.pages .page1 .download .icon-logo { float: left; margin-right: 20px; position: relative; }
.pages .page1 .download h1 { font-size: 54px; color: #2c2c2c; line-height: 1; margin-bottom: 10px; }
.pages .page1 .download h4 { font-size: 30px; }
.pages .page1 .caselist {   width: 70%; height: 400px; margin: 0 auto }
.pages .page1 .caselist ul { width: 360px; height: 400px; margin: 0 auto; }
.pages .page1 .caselist li { position: absolute;   }
.pages .page1 .caselist li.item1 { margin-left: -420px; margin-top: 90px; }
.pages .page1 .caselist li.item2 { margin-left: 430px; margin-top: 90px; }
.pages .page1 .caselist li.item3 { margin-left: -232px; margin-top: 42px; }
.pages .page1 .caselist li.item4 { margin-left: 260px; margin-top: 42px; }
.pages .textbox, .pages .showbox { width: 40%; height: 100%; padding: 0px 5%; text-align: center }
.pages .textbox h2 { font-size: 30px; color: #2c2c2c; }
.pages .textbox h3 { font-size: 16px; color: #999; margin-bottom: 30px; white-space: nowrap; }
.pages .textbox .ani { width: 128px; height: 128px; position: relative; margin: 0 auto; }
.pages .textbox .ani li { background-image: url(../images/icon.png); background-repeat: no-repeat; width: 27px; height: 27px; position: absolute; left: 50%; top: 50%; }
.pages .textbox .ani li.ani-logo { left: 0; top: 0; width: 100%; height: 100%; background-position: 0px -339px; z-index: 10; border-radius: 50%; box-shadow: -5px 10px 0px 0px rgba(0, 0, 0, 0.05); }
.pages .textbox .ani li.ani-1 { margin: 80px 0px 0px -180px; background-position: 1px -254px; }
.pages .textbox .ani li.ani-2 { margin: -30px 0px 0px -155px; background-position: -42px -254px; }
.pages .textbox .ani li.ani-3 { margin: -120px 0px 0px 70px; background-position: -83px -251px; }
.pages .textbox .ani li.ani-4 { margin: 20px 0px 0px 135px; background-position: -127px -254px; }
.pages .textbox .ani li.ani-5 { margin: 110px 0px 0px 0px; background-position: -171px -256px; }
.pages .showbox { background: url(../images/box-bg.png) no-repeat center bottom; position: relative; }


.pages .showbox .pic img { width: 100%; }
.pages .showbox .cloud { width: 100%; height: 120px; background: url(../images/cloud.png) no-repeat center top; z-index: 20; margin-bottom: -20px; }
.pages .showbox .icon-rocket { width: 178px; height: 178px; background-position: 0px -520px; margin: 0 0 60px -15px; }
.pages .showbox .icon-gift { width: 150px; height: 150px; background-position: -198px -520px; right: -4px; bottom: 40px; }
.pages .showbox .icon-book { width: 205px; height: 160px; background-position: -385px -520px; margin: 0px 0 10px 10px; }
.pages .page3 .showbox .pic { margin: 0 0 0 -170px; }
.pages .page3 .textbox .ani li.ani-logo { background-position: -262px -339px; }
.pages .page4 .textbox .ani li.ani-logo { background-position: -131px -339px; }

.page-footer { background-color: #f4f5f6; text-align: center; padding: 26px 0 15px; }
.page-footer .download h2 { font-size: 54px; color: #2c2c2c; padding-top: 10px; letter-spacing: 3px; }
.page-footer .download h3 { font-size: 30px; margin-bottom: 20px; }
.page-footer .download .btn-download { margin-bottom: 70px; }
.page-footer .friendlink { font-size: 16px; margin-bottom: 10px; }
.page-footer .friendlink a { margin-right: 15px; }
.page-footer .friendlink a:hover { color: #23d493; }
.page-footer .copyright { font-size: 14px; color: #aaa; letter-spacing: 1px; }
.page-footer .icon-logo { width: 141px; height: 141px; }

.page1.active .download { -moz-animation: fadeInDown 1s 0.2s ease both; -webkit-animation: fadeInDown 1s 0.2s ease both; animation: fadeInDown 1s 0.2s ease both;  text-align: center}
.page1.active .download .icon-logo { -moz-animation: bounce 1s 2s ease; -webkit-animation: bounce 1s 2s ease; animation: bounce 1s 2s ease; }
.page1.active .caselist .item1 { -moz-animation: cardLeftIn 0.6s 1.5s ease both; -webkit-animation: cardLeftIn 0.6s 1.5s ease both; animation: cardLeftIn 0.6s 1.5s ease both; }
.page1.active .caselist .item2 { -moz-animation: cardRightIn 0.6s 1.7s ease both; -webkit-animation: cardRightIn 0.6s 1.7s ease both; animation: cardRightIn 0.6s 1.7s ease both; }
.page1.active .caselist .item3 { -moz-animation: cardLeftIn 0.6s 1s ease both; -webkit-animation: cardLeftIn 0.6s 1s ease both; animation: cardLeftIn 0.6s 1s ease both; }
.page1.active .caselist .item4 { -moz-animation: cardRightIn 0.6s 1.2s ease both; -webkit-animation: cardRightIn 0.6s 1.2s ease both; animation: cardRightIn 0.6s 1.2s ease both; }
.page1.active .caselist .item5 { -moz-animation: cardZoomIn 0.6s 0.2s ease both; -webkit-animation: cardZoomIn 0.6s 0.2s ease both; animation: cardZoomIn 0.6s 0.2s ease both; }

.page.active .showbox .cloud { -moz-animation: cloudMove 20s 0s linear infinite; -webkit-animation: cloudMove 20s 0s linear infinite; animation: cloudMove 20s 0s linear infinite; }
.page.active .showbox .icon-rocket { -moz-animation: rocket 1s 0.8s ease both; -webkit-animation: rocket 1s 0.8s ease both; animation: rocket 1s 0.8s ease both; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -webkit-transform-origin: right bottom; transform-origin: right bottom; }
.page.active .showbox .icon-gift { -moz-animation: rollIn 1s 0.8s ease both; -webkit-animation: rollIn 1s 0.8s ease both; animation: rollIn 1s 0.8s ease both; }
.page.active .showbox .icon-book { -moz-animation: fadeInRight 1s 0.8s ease both; -webkit-animation: fadeInRight 1s 0.8s ease both; animation: fadeInRight 1s 0.8s ease both; }
.page.active .textbox h2 { -moz-animation: fadeInDown 1s 0.2s ease both; -webkit-animation: fadeInDown 1s 0.2s ease both; animation: fadeInDown 1s 0.2s ease both; }
.page.active .textbox h3 { -moz-animation: fadeInDown 1s 0.6s ease both; -webkit-animation: fadeInDown 1s 0.6s ease both; animation: fadeInDown 1s 0.6s ease both; }
.page.active .textbox .ani-logo { -moz-animation: flipInY 2s 0.4s ease both; -webkit-animation: flipInY 2s 0.4s ease both; animation: flipInY 2s 0.4s ease both; }
.page.active .textbox .ani-1 { -moz-animation: float ease-in-out 1.5s 0s infinite; -webkit-animation: float ease-in-out 1.5s 0s infinite; animation: float ease-in-out 1.5s 0s infinite; }
.page.active .textbox .ani-2 { -moz-animation: float ease-in-out 1.5s 0.4s infinite; -webkit-animation: float ease-in-out 1.5s 0.4s infinite; animation: float ease-in-out 1.5s 0.4s infinite; }
.page.active .textbox .ani-3 { -moz-animation: float ease-in-out 1.5s 0.8s infinite; -webkit-animation: float ease-in-out 1.5s 0.8s infinite; animation: float ease-in-out 1.5s 0.8s infinite; }
.page.active .textbox .ani-4 { -moz-animation: float ease-in-out 1.5s 1.2s infinite; -webkit-animation: float ease-in-out 1.5s 1.2s infinite; animation: float ease-in-out 1.5s 1.2s infinite; }
.page.active .textbox .ani-5 { -moz-animation: float ease-in-out 1.5s 1.6s infinite; -webkit-animation: float ease-in-out 1.5s 1.6s infinite; animation: float ease-in-out 1.5s 1.6s infinite; }

.page-leave .icon-rocket { -moz-animation: rocketLeave 0.5s 0s ease both; -webkit-animation: rocketLeave 0.5s 0s ease both; animation: rocketLeave 0.5s 0s ease both; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -webkit-transform-origin: right bottom; transform-origin: right bottom; }
.page-leave .icon-gift { -moz-animation: rollOut 0.5s 0s ease both; -webkit-animation: rollOut 0.5s 0s ease both; animation: rollOut 0.5s 0s ease both; }

.pages .page.h835, .pages .page.h735 { overflow: hidden; }
.pages .page.h835 .page-inner, .pages .page.h735 .page-inner { top: 0px; margin-top: 90px; overflow: hidden; }

/*# sourceMappingURL=style.css.map */

.ewm{  display: inline-block; font-size:20px; padding-top: 10px}
.ewm img{ display: block}
.pic img{ width: 100%}
.pic{ display: inline-block}
.download{ text-align: center; padding-top: 50px}