
.list_parent {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
}

.list_main {
    width: 1220px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    position: relative;
}
.list_main_title {
    margin-top: 42px;
    font-weight: 700;
    color: #000000;
    font-size: 32px;
    letter-spacing: -0.8px;
}
.list_filter_container {
    margin-top: 24px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    position: relative;
}
.list_filter_container_left {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
}
.list_filter {
    height: 44px;
    padding: 13px 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    background-color: #ffffff;
    border-radius: 100px;
    border: 1px solid;
    border-color: #e5e5e5;
    cursor: pointer;
}
.list_filter_text_title {
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 18px;
    white-space: nowrap;
}
.list_filter_text_name {
    margin-left: 13px;
    font-weight: 500;
    color: #f14556;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 18px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;

}
.list_filter_job_type_count {
    margin-left: 4px;
    width: 22px;
    height: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    border-radius: 22px;
    background-color: #f14556;
    font-weight: 500;
    color: #ffffff;
    font-size: 12px;

}
.list_filter_dropdown_image {
    margin-left: 13px;
    width: 18px;
    height: 18px;
}

.list_filter_container_right {
    position: absolute;
    right: 0px;
}

.list_item_container {
    width: 1220px;
    height: 269px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;

}
.list_item_left_container {
    width: 954px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}

.list_item_image_container {
    position: absolute;
    top: 24px;
    right: 0px;
    width: 220px;
    height: 220px;
}
.list_item_image {
    width: 220px;
    height: 220px;
    overflow: hidden;
    border-radius: 16px;
    -o-object-fit: cover;
       object-fit: cover;
}
.list_item_bottom_line {
    position: absolute;
    bottom: 0px;
    width: 1220px;
    height: 1px;
    background-color: #00000014;
}
.list_item_job_type {
    font-weight: 400;
    color: #f14556;
    font-size: 16px;
}
.list_item_question {
    margin-top: 7px;
    font-weight: 600;
    color: #000000;
    font-size: 23px;
}
.list_item_answer {
    margin-top: 14px;
    width: 954px;
    overflow: hidden; /* 내용이 div의 크기를 초과할 경우 숨깁니다. */
    white-space: nowrap; /* 내용을 한 줄로 표시합니다. */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 말줄임표를 표시합니다. */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 표시할 최대 줄 수를 2줄로 설정합니다. */
    -webkit-box-orient: vertical;
    white-space: normal;
    font-weight: 400;
    color: #000000b2;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 26px;
}
.list_item_mentor {
    margin-top: 30px;
    width: 954px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    position: relative;
}
.list_item_mentor_image {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    overflow: hidden;
}
.list_item_mentor_image_mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #0000000d;
    border-radius: 27px;
}
.list_item_mentor_name {
    margin-left: 14px;
    font-weight: 500;
    color: #000000e6;
    font-size: 14px;
}
.list_item_mentor_organization {
    margin-left: 8px;
    height: 26px;
    padding: 5px 6px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    font-weight: 500;
    color: #000000b2;
    font-size: 13px;
    vertical-align: center;
}
.list_item_created {
    margin-left: 10px;
    font-weight: 400;
    color: #00000080;
    font-size: 13px;
}
.list_item_bookmark {
    position: absolute;
    right: 0px;
    width: 53px;
    height: 30px;
}

.bookmark_area {
    width: 53px;
    height: 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    background-color: #ffffff;
}
.bookmark_area:hover {
    background-color: #f5f5f5;
    border-radius: 100px;
}

.bookmark_on {
    width: 13px;
    height: 16px;
}

.bookmark_off {
    width: 13px;
    height: 16px;
}
.bookmark_count {
    margin-left: 8px;
    font-weight: 400;
    color: #000000b2;
    font-size: 13px;
    text-align: right;
}
.list_pagination {
    margin-top: 36px;
    width: 1220px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
}
.pagination li {
    width: 40px;
    height: 40px;
}

.pagination li a {
    width: 40px;
    height: 40px;
    padding: 0px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    font-weight: 700;
    color: #000000;
    font-size: 14px;
    text-decoration: none; /* 밑줄 제거 */
}
.pagination li.active {
    background-color: transparent;
}

