.info { text-align: start; } 
.info .date { margin: 1rem 0 1.5rem 0; color: #767676; font-size: 0; }
.info .date em { font-style: normal; padding-left: 8px; }
.info .date span { position: relative; padding-right: 8px; }
.info .date span:after { 
    content: '';
    position: Absolute;
    right: -1px;
    width: 1px;
    height: 18px;
    background: #767676;
    top: 50%;
    transform: translateY(-50%); 
}

.info .date span,
.info .date em { 
    font-size: 18px;
}

.content {
    padding: 24px 0 120px 0;
    border-top: 1px solid #505050;
    border-bottom: 1px solid #505050;
    text-align: start;
}

.content img{
    max-width: 100%;
}
.ql-align-center{
    text-align: center;
}
.content .file-area{
    width:328px;
    display: block;
}
.content .file-area div{
    display: flex;
    height: 36px;
    align-items: center;
    padding-right: 16px;
    color: #767676;
    border: 1px solid #E1E1E4;
    margin-bottom: 60px;
    font-size: 14px;
}
.controller { 
    display: flex; 
    justify-content: space-between;
    margin: 24px 0 200px 0;
}

.controller .btn { width: 206px; height: 46px; border: 1px solid #E1E1E4; font-size: 18px; }
.controller .btn a { line-height: 46px; display: flex; justify-content: center; align-items: center; }
.controller .btn a img { display: block; }
.controller .direction { display: flex; }

.controller .prev a img { margin-right: 4px; }
.controller .next a img { margin-left: 4px; }
.controller .next { transform: translateX(-1px); }
.controller .list { font-weight: 700; }


.controller a.pc { display: flex; }
.controller a.mobile { display: none; }

@media (max-width:1440px) {
    
.info .date em { padding-left: 0.5rem; }
.info .date span { padding-right: 0.5rem; }


.info .date span,
.info .date em { 
    font-size: 1.125rem;
}
.content {
    padding: 1.5rem 0 7.5rem 0;
}

.content .file-area{
    width:20.5rem;
}
.content .file-area div{
    height: 2.25rem;
    padding-right: 1rem;
    margin-bottom: 3.75rem;
    font-size: 0.875rem;
}

.controller { 
    margin: 1.5rem 0 12.5rem 0;
}
.controller .btn { width:12.875rem; height:2.875rem; font-size: 1.125rem; }
.controller .btn a { line-height: 2.875rem; }

.controller .prev a img { margin-right: 0.25rem; }
.controller .next a img { margin-left: 0.25rem; }


}
@media (max-width: 1024px){
    .info .date { margin: 0.5rem 0 1rem 0; }
    .info .date span, .info .date em { font-size: 1rem; }
    .info .date span:after { height: 1rem; }

    .content { padding: 1rem 0 3.75rem 0; }

    .controller { margin: 1.25rem 0 5rem 0; }
    .controller a.pc { display: none; }
    .controller a.mobile { display: flex; }
    .controller .prev, 
    .controller .next { width: 2.25rem; height: 2.25rem; }    
    .controller .prev a,
    .controller .next a { width: 100%; height: 100%; }
    .controller .prev a img,
    .controller .next a img { margin: 0; display: block; }
    .controller .list { height: 2.25rem; width: 9.625rem; font-size: 1rem; }
    .controller .list a { line-height: 2.25rem; }


    
    .admin-crud{
        display: none;
    }
}