/*left*/
.box{width:80%; margin:20px auto;}
.left{float:left; width:20%;}
.left .nav_line{border:3px solid #232055; border-radius:10px; box-sizing: border-box}
.left .nav_line .head1{text-align:center; background:url("../img/zytit.jpg") no-repeat left center;
    border-bottom:3px solid #ff8c00}
.left .nav_line .head1 h1{font-weight:bold;  color:#1a1a1a;  line-height:40px; letter-spacing:3px;}
.left .nav_line li{text-align:center; margin:5px; line-height:20px; height:20px; overflow:hidden;
    border-bottom:2px dashed #ff8c00; background: #232055;}
.left .nav_line li:hover{ background-color:#ff8c00;}
.left ul li a{color:#fff; font-size:16px; letter-spacing:1px;}
.left ul li:hover a{color:#fff;}
.left .phone{margin-top:20px; background-color: #f6f6f8; border:3px solid #ccc; border-radius:10px;  box-sizing: border-box}
.left .phone h1{ font-size:22px; color:#1a1a1a; line-height:60px; font-weight:bold; text-align:center;
    background:url("../img/zylx.jpg") no-repeat 20px center;  border-bottom:3px solid #232055;}
.left .phone .line{padding:10px;}
.left .phone .line li{line-height:30px;}
@media screen and (max-width:1024px) and (min-width:768px){
    .left .nav_line li{background-position:15%}
    .left .phone h1{background-position:18px;}
}
/*right-head*/
.right{float:right; width:78%; margin-left:1%; border:3px solid #ccc; border-radius:10px;  box-sizing: border-box}
.right .head{border-bottom:1px dashed #ccc; }
.right .head h1{float:left; font-size:18px; padding-left:45px; line-height: 50px; color:#1a1a1a;
    font-weight: bold;  background:url("../img/zyrig.png") no-repeat 10px center }
.right .link{float:right;padding-right:1%;}
.right .link span,.right .link a,.right .link p{float:left; line-height: 50px;}
.right .link span,.right .link p{color:#999;}
.right .link a{color:#f90;}
.right .link a:hover{color:#DC251E;}
/*foot*/
/*.foot{width:24%; margin:20px auto;}*/
.foot .current{background-color:#999; color:#fff;}
.foot li a {float:left; width:20px; height:20px; text-align:center; border:1px solid #999; line-height:20px;
    margin-left:5px;}
.foot li a:hover{background-color:#999;color:#fff;}
.foot .last{float:left; line-height:22px; padding-left:5px;}
.foot table{width:auto!important;}
@media screen and (max-width:768px){
    .box{width:98%}
    .left{width:100%;}
    .left ul li{float:left;width:46.5%; border-bottom:none;}
    .left .nav_line li{background:none;}
    .left ul li a{font-size:14px; color:#333;}
    .left .phone{display:none}
    .right{ width:100%;margin-left:0; margin-top:10px;}
    .right .link{display:none}
    /*.foot{width:68%}*/
}
@media screen and (max-width:1024px) and (min-width:769px){
    .box{width:98%}
}
/*about*/
.about{margin:10px;}
.about1{margin:10px;}
.about1 p{text-indent:2em;font-size:16px;line-height:30px;}
.about p{text-indent:2em;font-size:14px;line-height:28px;}
.about p img{margin:0 auto;}
@media (max-width: 767px){
    .about img{width:100%;}
}
/*????*/
.news li{ border: 1px solid transparent; position: relative; height:68px; padding-left: 90px; line-height:68px;
    border-bottom: 1px dashed #ddd; }
.news li .date{ position: absolute; left:20px; top:9px; color: #333; text-align: center; }
.news li .date h3{ line-height: 30px; margin: 0; font-size: 25px;}
.news li .date h6{ margin: 0; line-height: 20px; font-size: 12px; }
.news li a{ display: inline-block; height: 25px; line-height: 25px; overflow: hidden; margin-top:22px;
    padding-left: 40px; color: #333; font-size: 16px; border-left: 1px solid #888; }
.news li:hover{ border-color: #b68332; border-bottom-style: solid; background-color: #f0f0f0;}
.news li:hover .date{color:#ff8c00; }
.news li:hover a{ color:#1857a3;}
@media (max-width: 767px) {
    .news li{ height: 49px; padding: 5px; margin: 5px 0; padding-left: 60px; border-bottom: 1px dashed #ccc; }
    .news li .date{ left: 0; top: 0; }
    .news li .date h3{ line-height: 25px; font-size: 25px; }
    .news li .date h6{line-height: 14px; font-size: 12px; }
    .news li a{height: 30px; line-height: 30px; margin-top: 0; padding-left: 12px; font-size: 14px; border-left-color: #ddd; }
}
/*product*/
.products{margin-left:2%}
.products li{float:left; width:23%; height:202px; margin-top:2%; margin-right:2%; border:3px solid #ddd; overflow:hidden;
    box-sizing:border-box; position:relative; }
.products li img{width:100%; height:195px; transition:all 0.5s;}
.products li p{background-color:#000; font-size:14px; color:#fff; text-align: center; line-height:40px;
    position:absolute; left:0; bottom:0; width:100%; opacity:0.7; height:40px; overflow:hidden;}
.products li:hover img{transform: scale(1.2)}
.products li:hover{border:3px solid #ff8c00;}
.products li:hover p{background-color:#ff8c00; opacity:1}
@media screen and (max-width:767px){
    .products li{width:31.3%; height:140px}
    .products li img{height:114px}
    .products li p{ line-height:24px; height:24px;}
}
/*????*/
.case { margin-left:2% }
.case li { float: left; width: 23%; height: 220px; margin-top:2%; margin-right:2%; position: relative; }
.case li img { width: 100%; height: 100%; border: 1px solid #ddd; }
.case li p { position: absolute; bottom: 0; left: 0; width: 100%; line-height: 40px; height: 40px; overflow: hidden;
    text-align: center; background: url(../img/hei.png) repeat; color: #fff; transition: all 0.5s ; box-sizing: border-box; }
.case li:hover p { height: 100%; padding-top: 40%; }
@media (max-width: 767px) {
    .case li { width:47.3%; height:180px}
}
/*message_child*/
.message_child{margin:1%; padding-top:10px;}
.message_child h2{font-size: 22px;
    line-height: 38px;
    color: #000;
    text-align: center;
    font-weight: bold;}
.message_child h3{font-size: 15px;
    color: #4d4d4d;
    margin-bottom: 1%;
    float: left;
    padding-left: 21%;
    margin-right: 5%;
    line-height: 40px;}
.message_child h4{font-size: 15px;
    color: #4d4d4d;
    float: left;
    line-height: 40px;}
.message_child p{text-indent:2em; line-height:28px; font-size:14px;}
.message_child p img{margin:0 auto;}
.page{border-top:1px dashed #ccc; padding:1%;}
.page li{line-height:30px;}
.page li p{float:left}
.page li a{color:#EC5504;}
.page li a:hover{border-bottom:1px solid #EC5504;}
@media screen and (max-width:768px){
    .message_child h3{padding:0 9%}
}
@media screen and (max-width:1024px) and (min-width:768px){
    .message_child h3{padding:0 34%}
}


.foot{width: 50%;
    margin: 0 auto;}