/* 基础样式 */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  

body {  
    font-family: 'Arial', sans-serif;  
    line-height: 1.6;  
    color: #333;  
    overflow-x: hidden;  
}  

.container {  
    width: 100%;  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 0 20px;  
}  

/* 导航样式 */  
#header {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    padding: 15px 0;  
    background-color: #FF6B35;  
    transition: all 0.3s ease;  
    z-index: 1000;  
}  

#header.scrolled {  
    background-color: white;  
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
}  

#header.scrolled .logo,  
#header.scrolled nav ul li a {  
    color: #333;  
}  

.logo {  
    font-family: 'ZCOOL KuaiLe', cursive;   
    font-size: 28px;  
    color: white;  
    float: left;  
}  

nav {  
    float: right;  
}  

nav ul {  
    display: inline-block;  
    margin-right: 20px;  
}  

nav ul li {  
    display: inline-block;  
    margin-left: 20px;  
}  

nav ul li a {  
    color: white;  
    text-decoration: none;  
    font-size: 16px;  
    transition: color 0.3s;  
}  

nav ul li a:hover {  
    color: #FFD166;  
}  

.btn-trial {  
    display: inline-block;  
    padding: 8px 20px;  
    background-color: #FFD166;  
    color: #333;  
    border-radius: 30px;  
    text-decoration: none;  
    font-weight: bold;  
    transition: all 0.3s;  
}  

.btn-trial:hover {  
    background-color: #FFEE32;  
    transform: translateY(-2px);  
}  

/* Banner区域 */  
.banner {  
    position: relative;  
    height: 100vh;  
    overflow: hidden;  
    margin-top: 60px;  
}  

.banner-image {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: url('../image/banner.jpg') no-repeat center center;  
    background-size: cover;  
    animation: breathe 15s infinite alternate ease-in-out;  
}  

@keyframes breathe {  
    0% {  
        transform: scale(1);  
    }  
    100% {  
        transform: scale(1.1);  
    }  
}  

.banner-content {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    text-align: center;  
    color: white;  
    width: 100%;  
    padding: 0 20px;  
}  

.banner-content h1 {  
    font-size: 4rem;  
    margin-bottom: 20px;  
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  
    opacity: 0;  
    animation: fadeInDown 1.5s forwards;  
}  

.banner-content h2 {  
    font-size: 2rem;  
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  
    opacity: 0;  
    animation: fadeInUp 1.5s 0.5s forwards;  
}  

