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


/*---------------------------------------
  PC RESPONSIVE              
-----------------------------------------*/

#service h3 {font-size:25px; font-weight:600; padding:0 0 20px 16px; position:relative;}
#service h3::before {content:""; height:21px; width:4px; background-color:#ee1c26; 
position:absolute; top:10px;  left:0px; }
#service h4 {font-size:18px; font-weight:500; position:relative; padding-left:20px; margin-bottom:5px; }
#service h4::before { content: "";  width: 13px; height: 13px; border:3px solid #ee1c26; 
 position: absolute; left: 0; top: 8px;   border-radius: 50%;}

#service {width:100%; margin:0 auto; overflow:hidden;}
#service .flex4 {display:flex; flex-wrap: wrap;  justify-content: center;  gap:2.5%;  }
#service .flex4 .item {width:23%; padding:30px 35px 45px 35px; text-align:center; border:0px solid #eff0f5; 
border-radius:0px; background:#eff0f5 }
#service  img {max-width:100%; vertical-align:top; }
#service .flex4 div.tit {font-size:22px; font-weight:600;border-bottom:1px dashed #bbb;  padding:10px 0 20px 0; margin-bottom:20px}
#service .flex4 div.txt {font-size:15px; }

#service .flexR6 { margin:0 auto; display:flex;  flex-wrap: wrap; justify-content: space-between; padding:10px 0px; }
#service .flexR6 li.item {  width:16%;  position:relative; margin:0px 0;  }
#service .flexR6 li.item .box {padding:0 ; background:#fff;border:0px solid #ccc; text-align:center; }
#service .cont {margin-top:80px}
#service .inner {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
#service .flexR6 li.item .num {width:20px; height:20px; font-size:20px;  border-radius:30px; 
font-weight:bold; margin: 50px auto 25px auto; background-color:#fff;border:4px solid #ee1c26; position:relative; }
#service .flexR6 li.item .num:before {content:""; position:absolute; width:500px; height:5px; left:0px; top:35%; 
background-color:#dfdfdf;  z-index: -1; }
#service .flexR6 li.item:last-child .num:before {background-color:#fff; }
#service .flexR6 li.item .num span {position:absolute; top:-50px; left:50%; transform:translateX(-50%);
font-size:18px; font-weight:500;  width:150px; text-align:center}
#service .flexR6 li.item .tit {font-size:20px; font-family:var(--font1); font-weight:600;  padding:10px 10px; 
background:#f4f5f7; border-radius:10px; margin:20px 0; }
#service .flexR6 li.item .txt { font-size:20px;  padding:0 0px 0 0px; font-weight:600; font-family:var(--num); color:#ccc; }
#service .flexR6 li.item a {border:1px solid #888; padding:8px 30px; border-radius:50px; margin-top:5px; display:inline-block }
#service .flexR6 li.item ul li {text-align:left; padding:7px 0 7px 22px; font-size:15px; position:relative;
background:url(../img/icon.png)no-repeat left 11px; transition:all 0.3s ; background-size:15px; line-height:22px;}
#service .flexR6 li.item ul li{color: #333; transition: 0.3s all   }

#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:42%; 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:26px   }
#service .flex2 .item:last-child {width:55%; padding:50px 45px 20px 45px}

#service .actv-tg-section{background-color: #f1f0e8; max-width: 1200px; margin: 0 auto; padding: 40px 20px; font-family: 'Pretendard' sans-serif;}
#service .actv-tg-inner{display: flex; max-width: 1200px; margin: 0 auto; gap: 40px; flex-wrap: wrap;}
#service .actv-tg-image img{display: flex; align-items: center; max-width: 500px; height: auto; margin: 50px auto 0 auto;}
#service .actv-tg-text{flex: 1; min-width: 300px;}
#service .actv-tg-title{font-size: 18px; font-weight: bold; margin-bottom: 30px; line-height: 1.6;}
#service .actv-tg-boxes{display: flex; gap: 30px; flex-wrap: wrap;}
#service .actv-tg-box{flex: 1; min-width: 250px; background-color: white; padding: 15px; border-radius: 8px; font-size: 15px;}
#service .actv-tg-box h4{margin-bottom: 10px; font-weight: 600; color: #333;}
#service .actv-tg-box ul{list-style: none; padding-left: 0; margin: 0;}
#service .actv-tg-box li{position:relative; padding-left: 18px; margin-bottom: 6px;}
#service .actv-tg-box li::before{content: "\25CF"; position: absolute; left: 0; color: red; font-size: 16px; line-height: 1; font-family: "Arial", "Segoe UI Symbol", sans-serif;}
#service .actv-tg-footnote{font-size: 12px; color: #666; margin-top: 30px; text-align: left; padding: 0 20px;}
#service .section-title{border-bottom: 1px dotted #aaa; padding-bottom: 8px; margin-bottom: 16px; font-size: 16px; color: #333;}

