*{
  margin:0;
  padding:0
}
#wrap{
  background: url("../img/banner.jpg")no-repeat;
  background-position: center center;
  background-attachment:fixed ;
  background-size: cover;
  font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
  overflow: hidden;
}
em,i{
  font-style:normal
}
li{
  list-style:none
}
img{
  border:0;
  vertical-align:middle
}
button{
  cursor:pointer
}
a{
  color:#666;
  text-decoration:none
}
a:hover{
  color:#c81623
}
.header{
  line-height:50px;
}
.header nav{
  height:50px;
  background: #cccccc;
}
nav ul li{
  float:right;
  margin-right:30px;
}
.logo{
  float: left;
  margin-left: 40px;

}
.logo a{
  font-size:20px;
  color:#ffffff;
  font-weight:700;
  letter-spacing:2px;
}
.banner{
  background: rgba(0,0,0,.4) ;
}
.banner{
  height: 600px;
}
.banner .inner{
  color:#fff;
  text-align: center;
  /*background:#000000;*/
  margin: 0 auto;
  /*background: black;*/
  max-width: 300px;
  position: relative;
  top:160px;
}
.line{
  width: 65%;
  background: #fff;
  height: 2px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.inner h1{
  margin-bottom: 10px;
}
.banner .inner p{
  line-height: 30px;
  font-size: 18px;
  letter-spacing: 1px;
}
.banner .inner button{
  margin-top: 20px;
  padding:10px 20px;
  border-radius:5px;
  background: #e85e17;
  border: none;
  color:#eee;
  outline: none;
  cursor: pointer;
}

.banner .inner button:hover{
  transform:rotate(1080deg)  scale(2);
  transition: 2.5s;
  z-index: 99;
}
#banner .inner.more{
  margin-top: 140px;
}
.content{
opacity: .9;
}
.part_one{
  text-align: center;
  color:#ffffff;
  background: rgba(67,178,165,1);;
  padding-top: 65px;
  opacity: 0.95;
}
.wraper {
  max-width: 1080px;
  margin: 0 auto;
}
.wraper h1{
  padding:15px 0;
  font-size: 27px;
}
.wraper line{
  margin:15px auto;
  width: 40%;
  background:darkgrey;
}
.wraper p{
  padding: 15px 0;
  font-size: 18px;
  letter-spacing: 1px;
}
.icon{
  margin: 30px auto;
  margin-bottom: 0;
  padding-bottom: 30px;
}
.icon .item{
  margin-right:50px ;
  border: 2px solid green;
  display: inline-block;
  height: 80px;
  width: 80px;
  transform:rotate(45deg) ;
}
.icon .item img{
  width: 100%;
  height: 100%;
  transform:rotate(-45deg) ;
}
.part_two{
  background: rgb(33,41,50);
}
.first.text_right{
float: right;
}
.first_left{
  width: 41%;
}
.first_left img{
  width: 100%;
}
.first>div{
  float: left;
}
.clear_fix:after{
  content: '';
  display: block;
  clear: both;
}
.first_text{
  position: relative;
  top:68px;
  left:50px;
  width: 55%;
  color: #ffffff;
}
.first_text h2{
  font-size: 24px;
  margin-bottom: 12px;
}
.first_text .first_tittle{
  margin-bottom: 15px;
  font-size: 20px;
}
.first_text p{
  font-size: 18px;
}
.first:nth-child(odd){
  background: rgba(255,255,255,.1);
}
.part_three{
  background:#3f3965 ;
  opacity: 0.9;
  color:#ffffff;
}
.three_wrap{
  margin: 0 auto;
  width: 60%;
}
.three_wrap .three_text{
  margin: 0 auto;
  width: 60%;
  padding-top: 65px;
}
.three_text h2{
margin-bottom: 20px;
  text-align: center;
}

.three_text .line{
background:#1a0973;
  width: 55%;
  margin-bottom: 20px;
}
.card_group{
  margin: 0 auto;
}
.card{
  min-height: 300px;
  float: left;
  width: 50%;
  padding: 50px;
  max-width: 461px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-top: 20px;
}
.card h2{
text-align: center;
}
.card:nth-child(1){
  background: rgba(0,0,0,0.5);
}
.card:nth-child(2){
  background: rgba(0,0,0,0.1);
}
.card:nth-child(3){
  background: rgba(0,0,0,0.15);
}
.card:nth-child(4){
  background: rgba(0,0,0,0.2);
}
.card:nth-child(5){
  background: rgba(0,0,0,0.25);
}
.card:nth-child(6){
  background: rgba(0,0,0,0.3);
}
.footer{
  background:#333;
  min-height: 200px;
  text-align: center;
  color: #fff;
}
.share_group{
  display: block;
  margin: 0 auto;
  width: 1080px;
 padding: 45px;
}
.share_group li{
  display: inline-block;
  padding:10px ;
}
.active{
position: relative;
}
.active span{
position: absolute;
  height: 4px;
  background: #fff;
  bottom: 5px;
  left: 0;
  width: 100%;
}
.mask{
  display: none;
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3);
}
.silder{
  background: #333;
  position: fixed;
  top:0;
  right: -300px;
  bottom: 0;
  width: 300px;
  transition: .3s;


}
.silder ul li{
  margin-top: 30px;
padding:15px;
}
.silder ul li:hover{
  background:gainsboro ;
}
.silder ul li a{
  color: #fff;
}
.top{
  width:50px ;
  height: 30px;
  position: fixed;
  right: 30px;
  bottom: 120px;
}
.top p,img{
  width: 100%;
  text-align: center;
}