:root{
    font-size: 100px;
}

header{ width: 100%; position: relative; z-index: 99; font-size: 0; display: block; background: #fff; overflow: hidden;}
header .logo{ margin: .27rem 0 .32rem 1.24rem; height: .6rem; 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; margin-right: 1.2rem;}
header nav .top-text{ display: block; font-size: 0;  text-align: right;}
header nav .top-text .box{ display: inline-block; font-size: .12rem; height: .2rem; border-right: 1px solid #ccc; padding-right: .16rem; margin: .3rem .16rem 0 0;}
header nav .top-text .box a{ display: inline-block; color: #97989e; transition: all 0.3s ease-in-out;  text-transform: uppercase;}
header nav .top-text .box i,
header nav .top-text .box span{ display: inline-block; color: #97989e; line-height: .2rem; vertical-align: top; transition: all 0.3s ease-in-out;}
header nav .top-text .box i{ font-family: "iconfont"; font-size: .16rem; margin-right: 3px;}
header nav .top-text .box.tel{ border: none; margin-right: 0; padding: 0;}
header nav .top-text .box.tel span{ vertical-align: bottom;}
header nav .top-text .box.tel span.tel{ font-size: .22rem; color: #0061ae;}
header nav .top-text .box a:hover span{ color: #0061ae;}
header nav .top-text .box a:hover i{ color: #0061ae;}



header nav ul{ float: left; margin-top: .16rem;}
header nav ul > li{ line-height: .32rem; float: left; position: relative;}
header nav ul li a{ text-transform: uppercase; color: #000; float: left; margin: 0 .3rem; 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: #0061ae;}
header nav ul li a.cur::after{ position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 1px; display: block; background: #0061ae;}
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;}
    
}