/* 공통 */
.scroll-wrap {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* 수정0227 */
 /* .scroll-wrap::-webkit-scrollbar {
    display: none;
}  */
/* // */
.bold {
    font-weight: bold;
}

.blue-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    max-width: 270px;
    border-radius: 22.5px;
    background-color: #1e86ff;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    line-height: 48px;
}


@media screen and (max-width:1024px) {
    .blue-btn {
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        max-width: 270px;
    }

}

/* pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination .page-btn {
    display: block;
    width: 45px;
    height: 45px;
    background: transparent;
    text-align: center;
    line-height: 45px;
    border-radius: 4px;
    border: 1.5px solid #eff0f3;
    font-size: 15px;
    font-weight: 600;
    transition: .2s;
    color: #2a4160;
}

.pagination .page-btn i {
    color: #2a4160;
    font-size: 15px;
    line-height: 45px;
}

.pagination .page-btn:hover {
    border-color: #1e86ff;
    color: #1e86ff;
}

.pagination .page-btn:hover i {
    color: #1e86ff;
}

.pagination .page-btn.active {
    border-color: #1e86ff;
    color: #1e86ff;
}


@media screen and (max-width: 1080px) {

    .pagination {
        gap: 8px;
    }

    .pagination .page-btn {
        width: 32px;
        height: 32px;
        font-size: 11px;
        line-height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pagination .page-btn i {
        font-size: 11px;
    }
}


.fluid-img-wrap {
    position: relative;
}

.fluid-img-wrap::before {
    width: 100%;
    display: block;
    content: "";
    padding-top: 100%;
}

.fluid-img-wrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.title-typ1 {
    font-size: 40px;
    font-weight: bold;
    color: #000;
}

.title-typ2 {
    font-size: 32px;
    font-weight: 800;
    color: #000;
}

.title-typ3 {
    font-size: 26px;
    font-weight: bold;
    color: #000;
}

@media screen and (max-width:1080px) {
    .title-typ1 {
        font-size: 26px;
    }

    .title-typ2 {
        font-size: 16px;
        text-align: center;
    }

    .title-typ3 {
        font-size: 20px;
    }
}


.mark-wrap {
    display: flex;
    align-items: center; 
}

/* 메인페이지 - 풀페이지 */

.bg-section {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



/* 팝업 */

.popup-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.popup-bg.open {
    display: flex;
}

.loginPopup-bg.open {
    display: flex;
}

.pop-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    width: 100vw;
    max-width: 960px;
    background-color: #f4f5f8;
}




@media screen and (max-width: 768px) {

    .popup-bg{
        padding: 40px 24px;
    }

    .popup-bg .popUp_btn_wrap * {
        width: 140px;
        height: 48px;
    }

    .popup-bg .popUp-sub {
        margin-bottom: 40px;
    }

    .popup-bg .popUp_title {
        margin-bottom: 8px;
    }
}

/* // */




/* ================== */

/* 공통컴포넌트 : status ,  */
.filterSection {
    margin-top: 136px;
}

.filterSection .container {
    max-width: 1472px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 수정 241021 */
.filterSection .filter-contents {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    border: 1.5px solid #e4e4e4;
    border-radius: 8px;
    padding: 24px 40px;
}
/* //// */

.filterSection .filter-wrap {
    display: flex;
    align-items: center;
    gap: 48px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #e4e4e4;
}

/* 수정 1205 */
.filterSection .filter-wrap-title {
    font-size: 20px;
    font-weight: bold;
    color: #3a445a;
    min-width: 107px;
    max-width: 107px;
}
/* // */

/* 수정 1205 */
.filterSection .filter-chkbox-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* // */

.filterSection .search-btn-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.filterSection .refresh-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #000;
}

.filterSection .refresh-btn i {
    font-size: 19px;
    color: #fff;
    line-height: 40px;
}

.filterSection .search-btn {
    width: 270px;
    height: 40px;
    background-color: #1e86ff;
    border-radius: 24px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.filterSection .user-chk-wrap {
    display: none;
}

.filterSection .mb-btn {
    display: none;
}

.filterSection .refresh-wrap {
    display: none;
}

/* 수정 및 추가 241021 */
.filterSection .scroll-wrap {
    overflow: unset;
}

@media screen and (max-width: 1440px) {
    .filterSection .filter-chkbox-wrap {
        flex-wrap: wrap;
    }
}
/* ////수정 241021 */

@media screen and (max-width: 1080px) {

.filterSection {
    padding-bottom: 40px;
    margin-top: 70px;
}

.fillter-rodemap {
    padding-bottom: unset;
}

.filterSection .scroll-wrap {
    margin-top: 30px;
}

/* 수정 241021 */
.filterSection .filter-contents {
    border: unset;
    border-radius: unset;
    padding: unset;
}
/* ////// */

.filterSection .filter-wrap {
    gap: 20px;
}

.filterSection .filter-wrap-title {
    font-size: 12px;
    min-width: 64px;
}

/* 수정 241021 */
.filterSection .filter-chkbox-wrap {
    gap: 12px 20px;
}
/* //// */

.checked-item .check-title {
    font-size: 12px;
    color: #202020;
}

/* 수정 241021 */
.filterSection .refresh-wrap {
    position: relative;
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e4e4;
}

.filterSection .scroll-chk-wrap {
    max-width: calc(100% - 54px); /* 새로고침버튼과 간격을 두기 위한 넓이값 */
    margin-top: unset;
    padding-bottom: 2px;
    overflow-x: scroll;
    scrollbar-width: none;
}
/* //// */

.filterSection .user-chk-wrap {
    position: relative;
    display: flex;
    gap: 5px;
    width: 100%;
    max-width: calc(100% - 54px); /* 새로고침버튼과 간격을 두기 위한 넓이값 */
}

.filterSection .refresh-btn {
    display: none;
    position: absolute;
    top: 0;
    right: 16px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
}

.filterSection .refresh-btn i {
    font-size: 14px;
    line-height: 32px;
}

.filterSection .mb-btn {
    display: block !important;
}



.filterSection .user-chk-wrap .user-chk-item {
    display: flex;
    align-items: center;
    border: 1px solid #1e86ff;
    border-radius: 15px;
    padding: 0 10px;
    min-width: fit-content;
    height: 30px;
    font-size: 12px;
    font-weight: 600;
    color: #1e86ff;
    cursor: pointer;
}

.filterSection .user-chk-wrap .user-chk-item .del-icon {
    display: flex;
    font-size: 10px;
    line-height: 30px;
    color: #1e86ff;
    margin-left: 5px;
}

.filterSection .search-btn {
    width: 100%;
    max-width: 270px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
}

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

input[type="checkbox"] {
    display: none;
}

.checkbox-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.checked-item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 0 20px 0 15px;
    height: 45px;
    border: 1.5px solid #eff0f3;
    border-radius: 22.5px;
    cursor: pointer;
}

.checked-item i {
    font-size: 15px;
    color: #1e86ff;
    font-weight: bold;
}

.checked-item.checked {
    border: 1.5px solid #1e86ff;
}


.checked-item .check-title {
    font-size: 15px;
    font-weight: 600;
    color: #2a4160;
}

.form-checkbox:checked+.checked-item {
    border: 1.5px solid  #1e86ff;
}


.form-checkbox:checked~.check-title {
    color: #0097ff;
}



@media screen and (max-width: 1080px) {
    .checked-item {
        height: unset;
        border: unset;
        border-radius: unset;
        padding: unset;
    }

    .checked-item i {
        display: none;
    }

    .form-checkbox:checked+.checked-item {
        border: unset;
    }

    .checked-item.checked {
        border: unset;
    }

    .checked-item .check-title {
        font-size: 12px;
        font-weight: 500;
    }

}






.chartSection {
    background-color: #f4f5f8;
    padding-top: 40px;
    margin-top: 40px;
    padding-bottom: 140px;
}

.chartSection .container {
    display: flex;
    gap: 16px;
}

.chartSection .le-wrap {
    width: 50%;
}


.chartSection .ri-wrap {
    width: 50%;
}


.donut-chart-box .chart-title {
    z-index: 2;
    font-size: 20px;
    font-weight: bold;
    color: #3e445a;
}

.apexcharts-title-text {
    font-size: 20px;
    font-weight: bold;
    color: #3e445a;
}


@media screen and (max-width: 1080px) {

.apexcharts-title-text {
    font-size: 15px;
}



}


/* 차트가 속한 박스 속성 */

.apexcharts-menu-icon,
.apexcharts-reset-icon,
.apexcharts-zoom-icon {
    transform: unset !important;
    margin-right: 3px;
}
.apexcharts-menu-icon {
    padding-top: 1px;
    margin-left: 3px;
}
.apexcharts-reset-icon {
    transform: scale(0.9);
}
.apexcharts-zoomin-icon,
.apexcharts-zoomout-icon {
    transform: scale(0.9);
    margin-right: 2px;
}
.apexcharts-zoomout-icon {
    margin-right: 4px;
}

.apexcharts-reset-icon {
    margin-left: unset !important
}

.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-right,
.apexcharts-legend.apx-legend-position-top.apexcharts-align-right {
    top: 30px !important;
    right: -5px !important;
}

.chart-box .apexcharts-legend-text {
    font-size: 15px !important;
    color: #000 !important;
}

.chartSection .chart-box.donut-chart-box {
    padding-bottom: unset;
}

.donut-chart-box .apexcharts-canvas {
    height: 243px !important;
}

.donut-chart-box #chart3,
.donut-chart-box #chart4 {
    width: 100%;
    position: relative;
    transform: translateY(-12%);
    z-index: 1;
    height: 245px !important;
    min-height: unset !important;
}

/* 수정0227 */
/* 도넛 차트 동그라미 자체 속성 */
.donut-chart-box .apexcharts-pie {
    /* (양옆, 위아래) */
    transform: translate(25%,-10%); 
    min-width: 225px !important;
    max-width: 226px !important;
}

/* 도넛 차트 범주 묶인 박스 */
.donut-chart-box .apexcharts-legend {
    width: 100%;
    max-width: 280px;
    min-height: 152px;
    position: relative !important;
    top: 0%;
    transform: translate(6%,40%);
    display: flex !important;
}

/* // */

.donut-chart-box .apexcharts-legend-text {
    width: 100% !important;
    margin-left: unset !important;
    display: flex !important;
    justify-content: space-between !important;
}

.donut-chart-box .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series {
    display: flex !important;
    padding-bottom: 10px;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #e4e4e4;
}


.donut-chart-box .apexcharts-graphical {
    background-color: #00dcfe;
}

.donut-chart-box .apexcharts-legend.apx-legend-position-bottom,
.donut-chart-box .apexcharts-legend.apx-legend-position-top {
    flex-direction: column;
}


foreignObject {
    overflow: visible !important;
}

 .donut-chart-box .apexcharts-pie {
     transform: translate(31%, 0%);
 }


@media screen and (max-width: 1348px) {
    .donut-chart-box .apexcharts-pie {
        transform: translate(24%, 0%);
    }
}



@media screen and (max-width: 1240px) {
    .donut-chart-box .apexcharts-pie {
        transform: translate(15%, 0%);
    }
   .donut-chart-box .apexcharts-legend {
        transform: translate(-3%, 40%);
   }
}

@media screen and (max-width: 1120px) {
    .donut-chart-box .apexcharts-legend {
        max-width: 240px !important;
    }
    .donut-chart-box .apexcharts-pie {
        transform: translate(12%, 0%);
    }
}

@media screen and (max-width: 1080px) {

    .apexcharts-toolbar {
        top: 30px !important;
    }

    .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-left,
    .apexcharts-legend.apx-legend-position-top.apexcharts-align-left,
    .apexcharts-legend.apx-legend-position-right,
    .apexcharts-legend.apx-legend-position-left {
        top: -28px !important;
    }

    #donut-box,
    #donut-box2 {
        width: 100%;
        height: 100%;
    }

    #donut-box #chart4 ,
    #donut-box2 #chart3 {
        padding: 15px;
        width: 100%;
        height: 100% !important;
        max-height: 395px;
    }


    .donut-chart-box .apexcharts-legend { 
        max-width: fit-content;
    }
    .donut-chart-box .apexcharts-legend-text {
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
    }

    .donut-chart-box .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series {
        align-items: start;
    }

    /* 수정0227 */
    .donut-chart-box .apexcharts-legend {
        transform: translate(-3%, 30%);
        min-height: 236px;
    }
    /* // */

    .donut-chart-box #chart3,
    .donut-chart-box #chart4 {
        width: 100% !important;
        height: 100% !important;
        min-height: unset !important;
        transform: unset;
    }

    .donut-chart-box .apexcharts-canvas {
        width: 100% !important;
        max-width: 573px !important;
        height: unset !important;
    }

    .donut-chart-box .apexcharts-svg {
        max-height: 495px;
        overflow: visible;
    }
    
    .donut-chart-box .apexcharts-legend.apx-legend-position-bottom,
    .donut-chart-box .apexcharts-legend.apx-legend-position-top {
        width: fit-content;
        max-height: unset !important;
    }

    .donut-chart-box .apexcharts-pie {
        transform: translate(30%, 0%) !important;
    }


    .chartSection {
        padding-top: 26px;
        padding-bottom: 80px;
        margin-top: unset;
    }

    .chartSection .container {
        flex-direction: column;
        gap: 42px;
    }

    .chartSection .le-wrap {
        width: 100%;
    }

    .chartSection .ri-wrap {
        width: 100%;
    }


    .metricsSection1 .container {
        gap: unset;
    }


}

