.wrapper{ width: 1200px; margin: 0 auto; padding: 1px 0; box-sizing: border-box; }

@media screen and (max-width:1250px){
    .wrapper{ width: 100%; padding: 0 20px; }
}
@media screen and (max-width:1000px){
    .wrapper{ width: 100%; padding: 0 10px;}
}

/* 常用felx弹性属性 */
.flex{  display: flex; display:-webkit-flex; flex-direction:row; flex-wrap: nowrap; justify-content:space-between;align-items:flex-start; align-content: flex-start; }  
.order{ order:0; flex: 0 1 auto; align-self: auto; } /* align-self: auto | flex-start | flex-end | center | baseline | stretch; */

/* 单行溢出-多行溢出-不换行，多出部分自动隐藏且出现...
.row{text-overflow: ellipsis;overflow: hidden;white-space:nowrap; margin-left:0px;} */
.pxxm{text-overflow: ellipsis;overflow: hidden;white-space:nowrap; margin-left:0px;} 
.multi_row{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp:3; }

/* 清除浮动 */
.clearfix:after{content:"";height:0; line-height:0; display:block;clear:both; visibility:hidden;}    
.clearfix{ zoom:1;}

@media screen and (max-width:760px){
  .pro_recommend{margin:1px 0;}
}

/* 推荐产品 */
.titles{ padding:10px 0; margin: 0 auto; }
.titles h4{ color: #333333; font-size: 18px; text-transform: uppercase; text-align: center;  padding-top:8px; line-height: 1.4; }
.titles h3{ color: #333333; font-size: 28px;  text-align: center;  padding: 6px 0 0 0; }
.titles h6{ font-size: 14px; color: #999; line-height: 24px; text-transform: uppercase; text-align: center; }
.colorFFF P,.colorFFF div{color: #fff;}
@media screen and (max-width:900px){
    .titles{ padding: 10px 6px;}
    .titles h4,.titles h3{ font-size: 22px;}
}
@media screen and (max-width:760px){
    .titles h4,.titles h3{ font-size: 18px;}
}

/* 产品 */
.proHome{width: 100%;padding: 5px 0 50px;}
.proHome .wrapper .pro_nav{justify-content: center;flex-wrap: wrap; }
.proHome .wrapper .pro_nav a{transition: all 0.5s ease;margin: 5px 30px; flex-direction: column; justify-content: center;align-items: center;}
.proHome .wrapper .pro_nav a h3{width: 100%;text-align: center; font-size: 18px;color: #333;padding: 10px 0;transition: all 0.3s ease;}
.proHome .wrapper .pro_nav a:hover h3,.proHome .wrapper .pro_nav a h3.active{color: #0cb46a;transition: all 0.3s ease;}

.proHome .name{padding: 10px;box-sizing: border-box;width: 100%;font-size: 16px;} 
.proHome .pro_list{padding: 20px 0;flex-wrap: wrap;}
.proHome .pro_list li{text-align: center; transition: all 0.5s ease-out;box-sizing: border-box; width: 31%; transition:all 0.5s ease;margin:15px 0;}
.proHome .pro_list  figure{max-width: 100%;overflow: hidden;position: relative;}
.proHome .pro_list  .content{width: 100%;height: 100%; opacity: 0; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); align-items: center;justify-content: center; box-sizing: border-box;  flex-direction: column; transition:all 0.5s ease-out;  font-size: 18px; color: #fff;}
.proHome .pro_list img{display: block;transition: all 0.7s ease-out;}
.proHome .pro_list li:hover .content{opacity: 1;transition: all 0.5s ease; background: rgba(0,0,0,.6);}
.proHome .pro_list  h4{border-bottom: 1px solid #ccc; position: relative; font-size: 20px;color: #333333; width: 100%;padding: 15px 10px ;box-sizing: border-box;}
.proHome .pro_list  h4::after{transition: all 0.5s ease-in-out;position: absolute;bottom: 0;left: 0;content: '';width: 0;height: 1px;background: #f48000;}
.proHome .pro_list  .row {margin-top:10px;} /*标题距上边图片距离*/
.proHome .pro_list  .pxxm {margin-top:10px;} /*首页培训项目标题距上边图片距离*/
.proHome .pro_list li:hover img{transform: scale(1.2); transition: all 0.7s ease-out;}
.proHome .pro_list li:hover h4{color: #f48000;border-bottom: 0;}
.proHome .pro_list li:hover h4::after{width: 100%; transition: all 0.7s ease-in-out;}
.proHome .pro_list  a,.proHome .more a, .caseHome .more a,.newsHome .more a{display: inline-block;
 background: rgba(244,128,0,.7);
  padding: 4px 30px;
  font-size: 14px;
  color: #fff;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-sizing: border-box;margin-top: 20px;}
  .proHome .pro_list  li.fake{height: 1px; background: none; opacity: 0; filter: alpha(opacity=0); margin: 0; padding: 0;}
  .proHome .pro_list li a:hover,  .proHome .more a:hover ,.newsHome .more a:hover,  .caseHome .more a:hover{border-radius: 20px; transition: all 0.3s ease;}
  .proHome .more a ,.caseHome .more a,.newsHome .more a{font-size: 18px;}
  
  .ad_banner{position: relative;}
  .ad_banner .content{position: absolute;color: #fff; top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;text-align: center; }
  .ad_banner .content h2{font-size: 26px;}
  .ad_banner .content h3{font-size: 16px;margin-top: 10px;}
  
    .btnbox{text-align: center;width: 100%;}
    .btnbox a{transition: all 0.3s ease;padding: 5px 35px;display: inline-block; box-sizing: border-box;background: #f48000;color: #fff;font-size: 18px;}
    .btnbox a:hover{color: #fff; box-shadow: 0 2px 3px #ccc;transition: all 0.3s ease;}
    @media screen and (max-width:900px){
    .proHome  .pro_nav img{display: none;}
    .proHome .wrapper .pro_nav a{margin: 5px 10px;padding: 0 20px;box-sizing: border-box; background: #f5f5f5}
    .proHome .wrapper .pro_nav a h3{font-size: 16px; }
    .proHome .pro_list  h4{font-size: 16px;padding: 10px 5px;}
  }

  @media screen and (max-width:760px){
    .proHome .wrapper .pro_nav a h3{font-size: 14px;}
    .proHome .pro_list li{width: 48%;}
    .proHome .pro_list{padding: 10px 0;}
    .title>h1{font-size: 20px;}
    .proHome .wrapper .pro_nav{padding: 10px 0 15px 0;}
    .proHome .more a, .caseHome .more a,.newsHome .more a{font-size: 14px;}
    .ad_banner,.m_linebox{display: none;}
    .proHome .pro_list  .content h4{font-size: 14px;}
    .proHome .pro_list  a{font-size: 12px;}
    .btnbox a{font-size: 14px;}
}