header {
    display:flex;justify-content: space-between;align-items:center;
    background:#fff;
    position: fixed;
    height: 6rem;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 2rem;
    z-index:100;
}
header h1 {margin-right: 5rem;display: none;}
header h1 a {display: block;text-align: center;}
header h1 a img {width: 13rem;}
header .open_nav img {height: 2rem;}
header .back {right:1.5rem;}
header .header_sub {display: flex;align-items: center;}
header .header_sub img {display: block;width: .8rem;margin-right: 1rem;}
header .header_sub p {
    font-size: 2rem;
    font-weight: 600;
    color: #4e4f51;
}
header.show h1 {display: block;}
header.show .header_sub {display: none;}

.bannerImg {
    width: 100%;
    padding: 1.5rem 0;
}
.bannerImg a {
    width: 100%;
}
.bannerImg a img {
    width: 100%;
}

/* nav */
nav {position: fixed; left: 100%; top:0; width: 77%; z-index: 1500;background: #ebf2f8;height: 100vh;transition:.5s}
nav.on {left:calc(23% + 3px);transition:.5s;}

nav .nav_header {height: 6rem;padding: 0 1.5rem;display: flex;align-items: center;justify-content: space-between;background-color: #fff;}
nav .nav_header p {font-size: 1.8rem;font-weight: 600;}
nav .close_nav img {display: block;height: 2rem;}

nav .title {padding: 2.5rem 2rem 2rem 2rem;}
nav .title h3 {font-size:2.2rem;font-weight: 600; margin-bottom: .7rem; color:#2a7abc;}
nav .title p {font-size: 1.2rem; font-weight:600; color: #aaa;}

nav .btns {
    display: flex;flex-flow: column;align-items: center;
    margin: 2rem;margin-top: 0;
    padding: 1.5rem 0;
    border-radius: 1rem;
    background-color: #d3e6f9;
}
nav .btns li {
    padding: .8rem 1rem;
    display: block;
    width: 100%;
    display: flex;justify-content: space-between;
}
nav .btns li p {
    font-size: 1.6rem ;
    font-weight: 600;
}
nav .btns .btn img {width:8.5rem;display: block;}

nav .menu {
    margin: 2rem;
    background-color: #fff;
    border-radius: 1rem;
}
nav .menu .nav_color {color: #909090;display: block; padding: 1.5rem;font-size: 1.6rem;font-weight: 500;border-bottom: 1px solid #ddd;}
nav .menu .nav_color.active {color: #1e81d3; font-weight: 600;}
nav .menu .nav_color:last-of-type {border: none;}


/* footer */
.sec_footer {position: fixed;bottom: 0;left: 0;background: #f7f6f5;width: 100%;z-index: 1000;border-radius: 1rem 1rem 0 0;}
.footer {display: flex;align-items: center;justify-content: space-evenly;height: 6rem;border-top: 1px solid #ddd;}
.footer > div {width: 33.33%;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.footer > div img {width: 3.5rem;margin: 0 auto;}
.footer > div p {font-size: 1.8rem;color: #666;width: 100%;text-align: center;line-height: 1.2;}
.footer .footer_btn.active p {color: #2f68c2; font-weight: bold;}
.footer .footer_btn > a {display: flex;flex-direction: column;align-items: center;}

.nav_bg {background: rgba(0,0,0,0.6); position: fixed; left: 0; top:0; width: 100%; height: 100vh; z-index: 1100; display: none;}
.nav_bg.on {display: block;}


#up {
    position: fixed;bottom: 8rem;right: 3rem;
    width: 3rem;height: 3rem;
}
#up.ani {
    animation: .5s btn_ani cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes btn_ani {
    0% {
        transform: scale(.8) translateY(1rem);
    }
    100% {
        transform: scale(1) translateY(0rem);
    }
}