@charset "utf-8";
/* CSS Document */
*{font-family:PingFang,Arial,Helvetica,Tahoma,STXihei, "微软雅黑", "宋体";}
body{margin: 0; background-color:#f5f5f5;}
img{border:none;display:block;}
ul,p{margin:0;padding:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{ font-weight:normal; margin:0;}
a{color:#3e3e3e; font-family:arial,"微软雅黑";text-decoration: none; }
.clear{float: none;}
h1{font-size:26px; line-height:26px;}
h2{font-size:14px; line-height:14px; color:#72778a; margin-top:12px;}
/*nav*/
nav{border-bottom: solid 1px #d9e0e4; position:fixed; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 1;}
nav .logo{display:block;margin-left: 40px; float: left; padding-top:16px;}
nav .logo img{ width:117px; height:38px;}
nav .daohang{margin-right: 40px; float: right;}
nav li{ display: block; float: right; height: 70px;line-height: 70px; margin: 0 22px; font-size: 16px; font-weight: bold; position: relative;}
.clear{clear: both;}
nav span{width: 4px;height: 4px; border-radius: 50%; background-color: #DE0E26; position: absolute;top: 47px; left: 50%; margin-left: -2px; display: none;}
nav .daohang li:hover span{display: block;}
nav .current{display:block;}

nav .caidan{display: none;}

/*works_box*/
.box{ width:25%;}
.box img{width: 100%;height: auto;}
.title_box{ text-align:center; padding:80px 0 60px 0;}
.title_box h2{ margin-top:12px;} 
.more{ display:block; font-size:26px; text-align:center; line-height:150px; color:#fff; background-color:#3e3e3e;}
.box{ float:left; position:relative;}
.box .bai{ width: 100%; height: 100%; background-color:rgba(0,0,0,0.80); display:block; position:absolute; top:0; display:none;}
.box .bai p{text-align: center; font-size: 20px; color: #fff; line-height: 30px; position: relative; top: -38%;}
.box .bai span{ width: 88%; height: 80%; border: solid 1px #DE0E26;position: relative; top: 10%; left: 6%;}
.box .bai{
animation:myfirst 0.5s;
-moz-animation:myfirst 0.5s; /* Firefox */
-webkit-animation:myfirst 0.5s; /* Safari and Chrome */
-o-animation:myfirst 0.5s; /* Opera */
}
@keyframes myfirst
{
from {background-color:rgba(0,0,0,0.00);}
to {background-color:rgba(0,0,0,0.80);}
}
/* Firefox */
@-moz-keyframes myfirst 
{
from {background-color:rgba(0,0,0,0.00);}
to {background-color:rgba(0,0,0,0.80);}
}
 /* Safari and Chrome */
@-webkit-keyframes myfirst
{
from {background-color:rgba(0,0,0,0.00);}
to {background-color:rgba(0,0,0,0.80);}
}
 /* Opera */
@-o-keyframes myfirst
{
from {background-color:rgba(0,0,0,0.00);}
to {background-color:rgba(0,0,0,0.80);}
}

.works .box:hover span{ display:block;}
.more:hover{ background-color:#DE0E26;}
/*about me*/
.back_box{ height:650px; background-image: url(../images/background.jpg); background-attachment:fixed; background-size: 2000px;}
.back_box .photo{ width:1180px; margin:auto;}
.back_box .photo img{ float:left;}
.back_box .photo div{ float:right; height:340px; margin-top:140px; background-color:#FFFFFF; width:528px; padding: 80px 116px 0 116px; position:relative;}
.photo div h2{  margin-top:12px;}
.photo div p{ font-size:14px; color:#4c4c4c; line-height:24px; margin-top:30px;}
.photo div a{ width:180px; height:40px; text-align:center; color:#fff; background-color:#3e3e3e; position:absolute; bottom:56px; left:-45px; display:block; line-height:40px;}
.photo div a:hover{ background-color:#DE0E26;}
.photo span{font-weight: bold;}
/*footer*/
.footer_box{ background-color:#fff;}
.footer{ width:1180px; margin:auto; height:380px; display:flex; align-items:center; position:relative;}
.box_r{ font-size:14px; line-height:36px;}
.box_l{ width:160px; }
.box_r{ width:430px;}
.box_r01{ float:right; position:absolute; right:0;}
.box_r01 span{ float:right;}
.box_r01 h3{ color:#3e3e3e; text-align:center;}
/*works*/
.ww{background-color:#fff;}
.title{ margin-top:70px; padding-bottom: 60px;}
.title_box ul li{ display: block; float:left; margin:0 5px;}
.title_box ul li a{display: block; padding:0 30px; text-align:center;  font-size:14px; line-height:36px;}
.title_box ul{ position:absolute; left:50%; margin-left:-116px;}
.title .box_ti{ margin-bottom:36px;}
.o{ background-color:#3e3e3e; color:#FFFFFF;}
.title_box ul li a{
  -webkit-transition-property: background;
  transition-property:background;
  -webkit-transition-duration:.3s;
  transition-duration:.3s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .0s;
      transition-delay:.0s;
}
.title_box ul li a:hover { background-color:#3e3e3e; color:#FFFFFF; border:solid 1px #030b1c;line-height:34px;padding:0 29px;}
/*about*/
.about{ width:1180px; margin: 170px auto 80px auto;}
.about img{ float:left;}
.about .introduce{ float:right; width:690px;}
.introduce h1{ margin-top: 20px;font-weight: bold;}
.introduce h2{ margin-bottom:40px;}
.introduce p{ color:#666; font-size:14px;line-height:24px;}
.introduce p span{font-weight: bold;}
.introduce h4{ margin-top:40px; font-size:20px; line-height:20px; color:#3b3b3b;font-weight: bold;}
.h_box{  margin-top:28px; margin-bottom:10px;}
.introduce h5{ font-size:16px; line-height:16px; color:#4f4f4f; float:left; font-weight: bold;}
.introduce h6{ font-size:12px; color:#8f8f8f; line-height:16px; margin-left:10px; float:left;}
/*cooperation*/
.cooperation{ width:1180px; margin:170px auto 100px auto;}
.cooperation img{ float: left;}
.anniu{ padding-top:60px; float:right;}
.cooperation .anniu h1{ font-family:PingFang; font-weight:100; font-size:72px; line-height:102px;}
.cooperation .anniu a{ width:158px; height:38px; border:solid 1px #3e3e3e; text-align:center; line-height:38px; font-size:14px; display:block; margin-right:10px; margin-top:20px; float:left;}
.cooperation .anniu .xiazai{ background-color:#3e3e3e; color:#fff; margin-right:0; border:none;width:160px; height:40px;}
.cooperation .anniu .xiazai:hover{ background-color:#DE0E26;}
.cooperation .anniu a:hover{ background-color:#3e3e3e; color:#fff;}


/*tu*/
.works .tu{margin: auto;box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.08); width: 1200px;}
.works .tu img{width: 100%;}