* {
margin: 0;/* 设置外边距为0 */
padding: 0;/* 设置内边距为0 */
box-sizing: border-box;/* 设置盒模型为 border-box，使得 width 和 height 包括内边距和边框 */}
body {
    font-family: 'Arial', sans-serif;/* 设置全局字体为 Arial，如果不可用则使用无衬线字体 */
    line-height: 1.0;/* 设置行高以提高文本的可读性 */}
header {/* 导航栏样式 */
background-color: #333;/* 设置页眉的背景颜色为深灰色 */
padding: 1rem 0;/* 设置元素的上下内边距为 1rem，左右内边距为 0 */}
.nav-list {
display: flex; /* 使用弹性盒子布局模型 */
justify-content: flex-start; /* 设置弹性容器中子项的主轴对齐方式为从起点开始对齐 */
align-items: center; /* 将子元素在交叉轴上居中对齐 */
list-style: none;/* 移除列表项的默认样式符号 */
max-width: 1300px; /* 设置元素的最大宽度为1200像素 */
margin: 0 auto; /* 将元素的左右外边距设置为自动，使元素在其包含块中水平居中 */
padding: 0 5px;/* 设置元素的左右内边距为20像素，上下内边距为0像素 */}
.nav-list li {
margin-right: 1rem; /* 设置导航列表项之间的右边距为1rem */}
.nav-list a {
color: white;/* 设置链接文字颜色为白色 */
text-decoration: none;/* 去掉链接下的下划线 */
font-size: 1.1rem;/* 设置链接文字大小为1.1倍的根字体大小 */
transition: color 0.3s;/* 添加颜色变化过渡效果，持续时间为0.3秒 */}
.nav-list a:hover {
color: #f0c14b;/* 当导航列表中的链接被悬停时，更改其文字颜色为#f0c14b */}
.search-box {/* 搜索框样式 */
margin-left: auto;/* 将左侧外边距设置为自动，常用于使元素向右对齐 */
display: flex; /* 设置元素为弹性盒子容器，使其子元素可以使用弹性盒子布局模型进行排列 */
gap: 0.5rem;/* 设置网格或弹性布局中项之间的间距为 0.5 倍的根字体大小 */}
.search-box input {/* 设置搜索框中输入元素的样式 */
padding: 0.5rem; /* 设置内边距为0.5rem */
border: none;/* 移除元素的边框 */
border-radius: 10px; /* 设置元素的边框为圆角，半径为4像素 */}
.search-box button {
padding: 0.5rem 1rem;/* 设置按钮的内边距 */
background-color: #f0c14b;/* 设置按钮的背景颜色 */
border: none;/* 去掉按钮的边框 */
border-radius: 4px;/* 设置按钮的圆角 */
cursor: pointer;/* 更改鼠标悬停时的光标样式 */
transition: background-color 0.3s;/* 设置背景颜色的过渡效果 */}
.search-box button:hover {
background-color: #ddb347; /* 当鼠标悬停在搜索框内的按钮上时，更改按钮的背景颜色为 #ddb347 */}
                                                                                                                     /* 上面是导航栏 */
/* 电影展示区域样式 */
/* 定义电影容器的样式 */
.movie-container {
    padding: 1rem 0rem; /* 设置元素的内边距，顶部和底部为2rem，左侧和右侧为1rem */
    max-width: 1300px;/* 设置元素的最大宽度为1300像素 */
    margin: 0 auto; /* 将元素的左右外边距设置为自动，使其水平居中对齐 */}
.movie-section-header {
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 子元素在主轴上两端对齐 */
    align-items: center; /* 子元素在交叉轴上居中对齐 */
    margin-bottom: -2px; /* 设置容器底部外边距 */
    padding: 0 10px; /* 设置容器左右内边距 */}
.movie-section-title {
    font-size: 1rem;/* 设置字体大小为1.5rem */
    color: #000000;/* 设置字体颜色为#333 */
    font-weight: 600;/* 设置字体粗细为600 */}
.movie-section-more {
    color: #ff3c3c;/* 设置文字颜色为亮红色 */
    text-decoration: none;/* 去除文字的下划线 */
    font-size: 0.9rem;/* 设置字体大小为0.9rem */
    transition: color 0.3s;/* 添加颜色变化的过渡效果，持续时间为0.3秒 */}
.movie-section-more:hover {
    color: #ff0000;/* 当鼠标悬停时，文字颜色变为深红色 */
    text-decoration: underline;/* 文字下划线 */}
.movie-grid {
    display: grid; /* 设置布局为网格布局 */
    grid-template-columns: repeat(6, 1fr); /* 定义网格列数为6列，每列宽度相同 */
    gap: 0.5rem; /* 设置网格项之间的间距为1.5rem */}
.movie-card {
    background: #fff;/* 设置电影卡片的背景颜色为白色 */
    border-radius: 8px;/* 设置电影卡片的圆角为8像素 */
    overflow: hidden;/* 隐藏超出电影卡片边界的内容 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);/* 添加阴影效果，提升卡片的立体感 */
    transition: transform 0.3s ease;/* 定义卡片在变换时的过渡效果，时间为0.3秒，效果为ease */}
.movie-card:hover {transform: translateY(5px);/* 将元素沿Y轴向上移动5像素 */}
.movie-card img {/* 设置电影卡片中图片的样式 */
    width: 100%;
    height: auto; /* 设置元素的高度为自动，由内容决定 */
    aspect-ratio: 2/3; /* 设置元素的宽高比为2:3 */
    object-fit: cover; /* 使元素的内容覆盖整个元素的宽高比，可能会裁剪内容 */
    display: block; /* 将元素设置为块级元素，占据其父容器的全部宽度 */}
.movie-card h3 {/* 电影卡片标题样式 */
    padding: 0.2rem 1rem 0.2rem 0rem; /* 设置元素的内边距，上右下左分别为1rem, 1rem, 0.5rem, 1.5rem */
    font-size: 1rem;/* 设置字体大小为1rem */
    text-align: left; /* 设置文本对齐方式为左对齐 */
    color: #000000;/* 设置文本颜色为深灰色 */}
.movie-info {
    display: flex; /* 设置为弹性盒子布局 */
    flex-wrap: wrap; /* 允许子元素换行 */
    gap: 0rem; /* 设置子元素之间的间距 */
    padding: 1 1rem 1rem 1rem; /* 设置元素的内边距，上右下左分别为1rem, 1rem, 0.5rem, 1.5rem */
    font-size: 0.8rem; /* 设置字体大小 */}
.movie-info span {/* 设置电影信息中 span 元素的内边距和边框半径 */
    padding: 0.1rem 0.1rem; /* 设置元素的内边距，上下的内边距为0.2rem，左右的内边距为0.5rem */
    border-radius: 4px;/* 设置边框的圆角半径为4像素 */}
.year {background-color: #e6f2ff;color: #002499;}
.quality {background-color: #e6ffe6;color: #008d00;}
.genre {background-color: #fff2e6;color: #ad5600;}
.country {background-color: #f0e6ff;color: #6600cc;}
                                                                                                                        /* 电影卡片 */
/* 分页按钮样式 */
.pagination {
    display: flex;/* 设置容器为弹性布局 */
    justify-content: center;/* 使子元素在主轴上居中对齐 */
    gap: 2px;/* 设置子元素之间的间距为 10px */
    margin: 5px 0;/* 设置容器上下外边距为 20px，左右外边距为 0 */
    padding: 10px;/* 设置容器内边距为 10px */}

.pagination-btn {
    padding: 8px 12px;/* 设置按钮的内边距 */
    border: none;/* 去掉按钮的边框 */
    border-radius: 20px;/* 设置按钮的圆角半径为 20px */
    font-weight: bold;/* 设置按钮的字体粗细为粗体 */
    cursor: pointer;/* 设置鼠标悬停时的光标样式 */
    transition: all 0.3s ease;/* 设置按钮的过渡效果，时间为 0.3 秒，效果为 ease */
    box-shadow: 0 2px 5px rgba(38, 13, 13, 0.2);}

.first-btn {background: linear-gradient(45deg, #FF9A8B, #FF6B95);color: rgb(0, 0, 0);}
.prev-btn {background: linear-gradient(45deg, #FFD166, #FFA07A);color: rgb(0, 0, 0);}
.next-btn {background: linear-gradient(45deg, #06D6A0, #4CC9F0);color: rgb(0, 0, 0);}
.last-btn {background: linear-gradient(45deg, #A78BFA, #818CF8);color: rgb(0, 0, 0);}
.page-numbers {display: flex;gap: 5px;}

.page-numbers button {
    padding: 8px 12px; /* 设置元素的内边距 */
    border: none; /* 去除元素的边框 */
    border-radius: 50%; /* 将元素的边框设置为圆形 */
    background: linear-gradient(45deg, #4CC9F0, #4895EF); /* 设置背景为45度渐变色 */
    color: rgb(0, 0, 0); /* 设置文本颜色为白色 */
    font-weight: bold; /* 设置字体加粗 */
    cursor: pointer; /* 设置鼠标悬停时的光标为指针形状 */
    transition: all 0.3s ease; /* 设置所有属性变化的过渡效果，持续时间为0.3秒，过渡方式为ease */}

.page-numbers button.active {background: linear-gradient(45deg, #fbfe4c, #fcff5f);}

.pagination-btn:hover, .page-numbers button:hover {
    transform: translateY(-2px);/* 设置元素垂直平移-2像素，创建轻微上浮效果 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);/* 添加阴影效果，提升元素的立体感 */
    opacity: 0.9;/* 设置元素的透明度为90%，使其稍微透明 */}

.pagination-btn:active, .page-numbers button:active {transform: translateY(0);/* 设置元素的平移效果为0，即恢复原状 */}

/* 首页蓝色背景 */
.feature-banner {
    background-color: #f0f7ff;/* 设置背景颜色为浅蓝色 */
    padding: 1.5rem;/* 设置内边距为1.5rem */
    margin: 1rem 0;/* 设置上下外边距为1rem，左右外边距为0 */
    text-align: center;/* 设置文本居中对齐 */
    border-radius: 8px;/* 设置边框圆角为8px */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */}
.feature-banner h2 {
    font-size: 1.5rem; /* 设置字体大小为1.5rem */
    color: #0013be; /* 设置文本颜色为蓝色 */
    margin: 0; /* 移除文本的外边距 */
    font-weight: 600; /* 设置字体粗细为600 */}
@media (max-width: 768px) {.feature-banner h2 {font-size: 1rem;}}
                                                                                                                              /* 首页蓝色背景 */               


/* 分类导航样式 */
.category-nav {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许子元素换行 */
    gap: 0.5rem; /* 设置子元素之间的间距 */
    margin: 0.5rem 0; /* 设置上下外边距 */
    padding: 0 5px; /* 设置左右内边距 */}
.category-btn {
    /* 设置内边距、背景颜色、边框、边框半径、文字颜色、字体大小、鼠标悬停样式及过渡效果 */
        padding: 0.5rem 1rem;
        background-color: rgb(221, 218, 255);
        border: none;
        border-radius: 20px;
        color: #000000;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.3s;}
.category-btn:hover {background-color: #6d72ff;}
.category-btn.active {
    background-color: #f0c14b;
    color: #000000;
    font-weight: bold;}
/* 电影标题样式 */
.movie-section-title {
    font-size: 1.5rem;/* 设置字体大小为1.5rem */
    color: #000000;/* 设置文字颜色为#f0c14b */
    font-weight: bold;/* 设置文字加粗 */
    margin: 0rem 0;/* 设置上下外边距为1rem，左右外边距为0 */
    padding: 0 10px;/* 设置左右内边距为10px */}
                                                                                            /* 分类导航样式 */


/* 电影卡片链接样式 */
.movie-card a {text-decoration: none;border-bottom: none;}
.movie-card a:hover {text-decoration: none;border-bottom: none;}

/* 响应式布局 */
@media (max-width: 768px) {
    /* 导航栏布局调整 */
    .nav-list {
        flex-wrap: wrap;
    }
    
    /* 搜索框整体换行但内部不换行 */
    .search-box {
        order: 1;
        width: 100%;
        margin-top: 0.5rem;
        flex-wrap: nowrap;
    }
    .search-box input {
        flex-grow: 1;
        min-width: 0;
    }
    
    /* 电影卡片网格改为2列 */
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 分页数字按钮允许换行 */
    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }
}





 /* DY类型选择 */
.filter-buttons {/* 筛选按钮容器样式 */
    display: flex;/* 使用 flex 布局模型 */justify-content: center; /* 将弹性容器内的子元素在主轴上居中对齐 */
    gap: 1rem; /* 设置网格项之间的间距为1rem */
    padding: 0.5rem;/* 设置元素的内边距为1rem */
    background-color: #ffffff;/* 设置背景颜色为浅灰色 */
    border-bottom: 1px solid #2f2f2f;/* 设置底部边框为1像素宽的实线，颜色为浅灰色 */}
.filter-btn {/* 筛选按钮样式 */
    padding: 0.55rem 1rem; /* 设置元素的内边距 */
    border: none; /* 去除元素的边框 */
    border-radius: 4px; /* 设置元素的边框圆角 */
    cursor: pointer;/* 设置光标为指针样式，表示该元素可点击 */
    font-weight: bold;/* 设置字体加粗 */
    transition: all 0.3s;/* 设置所有属性的过渡效果为0.3秒 */}
.filter-btn.year {background-color: #e6f2ff;color: #00196c;}
.filter-btn.genre {background-color: #fff2e6;color: #695900;}
.filter-btn.country {background-color: #f0e6ff;color: #3d007a;}
.filter-btn:hover {
    transform: translateY(-2px);/* 向上移动元素2像素 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);/* 添加阴影效果，向右偏移0像素，向下偏移2像素，模糊半径5像素，颜色为黑色半透明 */}
.filter-panels {/* 筛选面板样式 */
    position: relative;/* 设置元素的定位方式为相对定位 */
    max-width: 1300px;/* 设置元素的最大宽度为1300像素 */
    margin: 0 auto;/* 将元素的左右外边距设置为自动，使其水平居中 */}
.filter-panel {
    display: none; /* 隐藏元素 */
    position: absolute; /* 设置绝对定位 */
    top: 0; /* 将元素的顶部边缘放置在包含块的顶部边缘 */
    left: 0; /* 设置元素的左边距为0 */
    right: 0;/* 设置元素的右侧边缘与包含块的右侧边缘对齐 */
    background-color: rgb(255, 255, 255); /* 设置背景颜色为白色 */
    padding: 0.5rem; /* 添加内边距，上下左右均为1rem */
    border-radius: 0 0 8px 8px;/* 设置边框底部两个角为8px的圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);/* 为元素添加阴影效果 */
    z-index: 10; /* 设置元素的堆叠顺序 */}
.filter-panel.active {
    display: block;
    animation: fadeIn 0.3s ease; /* 设置元素的动画效果为fadeIn，持续时间为0.3秒，缓动函数为ease */}
.filter-options {
    display: grid; /* 定义布局为网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* 创建自动填充的网格列，每列最小宽度为120px，最大为可用空间的1fr */
    gap: 0.5rem; /* 设置网格项之间的间距为0.5rem */}
.filter-option {
    padding: 0.5rem; /* 设置内边距为 0.5rem */
    border-radius: 4px; /* 设置边框圆角为 4px */
    cursor: pointer; /* 设置鼠标悬停时的光标为指针形状 */
    transition: all 0.2s; /* 定义所有属性的过渡效果为0.2秒 */
    text-align: center; /* 设置文本内容水平居中对齐 */}
.filter-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.year-panel .filter-option {background-color: #e6f2ff;color: #002499;}
.genre-panel .filter-option {background-color: #fff2e6;color: #ad5600;}
.country-panel .filter-option {background-color: #f0e6ff;color: #6600cc;}
                                                                                                                                      /* DY类型选择 */



/* 电影详情页面的布局样式 */
.movie-detail {
    max-width: 1200px; /* 设置最大宽度为1200像素 */
    margin: 2rem auto; /* 设置上下外边距为2rem，并使元素水平居中 */
    padding: 0 1rem;/* 设置元素的左右内边距为 1rem，上下内边距为 0 */
    display: grid; /* 使用网格布局来排列子元素 */
    grid-template-columns: 300px 1fr; /* 定义网格布局的两列宽度，第一列固定为300像素，第二列占据剩余空间 */
    gap: 1rem;/* 设置网格或弹性布局中项目的间距为 2rem */}

.movie-poster img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);/* 设置元素的边框圆角为8像素 */}

/* 电影标题的样式 */
.movie-title {
    font-size: 2rem;/* 设置字体大小为2rem */
    margin-bottom: 0rem;/* 设置元素底部的外边距为1.5个单位 */
    color: #000000;}

/* 基本信息容器的样式 */
.basic-info {
    margin-bottom: 1rem;
    /* 设置元素底部边距为1.5个rem单位 */}

/* 信息标签的样式 */
.info-label {
    font-weight: bold; /* 设置字体为粗体 */
    color: #000000; /* 设置文本颜色为深灰色 */
    display: inline-block;/* 设置元素为行内块级元素，可以同时设置宽度和高度，并且不独占一行 */
    width: 100%;/* 设置元素的宽度为120像素 */}

/* 评分信息容器的样式 */
.rating-info {
    /* 设置元素的下外边距为 2rem */
    margin-bottom: 2rem;}

/* 电影剧情标题的样式 */
.plot h2 {
    font-size: 1.5rem; /* 设置字体大小为1.5rem */
    margin-bottom: 0.5rem; /* 设置元素底部的外边距为1rem */
    color: #000000; /* 设置文本颜色为深灰色 */}

/* 下载按钮组样式 */
.download-buttons {
    display: flex; /* 设置显示模式为弹性盒子布局 */
    gap: 0.5rem;/* 设置网格项之间的间距为 0.5 倍的根字体大小 */
    margin-bottom: 1rem;/* 设置元素底部外边距为1rem */
    flex-wrap: wrap;/* 设置 flex 容器中的子项在需要时换行 */}

.download-btn {
    padding: 0.4rem 0.5rem;/* 设置元素的内边距为上下0.5rem, 左右1rem */
    border-radius: 4px; /* 设置元素的边框为圆角，圆角半径为4像素 */
    color: white;/* 设置文本颜色为白色 */
    text-decoration: none;/* 移除文本的装饰线，如下划线 */
    font-size: 1rem; /* 设置字体大小为0.9rem */
    border: none; /* 移除元素的边框 */
    cursor: pointer;/* 设置鼠标悬停时的光标为指向手型 */} /* 下载按钮的样式设置，包括内边距、圆角、文字颜色、字体大小、背景颜色过渡效果、边框和鼠标悬停样式 */

.download-btn.baidu {background-color: #1a73e8;}
.download-btn.quake {background-color: #673ab7;}
.download-btn.xunlei {background-color: #ff5722;}
.download-btn.copy-btn {background-color: #4caf50;}
.download-btn.douban {background-color: #ba0091;}

.download-note {
    font-size: 0.8rem;
    color: #666;
    margin: 0.5rem 0;
    text-align: center;
    width: 100%;
    clear: both;
}

/* 电影剧情描述的样式 */
.plot p {
    line-height: 1.2; /* 设置行高为1.8 */
    color: #444; /* 设置文本颜色为深灰色 */}

/* 响应式设计 */
@media (max-width: 768px) {
    .movie-detail {grid-template-columns: 1fr;/* 定义网格布局中列的模板，此处设置为1个等分的列 */}
    .movie-poster {margin-bottom: 1.5rem;/* 设置元素底部外边距为1.5rem */}
    .info-label {width: 100%;}}