/* 과제 메인 페이지 메인 필터 영역 START*/
.main_wrap {
    z-index: 99;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}

.main_wrap .main_container {
    display: flex;
}

.main_wrap .main_container .main_filter {
}

.main_wrap .main_container .main_content {
}
/* 과제 메인 페이지 메인 필터 영역 END*/

/* 과제 메인 페이지 메인 필터 영역 START*/
.main_filter {
    flex: 0 0 200px;
    max-width: 200px;
    padding: 30px 0;
    border-right: 1px solid #f0f4fc;
    box-shadow: 6px 0 6px -6px rgba(55, 109, 213, 0.15);
    z-index: 9999;
    overflow-y: auto;
    max-height: 1300px;
}

/* 스크롤바의 기본 스타일 설정 (모든 브라우저에서 동작) */
.main_filter::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: #ffffff;
}
/* 스크롤바의 스크롤 핸들 (드래그 바) 설정 */
.main_filter::-webkit-scrollbar-thumb {
    border-radius: 3.5px;
    background-color: #ced4da;
}
/* 스크롤바가 마우스 오버 상태일 때 설정 */
.main_filter::-webkit-scrollbar-thumb:hover {
    background-color: #adb5bd;
}
/* 스크롤바의 스크롤 트랙 (배경) 설정 */
.main_filter::-webkit-scrollbar-track {
    background: #ffffff;
}

.main_filter .filter_group {
}

.main_filter .filter_group + .filter_group{
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .main_filter {
        position: fixed;
        right : 100%;
        top : 0px;
        bottom : 0;
        width : 100%;
        max-width: none;
        padding : 20px 20px 40px;
        background-color: #fff;
        transition: right 0.25s ease-in-out;
        max-height : initial;
        overflow-y : auto;
    }

    .main_filter .filter_back {
        display: inline-block;
        margin-bottom: 30px;
        padding-left: 34px;
        background: url("../images/ico_arrow_left_small.svg") no-repeat 0 -4px;
        border: 0;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.28px;
        color: #888;
        cursor: pointer;
    }

    .main_filter.on {
        right : 0;
    }
}
/* 과제 메인 페이지 메인 필터 영역 END*/

/* 과제 메인 페이지 메인 콘텐츠 영역 START*/
.main_content {
    position: relative;
    width: 100%;
    max-width: calc(100% - 200px);
    flex: 0 0 calc(100% - 200px);
    padding: 0 0 71px 20px;
    display: inline-flex;
    flex-direction: column;
    gap : 10px;

}

@media screen and (max-width: 767px) {
    .main_content {
        max-width: none ;
        padding: 0px 0px 20px 0;
        flex: 0 0 calc(100%);
    }
}
/* 과제 메인 페이지 메인 콘텐츠 영역 END*/

/* 과제 메인 페이지 상단 서브 필터 START*/
.main_content .sub_filter {
    display: inline-flex;
    gap : 10px;
    width: 100%;
}

.main_content .sub_filter.pc {
    display: inline-flex;
}

.main_content .sub_filter.mobile {
    display: none;
}

/* 과제 메인 페이지 상단 서브 필터 END*/

/* 과제 메인 페이지 과제 리스트 START*/
.main_content .assignment_wrap{
}

.main_content .assignment_wrap .assignment_list {
}

.main_content .assignment_wrap .assignment_list > li {
    padding : 10px 0px 10px 0px;
    border-top: 1px solid #e0e0e0;
}

.main_content .assignment_wrap .assignment_list > li:last-child {
    border-bottom: 1px solid #e0e0e0;
}
/* 과제 메인 페이지 과제 리스트 END*/

/* 과제 메인 페이지 페이지 네이션 START*/
.main_content .pagination {
    margin: 0 auto;
}
/* 과제 메인 페이지 페이지 네이션 END*/

/* 과제 메인 페이지 버튼(글쓰기/관리) START*/
.main_content .button_wrap .btn_assignment.btn_write {
    position: absolute;
    right : 0px;
}

.main_content .button_wrap .btn_assignment.btn_manage {
    position: absolute;
    right : 0;
    bottom: 0;
}

