@charset "utf-8";

.custom_4icon{}

/*상단 텍스트 부분*/
.custom_4icon .icon4_wrap { position:relative; width:100%; }
.custom_4icon .icon4_wrap .top_icon {text-align:center; margin-bottom:35px;}
.custom_4icon .icon4_wrap .top_icon img { width:100px; height:100px;  }


/*하단 아이콘 부분*/
.custom_4icon .centIcon_box { position:relative; }
.custom_4icon .centIcon_box:after { content:""; position:absolute; bottom:0; left:0; width:100%; height:400px; background-color:#eaeaea; z-index:-1; }
.custom_4icon .centIcon_box ul { display:flex; flex-wrap:wrap; text-align:center; width:100%; margin:0 auto;}
.custom_4icon .centIcon_box ul li { width:22%; margin:0 auto; padding:60px 30px; border:2px solid #eaeaea; border-radius:20px; background-color:#fff;}
.custom_4icon .centIcon_box ul li:hover h4:after {width:100%}

.custom_4icon .centIcon_box ul li h4 { position:relative; font-size:4rem; line-height:1.4em; }
.custom_4icon .centIcon_box ul li h4:after {content:""; position:absolute; bottom:0; left:0; width:0; height:20px; z-index:-1; width:100%}
.custom_4icon .centIcon_box ul li .centIcon { width:130px; height:auto; margin:0 auto 40px; }
.custom_4icon .centIcon_box ul li .centIcon img { width:100%; height:auto; }
.custom_4icon .centIcon_box ul li span { font-size:2rem; line-height:1.4em; }
.custom_4icon .centIcon_box ul li h4 { font-size:4rem; line-height:1.4em; }

.custom_4icon .centIcon_box ul li .vertical_line { position:relative; }
.custom_4icon .centIcon_box ul li .vertical_line::after { content:""; position:absolute; bottom:13px; left:50%; transform: translateX(-50%); width:2px; height:40px; background-color:#c7c7c7}
 

 @media screen and (max-width:1024px){ 

  .custom_4icon .centIcon_box:after { height:740px; }
  .custom_4icon .centIcon_box ul { width:90%;}
  .custom_4icon .centIcon_box ul li { width:45%; margin-bottom:30px; }
  .custom_4icon .centIcon_box ul li span { font-size:1.8rem; }
  .custom_4icon .centIcon_box ul li h4 { font-size:3.4rem; }

  .custom_4icon .centIcon_box ul li .centIcon { width:100px; height:100px; margin:0 auto 30px; }
 }

 @media screen and (max-width:768px){
  .custom_4icon .centIcon_box ul { width:100%; flex-wrap:wrap; }
  
  .centIcon_box ul li span { font-size:1.6rem; }
  .centIcon_box ul li h4 { font-size:3rem; }
  .custom_4icon .centIcon_box ul li .vertical_line::after { bottom:7px; height:30px; }
 }

 @media screen and (max-width:560px){
  .icon4_wrap .company_top_icon img { width:70px; }
  .icon4_wrap .titleArea h3 {font-size:2.1rem;}

  .custom_4icon .centIcon_box ul { width:90%; flex-wrap:wrap; }
  .custom_4icon .centIcon_box ul li { width:100%; max-width:none; margin-bottom:20px; }
  .custom_4icon .centIcon_box ul li:hover {box-shadow:none;}
  .custom_4icon .centIcon_box ul li .centIcon { width:80px; height:80px; margin:0 auto 30px; }
 }