/*=================================
 Header
=================================*/

.site-header{
    height:90px;
    background:#fff;
    position:relative;
    z-index:999;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}


/*=================================
 Header Container
=================================*/

.header-container{
    width:1320px;
    max-width:90%;

    height:90px;

    margin:0 auto;

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


/*=================================
 Logo
=================================*/

.header-logo{
    flex:0 0 auto;
}

.header-logo img{
    display:block;

    height:55px;
    width:auto;
}


/*=================================
 PC MENU
=================================*/

.pc-menu{
    display:block;
    flex:0 0 auto;
}

.pc-menu ul{
    display:flex;
    align-items:center;

    list-style:none;

    padding:0;
    margin:0;
}


/* 一级栏目 */

.pc-menu>ul>li{
    position:relative;

    flex:0 0 auto;

    margin-left:38px;
}


.pc-menu a{
    display:block;

    font-size:16px;
    color:#333;

    text-decoration:none;

    line-height:90px;

    /* 关键：禁止iPad临界宽度把中文拆行 */
    white-space:nowrap;
    word-break:keep-all;
}


.pc-menu>ul>li:hover>a,
.pc-menu .active>a{
    color:#ee6e22;
}


/*=================================
 二级菜单
=================================*/

.pc-menu .sub-menu{
    display:none;

    position:absolute;

    top:90px;
    left:50%;

    transform:translateX(-50%);

    width:160px;

    background:#fff;

    z-index:9999;

    box-shadow:0 5px 15px rgba(0,0,0,.08);
}


.pc-menu .menu-item:hover>.sub-menu,
.menu-item:hover .sub-menu{
    display:block;
}


.sub-menu li{
    width:100%;
    margin:0!important;
}


.sub-menu a{
    height:42px;

    line-height:42px!important;

    text-align:center;

    font-size:14px;

    color:#555;

    white-space:nowrap;
}


.sub-menu a:hover{
    color:#ee6e22;
    background:#fafafa;
}


/*=================================
 Mobile Button
=================================*/

.mobile-btn{
    display:none;

    width:30px;

    flex:0 0 auto;

    cursor:pointer;
}


.mobile-btn span{
    display:block;

    width:100%;
    height:3px;

    background:#ee6e22;

    margin:6px 0;

    transition:.3s;
}


/* 可选：汉堡打开动画 */

.mobile-btn.open span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.mobile-btn.open span:nth-child(2){
    opacity:0;
}

.mobile-btn.open span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}


/*=================================
 Mobile Menu 默认隐藏
=================================*/

.mobile-menu{
    display:none;
}


/*==================================================
 宽屏 PC
==================================================*/

@media(min-width:1101px){

    .pc-menu{
        display:block;
    }

    .mobile-btn{
        display:none;
    }

    .mobile-menu{
        display:none!important;
    }

}


/*==================================================
 中等尺寸 PC
 1101px - 1280px
==================================================*/

@media(min-width:1101px) and (max-width:1280px){

    .header-container{
        max-width:94%;
    }

    .pc-menu>ul>li{
        margin-left:26px;
    }

    .pc-menu a{
        font-size:15px;
    }

    .header-logo img{
        height:50px;
    }

}


/*==================================================
 iPad + 手机
 1100px及以下直接切移动导航
==================================================*/

@media(max-width:1100px){

    .site-header{
        height:72px;
    }


    .header-container{
        width:auto;
        max-width:none;

        height:72px;

        margin:0;
        padding:0 24px;
    }


    .header-logo img{
        height:48px;
    }


    /* PC导航彻底隐藏 */

    .pc-menu{
        display:none!important;
    }


    /* 汉堡按钮显示 */

    .mobile-btn{
        display:block;
    }


    /* 下拉菜单 */

    .mobile-menu{
        position:absolute;

        top:72px;
        left:0;

        width:100%;

        background:#fff;

        z-index:998;

        box-shadow:0 5px 12px rgba(0,0,0,.08);
    }


    .mobile-menu.show{
        display:block;
    }


    .mobile-menu ul{
        list-style:none;

        padding:0;
        margin:0;
    }


    .mobile-menu li{
        border-bottom:1px solid #ddd;
    }


    .mobile-title{
        height:52px;

        display:flex;
        align-items:center;

        padding:0 24px;
    }


    .mobile-title a{
        display:block;

        width:100%;

        font-size:16px;

        color:#333;

        text-decoration:none;
    }


    /* 二级栏目 */

    .mobile-sub{
        display:none;
    }


    .mobile-item.active .mobile-sub{
        display:block;
    }


    .mobile-sub li{
        background:#fafafa;
    }


    .mobile-sub a{
        display:block;

        height:45px;

        line-height:45px;

        padding-left:45px;

        font-size:14px;

        color:#666;

        text-decoration:none;
    }

}


/*==================================================
 手机
==================================================*/

@media(max-width:768px){

    .site-header{
        height:60px;
    }


    .header-container{
        height:60px;

        padding:0 20px;
    }


    .header-logo img{
        height:38px;
    }


    .mobile-menu{
        top:60px;
    }


    .mobile-title{
        padding:0 20px;
    }

}