@charset "utf-8";

/* layout */

.section-slider {
    
    background-color: #f8f8f8;
}

.visualSwiper {
    width: 100%;
    max-height: 680px;
    aspect-ratio: 2000 / 680;
    
}

.visualSwiper .swiper-slide {
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 20px;
    background: transparent;
    padding: 10px 25px 0;
    color: #fff;
}

.slider-controls .swiper-pagination {
    position: static;
    width: auto;
}

.visual-dot-pagination {
    order: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}

.visual-dot-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 !important;
    border: 2px solid #fff;
    border-radius: 0;
    background: transparent;
    opacity: 1;
}

.visual-dot-pagination .swiper-pagination-bullet-active {
    border-color: #ff334f;
    background: #ff334f;
}

.slider-controls .button-group {
    order: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.visual-fraction {
    order: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 38px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.visual-fraction .visual-current {
    color: #ff334f;
}

.button-group button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 20px;
}

.visualSwiper .button-group button {
    position: relative;
    width: 16px;
    height: 20px;
    overflow: hidden;
    font-size: 0;
}

.visualSwiper .button-group button::before,
.visualSwiper .button-group button::after {
    content: '';
    position: absolute;
}

.visualSwiper .visual-prev::before,
.visualSwiper .visual-next::before {
    top: 4px;
    width: 9px;
    height: 9px;
    border-top: 3px solid #fff;
}

.visualSwiper .visual-prev::before {
    left: 4px;
    border-left: 3px solid #fff;
    transform: rotate(-45deg);
}

.visualSwiper .visual-next::before {
    right: 4px;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
}

.visualSwiper .visual-pause::before,
.visualSwiper .visual-pause::after {
    top: 4px;
    width: 3px;
    height: 12px;
    background: #fff;
}

.visualSwiper .visual-pause::before { left: 4px; }
.visualSwiper .visual-pause::after { right: 4px; }

.visualSwiper .visual-play::before {
    top: 4px;
    left: 5px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #fff;
}


/* calendar */
.section-calendar {overflow: hidden;padding: 80px 0;background-color: #e9f3ff;}
.section-calendar .inner {position: relative;z-index: 1;}
.section-calendar .inner:before {content: '';position: absolute;bottom: 30px;left: -190px;width: 229px;height: 287px;background: url(../../images/2026/main/ico-cal-left.png) no-repeat 0 0;}  
.section-calendar .inner:after {content: '';position: absolute;bottom: 30px;right: -305px;width: 365px;height: 468px;background: url(../../images/2026/main/ico-cal-right.png) no-repeat 0 0;}
.section-calendar h3 {display: flex;justify-content: center;gap: 16px;color: #002d63;font-size: 2.375rem;font-family: 'Paperlogy';font-weight: 700;}
/* .section-calendar h3:after {content: '';width: 34px;height: 34px;background: url(../../images/2026/common/ico-all.png) no-repeat 0 -20px} */
.section-calendar .event-item .status-label {margin-top: 0}

.view-more {display: flex;width: 34px;height: 34px;margin-top: 2px;background: url(../../images/2026/common/ico-all.png) no-repeat 0 -20px}

.section-calendar .calendar-layout {position: relative;z-index: 2;}

/* 하단 */
.article-banner .inner {display: flex;gap: 30px;padding: 80px 0 140px}
.article-banner h3 { margin-bottom: 25px; color: #002d63;font-size: 2.375rem;font-weight: 700;font-family: 'Paperlogy';}

/* 광장소식 */
.section-news {position: relative;width: calc((60.9375% - 30px))}
.section-news ul {display: flex;flex-direction: column;gap: 8px;}
.section-news ul li a{display: flex;gap: 35px;padding: 16px 50px 16px 30px;background-color: #f7f7f7;border-radius: 15px;font-size: 1.125rem;line-height: 1.1;font-weight: 400;transition: .3s background-color ease-in-out}
.section-news ul li a .news-date {flex-shrink: 0;color: #555;font-weight: inherit;min-width: 86px}
.section-news ul li a .news-title {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0;color: #000;font-weight: inherit;}
.section-news .view-more{position: absolute;top: 3px;left: 150px;display: flex;}


/* 배너 존 */
.section-banner {
    position: relative;
    width: 39.0625%;
}

.section-banner h3 {
    padding-right: 230px;
}

.bannerSwiper {
    width: 100%;
}

.bannerSwiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.bannerSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-controls {
    top: 2px;
    right: 0;
    bottom: auto;
    left: auto;
    transform: none;
    gap: 10px;
    padding: 7px 10px 7px 20px;
    color: #333;
    background: transparent;
    border: 1px solid #51739c;
    border-radius: 100vw;
}

.banner-controls .swiper-pagination {
    color: #333;
    font-size: 14px;
}

.banner-controls .button-group {
    display: flex;
    align-items: center;
    gap: 1px;
}

.banner-controls .button-group button {
    width: auto;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    color: #333;
    background: #fff url(../../images/2026/common/ico-all.png) no-repeat -40px -20px;
}

.banner-controls .button-group button.btn-banner-next {
    background-position: -64px -20px
}

.banner-controls .button-group button.btn-banner-pause {
    background-position: -88px -20px
}

.banner-controls .button-group button.btn-banner-play {
    background-position: -112px -20px
}

.banner-controls .swiper-pagination-current {color: #4a66b9;font-weight: 700;}

@media (max-width: 1200px) {
    .section-calendar {padding: 40px 0 30px}
    .section-calendar h3,
    .section-banner h3,
    .article-banner h3 {font-size: 1.875rem}
    .section-calendar h3 .view-more {margin-top: -2px;}

    
    .calendar-layout {margin: 20px 0 0;}

    .article-banner .inner {padding: 30px 20px 50px;gap: 20px;}
    
    .section-news {width: 55%;} 
    .section-banner {width: calc(45% - 20px)}
    .section-news .view-more {left: auto;right: 0;top: -5px;}
}

@media (max-width: 1024px) {
    .slider-controls {
        bottom: 20px;
    }
    .banner-controls {
        top: -5px;
        bottom: auto;
    }
    .section-news ul li a {padding: 12px 25px 12px 15px;font-size: 1rem;gap: 15px;}
    .section-news ul li a .news-date {font-size: 0.9375rem}
    
}
@media (max-width: 900px) {
    .section-news {width: 50%;} 
    .section-banner {width: calc(50% - 20px)}
}
@media (max-width: 767px) {
    .section-calendar {
        padding: 35px 0 0;
    }
    .section-calendar h3,
    .section-banner h3,
    .article-banner h3 {font-size: 1.5rem;}

	.section-calendar h3 .view-more {margin-top: -8px;}
    .section-calendar h3 {
        padding: 0 20px;
        justify-content: space-between;
    }
    .section-calendar .inner {padding: 0;}
    .section-calendar .calendar-left {padding: 20px 20px;width: calc(100% - 40px);margin: 0 auto 20px;}


    .visualSwiper {
        width: 100%;
        aspect-ratio: 767 / 426;
    }
    .visualSwiper .slide1 {background: url(../../images/2026/main/main_visual01_mo.jpg) no-repeat 50% 50% !important;background-size: 100% auto !important}
    .visualSwiper .slide2 {background: url(../../images/2026/main/main_visual02_mo.jpg) no-repeat 50% 50% !important;background-size: 100% auto !important}
    .visualSwiper .slide3 {background: url(../../images/2026/main/main_visual03_mo.jpg) no-repeat 50% 50% !important;background-size: 100% auto !important}
    .visualSwiper .slide4 {background: url(../../images/2026/main/main_visual04_mo.jpg) no-repeat 50% 50% !important;background-size: 100% auto !important}

    /* 하단 */
    .article-banner h3 {margin-bottom: 15px;}
    .article-banner .inner {flex-direction: column;gap: 35px;padding: 35px 20px 80px}
    .article-banner .inner .section {width: 100%}
    .section-news .view-more {top: -10px}
    .section-news ul li a {gap: 5px;}
    .section-news ul li a .news-date {min-width: 76px}

    .banner-controls {top: -2px;padding: 3px 10px 3px 20px;}
    .slider-controls .button-group {gap: 4px;}
}

@media (max-width: 420px) {
    .section-banner h3, 
    .article-banner h3 {margin-bottom: 22px;}
    .slider-controls {gap: 10px;}
    .visual-fraction {font-size: 0.875rem;}
    

    .visualSwiper .visual-prev::before, .visualSwiper .visual-next::before {
        width: 8px;
        height: 8px;
    }
}


@media (hover:hover) and (pointer: fine) {
    .section-news ul li a:hover {background-color: #eaf5ff;font-weight: 600;letter-spacing: -0.058em;}
    .section-news ul li a:hover .news-date,
    .section-news ul li a:hover .news-title {color: var(--hover-link-color);}
}