@charset "UTF-8";
.gotop {
  display: none;
}
@media (max-width: 768px) {
  .gotop {
    display: block;
    bottom: 85px;
  }
}

body.fixed {
  position: fixed;
  width: calc(100% - 17px);
}

nav .anhuilogo {
  width: 113px;
}
nav ul {
  width: calc(100% - 185px);
}
nav li {
  padding: 20px 15px 26px;
}
nav > div {
  padding-top: 0px;
}
@media (max-width: 980px) {
  nav .anhuilogo {
    width: 170px;
  }
}
@media (max-width: 1200px) {
  nav ul {
    width: calc(100% - 140px);
    margin: auto;
  }
  nav li {
    padding: 6px 8px;
  }
}

.wrap {
  position: relative;
}
@media (max-width: 980px) {
  .wrap {
    background: linear-gradient(#63d0d7 1%, #e0e7c5 99%);
  }
}

.header_content {
  max-width: 371px;
  width: 100%;
  top: 160px;
  z-index: 15;
  margin: auto;
}
.header_content h1 {
  width: 100%;
  display: inline-block;
}
.header_content h1 img {
  width: 100%;
}
.header_content .gamestart {
  width: 84%;
  display: inline-block;
  position: absolute;
  bottom: 17px;
  left: 0px;
  right: 0px;
  margin: auto;
  font-size: 0;
}
.header_content .instructions {
  width: calc(100% - 90px);
  display: inline-block;
  vertical-align: middle;
}
.header_content .instructions p {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.56px;
  color: #515151;
}
@media (max-width: 768px) {
  .header_content {
    max-width: 250px;
    position: relative;
    top: 0px;
    margin: 30px auto 0px;
  }
  .header_content .gamestart {
    width: 100%;
    bottom: -35px;
    left: -16px;
    padding: 0 10px;
    text-align: center;
  }
  .header_content .instructions {
    width: 100%;
    margin: 10px auto 20px;
  }
  .header_content .instructions p {
    font-size: 15px;
  }
}

.who {
  font-size: 14px;
  font-weight: bold;
  line-height: 2.57;
  letter-spacing: 1.05px;
  text-align: left;
  color: #da5572;
  position: absolute;
  right: 94px;
  top: 17px;
  text-decoration: none;
  pointer-events: auto;
}
.who > img {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
  margin-left: -4px;
}
@media (max-width: 768px) {
  .who {
    right: 51px;
    top: 2px;
  }
}

@media (max-width: 980px) {
  main.open {
    position: relative;
    z-index: 3;
  }
}

.game_content {
  position: relative;
  z-index: 1;
  height: 44.5vw;
  background: linear-gradient(#63d0d7, #e0e7c5);
}
@media (max-width: 980px) {
  .game_content {
    height: 130vw;
    background: none;
  }
  .game_content::before {
    content: "";
    position: absolute;
    background-color: #0000007f;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
}
@media (max-width: 768px) {
  .game_content {
    height: 145vw;
  }
}
.game_content::before {
  content: "";
  position: absolute;
  background-image: url(../images/map.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 40.9%;
  padding-bottom: 33.9%;
  left: 11.75%;
  top: 7.3vw;
}
@media (max-width: 1440px) {
  .game_content::before {
    top: 8vw;
  }
}
@media (max-width: 980px) {
  .game_content::before {
    background: none;
  }
}
@media (max-width: 980px) {
  .game_content.choose_nav {
    transition: all 0.1s linear;
  }
  .game_content.choose_nav::before {
    content: "";
    position: absolute;
    background-color: #1111117f;
    width: 100%;
    height: 200vh;
    z-index: 100;
    left: 0;
    top: 0;
  }
}
.game_content:after {
  content: "";
  position: absolute;
  background-image: url(../images/desert1.svg);
  width: 100%;
  padding-bottom: 6.25%;
  bottom: -2px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (max-width: 980px) {
  .game_content {
    display: flex;
    flex-direction: column;
  }
}

.pic_sec {
  display: flex;
  flex-direction: column;
}
.pic_sec > div {
  display: flex;
  justify-content: center;
}
.pic_sec .two_pair {
  gap: 100px;
}
.pic_sec .two_pair figure {
  width: 35vw;
}
.pic_sec .two_pair figure img {
  width: 100%;
}
.pic_sec .four_pair {
  gap: 30px;
}
.pic_sec .four_pair figure {
  max-width: 25vw;
}
.pic_sec .four_pair figure img {
  width: 100%;
}

.image-group {
  display: none;
}
.image-group > a {
  display: inline-block;
}
.image-group > a img {
  width: 100%;
  position: relative;
  z-index: 2;
}

.item {
  position: absolute;
  z-index: 1;
  user-select: none;
  text-decoration: none;
  transition: all 0.2s linear;
  width: 13.65%;
  filter: drop-shadow(4px 4px 5px #4343437f);
}
@media (max-width: 1440px) {
  .item {
    transform: scale(0.88);
  }
}
.item .num {
  position: absolute;
  z-index: 1;
  top: 0;
  color: white;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  top: -30px;
  left: 20px;
}
@media (max-width: 1440px) {
  .item .num {
    font-size: 22px;
    top: -25px;
    left: 17px;
  }
}
.item .num::after {
  content: "";
  position: absolute;
  background-color: #10949a;
  border-radius: 110px 110px 0 0;
  top: -6.5px;
  left: -19px;
  width: 71px;
  height: 71px;
  z-index: -1;
}
@media (max-width: 1440px) {
  .item .num::after {
    width: 60px;
    height: 60px;
    left: -17px;
  }
}
.item:nth-child(1) {
  top: 11vw;
  left: 5.2vw;
}
@media (max-width: 1440px) {
  .item:nth-child(1) {
    left: 5.9vw;
    top: 11.2vw;
    transform: scale(0.9);
  }
}
.item:nth-child(1):hover {
  transform: translateY(-10px);
}
@media (max-width: 1440px) {
  .item:nth-child(1):hover {
    transform: scale(0.9) translateY(-10px);
  }
}
.item:nth-child(2) {
  transform: scale(0.75);
  top: 11.7vw;
  left: 21.7vw;
}
@media (max-width: 1440px) {
  .item:nth-child(2) {
    transform: scale(0.7);
    top: 11.5vw;
    left: 21.3vw;
  }
}
.item:nth-child(2):hover {
  transform: scale(0.75) translateY(-10px);
}
@media (max-width: 1440px) {
  .item:nth-child(2):hover {
    transform: scale(0.7) translateY(-10px);
  }
}
.item:nth-child(3) {
  transform: scale(0.62);
  top: 8.2vw;
  left: 37.5vw;
}
@media (max-width: 1440px) {
  .item:nth-child(3) {
    top: 8.5vw;
  }
}
.item:nth-child(3):hover {
  transform: scale(0.62) translateY(-10px);
}
.item:nth-child(4) {
  transform: scale(0.71);
  top: 26vw;
  left: 5.8vw;
}
@media (max-width: 1440px) {
  .item:nth-child(4) {
    top: 26.5vw;
  }
}
.item:nth-child(4):hover {
  transform: scale(0.71) translateY(-10px);
}
.item:nth-child(5) {
  transform: scale(0.62);
  top: 23.1vw;
  left: 19.1vw;
}
@media (max-width: 1440px) {
  .item:nth-child(5) {
    top: 23.8vw;
  }
}
.item:nth-child(5):hover {
  transform: scale(0.62) translateY(-10px);
}
.item:nth-child(6) {
  top: 20.9vw;
  left: 35.9vw;
}
@media (max-width: 1440px) {
  .item:nth-child(6) {
    left: 35.3%;
    top: 21vw;
    transform: scale(0.9);
  }
}
.item:nth-child(6):hover {
  transform: translateY(-10px);
}
@media (max-width: 1440px) {
  .item:nth-child(6):hover {
    transform: scale(0.9) translateY(-10px);
  }
}
.item:nth-child(7) {
  transform: scale(0.75);
  top: 32.6vw;
  left: 31.2vw;
}
@media (max-width: 1440px) {
  .item:nth-child(7) {
    top: 33.4vw;
  }
}
.item:nth-child(7):hover {
  transform: scale(0.75) translateY(-10px);
}
.item:nth-child(8) {
  transform: scale(0.75);
  top: 10.4vw;
  right: 0.7vw;
}
.item:nth-child(8):hover {
  transform: scale(0.75) translateY(-10px);
}
.item:nth-child(9) {
  transform: scale(0.62);
  top: 19.5vw;
  right: 6.8vw;
}
.item:nth-child(9):hover {
  transform: scale(0.62) translateY(-10px);
}
.item:nth-child(10) {
  top: 32.2vw;
  right: 2.8vw;
}
@media (max-width: 1440px) {
  .item:nth-child(10) {
    transform: scale(0.9);
  }
}
.item:nth-child(10):hover {
  transform: translateY(-10px);
}
@media (max-width: 1440px) {
  .item:nth-child(10):hover {
    transform: scale(0.9) translateY(-10px);
  }
}

.choose_box {
  z-index: 50;
  position: absolute;
  width: 28.1%;
  padding-bottom: 36.25%;
  top: 7vw;
  left: 52.6%;
  background-position: center center;
  background: url("../images/house.png") no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 980px) {
  .choose_box {
    position: relative;
    width: 90vw;
    padding-bottom: 117vw;
    top: 100px;
    margin: 0px auto 0;
    bottom: unset;
    left: unset;
  }
}
.choose_box .bag_box {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.choose_box .bag_box .choose_list li {
  position: absolute;
}
.choose_box .bag_box .choose_list li img {
  width: 100%;
}
.choose_box .bag_box .choose_list li .remove_img_btn {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  right: -7px;
  top: -8px;
  background: #006260;
  border-radius: 50%;
}
.choose_box .bag_box .choose_list li .remove_img_btn:before, .choose_box .bag_box .choose_list li .remove_img_btn:after {
  content: "";
  position: absolute;
  background-color: white;
  width: 9px;
  height: 1px;
  left: 24%;
  top: 49%;
  transition: all 0.2s linear;
}
.choose_box .bag_box .choose_list li .remove_img_btn::before {
  transform: rotate(135deg);
}
.choose_box .bag_box .choose_list li .remove_img_btn:after {
  transform: rotate(45deg);
}
.choose_box .bag_box .choose_list li .remove_img_btn:hover::before {
  transform: rotate(135deg) scale(1.3);
}
.choose_box .bag_box .choose_list li .remove_img_btn:hover:after {
  transform: rotate(45deg) scale(1.3);
}
.choose_box .bag_box .choose_list li#pic1 {
  width: 24%;
  left: 15%;
  top: 33%;
}
.choose_box .bag_box .choose_list li#pic2 {
  width: 17%;
  left: 12%;
  top: 50%;
}
.choose_box .bag_box .choose_list li#pic3 {
  width: 18%;
  left: 21%;
  top: 62%;
}
.choose_box .bag_box .choose_list li#pic4 {
  width: 13%;
  left: 13%;
  top: 74%;
}
.choose_box .bag_box .choose_list li#pic5 {
  width: 19%;
  left: 47%;
  top: 35%;
}
.choose_box .bag_box .choose_list li#pic6 {
  width: 17%;
  top: 50%;
  left: 39%;
}
.choose_box .bag_box .choose_list li#pic7 {
  width: 19%;
  left: 44%;
  top: 64%;
}
.choose_box .bag_box .choose_list li#pic8 {
  width: 17%;
  left: 72.5%;
  top: 35%;
}
.choose_box .bag_box .choose_list li#pic9 {
  width: 24%;
  left: 65%;
  top: 48%;
}
.choose_box .bag_box .choose_list li#pic10 {
  width: 25%;
  left: 67.8%;
  top: 67.5%;
}

