/* ========== 全局统一色彩变量（和专线页面完全一致） ========== */
:root {
    --wl-main-blue: #0F3460;
    --wl-light-blue: #1A5099;
    --wl-deep-blue: #082142;
    --wl-orange: #FF7D00;
    --wl-gray-light: #f5f7fa;
    --wl-gray: #94a3b8;
    --wl-dark: #1e293b;
    --wl-white: #ffffff;
    --wl-border: #e2e8f0;
    --wl-border-deep: #cbd5e1;
    --wl-success: #22c55e;
    --wl-danger: #ef4444;
    --wl-card-shadow: 0 4px 18px rgba(15,52,96,0.09);
    --wl-filter-shadow: 0 6px 24px rgba(15,52,96,0.12);
    --wl-radius: 12px;
    --wl-radius-lg: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
}

body {
    background-color: var(--wl-gray-light);
    color: var(--wl-dark);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.wl_container {
    width: 1240px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 通用按钮样式 全局统一 */
.wl_btn {
    padding: 12px 26px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 15px;
    width:260px;
    text-align:center;
}

.wl_btn_orange {
    background: linear-gradient(135deg, #ff8c1a, var(--wl-orange));
    color: white;
    box-shadow: 0 3px 10px rgba(255,125,0,0.25);
}

    .wl_btn_orange:hover {
        background: linear-gradient(135deg, #ff9b38, #e67000);
        transform: translateY(-2px);
        box-shadow: 0 5px 14px rgba(255,125,0,0.3);
    }

.wl_btn_blue {
    background: linear-gradient(135deg, var(--wl-light-blue), var(--wl-main-blue));
    color: #fff;
    box-shadow: 0 3px 10px rgba(26,80,153,0.2);
}

    .wl_btn_blue:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 14px rgba(26,80,153,0.28);
    }

.wl_btn_gray {
    background: #eef2f9;
    color: var(--wl-main-blue);
    border: 1px solid var(--wl-border-deep);
}

    .wl_btn_gray:hover {
        background: #e0e8f5;
    }

.wl_btn_block {
    width:690px;
}

/* ========== 顶部通栏 ========== */
.wl_header_top {
    background-color: var(--wl-main-blue);
    color: var(--wl-white);
    padding: 10px 0;
    font-size: 14px;
}

    .wl_header_top .wl_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.wl_top_left i {
    margin-right: 6px;
}

.wl_top_right a {
    margin-left: 20px;
    color: #fff;
}

    .wl_top_right a:hover {
        color: var(--wl-orange);
    }

/* ========== 导航栏 固定顶部 ========== */
.wl_nav {
    background-color: var(--wl-white);
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.15);
    position: sticky;
    top: 0;
    z-index: 99;
}

    .wl_nav .wl_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
    }

.wl_logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: bold;
    color: var(--wl-main-blue);
}

    .wl_logo i {
        font-size: 30px;
        color: var(--wl-orange);
    }

.wl_menu_list {
    display: flex;
    gap: 35px;
}

    .wl_menu_list li a {
        font-size: 16px;
        font-weight: 500;
        padding: 8px 0;
        position: relative;
        color: var(--wl-dark);
    }

        .wl_menu_list li a.active {
            color: var(--wl-light-blue);
        }

            .wl_menu_list li a.active::after {
                width: 100%;
            }

        .wl_menu_list li a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 3px;
            background: var(--wl-orange);
            transition: 0.3s;
        }

        .wl_menu_list li a:hover::after {
            width: 100%;
        }

