/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
/* html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

ul, ol, dl, li{list-style-type: none;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
.clear{clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
* html .clearfix {height: 1%;}
.clearfix {display:inline-block;}
.clearfix {display:block;} */

.btn {}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF url(circle.gif) no-repeat center center;
  z-index: 1000000000000000;
}


.text-indent {
  text-indent: -999em;
  overflow: hidden;
}

html.dingdone,
.dingdone body {
  overflow-x: hidden;
}

/* body{font:100 12px "方正兰亭黑简体", "microsoft yahei", "simsun", arial, sans-serif;background:#000000;}
 */
.wrap {
  width: 1002px;
  margin: 0 auto;
  position: relative;
}

/*.index-bg{position: absolute;top:0;left:0;bottom: 0;right:0;width: 100%;min-width: 1000px;height: 100%;background:;}*/

.icon {
  background: transparent url(spirit2.png) no-repeat;
}


.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: url(header_bg.png) repeat-x;
  height: 223px;
  z-index: 10000;
}

.header {
  height: 223px;
  line-height: 32px;
  color: #829fb9;
  position: relative;
  z-index: 10001
}

.site-logonew {
  float: left;
  margin: 36px 0 0;
  width: 273px;
  height: 142px;
}

.site-logonew a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(logo.png) no-repeat;
}

.site-logonew a:active {
  margin-top: 3px;
}

.site-slogan {
  background: url(slogan.png) no-repeat;
  position: absolute;
  top: 124px;
  left: 310px;
  width: 235px;
  height: 31px;
}

.site-slogan.animated {
  top: 55px;
  left: 320px;
}

.site-top-nav {
  float: right;
  position: absolute;
  right: 0;
  top: 21px;
}

.site-top-nav li,
.site-main-nav li {
  float: left;
}

.site-top-nav li a {
  padding: 4px 10px 0;
  font-size: 12px;
  color: #b3cbe0;
  display: block;
  width: 22px;
  line-height: 28px;
  height: 28px;
  position: relative;
}

.site-top-nav li .title {
  position: absolute;
  top: 24px;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 84px;
  left: 0;
}

.site-top-nav li .title-reseller {
  margin-left: -25px;
}

.site-top-nav li .title-corp {
  margin-left: -24px;
}

.site-top-nav li .title-login {
  margin-left: -25px;
}

.site-top-nav li .title-register {
  margin-left: -26px;
}

.site-top-nav .icon {
  width: 16px;
  height: 16px;
  display: block;
}

.site-top-nav .ico-reseller {
  background-position: -93px -60px
}

.site-top-nav .ico-corp {
  background-position: -145px -61px;
}

.site-top-nav .ico-login {
  background-position: -120px -60px;
}

.site-top-nav .ico-register {
  background-position: -172px -59px;
}

.site-top-nav a:hover .ico-reseller {
  background-position: -93px -42px;
}

.site-top-nav a:hover .ico-corp {
  background-position: -145px -41px;
}

.site-top-nav a:hover .ico-login {
  background-position: -120px -40px;
}

.site-top-nav a:hover .ico-register {
  background-position: -172px -41px;
}

html,
body {
  min-height: 100%;
}

.site-main-nav {
  float: right;
  clear: right;
  margin-top: 80px;
}

.site-main-nav li {
  margin-left: 50px;
}

.site-main-nav a {
  display: block;
  width: 66px;
  position: relative;
  text-align: center;
  font-size: 16px;
  color: #71c4f1;
  position: relative;
}

.site-main-nav .current a {
  color: #eff3f9
}

.site-main-nav a .mask {
  width: 84px;
  height: 95px;
  z-index: 99;
  display: block;
  -webkit-transition: -webkit-transform .4s, background-color .4s linear;
  -webkit-transform: rotateX(0);
  -moz-transition: -moz-transform .4s, background-color .4s linear;
  -moz-transform: rotateX(0);
  -o-transition: -o-transform .4s, background-color .4s linear;
  -o-transform: rotateX(0);
  transition: transform .4s, background-color .4s linear;
  transform: rotateX(0);
}

.site-main-nav a:hover .mask,
.site-main-nav .current .mask {
  background: #217eb1;
  -webkit-transform: rotateY(180deg);
  margin-bottom: 0;
  -moz-transform: rotateY(180deg);
  margin-bottom: 0;
  -o-transform: rotateY(180deg);
  margin-bottom: 0;
  transform: rotateY(180deg);
  margin-bottom: 0;
  border-radius: 10px;
}

.site-main-nav a .icon {
  width: 43px;
  height: 41px;
  position: absolute;
  top: 10px;
  left: 22px;
  z-index: 101;
  -webkit-transition: background-position .4s linear;
  -webkit-transform: rotateX(0);
  -moz-transition: background-position .4s linear;
  -moz-transform: rotateX(0);
  -o-transition: background-position .4s linear;
  -o-transform: rotateX(0);
  transition: background-position .4s linear;
  transform: rotateX(0);
}

.nav-item-product a .icon {
  background-position: -38px 0;
  width: 35px;
  height: 41px;
}

