body {margin: 0;padding: 0;width: 3840px;height: 2160px;overflow: hidden;font-family: Arial, sans-serif;background: url(../images/02.jpg) no-repeat;background-size: cover;}
.thumbnail-panel {position: absolute;left: 20px;top: 20px;width: 240px;height: 2120px;display: flex;flex-direction: column;}
.scroll-button {width: 100%;height: 60px;background-color: #1c9714;color: white;border: none;font-size: 36px;line-height: 36px;cursor: pointer;margin-bottom: 10px;border-radius: 5px;transition: background-color 0.3s;}
.button-top {margin-top: 10px;}
.scroll-button:hover {background-color: #45a049;}
.scroll-button:disabled {background-color: #666666;cursor: not-allowed;}
.thumbnail-container {flex-grow: 1;overflow: hidden;position: relative;}
.thumbnail-scroll {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow-y: auto;scroll-behavior: smooth;}
.thumbnail-scroll::-webkit-scrollbar {display: none;}
.thumbnail {width: calc(100% - 4px);height: 180px;margin: 6px 0;cursor: pointer;border: 2px solid #fff;border-radius: 5px;transition: transform 0.2s, border-color 0.2s;object-fit: cover;}
.thumbnail:hover {transform: scale(1.02);border-color: #999;}
.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 1000;justify-content: center;align-items: center;}
.modal-content {position: relative;max-width: 90%;max-height: 90%;transition: transform 0.3s;}
.modal-img {max-width: 100%;max-height: 80vh;display: block;box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);}
.close-btn {position: absolute;top: 30px;right: 30px;color: white;font-size: 60px;cursor: pointer;z-index: 1001;}
.zoom-controls {position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);display: flex;background-color: rgba(0, 0, 0, 0.5);padding: 10px;border-radius: 5px;}
.zoom-btn {background-color: #fff;border: none;width: 100px;height: 100px;font-size: 48px;line-height: 48px;border-radius: 50%;margin: 0 5px;cursor: pointer;display: flex;justify-content: center;align-items: center;}

@media screen and (max-width: 1920px){
body {width: 1920px;height: 1080px;}
.thumbnail-panel {left: 10px;top: 10px;width: 120px;height: 1060px;}
.scroll-button {height: 30px;font-size: 18px;line-height: 18px;margin-bottom: 5px;}
.button-top {margin-top: 5px;}
.thumbnail {width: calc(100% - 2px);height: 90px;margin-bottom: 7.5px;border: 1px solid #fff;}
.close-btn {top: 15px;right: 15px;font-size: 30px;}
.zoom-controls {bottom: 10px;left: 50%;transform: translateX(-50%);}
.zoom-btn {width: 50px;height: 50px;font-size: 24px;line-height: 24px;}

}