﻿#gmStyle {
  overflow: hidden;
}

#gmStyle .box {
  margin-top: 0.3125rem;
  width: 6.8698rem;
  height: 3.5417rem;
  position: relative;
  left: 50%;
  margin-left: -3.5417rem;
  display: flex;
  /* overflow: hidden; */
}

#gmStyle .box .list {
  width: 6.8698rem;
  height: 3.6458rem;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -3.5417rem;
}

#gmStyle .box .btn {
  position: absolute;
  top: 50%;
  margin-top: -1.25rem;
  padding: 0rem;
  cursor: pointer;
  z-index: 3;
}

#gmStyle .box .btn img {
  width: 0.4167rem;
  height: 0.4167rem;
}

#gmStyle .box .prev {
  left: 0.2083rem;
  animation: move-left 2s linear infinite;
}

#gmStyle .box .next {
  margin-top: -0.9896rem;
  right: 0rem;
  transform: rotate(180deg);
  animation: move-right 2s linear infinite;
}

@keyframes move-right {
  0% {
    right: 0rem;
  }

  50% {
    right: -0.1563rem;
  }

  100% {
    right: -0rem;
  }
}

@keyframes move-left {
  0% {
    left: 0.2083rem;
  }

  50% {
    left: 0.0521rem;
  }

  100% {
    left: 0.2083rem;
  }
}

#gmStyle .box li {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  opacity: 0;
  transition: all 0.3s ease-out;
}

#gmStyle .box img {
  filter: grayscale(100%);
  width: 4.9479rem;
  height: 3.0208rem;
  border-radius: 0.0156rem;
  border: none;
}

#gmStyle .box .p1 {
  transform: translate3d(-0.6458rem, 0, 0) scale(0.81);
}

#gmStyle .box .p2 {
  transform: translate3d(0rem, 0, 0) scale(0.81);
  transform-origin: 45% 50%;
  opacity: 0.3;
  z-index: 2;
}

#gmStyle .box .p3 {
  transform: translate3d(1.1667rem, 0, 0);
  z-index: 3;
  opacity: 1;
}

#gmStyle .box .p3 img {
  filter: grayscale(0%) !important;
}

#gmStyle .box .p4 {
  transform: translate3d(2.3385rem, 0, 0) scale(0.81);
  transform-origin: 55% 50%;
  opacity: 0.3;
  z-index: 2;
}

#gmStyle .box .p5 {
  transform: translate3d(3.5rem, 0, 0) scale(0.81);
}

#gmStyle .box .p3:hover {
  animation: tu 3s linear infinite;
}

@keyframes tu {
  0% {
    transform: translate3d(1.1667rem, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(1.1667rem, 0, 0) scale(0.99);
  }

  100% {
    transform: translate3d(1.1667rem, 0, 0) scale(1.01);
  }
}

#gmStyle .box .buttons {
  position: absolute;
  width: 6.25rem;
  height: 0.1563rem;
  bottom: 2%;
  left: 50%;
  margin-left: -3.125rem;
  text-align: center;
}

#gmStyle .box .buttons a {
  display: inline-block;
  width: 0.2708rem;
  height: 0.2708rem;
  margin-right: 0.1563rem;
  cursor: pointer;
}

#gmStyle .box span {
  display: block;
  width: 0.2708rem;
  height: 0.2708rem;
  background-image: url(../image/lunbo_tagger.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#gmStyle .box .blue {
  background-image: url(../image/lunbo_tagger_light.png);
  background-repeat: no-repeat;
}

@keyframes chageLight {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

#gmStyle .swiper {
  display: none;
}