* {padding: 0; margin: 0; font: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body {font-size: 14px; font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif, "Miscosoft YaiHei","Arial Unicode MS"; background: #fff; color: #333;}
ul, li {list-style: none;}
strong {font-weight: bold;}
img {border: none;}
a {color: inherit; text-decoration: none;}
a:hover {color: #008dcc}

.c {text-align: center; position: relative;}
.fl {float: left; position: relative;}
.fr {float: right; position: relative;}
.ib {display: inline-block; position: relative;}
.oh {overflow: hidden;}
.p {cursor: pointer;}
.ellipsis {overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap;}
.visible-mobile {display: none;}
.af:after {content: ""; display: block; clear: both;}
.on,
.text-info {color: #008dcc;}

.ifb-btn {line-height: 28px; color: #fff; background: #777; display: inline-block; padding: 0 12px; border-radius: 4px; text-align: center;}
.ifb-btn.ifb-btn-block {display: block;}
.ifb-btn:hover {color: #fff;}
.ifb-btn.ifb-btn-blue {background-color: #008dcc}

.icon-img {background: url(../img/icon.png) no-repeat; display: inline-block; position: relative;}
.icon-img.icon-img-arrow-right {width: 16px; height: 16px; background-position: -53px -7px;}
.icon-img.icon-func {width: 151px; height: 186px;}
.icon-img.icon-func-media {background-position: 0 -196px;}
.icon-img.icon-func-ios-fs {background-position: 0 -389px}
.icon-img.icon-func-disk {background-position: 0 -576px}
.icon-img.icon-func-usb-tunnle {background-position: 0 -1417px}
.icon-img.icon-app-store {width: 30px; height: 30px; background-position: 0 -31px}
.icon-img.icon-sand-box {width: 30px; height: 30px; background-position: -40px -28px}
.icon-img.icon-test-run {width: 82px; height: 24px; background-position: 0 -790px}
.icon-img.icon-appholly {width: 82px; height: 24px; background-position: -85px -790px}
.icon-img.icon-wechat {width: 25px; height: 25px; background-position: -44px -98px}
.icon-img.icon-facebook {width: 25px; height: 25px; background-position: 0 -167px}
.icon-img.icon-sina {width: 25px; height: 25px; background-position: 0 -133px}
.icon-img.icon-twitter {width: 25px; height: 25px; background-position: 0 -64px}
.icon-img.icon-windows {width: 42px; height: 42px; background-position: -47px -1184px}
.icon-img.icon-apple {width: 42px; height: 42px; background-position: -108px -1182px}

.row {margin: 0 -15px; padding: 0 15px; position: relative;}
.row:after {content: ""; display: block; clear: both;}

.lmr {}
.lmr:after {content: ""; display: block; clear: both;}
.lmr > * {position: relative;}
.lmr > .l {float: left;}
.lmr > .r {float: right;}
.lmr > .m {overflow: hidden;}

.div-2:after,
.div-3:after,
.div-4:after,
.div-5:after {content: ""; display: block; clear: both;}

.div-2 > *,
.div-3 > *,
.div-4 > *,
.div-5 > * {float: left; position: relative; padding: 0 15px; margin-bottom: 20px;}

.div-2 > * {width: 50%;}
.div-3 > * {width: 33.33%;}
.div-4 > * {width: 25%;}
.div-5 > * {width: 20%;}

.rich-content {font-size: 16px; padding: 20px; color: #666; line-height: 1.8em; background: #fff;}
.rich-content ul,
.rich-content p {margin-bottom: 1em;}
.rich-content p strong {color: #000;}

#app {}
#app .container {max-width: 1000px; margin: 0 auto; padding: 0 15px; padding-top: .1px;}
#app .page-wrap {background: #fff; padding: 30px 0;}
#app .page-wrap .page-main-title {margin: 20px 0;}
#app .page-wrap .page-main-title strong {font-size: 18px;}


#nav {width: 100%; height: 64px; white-space: nowrap; font-size: 14px; line-height: 30px; padding: 15px 0; position: relative; z-index: 10; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-bottom: 1px solid #e9e9e9; position: fixed; border-left-style: 0; top: 0; background: #fff;}
#nav:after {content: ""; display: block; clear: both;}
#nav .logo-box {margin-right: 15px;}
#nav .logo-box strong {font-size: 24px;}
#nav .logo-box .logo-img {margin-right: 5px;}
/* 导航 */
#nav .box-respond {}
#nav .box-respond .list-nav {}
#nav .box-respond .list-nav li {display: inline-block;}
#nav .box-respond .list-nav li a {display: block; padding: 0 12px;}
#nav .box-respond .list-nav li.on {color: #008dcc;}

#nav .box-respond .box-lang {}
#nav .box-respond .box-lang .panel-lang {background: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); position: absolute; right: 0; top: 110%; border-radius: 4px; display: none;}
#nav .box-respond .box-lang .panel-lang:before {content: ""; width: 0; height: 0; border: 6px solid transparent; border-bottom-color: #fff; position: absolute; left: 50%; top: -12px; margin-left: -3px;}
#nav .box-respond .box-lang .panel-lang ul {padding: 5px 0; line-height: 1.5em;}
#nav .box-respond .box-lang .panel-lang ul li {}
#nav .box-respond .box-lang .panel-lang ul li a {display: block; padding: 5px 10px;}

#app.ie8 .container {max-width: none; width: 1000px;}
#app.ie8 > * {min-width: 1000px;}
#app.ie8 #nav .box-respond .list-nav {position: absolute; left: 164px; top: 0; height: 32px;}
#app.ie8 #nav .box-respond .box-lang .panel-lang {border: 1px solid #e9e9e9;}
#app.ie8 #nav .box-respond .box-lang .panel-lang:before {display: none;}

/* 面包屑 */
#nav .box-bread {cursor: pointer;}
#nav .box-bread .rect {width: 38px; height: 30px; border-radius: 4px; border: 1px solid #ccc;}
#nav .box-bread .rect > span {width: 70%; height: 1px; background: #ccc; position: absolute; left: 50%; top: 50%;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
  -webkit-transform: translate(-50%, 0) rotate(0deg);
      -ms-transform: translate(-50%, 0) rotate(0deg);
          transform: translate(-50%, 0) rotate(0deg);
}
#nav .box-bread .rect > span._1 {-webkit-transform: translate(-50%, -7px) rotate(0deg);-ms-transform: translate(-50%, -7px) rotate(0deg);transform: translate(-50%, -7px) rotate(0deg);}
#nav .box-bread .rect > span._2 {}
#nav .box-bread .rect > span._3 {-webkit-transform: translate(-50%, 7px) rotate(0deg);-ms-transform: translate(-50%, 7px) rotate(0deg);transform: translate(-50%, 7px) rotate(0deg);}
#nav .box-bread.on .rect > span._1 {-webkit-transform: translate(-50%, 0) rotate(-45deg);-ms-transform: translate(-50%, 0) rotate(-45deg);transform: translate(-50%, 0) rotate(-45deg);}
#nav .box-bread.on .rect > span._2 {opacity: 0;}
#nav .box-bread.on .rect > span._3 {-webkit-transform: translate(-50%, 0) rotate(45deg);-ms-transform: translate(-50%, 0) rotate(45deg);transform: translate(-50%, 0) rotate(45deg);}

#main-banner {position: relative; height: 540px; background: url(../img/main-banner.jpg) no-repeat center; background-size: cover; text-align: center; color: #fff; overflow: hidden;}
#main-banner > .container {height: 100%; position: relative;}
#main-banner > .container:after {content: ""; display: inline-block; height: 100%; vertical-align: middle;}
#main-banner h2 {font-size: 58px;}
#main-banner .main-title {font-size: 22px; margin: 20px 0;}
#main-banner .sub-title {text-shadow: rgb(40, 40, 40) 1px 2px 3px; font-size: 19px;}
#main-banner .sub-title p {margin: 5px 0;}
#main-banner .main-btn {height: 60px; background-color: #008DCD; -webkit-box-shadow: 1px 1px 4px #111; box-shadow: 1px 1px 4px #111; border-radius: 8px; margin-top: 80px; display: inline-block; padding: 6px 30px; cursor: pointer;}
#main-banner .main-btn:hover {color: #fff;}
#main-banner .main-btn .icon-platform {width: 100px; height: 46px; display: inline-block; background: url("../img/icon.png") no-repeat 0px -1388px; margin-right: 10px;}
#main-banner .main-btn .download-main {font-size: 22px;}
#main-banner .main-btn .download-sub {}


@media (max-width: 800px) {
  #main-banner h2 {font-size: 40px;}
  #main-banner h2 .logo-img {width: 80px;}
  #main-banner .main-title {font-size: 16px;}
  #main-banner .sub-title {font-size: 14px;}
  #main-banner .main-btn .download-main {font-size: 14px;}
}

@media (max-width: 400px) {
  #main-banner h2 {font-size: 40px;}
  #main-banner .main-title {font-size: 14px;}
  #main-banner .sub-title {font-size: 12px;}
  #main-banner .main-btn .download-main {font-size: 12px;}
}

#main-notice {padding: 15px 0; border-bottom: 1px solid #e9e9e9;}
#main-notice * {vertical-align: baseline;}
#main-notice .fr {margin-left: 15px;}
#main-notice .ellipsis {}

#main-func {padding: 60px 0; text-align: center;}
#main-func .div-4 {}
#main-func .div-4 .section {margin-bottom: 30px;}
#main-func .div-4 .section .icon-img {}
#main-func .div-4 .section h3 {padding: 30px 0 14px; font-size: 16px;}
#main-func .div-4 .section p {color: #777; line-height: 1.7em; max-width: 500px; margin: 0 auto;}

#demo-page {background: rgb(250,250,250); text-align: center; padding: 45px 0;}
#demo-page .container {}
#demo-page .section {padding: 45px 0;}
#demo-page .section .text-box {max-width: 500px; margin: 0 auto;}
#demo-page .section .text-box h3 {font-size: 26px; line-height: 30px;}
#demo-page .section .text-box p {font-size: 16px; margin: 26px 0; color: #787878; line-height: 1.8em;}
#demo-page .section .img-box {}
#demo-page .section .img-box img {max-width: 100%;}

#footer {padding: 30px 0; background: #3a3a3e; color: #aeadad;}
#footer .line-divide {height: 1px; margin: 0 0 20px 0; background: rgb(128,128,128); opacity: .5; filter: alpha(opacity: 50); clear: both;}
#footer .row {padding: 0;}
#footer .media-us {}
#footer .media-us .icon-img {margin-right: 18px;}
#footer .media-us .icon-img:last-child {margin-right: 0;}
#footer .media-us .qr-logo {position: absolute; right: 0; bottom: 110%; display: none;}
#footer .media-us .icon-img:hover .qr-logo {display: block;}
#footer .links {margin-left: -5px;}
#footer .links a {display: inline-block; margin: 0 5px;}
#footer .sec-title {margin-bottom: 15px;}

@media (max-width: 900px) {
  .div-2 > *,
  .div-3 > *,
  .div-4 > *,
  .div-5 > * {width: 100%; float: none;}

  #nav .box-respond {width: 100%; position: absolute; left: 0; top: 49px; background: #fff; padding: .5em 15px; border-bottom: 1px solid #e9e9e9; line-height: 2.2em; display: none;}
  #nav .box-respond > * {float: none;}
  #nav .box-respond .list-nav {}
  #nav .box-respond .list-nav ul {border-bottom: 1px solid #e9e9e9; margin-bottom: .5em; padding-bottom: .5em;}
  #nav .box-respond .list-nav ul li {display: block;}
  #nav .box-respond .list-nav ul li a {padding: 0;}

  #nav .box-respond .box-lang {}
  #nav .box-respond .box-lang .panel-lang {position: static; -webkit-box-shadow: none; box-shadow: none; background: transparent; display: block;}
  #nav .box-respond .box-lang .panel-lang:before {}
  #nav .box-respond .box-lang .panel-lang ul {line-height: inherit; padding: 0;}
  #nav .box-respond .box-lang .panel-lang ul li {}
  #nav .box-respond .box-lang .panel-lang ul li a {padding: 0;}

  #footer .fr {float: none;}
  #footer .down-stair .fl {float: none;}
  #footer .media-us .qr-logo {left: 0; right: auto;}

  .visible-pc {display: none;}
  .visible-mobile {display: block;}
}


#page-about-us {background: #fafafa;}

#page-download {background: #f3f6f9;}
#page-download .container {background: transparent; padding: 40px 15px;}
#page-download .container .download-card-list {margin: 0 auto;}
#page-download .container .download-card-list .section {text-align: center;}
#page-download .container .download-card-list .section > .inner {display: inline-block; padding: 15px; border: 1px solid #e9e9e9; border-radius: 10px; margin-bottom: 30px; background: #fff; text-align: left;}
#page-download .container .download-card-list .section:last-child {margin-bottom: 0;}
#page-download .container .download-card-list .section .download-img {max-width: 100%; width: 364px;}
#page-download .container .platform {font-size: 30px; margin: 20px 0;}
#page-download .container .list-download {line-height: 32px;}
#page-download .container .list-download li {margin-bottom: 5px;}
@media (max-width: 450px) {
  #page-download .container .platform {font-size: 20px; margin: 20px 0;}
}
@media (max-width: 320px) {
  #page-download .container .list-download {font-size: 14px;}
}

.contactImg{padding: 76px 0 70px; border-top: 1px solid #e9e9e9; text-align: center; position: relative;}
.contactImg h5{font-size: 15px; color: #262626;}
.contactImg p > a{margin-right: 15px;}
.contactImg .account:hover{cursor: pointer;}
.contribute_weima{display: inline-block; width: 130px; height: 130px; background: url(../img/icon.png) no-repeat 0 -1245px;}
.contribute_weima:hover{cursor: pointer;}



.icon-old-ifb{display: inline-block; width: 30px; height: 30px; background: url(../img/icon.png) no-repeat;}
._support{width:102px; height: 102px; background-position: 0 -969px;}
._weixin{background-position: 0 -98px; position: relative;}
._weixin img {position: absolute; left: 0; top: 100%; border: 1px solid #e9e9e9; display: none;}
._weixin:hover img {display: block;}
._facebook{background-position: 0 -167px;}
._weibo{background-position: 0 -133px;}
._twitter{background-position: 0 -64px;}
._weixin:hover, .weixinHover, .weixinShow{cursor: pointer; background-position: -44px -98px;}
._facebook:hover, .facebookHover{background-position: -45px -167px;}
._weibo:hover, .weiboHover{background-position: -44px -133px;}
._twitter:hover, .twitterHover{background-position: -44px -64px;}

.donatePay_con .input{width: 110px; height: 22px; padding: 0 3px; border: 1px solid #b3b3b3;}
.donatePay_con span{line-height: 23px; display: inline-block;}
.donatePay_con p:first-child{margin-bottom: 24px;}
.ml_6{margin-left: 6px;}
.paypal_icon{display: inline-block; width: 90px; height: 22px; margin-right: 5px; position: relative; top: 6px; background: url(../img/icon.png) no-repeat -8px -1615px;}
.donatePay_con .submit{
  width: 176px; 
  height: 35px; 
  line-height: 33px; 
  text-align: center; 
  cursor: pointer; 
  color: #fff;
  font-size: 15px;
  font-weight: bold; 
  border-radius: 19px; 
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
  -o-border-radius: 19px;
  -ms-border-radius: 19px;
  -webkit-appearance: none;
  border: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#83D1F0), color-stop(50%, #58C9FA), to(#1AA9E9));
  background-image: -o-linear-gradient(top, #83D1F0 0%, #58C9FA 50%, #1AA9E9 100%);
  background-image: linear-gradient(to bottom, #83D1F0 0%, #58C9FA 50%, #1AA9E9 100%);
  filter:progid: DXImageTransform.Microsoft.Gradient(startColor="#83D1F0", middleColor="58C9FA", endColor="#1AA9E9", gradientType="0");
}