html,body{
    background: #F2F2F2;
}
@media screen and (max-width:700px){
    #header .logo,#header .login{
        display: none;
    }
    .mobie_head{
        width: 100%;
        height: 50px;
        background: #D31C31;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobie_head .logo{
        width:40px;
        height:40px;
        border-radius: 100%;
        overflow: hidden;
        margin: 5px;
    }
    .mobie_head .logo img{
        width: 100%;
    }
    #header .list{
        display: grid;
    	grid-template-columns: repeat(4, 1fr);
    	gap: 10px;
    	padding: 10px;
    }
    #header .list a{
        border: 1px solid  #ccc;
        display: flex;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    #header .list a.select{
        border: 0;
        background: #D31C31;
        color: #fff;
    }
}
@media screen and (min-width:701px){
    .mobie_head{
        display: none;
    }
    /*头部*/
    #header{
        width: 100%;
        height: 70px;
    }
    #header .header{
        width: 1200px;
        height: 70px;
        margin: 0 auto;
    }
    #header .header .head_nav{
        width: 800px;
        height: 70px;
        float: left;
        display: flex;
        align-items: center;
    }
    
    #header .header .head_nav .list{
        height: 70px;
        float: left;
        display: flex;
        align-items: center;
        padding-top:5px;
    }
    #header .header .head_nav .logo{
        width: 100px;
        margin: 10px;
    }
    #header .header .head_nav .logo img{
        width: 100%;
    }
    #header .header .head_nav .list a{
        margin-left: 20px;
        color: #444;
        height: 23px;
        border-bottom: 2px solid #F2F2F2;
        font-size: 16px;
        font-weight: bold;
    }
    #header .header .head_nav .list a:hover{
        color: red;
        border-bottom: 2px solid red;
    }
    #header .header .head_nav .list a.select{
        color: red;
        border-bottom: 2px solid red;
    }
    #header .header .login{
        width: 400px;
        height: 45px;
        float: right;
        color: #666;
        text-align: right;
        padding-top:15px;
    }
    #header .header .login a{
        font-size: 12px;
        color: #555;
        
    }
    #header .header .login a:hover{
        color: red;
        text-decoration: underline;
    }
    #header .header .login h4{
        color: red;
    }
    
    /*装饰图*/
    .banner{
        width: 100%;
        height: 300px;
        position: relative;
        overflow: hidden;
    }
    .banner .img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 300px;
        z-index: 10;
    }
    .banner .img img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .banner .mask{
        width: 100%;
        height: 300px;
        background: rgba(0,0,0,0.2);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
    }
    .banner .title{
        width: 100%;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12;
        display: flex;
        justify-content:center;
        align-items: center;
        flex-direction:column;
        color: #fff;
    }
    .banner .title h3{
        font-size: 40px;
        color: rgba(255,255,255,0.8);
    }
    .banner .title h4{
        font-size: 30px;
        font-weight: normal;
        padding-top:10px;
        text-transform:uppercase;
        color: rgba(255,255,255,0.7);
    }
    /*版权信息*/
    #footer{
        width: 100%;
        background: #333;
        padding: 50px 0;
    }
    #footer .footer{
        width: 1200px;
        margin: 0 auto;
    }	
    #footer .footer .footer-top{
        padding-bottom: 30px;
        overflow: hidden;
    }
    .footer-kefu{
        width: 200px;
        float: left;
    }
    .footer-kefu i.iconfont{
        font-size: 30px;
        color: #ccc;
    }
    .footer-kefu h3{
        color: #ccc;
        padding-top: 5px;
    }
    .footer-kefu h4{
        color: #ccc;
    }
    
    .footer-nav{
        width: 900px;
        float: right;
        display: flex;
        justify-content: space-between;
    }
    .footer-nav dt{
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 5px;
    }
    .footer-nav dt a{
         color: #ccc;
    }
    .footer-nav dt a:hover{
        color: #f60;
    }
    .footer-nav dd a{
        display: block;
         color: #ccc;
         padding: 3px 0;
         font-size: 12px;
    }
    .footer-nav dd a:hover{
         color: #f60;
    }
    .datalist{
        width: 1200px;
        margin: 20px auto;
    }
    .datalist h1{
        font-size: 16px;
    }
    .datalist h1 a{
        color: blue;
        text-decoration: underline;
    }
        
    #footer .footer .footer-p{
        border-top: 1px solid #888;
        padding-top: 10px;
        text-align: center;
        color: #888;
    }
    
    #footer .footer .footer-p a{
        color: #888;
    }
    #footer .footer .footer-p a:hover{
        color: red
    }
}