@charset "utf-8";

/* sec01 */
.sec01 ul { position: relative; display: flex; justify-content: space-between; align-items: stretch; }
.sec01 ul::before { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; display: block; content: "";
    background-image: linear-gradient(to right,var(--border-color) 4px, rgba(255,255,255,0) 0%); 
    background-position: bottom; background-size: 15px 4px; background-repeat: repeat-x; }
.sec01 ul > li { position: relative; margin: 0 70px; padding: 60px 0; width: 33%; border-radius: 10px; background: #f7f7f7; text-align: center; }
.sec01 ul > li:first-child { margin-left: 0; }
.sec01 ul > li:last-child { margin-right: 0; }
.sec01 ul > li::before { position: absolute; top: 50%; right: -95px; transform: translate(0%,-50%); width: 50px; height: 50px; border-radius: 50%;  
    background: #f7f7f7 url(/theme/jahye/images/ico/arr_next_g9e.svg) no-repeat center/30px; display: block; content: ""; }
.sec01 ul > li:last-child:before { display: none; } 
.sec01 ul > li > .ico { margin: 0 auto; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; background: #fff; }
.sec01 ul > li > .ico > img { display: inline-block; width: 100%; height: 34px; }
.sec01 ul > li .title { margin: 20px 0 5px; font-size: 17px; font-weight: 700; color: var(--sub-01); }
.sec01 ul > li .text { font-size: 16px; font-weight: 400; color: var(--gray-33); }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){

   /* sec01 */
    .sec01 ul::before { height: 3px; background-image: linear-gradient(to right,var(--border-color) 3px, rgba(255,255,255,0) 0%); background-size: 10px 3px; }
    .sec01 ul > li { margin: 0 20px; padding: 40px 0; }
    .sec01 ul > li::before { display: none; } 
    .sec01 ul > li > .ico { width: 70px; height: 70px; line-height: 70px; }
    .sec01 ul > li > .ico > img { height: 26px; }
    .sec01 ul > li .title { font-size: 15px; }
    .sec01 ul > li .text { font-size: 14px; }

}

/* 767px or less */
@media all and (max-width : 767px){

    /* sec01 */
    .sec01 ul { margin: 0px; display: block; overflow: hidden; }
    .sec01 ul::before { display: none; }
    .sec01 ul::after { position: absolute; z-index: -1; top: 0; left: 45px; width: 0px; height: 100%; display: block; content: "";
        border: 1px dashed var(--border-color); }
    .sec01 ul > li { margin: 30px 0px; padding: 30px 0; width: 100%; display: flex; justify-content: flex-start; align-items: center; }
    .sec01 ul > li:first-child { margin-top: 0; }
    .sec01 ul > li:last-child { margin-bottom: 0; }
    .sec01 ul > li > .ico { margin: 0 20px; flex-shrink: 0; width: 55px; height: 55px; line-height: 55px; }
    .sec01 ul > li > .ico > img { height: 24px; }
    .sec01 ul > li > .text_wrap {  }
    .sec01 ul > li .title { margin: 0 0 3px; font-size: 14px; text-align: left; }
    .sec01 ul > li .text { font-size: 14px; text-align: left; }

}