@charset "utf-8";

.custom_stepIcon {background-color:#f6f6f6;}
.custom_stepIcon .order_wrap { text-align:center; }
.custom_stepIcon .order_icon ul {display:flex; flex-wrap:wrap; justify-content: space-between;}
.custom_stepIcon .order_icon ul li { position:relative; width: 31%; border:1px solid #ddd; border-radius:15px; background-color:#fff;  }
.custom_stepIcon .order_icon ul li .txtWrap { background-color:#fff;  border-radius:15px;padding:20px 25px 40px;}
.custom_stepIcon .order_icon ul li:hover {box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);}
.custom_stepIcon .order_icon ul li:nth-child(n+4) {margin-top:50px}
.custom_stepIcon .order_icon ul li .font26 {display:inline-block; position:relative; z-index:1;}
.custom_stepIcon .order_icon ul li .font26:after {content:""; position:absolute; bottom:0; left:0; width:0; height:15px; background-color:#0042d05a; z-index:0; transition: width .3s;}
.custom_stepIcon .order_icon ul li:hover .font26:after { width:100%; }
.custom_stepIcon .order_icon ul li p {color:#787878; word-break: keep-all;}

.custom_stepIcon .icon_img { margin-bottom:30px;}
.custom_stepIcon .icon_img img { width:100px; height:100px;}
.custom_stepIcon .order { position:relative; top:-40px; background-color:#073da8; color:#fff; padding:10px 20px; display: inline-block;}

  @media screen and (max-width:768px){
    .custom_stepIcon .order {font-size:1.4rem; padding:7px 15px; }
    .custom_stepIcon .order_icon ul {flex-wrap:wrap;}
    .custom_stepIcon .order_icon ul li { width:48%; margin-bottom:40px; }
    .custom_stepIcon .icon_img {margin-bottom:20px}
    .custom_stepIcon .icon_img img { width:80px; height:80px;}
  }

  @media screen and (max-width:768px){
    .custom_stepIcon .order_icon ul li:nth-child(n+3) {margin-top:20px}
    .custom_stepIcon .iconBox_wrap ul li { width: 100%;}
  }

  @media screen and (max-width:480px){
    .custom_stepIcon .order_icon ul li { width:100%; }
    .custom_stepIcon .order_icon ul li:nth-child(n+1) {margin-top:15px}
  }