@charset "utf-8";
/* CSS Document */

        
        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .course-btn {
            background: linear-gradient(135deg, #ff8a00 0%, #ff5e00 100%);
            color: white;
            font-weight: 600;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(255, 94, 0, 0.3);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .course-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 94, 0, 0.4);
        }
        
        .course-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255, 255, 255, 0.3) 0%,
                rgba(255, 255, 255, 0) 60%
            );
            transform: rotate(30deg);
        }
        
        .main-btn {
            background: linear-gradient(135deg, #ff5e00 0%, #ff2d00 100%);
            padding: 12px 24px;
            font-size: 1.1rem;
        }
        
        @media (max-width: 768px) {
            .course-btns {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .course-btn {
                margin: 8px;
                flex: 0 0 calc(50% - 16px);
            }
        }
		
		
		
		    .banner-yu {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 120px;
      background-color: #8B0000;
      color: white;
      text-align: center;
      overflow: hidden;
      position: relative;
      margin: 20px 0;
    }
    
    .banner-image-yu {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #8B0000; /* 添加背景色处理空白区域 */
    }
	.banner-show-yu{object-fit: none; /* 修改此处，使图片完整显示 */}
    
    @media (min-width: 768px) {
      .banner-yu {
        display: flex;
      }
    }
	
	
	        /* 设置图片容器样式 */
        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        /* 设置图片项样式 */
        .image-item {
            width: calc(25% - 10px);
            box-sizing: border-box;
        }

        /* 设置图片样式 */
        .image-item img {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* 媒体查询，当屏幕宽度小于 768px 时，调整布局 */
        @media (max-width: 768px) {
            .image-item {
                width: calc(50% - 10px);
            }
        }

        /* 媒体查询，当屏幕宽度小于 480px 时，调整布局 */
        @media (max-width: 480px) {
            .image-item {
                width: 100%;
            }
        }
		
		        /* 返回顶部按钮样式 */
        .top-btn-yu {
            position: fixed;
            z-index: 999;
            bottom: 50px;
            right: 50px;
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            font-size: 20px;
            display: none; /* 默认隐藏 */
            transition: opacity 0.3s;
        }
        .top-btn-yu::after {
            content: "↑";
            display: block;
            font-size: 24px;
            line-height: 50px;
        }
		
		        .container-yu {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            padding: 20px;
			width:100%;
        }
        .image-wrapper-yu {
            width: 80px;
            height: 50px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .image-wrapper-yu:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
        }
        .image-wrapper-yu img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: sepia(20%);
        }
        @media (max-width: 340px) {
            .container-yu {
                gap: 5px;
                padding: 10px;
            }
            .image-wrapper-yu {
                width: 70px;
                height: 70px;
            }
        }