@charset "utf-8";

*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
html{height: 100%;}
html,body,div,p,strong,span,a,b,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,del,img,i,em,select,button,textarea,input{margin: 0; padding: 0;}
body{background: #fff; font-family: 'SourceHanSansCN-Regular','Microsoft YaHei',SimSun,Arial, Serif; font-size: 16px; color: #333; position: relative; min-height: 100%; font-family:"微软雅黑"}
a,img,button,input,textarea,select{-webkit-tap-highlight-color:rgba(255,255,255,0);}
input[type="text"],input[type="hidden"],input[type="password"],button,textarea,select{outline: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; font-family: 'Microsoft YaHei',"Arial",'SimSun', Serif; font-family:"微软雅黑"}
select::-ms-expand{display: none;}
input::-ms-clear{display: none;}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{color:#636363;}
input::-moz-placeholder,
textarea::-moz-placeholder{color:#636363;}
input:-moz-placeholder,
textarea:-moz-placeholder{color:#636363;}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{color:#636363;}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{color:#b8b8b8;}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder{color:#b8b8b8;}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder{color:#b8b8b8;}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder{color:#b8b8b8;}
table{border-collapse:collapse;}
a{text-decoration: none; color: #333;}
a:hover{text-decoration: none;}
a:focus{text-decoration: none;}
li{list-style: none;}
img{vertical-align: middle; border: none;}
.fl{float: left;}
.fr{float: right;}
.clear{clear: both;}
.hidden{overflow: hidden;}
.h1,.h2,.h3,.h4,.h5,.h6{font-weight: normal;}
.clearfix:after{content: ""; display: block; height: 0; visibility: hidden; clear: both;}
.clearfix {*zoom: 1;}
.cell_box{font-size: 0;}
.cell_box:before{content: ''; height: 100%; display: inline-block; vertical-align: middle;}
.cell_box .cell{width: 100%; display: inline-block; vertical-align: middle;}
/*scroll*/
::-webkit-scrollbar {width:4px;height:4px}
::-webkit-scrollbar-button:vertical {display:none}
::-webkit-scrollbar-corner,::-webkit-scrollbar-track {background-color:#e0e0e0;}
::-webkit-scrollbar-thumb {border-radius:0;background-color: #2667d1;}
::-webkit-scrollbar-thumb:vertical:hover {background-color: #2667d1;}
::-webkit-scrollbar-thumb:vertical:active {background-color: #2667d1;}


   /* 关于我们主容器：现代卡片风格，宽度适中，左右两栏布局 */
        .about-section {
            max-width: 1600px;
            width: 100%;
            background: #ffffff;
            border-radius: 2rem;
            box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* 内部网格布局：默认桌面端左图右文字，使用flex或grid，为保证响应和纯div结构，采用grid，语义清晰 */
        .about-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            align-items: center;
        }

        /* 左侧图片区域：视觉沉浸，纯div包裹图片 */
        .about-image {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 380px;
            background: #eef2fa;  /* 图片占位底色，实际图片覆盖，优雅备用色 */
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 实际图片样式：保持比例，覆盖区域，现代对象-fit */
        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }

        /* 悬停优雅动效，增加层次 */
        .about-section:hover .about-image img {
            transform: scale(1.02);
        }

        /* 右侧文字区域：清爽内边距，呼吸感排版 */
        .about-text {
            padding: 3rem 3rem 3rem 2.5rem;
            background: #ffffff;
        }

        /* 小标记 / 上标装饰 */
        .about-tag {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #3b82f6;
            background: #eef4ff;
            padding: 0.25rem 0.85rem;
            border-radius: 30px;
            margin-bottom: 1.2rem;
        }

        /* 主标题 */
        .about-title {
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 1.2;
            color: #0a2540;
            margin-bottom: 1.2rem;
            position: relative;
        }

        /* 装饰细线，优雅分割 */
        .about-title:after {
            content: '';
            display: block;
            width: 70px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            border-radius: 4px;
            margin-top: 0.75rem;
        }

        /* 描述文本段落 */
        .about-description {
            font-size: 1.05rem;
            color: #2c3e50;
            margin-bottom: 1.5rem;
            line-height: 1.65;
        }

        /* 特色列表：用div构成，简单图标点缀，无多余标签但符合纯div+css 要求（无ul/li也可，但为语义和美观用了div模拟列表？但也是div组成）*/
        .feature-list {
            margin: 1.8rem 0 2rem 0;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 1rem;
            font-size: 1rem;
            color: #1f2a3e;
        }

        /* 模拟对号图标（纯CSS制作）不用额外字体或图片，完全css构建圆形背景与伪类对号 */
        .check-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: #d9efff;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
        }

        .check-icon::after {
            content: '✓';
            font-size: 14px;
            font-weight: bold;
            color: #2563eb;
        }

        .feature-text {
            flex: 1;
            font-weight: 500;
        }

        /* 辅助描述：可加入额外文案 */
        .about-meta {
            margin-top: 2rem;
            padding-top: 0.5rem;
            border-top: 1px solid #e9edf2;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .meta-block {
            display: flex;
            flex-direction: column;
        }

        .meta-number {
            font-size: 1.6rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.2;
        }

        .meta-label {
            font-size: 0.8rem;
            color: #5b6e8c;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        /* 按钮样式 (可选) 让右侧更有交互感 */
        .about-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: #0f172a;
            color: white;
            border: none;
            padding: 0.8rem 1.8rem;
            border-radius: 40px;
            font-weight: 600;
            font-size: 0.95rem;
            margin-top: 0.8rem;
            cursor: pointer;
            transition: all 0.25s ease;
            text-decoration: none;
            background: #1e293b;
        }

        .about-btn:hover {
            background: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
        }

        /* 响应式设计：当屏幕宽度小于900px，改为上下布局 (左图在上，文字在下) 符合移动优先 */
        @media (max-width: 900px) {
            .about-container {
                grid-template-columns: 1fr;
                grid-template-areas: 
                    "image"
                    "text";
            }
            .about-image {
                grid-area: image;
                min-height: 320px;
            }
            .about-text {
                grid-area: text;
                padding: 2rem 1.8rem 2.5rem;
            }
            .about-title {
                font-size: 2rem;
            }
            .about-title:after {
                width: 50px;
            }
            body {
                padding: 1rem;
            }
        }

        /* 更小屏幕适配 */
        @media (max-width: 480px) {
            .about-text {
                padding: 1.8rem;
            }
            .about-title {
                font-size: 1.8rem;
            }
            .feature-item {
                gap: 0.6rem;
            }
            .meta-number {
                font-size: 1.3rem;
            }
            .about-btn {
                width: 100%;
                justify-content: center;
            }
        }