/*pge*/
.subcmp{ background: url(../images/sub_cmp_bg.jpg) no-repeat center top #FFF; background-size: contain;  padding-top: 18%;}
.subcmp .wcnt{ text-align: center; position: relative; }
.subcmp .wcnt .sublst{ width: 80%; margin: 0 auto; display: flex; flex-wrap: nowrap;  justify-content: space-between; align-items: stretch; }
.subcmp .wcnt .sub{ width: 47%; background: #FFF; text-align: left; vertical-align: top; box-shadow: 2px 0 10px 3px rgba(0,0,0,.3);}
.subcmp .wcnt .sub .s-pdg{ padding: 8% 10%; position: relative;}
.subcmp .wcnt .sub .s-pdg h3{font-size: 20px; color: #0860a7; margin-bottom: 3%;  }
.subcmp .wcnt .sub .s-pdg .icn{ position:absolute; left: -5% ; }
.subcmp .wcnt .sub .s-pdg p{ font-size: 16px; line-height: 180%;}
.mlstn .prgs{ border-left: 1px solid #e5e5e5;  padding: 5% 0 5% 50px;}
.mlstn .prgs .item{ position: relative; border-bottom: 1px dashed #eaeaea; padding-bottom: 2%; margin-bottom: 5%;}
.mlstn .prgs .item  .icn{ position: absolute; left: -71px;}
.mlstn .prgs .item .tit{ position: relative;}
.mlstn .prgs .item.curs .tit{ cursor: pointer;}
.mlstn .prgs .item .tit h2{ color: #0860a7; font-size: 20px; display: block;}
.mlstn .prgs .item .tit{ margin-bottom: 15px; }
.mlstn .prgs .item .fnt{ line-height: 180%; font-size: 16px;}
.mlstn .prgs .item .fnt-mr{ display: none;}
.mlstn .prgs .item .tit .mr{ display: inline-block; width: 110px;  height: 38px; line-height: 38px; text-align: center; border-radius: 100px; border: 1px solid #ddd; position: absolute; right: 0; top: 0;}
.mlstn .prgs .item .tit .mr .iconfont{ margin-left: 5px; transition: all 0.3s; }
.mlstn .prgs .item .tit:hover .mr{background: #004e8d; box-shadow: 0px 4px 6px 0px rgb(8,96,67,.2); color: #FFF;}
.mlstn .prgs .item .tit:hover .mr .iconfont{color: #FFF; margin-left:8px ;}
.mlstn .prgs .item .tit .mr.ons{background: #004e8d; box-shadow: 0px 4px 6px 0px rgb(8,96,67,.2); color: #FFF;}
.mlstn .prgs .item .tit .mr.ons .iconfont{color: #FFF; margin-left:8px ;}
.cltlst{ display: flex; flex-wrap: nowrap;  justify-content: space-between; align-items: flex-start;}
.cltlst .item1{ width: 37%;}
.cltlst .item2{ width: 56%;}
.cltlst .blk h2{ color: #0860a7; font-size: 24px; margin-bottom: 3%;}
.cltlst .blk img{ max-width: 100%; width: 100%; }
.cltlst .blk { font-size: 16px; line-height: 180%; margin-bottom:3%;}
.cltlst .blk1{ margin-bottom: 6%;}
.cltlst .blk p{ margin-bottom:3%;}
.cltlst .item2 .vwlst .lst{ display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 6.5%; }
.cltlst .item2 .vwlst .lst .bfnt{ width: 110px; height: 110px; display: flex; align-items: center; justify-content: center;  border-radius: 100px; color: #FFF; font-size: 24px; white-space: nowrap; font-weight: bold;}
.cltlst .item2 .vwlst .lst .lst2{ padding-left: 5%; text-align: justify;}
.cltlst .item2 .vwlst .lst .bfnt.clr1{ background: #538fc4;}
.cltlst .item2 .vwlst .lst .bfnt.clr2{ background:  #78bfaa;}
.cltlst .item2 .vwlst .lst .bfnt.clr3{ background: #e3a882;}
.cltlst .item2 .vwlst .lst .bfnt.clr4{ background: #d77594;}
.cltpic{ padding: 10% 0; text-align: center;}
.cltpic img{ display: block; margin: 0 auto; max-width: 100%;}
.cltpic p{ font-size: 20px; padding: 3% 0 0 0 ;}
.pgshw .prtit h1{font-size: 30px; color: #0860a7; margin-bottom: 3%;}
.msg-frm{ padding: 3% 0;}
.msg-frm .lst{ margin-bottom: 15px;}
.msg-frm .lst .txt-ipt{ display: block;  width: 100%; max-width: 100%;  height: 40px;  line-height: 40px;   font-size: 16px;   line-height: 1.42857143;   color: #555;  background: #fff;  border: 1px solid #ccc;    border-radius: 4px; text-indent: 10px; box-sizing: border-box;}
.msg-frm .lst .txtra{ height: auto; font-size: 16px; font-family: "microsoft yahei";}
.msg-frm .btn-success{ width: 100%; height: 50px; line-height: 50px; display: block; background: #0860a7; border-radius: 100px; text-align: center; color: #FFF; border: none; cursor: pointer; font-size: 16px;} 
.msg-frm .btn-success:hover{background: #004e8d;}
.flnk-n a{ display: inline-block; margin-right: 20px; margin-bottom: 15px; border: 1px solid #DDD;}
.flnk-n a:hover{ border: 1px solid #004e8d ;}
/*message*/
.msgshw .intr{ width: 70%;}
.msgshw .cnt{ position: relative;}
.msgshw .ypzx{ position: absolute; right: 10%; top: 10%; display: flex; flex-wrap: nowrap; align-items: center;}
.msgshw .ypzx img{ width:90px;}
.msgshw .ypzx p{ white-space: nowrap; padding-left: 10px;}
@media screen and (max-width: 1600px) {
   .subcmp .wcnt .sublst{ width: 100%;}
   .subcmp .wcnt .sub .s-pdg .icn{ width: 60px;}
}
@media screen and (max-width: 1440px) {
  .subcmp .wcnt .sub .s-pdg h3{font-size: 22px;}
  .subcmp .wcnt .sub .s-pdg p{font-size: 16px;}
  .subcmp{ padding-top: 14%;}
  .cltpic p{ font-size: 18px;}
}
@media screen and (max-width: 1366px) {
.pgshw .prtit h1{ font-size: 28px;}
}

@media screen and (max-width: 1280px) {
 .mlstn .prgs .item  .icn{  height: 40px; left: -70px;}
 .cltlst .blk h2{ font-size: 22px;}
 .cltlst .blk{ font-size: 16px;}
 .cltlst .blk1{ margin-bottom: 20%;}
 .cltlst .item2 .vwlst .lst .bfnt{ width: 100px; height: 100px; font-size: 20px;}
 .cltpic img{ width: 60%;}
}

@media screen and (max-width: 1100px) {
 .subcmp .wcnt .sub .s-pdg h3{ font-size: 20px;}
 .subcmp .wcnt .sub .s-pdg p{font-size: 14px;}
 .subcmp .wcnt .sub .s-pdg .icn{ width: 45px;}
 .cltlst .blk{ font-size: 14px;}
 .cltlst .item2 .vwlst .lst .bfnt{ width: 90px; height: 90px; font-size: 20px; }
 
}
@media screen and (max-width: 1024px) {
.mlstn .prgs .item.curs .tit{ margin-bottom: 5%;}
.cltlst .blk h2{ font-size: 18px;}
.cltlst .item2 .vwlst .lst .bfnt{ width: 80px; height:80px;}
.cltpic p{ font-size: 16px;}
.pgshw .prtit h1{ font-size: 24px;}
.msgshw .ypzx{ position: relative; right: 0; left: 0; margin-bottom: 5%; }
.msgshw .intr{ width: 100%;}

}

@media screen and (max-width: 800px) {
  .subcmp .wcnt .sublst{ display: block;}
  .subcmp .wcnt .sub{ width: 100%;}
  .subcmp .wcnt .sub .s-pdg{ padding: 6%;}
  .subcmp .wcnt .sub{ margin-bottom: 5%;}
  .subcmp{ background: url(../images/sub_cmp_bg.jpg) no-repeat center top #FFF; background-size: 100% 80%; }
  .cltlst{ display: block;}
  .cltlst .item1{ width: 100%;}
  .cltlst .blk1{ margin-bottom: 8%;}
  .cltlst .blk{ font-size: 16px;}
  .cltlst .item1{ margin-bottom: 8%;}
  .cltlst .item2{ width: 100%;}
  .cltpic img{ width: 70%;}
}

@media screen and (max-width: 768px) {
  .itdc{ display: block; }
  .itdc .cvr,.itdc .fnt{ width: 100%; padding: 0;}
  .itdc .cvr{ margin-bottom: 5%;}
  .mlstn .prgs .item .tit h2{ font-size: 20px;}
  .mlstn .prgs .item .fnt{ font-size: 16px;}
  .mlstn .prgs .item .tit .mr{ width: 100px; height: 34px; line-height: 34px; font-size: 12px;}
  .mlstn .prgs .item .tit .mr .iconfont{ font-size: 14px;}
}

@media screen and (max-width:600px) {
  .mlstn .prgs .item .fnt{ font-size: 14px;}
  .mlstn .prgs .item .icn{ height: 30px; left: -44px;}
  .mlstn .prgs{ padding: 5% 0 5% 30px; }
  .cltpic img{ width: 80%;}
  .cltlst .item2 .vwlst .lst{ margin-bottom: 8%;}
  .pgshw .prtit h1{font-size: 24px;}
}

@media screen and (max-width:580px) {
.pgshw .prtit h1{font-size: 20px;}
}

@media screen and (max-width:500px) {
  .cltlst .blk{ font-size: 16px;}
  .cltlst .item2 .vwlst .lst{ align-items: flex-start; }
  .cltlst .blk{ font-size: 14px;}
.cltlst .blk h2{ font-size: 18px;}
.cltlst .item2 .vwlst .lst .bfnt{font-size: 20px;}
.cltlst .item2 .blk h2{ margin-bottom: 5%;}
}