.nav-item-service a .icon {
  background-position: -43px -43px;
  width: 43px;
  height: 40px;
  position: absolute;
  left: 17px;
}

.nav-item-case a .icon {
  background-position: -48px -88px;
  position: absolute;
  left: 20px;
}

.nav-item-manage a .icon {
  background-position: -50px -133px;
}

.nav-item-product .current .icon,
.nav-item-product a:hover .icon {
  background-position: 0 0;
}

.nav-item-service .current .icon,
.nav-item-service a:hover .icon {
  background-position: 0 -43px;
  position: absolute;
  left: 17px;
}

.nav-item-case .current .icon,
.nav-item-case a:hover .icon {
  background-position: 0 -88px;
  position: absolute;
  left: 18px;
}

.nav-item-manage .current .icon,
.nav-item-manage a:hover .icon {
  background-position: 0 -133px;
  position: absolute;
  left: 18px;
}

.site-main-nav a .name {
  position: absolute;
  top: 50px;
  left: 23px;
  -webkit-transition: color .4s linear;
  -moz-transition: color .4s linear;
  -o-transition: color .4s linear;
}

.site-main-nav .current .name,
.site-main-nav a:hover .name {
  color: #fff;
}

.labelusername {
  letter-spacing: 5px;
  padding-left: 5px;
}

.start {
  height: 858px;
  position: relative;
  z-index: 9999;
  width: 100%;
}

.backgroud,
.bg-slide1,
.bg-slide2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 858px;
}

.bg-slide1 {
  background: url(banner1.jpg) no-repeat center top;
}

.bg-slide2 {
  background: url(banner2.jpg) no-repeat center top;
  opacity: 0;
  filter: alpha(opacity=0);
}

.app-screenshot {
  float: left;
  display: inline;
  background: url(appscreenshot.png) no-repeat;
  position: relative;
  width: 482px;
  margin: 73px 0 0 -6px;
  height: 657px;
}

.app-screenshot li {
  position: absolute;
  width: 0;
  height: 0;
}

.app-screenshot .slides-1 {
  left: 174px;
  top: 86px;
  width: 268px;
  height: 478px;
  overflow: hidden;
}

.app-screenshot .slides-2 {
  left: 19px;
  top: 193px;
  width: 137px;
  overflow: hidden;
  height: 344px;
}

.app-screenshot .slides-3 {
  width: 120px;
  height: 200px;
  top: 300px;
  left: -120px;
  opacity: 0
}

.app-screenshot img {
  display: block;
  width: 100%;
  height: 100%;
}

.app-screenshot .slides-2 img {
  width: 193px;
  height: 344px;
}

/*
.app-screenshot .slides-2 img{width: 137px;height: 343px;}

.app-screenshot .slides-1{width: 268px;height: 475px;overflow:hidden;margin: 86px 0 0 174px;position: relative;}
.app-screenshot .slides-1  li{width:268px;height:475px;float:left;position:relative;}
*/
.app-get-start {
  float: right;
  width: 500px;
  padding: 170px 0 0;
}

.app-get-start hgroup {
  line-height: 56px;
  color: #fff;
}

.app-get-start h2 {
  letter-spacing: 14px;
  font-size: 60px;
  padding-left: 26px;
}

.app-get-start h1 {
  color: #61b8e8;
  font-style: italic;
  margin: 30px 0 135px;
  font-size: 48px;
  font-weight: 100;
}

.app-create {
  background: #14a063;
  height: 97px;
  text-align: center;
  border-radius: 5px;
}

.app-create a {
  color: #FFF;
  font-size: 39px;
  text-shadow: 0 1px 1px rgba(8, 164, 136, 0.75);
  line-height: 92px;
  height: 97px;
  font-weight: 700;
  letter-spacing: 3px;
  display: block;
  position: relative;
  border-radius: 5px;
}

.app-create a span {
  position: absolute;
  left: 0;
  top: 0;
}

.app-create a .target {
  width: 100%;
}

.app-create a .light {
  width: 169px;
  height: 169px;
  background: url(lightcircle.png);
  right: 0;
  display: none;
}

/*
.app-create a .hander{width: 69px;height: 87px;background: url(hander.png) no-repeat;left:408px;top:36px;opacity: 0;
		-webkit-transition:all 1s ease-in-out;
		-moz-transition:all 1s ease-in-out;
		-o-transition:all 1s ease-in-out;
		transition:all 1s ease-in-out;
	}
.app-create a:hover .hander{opacity: 1;}
.app-create a .mask{background: url(light.png) no-repeat right top;width:0;height:97px;	

		-webkit-transition:width 1s ease-in-out;


	
}
	*/
.app-create a:hover .mask {
  /*
	width:100%;
	
	-webkit-animation:light 3s linear infinite alternate;
	   -moz-animation:light 3s linear infinite alternate;
	     -o-animation:light 3s linear infinite alternate;
	        animation:light 3s linear infinite alternate;
	*/
}

.app-get-start p {
  /*font-size:22px;color:#FFF;*/
  margin: 60px 0 0 103px;
}