.logo {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.game_btn {
  max-width: 48.2206405694%;
  width: 100%;
  display: inline-block;
  position: absolute;
  bottom: 2.7vw;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.18s ease-in-out;
}
.game_btn:hover {
  transform: translateX(-50%) scale(1.03);
}
@media (max-width: 980px) {
  .game_btn {
    bottom: 9vw;
  }
}
@media (max-width: 375px) {
  .game_btn {
    bottom: 7.5vw;
  }
}
@media (max-width: 1440px) {
  .game_btn {
    max-width: 47%;
  }
}
@media (max-width: 1200px) {
  .game_btn {
    max-width: 45%;
  }
}
.game_btn figure img {
  width: 100%;
}

.btn_send {
  display: none;
}

.send_intro {
  display: none;
  color: white;
  font-size: 14px;
  position: absolute;
  top: 10vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
@media (max-width: 1280px) {
  .send_intro {
    font-size: 13px;
  }
}
@media (max-width: 1200px) {
  .send_intro {
    font-size: 11px;
  }
}
@media (max-width: 980px) {
  .send_intro {
    top: 31vw;
    font-size: 12px;
  }
}

.reload-link {
  position: absolute;
  width: 9.6085409253%;
  padding-bottom: 9.0747330961%;
  transform: scale(0.8);
  right: 0.9vw;
  top: 5.9vw;
  filter: drop-shadow(0 0 0.5rem #737373);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: auto;
  z-index: 11;
  background-image: url(../images/reload.svg);
  display: none;
  transition: all 0.2s linear;
}
.reload-link:hover {
  transform: scale(0.88);
}
@media (max-width: 980px) {
  .reload-link {
    top: 15vw;
    right: 3vw;
  }
}

.game_info_list {
  display: flex;
  justify-content: center;
  gap: 1vw;
  width: 90%;
  background: #004c4b;
  padding: 20px 0.6vw;
}
@media (max-width: 1620px) {
  .game_info_list {
    padding: 15px 0.3vw;
  }
}
@media (max-width: 1280px) {
  .game_info_list {
    padding: 10px 3px;
  }
}
@media (max-width: 980px) {
  .game_info_list {
    width: 90%;
    padding: 3vw 3px;
  }
}
.game_info_list ul {
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  flex-direction: column;
  gap: 15px;
}
@media (max-width: 1620px) {
  .game_info_list ul {
    gap: 10px;
  }
}
.game_info_list ul li {
  color: white;
  font-size: clamp(8px, 0.8vw, 16px);
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
}
@media (max-width: 980px) {
  .game_info_list ul li {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.3;
  }
}
@media (max-width: 580px) {
  .game_info_list ul li {
    font-size: clamp(12px, 1vw, 16px);
  }
}
@media (max-width: 450px) {
  .game_info_list ul li {
    font-size: clamp(10px, 1vw, 16px);
  }
}
@media (max-width: 360px) {
  .game_info_list ul li {
    font-size: clamp(8px, 1vw, 16px);
  }
}
.game_info_list ul li span {
  width: 17px;
  height: 17px;
  font-weight: 900;
  color: #004c4b;
  font-size: 14px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1620px) {
  .game_info_list ul li span {
    font-size: 10px;
    width: 15px;
    height: 15px;
  }
}
.game_info_list ul li p {
  transform: translateY(1px);
  line-height: 1.3;
  font-size: clamp(7px, 0.87vw, 12px);
}

.box_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: absolute;
  z-index: 2;
  top: 10.5vw;
}
@media (max-width: 1200px) {
  .box_title {
    top: 9.6vw;
  }
}
@media (max-width: 980px) {
  .box_title {
    top: 28%;
  }
}
.box_title .yellow {
  color: #f2ce42;
  font-size: 0.93vw;
  margin-top: 2vh;
  margin-bottom: 2.1vh;
  font-weight: 500;
  letter-spacing: 1px;
  position: relative;
}
@media (max-width: 1200px) {
  .box_title .yellow {
    margin: 1vw auto;
  }
}
@media (max-width: 980px) {
  .box_title .yellow {
    font-size: 2.8vw;
    margin: 2vh auto;
  }
}
.box_title .yellow::before, .box_title .yellow:after {
  content: "";
  position: absolute;
  width: 39px;
  height: 1px;
  background-color: #f2ce42;
  top: 50%;
  transform: translateY(-50%);
}
.box_title .yellow:after {
  left: calc(100% + 7px);
}
.box_title .yellow:before {
  right: calc(100% + 7px);
}
.box_title .game_intro {
  font-size: 0.93vw;
  line-height: 1.6;
  color: white;
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 22px;
}
@media (max-width: 1620px) {
  .box_title .game_intro {
    margin-bottom: 1vw;
  }
}
@media (max-width: 980px) {
  .box_title .game_intro {
    font-size: 2.8vw;
    margin-bottom: 15px;
  }
}

.profile_icon {
  max-width: 45.8333333333%;
  width: 100%;
  display: inline-block;
  margin: auto;
}
.profile_icon_container {
  max-width: 29.8932384342%;
  width: 100%;
  margin: auto;
  padding-top: 5vw;
  display: flex;
  justify-content: center;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 980px) {
  .profile_icon_container {
    padding-top: 17vw;
  }
}
.profile_icon_container i {
  background-image: url(../images/bean_decoration.svg);
  display: inline-block;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  padding-bottom: 26.7857142857%;
  background-position: bottom;
  bottom: -1vw;
}
.profile_icon img {
  width: 100%;
}

.start_title {
  display: inline-block;
  max-width: 78.6476868327%;
  width: 100%;
}
@media (max-width: 1280px) {
  .start_title {
    max-width: 73%;
  }
}
.start_title img {
  width: 100%;
}

.test_img {
  position: fixed;
  width: 400px;
  height: 500px;
  z-index: 990;
  display: none;
  top: 0vw;
}
.test_img img {
  width: 100%;
}

.m_text {
  display: none;
}

.th_commodity {
  width: 100%;
  height: 100%;
}
@media (max-width: 980px) {
  .th_commodity {
    background-color: #0b828d99;
    position: fixed;
    width: 48vw;
    min-width: 240px;
    height: 90vh;
    border-radius: 0 10px 10px 0;
    z-index: 111;
    padding: 40px 0 100px;
    top: 50px;
    left: -100vw;
    transition: all 0.25s linear;
  }
  .th_commodity .close_bag_btn {
    top: 60px;
    width: 40px;
    height: 100px;
    transition: all 0.2s ease-in-out;
    position: absolute;
    display: flex;
    left: calc(100%);
    background-color: #006161;
    border-radius: 0 10px 10px 0;
  }
}
@media (max-width: 980px) and (max-width: 450px) {
  .th_commodity .close_bag_btn {
    top: 40px;
  }
}
@media (max-width: 980px) {
  .th_commodity .close_bag_btn:before {
    content: "";
    position: absolute;
    border: solid #eab548;
    border-width: 0 4px 4px 0;
    border-radius: 3px;
    transform: rotate(135deg) translateY(-50%);
    padding: 8px;
    font-size: 20px;
    left: 20%;
    top: 35%;
  }
}
@media (max-width: 980px) {
  .th_commodity.show {
    left: 0;
  }
}
@media (max-width: 980px) {
  .th_commodity .item {
    position: static;
    position: relative;
    width: 25vw;
    max-width: unset;
    bottom: unset;
    left: unset;
    top: unset;
    right: unset;
  }
  .th_commodity .item img {
    width: 100%;
  }
}
.th_commodity .m {
  display: none;
}
@media (max-width: 980px) {
  .th_commodity .m {
    display: block;
    text-align: center;
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin-bottom: 40px;
    letter-spacing: 1px;
    position: relative;
  }
  .th_commodity .m:after {
    content: "";
    position: absolute;
    border: solid white;
    border-width: 0px 1.5px 1.5px 0;
    padding: 4px;
    bottom: -20px;
    transform: rotate(45deg);
    left: 47%;
  }
}
@media (max-width: 980px) {
  .th_commodity .container {
    overflow-y: auto;
    height: 100%;
    padding: 0 20px;
    margin: auto;
  }
  .th_commodity .container .item {
    position: static;
    position: relative;
    width: 85%;
    max-width: unset;
    bottom: unset;
    left: unset;
    top: unset;
    right: unset;
    transform: none;
  }
  .th_commodity .container .item:focus .m_text {
    background: #654708;
    color: #eab548;
  }
  .th_commodity .container .item .num {
    display: none;
  }
  .th_commodity .container .item .m_text {
    display: block;
    left: 50%;
    transform: translateX(-50%);
    background: #eab548;
    position: absolute;
    color: #654708;
    font-weight: 500;
    top: calc(100% - 15px);
    z-index: 2;
    margin: auto;
    width: 80%;
    text-align: center;
    padding: 8px 10px;
    border-radius: 15px;
    line-height: 1.2;
    transition: all 0.15s linear;
  }
}
@media (max-width: 980px) and (max-width: 980px) {
  .th_commodity .container .item .m_text {
    font-size: 14px;
  }
}
.th_commodity .image-group.show {
  display: block;
}
@media (max-width: 980px) {
  .th_commodity .image-group.show {
    align-items: center;
    gap: 50px;
    flex-direction: column;
    display: flex;
  }
}

.arr_m_bg {
  display: none;
}
@media (max-width: 980px) {
  .arr_m_bg {
    color: #096067;
    background: #eab548;
    padding: 15px 15px;
    font-weight: bold;
    border-radius: 0 10px 10px 0;
    top: 110px;
    writing-mode: vertical-lr;
    position: fixed;
    z-index: 101;
    transition: all 0.2s linear;
    animation: fly 0.9s infinite alternate linear;
  }
  .arr_m_bg:focus {
    background-color: #096067;
    color: #eab548;
  }
  .arr_m_bg.show {
    display: block;
    opacity: 1;
  }
  .arr_m_bg.abs {
    position: absolute;
    opacity: 0;
  }
}
@media (max-width: 980px) and (max-width: 450px) {
  .arr_m_bg {
    top: 90px;
  }
}

@keyframes fly {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(10px);
  }
}
.tourist_spot_container {
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 43.3vw;
  left: 43.5vw;
  color: #9d4b1f;
  font-weight: 700;
  font-size: 13px;
}
@media (max-width: 1440px) {
  .tourist_spot_container {
    max-width: 60vw;
    font-size: 12px;
    left: 40vw;
    right: 2vw;
    left: unset;
    top: 44vw;
  }
}
@media (max-width: 980px) {
  .tourist_spot_container {
    display: none;
  }
}
.tourist_spot_container ul {
  display: none;
}
.tourist_spot_container ul.show {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px 7px;
}
.tourist_spot_container ul li {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  width: fit-content;
}
.tourist_spot_container ul p {
  transform: translateY(3px);
  line-height: 1.3;
  font-size: clamp(7px, 0.87vw, 12px);
}
.tourist_spot_container ul span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  min-height: 18px;
  font-weight: 500;
  border-radius: 110px 110px 0 0;
  background-color: #1194a6;
  color: white;
}

