/* =========================================================
   首页首屏
   针对全局 * { margin:0 auto; padding:0; } 做局部重置
========================================================= */

.bc-home-main,
.bc-home-main *{
    box-sizing:border-box;
}

.bc-home-main *{
    margin:0;
    padding:0;
}

.bc-home-main{
    width:100%; 
    text-align:left;
}

.bc-home-main .bc-container{
    margin:0 auto; 
}

.bc-home-main-box{
    height:595px;
    padding:5px 20px 20px 20px;
    background:#fff;
    border-radius:0 0 20px 20px;
}

.bc-home-layout{
    position:relative;
    width:1320px;
    height:570px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:20px;
}


/* =========================================================
   左侧分类
========================================================= */

.bc-home-category{
    position:relative;
    width:240px;
    height:570px;
    flex:0 0 240px;
    background:#f5f5f5;
    border-radius:10px;
    z-index:30;
    text-align:left;
}

.bc-category-title{
    width:100%;
    height:52px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    color:#1d467d;
    font-size:18px;
    line-height:52px;
    font-weight:700;
}

.bc-category-title span{
    margin:0;
}

.bc-category-title i{
    margin:0 0 0 7px;
    color:#1d467d;
    font-size:23px;
    line-height:1;
    font-style:normal;
    font-weight:400;
}

.bc-category-list{
    width:100%;
}

.bc-category-item{
    position:static;
    width:100%;
    height:36px;
}

.bc-category-link{
    position:relative;
    width:100%;
    height:36px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    color:#171717;
    background:transparent;
    font-size:14px;
    line-height:36px;
    text-decoration:none;
    white-space:nowrap;
}

.bc-category-link:hover{
    text-decoration:none;
}

.bc-category-arrow{
    margin:0 0 0 8px;
    color:#777;
    font-size:17px;
    line-height:1;
}


/* 当前hover */

.bc-category-item.bc-category-active > .bc-category-link{
    color:#1686f7;
    background:#fff;
}


/* 连接左菜单和大面板的隐形区域 */
.bc-category-item.bc-category-active > .bc-category-link:after{
    content:"";
    position:absolute;
    right:-20px;
    top:0;
    width:20px;
    height:36px;
}


/* =========================================================
   分类大菜单
========================================================= */

.bc-category-panel{
    display:none;
    position:absolute;
    left:260px;
    top:0;

    width:1060px;
    height:570px;

    padding:19px 19px 20px;
    background:#fff;
    border:1px solid #168cff;
    border-radius:10px;

    z-index:200;
    overflow:hidden;
}

.bc-category-item.bc-category-active > .bc-category-panel{
    display:block;
}

.bc-category-panel-inner{
    width:100%;
    height:100%;
    overflow:hidden;
}

.bc-category-group{
    width:100%;
    margin-bottom:24px;
}

.bc-category-group:last-child{
    margin-bottom:0;
}

.bc-category-group-title{
    height:25px;
    display:flex;
    align-items:center;
    justify-content:flex-start;

    color:#222;
    font-size:14px;
    line-height:25px;
    font-weight:700;
}

.bc-category-group-title span{
    margin:0 0 0 8px;
    color:#718198;
    font-size:17px;
    line-height:1;
    font-weight:400;
}


/* 每行7列 */
.bc-category-group-links{
    width:100%;
    padding-top:7px;

    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));

    column-gap:18px;
    row-gap:0;
}

.bc-category-group-links a{
    height:31px;
    display:block;
    overflow:hidden;

    color:#52647e;
    font-size:12px;
    line-height:31px;
    font-weight:400;

    text-decoration:none;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.bc-category-group-links a:hover,
.bc-category-group-links .bc-category-blue{
    color:#168cff;
}


/* =========================================================
   中间 Banner
========================================================= */

.bc-home-banner{
    position:relative;
    width:772px;
    height:570px;
    flex:0 0 772px;

    overflow:hidden;
    border-radius:10px;
 
}

.bc-banner-list{
    position:relative;
    width:100%;
    height:100%;
}

.bc-banner-slide{
    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:100%;

    opacity:0;
    visibility:hidden;

    transform:scale(1.025);

    transition:
        opacity .65s ease,
        transform 1.2s ease,
        visibility .65s;

    z-index:1;
}

.bc-banner-slide.bc-banner-active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    z-index:2;
}

