/* ===== 0. 变量 & 重置 ===== */
:root{
    --max-width: 998px;     /* 响应式断点 */
    --section-padding: clamp(2rem, 5vw, 4rem);
    --text-max: 600px;      /* 正文最大宽度 */
    --bg-height: 60vh;      /* 背景高度（桌面）*/
    --bg-height-m: 50vh;    /* 背景高度（移动）*/
}

*{margin:0;padding:0;box-sizing:border-box}

/* ===== 1. 布局骨架 ===== */
body{font-family:system-ui,Arial,sans-serif;line-height:1.6}

.main{margin-top:100px}

/* 固定背景 */
.mainbg{
    position:fixed;
    inset:0;                     /* top right bottom left:0 */
    width:100%;
    height:var(--bg-height);
    z-index:-1;
    overflow:hidden;
    margin-top: 100px;
}
.mainbg img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center;
}

/* 标题条（与背景同高） */
.maincontenttitle{
    height:var(--bg-height);
    background:linear-gradient(to bottom,
                               rgba(152,225,238,.5),
                               rgba(0,0,0,.5));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:clamp(2rem, 5vw, 3rem);
}

/* 正文区域 */
.maincontenttext{
    padding:var(--section-padding) 0;
    background:#eee;
}

.maincontenttextLeft{
    text-align:center;
    margin-bottom:1.5rem;
    font-weight:700;
    font-size:clamp(1.5rem, 4vw, 2.5rem);
    letter-spacing:.1em;
}
.maincontenttextLeft span:nth-child(even){margin:0 .5em;color:#999}

.maincontenttextRight,
.location{
    max-width:var(--text-max);
    margin-inline:auto;
    padding-inline:1rem;        /* 保证小屏左右留空 */
}
.maincontenttextRight{
    text-indent:2em;
    line-height:1.8;
}

.location{margin-top:4rem}
.location h3{text-align:center;margin-bottom:1rem}
.location iframe{width:100%;height:300px;border:0}

/* ===== 2. 联系区块 ===== */
.contact{
    padding:var(--section-padding) 0;
    background:#eee;
    text-align:center;
}
.contact h1{margin-bottom:1.5rem;font-size:clamp(1.8rem,4vw,2.5rem)}
.linkBox{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:1.2rem;
    max-width:var(--text-max);
    margin-inline:auto;
}
.linkBox a{
    width:clamp(40px,8vw,60px);
    height:clamp(40px,8vw,60px);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:.3s;
}
.linkBox a:hover{transform:translateY(-3px)}
.linkBox img{width:60%;height:auto}



.salseperson{
    width: 100%;
    height: 30vw;
    background-color: #eee;
    text-align: center;
}
.salespersonImgBox{
    margin-top: 10px;
    width: 90%;
    height: 300px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin: 0 auto;
}
.salespersonImgItem{
    width: 30%;
    height: 200px;
}
.salespersonImgItem:hover{
    cursor: pointer;
}
.salespersonImgItem img{
    width: 100%;
}
@media (max-width: 998px) {
    .salseperson{
        height: 70vw;
    }
    .salespersonImgBox {
        height: 60vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
}