@media screen and (max-width: 1024px) {

    #donut-box #chart4,
    #donut-box2 #chart3 {
        padding: 15px;
        padding-top: unset;
    }
    .donut-chart-box .chart-title {
        padding-left: 15px;
    }

    .chartSection .chart-box #chart1,
    .chartSection .chart-box #chart2 {
        min-height: unset !important;
    }

}

@media screen and (max-width: 934px) {
    .donut-chart-box .apexcharts-pie {
        transform: translate(28%, 0%) !important;
    }
}

@media screen and (max-width: 834px) {
    .donut-chart-box .apexcharts-pie {
        transform: translate(20%, 0%) !important;
    }
}

@media screen and (max-width: 768px) {
    .donut-chart-box .apexcharts-pie {
        transform: translate(20%, 5%) !important;
    }

    .chart-box .apexcharts-legend-text {
        font-size: 12px !important;
        padding-left: 17px !important;
    }

    .donut-chart-box .apexcharts-legend-text {
        padding-left: 5px !important;
    }

    .apexcharts-legend-marker {
        top: 1px !important;
    }
}

@media screen and (max-width: 573px) {
    #donut-box #chart4,
    #donut-box2 #chart3 {
        max-height: 269px;
    }

    /* 수정0227 */
    .donut-chart-box .apexcharts-legend {
        transform: translate(-8%, -1%);
    }
    /* // */

    .donut-chart-box .apexcharts-pie {
        transform: translate(23%, 5%) !important;
    }

   .apexcharts-legend.apx-legend-position-bottom.apexcharts-align-left,
   .apexcharts-legend.apx-legend-position-top.apexcharts-align-left,
   .apexcharts-legend.apx-legend-position-right,
   .apexcharts-legend.apx-legend-position-left {
       top: 30px !important;
   }
}

/* 수정0227 */
.listContents {
    background-color: #fff;
    width: 100%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid #e4e4e4;
    margin-top: 12px;
}
/* // */

.listContents .listItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 24px;
    height: 74px;
    cursor: pointer;
    border-bottom: 1px solid #e4e4e4;
}

.listContents .listItem:hover {
    background-color: #e3f0ff;
    border-radius: 4px;
}

.listContents .listItem .content-wrap {
    display: flex;
    align-items: center;
    gap: 25px;
}

.listContents .listItem .list-icon {
    font-size: 20px;
    color: #000;
}

.listContents .listItem:hover .list-icon {
    color: #1e86ff;
}

/* 수정0227 */
/* 수정1205 */
.listContents .listItem .item-type-wrap {
    display: flex;
    gap: 17px;
    min-width: 220px;
    max-width: 220px;
}
/* // */

.listContents .listItem .txt {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #202020;
}

.listContents .listItem .txt:not(:last-child)::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 10px;
    background-color: #404040;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
}

.listContents .listItem:hover .txt {
    color: #1e86ff;
}

.listContents .listItem:hover .txt:not(:last-child)::after {
    background-color: #1e86ff;
}

.listContents .listItem .item-title {
    font-size: 17px;
    font-weight: bold;
    color: #202020;
    line-height: 1.18;
    width: 100%;
    max-width: 365px;
    White-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listContents .listItem:hover .item-title {
    color: #1e86ff;
}


/* 수정0227 */
.listContents .scroll-wrap {
    overflow-y: scroll;
    -ms-overflow-style: auto;
    scrollbar-width: auto;
}
/* // */


@media screen and (max-width:1080px) {

.listContents {
    max-height: 680px;
    margin-top: 16px;
    border-radius: 8px;
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.1);
}

.listContents .listItem {
    border-bottom: 1px solid #e4e4e4;
    height: unset;
    padding: 5px 13px;
}


.listContents .listItem .content-wrap {
    flex-direction: column;
    align-items: start;
    gap: 4px;
}

.listContents .listItem .item-title {
    max-width: unset;
    font-size: 14px;
}

.listContents .listItem .txt {
    font-size: 13px;
}

}

.chartSection .chartContents {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chartSection .chart-box {
    width: 100%;
    padding: 24px 32px 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.1);
}


@media screen and (max-width:1080px) {

    .chartSection .chartContents {
        gap: 16px;
    }


    .chartSection .chart-box {
        padding: 15px;
    }

}

@media screen and (max-width:1024px) {
.chartSection .chart-box {
    padding: 15px 10px 0 0;
}

.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-right,
.apexcharts-legend.apx-legend-position-top.apexcharts-align-right {
    justify-content: flex-start !important;
    top: 28px !important;
}

}
#section2 {
    background-image: url('/images/main-bg2.png');
}


/* ------ 섹션 0 */





#section0 {
    position: relative;
    background-image: url('/images/main-bg1.png');
}

.mb-table {
    display: none;
}

#section0 table {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 800px;
    height: calc(100% - 80px);
}

#section0 table td {
    width: calc(100% / 8);
}

#section0 table .td-item {
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

#section0 table .td-link-item {
    position: relative;
}

#section0 table .td-link-item:hover {
    background-color: unset;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

#section0 table .bg-item1:hover {
    background-image: url('/images/item-bg1.jpg');
}
#section0 table .bg-item2:hover {
    background-image: url('/images/item-bg2.jpg');
}
#section0 table .bg-item3:hover {
    background-image: url('/images/item-bg3.jpg');
}
#section0 table .bg-item4:hover {
    background-image: url('/images/item-bg4.jpg');
}
#section0 table .bg-item5:hover {
    background-image: url('/images/item-bg5.jpg');
}
/* 240716 */
#section0 table .bg-item6:hover {
    background-image: url('/images/item-bg6.jpg');
}
/* ///// */

#section0 table .td-link-item .item-inner {
    height: 100%;
    padding-left: 24px;
    top:unset;
}

#section0 table .commu-item {
    position: relative;
}

#section0 table .commu-item .item-inner {
    top: 50%;
    transform: translate(-50%, -50%);
}

#section0 table .commu-item .icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#section0 table .commu-item:hover .icon-wrap {
    background-color: #202020;
}

#section0 table .commu-item .icon-wrap i {
    font-size: 36px;
    color: #fff;
}

#section0 table .commu-item .item-title {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    text-align: center;
}

#section0 table .td-title {
    font-size: 28px;
    font-weight: bold;
    color: #222;
    padding-top: 30%;
    transition: 0.4s ease;
}

#section0 table .line-title,
#section0 table .line-title2 {
    padding-top: 20%;
}

#section0 table .td-sub {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-top: 5px;
}

#section0 table .td-title-sub {
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

#section0 table .td-title2 {
    font-size: 28px;
    font-weight: bold;
    color: #222;
    line-height: 1.2;
    margin-top: 5px;
}

#section0 table .td-link-item .item-inner:hover .td-title {
    padding-top: 68%;
    color: #fff;
}

#section0 table .td-link-item .item-inner:hover .line-title {
    padding-top: 58%;
    color: #fff;
}

#section0 table .td-link-item .item-inner:hover .line-title2 {
    padding-top: 42%;
    color: #fff;
}

#section0 table .td-link-item .item-inner:hover .td-sub,
#section0 table .td-link-item .item-inner:hover .td-title2 {
    color: #fff;
}

#section0 table .td-link-item .arrow-icon {
    display: none;
    transition: 0.5s ease;    
    position: absolute;
    bottom: 32px;
    right: 32px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    opacity: 0;
}


#section0 table .td-link-item .item-inner:hover  .arrow-icon {
    display: flex;
    opacity: 1;
}


#section0 .table-logo {
    display: flex;
    max-width: 324px;
    margin: 0 auto;
}

#section0 .table-logo.mb {
    display: none;
}

#section0 .td-big-item {
    position: relative;
    padding: 0 12px;
}

#section0 .td-big-item .item-inner {
    top: 50%;
    transform: translate(-50%, -50%);
}

#section0 .item-inner {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}


#section0 .btn-wrap {
    margin: 32px auto 0;
    max-width: 360px;
    display: flex;
    justify-content: center;
    padding-top: 24px;
    border-top: 4px solid #0745a0;
}

#section0 .login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    width: 100%;
    max-width: 360px;
    border-radius: 8px;
    background-color: #0745a0;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

#section0 .login-btn .login-icon {
    margin-left: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#section0 .login-btn .login-icon i {
    font-size: 12px;
    color: #074fa0;
}


#section0 .td-radius-item .item-inner {
    width: 100%;
    height: 100%;
    position: relative;
    top: 34px;
    padding-left: 24px;
    display: flex;
    cursor: pointer;
}

#section0 .home-logo {
    position: absolute;
    display: flex;
    max-width: 116px;
}

#section0 .td-radius-item {
    width: 100%;
    height: 100%;
}

#section0 .td-radius-item .title {
    position: absolute;
    top: 32px;
}

#section0 .td-radius-item .dir-btn {
    position: absolute;
    top: 100px;
}


#section0 .square-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

#section0 .square-big-item {
    position: absolute;
    top: 50%;
    left: 12.5%;
    transform: translateY(-50%);
    width: calc( ( 1920px / 8) * 2);
    height: calc((800px / 4) * 2);
}

#section0 .square-item {
    width: calc( 100% / 8);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

#section0 .w-bg {
    background-color: rgba(255, 255, 255, 0.64);
}

#section0 .ww-bg {
    background-color: rgba(255, 255, 255, 0.9);
    border: unset;
}

#section0 table .td-item.radius-bg {
    border-bottom-right-radius: 180px;
}

#section0 .hover-item {
    transition: 0.3s ease;
}

#section0 .hover-item:hover {
    background-color: #fff;
}

#section0 .radius-bg .title-wrap {
  padding-top: 35px;
  padding-left: 25px;
}

#section0 .radius-bg .inner-img {
    max-width: 117px;
}

#section0 .radius-bg .square-title {
    font-size: 16px;
    margin-top: 5px;
}

#section0 .radius-bg .dir-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
 }

#section0 .radius-bg .dir-btn i {
    font-size: 16px;
    color: #f5f5f5;
}



/* -- 스크롤 다운 버튼 */
#section0 .scroll-btn {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 72px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

#section0 .scroll-btn span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 32px;
    height: 64px;
    margin-left: -15px;
    border: 3px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

#section0 .scroll-btn .scroll-icon {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
    box-sizing: border-box;
}

@-webkit-keyframes sdb10 {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes sdb10 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        transform: translate(0, 38px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


@media screen and (max-width: 1700px) {

    #section0 .table-logo {
        max-width: 80%;
    }

    #section0 .btn-wrap {
        max-width: 90%;
    }

    #section0 .login-btn {
        max-width: 100%;
    }

}

@media screen and (max-width: 1456px) {

    #section0 table .td-title,
    #section0 table .td-title2 {
        font-size: 24px;
    }

    #section0 table .td-title {
        padding-top: 20%;
    }

    #section0 .td-radius-item .item-inner {
        top: 20px;
    }

    #section0 table .td-sub {
        font-size: 16px;
    }

    #section0 table .td-title-sub {
        font-size: 16px;
    }

    #section0 table .td-link-item .item-inner,
    #section0 .td-radius-item .item-inner {
        padding-left: 12px;
    }

    #section0 .login-btn {
        font-size: 20px;
    }

    #section0 .login-btn .login-icon {
        margin-left: 12px;
    }

    #section0 table .td-link-item .arrow-icon {
        bottom: 16px;
        right: 16px;
    }
        

}

