@charset "UTF-8";

.appico-item {
    position: relative;
    display: block;
    padding: 20px 0 0 0;
    border-radius: 3px;
    overflow: hidden
}

.appico-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(0, 57, 200, 0) 30%, rgb(0, 57, 200));
    visibility: hidden;
    opacity: 0;
    transition: all .3s
}

.appico-item__img {
    width: 80%;
    margin-right: auto;
    margin-left: auto
}

.appico-item__img::before {
    padding-top: 100%
}

.appico-item__intro {
    position: relative;
    z-index: 5;
    padding: 20px;
    text-align: center
}

.appico-item__title {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 120px;
    margin-right: auto;
    margin-left: auto
}
.appico-item__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
}

.appico-item__ico {
    position: absolute;
    right: 15px;
    bottom: 20px;
    z-index: 5;
    visibility: hidden;
    opacity: 0;
    transition: all .3s
}

@media (any-hover: hover) {
    .appico-item:hover::after {
        visibility: visible;
        opacity: .8
    }

    .appico-item:hover .appico-item__intro {
        text-align: left
    }

    .appico-item:hover .appico-item__title {
        margin-left: 0;
        justify-content: left
    }

    .appico-item:hover .appico-item__title, .appico-item:hover .appico-item__desc {
        color: #fff
    }

    .appico-item:hover .appico-item__ico {
        visibility: visible;
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .list-appico > li:nth-of-type(n+4) {
        margin-top: 20px
    }
}

@media (max-width: 768px) {
    .list-appico > li {
        width: 33.3333%
    }

    .list-appico > li:nth-of-type(n+4) {
        margin-top: 20px
    }
}

@media (max-width: 480px) {
    .list-appico > li {
        width: 50%
    }

    .list-appico > li:nth-of-type(n+3) {
        margin-top: 10px
    }
}