html,body{
    width: 100%;height: 100%;
}
.container{
    padding:0;
}
footer{
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.top-box{
    width: 100%;
    height: auto;
    float: left;
}
.logo-box{
    width: 40px;
    height: 40px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    position: relative;
}
.logo-box img{
    width: 40px;
    height: 40px;
    position: absolute;
    top:0;left:0;bottom: 0;right: 0;
    margin: 0 auto;
}
.logo-title{
    width: 220px;
    margin-right: 20px;
    margin-left: 10px;
    color: #367FB7;
    margin-top: 20px;
    font-size: 16px;
    float: left;
    line-height: 20px;
}
.bottom-box{
    width: 100%;
    height: auto;
    float: left;
}
.erweima-box{
    width: 80px;
    height: 80px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    position: relative;
    margin-bottom: 20px;
}
.erweima-box img{
    width: 80px;
    height: 80px;
    position: absolute;
    top:0;left:0;bottom: 0;right: 0;
    margin: 0 auto;
}
.erweima-title{
    width: 180px;
    margin-right: 20px;
    margin-left: 10px;
    color: #7F8382;
    font-size: 10px;
    float: left;
    line-height: 14px;
}
@media (max-width: 500px){
    .container .row{
        width: 100%;
        height: auto;
        margin: 0 auto;
        background: #EEF2F1;
    }
    .img-box{
        width: 100%;
        height: 64px;
        margin: 0 auto;
        position: relative;
    }
    .img-box img{
        width: 100%;
        height: 64px;
        position: absolute;
        top:0;left:0;right: 0;bottom: 0;margin: auto;
    }
    .title-img-box{
        width: 100%;
        height: 128px;
        margin: 0 auto;
        position: relative;
    }
    .title-img-box img{
        width: 100%;
        height: 128px;
        position: absolute;
        top:0;left:0;right: 0;bottom: 0;margin: auto;
    }
    .main-box{
        width: 98%;
        height: auto;
        background: #fff;
        margin: 0 auto;
        margin-top: 0.16rem;
        border-radius: 0.08rem;
    }
    .main-box:last-child{
        margin-bottom: 0.16rem;
    }
    .main-title{
        width: 96%;
        height: 0.64rem;
        line-height: 0.64rem;
        color:#11ACEC;
        font-size: 16px;
        margin: 0 auto;
        font-weight: 600;
        border-bottom:1px solid #F2F2F2 ;
    }
    .content-box{
        width: 96%;
        height: 40px;
        margin: 0 auto;
        border-bottom:1px solid #F2F2F2;
        clear: both;
        position: relative;
    }
    .content-box:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .main-box:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .content-title{
        width: 96%;
        height:auto;
        line-height: 40px;
        color:#3c3c3c;
        font-size: 16px;
        margin: 0 auto;
        font-weight: 300;
        text-align: left;
        float: left;
    }
    .content-img{
        width: auto;
        height: auto;
        margin: 0 auto;
        border-radius: 4px;
        margin-bottom: 8px;
    }
    .content-img img{
        display: inline-block;
        height: auto;
        max-width: 100%;
        margin: auto;
    }
    .content{
        width: 100%;
        height: auto;
        line-height: 20px;
        color:#4B4B4B;
        font-size: 14px;
        margin: 0 auto;
        font-weight: 300;
        margin-bottom: 8px;
        float: left;
    }
    .content p{
        font-family: "-apple-system", "Microsoft YaHei", "Arial", "黑体", "宋体", sans-serif;
    }
    .main-box li:last-child{
        border-bottom: none;
    }
    .mask-box{
        width: 0.36rem;
        height: 0.22rem;
        position: absolute;
        top:14px;
        right: 0;
    }
    .mask-box img{
        width: 0.36rem;
        height: 0.22rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .video-box{
        width: 100%;
        height: 200px;
    }

}
@media (min-width: 500px) {
    .head-box{
        width: 768px;
    }
    .container {
        width: 768px;
        height: auto;
        margin: 0 auto;
        background: #EEF2F1;
    }
    .row{
        margin: 0 auto;
        width: 98%;
        margin-top: 4px;
    }
    .img-box {
        width: 100%;
        margin: 0 auto;
        height: 160px;
    }
    .img-box img{
        width: 100%;
        height: 160px;
    }
    .title-img-box{
        width: 100%;
        margin: 0 auto;
        height: 200px;
        margin-bottom: 8px;
    }
    .title-img-box img{
        width: 100%;
        height: 200px;
    }
    .main-box{
        width: 100%;
        height: auto;
        background: #fff;
        margin: 4px auto;
        border-radius: 4px;
    }
    .main-box{
        width: 100%;
    }
    .content-img img{
        display: inline-block;
        height: auto;
        max-width: 100%;
        margin: auto;
    }
    .main-title{
        width: 98%;
        height: 40px;
        line-height: 40px;
        color:#11ACEC;
        font-size: 20px;
        margin: 0 auto;
        font-weight: 600;
        border-bottom:1px solid #F2F2F2 ;
    }
    .content-box {
        width: 98%;
        height: auto;
        margin: 0 auto;
        border-bottom:1px solid #F2F2F2;
        clear: both;
        position: relative;
    }
    .main-box:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .content-title{
        width: 100%;
        height: 40px;
        line-height: 40px;
        color:#3c3c3c;
        font-size: 18px;
        margin: 0 auto;
        font-weight: 300;
    }
    .content-img{
        width: auto;
        height: auto;
        margin: 0 auto;
        border-radius: 4px;
        margin-bottom: 8px;
    }
    .content-img img{
        display: inline-block;
        height: auto;
        max-width: 100%;
        margin: auto;
    }
    .content{
        width: 100%;
        height: auto;
        line-height: 20px;
        color:#4b4b4b;
        font-size: 14px;
        margin: 0 auto;
        font-weight: 300;
        margin-bottom: 8px;
    }
    .main-box li:last-child{
        border-bottom: none;
    }
    .mask-box{
        width: 18px;
        height: 11px;
        position: absolute;
        top:14px;
        right: 0;
    }
    .mask-box img{
        width: 18px;
        height: 11px;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .video-box{
        width: 100%;
        height: 264px;
    }
    .erweima-title{
        width: 80%;
        font-size: 14px;
        line-height: 20px;
    }
    .erweima-box{
        width: 100px;
        height: 100px;
        float: left;
        margin-top: 20px;
        margin-left: 20px;
        float: left;
        position: relative;
        margin-bottom: 20px;
    }
    .erweima-box img{
        width: 100px;
        height: 100px;
        position: absolute;
        top:0;left:0;bottom: 0;right: 0;
        margin: 0 auto;
    }
}