.bc-banner-slide img{
    display:block;
    width:772px;
    height:570px;
    border:0;
    object-fit:cover;
}


/* Banner圆点 */

.bc-banner-dots{
    position:absolute;
    left:0;
    bottom:30px;

    width:100%;
    height:8px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    z-index:10;
}

.bc-banner-dot{
    display:block;
    width:7px;
    height:7px;

    border:0;
    border-radius:7px;

    background:rgba(255,255,255,.92);
    cursor:pointer;

    transition:
        width .25s ease,
        background .25s ease;
}

.bc-banner-dot.bc-banner-dot-active{
    width:27px;
    background:#fff;
}


/* =========================
   Banner左右切换箭头
========================= */

.bc-banner-arrow{
    position:absolute;
    top:50%;
    z-index:20;
    width:38px;
    height:60px;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    background:rgba(0,0,0,.20);
    color:#fff;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transform:translateY(-50%);

    transition:
        opacity .2s ease,
        background .2s ease,
        visibility .2s ease;
}

.bc-banner-arrow i{
    margin:0;
    padding:0;
    color:#fff;
    font-size:30px;
    line-height:1;
    font-weight:400;
}

.bc-banner-prev{
    left:0;
    border-radius:0 5px 5px 0;
}

.bc-banner-next{
    right:0;
    border-radius:5px 0 0 5px;
}

.bc-home-banner:hover .bc-banner-arrow{
    opacity:1;
    visibility:visible;
}

.bc-banner-arrow:hover{
    background:rgba(0,0,0,.38);
}

/* =========================================================
   右侧整体
========================================================= */

.bc-home-right{
    width:268px;
    height:570px;
    flex:0 0 268px;

    padding:20px;

    background:#f5f5f5;
    border-radius:10px;
    overflow:hidden;
}


/* =========================================================
   用户区域
========================================================= */

.bc-home-user{
    width:228px;
}

.bc-home-user-head{
    width:228px;
    height:55px;

    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
}

.bc-home-avatar{
    display:block;
    width:47px;
    height:47px;

    margin:0 10px 0 0;
    border:0;
    flex:0 0 47px;
}

.bc-home-user-info{
    padding-top:4px;
    text-align:left;
}

.bc-home-user-welcome{
    color:#222;
    font-size:16px;
    line-height:22px;
    font-weight:400;
    white-space:nowrap;
}

.bc-home-user-login{
    height:20px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    font-size:12px;
    line-height:20px;
}

.bc-home-user-login a{
    margin:0;
    color:#222;
    text-decoration:none;
}

.bc-home-user-login a:hover{
    color:#168cff;
}

.bc-home-user-login span{
    margin:0 7px;
    color:#777;
}


/* =========================================================
   六个快捷入口
========================================================= */

.bc-home-user-tools{
    width:228px;

    margin-top:28px;

    display:grid;
    grid-template-columns:repeat(3,76px);
    grid-template-rows:repeat(2,52px);

    row-gap:22px;
}

.bc-home-user-tool{
    width:76px;
    height:52px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    color:#333;
    text-decoration:none;
}

.bc-home-user-tool img{
    display:block;
    width:28px;
    height:28px;

    margin:0 0 7px 0;
    border:0;

    transition:transform .2s ease;
}

.bc-home-user-tool span{
    display:block;

    color:#333;
    font-size:12px;
    line-height:17px;
    white-space:nowrap;
}

.bc-home-user-tool:hover span{
    color:#168cff;
}

.bc-home-user-tool:hover img{
    transform:translateY(-2px);
}


/* =========================================================
   右侧广告
========================================================= */

.bc-home-right-ad{
    display:block;

    width:228px;
    height:109px;

    margin-top:27px;

    overflow:hidden;
    border-radius:10px;
}

.bc-home-right-ad img{
    display:block;
    width:228px;
    height:109px;
    border:0;

    transition:transform .4s ease;
}

.bc-home-right-ad:hover img{
    transform:scale(1.025);
}


