.main {
  width: 100%;
  height: 100%;
}

.wrap {
  width: 1200px;
  margin: 0 auto;
}

.pubtit {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  padding-bottom: 20px;
}

.header {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background: url('../imgs/header-bac.png') no-repeat center;
  text-align: center;
}

.header p {
  font-size: 28px;
}

.banner {
  width: 100%;
  height: 65px;
  line-height: 65px;
  margin-top: -3px;
}

.banner ul {
  display: flex;
  justify-content: space-between;
  padding: 0 150px;
}

.banner li {
  width: 100px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}

.nav {
  position: relative;
  width: 100%;
  height: 335px;
  background: url('../imgs/nav-bac.png') no-repeat center;
  padding-top: 30px;
}

.nav .box {
  position: absolute;
  width: 1200px;
  height: 335px;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  padding: 32px 25px;
}

.nav .box .lef {
  width: 500px;
  height: 268px;
  background: url('../imgs/nav-lef-bac.png') no-repeat center/100%;
}

.nav .box .lef .tit {
  padding: 37px 0 37px 27px;
}

.nav .box .lef .tit p {
  line-height: 46px;
  font-size: 36px;
  font-weight: bold;
  color: #333333;
}

.nav .box .lef ul {
  display: flex;
  justify-content: space-around;
}

