@charset "UTF-8";
@font-face {
    font-family: 'Hardworking';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_06@1.0/Hardworking.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.page-content { }

.sec-tit{
    text-align:center;
}

.man-process-wrap{
    position:relative;
    padding:1rem;
    background-color:#f6f6f6;
    border-width:6px;
    border-style:groove;
    border-color:#dddddd #efefef;
    border-radius:16px;
}

.man-process-outer {
  width: 80%;
  max-width:1000px;
  padding: 0px 30px 100px 30px;
  display:flex;
  margin:0 auto;
  flex-direction:column;
  --border-radius-size:150px;
  --border-width:5px;
  --dot-size:12px;
  --man-item-width:200px;
}

.man-process-inner{
    flex:1;
    display:flex;
    position:relative;
    justify-content:space-around;
}

.man-process-inner:before{
    content:'';
    position:absolute;
    height:100%;
    width:100%;
    border:var(--border-width) solid #dedede;
    border-radius:var(--border-radius-size);
}
.man-process-inner:nth-of-type(1):before{
    width:calc(100% - var(--border-radius-size));
    left:0;
    border-width:0 0 var(--border-width) 0;
    border-radius:0;
}
.man-process-inner:nth-of-type(2):before{
    width:calc(100% - var(--border-radius-size));
    right:0;
    border-width:var(--border-width) var(--border-width) var(--border-width) 0;
    border-radius:0 var(--border-radius-size) var(--border-radius-size) 0;
    margin-top:calc(-1 * var(--border-width));
}
.man-process-inner:nth-of-type(3):before{
    width:calc(100% - var(--border-radius-size));
    left:0;    
    border-width:var(--border-width) 0 var(--border-width) var(--border-width);
    border-radius:var(--border-radius-size) 0 0 var(--border-radius-size);
    margin-top:calc(-1 * (var(--border-width) * 2));        
}

.man-process-item{
    position:relative;
    padding:35px 0 0 0;
    flex: 1 1 var(--man-item-width);
    max-width: var(--man-item-width);
    min-width: 120px;
    aspect-ratio:1/1;
    z-index:1;
}
.man-process-icon{
    width:100%;
    border-radius:var(--border-width);
    position:relative;
    padding-top:25px;
    z-index:1;
}
.man-process-icon > img{
    width:100% !important;
    transition:all 0.5s;
    transform:scale(0.9);
}

.man-process-item:hover .man-process-icon > img{
    transform:scale(1.1);
    transition:all 0.5s;
}

.man-process-item:hover .man-process-title{
    color:#b21023;
}
.man-process-item:hover .man-process-icon:before{
    background-color:#b21023;
}

.man-process-title{
    width:100%;
    position:absolute;
    left:0%;
    font-weight:600;
    text-transform:uppercase;
    -webkit-text-size-adjust: none;    
}
.man-process-title > span{
    display:block;
    position:relative;
    text-align:center;
    padding:10px;
}
.man-process-icon:before{
    position:absolute;
    content:'';
    bottom:calc(-1 * ( (var(--dot-size) / 2) - (var(--border-width) / 2) ) );
    width:var(--dot-size);
    height:var(--dot-size);
    background-color:#242424;
    border-radius:50%;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
}

[class*="man-position-"]{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    padding-top:0px;
}
[class*="man-position-"] .man-process-icon{
    padding-top:25px;
}
.man-position-right{right:calc( -1 * var(--man-item-width));}
.man-position-left{left:calc( -1 * var(--man-item-width));}

.man-position-left .man-process-icon:before{
    top:50%;
    transform:translateY(-50%);
    left:initial;
    right:calc(-1 * ( (var(--dot-size) / 2) - (var(--border-width) / 2) ));
}
.man-position-right .man-process-icon:before{
    top:50%;
    transform:translateY(-50%);
    left:calc(-1 * ( (var(--dot-size) / 2) - (var(--border-width) / 2) ));
}

.man-process-inner:nth-of-type(1) .man-process-icon:before{bottom:calc(-1 * (var(--border-width) / 2));}
.man-process-inner:nth-of-type(2) .man-process-icon:before{bottom:calc(var(--border-width) / 2);}
.man-process-inner:nth-of-type(3) .man-process-icon:before{bottom:calc(var(--border-width));}

.man-process-inner:nth-of-type(3):after{
    position:absolute;
    content:'';
    bottom:3px;
    right:calc( var(--border-radius-size) - 15px);
    width:0; height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:30px solid #dedede;
}

.img_375_box{
    display:none;
}

@media(max-width:1200px){
    .man-process-outer {
      width: 60%;
      --border-radius-size:150px;
      --border-width:5px;
      --dot-size:12px;
      --man-item-width:200px;
    }
}


@media(max-width:880px){
    .man-process-wrap{
    
    }
    .man-process-outer {
        zoom:0.7;
    }
    .man-process-icon{
        padding-top:0;
    }

}

@media(max-width:768px){
    .man-process-outer {
        zoom:0.6;
    }
    .man-process-outer{
        width:95%;
    }
    [class*="man-position-"]{
        position:relative;
        top:inherit;
        left:inherit;
        right:inherit;
        transform:inherit;
    }
    .man-process-inner:nth-of-type(2){
        /*flex-direction:row-reverse;*/
    }
    .man-process-inner:nth-of-type(3):after{
        display:none;
    }
    .man-process-inner:before{
        display:none !important;
    }

    [class*="man-position-"] .man-process-icon:before {
        position: absolute;
        content: '';
        bottom: calc(-1 * ((var(--dot-size) / 2) - (var(--border-width) / 2))) !important;
        width: var(--dot-size)  !important;
        height: var(--dot-size)  !important;
        background-color: #242424;
        border-radius: 50%;
        left: 50%  !important;
        top:initial;
        transform: translateX(-50%)  !important;
        z-index: 1;
    }
    
    .man-process-icon{
        text-align:center;
    }
    .man-process-icon > img{
        width:80% !important;
        margin:0 auto !important;
    }
    .man-process-item:after{
        content:'\e5c8';
        position:absolute;
        top:50%;
        font-size:2rem;
        font-family:'Material Symbols Outlined','Material Icons';
        transform:translateY(-20%);
        right:-2rem;
    }
    .man-process-outer{
        counter-reset: num;
    }
    .man-process-item:before{
        counter-increment: num;
        content: counter(num); 
        position:absolute;
        top:20%;
        font-size:1rem;
        font-weight:600;
        left:5px;
        z-index:2;
        padding:3px 0;
        width:40px;
        text-align:center;
        background-color:#333333;
        color:#ffffff;
        display:none;
    }
    
    .man-process-inner:nth-of-type(2) .man-process-item:after {
        content: '\e5c4';
        
    }
    
    .man-process-outer {
        display:none !important;
        -webkit-text-size-adjust: none !important;
        zoom:0.4;
        width:98%;
    }
    
    .img_375_box{
        display:block;
        width:100%;
        text-align:center;
    }
}

@media(max-width:375px){
    .man-process-wrap{
        padding-left:0;
    }
    .man-process-outer {
        display:none !important;
        -webkit-text-size-adjust: none !important;
        zoom:0.4;
        width:98%;
    }
    
    .img_375_box{
        display:block;
    }
}