@media screen and (max-width: 1080px) { 


/* ----- 풀페이지 반응형 */

        .fp-section,
        .fp-tableCell {
            height: auto !important;
            padding-top: unset !important;
        }

        #fullpage > .fp-section {
            padding-top: unset !important;
        }

        

    .pc-table {
        display: none;
    }

    .scroll-btn {
        display: none;
    }

    /* ------- 모바일 table */
    .mb-table {
        display: table;
    }

    #section0 {
        margin-top: 45px;
        background-image: url('/images/main-bg1-m.png');
    }

    #section0 table {
        height: 100%;
        min-height: 685px;
    }

    #section0 table td {
        width: calc(100% / 3);
    }

    #section0 table .mb-blue-td {
        height: 140px;
    }

    #section0 table .td-item {
        border-radius: 3px;
    }

    #section0 table .td-item.radius-bg {
        border-bottom-right-radius: 93px;
    }

    #section0 .radius-bg .dir-btn {
        width: unset;
        height: unset;
        min-width: unset;
        border-radius: unset;
        background-color: unset;
    }

    #section0 .home-logo {
        max-width: 56px;
    }

    #section0 .td-radius-item .title {
        font-size: 14px;
        font-weight: bold;
        top: 20px;
    }

    #section0 .radius-bg .dir-btn {
        top:unset;
        bottom: -63px;
    }

    #section0 .radius-bg .dir-btn i {
        font-size: 13px;
        color: #222;
    }

    #section0 table .td-link-item .item-inner {
        padding-left: unset;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    #section0 table .td-title {
        padding-top: unset;
        font-size: 14px;
        text-align: center;
        line-height: 1.27;
    }

   #section0 table .commu-item .item-title {
        margin-top: unset;
        font-size: 14px;
   }

    #section0 table .td-link-item .item-inner:hover .td-title {
        padding-top: unset;
        color: #222;
    }

    #section0 table .td-link-item .item-inner:hover .line-title {
        padding-top: unset;
        color: #222;
    }

    #section0 table .td-link-item .item-inner:hover .line-title2 {
        padding-top: unset;
        color: #222;
    }

    #section0 table .td-link-item .item-inner:hover .td-sub,
    #section0 table .td-link-item .item-inner:hover .td-title2 {
        color: #222;
    }

    #section0 table .td-link-item:hover {
         background-color: rgba(255, 255, 255, 0.64);
    }

    #section0 .blue-bg {
        background-color: rgba(7, 69, 160, 0.64);
    }

    #section0 .td-big-item .item-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22.5px;
        max-width: 478px;
        margin: 0 auto;
    }

    #section0 .table-logo {
        max-width: 130px;
        margin: unset;
    }

    #section0 .btn-wrap {
        position: relative;
        margin: unset;
        padding-top: unset;
        max-width: unset;
        border-top: unset;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
        line-height: 1.3;
    }

    #section0 .login-icon {
        bottom: 5px;
        position: absolute;
        margin-left: 22px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #section0 .login-icon i {
        font-size: 12px;
    }

    #section0 .table-logo.mb {
        display: flex;
        max-width: 129px;
    }

    #section0 .table-logo.pc {
        display: none;
    }

    /* 23수정 */
    #section0 .login-btn {
        background-color: unset;
        text-align: start;
    }
    
    /* 23수정 */
    #section0 .login-btn .login-icon {
        bottom: 10px;
    }


    #section0 .td-radius-item .dir-btn {
        margin-left: 12px;
        bottom: unset;
        display: flex;
        top: 100px;;
    }

}

/* --- 로그인 팝업 */
.loginPopup .pop-container {
    width: 100%;
    max-width: 480px;
    padding: 70px 32px 56px;
    display: flex;
    justify-content: center;
    border-radius: 4px;
}

.loginPopup .login-logo {
    width: 100%;
    max-width: 161px;
}

.loginPopup .form-wrap {
    width: 100%;
    margin-top: 52px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.loginPopup .form-input {
    width: 100%;
    max-width: 400px;
    height: 56px;
    border-radius: 28px;
    box-shadow: 0 3px 8px 0 rgba(30, 134, 255, 0.1);
    border: solid 1.5px #eff0f3;
    background-color: #fff;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    color: #1d86ff;
}

.loginPopup .form-input::placeholder {
    font-size: 15px;
    font-weight: 600;
    color: #6e82a3;
}

.loginPopup .form-input:focus {
    border: solid 1.5px #1e86ff;
}

.loginPopup .login-btn {
    margin-top: 32px;
    max-width: unset;
}

.loginPopup .join-btn {
    margin-top: 32px;
   font-size: 15px;
   font-weight: 600;
   color: #6e82a3;
   text-decoration: underline;
}

.loginPopup .close-btn {
    font-size: 24px;
    color: #000;
    position: absolute;
    top: 32px;
    right: 32px;
    cursor: pointer;
}



@media screen and (max-width: 768px) {
    .loginPopup .pop-container {
        max-width: 90%;
        padding: 48px 16px 28px;
    }
     .loginPopup .form-input {
        max-width: unset;
        height: 48px;
        padding: 0 12px;
        font-size: 14px;
     }

    .loginPopup .form-input::placeholder {
        font-size: 14px;
    }

    .loginPopup .close-btn {
        font-size: 20px;
        top: 20px;
        right: 20px;
    }

    .loginPopup .login-logo {
        max-width: 156px;
    }

    .loginPopup .form-wrap {
        margin-top: 32px;
    }
}


#section1 .section-container {
  display: flex;
}

#section1 .content-wrap {
    height: 100%;
}

#section1 .le-wrap {
    position: relative;
    width: 50%;
    height: 100%;
    background-color: #0745a0;
}

#section1 .le-wrap .bg-logo {
    position: absolute;
    bottom: 0;
    left: -20px;
    max-width: 792px;
}

#section1 .le-wrap .content-wrap {
    padding-left: 26%;
    padding-right: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: fit-content;
}

#section1 .le-wrap .title {
    font-size: 24px;
    color: #fff;
}

#section1 .le-wrap .info {
    font-size: 28px;
    color: #fff;
    line-height: 1.57;
    margin-top: 20px;
}

#section1 .le-wrap .inner-info {
    margin-top: 16px;
}

#section1 .ri-wrap {
    position: relative;
    width: 50%;
    height: 100%;
    background: #ededed;
}

/* 수정0227 */
#section1 .ri-wrap .content-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-56%);
    height: fit-content;
    width: 100%;
    max-width: 1024px;
}
/* // */

.effect-tabs {
   margin-top: 90px;
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 520px;
}

.effect-tabs .tab-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-left: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
}

.effect-tabs .tab-link::before {
    position: absolute;
    content: "";
    top: 10px;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #cbcbcb;
}

.effect-tabs .tab-link.current {
    border-bottom: 2px solid #00dcfe;
}

.effect-tabs .tab-link.current::before {
    background-color: #00dcfe;
}

.effect-tabs .tab-link:not(:first-child) {
    margin-top: 24px;
}

.effect-tabs .tab-link .tab-title {
    font-size: 24px;
    font-weight: 600;
    color: #cbcbcb;
}

.effect-tabs .tab-link.current .tab-title {
    color: #00dcfe;
}

.effect-tabs .tab-link .tab-arrow {
    display: none;
    font-size: 29px;
    color: #00dcfe;
}

.effect-tabs .tab-link.current .tab-arrow {
    display: flex;
}

.effect-content {
    display: none;
    padding: 15px;
    height: 100%;
}

.effect-content.current {
    display: inherit;
}

#section1 .le-wrap .btn-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    justify-content: right;
    z-index: 2;
}

#section1 .le-wrap .link-btn {
    margin-top: 48px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

#section1 .le-wrap .link-btn i {
    font-size: 16px;
    color: #fff;
    margin-left: 11px;
}

#section1 .effect-container {
    padding-top: unset;
}


/* 공용 */
.effect-container {
   padding-top: 100px;
   padding-left: 8%;
}

.effect-container .logo-s {
    max-width: 117px;
}

.effect-container .eff-title {
    font-size: 40px;
    color: #0745a0;
}

.effect-container .eff-title > span {
    color: #0745a0;
}

.effect-container .eff-img {
    margin-top: 24px;
    max-width: 620px;
}

/* 수정0227 */
.effect-container .eff-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 24px;
    min-height: 130px;
}
/* // */

.effect-container .mark-wrap {
    display: flex;
    align-items: start;
    gap: 16px;
}

.effect-container .mark-wrap .mark {
    display: flex;
    width: 4px;
    height: 4px;
    min-width: 4px;
    min-height: 4px;
    background-color: #000;
}

.effect-container .mark-wrap {
    gap: 10px;
    align-items:center;
}

.effect-container .eff-list .eff-content {
    font-size: 18px;
    color: #000;
    line-height: 1.5;
}



/* 1920보다 클 때 */
@media screen and (min-width: 1921px) {

    .effect-container .eff-list .eff-content {
        font-size: 24px;
    }

    /* 수정0227 */
    .effect-container .eff-list {
        min-height: 158px;
    }
    /* // */
}

/* 수정0227 */
@media screen and (max-width: 1538px){
    .effect-container .eff-list {
        min-height: 158px;
    }
}
/* // */


@media screen and (max-width: 1524px) {

#section1 .le-wrap .content-wrap {
    padding-left: 12%;
}


}


/* 수정0227 */
@media screen and (max-width: 1178px) {
    .effect-container .eff-list {
        min-height: 185px;
    }
}
/* // */


@media screen and (max-width: 1080px) {

    #section1 .le-wrap .content-wrap {
        padding: 58px 15px 0;
        background-color: #fff;
        position: unset;
        transform: unset;
        height: unset;
    }

    #section1 .ri-wrap .content-wrap {
        position: unset;
        transform: unset;
        height: unset;
    }

    #section1 .section-container {
        flex-direction: column;
    }

    #section1 .le-wrap,
    #section1 .ri-wrap {
        position: unset;
        width: 100%;
        background-color: unset;
    }

    #section1 .le-wrap {
        position: relative;
    }

    #section1 .le-wrap .title {
        font-size: 28px;
        color: #000;
        margin-bottom: 20px;
    }

    #section1 .le-wrap .info {
        font-size: 14px;
        color: #000;
        line-height: 1.43;
        margin-top: 2px;
    }

    .effect-container {
        padding: unset;
        display: flex;
        flex-direction: column;
    }

    .effect-content {
        background-color: #fff;
        padding-top: 24px;
    }

    .effect-container .img-wrap {
        order: 1; 
        margin-bottom: 24px;
    }

    .effect-container .eff-img {
        max-width: unset;
        margin-top: unset;
    }

    .effect-container .fluid-img-wrap {
        margin-bottom: 25px;
    }

    .effect-container .logo-s {
        order: 2;
    }

    .effect-container .eff-title {
        order: 2;
        font-size: 32px;
    }

    /* 수정0227 */
    .effect-container .eff-list {
        order: 3;
        margin-top: 20px;
        gap: 16px;
        min-height: unset;
    }
    /* // */

    .effect-container .eff-list .eff-content {
        font-size: 14px;
        opacity: 0.7;
        line-height: 1.43;
    }

    .effect-tabs {
        justify-content: space-between;
        max-width: 100%;
        margin: 50px auto 0;
        flex-direction: row;
    }

    .effect-tabs .tab-link {
        padding-left: unset;
        padding-bottom: unset;
        width: fit-content;
       justify-content: center;
    }

    .effect-tabs .tab-link:not(:first-child) {
        margin-top: unset;
    }

    .effect-tabs .tab-link.current {
        border-bottom: unset;
    }

    .effect-tabs .tab-link.current .tab-arrow {
        display: none;
    }

    .effect-tabs .tab-link .tab-title {
        font-size: 14px;
        font-weight: 500;
    }

    .effect-tabs .tab-link.current .tab-title {
        color: #0745a0;
    }

    .effect-tabs .tab-link::before {
        display: none;
    }

    .effect-tabs .tab-link.current::before {
        display: flex;
        background-color: #0745a0;
        opacity: 0.2;
        top: -1px;
        left: -6px;
    }

    #section1 .le-wrap .bg-logo {
        bottom: unset;
        left: unset;
        right: 0;
        top: 0;
        max-width: 314px;
        z-index: 9;
    }

    #section1 .le-wrap .btn-wrap {
        position: absolute;
        margin-top: unset;
        top: 20px;
        right: 15px;
    }

     #section1 .le-wrap .link-btn {
        color: #000;
        font-size: 14px;
        font-weight: 600;
     }

     #section1 .le-wrap .link-btn i {
        font-size: 14px;
        color: #000;
        margin-left: unset;
     }
}




#section2 .section-container {
    display: flex;
}

#section2 .content-wrap {
    height: 100%;
}

#section2 .ri-wrap {
    position: relative;
    width: 50%;
    height: 100%;
}

#section2 .le-wrap {
    position: relative;
    width: 50%;
    height: 100%;
    padding-left: 10%;
}

#section2 .le-wrap .inner-wrap {
    position: absolute;
    bottom: 104px;
}

#section2 .le-wrap .title {
    font-size: 56px;
    color: #f5f5f5;
    line-height: 1.43;
    font-weight: bold;
}

#section2 .le-wrap .sub {
    font-size: 18px;
    color: #f5f5f5;
    line-height: 1.78;
    margin-top: 16px;
}

#section2 .content-wrap {
    display: flex;
    flex-wrap: wrap;
}

#section2 .section-container {
    height: 100%;
}

#section2 .content-box {
    width: calc(100% / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background-color: rgba(0, 0, 0, 0.56);
    transition: 0.3s ease;
}

#section2 .content-box:nth-child(1){
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

#section2 .content-box:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#section2 .content-box:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}


#section2 .content-img {
    max-width: 112px;
}

#section2 .content-box:hover {
    background-color: rgba(0, 0, 0, 0.75);
}

#section2 .info-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}


#section2 .info {
    font-size: 18px;
    color: #fff;
    line-height: 1.43;
    margin-top: 20px;
}


/* 1920보다 클 때 */
@media screen and (min-width: 1921px) {

    #section2 .info-title {
        font-size: 28px;
    }
    
    #section2 .info {
        font-size: 18px;
    }

}

