* {
  padding: 0;
  margin: 0;
  list-style: none;
}

#myphoto .mask.show {
  opacity: 1;
  height: 100%;
  transition: all 0.8s ease;
}

#myphoto .mask {
  opacity: 0;
  width: 100%;
  transition: all 0.8s ease;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 112333;
  background: rgba(0, 0, 0, 0.8);
}

#myphoto .mask .content {
  z-index: 99999;
  width: 800px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#myphoto .mask .content img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

#myphoto .mask .btn {
  z-index: 22345;
  width: 1200px;
  height: 140px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

#myphoto .mask .btn .leftbtn {
  width: 70px;
  height: 140px;
  border-radius: 10px;
  background-image: url("img/btn.png");
  background-size: 140px 140px;
  position: absolute;
  left: 0;
  top: 0;
  background-position: left top;
}

#myphoto .mask .btn .rightbtn {
  border-radius: 10px;
  width: 70px;
  height: 140px;
  background-image: url("img/btn.png");
  position: absolute;
  right: 0;
  top: 0;
  background-position: right top;
  background-size: 140px 140px;
}

#myphoto .box {
  width: 700px;
  height: 400px;
  margin: 20px auto;
  background: #56ffe4;
  position: relative;
  overflow: hidden;
}

#myphoto .box .img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  background: #ee62ff;
}

#myphoto .box .img li:nth-child(1) {
  background-image: url("img/1.jpg");
}

#myphoto .box .img li:nth-child(2) {
  background-image: url("img/2.jpg");
}

#myphoto .box .img li:nth-child(3) {
  background-image: url("img/3.jpg");
}

#myphoto .box .img li:nth-child(4) {
  background-image: url("img/4.jpg");
}

#myphoto .box .img li:nth-child(5) {
  background-image: url("img/5.jpg");
}

#myphoto .box .img li:nth-child(6) {
  background-image: url("img/6.jpg");
}

#myphoto .box .img li:nth-child(7) {
  background-image: url("img/7.jpg");
}

#myphoto .box .img li:nth-child(8) {
  background-image: url("img/8.jpg");
}

#myphoto .box .img li:nth-child(9) {
  background-image: url("img/9.jpg");
}

#myphoto .box .img li:nth-child(10) {
  background-image: url("img/10.jpg");
}

#myphoto .box .img li.active {
  opacity: 1;
  z-index: 111;
  transform: scale(1.2, 1.2);
  transition: transform 0.8s ease;
}

#myphoto .box .img li {
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
}

#myphoto .box .img li img {
  width: 100%;
  height: 100%;
  opacity: 0;
}

#myphoto .box .button {
  width: 100%;
  height: 70px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

#myphoto .box .button .left {
  width: 30px;
  height: 70px;
  background-image: url("img/btn.png");
  position: absolute;
  left: 0;
  top: 0;
  background-position: left top;
}

#myphoto .box .button .right {
  width: 30px;
  height: 70px;
  background-image: url("img/btn.png");
  position: absolute;
  right: 0;
  top: 0;
  background-position: right top;
}

#myphoto .zhishi {
  overflow: hidden;
  width: 100%;
  height: 203px;
  background: red;
  position: relative;
  bottom: 0;
}

#myphoto .zhishi .left {
  width: 30px;
  height: 70px;
  background-image: url("img/btn.png");
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -35px;
  z-index: 9999;
  background-position: left top;
}

#myphoto .zhishi .right {
  width: 30px;
  height: 70px;
  background-image: url("img/btn.png");
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -35px;
  z-index: 9999;
  background-position: right top;
}

#myphoto .zhishi ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 2698px;
  height: 100%;
  background: #13ff06;
}

#myphoto .zhishi ul li.one {
  background-image: url("img/1.jpg");
}

#myphoto .zhishi ul li.two {
  background-image: url("img/2.jpg");
}

#myphoto .zhishi ul li.three {
  background-image: url("img/3.jpg");
}

#myphoto .zhishi ul li.four {
  background-image: url("img/4.jpg");
}

#myphoto .zhishi ul li.five {
  background-image: url("img/5.jpg");
}

