* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: rgb(245,245,245);
}

/* 页面主要部分样式 */
.Main {
    background-color: rgba(245,245,245,0.85);
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 1rem solid rgb(240,240,240);
    border-right: 1rem solid rgb(240,240,240);
    display: none;
    padding-top: 5%;
}

/* 这一部分是Main Section中所有按钮组件的基本样式 */
.Main button {
    height: 3.25rem;
    width: 8rem;
    margin: 0.75rem;
    font-size: 1rem;
    border-radius: 100px;
    color: white;
    background-color: rgb(220, 38, 38);
    border: 2px solid rgb(220, 38, 38);
    transition: all 0.3s;
    z-index: 2;
}

/* Main Section中所有按钮组件在收到鼠标信息时的基本样式 */
.Main button:hover {
    border-color: rgb(174, 31, 31);
    background-color: rgb(174, 31, 31);
    transform: scale(1.05);
}

/* Main Section副标题 */
.Main h2 {
    font-size: 2.5rem;
}

/* Main Section的通用样式 */
.Main section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Main中的图标通用样式 */
.Main .Icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    justify-content: center;
    align-items: center;
    background-color: rgb(254 226 226);
    border-radius: 10px;
}

/* Icon中的img通用样式 */
.Main .Icon img {
    width: 1.5rem;
    height: 1.5rem;
}

/* Main中的常用字体 */
.Main h3, .Main p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}





/* 欢迎Section样式 */
.welcome {
    height: 100vh;
    background-image: url("../img/background.avif");
    background-size: auto 250%;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 0;
}

/* 为欢迎Section添加Layer叠层样式 */
.welcome .Layer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 渐变背景色 */
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1));
    z-index: 1;
}

/* 欢迎Section的标题样式 */
.welcome .Title {
    font-size: 3.75rem;
    font-weight: bold;
    font-family: system-ui;
    padding: 10px;
    /* 渐变背景色 */
    background: linear-gradient(to right, rgba(185,28,28,1.0), rgba(234,88,12,1.0));
    /* 将文本扣下来并将文本位置的颜色设置为透明 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 2;
}

/* 欢迎Section的副标题样式 */
.welcome p {
    font-size: 1.5rem;
    font-weight: 350;
    font-family: system-ui;
    padding: 5px;
    padding-bottom: 1rem;
    z-index: 2;
}





/* 这一部分是Service类的基础样式 */
.Service {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

/* 企业合作服务部分的样式
 * 
 * 其实应该合并成一个基类的
 */
.Upload, .Modeling, .Cooperation {
    width: 15rem;
    height: 10rem;
    padding: 1.5rem;
    margin: 3rem;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.Upload:hover, .Modeling:hover, .Cooperation:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}





/* 大众教学部分的样式（容器） */
.Turtorial {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* 图片案例（可能还要改动） */
.Turtorial .Ski {
    height: 20rem;
    width: auto;
    overflow: hidden;
    margin-right: 5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 教学特点样式 */
.Turtorial .Feature {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

/* 文字样式 */
.Feature h3, .Feature p {
    margin-top: 0rem;
    padding-left: 1rem;
}






/* 商品展示样式（容器） */
.Merchandise .Goods {
    margin-top: 3rem;
    /* margin-bottom: 3rem; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

/* 商品展示样式（内容）
 * 
 * 预计添加键盘事件
 */
.Merchandise .Good {
    cursor: pointer;

    height: 20rem;
    width: 23rem;
    margin-left: 1rem;
    margin-right: 1rem;

    background-color: white;

    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.Merchandise .Good:hover {
    box-shadow: 0 4px 20px rgba(128, 128, 128, 0.2);
    transform: scale(1.05);
}

.Merchandise ul{
    margin-left: 35%;
    margin-right: 35%;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 30%;
    height: 20%;
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    background-color: rgba(250,250,250,0.85);
    border-radius: 10px;
}

.Merchandise li{
    flex:1;
    text-align: center;
    background-color: rgba(250,250,250,0.85);
    border-radius: 10px;
}

.Merchandise li:hover{
    box-shadow: 0 4px 20px rgba(128, 128, 128, 0.2);
}

/* 商品图片样式（容器） */
.Good .Pic {
    width: 23rem;
    height: 15rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

/* 商品图片样式（内容） */
.Good .Pic img {
    max-width: 100%;
    overflow: hidden;
    object-fit: cover;
    vertical-align: middle;
}

/* 商品简介样式 */
.Good .Descryption {
    margin-left: 1rem;
    margin-right: 1rem;
}

.Good .Descryption h4 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.Good .Descryption h6 {
    font-size: 1rem;
    color: rgba(220,38,38,1.0);
}


video {
    opacity: 0.3;
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -10; 
}