@charset "UTF-8";

.gallery_list {}
.gallery_list > ul {gap:2.4rem; grid-template-columns:repeat(4, minmax(0, 1fr));}
.gallery_list a {display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; border:1px solid #0e0e0e; height:100%;}
.gallery_list .thumb {border:none; aspect-ratio:3/4; border-radius:0; margin:0;position:relative;}
.gallery_list .desc {flex:1; display:flex; flex-direction:column; gap:1.6rem; justify-content:flex-start; align-items:stretch; padding:2.4rem; width:100%; transition:0.3s;}
.gallery_list .desc .top {display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:0.2rem 0.5rem; flex-wrap:wrap;}
.gallery_list .desc .volume {font-family:"Montserrat"; font-weight:500; font-size:1.7rem; line-height:1.2;}
.gallery_list .desc .date {font-family:"Montserrat";font-size:1.4rem; color:#555; margin-left:auto;}
.gallery_list .desc .title {text-overflow:unset; height:auto; overflow:visible;}
.gallery_list .desc .subject {font-size:2rem; font-weight:600; word-break:keep-all; line-height:1.2;}
.gallery_list .desc .name {display:flex; flex-direction:column; gap:0; font-size:1.4rem; color:#8A5C00; font-weight:500;}
.gallery_list .desc .name:last-of-type {margin-top:auto;}

.gallery_list .desc .more {display:flex; flex-direction:row; justify-content:space-between; align-items:center; font-size:1.6rem; color:#555; margin-top:auto;}
.gallery_list .desc .more::after {content:"\ea6c"; font-family:"remixicon"; font-size:2rem; opacity:0.3; transition:0.3s;}


@media screen and (min-width:1024px) {
    .gallery_list a:hover .thumb img {transform:scale(1.1);}
    .gallery_list a:hover .desc {background:#F6F4EF;}
    .gallery_list a:hover .desc .more::after {opacity:1;}
}

/* 뷰 */
#sub_wrap:has(.archive_view) .contents_nav {display:none;}
#sub_wrap:has(.archive_view) #contents_body {padding:0;}
.archive_view {width:128rem; max-width:100%; margin:0 auto;}
.archive_view .top_prevnext {display:flex; flex-direction:row; justify-content:space-between; gap:1rem; margin-bottom:3.2rem;}
.archive_view .top_prevnext a {font-size:1.4rem; color:#555; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; letter-spacing:-0.5px;}
.archive_view .top_prevnext a i {display:flex; justify-content:center; align-items:center; width:6rem; height:6rem; border:1px solid #e4e4e4; font-size:3rem; color:#8e8e8e;}
.archive_view .grid {display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; gap:3.2rem;}
.archive_view .top_prevnext .no_prev {display:block; width:6rem; height:6rem; font-size:0;}

.archive_view .this_cover {flex:none; width:41rem; position:sticky; top:8rem; border:1px solid #0e0e0e; overflow:hidden; max-height:calc(100vh - 11rem); display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;}
.archive_view .this_cover .thumb {flex:none; display:flex; justify-content:center; align-items:center; width:100%; aspect-ratio:3/4; overflow:hidden;}
.archive_view .this_cover .thumb img {object-fit:cover; width:100%; height:100%;}
.archive_view .this_cover .desc {flex:1; min-height:0; display:flex; padding:2.4rem 1.4rem 2.4rem 2.4rem; width:100%; transition:0.3s;}

.archive_view .this_cover .scroll {overflow-y: auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:1.6rem; justify-content:flex-start; padding-right:1rem;}
.archive_view .this_cover .scroll::-webkit-scrollbar {width:3px;}
.archive_view .this_cover .scroll::-webkit-scrollbar-track {background:#F6F4EF;}
.archive_view .this_cover .scroll::-webkit-scrollbar-thumb {background:#8A5C00;}

.archive_view .this_cover .top {display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:0.5rem;}
.archive_view .this_cover .volume {font-family:"Montserrat"; font-weight:700; font-size:1.8rem;}
.archive_view .this_cover .date {font-family:"Montserrat";font-size:1.5rem; color:#555;}
.archive_view .this_cover .subject {font-size:2rem; font-weight:700;}
.archive_view .this_cover .cont  {font-size:1.7rem; color:#555; word-break:keep-all;}
.archive_view .this_cover.author .thumb {background:#D9D6CF; flex-direction:column; align-items:flex-start; aspect-ratio:auto; padding:10rem 3.2rem;}
.archive_view .this_cover.author .name {font-size:2.4rem; font-weight:600;}
.archive_view .this_cover.author .affiliation {font-size:1.6rem; color:#555; font-weight:400;}
.archive_view .this_cover.author .desc {flex-direction:row; justify-content:space-between;}


.archive_view .story_list {flex:none; width:calc(100% - 44.2rem);}
.archive_view .story_list li + li  {margin-top:2.4rem;}
.archive_view .story_list a {display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; border:1px solid #0e0e0e; overflow:hidden;}
.archive_view .story_list .thumb {display:flex; justify-content:center; align-items:center; overflow:hidden; flex:none; width:18rem; aspect-ratio:4/3;}
.archive_view .story_list .thumb img {object-fit:cover; width:100%; height:100%;}
.archive_view .story_list .desc {flex:none; width:calc(100% - 18rem); display:flex; flex-direction:column; gap:0.8rem; justify-content:center; align-items:flex-start; padding:2.4rem; }
.archive_view .story_list .top {font-size:1.6rem; color:#8A5C00; display:flex; gap:0.5rem;}
.archive_view .story_list .top em {color:#a3a3a3;}
.archive_view .story_list .subject {font-size:2rem; font-weight:700; width:100%; line-height:1.2; word-break:keep-all;}

@media screen and (min-width:1024px) {
    .archive_view .top_prevnext a:hover {color:#333;}
    .archive_view .top_prevnext a:hover i {border-color:#111; color:#111;}
    .archive_view .story_list a:hover {background:#F6F4EF;}
}

.board_top_text {margin-top:-7rem; margin-bottom:7rem; font-size:1.8rem; color:#555; word-break:keep-all;}
.board_top_text span {font-style: italic;}

/*-------------------------------------------------

Responsive

-------------------------------------------------*/
/* Media Query */
@media (max-width: 1280px) {
    .gallery_list > ul {grid-template-columns:repeat(3, minmax(0, 1fr));}
    .gallery_list .desc .volume {font-size:1.5rem; letter-spacing:-0.5px;}
    .gallery_list .desc .date {font-size:1.3rem; letter-spacing:-0.5px;}


    .archive_view .this_cover {width:38rem;}
    .archive_view .story_list {width:calc(100% - 41.2rem);}
}

@media (max-width: 1024px) {
    .gallery_list > ul {grid-template-columns: repeat(3, minmax(0, 1fr)); gap:2rem;}
    .gallery_list .desc {padding:2.4rem 1.6rem;}

    .board_info {padding:1.6rem 0; flex-direction:column;}
    .board_info .page {display:flex; margin-left:auto;}
    .board_info  form {width:100%;}
    .board_info  .form .form_select {display:flex; width:auto; flex:1;}

    .board_top_text {margin-top:-3.2rem; margin-bottom:4rem;}
    .board_top_text br {display:none;}

    .archive_view .top_prevnext {margin-bottom:2rem;}
    .archive_view .top_prevnext a {font-size:1.4rem; gap:0.5rem;}
    .archive_view .top_prevnext a i {width:4rem; height:4rem; font-size:2.4rem;}

    .archive_view .grid {flex-direction:column;}
    .archive_view .this_cover {position:static; width:100%; max-height:inherit; flex-direction:row; align-items:stretch;}
    .archive_view .this_cover .thumb {width:40%; flex:none;}
    .archive_view .this_cover .desc .btn_box {margin-top:auto;}
    .archive_view .story_list {width:100%;}


    .archive_view .this_cover.author {flex-direction:column;}
    .archive_view .this_cover.author .thumb {width:100%; padding:3rem;}
}

@media (max-width: 768px) {
    .gallery_list > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 640px) {
    .gallery_list .desc {padding:1.6rem; gap:1rem;}
    .gallery_list .desc .subject {font-size:1.8rem;}
    .gallery_list .desc .date {font-size:1.2rem; letter-spacing:-0.5px;}

    .archive_view .this_cover {flex-direction:column; align-items:stretch;}
    .archive_view .this_cover .thumb {width:100%; flex:none;}
    .archive_view .this_cover .desc {padding:2.4rem 1.6rem;}

    .archive_view .story_list .thumb {width:16rem;}
    .archive_view .story_list .desc {padding:1.6rem; width:calc(100% - 16rem);}
    .archive_view .story_list .subject  {font-size:1.8rem;}
}

@media (max-width: 480px) {
    .gallery_list > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
}