@font-face {
    font-family: 'OneStoreMobilePop';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

.graphic {
    width: 100%;
    height: auto;
    justify-items: center;
}

.graphic>div {
    margin-bottom: 8rem;
}

.selector {
    padding: 1rem 2rem;
    margin: 0 2rem;
    background-color: #ddd ;
    border-radius: 2rem;
    font-family: 'OnestoreMobilePop', sans-serif;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.hide {
    display: none;
}

/* online section start */

.category {
    width: 90%;
}

/*poromotion carousel start*/
.online_carousel {
    padding: 2rem;
    background-color: #3c668f;
    margin-bottom: 8rem;
}

.container {
    position: relative;
    max-width: 1160px;
    padding-block: 1.5rem;
    display: flex; /* grid 대신 flex가 캐러셀 제어에 더 유리할 수 있습니다 */
    overflow-x: auto; /* 가로 스크롤 허용 */
    align-content: center;
    row-gap: 2rem;
    overflow: hidden;
    cursor: grab; /* 평상시 손바닥 모양 */
    user-select: none; /* 드래그 중 텍스트 선택 방지 */
    -webkit-user-drag: none; /* 이미지 드래그 방지 */
}

.container::-webkit-scrollbar {
    display: none; /* 크롬, 사파리 스크롤바 숨기기 */
}

.container.active,
.container.active * {
    cursor: grabbing; /* 클릭 중 꽉 쥔 손바닥 모양 */
}

.content {
    width: max-content;
    display: flex;
}

.card {
    width: clamp(330px,25vw,350px);
    box-shadow: 0 4px 12px hsla(220, 100%, 20%, .3);
    padding: 1.5rem 1rem 2.5rem;
    margin-inline: 1.3rem;
    border-radius: 1rem;
    /* cursor: pointer; */
    background-color: #fff;
    transition: transform .4s;
    flex: 0 0 auto; /* 카드가 줄어들지 않도록 고정 */
    scroll-snap-align: start; /* 스크롤이 멈출 때 카드의 시작 부분에 맞춤 */
}

.card h3 {
    font-family: 'OnestoreMobilePop', sans-serif;
    font-size: clamp(1rem,1.3vw,1.3rem);
    padding: 0.6rem 0 0 1.2rem;
    color: #81a9cc;
}

.card p {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(1rem,1vw,1.3rem);
    font-weight: 600;
    line-height: 150%;
    padding: 0.5rem 1.2rem;
    color: #333;
}

.card_img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 90%;
    border: 1px solid #e2e2e2;
    overflow: hidden;
    margin: 0 auto .5rem;
    pointer-events: none; /* 이미지가 마우스 이벤트를 방해하지 않도록 설정 */
}

.card:hover {
    transform: scale(1.05);
}

/* 컨테이너를 감싸는 래퍼에 상대 위치 지정 */
.carousel_wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px; /* 컨테이너보다 조금 넓게 */
    margin: 0 auto;
}

.nav_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    color: #3c668f;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav_btn:hover {
    background-color: #fff;
    color: #1a4267;
    transform: translateY(-50%) scale(1.1);
}

.nav_btn:active {
    transform: translateY(-50%) scale(0.95);
}

.prev { left: 0; }
.next { right: 0; }

/*poromotion carousel end*/



/* notice파트 그리드 공통 시작 */
.notice_block {
    background: linear-gradient(44deg,rgba(245, 245, 245, 0.75) 0%, rgba(255, 255, 255, 1) 23%, rgba(245, 245, 245, 0.75) 43%, rgba(255, 255, 255, 1) 78%, rgba(245, 245, 245, 0.77) 91%, rgba(255, 255, 255, 1) 100%);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* 이미지가 튀어나가지 않게 */
}

.notice_img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* notice파트 그리드 공통 끝*/

