#modal-start {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 2rem;

    z-index: 9999;
    background-color: rgba(33, 27, 27, 0.5);
}

#modal-start > .zd-modal-content {
    position: fixed;
    top: 50vh;
    left: 50%;

    transform: translate(-50%, -50%);
    border-radius: 5px;

    background: #000;
    opacity: 0.7;
    padding: 30px;
}

#modal-start > .zd-modal-content > .zd-enter-button {
    margin-top: 30px;


}

.zd-enter-button-main {
    width: 130px;
    height: 40px;
    color: #000;
    font-family: "Bakbak One", cursive;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
    background-color: #89d8d3;
    background-image: linear-gradient(315deg, #89d8d3 0%, #dcea54 74%);
    border: none;
    z-index: 1;
}

.zd-enter-button-main {
  background: #00ffa3;
  /*background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);*/
    background:  linear-gradient(315deg, #89d8d3 0%, #a7b420 74%);
  border: none;
  
}
.zd-enter-button-main:before {
  height: 0%;
  width: 2px;
}
.zd-enter-button-main:hover {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

#modal-start > .zd-modal-content p {
    text-align: center;
    font-family: "Bakbak One", cursive;
    text-shadow: 0 0 1px #659b10;
    color: #fff;
    animation: 1s blink 88 steps(1); /* 或 step-end */
}

@media  screen and (max-width: 768px) {
    #modal-start > .zd-modal-content {
        width: 80%;
        
    }
    #modal-start {
        font-size: 1.5rem;
    }
}

@keyframes blink {
    50% {
        color: transparent;
    }
}