.system {width:100%; }
.system  h3 {    display: inline-block;   position: relative;   padding: 0 0 0 25px;   font-size: 20px;   font-weight: 600;
    color: #444444;     line-height: 1.4em; margin-bottom:10px;}
.system  h3:before  {    position: absolute;    top: 7px;    left: 5px;    display: block;    content: '';    width: 10px;
    height: 10px;    background: #2ca153;    -webkit-transform: skew(-25deg);    transform: skew(-35deg);    -webkit-box-shadow: 4px 4px 0 0 rgb(0 0 0 / 15%);    box-shadow: 4px 4px 0 0 rgb(0 0 0 / 15%);}  
  
 .system  h4 span{background-color:#dfdfdf; display:inline-block; color:#333; font-size:18px; padding:5px 30px; margin-bottom:30px;}
.system p {font-size:16px; line-height:26px; padding-bottom:0 !important}
.mgT50 {margin-top:50px}
.line1 {border-top: 1px solid #dfdfdf;    margin: 60px 0;    width: 100%;    clear: both;    overflow: hidden;}

div.system .imgBox {width:100%; background-color:#e7e7e7;}
div.system .bg2 {background-color:#efefef;}
div.system .imgBox .tit {width:100%; background:#333; color:#fff; padding:6px; font-size:18px; text-align:center;
 font-weight:500; }
div.system .imgBox .cont {text-align:center; padding:30px 30px; overflow:hidden;}
div.system .imgBox .cont img {max-width:100%;}
div.system .imgBox span.tit {display:block; }

div.system ul.list1 li {font-size:16px; position:relative;  padding-left:13px; line-height:28px;  margin-left:5px; }
div.system ul.list1 li:before { content: "";  width: 4px; height: 4px; background-color: #555;  position: absolute; left: 0; top: 14px;   border-radius: 50%;}

div.system ul.list3 li {float:left; width:33.3333%; box-sizing:border-box; font-size:15px;; text-align:center; padding:20px 10px}
div.system ul.list3 img {vertical-align:top; max-width:100%; border:1px solid #888; box-shadow:2px 2px 8px rgb(0,0,0,0.3);}

div.system ul.list4 li {float:left; width:25%; box-sizing:border-box; font-size:15px;; text-align:center; padding:20px 10px}
div.system ul.list4 img {vertical-align:top; max-width:100%; border:1px solid #888; box-shadow:2px 2px 8px rgb(0,0,0,0.3);}

div.system .float .floatL {width:65%}
div.system .float .floatR {width:35%; padding-top:10px;}

div.system .mana .floatL {width:45%}
div.system .mana .floatR {width:45%}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.system  h3 {font-size:20px;}	
div.system ul.list3 li {float:left; width:100%; box-sizing:border-box; font-size:14px;  padding:10px 5px}
div.system ul.list3 li+li{margin-left:0%}
div.system ul.list3 li span {display:block; padding-top:10px; padding-bottom:30px;}
div.system ul.list4 li {float:left; width:100%; box-sizing:border-box; font-size:14px;}
div.system ul.list4 li+li{margin-left:0%}
div.system ul.list4 li span {display:block; padding-top:10px; padding-bottom:30px;}
div.system .imgBox .tit { font-size:15px;}
.system p {font-size:15px; line-height:25px;}
div.system ul.list1 li {font-size:15px; position:relative;  padding-left:13px; line-height:25px;}
div.system .float .floatL {width:100%}
div.system .float .floatR {width:100%; }
div.system .mana .floatL {width:100%}
div.system .mana .floatR {width:100%; margin-top:30px;}
div.system .imgBox .cont {padding:10px 10px;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {	
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}