@charset "utf-8";
/* 全局样式 */
body { text-align: center; font-family:arial, "微软雅黑"; margin:0; padding:0; background:#fff; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4 {margin: 0; padding: 0; border: 0; }
ul,li{list-style-type:none;}
img{vertical-align:top;}
a{ cursor:pointer;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active{ text-decoration:none; background:none;}
p{ text-indent:0;}

/* top */
.top{ width:100%; height:100px; background:#62b7ea;  margin:0 auto;}
.top .logo{ width: 1200px; margin: 0 auto;}
.top p{ font-size: 20px; color: #FFFFFF; line-height:100px; text-align: left; padding-left: 95px; position: relative;}
.top i{ width:32px; height:32px; background: url(../images/logo.png) no-repeat; position: absolute; top: 32px; left: 50px; }


/* main */
.main{ width:1200px; margin:0 auto}
.main .nav{ width:100%; margin:50px auto 20px;}
.main .nav .nav_box{ width:295px; height:220px; text-align:center; display:inline-block; *display:inline; *zoom:1; padding:1px}
.main .nav .nav_box:hover{ border:1px solid #cee8f7; padding:0}
.main .nav .nav_box .icon{ width:110px; height:110px; margin:40px auto 15px}
.main .nav .nav_box p{ width:100%; font-size:16px; color:#666; line-height:30px; margin:0 auto}
.main .nav .nav_box .icon_1{ background:url(../images/icon_1.png) 0 0 no-repeat;}
.main .nav .nav_box .icon_2{ background:url(../images/icon_2.png) 0 0 no-repeat;}
.main .nav .nav_box .icon_3{ background:url(../images/icon_3.png) 0 0 no-repeat;}
.main .nav .nav_box .icon_4{ background:url(../images/icon_4.png) 0 0 no-repeat;}

.main .download{ width:100%; margin:0 auto}
.main .download p{ font-size:14px; line-height:50px; text-align:left; padding-left:35px; position:relative; margin-left:50px; }
.main .download i{ width:26px; height:26px; background:url(../images/down.png)0 0 no-repeat; position:absolute; top:10px; left:0}
.main .download a{ color:#666; text-decoration:underline}

.flex-wrapper {
  display: flex;
  align-items: center;
}
.jcsb {
  justify-content: space-between;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 700px;
  background: #f0f0f0;
}
/* main */
.main-wrapper {
  width:100%;
  background:#5d68d1;
  padding-bottom: 20px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 480px;
}
.main-content {
  width: 900px;
  margin: 0 auto;
  text-align: left;
  font-size: 16px;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 20px;
}
.main-title {
  font-size: 14px;
  margin-bottom: 20px;
}
.main-title img {
  width: 35px;
  margin-right: 10px;
}
.main-content .left h4 {
  font-size: 24px;
  margin-bottom: 10px;
}
.main-content .left .left-text {
  font-size: 14px;
  margin-bottom: 20px;
}
.main-content .left .nav_box {
  /* display: flex; */
  align-items: flex-end;
  margin-bottom: 20px;
  font-size: 14px;
  color: #fff;
  width: 249px;
}
.main-content .left .nav_box p{
  margin-top: 6px;
}
.main-content .left .nav_box .icon {
  width: 110px;
  height: 110px;
  margin-right: 20px;
}
.main-content .left .download {
  font-size: 14px;
}
.main-content .left .download i {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/icon_dow.png) no-repeat center center;
  margin-right: 5px;
  background-color: #fff;
  border-radius: 50%;
}
.main-content .left .download a {
  color: #fff;
}
.main-content .bg-img {
  width: 360px;
}
.footer .nav-wrapper {
  background: #fff;
  justify-content: space-around;
  border-radius: 10px;
  color: #000;
  width: 1200px;
  margin: -40px auto 0;
}
.footer .nav-wrapper a {
  color: #000;
}
.footer .nav-wrapper .icon {
  width:120px;
  height:110px;
  margin-top: 20px;
  /* margin:40px auto 15px; */
}
.footer .nav-wrapper .icon_5 {
  background:url(../images/icon_5.png) 0 0 no-repeat;
}
.footer .nav-wrapper .icon_6 {
  background:url(../images/icon_6.png) 0 0 no-repeat;
}
.footer .nav-wrapper .icon_7 {
  background:url(../images/icon_7.png) 0 0 no-repeat;
}
/* footer */
.footer{ width:100%; background: #f0f0f0; padding-top: 10px;}
.footer p{ font-size:12px; color:#666; text-align:center; line-height:70px;}