@media screen and (max-width:1440px) {
    #section2 .le-wrap {
        padding-left: 5%;
    }

    #section2 .le-wrap .title {
        font-size: 48px;
    }

    #section2 .le-wrap .sub {
        font-size: 16px;
    }

    #section2 .content-img {
        max-width: 92px;
    }

    #section2 .info {
        margin-top: 18px;
    }

}

@media screen and (max-width:1280px) {
#section2 .content-box {
    flex-direction: column;
    text-align: center;
}
}



@media screen and (max-width:1080px) {

#section2 {
    position: relative;
    margin-top: 100px;
    padding-top: 740px;
}

#fullpage>#section2.fp-section {
    padding-top: 820px !important;
}

#section2 .fp-tableCell {
    position: absolute;
    top: 0;
    height: 100% !important;
    width: 100%;
}

#section2 .section-container {
    flex-direction: column;
}


#section2 .le-wrap {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 40px;
    padding-left: 15px;
}


#section2 .content-img {
    max-width: 72px;
}

#section2 .le-wrap .title {
    font-size: 26px;
    line-height: 1.23;
}

#section2 .le-wrap .sub {
    font-size: 14px;
    line-height: 1.71;
}

#section2 .ri-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: unset;
}

#section2 .info {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.31;
}

#section2 .ri-wrap .info-wrap {
    text-align: start;
}

#section2 .le-wrap .inner-wrap {
    bottom: unset;
}

#section2 .info-title {
    font-size: 16px;
}

#section2 .content-box {
    flex-direction: row;
    width: 100%;
    padding: 20px 0 20px 25px;
    justify-content: start;
    background-color: rgba(0, 0, 0, 0.76);
    gap: 30px;
}

#section2 .content-box:nth-child(2n-1) {
    background-color: rgba(0, 0, 0, 0.56);
}

#section2 .content-box:nth-child(1),
#section2 .content-box:nth-child(2) {
    border-bottom: unset;
}

#section2 .content-wrap {
    height: unset;
}

}


@media screen and (max-width:1024px) {

    #fullpage>#section2.fp-section {
        padding-top: 720px !important;
    }

}


#section3 {
    position: relative;
}

#section3 .section-container {
    padding-top: 48px !important;
    max-width: 1552px;
    padding: 0 16px;
    margin: 0 auto;
    position: absolute;
    top: calc(50% - 48px);
    left: 50%;
    transform: translate(-50%, -50%);
    height: fit-content;
}


.commu-tabs {
   width: 100%;
   display: flex;
   justify-content: end;
   gap: 40px;
}

.commu-tabs .tab-link {
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    color: #707070;
}

.commu-tabs .tab-link.current {
   position: relative;
   font-weight: bold;
   color: #0745a0;
}

.commu-tabs .tab-link.current::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #0745a0;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.commu-content {
    margin-top: 70px;
}

.commu-container {
    display: none;
}

.commu-container.current {
    display: inherit;
}

.commu-list-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.commu-list-wrap .commu-item {
    width: calc((100% - 30px * 4) / 5);
    padding: 32px 24px;
    max-height: 280px;
}



.commu-list-wrap .commu-head-item {
    background-color: unset;
    padding: unset;
    padding-bottom: 32px;
}

.commu-list-wrap .commu-head-item .head-title {
    font-size: 56px;
    font-weight: bold;
    color: #000;
    line-height: 1;
}

.commu-list-wrap .commu-head-item .head-sub {
    font-size: 18px;
    color: #707070;
    line-height: 1.33;
    margin-top: 16px;
    height: calc(18px * 1.33 * 3);
}

.commu-list-wrap .commu-head-item .link-btn,
.commu-list-wrap .commu-head-item .link-btn i {
    font-size: 16px;
    color: #000;
    line-height: 1.44;
    margin-top: 93px;
}

.commu-list-wrap .commu-item .type-sticker {
    width: 80px;
    height: 26px;
    background-color: #0745a0;
    border-radius: 13px;
    line-height: 26px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.commu-list-wrap .commu-item .item-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
    color: #222;
    margin-top: 12px;
    White-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(18px * 1.33 * 3);
}

.commu-list-wrap .commu-item .item-date {
    margin-top: 93px;
    font-size: 14px;
    color: #aaa;
}

.commu-list-wrap .commu-link-item {
    border-radius: 32px;
    background-color: #0745a0;
    padding-left: 40px;
}

.commu-list-wrap .commu-link-item .commu-logo {
    max-width: 130px;
    margin-top: 64px;
}

.commu-list-wrap .commu-link-item .link-btn {
    margin-top: 45px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
}

.commu-list-wrap .commu-link-item .link-btn i {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-left: 10px;
}

.commu-list-wrap.mb,
.commu-link-item.mb {
      display: none;
}

/* 풀페이지 푸터 높이를 위한 속성 추가 */
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide {
    height: auto !important;
}

.fp-auto-height .fp-tableCell {
    height: auto !important;
}




@media screen and (max-width: 1280px) { 

    .commu-tabs {
        gap: 32px;
    }

    .commu-list-wrap {
        gap: 24px;
    }

    .commu-list-wrap .commu-item {
    width: calc((100% - 24px * 4) / 5);
    }

    .commu-list-wrap .commu-head-item .head-title {
        font-size: 48px;
    }

    .commu-list-wrap .commu-head-item .head-sub {
        font-size: 16px;
    }

}


@media screen and (max-width: 1080px) {

    #section3 {
         position: unset;
    }

    .commu-list-wrap .commu-item:last-child {
            display: none;
    }

    #section3 .section-container {
        padding-top: 80px;
        margin-bottom: 96px;
        position: unset;
        transform: unset;
        height: unset;
    }
    .commu-tabs {
        display: none;
    }

    .commu-container .scroll-wrap {
        overflow-x: scroll;
        margin-top: 46px;
    }

    .commu-list-wrap {
        gap: 10px;
        margin-top: 46px;
    }

    .commu-list-wrap.pc {
        display: none;
    }

    .commu-list-wrap .commu-head-item {
        display: none;
    }

    .commu-content .commu-header-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .commu-content .commu-header-wrap .title {
        font-size: 28px;
        font-weight: bold;
        color: #000;
    }

    .commu-content .commu-header-wrap .link-btn {
        font-size: 14px;
        font-weight: 600;
        color: #000;
    }

    .commu-content .commu-header-wrap i {
        font-size: 14px;
        font-weight: 600;
        color: #000;
        margin-left: 5px;
    }

    .commu-content .commu-sub {
        font-size: 14px;
        font-weight: 300;
        color: #000;
        opacity: 0.8;
    }

    .commu-list-wrap .commu-item {
        width: calc((100% - 10px * 1) / 2);
        padding: 12px 8px;
    }

    .commu-list-wrap .commu-item .type-sticker {
        font-size: 12px;
        width: 60px;
        height: 24px;
    }

    .commu-list-wrap .commu-item .item-title {
        font-size: 14px;
        line-height: 1.43;
        height: calc(14px * 1.43 * 2);
        -webkit-line-clamp:2;
        margin-top: 10px;
    }

    .commu-list-wrap .commu-item .item-date {
        font-size: 12px;
        margin-top: 43px;
    }

    .commu-list-wrap .commu-link-item {
        border-radius: unset;
    }

    .commu-list-wrap .commu-link-item .commu-logo {
        max-width: 102px;
        margin-top: 12px;
    }

    .commu-list-wrap .commu-link-item .link-btn {
        font-size: 14px;
        margin-top: 43px;
    }

    .commu-list-wrap .commu-link-item .link-btn i {
        font-size: 14px;
    }
}

/* ======= 사업소개 about ====== */

/* -- 공통 */
.about-section {
    margin-bottom: 120px;
}

.about-section .content-wrap {
    margin-top: 32px;
    width: 100%;
}

.about-section .container {
    max-width: 1280px;
    margin: 0 auto;
}

/* -- about 개별 */
.about-section1 {
    margin-top: 160px;
}

.about-section1 .banner-wrap {
    position: relative;
    background-image: url('/images/about-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 560px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.about-section1 .content-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.about-section1 .title {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}

.about-section1 .info {
    margin-top: 32px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
}

@media screen and (max-width: 1080px) { 

.about-section1{
    margin-top: 45px;
    margin-bottom: 56px;
}

.about-section1 .banner-wrap {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding-top: 420px;
}

.about-section1 .title {
    font-size: 16px;
}

.about-section1 .info {
    font-size: 20px;
    line-height: 1.6;
    margin-top: 16px;
}

.about-section1 .content-wrap {
    text-align: left;
    top: unset;
    bottom: 10px;
    padding-left: 24px;
}

}
/* --성과목표 */
.about-section2 .le-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

.about-section2 .goal-img {
    max-width: 200px;
}

.about-section2 .plus-mark {
    font-size: 24px;
    color: #929292;
}

.about-section2 .content-wrap {
    display: flex;
    align-items: center;
    gap: 48px;
}

.about-section2 .content {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: #202020;
}

.about-section2 .mark, 
.about-section2 .goal-sub {
    font-size: 14px;
    color: #202020;
    line-height: 1.71;
    opacity: 0.6;
    margin-top: 48px;
}

.about-section2 .mb {
    display: none;
}

@media screen and (max-width:1220px) {
.about-section2 .le-wrap {
    gap: 12px;
    min-width: 440px;
}
}

@media screen and (max-width:1080px) {

.about-section {
    margin-bottom: 56px;
}

.about-section2 .mb {
    display: flex;
}
.about-section2 .content-wrap {
    gap: 24px;
    flex-direction: column;
    text-align: center;
}

.about-section2 .content {
    font-size: 16px;
}

.about-section2 .mark,
.about-section2 .goal-sub {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.54;
}

.about-section2 .goal-img {
    max-width: 124px;
    border-radius: 16px;
    margin: 0 auto;
}

.about-section2 .le-wrap {
    min-width: unset;
    gap: 14px;
}

.about-section2 .plus-mark {
    font-size: 20px;
}

}
.about-section3 .img-wrap {
    margin-top: 32px;
}

.about-section4 {
    margin-bottom: 140px;
}


.about-section3 .mb-24 {
    display: none;
}

@media screen and (max-width:1080px) {

.about-section3 .container {
    padding: unset;
}

.about-section3 .img-wrap {
    max-width: 446px;
    margin: 24px auto 0;
}

.about-section4 {
    margin-bottom: 64px;
}

.about-section4 .title-typ2 {
    text-align: left;
}

.about-section4 .scroll-wrap {
    max-width: 1080px;
    margin-top: 24px;
}

.about-section4 .img-wrap {
    min-width: 1080px;
}

}

@media screen and (max-width:1024px) { 
    .about-section3 .pc-24 {
            display: none;
        }
    .about-section3 .mb-24 {
            display: flex;
        }
    .about-section3 {
        position: relative;
        background-color: #F4F5F8;
    }

    .about-section3 .title-typ2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 24px;
    }
}

/* ======= 총사업현황 status ====== */



/* 수정0227 */
.statusSection2 .scroll-wrap {
    /* max-height: 1462px; */
    overflow-y: scroll;
    -ms-overflow-style: auto;
}

/* // */


@media screen and (max-width: 1080px) {
.statusSection2 .scroll-wrap {
    margin-top: unset;
}

}


/* 성과 세부정보 팝업 */
.statusPopup .pop-container {
    padding: 32px 24px;
    background-color: #f4f5f8;
}

.statusPopup .pop-title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin-bottom: 24px;
}

.statusPopup .info-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.statusPopup .info-item-wrap {
    display: flex;
    gap: 16px;
}

.statusPopup .info-item {
    padding: 20px 24px;
    background-color: #fff;
    border-radius: 8px;
}


.statusPopup .info-item-wrap .info-item {
    width: calc(100% / 2 - 16px);
    display: flex;
    flex-direction: column;
}

.statusPopup .info-inner-item {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4e4e4;
}

.statusPopup .info-link-item .info-inner-item {
    border-bottom: unset;
    padding-bottom: unset;
}

.statusPopup .info-inner-item:not(:first-child) {
    padding-top: 12px;
}

.statusPopup .info-inner-item .item-title {
    font-size: 16px;
    font-weight: 500;
    color: #9c9c9c;
}

.statusPopup .info-inner-item .item-content {
    font-size: 16px;
    font-weight: bold;
    color: #202020;
}

.statusPopup .info-inner-item .link-content {
    color: #1e86ff;
    text-decoration: underline;
}

.statusPopup .col-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.statusPopup .le-wrap {
    position: relative;
    display: flex;
    gap: 92px;
}

.statusPopup .le-wrap::after {
    position: absolute;
    content: '';
    display: block;
    width: 1px;
    height: 24px;
    background-color: #707070;
    top: 50%;
    left: 47%;
    transform: translate(-50%, -50%);
}

.statusPopup .state-box-wrap {
    display: flex;
    gap: 12px;
}

.statusPopup .state-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
}

.statusPopup .state-wrap .state-title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
}


.statusPopup .save-btn {
    border-radius: 8px;
    max-width: 180px;
}

.statusPopup .radio-item label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid #eff0f3;
    font-size: 20px;
    color: #3e445a;
}


