.sub_content ul {
    width:100%;
}

.sub_content ul li {
    float:left;
    width:calc(20% - 16px);
    height:161px;
    border:1px solid #dbdbdb;
    transition:all .3s;
    margin-bottom:20px;
}

.sub_content ul li:nth-child(5n+1) {
    margin-right:16px;
}

.sub_content ul li:nth-child(5n+2) {
    margin-left: 4px;
    margin-right: 12px;
}

.sub_content ul li:nth-child(5n+3) {
    margin-left: 8px;
    margin-right: 8px;
}

.sub_content ul li:nth-child(5n+4) {
    margin-left: 12px;
    margin-right: 4px;
}

.sub_content ul li:nth-child(5n+0) {
    margin-left: 16px;
}

.sub_content ul li .image_wrap {
    width:100%;
    height:123px;
    position: relative;
    transition:all .3s;
    overflow:hidden;
}

.sub_content ul li .image_wrap img {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    transition:all .3s;
}

.sub_content ul li .image_wrap img:last-child {
    opacity:0;
}

.sub_content ul li .text_wrap {
    width:100%;
    height:36px;
    line-height:36px;
    background-color:#f5f5f5;
    text-align:center;
    color:#2c2c2c;
    font-size:14px;
    font-family:'NotoKrR';
    transition:all .3s;
    position:relative;
}

.sub_content ul li:hover {
    border:1px solid #dd6385;
}

.sub_content ul li:hover .text_wrap {
    background-color:#dd6385;
    color:#fff;
}

.sub_content ul li:hover .image_wrap {
    box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}

.sub_content ul li:hover .image_wrap img:first-child {
    opacity:0;
}

.sub_content ul li:hover .image_wrap img:last-child {
    opacity:1;
}

.sub_content h3 {
    color:#000;
    font-family:'NotoKrB';
    font-size:18px;
    margin:40px 0 17px;
    padding-left:20px;
    position: relative;
}

.sub_content h3:before {
    content:'';
    width:9px;
    height:9px;
    border-radius:100%;
    background-color:#cc0000;
    position: absolute;
    top:50%;
    left:5px;
    transform:translateY(-50%);
}

@media screen and (max-width:1024px) {
    .sub_content ul li {
        width:calc(25% - 15px);
    }

    .sub_content ul li:nth-child(4n+1) {
        margin-right: 15px;
        margin-left:0;
    }

    .sub_content ul li:nth-child(4n+2) {
        margin-left: 5px;
        margin-right: 10px;
    }

    .sub_content ul li:nth-child(4n+3) {
        margin-left: 10px;
        margin-right: 5px;
    }

    .sub_content ul li:nth-child(4n+4) {
        margin-left: 15px;
        margin-right:0;
    }
}

@media screen and (max-width:480px) {
    .sub_content ul li {
        width: calc(50% - 10px);
    }

    .sub_content ul li:nth-child(2n+1) {
        margin-right: 10px;
        margin-left: 0;
    }

    .sub_content ul li:nth-child(2n+0) {
        margin-left: 10px;
        margin-right: 0px;
    }
}