.article {
    width:100%;
    border:1px solid #e3e3e3;
    padding:35px 60px;
    box-shadow:0px 11px 8px -10px rgba(0, 0, 0, 0.1), 0px -11px 8px -10px rgba(0, 0, 0, 0.1);
    margin-bottom:30px;
}

.article .left_wrap {
    float:left;
    width:310px;
}

.article .left_wrap .image_wrap {
    float:left;
    margin-right:55px;
}

.article .left_wrap .title_wrap h3 {
    font-family:'NanumSB';
    font-size:27px;
    color:#a33856;
    margin-bottom:13px;
}

.article .left_wrap .title_wrap h4 {
    font-family:'NanumSR';
    font-size:17px;
    color:#5b5b5b;
}

.article .right_wrap {
    width:calc(100% - 310px);
    float:left;
    padding-left:30px;
    border-left:1px solid #d5d5d5;
}

.article .right_wrap ul {
    width:100%;
}

.article .right_wrap ul li {
    width:100%;
    font-family:'NotoKrR';
    color:#000;
    font-size:16px;
    line-height:2;
}

.article .right_wrap ul li span:first-child {
    content:'·';
    margin-right:5px;
    display:block;
    float:left;
}

.article .right_wrap ul li span:last-child {
    width:calc(100% - 10px);
    display:block;
    float:left;
}

.article .right_wrap ul li span:last-child span { 
    font-size: 14px; 
    line-height:1.5; 
    padding-bottom: 5px;
}

@media screen and (max-width:1024px) {
    .article {
        padding-left:0;
        padding-right:15px;
    }

    .article .left_wrap .image_wrap {
        float:none;
        width:100%;
        margin-bottom:15px;
        text-align:center;
        margin-left:0;
    }

    .article .left_wrap .title_wrap {
        text-align:center;
    }
}

@media screen and (max-width:768px) {
    .article {
        padding-right:0;
    }

    .article .left_wrap {
        width: 100%;
        margin-bottom: 30px;
    }

    .article .right_wrap {
        width: 100%;
        border-left: none;
        padding-left:15px;
        padding-right:15px;
    }
}

@media screen and (max-width:480px) {
    .article .right_wrap ul li {
        font-size:14px;
    }

    .article {
        padding:30px 0;
    }
}