header{ width: 100%; display: block; background: #2c2c2c; height: 137px; position: absolute; top: 0; left: 0; z-index: 101;}
header .h-l{ float: left; color: rgba(255,255,255,.6); line-height: 37px; margin-left: 26px;}
header .h-l .fl{ float: left; margin-right: 16px;}
header .h-l i{ font-family: "iconfont"; font-size: 20px; float: left; margin: 0 5px;}
header .h-l span{ float: left; font-size: 12px;}
header .h-r{ float: right; color: rgba(255,255,255,.6); line-height: 37px; margin-right: 10px;font-size: 12px; text-transform: uppercase;}

nav{ width: 100%; float: left; }

nav .muen{
    width: 100%; background: #fff; float: left; height: 102px;
}
nav .muen .logo{
    margin: 29px 0 0 22px; float: left;
}
nav .muen .logo img{
    max-width: 100%;
}
nav .muen .logo span{ display: block; font-size: 14px; line-height: 1.5; color: #000;}
nav .muen .logo span a{ color: #000;}
nav .muen .icon-m-muen{display: none;}
header nav .muen .nav-zt{
    float: right;
}
header nav .muen .nav-zt ul{
    float: left;
}
nav ul li{
    float: left; margin: 0 20px;
}
nav ul li a{
    color: #323232; font-size: 14px; line-height: 102px; padding: 0 3px; text-transform: uppercase;
}
header nav .muen .nav-zt .language{
    float: left;
    margin-right: 20px;
}
header nav .muen .nav-zt .language a{
    float: left; margin: 45px 0 0 9px;
}

nav ul li a.cur,nav ul li a:hover{
    color: #00689b;
}
nav ul li a.cur{
    font-weight: bold;
}
.muen-bottom{ width: 100%; float: left; background: #00458e; box-sizing: border-box; padding-right: 314px; font-size: 0; position: relative; height: 75px;}
.muen-bottom div[class^="muen-bottom-0"]{width: 33%; display: inline-block; float: left; text-align: center; line-height: 40px; margin-top: 17px; color: #fff; font-size: 16px; position: relative;}
.muen-bottom div[class^="muen-bottom-0"]::after{ content: ""; position: absolute; right: 0; top: 0; background: rgba(255,255,255,.2); width: 2px; height: 100%; float: right;}
.muen-bottom div[class^="muen-bottom-0"]:nth-child(3):after{ display: none;}
.muen-bottom div[class^="muen-bottom-0"] i{ width: 35px; height: 35px; font-family: iconfont; border-radius: 100%; border: 1px solid #fff; display: inline-block; margin: 2px 20px 0 0; vertical-align: middle;}
.muen-bottom div[class^="muen-bottom-0"] a{ color: #fff;}
.muen-bottom div[class^="muen-bottom-0"] a:hover{ opacity: .7;}
.muen-bottom .list{ position: absolute; top: 0; right: 0; width: 314px;}
.muen-bottom .list > div{ background: #2c2c2c; width: 50%; box-sizing: border-box; float: left; height: 75px;}
.muen-bottom .list > div:last-child{ border-left: 1px solid #ababab;}
.muen-bottom .list > div a{ font-weight: bold; color: #fff; font-size: 12px; width: 100%; text-align: center; float: left; line-height: 75px; position: relative;}
.muen-bottom .list > div a::before{ content: ""; font-family: 'iconfont'; font-size: 16px; display: inline; margin-right: 5px; font-weight: normal; vertical-align: middle;}
.muen-bottom .list > div a::after{ content: ""; width: 100px; position: absolute; left: 50%; bottom: 0; height: 3px; background: #808080; display: inline-block; transform: translateX(-50%)}
.muen-bottom .list > div.feedback a::before{ content: "\e644";}
.muen-bottom .list > div.download a::before{ content: "\e620";}

/* 切换 */
.banner{
    width: 100%; float: left;  margin-top: 137px; position: relative;  overflow: hidden;
    background: url(../images/banner-bg.jpg) no-repeat center center / cover;
}
.banner li{ width: 100%; position: relative; overflow: hidden;}
.banner li img{
    max-width: 100%;
    max-height: 100%;
}

.banner li .img01, .banner li .img02, .banner li .img03{
    width: 100%;
    float: left; opacity: 0;
}

.banner li .img02, .banner li .img03,.banner li .text{
    position: absolute;
    z-index: 2;
}
.banner li .img01{
    opacity: 0;
}
.banner li .img02{
    transform: translateX(-100%);
    transition: 0.4s ease-in-out 1.6s;
}
.banner li .img02{
    height: 100%;
}
.banner li .img03{
    z-index: 3;
    transform: translateY(100%);
    transition: 0.4s ease-in-out 1.2s;
}
.banner li .text{
    z-index: 4;
    font-weight: bold;
    color: #fff;
    font-style: italic;
    text-transform: uppercase;
    vertical-align: middle;
    top: 50%;
    left: 50%;
    margin: 39px 0 0 -600px;
    transform: translateY(-50%);
}

.banner li.ani-slide .img02{
    transform: translateX(0);
    transition: 0.4s ease-in-out .2s; opacity: 1;
} 
.banner li.ani-slide .img03{
    transform: translateY(0);
    transition: 0.6s ease-in-out .8s; opacity: 1;
} 

.banner li .text h2{
    font-size: 60px;
    display: inline-block;
    width: 100%;
    transform: translateY(20px);
    opacity: 0;
    transition: 0.4s ease-in-out .8s;
}
.banner li .text h3{
    display: inline-block;
    width: 100%;
    font-size: 100px;
    transform: translateY(20px);
    opacity: 0;
    transition: 0.4s ease-in-out .4s;
}
.banner li .text h4{
    display: inline-block;
    width: 100%;
    font-size: 24px;
    transform: translateY(20px);
    opacity: 0;
    transition: 0.4s ease-in-out 0s;
    font-weight: bold;
}

.banner li.ani-slide .text h2{
    transition: 0.4s ease-in-out 1.5s;
    transform: translateY(0);
    opacity: 1;
}
.banner li.ani-slide .text h3{
    transition: 0.4s ease-in-out 1.9s;
    transform: translateY(0);
    opacity: 1;
}
.banner li.ani-slide .text h4{
    transition: 0.4s ease-in-out 2.3s;
    transform: translateY(0);
    opacity: 1;
}


.banner .prev,.banner .next{ width: 45px; height: 45px; float: right; position: absolute; top: 60%; margin-top: -44px; border: 1px solid #222; box-sizing: border-box; text-align: center; line-height: 45px; font-family: "宋体"; font-size: 18px; font-weight: bold; color: #fff; right: 20px; z-index: 1113; background: #222;}
.banner .prev{ left: 20px; background: #fff; color: #da2c2d; border-color: #e2e2e2; }
.banner .prev:hover,.banner .next:hover{ opacity: 0.7;}



@media screen and (max-width: 734px){
    body{
        overflow-x: hidden;
    }
    .main{
        width: 100%;
    }
    header{
        height: 1.4rem;
        background: #00458e;
        position: fixed;
        z-index: 9999; transition: .4s ease-in-out .1s;
    }
    header nav{
        margin-top: .48rem; transition: .4s ease-in-out .1s;
    }
    .h-l, .h-r{ display: none;}
    nav .muen{
        height: .92rem; transition: .4s ease-in-out .1s;
    }
    nav .muen .logo{
        margin: .25rem auto 0; float: left; width: 100%; text-align: center;
    }
    nav .muen .logo img{
        height: .4rem;
        display: inline-block; transition: .4s ease-in-out .1s;
    }
    nav .muen .icon-m-muen{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        background: #2c2c2c;
        width: .5rem;
        height: .48rem;
        transition: .6s ease-in-out .2s;
        z-index: 99;
    }
    nav .muen .icon-m-muen::before,nav .muen .icon-m-muen::after{
        content: "";
        width: .2rem;
        height: .03rem;
        background: #fff;
        margin: .025rem 0;
        transition: .4s ease-in-out .1s;
    }
    nav .muen .language{
        position: absolute;
        left: .7rem;
        top: 0;
    }
    header nav .muen .nav-zt .language a{
        margin: .18rem .1rem 0 0;
    }
    nav ul{
        position: absolute;
        top: 0;
        right: 100%;
        background: #00458e;
        width: 100%;
        height: 100vh;
        transition: .6s ease-in-out .2s;
        z-index: 99;
        padding: 10vh 0 10vh 1rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    nav ul li{
        width: 100%;
        font-size: 0;
    }
    nav ul li a{
        padding: 0;
        line-height: .4rem;
        color: #fff;
        font-size: .2rem;
        font-weight: bold;
    }
    header.scroll{
        height: .48rem;
    }
    header.scroll nav .muen{
        height: 0;
    }
    header.scroll nav .muen .logo{
        top: 0;
        right: 0;
    }
    nav .muen .logo span{ display: none;}
    header.scroll nav .muen .logo a img{
        height: 0;
    }
    nav.open .muen .icon-m-muen{
        left: 100%;
        transform: translateX(-.5rem)
    }
    nav.open .muen .icon-m-muen::before{
        margin-left: -.1rem;
    }
    nav.open .muen .icon-m-muen::after{
        margin-right: -.1rem;
    }
    nav.open ul{
        right: .5rem;
    }

    .muen-bottom{ display: none;}
    .banner{
        margin-top: 1.4rem;
    }
}