/*.app-get-start p a{color:#FFF;font-size: 14px;padding:2px 31px;margin:5px 2px 0 29px;display:inline-block;background:#67799a;border-radius:3px;opacity: .4;filter:alpha(opacity=40);-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-o-transition:all 0.5s linear;transition:all 0.5s linear;}*/
.app-get-start p span {
  width: 50px;
  height: 56px;
  display: inline-block;
  background: url(platformsupport.png) no-repeat;
}

.app-get-start p span.plantform-html5 {
  background-position: 0 0;
}

.app-get-start p span.plantform-andriod {
  margin-left: 77px;
  background-position: 0 -58px;
}

.app-get-start p span.plantform-ios {
  margin-left: 75px;
  background-position: 0 -113px;
}

.app-get-start p span {
  float: left;
}

/* .app-get-start p a{float:left;}*/


.template-screenshot {
  margin: 121px 0 0;
  padding: 72px 261px 140px 31px;
  width: 266px;
  height: 418px;
  background: url(templatescreenshot.png) no-repeat;
  float: left;
}

.get-more-template {
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
}

.get-more-template hgroup {
  white-space: nowrap;
  text-align: center;
}

.get-more-template h1 {
  font-size: 48px;
  color: #f6f7f9;
  margin: 133px 0 35px;
  font-weight: 100;
  text-align: right;
}

.get-more-template h2 {
  font-size: 30px;
  color: #8bc0ed;
  font-weight: 100;
}

.get-more-template h3 {
  font-size: 22px;
  color: #79bdf6;
  margin: 20px 0 165px;
  font-weight: 100;
}

.get-more-template .app-create {
  width: 420px;
  margin: 0 auto;
  height: 72px;
}

.get-more-template .app-create a {
  height: 72px;
  line-height: 72px;
}

.get-more-template .target {
  font-size: 28px;
  font-weight: 100;
}

.start .app-create {
  padding: 1px 0 0;
}

.start p .app-create-now:active {
  margin: 3px 0 0;
}

.sprev,
.snext {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  background: url(arrow.png);
  z-index: 9999;
  display: none;
  cursor: pointer;
}

.sprev {
  background-position: -40px 0;
  left: 0;
}

.snext {
  right: 0;
}

.start:hover .sprev,
.start:hover .snext {
  display: block;
}

.start .sprev:hover {
  background-position: -40px -40px
}

.start .snext:hover {
  background-position: 0 -40px
}

.template-screenshot .item1 {
  height: 411px;
  overflow: hidden;
}

.template-screenshot .item2 {
  height: 0;
  overflow: hidden;
}

.template-screenshot li {
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: all 1s .5s;
  -moz-transition: all 1s .5s;
  -o-transition: all 1s .5s;
  transition: all 1s .5s;
}

.template-screenshot .rotated li {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
}



.client {
  height: 102px;
  overflow: hidden;
  position: relative;
  z-index: 10006;
  padding-top: 20px;
}

.client .client-opa {
  opacity: 0.2;
  filter: alpha(opacity=20);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 122px;
  background: #000;
}

.client hgroup {
  float: left;
  width: 440px;
  padding: 10px 0 0;
}

.client h1 {
  font-size: 30px;
  color: #f1f2f4;
}

.client h2 {
  font-size: 16px;
  color: #71c4f1;
  padding: 16px 0 0;
  letter-spacing: -1px;
}

.classical-client {
  float: right;
  width: 560px;
}

.classical-client li {
  float: left;
  margin-left: 32px;
}

.classical-client .client-more {
  width: 55px;
  height: 55px;
  background: url(clientmore.png) no-repeat;
  border-radius: 10px;
}

.classical-client .client-more a {
  display: block;
  color: #FFF;
  font-size: 14px;
  padding: 9px 12px;
  font-family: "microsoft yahei";
}

.module {
  background: #f9f9f8;
  padding: 50px 0 70px;
  overflow: hidden;
}

.module hgroup {
  color: #555;
  font-size: 44px;
}

.module h1 {
  font-size: 30px;
  color: #969696;
  padding: 20px 0 70px;
}

.app-modules-intro {
  float: left;
  width: 390px;
  margin: 40px 0 0;
}

.app-modules-intro li {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: #c8dfe8;
  float: left;
  margin: 3px 17px 12px 3px;
}

.app-modules-intro li a {
  display: block;
  width: 100%;
  height: 100px;
  text-align: center;
  color: #63adcd;
  line-height: 100px;
  font-size: 24px;
  position: relative;
}

.app-modules-intro li .tab-enable:hover .name,
.app-modules-intro li.active a .name {
  color: #ffffff;
}

.app-modules-intro .mask,
.app-modules-intro .name {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  left: 0;
  top: 0;
}