.statusPopup .red-box input:checked~label {
    border:  1.5px solid #f15c5c;
    color: #f15c5c;
}


.statusPopup .close-btn {
    position: absolute;
    font-size: 24px;
    color: #000;
    top: 32px;
    right: 32px;
    cursor: pointer;
}

.statusPopup .scroll-wrap {
    overflow-y: scroll;
}

.statusPopup .pop-container {
    max-height: 90%;
    overflow: hidden;
    /* overflow-y: scroll; */
}



@media screen and (max-width: 1080px) {

.statusPopup .pop-container {
        max-width: 90%;
        max-height: 90%;
        overflow: scroll;
        padding: 24px 12px;
    }

}

@media screen and (max-width: 1024px) {


.statusPopup .info-item-wrap {
    flex-direction: column;
}

.statusPopup .info-item-wrap .info-item {
    width: 100%;
    padding: 12px 8px;
}

.statusPopup .info-link-item .info-inner-item {
    flex-direction: column;
    gap: 4px;
}

.statusPopup .col-item {
    flex-direction: column;
    gap: 12px;
}


.statusPopup .le-wrap {
    width: 100%;
    gap: unset;
    justify-content: space-around;
}

.statusPopup .save-btn {
    max-width: unset;
}

.statusPopup .state-wrap .state-title {
    font-size: 14px;
}

.statusPopup .state-wrap { 
    gap: 24px;
}

.statusPopup .radio-item label {
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.statusPopup .le-wrap::after {
    left: 50%;
}

.statusPopup .pop-title {
    font-size: 20px;
    margin-bottom: 12px;
}

.statusPopup .close-btn {
    font-size: 20px;
    top: 27px;
    right: 13px;
}

.statusPopup .info-inner-item .item-title,
.statusPopup .info-inner-item .item-content {
    font-size: 14px;
}

}


@media screen and (max-width: 573px) {
.statusPopup .le-wrap {
    flex-direction: column;
    gap: 24px;
}

.statusPopup .le-wrap::after {
   width: 100%;
   height: 1px;
   background-color: #e4e4e4;

}

.statusPopup .state-wrap {
        width: 100%;
        justify-content: space-between;
}

.statusPopup .info-inner-item {
    flex-direction: column;
    gap: 4px;
    padding-bottom: 6px;
}

.statusPopup .info-inner-item:not(:first-child) {
    padding-top: 6px;
}

.statusPopup .info-inner-item .link-content {
    line-height: 1.2;
}

.statusPopup .info-item {
    padding: 12px 16px;
}
}




/* ======= 사업성과 지표별 현황 metrics ====== */



/* ======= 성과별 지표별 현황 metricsDetail ====== */


.metricsSection1,
.metricsSection2 {
    padding-bottom: 140px;
}

.metricsSection2 .fluid-img-wrap::before {
    padding-top: 66.435%;
}


.metricsSection1 .chart-box {
    position: relative;
}

.metricsSection1 .apexcharts-toolbar {
    right: 80px !important;
    top: -3px !important;
}

.metricsSection1  .metricDetail-btn {
    position:absolute;
    top: 20px;
    right: 40px;
    width: 68px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #6e82a3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #6e82a3;
}

@media screen and (max-width: 1080px) {

.metricsSection1,
.metricsSection2 {
    padding-bottom: 80px;
}

.metricsSection1 .apexcharts-toolbar {
    top: 30px !important;
    right: -7px !important;
}

.metricsSection1 .metricDetail-btn {
    top: 12px !important;
    right: 11px !important;
}


}


.metricsSection2 .roadmap-img {
    display: none;
}

.metricsSection2 .fluid-img-wrap img {
    position: unset;
}

.metricsSection2 .fluid-img-wrap::before {
    padding-top: unset;
} 



/* ======= 연구과제 핵심기술 로드맵 roadmap ====== */
.accordion-wrap .accordion-header {
    cursor: pointer;
}

.accordion-wrap .accordion-body {
    display: none;
}


.accordion-wrap .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 24px;
    height: 74px;
}

.accordion-wrap .accordion-header:hover {
    background-color: #e3f0ff;
    border-radius: 4px;
}

.accordion-wrap .accordion-header .list-icon {
    font-size: 20px;
    color: #000;
}

.accordion-wrap .accordion-header:hover .list-icon {
    color: #1e86ff;
}

.accordion-wrap .accordion-header .item-type-wrap {
    display: flex;
    gap: 17px;
    min-width: 237px;
    margin-right: 8px;
}

.accordion-wrap .accordion-header .txt {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #202020;
}

.accordion-wrap .accordion-header .txt:not(:last-child)::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 10px;
    background-color: #404040;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
}

.accordion-wrap .accordion-header:hover .txt {
    color: #1e86ff;
}

.accordion-wrap .accordion-header:hover .txt:not(:last-child)::after {
    background-color: #1e86ff;
}

.accordion-wrap .accordion-header .item-title {
    font-size: 17px;
    font-weight: bold;
    color: #202020;
    line-height: 1.18;
    width: 100%;
    max-width: 365px;
    White-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.accordion-wrap .accordion-header:hover .item-title {
    color: #1e86ff;
}


.roadmapSection {
    background-color: unset;
    padding-bottom: 120px;
}

.roadmapSection .le-wrap {
    border: 1.5px solid #e4e4e4;
    border-radius: 8px;
    padding: 22px 4px 0 4px;
}

/* 수정0227 */
.roadmapSection .le-wrap .listContents {
    border: unset;
    max-height: 1662px;
}
/* // */

.roadmapSection .title-typ3 {
    padding-left: 22px;
}

.roadmapSection .fluid-img-wrap img {
    position: unset;
}

.roadmapSection .fluid-img-wrap::before {
    padding-top: unset;
}

.roadmapSection .zoom-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
    border: 1px solid #6e82a3;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.roadmapSection .zoom-btn i {
    font-size: 14px;
    line-height: 22px;
    color: #6e82a3;
}

.img-pop-wrap {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    background-color: #000000B3;
    z-index: 999;
}

.img-pop-wrap .close-bg {
    cursor: pointer;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.img-pop-wrap .pop-con-wrap {
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow: auto;
    z-index: 2;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
}

.img-pop-wrap.open {
    display: flex;
}

.img-pop-wrap .pop-con-wrap .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
    height: 34px;
    background-color: rgba(0, 0, 0, 0.7);
}

.img-pop-wrap .pop-con-wrap .close-btn i {
    color: #fff;
    font-size: 21px;
}

/* 로드맵 페이지 아코디언 개별 속성 */

.accordion-roadmap-wrap .accordion-header {
    justify-content: unset;
}

.accordion-roadmap-wrap .accordion-item:not(:last-child) {
    border-bottom: 1px solid #e4e4e4;
}

.accordion-roadmap-wrap .accordion-header .item-title {
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 600px;
}

.accordion-roadmap-wrap .item-num {
    font-size: 17px;
    font-weight: bold;
    color: #202020;
}

.accordion-roadmap-wrap .accordion-header .item-type-wrap {
    min-width: unset;
    margin-right: 13px;
}

.accordion-roadmap-wrap .accordion-header .txt-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 78px;
}

.accordion-roadmap-wrap .accordion-header:hover .item-num,
.accordion-roadmap-wrap .accordion-header:hover .angle-down {
    color: #1e86ff;
}

.accordion-wrap .angle-down {
    transition: transform 0.3s ease;
    font-size: 20px;
}

.accordion-wrap .angle-down.rotate {
    transform: rotate(-180deg);
}


.accordion-wrap .accordion-body {
    background-color: #f4f5f8;
}

.accordion-wrap .accordion-body .accotdion-content {
    padding: 19px 20px;
    display: flex;
}


.accordion-wrap .accordion-body .item-type-wrap {
    display: flex;
    gap: 17px;
    min-width: 237px;
    margin-right: 8px;
}


.accordion-wrap .accordion-body .txt {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #202020;
}

.accordion-wrap .accordion-body .list-icon {
    font-size: 20px;
    color: #000;
}

.accordion-wrap .accordion-body .txt:not(:last-child)::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 10px;
    background-color: #404040;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
}

.accordion-wrap .accordion-body .item-title {
    font-size: 17px;
    font-weight: bold;
    color: #202020;
    line-height: 1.18;
    width: 100%;
    max-width: 384px;
    White-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.accordion-wrap .accordion-body .accotdion-content {
    cursor: pointer;
}

.accordion-roadmap-wrap .content-wrap {
    display: flex;
    align-items: center;
    width: 100%;
}

.accordion-roadmap-wrap .roadmap-img {
    display: none;
}

.accordion-wrap .accordion-body .accotdion-content:hover .item-title,
.accordion-wrap .accordion-body .accotdion-content:hover .txt,
.accordion-wrap .accordion-body .accotdion-content:hover .txt:not(:last-child)::after,
.accordion-wrap .accordion-body .accotdion-content:hover .list-icon {
    color: #1e86ff;
}

.accordion-wrap .accordion-body .accotdion-content:hover .txt:not(:last-child)::after {
    background-color: #1e86ff;
}


.accordion-wrap .accordion-header.active {
    background-color: #e3f0ff;
    border-radius: 4px;
}

.accordion-wrap .accordion-header.active .item-num,
.accordion-wrap .accordion-header.active .item-title,
.accordion-wrap .accordion-header.active .txt,
.accordion-wrap .accordion-header.active .txt:not(:last-child)::after,
.accordion-wrap .accordion-header.active .angle-down {
    color: #1e86ff;
}

.accordion-wrap .accordion-header.active .txt:not(:last-child)::after {
    background-color: #1e86ff;
}


@media screen and (max-width: 1080px) {

.roadmapSection {
    padding-bottom: 80px;
}

.roadmapSection .container {
    flex-direction: column-reverse;
    gap: 32px;
}

.roadmapSection .le-wrap {
    padding: unset;
    border: unset;
    border-radius: unset;
}

.roadmapSection .title-typ3 {
    padding-left: unset;
}

.accordion-roadmap-wrap .accordion-header .item-title {
    max-width: 1024px;
    flex-direction: column;
    align-items: start;
    gap: unset;
    line-height: 1.43;
    font-size: 14px;
}

.accordion-wrap .accordion-header .txt {
    font-size: 13px;
}



.accordion-wrap .accordion-body .accotdion-content {
    padding: 10px 13px;
}

.accordion-wrap .accordion-body .accotdion-content:not(:last-child){
    border-bottom: 1px solid #e4e4e4;
}

.accordion-wrap .accordion-body .txt {
    font-size: 13px;
}

.accordion-wrap .accordion-body .item-title {
    font-size: 14px;
    max-width: 1024px;
}
.accordion-wrap .accordion-body .item-type-wrap {
    min-width: unset;
    margin-right: unset;
}

.accordion-roadmap-wrap .content-wrap {
    flex-direction: column;
    align-items: start;
}

.accordion-roadmap-wrap .accordion-header .item-type-wrap {
    margin-right: 19px;
}

.accordion-roadmap-wrap.accordion-wrap .angle-down {
    font-size: 20px;
}

.accordion-roadmap-wrap.accordion-wrap .accordion-body .accotdion-content {
    align-items: center;
}

.roadmapSection .zoom-btn {
    top: unset;
    bottom: -12px;
}

.roadmapSection .accordion-wrap .accordion-header {
    padding: 12px 14px;
}


.accordion-wrap .accordion-header.active {
    background-color: unset;
}

.roadmapSection .scroll-wrap {
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.1);
    margin-top: 16px;
    border-radius: 8px;
}



.roadmapSection .le-wrap .listContents {
    box-shadow: unset;
    margin-top: unset;
}

}


/* 커뮤니티 - 공지사항 */

.commuSection .le-wrap {
    display: flex;
    align-items: center;
    gap: 40px;
}

.commuSection .head-wrap {
    display: flex;
    justify-content: space-between;
}

.commuSection .head-wrap .btn-wrap {
    display: flex;
    gap: 16px;
    align-items: center;
}

.commuSection .head-wrap .link-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 45px;
    padding: 0 20px 0 15px;
    border: 1.5px solid #eff0f3;
    border-radius: 22.5px;
}

.commuSection .head-wrap .link-btn .btn-title {
    font-size: 15px;
    font-weight: 600;
    color: #2a4160;
    line-height: 45px;
}

.commuSection .head-wrap .link-btn i {
    font-size: 15px;
    color: #eff0f3;
    line-height: 45px;
    font-weight: bold;
}

.commuSection .head-wrap .link-btn.now {
    border: 1px solid #1e86ff;
}

.commuSection .head-wrap .link-btn.now .btn-title,
.commuSection .head-wrap .link-btn.now i {
    color: #1e86ff;
}

/* 공지사항 - 검색창 */
.commuSection .search-wrap {
    margin-top: unset;
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: end;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-radius: 22.5px;
}

.commuSection .search-input {
    width: 480px;
    border-right: 0;
    height: 45px;
    border-radius: 22.5px;
    padding: 0 24px 0 115px;
    font-size: 15px;
    background-color: #f4f5f8;
    border: unset;
}

