* {
    margin: 0;
    padding: 0;
}

.wrap {
    width: auto;
    margin: 0 auto;
    max-width: auto;
    position: relative;
}
.bg {
    width: 100%; 
    height: auto; 
    display: block;
}

@media only screen and (max-width: 768px) {
    .bg {
        width: 100%;
        max-width: 100%;
    }
}


@media only screen and (min-width: 769px) {
    .wrap {
        max-width: 100%; 
    }

    .bg {

        height: auto;
        max-width: none;
    }
}

.header {
    position: absolute;
    top: 1%;
    display: flex;
    justify-content: center;
    column-gap: 20px;
    z-index: 2; 
}

.header img {
    width: 40%;
    display: block;
    cursor: pointer;
}

.header .game {
    display: flex;
    list-style: none;
    margin-top: 20px;
    font-size: 48px;
}

.header .game li {
    flex: 1;
    text-align: center;
    line-height: 2;
    color: #fff;
}

.section{
    position: relative;
    margin-top: -11.6%;
}

.section .section-bg {
    width: 100%;
}

.section .btns {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    display: flex;
    justify-content: space-between;
}

.section .btns img {
    width: 46%;
    display: block;
    cursor: pointer;
}
.section .btns p {
    width: 46%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    cursor: pointer;
    background-color: red;
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
    animation: colorChange 1s infinite; 
    color: white;
    font-size: 2vw;
    font-weight: bold;
    border-radius: 10px; 
}
    
@keyframes colorChange {
    0% {
        color: yellow;
        opacity: 1;
        transform: scale(1);
    }
    25% {
        color: white;
        opacity: 1;
        transform: scale(1.1);
    }
    50% {
        color: yellow;
        opacity: 1;
        transform: scale(1);
    }
    75% {
        color: white;
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        color: yellow;
        opacity: 1;
        transform: scale(1);
    }
}

.activity img {
    width: 100%;
    border-radius: 3%;
    margin-top: 7%;
}


.flex-container {
    position: fixed;
    top: 4%;
    display: flex;
    width: 80%;
    left: 50%;
    transform: translate(-50%);
}

.flex-down,
.flex-down1 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.flex-down img,
.flex-down1 img {
    flex-grow: 1;
    max-width: 100%;
    max-height: 100%;
}


.overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
.modal {
            background-color: transparent;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .modal img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
.border-button {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    border: 2px solid red;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 100%;
    color: red;
    font-size: 2vw;
    text-align: center;
}

.border-button:hover {
    color: red; 
}
.glitter-text {
    color: yellow; 
    font-size: 3vw;
    animation: glitter 5s infinite; 
}

@keyframes glitter {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }
    50% {<p class="glitter-text">娉ㄥ唽缁戝畾瀹炲悕鍗抽€佺孩鍖�</p>
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.gxl-txe {
    font-size: 8vw;
    animation: gxl 0.5s infinite;
    animation-timing-function: linear;
}

@keyframes gxl {
    0% {
        color: yellow;
        transform: scale(1);
    }
    10% {
        color: white;
        transform: scale(1);
    }
    20% {
        color: red;
        transform: scale(1);
    }
    30% {
        color: white;
        transform: scale(1);
    }
    40% {
        color: yellow;
        transform: scale(1);
    }
}
.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
    position:fixed;
    top:-10%;
    z-index:9999;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration:10s,3s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowflakes-fall,snowflakes-shake;
    animation-duration:10s,3s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running;
  }
  .snowflake:nth-of-type(0){
    left:1%;-webkit-animation-delay:0s,0s;animation-delay:1s,1s
  }
  .snowflake:nth-of-type(1){
    left:10%;-webkit-animation-delay:2s,2s;animation-delay:1s,1s
  }
  .snowflake:nth-of-type(2){
    left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s
  }
  .snowflake:nth-of-type(3){
    left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s
  }
  .snowflake:nth-of-type(4){
    left:40%;-webkit-animation-delay:3s,3s;animation-delay:3s,3s
  }
  .snowflake:nth-of-type(5){
    left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s
  }
  .snowflake:nth-of-type(6){
    left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s
  }
  .snowflake:nth-of-type(7){
    left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s
  }
  .snowflake:nth-of-type(8){
    left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s
  }
  .snowflake:nth-of-type(9){
    left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s
  }
  .snowflake:nth-of-type(10){
    left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s
  }
  .snowflake:nth-of-type(11){
    left:65%;-webkit-animation-delay:3.5s,3.5s;animation-delay:4s,3.5s
  }
.diversion-tips3 {
    margin-bottom: 18px;
    margin-top: 1px;
    font-size: 24px;
    color: #ec0b0c;
    text-align: center;
    line-height: 24px;
}
 @-webkit-keyframes snowflakes-fall {
    0% {top:-10%}
    100% {top:100%}
  }
  @-webkit-keyframes snowflakes-shake {
    0%,100% {-webkit-transform:translateX(0);transform:translateX(0)}
    50% {-webkit-transform:translateX(80px);transform:translateX(80px)}
  }
  @keyframes snowflakes-fall {
    0% {top:-10%}
    100% {top:100%}
  }
  @keyframes snowflakes-shake {
    0%,100%{ transform:translateX(0)}
    50% {transform:translateX(80px)}
  }