.tourist_spot_title {
  margin-bottom: 10px;
  font-size: 15px;
}

.join_sec {
  background-color: #fdcc70;
  padding-top: 170px;
  padding-bottom: 190px;
  position: relative;
}
@media (max-width: 980px) {
  .join_sec {
    padding: 70px 0;
  }
}
.join_sec:before {
  content: "";
  position: absolute;
  background-image: url(../images/car.png);
  width: 30.85%;
  background-repeat: no-repeat;
  padding-bottom: 12.65%;
  background-size: contain;
  top: -123px;
  left: 30px;
  z-index: 1;
}
@media (max-width: 1440px) {
  .join_sec:before {
    left: 0px;
    top: -6.5vw;
  }
}
@media (max-width: 980px) {
  .join_sec:before {
    display: none;
  }
}
.join_sec .container {
  max-width: 1409px;
  width: 100%;
  margin: auto;
  background: #feecbd;
  border-radius: 35px;
  padding: 100px;
  padding-top: 80px;
}
@media (max-width: 1440px) {
  .join_sec .container {
    max-width: 90vw;
    padding: 80px;
  }
}
@media (max-width: 980px) {
  .join_sec .container {
    padding: 60px 20px;
  }
}
.join_sec .join_title {
  max-width: 421px;
  width: 100%;
  margin: auto;
  margin-bottom: 65px;
  transform: translateX(-30px);
}
@media (max-width: 1440px) {
  .join_sec .join_title {
    max-width: 378.9px;
    margin-bottom: 45px;
  }
}
@media (max-width: 980px) {
  .join_sec .join_title {
    transform: translateX(-8px);
    max-width: 300px;
    width: 70vw;
  }
}
.join_sec .join_step {
  display: flex;
  justify-content: center;
  gap: 95px;
  margin-bottom: 60px;
}
@media (max-width: 1440px) {
  .join_sec .join_step {
    gap: 6vw;
    margin-bottom: 50px;
  }
}
@media (max-width: 980px) {
  .join_sec .join_step {
    gap: 45px;
    margin-bottom: 30px;
  }
}
@media (max-width: 580px) {
  .join_sec .join_step {
    gap: 25px;
  }
}
.join_sec .join_step li {
  background-image: url(../images/big_bean.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 289px;
  height: 254px;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media (max-width: 1440px) {
  .join_sec .join_step li {
    transform: scale(0.9);
  }
}
@media (max-width: 980px) {
  .join_sec .join_step li {
    background-image: none;
    width: unset;
    height: unset;
  }
}
.join_sec .join_step li:not(:last-of-type):after {
  content: "";
  position: absolute;
  background-image: url(../images/bean_arr.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 51px;
  height: 38px;
  left: calc(100% + 44px);
  top: 45%;
  transform: translate(-50%);
}
@media (max-width: 1440px) {
  .join_sec .join_step li:not(:last-of-type):after {
    left: calc(100% + 50px);
    transform: translate(-50%) scale(0.95);
  }
}
@media (max-width: 980px) {
  .join_sec .join_step li:not(:last-of-type):after {
    left: calc(100% + 30px);
    transform: translate(-50%) scale(0.55);
    top: 28%;
  }
}
@media (max-width: 580px) {
  .join_sec .join_step li:not(:last-of-type):after {
    left: calc(100% + 20px);
    transform: translate(-50%) scale(0.4);
    top: 10%;
  }
}
.join_sec .join_step li span {
  text-align: center;
  transform: translate(0px, 3px);
  display: inline-block;
  color: #7c4f0e;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
}
@media (max-width: 1440px) {
  .join_sec .join_step li span {
    font-size: 20px;
  }
}
@media (max-width: 1200px) {
  .join_sec .join_step li span {
    font-size: 18px;
  }
}
@media (max-width: 980px) {
  .join_sec .join_step li span {
    font-size: 16px;
  }
}
@media (max-width: 580px) {
  .join_sec .join_step li span {
    font-size: 14px;
  }
}

.join_prize_sec {
  display: flex;
  justify-content: space-between;
  gap: 85px;
}
@media (max-width: 1440px) {
  .join_prize_sec {
    gap: 65px;
  }
}
@media (max-width: 980px) {
  .join_prize_sec {
    flex-direction: column;
    gap: 40px;
  }
}
.join_prize_sec > div {
  background-color: #fff;
  width: 50%;
  position: relative;
  border-radius: 320px 320px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 45px;
}
@media (max-width: 980px) {
  .join_prize_sec > div {
    width: 100%;
  }
}
.join_prize_sec > div::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 290px;
  background-color: #fff;
  border-radius: 310px 310px 0 0;
  top: 0px;
  z-index: -1;
}
.join_prize_sec .prize_title {
  max-width: 300px;
  width: 100%;
  transform: translateX(-10px);
  margin-top: 60px;
  margin-bottom: 35px;
}
@media (max-width: 1440px) {
  .join_prize_sec .prize_title {
    max-width: 255px;
  }
}
@media (max-width: 980px) {
  .join_prize_sec .prize_title {
    max-width: 220px;
    width: 50vw;
    margin-bottom: 20px;
  }
}
.join_prize_sec .prize_title img {
  width: 100%;
}
.join_prize_sec .prize_pic {
  width: 100%;
  margin-bottom: 30px;
}
.join_prize_sec .prize_pic_gold {
  max-width: 170px;
}
@media (max-width: 980px) {
  .join_prize_sec .prize_pic_gold {
    max-width: 120px;
  }
}
.join_prize_sec .prize_pic_money {
  max-width: 199px;
}
@media (max-width: 980px) {
  .join_prize_sec .prize_pic_money {
    max-width: 140px;
  }
}
.join_prize_sec .gray {
  color: #a2a2a2;
  font-size: 14px;
}
.join_prize_sec .prize_name {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}
@media (max-width: 980px) {
  .join_prize_sec .prize_name {
    font-size: 16px;
  }
}
.join_prize_sec .prize_person {
  margin-top: 30px;
  color: #80552f;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  margin-bottom: 10px;
}
@media (max-width: 980px) {
  .join_prize_sec .prize_person {
    font-size: 16px;
  }
}
.join_prize_sec .prize_person::before, .join_prize_sec .prize_person:after {
  content: "";
  position: absolute;
  background-image: url(../images/winner.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 5px;
  width: 90px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 980px) {
  .join_prize_sec .prize_person::before, .join_prize_sec .prize_person:after {
    width: 55px;
    height: 3px;
  }
}
.join_prize_sec .prize_person::after {
  left: calc(100% + 10px);
}
.join_prize_sec .prize_person::before {
  transform: translateY(-50%) rotate(180deg);
  right: calc(100% + 10px);
}
.join_prize_sec .winner {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  min-height: 72px;
  display: flex;
  align-items: center;
  margin-top: 23px;
}
@media (max-width: 980px) {
  .join_prize_sec .winner {
    font-size: 16px;
    min-height: unset;
  }
}

.spot_sec {
  background: linear-gradient(#fdcc70 1%, #eefeba 99%);
  padding-top: 165px;
  padding-bottom: 100px;
  position: relative;
}
@media (max-width: 980px) {
  .spot_sec {
    padding: 20px;
    padding-top: 50px;
  }
}
.spot_sec:before {
  content: "";
  position: absolute;
  background-image: url(../images/top10_upper_VIC.svg);
  width: 85.45%;
  padding-bottom: 16.7%;
  left: 50%;
  transform: translateX(-50%);
  top: -3vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 980px) {
  .spot_sec:before {
    display: none;
  }
}
.spot_sec:after {
  content: "";
  position: absolute;
  background-image: url(../images/desert2.svg);
  width: 101%;
  padding-bottom: 27.55%;
  background-size: cover;
  background-repeat: no-repeat;
  left: -2px;
  top: 100%;
}
@media (max-width: 980px) {
  .spot_sec:after {
    display: none;
  }
}

.spot_title {
  max-width: 497px;
  width: 100%;
  margin: 0 auto 130px;
}
@media (max-width: 1440px) {
  .spot_title {
    max-width: 447.3px;
  }
}
@media (max-width: 980px) {
  .spot_title {
    max-width: 300px;
    width: 65vw;
    margin-bottom: 80px;
  }
}

.spot_block {
  position: relative;
}
.spot_block:before {
  content: "";
  position: absolute;
  width: 100vw;
  background-image: url(../images/slide1.svg);
  padding-bottom: 50vw;
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  top: 13%;
  background-position: center;
}
@media (max-width: 1440px) {
  .spot_block:before {
    top: 18%;
  }
}
.spot_block:after {
  content: "";
  position: absolute;
  width: 100vw;
  background-image: url(../images/slide2.svg);
  padding-bottom: 43vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  left: 0;
  top: 57%;
}
@media (max-width: 1440px) {
  .spot_block:after {
    top: 61%;
  }
}
.spot_block ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 200px 0;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
@media (max-width: 1440px) {
  .spot_block ul {
    max-width: 90vw;
    gap: 180px 30px;
    justify-content: center;
  }
}
@media (max-width: 1200px) {
  .spot_block ul {
    max-width: 98vw;
  }
}
@media (max-width: 980px) {
  .spot_block ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 15px;
  }
}
@media (max-width: 768px) {
  .spot_block ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.spot_pic_container {
  position: relative;
  z-index: 1;
}
.spot_pic_container .top {
  position: absolute;
  width: 63px;
  height: 90px;
  z-index: 20;
  top: -25px;
}
@media (max-width: 980px) {
  .spot_pic_container .top {
    width: 40px;
    height: 60px;
  }
}

.spot_big {
  max-width: 580px;
}
@media (max-width: 1440px) {
  .spot_big {
    max-width: 47%;
  }
}
@media (max-width: 980px) {
  .spot_big {
    max-width: 270px;
  }
}
.spot_big .spot_pic {
  padding-bottom: 63.1034482759%;
}
@media (max-width: 1440px) {
  .spot_big .spot_pic {
    padding-bottom: 80%;
  }
}
.spot_big .spot_pic_info,
.spot_big .spot_pic {
  border-radius: 80px;
  overflow: hidden;
}
@media (max-width: 980px) {
  .spot_big .spot_pic_info,
.spot_big .spot_pic {
    border-radius: 50px;
  }
}

.spot_right_upper,
.spot_left_upper {
  max-width: 270px;
}
@media (max-width: 1440px) {
  .spot_right_upper,
.spot_left_upper {
    max-width: 20%;
  }
}
@media (max-width: 980px) {
  .spot_right_upper,
.spot_left_upper {
    max-width: 240px;
  }
}
.spot_right_upper .spot_pic,
.spot_left_upper .spot_pic {
  padding-bottom: 135.5555555556%;
}

.spot_right_upper .spot_pic_info,
.spot_right_upper .spot_pic {
  border-radius: 25px 80px 25px 80px;
}
@media (max-width: 450px) {
  .spot_right_upper .spot_pic_info,
.spot_right_upper .spot_pic {
    border-radius: 45px 20px;
  }
}

.spot_left_upper .spot_pic_info,
.spot_left_upper .spot_pic {
  border-radius: 80px 25px 80px 25px;
}
@media (max-width: 450px) {
  .spot_left_upper .spot_pic_info,
.spot_left_upper .spot_pic {
    border-radius: 20px 45px;
  }
}

.spot_pic {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.spot_pic_container {
  position: relative;
  width: 100%;
}
@media (max-width: 980px) {
  .spot_pic_container {
    height: 340px;
    margin: auto;
  }
}
@media (max-width: 450px) {
  .spot_pic_container {
    height: 300px;
  }
}
.spot_pic_container:hover .spot_pic_info {
  opacity: 1;
  z-index: 2;
}

.spot_pic > figure {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  animation: slider 3s linear infinite;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.spot_pic > figure > img {
  max-width: 100%;
  height: 100%;
}

.spot_pic_info {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  background-color: rgba(9, 175, 173, 0.8);
  transition: all 0.1s linear;
  display: flex;
  opacity: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 3px rgba(108, 108, 108, 0.495);
  letter-spacing: 1px;
}
@media (max-width: 1200px) {
  .spot_pic_info {
    padding: 5px;
    padding-top: 30px;
  }
}
@media (max-width: 980px) {
  .spot_pic_info {
    opacity: 1;
    z-index: 2;
    background-color: rgba(9, 175, 172, 0.457);
  }
}
.spot_pic_info .city_title {
  font-weight: bold;
  font-size: 28px;
  margin-bottom: 16px;
}
@media (max-width: 1440px) {
  .spot_pic_info .city_title {
    font-size: 22px;
  }
}
@media (max-width: 450px) {
  .spot_pic_info .city_title {
    font-size: 16px;
  }
}
.spot_pic_info .wing {
  font-weight: 500;
  position: relative;
}
@media (max-width: 450px) {
  .spot_pic_info .wing {
    font-size: 14px;
  }
}
.spot_pic_info .wing::before, .spot_pic_info .wing:after {
  content: "";
  position: absolute;
  background-image: url(../images/wing.svg);
  width: 35px;
  height: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  top: 55%;
  transform: translateY(-50%);
  filter: drop-shadow(4px 4px 5px #4343437f);
}
@media (max-width: 450px) {
  .spot_pic_info .wing::before, .spot_pic_info .wing:after {
    transform: translateY(-50%);
    width: 25px;
  }
}
.spot_pic_info .wing:before {
  right: calc(100% + 10px);
}
.spot_pic_info .wing:after {
  left: calc(100% + 10px);
  transform: translateY(-50%) scale(-1, 1);
}
.spot_pic_info .bean {
  margin: 25px 0 20px;
  font-size: 18px;
  font-weight: 500;
  transform: translateX(-2px);
}
@media (max-width: 1440px) {
  .spot_pic_info .bean {
    font-size: 16px;
    margin: 15px 0 10px;
  }
}
@media (max-width: 980px) {
  .spot_pic_info .bean {
    margin: 20px 0;
  }
}
.spot_pic_info .bean i {
  display: inline-block;
  background-image: url(../images/gold_bean_icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 19px;
  height: 15px;
  filter: drop-shadow(4px 4px 5px #4343437f);
}
.spot_pic_info .city_intro {
  line-height: 2;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 30px;
  padding: 0 10px;
}
@media (max-width: 1440px) {
  .spot_pic_info .city_intro {
    margin-bottom: 20px;
  }
}
@media (max-width: 450px) {
  .spot_pic_info .city_intro {
    font-size: 12px;
  }
  .spot_pic_info .city_intro br {
    display: none;
  }
}
@media (max-width: 980px) {
  .spot_pic_info .city_intro {
    display: none;
  }
}
.spot_pic_info a {
  text-shadow: none;
  background-color: #fff;
  color: #04383d;
  font-size: 18px;
  font-weight: bold;
  padding: 11px 19px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.15s linear;
}
@media (max-width: 1440px) {
  .spot_pic_info a {
    font-size: 16px;
    padding: 10px 18px;
  }
}
.spot_pic_info a span {
  transform: translateY(-1px);
}
.spot_pic_info a:hover {
  background-color: #04383d;
  color: #5bcfd9;
}

/* 动画关键帧 */
@keyframes slider {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  17% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  67% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
/* 每个图片各延迟1.5秒 */
.spot_pic > figure:nth-child(1) {
  animation-delay: 0s;
}

.spot_pic > figure:nth-child(2) {
  animation-delay: 1.5s;
}

/* 滑入时停止播放 */
.puzzle_sec {
  background: linear-gradient(#eefeba 30%, #88ded6 70%);
  padding-top: 410px;
  padding-bottom: 180px;
}
@media (max-width: 980px) {
  .puzzle_sec {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
.puzzle_sec .container {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}
@media (max-width: 1440px) {
  .puzzle_sec .container {
    max-width: 90vw;
  }
}
.puzzle_sec .puzzle_title {
  max-width: 506px;
  width: 100%;
  margin: 0 auto 120px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1440px) {
  .puzzle_sec .puzzle_title {
    max-width: 455.4px;
  }
}
@media (max-width: 980px) {
  .puzzle_sec .puzzle_title {
    max-width: 300px;
    width: 65vw;
    margin-bottom: 50px;
  }
}
.puzzle_sec .more_btn {
  background-color: #5d331c;
  color: white;
  display: flex;
  justify-content: center;
  max-width: 190px;
  width: 100%;
  margin: auto;
  margin-top: 110px;
  padding: 23px 10px;
  border-radius: 40px;
  transition: all 0.15s ease-in-out;
}
@media (max-width: 980px) {
  .puzzle_sec .more_btn {
    margin-top: 60px;
    padding: 20px 10px;
  }
}
.puzzle_sec .more_btn:hover {
  transform: scale(1.05);
}
.puzzle_sec .more_btn span {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  transform: translateX(-5px);
  position: relative;
}
@media (max-width: 980px) {
  .puzzle_sec .more_btn span {
    font-variant: 16px;
  }
}
.puzzle_sec .more_btn span:after {
  content: "";
  position: absolute;
  top: 30%;
  border: solid white;
  border-width: 0px 2px 2px 0;
  padding: 6px;
  transform: rotate(45deg) translateY(-50%);
  left: calc(100% + 10px);
}

.puzzle_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 125px 70px;
}
@media (max-width: 980px) {
  .puzzle_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px;
  }
}
.puzzle_list li {
  position: relative;
}
.puzzle_list li img {
  width: 100%;
}
.puzzle_list li .user_pic {
  position: absolute;
  width: 100%;
  margin: auto;
  bottom: 0;
  left: 48%;
  transform: translateX(-50%);
}

.rule_sec {
  background: linear-gradient(#88ded6 30%, #5bced9 70%);
  padding-bottom: 440px;
}
@media (max-width: 980px) {
  .rule_sec {
    padding-bottom: 28vw;
  }
}
.rule_sec .container {
  max-width: 1300px;
  width: 100%;
  margin: auto;
  border: 4.5px solid #5d331c;
  padding: 60px 110px 115px;
  position: relative;
}
@media (max-width: 1440px) {
  .rule_sec .container {
    max-width: 90vw;
  }
}
@media (max-width: 1200px) {
  .rule_sec .container {
    padding: 60px 60px 115px;
  }
}
@media (max-width: 980px) {
  .rule_sec .container {
    padding: 40px 20px 60px;
    border-width: 2px;
  }
}
.rule_sec .container:before, .rule_sec .container:after {
  content: "";
  position: absolute;
  background-color: #88ded6;
  width: 100px;
  height: 100px;
  z-index: 1;
}
@media (max-width: 980px) {
  .rule_sec .container:before, .rule_sec .container:after {
    width: 50px;
    height: 50px;
  }
}
.rule_sec .container::before {
  left: -5px;
  top: -5px;
}
.rule_sec .container::after {
  right: -5px;
  top: -5px;
}
.rule_sec .container .dec {
  position: absolute;
  background-image: url(../images/terms_box.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  z-index: 2;
}
@media (max-width: 980px) {
  .rule_sec .container .dec {
    width: 50px;
    height: 50px;
  }
}
.rule_sec .container .right_up {
  top: -4px;
  right: -4px;
  transform: rotate(90deg);
}
@media (max-width: 980px) {
  .rule_sec .container .right_up {
    top: -2px;
    right: -2px;
  }
}
.rule_sec .container .left_up {
  left: -4px;
  top: -4px;
}
@media (max-width: 980px) {
  .rule_sec .container .left_up {
    left: -2px;
    top: -2px;
  }
}
.rule_sec .container .right_bt {
  bottom: -4px;
  right: -4px;
  transform: rotate(180deg);
}
@media (max-width: 980px) {
  .rule_sec .container .right_bt {
    bottom: -2px;
    right: -2px;
  }
}
.rule_sec .container .left_bt {
  bottom: -4px;
  left: -4px;
  transform: rotate(-90deg);
}
@media (max-width: 980px) {
  .rule_sec .container .left_bt {
    bottom: -2px;
    left: -2px;
  }
}
.rule_sec .container .blank {
  position: absolute;
  background-color: #5bcfd9;
  width: 100px;
  height: 100px;
  z-index: 1;
}
@media (max-width: 980px) {
  .rule_sec .container .blank {
    width: 50px;
    height: 50px;
  }
}
.rule_sec .container .blank_left {
  left: -5px;
  bottom: -5px;
}
.rule_sec .container .blank_right {
  right: -5px;
  bottom: -5px;
}
.rule_sec .terms_title {
  max-width: 381px;
  width: 100%;
  margin: 0 auto 55px;
}
@media (max-width: 1440px) {
  .rule_sec .terms_title {
    max-width: 342.9px;
  }
}
@media (max-width: 980px) {
  .rule_sec .terms_title {
    max-width: 280px;
    width: 50vw;
    margin-bottom: 35px;
  }
}
.rule_sec .term_text {
  line-height: 2;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 130px;
}
@media (max-width: 980px) {
  .rule_sec .term_text {
    font-size: 16px;
    margin-bottom: 40px;
  }
}
.rule_sec .thick_title {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
}
@media (max-width: 980px) {
  .rule_sec .thick_title {
    font-size: 18px;
  }
}
.rule_sec .yellow_bg {
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 40px;
  margin-bottom: 150px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: fit-content;
  z-index: 1;
}
@media (max-width: 980px) {
  .rule_sec .yellow_bg {
    font-size: 18px;
    margin: 30px auto 60px;
  }
}
.rule_sec .yellow_bg:after {
  content: "";
  position: absolute;
  width: 104%;
  background-color: #ffe50a;
  height: 68%;
  bottom: -6px;
  z-index: -1;
  left: -7px;
}
.rule_sec .activity_step {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  gap: 35px;
  margin-bottom: 160px;
}
@media (max-width: 980px) {
  .rule_sec .activity_step {
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-bottom: 80px;
  }
}
.rule_sec .activity_step li {
  text-align: center;
  background-color: #fff;
  width: calc(100% / 4);
  padding: 18px 10px 22px;
  border-radius: 310px 310px 20px 20px;
}
@media (max-width: 980px) {
  .rule_sec .activity_step li {
    width: 200px;
  }
}
.rule_sec .activity_step .step {
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 75px;
  margin-top: 30px;
  position: relative;
}
@media (max-width: 980px) {
  .rule_sec .activity_step .step {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 60px;
  }
}
.rule_sec .activity_step .step:after {
  content: "";
  position: absolute;
  background-image: url(../images/step_wing.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 189px;
  height: 18px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  top: 53px;
}
@media (max-width: 980px) {
  .rule_sec .activity_step .step:after {
    top: 42px;
    transform: translateX(-50%) rotate(180deg) scale(0.8);
  }
}
.rule_sec .activity_step .step_info {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 980px) {
  .rule_sec .activity_step .step_info {
    font-size: 16px;
  }
}
.rule_sec .thick_left {
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 25px;
  margin-top: 75px;
}
@media (max-width: 980px) {
  .rule_sec .thick_left {
    font-size: 18px;
    margin-top: 50px;
  }
}
.rule_sec .list_item li {
  line-height: 1.85;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.25px;
}
@media (max-width: 980px) {
  .rule_sec .list_item li {
    font-size: 16px;
    line-height: 1.5;
  }
}
.rule_sec .list_item li a {
  transition: all 0.15s linear;
}
.rule_sec .list_item li a:hover {
  color: #00007b;
}
.rule_sec .short_list {
  margin-bottom: 75px;
}
@media (max-width: 980px) {
  .rule_sec .short_list {
    margin-bottom: 40px;
  }
}
.rule_sec .long_list li:not(:last-child) {
  margin-bottom: 35px;
}

canvas {
  background-color: transparent;
}