@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 .ajtd-section{background-color: #f1f0e8; max-width: 1200px; margin: 0 auto; padding: 40px 20px; font-family: 'Pretendard' sans-serif;}
#service .ajtd-inner{display: flex; max-width: 1200px; margin: 0 auto; gap: 40px; flex-wrap: wrap;}
#service .ajtd-image img{max-width: 500px; height: auto;}
#service .ajtd-text{flex: 1; min-width: 300px;}
#service .ajtd-title{font-size: 18px; font-weight: bold; margin-bottom: 30px; line-height: 1.6;}
#service .ajtd-boxes{display: flex; gap: 30px; flex-wrap: wrap;}
#service .ajtd-box{flex: 1; min-width: 250px; background-color: white; padding: 15px; border-radius: 8px; font-size: 15px;}
#service .ajtd-box h4{margin-bottom: 10px; font-weight: 600; color: #333;}
#service .ajtd-box ul{list-style: none; padding-left: 0; margin: 0;}
#service .ajtd-box li{position:relative; padding-left: 18px; margin-bottom: 6px;}
#service .ajtd-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 .ajtd-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 .nc-wrap{display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; justify-content: center; align-items: center; align-content: center; gap: 60px;}
#service .nc-wrap img{display: block; max-width: 480px; height: auto;}
#service .divider{width: 0; height: 200px; border-left: 2px dotted #888; margin: 0 20px;}

#service .table-grid{ max-width:1200px; margin:0 auto; display:grid !important; grid-template-columns:repeat(4, minmax(250px,1fr)); gap:24px; align-items:start;}
#service .table-grid .tbl { width:100%; table-layout:auto; border-collapse:separate; border-spacing:0;}
#service .table-grid .tbl thead th{ background:#f3f5f9; font-weight:700; text-align:center; padding:10px 12px;}
#service .table-grid .tbl th,
#service .table-grid .tbl td{ border-top:1px solid #eee; padding:10px 12px;}
#service .table-grid .tbl tbody td:first-child{ width:65%; text-align:left; }
#service .table-grid .tbl tbody td:last-child { width:35%; text-align:right; }
#service .table-grid .tbl-card{ border:1.5px solid #f08a8a; border-radius:10px; overflow:hidden; }
#service .table-grid .tbl-tittle{ text-align:center; font-weight:700; padding:10px 12px; border-bottom:1px solid #f0f0f0; }

#service .tbl-card{border: 1px solid #f08a8a; border-radius: 10px; overflow: hidden;}
#service .tbl-tittle{text-align: center; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; font-size: 18px;}
#service .tbl{width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; word-break: break-word;}
#service .tbl thead th{background: #f3f5f9; font-weight: 600; text-align: center; padding: 10px 12px;}
#service .tbl td,
#service .tbl th{border-top: 1px solid #eee; padding: 10px 12px;}
#service .tbl td:last-child,
#service .tbl th:last-child{text-align: right;}

#service .strong{font-weight: 700; font-size: 18px; display: block; margin: 8px; text-align: center;}


#service .table-wrap {margin: 18px 0; text-align: center;}
#service .table-wrap {overflow-x: auto;}
#service .table-frame {display: inline-block; border: 2px solid #e60012; border-radius: 8px; overflow: hidden; background: #fff;}
#service .ajitide-table {border-collapse: separate; border-spacing: 0; min-width: 520px; text-align: center;}
#service .ajitide-table thead th {background: #f3f5f8; font-weight: 700;}
#service .ajitide-table th,
#service .ajitide-table td{padding:12px 18px; border-right:1px solid #e8eaee; border-bottom:1px solid #e8eaee;}
#service .ajitide-table th:last-child,
#service .ajitide-table td:last-child{border-right:0;}
#service .ajitide-table tbody tr:last-child td{ border-bottom:0; }
#service .table-caption {margin-top: 10px; font-size: 13px; color: #666;} 


/* AJITIDE-핵산 물리적 특성4 */
#service .sec { margin-bottom:30px; }
#service .sec-top { display:flex; justify-content:center; margin-top: 50px;}
#service .sec-main {display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; text-align: left;}
#service .aji-table-holder,
#service .aji-table-frame {text-align: center;}

#service .graph-frame { position:relative; display:inline-block; }
#service .graph-frame img { display:block; max-width:100%; height:auto; }
#service .aji-desc { margin-top:30px; line-height:1.7; color:#333; }
#service .aji-col-right{ display:flex; flex-direction:column; gap:44px; }
#service .aji-col-right .aji-table-frame{ margin:0; }
#service .aji-col-right .aji-table-frame + .aji-table-frame { margin-top:26px; }
#service .aji-table-frame{max-width: 820px; margin: 0 auto 26px; position:relative; border:2px solid #e60012; border-radius:8px; overflow: visible;}

#service .aji-tbl{width: 100%; border-collapse:separate; border-spacing:0; min-width:520px; text-align:center; table-layout:fixed;}
#service .aji-tbl thead th{ background:#f3f5f8; font-weight:700; }
#service .aji-tbl th, 
#service .aji-tbl td{padding:12px 16px; border-right:1px solid #e8eaee; border-bottom:1px solid #e8eaee; word-break:keep-all; text-align: center !important;}
#service .aji-tbl th:last-child, #service .tbl td:last-child{ border-right:0; }
#service .aji-tbl tbody tr:last-child td{ border-bottom:0; }

#service .cap{position:absolute; z-index: 1; font-size:13px; color:#666; line-height:1.4; white-space:nowrap; background: #fff; padding: 0 6px; text-align: left;}
#service .cap.cap-tr{ top:-20px; right: 8px; }
#service .cap.cap-bc{ left:50%; bottom:-22px; transform:translateX(-50%); text-align: center;}
#service .aji-table-frame{margin-top: 24px; margin-bottom: 26px; }

.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 .ajtd-inner{flex-direction: column; align-items: center;}
#service .ajtd-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 .nc-wrap{flex-direction: column;}
#service .nc-wrap img{margin-top: 30px;}
#service .divider{width: 50%; height: 0; border-left: none; border-top: 2px dotted #888; margin: 10px 0;}

#service .aji-tbl{ min-width:480px; }

#service .table-grid{grid-template-columns:repeat(2, minmax(250px,1fr));}

.mgT80 {margin-top:40px}
.mgT50 {margin-top:25px}
.mgT20 {margin-top:10px}
}
@media (max-width: 768px) {	
  #service .sec-main{ grid-template-columns:1fr; }
  #service .aji-table-frame{ max-width:100%; }
  #service .aji-tbl{ min-width:100%; } /* 작은 화면에서는 100% */
  #service .cap.cap-tr{ top:-18px; font-size:12px; }
  #service .cap.cap-bc{ bottom:-18px; font-size:12px; }

  #service .sec-top .table-frame{ margin-top:26px; margin-bottom:26px; }
  #service .col-right .table-frame{ margin-top:22px; margin-bottom:22px; }
}
@media (max-width: 640px) {
  #service .table-grid{ grid-template-columns:1fr; }
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}