@media (max-width: 767px) {
    #myIframe {
        position: fixed;
        right: 0;
        top: 20vh; /* 这里可以根据实际情况调整 */
        width: 80vw;
        height: 60vh;
        z-index: 10000; /* 这里可以根据实际情况调整 */
        transition: transform 0.5s ease-out;
        transform: translateX(80vw);
    }
    #myDiv {
        position: fixed;
        right: -1vw;
        top: 50%;
        transform-origin: center;
        transform: translateY(-50%);
        transition: transform 0.3s ease-out;
        font-size: 0.1rem;
        width: 18vw;
        height: 52vh;
    }
    #mySvg {
        width: 100%;
        height: 100%;
        transform:scale(0.3) scaleX(-1);
    }
}
@media (min-width: 768px) {
    #myIframe {
        position: fixed;
        right: 0;
        top: 20vh; /* 这里可以根据实际情况调整 */
        width: 40vw;
        height: 60vh;
        z-index: 10000; /* 这里可以根据实际情况调整 */
        transition: transform 0.5s ease-out;
        transform: translateX(40vw);
    }
    #myDiv {
        position: fixed;
        right: -3.6vw;
        top: 50%;
        transform-origin: center;
        transform: translateY(-50%);
        transition: transform 0.3s ease-out;
        width: 14.8vw;
        height: 16vw;
    }
    #mySvg {
        width: 100%;
        height: 100%;
        transform:scale(0.1) scaleX(-1);
    }
}
#mySvg:hover {
    cursor: pointer;
}
#mySvg path{
    fill: #09f;
    stroke: #09f;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dropdown {
    position: fixed;
    top: 70%;
    transform-origin: center;
    transform: translateY(-50%);
    transition: transform 0.3s ease-out;
    border: 1px solid gray;
    padding: 5px;
    z-index: 9999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    border-right: none;
}

.dropdown > div {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 2px 5px;
}
@keyframes loading-spinner {
    to { transform: rotate(360deg); }
}