body {
  padding: 0;
  margin: 0;
  background: #FFF;
  min-width: 1680px;
}
ol,
ul {
  list-style: none;
}
.main-active {
  border-radius: 15px;
  height: 20px;
  padding: 7px;
  background-color: yellow;
  line-height: 100px;
}
.index-header {
  width: 100%;
  height: 100px;
  background-color: #333333;
  display: flex;
}
.index-header.new-style {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(51, 51, 51, 0.5);
}
.index-header .index-logo {
  width: 20%;
  line-height: 100px;
  margin-left: 20%;
  flex-direction: column;
}
.index-header .index-logo .index-header-logo {
  width: 42px;
  height: 45px;
  line-height: 100px;
  display: inline-block;
}
.index-header .index-logo .index-header-logo img {
  width: 100%;
  height: 100%;
}
.index-header .index-logo .index-logo-size {
  font-size: 14px;
  color: #fff;
}
.index-header .index-header-nav {
  width: 55% ;
  height: 100px;
  margin-right: 5%;
  padding-left: 10%;
  flex-direction: column;
}
.index-header .index-header-nav .index-header-text {
  width: 100%;
  height: 100%;
}
.index-header .index-header-nav .index-header-text li {
  height: 100%;
  line-height: 100px;
  float: left;
}
.index-header .index-header-nav .index-header-text li a {
  color: #fff;
}
.index-banner {
  width: 100%;
  position: relative;
}
.index-banner img {
  width: 100%;
}
.index-banner .mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.index-banner .index-banner-in2,
.index-banner .index-banner-in1,
.index-banner .index-banner-in {
      position: absolute;
      width: 48.25%;
}
.index-banner .index-banner-in2 img,
.index-banner .index-banner-in1 img,
.index-banner .index-banner-in img {
  width: 100%;
}
.index-banner .index-banner-in2 .banner-text,
.index-banner .index-banner-in1 .banner-text,
.index-banner .index-banner-in .banner-text {
  width: 100%;
  margin: 5% 0 0 0;
  text-align: center;
}
.index-banner .index-banner-in2 .banner-number,
.index-banner .index-banner-in1 .banner-number,
.index-banner .index-banner-in .banner-number {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #666666;
}
.index-banner .index-banner-in {
  top: 41.5%;
  left: 11.8%;
}
.index-banner .index-banner-in1 {
  top: 63.5%;
  left: 46.7%;
}
.index-banner .index-banner-in2 {
  top: 63.5%;
  left: 60.8%;
}
.index-main {
  width: 100%;
  padding: 0 10%;
  overflow: hidden;
}
.index-main .main-top {
  width: 80%;
  height: 100px;
  margin: 100px auto 0;
}
.index-main .main-top .top-right {
  width: 70%;
  float: right;
}
.index-main .main-top .top-right ul {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.index-main .main-top .top-right ul li {
  height: 100px;
  line-height: 100px;
  float: left;
  width: 16.5%;
}
.index-main .main-top .top-more {
  float: right;
}
.index-main .main-top .top-more .right-more {
  padding: 5px 13px;
  border-radius: 15px;
  border: 1px solid #ffcc00;
}
.index-main .main-text {
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 100px;
  overflow: hidden;
  border-bottom: 3px solid #dddddd;
}
.index-main .main-text .text-left {
  float: left;
  width: 40%;
}
.index-main .main-text .text-left img {
  width: 80%;
  /* box-shadow: darkgrey 10px 10px 30px 5px ; */
}
.index-main .main-text .text-right {
  float: right;
  width: 60%;
  text-align: left;
}
.index-main .main-text .text-right .right-text-info {
  padding-bottom: 20px;
  margin-bottom: 35px;
  border-bottom: 2px solid #dddddd;
}
.index-main .main-text .text-right .right-title {
  font-size: 18px;
}
.index-main .main-text .text-right .rigth-info {
  margin-top: 5%;
}
.index-main .main-text .text-right .right-foot {
  margin-top: 15%;
}
.index-foot {
  width: 100%;
}
.index-foot img {
  width: 100%;
}
.content-wrap {
  margin: 100px auto 0;
  width: 80%;
}
.content-wrap .top-left {
  width: 15%;
  position: absolute;
}
.content-wrap .top-left h1 {
  margin: 0;
}
.content-wrap .top-left p {
  padding: 0;
  font-size: 25px;
  font-weight: 700;
}
.content-wrap .tab {
  width: 100%;
  padding: 0 0 0 50%;
}
.content-wrap .tab .tab-item {
  display: inline-block;
  margin-right: 20px;
  margin-top: 10px;
  width: 150px;
  line-height: 50px;
  border-radius: 66px;
  background-color: #f2f2f2;
  cursor: pointer;
}
.content-wrap .tab .tab-item:nth-last-of-type(1) {
  margin-right: 0;
}
.content-wrap .tab .tab-item.active {
  background-color: #ffcc00;
}
.content-wrap .introduction-warp {
  padding-top: 100px;
}
.content-wrap .introduction-warp .info-wrap {
  padding-left: 50px;
  color: #333;
}
.content-wrap .introduction-warp .info-wrap .title {
  font-size: 18px;
  font-weight: bold;
}
.content-wrap .introduction-warp .info-wrap .desc {
  margin-top: 20px;
  font-size: 14px;
}
.content-wrap .introduction-warp .first .pic-wrap {
  width: 34%;
  /* box-shadow: darkgrey 10px 10px 30px 5px ; */
}
.content-wrap .introduction-warp .first .pic-wrap img {
  width: 100%;
  height: 100%;
}
.content-wrap .introduction-warp .first .info-wrap {
  margin-left: 40%;
}
.content-wrap .introduction-warp .first .info-wrap .more {
  display: inline-block;
  margin-top: 50px;
}
.content-wrap .introduction-warp .other {
  padding: 25px 0 100px;
}
.content-wrap .introduction-warp .other .other-item {
  margin-top: 100px;
  display: inline-block;
}
.content-wrap .introduction-warp .other .other-item:nth-of-type(odd) {
  width: 54%;
}
.content-wrap .introduction-warp .other .other-item:nth-of-type(even) {
  width: 46%;
}
.content-wrap .introduction-warp .other .other-item .pic-wrap {
  width: 240px;
  height: 172px;
}
.content-wrap .introduction-warp .other .other-item .pic-wrap img {
  width: 100%;
  height: 100%;
}
.content-wrap .introduction-warp .other .other-item .info-wrap {
  margin-left: 280px;
  padding-top: 5px;
}
.content-wrap .introduction-warp .other .other-item .info-wrap .more {
  display: inline-block;
  margin-top: 25px;
}