@charset "UTF-8";
/*-----------------------
 overRide
 -----------------------*/
#headerWrapper{
    min-height: inherit !important;
}


/*-----------------------
 #processWrapper
 -----------------------*/
#processWrapper{
    position: relative;
    background-color: #fff;
    line-height: 1.8;
    padding-top: 80px;
    padding-bottom: 25px;
    text-align: center;
}

#processWrapper section[data-process="textSection"]{
    text-align: left;
}

#processWrapper section[data-process="textSection"] h3{
    font-size: 18px;
    padding-top: 25px;
    padding-bottom: 25px;
    letter-spacing: 1px;
    line-height: 1.4;
    text-align: center;
}

#processWrapper section p[data-process="text"]{
    padding-top: 15px;
    /*padding-bottom: 15px;*/
    line-height: 1.8;
    text-align: justify;
    clear: both;
}

#processWrapper section p[data-process="text"] span{
    display: block;
    font-size: 14px;
    padding-bottom: 10px;
}

#processWrapper section[data-process="textSection"] aside{
    display: block;
    font-size: 14px;
    color: #45b6bd;
    padding-bottom: 10px;
}

#processWrapper section p[data-process="link"]{
    display: inline-block;;
}


#processWrapper figure{
    position: relative;
    padding-top: 45px;
    padding-bottom: 10px;
}

/*#processWrapper figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(161, 215, 221, 0.3);
    transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    mix-blend-mode: screen;
    z-index: 500;
}*/

#processWrapper figure img{
    width: 400px;
    border-radius: 10px;
    float: left;
}


#processWrapper section[data-process="chartSection"]{
    padding-top: 20px;
}

#processWrapper section div[data-process="chart"]{
    background-color: #ccc;
    margin-bottom: 50px;
    position: relative;
}

#processWrapper section div[data-process="chart"] h3{
    padding-top: 13px;
    padding-bottom: 8px;
    font-size: 18px;
    line-height: 1.8;
}


#processWrapper section div[data-process="chart"] span{
    display: inline-block;
    background-color: #fff;
    font-size: 11px;
    border: solid 1px;
    border-radius: 10px;
    margin-top: 20px;
    padding: 5px 15px 5px 15px;
}

#processWrapper section div[data-process="chart"] p{
    font-size: 13px;
    line-height: 1.8;
    padding-bottom: 20px;
}


#processWrapper section div[data-process="chart"] aside{
    position: absolute;
    bottom: -44px;
    left: 50%;
    transform: translate(-50%,0);
}

#processWrapper section div[data-process="chart"] aside i{
    display: inline-block;
    width: 35px;
    height: 35px;
    font-size: 25px;
    border-radius: 50%;
    padding: 6px 9px 9px 9px;
    background-color: #F7F7F7;
    color: #3E3A39;
}

#processWrapper section div.chart_blue{
    background-color: #DEEAF7;
}
#processWrapper section div.chart_green{
    background-color: #EAF5F1;
}
#processWrapper section div.chart_yellow{
    background-color: #FEE89E;
}



@media (min-width: 768px){
    #processWrapper{
        padding-top: 80px;
        padding-bottom: 50px;
    }
    #processWrapper section[data-process="textSection"]  h3{
        font-size: 23px;
    }
    #processWrapper section p[data-process="text"]{
        line-height: 2;
        padding-top: 20px;
    }
    #processWrapper section p[data-process="text"] span{
        display: block;
        font-size: 15px;
        padding-bottom: 15px;
    }
    #processWrapper section div[data-process="chart"] h3{
        font-size: 20px;
    }

}

@media (min-width: 992px){
    #processWrapper h2{
        font-size: 28px;
    }
    #processWrapper section[data-process="chartSection"]{
        padding-left: 30px;
        padding-top: 0px;
    }

}

@media (min-width: 1200px){
    #processWrapper section[data-process="chartSection"]{
        padding-left: 45px;
    }

}