
.div-1 {
    background-color: rgb(255, 255, 255);
}

.div-2 {
    background-color: #eaeaea;
}

.div-3 {
    background-color: #FBD603;
}

.scroll-container {
    display: flex; 
    overflow-x: auto;
    scroll-snap-type: x mandatory; 
    gap: 12px; 
    padding: 10px;
    scrollbar-width: 2px;
    height: 480px;
}

.scroll-item {
    flex: 0 0 auto; 
    scroll-snap-type: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.scroll-item img {
    display: inline-block;
    height: 350px; 
    width: auto;
    border-radius: 6px; 
    }

.scroll-item .caption {
    display: block;
    max-width: 100%;
    margin-top: 8px;
    padding: 5px; 
    border: 2px solid #ccc; 
    border-radius: 5px; 
    background-color: #f9f9f9; 
    font-size: 18px; 
    color: #333; 
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height:1.2;
    }

.gallery-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    line-height: 200px;
}


.btn {
    border: 1px solid;
    background-color: #f8f9f9;
    font-size: 19px;
    padding: 2px 8px;
    border-radius:10px;
    }

.one {
color: #7E57C2;
}

.two {
color: #FFAB40; 
}

.three {
color: #2980b9;
}

.btn:hover {
color: white;
border: 0;
}

.one:hover {
background-color: #7E57C2;
}

.two:hover {
background-color: #FFAB40;
}

.three:hover {
background-color: #2980b9;
}

@keyframes change_text {
    0% {
        opacity: 0;
    }
    
    10% {
        opacity: 1;
    }
}

.choice_container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
  }
  
.image-list {
    margin-top: 35px;
    display: flex;
    flex-direction: column; 
    gap: 10px; 
  }

.image-list img:hover {
    border-color: #007bff; 
}
  
.image-list img {
    height: 80px;
    cursor: pointer; 
    border: 2px solid #ccc;
    border-radius: 4px;
  }
  
.selected-image img {
    height: 200px;
    border-radius: 4px;
  }

.selected-image .caption {
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    font-size: 23px; 
    font-weight: bold;
}

.new-view-container {
    width: 100%; 
    height: 100%; 
    border: 2px solid #ccc; 
    border-radius: 4px;
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    padding-left: 20px;
    padding-left: 5px;
}
    
.new-view-container img {
    width: 150px;
    height: 160px;
    border-radius: 4px;
}


.gif-container {
    margin-top: 45px;
    display: flex;
    flex-direction: row; 
    gap: 80px;
    align-items: center;
    justify-content: center;
  }

.gif-container img {
    width: 200px;
    height: auto; 
    border-radius: 4px;
  }

.gif-hover-image {
    display: block;
    border-radius: 4px;
    width: 100%; /* 图片宽度适配 */
    height: auto; /* 保持宽高比 */
    cursor: pointer;
    transition: all 0.3s ease;
  }

.gif-hover-image:hover {
    transform: scale(1.05); 
}