@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 {width:100%; background:#EFF2F7; padding:0px }

#business .flexC3 {max-width:100%; margin:0 auto; display:flex;  flex-wrap: wrap; justify-content: space-between; padding:0px 0px; 
margin-bottom:3px; gap:3px }
#business .reverse {flex-direction: row-reverse;}
#business .flexC3 .item{width:calc(33.333333% - 2px); color:#fff; position: relative}
#business .flexC3 .item div.cont{height:450px; background:#ccc; margin-bottom:3px; position: relative;
background-position:center; background-repeat:no-repeat; background-size:100%; transition:all 0.5s ease; overflow:hidden }
#business .flexC3 .item div.cont div.tit {position:absolute; bottom:40px; width:100%;text-align: center; font-size:35px; font-weight:600; color:#383838;}
#business .flexC3 .item div:last-child {margin-bottom:0; }
#business .flexC3 .item:first-child {background:#222;}
#business .flexC3 .item div.head  {position:absolute; top:50%; transform:translateY(-50%); padding:0 80px}
#business .flexC3 .item div.head .tit  {font-size:35px; line-height:45px; font-weight:600; }
#business .flexC3 .item div.head .txt{font-size:16px; line-height:30px;  padding:20px 0 }
#business .flexC3 .item div.head .btn a {display:block; margin:30px 0 20px 0; width:210px; border:3px solid #fff; padding:10px 10px 13px 30px ; 
border-radius:50px;font-size:18px; font-weight:600; font-family:var(--num); transition:0.3s all;
background-image:url(../../../common/img/next_wh.png); background-repeat: no-repeat; background-position:98% center }
#business .flexC3 .item div.head .btn a:hover {background-color:#fff; color:#333; 
background-image:url(../../../common/img/next_bl.png);}

#business .flexC3 .item div.cont a{display:block; overflow:hidden; width:100%; height:100%;}
#business .flexC3 .item div.cont a:hover {color:#fff;}
#business .flexC3 .item div.cont:hover{background-size:110% auto;}
#business .flexC3 .item div.bg1 {background-image: url(../img/img1.jpg)}
#business .flexC3 .item div.bg2 {background-image: url(../img/img2.jpg)}
#business .flexC3 .item div.bg3 {background-image: url(../img/img3.jpg)}
#business .flexC3 .item div.bg4 {background-image: url(../img/img4.jpg)}
#business .flexC3 .item div.cont_cover {width:100%; height:100%; opacity: 0; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden;}
#business .flexC3 .item div.bg1 .cont_cover {background-image: url(../img/img1_cover.jpg);}
#business .flexC3 .item div.bg2 .cont_cover {background-image: url(../img/img2_cover.jpg);}
#business .flexC3 .item div.bg3 .cont_cover {background-image: url(../img/img3_cover.jpg);}
#business .flexC3 .item div.bg4 .cont_cover {background-image: url(../img/img4_cover.jpg);}
#business .flexC3 .item div.cont:hover .cont_cover {opacity: 1;}
#business .flexC3 .item div.cont:hover div.tit {color: white;}
#business .flexC3 .item div.cont_cover p {color: #fff;text-align:center; font-size: 20px;font-weight: 400; padding-top: 160px;}

#business .flexC3 li.box {padding:30px ;  background-color: #fff;  width:23%; border-radius:10px; min-height:200px;
position:relative; margin:20px 0; transition: background 0.3s; background-position:90% 80%; background-repeat:no-repeat;
background-size:70px}
#business .flexC3 li .tit {font-size:25px; font-family:var(--font1); font-weight:600;  margin-top:10px;  }
#business .flexC3 li.box .txt {font-size:20px; padding:0 0px 0 0px; font-weight:500; font-family:var(--font2); color:var(--mainColor);}
#business .flexC3 li a {border:1px solid #888; padding:8px 30px; border-radius:50px; margin-top:5px; display:inline-block }

#business .flexC3 li.ico1 {background-image:url(../img/ico1.png); }
#business .flexC3 li.ico2 {background-image:url(../img/ico2.png); }
#business .flexC3 li.ico3 {background-image:url(../img/ico3.png); }
#business .flexC3 li.ico4 {background-image:url(../img/ico4.png); }
#business .flexC3 li.ico5 {background-image:url(../img/ico5.png); }
#business .flexC3 li.ico6 {background-image:url(../img/ico6.png); }
#business .flexC3 li.ico7 {background-image:url(../img/ico7.png); }
#business .flexC3 li.ico8 {background-image:url(../img/ico8.png); }

#business .flexC3 li.highlight.ico1 {background-image:url(../img/ico1_over.png); }
#business .flexC3 li.highlight.ico2 {background-image:url(../img/ico2_over.png); }
#business .flexC3 li.highlight.ico3 {background-image:url(../img/ico3_over.png); }
#business .flexC3 li.highlight.ico4 {background-image:url(../img/ico4_over.png); }
#business .flexC3 li.highlight.ico5 {background-image:url(../img/ico5_over.png); }
#business .flexC3 li.highlight.ico6 {background-image:url(../img/ico6_over.png); }
#business .flexC3 li.highlight.ico7 {background-image:url(../img/ico7_over.png); }
#business .flexC3 li.highlight.ico8 {background-image:url(../img/ico8_over.png); }

#business .flexC3 li.highlight.box {  background-color: var(--mainColor);  color: white;    }
#business .flexC3 li.highlight.box h3,
#business .flexC3 li.highlight.box .txt{color: #fff;   }
    
/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1500px) {
#business .flexC3 .item div.cont {height:350px;}
#business .flexC3 .item div.cont_cover p { padding-top: 80px;}
}
@media (max-width: 1023px) {
#business {width:100%;  }
#business .head  {font-size:25px; line-height:35px}
#business  .head_txt {font-size:16px; line-height:25px;  margin:20px 0 20px 0;}

#business .flexC3 .item{width:calc(50% - 1.5px); color:#fff; position: relative}
#business .flexC3 .item div.cont{height:250px; background-size:cover; }
#business .flexC3 .item:first-child {height:380px; width:100%; }
#business .flexC3 .item div.head  { padding:0 20px}
#business .flexC3 .item div.head .tit  {font-size:25px; line-height:35px;  }
#business .flexC3 .item div.head .txt{font-size:13px; line-height:20px;  padding:20px 0 }
#business .flexC3 .item div.head .btn a { margin:10px 0 10px 0; padding:6px 0px 6px 20px ;font-size:14px; width:170px; line-height:24px; }
#business .flexC3 .item div.cont div.tit {position:absolute; bottom:25px; left:25px; font-size:18px; font-weight:500}
#business .flexC3 .item div.cont:hover{background-size:cover}

}
@media (max-width: 768px) {
	#business .flexC3 .item div.cont_cover p {font-size: 14px;}
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
	#business .flexC3 .item div.cont:hover .cont_cover {opacity: 0;}
	#business .flexC3 .item div.cont:hover div.tit {color:#000;}
}
@media (max-width: 320px) {
}