/* ====== 优先以手机屏幕尺寸开发，再使用@media调整以适配大屏 ====== */
/* ------ 基础样式 ------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Roboto', 'Open Sans', system-ui, sans-serif;
}
:root {
    --font-size-xxxs: 10px;
    --font-size-xxs: 12px;
    --font-size-xs: 15px;
    --font-size-sm: 20px;
    --font-size-md: 25px;
    --font-size-lg: 35px;
    --font-size-xl: 40px;
    --font-size-xxl: 45px;
    --font-size-xxxl: 55px;
}
/* ------ end 基础样式 ------ */


/* ------ 页面内容样式 ------ */
.about-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: black;
    position: relative;
    gap: 10px;
    margin: 0 30px;
    margin-bottom: 50px;
}
.about-container>.content {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: black;
    position: relative;
    line-height: 1.5;
    gap: 10px;
}
.about-container>.content>.text {
    margin: 0 30px;
}
.about-container>.title {
    font-size: var(--font-size-lg);
    font-weight: bolder;
}
.about-container>.content .text ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: 30px;
    font-size: var(--font-size-xs);
}
.about-container .image img {
    width: 200px;
    height: 200px;
}
.about-container>.target-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.about-container>.target-container .title {
    font-size: var(--font-size-md);
    font-weight: bolder;
}
.about-container>.target-container .menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px
}
.about-container>.target-container .menu-item {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    width: 200px;
    padding: 10px;
}
.about-container>.target-container .menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    border-color: #e0e0e0;
}
.about-container>.target-container .menu-item .number {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    margin: auto;
}
.about-container>.target-container .menu-item .title {
    font-size: var(--font-size-sm);
    line-height: 3;
    color: black;
    font-weight: 500;
    position: relative;
}
.about-container>.target-container .menu-item .text {
    font-size: var(--font-size-xs);
}
/* 不同卡片的背景效果 */
.about-container>.target-container .menu-item:nth-child(1):before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 50%;
    z-index: 0;
}
.about-container>.target-container .menu-item:nth-child(2):after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 120px;
    height: 120px;
    background: rgba(46, 204, 113, 0.1);
    border-radius: 50%;
    z-index: 0;
}
.about-container>.target-container .menu-item:nth-child(3):before {
    content: '';
    position: absolute;
    top: -40px;
    left: 20px;
    width: 80px;
    height: 80px;
    background: rgba(155, 89, 182, 0.1);
    border-radius: 50%;
    z-index: 0;
}
.about-container>.target-container .menu-item:nth-child(4):after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: 30px;
    width: 80px;
    height: 80px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 50%;
    z-index: 0;
}
/* ------ end 页面内容样式 ------ */
/* ====== end 优先以手机屏幕尺寸开发，再使用@media调整以适配大屏 ====== */


/* ====== 平板 (通常指纵向模式下的平板 或 大屏手机) ====== */
@media only screen and (min-width: 400px) {
    /* 视口宽度 ≥ 400px 时应用 */

}

@media only screen and (min-width: 600px) {
    /* 视口宽度 ≥ 600px 时应用 */
    .about-container>.title {
        font-size: var(--font-size-xl);
    }
}
/* ====== end 平板 (通常指纵向模式下的平板 或 大屏手机) ====== */


/* ====== 平板 (横向模式 / 小桌面或大平板) ====== */
@media only screen and (min-width: 768px) {
    /* 视口宽度 ≥ 768px 时应用 */
    .about-container>.title {
        font-size: var(--font-size-xl);
    }
    .about-container>.content {
        flex-direction: row;
    }
    .about-container>.target-container .menu {
        flex-direction: row;
    }
    .about-container {
        margin: 0 100px;    /* 圣杯布局 */
        margin-bottom: 150px;
        margin-top: 50px;
        gap: 80px;
    }
    .about-container>.content .text ul {
        font-size: var(--font-size-sm);
    }
}
/* ====== end 平板 (横向模式 / 小桌面或大平板) ====== */


/* ====== 桌面 / 笔记本电脑 ====== */
@media only screen and (min-width: 1280px) {
    /* 视口宽度 ≥ 1280px 时应用 */
    .about-container>.title {
        font-size: var(--font-size-xxl);
    }
    .about-container {
        margin-bottom: 300px;
    }
    .about-container>.content .text ul {
        font-size: var(--font-size-sm);
    }
    .about-container .image img {
        width: 300px;
        height: 300px;
    }
    .about-container>.target-container {
        gap: 30px;
    }
    .about-container>.target-container .menu {
        flex-direction: row;
    }
    .about-container>.target-container .menu-item {
        width: 300px;
    }
    .about-container>.target-container .menu-item .title {
        font-size: var(--font-size-lg);
    }
    .about-container>.target-container .menu-item .number {
        width: 40px;
        height: 40px;
    }
    .about-container>.target-container .menu-item .number,
    .about-container>.target-container .menu-item .title {
        font-size: var(--font-size-md);
    }
    .about-container>.target-container .menu-item .text {
        font-size: var(--font-size-sm);
    }  
}

@media only screen and (min-width: 1440px) {
    /* 视口宽度 ≥ 1440px 时应用 */
    .about-container>.title {
        font-size: var(--font-size-xxl);
    }
    .about-container>.content .text ul {
        font-size: var(--font-size-sm);
    }
    .about-container .image img {
        width: 350px;
        height: 350px;
    }
    .about-container>.target-container {
        gap: 50px;
    }
    .about-container>.target-container .menu {
        flex-direction: row;
    }
    .about-container>.target-container .menu-item {
        width: 350px;
    }
    .about-container>.target-container .menu-item .title {
        font-size: var(--font-size-xl);
    }
    .about-container>.target-container .menu-item .number,
    .about-container>.target-container .menu-item .title {
        font-size: var(--font-size-md);
    }
    .about-container>.target-container .menu-item .text {
        font-size: var(--font-size-sm);
    }
}
/* ====== end 桌面 / 笔记本电脑 ====== */


/* ====== 大桌面 / 电视等 ====== */
@media only screen and (min-width: 1920px) {
    /* 视口宽度 ≥ 1920px 时应用 */
    .about-container .image img {
        width: 550px;
        height: 550px;
    }
    
}

@media only screen and (min-width: 2480px) {
    /* 视口宽度 ≥ 2480px 时应用 */

}

@media only screen and (min-width: 2860px) {
    /* 视口宽度 ≥ 2860px 时应用 */

}
/* ====== end 大桌面 / 电视等 ====== */