/* tablets col-xxl */
@media (max-width: 1400px) {
    .rwd:after{
        content: 'mx1400';
    }
}
/* tablets col-xl */
@media (max-width: 1200px) {
    .rwd:after{
        content: 'mx1200';
    }
}
/* desktops col-lg  */ 
@media (max-width: 992px) {
    .rwd:after{
        content: 'mx992';
    }
    /**/
    .h_banner{
        height: 200px;
        background-position: center bottom;
    }
    .j_class .section-title .title-sub{
        font-size: 28px;
    }
    /**/
    #j_apply .box{
        padding: 20px;
        transform: translateY(0px);
    }
    #apply2 .j_flex{
        display: block;
    }
    #apply2 h1 {
        margin-top: 20px;
    }
    #apply2 #apply-form2 {
        margin: 8% auto 8%;
    }
    /**/
    #j_renewal .box{
        padding: 20px;
        transform: translateY(0px);
    }
    #j_renewal .box h2{
        font-size: 24px;
    }
    #j_renewal .box h2 span{
        display: block;
        padding-left: 0px;
        font-size: 18px;
    }
    #j_renewal .box h3{
        font-size: 20px;
    }
    #j_renewal .box .j_flex{
        flex-direction: column;
    }
    #j_renewal .box .j_flex .j_image{
        width: 100%;
    }
    #j_renewal .box .j_flex .j_text{
        width: 100%;
        margin-top: 30px;
    }
    #j_renewal .box .j_flex .j_text .j_txt p{
        font-size: 16px;
    }
    #j_renewal .box .j_flex .j_text .j_btns{
        display: flex;
        gap: 5px;
        margin-top: 30px;
    }
    #j_renewal .box .j_flex .j_text .j_btns a{
        border: 1px solid #f5c53a;
        padding: 10px;
        font-size: 16px;
    }
    #j_renewal .box .j_flex .j_text .j_btns a img{
        width: 30px;
    }
    #j_renewal .box .j_flex .j_text .j_btns a:hover{
        background-color: #f5c53a;
        color: #fff;
    }
    #j_renewal .box .j_flex .j_text .j_btns a:hover img{
        -webkit-filter:brightness(1000);
    }
    #j_renewal .box .j_info .items{
        width: 100%;
    }
    #j_renewal .box .j_info .items .item{
        font-size: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    #j_renewal .box .j_info .items .item + .item{
        margin-top: 10px;
    }
    #j_renewal .box .j_info .items .item .t{
        width: 100%;
        text-align: left;
    }
    #j_renewal .box .j_info .items .item .c{
        width: 100%;
    }
    #j_renewal .box .j_info .items .item .t span,
    #j_renewal .box .j_info .items .item .c span{
        padding-left: 5px;
    }
    /**/
    #j_about .box{
        padding: 20px;
        transform: translateY(0px);
    }
    #j_about .j_flex{
        flex-direction: column-reverse;
    }
    #j_about .j_flex:nth-of-type(2),
    #j_about .j_flex:nth-of-type(4){
        flex-direction: column-reverse;
    }
    #j_about .j_flex .j_text{
        width: 100%;
    }
    #j_about .j_flex .j_image{
        width: 100%;
    }
    #j_about .vline{
        margin: 50px 0;
    }
    #j_about .j_group{
        margin-top: 0px;
    }
    #j_about .j_group .j_text{
        margin-bottom: 20px;
    }
    #j_about .j_group .items{
        flex-direction: column;
        gap: 10px;
    }
    #j_about .j_group .j_image{
        position: relative;
    }
    #j_about .j_group .items .item{
        width: 100%;
    }
    /**/
    #j_qa .infotxt p:nth-of-type(2){
        font-size: 22px;
    }
    #j_qa .infotxt p:nth-of-type(2) span{
        display: block;
    }
    #j_qa .infotxt p:nth-of-type(2) span:before{
        content: '';
    }
    #j_qa .box{
        padding: 20px;
        transform: translateY(0px);
    }
    #j_qa .subtxt{
        font-size: 16px;
    }
    #j_qa .refer .image{
        gap: 15px;
    }
    #j_qa .refer .image a{
        width: 100%;
    }
    #j_qa .refer .image img{
        width: 100%;
    }
    #j_qa .block-1,
    #j_qa .block-2{
        margin-bottom: 50px;
    }
    /**/
    #apply form .flex{
        display: block;
    }
    #apply #j_contact .htxt{
        text-align: left;
        width: 90%;
        margin: 25px auto;
    }
    #apply #j_contact .htxt span{
        display: none;
    }
}

/* tablets col-md */
@media (max-width: 768px) {
    .rwd:after{
        content: 'mx768';
    }
}

/* phones col-sm */
@media (max-width: 576px) {
    .rwd:after{
        content: 'mx576';
    }    
}