@charset "utf-8";
/* CSS Document */
/* 宽度为1200像素，高度为308像素，居中对齐并相对于其父元素进行定位，左边距为0，上边距为-48像素。 */
.customer{ width:1200px; 
    height:308px; 
    margin:0 auto; 
    position:relative; 
    left:0;
     top:-48px;}

     /* 宽度为386像素，高度为308像素，背景颜色为白色，文字颜色为深灰色，并使其左浮动。这样设置可以让"news"元素在父元素内部左对齐，并与其他同级元素并排显示。 */
.customer .news{ width:386px; 
    height:308px;
     background:#FFFFFF;
      color:#3b3838;
       float:left;}
/* 高度为47像素，行高为47像素，内边距为0 56像素，字体大小为20像素，并使其左浮动。 */
.customer .news span{
     height:47px; 
    line-height:47px; 
    padding:0 56px; font-size:20px; 
    float:left;}
/* 边框：1像素宽的实线边框，颜色为#c53838。
底部边框：没有边框，也就是没有底部边框。
背景：使用图片作为背景，图片路径为"../images/tt_02.jpg"。
文本对齐：居中对齐。
浮动：向左浮动。 */
.customer .news .cur{ border:solid 1px #c53838; 
    border-bottom:none; 
     background:url(../images/tt_02.jpg);
      text-align:center; float:left;
    }