.app-modules-intro .mask {
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  opacity: 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.app-modules-intro a:hover .mask,
.active .app-module-news .mask,
.active .app-module-special .mask,
.active .app-module-vod .mask,
.active .app-module-shop .mask,
.active .app-module-weather .mask,
.active .app-module-more .mask {
  opacity: 1;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

.active .app-module-news .mask {
  background: #0a658c;
}

.active .app-module-special .mask,
.app-module-special:hover .mask {
  background: #b86a47
}

.active .app-module-vod .mask,
.app-module-vod:hover .mask {
  background: #02a3c5
}

.active .app-module-shop .mask,
.app-module-shop:hover .mask {
  background: #4fa876
}

.active .app-module-weather .mask,
.app-module-weather:hover .mask {
  background: #b27dba
}

.active .app-module-more .mask,
.app-module-more:hover .mask {}

.module .tab-panels {
  width: 346px;
  margin: 40px 0 0;
  position: relative;
  overflow: hidden;
  height: 138px;
}

.module .tab-panel {
  background: #f4f5f2 url(modulebox.png);
  color: #a8a4a4;
  font-size: 16px;
  padding: 30px 18px 0;
  line-height: 24px;
  width: 307px;
  height: 108px;
  position: absolute;
  top: 138px;
  left: 0;
}

.module .tab-panels .current {
  top: 0;
}


.module-screenshot {
  float: right;
  width: 194px;
  height: 343px;
  background: url(modulescreen-full1.png) no-repeat;
  margin-right: -30px;
  padding: 68px 184px 108px 187px;
}

.module-screenshot ul,
.module-screenshot li {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.module-screenshot li {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}

.app-video {
  margin: 35px 0 0;
}

.app-video a {
  width: 346px;
  height: 84px;
  margin: 0 auto;
  line-height: 84px;
  display: block;
  font-size: 28px;
  color: #FFF;
  text-align: center;
  border-radius: 5px;
  background: #0fbb99;
  position: relative;
}

.app-video .icon {
  width: 88px;
  height: 1px;
  background-position: 0 -130px;
  position: absolute;
  left: 30px;
  top: 1px;
}



.why {
  background: #fff;
  padding: 40px 0 104px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #f2f2f2;
}

.why h2 {
  color: #555;
  font-size: 40px;
}

.why h1 {
  color: #969696;
  font-size: 30px;
  line-height: 56px;
  padding: 40px 0;
  font-weight: 100;
}

.why-pic {
  position: absolute;
  background: transparent url(why.png);
}

.why-pic-1 {
  left: 3px;
  width: 371px;
  height: 301px;
  top: 236px;
}

.why-pic-2 {
  left: 400px;
  top: 315px;
  width: 226px;
  height: 85px;
  background-position: -371px 0;
}

.why-pic-3 {
  left: 637px;
  top: 150px;
  width: 420px;
  height: 520px;
  background-position: 0 -301px;
}

.why-pic-4 {
  background: url(whybase.png) no-repeat center;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 578px;
  left: 0;
}


.why-list {
  padding: 582px 0 0;
  width: 102%;
  overflow: hidden;
  position: relative;
}

/*.why-list-left{ float:left; width:223px; background:#2b90c7; padding:58px 53px 59px 57px; position:relative;}
.why-left-comma,.why-right-comma{ position:absolute; width:26px; height:24px;}
.why-left-comma{ left:16px; top:29px; background:url(leftcomma.png) no-repeat;}
.why-right-comma{right:15px; bottom:28px; background:url(rightcomma.png) no-repeat;}
.why-list-left p{ font-size:14px; color:#fff; line-height:30px;}
.why-list-right{ margin-left:-333px;}*/
.why-list li {
  float: left;
  margin-right: 1px;
  width: 337px;
  color: #f1f2f4;
  z-index: 1001;
  position: relative;
}

.why-list ul {
  overflow: hidden;
}

.why-list li a {
  color: #555;
  font-size: 20px;
  display: block;
  width: 100%;
  height: 163px;
  background: #eff3f6;
}

.why-list li a .icon {
  margin: 44px 0 0 55px;
  width: 86px;
  height: 86px;
  background: transparent url(whyicon.png) no-repeat;
  float: left;
  display: inline;
  -webkit-transform: scale(1) rotate(0);
  -webkit-transition: all .5s;
  -moz-transform: scale(1) rotate(0);
  -moz-transition: all .5s;
  -o-transform: scale(1) rotate(0);
  -o-transition: all .5s;
  transform: scale(1) rotate(0);
  transition: all .5s;
}

.why-list li a:hover .icon {
  -webkit-transform: scale(0) rotate(360deg);
  -moz-transform: scale(0) rotate(360deg);
  -o-transform: scale(0) rotate(360deg);
  transform: scale(0) rotate(360deg);
}

.why-list li a .clock-icon {
  background-position: -172px -86px;
}

.why-list li a .gear-icon {
  background-position: -172px 0;
}

.why-list li a .pencil-icon {
  background-position: -86px -86px;
}

.why-list li a .cloud-icon {
  background-position: 0 -86px;
}

.why-list li a .list-icon {
  background-position: -86px 0;
}

.why-list li a .title {
  margin: 72px 0 0 10px;
  float: left;
  -webkit-transform: translateX(0);
  -webkit-transition: all .5s;
  -moz-transform: translateX(0);
  -moz-transition: all .5s;
  -o-transform: translateX(0);
  -o-transition: all .5s;
  transform: translateX(0);
  transition: all .5s;
}

.why-list li a:hover .title {
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -o-transform: translateX(-30px);
  transform: translateX(-30px);
}

.why-list li .desc {
  font-size: 14px;
  position: absolute;
  left: 0;
  width: 223px;
  height: 210px;
  background: #2b90c7;
  padding: 58px 57px 59px 57px;
  z-index: 1009;
}

.why-list li.desc_t {
  margin-bottom: 1px;
}

.why-list li.desc_t .desc {
  bottom: 163px;
}

.why-list li.desc_b .desc {
  top: 163px;
}

.why-list li .desc p {
  font-size: 14px;
  color: #fff;
  line-height: 30px;
}

.why-left-comma,
.why-right-comma {
  position: absolute;
  width: 26px;
  height: 24px;
}

.why-left-comma {
  left: 16px;
  top: 29px;
  background: url(leftcomma.png) no-repeat;
}

.why-right-comma {
  right: 15px;
  bottom: 28px;
  background: url(rightcomma.png) no-repeat;
}

.footer {
  background: url(footernew.png) repeat-x;
  text-align: center;
}

.footer h1 {
  color: #6a9fcd;
  font-size: 16px;
  padding-top: 50px;
}

.footer ul {
  padding: 32px 0 20px 0;
  line-height: 26px;
}

.footer li {
  display: inline;
  font-size: 14px;
  color: #b9b9b9;
}

.footer li a {
  background: url(footericon.png) no-repeat;
  padding: 3px 0 3px 30px;
  margin: 0 14px;
}

.footer .reseller {
  margin-right: 75px;
}

.footer .reseller a {
  color: #b9b9b9;
}

.footer .follow-weixin a {
  background-position: 0 -26px;
}

.footer .follow-weibo a {
  background-position: 0 -52px;
}

.footer .follow-tel a {
  background-position: 0 -78px;
}

.footer .follow-qq a {
  background-position: 0 -104px;
}


.animated-bsb {
  -webkit-animation: bsb .5s;
}


@-webkit-keyframes bsb {
  0% {
    -webkit-transform: scale(1);
  }

  25% {
    -webkit-transform: scale(1.1);
  }

  500% {
    -webkit-transform: scale(1);
  }

  75% {
    -webkit-transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes bsb {
  0% {
    -moz-transform: scale(1);
  }

  25% {
    -moz-transform: scale(1.1);
  }

  500% {
    -moz-transform: scale(1);
  }

  75% {
    -moz-transform: scale(0.9);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@-o-keyframes bsb {
  0% {
    -o-transform: scale(1);
  }

  25% {
    -o-transform: scale(1.1);
  }

  500% {
    -o-transform: scale(1);
  }

  75% {
    -o-transform: scale(0.9);
  }

  100% {
    -o-transform: scale(1);
  }
}

@keyframes bsb {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  500% {
    transform: scale(1);
  }

  75% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.wx-qrcode {
  position: absolute;
  top: 20px;
  right: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}

.hoge-400 {
  position: absolute;
  top: 80px;
  right: 240px;
  font-size: 16px;
  color: #000;
  background: #b9b9b9;
  padding: 0 15px;
  border-radius: 5px;
  display: none;
}


.sso {
  background:url({$RESOURCE_URL}register/sso2.png) no-repeat center center #323a45;
}

.sso-header {
  padding: 200px 0 70px;
}

.sso-header .site-logonew {
  margin: 0 0 0 345px;
  display: inline;
}

.passport,
.sso-header {
  width: 966px;
  margin: 0 auto;
}

.passport {
  position: relative;
}

.passport .passport-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #020202;
  opacity: .31;
  filter: alpha(opacity=31);
}

.passport-box {
  margin: 0 auto;
  width: 306px;
  color: #aaafbb;
}

1.passport-box .label {
  color: #929292;
  font-size: 14px;
  text-align: right;
  line-height: 26px;
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 4;
  width: 72px;
}

.passport-box .field {
  width: 100%;
  overflow: hidden;
  padding: 0 0 5px;
  position: relative;
}

.passport-box .field-main {
  position: relative;
}

.passport-box .text {
  width: 224px;
  color: #333;
  border: none;
  background: #ededee;
  padding: 10px 6px 10px 72px;
  height: 18px;
  line-height: 18px;
  outline: none;
  font-size: 14px;
  margin: 0 0 0 1px;
}

.passport-box .yqm_link {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 10px 0;
  color: #61b8e8;
  cursor: pointer;
}

.passport-box .yzm-txt {
  width: 100px;
  color: #929292;
  border: none;
  background: #ededee;
  padding: 10px 6px 10px 15px;
  height: 18px;
  line-height: 18px;
  outline: none;
  font-size: 14px;
  margin: 0 0 30px 1px;
  display: none;
}

.passport-box .submit {
  width: 304px;
  height: 40px;
  background: #1a87c5;
  border: none;
  text-align: center;
  letter-spacing: 5px;
  line-height: 40px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  outline: none;
}

.passport-box .submit:active {
  outline: none;
}

.passport-box h1 {
  font-size: 36px;
  line-height: 52px;
  margin: 0 0 52px;
  text-align: center;
}

.passport-box .tip {
  color: #8A8A8A;
  font-size: 12px;
}

.passport-box a {
  color: #0082cb;
}

.passport-box .label span {
  color: #EEE;
}

.sso-meitu {
  float: left;
  padding: 65px 0 50px 110px;
}

.passport-wrap {
  position: relative;
}

.placeholder {
  opacity: 0.1;
  filter: alpha(opacity=100);
}

.passport-info {
  color: rgb(238, 26, 26);
  font-size: 14px;
  margin: 0 0 20px 0;
  display: none;
}

.passport-assest {
  font-size: 14px;
  color: #aaafbb
}

.passport-go-register {
  color: #1a87c5;
  text-align: center;
}

.passport-go-register a {
  color: #aaafbb;
}

.passport-with-partner {
  margin-top: 45px;
}

.passport-with-partner li {
  float: left;
}

.passport-with-partner li a {
  width: 18px;
  height: 17px;
  display: block;
  background: url(spirit.png) -66px 0;
  margin-right: 3px;
}

.passport-with-partner .passport-with-weibo {
  background-position: -85px 0
}

.passport-with-partner .passport-with-qq {
  background-position: -106px 0
}

.passport-with-partner .passport-with-weixin {
  background-position: -146px 0
}

.passport-with-partner .passport-with-renren {
  background-position: -125px 0
}

.passport-box .show-user {
  font-size: 18px;
  line-height: 32px;
  color: #aaafbb;
  padding: 10px 0 0 0;
  width: 260px;
}

.passport-box .show-user img {
  border-radius: 90px;
}

.passport-box .show-user .logout {
  color: #1a87c5;
  font-size: 12px;
}

.sso1 {
  background: #323a45;
}

.jqqd {
  text-align: center;
  color: #fff;
  font-size: 32px;
  background: url(line.png) no-repeat top center;
  padding-top: 40px;
  letter-spacing: 10px;
}


@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
  .icon {
    background: url(spirit2x.png) no-repeat;
  }

  .site-top-nav .ico-reseller {
    background-position: -137px -75px;
    background-size: 30px 32px;
  }

  .site-top-nav .ico-corp {
    background-position: -217px -75px;
    background-size: 32px 30px;
  }

  .site-top-nav .ico-login {
    background-position: -179px -77px;
    background-size: 26px 26px;
  }

  .site-top-nav .ico-register {
    background-position: -259px -77px;
    background-size: 28px 26px;
  }

  .site-top-nav a:hover .ico-reseller {
    background-position: -137px -41px;
    background-size: 30px 32px;
  }

  .site-top-nav a:hover .ico-corp {
    background-position: -217px -41px;
    background-size: 32px 30px;
  }

  .site-top-nav a:hover .ico-login {
    background-position: -179px -43px;
    background-size: 26px 26px;
  }

  .site-top-nav a:hover .ico-register {
    background-position: -259px -43px;
    background-size: 28px 26px;
  }

  .nav-item-product a .icon {
    background-position: -76px 0;
    background-size: 70px 82px;
  }

  .nav-item-service a .icon {
    background-position: -86px -86px;
    background-size: 86px 80px;
    position: absolute;
    left: 17px;
  }

  .nav-item-case a .icon {
    background-position: -96px -176px;
    background-size: 86px 68px;
    position: absolute;
    left: 20px;
  }

  .nav-item-manage a .icon {
    background-position: -100px -266px;
    background-size: 74px 78px;
  }

  .nav-item-product .current .icon,
  .nav-item-product a:hover .icon {
    background-position: 0 0;
  }

  .nav-item-service .current .icon,
  .nav-item-service a:hover .icon {
    background-position: 0 -86px;
    position: absolute;
    left: 17px;
  }

  .nav-item-case .current .icon,
  .nav-item-case a:hover .icon {
    background-position: -4px -176px;
    position: absolute;
    left: 18px;
  }

  .nav-item-manage .current .icon,
  .nav-item-manage a:hover .icon {
    background-position: -8px -266px;
    position: absolute;
    left: 18px;
  }

  .why-list li a .icon {
    background: url(whyicon2x.png) no-repeat;
    background-size: 172px 172px;
  }

  .why-list li a .clock-icon {
    background-position: -330px -167px;
  }

  .why-list li a .gear-icon {
    background-position: -330px 0;
  }

  .why-list li a .pencil-icon {
    background-position: -167px -165px;
  }

  .why-list li a .cloud-icon {
    background-position: -1px -164px;
  }

  .why-list li a .list-icon {
    background-position: -178px -11px;
  }

  .why-list li a .tick-icon {
    background-position: 0 0;
  }
}

.passport,
.sso-register-header {
  width: 966px;
  margin: 0 auto;
}

.sso-register {
  background:url({$RESOURCE_URL}register/sso2.png) no-repeat left top #323a45;
}

.sso-register-header {
  padding: 80px 0 32px
}

.sso-register-logo {
  float: left;
  margin: 36px 0 0;
  width: 282px;
  height: 147px;
}

.sso-register-logo a {
  display: block;
  width: 100%;
  height: 100%;
  background:url({$RESOURCE_URL}register/registerlogo.png) no-repeat;
}

.sso-register-header .sso-register-logo {
  margin: 0 0 0 330px;
  display: inline;
}

.passport-box p {
  font-size: 12px;
  color: #535962;
  padding: 5px 0 0 15px;
}

.passport-box .labelnew {
  width: 86px;
}

.passport-box .textnew {
  padding: 10px 6px 10px 86px;
}

#qrcode_login {
  position: relative;
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
}

#qrcode_login img {
  display: none;
}

.login-wrap {
  width: 900px;
}

.login-wrap .logo {
  width: 400px;
  height: 350px;
  background:url({$RESOURCE_URL}flatui/logo.png) no-repeat center 10px;
}

.login-wrap .logo-box {
  width: 500px;
  height: 100%;
  border-radius: 3px;
  background: #fff
}

.logo-box ul {
  background: #fbfcfe;
  border-bottom: 1px solid #d8dfe7;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.logo-box .login-nav {
  width: 100%;
  height: 70px;
  float: left;
  font-size: 18px;
  text-align: center;
  line-height: 70px;
  padding: 0;
  color: #62b8e9;
  cursor: pointer;
  background: #fbfcfe;
  border-bottom: 1px solid #d8dfe7;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.logo-box .info {
  width: 100%;
  padding: 100px 100px 50px 100px;
}

.logo-box .info .code-box {
  width: 150px;
  height: 150px;
  border: 1px solid #d8dfe7;
  border-radius: 3px;
  margin: 0 auto;
  padding: 5px;
}

.logo-box .info span.code-scan {
  display: block;
  color: #838f9f;
  font-size: 14px;
  margin: 10px 0px 10px 0px;
  text-align: center;
}

.logo-box .info span.no-account {
  display: block;
  color: #838f9f;
  font-size: 14px;
  margin-left: 10px;
  text-align: center;
}

.logo-box .info a {
  color: #62b8e9;
  text-decoration: underline;
  cursor: pointer;
}

.field {
  width: 100%;
  overflow: visible !important;
  padding: 0 !important;
  position: relative;
  margin-bottom: 20px;
}

.field .label {
  color: #929292;
  font-size: 14px;
  text-align: right;
  line-height: 20px;
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 4;
  font-weight: normal;
}

.field .field-main {
  position: relative;
}

.field input[type="text"],
.field input[type="password"] {
  width: 298px;
  height: 40px;
  color: #333;
  background: #fff;
  border: 1px solid #d8dfe7;
  border-radius: 3px;
  padding: 10px 6px 10px 72px;
  line-height: 18px;
  outline: none;
  font-size: 14px;
  margin: 0 0 0 1px;
  text-indent: 15px;
}

.field input[type="text"]:focus,
.field input[type="password"]:focus {
  border: 1px solid #62b8e9
}

.case-main {
  background: #f4f5f2;
  overflow: hidden;
}

.case-ul {
  width: 110%;
  padding: 27px 0 45px;
  overflow: hidden;
}

.case-ul li {
  float: left;
  width: 324px;
  margin: 13px 14px 0 0;
  display: inline;
  height: 404px;
  position: relative;
}

.case-ul li a {
  width: 324px;
  height: 373px;
  display: block;
  background: #fff;
  padding-top: 31px;
}

.case-ul li a:hover {
  background: #ebebeb;
}

.case-ul li img {
  width: 175px;
  height: 175px;
  padding-left: 74px;
}

.case-ul li h2 {
  font-size: 18px;
  color: #505050;
  text-align: center;
  padding-top: 20px;
  font-family: "Microsoft YaHei";
}

.case-ul li h6 {
  font-size: 16px;
  color: #33b1e1;
  text-align: center;
  padding-top: 15px;
}

.case-ul li p {
  font-size: 14px;
  color: #b7b7b7;
  padding: 18px 30px 0;
  line-height: 24px;
}

.case-more {
  background: url(case1.jpg) repeat-x;
  padding-bottom: 120px;
  position: relative;
  display: none;
}

.case-more a {
  font-size: 16px;
  color: #b7b7b7;
  position: absolute;
  left: 50%;
  background: #f4f5f2;
  width: 110px;
  margin-left: -55px;
  text-align: center;
  top: -10px;
}

.view-details {
  background: #c12c20;
  width: 88px;
  height: 33px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.case-details-left {
  float: left;
  width: 177px;
}

.case-details {
  background: #fff;
  margin: 40px auto;
  padding: 26px 48px 0 48px;
  width: 906px;
  overflow: hidden;
}

.enter-download {
  padding-bottom: 96px;
}

.enter-download p {
  padding-top: 16px;
  text-align: center;
}

.enter-download p a {
  color: #33b1e1;
  font-size: 14px;
}

.enter-download p a:hover {
  text-decoration: none;
}

.code-download p {
  text-align: center;
  padding-top: 10px;
}

.code-download p a {
  color: #505050;
  font-size: 14px;
}

.case-details-right {
  float: right;
  width: 700px;
}

.case-details-h2 {
  font-size: 24px;
  color: #505050;
  font-weight: 100;
  padding-top: 12px;
}

.case-brief {
  font-size: 16px;
  color: #505050;
  padding: 36px 0 10px;
}

.case-brief-content {
  font-size: 14px;
  color: #808080;
  line-height: 28px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px
}

.case-details-h2,
.case-brief,
.case-brief-content {
  font-family: "Microsoft YaHei";
}

.screenshot {
  padding: 29px 0 23px;
}

#slide {
  width: 690px;
  height: 388px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  padding-bottom: 43px;
}

#slide-content {
  height: 388px;
  position: relative;
  overflow: hidden;
}

#slide ul {
  width: 110%;
  height: 388px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

#slide ul li {
  width: 218px;
  height: 388px;
  float: left;
  margin-right: 18px;
  display: inline;
}

#slide a {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  margin-top: -22px;
  z-index: 9;
}

#slide .slide-prev {
  left: 0;
  background: url(detailsprev.png) no-repeat;
}

