@charset "UTF-8";
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: #333;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '<';
}
[dir='rtl'] .slick-prev:before
{
    font-family: 'Font Awesome 6 Pro';
    content: '\f054';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '>';
}
[dir='rtl'] .slick-next:before
{
    font-family: 'Font Awesome 6 Pro';
    content: '\f053';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

ul.v_con > .slick-list > .slick-track > li.cells{ position: relative; display: inline-block; margin: 0 18px var(--space-36); width: calc(100% - var(--space-36));}
ul.v_con > .slick-list > .slick-track > li.cells.box{ background: var(--color-k); border-radius: 18px; transform: scale(1); transition: all 100ms ease-in-out;}

/* 비주얼 카드 슬라이더 (태블릿/모바일) */
@media screen and (max-width: 1000px) {
    .visual_cards.slick-slider {
        display: block;
        width: 100%;
        max-width: 600px;
        margin: 0 auto 60px;
        position: relative;
    }

    .visual_cards.slick-slider .slick-list {
        overflow: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .visual_cards.slick-slider .slick-track {
        display: flex;
        margin: 0;
        padding: 0;
    }

    .visual_cards.slick-slider .slick-slide {
        background: transparent;
        display: block;
        width: 100%;
        opacity: 1;
        float: none;
    }

    .visual_cards.slick-slider .slick-slide.slick-cloned {
        display: none !important;
    }

    .visual_cards.slick-slider li.visual_card {
        display: flex;
        opacity: 1;
        visibility: visible;
        width: 100%;
        min-height: 240px;
    }

    .visual_cards.slick-slider .slick-slide:nth-child(1) li.visual_card,
    .visual_cards.slick-slider li.visual_card:nth-child(1) {
        background: #F15D3E;
    }

    .visual_cards.slick-slider .slick-slide:nth-child(2) li.visual_card,
    .visual_cards.slick-slider li.visual_card:nth-child(2) {
        background: #036BAC;
    }

    .visual_cards.slick-slider .slick-slide:nth-child(3) li.visual_card,
    .visual_cards.slick-slider li.visual_card:nth-child(3) {
        background: #009456;
    }

    /* dots 스타일 - 기본 slick 스타일 재정의 */
    .visual_cards.slick-slider .slick-dots {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        list-style: none;
        z-index: 10;
        width: auto;
        text-align: left;
    }

    .visual_cards.slick-slider .slick-dots li {
        margin: 0;
        width: 16px;
        height: 16px;
        line-height: 0;
        display: block;
        position: static;
    }

    .visual_cards.slick-slider .slick-dots li button {
        width: 16px;
        height: 16px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background-color: #D9D9D9;
        font-size: 0;
        line-height: 0;
        cursor: pointer;
        transition: background-color 0.3s ease;
        display: block;
    }

    .visual_cards.slick-slider .slick-dots li button:before {
        display: none;
        content: '';
        opacity: 0;
    }

    .visual_cards.slick-slider .slick-dots li button:hover,
    .visual_cards.slick-slider .slick-dots li button:focus {
        background-color: #D9D9D9;
        outline: none;
    }

    .visual_cards.slick-slider .slick-dots li.slick-active {
        width: 40px;
    }

    .visual_cards.slick-slider .slick-dots li.slick-active button {
        width: 40px;
        height: 16px;
        border-radius: 8px;
        background-color: #000000;
    }

    .visual_cards.slick-slider .slick-dots li.slick-active button:before {
        display: none;
        opacity: 0;
    }
}

/* 모바일에서 슬라이더 유동적 */
@media screen and (max-width: 576px) {
    .visual_cards.slick-slider {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .visual_cards.slick-slider .slick-list {
        width: 100%;
    }

    .visual_cards.slick-slider .slick-slide {
        width: 100%;
    }

    .visual_cards.slick-slider li.visual_card {
        width: 100%;
    }
}


ul.v_con > .slick-list > .slick-track > li.cells.box:has(> a){ cursor: pointer;}
ul.v_con > .slick-list > .slick-track > li.cells.box:hover:has(> a){}
ul.v_con > .slick-list > .slick-track > li.cells.box:active:has(> a){ transform: scale(.975);}

ul.v_con > .slick-list > .slick-track > li.cells.box > a{ display: block; aspect-ratio: inherit; border-radius: inherit; background: #f99; transition: inherit; box-shadow: 0 10px 30px -10px var(--color-k-065); filter: brightness(1); text-decoration: none;}
ul.v_con > .slick-list > .slick-track > li.cells.box:hover > a{ box-shadow: 0 10px 30px -10px var(--color-k); filter: brightness(1.1);}/*바뀌는 속성만 적어주세요*/
ul.v_con > .slick-list > .slick-track > li.cells.box:active > a{ box-shadow: 0 1px 3px -1px var(--color-k); filter: brightness(.9);}
ul.v_con > .slick-list > .slick-track > li.cells > img,
ul.v_con > .slick-list > .slick-track > li.cells > a > img{ width: 100%; border-radius: inherit;}
ul.v_con.two_con   > .slick-list > .slick-track > li.cells{ width: calc(50%     - var(--space-36));}
ul.v_con.three_con > .slick-list > .slick-track > li.cells{ width: calc(33.333% - var(--space-36));}
ul.v_con.four_con  > .slick-list > .slick-track > li.cells{ width: calc(25%     - var(--space-36));}
ul.v_con.six_con   > .slick-list > .slick-track > li.cells{ width: calc(16.666% - var(--space-36));}
ul.v_con.ub_two_con > .slick-list > .slick-track > li.cells:nth-child(2n-1){ width: calc(33.333% - var(--space-36));}
ul.v_con.ub_two_con > .slick-list > .slick-track > li.cells:nth-child(2n){ width: calc(66.666% - var(--space-36));}
ul.v_con.rub_two_con > .slick-list > .slick-track > li.cells:nth-child(2n-1){ width: calc(66.666% - var(--space-36));}
ul.v_con.rub_two_con > .slick-list > .slick-track > li.cells:nth-child(2n){ width: calc(33.333% - var(--space-36));}



/* ===================================
   Stack Card 슬라이더 애니메이션
   - 중앙 1개 + 좌우 각 2개 = 총 5개 카드 표시
   - 중앙 카드: 426x600px, opacity: 1, blur: 0
   - 1번째 양옆: 426x500px, opacity: 0.6, blur: 2px
   - 2번째 양옆: 426x500px, opacity: 0.3, blur: 5px
   =================================== */

/* 기본: 모든 카드 숨김 */
ul.stack_card > .slick-list > .slick-track > li.cells {
    position: relative;
    opacity: 0;
    filter: blur(10px) brightness(1.2);
    transform: scale(0.85);
    z-index: 1;
    height: var(--card-height-inactive) !important;
    width: var(--card-width) !important;
    transition: all 400ms ease-in-out;
}

/* 2번째 양옆 카드들 (더 멀리 있는 카드) */
ul.stack_card > .slick-list > .slick-track > li.cells.slick-slide:not(.slick-active) {
    opacity: 0.3;
    filter: blur(5px) brightness(1.15);
    transform: scale(0.88);
    z-index: 2;
    height: var(--card-height-inactive) !important;
    align-self: center;
}

/* slick-active인 카드들 (3개) - 중앙과 양옆 1개씩 */
ul.stack_card > .slick-list > .slick-track > li.cells.slick-active {
    opacity: 0.6;
    filter: blur(2px) brightness(1.1);
    transform: scale(0.95);
    z-index: 3;
    height: var(--card-height-inactive) !important;
    align-self: center;
}

/* 중앙 카드 (slick-current) - 가장 마지막에 위치해서 우선순위 최고 */
ul.stack_card > .slick-list > .slick-track > li.cells.slick-current {
    opacity: 1 !important;
    filter: blur(0) brightness(1) !important;
    transform: scale(1) !important;
    z-index: 5 !important;
    height: var(--card-height-active) !important;
}

/* 중앙 카드 그라데이션 오버레이 */
ul.stack_card > .slick-list > .slick-track > li.cells.slick-current::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 85%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.92) 35%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0.2) 85%, transparent 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: var(--radius-lg);
}

/* 비활성화 카드 화이트 배경 */
ul.stack_card .slick-slide:not(.slick-current) .card_image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: var(--color-white);
    z-index: 1;
    pointer-events: none;
    border-radius: var(--radius-card-white-bg) var(--radius-card-white-bg) 0 0;
}

