/*left*/
.box{width:80%; margin:20px auto;}
.left{float:left; width:20%;}
.left .nav_line .head1{text-align:center; background-color:#1b8e00;}
.left .nav_line .head1 h1{font-weight:bold;  color:#fff;  line-height:70px; letter-spacing:3px;}
.left ul{border:1px solid #1b8e00}
.left .nav_line li{text-align:center; margin:5px; line-height:40px; height:40px; overflow:hidden;
    border-bottom:1px dashed #1b8e00;}
.left .nav_line li:hover{ background-color:#E8E228;}
.left ul li a{color:#666; font-size:18px; letter-spacing:1px; width:100%; display: inline-block}
.left ul li:hover a{color:#333;}
.left .phone{padding-top:20px; }
.left .phone h1{ font-size:18px; color:#fff; line-height:60px; font-weight:bold; text-align:center; background-color:#1b8e00;}
.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:1px solid #ccc}
.right .head{border-bottom:1px dashed #ccc; }
.right .head h1{float:left; font-size:18px; padding-left:10px; line-height: 50px; color:#1b8e00; font-weight: bold }
.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:#1b8e00;}
.right .link a:hover{color:#DC251E;}
.right ul table{width:auto !important; }
/*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;}
@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}
    .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:768px){
    .box{width:98%}
}
/*about*/
.about{margin:1%;}
.about p{text-indent:2em;font-size:14px;line-height:28px;}
.about img{max-width:80%;margin:5px auto;display: block;}
/*case*/
.case{margin-left:2%}
.case li{float:left; width:22.7%; height:195px; margin-top:2%; margin-right:2%;
    border:1px solid #dadada; overflow:hidden; position:relative; }
.case li img{width:100%; height:195px; transition:all 0.5s;}
.case 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;}
.case li:hover img{width:110%; height:110%;}
@media screen and (max-width:768px){
    .case li{width:47.3%; height:180px}
    .case li img{height:180px}
}
/*message*/
.message{margin-top:20px;}
.message li{border-bottom: 1px dashed #ccc; padding:0 60px; line-height:40px;
    height:40px; overflow:hidden; background:url("../img/new.png") no-repeat 15px center}
.message li span{color:#ccc; float:right;margin-left:10px; }
.message li:hover a{color:#1b8e00; font-weight:bold }
@media screen and (max-width:768px){
    .message li{background:none; padding:0 10px}
}
/*message_child*/
.message_child{margin:1%; padding-top:10px;}
.message_child h2{font-size:16px; color:#000; text-align:center}
.message_child h3{font-size:12px; color:#EC5504; float:left; padding:0 38%; line-height: 40px}
.message_child h4{font-size:12px; color:#EC5504; float:left; line-height: 40px}
.message_child p{text-indent:2em; line-height:28px; font-size:14px;}
.message_child img{width:80%}
.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 18%}
}
@media screen and (max-width:1024px) and (min-width:768px){
    .message_child h3{padding:0 34%}
}
/*honor*/
.honor{margin-left:2%}
.honor li{float:left; width:22.7%; height:195px; margin-top:2%; margin-right:2%;
    border:1px solid #dadada; overflow:hidden; position:relative; }
.honor li img{width:100%; height:195px;}
.honor li .word{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;  transition:all 0.5s;}
.honor li:hover .word{height:100%;}
.honor li:hover h4{line-height:195px; font-size:20px;}
@media screen and (max-width:768px){
    .honor li{width:47.3%; height:180px}
    .honor li img{height:180px}
}
/*contact*/
.contact{margin:1%;}
.contact_body{ text-align:center;}
.contact_body h3{ font-size:18px; line-height:40px; color:#8f1f20}
.contact_body p{font-size:16px;line-height:30px;}
.contact img{width:80%;margin:0 auto; display:block;}
@media screen and (max-width:768px){
    .contact img{display:none}
}