/*-----------------------------------*\
  ##hero
\*-----------------------------------*/

.herobox {
    margin-bottom: 5rem;
}

.mgtop {
    margin-top: 5rem;
}

.mgtop2 {
    transition: all 0.2s ease-in-out;
}

.mgtop2:hover {
    opacity: 0.7;

}

.logobox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 5rem;
}

.tit1 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.casebox1{
    display: flex;
    align-items: center;
    margin: 5rem 5rem;
    gap: 10rem;
}

.casetit1 {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 2rem;
}

.casebox1 p{
    width: 100%;
    font-size: 12px;
    line-height: 26px;
}

.shopimg {
    display: flex;
    justify-content: center;
    margin: 8rem auto;

    transition: all 0.2s ease-in-out;
}

.shopimg:hover {
    opacity: 0.7;

}


/*-----------------------------------*\
  ##sec1
\*-----------------------------------*/

.no1img img {
    max-width: 65px;
}

.sec1textbox {

    text-align: center;
    line-height: 26px;

    font-size: 12px;
}

.hasobox {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5rem;

    margin: 8rem 0rem;
}

.hsbox-le {
    width: 50%;
}

.hsbox-le p{
    font-size: 12px;
    line-height: 26px;
}

.rologobox {
    margin-bottom: 3rem;
}


/*-----------------------------------*\
  ##sec2
\*-----------------------------------*/

.sec2box {
    display: flex;
    flex-direction: column;
    gap: 15rem;

    background-image: url(/html/user_data/img/flow/plane3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    margin-bottom: 12rem;
}

.sec2flbox {
    display: flex;
    align-items: center;
    gap: 10rem;
    
    margin: 2rem 0rem;
}

.sec2flbox p {
    font-size: 12px;
    line-height: 26px;
}

.sec2left {
    width: 50%;
}

.sec2right {
    width: 50%;
}

.sec2spbox{
    width: 80%;
}


/*-----------------------------------*\
  ##sec3
\*-----------------------------------*/


.sec3box {


    margin-bottom: 12rem;
}

.sec3flbox {
    display: flex;
    align-items: center;
    gap: 5rem;
    
    margin: 3rem 0rem 0rem;

}

.sec3flbox p {
    font-size: 12px;
    line-height: 26px;
}

.sec3flbox h2 {
    font-size: 12px;
}

.sec3left {
    width: 50%;

    margin-top: 3rem;
}

.sec3right {
    width: 50%;

}

.sec3spbox{
    width: 50%;
}


/*-----------------------------------*\
  ##sec4
\*-----------------------------------*/

.sec4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 8rem;

    text-align: center;

    margin-bottom: 8rem;
}

.sec4 p {
    font-size: 12px;
}



/*-----------------------------------*\
  ##sec5
\*-----------------------------------*/

.sec5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.sec5 p {
    font-size: 12px;
}



/*-----------------------------------*\
  ##media
\*-----------------------------------*/


@media (max-width: 800px) {
    .hasobox {
        flex-direction: column;

    }

  .hsbox-le {
    width : 80%;
  }

  .sec2box {
    gap : 20rem ;

    margin-bottom: 0rem;
  }

    
    .sec2left {
        width: auto;
    }

    .sec2right {
        width: auto;
    }

    .sec2spbox{
        width: auto;
    }
    
    .sec3flbox {

        flex-direction: column;

        margin: 0rem;
    }

    .sec3spbox {
        width: auto;
    }

    .sec3left {
        width: 90%;
    }

    .sec3right {
        width: 90%;
    }

  .sec3spbox {
    order : 2;
    margin-bottom : 5rem;
  }
}


@media (max-width: 640px) {

    .sec2box {
        gap : 15rem ;
    
      }

}

@media (max-width: 450px) {

    .sec2box {
        gap : 10rem ;
    
      }

}