.data-box{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}
.data-all-box{
    width: 1200px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    font-size: 0;
    box-sizing: border-box;
    padding: 150px 20px;
}
.data-title{
    color: black;
    font-size: 30px;
}

.mt-3{
    margin-top: 12px;
}

.text-mainColor{
    color: #64A600;
}

.grid{
    display: grid;
}

.font-bold{
    font-weight: 700;
}

.w-half{
    width:50%
}

.text-xl{
    font-size: 20px;
}

.text-link{
    color:rgb(55 65 81);
    transition:all 0.3s linear;
}

.block{
    display: block;
}

.px-4{
    padding:0 16px;
}
.mt-6>div{
    margin-top: 24px;
}

.mt-6 > div:first-child{
    margin-top: 0;
}

.border-mainColor{
    border:1px solid #64A600;
}

.bggreen{
    background-color: #ecfccb;
}

.bggray200{
    background-color:rgb(243 244 246);
    transition: 0.3s;
}

.py-2{
    padding-top:8px;
    padding-bottom: 8px;
}

.px-3{
    padding-left: 12px;
    padding-right: 12px;
}

.gap-x-5{
    column-gap: 1.25rem;
}

.space-y-5{
    margin-top: 20px;
}

.space-y-5:first-child{
    margin-top: 0;
}

.mt-12{
    margin-top: 48px;
}

.gap-y-2{
    row-gap: 0.5rem;
}

.w-fit{
    width: fit-content;
}

.downlink:hover{
    color: #64A600;
}

.font-sBold{
    font-weight: 600;
}

.grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media only screen and (max-width: 1200px){
    .data-all-box{
        width: 1000px;
        padding: 100px 0;
    }
}
@media only screen and (max-width: 1000px){
    .data-all-box{
        width: 750px;
        padding: 60px 0;
    }
}
@media only screen and (max-width: 768px){
    .data-all-box{
        width: 550px;
        padding: 40px 0;
    }
    
}
@media only screen and (max-width: 550px){
    .data-all-box{
        width: calc(100vw - 40px);
        padding: 20px 0;
    }
    .grid-cols-2{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}