@media (min-width: 1025px) {

    .banner {
        width: 100%;
        aspect-ratio: 8 / 1;
        margin-bottom: 8Rem;
        background: url(img/etc/banner_pc.jpg) no-repeat;
        background-size: contain;
    }

    .sub_title {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: clamp(1.5rem,2vw,3rem);
        color: #3c668f;
        margin-left: 2rem;
    }

    .sub_white {
        color: #fff;
    }

    /*notice gallery start*/

    .online_notice {
        margin-bottom: 8rem;
    }

    .notice_grid {
        display: grid;
        width: 100%;
        height: 140vh; /* PC에서만 높이 고정 */
        gap: 1rem;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
    .notice_block {
        display: inline-block;
        border-radius: 1rem;
        margin: 0.7rem;
        align-content: center;
        justify-items: center;
    }

    .notice_img {
        width: 95%;
        height: 90%;
        border-radius: 1rem;
        overflow: hidden;
        align-content: center;
    }


    .notice_block:nth-child(1) {
        grid-column: 1/3;
        grid-row: 1/4;
    }
    .notice_block:nth-child(2) {
        grid-column: 3/5;
        grid-row: 1/2;
    }
    .notice_block:nth-child(3) {
        grid-column: 5/7;
        grid-row: 1/3;
    }
    .notice_block:nth-child(4) {
        grid-column: 3/5;
        grid-row: 2/5;
    }
    .notice_block:nth-child(5) {
        grid-column: 5/7;
        grid-row: 3/7;
    }
    .notice_block:nth-child(6) {
        grid-column: 3/4;
        grid-row: 5/7;
    }
    .notice_block:nth-child(7) {
        grid-column: 4/5;
        grid-row: 5/7;
    }
    .notice_block:nth-child(8) {
        grid-column: 1/3;
        grid-row: 4/7;
    }

    /*notice gallery end*/

    /* collboration start */

    .online_collabo {
        display: block;
        position: relative;
        padding: 2rem;
        background-color: #81a9ee;
        text-align: center;
        justify-items: center;
        height: max-content;
    }

    .collabo_left, .collabo_right {
        position: relative;
        top: -0px;
    }

    .collabo_left:before, .collabo_left:after {
        position: absolute;
        left: -30px;
        content: '';
        height: 30px;
        width: 6px;
        background-color: #fff;
        transition: 0.3s linear;
    }
    .collabo_right:before, .collabo_right:after {
        position: absolute;
        right: -30px;
        content: '';
        height: 30px;
        width: 6px;
        background-color: #fff;
        transition: 0.3s linear;
    }
    .online_collabo:hover .collabo_left::before {
        transform: rotate(45deg);
    }
    .online_collabo:hover .collabo_left::after {
        transform: rotate(-45deg);
    }
    .online_collabo:hover .collabo_right::before {
        transform: rotate(45deg);
    }
    .online_collabo:hover .collabo_right::after {
        transform: rotate(-45deg);
    }

    .collabo_wrapper {
        margin-top: 5%;
        width: 80%;
        display: flex;
        justify-content: space-between;
    }

    .collabo_card {
        position: relative;
        width: 20vw;
        height: 25vw;
        padding: 1rem;
        /* border: #333 5px  solid; */
        text-align: center;
        justify-items: center;
        cursor: pointer;
    }

    /* https://rgy0409.tistory.com/5049 회전하는 테두리 참고사이트 */
    .collabo_thumb {
        position: relative;
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        overflow: hidden;
    }
    /* 참고 사이트의 가상클래스 before 역활 회전하는 뒷 배경 */
    .collabo_grad {
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        background: linear-gradient(45deg, #F58529 0%, #FEDA77 10%, #DD2a7b 30%, #8134af 70%, #515bd4 90%);
    }

    /* 참고 사이트의 가상클래스 after 역활 콘텐츠가 보이는 부분 */
    .collabo_thumb img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        height: 90%;
        display: block;
        border-radius: 50%;
        background-color: #fff;
        transform: translate(-50%,-50%);
    }

    .collabo_card:hover .collabo_grad {
        animation: rotate 4s infinite linear;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    .collabo_card h2 {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: clamp(0.7rem,1.8vw,1.8rem);
        margin-top: 1rem;
        padding: 0.5rem 1.5rem;
        background-color: #fff;
        border-radius: 1.5rem;
        color: #1a4267;
        letter-spacing: 0.1rem;
    }

    .collabo_card h3 {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: clamp(1rem,1.3vw,1.3rem);
        margin-top: 0.5rem;
        color: #1a4267;
    }

    /* collboration end */
}


/* 태블릿 버전 */
@media (max-width: 1024px) {

    .banner {
        width: 100%;
        aspect-ratio: 6 / 1;
        margin-bottom: 8Rem;
        background: url(img/etc/banner_tablet.jpg) no-repeat;
        background-size: contain;
    }

    .sub_title {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: 4vw;
        color: #3c668f;
        text-align: center;
    }

    .sub_white {
        color: #fff;
    }

    /*notice gallery start*/

    .online_notice {
        margin-bottom: 10rem;
    }

    .notice_grid {
        width: 100%;
        height: auto;
        display: grid;
        gap: 0.3rem;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(4,1fr);
        padding-block: 1rem;
    }
    .notice_block {
        display: inline-block;
        border-radius: 1rem;
        margin: 0.7rem;
        align-content: center;
        justify-items: center;
    }

    .notice_img {
        width: 85%;
        aspect-ratio: 3 / 4;
        border-radius: 1rem;
        overflow: hidden;
        align-content: center;
    }

    .notice_img img {
        object-fit: contain;
    }

    /* collboration start */

    .online_collabo {
        display: block;
        position: relative;
        padding: 2rem;
        background-color: #81a9ee;
        text-align: center;
        justify-items: center;
        height: 400px;
    }

    .collabo_left, .collabo_right {
        position: relative;
        top: -3px;
    }

    .collabo_left:before, .collabo_left:after {
        position: absolute;
        left: -30px;
        content: '';
        height: 30px;
        width: 6px;
        background-color: #fff;
        transition: 0.3s linear;
    }
    .collabo_right:before, .collabo_right:after {
        position: absolute;
        right: -30px;
        content: '';
        height: 30px;
        width: 6px;
        background-color: #fff;
        transition: 0.3s linear;
    }
    
    .online_collabo:hover .collabo_left::before {
        transform: rotate(45deg);
    }
    .online_collabo:hover .collabo_left::after {
        transform: rotate(-45deg);
    }
    .online_collabo:hover .collabo_right::before {
        transform: rotate(45deg);
    }
    .online_collabo:hover .collabo_right::after {
        transform: rotate(-45deg);
    }

    .collabo_wrapper {
        margin-top: 5%;
        width: 80%;
        display: flex;
        justify-content: space-between;
    }

    .collabo_card {
        position: relative;
        width: 20vw;
        height: 25vw;
        padding: 1rem;
        /* border: #333 5px  solid; */
        text-align: center;
        justify-items: center;
        cursor: pointer;
    }

    /* https://rgy0409.tistory.com/5049 회전하는 테두리 참고사이트 */
    .collabo_thumb {
        position: relative;
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        overflow: hidden;
    }
    /* 참고 사이트의 가상클래스 before 역활 회전하는 뒷 배경 */
    .collabo_grad {
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        background: linear-gradient(45deg, #F58529 0%, #FEDA77 10%, #DD2a7b 30%, #8134af 70%, #515bd4 90%);
    }

    /* 참고 사이트의 가상클래스 after 역활 콘텐츠가 보이는 부분 */
    .collabo_thumb img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        height: 90%;
        display: block;
        border-radius: 50%;
        background-color: #fff;
        transform: translate(-50%,-50%);
    }

    .collabo_card:hover .collabo_grad {
        animation: rotate 4s infinite linear;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    .collabo_card h2 {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: clamp(0.7rem,1.8vw,1.8rem);
        margin-top: 1rem;
        padding: 0.5rem 1.5rem;
        background-color: #fff;
        border-radius: 1.5rem;
        color: #1a4267;
        letter-spacing: 0.1rem;
    }

    .collabo_card h3 {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: clamp(1rem,1.3vw,1.3rem);
        margin-top: 0.5rem;
        color: #1a4267;
    }

    /* collboration end */
}


/* 모바일 버전 */
@media (max-width: 768px) {

    /* 모바일에서는 캐러셀 버튼 숨기기 */
    .nav_btn { display: none; }


    .banner {
        width: 100%;
        aspect-ratio: 2 / 1;
        margin-bottom: 8Rem;
        background: url(img/etc/banner_mobile.jpg) no-repeat;
        background-size: contain;
    }

    /* 모바일은 부제 중앙정렬 */
    .sub_title {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: 4vw;
        color: #3c668f;
        text-align: center;
    }

    .sub_white {
        color: #fff;
    }

    /*notice gallery start*/

    .online_notice {
        margin-bottom: 5rem;
    }

    .notice_grid {
        display: block; /* 그리드 해제! */
        height: auto;   /* 내용물만큼 늘어나게 */
        padding: 1rem;
    }
    .notice_block {
        width: 100%;      /* 한 줄 꽉 채우기 */
        margin-bottom: 1.5rem; /* 블록 사이 간격 */
        height: auto;     /* 내용물 높이에 맞춤 */
    }

    .notice_img {
        width: 90%;
        border-radius: 1rem;
        overflow: hidden;
        /* align-content: center; */
    }

    .notice_img>img {
        object-fit: contain;
        aspect-ratio: 16 / 9;
    }

    /*notice gallery end*/

    /* collboration start */

    .online_collabo {
        display: block;
        position: relative;
        padding: 2rem;
        background-color: #81a9ee;
        text-align: center;
        justify-items: center;
        height: max-content;
    }

    .collabo_left, .collabo_right {
        position: relative;
        top: -3px;
    }

    .collabo_left:before, .collabo_left:after {
        position: absolute;
        left: -30px;
        content: '';
        height: 30px;
        width: 6px;
        background-color: #fff;
        transition: 0.3s linear;
    }
    .collabo_right:before, .collabo_right:after {
        position: absolute;
        right: -30px;
        content: '';
        height: 30px;
        width: 6px;
        background-color: #fff;
        transition: 0.3s linear;
    }
        
    .collabo_left::before, .collabo_right::before {
        transform: rotate(45deg);
    }
    .collabo_left::after, .collabo_right::after {
        transform: rotate(-45deg);
    }

    .collabo_wrapper {
        margin-top: 5%;
        width: 80%;
        display: flex;
        flex-direction: column;
        display: block;
        position: relative;
        justify-items: center;
    }

    .collabo_card {
        position: relative;
        width: 70vw;
        height: 22vw;
        /* padding: 1rem; */

        display: grid;
        grid-template-columns: repeat(2,30vw);
        grid-template-rows: repeat(2,1fr);
        grid-template-areas: 
        "thumb name"
        "thumb account";
    }

    /* https://rgy0409.tistory.com/5049 회전하는 테두리 참고사이트 */
    .collabo_thumb {
        position: relative;
        width: 18vw;
        height: 18vw;
        border-radius: 50%;
        overflow: hidden;
        grid-area: thumb;
    }
    /* 참고 사이트의 가상클래스 before 역활 회전하는 뒷 배경 */
    .collabo_grad {
        width: 18vw;
        height: 18vw;
        border-radius: 50%;
        background: linear-gradient(45deg, #F58529 0%, #FEDA77 10%, #DD2a7b 30%, #8134af 70%, #515bd4 90%);
        animation-play-state: paused;
    }

    /* 참고 사이트의 가상클래스 after 역활 콘텐츠가 보이는 부분 */
    .collabo_thumb img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        height: 90%;
        display: block;
        border-radius: 50%;
        background-color: #fff;
        transform: translate(-50%,-50%);
    }

    .collabo_card h2 {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: 0.6rem;
        margin-top: 1rem;
        padding: 0.5rem 1.5rem;
        background-color: #fff;
        border-radius: 1.5rem;
        color: #1a4267;
        letter-spacing: 0.1rem;
        text-align: center;
        grid-area: name;
    }

    .collabo_card h3 {
        font-family: 'OnestoreMobilePop', sans-serif;
        font-size: clamp(0.7rem,1.3vw,1.3rem);
        margin-top: 0.5rem;
        color: #1a4267;
        text-align: center;
        grid-area: account;
    }

    /* collboration end */
}