/* ===================================================
   梧桐花开官网 v2 - 基于 pixel-perfect-replicate skill
   Canvas: 1200px | 主色: #7d2522
   =================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", Arial, sans-serif;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; border: 0; }

/* ===================================================
   HEADER
   height:90px  background:#7d2522  position:fixed
   =================================================== */
#header {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 90px;
    background-color: #7d2522;
    z-index: 1000;
}
#header-inner {
    position: relative;
    max-width: 1200px;
    width: 100%; height: 90px;
    margin: 0 auto;
}
#logo {
    position: absolute;
    left: 0; top: 22px;
    width: 196px; height: 46px;
}
#logo img { width: 196px; height: 46px; }

#main-nav {
    position: absolute;
    left: 528px; top: 0;
    width: 672px; height: 90px;
}
#main-nav > ul { display: flex; height: 90px; }
#main-nav > ul > .nav-item {
    position: relative;
    width: 86px; height: 90px;
    line-height: 90px;
    text-align: center;
    flex-shrink: 0;
}
#main-nav > ul > .nav-item > a {
    display: block;
    width: 100%; height: 100%;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s;
}
#main-nav > ul > .nav-item > a:hover,
#main-nav > ul > .nav-item.active > a { color: #d9d9d9; }

/* 下拉菜单 */
.sub-menu {
    display: none;
    position: absolute;
    top: 90px; left: 50%;
    transform: translateX(-50%);
    min-width: 120px;
    background-color: #7d2522;
    z-index: 2000;
}
.nav-item.has-sub:hover .sub-menu { display: block; }
.sub-menu li {
    height: 40px; line-height: 40px;
    text-align: center;
    background-color: #7d2522;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.sub-menu li:hover { background-color: #941c18; }
.sub-menu li a {
    display: block;
    width: 100%; height: 100%;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 0 15px;
}

/* 移动端汉堡 */
#mobile-toggle {
    display: none;
    position: absolute;
    right: 20px; top: 28px;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}
#mobile-toggle span {
    display: block;
    width: 25px; height: 3px;
    background: #fff;
    transition: 0.3s;
}

/* ===================================================
   PAGE CANVAS
   =================================================== */
#page-canvas {
    width: 100%;
    margin: 90px auto 0;
    position: relative;
    background: #fff;
}

/* ===================================================
   BANNER 轮播
   =================================================== */
#banner {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 70.833vw;
    max-height: 850px;
}
#banner-slider { width: 100%; height: 100%; position: relative; }
#banner-slides { width: 100%; height: 100%; position: relative; }
#banner-slides li {
    display: none;
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
}
#banner-slides li.active { display: block; }
#banner-slides li img { width: 100%; height: 100%; object-fit: cover; }
#banner-dots {
    position: absolute;
    bottom: 25px; left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}
.dot {
    width: 14px; height: 2px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.4;
    transition: background 0.5s, opacity 0.5s;
}
.dot.active { background: #cc0000; opacity: 1; }

/* ===================================================
   首页内容区
   =================================================== */
#content-bg-wrapper {
    width: 100%;
    background-color: #ffffff;
    background-image: url('images/97is.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
#content-area {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 2029px;
}

#about-title { position: absolute; left: 0; top: 105px; white-space: nowrap; }
#about-title span {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 32px; font-weight: bold; color: #7d2522;
    display: block; line-height: 1.4;
}
#about-text { position: absolute; left: 0; top: 178px; width: 493px; }
#about-text p {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 17px; line-height: 220%; color: #434343;
}
#about-image { position: absolute; left: 550px; top: 108px; width: 650px; overflow: hidden; }
#about-image img { width: 650px; height: auto; }

#gdjs-anchor { position: absolute; left: 0; top: 568px; }
#gdjs-label { position: absolute; left: 704px; top: 652px; white-space: nowrap; }
#gdjs-label span {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 32px; font-weight: bold; color: #7d2522;
    display: block; line-height: 1.4;
}
#fosun-image { position: absolute; left: 0; top: 620px; width: 650px; height: 400px; overflow: hidden; }
#fosun-image img { width: 650px; height: 400px; object-fit: cover; }
#fosun-title { position: absolute; left: 704px; top: 716px; white-space: nowrap; }
#fosun-title span {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 22px; font-weight: bold; color: #000;
    display: block; line-height: 1.4;
}
#fosun-text { position: absolute; left: 704px; top: 763px; width: 496px; }
#fosun-text div {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 17px; line-height: 220%; color: #434343;
}

