#main-area {
    height: 100%;
}

#view-container {
    padding: 30px;
    border: 1px solid #eee;
}

#view-top {
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    border-bottom: 1px solid #efefef;
    padding-bottom: 15px;
}

#view-top-title {
    width: calc(100% - 135px);
    padding-right: 15px;
    word-break: keep-all;
    font-size: 15px;
}

#view-top-date {
    width: 135px;
    text-align: right;
    font-size: 13px;
}

#view-member-info {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

#view-member-info>a {
    display: block;
    width: calc(100% - 135px);
    padding-right: 15px;
}

#mobile-view-top {
    display: none;
}

#member-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
}

#member-profile-id {
    color: #666;
    font-size: 15px;
    font-weight: 400;
}

#view-hit-count {
    width: 135px;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
}

#view-post {
    margin-top: 30px;
}

#view-post p {
    word-break: break-all;
}

#view-post img.orientaion_6 {
    transform: rotate( 90deg ) !important;
}

#view-post img.orientaion_8 {
    transform: rotate( -90deg ) !important;
}  

#view-button-container {
    margin-top: 30px;
    text-align: right;
}

#view-button-container a {
    padding: 5px 14px;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 500;
}

#view-button-container a:last-child {
    margin-right: 0;
}

#view-button-container a#post-update {
    border: 1px solid rgba(4, 163, 255, 0.7);
    color: rgba(4, 163, 255, 0.7);
}

#view-button-container a#post-delete {
    border: 1px solid rgba(241, 106, 106, 0.856);
    color: rgba(241, 106, 106, 0.856);
}

#view-button-container a#post-update:hover {
    transition: .2s;
    color: #fff;
    background: rgba(4, 163, 255, 0.7);
}

#view-button-container a#post-delete:hover {
    transition: .2s;
    color: #fff;
    background: rgba(241, 106, 106, 0.856);
}

#view-comment-container {
    margin-top: 30px;
}

#comment-info {
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

#comment-count {
    font-size: 14px;
}

#comment-like {
    font-size: 14px;
    color: rgba(241, 106, 106, 0.856);
    cursor: pointer;
    border: 1px solid rgba(241, 106, 106, 0.856);
    padding: 0 7px 0 5px;
    display: flex;
    align-items: center;
}

#comment-like i {
    margin-right: 5px;
    pointer-events: none;
}

#post-comment-box {
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-top: 10px;
}

#comment-content {
    width: calc(100% - 110px);
    border: 1px solid #eee;
    height: 80px;
    resize: none;
    margin-right: 10px;
    padding: 5px;
    outline: 0;
}

#comment-content:focus {
    border: 1px solid rgba(4, 163, 255, 0.7);
    transition: .2s;
}

#comment-submit {
    width: 100px;
    background: none;
    border: 1px solid rgb(194, 194, 194);
    cursor: pointer;
    color: #333;
}

#comments-list {
    margin-top: 20px;
    border: 1px solid #eee;
}

.comment-items {
    padding: 20px;
    border-top: 1px solid #eee;
}

.comment-items:first-child {
    border-top: none;
}

.comment-items.child {
    padding-left: 50px;
    border-top: none;
}

.comment-profile-box {
    margin-bottom: 10px;
}

.comment-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
}

.comment-child-icon {
    display: inline-block;
    margin-right: 10px;
    color: rgba(241, 106, 106, 0.856);
}

.comment-profile-id {
    font-size: 14px;
    font-weight: 400;
}

.comment-date {
    float: right;
    font-size: 13px;
}

.comment-item-content {
    font-size: 15px;
    font-weight: 400;
    margin-left: 42px;
}

.comment-item-content.child {
    margin-left: 72px;
}