@keyframes fadeInDown {  
    0% {  
        opacity: 0;  
        transform: translateY(-50px);  
    }  
    100% {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  

@keyframes fadeInUp {  
    0% {  
        opacity: 0;  
        transform: translateY(50px);  
    }  
    100% {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  

/* 免费试听区域 */  
.free-trial {  
    padding: 80px 0;  
    background-color: #F7F7F7;  
    text-align: center;  
}  

.free-trial h3 {  
    font-size: 2.5rem;  
    color: #FF6B35;  
    margin-bottom: 40px;  
}  

.trial-image {  
    max-width: 100%;  
    height: auto;  
    margin-bottom: 30px;  
    border-radius: 10px;  
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
}  

.btn-trial-large {  
    display: inline-block;  
    padding: 12px 30px;  
    background-color: #FF6B35;  
    color: white;  
    border-radius: 30px;  
    text-decoration: none;  
    font-weight: bold;  
    font-size: 1.2rem;  
    transition: all 0.3s;  
}  

.btn-trial-large:hover {  
    background-color: #FF8C42;  
    transform: translateY(-3px);  
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);  
}  

/* 预约试听流程 */  
.process {  
    padding: 80px 0;  
    text-align: center;  
}  

.process h3 {  
    font-size: 2.5rem;  
    color: #FF6B35;  
    margin-bottom: 40px;  
}  

.process-image {  
    max-width: 100%;  
    height: auto;  
    border-radius: 10px;  
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
}  

/* 课程体系 */  
.curriculum {  
    padding: 80px 0;  
    background-color: #F7F7F7;  
    text-align: center;  
}  

.curriculum h3 {  
    font-size: 2.5rem;  
    color: #FF6B35;  
    margin-bottom: 20px;  
}  

.subtitle {  
    max-width: 800px;  
    margin: 0 auto 40px;  
    font-size: 1.1rem;  
    color: #555;  
}  

.curriculum-image {  
    max-width: 100%;  
    height: auto;  
    border-radius: 10px;  
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
}  

/* 底部导航 */  
footer {  
    background-color: #333;  
    color: white;  
    padding: 50px 0;  
    text-align: center;  
}  

.footer-logo {  
    font-family: 'ZCOOL KuaiLe', cursive;   
    font-size: 2rem;  
    margin-bottom: 20px;  
}  

.footer-nav ul {  
    list-style: none;  
}  

.footer-nav ul li {  
    display: inline-block;  
    margin: 0 15px;  
}  

.footer-nav ul li a {  
    color: white;  
    text-decoration: none;  
    transition: color 0.3s;  
}  

.footer-nav ul li a:hover {  
    color: #FFD166;  
}  

/* 响应式设计 */  
@media (max-width: 768px) {  
    .logo {  
        float: none;  
        text-align: center;  
        margin-bottom: 10px;  
    }  
    
    nav {  
        float: none;  
        text-align: center;  
    }  
    
    nav ul {  
        margin-right: 0;  
        margin-bottom: 15px;  
    }  
    
    .banner-content h1 {  
        font-size: 2.5rem;  
    }  
    
    .banner-content h2 {  
        font-size: 1.5rem;  
    }  
    
    .free-trial h3,  
    .process h3,  
    .curriculum h3 {  
        font-size: 2rem;  
    }  
    
    .footer-nav ul li {  
        display: block;  
        margin: 10px 0;  
    }  
}

/* 新增部分 */  
.banner-content h1 {  
    font-family: 'ZCOOL KuaiLe', cursive;   
    color: white;  
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);  
}  

.banner-content h2 {  
    color: white;  
    font-weight: 300;  
}  

/* 修改按钮颜色 */  
.btn-trial-large {  
    background-color: #FF8C42;  
    box-shadow: 0 4px 8px rgba(255, 140, 66, 0.3);  
}  

.btn-trial-large:hover {  
    background-color: #FF6B35;  
}  

/* 新增课程体系区域样式 */  
.curriculum {  
    background: linear-gradient(135deg, #FFF8F0 0%, #FFE8D6 100%);  
}  

/* 底部样式增强 */  
footer {  
    background: linear-gradient(to right, #FF6B35, #FF8C42);  
    padding: 60px 0;  
}  

.footer-logo {  
    color: white;  
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);  
}

/* About页面特定样式 */  
.about-banner {  
    position: relative;  
    height: 400px;  
    overflow: hidden;  
    margin-top: 60px;  
}  

.about-banner-image {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: url('../image/about.jpg') no-repeat center center;  
    background-size: cover;  
}  

.about-section {  
    padding: 60px 0;  
    text-align: center;  
}  

.about-section h3 {  
    font-size: 2.5rem;  
    color: #FF6B35;  
    margin-bottom: 30px;  
}  

.about-section p {  
    max-width: 800px;  
    margin: 0 auto 20px;  
    font-size: 1.1rem;  
    line-height: 1.8;  
    color: #555;  
}  

.bg-gray {  
    background-color: #F7F7F7;  
}  

@media (max-width: 768px) {  
    .about-banner {  
        height: 300px;  
    }  
    
    .about-section h3 {  
        font-size: 2rem;  
    }  
    
    .about-section p {  
        font-size: 1rem;  
        padding: 0 15px;  
    }  
}

/* Textbook页面特定样式 */  
.textbook-banner {  
    position: relative;  
    height: 400px;  
    overflow: hidden;  
    margin-top: 60px;  
}  

.textbook-banner-image {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: url('../image/textbook.jpg') no-repeat center center;  
    background-size: cover;  
}  

.textbook-section {  
    padding: 60px 0;  
    text-align: center;  
}  

.textbook-section h3 {  
    font-size: 2.5rem;  
    color: #FF6B35;  
    margin-bottom: 20px;  
}  

.curriculum-table {  
    margin: 40px auto;  
    overflow-x: auto;  
}  

.curriculum-table table {  
    width: 100%;  
    max-width: 900px;  
    margin: 0 auto;  
    border-collapse: collapse;  
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
    border-radius: 10px;  
    overflow: hidden;  
}  

.curriculum-table th {  
    padding: 15px;  
    text-align: center;  
    font-size: 1.3rem;  
    color: white;  
}  

.curriculum-table td {  
    padding: 15px;  
    text-align: left;  
    border-bottom: 1px solid #eee;  
    vertical-align: top;  
}  

.curriculum-table tbody tr:last-child td {  
    border-bottom: none;  
}  

.stage-beginner {  
    background-color: #FF9A3C;  
}  

.stage-intermediate {  
    background-color: #FF6B35;  
}  

.stage-advanced {  
    background-color: #D64550;  
}  

@media (max-width: 768px) {  
    .textbook-banner {  
        height: 300px;  
    }  
    
    .textbook-section h3 {  
        font-size: 2rem;  
    }  
    
    .curriculum-table th {  
        font-size: 1.1rem;  
    }  
    
    .curriculum-table td {  
        padding: 10px;  
        font-size: 0.9rem;  
    }  
}

/* Business页面特定样式 */  
.business-banner {  
    position: relative;  
    height: 400px;  
    overflow: hidden;  
    margin-top: 60px;  
}  

.business-banner-image {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: url('../image/business.jpg') no-repeat center center;  
    background-size: cover;  
}  

.business-section {  
    padding: 60px 0;  
    text-align: center;  
}  

.business-section h3 {  
    font-size: 2.5rem;  
    color: #FF6B35;  
    margin-bottom: 30px;  
}  

.business-section p {  
    max-width: 800px;  
    margin: 0 auto 20px;  
    font-size: 1.1rem;  
    line-height: 1.8;  
    color: #555;  
}  

.business-section ol {  
    max-width: 700px;  
    margin: 0 auto 30px;  
    text-align: left;  
    font-size: 1.1rem;  
    line-height: 1.8;  
    color: #555;  
}  

.business-section ol li {  
    margin-bottom: 10px;  
}  

/* Download页面特定样式 */  
.download-section {  
    padding: 80px 0;  
    text-align: center;  
}  

.download-section h3 {  
    font-size: 2.5rem;  
    color: #FF6B35;  
    margin-bottom: 50px;  
}  

.download-item {  
    max-width: 500px;  
    margin: 0 auto;  
    padding: 30px;  
    background-color: white;  
    border-radius: 10px;  
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
}  

.download-item h4 {  
    font-size: 1.5rem;  
    color: #333;  
    margin-bottom: 20px;  
}  

.btn-download {  
    display: inline-block;  
    padding: 12px 30px;  
    background-color: #FF6B35;  
    color: white;  
    border-radius: 30px;  
    text-decoration: none;  
    font-weight: bold;  
    font-size: 1.2rem;  
    transition: all 0.3s;  
}  

.btn-download:hover {  
    background-color: #FF8C42;  
    transform: translateY(-3px);  
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);  
}  

/* 响应式设计补充 */  
@media (max-width: 768px) {  
    .business-banner,  
    .business-banner-image {  
        height: 300px;  
    }  
    
    .business-section h3,  
    .download-section h3 {  
        font-size: 2rem;  
    }  
    
    .business-section p,  
    .business-section ol {  
        font-size: 1rem;  
        padding: 0 15px;  
    }  
    
    .download-item {  
        padding: 20px;  
    }  
    
    .download-item h4 {  
        font-size: 1.3rem;  
    }  
    
    .btn-download {  
        padding: 10px 25px;  
        font-size: 1rem;  
    }  
}  

@media (max-width: 480px) {  
    .business-banner,  
    .business-banner-image {  
        height: 250px;  
    }  
    
    .business-section ol {  
        padding-left: 20px;  
    }  
    
    .download-item {  
        width: 90%;  
    }  
}  


.about-banner {  
    width: 100%;  
    height: 400px; /* Adjust height as needed */  
    position: relative;  
    overflow: hidden;  
}  

.about-banner-image {  
    width: 100%;  
    height: 100%;  
    background-image: url('../image/about.jpg');  
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;  
}

.textbook-banner {  
    width: 100%;  
    height: 400px; /* Adjust height as needed */  
    position: relative;  
    overflow: hidden;  
}  

.textbook-banner-image {  
    width: 100%;  
    height: 100%;  
    background-image: url('../image/textbook.jpg');  
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;  
}