#myphoto .zhishi ul li.six {
  background-image: url("img/6.jpg");
}

#myphoto .zhishi ul li.seven {
  background-image: url("img/7.jpg");
}

#myphoto .zhishi ul li.eight {
  background-image: url("img/8.jpg");
}

#myphoto .zhishi ul li.nine {
  background-image: url("img/9.jpg");
}

#myphoto .zhishi ul li.ten {
  background-image: url("img/10.jpg");
}

#myphoto .zhishi ul #active {
  transition: all 0.8s ease;
  transform: scale(1.2, 1.2);
}

#myphoto .zhishi ul li {
  border: 3px solid #fff;
  float: left;
  width: 269.8px;
  height: 100%;
  background-size: cover;
  box-sizing: border-box;
}

#myphoto .firstzhang {
  z-index: 9999999111111;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
}

#myphoto .firstzhang .contente {
  width: 1000px;
  height: 450px;
  background: #03b883;
  position: absolute;
  top: 50%;
  margin-top: -255px;
  left: 50%;
  margin-left: -500px;
}

#myphoto .firstzhang .images {
  width: 481px;
  height: 316px;
  margin: 0 auto;
  position: relative;
  background: #9cff54;
}

#myphoto .firstzhang .images .imgs.active {
  opacity: 1;
}

#myphoto .firstzhang .images .imgs:nth-child(1) {
  background-image: url("img/1.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(2) {
  background-image: url("img/2.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(3) {
  background-image: url("img/3.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(4) {
  background-image: url("img/4.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(5) {
  background-image: url("img/5.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(6) {
  background-image: url("img/6.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(7) {
  background-image: url("img/7.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(8) {
  background-image: url("img/8.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(9) {
  background-image: url("img/9.jpg");
}

#myphoto .firstzhang .images .imgs:nth-child(10) {
  background-image: url("img/10.jpg");
}

#myphoto .firstzhang .images .imgs {
  z-index: 33;
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
  perspective: 1000px;
}

#myphoto .firstzhang .images .imgs.left {
  z-index: 23;
  transform: translateX(-350px) translateZ(-250px) rotateY(45deg);
  transform-origin: right;
  transition: all 0.5s ease-in-out;
}

#myphoto .firstzhang .images .imgs.leftmiddle {
  z-index: 22;
  transform: translateX(-450px) translateZ(-300px) rotateY(45deg);
  transition: all 0.5s ease-in-out;
}

#myphoto .firstzhang .images .imgs.rightmiddle {
  z-index: 22;
  transform: translateX(450px) translateZ(-300px) rotateY(-45deg);
  transition: all 0.5s ease-in-out;
}

#myphoto .firstzhang .images .imgs.right {
  z-index: 23;
  transform: translateX(350px) translateZ(-200px) rotateY(-45deg);
  transition: all 0.5s ease-in-out;
}

.background.none {
  transform: translateY(-100%);
  transition: all 0.8s ease;
  opacity: 0;
}

.background {
  width: 100%;
  height: 100%;
  background: url("img/16.jpg");
  position: absolute;
  z-index: 11111111111;
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  top: 0;
}

.background .kuang {
  width: 248px;
  height: 248px;
  background-image: url("img/1.jpg");
  background-size: cover;
  background-position: center center;
  position: absolute;
  top: 70px;
  left: 70px;
  border: 11px solid #fff;
  transition: all 0.8s ease;
}

.background .kuang:hover {
  transform: scale(1.1, 1.1);
  transition: all 0.8s ease;
}

.background .kuang.er {
  background-image: url("img/2.jpg");
  left: 353px;
}

.background .kuang.san {
  background-image: url("img/3.jpg");
  top: 352px;
  left: 70px;
}

.background .kuang.si {
  background-image: url("img/4.jpg");
  top: 354px;
  left: 354px;
}

.dizi {
  width: 100%;
  height: 100%;
  background-image: url("img/31.jpg");
  position: absolute;
  top: 0;
  left: 0;
  background-position: 0 -175px;
  background-size: cover;
}