@charset "utf-8";

/* 김동환 작업 */

.m-sub-box.mobile {
    display: none;
}

.pc-hidden {
    display: none;
}
.m-hidden{
    display: block;
}

@media (max-width:1199px) {

    .pc-hidden{
        display: block;
    }
    .m-hidden {
        display: none;
    }

    .m-section{
        padding: 0 20px;

    }

    /* ------------------------------ SNB ------------------------------ */


    .m-sub-box.mobile {
        display: none;

        & .navi-box{
            padding: 15px 20px;
            border-bottom: 1px solid #D9D9D9;
            display: flex;
            column-gap: 5px;
            align-items: center;
            line-height: 0;

            & span.first-span {
                color: #808080;
                font-weight: 600;
            }
            & span.second-span {
                font-weight: 600;
            }
        }
        .accordion-button {
            background-color: #12B32D;
            border: 0;
            box-shadow: none;
            color: #fff;
            font-weight: 600;
            font-size: 18px;
            border-bottom:solid 1px #EBEBEB;
            padding: 1.2rem 1.2rem 1.2rem 1.2rem;
            border-radius: 0 !important;
        }
        .accordion-button.collapsed {
            --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
        }

        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }
        .accordion-body {
            border-bottom:solid 1px #EBEBEB;
            background-color: #F7F9F5;
            padding: 12px 20px !important;
            & ul {
                /*padding-left: 15px !important;*/
                & li {
                    color:#555;
                    font-size:15px;
                    font-weight: 400;
                    position: relative;
                    padding-left: 10px;
                    line-height: 30px;
                }
                & li a.active {
                    color: #12B32D !important;
                    font-weight: 600;
                }
                & li:before {
                    width:3px;
                    height: 3px;
                    position: absolute;
                    content: '';
                    background: #555;
                    left: 0;
                    top:16px;
                }
            }
        }
        .accordion-item {
            border-radius: 0;
            border:0;
        }
    }

    /* ------------------------------ // SNB ------------------------------ */

    /* ------------------------------ 통합검색 ------------------------------ */
    .intro-section{
        border-bottom: 0 !important;
        padding: 40px 0 !important;
    }
    .intro-section h2{
        margin-bottom: 10px !important;
    }

    .result-section{
        padding: 25px 0;
        margin:  0 auto;
        max-width: 1280px;
        text-align: center;
        font-weight: 700;
        font-size: 30px;
        line-height: 100%;
    }
    .result-section .total-search-info.pc-hidden{
        font-size: 20px;
        line-height: 150%;
    }
    .search-section .search-box{
        margin-top: 0 !important;
    }
    .search-section .search-box input{
        min-width: 0;
    }

    .search-section .search-box button{
        flex: 0 0 60px !important;
    }
    .search-section .cate-block:not(.cate-newsletter):not(.cate-member_group) .search-item {
        padding: 20px 25px !important;
    }

    .search-section .cate-newsletter .result-list{
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .search-section .cate-newsletter .result-list.newsletter li.search-item{
        padding: 20px 25px !important;
        &  {


            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #D9D9D9;
            border-radius: 10px;

            & a.file-btn{
                display: block;
                padding: 12px 22px;
                border-radius: 500px;
                color: #555555;
                border: 1px solid #555555;

            }

        }

    }
    .cate-newsletter .result-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* ------------------------------ // 통합검색 ----------------------------- */

    /**
        협의회 소개
     */
    /* ------------------------------ 오시는길 ------------------------------ */
    section.location-container{
        padding: 0 10px;
    }
    section.location-container .map-container {
        margin-bottom: 30px;
    }
    section.location-container .info-container .company-info{
        margin-bottom: 30px;
    }
    section.location-container .info-container .company-info h2{
        font-size: 28px;
    }
    section.location-container .info-container .info-list li .text {
        display: flex;
        align-items: center;
        gap: 30px;
        & strong {
            font-size: 18px !important;
        }
        & span {
            font-size: 18px !important;
        }
    }

    section.location-container .info-container .bus-info {
        display: block;
        flex: 1;
        gap: 50px;
        h3 {
            font-weight: 600;
            font-size: 18px;
            line-height: 160%;
            white-space: nowrap;
        }

        .directions-bus {
            display: flex;
            flex-direction: column;
            row-gap: 40px;
            margin-bottom: 50px;

            .bus-group {
                display: flex;
                flex-direction: column;
                gap: 30px;
            }

            .stop-title {
                font-weight: 700;
                font-size: 18px;
                line-height: 160%;

                &.green {
                    color: #12a300;
                }
            }

            .bus-stop {
                display: flex;
                flex-direction: row;
                gap: 30px;
                align-items: flex-start;

                .bus-desc {
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 160%;
                    white-space: nowrap;
                    min-width: 140px;
                    color: #757575;
                }

                .bus-lines {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;

                    span {
                        padding: 2px 8px;
                        border-radius: 6px;
                        font-size: 14px;
                        border: 1px solid #555555;
                        color: #555555;

                        &.blue {
                            color: #012F85;
                            border: 1px solid #012F85;
                        }
                    }
                }
            }
        }
    }

    /* ------------------------------ // 오시는길 ------------------------------ */

    /* ------------------------------ 협의회 산하 조직도 ------------------------------ */

    /* 탭 */
    .sub-organization-tab-menu{
        display: flex;
        flex-direction: column;
        border: 1px solid #d9d9d9;
        border-radius: 10px;
        gap: 0;
        align-content: center;

        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 40px 10px;
        overflow: hidden;

        .tab-item {
            width: 100%;
            text-align: center;
            position: relative;
            padding: 15px 0;
            color: #555555;
            cursor: pointer;
            font-weight: 500;
            font-size: 18px;
            line-height: 100%;
            letter-spacing: -0.01em;
            border-bottom: 1px solid #D9D9D9;
        }

        .tab-item.active {
            color: #fff;
            font-weight: 600;
            background-color: #3C3C3C;

        }
        .tab-item:last-child {
            border-bottom: 0;
        }

        .tab-item.active::after {
            content: none;
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #00AD1D;
            transform: translateY(50%);
        }
    }

    /* 모바일시 가로 스크롤 */
    .research-members, .joint-fund-container {
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px !important;          /* 좌우 패딩 제거 */
        margin: 0 !important;           /* 좌우 마진 제거 */
        box-sizing: border-box;
    }
    .committee-chart {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: max-content !important;  /* 콘텐츠 너비만큼 확대 */
    }
    /* 3) 각 박스가 가로로 늘어나지 않고 고정 너비(내용)로 유지 */
    .committee-chart .committee-box {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    /* 공동기금 운영위원회 */
    .chart-scroll-wrapper {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* 2) 본체는 데스크탑 폭(1280px)만큼 고정 */
    .chart-scroll-wrapper .joint-fund-container {
        width: 1280px;
        max-width: none;
        /*margin: 0;         !* 중앙정렬 해제 *!*/
        /*padding: 0;        !* 필요시 *!*/
        box-sizing: border-box;
        position: relative;/* 기존 absolute 자식 배치 유지 */
    }
    .chart-scroll-wrapper .company-group-container{
        margin: 600px auto 0;
    }
    /* 상호교류친선도모위원회 */
    .chart-scroll-wrapper.friendship {
        box-sizing: border-box;
        /*margin: 0;    !* 혹시 래퍼에 기본 margin 있으면 제거 *!*/
        /*padding: 0;   !* 래퍼 padding 제거 *!*/
    }
    .chart-scroll-wrapper .friendship-container {
        width: 1280px !important;
        max-width: none !important;
        /*margin: 0 !important;*/
        /*padding: 0 !important;*/
        box-sizing: border-box;
        position: relative; /* 기존 position 유지 */
    }

    /* ------------------------------ // 협의회 산하 조직도 ------------------------------ */

    /* ------------------------------ 협의회 산하 조직도 ------------------------------ */
    .organization-scroll-wrapper{
        width: 100%;
        padding: 0 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .organization-scroll-wrapper .organization-container{
        width: 1280px !important;
        max-width: none !important;
        box-sizing: border-box;
        position: relative; /* 기존 position 유지 */
    }


    /* ------------------------------ // 협의회 산하 조직도 ------------------------------ */


    /* ------------------------------ 목표 ------------------------------ */
    .intro-section.goal{
        & h2{
            font-size: 20px;
        }
        & p{
            font-size: 22px;
        }
    }
    .goals-section-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 16px;
        margin-bottom: 46px;

        &.no-line {
            gap: 0;

            .label {
                margin: 0 auto;
            }

            .line {
                display: none;
            }
        }

        .line {
            flex: 1;
            height: 1px;
            background-color: #ccc;
        }

        .label {
            background-color: #4C4949;
            color: #fff;
            padding: 5px 22px;
            font-weight: 700;
            font-size: 18px;
            line-height: 31px;
            border-radius: 500px;
            white-space: nowrap;
            border: 3px solid #4C4949;
        }
    }

    .goals-vision-section {
        padding: 0 20px;
        .circle-feature-wrapper {
            max-width: 840px;
            margin: 0 auto;

            .top-background {
                padding: 35px 26px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                background: #ecf5f0;
                border-radius: 20px;
                row-gap: 20px;
                border: 1px solid #CCCCCC;

                .circle-group {
                    width: 100%;

                    .circle {
                        width: 100%;
                        height: 83px;
                        border-radius: 500px;
                        color: #fff;
                        font-weight: 700;
                        font-size: 18px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        line-height: 28px;

                        &.green { background-color: #4BAC87; }
                        &.blue { background-color: #3EB4BA; }
                        &.teal { background-color: #2C9198; }
                    }

                    .dotted-line-half {
                        width: 2px;
                        height: 20px;
                        border-left: 2px dotted #444;
                    }
                }
                .desc-block {
                    display: flex;
                    flex-direction: column;
                    /*align-items: center;*/

                    .dotted-line-remaining {
                        width: 2px;
                        height: 20px;
                        border-left: 2px dotted #444;
                    }

                    .dot {
                        width: 8px;
                        height: 8px;
                        background-color: #222;
                        border-radius: 50%;
                        margin: 4px 0;
                    }

                    .desc {
                        /*margin: 16px 0 0;*/
                        padding: 0;
                        list-style: none;
                        font-size: 14px;
                        font-weight: 500;
                        color: #757575;
                        word-break: keep-all;
                        /*max-width: 220px;*/

                        li {
                            position: relative;
                            padding-left: 8px;

                            &::before {
                                content: '•';
                                position: absolute;
                                left: 0;
                                color: #999;
                            }
                        }
                    }
                }
            }

            .bottom-section {
                display: flex;
                justify-content: space-around;
                padding-top: 2px;


            }
        }

        .arrow-wrapper {
            width: auto;
            max-width: 392px;
            height: 224px;
            background: url('/theme/basic/img/about/goalArrow.svg') no-repeat center;
            background-size: cover;
            margin: 0 auto;
        }
    }

    .goals-core-section {
        padding: 0 20px;

        .card-list-wrapper {
            max-width: 1280px;
            flex-direction: column;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;

            justify-content: center;


            .card {
                border-radius: 20px;
                overflow: visible !important;
                background: white;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                flex: 1;
                max-width: none;
                /*margin-bottom: 30px;*/
                border: 0;

                .card-header {
                    border-radius: 20px;
                    position: relative;
                    color: #fff;
                    text-align: center;
                    min-height: 233px;
                    padding: 25px;
                    font-weight: 700;
                    font-size: 22px;
                    overflow: hidden;


                }
                .card-header.head-1{
                    background: linear-gradient(179.44deg, #70DA7F 0.49%, #61CA85 34.81%) !important;
                }
                .card-header.head-2{
                    background: linear-gradient(179.45deg, #62CB84 0.48%, #50B88B 35.52%) !important;
                }
                .card-header.head-3{
                    background: linear-gradient(180deg, #52BA8A 0%, #3BA193 36.12%) !important;
                }
                .card-header.head-4{
                    background: linear-gradient(180deg, #3EA492 0%, #2C9198 36.12%) !important;
                }

                .card-content {
                    position: absolute;
                    padding: 20px;
                    background-color: #F7F7F9;
                    width: 100%;
                    min-height: 160px;
                    top: 35%;
                    border-radius: 20px;
                    border: 1px solid #F7F7F9;
                    word-break: keep-all;

                    ul {
                        list-style: none;
                        padding: 0;

                        li {
                            font-size: 14px;
                            font-weight: 500;
                            color: #555;
                            margin-bottom: 10px;
                            position: relative;
                            padding-left: 16px;

                            &::before {
                                content: '•';
                                position: absolute;
                                left: 0;
                                color: #ccc;
                            }

                            strong {
                                font-weight: 600;
                            }
                        }
                    }
                }
            }
        }
    }

    /* ------------------------------ // 목표 ------------------------------ */





}

@media (max-width:740px) {
    section.schedule-section{
        padding: 0 50px;
    }

    .goals-esg-download-section {
        margin-top : 60px;
        padding: 0 20px;
        .esg-card {
            flex-wrap: wrap;
            justify-content: center;



            .label-block {
                flex-direction: column;
                align-items: center;
                min-width: 0;
                row-gap : 20px;

                .type-line{
                    gap:0;
                }
            }

            .text-block{
                text-align: center;
                word-break: keep-all;
            }


        }
        .download-button{
            width: 100%;
        }
    }

    /* ------------------------------  일정 ------------------------------ */
    /*style로 처리되어 있기에 !important 가 필요힘*/
    section.schedule-section{
        padding: 0 20px;
    }

    .schedule-section {
        .boxs {
            .calnder-navbar {
                button{
                    img{
                        width: 10px !important;
                    }
                }
            }
        }
    }

    @layer toastui-mobile {
        .calnder-navbar .navbar--range {
            font-size: 22px !important;
            min-width: 90px !important;
            margin-right: 20px !important;
        }

        #calendar {
            height: 100% !important;
        }

        .toastui-calendar-day-names.toastui-calendar-month {
            padding: 10px 0 !important;
        }

        .toastui-calendar-month .toastui-calendar-day-names {
            height: 40px !important;
        }

        .toastui-calendar-template-monthDayName {
            font-size: 14px !important;
        }

        .toastui-calendar-day-name-item.toastui-calendar-month {
            line-height: 20px !important;
            top: 0 !important;
        }
        .toastui-calendar-daygrid-cell{
            margin-left: 0px !important;
            text-align: center !important;
            top: 0 !important;
        }

        .toastui-calendar-daygrid-cell:has(.toastui-calendar-weekday-grid-date-decorator) {
            background-color: transparent !important;
        }

        .toastui-calendar-weekday-grid {
            border-bottom: 0 !important;
        }

        .toastui-calendar-month-week-item {
            height: 50px !important;
        }

        .toastui-calendar-month .toastui-calendar-month-daygrid {
            height: 100% !important;
        }

        .toastui-calendar-grid-cell-date .toastui-calendar-weekday-grid-date.toastui-calendar-weekday-grid-date-decorator {
            background-color: transparent !important;
            line-height: 20px !important;
        }

        .toastui-calendar-weekday-grid-more-events.toastui-calendar-template-monthGridHeaderExceed {
            color: transparent !important;
            width: 5px;
            height: 5px;
            display: inline-block;
            background-color: #542588;
            border-radius: 1px;
        }

        .toastui-calendar-grid-cell-header {
            position: relative;
        }

        .toastui-calendar-grid-cell-more-events {
            position: absolute;
            bottom: -25px;
            left: 18px;
            z-index: 1;
        }
        .toastui-calendar-weekday-grid-date.toastui-calendar-template-monthGridHeader{
            font-size: 14px !important;
            font-weight: 600 !important;
        }

        .toastui-calendar-see-more{
            min-height: 200px !important;
        }
        .today-button{
            width: 48px !important;
            height: 25px !important;
            padding: 0 !important;
        }

    }

    #listContainer {
        padding: 3rem 0rem;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        & .grey-box{
            padding: 15px 20px;
            border-radius: 12px;
            border: 1px solid #C8C8C8;

            & p.date{
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                letter-spacing: -2%;
                margin-bottom: 5px;
            }

            & p.title{
                font-weight: 600;
                font-size: 14px;
                line-height: 18px;
                letter-spacing: -2%;
            }

        }

        & p.no-events{
            text-align: center;
        }
    }




    /* ------------------------------ // 일정 ------------------------------ */

}

@media (max-width:610px) {
    /* ------------------------------ 오시는길 ------------------------------ */
    .location-container {
        .info-container {
            .company-info {
                .info-list {
                    li {
                        align-items: initial;

                        .text {
                            gap: initial;
                            flex-direction: column;
                            align-items: start;
                            strong {
                                flex: initial;
                            }
                        }
                    }
                }
            }
        }
    }

}