@font-face {
  font-family: 'YOUSHEBIAOTIHEI';
  src: url("./YOUSHEBIAOTIHEI.TTF") format("truetype");
}

#headerFrame {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
}

.banner-box {
  width: 100%;
  height: 658px;
  background: url("./bannerBg.png") no-repeat;
  background-size: cover;
  margin-top: 80px;
}

.banner-box .banner-main {
  height: 534px;
  justify-content: space-between;
}

.banner-box .banner-main .main-left {
  width: 557px;
  height: 534px;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px 0;
}

.banner-box .banner-main .main-left p:nth-of-type(1) {
  width: 416px;
  font-size: 24px;
  font-weight: bold;
  color: #0071E8;
}

.banner-box .banner-main .main-left p:nth-of-type(2) {
  width: 530px;
  font-size: 72px;
  font-family: 'YouSheBiaoTiHei';
  font-weight: 400;
  color: #0071E8;
}

.banner-box .banner-main .main-left p:nth-of-type(3) {
  width: 530px;
  height: 67px;
  background: url("./bannerSmall.png") no-repeat;
  font-size: 24px;
  font-weight: bold;
  color: #FFF;
}

.banner-box .banner-main .main-left div {
  font-size: 24px;
  font-weight: bold;
  color: #0071E8;
}

.banner-box .banner-main .main-left div span {
  width: 86px;
  height: 36px;
  font-size: 15px;
  font-weight: bold;
  color: #0071E8;
  background-color: #FFF;
  border-radius: 5px;
  border: 1px solid #0071E8;
  margin: 0 10px;
  cursor: default;
}

.banner-box .banner-main .main-left div span i {
  display: inline-block;
  background: url("./winLogo.png") no-repeat;
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.banner-box .banner-main .main-left a {
  display: inline-block;
  width: 240px;
  height: 90px;
  border-radius: 100px;
  background-image: url("./downloadNow.png");
  background-repeat: no-repeat;
}

.banner-box .banner-main .main-left a:hover {
  background-image: url("./downloadHover.png");
}

.banner-box .banner-main .main-left a:active {
  background-image: url("./downloadActive.png");
}

.banner-box .banner-main .main-right img {
  width: 608px;
  height: 534px;
}

.desc-box {
  width: 100%;
}

.desc-box .desc-main {
  margin: 50px auto;
  flex-direction: column;
  align-items: center;
}

.desc-box .desc-main .main-top {
  margin-bottom: 50px;
  width: 580px;
  display: flex;
}
.desc-box .desc-main .main-top div:nth-child(1) {
  height: 83px;
  float: left;
  display: inline-block;
}
.desc-box .desc-main .main-top div:nth-child(1) img {
  height: 100%;
}
.desc-box .desc-main .main-top div:nth-child(2) {
  float: right;
  display: inline-block;
}

.desc-box .desc-main .main-top p {
  font-size: 20px;
  font-weight: 400;
  color: #0071E8;
}

.desc-box .desc-main .main-top h2 {
  font-size: 42px;
  font-weight: bold;
  color: #0071E8;
}

.desc-box .desc-main .main-bottom {
  width: 100%;
  justify-content: space-between;
}

.desc-box .desc-main .main-bottom li {
  width: 270px;
  height: 180px;
  border-radius: 10px;
  color: #fff;
  flex-direction: column;
}

.desc-box .desc-main .main-bottom li h2 {
  font-size: 28px;
  font-weight: bold;
  color: #FFF;
}

.desc-box .desc-main .main-bottom li p {
  font-size: 15px;
  font-weight: 400;
  color: #FFF;
  margin: 8px 0 18px 0;
  transform: scale(0);
  transition: transform .2s ease-in-out;
}

.desc-box .desc-main .main-bottom li div {
  width: 220px;
  justify-content: space-between;
}

.desc-box .desc-main .main-bottom li div a {
  display: inline-block;
  width: 100px;
  height: 42px;
  font-size: 15px;
  color: #FFF;
  background: linear-gradient(135deg, #0071E8 0%, #449FFF 100%);
  border-radius: 5px;
}

.desc-box .desc-main .main-bottom li div a:hover {
  background: linear-gradient(135deg, #1687FD 0%, #58AAFF 100%);
}

.desc-box .desc-main .main-bottom li div a:active {
  background: linear-gradient(135deg, #0A70DC 0%, #2E93FE 100%);
}

.desc-box .desc-main .main-bottom li:nth-of-type(1) {
  background: url("./descImg1.png") no-repeat;
}

.desc-box .desc-main .main-bottom li:nth-of-type(2) {
  background: url("./descImg2.png") no-repeat;
}

.desc-box .desc-main .main-bottom li:nth-of-type(3) {
  background: url("./descImg4.png") no-repeat;
}

.desc-box .desc-main .main-bottom li:nth-of-type(4) {
  background: url("./descImg3.png") no-repeat;
}

.function-box {
  width: 100%;
}

.function-box .function-main {
  margin: 50px auto;
  flex-direction: column;
  align-items: center;
}

.function-box .function-main .main-top {
  margin-bottom: 50px;
  width: 168px;
}

.function-box .function-main .main-top p {
  font-size: 20px;
  font-weight: 400;
  color: #0071E8;
}

.function-box .function-main .main-top h2 {
  font-size: 42px;
  font-weight: bold;
  color: #0071E8;
}

.function-box .function-main .main-bottom {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.function-box .function-main .main-bottom li {
  width: 260px;
  height: 365px;
  flex-direction: column;
  margin: 0 40px 50px;
}

.function-box .function-main .main-bottom li img {
  width: 260px;
  height: 260px;
}

.function-box .function-main .main-bottom li div {
  text-align: center;
}

.function-box .function-main .main-bottom li div h3 {
  margin: 12px 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.function-box .function-main .main-bottom li div p {
  font-size: 15px;
  color: #666;
  line-height: 27px;
}

.footer-box {
  width: 100%;
  margin-bottom: 50px;
}

.footer-box .footer-main {
  height: 130px;
  flex-direction: column;
  justify-content: space-between;
}

.footer-box .footer-main a {
  display: inline-block;
  width: 240px;
  height: 90px;
  background-image: url("./useNow.png");
  background-repeat: no-repeat;
}

.footer-box .footer-main a:hover {
  background-image: url("./useHover.png");
}

.footer-box .footer-main a:active {
  background-image: url("./useActive.png");
}

.footer-box .footer-main p {
  font-size: 15px;
  font-weight: bold;
  color: #999;
}

.aboutus-box {
  width: 100%;
  background-color: #383838;
}

.aboutus-box .aboutus-main {
  height: 150px;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  font-size: 15px;
}

.aboutus-box .aboutus-main > a {
  text-decoration: underline;
}

.aboutus-box .aboutus-main p,
.aboutus-box .aboutus-main div {
  margin: 10px 0;
}