.customer .news .cur a{ color:#FFFFFF;}
/* .customer .news ul{ width:330px; height:168px; margin-top:30px; margin-left:20px; float:left;} */
.customer .news ul{ width:330px; 
    height:168px;
     margin-top:30px; 
     margin-left:20px; 
     float:left;}
/* 宽度：330像素。
高度：42像素。
行高：42像素，也就是让文本在垂直方向上居中显示。
字体家族：宋体。
底部边框：1像素宽的虚线边框，颜色为#3b3838。 */
.customer .news ul li{ width:330px;
     height:42px; line-height:42px;
      font-family:"宋体"; 
      border-bottom:dashed 1px #3b3838;}
/* 宽度：330像素。
高度：42像素。
行高：42像素，也就是让文本在垂直方向上居中显示。
字体家族：宋体。
文本缩进：2个字符宽度。 */
.customer .news p{ width:330px; 
    height:42px; 
    line-height:42px;
     font-family:"宋体"; 
     text-indent:2em;}
/* 当鼠标悬停在链接上时，链接的字体颜色将被设置为"#1f71b6" */
.customer .news ul li a:hover{ color:#1f71b6;}
/* 这段CSS代码是为具有类名".customer .product"的元素设置样式。它将元素的宽度设置为376像素，高度设置为308像素，背景颜色设置为白色（#FFFFFF），
并使用浮动（float:left）将元素向左浮动。同时，它设置了元素的左外边距为20像素（margin-left:20px），使其与其他元素保持一定的间距。
它使用相对定位（position:relative）来为元素提供相对于其正常位置的定位 */
.customer .product{ width:376px; height:308px;
     background:#FFFFFF;
      float:left;
       margin-left:20px;
        position:relative;}
/* 宽度设置为360像素，高度设置为280像素，并设置了上下边距为14像素，左右边距为8像素（margin:14px 8px） ,绝对定位（position:absolute）将列表项相对于其父元素（ul）进行定位。通过设置top:0和left:0，列表项将位于父元素的左上角。
最后，z-index:1属性用于控制列表项的层叠顺序，使其在其他元素之上显示*/
.customer .product ul li{ width:360px;
     height:280px; 
     margin:14px 8px; 
     position:absolute; top:0; 
     left:0; z-index:1;}
/* 绝对定位（position:absolute）将元素相对于其父元素进行定位。通过设置top:14px和right:8px，元素将位于父元素的右上角。此外，z-index:3属性用于控制元素的层叠顺序 */
.customer .product i{ position:absolute; 
    top:14px;
     right:8px; 
     z-index:3}
/* 宽度为36像素，高度为28像素，左浮动，背景颜色为"#dcdcdc"，并且左外边距为3像素。 */
.customer .product i span{ width:36px;
     height:28px; 
     float:left;
      background:#dcdcdc;
       margin-left:3px;}
/* 宽度为34像素，高度为26像素，背景颜色为"#eb6161"，边框为1像素的实线边框，边框颜色为"#df7272"。 */
.customer .product .curr{ width:34px; 
    height:26px; 
    background:#eb6161;
     border:solid 1px #df7272;}
/* 宽度为34像素，高度为26像素，背景图片为"url(../images/icon02.png)"，并且左浮动。 */
.customer .product .curr b{ width:34px; 
    height:26px; 
    background:url(../images/icon02.png);
     float:left;}
/* 宽度为360像素，高度为43像素，背景颜色为"#000000"（黑色），透明度为0.5，定位方式为绝对定位，位于父元素的底部左侧，层叠顺序为5。 */
.customer .product big{ width:360px;
     height:43px; 
     background:#000000; 
     opacity:0.5;
      position:absolute;
       bottom:0; 
       left:0;
        z-index:5;}
/* 宽度为360像素，高度为43像素，行高为43像素，文本水平居中对齐，字体颜色为白色（"#FFFFFF"），定位方式为绝对定位，位于父元素的底部左侧，层叠顺序为9。 */
.customer .product p a{ width:360px; height:43px; line-height:43px; text-align:center; color:#FFFFFF; position:absolute; bottom:0; left:0; z-index:9;}

.customer .consult{ width:360px; height:308px; background:#FFFFFF; float:left; margin-left:20px; position:relative;}

.customer .consult span{ font-size:26px; color:#db6172; margin:10px 0 10px 15px; display:block;}

.customer .consult p{ font-size:18px; color:#262626; margin:10px 15px;}

.customer .consult big{ width:auto; height:32px; line-height:32px; font-size:32px; color:#b34747; background:url(../images/08.png) no-repeat; padding-left:38px; display:block; margin-left:15px;}

.customer .consult .web{ margin-left:15px; margin-top:22px;}

.customer .consult .qq{ float:left;}

.customer .consult .qq p{ font-size:14px; font-family:"宋体"; margin-left:0;}

.customer .consult .qq p a{ margin-right:48px; color:#484844;}

.customer .consult .qq span{ font-size:14px; font-family:"宋体"; margin-left:0;}

.customer .consult .qq span a{ width:86px; height:25px; line-height:27px; text-align:right; background:url(../images/06.png) no-repeat 4px 1px; border:solid 1px #707070; border-radius:5px; float:left; padding-right:5px; margin-right:10px;}

.customer .consult .web .two{ margin-right:5px; float:right;}

.customer .consult b{ position:absolute; right:0; top:-78px;}

.main01{ width:1198px; height:548px; border:solid 1px #dcdcdc; background:#FFFFFF; margin:0 auto; margin-top:6px;}

.main01 h2{ width:100%px; height:55px; background:url(../images/11.png); border-bottom:solid 1px #dcdcdc; position:relative;}

.main01 h2 span{ width:192px; height:64px; background:url(../images/006.png); position:absolute; bottom:-1px; left:44px;}

.main01 h2 .right,.main02 h2 .right{ margin-right:30px; float:right;}

.main01 h2 .right b,.main02 h2 .right b{ width:10px; height:10px; background:#b4b1a9; border-radius:5px; margin:22px 5px; float:left;}

.main01 h2 .right .curr01,.main02 h2 .right .curr01{ background:#9b6d24;}

.main01 h2 .right p,.main02 h2 .right p{ width:18px; height:18px; background:#b4b1a9; border-radius:9px;  margin:17px 5px; float:left;}

.main01 h2 .right p i{ width:0; height:0; border-bottom:transparent solid 5px; border-top:transparent solid 5px; border-left:transparent solid 8px; border-right:#FFFFFF solid 8px; display:block; margin-left:-4px; margin-top:4px;}

.main01 h2 .right p big{ width:0; height:0; border-bottom:transparent solid 5px; border-top:transparent solid 5px; border-left:#FFFFFF solid 8px; border-right:transparent solid 8px; display:block; margin-left:6px; margin-top:4px;}

.main01 h2 .right .curr02,.main02 h2 .right .curr02{ background:#9b6d24;}


.main01 .goods{ margin-top:8px;
     margin-left:20px;
      position:relative;
    }
.main01 .goods ul{ position:absolute;
     top:0; left:0;}
.main01 .goods ul li{ margin-top:40px;
     margin-right:35px; 
     float:left;}
.main01 .goods ul li p{ 
    width:200px;
     text-align:center;
      padding-top:24px;
    }

.main02{ width:1200px; height:511px; 
    background:#FFFFFF;
     margin:0 auto; 
     margin-top:54px;
      margin-bottom:68px;
    }
.main02 h2{ width:1198px; 
    height:55px;
     background:url(../images/11.png);
      border:solid 1px #dcdcdc;
       position:relative;
    }
.main02 h2 span{ width:192px; 
    height:64px;
     background:url(../images/007.png);
      position:absolute; 
      bottom:-1px; left:44px;
    }
.main02 .company01{ width:380px; 
    height:340px;
     margin-top:45px; 
     margin-left:24px;
      float:left;}
.main02 .company01 span{ font-size:20px; 
    color:#a9722a;}
.main02 .company01 p{ line-height:26px; 
    font-family:"宋体"; margin-top:25px; 
    color:#524d4d; 
    margin-bottom:76px;}
.main02 .company01 a{ width:102px;
     height:38px; line-height:38px; 
     text-align:center; 
     background:url(../images/16.png);
      border:solid 1px #e46565; 
      display:block; 
      color:#FFFFFF;  
      font-family:"宋体";
    }
.main02 .company02{ width:374px; 
    height:340px; 
    color:#555452;
     margin-right:20px;
      margin-top:45px; 
      float:left;}
.main02 .company02 p { font-size:18px;
     margin:20px 0;
    }
.main02 .company02 span{ font-family:"宋体";
     line-height:26px;
    }
.main02 .company03{ width:374px; 
    height:340px; 
    color:#555452; 
    margin-right:20px; 
    margin-top:45px; float:left;}
.main02 .company03 p { font-size:18px;
     margin:20px 0;}
.main02 .company03 span{ 
    font-family:"宋体"; 
    line-height:26px;}

/* 头部 */
/* 屏幕小于575px */
@media (max-width:575px)
{
    .banner{
        padding: 25px 0;
    }
    .nav_bg > ul {
        display: none;
    }
    .nav_bg  ul li {
        width: 100%;
        display: inline-block;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    .nav_bg ul li a {
        display: block;
        margin: 10px 0;
    }
}
@media (min-width:576px){
    .nav_bg > ul li {
        margin: 0 10px;
    }
    .customer{
        min-height: 200px;
}
.logo {
    width: 17%;
    right: 4%;
}

}
/* 小屏幕大与等于576px */
@media(min-width:576px){
    .nav_bg > ul li a {
        font-size: 1em;
    }
    .nav_bg> ul li {
        margin: 0 10px;
    }
    .logo {
        right: 4%;
        width: 18%;
    }
}
/* 中等屏幕 */
@media (min-width:768px) {
.banner{
    padding: 24px 0;
}
.logo{
    right: 6%;
    width: 13%;
}
.nav_bg> ul li {
    margin: 0 20px;
}
.nav_bg > ul  li a {
    font-size: 1.1em;
}
}
/* 大屏幕 */
@media(min-width:992px){
  .nav_bg > ul li {
    margin: 0 35px;
  }
  .nav_bg > ul li a{
    font-size: 1.25em;
  }
}
/* 大于1200 */
@media(min-width:1200)
{
    .nav_bg > ul li {
        margin: 0 40px;
    }
}
/* 小屏幕小于等于575 */
@media(max-width:575px){
    .customer{
        min-height: 200px;
    }
}
/* 大于等于576px */
@media(min-width:576px){
    .customer{
        min-height: 240px;
    }
}
/* 中等屏幕大于等于768px */
@media(min-width:768px){
    .customer{
        min-height: 300px;
    }
}
/* 大等屏幕大于等于992px */
@media(min-width:992px){
    .customer{
        min-height: 360px;
    }
}
/* 超大屏幕大于等于1200px */
@media(min-width:1200px){
    .customer{
        min-height: 540px;
    }
}
/* 底部小于575px */
@media(max-width:575px){
    .bottom{
        margin: 0px 0 20px 0;
    }
}