/* ========== 首页轮播Banner区 ========== */
.wl_banner_home {
    background: linear-gradient(135deg, var(--wl-deep-blue), var(--wl-light-blue));
    height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.wl_banner_wrap {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 60px;
    align-items: center;
    color: #fff;
}

.wl_banner_text h2 {
    font-size: 44px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.wl_banner_text p {
    font-size: 18px;
    opacity: 0.9;
    line-height: 1.8;
    margin-bottom: 32px;
}

.wl_banner_btns {
    display: flex;
    gap: 20px;
}

.wl_banner_search_box {
    background: #fff;
    border-radius: var(--wl-radius-lg);
    padding: 32px;
    box-shadow: var(--wl-filter-shadow);
}

.wl_search_title {
    font-size: 20px;
    color: var(--wl-main-blue);
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .wl_search_title i {
        color: var(--wl-orange);
    }

.wl_search_row {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.wl_search_input {
    flex: 1;
    height: 46px;
    border: 1px solid var(--wl-border-deep);
    border-radius: 8px;
    padding: 0 16px;
    font-size: 15px;
    outline: none;
}

    .wl_search_input:focus {
        border-color: var(--wl-light-blue);
    }

.wl_banner_search_box button {
    width: 100%;
}

/* ========== 平台优势板块 ========== */
.wl_advantage_wrap {
    padding: 70px 0;
}

.wl_section_head {
    text-align: center;
    margin-bottom: 50px;
}

    .wl_section_head h3 {
        font-size: 32px;
        color: var(--wl-main-blue);
        margin-bottom: 12px;
    }

    .wl_section_head p {
        color: var(--wl-gray);
        font-size: 16px;
    }

.wl_adv_grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 26px;
}

.wl_adv_card {
    background: #fff;
    padding: 36px 24px;
    border-radius: var(--wl-radius);
    box-shadow: var(--wl-card-shadow);
    text-align: center;
    transition: 0.3s;
}

    .wl_adv_card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 26px rgba(15,52,96,0.14);
    }

.wl_adv_icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg,var(--wl-light-blue),var(--wl-main-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .wl_adv_icon i {
        font-size: 30px;
        color: #fff;
    }

.wl_adv_card h4 {
    font-size: 19px;
    color: var(--wl-deep-blue);
    margin-bottom: 12px;
}

.wl_adv_card p {
    color: #666;
    line-height: 1.7;
    font-size: 14px;
}

/* ========== 快捷发布入口板块 ========== */
.wl_entry_wrap {
    padding: 70px 0;
    background: #fff;
}

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

.wl_entry_card {
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius-lg);
    padding: 40px 30px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
}

    .wl_entry_card:hover {
        border-color: var(--wl-light-blue);
        background: #f3f8ff;
    }

.wl_entry_icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    background: #eef2f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .wl_entry_icon i {
        font-size: 36px;
        color: var(--wl-light-blue);
    }

.wl_entry_card h4 {
    font-size: 22px;
    color: var(--wl-main-blue);
    margin-bottom: 14px;
}

.wl_entry_card p {
    color: var(--wl-gray);
    margin-bottom: 26px;
    line-height: 1.6;
}

/* ========== 热门专线推荐板块 ========== */
.wl_hot_line_wrap {
    padding: 70px 0;
}

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

.wl_line_card {
    background: #fff;
    border-radius: var(--wl-radius);
    box-shadow: var(--wl-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wl_card_body {
    padding: 22px;
    flex: 1;
}

.wl_line_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.wl_line_name {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.4;
}

.wl_cert_tag {
    background: var(--wl-success);
    color: #fff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
}

.wl_line_meta_item {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

    .wl_line_meta_item i {
        color: var(--wl-light-blue);
        width: 18px;
        margin-right: 4px;
    }

.wl_service_tags {
    margin: 14px 0;
}

.wl_service_tag {
    display: inline-block;
    padding: 2px 8px;
    background: #e8f0fe;
    color: var(--wl-light-blue);
    font-size: 12px;
    border-radius: 3px;
    margin-right: 6px;
    margin-bottom: 6px;
}

.wl_line_desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl_card_btns {
    padding: 16px 22px;
    border-top: 1px solid var(--wl-border);
    display: flex;
    gap: 10px;
}

    .wl_card_btns button {
        flex: 1;
    }

.wl_more_line {
    text-align: center;
    margin-top: 40px;
}

/* ========== 最新货源板块（滚动修改） ========== */
.wl_goods_wrap {
    padding: 70px 0;
    background: #fff;
}
/* 滚动容器：固定高度，隐藏溢出 */
.wl_goods_scroll_box {
    border: 1px solid var(--wl-border);
    border-radius: var(--wl-radius);
    overflow: hidden;
    height: 260px;
}
/* 滚动轨道：复制两份内容实现无缝 */
.wl_goods_track {
    display: flex;
    flex-direction: column;
    animation: goodsScroll 24s linear infinite;
}
/* 鼠标悬停暂停滚动 */
.wl_goods_scroll_box:hover .wl_goods_track {
    animation-play-state: paused;
}
/* 垂直向上滚动动画 */
@keyframes goodsScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.wl_goods_item {
    padding: 20px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--wl-border);
}

.wl_goods_left h5 {
    font-size: 16px;
    color: var(--wl-deep-blue);
    margin-bottom: 6px;
}

.wl_goods_left p {
    font-size: 14px;
    color: var(--wl-gray);
}

.wl_goods_right button {
    padding: 8px 20px;
}

/* ========== 页脚样式 ========== */
.wl_footer {
    background: #0a2240;
    color: #b8c5d6;
    padding: 60px 0 30px;
}

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

.wl_footer_col h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--wl-orange);
    width: 140px;
}

.wl_footer_col li {
    margin-bottom: 12px;
}

.wl_footer_col a {
    color: #b8c5d6;
}

    .wl_footer_col a:hover {
        color: var(--wl-orange);
    }

.wl_copyright {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #17355e;
    font-size: 14px;
}

/* ========== 移动端适配 ========== */
@media (max-width: 1000px) {
    .wl_container {
        width: 100%;
    }

    .wl_menu_list {
        display: none;
    }

    .wl_banner_wrap {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 0;
    }

    .wl_banner_home {
        height: auto;
        padding: 60px 0;
    }

    .wl_adv_grid, .wl_entry_grid, .wl_hot_line_grid {
        grid-template-columns: repeat(2,1fr);
    }

    .wl_footer_wrap {
        grid-template-columns: repeat(2,1fr);
    }

    .wl_goods_scroll_box {
        height: 320px;
    }
}

@media (max-width: 640px) {
    .wl_adv_grid, .wl_entry_grid, .wl_hot_line_grid {
        grid-template-columns: 1fr;
    }

    .wl_footer_wrap {
        grid-template-columns: 1fr;
    }

    .wl_banner_text h2 {
        font-size: 30px;
    }

    .wl_search_row {
        flex-direction: column;
    }

    .wl_top_right {
        display: none;
    }

    .wl_goods_scroll_box {
        height: 360px;
    }
}