* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 1200px;
  color: #fff;
  margin: 0 auto;
}

.zt_item1 {
  padding: 70px 0;
  background-color: #3f3946;
}

.zt_item1:after {
  display: block;
  content: "";
  clear: both;
}

.zt_item1 .box_image {
  width: 430px;
  height: 266px;
  float: left;
  margin-right: 30px;
}

.zt_item1 .box_image img {
  width: 100%;
  height: 100%;
}

.zt_item1 .cnt_top {
  position: relative;
}

.zt_item1 .box_cnt {
  position: relative;
  height: 266px;
  float: right;
  width: 740px;
}

.zt_item1 .cnt_top h1 {
  font-size: 24px;
  color: #fff;
  line-height: 65px;
  height: 65px;
}

.zt_item1 .cnt_top .lastData {
  position: absolute;
  top: 24px;
  right: 0;
  color: #fff;
  font-size: 12px;
}

.zt_item1 .cnt_msg {
  font-size: 14px;
  color: #b1b3c0;
  line-height: 1.8;
}

.zt_item1 .cnt_info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 12px;
  color: #fff;
}

.zt_item1 .cnt_info p {
  margin-top: 15px;
}

.zt_item1 .cnt_active {
  position: absolute;
  right: 0;
  bottom: 0;
}

.zt_item1 .cnt_active a:first-child {
  width: 220px;
  height: 54px;
  border: 1px #d9d7da solid;
  color: #fff;
  display: inline-block;
  font-size: 22px;
  text-align: center;
  line-height: 54px;
  text-decoration: none;
  margin-right: 28px;
}

.zt_item1 .cnt_active a:last-child {
  width: 220px;
  height: 54px;
  border: 1px #d9d7da solid;
  color: #3f3946;
  display: inline-block;
  font-size: 22px;
  text-align: center;
  line-height: 54px;
  text-decoration: none;
  background-color: #fff;
}

.zt_item1 .cnt_active a:hover {
  background-color: #65616b;
  color: #fff;
}

.zt_item2 {
  background: url('./images/bg1.png') center center no-repeat;
  height: 1583px;
}

.zt_item2 .wrapper {
  position: relative;
  margin: 0 auto;
}

.zt_item2 .zt_img {
  display: block;
  width: 303px;
  height: 405px;
  position: absolute;
  top: 195px;
  left: 40px;
}

.zt_item2 .zt_img2 {
  display: block;
  width: 442px;
  height: 105px;
  position: absolute;
  top: 320px;
  left: 519px;
  background: url('./images/text1.png') no-repeat;
}

.zt_item2 .zt_text1 {
  font-size: 14px;
  color: #b1b3c0;
  line-height: 2;
  width: 650px;
}

.zt_item2 .zt_text1 p {
  margin-top: 25px;
}

.zt_item2 h1 {
  font-size: 30px;
  color: #fffffe;
  position: absolute;
  top: 63px;
  left: 500px;
}

.zt_item2 h2 {
  font-size: 36px;
  color: #cdcad0;
  position: absolute;
  top: 760px;
  left: 50px;
  width: 330px;
  line-height: 2;
}

.zt_item2 .zt_text1 {
  font-size: 14px;
  color: #b1b3c0;
  position: absolute;
  top: 480px;
  left: 516px;
}

.zt_item2 .zt_text2 {
  font-size: 12px;
  color: #b1b3c0;
  position: absolute;
  width: 193px;
  top: 1403px;
  left: 40px;
}

.zt_item2 .zt_text3 {
  font-size: 12px;
  color: #b1b3c0;
  position: absolute;
  width: 235px;
  top: 1130px;
  left: 255px;
}

.zt_item2 .zt_text4 {
  font-size: 12px;
  color: #b1b3c0;
  position: absolute;
  left: 600px;
  top: 1305px;
  width: 270px;
}

.zt_item2 .zt_text5 {
  font-size: 12px;
  color: #b1b3c0;
  position: absolute;
  top: 952px;
  left: 636px;
  width: 200px;
  text-align: right;
}

.zt_item2 .zt_text6 {
  font-size: 12px;
  color: #b1b3c0;
  position: absolute;
  top: 775px;
  left: 990px;
  width: 190px;
  text-align: right;
}

.zt_item2 h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 9px;
}

.zt_item2 a {
  display: inline-block;
  width: 150px;
  height: 36px;
  background-color: #c7c6d8;
  color: #3f3946;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  text-decoration: none;
  margin-top: 8px;
}

.zt_item2 a:hover {
  background-color: #66626d;
  color: #fff;
}

.zt_item2 p {
  line-height: 1.8;
}

.zt_item4 {
  background-color: #27222d;
}

.zt_item3 {
  background-color: #26222d;
}

.zt_item3 .header {
  height: 190px;
  text-align: center;
  line-height: 190px;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
}

.zt_item3 .header {
  background: #26222d url('./images/font2.png') center center no-repeat;
  color: #fff;
  font-size: 30px;
}

.zt_item4 .cnt ul:after {
  content: "";
  display: block;
  clear: both;
}

.zt_item4 .cnt ul {
  width: 1208px;
}

.zt_item4 .cnt ul li {
  float: left;
  list-style: none;
}

.zt_item4 .cnt ul li.item1 {
  width: 596px;
  height: 380px;
  margin: 0 8px 8px 0;
  background-color: aquamarine;
  position: relative;
  overflow: hidden;
}

.zt_item4 img {
  width: 100%;
  height: 100%;
}

.zt_item4 .cnt ul li.item2 {
  width: 294px;
  height: 186px;
  margin: 0 8px 8px 0;
  position: relative;
  background-color: #c7c6d8;
  overflow: hidden;
}

