.wrap {
  margin: 0 auto;
  width: 1000px;
  max-width: 1000px;
}

.tile {
  width: 400px;
  height: 300px;
  margin: 20px;
  background-color: #99aeff;
  display: inline-block;
  background-size: cover;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
  overflow: hidden;
  color: white;
}

.tile img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: all 0.4s ease-out;
}

.tile .text {
  z-index: 99;
  position: absolute;
  padding: 30px;
  height: calc(100% - 60px);
}

.tile h1 {
  font-weight: 300;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.tile h2 {
  font-weight: 100;
  margin-top: 20px;
  font-style: italic;
  transform: translateX(200px);
}

.tile p {
  font-weight: 300;
  margin-top: 20px;
  line-height: 25px;
  transform: translateX(-200px);
  transition-delay: 0.2s;
}

.anie-text {
  opacity: 0;
  transition: all 0.6s ease-in-out;
}

.tile:hover {
  box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);
  transform: scale(1.05);
}

.tile:hover img {
  opacity: 0.2;
}

.tile:hover .animate-text {
  transform: translateX(0);
  opacity: 1;
}

.dots {
  position: absolute;
  bottom: 20px;
  right: 30px;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  color: currentColor;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.dots span {
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
  display: block;
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.5s ease;
  transform: translateY(30px);
}

.tile:hover span {
  opacity: 1;
  transform: translateY(0px);
}

.dots span:nth-child(1) {
  transition-delay: 0.05s;
}

.dots span:nth-child(2) {
  transition-delay: 0.1s;
}

.dots span:nth-child(3) {
  transition-delay: 0.15s;
}


/*
index-1代码调整
*/
.m1{
  position: relative;
  width: 1920px;
  height: 100%;
}

.mm1{
  position: absolute;
  top: 440px;
  margin-left: 305px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm1 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #121212;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm1 p{
  color: #a6a6a6;
  font-size: 16px;
}

.mm2{
  position: absolute;
  top: 1320px;
  margin-left: 305px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm2 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm2 p{
  color: #a7aab0;
  font-size: 16px;
}

.mm3{
  position: absolute;
  top: 2170px;
  margin-left: 305px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm3 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #121212;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm3 p{
  color: #a6a6a6;
  font-size: 16px;
}

.mm4{
  position: absolute;
  top: 3000px;
  margin-left: 305px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm4 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm4 p{
  color: #a7aab0;
  font-size: 16px;
}

.title5{
  position: absolute;
  top: 85px;
  margin-left: 880px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.title5 h1{
  font-size: 40px;
  font-weight: 100px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm5{
  position: absolute;
  top: 565px;
  margin-left: 340px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm5 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm5 p{
  font-size: 30px;
  font-weight: 700;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: left;
}

.mm6{
  position: absolute;
  top: 1170px;
  margin-left: 1350px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm6 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm6 p{
  font-size: 30px;
  font-weight: 700;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: right;
}

.mm7{
  position: absolute;
  top: 1775px;
  margin-left: 340px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm7 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm7 p{
  font-size: 30px;
  font-weight: 700;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: left;
}

.mm8{
  position: absolute;
  top: 2385px;
  margin-left: 1305px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.mm8 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.mm8 p{
  font-size: 30px;
  font-weight: 700;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: right;
}



/*
index-2代码调整
*/
.t1{
  position: relative;
  background-color: #2f3238;
  width: 1920px;
  height: 100%;
}

.t1 img{
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
}

.tt1{
  position: absolute;
  top: 440px;
  margin-left: 300px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt1 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #121212;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt1 p{
  color: #a6a6a6;
}

.ttt1{
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: left;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-720px,0,0);
	transform: translate3d(-720px,0,0);
}

.ttt1 p{
  /* margin-top: 200px;
  margin-left: 200px; */
  padding-left: 500px;
  padding-top: 170px;
  line-height: 50px;
  font-size: 36px;
  font-weight: 500;
  color: #fff;
}

.t1:hover{
  cursor: pointer;
}

.t1:active img{
  cursor: pointer;
  opacity: 0.4;
}

.t1:active .ttt1{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


.t2{
  position: relative;
  background-color: #2f3238;
  width: 1920px;
  height: 100%;
}

.t2 img{
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
}

.tt2{
  position: absolute;
  top: 440px;
  margin-left: 300px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt2 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt2 p{
  color: #a7aab0;
}

.ttt2{
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: left;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(720px,0,0);
	transform: translate3d(720px,0,0);
}

.ttt2 p{
  padding-left: 500px;
  padding-top: 170px;
  line-height: 50px;
  font-size: 36px;
  font-weight: 500;
  color: #fff;
}

.t2:hover{
  cursor: pointer;
}

.t2:active img{
  cursor: pointer;
  opacity: 0.4;
}

.t2:active .ttt2{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



.t3{
  position: relative;
  background-color: #2f3238;
  width: 1920px;
  height: 100%;
}

.t3 img{
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
}

.tt3{
  position: absolute;
  top: 440px;
  margin-left: 300px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt3 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #121212;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt3 p{
  color: #a6a6a6;
}

.ttt3{
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: left;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-720px,0,0);
	transform: translate3d(-720px,0,0);
}

.ttt3 p{
  padding-left: 500px;
  padding-top: 170px;
  line-height: 50px;
  font-size: 36px;
  font-weight: 500;
  color: #fff;
}

.t3:hover{
  cursor: pointer;
}

.t3:active img{
  cursor: pointer;
  opacity: 0.4;
}

.t3:active .ttt3{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


.t4{
  position: relative;
  background-color: #2f3238;
  width: 1920px;
  height: 100%;
}

.t4 img{
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
}

.tt4{
  position: absolute;
  top: 440px;
  margin-left: 300px;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt4 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt4 p{
  color: #a7aab0;
}

.ttt4{
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: left;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(720px,0,0);
	transform: translate3d(720px,0,0);
}

.ttt4 p{
  padding-left: 500px;
  padding-top: 170px;
  line-height: 50px;
  font-size: 36px;
  font-weight: 500;
  color: #fff;
}

.t4:hover{
  cursor: pointer;
}

.t4:active img{
  cursor: pointer;
  opacity: 0.4;
}

.t4:active .ttt4{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.t5{
  position: relative;
  background-color: #df4e4e;
  width: 1920px;
}

.t5 img {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.tt5{
  position: absolute;
  bottom: 0;
	left: 0;
	padding: 50px;
  opacity: 0;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt5 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt5 p {
	font-size: 34px;
  color: #fff;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

.t5:hover{
  cursor: pointer;
}

.t5:active img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

.t5:active .tt5 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


.t6{
  position: relative;
  background-color: #df4e4e;
  width: 1920px;
}

.t6 img {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.tt6{
  position: absolute;
  bottom: 0;
	left: 0;
	padding: 50px;
  opacity: 0;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt6 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt6 p {
	font-size: 34px;
  color: #fff;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

.t6:hover{
  cursor: pointer;
}

.t6:active img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

.t6:active .tt6 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.t7{
  position: relative;
  background-color: #df4e4e;
  width: 1920px;
}

.t7 img {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.tt7{
  position: absolute;
  bottom: 0;
	left: 0;
	padding: 50px;
  opacity: 0;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt7 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt7 p {
	font-size: 34px;
  color: #fff;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

.t7:hover{
  cursor: pointer;
}

.t7:active img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

.t7:active .tt7 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.t8{
  position: relative;
  background-color: #df4e4e;
  width: 1920px;
}

.t8 img {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.tt8{
  position: absolute;
  bottom: 0;
	left: 0;
	padding: 50px;
  opacity: 0;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.tt8 h1{
  font-size: 50px;
  font-weight: 500px;
  color: #efeff0;
  line-height: 1.1;
  text-transform: uppercase;
}

.tt8 p {
	font-size: 34px;
  color: #fff;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

.t8:hover{
  cursor: pointer;
}

.t8:active img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

.t8:active .tt8 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}