:root{
    font-size: 100px;
}
/* time:2020-08-10 */
header{ width: 100%; position: relative; z-index: 99; display: block; background: #fff;}
header .top-text{ display: block; background: #2e2e2e; width: 100%; font-size: 0;}
header .top-text .box{ display: inline-block; font-size: .12rem; margin-right: .28rem;}
header .top-text .box a{ display: inline-block; color: #fff;}
header .top-text .box i,
header .top-text .box span{ display: inline-block; color: #fff; line-height: .4rem; vertical-align: top;}
header .top-text .box i{ font-family: "iconfont2"; color: #40b1c1; font-size: .16rem; margin-right: 3px;}
header .top-text .box.welcome{ float: right; margin-right: 0;}

header nav{ display: block; width: 100%;}
header nav a.logo{ margin: .2rem 0 .25rem; height: .67rem; display: inline-block;}
header nav a.logo img{ max-height: 100%}
header nav ul{ float: right; margin-top: .3rem;}
header nav ul li{ line-height: .6rem; float: left; position: relative;}
header nav ul li a{ color: #838383; float: left; margin: 0 .24rem; 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: #40b1c1;}
header nav ul li a.cur{ font-weight: bold;}
.mobile-only {display: none;}

@media screen and ( max-width:768px){
    .mobile-only {display: block;}
    header::after{ left: 45vw; height: .6rem; transform: skewX(30deg);}
    header a.logo{
        height: .4rem;
        margin: .1rem
    }
    .mobile-menu.iconfont { float: right; font-size: .3rem; margin: .225rem 4% 0 0;}
    header nav{ width: 100%;}
    header nav .top-text{
        position: absolute;
        top: .1rem; right: .1rem;
        margin-right: 0;
    }
    header nav a.logo { height: auto; }
    header nav a.logo img { width: 1.8rem; }
    .top-text .box.tel{ display: none;}
    header nav ul { padding: .2rem 6%; box-sizing: border-box; width: 100%; height: calc(100vh - 1.2rem);height: -moz-calc(100vh - 1.2rem);height: -webkit-calc(100vh - 1.2rem); display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0;background-color: #fff; position: absolute; top: 1.2rem;left: 50%;transform: translateX(-50%); z-index: 2; }
    header nav ul li{background-color: #fff; position: absolute;left: 6%; top: 50%; transform: translateY(-50%);transform-origin: left top; float: unset;display: flex;align-items: center; width: 88%; line-height: .4rem;border: 1px solid #ddd;}
    header nav ul li a{ margin: 0; font-size: .16rem; text-align: center; width: 100%; line-height: .8rem; padding: 0; color: #333; position: relative;}
    header nav ul li a::before{ content: "\e60e"; font-family: "iconfont2"; font-size: .24rem; position: absolute; left: .7rem; top: 0; }
    header nav ul li.about a::before{ content: "\e60b"; }
    header nav ul li.news a::before{ content: "\e619"; }
    header nav ul li.products a::before{ content: "\e69e"; }
    header nav ul li.Supports a::before{ content: "\e634"; }
    header nav ul li.contact a::before{ content: "\e61a"; }
    header nav ul li:last-child a::before{ content: "\e62d"; }

    /*展开菜单*/
    header nav ul.active li:nth-of-type(1) { animation: extend1 1s .6s forwards ease-in-out; z-index: 7;}
    header nav ul.active li:nth-of-type(2) { animation: extend2 1s .6s forwards ease-in-out; z-index: 6;}
    header nav ul.active li:nth-of-type(3) { animation: extend3 1s .6s forwards ease-in-out; z-index: 5;}
    header nav ul.active li:nth-of-type(4) { animation: extend4 1s .6s forwards ease-in-out; z-index: 4;}
    header nav ul.active li:nth-of-type(5) { animation: extend5 1s .6s forwards ease-in-out; z-index: 3;}
    header nav ul.active li:nth-of-type(6) { animation: extend6 1s .6s forwards ease-in-out; z-index: 2;}
    header nav ul.active li:nth-of-type(7) { animation: extend7 1s .6s forwards ease-in-out; z-index: 1;}
}

@keyframes extend1 {
50%{transform: rotate(-4deg) translateY(-50%)}
98%{transform: rotate(0); transform-origin: center;}
100%{top: 5%; transform: translateY(0)}
}
@keyframes extend2 {
50%{transform: rotate(-3deg) translateY(-50%)}
98%{transform: rotate(0); transform-origin: center;}
100%{top: 17.86%; transform: translateY(0)}
}
@keyframes extend3 {
50%{transform: rotate(-2deg) translateY(-50%)}
98%{transform: rotate(0); transform-origin: center;}
100%{top: 30.71%; transform: translateY(0)}
}
@keyframes extend4 {
50%{transform: translateY(-50%)}
98%{transform: rotate(0); transform-origin: center;}
100%{top: 43.57%; transform: translateY(0)}
}
@keyframes extend5 {
50%{transform: rotate(2deg) translateY(-50%)}
98%{transform: rotate(0); transform-origin: center;}
100%{top: 56.43%; transform: translateY(0)}
}
@keyframes extend6 {
50%{transform: rotate(3deg) translateY(-50%)}
98%{transform: rotate(0); transform-origin: center;}
100%{top: 69.29%; transform: translateY(0)}
}
@keyframes extend7 {
50%{transform: rotate(4deg) translateY(-50%)}
98%{transform: rotate(0); transform-origin: center;}
100%{top: 82.14%; transform: translateY(0)}
}