#main1 {padding: 80px 50px;}
#main2,#main3{clear: both; width: 100%; overflow:hidden; padding:100px 0;}

a.mainbtn{display: inline-block; font-size:16px; border:1px #aaa solid; border-radius: 5px; transition: all .2s; padding:5px 20px; color:#666; margin-top: 10px; text-transform: uppercase;}
a.mainbtn i{display: inline-block; margin-left: 10px; color: #00a651;}
a.mainbtn:hover{background: #00a651; border:1px #00a651 solid;  color: #fff;}
a.mainbtn:hover i {color: #fff;}


/* */
#main1 h3{font-size: 2em; font-weight: 700; text-transform: uppercase; color:#222; margin: 0 auto 20px;}
.features_item {padding: 15px;}
.features_item .f_item_icon{float: left; width:15%; display: inline-block; margin-right: 15px;}
.features_item .f_item_icon i {font-size:4rem; color:#00a651;}
.features_item .f_item_text {display: inline-block;    width:75%;}
.features_item .f_item_text p {font-size:16px; line-height: 1.5; margin-bottom: 20px;}

/* */
#main2{text-align: center; }
#main2 h3{font-size: 2.4em; font-weight: 700; text-transform: uppercase; color:#222; margin: 0 auto 50px;}
#main2 h3 span{color: #00a651;}
.product-div{width: 100%;}



/* */
#main3{background: #f3f3f3; }
#main3 hr{border:0; margin:5px auto 5px;}
#main3 .col-md-6 div{background: #fff; padding:30px; min-height: 230px;}
#main3 h3{font-size: 1.8em; text-transform: uppercase; color:#222; font-weight: 700; margin: 0 auto 10px;}

#main3 h4{font-size: 1.3em; color:#222; 
    margin: 0 auto 10px;}
#main3 h4 b{display: inline-block; margin-right: 10px; color:#00a651;}
#main3 .col-md-6 div.cscenter{background: /* url('cs-bg.jpg')no-repeat right top */#fff; }
#main3 .col-md-6 div.cscenter a{margin-right: 5px;}
#main3 .col-md-6 div.cscenter .recruit{margin-top: 14px;}
#main3 .board_output td{font-size: 13px !important;}

#main3 i{display: inline-block; margin-right: 15px; font-style: normal;}

#main3 h2.m_title {color: #222; font-size: 2.6em; font-weight: 700;}
#main3 h2{font-size: 2em; font-weight: 500; text-transform: uppercase; color:#fff; 
    margin: 0 auto 30px; text-align:center;}



/* */
#main4 {width:100%; background:url('online1_bg.jpg')no-repeat center center;     
background-attachment: fixed; background-size:cover;}
#main4 div.online1-div{width:100%;margin:0 auto; max-width:1200px; text-align:center; font-size:16px;padding:100px 0; letter-spacing:-0.04em; color:#fff; }
#main4 div.online1-div a{display:inline-block; margin:10px auto 0; border:2px #fff solid; padding:10px 30px; color:#fff;}
#main4 div a:hover{background:rgba(255,255,255,1); color:#222; }

#main4 h3{font-size: 2.8em; text-transform: uppercase; color:#222;
    margin: 0 auto 20px;}
#main4 h3{font-size: 2.8em; text-transform: uppercase; color:#222;    color: #222; letter-spacing:5px;
    margin: 0 auto 30px;}
#main4 p{font-size: 1.4em; text-transform: uppercase; color:#fff;
   }




@media (max-width:768px){
#main4 div.online1-div {    width: 80%; padding: 50px 0;    font-size: 14px; }
#main4 div.online1-div p br{display:none;}

#main1,#main2,#main3{padding:50px 0;}

#main1 .col-md-4{margin:0 auto 50px;}
#main1 .col-md-4:last-child{margin-bottom: 0;}

#main4 p{font-size: 16px; }
#main3 .col-md-6 div.cscenter{margin:50px auto 0; }
#main3 .col-md-6 img {max-width: 100%; margin-bottom: 20px;}
    
}



.accordion {width: 100%;  max-width: 1200px;   overflow: hidden;  margin: 50px auto;}
.accordion ul {  width: 100%;  display: table;  table-layout: fixed;  margin: 0;  padding: 0;}
.accordion ul li {overflow: hidden; display: table-cell; vertical-align: bottom;  position: relative;  
width: 20%;   height: 305px; background-size: cover;  background-repeat: no-repeat;  background-position: center center; transition: all 700ms ease;}
.accordion ul li div {  display: block;  overflow: hidden;  width: 100%;}
.accordion ul li div a { display: block;  height: 360px;  width: 100%;  position: relative;  z-index: 3;
  vertical-align: bottom;  padding: 15px 20px;  box-sizing: border-box;  color: #fff;  text-decoration: none;  transition: all 200ms ease;}
.accordion ul li div a * {  margin: 0;  width: 100%;  text-overflow: ellipsis;  position: relative;  z-index: 5;
  white-space: nowrap;  overflow: hidden;  -webkit-transform: translateX(0px);  transform: translateX(0px);
  -webkit-transition: all 400ms ease;  transition: all 400ms ease;}
.accordion ul li div a div {height: 25%; position: absolute; bottom: 0; left: 0;}
.accordion ul li div a div h2 {
    text-shadow:1px 1px 3px rgba(0,0,0,0.5); 
    text-overflow: clip; 
    font-size: 22px; 
    text-transform: uppercase;  
    margin-bottom: 10px; 
    padding:15px 0 0 10px; 
    text-align: center  
}
.accordion ul li div a div p {opacity: 1; font-size: 17px; text-align: left; padding:5px 0 0 10px; text-shadow: 0px 0px 2px rgba(0,0,0,0.5);}
.accordion ul li div a div p span {display: block; width: 100%;}
.accordion ul li:nth-child(1) {background-image: url("../img/mb01.png");  }
.accordion ul li:nth-child(2) {background-image: url("../img/mb02.png");}
.accordion ul li:nth-child(3) {background-image: url("../img/mb03.png");}
.accordion ul li:nth-child(4) {background-image: url("../img/mb04.png");}
.accordion ul:hover li {width: 15%;}
.accordion ul:hover li:hover {width: 20%;}
/*.accordion ul li a {background-image:url("../img/arrow.png"); background-repeat:no-repeat; background-position: center 90%; background-color: rgba(0, 0, 0, 0.2);}*/
.accordion ul li a {background-color: rgba(0, 0, 0, 0.1);}
.accordion ul:hover li:hover a {background-color: rgba(0, 0, 0, 0.3);}
.accordion ul:hover li:hover a * {  opacity: 1;  -webkit-transform: translateX(0);  transform: translateX(0);}

@media (max-width:768px){
    .accordion ul li {display: inline-block; width: 50%; height: 300px;}
    .accordion ul:hover li {width: 50%;}
    .accordion ul:hover li:hover {width: 50%;}
    .accordion ul li div a {height: 300px;}
}
@media (max-width: 575px){
    .accordion ul li {display: inline-block; width: 100%;}
    .accordion ul:hover li {width: 100%;}
    .accordion ul:hover li:hover {width: 100%;}
}