.commuSection .search-input::placeholder {
    color: rgba(62, 68, 90, 0.4);
}

.commuSection .search-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: block;
    text-align: center;
    line-height: unset;
    cursor: pointer;
    transition: .2s;
    width: unset;
    height: unset;
    background-color: unset;
    border-radius: unset;
}

.commuSection .search-btn i {
    color: #3e445a;   
    font-size: 18px;
}

.commuSection .search-btn:hover {
    background: #606060;
}

.commuSection .select-option-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
    min-width: 60px;
}

.commuSection select {
    border: unset;
    background-color: unset;
    font-size: 15px;
    font-weight: 600;
    color: #3a445a;
    border-radius: unset;
}

/* .commuSection select {
    background: url('/images/arrow-down-small.png') no-repeat 90% 50%/18px auto;
} */

.commuSection select::-ms-expand {
    display: none;
}



@media screen and (max-width:1080px) {


    .commuSection .head-wrap {
        flex-direction: column;
        gap: 12px;
    }

    .commuSection .le-wrap {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }


    .commuSection .head-wrap .btn-wrap {
        gap: 10px;
    }

    .commuSection .head-wrap .link-btn {
        height: 30px;
        border-radius: 15px;
    }

    .commuSection .head-wrap .link-btn i {
        font-size: 14px;
        line-height: 30px;
    }

    .commuSection .head-wrap .link-btn .btn-title {
        font-size: 12px;
        line-height: 30px;
    }

    .commuSection select {
        font-size: 14px;
    }

    .commuSection .search-input::placeholder {
       font-size: 14px;
    }

    .commuSection .search-input {
        width: 100%;
    }

    .commuSection .search-wrap {
        max-width: unset;
    }
}




.noticeSection {
    margin-top: 24px;
    margin-bottom: 120px;
}

.noticeSection .notice-list-wrap {
    margin-bottom: 64px;
    border-top: 1px solid #e4e4e4;
    min-height: calc(100vh - 80px - 196px - 174px - 136px);
}

.noticeSection .listItem {
    display: flex;
    align-items: center;
    justify-content: unset;
    padding: 0px 24px;
    height: 74px;
    border-bottom: 1px solid #e4e4e4;
}

.noticeSection .listItem:hover {
    background-color: #e3f0ff;
    border-radius: 4px;
}

.noticeSection .listItem .item-num {
    font-size: 15px;
    font-weight: 500;
    color: #202020;
    margin-right: 60px;
}

.noticeSection .listItem .txt {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(110, 130, 163, 0.6);
    text-align: right;
}

.noticeSection .listItem .date {
    min-width: 82px;
}

.noticeSection .listItem .txt:not(:last-child)::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 12px;
    background-color: rgba(110, 130, 163, 0.4);
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
}

.noticeSection .listItem:hover .txt {
    color: #1e86ff;
}

.noticeSection .listItem:hover .txt:not(:last-child)::after {
    background-color: #1e86ff;
}

.noticeSection .listItem .item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 66px);
}

.noticeSection .listItem .item-title {
    font-size: 17px;
    font-weight: bold;
    color: #202020;
    line-height: 1.18;
    width: 100%;
    max-width: 1000px;
    White-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.noticeSection .listItem:hover .item-title,
.noticeSection .listItem:hover .item-num {
    color: #1e86ff;
}

.noticeSection .item-info-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
}



@media screen and (max-width:1080px) {


    .noticeSection {
        margin-top: 15px;
        margin-bottom: 80px;
    }

    .noticeSection .notice-list-wrap {
        margin-bottom: 40px;
        min-height: unset;
    }

    .noticeSection .listItem {
        align-items: start;
        padding: 15px 8px 10px 0;
        height: 64px;
    }

    .noticeSection .listItem .item-num {
        margin-right: 17px;
        font-size: 14px;
    }

    .noticeSection .listItem .item-inner {
        flex-direction: column;
        align-items: start;
        gap: 5px;
        width: 100%;
    }

    .noticeSection .listItem .item-title {
        font-size: 14px;
        line-height: 1.2;
        max-width: 1024px;
    }

    .noticeSection .item-info-wrap {
        gap: 17px;
    }

    .noticeSection .listItem .txt {
        font-size: 13px;
    }

}


/* 공지사항 디테일 notiDetailSection */

.notiDetailSection {
    margin-top: 24px;
    padding-bottom: 120px;
}

.notiDetailSection .detail-header {
    padding: 27px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

.notiDetailSection .detail-header .title {
    font-size: 20px;
    font-weight: bold;
    color: #202020;
}

.notiDetailSection .info-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    min-width: 200px;
}

.notiDetailSection .info-wrap .txt {
    position: relative;
    font-size: 17px;
    color: rgba(62, 68, 90, 0.6);
}

.notiDetailSection .info-wrap .txt:not(:last-child)::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 10px;
    background-color: rgba(62, 68, 90, 0.6);
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
}

.notiDetailSection .detail-body {
}

.notiDetailSection .detail-body .content {
    white-space: pre-line;
    padding: 40px 0;
}

.notiDetailSection .file-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    
}

.notiDetailSection .file-download-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background-color: #f4f5f8;
}

.notiDetailSection .file-download-wrap .download-icon {
    width: 23px;
    height: 23px;
    min-width: 23px;
    min-height: 23px;
    border: 2px solid #6e82a3;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.notiDetailSection .file-download-wrap .download-icon i {
    font-size: 14px;
    color: #6e82a3;
}

.notiDetailSection .file-info {
    display: flex;
    align-items: center;
    gap: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.notiDetailSection .file-info .file-name {
    font-size: 17px;
    font-weight: 600;
    color: #202020;
    line-height: 1.2;
}

.notiDetailSection .file-info .file-size {
    font-size: 14px;
    color: #202020;
    min-width: 100px;
}

.notiDetailSection .detail-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: space-between;
}

.notiDetailSection .detail-footer .nav-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}

.notiDetailSection .detail-footer .nav-btn {
    width: 45px;
    height: 45px;
    border: 1.5px solid #eff0f3;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notiDetailSection .detail-footer .nav-btn i {
    font-size: 15px;
    color: #2a4160;
    line-height: 45px;
}

.notiDetailSection .detail-footer .nav-list {
    width: 58px;
    font-size: 15px;
    color: #2a4160;
    line-height: 45px;
}


@media screen and (max-width: 1080px) {

.notiDetailSection {
    margin-top: 16px;
    padding-bottom: 80px;
}

.notiDetailSection .detail-header {
    flex-direction: column;
    align-items: start;
    padding: 16px 0;
}

.notiDetailSection .detail-header .title {
    font-size: 14px;
}

.notiDetailSection .info-wrap {
    gap: 18px;
}

.notiDetailSection .info-wrap .txt:not(:last-child)::after {
    right: -9px;
}

.notiDetailSection .info-wrap .txt {
    font-size: 13px;
}

.notiDetailSection .detail-body .content {
    padding: 20px 0;
}

.notiDetailSection .file-download-wrap {
    gap: 10px;
    padding: 8px 16px;
}

.notiDetailSection .file-info .file-name {
    font-size: 14px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notiDetailSection .detail-footer {
    margin-top: 20px;
    padding-top: 10px;
}

.notiDetailSection .detail-footer .nav-btn {
    width: 32px;
    height: 32px;
}

.notiDetailSection .detail-footer .nav-list {
    width: 58px;
    line-height: 32px;
    font-size: 12px;
}

.notiDetailSection .detail-footer .nav-wrap {
    gap: 6px;
}

.notiDetailSection .detail-footer .nav-btn i {
    font-size: 11px;
    line-height: 32px;
}

}

/* faq */

.faqSection {
    margin-top: 24px;
    margin-bottom: 120px;
}

.accordion-faq-wrap {
    border-top: 1px solid #e4e4e4;
    margin-bottom: 64px;
    min-height: calc(100vh - 80px - 196px - 174px - 136px);
}

.accordion-faq-wrap .accordion-header .item-type-wrap {
    display: flex;
    align-items: center;
    gap: 54px;
    width: calc(100% - 20px);
}

.accordion-faq-wrap .accordion-item {
    border-bottom: 1px solid #e4e4e4;
}

.accordion-faq-wrap .item-num {
    font-size: 15px;
    text-align: center;
}

.accordion-faq-wrap .accordion-header .item-title {
    max-width: 1200px;
}

.accordion-faq-wrap .accordion-body {
    padding: 40px 40px 60px 100px;
}

.accordion-faq-wrap .accordion-body p {
    white-space: pre-line;
}


@media screen and (max-width: 1080px) {
.faqSection {
    margin-top: 20px;
    margin-bottom: 80px;
}

.accordion-faq-wrap {
    min-height: unset;
    margin-bottom: 40px;
}


.accordion-wrap .accordion-header {
    padding: 16px 0;
    height: unset;
    min-height: 48px;
}


/* 23수정 */
.accordion-wrap .accordion-header.active {
    background-color: unset;
}



.accordion-faq-wrap .accordion-header .item-type-wrap {
    gap: 19px;
    width: calc(100% - 14px);
}

.accordion-faq-wrap .item-num {
    font-size: 14px;
    font-weight: 500;
}

.accordion-faq-wrap .accordion-header .item-title {
    font-size: 14px;
    max-width: 1024px;
    line-height: 1.2;
}

.accordion-wrap .angle-down {
    font-size: 14px;
}

.accordion-wrap .accordion-body {
    background-color: #f5f5f5;
}

.accordion-faq-wrap .accordion-body {
    padding: 14px 15px;
}

}


/* 공통 - memberSection */

/* -- 회원가입 신청 */

.memberSection {
    margin-top: 182px;
    padding-bottom: 160px;
}

.memberSection .form-input {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid #ededed;
    background-color: #fff;
    padding: 0 24px;
}

.memberSection .input-read-style {
    background-color: #ebebeb;
    padding-right: 80px;
}

.memberSection .form-input::placeholder {
    font-size: 16px;
    color: #c4c4c4;
}

.memberSection .form-container {
    max-width: 640px;
    margin: 0 auto;
}


/* 추가 수정 */
.memberSection .form-container .form-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.memberSection .form-container .btn-logout {
    font-size: 32px;
    color: #000;
}
/* // */




.memberSection .form-container .input-inner-txt {
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    font-size: 15px;
    font-weight: 600;
    color: #202020;
}

.memberSection .form-title {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: #000;
}

.memberSection .form-contant {
    margin-top: 34px;
    border-top: 3px solid #3a445a;
    border-bottom: 3px solid #3a445a;

}

.memberSection .form-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e4e4e4;
    border-radius: 0.5px;
}

/* 인풋 상태 안내글 ----------------------  */
.memberSection .form-wrap .input-status {
   padding-left: 164px;
   font-size: 14px;
   color: #1968ff;
   display: none;
}

/* --- 실패 / 불일치 */
.memberSection .form-wrap .input-status.fail {
    color: #ff1919;
}
/* ------------------------------------- */

.memberSection .form-col-wrap .form-item {
    position: relative;
}

.memberSection .form-col-wrap {
    position: unset;
}

.memberSection .chk-form-wrap {
    flex-direction: row;
    gap: 64px;
}

.memberSection .chk-form-wrap .radio-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.memberSection .form-item {
    display: flex;
    align-items: center;
    gap: 64px;
}

.memberSection .item-title {
    font-size: 15px;
    font-weight: bold;
    color: #303030;
    min-width: 98px;
}


.memberSection .join-btn {
    margin: 24px auto 0;
}




