:root{
    --gold: #e6000f;
    --titleColor: #464345;
    --contentColor: #686868;
}
.gold {
    color: #bd8b5e;
}
header { width: 100%; font-size: 0; position: fixed; background: transparent; top: 0; left: 0; z-index: 999; transition: all .3s ease-in-out; height: 1.1rem;}
header .logo { position: absolute; left: .8rem; top: .3rem; width: 3rem; height: .5rem; display: inline-block; vertical-align: top; transition: height .4s ease-in-out, padding .4s ease-in-out; }
header .logo img { height: .5rem; width: 3rem; object-fit: cover; object-position: top; transition: height .4s ease-in-out;}

header nav{ float: right; margin-top: .37rem; transition: all .4s ease-in-out; margin-right: .8rem;}
header nav ul,
header nav ul li { float: left; position: relative;}
header nav ul > li > a { font-size: .21rem; color: #fff; display: inline-block; line-height: .36rem; transition: all .4s ease-in-out; padding: 0 .22rem; box-sizing: border-box; font-weight: normal;}
header nav ul > li:hover a { opacity: .7;}


header nav .icon { margin-left: .05rem; position: relative; font-size: 0; transition: height .4s ease-in-out;}
header nav .icon li { width: .36rem; height: 100%; position: relative; margin-left: .16rem; display: inline-block;}
header nav .icon li a{ padding: 0;}
header nav .icon i { width: .36rem; height: .36rem; box-sizing: border-box; display: inline-block; border: 1px solid #fff; font-size: .2rem; border-radius: 50%; line-height: .34rem; color: #fff; font-family: "iconfont"; text-align: center; transition: all 0.3s ease-in-out; cursor: pointer;}
header nav .icon i.ali{font-size: .14rem;}
header nav .icon i:hover{ background: #fff; color: var(--gold);}

header nav .icon .pop { position: absolute; left: 50%; top: .58rem; transform: translateX(-50%); width: 1.75rem; height: 1.75rem; background-color: rgba(255, 255, 255); display: flex; justify-content: center; align-items: center; transition: top .4s ease-in-out; pointer-events: none; opacity: 0; border-radius: 2px;}
header nav .icon .pop::before { content: ''; position: absolute; bottom: 100%; left: 50%; bottom: 100%; transform: translateX(-50%); width: 0; height: 0; border-width: .06rem; border-style: solid; border-color: transparent; border-bottom-width: .1rem; border-bottom-color: rgba(255, 255, 255);}
header nav .icon .pop.qrcode{
    width: .85rem; height: .85rem; 
}
header nav .icon .pop.qrcode img{
    max-width: .8rem;
}
header nav .icon .phone { width: 2rem; height: auto; padding: .05rem 0; line-height: 1.25; font-family: "DIN-Medium"; font-size: .2rem; text-align: center; color: #000;}
header nav .icon .pop.phone{ left: auto; right: 0; transform: translateX(0);}
header nav .icon .pop.phone::before{
    left: auto; right: .14rem; transform: translateX(0);
}

header nav .icon li:hover .pop { opacity: 1; pointer-events: auto;}


/*头部装甲-改*/
header.small { background-color: var(--gold);}



.mobile-only {
    display: none;
}



@media screen and ( max-width: 1440px) {
    header .logo{ left: .4rem;}
    header nav{ margin-right: .4rem}
}

@media screen and ( max-width: 1366px){
    header nav ul > li > a{ padding:  0 .18rem}
} 


@media screen and ( max-width:768px) {
    header{
        height: .6rem;
    }

    .mobile-only {
        display: block;
    }
    .pc-only {
        display: none;
    }
    header .logo {
        top: 0; left: 0;  margin: .15rem 0 0 .15rem; padding: 0; position: relative; height: .4rem;
    }
    header .logo img {
        height: auto; width: 2rem;
    }
    header .menu {
        position: fixed; top: .1rem; right: .1rem; width: .4rem; height: .4rem; box-sizing: border-box; padding: 0 .05rem;
    }
    header .menu i{
        width: 100%; height: 2px; position: relative; top: 50%; left: 0; background: #fff; display: block; transform: translateY(-50%); transition: all 0.3s ease-in-out;
    }
    header .menu i::before,
    header .menu i::after{
        content: ""; width: 100%; height: 2px; position: absolute; left: 0; background: #fff; display: block; transition: all 0.3s ease-in-out;
    }
    header .menu i::before{
        top: -.1rem;
    }
    header .menu i::after{
        bottom: -.1rem;
    }
    header .menu.open i{
        background: transparent;
    }
    header .menu.open i::before{
        top: 0; transform: rotate(-45deg);
    }
    header .menu.open i::after{
        bottom: 0; transform: rotate(45deg);
    }


header .nav { 
    margin-right: 0;
}
header nav {
    margin: 0;
    width: 100%; height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--gold);
}
header nav > ul {
    box-sizing: border-box; padding: 0 10vw;
}
header nav li {
    float: unset; width: 100%; margin-top: .3rem;
}
header nav li a {
    padding: 0;
    color: #333;
    width: 100%;
    display: block;
    line-height: .5rem;
    line-height: 6vh;
}


/*菜单展开*/
header nav.open {
    height: calc(100vh - .6rem);
    opacity: 1;
    pointer-events: auto;
}
header nav.open .menu-copyright {
    bottom: 0;
    opacity: 1;
}


}