:root{
    font-size: 100px;
}

header{ width: 100%; position: relative; z-index: 99; font-size: 0; display: block; background: #fff; overflow: hidden;}
header .logo{ margin: .24rem 0 .26rem; height: .32rem; display: inline-block;}
header .logo a{ display: inline-block; height: 100%; vertical-align: top;}
header .logo a img{ max-height: 100%}
header .logo .logo-tit{ display: inline-block;  border-left: 1px solid #ccc; margin: .12rem 0 0 .38rem; padding-left: .2rem; height: .46rem; vertical-align: top; text-transform: uppercase;}
header .logo .logo-tit h2{ display: block; font-size: .24rem; font-weight: bold; color: #000; margin-top: -.03rem}
header .logo .logo-tit h2 span{ color: #0061ae;}
header .logo .logo-tit h3{ display: block; font-size: .12rem; color: #484848; margin-top: .05rem;}
header .menu{ display: none;} /* 移动端使用 */

header nav{ float: right;}

header nav ul{ float: left; margin-top: .28rem;}
header nav ul > li{ line-height: .24rem; float: left; position: relative;}
header nav ul li a{ text-transform: uppercase; color: #bfbfbf; float: left; margin-left: .4rem; font-size: .16rem;  transition: all 0.3s ease-in-out; position: relative;}
header nav ul li a.cur,
header nav ul li a:hover{ color: #df4a42;}
header form{ float: left; position: relative; }
header form button{ font-family: "iconfont"; position: relative; z-index: 2; border: none; border-color: #ccc; background: none; line-height: .32rem; font-size: .16rem; transition: all 0.3s ease-in-out;}
header form input{opacity: 0; position: absolute; top: 0; border: 1px solid #ccc; line-height: .32rem; box-sizing: border-box; width: 0; right: 0; transition: all 0.3s ease-in-out;}
header form:hover input{ opacity: 1; background: #fff; padding: 0 .1rem; width: 1.9rem;}
header form:hover button{ border-left: 1px solid #ccc; padding: 0 .1rem;}


/* @media screen and ( max-width:1600px){
    header .logo{ margin-left: .3rem;}
    header nav{ margin-right: .3rem;}
}

@media screen and ( max-width:1440px){
    header .logo{ margin-left: .3rem;}
    header nav{ margin-right: .3rem;}
    header .logo .logo-tit{ display: none;}
}
@media screen and ( max-width:1366px){
    header .logo{ margin-left: .3rem;}
    header nav{ margin-right: .3rem;}
}

@media screen and ( max-width:1288px){
    header .logo{ margin-left: .1rem;}
    header nav{ margin-right: .1rem;}
} */



@media screen and ( max-width:768px){
    header .logo{ margin: .16rem; height: .48rem;}
    header nav .top-text{ display: none;}
    header .menu{ display: block; position: fixed; box-sizing: border-box; padding: 0 .07rem; top: .2rem; right: .2rem; width: .4rem; height: .4rem; background: #ccc; z-index: 100;}
    header .menu span{ width: 100%; height: 2px; background: #fff; position: relative; margin-top: .19rem; display: block; position: relative; transition: all 0.2s ease-in-out;}
    header .menu span::before,
    header .menu span::after{ content: ""; position: absolute; bottom: -.08rem; left: 0; width: 100%; height: 2px; background: #fff; display: block; transition: all 0.4s ease-in-out .1s;}
    header .menu span::before{ top: -.08rem;}
    header .menu.open{ background: #0061ae;}
    header .menu.open span{ background: none;}
    header .menu.open span::before{ transform: rotate(-45deg); top: 0}
    header .menu.open span::after{ transform: rotate(45deg); bottom: 0;}
    
    header nav{ margin-right: 0; position: fixed; right: -50%; width: 50%; top: 0; z-index: 99; height: 100%; background: #eee; transition: all 0.4s ease-in-out .1s; box-sizing: border-box; padding: .8rem 0 .4rem 0}
    header nav.open{ right: 0; }
    header nav ul{ margin-top: .16rem; display: flex; flex-direction: column; justify-content: space-around; height: 100%; width: 100%;}
    header nav ul > li{ width: 100%;}

    header nav ul li a{ margin: 0; box-sizing: border-box; padding: 0 .2rem; text-align: right; padding-bottom: .1rem;  width: 100%; transition: all 0.3s ease-in-out;}
    header nav ul li a.cur,
    header nav ul li a:hover{ font-weight: bold;}
    header nav ul li a.cur::after{ height: 3px; width: 0; background: #0061ae; transition: all 0.6s ease-in-out .6s;}
    header nav.open ul li a.cur::after{ width: 100%;}

    /* header form{ float: right; position: relative; max-width: 90%; margin: 0 .2rem; }
    header form button{ font-family: "iconfont"; position: relative; float: right; z-index: 2; border: none; border-color: #ccc; background: none; line-height: .32rem; font-size: .16rem; transition: all 0.3s ease-in-out;}
    header form input{opacity: 1; position: absolute; top: 0; border: 1px solid #ccc; line-height: .32rem; box-sizing: border-box; width: 100%; right: 0; transition: all 0.3s ease-in-out;}
    header form:hover input{ opacity: 1; background: #fff; padding: 0 .1rem; width: 100%;}
    header form:hover button{ border-left: 1px solid #ccc; padding: 0 .1rem;} */
    
}