.pagination li.active a {
    width: 40px;
    height: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    background-color: #fc4760cc;
    border-radius: 20px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.pagination li:not(.prev):not(.next):not(.active):hover {
    background-color: #f5f5f5;
    border-radius: 20px;
}

.pagination .disabled, .pagination .first, .pagination .last {
    display: none;
}

.page_arrow {
    width: 40px;
    height: 40px;
}
.job_type_layer {
    position: absolute;
    width: 551px;
    height: 315px;
    top: 163px;
    left: 0px;

    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid;
    border-color: #e5e5e5;
    -webkit-box-shadow: 0px 4px 8px #00000029;
            box-shadow: 0px 4px 8px #00000029;
}

.job_type_item_list {
    margin-top: 7px;
    width: 551px;
    height: 245px;

    -webkit-column-count: 3; /* 크롬, 사파리, 오페라용 */
    -moz-column-count: 3;    /* 파이어폭스용 */
    column-count: 3;         /* 일반 */

    /*-webkit-column-gap: 20px; !* 크롬, 사파리, 오페라용 *!*/
    /*-moz-column-gap: 20px;    !* 파이어폭스용 *!*/
    /*column-gap: 20px;         !* 일반 *!*/

    max-height: 260px; /* 예시 높이, 필요에 따라 조정 */

}

.job_type_item, .job_type_item_all {
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid-column;
    width: 172px;
    height: 34px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    padding-left: 20px;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 18px;
}
.job_type_item:hover, .job_type_item_all:hover, .career_layer_item:hover, .sort_layer_item:hover {
    background-color: #f1455614;
}

.job_type_layer_line {
    width: 551px;
    height: 1px;
    background-color: #00000014;
}
.job_type_layer_button_container {
    height: 60.5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: center;
        align-items: center;
}
.job_type_active {
    color: #f14556;
}
.job_type_check {
    margin-left: 11px;
    width: 9px;
    height: 5px;
}

.job_type_filter_ok {
    margin-right: 20px;
    width: 73px;
    height: 36px;
    background-color: #f14556;
    border-radius: 8px;
    border: 1px solid;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    font-weight: 700;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
    cursor: pointer;
}
.job_type_filter_cancel {
    margin-right: 32px;
    font-weight: 500;
    color: #00000099;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
    cursor: pointer;
}

.career_layer {
    position: absolute;
    top: 163px;
    left: 0px;
    width: 128px;
    height: 114px;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid;
    border-color: #e5e5e5;
    -webkit-box-shadow: 0px 4px 8px #00000029;
            box-shadow: 0px 4px 8px #00000029;
    overflow: hidden;
}
.career_layer_item {
    width: 128px;
    height: 38px;
    padding-left: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 18px;
    white-space: nowrap;
}

.career_active {
    color: #f14556;
}

.career_filter_dropdown_image {
    margin-left: 13px;
    width: 18px;
    height: 18px;
}

.sort_layer {
    position: absolute;
    top: 163px;
    right: 0px;
    width: 102px;
    height: 114px;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid;
    border-color: #e5e5e5;
    -webkit-box-shadow: 0px 4px 8px #00000029;
            box-shadow: 0px 4px 8px #00000029;
    overflow: hidden;
}
.sort_layer_item {
    width: 102px;
    height: 38px;
    padding-left: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 18px;
    white-space: nowrap;
}

.sort_filter_dropdown_image {
    margin-left: 13px;
    width: 18px;
    height: 18px;
}
.mobile_list_main_title {
    margin-left: 20px;
    margin-top: 66px;
    font-weight: 700;
    color: #101010;
    font-size: 20px;
}

.mobile_list_filter_container_parent {
    width: 100vw;
    margin-top: 16px;
    overflow: scroll;
}
.mobile_list_filter_container_parent::-webkit-scrollbar {
    display: none; /* Webkit 기반 브라우저(Chrome, Safari 등)의 스크롤바를 숨김 */
}

.mobile_list_filter_container_parent {
    scrollbar-width: none; /* Firefox 브라우저의 스크롤바를 숨김 */

}
.mobile_list_filter_container {
    /*width: 414px;*/
    width: 100vw;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: row;
         flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    /* Chrome, Edge, Safari 등을 위한 설정 */
    ::-webkit-scrollbar {
        display: none;  /* 스크롤바 숨김 처리 */
    }

    /* Firefox를 위한 설정 */
    scrollbar-width: none;  /* 스크롤바 숨김 처리 */
}

.mobile_list_filter {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    height: 42px;
    padding: 12px 14px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    background-color: #ffffff;
    border-radius: 100px;
    border: 1px solid;
    border-color: #e5e5e5;
}
.mobile_list_filter_text_title {
    font-weight: 400;
    color: #000000;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 18px;
    white-space: nowrap;
}

.mobile_list_filter_text_name {
    margin-left: 13px;
    font-weight: 500;
    color: #f14556;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 18px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
}

.mobile_list_filter_job_type_count {
    margin-left: 4px;
    width: 20px;
    height: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    border-radius: 22px;
    background-color: #f14556;
    font-weight: 500;
    color: #ffffff;
    font-size: 11px;
}

.mobile_list_filter_dropdown_image {
    margin-left: 6px;
    width: 18px;
    height: 18px;
}

.mobile_career_filter_dropdown_image {
    margin-left: 6px;
    width: 18px;
    height: 18px;
}

.mobile_sort_filter_dropdown_image {
    margin-left: 6px;
    width: 18px;
    height: 18px;
}
.mobile_list_item_container_parent {
    margin-top: 44px;
}

.mobile_list_item_container {
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;

}
.mobile_list_item_job_type {
    font-weight: 500;
    color: #f14556;
    font-size: 12px;
}

.mobile_list_item_question {
    margin-top: 6px;
    font-weight: 600;
    color: #000000;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 26px;
}

.mobile_list_item_answer {
    margin-top: 10px;
    width: calc(100vw - 40px);
    overflow: hidden; /* 내용이 div의 크기를 초과할 경우 숨깁니다. */
    white-space: nowrap; /* 내용을 한 줄로 표시합니다. */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 말줄임표를 표시합니다. */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 표시할 최대 줄 수를 2줄로 설정합니다. */
    -webkit-box-orient: vertical;
    white-space: normal;
    font-weight: 400;
    color: #000000b2;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 22px;
}

.mobile_list_item_mentor {
    margin-top: 26px;
    width: calc(100vw - 40px);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    position: relative;
}

.mobile_list_item_mentor_image {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    overflow: hidden;
}
.mobile_list_item_mentor_sub {
    margin-left: 8.6px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
.mobile_list_item_mentor_name {
    font-weight: 700;
    color: #000000b2;
    font-size: 12px;
}
.mobile_list_item_organization_container {
    margin-top: 4px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
}

.mobile_list_item_mentor_organization {
    height: 21px;
    padding: 4px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    font-weight: 500;
    color: #000000b2;
    font-size: 11px;
    vertical-align: center;
}
.mobile_list_item_created {
    margin-left: 8px;
    font-weight: 400;
    color: #00000080;
    font-size: 11px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
}

.mobile_list_item_bookmark {
    position: absolute;
    top: 4.5px;
    right: 20px;
    width: 29px;
    height: 16px;
}

.mobile_list_item_bottom_line {
    margin-top: 31px;
    width: calc(100vw - 40px);
    height: 1px;
    background-color: #00000014;
}


.mobile_list_pagination {
    margin-top: 32px;
    width: 100vw;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
}
.mobile_job_type_layer {
    position: fixed;
    bottom: 0px;
    width: 100vw;
    height: 456px;
    background-color: white;
    z-index: 1001;
}
.mobile_job_title, .mobile_career_title, .mobile_sort_title {
    width: 100%;
    height: 52px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    font-weight: 700;
    color: #101010;
    font-size: 16px;
}
.mobile_job_type_cancel, .mobile_career_cancel, .mobile_sort_cancel {
    position: absolute;
    right: 20px;
    top: 17px;
    font-weight: 500;
    color: #10101080;
    font-size: 14px;

}

.mobile_job_type_item_list {
    width: 100%;
    height: 343px;
    overflow: scroll;
    padding-left: 20px;
    padding-right: 20px;
}
.mobile_job_type_item, .mobile_job_type_item_all, .mobile_career_layer_item, .mobile_sort_layer_item {
    width: 100%;
    height: 46px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
}
.mobile_job_type_check, .mobile_job_type_check_all {
    width: 22px;
    height: 22px;
}
.mobile_job_type_item_text {
    margin-left: 12px;
    font-weight: 400;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 18px;
}
.mobile_job_type_filter_ok, .mobile_career_filter_ok, .mobile_sort_filter_ok {
    margin-top: 20px;
    width: 100%;
    height: 42px;
    background-color: #f14556;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    font-weight: 700;
    color: #ffffff;
    font-size: 16px;
}

.mobile_career_layer, .mobile_sort_layer {
    position: fixed;
    bottom: 0px;
    width: 100vw;
    height: 252px;
    background-color: white;
    z-index: 1001;
}

.mobile_career_radio, .mobile_sort_radio {
    width: 22px;
    height: 22px;
    margin-left: 20px;
}