@media screen and (max-width:1024px) {

    .memberSection {
        margin-top: 70px;
        padding-bottom: 80px;
    }
    
    .memberSection .form-container {
        max-width: unset;
    }

    .memberSection .form-title {
      font-size: 26px;
    }

    /* 추가 수정 */

    .memberSection .form-container .btn-logout {
        font-size: 24px;
    }

    /* // */

    .memberSection .form-input::placeholder {
        font-size: 14px;
    }

   .memberSection .form-contant {
        margin-top: 20px;
        border-top: 1.5px solid #202020;
        border-bottom: 1.5px solid #202020;
   }

    .memberSection .form-item {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .memberSection .adr-form-wrap .form-item {
        gap: unset;
    }

    .memberSection .adr-form-wrap .form-item:first-child .item-title {
        margin-bottom: 15px;
    }

    .memberSection .form-wrap {
        padding: 10px 0;
        gap: 10px;
    }

    .memberSection .item-title {
        font-size: 14px;
        min-width: unset;
    }

    .memberSection .chk-form-wrap {
        flex-direction: column;
        gap: 15px;
    }

    .memberSection .form-container .input-inner-txt {
        font-size: 14px;
        top: 71%;
        right: 20px;
    }

    .memberSection .form-container .re-form-wrap .input-inner-txt {
        top: 67%;
    }

    .memberSection .form-col-wrap  .top .input-inner-txt {
        top: 71%;
    }

    .memberSection .form-col-wrap .btm .input-inner-txt {
        top: 50%;
    }

    .memberSection .form-wrap .input-status {
        font-size: 12px;
        padding-left: unset;
    }

    .memberSection .form-col-wrap .form-item {
        gap: unset;
    }

    .memberSection .form-col-wrap .mb-title {
        margin-bottom: 10px;
    }
}









input[type="radio"] {
    display: none;
}


.radio-item .radio-title {
    font-size: 15px;
    font-weight: 500;
    color: #c4c4c4;
}

.chk-form-wrap .radio-item {
    width: fit-content;
}

.radio-item label {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100%;
    height: 45px;
    border: 1.5px solid #eff0f3;
    border-radius: 22.5px;
    font-size: 15px;
    font-weight: 500;
    color: #c4c4c4;
    padding: 0 20px;
}

.radio-item input:checked~label {
    border: 1.5px solid #1e86ff;
    font-weight: 600;
    color: #1e86ff;
}

@media screen and (max-width:1024px) {
.radio-item label {
    height: 30px;
    padding: 0 15px;
    font-size: 12px;
    border-radius: 15px;
}
}

/* joinResult */
.resultSection {
    margin-top: 194px;
    padding-bottom: 240px;
    height: calc(100vh - 80px - 196px - 114px);
}
.resultSection .result-wrap {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.resultSection .result-wrap .logo {
    max-width: 274px;
}

.resultSection .result-wrap .title {
    font-size: 40px;
    font-weight: bold;
    color: #3e445a;
    margin-top: 15px;
}

.resultSection .result-wrap .guide-txt {
    margin-top: 78px;
    font-size: 26px;
    font-weight: 500;
    color: #1e86ff;
}

.resultSection .result-wrap .guide-txt i {
    margin-right: 12px;
    font-size: 26px;
    color: #1e86ff;
}

.memberSection .result-wrap .main-btn {
    margin: 126px auto 0;
}


/* 마이페이지 mypage  */
.memberSection .change-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    border: 1.5px solid #1d86ff;
    border-radius: 8px;
    height: 48px;
}

.memberSection .change-btn .btn-title,
.memberSection .change-btn i  {
    font-size: 16px;
    font-weight: 500;
    color: #1968ff;
}

.myPageSection .input-read-style {
 background-color: #f5f5f5;
 color: #c4c4c4;
}


@media screen and (max-width:1024px) {
 .memberSection .form-input {
     height: 40px;
     padding-left: 15px;
     font-size: 14px;
 }

 .memberSection .change-btn {
     height: 40px;
     padding: 0 15px;
 }

 .memberSection .change-btn .btn-title,
 .memberSection .change-btn i {
    font-size: 14px;
 }
}



/* 사이드매뉴 */
.Header_Side_menu {
    position: fixed;
    right: 32px;
    bottom: 64px;
    z-index: 997;
    display: flex;
    flex-direction: column;
}

.Header_Side_menu .Top_Scroll_btn {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Header_Side_menu .Top_Scroll_btn i {
    font-size: 32px;
    color: #464646;
    z-index: 2;
}

.Header_Side_menu .Top_Scroll_btn .progress_bar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.Header_Side_menu .Top_Scroll_btn .progress_bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background-color: #fff;
    border-radius: 100%;
}


.main-side-menu {
    position: fixed;
    right: 32px;
    bottom: 60px;
    z-index: 997;
    display: flex;
    flex-direction: column;
}

.main-side-menu .Top_Scroll_btn {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-side-menu .Top_Scroll_btn i {
    font-size: 32px;
    color: #464646;
    z-index: 2;
}






/* 성과지표별 현황 목표율 차트 */
.goal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}

.goal-item .goal-info-wrap {
    display: flex;
    flex-direction: column;
}

.goal-item .goal-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    width: fit-content;
}

.goal-item .goal-content::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 10px;
    background-color: #404040;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.goal-item .goal-in-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.goal-item .goal-title {
    font-size: 20px;
    font-weight: bold;
    color: #3a445a;
}

.goal-item .goal-chart {
    width: 360px;
    height: 24px;
    background-color: #f4f5f8;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.goal-item .goal-info {
    font-size: 15px;
    color: #000;
}

.goal-item .achievement-wrap .goal-txt {
    font-size: 15px;
    color: #0745a0;
    font-weight: 600;
}

.goal-item .target-wrap .goal-txt {
    color: #5baea7;
    font-weight: 600;
}


/* ---- goal-chart */

.goal-item .rate-bar {
    position: absolute;
    height: 24px;
}

/* 달성율 */
.goal-item .achievementRate {
    background-color: #386ab3;
    z-index: 2;
}

/* 목표율 */
.goal-item .targetRate {
    background-color: #5baea7;
}

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




@media screen and (max-width:1080px) {

    .goal-item {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding: 15px;
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.1);
    }

    .goal-item .goal-title {
        font-size: 15px;
    }

    .goal-item .goal-info  {
        font-size: 14px;
    }

    .goal-item .achievement-wrap .goal-txt {
        font-size: 14px;
    }

    .goal-item .goal-chart {
        width: 100%;
        height: 15px;
    }


}




/* 팝업 ============================================================================ */
.pop-parent {
    display: block;
    position: fixed;
    top: 200px;
    left: 0;
    z-index: 999;
    transition: all .2s;
}


.pop-parent .m-ratioBox-wrap {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.pop-parent .m-ratioBox-wrap .m-ratioBox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
}

.pop-parent .m-ratioBox-wrap img {
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}

.pop-parent .m-ratioBox-wrap iframe {
    width: 105%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}

.pop-parent .swiper {
    overflow: visible;
}

.pop-parent .swiper-container {
    overflow: hidden;
}

.pop-parent .swiper-pagination {
    display: flex;
}

.pop-parent .pop {
    width: 400px;
    position: relative;
}

.pop-parent .pop .btn-toggle {
    width: 40px;
    height: 40px;
    position: relative;
    background-color: black;
    cursor: pointer;
}

.pop-parent .pop .btn-toggle img {
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transition: all .3s;
}

.pop-parent .pop-btns {
    display: flex;
    position: absolute;
    top: 80px;
    right: -120px;
    background-color: #3c3c3c;
    opacity: 1;
    transform: rotate(90deg);
}

.pop-parent .pop-btns a {
    color: #fff;
    padding: 7px 14px;
}

.pop-parent .pop-btns #oneday_check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.pop-parent .pop-btns #oneday_check+label {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}

.pop-parent .pop-btns #oneday_check+label:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    border: 1px solid #fff;
}

.pop-parent .pop-btns #oneday_check:checked+label .icon {
    position: absolute;
    left: 7px;
    top: 7px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('/img/check_checked.png') no-repeat center center
}

.pop-parent .pop .swiper-btn-control {
    width: 8px;
    height: 11px;
    margin-left: 16px;
    position: relative;
    top: 2px;
}

.pop-parent .swiper-control {
    display: flex;
    align-items: center;
    position: absolute;
    top: 21px;
    right: 20px;
    z-index: 2;
}

.pop-parent .swiper-control .swiper-pagination {
    position: static;
}

.pop-parent .swiper-pagination-bullet {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 0;
    border: 1px solid white;
    opacity: 0.5;
    background-color: transparent;
}

.pop-parent .swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1;
}

.pop-parent.active {
    left: -400px;
}

.pop-parent.active .btn-toggle {
    transform: rotate(180deg);
}

@media screen and (max-width:1200px) {
    .pop-parent .pop {
        width: 310px;
    }

    .pop-parent.active {
        right: -310px;
    }
}


/* 240716 */
.reportSection .ri-wrap {
    width: 100%;
}

.reportSection .listContents .listItem .item-title {
    max-width: 90%;
}


/* 250605추가 */

/* 커뮤니티 - 자료요청 requestPage */

.requestSection .ri-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.requestSection .btn-request {
    width: 118px;
    height: 45px;
    background-color: #3e445a;
    border-radius: 22.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.requestSection .listItem {
    display: flex;
    width: 100%;
}

.requestSection .listItem .item-inner {
    width: calc(100% - 48px);
}

.requestSection .listItem .item-num {
}

/* 공통 배지 스타일 */
.statusWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 32px;
    padding: 4px 12px;
    border-radius:16px;
    font-size: 13px;
    text-align: center;
}

/* 부모 상태에 따라 내부 .statusWrap 스타일 변경 (요청페이지) */
.listItem[data-status="supplement"] .statusWrap,
.form-request-container[data-status="supplement"] .statusWrap {
    background-color: #fff4d6;
    color: #ffbc1e;
}

.listItem[data-status="supplement"] .statusWrap::before,
.form-request-container[data-status="supplement"] .statusWrap::before {
    content: "보완";
}

.listItem[data-status="request"] .statusWrap,
.form-request-container[data-status="request"] .statusWrap {
    background-color: rgba(0, 0, 0, 0.05);
    color:#9b9b9b;
}

.listItem[data-status="request"] .statusWrap::before,
.form-request-container[data-status="request"] .statusWrap::before {
    content: "요청중";
}

.listItem[data-status="reject"] .statusWrap,
.form-request-container[data-status="reject"] .statusWrap {
    background-color: rgba(255, 0, 0, 0.1);
    color: #e03e3e;
}

.listItem[data-status="reject"] .statusWrap::before,
.form-request-container[data-status="reject"] .statusWrap::before {
    content: "반려";
}

.listItem[data-status="approve"] .statusWrap,
.form-request-container[data-status="approve"] .statusWrap {
    background-color: rgba(30, 134, 255, 0.1);
    color: #1e86ff;
}

.listItem[data-status="approve"] .statusWrap::before,
.form-request-container[data-status="approve"] .statusWrap::before {
    content: "승인"; 
}


.requestSection .set-btn-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.requestSection .btnSet {
    font-size: 17px;
    font-weight: 600;
    color: #3e445a;
    line-height: 1;
    text-decoration: underline;
}

.requestSection .listItem .txt:not(:last-child)::after {
    display: none;
}

.requestSection .listItem .item-num {
    width: 5%;
    margin-right: unset;
}



@media screen and (max-width:1080px) {

.requestSection .btn-request  {
    display: none;
}

.requestSection .set-btn-wrap {
    display: none;
}


.requestSection .listItem .item-inner {
    position: relative;
    width: 100%;
}

.requestSection .listItem .item-inner a {
    max-width: calc(100% - 60px);
}

.requestSection .listItem .statusWrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.requestSection .listItem {
    padding-right: unset;
}

.requestSection .listItem:hover {
    padding-right: unset;
    background-color: unset;
    border-radius: unset;
}

.requestSection .listItem .txt {
    text-align: left;
}

.noticeSection .listItem:hover .item-title, .noticeSection .listItem:hover .item-num {
    color: #202020;
}

.requestSection .listItem .item-num {
    min-width: 34px
}
 .filterSection {
    padding-bottom: 12px;
}

.noticeSection .requestSection {
   margin-top: unset;
}

.requestSection .listItem .statusWrap {
    width: 60px;
    height: 30px;
    padding: 2px 8px;
}

.requestSection  s.statusWrap {
    font-size: 12px;
}


}




.fixed-bottom-bar {
  display: none;
  position: fixed;
  justify-content: center;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color:#3e445a;
  padding: 12px 0;
  text-align: center;
  z-index: 999;
}

.request-btn {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .fixed-bottom-bar {
    display: flex;
  }
}


/* 자료요청 form-request-container */

.requAddSection {
    padding-bottom: 204px;
}


.form-request-container .form-input {
    color: #3e445a;
}


.form-request-container .form-item.type2 {
    align-items:flex-start;
}

.form-request-container .form-item.type2 .item-title {
    padding-top: 12px;
}

.form-request-container .required-mark {
  color:  #1e86ff;
  font-size: 18px;
  margin-left: 4px;
  font-weight: bold;
}

.form-request-container .item-desc {
    font-size: 16px;
    color: #c4c4c4;
    line-height: 1.5;
    margin-top: 12px;
}

.form-request-container .item-title {
    font-size: 18px;
    min-width: 100px;
}

