.library{
    background: url(../../assets/img/aboutusbg2.png) no-repeat right center,linear-gradient(to bottom,#fffffff2,#ffffffdb),url(../../assets/img/noisefx-2.png) repeat top left,#FDFDFD;
    padding: 80px 0 90px;
}

.library .text{
    width: 780px;
}

.library hr{
    background: #E4E4E4;
    margin: 2rem 0;
}

.library .text p:not(:last-child){
    margin-bottom: 1rem;
}

.library .row{
    grid-gap: 2rem 0;
}

.library .row>*{
    padding: 0 10px;
}

.library .box{
    position: relative;
    display: block;
    display: -webkit-block;
    border: 1px solid #E4E4E4;
    border-radius: 20px;
    background-color: #FDFDFD;
    box-shadow: 0 10px 10px #7090b01a;
    overflow: hidden;
    padding: 20px 2rem;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.library .box:hover{
    background-color: #D7D7D7;
}

.library .box::before{
    content: '';
    position: absolute;
    inset: 0 0 auto auto;
    width: 45px;
    aspect-ratio: 1/1;
    border-bottom-left-radius: 11px;
    background: url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4425 1.24993C14.4425 0.55957 13.8828 -7.35879e-05 13.1925 -7.49366e-05L1.94246 -7.42622e-05C1.2521 -7.42622e-05 0.692457 0.55957 0.692457 1.24993C0.692457 1.94028 1.2521 2.49993 1.94246 2.49993H11.9425V12.4999C11.9425 13.1903 12.5021 13.7499 13.1925 13.7499C13.8828 13.7499 14.4425 13.1903 14.4425 12.4999L14.4425 1.24993ZM0.884766 13.5576L1.76865 14.4415L14.0763 2.13381L13.1925 1.24993L12.3086 0.366042L0.000882164 12.6737L0.884766 13.5576Z" fill="white"/></svg>') no-repeat center,#1179A3;
}

.library .box .title{
    color: var(--title);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.20;
    margin-bottom: 20px;
    letter-spacing: 1.2px;
}

.library .box .type,
.library .box .doc{
    color: var(--text);
}

.library .box .type{
    margin-bottom: 5px;
}

.library .box .doc{
    font-weight: 500;
}

@media(max-width:992px){
    .library{
        padding: 2rem 0;
    }
    .library .row>*{
        padding: 0 12px;
    }
}

@media(max-width:425px){
    .library .box{
        padding: 1.2rem;
    }
}