@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

#service {width:100%; margin:0 auto; overflow:hidden;}
#service  img {max-width:100%; vertical-align:top; }

#service .flex{display:flex; flex-wrap: wrap;  justify-content: space-between; align-items: center; padding:10px 0;  }
#service .reverse {flex-direction: row-reverse; margin:0px 0}
#service .reverse .itemTxt {text-align:left}
#service .flex .item:first-child {width:38%; text-align:center }
#service .flex .item:last-child {width:56%; }
#service  .flex .item .num {display:block;  font-family: 'GmarketSansMedium'; color:#efefef; font-size:55px; 
line-height:65px; padding-bottom:1px; position: relative; margin-bottom:5px; font-weight:800 }
#service  .flex .item .tit {font-size:22px; line-height:32px; padding:0 ; font-weight:600; color:#333 }
#service  .flex .item .txt {display:block; font-size:18px; line-height:30px; padding:25px 0 0 0;  }

#service .flex2 {display:flex;  flex-wrap: wrap; justify-content: space-between;  margin-top:80px; background:#eff0f5 }
#service .flex2 .item {  width:45%; font-size:16px; line-height:30px   }
#service .flex2 .item:last-child {width:55%; padding:50px 45px 20px 45px}

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

#service .flexR3 .item .cont2 {position:absolute; top:80px; color:#fff; transition:0.3s all; width:100%; }
#service .flexR3 .item .cont2 .tit span{display:block;font-size:13px; opacity:0.8;  font-weight:400;}
#service .flexR3 .item .cont2 .txt{opacity:0;transition:0.3s all }
#service .flexR3 .item:hover .cont2 {top:30px; transition:0.3s all }
#service .flexR3 .item:hover .cont2 .txt{opacity:1;transition:0.3s all }
#service .flexR3 .item:hover .img:before {background: rgba(8, 96, 172, 0.9); }
#service .flexR3 .item:hover {cursor:pointer ;}

.mgT80 {margin-top:80px}
.mgT50 {margin-top:50px}
.mgT20 {margin-top:20px}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#service h3 {font-size:20px; padding:0 0 15px 0px; position:relative;}
#service h3::before { height:18px; width:4px;  top:7px;  }
#service h4 {font-size:16px;  padding-left:18px; margin-bottom:5px; }
#service h4::before {  width: 11px; height: 11px; border:3px solid #ee1c26; 
 position: absolute; left: 0; top: 8px;   border-radius: 50%;}

#service h3 {margin-bottom:5px}
#service h3 span{ text-align:center; font-size:30px; line-height:35px; 
font-weight:600; padding-bottom:10px; position:relative; margin: 0 auto }
#service .txt1 {    font-size: 16px;    line-height: 22px;}
    	
#service .cont {margin-top:40px}
#service .flex { padding:10px 0; }
#service .reverse .itemTxt {text-align:left}
#service .flex .item{  padding:10px 0px 0 0;   }
#service .flex .item:first-child {width:100%; }
#service .flex .item:last-child {width:100%; }
#service  .flex .item .num { font-size:45px;padding-top:5px; line-height:55px;margin-bottom:0px; }
#service .flex .item .tit {font-size:16px; line-height:22px; }
#service .flex .item .txt {font-size:14px; line-height:22px; padding:5px 0 0 0;  }

#service .flex2 { margin-top:30px;  }
#service .flex2 .item {  width:100%; font-size:14px; line-height:22px   }
#service .flex2 .item:last-child {width:100%; padding:20px 20px 0 20px }

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

.mgT80 {margin-top:40px}
.mgT50 {margin-top:25px}
.mgT20 {margin-top:10px}
}
@media (max-width: 768px) {	
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}