*{
    padding:0;
    margin:0;
    letter-spacing:.1rem;
    box-sizing:border-box;
    -moz-box-sizing:border-box
}
ul{
    list-style:none
}
a{
    text-decoration:none
}
img{
    max-width:100%
}
html{
    font-size:10px
}
body{
    min-width:120rem;
    background:rgba(238,238,238,0.80);
    display:flex;
    flex-direction:column;
    font-family:Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
.pc-only{
    display:block;
}
.m-only{
    display:none;
}
header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    min-width:120rem;
    z-index:9999;
    height:11rem;
    background:#fff;
    box-shadow:0 2px 3px 0 rgba(153,153,153,0.50);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center
}
header .header-content{
    width:120rem;
    display:flex;
    flex-direction:row;
    align-items:center
}
header .header-content .logo img{
    width:100%;
}
header .header-content nav{
    margin-left: 6rem;
}
header .header-content nav>ul{
    display:flex;
    flex-direction:row;
    height:11rem
}
header .header-content nav>ul>li{
    margin:0 3.5rem;
    display:flex;
    flex-direction:row;
    align-items:center
}
header .header-content nav>ul li a{
    font-size:2rem;
    color:#333;
    letter-spacing:.143rem
}
header .header-content nav>ul li a:hover{
    color:#f06;
    font-weight:bold
}
div#main{
    height: 110rem;
    padding-top:14rem;
}
footer{
    display:flex;
    flex-direction:column
}
.footer-content{
    display:flex;
    flex-direction:column
}
.footer1{
    background:#303030;
    box-shadow:0 2px 4px 0 rgba(0,0,0,0.50);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    padding:4rem 0;font-size:1.6rem
}
.footer1 .footer-info{
    display:flex;
    flex-direction:column;
    margin:0 2rem
}
.footer1 .contact{
    border-right:.1rem solid #6a6a6a;
    padding-right:4rem
}
.footer1 .footer-info .title{
    font-size:1.6rem;
    color:#fff;margin-bottom:2rem
}
.footer1 .footer-info .content{
    font-size:1.4rem;
    color:#999;
    margin-bottom:1rem;
    display:flex;
    flex-direction:row
}
.footer1 .footer-info .content>span{
    width:8rem
}
.footer1 .footer-info .content a{
    color:#999
}
.footer1 .contact .content strong{
    color:#fff;font-weight:normal
}
.footer1 .footer-info .content a:hover{
    color:#f06
}
.footer1 .qrcode{
    display:flex;
    flex-direction:column;
    align-items:center
}
.footer1 .qrcode img{
    width:9.3rem;
    margin-bottom:1rem
}
.footer1 .qrcode>span{
    font-size:1.4rem;
    color:#999
}
.footer2{
    background:#191919;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:3rem 0;
    line-height: 3.2rem;
    font-size:1.6rem
}
.footer2 p{
    text-align:center
}
.footer2 a{
    color:#fff
}
.footer2 a:hover{
    text-decoration:underline
}
@media screen and (max-width:800px){
    *{
        letter-spacing:.05rem !important
    }
    html{
        font-size:19px !important
    }
    body{
        min-width:320px !important
    }
    .pc-only{
        display:none !important
    }
    .m-only{
        display:block
    }
    .m-only #mnavopen{
        display: block;
    }
    .m-only #mnavclose{
        display: none;
    }
    header{
        min-width:auto !important;
        height:8rem !important
    }
    header .header-content{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    header .header-content .logo{
        height: 6rem !important;
    }
    header .header-content .logo img{
        height: 100%;
    }
    header .header-content .m-menu{
        margin-left:auto;
        margin-right:1.5rem;
        display:flex;
        flex-direction:row
    }
    header .header-content .m-menu img{
        height: 5rem !important;
    }
    header .header-content .m-menu>div{
        font-size:2.5rem;
        padding:0 1.5rem;
        color:#999
    }
    .m-menu-list{
        position:fixed;
        top:8rem;
        left:0;
        right:0;
        bottom:0;
        z-index:10050;
        background:#fff;
        border-top:.4rem solid#eee;
        font-size:1.6rem;
        padding:1rem 2rem;
        display:none;
        flex-direction:column;
        overflow:scroll
    }
    .m-menu-list .nav-item{
        display:flex;
        flex-direction:column;
        border-bottom:.1rem solid #eee;
        padding-bottom:2rem;
        margin-bottom:2rem}
    .m-menu-list .nav-item>a{
        font-size:1.8rem;
        color:#000;
        font-weight:bold
    }
    div#main{
        width:100% !important;
        height: 62rem;
    }
    .footer1{
        padding:1.5rem 0 !important;
        font-size:1.4rem !important
    }
    .footer1 .footer-info{
        margin:0 !important
    }
    .footer1 .contact{
        border-right:none !important;
        padding-right:3rem;
    }
    .footer1 .footer-info .title{
        font-size:1.4rem !important;
        margin-bottom:1rem !important
    }
    .footer1 .footer-info .content{
        font-size:1.4rem !important;
        margin-bottom:.5rem !important
    }
    .footer1 .footer-info .content:last-child{
        margin-bottom:0 !important
    }
    .footer1 .footer-info .content>span{
        width:auto !important
    }
    .footer2{
        font-size:1.4rem !important
    }
}
@media screen and (max-width:700px){
    html{
        font-size:16px !important
    }
}
@media screen and (max-width:600px){
    html{
        font-size:13.3px !important
    }
}
@media screen and (max-width:500px){
    html{
        font-size:10.6px !important
    }
}
@media screen and (max-width:400px){
    html{font-size:10px !important
    }
}
@media screen and (max-width:374px){
    html{font-size:8.53px !important
    }
}
@media screen and (min-width:374px) and (max-width:800px){
    html{
        font-size:calc((100vw / 375) * 10) !important
    }
}