/* =========================================================
   公告
========================================================= */

.bc-home-notice{
    width:228px;
    margin-top:27px;
}

.bc-home-notice-head{
    width:228px;
    height:25px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.bc-home-notice-head > span{
    color:#333;
    font-size:14px;
    line-height:20px;
    font-weight:400;
}

.bc-home-notice-head > a{
    color:#aaa;
    font-size:12px;
    line-height:20px;
    text-decoration:none;
}

.bc-home-notice-head > a:hover{
    color:#168cff;
}

.bc-home-notice-list{
    width:228px;
}

.bc-home-notice-item{
    width:228px;
    height:33px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    color:#333;
    text-decoration:none;
    overflow:hidden;
}

.bc-home-notice-item em{
    display:inline-block;
    height:20px;
    margin:0 8px 0 0;
    padding:0 4px;
    border-radius:2px;
    font-size:12px;
    line-height:20px;
    font-style:normal;
    font-weight:400;
    text-align:center;
    white-space:nowrap;
    flex:none;
}

.bc-notice-new{
    color:#168cff;
    background:#eef9ff;
}

.bc-notice-pick{
    color:#ff3b30;
    background:#ffefee;
}

.bc-home-notice-item span{
    display:block;

    min-width:0;
    overflow:hidden;

    color:#333;
    font-size:12px;
    line-height:18px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.bc-home-notice-item:hover span{
    color:#168cff;
}



/* =========================================================
   首页产品切换模块
   外部大背景不在这里定义
   兼容全局 * { margin:0 auto; padding:0; }
========================================================= */

.bc-profloor,
.bc-profloor *{
    box-sizing:border-box;
}

.bc-profloor *{
    margin:0;
    padding:0;
}

.bc-profloor{
    position:relative;
    width:100%;
    overflow:visible;
    text-align:left;
}

.bc-profloor .bc-container{
    margin:0 auto;
    overflow:visible;
}


/* =========================================================
   顶部8个分类
========================================================= */

.bc-profloor-tabs{
    width:1260px;
    height:156px;
    margin:0 auto;
    padding:32px 0;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.bc-profloor-tab{
    width:90px;
    height:92px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    color:#333;
    text-align:center;
    text-decoration:none;
}

.bc-profloor-tab img{
    display:block;
    width:52px;
    height:52px;
    margin:0;
    border:0;
    object-fit:contain;

    transform:scale(1);
    transform-origin:center center;

    transition:
        transform .32s cubic-bezier(.22,.61,.36,1),
        filter .32s ease;
}

.bc-profloor-tab span{
    display:block;
    margin-top:8px;

    color:#333;
    font-size:16px;
    line-height:24px;
    font-weight:400;

    text-align:center;
    white-space:nowrap;

    transition:color .18s ease;
}

/* 顶部分类 hover 动效 */
.bc-profloor-tab{
    transition:color .22s ease;
}

.bc-profloor-tab:hover img,
.bc-profloor-tab-active img{
    transform:scale(1.16);
    filter:drop-shadow(0 5px 8px rgba(31,79,145,.12));
}

.bc-profloor-tab:active img{
    transform:scale(1.10);
}

/* 顶部只改变文字颜色 */
.bc-profloor-tab:hover span,
.bc-profloor-tab-active span{
    color:#2386f4;
}


/* =========================================================
   产品主体
========================================================= */

.bc-profloor-main{
    position:relative;
    width:1360px;
    margin:0 auto;
    overflow:visible;
}

.bc-profloor-panels{
    position:relative;
    width:1360px;
    min-height:724px;
    margin:0;
    overflow:visible;
}

.bc-profloor-panel{
    display:none;
    width:100%;
    margin:0;
}

.bc-profloor-panel-active{
    display:block;
}


/* =========================================================
   产品网格
   每页显示5列 × 2行
========================================================= */

.bc-profloor-grid{
    width:1360px;
    margin:0;

    display:grid;
    grid-template-columns:repeat(5,1fr);

    column-gap:14px;
    row-gap:18px;

    align-items:stretch;

    overflow:visible;
}


/* JS隐藏非当前页产品 */
.bc-procard.bc-procard-hide{
    display:none;
}


/* =========================================================
   产品卡片
========================================================= */

.bc-procard{
    position:relative;

    width:100%;
    height:353px;

    margin:0;
    padding:20px 18px 18px;

    background:#fff;
    border-radius:20px;

    overflow:hidden;
    text-align:center;

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.bc-procard:hover{
    z-index:10;

    transform:translateY(-10px);

    box-shadow:
        0 8px 15px rgba(31,57,91,.05),
        0 20px 38px rgba(31,57,91,.14);
}


/* =========================================================
   产品图片
========================================================= */

.bc-procard-img{
    width:100%;
    height:150px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
    text-decoration:none;
}

.bc-procard-img img{
    display:block;

    max-width:100%;
    max-height:100%;

    margin:0;

    border:0;
    object-fit:contain;

    transition:transform .3s ease;
}

.bc-procard:hover .bc-procard-img img{
    transform:scale(1.055);
}


/* =========================================================
   型号
========================================================= */

.bc-procard-title{
    display:block;

    width:100%;

    margin-top:16px;
    padding:0 5px;

    overflow:hidden;

    color:#171717;
    font-size:18px;
    line-height:28px;
    font-weight:700;

    text-align:center;
    text-decoration:none;

    white-space:nowrap;
    text-overflow:ellipsis;

    transition:color .18s ease;
}

.bc-procard-title:hover{
    color:#194f91;
}


/* =========================================================
   价格
========================================================= */

.bc-procard-price{
    margin-top:7px;

    color:#555;
    font-size:13px;
    line-height:22px;
    font-weight:400;

    text-align:center;
    white-space:nowrap;
}


/* =========================================================
   了解更多
========================================================= */

.bc-procard-btn{
    display:block;

    width:82px;
    height:27px;

    margin:18px auto 0;

    border-radius:3px;
    background:#214b8a;

    color:#fff;
    font-size:12px;
    line-height:27px;
    font-weight:400;

    text-align:center;
    text-decoration:none;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.bc-procard-btn:hover{
    color:#fff;
    background:#153d7d;

    transform:translateY(-2px);

    box-shadow:0 5px 10px rgba(33,75,138,.18);
}


/* =========================================================
   购买
========================================================= */

.bc-procard-buy{
    display:inline-flex;

    margin-top:13px;

    align-items:center;
    justify-content:center;

    color:#214b8a;
    font-size:13px;
    line-height:20px;

    text-decoration:none;

    transition:color .18s ease;
}

.bc-procard-buy i{
    margin:0 0 0 5px;

    color:inherit;
    font-size:15px;
    line-height:1;
}

.bc-procard-buy:hover{
    color:#1686f7;
}


/* =========================================================
   左右切换箭头
========================================================= */

.bc-profloor-arrow{
    position:absolute;
    top:50%;

    z-index:30;

    width:52px;
    height:52px;

    margin:0;
    padding:0;

    border:0;
    outline:0;
    background:transparent;

    cursor:pointer;

    transform:translateY(-50%);
}

.bc-profloor-arrow-prev{
    left:-100px;
}

.bc-profloor-arrow-next{
    right:-100px;
}

.bc-profloor-arrow img{
    position:absolute;
    left:0;
    top:0;

    display:block;

    width:52px;
    height:52px;

    margin:0;

    border:0;

  
}

.bc-profloor-arrow-normal{
    opacity:1;
}

.bc-profloor-arrow-hover{
    opacity:0;
}

.bc-profloor-arrow:hover .bc-profloor-arrow-normal{
    opacity:0;
}

.bc-profloor-arrow:hover .bc-profloor-arrow-hover{
    opacity:1;
}


/* =========================================================
   禁用箭头
========================================================= */

.bc-profloor-arrow-disabled{
    cursor:default;
}

.bc-profloor-arrow-disabled .bc-profloor-arrow-normal{
  
}

.bc-profloor-arrow-disabled .bc-profloor-arrow-hover{
    opacity:0;
}

.bc-profloor-arrow-disabled:hover .bc-profloor-arrow-normal{
    
}

.bc-profloor-arrow-disabled:hover .bc-profloor-arrow-hover{
    opacity:0;
}


/* =========================================================
   首页优势
========================================================= */

.bc-home-advantage,
.bc-home-advantage *{
    box-sizing:border-box;
}

.bc-home-advantage *{
    margin:0;
    padding:0;
}

.bc-home-advantage{
    width:100%;
    height:500px;
    margin-top:60px;
    background-image:url("../images/home/homeysbg.jpg");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    overflow:hidden;
}

.bc-home-advantage .bc-container{
    height:500px;
    margin:0 auto;
}


/* =========================================================
   三个卡片
========================================================= */

.bc-home-advantage-list{
    width:1360px;
    height:500px;
    margin:0;
    padding-top:73px;

    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:62px;
}

.bc-home-advantage-item{
    position:relative;

    width:412px;
    height:350px;

    padding:89px 40px 35px;

    border-radius:7px;

    background:rgba(225,233,245,.31);

    color:#fff;

    overflow:hidden;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* 中间默认深色 */
.bc-home-advantage-item.bc-home-advantage-active{
    background:rgba(3,43,79,.72);
}


/* 鼠标移入 */
.bc-home-advantage-item:hover{
    background:rgba(3,43,79,.78);
    transform:translateY(-6px);
    box-shadow:0 14px 30px rgba(0,24,51,.18);
}


/* =========================================================
   图标
========================================================= */

.bc-home-advantage-icon{
    position:absolute;

    left:40px;
    top:89px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:rgba(255,255,255,.67);

    display:flex;
    align-items:center;
    justify-content:center;
}

.bc-home-advantage-icon img{
    display:block;

    width:32px;
    height:32px;

    margin:0;

    border:0;
    object-fit:contain;
}


/* =========================================================
   标题
========================================================= */

.bc-home-advantage-title{
    margin-top:87px;

    color:#fff;

    font-size:26px;
    line-height:38px;
    font-weight:400;

    text-align:left;
    white-space:nowrap;
}


/* =========================================================
   说明文字
========================================================= */

.bc-home-advantage-desc{
    margin-top:13px;

    color:rgba(255,255,255,.92);

    font-size:14px;
    line-height:21px;
    font-weight:400;

    text-align:left;
}



/* =========================================================
   品牌专区
========================================================= */

.bc-brand,
.bc-brand *{
    box-sizing:border-box;
}

.bc-brand *{
    margin:0;
    padding:0;
}

.bc-brand{
    width:100%;
    padding:40px 0;
    text-align:left;
}

.bc-brand .bc-container{
    margin:0 auto;
}


/* 白色主体 */

.bc-brand-box{
    width:1360px;
    height:258px;

    padding:20px 20px 18px;

    background:#fff;
    border-radius:20px;
}


/* =========================================================
   标题
========================================================= */

.bc-brand-head{
    width:100%;
    height:35px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.bc-brand-title{
    color:#222;
    font-size:20px;
    line-height:28px;
    font-weight:400;
}

.bc-brand-more{
    margin-top:4px;

    color:#1686f7;
    font-size:13px;
    line-height:20px;

    text-decoration:none;

    transition:color .18s ease;
}

.bc-brand-more:hover{
    color:#0c67c9;
}


/* =========================================================
   品牌列表
   16个品牌：8列 × 2行
   左右留白严格平均
========================================================= */

.bc-brand-list{
    width:100%;

    margin-top:9px;

    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));

    column-gap:14px;
    row-gap:17px;
}


/* =========================================================
   品牌卡片
========================================================= */

.bc-brand-item{
    width:100%;
    height:79px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;

    border:1px solid #ececec;
    border-radius:10px;

    overflow:hidden;

    text-decoration:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.bc-brand-item img{
    display:block;

    max-width:110px;
    max-height:61px;

    margin:0;

    border:0;
    object-fit:contain;

    transition:transform .22s ease;
}


/* 很轻的hover，不做太夸张 */

.bc-brand-item:hover{
    border-color:#c9def8;

    transform:translateY(-2px);

    box-shadow:0 5px 14px rgba(30,79,140,.08);
}

.bc-brand-item:hover img{
    transform:scale(1.04);
}