@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 .msg-row{display: flex; align-items: flex-start; gap: 30px; margin-bottom: 40px;}
#service .msg-img{max-width: 200px; height: auto; display: block;}
#service .msg-txt{flex: 1; font-size: 15px; line-height: 1.6;}
#service .msg-text .msg-title{font-size: 17px; font-weight: bold; margin-bottom: 10px;}

#service .food-wrapper{max-width: 1200px; margin: 0 auto;}
#service .food-group{display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; width: 100%; }
#service .food-group img{display: block; height: auto; width: auto; max-height: 260px; object-fit: contain;}

#service .glu-section{background-color: #f1f0e8; padding: 40px 20px; font-family: 'Pretendard' sans-serif;}
#service .glu-inner{display: flex; max-width: 1200px; margin: 0 auto; gap: 40px; flex-wrap: wrap;}
#service .glu-image img{max-width: 500px; height: auto;}
#service .glu-text{flex: 1; min-width: 300px;}
#service .glu-title{font-size: 18px; font-weight: bold; margin-bottom: 30px; line-height: 1.6;}
#service .glu-boxes{display: flex; gap: 30px; flex-wrap: wrap;}
#service .glu-box{flex: 1; min-width: 250px; background-color: white; padding: 15px; border-radius: 8px; font-size: 15px;}
#service .glu-box h4{margin-bottom: 10px; font-weight: 600; color: #333;}
#service .glu-box ul{list-style: none; padding-left: 0; margin: 0;}
#service .glu-box li{position:relative; padding-left: 18px; margin-bottom: 6px;}
#service .glu-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 .glu-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 .proc-msg{display: flex; flex-wrap: wrap; gap: 30px 20px; justify-content: space-between; max-width: 1200px; margin: 0 auto;}
#service .proc-item{display: flex; width: calc(50% - 10px); align-items: flex-start; gap: 15px;}
#service .proc-item img{width: 250px; flex-shrink: 0;}
#service .proc-item .text-box{flex: 1;}
#service .step-title{font-weight: 600; font-size: 16px; margin-bottom: 5px;}
#service .step-desc{font-size: 14px; line-height: 1.4;}

.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 .msg-row{flex-direction: column; align-items: center; text-align: center;}
#service .msg-text{margin-top: 20px;}

#service .food-wrapper{flex-direction: row;}
#service .food-group{flex-wrap: wrap;}
#service .food-group img:nth-child(1){width: 100%; height auto;}
#service .food-group img:nth-child(2), 
#service .food-group img:nth-child(3){width: 48%; height: 150px; object-fit: contain;}

#service .glu-inner{flex-direction: column; align-items: center;}
#service .glu-boxes{flex-direction: column;}

#service .proc-item{width: 100%; flex-direction: column; align-items: flex-start;}
#service .proc-item img{width: 100%; max-width: 100%; height: auto;}

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