@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap");
:root {
    --duration: 15s;
}

button {
    position: fixed;
    top: 1vw;
    right: 1vw;
    z-index: 5;
    background: none;
    border: 0;
    outline: none;
    color: white;
    cursor: pointer;
}

body {
    background: #131520;
    overflow: hidden;
    display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
}

.wrapper-images {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*height: 150vh;*/
    /*justify-content: center;*/
    /*left: 50%;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*opacity: 0.8;*/
    /*transform: translate3d(-50%, -50%, 0) perspective(800px);*/
}

.images-line {
    /*-webkit-animation: runner var(--duration) linear infinite;*/
    /*animation: runner var(--duration) linear infinite;*/
    display: flex;
    /*transform: translateX(23%);*/
}
.images-line:nth-child(even) {
    -webkit-animation-duration: calc(var(--duration) * 1.5);
    animation-duration: calc(var(--duration) * 1.5);
}
.images-line .line {
    background-position: 50% 50%;
    background-size: cover;
    flex: none;
    height: 46vh;
    margin: clamp(10px, 2vw, 10px);
    width:26vh;
    position: relative;
    transition: ease-in-out all 0.3s;
    border-radius: 1rem;
}
.images-line .line .img {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: 50% 50%;
    background-size: cover;
    transition: ease-in-out all 0.4s;
    overflow: hidden;
    border-radius: 10px;
}
.images-line .line:hover .img {
    cursor: pointer;
    transform: scale(1.2) translatez(0px);
}
.images-line .line:hover:after {
    filter: blur(35px) opacity(0.8);
}
.images-line .line:after {
    content: " ";
    background: inherit;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 3vh;
    position: absolute;
    background-size: cover;
    z-index: -1;
    transition: ease-in-out all 0.3s;
    filter: blur(25px) opacity(0.8);
}

.popup {
    display: none; /* 初始状态隐藏 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.popup .closeBtn{width: 50px; height: 50px; padding: 15px; border-radius: 100px; text-align: center; line-height: 50px; background-color: rgba(0,0,0,.45); color:#ffffff; position: absolute; right: 5vh; top:5vh; z-index: 2;}
.popup .closeBtn img{width: 50px; height: 50px;}
.popup .ContentBox{width: 100%; height: 100%; position: relative; z-index: 1; text-align: center;}
.popup .ContentBox img{width: 100vw; height: 100vh; margin: 0 auto; text-align: center;}

@-webkit-keyframes runner {
    to {
        transform: translateX(-10.4%);
    }
}

@keyframes runner {
    to {
        transform: translateX(-10.4%);
    }
}