
header.header{
    position:fixed;
    width: 100%;
    z-index:12;
    top:0;
    left:0;
    height: 96px;
    border-bottom:1px solid rgba(255, 255,255, 0.1);
    box-sizing:border-box;
    /*overflow:hidden;*/
}
header.header a{
    color: #fff;
}


header.header div.logo-nav a.logo {
    display: block;
    height: 48px;
    float: left;
    margin-top: 24px;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

header.header div.logo-nav a.logo img {
    height: 100%;
    display: block;
}
header.header div.logo-nav a.logo img.phone{
    display:none;
}


header.header nav.nav {
    float: right;
}

header.header nav.nav ul.level-one > li {
    float: left;
    /*position:relative;*/
}

header.header nav.nav ul.level-one > li >a {
    display: block;
    font-size: 16px;
    position: relative;
    font-weight: bold;
    padding:0 14px;
    line-height: 96px;
}

header.header nav.nav ul.level-one > li.on > a:after, header.header nav.nav ul.level-one > li > a:after{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color:rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 0;
    left:0;
    transform-origin: 100%;
    -webkit-transform-origin: 100%;
    -webkit-transition: -webkit-transform .42s cubic-bezier(.4,0,.2,1);
    transition: transform .42s cubic-bezier(.4,0,.2,1);
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    visibility: hidden\9;
}
header.header nav.nav ul.level-one > li.on > a:after, header.header nav.nav ul.level-one > li:hover > a:after {
    background-color:rgba(255, 255, 255, 0.2);
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform-origin: 0;
    -webkit-transform-origin: 0;
    visibility: visible\9;
}

header.header nav.nav ul.level-one > li.sub-nav a{
    position:relative;
}
header.header nav.nav ul.level-one > li.sub-nav a::after{
    display:none;
    content:'';
    width: 0;
    height: 0;
    position:absolute;
    position:absolute;
    border: 10px solid transparent;
    border-bottom-color: #173452;
    top:76px;
    left:50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;
}
header.header nav.nav ul.level-one > li.sub-nav a:hover::after{
    display:block;
}
header.header nav.nav ul.level-one > li .bg{
    position:absolute;

    top:96px;
    height: 64px;
    background:rgba(0, 0, 0, 0.3);

}
header.header nav.nav ul.level-one > li .level-two{
    position:absolute;
    /*left:50%;*/
    top:96px;
     /*-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);*/

    line-height: 64px;
    border-radius:6px;
    /*display:none;*/
    height: 0;
    overflow:hidden;
    white-space: nowrap;
}
header.header nav.nav ul.level-one > li .level-two a{
    display:block;
    float:left;
    padding:0 10px;
    box-sizing:border-box;
    text-align:center;
}
header.header nav.nav ul.level-one > li .level-two a:hover{
    background:#173452;
}
header.header .tel{
    line-height: 96px;
    font-size: 20px;
    margin-left: 40px;
}
header.header a.tel{

    display: none;

}
header.header a.toggleMenu {
    display: none;
    float: right;
    width: 32px;
    height: 30px;
    margin: 28px 23px 0 0;
    position: relative;
    z-index: 999;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

header.header a.toggleMenu span {
    position: absolute;
    display: block;
    height: 2px;
    width: 100%;
    background: #333333;
    -webkit-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    -o-transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}



header.header a.toggleMenu span:nth-child(2) {
    top: 10px;
}

header.header a.toggleMenu span:last-child {
    top: 20px;
}

header.header a.toggleMenu.on span {
    top: 10px;
}

header.header a.toggleMenu.on span:first-child {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

header.header a.toggleMenu.on span:last-child {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

header.header a.toggleMenu.on span:nth-child(2) {
    opacity: 0;
}

header.header.fixed {
    background-color:#000;
    z-index: 100;
}


footer.footer{
    overflow:hidden;
}
footer.footer>div.bottom{
    display: block;
}
div.bottom{
    display: none;
}
footer.footer >.top{
    padding:40px 20px;
    background-color:#404040;
    color: #fff;
}
footer.footer >.top .left >a{
    display:block;
    text-align:center;
}
footer.footer >.top .left >a img{
    display:block;
    width: 112px;
    margin:0 auto;
}
footer.footer >.top .left >a span{
    color: #fff;
    opacity: 0.6;
    margin-top: 10px;
}
footer.footer >.top .right .item{
    position:relative;
    padding:0 20px;
}
footer.footer >.top .right .item::after{
    display:block;
    content:'';
    width: 1px;
    height: 144px;
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(255, 255, 255, 0.12);
}
footer.footer >.top .right .item >.tit{
    font-size: 18px;
    font-weight:bold;
    color: #fff;
    position:relative;
}
footer.footer >.top .right .item >.tit::after{
    display:block;
    content:'';
    width: 58px;
    height: 2px;
    background-color:rgba(255, 255, 255, 0.12);
    margin:10px 0;
}
footer.footer >.top .right .item >p{
    font-size: 15px;
    line-height: 2;
    opacity: 0.6;
}


footer.footer .bottom{
    background-color:#363636;
    padding:40px 20px;
}

footer.footer .bottom .nav{
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
}
footer.footer .bottom .nav a{
    font-size: 16px;
    color: #fff;
    padding:0 20px;
    line-height:2;
    position:relative;
}
footer.footer .bottom .nav a:after{
    display:block;
    content:'';
    width: 1px;
    height: 14px;
    background-color:rgba(255, 255, 255, 0.12);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0;
}
footer.footer .bottom .nav a:first-child::after{
    display:none;
}

footer.footer .bottom p.copy,footer.footer .bottom p.copy a{
    color: #fff;
    opacity: 0.6;
    text-align: center;
    margin-top: 16px;
}


.toTop{
    display:none;
    width: 64px;
    height: 144px;
    position: fixed;
    bottom:50px;
    right: 40px;
    background:#363636;
    border-radius:500px;
    z-index:10;
}

.toTop .tel,.toTop .top{
    display:block;
    width: 100%;
    height: 50%;
    background:no-repeat center / 26px 28px;
    position:relative;
}
.toTop .tel::after{
    display:block;
    content: '';
    width: 80%;
    height: 1px;
    background:#4a4a4a;
    left:50%;
    bottom:0;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    position:absolute;
}
@media screen and (max-width: 1660px) {
    header.header{
        padding:0 20px;
    }
    header.header nav.nav ul.level-one > li >a{
        padding:0 6px;
    }
    header.header .tel{
        margin-left: 2px;
    }
}
@media screen and (max-width: 1200px) {
    header.header.fixed {
        background-color:#fff;
    }
    body{
        padding-top: 80px;
        padding-bottom: 100px;
    }
    header.header {
        height: 80px;
        padding: 0 15px;
        background:#fff;
        color: #333;
    }
    header.header a{
        color: #333;
    }
    header.header div.logo-nav a.logo{
        height: 48px;
    }
    header.header div.logo-nav a.logo img.pc {
        display: none;
    }
    header.header div.logo-nav a.logo img.phone{
        display:block;
    }

    header.header nav.nav {
        display: none;
    }
    header.header nav.nav.on{
        display: block;
    }

    header.header div.logo-nav a.logo {
        height: 48px;
        margin-top: 16px;
    }

    header.header a.toggleMenu{
        display:block;
    }
    header.header a.toggleMenu.on{
        z-index:10001;
    }

    header.header nav.nav{
        display:none;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        width:100%;
        max-width: 313px;
        background: rgba(89, 87, 87, 0.95);
        height: 100%;
        margin:0;
        -webkit-box-shadow: -2px 0 10px #999;
        box-shadow: -2px 0 10px #999;
    }
    header.header nav.nav ul.level-one{
        width: 100%;
        margin-top: 64px;
        /*height: calc(100% - 164px);*/
        overflow: hidden;
        /*overflow-y: auto;*/
    }
    header.header nav.nav ul.level-one li:first-child{
        display: none;
    }
    header.header nav.nav ul.level-one > li{
        float: none;
    }
    header.header nav.nav ul.level-one > li >a,header.header .tel{
        line-height: 66px;
        position:relative;
        width: 100%;
        color: #fff;
        border-bottom:1px solid #595757;
        text-align:center;
    }

    header.header nav.nav ul.level-one > li.sub-nav:hover::after{
        display:none;
    }
    header.header nav.nav ul.level-one > li.on > a:after, header.header nav.nav ul.level-one > li > a:after{
        display:none;
    }
    footer.footer{
        display: none;
    }
   div.bottom{

        display: block;

        position: fixed;

        bottom:0;

        background-color:#173452;

        width: 100%;

        z-index: 99;

    }

    div.bottom a{

        color: #fff;

        font-size:15px;

        line-height: 20px;

        display: block;

        float: left;

        text-align: center;

        padding-bottom: 16px;

    }

    i{

        display: block;

        margin-top: 16px;

        margin-bottom: 10px;

    }
}

@media screen and (max-width: 767px) {
    body{
        padding-top: 50px;
    }
    header.header{
        height: 50px;
    }
    header.header div.logo-nav a.logo{
        height: 30px;
        margin-top:15px;
    }
    header.header a.toggleMenu{
        width: 30px;
        margin-top: 15px;
        height: 20px;
        margin-right: 0;
    }
    header.header a.toggleMenu span:nth-child(2){
        top:9px;
    }
    header.header a.toggleMenu span:last-child{
        top:17px;
    }
    header.header a.toggleMenu.on span {
        top: 17px;
    }
    header.header nav.nav{
        max-width:100%;
    }
    header.header nav.nav ul.level-one > li >a, header.header .tel{
        font-size: 14px;
    }

    footer.footer >.top,footer.footer >.bottom{
        padding:30px 15px;
    }
    footer.footer >.top .right .item{
        margin-bottom: 20px;
    }
    footer.footer >.top .right .item::after{
        display:none;
    }
    footer.footer >.top .left >a img{
        width: 70px;
    }
    footer.footer >.top .right .item >.tit{
        font-size: 15px;
    }
    footer.footer >.top .right .item >p{
        font-size: 13px;
    }

    footer.footer .bottom .nav a{
        padding:0 6px;
        font-size: 13px;
    }
    footer.footer .bottom p.copy{
        font-size: 12px;
        margin-top: 10px;
    }
    header.header a.tel{

            color: #333;

    border-bottom: 0;

    text-align: center;

    width: 50%;

    display: inline-block;

    font-size: 18px;

    float: left;

    height: 50px;

    line-height: 50px;

    margin: 0 auto;

    }
    .toTop{
        display: none!important;

    }
}
.toTop .tel .tels{



    position: absolute;



    right: 66px;



    top:40%;



    font-size:18px;



    line-height: 36px;



    background:#363636;



    color: #fff;



    display: none;



    white-space:nowrap;

}



.toTop .tel .tels:after{



    content:'';



    width: 36px;



    height: 36px;



    background:#363636;



    border-radius:50%;



    position: absolute;



    left: -18px;



    top:0;



    z-index: -1;



}



.toTop .tel .tels:before{



    content:'';



    width: 36px;



    height: 36px;



    background:#363636;



    border-radius:50%;



    position: absolute;



    right: -18px;



    top:0;



    z-index: -1;



}



.toTop .tel:hover .tels{

    display: block;

}



