@max-width:1000px;

@main-color:#ff9a00;

@font-color:#ffffff;

@333:#333333;
.float(@n){
  float: @n;
}
.border-radius(@n){
  border-radius:@n;
}


.banner{
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 480px;
  background: url("../images/banner3.png") center center no-repeat;
  overflow: hidden;
  margin-top: 80px;
}
.banner-main{
  width: 1000px;
  margin: 0 auto;
}
.banner-main p{
  font-size: 56px;
  color: @font-color;
  // margin-top: 150px;
  line-height: 1;
}
.banner-main span{
  font-size: 14px;
  color: @font-color;
  line-height: 1;
  margin-top: 18px;
  display: block;
}
.banner-main a{

  display: block;
  width: 150px;
  height: 50px;
  line-height: 50px;
  background-color: @main-color;
  .border-radius(25px);
  margin-top: 30px;
  font-size: 18px;
  text-align: center;
  color: #ffffff;

}
.main{
  width: 1000px;
  margin: 0 auto;
}

.desc{
  font-size: 14px;
  color: #333;
  margin-top: 60px;
  margin-bottom: 100px;
  line-height: 21px;
  padding-left: 60px;
  padding-right: 72px;
}
.modules{
  width: 434px;
  height: 500px;
  background: url("../images/modules.png") no-repeat;

  margin:120px auto 150px auto;
  position: relative;

}
.m-icon-center{
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -75px 0 0 -75px;
  background: url("../images/card-icon-cneter.png") no-repeat;
}
.m-icon-center:after{
  content: '班牌考勤系统';
  font-size: 15px;
  color: #333333;
  position: absolute;
  bottom: -27px;
  left: 0;
  width: 150px;
  text-align: center;
}
.m-icon-1{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: -50px;
  margin-left: -50px;
  background: url("../images/card-icon-1.png") no-repeat;
}
.m-icon-1:after{
  content: '班牌内容管理';
  font-size: 16px;
  color: #333333;
  position: absolute;
  top: -20px;
  left: 0;
  width: 100px;
  text-align: center;
}
.m-icon-2{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0%;
  top: 70px;
  margin-left: -50px;
  background: url("../images/card-icon-2.png") no-repeat;
}
.m-icon-3{
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0%;
  top: 320px;
  margin-right: -50px;
  background: url("../images/card-icon-3.png") no-repeat;
}
.m-icon-4{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0%;
  top: 320px;
  margin-left: -50px;
  background: url("../images/card-icon-4.png") no-repeat;
}
.m-icon-5{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  bottom: -40px;
  margin-left: -50px;
  background: url("../images/card-icon-5.png") no-repeat;
}
.m-icon-6{
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0%;
  top: 70px;
  margin-right: -50px;
  background: url("../images/card-icon-6.png") no-repeat;
}

.m-icon-2:after{
  content: '通知公告管理';
  font-size: 16px;
  color: #333333;
  position: absolute;
  left: -120px;
  width: 100px;
  text-align: center;
  height: 100px;
  line-height: 100px;
}
.m-icon-3:after{
  content: '考勤统计';
  font-size: 16px;
  color: #333333;
  position: absolute;
  right: -90px;
  width: 100px;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

.m-icon-4:after{
  content: '考勤规则设置';
  font-size: 16px;
  color: #333333;
  position: absolute;
  left: -115px;
  width: 100px;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

.m-icon-6:after{
  content: '班牌远程控制';
  font-size: 16px;
  color: #333333;
  position: absolute;
  right: -113px;
  width: 100px;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

.m-icon-5:after{
  content: '请假管理';
  font-size: 16px;
  color: #333333;
  position: absolute;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  text-align: center;
  bottom: -20px;

}
.main-card{
  width: 100%;
  margin: 0 auto;
  // height: 420px;
  
  clear: both;
}
.centent{
  margin: 0 auto;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  // height: 500px;
}
.title{
  margin-top: 100px;
  margin-bottom: 60px;
}
.title p{
  
  // margin-top: 100px;
padding-left: 10px;
padding-right: 10px;
  font-size:24px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(0,0,0,1);
  line-height:21px;
  // display:inline-block;
}
.title span{
  
  margin: 20px 10px;
  margin-top: 20px;
display: inline-block;
  font-size:14px;
font-family:PingFang SC;
font-weight:400;
color:rgba(0,0,0,1);
line-height:21px;
}
.main-card{
  width: 100%;
  margin: 0 auto;
  // height: 420px;
  
  clear: both;
}
.content-card{
  margin: 60px auto;
  width: 900px;
  height: 260px;
  display: flex;
  flex-direction: row;
  position: relative;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);

  
}
.leftcard{
  float: left;
  background-size:cover;
  width: 378px;
  height: 260px;
  // background:red;
  background-color: red;
}
.rightcard{
  padding: 40px;
 
width:600px;
height:260px;
background:rgba(255,255,255,1);

}

.rightcard p{
//  padding-left: 20px;
  width: 480px;
  // margin-top: 28px;
  margin-bottom: 20px;
  font-size:14px;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(0,0,0,1);
  line-height:21px;
  text-align: left;
}