#slide .slide-next {
  right: 0;
  background: url(detailsnext.png) no-repeat;
}

.Validform_checktip {
  overflow: hidden;
  color: #999;
  font-size: 12px;
  padding-top: 10px;
  height: 20px;
  line-height: 20px;
}

.Validform_right {
  color: #71b83d;
  padding-left: 20px;
  background:url({$RESOURCE_URL}register/right.png) no-repeat left 12px;
}

.Validform_wrong {
  color: #61b8e8;
  padding-left: 20px;
  white-space: nowrap;
  background:url({$RESOURCE_URL}register/error.png) no-repeat left 12px;
}

.Validform_loading {
  padding-left: 20px;
  background:url({$RESOURCE_URL}register/onLoad.gif) no-repeat left center;
}

.Validform_error {
  background-color: #ffe7e7;
}

.field .msg {
  height: 40px;
  padding: 0px !important;
  position: absolute;
  left: 310px;
  top: 0px;
}

.Validform_wrong {
  display: block;
  color: #ef8075;
  font-size: 12px;
  border: 1px solid #ef8075;
  border-radius: 3px;
  padding: 10px;
  background: #fdf1f1;
  height: 40px !important;
  white-space: nowrap;
}

.Validform_right {
  display: block;
  color: #19bd9b;
  font-size: 12px;
  border: 1px solid #19bd9b;
  border-radius: 3px;
  padding: 10px;
  background: #e8f8f5;
  height: 40px !important;
  white-space: nowrap;
}