.form-request-container .wrap-upload {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-request-container .file-drop-zone {
  border: 1px solid #ededed;
  border-radius: 8px;
  background-color: #fff;
  padding: 40px 10px;
  text-align: center;
  margin-bottom: 12px;
}

.form-request-container .file-drop-zone p {
    font-size: 16px;
    color: #c4c4c4;
}

.form-request-container .file-drop-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin: 0 auto;
    margin-bottom: 8px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-request-container .file-drop-icon i {
    font-size: 20px;
    color: #3e445a;
    opacity: 0.35;
}

.form-request-container .file-btn {
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 16px;
    border: 1.5px solid #0745a0;
    border-radius: 8px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 600;
    color: #0745a0;
    cursor: pointer;
}

.form-request-container .file-input {
  display: none;
}

.form-request-container .file-list {
  display: flex;
  flex-direction: column;
}

.uploaded-file {
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  height: 48px;
}

.file-name {
  flex: 1;
  color: #3e445a;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #4b5563;
}


.uploaded-file i {
    font-size: 20px;
    color: #3e445a;
}





.form-request-container textarea {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    border: solid 1.5px #ededed;
    background-color: #fff;
    padding: 15px 24px;
    font-size: 16px;
    color: #3e445a;
}

.form-request-container textarea::placeholder {
    font-size: 16px;
    color: #c4c4c4;
}

.form-request-container .form-btm-wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.form-request-container .form-btm-wrap .le-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.form-request-container .form-btn {
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    width: 100%;
    height: 48px;
    padding: 8px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-request-container .cancle-btn {
    max-width: 80px;
    background-color: #6e82a3;
}

.form-request-container .reset-btn {
    max-width: 80px;
    background-color: #3e445a;
}

.form-request-container .apply-btn {
    max-width: 160px;
    background-color:  #0745a0;
}

.custom-select {
  position: relative;
  width: 100%;
  font-size: 14px;
}

.select-display {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  background-color: #fff;
  color: #888;
  cursor: pointer;
  position: relative;
}

.select-display {
  border: solid 1.5px #ededed;
  border-radius: 6px;
  padding: 24px;
  background-color: #fff;
  color: #888;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
}

.display-text {
    flex: 1;
    font-size: 16px;
    color: #c4c4c4;
}

.display-icon {
  font-size: 20px;
  color: #3e445a;
}

.select-options {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.select-options li {
  height: 48px;
  padding: 4px 24px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  color: #3e445a;
  display: flex;
  align-items: center;
}

.select-options li:hover {
  background-color: #f2f4f8;
}

.select-display.selected .display-text {
  color: #3e445a;
}


/* 자료요청 확인 페이지  requConfirmSection */

.form-request-container .statusWrap {
    border-radius: 8px;
    width: 80px;
    min-width: 80px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
}

.form-request-container .form-title-wrap {
    display: flex;
   justify-content: space-between;
   gap: 8px;
}

.form-request-container .requ-title-wrap {
    max-width: calc(100% - 80px);
    flex: 1;
}

.form-request-container .requ-title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-request-container .requ-date {
    font-size: 17px;
    color: #3e445a;
    opacity: 0.6;
}


.requConfirmSection .form-contant {
    margin-top: 16px;
}

.requConfirmSection  .input-read-style {
    background-color: #f5f5f5;
    border: unset;
}

.requConfirmSection .uploaded-file {
    width: 100%;
    background-color: #f5f5f5;
     padding: 4px 24px;

}


.requConfirmSection .file-name {
    line-height: 1.2;
}


.requConfirmSection .input-read-style {
      color: #c4c4c4;
      padding-right: 24px;
}


.requConfirmSection .apply-btn {
 background-color: #6e82a3;
}


.requConfirmSection .cancle-btn {
    background-color: #3e445a;
}

.requConfirmSection .download-zone {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid #3e445a;
}

.requConfirmSection .line-btn {
    width: 100%;
    height: 64px;
    background-color: #fff;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.requConfirmSection .operator {
  border: 2.5px solid #1e86ff;
  color: #1e86ff;
}

.requConfirmSection .submitter {
  border: 2.5px solid #0745a0;
  color: #0745a0;
}

.requConfirmSection .last-form-wrap {
    border-bottom: unset;
}

.requConfirmSection .sign-info-box {
    border-radius: 8px;
    background-color: #f5f5f5;
    padding: 16px;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
}

.requConfirmSection .sign-info-box .info-title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.requConfirmSection .sign-info-box .info-sub {
    font-size: 16px;
    color: #202020;
    line-height: 1.63;
    margin-top: 12px;
}

.requConfirmSection .sign-info-box .btn-sign-open {
    width: 100%;
    max-width: 160px;
    height: 40px;
    padding: 4px;
    border-radius: 8px;
    background-color: #1e86ff;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-top: 16px;
}

.requConfirmSection .sign-info-box .btn-sign-open.requesting {
    background-color: #ccc;
    color: rgba(255, 255, 255, 0.4);
    
}

/* 팝업 기본 구조 */
.sign-modal {
  position: fixed;
  z-index: 1000;
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

.sign-modal-content {
  background: #fff;
  /* padding: 64px 56px; */
  padding: 4% 56px;
  border-radius: 24px;
  width: 90%;
  max-width: 1072px;
  text-align:left;
}


.sign-modal-content .sign-title {
    font-size: 40px;
    font-weight: bold;
    color: #000;
}

.sign-modal-content .sign-sub {
    font-size: 16px;
    color: #202020;
    line-height: 1.63;
    margin-top: 16px;
}


.btn-sign-reset {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  position: absolute;
  top: 32px; 
  right: 32px;
  cursor: pointer;
  background-color: #fff;
}

.btn-sign-reset  i {
    font-size: 25px;
    color: #2a4160;
}

.sign-btns {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.sign-btns button {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.btn-cancel {
  background: #333;
  color: #fff;
}
.btn-submit-sign {
  background: #1f72ff;
  color: #fff;
}

.requConfirmSection .btn-file-download {
    font-size: 24px;
     background:  #1e86ff;
     color: #fff;
     height: 80px;
     margin-top: 24px;
     margin-bottom: 24px;
     justify-content: center;
     align-items: center;
}


.sign-pad-area {
  margin: 32px 0 40px;
  background: #f4f6fa;
  border-radius: 16px;
  position: relative;
  /* aspect-ratio: 3 / 1.5; */
}

#signCanvas {
  background-color: #f4f5f8;
  border-radius: 16px;
  cursor: crosshair;
  width: 100%;
    width: 960px;
    height: 480px;

}

.sign-modal .sign-btns button {
    height: 49px;
    max-width: 270px;
    border-radius: 24.5px;
}

.sign-modal .sign-btns .btn-submit-sign {
     background-color: #1e86ff;
}



@media screen and (max-width:1200px) {
    .sign-pad-area {
        height: 280px;
    }

    #signCanvas {
        width: 100%;
        height: 100%;
    }

}


.form-request-container  br.mb {
  display: none;
}

.requConfirmSection .mb-del {
    display: none;
}

@media screen and (max-width:1024px) {

    .form-request-container .requ-title {
        white-space: unset;
        overflow: inherit;
        text-overflow: inherit;
        line-height: 1.4;
    }

    .memberSection .form-container .form-title-wrap {
        align-items: end;
    }

    .form-request-container .statusWrap {
        width: 66px;
        min-width: 66px;
        height: 40px;
    }

    .form-request-container[data-status="approve"] .statusWrap  {
           background-color: rgba(30, 134, 255, 0.2);
    }

    .form-request-container .requ-date {
        font-size: 14px;
        margin-top: 10px;
    }
     
    .form-request-container .item-title {
        font-size: 14px;
    }

   .requConfirmSection .form-wrap {
      padding-bottom: 15px;
   }

   .form-request-container .form-item.type2 .item-title {
    padding-top: 0;
   }

   .requConfirmSection .uploaded-file {
    flex-direction: row-reverse;
   }

   .requConfirmSection .uploaded-file .icon-btn {
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 4px;
        border: solid 1px #6e82a3;
        display: flex;
        justify-content: center;
        align-items: center;
   }

   .uploaded-file i {
        font-size: 14px;
        color: #6e82a3;
   }

   .requConfirmSection .uploaded-file {
     padding: 4px 15px;
   }

   .form-request-container textarea {
     padding: 15px;
   }

   .requConfirmSection .line-btn {
    height: 45px;
    font-size: 15px;
    font-weight: 600;
   }

   .requConfirmSection .download-zone {
    gap: 10px;
   }

   .requConfirmSection .sign-info-box {
    margin-top: 10px;
    padding: 20px;
   }


.requConfirmSection .btn-file-download {
    font-size: 15px;
     height: 50px;
     margin-top: 10px;
    }

   .requConfirmSection .sign-info-box .info-title {
       font-size: 14px;
   }

   .requConfirmSection .sign-info-box .info-sub {
       margin-top: 10px;
       font-size: 14px;
       line-height: 1.14;
   }

    .form-request-container  br.mb {
        display: block;
    } 

    .requConfirmSection .sign-info-box .btn-sign-open {
        margin-top: 15px;
        font-size: 15px;

    }

    .form-request-container .form-btn {
        max-width: 120px;
        height: 45px;
        font-size: 15px;
    }

    .requConfirmSection .cancle-btn {
        max-width: 60px;
    }

    .requConfirmSection .mb-del {
        display: flex;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        text-decoration: underline;
        margin-top: 30px;

    }

     .requConfirmSection {
        padding-bottom: 34px;
     }

    .requConfirmSection .form-contant {
        padding-top: 24px;
     }

     .form-request-container .item-desc {
        width: 100%;
        font-size: 12px;
        margin-top: 10px;
     }


    .requAddSection .form-request-container .cancle-btn {
        max-width: 60px;
    }

      .requAddSection .form-request-container .reset-btn{
        max-width: 80px;
    }

    .form-request-container .form-btm-wrap .le-wrap {
        gap:10px;
    }

    .form-request-container .file-drop-zone p {
        font-size: 14px;
    }
    .form-request-container .file-drop-icon i {
        font-size: 16px;
    }

    .requAddSection {
        padding-bottom: 80px;
    }

    .requAddSection  .form-contant {
        padding-top: 24px;
    }

    .requAddSection  .form-request-container textarea {
        padding: 12px 15px;
    }

    .requAddSection  .form-request-container textarea::placeholder {
        font-size: 14px;
    }

    .select-display {
        padding: 0 24px 0 15px;
        height: 40px;
    }

    .display-icon {
        font-size: 16px;
    }

     .form-request-container .file-drop-icon {
        width: 32px;
        height: 32px;
     }

     .form-request-container .form-input::placeholder {
        font-size: 14px;
     }

     .display-text {
        font-size: 14px;
     }

     .select-options li {
        height: 40px;
        font-size: 14px;
        padding: 4px 15px;
     }

     .form-request-container .file-btn {
        font-size: 15px;
     }

     .sign-modal-content .sign-title {
        font-size: 24px;
     }

     .sign-modal-content {
        padding: 4% 24px;
        border-radius: 12px;
        max-width: 520px;
     }

     .sign-modal-content .sign-sub {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 8px;
     }


     .sign-pad-area {
        margin: 16px 0 24px;
     }

     #signCanvas {
        border-radius: 8px;
     }


     .btn-sign-reset {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        top: 12px;
        right: 12px;
     }

     .btn-sign-reset i {
        font-size: 18px;
     }

     .sign-modal .sign-btns button {
        height: 40px;
        max-width: 120px;
        border-radius: 20px;
        padding: 5px;
     }
}

@media screen and (max-width:900px) {


    .sign-pad-area {
        width: 100%;
        height: 280px;
    }

    #signCanvas {
        width: 100%;
        height: 100%;
    }

}

@media screen and (max-height:748px) {

    .sign-modal-content {
        max-height: calc(100% - 48px);
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

}


@media screen and (max-width:573px) {

    .sign-modal-content {
        max-width: 572px;
        max-height: calc(100% - 48px);
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .sign-pad-area {
        width: 100%;
        height: 180px;
    }

}




.pageResultSection {
    height:  calc(100vh - 392px);
    display: flex;
    justify-content: center;
    align-items: center; 
    text-align: center;
}

.pageResultSection img {
    max-width: 64px;
}


.pageResultSection .resultTitle {
    font-size: 24px;
    font-weight: bold;
    color: #3e445a;
    opacity: 0.4;
    margin-top: 24px;
}

.pageResultSection .resultSub {
    font-size: 18px;
    color: #3e445a;
    opacity: 0.4;
    margin-top: 14px;
}



@media screen and (max-width:1180px) {

.commuSection .le-wrap {
    gap: 24px;
}

.commuSection .head-wrap .btn-wrap {
    gap: 8px;
}

.requestSection .ri-wrap {
    gap: 8px;
}

.commuSection .search-input {
    width: 400px;
    padding: 0 24px 0 104px;
}

.commuSection .select-option-wrap {
    left: 48px;
}
}

@media screen and (max-width:1080px) {

    .commuSection .search-input {
        width: 100%;
        padding: 0 24px 0 115px;
    }

    .commuSection .select-option-wrap {
        left: 24px;
    }

}


@media screen and (max-width:1024px) {


.pageResultSection {
    height: 100%;
    margin: 32% 0 50%;
}

.pageResultSection .resultBox {
    width: calc(100% - 40px);
}


.pageResultSection img {
    max-width: 32px;
}

.pageResultSection .resultTitle {
    font-size: 18px;
    margin-top: 14px;
}

.pageResultSection .resultSub {
    font-size: 14px;
    margin-top: 12px;
}

.commuSection .le-wrap {
    gap: 24px;
}

}


.sign-modal-content .sign-sub.btm {
    margin-top: 8px;
    max-width: 98%;
    font-size: 14px;
}

.sign-modal-content .bold {
    font-weight: bold;
    margin-bottom: 8px;
}

.sign-modal-content  .btm-sub {
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.5;
    word-break: keep-all;
}

.sign-modal-content  .btm-sub:last-child {
    margin-top: 8px;
}


@media screen and (max-width: 1024px) {
    .sign-modal-content .sign-sub.btm {
        font-size: 12px;
        margin-top: 4px;
    }
}