@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;
}

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

/* Headings */
#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:0;}
#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%;}

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

/* Steps: flexR6 */
#service .flexR6 {margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; padding:10px 0;}
#service .flexR6 li.item {width:16%; position:relative; margin:0;}
#service .flexR6 li.item .box {padding:0; background:#fff; border:0 solid #ccc; text-align:center;}
#service .cont {margin-top:80px}
#service .flexR6 li.item .num {width:20px; height:20px; font-size:20px; border-radius:30px; font-weight:bold; margin:50px auto 25px; background:#fff; border:4px solid #ee1c26; position:relative;}
#service .flexR6 li.item .num:before {content:""; position:absolute; width:500px; height:5px; left:0; top:35%; background:#dfdfdf; z-index:-1;}
#service .flexR6 li.item:last-child .num:before {background:#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; background:#f4f5f7; border-radius:10px; margin:20px 0;}
#service .flexR6 li.item .txt {font-size:20px; padding:0; 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 / 15px; line-height:22px; transition:all 0.3s;}
#service .flexR6 li.item ul li {color:#333; transition:0.3s all;}

/* Split: flex */
#service .flex {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:10px 0;}
#service .reverse {flex-direction:row-reverse; margin: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;}

/* Split: flex2 (base) */
#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;}

/* service+style101 */
.style101 h3 {border-bottom:1px solid #ccc;}
.style101 h4 {margin-bottom:6px;}

.style101 .contBox {padding:0;}
.style101 .tit {font-size:20px; padding-bottom:30px; font-weight:600;}

/* Thumbnails row */
.style101 .flex3 {display:flex; flex-wrap:wrap; justify-content:center; padding:0;}
.style101 .flex3 .item {width:12%; margin:0 3px; text-align:center;}
.style101 .flex3 .item img {border:1px solid #ccc;}
.style101 .flex3 .item.on img {border:3px solid #ee1c26;}

/* Content area */
.style101 .cont {padding-top:50px;}

/* flex2 — override layout for variant */
.style101 .flex2 {flex-direction:row-reverse; margin-top:40px; background:transparent;}
.style101 .flex2 .item:first-child {width:30%; text-align:center;}
.style101 .flex2 .item {width:70%; padding:0;}
.style101 .flex2 .item .img span{display:block; width:190px; height:190px; background:#222; margin:0 auto; color:#fff;
 border-radius:50%; padding-top:120px; font-size:20px; background-repeat:no-repeat; background-position:center 30px;}
.style101 .flex2 .item:first-child .img span {background-image:url(../img/ico1.png);}
.style101 .flex2 .item:last-child  .img span {background-image:url(../img/ico2.png);}
.style101 .flex2 .item .txt {padding:0 0 25px;}
.style101 .flex2 .item .txt li span {font-size:16px; position:relative; padding-left:13px; margin-bottom:5px;}
.style101 .flex2 .item .txt li span:before {content:""; width:4px; height:4px; background:#555; position:absolute; left:0; top:12px; border-radius:50%;}

/* Tables (scoped to variant to 방어적) */
.style101 div.table_wrap {font-weight:500;}
.style101 table {border-collapse:collapse; border-spacing:0;}
.style101 table.table_common {border-top:2px solid #555; width:100%; border-bottom:1px solid #555;}
.style101 table.table_common caption {font-size:0; width:0; height:0; text-indent:-9999px; overflow:hidden;}
.style101 table.table_common th,
.style101 table.table_common td {padding:10px 1px; text-align:center; font-size:14px; line-height:25px; font-weight:400;}
.style101 table.table_common th,
.style101 table.table_common td.img_c {text-align:center;}
.style101 table.table_common th {border-bottom:1px solid #555; border-left:1px solid #ccc; background-color:#fdeff0;}
.style101 table.table_common td {border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
.style101 table.table_common td:first-child,
.style101 table.table_common th:first-child {border-left:none;}
.style101 table.table_common tr:last-child td {border-bottom:none;}

.style101 .wd12 h3::before {display: block !important; content: "" !important; height: 21px; width: 4px; background-color: #ee1c26; position: absolute; top: 6px; left: 0px;}
.style101 .wd12 h3 {padding: 0 0 5px 16px !important; margin-bottom : 0 !important; position: relative; font-size: 25px; font-weight: 600;}
.style101 .link-grid {margin-top: 10px !important; display: flex; justify-content: space-between;}


.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 .product-banner h3 {font-size: 24px; padding-left: 140px;}
#service .product-banner .desc {font-size: 14px; padding-right: 10px;}
#service .product-banner {background-size: auto 70px;}

.style101 .link-grid {flex-direction: column; gap: 15px;}
.style101 .link-card {width: 100%;}

.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) {
}