.Validform_loading {
  display: block;
  color: #d8dfe7;
  font-size: 12px;
  border: 1px solid #d8dfe7;
  border-radius: 3px;
  padding: 10px;
  background: #fbfcfe;
  height: 40px !important;
  white-space: nowrap;
}

.Validform_error {
  border: 1px solid #ef8075 !important;
}

#Validform_msg {
  color: #7d8289;
  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
  width: 280px;
  -webkit-box-shadow: 2px 2px 3px #aaa;
  -moz-box-shadow: 2px 2px 3px #aaa;
  background: #fff;
  position: absolute;
  top: 0px;
  right: 50px;
  z-index: 99999;
  display: none;
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  transition: all .1s;
}

#Validform_msg .iframe {
  position: absolute;
  left: 0px;
  top: -1px;
  z-index: -1;
}

#Validform_msg .Validform_title {
  line-height: 35px;
  height: 35px;
  text-align: left;
  padding: 0 8px;
  color: #fff;
  position: relative;
  background-color: #525a65;
}

#Validform_msg a.Validform_close:link,
#Validform_msg a.Validform_close:visited {
  line-height: 22px;
  position: absolute;
  right: 8px;
  top: 4px;
  color: #fff;
  text-decoration: none;
}

#Validform_msg a.Validform_close:hover {
  color: #fff;
}

#Validform_msg .Validform_info {
  padding: 10px;
  border: 1px solid #d8dfe7;
  border-top: none;
  text-align: left;
  font-size: 14px;
  color: #686868;
}

.field input[type="text"],
.field input[type="password"] {
  box-shadow: 0 0 0 20px #fff inset;
}

/* 手机号 */
.user-tel-wrap .handlers {
  margin-top: 10px;
}

.user-tel-wrap .verification-btn {
  display: block;
  margin-left: 10px;
  height: 40px;
  font-size: 12px;
}

.user-tel-wrap .verification-code {
  height: 40px;
  border-radius: 3px;
  text-indent: 20px;
  border: 1px solid #d8dfe7;
  box-shadow: none;
  color: #333;
  font-size: 14px;
  width: 130px;
}

.user-tel-wrap .verification-code:focus {
  outline: none;
}

/* 表单样式 */
.item-name {
  width: 60px !important;
  padding: 0;
  margin: 0 18px;
  -webkit-box-pack: justify;
  top: 9px !important;
  left: 0 !important;
}

.item-name span {
  display: block;
  color: #929292 !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
  .login-wrap .logo {
    background-image:url({$RESOURCE_URL}flatui/logo-2x.png);
    background-size: 360px 220px;
  }
}