@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 .cap-wrap{max-width: 1200px; margin: 0 auto; padding: 24px; border: 5px solid #dcdcdc; border-radius: 9999px; box-sizing: border-box; display: flex; gap: 20px; align-items: center; justify-content: space-between;}
#service .cap-img{display: block; height: auto; object-fit: contain; flex: 1 1 0; min-width: 0;} 
 
#service .taste-wrap{max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; box-sizing: border-box; color: #222; line-height: 1.75;}
#service .taste-lead{font-size: clamp(16px, 1.6vw ,20px); font-weight: 500; margin: 0 0 18px;}
#service .taste-lead .em{color: #ee1c261; font-weight: 800; font-size: 1.15em;}
#service .figure{margin: 12px auto 36px; text-align: center;}
#service .figure img{width: 100%; max-width: 1000px; height: auto; display: inline-block;}
#service .taste-grid{display: grid !important; grid-template-columns: 1fr 1fr; gap: 36px;}
#service .taste-grid .col{min-width: 0;}
#service .taste-grid p{margin: 0 0 14px;}

#service .ti-section{max-width: 1200px; margin: 0 auto; padding: 16px 20px 32px; box-sizing: border-box;}
#service .ti-section .ti-grid-three{display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important;}
#service .ti-section .ti-grid-four{display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important;}
#service .ti-section .ti-card{ margin: 0; }
#service .ti-section .ti-card img{width: 100%; height: auto; display: block;}
#service .ti-top{display: flex; gap: 24px; align-items: center; background: #fff8cf; border: 1px solid #eadb8e; border-radius: 10px; padding: 24px;}
#service .ti-top .txt{flex: 1 1 420px; min-width: 0; line-height: 1.7;}
#service .ti-top .ti-lead{font-size: 18px; margin: 0 0 8px;}
#service .ti-top .graph{flex: 0 1 560px; min-width: 0;}
#service .ti-top .graph img{width: 100%; height: auto; display: block;}
#service .ti-grid{display: grid; gap: 24px;}
#service .ti-grid.three{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
#service .ti-grid.four { display: grid; grid-template-columns: repeat(4, 1fr); }
#service .ti-card{margin: 0;}
#service .ti-card img{width: 100%; height: auto; display: grid;}

.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 .cap-wrap{flex-wrap: wrap; justify-content: center; gap: 12px;}
#service .cap-img{height: 12px;}

  #service .ti-section .ti-grid.four{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}

.mgT80 {margin-top:40px}
.mgT50 {margin-top:25px}
.mgT20 {margin-top:10px}
}
@media (max-width: 768px) {	
  #service .taste-grid{grid-template-columns: 1fr; gap: 24px;}
  #service .taste-figure{margin: 10px auto 24px;}
  #service .ti-top{flex-direction: column; align-items: flex-start;}
  #service .ti-top .txt{ order: 1; width: 100%; }
  #service .ti-top .graph{ order: 2; width: 100%; }
  #service .ti-grid.three{ grid-template-columns: 1fr; }
  #service .ti-grid.four { grid-template-columns: repeat(2, 1fr); }
  #service .ti-section{ padding: 12px 16px 24px; }
  #service .ti-section .ti-grid.three{grid-template-columns: 1fr !important;}
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}