@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#business .head {text-align:center; width:1000px; margin:0 auto}
#business .head .txt {font-size:18px;  line-height:28px;}
#business .youtube {position: relative; height:0; padding-bottom: 56.25%; margin: 30px 0 }
 #business .youtube iframe {width:1000px; height:562; left:0; }

#business .flexR6 { margin:0 auto; display:flex;  flex-wrap: wrap; justify-content: space-between; padding:60px 0px 0 0; }
#business .flexR6 li.item {  width:18.5%;  position:relative; margin:0px 0;  }

#business .flexR6 li.item .box {padding:15px 15px ; border-radius:10px; background:#fff;
border:1px solid #ccc; text-align:center; transition:all 0.3s; min-height:255px; }

#business .flexR6 li.item .num {width:28px; height:28px; font-size:20px;  border-radius:30px; 
font-weight:bold; margin: 50px auto; background-color:#fff;border:6px solid #555; position:relative; }
#business .flexR6 li.item .num:before {content:""; position:absolute; width:500px; height:5px; left:0px; top:35%; 
background-color:#555;  z-index: -1; }
#business .flexR6 li.item:last-child .num:before {background-color:#fff; }
#business .flexR6 li.item .num span {position:absolute; top:-50px; left:50%; transform:translateX(-50%);
font-size:18px; font-weight:600; color:#ccc;  width:150px; text-align:center; font-family:var(--num)}

#business .flexR6 li.item .tit {font-size:18px; font-family:var(--font1); font-weight:600;  padding:10px 10px; 
background:#f4f5f7; border-radius:10px; margin:20px 0; }
#business .flexR6 li.item .tit span {display:block; font-size:15px; color:#888; font-weight:400}
#business .flexR6 li.item .txt { display:none; font-size:20px;  padding:0 0px 0 0px; font-weight:600; font-family:var(--num); color:#ccc; }
#business .flexR6 li.item a {border:1px solid #888; padding:8px 30px; border-radius:50px; margin-top:5px; display:inline-block }
#business .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;}

#business .flexR6 li.item.highlight .box {  border:1px solid  #f37021;  color: #f37021; transition: 0.3s all   }
#business .flexR6 li.item ul li{color: #333; transition: 0.3s all   }
#business .flexR6 li.highlight.item .txt {color: #f37021; transition: 0.3s all }
#business .flexR6 li.highlight.item .tit {background:#f37021; color:#fff;transition: 0.3s all  }
#business .flexR6 li.highlight.item .tit span {color:#fff; }
#business .flexR6 li.highlight.item ul li {background:url(../img/icon_over.png)no-repeat left 11px; transition:all 0.3s;
background-size:15px; transition: 0.3s all }

#business .flexR6 li.item.highlight .num {border:6px solid #f37021; transition: 0.3s all }
#business .flexR6 li.item.highlight .num span{color: #f37021; transition: 0.3s all  }
#business .flexR6 li.item.highlight .num:before {background:#f37021;transition: 0.3s all  }
#business .flexR6 li.item.highlight:last-child .num:before {background-color:#fff; transition: 0.3s all }
    
/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#business {width:100%; margin:0px auto 0 auto }
#business .head {text-align:center; width:100%; margin:0 auto}
#business .head .txt {font-size:15px;  line-height:22px;}
#business .youtube {position: relative; height:0; padding-bottom: 56.25%; margin: 20px 0}
#business .youtube iframe {width:100%; height:100%; left:0; }

#business .tel {padding:30px 0 40px 0 }
#business .tel div {display:block; }
#business .tel img {max-width:55px !important; }
#business .tel .num {  font-size:22px; line-height:30px;  padding:5px 0 0 10px;  }

#business .flexR6 {max-width:100%; padding:0px 10px; }
#business .flexR6 li.item {padding:20px 0 10px 0;   width:100%;  min-height:auto;margin:10px 0;  }
#business .flexR6 li.item .tit {font-size:18px; margin-top:10px;  }
#business .flexR6 li.item .txt {font-size:15px; }
#business .flexR6 li.item a {border:1px solid #888; padding:8px 30px; border-radius:50px; margin-top:5px; display:inline-block }
#business .flexR6 li.item ul li { padding:7px 0 7px 25px; font-size:15px;  }

#business .flexR6 li.item .box {padding:25px 20px ;  min-height:auto; }
#business .flexR6 li.item .num {width:20px; height:20px; margin: 30px auto; border:5px solid #555; position:relative; }
#business .flexR6 li.item .num:before {content:""; position:absolute; width:0px; height:50px; left:4px; top:36%; 
background-color:#fff;  z-index: -1; border-left:1px dashed #555; }
#business .flexR6 li.item .num span {position:absolute; top:-35px; font-size:18px;  color:#ccc; }
#business .flexR6 li.item.highlight .num:before {background:#fff;transition: 0.3s all; border-left:1px dashed #f37021;  }
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

