.body {
    padding: 80px 0;
    background: var(--bg-color);
}
.main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

/* ===== Sidebar Tree ===== */
.m_left {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 25px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 2px solid #f0f0f0;
}

.tree_tit {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary-blue);
}

.tree_list1 p,.tree_list p {
    margin-bottom: 8px;
}

.tree_list1 p.sel,
.tree_list1 p.out,.tree_list p.sel,
.tree_list p.out {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.tree_list1 p.sel {
    background: var(--primary-blue);
    color: var(--white);
    font-weight: 600;
}

.tree_list1 p.sel a {
    color: var(--white);
}

.tree_list1 p.out:hover {
    background: rgba(254, 0, 0, 0.05);
    color: var(--primary-blue);
}

.tree_list1 p a {
    display: block;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-primary);
}

.s_menu {
    padding-left: 20px;
    margin-top: 8px;
}

.s_menu div a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.s_menu div a:hover {
    background: rgba(254, 0, 0, 0.05);
    color: var(--primary-blue);
}

/* ===== Product List ===== */
.m_right {
    background: transparent;
}

.location {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 25px;
    padding: 14px 20px;
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 3px solid var(--primary-blue);
}

.location a {
    color: var(--primary-blue);
    font-weight: 500;
}

.location a:hover {
    text-decoration: underline;
}





.prolist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.product_info {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    border: 2px solid #f0f0f0;
}

.product_info:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 35px rgba(254, 0, 0, 0.25);
    border-color: var(--primary-blue);
}

.product_info a {
    display: block;
    text-decoration: none;
}

.product_info div {
    padding: 0;
}

.product_info img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.product_info:hover img {
    transform: scale(1.05);
}

.product_info h4 {
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    border-top: 1px solid rgba(0, 51, 102, 0.06);
}

.product_info span {
    display: block;
    text-align: center;
    padding: 16px;
    background: var(--primary-blue);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: none;
}

.product_info:hover span {
    background: var(--dark-blue);
}




.history_tit{ font-size:24px; padding:30px;}
.history_list{ padding:30px;}
.history_list div{ position:relative; padding:10px 0px;}
.history_list div:before{ content:""; position:absolute; left:115px; top:0px; height:100%; width:1px; background:#cdd1da;}
.history_list div i{ display:block;position:absolute; left:109px; top:34px; height:10px; width:10px; background:#fff; border:1px solid #0f7ecd; z-index:1; border-radius:50%;}
.history_list div h4{ font-family:Tahoma, Geneva, sans-serif; float:left; display:block; margin:0px; padding:0px; font-weight:normal; width:100px; line-height:60px; font-size:18px; font-weight:bold;}
.history_list div span{ display:block; float:right; width:700px; text-align:left; background:#e7f4fd; border-radius:2px; padding:10px 20px; margin-top:10px;}


/*==========honor============*/
.quality-list{
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    
}
.honor_info{  width:calc(33.3% - 14px); }
.honor_img{width:290px; height:400px; overflow:hidden; position:relative;}
.honor_img img{width:290px; height:400px;}
.honor_tit{ text-align:center; font-size:16px; line-height:20px; padding:10px 0px;}

.development_info{ float:left; width:286px; margin:30px 41px 0px 0px;}
.development_img{width:286px; height:210px; overflow:hidden; position:relative;}
.development_img img{width:286px; height:210px;}
.development_tit{ text-align:center; font-size:16px; line-height:20px; padding:10px 0px;}