/* BASIC css start */
#content{padding: 70px 0;}

#content>section>img{width:100%; border-radius: 20px;}

.section.ani{
    position: relative;
    animation: move_bottom 0.5s ease-in-out;
}

@keyframes move_bottom {
    from {
        opacity: 0;
        left: 50px;
    }

    to {
        opacity: 1;
        left: 0;
    }
}
.section{text-align: center;}
.section>.box{width:100%; text-align: center; margin-bottom: 150px;}
.section>.box>h2{font-size:30px; font-weight: bold; margin-bottom: 40px;}
.section>.box>h5{font-size:20px; margin-bottom: 10px;}
.section>.box>p{font-size:15px; margin-bottom:10px;}
.section>.box>p>span{font-size:15px; font-weight: bold;}
.section>.box>img{margin-top: 30px;}
.section>.box>.imgBox{margin-top: 30px;}
.section>.box>.imgBox>div{display:flex; justify-content: center; flex-wrap: wrap; gap: 25px 50px;}
.section>.box>.imgBox>div>img{}

.section>.box>.cardBox{display:flex; gap:20px; text-align: left; margin-top:20px}
.section>.box>.cardBox>.card{padding: 30px; border: 1px solid #F2F2F2; border-radius: 10px;}
.section>.box>.cardBox>.card>img{width:75px;}
.section>.box>.cardBox>.card>p{font-size:15px; margin-top:30px;}
.section>.box>.cardBox>.card>p>span{font-size:15px; font-weight: bold;}

.flex_break{flex-basis: 100%; height: 0;}

@media screen and (max-width:1300px) {
    .mid{width:1000px;}
}
@media screen and (max-width:1050px) {
    .mid{width:800px;}
    .section>.box>.cardBox{flex-wrap: wrap; justify-content: center;}
    
    .section>.box>.imgBox>div{gap:25px;}
    .section>.box>.imgBox>div>img{width: calc(33.3% - 20px);}
    .flex_break{display: none;}
}
@media screen and (max-width:768px) {    
    .mid{width: 90%; padding:0;}
    .section>.box>.imgBox>div>img{width: calc(50% - 15px);}
}
/* BASIC css end */