@media screen and (max-width: 991px) {
    .main_content .button_wrap .btn_assignment.btn_write{
        position: relative;
        right: initial;
        bottom: initial;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .main_content .button_wrap {
        display: inline-flex;
        column-gap: 10px;
        flex-direction: row-reverse;
    }

    .main_content .button_wrap .btn_assignment.btn_write {
        display: none;
        flex : 1;
        position: initial;
        right : initial;
        bottom : initial;
    }

    .main_content .button_wrap .btn_assignment.btn_manage {
        display: none;
    }

    .main_content .sub_filter.pc {
        display: none;
    }
    
    .main_content .sub_filter.mobile {
        display: inline-flex;
    }    

    .main_content .sub_filter.mobile.reset {
        display: inline-flex;
        justify-content: end;
    }    
}
/* 과제 메인 페이지 버튼(글쓰기/관리) END*/


/* 과제 관리 페이지 글쓰기 파트 START */
.main_wrap .writer_container{
    width : 800px;
}

@media screen and (max-width: 767px) {
    .main_wrap .writer_container{
        width: 100%;
        background-color: #f0f4fc;
    }

    .main_wrap .writer_container .writer_button_wrap{
        margin-top : 20px;
        margin-bottom: 40px;
    }
}
/* 과제 관리 페이지 글쓰기 파트 END */


/* 과제 관리 페이지 내 과제 보기 START */
.main_wrap .manage_container {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.main_wrap .manage_container .assignment_wrap .assignment_list > li {
    padding: 10px 0px 10px 0px;
    border-top: 1px solid #e0e0e0;
}

.main_wrap .manage_container .assignment_wrap .assignment_list > li:last-child {
    border-bottom: 1px solid #e0e0e0;
}

.main_wrap .manage_container .pagination {
    margin : 0 auto;
}

.main_wrap .manage_container .sub_filter {
    display: inline-flex;
    gap: 10px;
    width: 100%;
}

.main_wrap .manage_container .sub_filter .wide{
    display: flex;
    flex : 2;
    gap: 10px;
}

.main_wrap .manage_container .assignment_wrap .assignment_list .content_none {
    margin : 30px 0;
}

@media screen and (max-width: 767px) {
    .main_wrap .manage_container .sub_filter {
        flex-direction: column;
    }
}
/* 과제 관리 페이지 내 과제 보기 END */

/* 과제 View 페이지 START */
.main_wrap .view_container{
    max-width : 800px;
}

.main_wrap .view_container .view_page {
    position : relative;
    margin: 30px 0 80px;
    padding: 76px 36px 36px;
    background-color: #f0f4fc;
}

.main_wrap .view_container .view_page .board_section {
    position: relative;
    padding: 31px 35px 68px;
    border-top: 4px solid #5991ff;
    background-color: #fff;
}

.main_wrap .view_container .view_page .board_section .board_content {
    padding: 24px 0;
}

.main_wrap .view_container .view_page .banner_section .pc {
    cursor: pointer;
}   

.main_wrap .view_container .view_page .banner_section .mobile {
    display: none;
}

.main_wrap .view_container .view_page .comment_section {
    padding: 40px 0 50px;
    background-color: #fff;
}

.main_wrap .view_container .view_page .comment_section .title{
    padding: 0 35px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.main_wrap .view_container .view_page .comment_section .comment_list {
    margin-top: 20px;
}

.main_wrap .view_container .view_page .comment_section > .comment_list > li{
    padding: 33px 35px 29px;
    margin-bottom: 10px;
    border: solid 1px #f0f4fc;
    border-radius: 8px;
}

.main_wrap .view_container .view_page .comment_section .pagination{
    display: table;
    margin : 20px auto;
}

.main_wrap .view_container .view_page .header_section {
    width: calc(100% - 72px);
    position: absolute;
    z-index: 100;
    top : 0px;
    left: 36px;
    height: 76px;
    background: #f0f4fc;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main_wrap .view_container .view_page .header_section.fixed{
    position: fixed;
    left: 0px;
    right : 0px;
    margin : 0 auto;
    padding-left: 36px;
    padding-right: 36px;
    width: 760px;
}

.main_wrap .view_container .view_page .header_section .btn_back {
    padding-left: 34px;
    background: url(../images/ico_arrow_left_small.svg) no-repeat 0 -3px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    color: #888;
    cursor: pointer;
}

.main_wrap .view_container .view_page .header_section .btn_white {
    width: 80px;
    border-width: 2px;
    background-color: #fff;
    border-color: #5991ff;
    box-shadow: 0 3px 6px 0 rgb(55 109 213 / 15%);
    color: #5991ff;
    border-radius: 4px;
    line-height: 26px;
}

@media screen and (max-width: 991px) {
    .main_wrap .view_container .view_page .header_section.fixed{
        width: 710px;
    }
}

@media screen and (max-width: 767px) {
    .main_wrap .view_container{
        width: 100%;
    }

    .main_wrap .view_container .view_page {
        margin: 0 -20px;
        padding: 30px 20px 80px;
        background-color: #f0f4fc;
    }

    .main_wrap .view_container .view_page .board_section {
        margin-top: 10px;
        padding: 22px 20px 20px;
    }

    .main_wrap .view_container .view_page .board_section .board_content {
        padding: 20px 0;
    }

    .main_wrap .view_container .view_page .banner_section .pc {
        display: none;
    }   
    
    .main_wrap .view_container .view_page .banner_section .mobile {
        cursor: pointer;
        display : block;
        width : 100%;
    }
    
    .main_wrap .view_container .view_page .comment_section .title{
        padding: 0 20px;
        font-size: 16px;
    }

    .main_wrap .view_container .view_page .comment_section .comment_list {
        margin-top: 30px;
    }

    .main_wrap .view_container .view_page .comment_section > .comment_list > li{
        padding: 20px;
    }

    .main_wrap .view_container .view_page .header_section {
        width: calc(100% - 40px);
        left : 20px;
        height : 40px;
    }

    .main_wrap .view_container .view_page .header_section.fixed {
        width: 100%;
        padding-left : 20px;
        padding-right : 20px;
    }

    .main_wrap .view_container .view_page .header_section .btn_back {
        background: url(../images/ico_arrow_left_small.svg) no-repeat -4px -3px;
    }

    .main_wrap .view_container .view_page .header_section .btn_white {
        font-size : 14px;
        line-height: 26px;
    }
}
/* 과제 View 페이지 END */

/* 과제 관리 페이지 댓글 관리 START */
.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li {
    margin-bottom: 10px;
    padding: 27px 30px;
    border: solid 1px #f0f4fc;
    border-radius: 8px;
}
.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_manage_info {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #f0f4fc;
}

.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_reply_button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #5991FF;
    background: #f0f4fc;
    border-radius: 10px;
    padding: 2px 0px;
    cursor: pointer;
}

.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_wrap > .reply_list > li {
    padding-top : 0px;
    padding-bottom : 0px;
}

.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_wrap > .reply_list > li  > .comment_wrap {
    padding : 10px;
    border: solid 1px #f0f4fc;
    border-radius: 8px;
    box-shadow: 0 3px 6px 0 rgb(89 145 255 / 26%);
}

.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_wrap > .reply_list > li  > .comment_wrap.active {
    border: solid 2px #5991ff;
}

.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_wrap > .reply_list > li  > .comment_wrap > .utils{
    top : 10px;
    right : 10px;
}

.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_register_wrap{
    margin : 22px 0 0;
}
.main_wrap .manage_container .assignment_comment_wrap .assignment_comment_list > li .comment_register_wrap > .comment_content{
    margin-top : 0px;
    height : 64px;
}
/* 과제 관리 페이지 댓글 관리 END */


/* 배너 관리 START */
.banner_wrap {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-bottom : 10px;
}

.banner_wrap.mobile {
    display : none;
}

.banner_wrap > .banner_item {
    flex : 1;
}

.banner_wrap > .banner_item > img{
    max-width: 100%; /* 부모 요소의 너비를 넘지 않도록 */
    height: auto;
    object-fit: cover; /* 이미지 비율을 유지하면서 크기에 맞추기 */
}

@media screen and (max-width: 991px) {
    .banner_wrap.pc {
        display : none;
    }

    .banner_wrap.mobile {
        display : flex;
    }

    .banner_wrap > .banner_item > img{
        width : 100%;
    }
}

/* 배너 관리 END */

/* 모바일 사이드 바 필터 START */
.mobile_filter_top {
    display: none;
}

@media screen and (max-width: 767px) {
    .mobile_filter_top {
        position: sticky;
        top : 50px;
        z-index: 998;
        padding: 20px 20px 10px 20px;
        display : flex;
        justify-content: space-between;
        align-items: center;
        backdrop-filter: blur(1px);
    }

    .mobile_filter_top > .mobie_filter_wrap{
        width : 100%;
        padding : 10px 20px;
        background-color: #F5F5FB;
        display : flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        border: 1px solid #5991FF;
    }

    .mobile_filter_top > .mobie_filter_wrap > span {
        font-size : 16px;
        font-weight: 700;
        line-height: 24px;
        color: #5991FF;
    }

    .mobile_filter_top > .mobie_filter_wrap > img {
        width : 24px;
        height : 24px;
    }
}
/* 모바일 사이드 바 필터 END */