#fzjg-anchor { position: absolute; left: 0; top: 1106px; }
#branches-title { position: absolute; left: 0; top: 1143px; white-space: nowrap; }
#branches-title span {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 32px; font-weight: bold; color: #7d2522;
    display: block; line-height: 1.4;
}
#branches-text { position: absolute; left: 0; top: 1212px; width: 493px; }
#branches-text p {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 17px; line-height: 220%; color: #434343;
}

#map-container { position: absolute; left: 188px; top: 1314px; width: 835px; height: 605px; }
#map-img { position: absolute; left: 7px; top: 6px; width: 674px; height: 557px; }
.city-pin { position: absolute; z-index: 5; }
.city-icon { width: 18px; height: 18px; display: block; }
.city-pin span {
    position: absolute;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 15px; color: #000; white-space: nowrap;
}
.section-label {
    position: absolute;
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 18px; font-weight: bold; color: #7d2522; white-space: nowrap;
}

/* ===================================================
   FOOTER
   =================================================== */
#footer { background-color: #7d2522; color: #fff; width: 100%; }
#footer-inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 40px 0 30px; }
#footer-main { display: flex; align-items: flex-start; margin-bottom: 30px; }
#footer-logo { flex: 0 0 260px; padding-top: 2px; }
#footer-logo img { height: 46px; width: auto; filter: brightness(0) invert(1); }
#footer-nav { flex: 1; display: flex; }
.footer-col { flex: 1; }
.footer-col h5 {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 16px; font-weight: bold; color: #fff; margin-bottom: 16px;
}
.footer-col h5 a { color: #fff; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 12px; color: #ccc; transition: color 0.2s;
}
.footer-col ul li a:hover { color: #fff; }
#footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; text-align: center; }
#copyright {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 13px; color: #999; text-align: center;
}

/* ===================================================
   RESPONSIVE
   =================================================== */
@media screen and (max-width: 1200px) {
    #page-canvas { overflow-x: hidden; }
    #content-bg-wrapper { background-size: 100% auto; }
    #content-area { width: 100%; height: auto !important; position: relative; }

    #about-title, #about-text, #about-image,
    #gdjs-anchor, #gdjs-label,
    #fosun-image, #fosun-title, #fosun-text,
    #fzjg-anchor, #branches-title, #branches-text,
    #map-container {
        position: relative !important;
        width: 90% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 20px auto;
        padding: 0 20px;
    }
    #map-container { position: relative !important; overflow: hidden; width: 90% !important; }
    #map-img { position: relative !important; width: 100%; height: auto; left: 0 !important; top: 0 !important; }
    .city-pin { display: none; }
    #fosun-image img, #about-image img { width: 100%; height: auto; }

    #footer-inner { width: 100%; padding: 30px 20px; }
    #footer-main { flex-wrap: wrap; gap: 20px; }
    #footer-logo { flex: 0 0 100%; }
    #footer-nav { flex: 0 0 100%; flex-wrap: wrap; gap: 20px; }
    .footer-col { flex: 0 0 calc(33% - 14px); }
}

@media screen and (max-width: 768px) {
    #header-inner { padding: 0 15px; }

    #about-title span, #gdjs-label span, #branches-title span { font-size: 22px !important; }
    #fosun-title span { font-size: 18px !important; }
    #about-text p, #fosun-text div, #branches-text p { font-size: 15px !important; line-height: 180% !important; }

    #main-nav {
        display: none;
        position: absolute;
        top: 90px; left: 0; right: 0;
        background: #7d2522;
        flex-direction: column;
        height: auto; width: 100%;
    }
    #main-nav.open { display: block; }
    #main-nav > ul { flex-direction: column; height: auto; }
    #main-nav > ul > .nav-item {
        width: 100%; height: auto;
        line-height: 50px;
        border-bottom: 1px solid #941c18;
    }
    #main-nav > ul > .nav-item > a { height: 50px; line-height: 50px; }

    .nav-item.has-sub:hover .sub-menu { display: none; }
    .sub-menu { position: static; display: none; background: #941c18; transform: none; width: 100%; }
    .nav-item.has-sub.open .sub-menu { display: block; }
    .sub-menu li { background: #941c18; height: 44px; line-height: 44px; }
    .sub-menu li:hover { background: #7d2522; }
    .sub-menu li a { padding-left: 30px; font-size: 14px; }

    #mobile-toggle { display: flex; }
    .footer-col { flex: 0 0 calc(50% - 10px); }
}

@media screen and (max-width: 480px) {
    .footer-col { flex: 0 0 100%; }
    #footer-bottom { text-align: center; }
}