#style76 {width:100%; }
#style76  img {max-width:100%; vertical-align:top; }
#style76 h3 {text-align:center; margin-bottom:40px}
#style76 h3 span{ text-align:center; font-size:40px; line-height:45px; 
font-weight:600; padding-bottom:10px; position:relative; margin: 0 auto }
#style76 h3 span:before {content: ""; width: 100%; height: 20px; background: rgba(3, 90, 185, 0.2); position: absolute; bottom: 10px;}
#style76 .txt1 {font-size:18px; line-height:32px;  margin-bottom:20px}
#style76 .txt1 span {color:#0077BB; font-weight:600 }
#style76 h4{ text-align:center; font-size:30px; line-height:35px; font-weight:600; margin-top:30px;  }

#style76 .cont {margin-top:120px}

#style76 .flex0 {display:flex; justify-content: space-between; margin:80px auto 0 auto; align-items:center }
#style76 .flex0 .item0 {width:60%; }
#style76 .flex0 .item0:first-child {width:40%;  text-align:center}
#style76 .flex0 .btn {text-align:center}
#style76 .flex0 .btn a{padding:12px 10px; display:inline-block; margin:0px 10px 30px 10px;
background:#0077BB; color:#fff; border-radius:5px; width:200px; text-align:center; }
#style76 .flex0 .btn2 {padding-top:10px}
#style76 .flex0 .btn2 a{padding:12px 10px; display:block; margin:0 auto; 
border:1px solid #0077BB; color:#0077BB; border-radius:5px; width:350px; text-align:center;  font-weight:600;}

#style76 .flex0.reverse {flex-direction: row-reverse; margin: 50px auto 0 auto;}
#style76 .flex0.reverse .item0 {width:48%;}

#style76 .flex1 {display:flex; justify-content: space-between; margin:80px auto 0 auto; }
#style76 .flex1 .item1 {width:31%; }
#style76 .flex1 .item1 .img  {text-align:center}
#style76 .flex1 .item1 .tit{font-size:22px; font-weight:600; text-align:center;  color:#0077BB; padding:10px 0}
#style76 .flex1 .item1 .txt{font-size:18px;text-align:center; padding-bottom:20px; font-weight:600; }
#style76 .flex1 .item1 .txt2{font-size:15px; line-height:25px;}

#style76 .flexR3 {display:flex; justify-content:center;  flex-wrap: wrap; margin:20px 0px;  }
#style76 .flexR3 .item {width:30%; margin:20px 1.5%; border:1px solid #dfdfdf;  border-radius:10px; overflow: 
hidden; box-shadow:1px 1px 8px rgba(0,0,0,0.2); position:relative}
#style76 .flexR3 .item .tit{ text-align:center; font-size:20px; line-height:30px; font-weight:600; padding: 7px 0; 
background:#0077BB; width:200px; margin:0 auto ; border-radius:5px }
#style76 .flexR3 .item .img {position:relative; }
#style76 .flexR3 .item .img img {min-height:290px}
#style76 .flexR3 .item .img:before {content:""; position:absolute; top:0; width:100%; height:100%;
 background:rgba(0,0,0,0); transition:0.3s all }
#style76 .flexR3 .item .txt {text-align:center; padding: 10px 15px 0px 15px}

#style76 .flexR3 .item .cont2 {position:absolute; top:120px; color:#fff; transition:0.3s all; margin-top:0px  }
#style76 .flexR3 .item .cont2 .tit{}
#style76 .flexR3 .item .cont2 .txt{opacity:0;transition:0.3s all; font-size:14px; line-height:22px; }
#style76 .flexR3 .item:hover .cont2 {top:30px; transition:0.3s all }
#style76 .flexR3 .item:hover .cont2 .txt{opacity:1;transition:0.3s all }
#style76 .flexR3 .item:hover .img:before {background: rgba(0, 119, 187, 1); }
#style76 .flexR3 .item:hover {cursor:pointer ;}

#style76 .cont2 {margin-top:50px}
#style76 h4 {font-size:18px; background:#0077BB; color:#fff; padding:3px 0}
#style76 ul.ul1 {border:1px solid #0077BB; padding:20px 20px; }
#style76 ul.ul1 li { position:relative; padding:3px 0 3px 13px; font-size:15px; }
#style76 ul.ul1 li:before { content: "";  width: 4px; height: 4px; background-color: #555;  
position: absolute; left: 0; top: 12px;   border-radius: 50%; }

