  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
            font-size: 16px;
        }
        
        body {
            background-color: #ffffff;
            color: #333333;
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        
        }
        
        /* 导航栏样式 */
        header {
            background-color: #ffffff;
            padding: 20px 0;
            border-bottom: 1px solid #eeeeee;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            width: 15%;
            display: flex;
            align-items: center;
        }
        .logo img{width: 100%;}
        .daohang{display: none;}
        .nav-links {
            height: 25px;
            width: 80%;
            list-style: none;
            overflow: hidden;
        }
        
        .nav-links li {
            width: 15%;
            float: left;
            text-align: right;
            
        }
        
        .nav-links a {
            text-decoration: none;
            color: #555555;
            font-size: 16px;
            transition: color 0.3s;
            font-weight:bolder;
        }
        
        .nav-links a:hover {
            color: #53b5d3;
        }

        #banner{width: 100% ; margin: auto;}
        #banner img{width: 100% ; }
        /* 底部服务介绍 */
footer{background-color: #53b5d3;  padding: 30px 0; margin-top: 50px;overflow: hidden;width: 100%;}
.di{width: 100%; max-width: 1200px; margin: auto; color: #fff; overflow: hidden;}
.du1,.du2,.du3,.du4,.du5 {width: 25%; float: left; text-align: center; font-size: 14px;} 
.du5 img,.du1 img{height: 60%;}
.di span{width: 100%; font-weight: bold;font-size: 18px;display: block;}
.di a{text-decoration: none; color: #fff;}
.yq{width: 100%; max-width: 1200px; margin: auto; color:#dddddd;}
.yq a{text-decoration: none; margin-left: 10px; color:#dddddd;}






        /* 响应式设计 */
        @media (max-width: 768px) {
         .daohang img{height: 80%; float:right;}
         .nav-links li { width:98%;position: relative;z-index: 1; text-align:center; background-color:#fff;padding: 10px 0;}
         .nav-links:hover{overflow: visible;position: absolute;right: 0;}
        .nav-links .daohang {display: block; float: right; margin-right: 10px; height: 29px; background-color:#fff; text-align:right; padding:0px}
        .logo,.nav-links {width: 35%;}
        .nav-links {position: absolute; right: 0;}
        .container{padding: 0px;}
        .di{width: 95%;}
                    .du2,.du4{display: none;}
            .du1,.du5{width: 24%;}
            .du3{width: 50%; text-align: left;}
            .du3 span,.di span{display: none;}
            .du1 img, .du5 img{height:75px;}
            .du5{margin-left: 2%; font-size:0;}
            .du3{font-size: 12px;}
            .yq{width: 95%;}
            .di a{font-size:12px;}
        

        }