#service .ig-wrap{display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 40px;}
#service .ig-img{flex: 0 0 300px; height: 420px; background-image: url('/bizdemo161555/img/hblock/content/style107/img/ajitide_product_bg.png'); background-size: contain; background-repeat: no-repeat; background-position: left center;}
#service .ig-txt{flex:1 1 auto; min-width: 0;}
#service .ig-heading{font-size: 22px; font-weight: bold; margin-bottom: 12px; border-bottom: 3px solid #333; padding-bottom: 6px;}
#service .ig-list{list-style: none; padding: 0; margin: 0 0 20px 0;}
#service .ig-list li{position: relative; padding-left: 35px; margin-bottom: 10px; line-height: 1.6;}
#service .ig-list li::before{content: counter(item); counter-increment: item; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: red; color: white; font-weight: bold; font-size: 14px; line-height: 24px; text-align: center; border-radius: 50px;}
#service .ig-list{counter-reset: item;}

#service .prot-table{width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; font-size: 15px; color: #333; border: 1px solid #e7e9ee;}
#service .prot-table thead th{background:#ff3b3b ; color: #fff; font-weight: 700; text-align: center; padding: 14px 12px; border: 1px solid #e7e9ee;}
#service .prot-table thead th.blank{background: transparent; border: none;}
#service .prot-table td, .prot-table th{border: 1px solid #e7e9ee; padding: 12px 14px; text-align: center;}
#service .prot-table .category{background: #f5f7fb; font-weight: 700; width: 140px; white-space: nowrap; text-align: center; vertical-align: middle;}
#service .prot-table td{color: #555;}

#service .act-grid{max-width: 1200px; margin: 0 auto 40px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between;}
#service .act-grid li{position: relative; flex: 0 0 calc(16.666% - 20px); min-width: 160px; height: 175px; box-sizing: border-box; background: url(/default/img/hblock/content/table1/img/list_dotbg.gif) repeat 0 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-radius: 4px;}
#service .act-grid li::before{content: ""; position: absolute; inset: 0; background: #eee; z-index: 0;}
#service .act-grid li::after{content: ""; position: absolute; inset: 0; background: url(/default/img/hblock/content/table1/img/list_dotbg.gif) repeat 0 0; opacity: 1; z-index: 1;}
#service .act-grid li > *{position: relative; z-index: 2;}
#service .act-grid li img{display: block; width: 96px; height: auto; margin-bottom: 10px;}
#service .act-grid li .desc{margin: 0; line-height: 1.4; font-size: 16px;}
#service .act-grid li .desc small{display: block; font-size: 12px; margin-top: 2px;}

#service .act_pd-grid{display: flex; justify-content: space-between; gap: 15px; margin: 20px 0;}
#service .act_pd-box{flex: 1; border: 1px solid #ddd; text-align: center; background: #fff;}
#service .act_pd-box .tittle{background: #f3f3f3; padding: 10px; font-weight: bold; font-size: 14px;}
#service .act_pd-box .image{padding: 20px;}
#service .act_pd-box .image img{max-width: 200px; height: auto;}
#service .act_pd-box .desc{padding: 10px; font-size: 13px; line-height: 1.4;}