.nav .box .lef li,
.area6 .lef .span2 {
  width: 200px;
  height: 50px;
  line-height: 50px;
  background-image: linear-gradient(to right, #0868ed, #00a1ff);
  border-radius: 5px;
  font-size: 21px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.nav .box .lef li:nth-child(2) {
  background-image: none;
  border: 1px solid #0868ed;
  color: #0868ed;
}

.nav .box .lef .fir:hover,
.area2 .btn:hover,
.area6 .lef .span2:hover {
  background-image: linear-gradient(to right, #3a86f1, #33b3fe);
  transition: 0.2s ease all;
}

.nav .box .lef .sec:hover {
  background-color: #fff;
  transition: 0.2s ease all;
}

.nav .box .rig,
.area1 .rig {
  margin-left: 30px;
}

.nav .box .rig li,
.area1 .rig li {
  font-size: 16px;
  color: #333333;
  margin-top: 18px;
  cursor: pointer;
}

.nav .box .rig li:first-child,
.area1 .rig li:first-child {
  font-size: 24px;
  margin-top: -3px;
}

.nav .box .rig .pub:hover {
  color: #007eff;
  transition: 0.2s ease all;
}

.nav .box .rig i,
.area1 .rig i {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #333333;
  border-radius: 50%;
  vertical-align: middle;
}

.nav .box .rig span {
  font-weight: bold;
}

.area1 {
  width: 100%;
  height: 340px;
  background: url('../imgs/area1-bac.png') no-repeat center;
  padding-top: 68px;
}

.area1 .line {
  float: left;
}

.area1 .lef {
  width: 460px;
  text-align: center;
  margin: 0 35px 0 30px;
}

.area1 .lef .tit {
  font-size: 24px;
  color: #fff;
}

.area1 .lef ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.area1 .lef li {
  width: 140px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border: 1px solid #fff;
  color: #fff;
  font-size: 18px;
  border-radius: 5px;
  margin-top: 20px;
  cursor: pointer;
}

.area1 .lef li:hover {
  background-color: #5598ff;
  transition: 0.2s ease all;
}

.area1 .rig li {
  color: #fff;
}

.area1 .rig li i {
  background-color: #fff;
}

.area1 .rig .pub:hover {
  text-decoration: underline;
}

.area2,
.area3,
.area4,
.area5,
.area6,
.area7 {
  width: 100%;
  background-color: #f3f5f9;
  padding: 30px 0 40px;
}

.area2 ul,
.area3 ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.area2 li {
  position: relative;
  width: 280px;
  height: 334px;
  background: url('../imgs/area2-bac1.png') no-repeat center/100%;
  text-align: center;
  padding: 30px 25px 0;
}

.area2 li:nth-child(2) {
  background: url('../imgs/area2-bac2.png') no-repeat center/100%;
}

.area2 li:nth-child(3) {
  background: url('../imgs/area2-bac3.png') no-repeat center/100%;
}

.area2 li:nth-child(4) {
  background: url('../imgs/area2-bac4.png') no-repeat center/100%;
}

.area2 li .fir {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
  cursor: pointer;
}

.area2 li .sec {
  line-height: 33px;
  font-size: 16px;
  color: #8a8a8a;
  text-align: left;
  cursor: pointer;
}

.area2 li .btn {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translate(-50%);
  width: 150px;
  height: 45px;
  line-height: 45px;
  background-image: linear-gradient(to right, #0868ed, #00a1ff);
  border-radius: 5px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  margin: 0 auto;
}

.area3 {
  background-color: #fff;
}

.area3 ul {
  padding: 0 50px;
}

.area3 .ul2 {
  margin-top: 25px;
}

.area3 li {
  text-align: center;
}

.area3 li .circle {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: #fc8689;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

.area3 li .color2 {
  background-color: #fc8689;
}


.area3 li .color2 {
  background-color: #fb8860;
}

.area3 li .color3 {
  background-color: #83b2f5;
}

.area3 li .color4 {
  background-color: #f9cc7c;
}

.area3 li .color5 {
  background-color: #bf71e5;
}

.area3 li .circle img {
  width: 40px;
}

.area3 li .text {
  font-size: 20px;
  color: #333;
  margin-top: 15px;
  cursor: pointer;
}

.area4 {
  width: 100%;
  height: 620px;
  background: url('../imgs/area4-bac.png') no-repeat center;
}

.area4 table,
.area5 table {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-spacing: 0px;
  overflow: hidden;
  border: 1px;
  cursor: pointer;
}

.area4 tr,
.area5 tr {
  height: 50px;
  border: 1px solid #dcdcdc;
  text-align: center;
  font-size: 16px;
}

.area5 {
  background-color: #fff;
}

.area5 ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.area5 li {
  width: 109px;
  height: 60px;
  line-height: 60px;
  background-color: #5597ff;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-left: 1px solid #fff;
  cursor: pointer;
}

.area5 li:hover {
  background-color: #6ba5fd;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: 0.2s ease all;
}

.area5 .bdb {
  border-bottom: 1px solid #fff;
}

.area5 table {
  background-color: #eef5ff;
}

.area5 tr {
  color: #333333;
  border: 1px solid #fff;
}

.area5 .color {
  background-color: #bfd9ff;
}

.area5 .trs td:nth-child(2):hover,
.area5 .trs td:nth-child(3):hover,
.area5 .trs td:nth-child(4):hover,
.area5 .trs td:nth-child(5):hover,
.area5 .trs td:nth-child(6):hover,
.area5 .trs td:nth-child(7):hover {
  color: #007eff;
  transition: 0.2s ease all;
}

.area6,
.area7 {
  background-color: #5597ff;
  padding: 40px 0;
}

.area6 .lef {
  width: 514px;
  height: 481px;
  background-color: #fff;
  padding: 28px;
}

.area6 .lef .text {
  font-size: 24px;
  color: #333333;
  margin-bottom: 10px;
}

.area6 .lef li {
  margin-top: 21px;
  cursor: pointer;
}

.area6 .lef span,
.area7 .rig li span,
.area7 .midd li span {
  display: inline-block;
  vertical-align: middle;
}

.area6 .lef .span1,
.area7 .rig li span,
.area7 .midd li span {
  font-size: 16px;
  color: #333;
  margin-left: 5px;
}

.area6 .lef .span1:hover {
  color: #007eff;
  transition: 0.2s ease all;
}

.area6 .lef .span2 {
  float: right;
  width: 110px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  color: #fff;
}

.area6 .rig li {
  width: 666px;
  height: 110px;
  line-height: 110px;
  background: url('../imgs/area5-bac.png') no-repeat center/100% 100%;
  font-size: 24px;
  color: #fff;
  text-align: center;
  border: 2px solid #4b8dfb;
  border-radius: 10px;
  margin: 14px 0 0 20px;
  cursor: pointer;
}

.area6 .rig li:hover {
  border: 2px solid #fff;
  transition: 0.2s ease all;
}

.area6 .rig li:first-child {
  margin-top: -2px;
}

.area7 {
  background-color: #fff;
}

.area7 .lef {
  margin-right: 30px;
}

.area7 .lef li {
  width: 264px;
  height: 155px;
  background: url('../imgs/area6-text-bac1.png') no-repeat center/100% 100%;
  text-align: center;
  padding-top: 55px;
}

.area7 .lef li p {
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.area7 .lef li p:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.area7 .lef li .p2 {
  font-size: 20px;
  margin-top: 12px;
}

.area7 .lef li:last-child {
  margin-top: 15px;
}

.area7 .rig,
.area7 .midd {
  width: 340px;
}

.area7 .rig li,
.area7 .midd li {
  width: 430px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 24px;
  margin-top: 24px;
}

.area7 .rig li:first-child,
.area7 .midd li:first-child {
  margin-top: 7px;
}

.area7 .rig li:last-child,
.area7 .midd li:last-child {
  border-bottom: none;
}

.area7 .rig .span1,
.area7 .midd .span1 {
  cursor: pointer;
}

.area7 .rig .span1:hover,
.area7 .midd .span1:hover {
  color: #007eff;
  transition: 0.2 ease all;
}

.area7 .rig .span2,
.area7 .midd .span2 {
  width: 110px;
  height: 35px;
  line-height: 35px;
  background-image: linear-gradient(to right, #0868ed, #00a1ff);
  font-size: 16px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  margin-top: -7px;
}

.area7 .rig .span2:hover,
.area7 .midd .span2:hover {
  background-image: linear-gradient(to right, #3988f1, #34b2fe);
}

.area7 .midd {
  margin-left: 90px;
}

.area7 .midd li {
  width: 476px;
  padding-left: 50px;
}

.footer {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background-color: #eeeeee;
  text-align: center;
}

.footer p {
  font-size: 16px;
  color: #b0b0b0;
}

/* 弹窗 */
.mask {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  background-color: #fff;
  border: 5px solid #007eff;
  transform: translate(-50%, -50%);
  text-align: center;
  padding-bottom: 60px;
}

.modal .top {
  height: 50px;
}

.modal .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 33px;
  height: 33px;
  line-height: 33px;
  border-radius: 5px;
  background-color: #e5e5e5;
  text-align: center;
  cursor: pointer;
  margin: 10px 10px 0 0;
}

.modal .close:hover {
  background-color: #6187ff;
}

.modal .close img {
  width: 26px;
}

.modal .midd .tit {
  font-size: 30px;
  color: #333333;
  margin: 10px 0 12px;
}

.modal .midd .text {
  width: 730px;
  height: 55px;
  line-height: 45px;
  background-color: #6187ff;
  margin: 0 auto 20px;
  padding: 5px;
}

.modal .midd .text p {
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.modal .bot .lef {
  margin: 20px 0 0 50px;
}

.modal .bot .lef p {
  line-height: 45px;
  font-size: 18px;
  color: #333333;
  text-align: left;
  cursor: pointer;
}

.modal .bot .lef .ps:hover {
  color: #00a1ff;
}

.modal .bot .lef .btn {
  font-size: 20px;
  color: #00a1ff;
  margin: 15px 0 0 28px;
}

.modal .bot .line {
  height: 315px;
  margin: 0 20px;
}

.modal .bot .rig {
  width: 380px;
}

.modal .bot .rig .text p {
  font-size: 18px;
  color: #333333;
}

.modal .bot .rig .text .p1 {
  font-weight: bold;
  margin-bottom: 10px;
}

.modal .bot .rig .text .p2 {
  line-height: 33px;
  text-align: left;
  margin-bottom: 15px;
  cursor: pointer;
}

.modal .bot .rig .text .p2 span {
  color: #007eff;
}

.modal .bot .rig ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.modal .bot .rig li {
  width: 182px;
  height: 80px;
  background: url('../imgs/modal-bac1.png') no-repeat center/100%;
  text-align: left;
  padding: 12px 0 0 12px;
}

.modal li p {
  color: #fff;
  cursor: pointer;
}

.modal li .fir {
  font-size: 20px;
}

.modal li .sec {
  font-size: 21px;
}

.modal .bot .rig li:nth-child(2) {
  background: url('../imgs/modal-bac2.png') no-repeat center/100%;
}

.modal .bot .rig li:nth-child(3) {
  background: url('../imgs/modal-bac3.png') no-repeat center/100%;
}

.modal .bot .rig li:nth-child(4) {
  background: url('../imgs/modal-bac4.png') no-repeat center/100%;
}

.modal .bot .rig li:nth-child(3),
.modal .bot .rig li:nth-child(4) {
  margin-top: 6px;
}


.breath_light {
  opacity: 0.1;
  /* 不透明度 */
  overflow: hidden;
  /* 溢出隐藏 */

  /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
  animation-name: breath;
  /* 动画名称 */
  animation-duration: 700ms;
  /* 动画时长3秒 */
  animation-timing-function: ease-in-out;
  /* 动画速度曲线：以低速开始和结束 */
  animation-iteration-count: infinite;
  /* 播放次数：无限 */

  /* Safari and Chrome */
  -webkit-animation-name: breath;
  /* 动画名称 */
  -webkit-animation-duration: 1000ms;
  /* 动画时长3秒 */
  -webkit-animation-timing-function: ease-in-out;
  /* 动画速度曲线：以低速开始和结束 */
  -webkit-animation-iteration-count: infinite;
  /* 播放次数：无限 */
}

@keyframes breath {
  from {
    opacity: 0.1;
  }

  /* 动画开始时的不透明度 */
  50% {
    opacity: 1;
  }

  /* 动画50% 时的不透明度 */
  to {
    opacity: 0.1;
  }

  /* 动画结束时的不透明度 */
}

@-webkit-keyframes breath {
  from {
    opacity: 0.1;
  }

  /* 动画开始时的不透明度 */
  50% {
    opacity: 1;
  }

  /* 动画50% 时的不透明度 */
  to {
    opacity: 0.1;
  }

  /* 动画结束时的不透明度 */
}