.zt_item4 .cnt ul li.item3 {
  width: 294px;
  height: 380px;
  margin: 0 8px 8px 0;
  background-color: #000;
  float: right;
  position: relative;
  overflow: hidden;
}

.play {
  position: absolute;
  display: block;
  width: 92px;
  height: 92px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 100;
}

.play:after {
  content: "";
  display: block;
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-45%, -50%);
  border-top: 20px transparent solid;
  border-bottom: 20px transparent solid;
  border-left: 30px #646969 solid;
  height: 0;
}

.shadow {
  font-size: 14px;
  color: #fff;
  height: 50px;
  line-height: 50px;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  text-indent: 1em;
  background: linear-gradient(transparent, rgba(82, 82, 82, 0.5));
}

.shadow p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 12px;
}

.zt_item4 .cnt ul li.item2 .shadow,
.zt_item4 .cnt ul li.item3 .shadow {
  height: 35px;
  line-height: 35px;
}

.animation-shadow {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.zt_item4 .cnt li:hover .animation-shadow {
  opacity: 1;
}

.animation-image {
  display: block;
  transition: all 0.2s ease-in-out;
}

.animation-play {
  transition: All 0.2s ease-in-out;
}

.zt_item4 .cnt li:hover .animation-image {
  transform: scale(1.03);
}

.zt_item4 .cnt li:hover .animation-play {
  background-color: rgba(255, 255, 255, 1);
}

.zt_item4 .cnt li:last-child {
  background-color: #c6c7d4;
  font-size: 26px;
}

.zt_item4 .cnt li:last-child b {
  color: #423c48;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  font-weight: normal;
}

.animation-href {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.animation-href>* {
  position: relative;
  z-index: 100;
}

.animation-href:after {
  content: "";
  display: block;
  width: 100%;
  height: 150%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #d3d4e0;
  transform: translate3d(-100%, -17%, 0);
  transition: all 0.2s ease-in-out;
  border-radius: 50%;
}

.animation-href:hover:after {
  transform: translate3d(0, -25%, 0);
  border-radius: 0;
}

.zt_item4 {
  background: #3f3946 url('./images/bg3.jpg') center bottom no-repeat;
  padding-top: 5px;
}

.zt_item4 .header2 {
  width: 353px;
  height: 86px;
  background: url('./images/font1.png') no-repeat center center;
  margin: 0 auto;
  padding: 60px 0;
  font-size: 30px;
  color: #fff;
  line-height: 86px;
  text-align: center;
}

.zt_item4 .meiti:after {
  content: "";
  display: block;
  clear: both;
}

ul li {
  list-style: none;
}

.zt_item4 .meiti {
  width: 1264px;
}

.zt_item4 .meiti li {
  width: 546px;
  height: 54px;
  line-height: 54px;
  border: 1px #fff solid;
  padding: 0 12px;
  float: left;
  margin: 0 60px 50px 0;
}

.zt_item4 .meiti li a {
  display: block;
  width: 100%;
  height: 100%;
  color: #b1b3c0;
  font-size: 18px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zt_item4 .meiti li:hover {
  background-color: #5f5c6b;
  border: 1px #5f5c6b solid;
}

.zt_item4 .meiti li:hover a {
  color: #fff;
}

.zt_item5 {
  height: 519px;
  background: url('./images/bg4.jpg') no-repeat center center;
  position: relative;
}

.zt_item5 .hedaer {
  color: #fff;
  font-size: 30px;
  width: 140px;
  height: 53px;
  margin: 0 auto;
  padding-top: 90px;
}

.zt_item5 .phone {
  position: absolute;
  bottom: -330px;
  left: 380px;
  color: #fff;
  font-size: 18px;
}

.zt_item5 .phone>* {
  float: left;
}

.zt_item5 .phone .left {
  width: 50px;
  border-top: 1px #fff solid;
  margin-top: 12px;
  margin-right: 40px;
}

.zt_item5 .phone .right {
  width: 50px;
  border-top: 1px #fff solid;
  margin-top: 12px;
  margin-left: 40px;
}

.zt_item6 {
  background: url('./images/bg5.jpg') no-repeat center center;
  position: relative;
}

.zt_item6 .header {
  font-size: 30px;
  color: #fff;
  width: 133px;
  height: 46px;
  margin: 0 auto;
  padding: 80px 0;
}

.zt_item6 ul {
  padding-top: 50px;
  margin: 0 auto;
}

.zt_item6 ul:after {
  content: "";
  display: block;
  clear: both;
}

.zt_item6 li {
  float: left;
  margin: 0 15px;
  width: 170px;
  height: 110px;
  overflow: hidden;
  margin-bottom: 30px;
}

.zt_item6 p {
  color: #b1b3c0;
  margin: 0 auto;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 14px;
}

.sidebar {
  position: absolute;
  width: 130px;
  padding-top: 38px;
  background: url('./images/sidebar.png') no-repeat top center;
  top: 50px;
  right: 20px;
}

.sidebar ul {
  border: 2px #fff solid;
  background-color: #3f3946;
}

.sidebar ul li {
  height: 55px;
  text-align: center;
  line-height: 55px;
  color: #fff;
  cursor: pointer;
}

.sidebar ul li:hover {
  background-color: #64606a;
}

.sidebar ul li a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  display: block;
  border-bottom: 1px #5e5a64 dashed;
}

.sidebar ul li:last-child a {
  border: none;
}

.sidebar ul li.hover {
  background-color: #64606a;
}

.zt_item5 .wrapper {
  position: relative;
}

.test {
  width: 100%;
  height: 400px;
  background-color: #000;
}

body .footer{
  margin: 0;
}