#style76  .tit2 { font-size:25px;  font-weight:600; padding:10px 0 20px 0;}
#style76 .flex4 { margin:0 ;display:flex;  flex-direction: column; padding:0 0 20px 0; overflow:hidden }
#style76 .flex4 .item4 {width:100%;  margin:15px 0; padding:0 0px; font-size:16px; line-height:26px; }
#style76 .flex4 .item4 .img  { border-radius:50%; background:#0077BB; padding-top:15px; vertical-align:top;
color:#fff; font-size:22px; font-weight:500; text-align:center  }
#style76 .flex4 .item4 .tit{  font-weight:600; padding:2px 0 8px 0; font-size:22px; }
#style76 .flex4 .item4 .txt {font-size:18px; line-height:26px; }
#style76 .flex4 .item4 .img {float:left; width:60px; height:60px}
#style76 .flex4 .item4 .cont1{float:left;padding-left:20px; width:75%;}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#style76 h3 { margin-bottom:20px}
#style76 h3 span{ text-align:center; font-size:22px; line-height:26px;  padding-bottom:10px; }
#style76 h3 span:before {content: ""; width: 100%; height: 12px;  position: absolute; bottom: 10px;}
#style76 .txt1 {font-size:14px; line-height:20px; }

#style76 .cont {margin-top:50px}

#style76 .flex0 {display:flex; justify-content: space-between; flex-wrap: wrap; margin:30px auto 0 auto; width:100%}
#style76 .flex0 .item0 {width:100%; }
#style76 .flex0 .item0:first-child {width:70%; margin:0 auto;}
#style76 .flex0 .btn{}
#style76 .flex0 .btn a{padding:6px 5px;  margin:20px 10px 30px 10px;width:150px; font-size:14px; }
#style76 .flex0 .btn2 {padding-top:10px}
#style76 .flex0 .btn2 a{padding:7px 1px;  width:90%; font-size:14px;}

#style76 .flex0.reverse {flex-direction: row-reverse; margin: 20px auto 0 auto;}
#style76 .flex0.reverse .item0 {width:100%; margin-bottom:20px;}

#style76 .cont2 {margin-top:0px}
#style76 h4 {font-size:15px; line-height:20px;  padding:5px }
#style76 ul.ul1 { padding:10px 10px; }
#style76 ul.ul1 li {  padding:1px 0 1px 12px; font-size:14px; }
#style76 ul.ul1 li:before { width: 4px; height: 4px;  top: 10px;    }

#style76 .flex1 { margin:30px auto 0 auto; }
#style76 .flex1 .item1 {width:100%; margin:20px 0 }
#style76 .flex1 .item1 .tit{font-size:22px;  padding:5px 0}
#style76 .flex1 .item1 .txt{font-size:16px; padding-bottom:10px;  }
#style76 .flex1 .item1 .txt2{font-size:14px; line-height:20px;}

#style76 .flexR3 {margin:30px 10px; flex-wrap: wrap;  }	
#style76 .flexR3 .item {width:100%;  margin:0 0 20px 0; box-shadow:1px 1px 8px rgba(0,0,0,0); border:1px solid #ccc;}
#style76 .flexR3 .item .tit{ text-align:center; font-size:16px; line-height:25px;  padding:12px 0 10px 0; }
#style76 .flexR3 .item .txt {text-align:center;font-size:13px; line-height:20px;  padding: 0 5px 20px 5px}
#style76 .flexR3 .item .img img {min-height:auto}
#style76 .flexR3 .item .cont2 {top:90px}

#style76  .tit2 { font-size:18px;  padding:0px 0 10px 0;}
#style76 .flex4 {  padding:0 0 20px 0;}
#style76 .flex4 .item4 {width:100%;  margin:10px 0; padding:0 0px; font-size:16px; line-height:26px; }
#style76 .flex4 .item4 .img  {  padding-top:14px;color:#fff; font-size:20px; }
#style76 .flex4 .item4 .tit{ padding:0px 0 2px 0; font-size:16px; }
#style76 .flex4 .item4 .txt {font-size:14px; line-height:18px; }
#style76 .flex4 .item4 .img {float:left; width:60px; height:60px}
#style76 .flex4 .item4 .cont1{float:left;padding-left:20px; width:75%;}

@media (max-width: 768px) {
}
@media (max-width: 640px) {
}s
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}