.nav {
  display: flex;
}

body {
  background-image: url(https://static.gamelunar.com/gamelunar/web202309/bg3.jpg);
}

.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap .tit {
  background-image: url(https://static.gamelunar.com/gamelunar/web202309/tit7.png);
  width: 126px;
  height: 317px;
  position: absolute;
  left: 60px;
  top: 200px;
}
.wrap .cont {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrap .cont .time_list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 380px;
  padding: 0 260px;
  opacity: 0;
  pointer-events: none;
  transition: all 500ms linear;
}
.wrap .cont .time_list.swiper-slide-prev, .wrap .cont .time_list.swiper-slide-next {
  opacity: 0.5;
  pointer-events: none;
}
.wrap .cont .time_list.swiper-slide-active {
  opacity: 1;
  pointer-events: all;
}
.wrap .cont .time_list:nth-of-type(odd) {
  flex-direction: row-reverse;
}
.wrap .cont .time_list .time_des {
  margin: 0 100px;
  width: 340px;
  height: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border-radius: 40px;
  box-sizing: border-box;
  padding: 20px;
  cursor: pointer;
}
.wrap .cont .time_list .time_des:hover .time_tit::after {
  width: 100%;
}
.wrap .cont .time_list .time_des .game_card {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.wrap .cont .time_list .time_des .time_tit {
  font-family: "syht-font";
  font-size: 24px;
  font-style: italic;
  line-height: 24px;
  color: #ffffff;
  position: relative;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.wrap .cont .time_list .time_des .time_tit::after {
  content: "";
  width: 46px;
  height: 2px;
  background-color: #8f2a29;
  position: absolute;
  left: 0;
  bottom: -12px;
  transition: 300ms linear;
}
.wrap .cont .time_list .time_des .des {
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
  position: relative;
  z-index: 1;
}
.wrap .cont .time_lists {
  width: auto;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.wrap .cont .time_lists .time_line {
  width: auto;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.wrap .cont .time_lists .time {
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-family: "syht-font";
  font-size: 24px;
  color: #7a7a7a;
  font-style: italic;
  position: relative;
}
.wrap .cont .time_lists .time span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(60px, -50%);
  white-space: nowrap;
}
.wrap .cont .time_lists .time:nth-of-type(even) span {
  left: auto;
  right: 0;
  transform: translate(-60px, -50%);
}
.wrap .cont .time_lists .time::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, #fff 0px, #fff 7px, #8f2a29 7px, #8f2a29 10px, #fff 10px, #fff 14px);
  border-radius: 50%;
}
.wrap .cont .time_lists .time:hover {
  color: #8f2a29;
}
.wrap .cont .time_lists .time:hover::before {
  background: radial-gradient(circle, #8f2a29 0px, #8f2a29 7px, #fff 7px, #fff 10px, #8f2a29 10px, #8f2a29 14px);
}
.wrap .cont .time_lists .time.on {
  color: #8f2a29;
}
.wrap .cont .time_lists .time.on::before {
  background: radial-gradient(circle, #8f2a29 0px, #8f2a29 7px, #fff 7px, #fff 10px, #8f2a29 10px, #8f2a29 14px);
}
.wrap .cont .time_lists .time:nth-of-type(1) {
  left: 67px;
}
.wrap .cont .time_lists .time:nth-of-type(2) {
  left: 100px;
}
.wrap .cont .time_lists .time:nth-of-type(3) {
  left: 80px;
}
.wrap .cont .time_lists .time:nth-of-type(4) {
  left: 0;
}
.wrap .cont .time_lists .time:nth-of-type(5) {
  left: -82px;
}
.wrap .cont .time_lists .time:nth-of-type(6) {
  left: -99px;
}
.wrap .cont .time_lists .time:nth-of-type(7) {
  left: -69px;
}

.btn_back {
  width: 174px;
  height: 48px;
  position: absolute;
  bottom: 100px;
  right: 70px;
  z-index: 999;
  cursor: pointer;
}
.btn_back::after {
  content: "";
  background-image: url(https://static.gamelunar.com/gamelunar/web202309/btn_back1.png);
  width: 368px;
  height: 79px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: -60px;
}/*# sourceMappingURL=timeLine.css.map */