/* 중앙 카드 텍스트 화이트 */
ul.stack_card > .slick-list > .slick-track > li.cells.slick-current .card_title,
ul.stack_card > .slick-list > .slick-track > li.cells.slick-current .card_desc,
ul.stack_card > .slick-list > .slick-track > li.cells.slick-current .card_date,
ul.stack_card > .slick-list > .slick-track > li.cells.slick-current .card_age {
    color: var(--color-white) !important;
}

/* 정책 카드 제목 크기 */
ul.stack_card > .slick-list > .slick-track > li.cells .card_title {
    font-size: 1.75rem !important;  /* 28px */
    font-weight: 700 !important;
}

/* 비활성 카드: 기간, 연령, D-day 숨김 */
ul.stack_card > .slick-list > .slick-track > li.cells:not(.slick-current) .card_dday,
ul.stack_card > .slick-list > .slick-track > li.cells:not(.slick-current) .card_date,
ul.stack_card > .slick-list > .slick-track > li.cells:not(.slick-current) .card_age {
    display: none;
}

ul.stack_card.Lock_first_arrow .slick-prev,
ul.stack_card.Lock_last_arrow .slick-next{ pointer-events: none; opacity: .5;}



.slick-list{ -webkit-mask-image: linear-gradient(90deg, transparent 0, #fff 18px, #fff calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #fff 18px, #fff calc(100% - 18px), transparent 100%);}
/*
슬릭 재설계 구성

ul.v_con.slick-initialized.slick-slider : 슬릭으로인하여 초기화된 구역, 해당 슬릭영역 컨테이너
    .slick-prev.slick-arrow             : 화살표(이전)
    .slick-list.draggable               : 리스트 영역(overflow: hidden; 걸려있는 영역)
        .slick-track                    : 슬릭 슬라이드 트랙. 모든걸 품고 직접 움직이는 영역
            li.cells.box.slick-slide.slick-cloned        : Infinite(반복)시 복제된 엘리먼트들
            li.cells.box.slick-slide.slick-active        : 현재 눈에 보이는 엘리먼트들
            li.cells.box.slick-slide.slick-active.slick-current  : 현재 기준 슬라이드가 몇번째 
            li.cells.box
            li.cells.box
            li.cells.box

    .slick-next.slick-arrow             : 화살표(다음)
    .slick-dots                         : 땡땡이ㅎ

*/
ul.slick-dots{ bottom: 0;}
ul.slick-dots > li{ width: 14px; height: 14px; border-radius: 7px; box-shadow: inset 0 0 0 3px var(--color-point); transition: all 100ms linear;}
ul.slick-dots > li:hover{ box-shadow: inset 0 0 0 8px var(--color-point);}
ul.slick-dots > li.slick-active{ width: 39px; box-shadow: inset 0 0 0 8px var(--color-point); cursor: default;}
ul.slick-dots > li *{ display: none;}

.slick-arrow {
    background: rgba(255, 255, 255, 0.9);
    width: 60px;
    height: 60px;
    margin-top: -30px;
    border-radius: 50%;
    z-index: 6;
}

.slick-arrow:focus,
.slick-arrow:hover {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    outline: none;
}
.slick-arrow.slick-prev { left: 0; }
.slick-arrow.slick-next { right: 0; }

/* Stack Card 화살표 위치 - 중앙 카드 좌우 겹치게 */
.stack_card .slick-prev {
    left: 50%;
    transform: translateX(-243px);
}

.stack_card .slick-next {
    right: auto;
    left: 50%;
    transform: translateX(183px);
}

/* Stack Card 화살표 아이콘 */
.stack_card .slick-arrow:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.stack_card .slick-arrow:hover:before {
    opacity: 1;
}

.stack_card .slick-prev:before {
    background-image: url('../img/arrow-left.svg');
}

.stack_card .slick-next:before {
    background-image: url('../img/arrow-right.svg');
}

/* Partner Slider Custom Arrows */
.partner_slider .slick-prev,
.partner_slider .slick-next {
    width: 10px;
    height: 16px;
    z-index: 10;
    top: 50%;
    margin-top: -8px;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}

.partner_slider .slick-prev {
    left: 30px;
}

.partner_slider .slick-next {
    right: 30px;
}

.partner_slider .slick-prev:before,
.partner_slider .slick-next:before {
    content: '';
    display: block;
    width: 10px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
}

.partner_slider .slick-prev:before {
    background-image: url('../img/arrow-left.svg');
}

.partner_slider .slick-next:before {
    background-image: url('../img/arrow-right.svg');
}

.partner_slider .slick-prev:hover,
.partner_slider .slick-prev:focus,
.partner_slider .slick-next:hover,
.partner_slider .slick-next:focus {
    background: transparent;
}

.partner_slider .slick-prev:hover:before,
.partner_slider .slick-next:hover:before {
    opacity: 1;
}

/* ===================================
   팝업 슬라이더 커스터마이징
   =================================== */

/* 팝업 슬라이더 기본 스타일 */
.popup-content .slick-slider {
    margin-bottom: 0;
}

/* 팝업 화살표 버튼 */
.popup-content .slick-prev,
.popup-content .slick-next {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--color-white);
    cursor: pointer;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all var(--duration-base) var(--ease-out);
    padding: 0;
    margin: 0;
    line-height: 0;
    text-align: center;
    font-size: 0;
    top: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.popup-content .slick-prev {
    left: var(--space-20);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.popup-content .slick-next {
    right: var(--space-20);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.popup-content .slick-prev:hover:not(:disabled),
.popup-content .slick-next:hover:not(:disabled) {
    background: var(--color-primary);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
}

/* 기본 슬릭 화살표 완전히 제거 */
.popup-content .slick-prev:before,
.popup-content .slick-next:before {
    content: none;
    display: none;
    opacity: 0;
}

/* 화살표 이미지 스타일 */
.popup-content .slick-prev img,
.popup-content .slick-next img {
    width: var(--space-24);
    height: var(--space-24);
    transition: filter var(--duration-base) var(--ease-out);
}

/* 왼쪽 화살표 위치 조정 */
.popup-content .slick-prev img {
    position: relative;
    left: -2px;
}

/* Hover 시 이미지 흰색으로 변경 */
.popup-content .slick-prev:hover:not(:disabled) img,
.popup-content .slick-next:hover:not(:disabled) img {
    filter: brightness(0) invert(1);
}

/* 팝업 인디케이터 (dots) */
.popup-content .slick-dots {
    bottom: var(--space-20);
}

.popup-content .slick-dots li button:before {
    font-size: var(--font-12);
    color: var(--color-white);
    opacity: 0.5;
}

.popup-content .slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--color-white);
}

/* 팝업 슬라이드 스타일 */
.popup-content .slick-slide {
    outline: none;
}

.popup-content .slick-slide > div {
    outline: none;
}

/* 팝업 슬라이더 반응형 */
@media screen and (max-width: 768px) {
    .popup-content .slick-prev,
    .popup-content .slick-next {
        width: 44px;
        height: 44px;
    }

    .popup-content .slick-prev {
        left: var(--space-10);
    }

    .popup-content .slick-next {
        right: var(--space-10);
    }

    .popup-content .slick-prev img,
    .popup-content .slick-next img {
        width: var(--space-20);
        height: var(--space-20);
    }
}

@media screen and (max-width: 480px) {
    .popup-content .slick-prev,
    .popup-content .slick-next {
        width: var(--space-36);
        height: var(--space-36);
    }

    .popup-content .slick-prev {
        left: 5px;
    }

    .popup-content .slick-next {
        right: 5px;
    }

    .popup-content .slick-prev img,
    .popup-content .slick-next img {
        width: var(--space-16);
        height: var(--space-16);
    }
}


/* ===================================
   여수시 청년정책 플랫폼 커스텀 스타일
   =================================== */

/* 슬릭 슬라이더 화살표 커스터마이징 */
.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    z-index: 10;
}

.slick-prev:before,
.slick-next:before {
    font-size: 50px;
    opacity: 0.7;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    opacity: 1;
}

/* 슬릭 슬라이더 도트 커스터마이징 */
.slick-dots {
    bottom: -40px;
}

.slick-dots li button:before {
    font-size: var(--font-12);
    color: var(--color-gray-400);
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: var(--color-primary);
    opacity: 1;
}