@charset "UTF-8";

/* 기본 스타일 (라이트 모드) */
body {
    background: #ffffff;
    color: #000000;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 다크 모드 스타일 */
html.color_change body {
    background: 292723;
    color: #ffffff;
}

.submenu {height: 87vh; z-index: 0;}
.sub_top, .submenu_2depth {display: none !important;}

/* 메인 히어로 섹션 */
.hero-section {
    position: relative;
    top: -100px;
    margin-bottom: -100px;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

/* 라이트 모드: 히어로 섹션 배경 */
html:not(.color_change) .hero-section {
    background: #f5f5f5;
}

.hero-slider {
    position: relative;
    height: 100vh;
}

.hero-slider .slick-slide {
    padding: 0;
}

.slide-item {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
}

.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.5);
    display: block;
}

.slide-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 80px;
    color: #fff;
    pointer-events: none;
}

.slide-content * {
    pointer-events: auto;
}

.hero-text-overlay {
    text-align: right;
    color: #ffffff;
    z-index: 3;
    padding: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.hero-subtitle {
    font-size: 28px;
    font-weight: 200;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-subtitle.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.hero-title {
    font-size: 80px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.3; letter-spacing: -5px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.hero-title.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.hero-text-overlay .learn-more-btn.hero-btn {
    opacity: 0 !important;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
    display: inline-block;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    align-self: flex-end;
    width: auto;
}

.hero-text-overlay .learn-more-btn.hero-btn.animate-in {
    opacity: 0.8 !important;
    transform: translateY(0);
}

.learn-more-btn {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 20px 40px;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    opacity: 0.8;
}

.learn-more-btn:hover {
    background: #ffffff;
    color: #000000;
}

.learn-more-btn.hero-btn {
    margin-top: 0;
}

/* 슬라이드 네비게이션 스타일 */
.hero-slider .slick-prev,
.hero-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slider .slick-prev:hover,
.hero-slider .slick-next:hover {
    background: rgba(255, 255, 255, 0.4);
}

.hero-slider .slick-prev {
    left: 30px;
}

.hero-slider .slick-next {
    right: 30px;
}

.hero-slider .slick-prev:before,
.hero-slider .slick-next:before {
    display: none;
}

.hero-slider .slick-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero-slider .slick-dots li {
    display: inline-block;
    margin: 0;
    width: auto;
    height: auto;
}

.hero-slider .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.hero-slider .slick-dots li.slick-active button {
    background: #ffffff;
    border-color: #ffffff;
    width: 14px;
    height: 14px;
}

.hero-slider .slick-dots li button:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 1);
}

.section-header {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.section-header h2 {
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
}


/* 문화행사 섹션 */
.cultural-events {
    background: #fff;
    padding:60px 20px;
    max-width: 1500px;
    margin: auto;
    border-bottom: 1px solid #d7d7d7;
}

.event-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0px;
    font-size: 28px;
    color: #888888;
    font-weight: 500;
}

.event-tabs .tab {
    height: auto;
    padding:0px 5px;
    margin: 0px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* .event-tabs .tab::after {
    content: '/';
    display: inline-block;
    color: #888888;
    font-size: 28px;
    font-weight: 500;
    padding: 0 10px;
}

.event-tabs .tab:hover::after {
    display: none;
} */

.event-tabs .tab:hover, .event-tabs  .tab.active {
    color: var(--color2);
    background: linear-gradient(to top, #47474721 50%, transparent 50%);
}

.event-tabs .tab-more:hover {
    color: var(--color2);
}

.event-tabs .tab-more {
    cursor: pointer;
    font-size: 30px;
    font-weight: lighter;
    color: #666;
    padding: 0px 10px;
}

.cultural-events .event-cards {
    display: flex;
    gap: 30px;
    margin: 0 auto;  
    transition: all 0.3s ease;
}

.cultural-events .event-card {
    margin: 20px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.cultural-events .event-card:hover {
    transform: translateY(-5px);
}

.cultural-events .event-image {
    height: 450px;
    border-radius: 15px;
    overflow: hidden;    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cultural-events  .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cultural-events .event-info {
    padding: 20px 0px;
    text-align: left;
}

.cultural-events .event-date {
    color: #666;
    margin-bottom: 10px;
}

.cultural-events .event-title {
    font-size: 18px;
    font-weight: 600;
    height: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    margin-bottom: 8px;
}

.cultural-events .event-location {
    color: #666;
    font-weight: bold;
    margin-bottom: 15px;
}

.cultural-events .event-location::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 5px;
}

.cultural-events .event-link {
    color: #006596;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}


/* 문화행사 슬라이드 네비게이션 스타일 */
.cultural_event_slick .slick-prev {
    left: -20px;    
    top: 40%;
}

.cultural_event_slick .slick-next {
    right: -30px;
    top: 40%;
}

.cultural_event_slick .slick-prev:before {
    content: '';
    background: url(/resources/view/phcf/images/prev_1.png) no-repeat 0 0;
    height: 35px;
    width: 35px;
    display: block;
}

.cultural_event_slick .slick-next:before {
    content: '';
    background: url(/resources/view/phcf/images/next_1.png) no-repeat 0 0;
    height: 35px;
    width: 35px;
    display: block;
}

.cultural_event_slick .slick-dots {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.cultural_event_slick .slick-dots li {
    display: inline-block;
    margin: 0 5px;
}
.cultural_event_slick .slick-dots li button {background: #bbbbbb; }
.cultural_event_slick .slick-dots li.slick-active button {background: #000000;}
.cultural_event_slick .slick-dots li button:hover {background: #000000;}

/* 문화소식 섹션 */
.cultural-news {
    padding: 60px 0px;
    max-width: 1500px;
    margin: auto;
}

.news-tabs {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}
.news-tabs .tab {
    font-size: 23px;
    color: #242424;
    font-weight: 500;
    height: auto;
    margin-bottom: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.news-tabs .tab:hover {
    color: var(--color2);
}
.news-tabs .tab.active {
    color: var(--color2);    
    font-weight: bold;
    background: linear-gradient(to top, #47474721 50%, transparent 50%);
}
.news-tabs .tab-more {
    cursor: pointer;
    font-size: 23px;
    font-weight: lighter;
    color: #666;
    padding: 0px 10px;
}
.news-tabs .tab-more:hover {
    color: var(--color2);
}
.news-container {
    display: flex;
    justify-content:space-evenly;
    gap: 20px;
    margin: 0 auto;
    margin-top: 80px;
}

.news-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
}

.news-list {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.news-list.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.news-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:15px 15px;
    margin: 10px 0px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.news-item:hover {
    transform: translateY(-3px);
    box-shadow: 1px 1px 6px rgb(0 0 0 / 29%);
}
.news-item:hover .news-title {
    color: var(--color2);
    font-weight: bold;
}
.news-item:hover .news-date {
    font-size: 16px;
}

.news-category {
    font-weight: bold;
    min-width: 110px;
}

.news-title {
    flex: 1;
    color: #333;
    text-decoration: none;    
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}

.news-title:hover {
    color: #006596;
}

.news-date {
    font-size: 14px;
    color: #666;
}

.news-gallery {
    width:47%;
}

.gallery-items {
    position: relative;
    max-height: 420px;
    border-radius: 30px;
    overflow: hidden;
}

.gallery-items img {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    padding: 0px 10px;
    object-fit: fill;
}

.news-gallery .slick-dots {bottom: 10px !important;}

/* 유관기관 섹션 */
.partner-institutions {
    background: #fff;
    padding: 0px 0px 60px 0px;
    max-width: 1500px;
    margin: auto;
}

.partner-logos {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin: 0 auto;
}

.partner-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;  
    padding: 20px 0px;
    margin: 0px 10px;
    transition: all 0.3s ease;
}

.partner-item:hover {
    transform: translateY(-3px);
}

.partner-item img {    
    width: 120px;
    height: 120px;
    border: 1px solid #b2b2b2;
    border-radius: 100%;
    object-fit: none;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.partner-item:hover img {
    filter: grayscale(0%);
    box-shadow: 1px 1px 6px rgb(0 0 0 / 29%);
}

.partner-item span {
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    display: block;
}

.partner-item:hover span {
    color: var(--color3);
}

.partner-institutions .slick-prev {
    left: -50px;
}

.partner-institutions .slick-next {
    right: -50px;
}

.partner-institutions .slick-prev:before {
    content: '';
    background: url(/resources/view/phcf/images/prev_1.png) no-repeat 0 0;
    height: 35px;
    width: 35px;
    display: block;
}

.partner-institutions .slick-next:before {
    content: '';
    background: url(/resources/view/phcf/images/next_1.png) no-repeat 0 0;
    height: 35px;
    width: 35px;
    display: block;
}

/* 문화의 현재, 바로 지금 섹션 */
.cultural-present {
    padding: 200px 20px 100px 20px;
    background: #292723;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 라이트 모드 */
html:not(.color_change) .cultural-present {
    background: #f8f8f8;
    color: #000000;
}

.cultural-present .container,
.cultural-video-meet .container,
.cultural-record .container {
    margin: 0 auto;
}

.present-content {
    display: flex;
    align-items: flex-start;
    gap: 80px;   
}

.present-left {
    flex: 1;
    max-width: 500px;
    position: sticky;
    top: 200px;
}

.present-right {
    flex: 1;
}

.section-subtitle {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.5;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

html:not(.color_change) .section-subtitle {
    color: #666;
}

.section-title {
    font-size: 45px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 40px; letter-spacing: -2px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

html:not(.color_change) .section-title {
    color: #000000;
}

.present-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 8%;
}

.present-card {
    cursor: pointer;    transition: 0.3s;
}
.present-card:hover {
    transform: translateY(-5px);
}

.present-card-image {
    position: relative;
    width: 100%;
    height: 38vw;
    overflow: hidden;
    background: #000000;
    margin-bottom: 15px;
    /* AOS 애니메이션을 위한 초기 설정 */
    will-change: transform, opacity;
}
.present-card:nth-child(even) .present-card-image {
    margin-top: 120px;
}
.present-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.photo-icon i {
    font-size: 12px;
}

.present-card-title {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    transition: color 0.3s ease;
    position: relative;
    padding-left: 60px;
}

.present-card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    transform: translateY(-50%);
    width: 50px;
    height: 1px;
    background-color: currentColor;
}

html:not(.color_change) .present-card-title {
    color: #000000;
}

/* 영상으로 만나는 문화 섹션 */
.cultural-video-meet {
    background: #292723;
    padding: 100px 20px;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html:not(.color_change) .cultural-video-meet {
    background: #f8f8f8;
    color: #000000;
}
.video-meet-content {position: relative;
}

html:not(.color_change) .cultural-present .learn-more-btn{
    filter: invert(1);
}
html:not(.color_change) .video-meet-content .section-subtitle, 
html:not(.color_change) .video-meet-content .section-title{
    color: #fff;
}

.video-meet-left {
    max-width: 500px;
    position: absolute;
    z-index: 1;
    top: 9%;
    left: 5%;
}

.video-meet-right {
    flex: 1;
}

.video-player-wrapper {
    position: relative;
}

.video-player {
    position: relative;
    width: 100%;
    height: 650px;
    background: #000000;
    margin-bottom: 20px;
}

.video-thumbnail-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-thumbnail-main img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    filter: brightness(0.8);
}
.play-button-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}
.fa-play:before {
    margin-left: 5px;
}
.play-button-main:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-title-main {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5;
    transition: color 0.3s ease;
}

html:not(.color_change) .video-title-main {
    color: #000000;
}

.learn-more-btn.video-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* 마음에 남은 문화, 기록으로 담다 섹션 */
.cultural-record {
    background: #292723;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html:not(.color_change) .cultural-record {
    background: #f8f8f8;
    color: #000000;
}
.record-card:nth-child(1),
.record-card:nth-child(2){grid-row: 1 / span 2;}

.section-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.record-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

.record-card {
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    background: #1a1a1a;
    overflow: hidden;
}

html:not(.color_change) .record-card {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.record-card:hover {
    transform: translateY(-5px);
}

.record-card-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #000000;
}

/* 첫 번째와 두 번째 카드: 이미지 세로 길이 꽉 차게 */
.record-card:nth-child(1) .record-card-image,
.record-card:nth-child(2) .record-card-image {
    height: 100%;
    min-height: 300px;
}

.record-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 카드 카테고리 타이틀 (상단 왼쪽) */
.record-card-category {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    z-index: 3;
    border-radius: 4px;
}

/* 이미지 하단 그라데이션 오버레이 */
.record-card-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.record-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 2;
}

.record-card-title {
    font-size: 14px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.record-card-subtitle {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 5px;
    opacity: 0.9;
}

/* 문화영상 섹션 */
.cultural-videos {
    color: #fff;
    background: #000000 url(/resources/view/phcf/images/footer_bg.png) top center no-repeat;
    background-size: cover;
    color: white;
    padding:150px 20px 0px 20px;
    width: 100%;
    position: relative;
    z-index:9;
}

.cultural-videos footer {background: none !important;}

.cultural-videos .section-header h2 {
    color: #fff;
}

.cultural-videos .section-header p {
    color: #ffffff;
}

.video-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;    
    padding: 60px 0;
    margin: 0 auto;
    max-width: 1500px;
}

.video-card {
    text-align: center;
    overflow: hidden;
    margin: 10px;
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
}

.video-thumbnail {
    position: relative;
    background: #000000;
    height: 400px;
    border-radius: 30px;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:transparent;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-button:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
    padding: 20px 0px;
}

.video-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

/* 반응형 디자인 */
@media (max-width: 1630px) {
    .news-container {gap: 10px;}
    .news-gallery {width:50%;}
    .news-content {width: 45%; padding-right: 48px;}
    .cultural-events .event-cards {padding-right: 45px;}
    .cultural_event_slick .slick-prev{left: 10px;}
    .cultural_event_slick .slick-next {right: 30px;}
    .partner-institutions .slick-prev {left: -20px;}
    .partner-institutions .slick-next {right: -35px;}
    .partner-institutions {padding: 0px 80px 60px 30px;}

}
@media (max-width: 1200px) {    
    .news-container { flex-direction: column-reverse; gap: 0px; margin-top: 30px;}
    .news-content {width: 90%; padding-right: 0px; margin: 0px 20px;}    
    .news-gallery {width:94%;padding: 10px 20px;}
}
@media (max-width: 1000px) {
    .slide-content {padding: 10px;}
    .hero-section .slide-item .slide-content .performance-title {font-size: 20px;}  
    .cultural-events .event-image {height: 350px;}
    .cultural-events .event-tabs, .event-tabs .tab-more { justify-content: center; font-size: 20px; }
    .event-tabs .tab { margin: 0px 5px;}
    
}

@media (max-width: 1024px) {
    .cultural-news, .cultural-events {padding: 40px 0px;}
    .section-header h2 {font-size: 36px;}
    .section-header p {font-size:16px;}
    .hero-section .slide-item { 
        min-height: 540px;
        height: 100vh;
    }
    .hero-section .slide-item .slide-image {
        height: 100%;
        z-index: 0;
    }
    .hero-section .slide-item .slide-image img { 
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .hero-section .slide-item .slide-content {
        z-index: 10;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .hero-slider .slick-prev { left: 5px; }
    .hero-slider .slick-next { right: 10px; } 
    .cultural-events .event-cards {  padding-right: 0px;  }
    .partner-institutions { padding:0px 20px 20px 20px;  }
    .performance-info {
        height: 50px;
    }
    
    .performance-title {
        font-size: 18px;
        margin-right: 0;
    }
    
    .performance-link {
        padding: 5px 0px;
    }
    .performance-link img {width:40px;}
        
    .news-content, .news-gallery {width: 100%; padding: 0px 20px; margin: 0px 0px;}    
    .news-item { flex-direction: column; align-items: flex-start;}
    .news-tabs .tab { font-size: 20px; gap: 5px; }
    .partner-item {margin: 0px 10px;}
    .partner-item img { width: 80px; height: 80px;}
    .partner-item span {font-size: 14px;}

    .partner-institutions .slick-prev {
        left: -15px;
    }
    .partner-institutions .slick-next {
        right: -15px;
    }
    
    .gallery-items img {padding: 0px 0px;}
    .video-cards {grid-template-columns: 1fr;     padding: 20px 0;    } 
    .cultural-events .event-card {margin: 0px 40px;}   
    .cultural_event_slick .slick-prev:before{left: 0px;}
    .cultural_event_slick .slick-next {right: 5px;}
    .cultural-videos { padding: 100px 10px 0px 10px;}
    .video-thumbnail {height: auto; min-height: 230px; border-radius: 10px;}
    .video-thumbnail iframe { min-height: 230px;}
    
    /* 새로운 섹션 반응형 */
    .cultural-present, .cultural-video-meet, .cultural-record {
        padding: 60px 20px;
    }
    
    .present-content, .video-meet-content {
        flex-direction: column;
        gap: 40px; align-items: center;
    }
    
    .present-left, .video-meet-left {
        max-width: 100%;
        text-align: center;
        position: static;
        top: auto;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    .present-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .record-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .slide-content {
        padding: 0 40px;
    }
    
    .hero-text-overlay {
        padding: 60px 40px;
    }
    
    .present-card-image {
        height: 400px;
    }
    
    .present-card:nth-child(even) .present-card-image {
        margin-top: 0;
    }
    
    .video-player {
        height: 400px;
    }
    
    .video-meet-left {
        position: static;
        max-width: 100%;
        margin-bottom: 20px;
    }
    html:not(.color_change) .section-subtitle{color: #000;}
    html:not(.color_change) .section-title{color: #000;}
    html:not(.color_change) .present-card-title{color: #000;}
    html:not(.color_change) .video-title{color: #000;}
    html:not(.color_change) .video-meet-content .section-subtitle{color: #000;}
    html:not(.color_change) .video-meet-content .section-title{color: #000;}
    html:not(.color_change) .video-meet-content .section-subtitle{color: #000;}
    html:not(.color_change) .video-meet-content .section-title{color: #000;}
    html:not(.color_change) .video-meet-content .section-subtitle{color: #000;}
    html:not(.color_change) .video-meet-content .section-title{color: #000;}
}

@media (max-width: 768px) {
    /* 히어로 섹션 모바일 */
    .slide-image {
        height: 100%;
        z-index: 0;
    }
    
    .slide-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center center;
    }
    
    .slide-content {
        z-index: 10;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0 20px 40px 20px;
        align-items: flex-end;
        justify-content: center;
    }
    
    .hero-text-overlay {
        padding: 40px 20px;
        text-align: center;
        width: 100%;
    }
    
    .hero-subtitle {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .hero-title {
        font-size: 32px;
        letter-spacing: -2px;
        margin-bottom: 20px;
        line-height: 1.2;
    }
    
    .learn-more-btn.hero-btn {
        padding: 15px 30px;
        font-size: 14px;
    }
    
    .hero-slider .slick-prev,
    .hero-slider .slick-next {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .hero-slider .slick-prev {
        left: 10px;
    }
    
    .hero-slider .slick-next {
        right: 10px;
    }
    
    /* 문화의 현재 섹션 모바일 */
    .cultural-present {
        padding: 60px 15px;
    }
    
    .present-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .present-left {
        position: static;
        max-width: 100%;
        text-align: center;
    }
    
    .section-subtitle {
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .present-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .present-card-image {
        height: 350px;
    }
    
    .present-card:nth-child(even) .present-card-image {
        margin-top: 0;
    }
    
    .present-card-title {
        font-size: 14px;
    }
    
    /* 영상으로 만나는 문화 섹션 모바일 */
    .cultural-video-meet {
        padding: 60px 15px;
    }
    
    .video-meet-content {
        flex-direction: column;
    }
    
    .video-meet-left {
        position: static;
        max-width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .video-player {
        height: 300px;
    }
    
    .play-button-main {
        width: 80px;
        height: 80px;
        font-size: 30px;
        border-width: 3px;
    }
    
    .video-title-main {
        font-size: 16px;
    }
    
    /* 마음에 남은 문화 섹션 모바일 */
    .cultural-record {
        padding: 60px 15px;
    }
    
    .record-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }
    
    .record-card:nth-child(1),
    .record-card:nth-child(2) {
        grid-row: auto;
    }
    
    .record-card:nth-child(1) .record-card-image,
    .record-card:nth-child(2) .record-card-image {
        height: 300px;
    }
    
    .record-card-image {
        height: 250px;
    }
    
    /* 하단 배너 모바일 */
    .bottom-banner-section {
        padding: 30px 15px;
    }
    
    .banner-slider .slick-prev,
    .banner-slider .slick-next {
        display: none !important;
    }
    
    .banner-slide {
        padding: 0 5px;
    }
}

@media (max-width: 560px) {
    .cultural-events .event-image {height: auto;}      
    .news-tabs .tab, .news-tabs .tab-more { font-size: 16px; }
    .news-tabs { gap: 5px;}
    
    /* 새로운 섹션 모바일 */
    .cultural-present, .cultural-video-meet, .cultural-record {
        padding: 40px 15px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .hero-title {
        font-size: 24px;
        letter-spacing: -1px;
    }
    
    .hero-subtitle {
        font-size: 12px;
    }
    
    .present-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .present-card-image {
        height: 300px;
    }
    
    .record-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .record-card-image {
        height: 200px;
    }
    
    .record-card:nth-child(1) .record-card-image,
    .record-card:nth-child(2) .record-card-image {
        height: 200px;
    }
    
    .slide-content {
        padding: 0 15px 30px 15px;
    }
    
    .hero-text-overlay {
        padding: 30px 15px;
    }
    
    .video-player {
        height: 250px;
    }
    
    .play-button-main {
        width: 60px;
        height: 60px;
        font-size: 24px;
        border-width: 2px;
    }
    
    .learn-more-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
    
    /* 하단 배너 작은 모바일 */
    .bottom-banner-section {
        padding: 20px 10px;
    }
    
    .banner-slide {
        padding: 0 3px;
    }
}

/* 하단 슬라이드 배너 섹션 */
.bottom-banner-section {
    padding: 20px 0 50px 0;
    margin-top: 0; background: #292723;
    transition: background-color 0.3s ease;
}

html:not(.color_change) .bottom-banner-section {
    background: #f8f8f8;
}
.banner-slider {
    max-width: 1500px;
    margin: 0 auto;
}

.banner-slide {
    padding: 0 10px;
}

.banner-slide a {
    display: block;
    text-decoration: none;
    transition: 0.3s; filter: grayscale(1);
}
html:not(.color_change) .banner-slide a {
    border: 1px solid #ccc;
}

.banner-slide a:hover {filter: grayscale(0);}

.banner-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 배너 슬라이더 네비게이션 스타일 */
.banner-slider .slick-prev,
.banner-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-slider .slick-prev:hover,
.banner-slider .slick-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.banner-slider .slick-prev {
    left: -20px;
}

.banner-slider .slick-next {
    right: -20px;
}

.banner-slider .slick-prev:before,
.banner-slider .slick-next:before {
    display: none;
}

.banner-slider .slick-dots {
    position: relative;
    bottom: 0;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.banner-slider .slick-dots li {
    display: inline-block;
    margin: 0;
    width: auto;
    height: auto;
}

.banner-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

.banner-slider .slick-dots li.slick-active button {
    background: #000000;
    width: 12px;
    height: 12px;
}

/* 반응형 */
@media (max-width: 1200px) {
    .banner-slider .slick-prev {
        left: -10px;
    }
    .banner-slider .slick-next {
        right: -10px;
    }
}

@media (max-width: 768px) {
    .bottom-banner-section {
        padding: 40px 15px;
    }
    .banner-slider .slick-prev,
    .banner-slider .slick-next {
        display: none !important;
    }
}

/* 메인 페이지 dialog 팝업 */
.ui-widget-overlay {display: none;}
.main_popup.ui-widget.ui-widget-content {box-shadow: 0 0 10px rgb(209 209 209 / 30%); padding: 10px; border-radius: 15px;}
.main_popup .ui-dialog-content label.input[type=checkbox] {background: #eeeeee;}
.main_popup .ui-widget-header { border: 0px solid #ddd !important;  background: #ffffff !important; border-bottom: 1px solid #eeeeee !important;}
.main_popup .ui-widget-header .ui-button {border: 0px solid #c5c5c5 !important;}
.main_popup .ui-dialog-titlebar-close {background: #fff url(/resources/view/phcf/images/btn-close-search.png) no-repeat !important;  top: 20px !important; right: 0px !important;}
.main_popup .ui-dialog-titlebar-close .ui-button-icon, .ui-dialog .ui-dialog-titlebar-close .ui-button-icon {background-image: none !important;}
.main_popup .ui-dialog-buttonpane button { background: #4689d3 !important; font-size: 0.9em !important;}
.main_popup .ui-dialog-buttonpane button:hover { background: #666666 !important; font-size: 0.9em !important;}
.main_popup .ui-dialog-content img {width: auto; max-width: 100%;}
.main_popup .ui-widget-content {height: auto !important;}
.main_popup .popup-checkbox-container { text-align: right;font-size: 14px;}
.main_popup .popup-checkbox-container input[type=checkbox] {margin-right: 5px;}
.main_popup table { width: 100% !important;     border: 1px solid #9c9c9c !important; border-collapse: collapse; }
.main_popup table th, .main_popup table td {vertical-align: middle; }
.main_popup table th { text-align: center;    background: #fafafa;    color: #666666;}
.main_popup table td { text-align: left; padding: 5px 10px;}


/* 모바일 대응 */
@media only screen and (max-width: 1024px) {
    .ui-widget.ui-widget-content {top: 120px !important; left: 0px !important; margin: 10px;}  
  }