/*section-app1-------------------------
-------------------------------------*/
.section {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.section-app1 {
    background-image: url(../img/application/p1.png);
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: 60% top;
}

.box-pic-1 {
    z-index: 1;
    margin-top: 0rem;
}

.box-pic-1 img {
    width: 80%;
}

.table tr td:not(:last-child),
.table th:not(:last-child) {
    border-right: solid 1px var(--bs-body-color);
}

.tbline {
    border-bottom: solid 1px var(--bs-body-color);
}

.tbsp {
    color: var(--sub-color);
    background-color: var(--bs-body-color);
    font-weight: bold;
}

.table tr.tbsp td:not(:last-child),
.table tr.tbsp th:not(:last-child) {
    border-right: solid 1px var(--sub-color);
}

@media screen and (min-width: 768px) {

    .section {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .box-pic-1 img {
        width: 100%;
    }

    .section-app1 {
        background-size: 30% auto;
        background-position: 30% top;
    }


}

@media screen and (min-width: 950px) {
    .box-pic-1 {
        margin-top: -6rem;
    }

}

@media screen and (min-width: 1024px) {
    .section {
        padding-left: 10rem;
        padding-right: 10rem;
    }

}

@media screen and (min-width: 1360px) {
    .section-app1 {
        background-size: 30% auto;
        background-position: 40% top;
    }

}

/*section-app2-----------------------------
-----------------------------------------*/
.section-app2{
    margin-top: 1.5rem;
}
.col-app2__L{
    flex:0 0 auto;
    width: 100%;
    max-width: 250px;
}
.col-app2__R{
    flex:0 0 auto;
    width: 100%;
}
@media screen and (min-width:768px) {
    .col-app2__L{
        width: 300px;
    }
    .col-app2__R{
        width: calc(100% - 300px);
    }
}
@media screen and (min-width: 1600px) {
    .section-app2{
        margin-top: -12rem;
    }
    .col-app2__L{
        flex:0 0 auto;
        width: 300px;
    }
    .col-app2__R{
        flex:0 0 auto;
        width: calc(60% - 300px);
    }
}
/*section-app3----------------------------
----------------------------------------*/
.section-app3{
    background-image: url(../img/application/p4.png);
    background-position: right bottom;
    background-repeat:no-repeat ;
    background-size:150px auto ;

}
.article3{
    width: 100%;
    padding-bottom: 5rem;
    padding-top: 3rem;

}
@media screen and (min-width:768px) {
    .section-app3{
       background-size:28% auto ;
       background-position: right center;
    
    }
    .article3{
        width: 80%;
        padding-bottom: 0rem;
    }
    
}
@media screen and (min-width:1600px) {
    .section-app3{
        background-size:auto 100%;
     
     }
}
/*section-app4----------------------------
----------------------------------------*/
.section-app4{
    background-image: url(../img/application/p5.png);
    background-size:10% auto ;
    background-position: left bottom;
    background-repeat:no-repeat ;
}
@media screen and (min-width:1600px) {

    .section-app4{
        background-position: left top;
    }
}