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

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

#content>section>.cardBox{width:100%;}
#content>section>.cardBox>.card{display:flex; flex-wrap: wrap; width:100%; margin-top: 30px; border: 1px solid #C1C1C1;}
#content>section>.cardBox>.card>.imgBox{width:40%;}
#content>section>.cardBox>.card>.imgBox>img{width:100%;}
#content>section>.cardBox>.card>.textBox{display: flex;flex-direction: column;justify-content: space-between; box-sizing: border-box; width:60%;padding:50px;}
#content>section>.cardBox>.card>.textBox>div>h3{font-size: 20px; font-weight:bold; margin-bottom:10px; color: #000}
#content>section>.cardBox>.card>.textBox>div>p{font-size: 15px;}
#content>section>.cardBox>.card>.textBox>a{width:150px; font-size: 15px; text-align: center; padding: 10px 0; border: 1px solid #9CB01B; color: #9CB01B;}

@media screen and (max-width:1300px) {
    .mid{width:1000px;}
}
@media screen and (max-width:1050px) {
    .mid{width:800px;}

}
@media screen and (max-width:768px) {    
    .mid{width: 90%; padding:0;}
    .category_min{width: 100%;}
    #content>section>.cardBox>.card>.imgBox{width:100%;}
    #content>section>.cardBox>.card>.textBox{width:100%; padding:30px;}
    #content>section>.cardBox>.card>.textBox>a{margin-top:20px;}
}
/* BASIC css end */