#service .act-attention{max-width: 1200px; margin: 0 auto; padding: 10px 20px 30px; box-sizing: border-box;}
#service .act-attention-grid{display: grid; grid-template-columns: repeat(4,1fr); gap: 16px 18px;}
#service .act-card::after {content: none;}
#service .act-card__head{position: relative; padding: 18px 16px; background: #eef2f8; text-align: center; font-weight: 600; line-height: 1.45;}
#service .act-card__head::after {content: ""; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; 
background: #fff url('/default/img/hblock/content/style109/img/activa_attention_arr.png') no-repeat center/20px 20px; border: 1px solid #dcdfe6; box-shadow: 0 2px 6px rgba(0,0,0,.05);}
#service .act-card__head small{font-weight:500;color:#888}
#service .act-card__body{padding:26px 16px 18px; text-align:center; background:#fff; line-height:1.6; min-height:72px}


#service .act-graph{max-width:1200px;margin:18px auto 60px;padding:0 20px;box-sizing:border-box}
#service .act-graph-desc{margin:8px 0 20px;color:#333;line-height:1.8}
#service .act-graph-desc p{margin:4px 0}
#service .act-graph-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}
#service .act-graph-grid .g{text-align:center; padding:10px 14px 0; position:relative;}
#service .act-graph-grid .g img{width:100%; max-width:333px; height:auto; margin:0 auto; display:block;}
#service .act-graph-grid .g figcaption{margin-top:6px;color:#555}
#service .act-graph-grid .g:not(:last-child)::after{content:""; position:absolute; right:0; top:10px; bottom:10px; width:0; border-right:2px dotted #cfd3d8;}

#service .stit_t2
#service .stit_t2 .desc{display: inline-block; margin-left: 10px; padding-left: 10px; font-size: 17px; line-height: 18px; color: #555; font-weight: 400; border-left: 1px solid #ccc;}

.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 14px; 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 .flex4 {  gap:2%; }	
#service .flex4 .item {width:49%; padding:20px 10px; margin-bottom:10px;  border:1px solid #e5e5e5; }
#service .flex4 div.img img {height:80px}
#service .flex4 div.tit {font-size:18px;  padding:5px 0 10px 0; margin-bottom:10px}
#service .flex4 div.txt {font-size:14px; }

#service .flexR6 {max-width:100%; padding:0px 10px; }
#service .flexR6 li.item {width:50%; margin-bottom:20px  }
#service .flexR6 li.item .tit {font-size:18px; margin-top:10px;  }
#service .flexR6 li.item .txt {font-size:15px; }
#service .flexR6 li.item a {border:1px solid #888; padding:8px 30px; border-radius:50px; margin-top:5px; display:inline-block }
#service .flexR6 li.item ul li { padding:7px 0 7px 25px; font-size:15px;  }
#service .flexR6 li.item .num { margin: 40px auto 5px auto; }
#service .flexR6 li.item .num span { top:-30px;font-size:15px;  width:150px; }
#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 .actv-tg-inner{flex-direction: column; align-items: center;}
#service .actv-tg-boxes{flex-direction: column;}

#service .ig-wrap{ flex-wrap:wrap; gap:20px; }
#service .ig-img{ flex:0 0 100%; height:320px; background-position:center top; }
#service .ig-txt{ flex:1 1 100%; }

#service .act-grid li{flex-basis: calc(33.33% - 16px);}

.mgT80 {margin-top:40px}
.mgT50 {margin-top:25px}
.mgT20 {margin-top:10px}
}
@media (max-width: 768px) {	
  #service .act-attention-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  #service .act-card__head{padding:14px 10px;font-size:15px}
  #service .act-card__body{padding:16px 10px;min-height:auto}
  #service .act-card::after{width:30px;height:30px;background-size:16px 16px}

  #service .act-graph-grid{grid-template-columns:1fr}
  #service .act-graph-grid .g{padding:14px 6px}
  #service .act-graph-grid .g:not(:last-child)::after{right:auto; left:10px; right:10px; width:auto; height:0; top:auto; bottom:-8px; border-right:none; border-bottom:2px dotted #cfd3d8;}
}
@media (max-width: 640px) {
#service .activa-grid li{ flex-basis: calc(50% - 12px); }
}
@media (max-width: 480px) {
#service .activa-grid li{ flex-basis: 100%; }
}
@media (max-width: 320px) {
}