html{background:url(../images/site-bg.jpg) repeat-x #efedec}
body{position:relative;text-align:center}

.lf{float:left}
.rf{float:right}
.mt10{margin-top:10px}
.mr20{margin-right:20px}
.p10{padding:10px}
.split{margin:0 15px}
.yahei{font-family:'微软雅黑','黑体','宋体'}
.size16{font-size:16px}

#header{width:100%;max-width:960px;margin:0 auto;position:relative;border-bottom:solid 2px #3d9401;background:url(../images/site-bg.jpg) repeat-x}
a#logo{display:block;width:300px;height:100px;background:url(../images/logo.png) no-repeat;margin:10px 0 0 10px;cursor:pointer}
#search{width:225px;height:25px;background:url(../images/search.png) no-repeat;margin:30px 30px 0 0;}
#nav{position:absolute;right:0px;bottom:0;background:url(../images/nav-bg.jpg) repeat-x;margin-bottom:-2px;}
#nav li{float:left;position:relative}
#nav a{padding:0 20px;display:inline-block;height:38px;line-height:38px;color:#ffffff;font-size:12px;background:url(../images/split.png) no-repeat center right;}
#nav li.nobg a{background:none}
#nav a.selected{background:url(../images/nav-bg-hl.jpg) repeat-x;}
#nav a:hover,#nav li.nobg a:hover{background:url(../images/nav-bg-hl.jpg) repeat-x;text-decoration:none}
#nav li .level2{position:absolute;visibility:hidden;background:#40870f;border-left:solid 3px #3d9401;width:150px;margin-left:0px;z-index:2000;left:0;_top:38px}
#nav li .level2 .wrapper{position:relative;padding:8px;}
#nav li .level2 a{position:relative;display:block;margin:0;white-space:nowrap;text-align:left;color:#ffffff;font-size:12px;height:20px;line-height:20px;padding:3px;background:none;}
#nav li .level2 a:hover{text-decoration:none;background:#60a72f;color:#ffffff;border:none}

#main{width:100%;max-width:980px;background:url(../images/body-bg.png) repeat-y;margin:0 auto}

#banner2{width:100%;max-width:960px;height:200px;background:url(../images/banner-2.jpg) no-repeat center;background-size:cover;margin:0 auto}

#sub-nav{width:160px;margin-left:10px;_margin-left:5px}
#sub-nav #current-cat{display:block;padding:5px 20px;font-size:24px;background:#3d9401;color:#ffffff;cursor:pointer}
#sub-nav #current-cat:hover{text-decoration:none}
#sub-nav li a{display:block;height:30px;line-height:30px;font-size:12px;background:#f6f6f6;color:#383a3e}
#sub-nav li a:hover{text-decoration:none;background:#ddfbad}

#position{padding:5px 0 5px 20px;text-align:left;color:#888686;letter-spacing:1px}
#position a{color:#888686}
#article, .two-col{width:100%;max-width:800px;margin:0 auto;text-align:left}
#article .wrapper{padding:10px 15px}
.title{display:block;padding:10px 15px;font-size:24px;background:#f6f6f6;color:#383a3e}
.text-format{margin:10px 0}
.text-format p{text-indent:2em;letter-spacing:1px;line-height:20px;margin-bottom:5px}

.left-bar{width:225px}
.content{width:730px}

.left-nav{margin:10px 0 0 20px}
.left-nav li{height:25px}
.left-nav a{padding-left:25px;color:#262626;font-size:14px}
.left-nav .item1{background:url(../images/item1.png) left 3px no-repeat}
.left-nav .item2{background:url(../images/item2.png) left 3px no-repeat}
.left-nav .item3{background:url(../images/item3.png) left 3px no-repeat}
.left-nav .item4{background:url(../images/item4.png) left 3px no-repeat}
.content .wrapper{padding:10px 20px 0 0}
.product-list{margin-top:20px}
.product-list li{margin:0 15px 15px 0;float:left}
.product-list .product-name{padding:5px 0;font-size:14px}
.product-list .product-name a{color:#017ecf}
.product-img{padding:0 20px}
.product-desc{margin:20px 0;font-size:12px}
.product-desc h2{width:300px;border-bottom:solid 1px #a6a6a6;font-size:12px;font-weight:bold;margin:5px 0}


#bottom{width:100%;max-width:960px;height:138px;margin:0 auto;background:url(../images/bottom-bg.jpg) repeat-x;text-align:left;border-bottom:solid 2px #1c2127}
#logo-s{background:url(../images/logo-s.png) no-repeat;width:180px;height:60px;margin:35px 0 0 35px}
#bottom-text{margin:40px 40px 0 0}
.nav-text{margin-bottom:15px}

/* 媒体查询 - 响应式设计 */
@media (max-width: 960px) {
  #header, #main, #bottom {
    width: 100%;
    padding: 0 10px;
  }
  
  .product-block {
    width: 100%;
    max-width: 435px;
    margin-left: 0;
    margin-right: 0;
  }
  
  .biz-block {
    width: 100%;
    max-width: 280px;
    margin-left: 0;
    margin-right: 0;
  }
  
  #nav {
    position: static;
    margin-bottom: 0;
  }
  
  #nav li {
    float: none;
    display: inline-block;
  }
}

@media (max-width: 768px) {
  #header {
    text-align: center;
  }
  
  #logo, #search {
    float: none;
    margin: 10px auto;
  }
  
  #nav li {
    display: block;
    width: 100%;
  }
  
  #nav a {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
  }
  
  .product-content {
    width: 100%;
  }
  
  .product-block img {
    display: none;
  }
  
  #bottom {
    height: auto;
    padding: 20px 0;
  }
  
  #logo-s, #bottom-text {
    float: none;
    margin: 0 auto;
    text-align: center;
  }
  
  #bottom-text p {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}