.comment-update-box {
    display: none;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.comment-update-content {
    width: calc(100% - 110px);
    border: 1px solid #eee;
    height: 80px;
    resize: none;
    margin-right: 10px;
    padding: 5px;
    outline: 0;
}

.comment-update-submit {
    width: 100px;
    background: none;
    border: 1px solid rgb(194, 194, 194);
    cursor: pointer;
    color: #333;
}

.comment-btn-container {
    margin: 25px 0 0 42px;
}

.comment-btn-container.child {
    margin: 25px 0 0 72px;
}

.comment-btn-container a {
    padding: 5px 25px 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ebebeb;
    text-transform: uppercase;
    border-radius: 30px;
    margin-right: 7px;
    cursor: pointer;
}

.comment-btn-container a:last-child {
    margin-right: 0;
}

.comment-reply-box {
    margin: 25px 0 0 42px;    
    display: none;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.comment-reply-content {
    width: calc(100% - 130px);
    border: 1px solid #eee;
    height: 80px;
    resize: none;
    margin-right: 10px;
    padding: 5px;
    outline: 0;
}

.comment-reply-submit {
    width: 94px;
    background: none;
    border: 1px solid rgb(194, 194, 194);
    cursor: pointer;
    color: #333;
}

.reply-update-box {
    display: none;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.reply-update-content {
    width: calc(100% - 130px);
    border: 1px solid #eee;
    height: 80px;
    resize: none;
    margin-right: 10px;
    padding: 5px;
    outline: 0;
}

.reply-update-submit {
    width: 95px;
    background: none;
    border: 1px solid rgb(194, 194, 194);
    cursor: pointer;
    color: #333;
}



@media ( max-width: 768px ) {
    #community-header-bg {
        display: none;
    }
    
    #view-container {
        padding: 20px 10px;
        border: none;
    }
    
    #view-top {
        display: none;
    }
    
    #view-member-info {
        margin-top: 15px;
    }

    #mobile-view-top {
        display: block;
    }

    #mobile-view-top-category {
        font-size: 0.9em;
        font-weight: 400;
        color: rgba(4, 163, 255, 0.7);
    }

    #mobile-view-top-title {
        margin-top: 10px;
        font-size: 1em;
        font-weight: 400;
        color: #111;
    }

    #mobile-view-top-date {
        font-size: 0.75em;
        color: #c9c9c9;
    }

    #view-member-info {
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    #view-member-info>a {
        display: block;
        width: calc(100% - 100px);
        padding-right: 15px;
    }

    #member-profile-img {
        margin-right: 5px;
    }

    #member-profile-id {
        font-size: 0.9em;
        color: #333;
    }

    #view-hit-count {
        width: 100px;
        font-size: 0.9em;
        color: #333;
    }
    
    #view-post {
        margin-top: 0;
        border-bottom: 1px solid #eee;
        padding: 15px 0;
    }
    
    #view-button-container {
        margin-top: 0;
        padding-right: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
    
    #view-comment-container {
        margin-top: 15px;
    }
    
    #comment-info {
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        border-bottom: 1px solid #eee;
        padding: 0 10px 15px 10px;
        align-items: center;    
    }
    
    #post-comment-box {
        padding: 0 10px;
    }

    #comment-content {
        width: calc(100% - 60px);
        height: 40px;
    }
    
    #comment-submit {
        width: 50px;
    }










    
    .comment-items {
        padding: 20px 15px;
    }
    
    .comment-items.child {
        padding-left: 50px;
        border-top: none;
    }
    
    .comment-profile-box {
        margin-bottom: 10px;
    }
    
    .comment-profile-img {
        margin-right: 5px;
    }
    
    .comment-child-icon {
        margin-right: 5px;
    }
    
    .comment-profile-id {
        font-size: 0.85em;
        color: #111;
    }
    
    .comment-date {
        display: none;
    }
    
    .comment-item-content {
        font-size: 0.9em;
    }
    
    .comment-item-content.child {
        margin-left: 65px;
    }
    
    .comment-update-content {
        width: calc(100% - 60px);
        height: 40px;
    }
    
    .comment-update-submit {
        width: 50px;
    }
    
    .comment-btn-container.child {
        margin: 25px 0 0 65px;
    }
    
    .comment-btn-container a {
        padding: 5px 17px 3px;
        font-size: 10px;
    }
    
    .comment-reply-box {
        margin: 25px 0 0 36px;
    }

    .comment-reply-content {
        width: calc(100% - 80px);
        height: 50px;
    }
    
    .comment-reply-submit {
        width: 50px;
    }
    
    .reply-update-content {
        width: calc(100% - 80px);
        height: 50px;
    }
    
    .reply-update-submit {
        width: 50px;
    }
}