#section_01{
    padding: 50px 0 100px 0;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#section_01 .box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section_01 .img-contopia {
    width: 566px;
    height: 134px;
    object-fit: fill;
    margin-bottom: 18px;
    mask-mode: alpha;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;  
    background: linear-gradient(
        45deg,
        #000000,
        #000000,
        #000000,
        #000000,
        #000000,
        #000000,
        #000000,   
        #001a99,   
        #0025e8,   
        #3352ff,    
        #3352ff,   
        #0025e8, 
        #001a99,   
        #000000,   
        #000000,
        #000000,
        #000000,
        #000000,
        #000000,
        #000000

    );
    
    background-size: 800% 800%; /* 애니메이션 영역 확장 */
    animation: subtleWave 4s ease-in-out infinite;
    animation-delay: 1s;
}
@keyframes subtleWave {
    0% {
        background-position: 0% 0%; /* 시작 위치 */
    }
    45% { /* 애니메이션이 진행되는 주요 구간 */
        background-position: 100% 100%;
    }
    55% { /* 45%와 동일한 상태를 유지하여 잠시 멈춘 효과 */
        background-position: 100% 100%;
    }
    100% { /* 다시 0%로 돌아가며 전체 사이클 완료 */
        background-position: 100% 100%;
    }
   
}
#section_01 .text.subject{
    font-weight: 800;
    margin-bottom: 55px;
    margin-left: 0.2em;
}

/* 타이핑 애니메이션 스타일 */
#section_01 .text.subject::after {
    content: '|';
    color: #000;
    font-weight: 400;
    opacity: 0;
}

#section_01 .text.subject.typing::after {
    animation: blink 1s infinite;
    opacity: 1;
}

#section_01 .text.subject.typing-finished::after {
    opacity: 0;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}
#section_01 .card-group{
    display: flex;
    flex-direction: row;
    gap: 27px;
    height: 100%;
    width: 98%;
}
#section_01 .card-group .card{
    width: 100%;
    min-width: 0;
    

}
#section_01 .card-group .card a{
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 2.9px 4.1px 9px 0 rgba(62, 62, 62, 0.53);
    aspect-ratio: 1 / 1.41;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    height: 100%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#section_01 .card-group .card a:hover{
    box-shadow: 2.9px 4.1px 25px 0 rgb(41 41 255 / 40%);
    transform: scale(1.04);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#section_01 .card-group .card .img-background{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#section_01 .card-group .card .text{
    color: #fff;
    text-shadow: 4px 5.7px 9.5px rgba(62, 62, 62, 0.71);
    font-weight: 800;
    letter-spacing: -0.45px;
    position: relative;

    z-index: 2;
    line-height: 60px;
}




/* ===============================
   배경 파티클 효과
   =============================== */

/* 배경 파티클 효과 */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #0027e88f;
    border-radius: 50%;
    animation: particleFloat 8s ease-in-out infinite;
    box-shadow: 0 0 10px #0025e8;
}
.particle.type-a {
    background: #0027e8bb;
}
.particle.type-b {
    background: #e8cd00bb;
}
.particle.type-c {
    background: #b600e8bb;
}
.particle.type-d {
    background: #00e82bbb;
}
.particle:nth-child(1) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.particle:nth-child(2) {
    top: 60%;
    left: 85%;
    animation-delay: 1s;
    animation-duration: 8s;
}

.particle:nth-child(3) {
    top: 30%;
    left: 70%;
    animation-delay: 2s;
    animation-duration: 7s;
}

.particle:nth-child(4) {
    top: 80%;
    left: 25%;
    animation-delay: 3s;
    animation-duration: 9s;
}

.particle:nth-child(5) {
    top: 10%;
    left: 90%;
    animation-delay: 4s;
    animation-duration: 5s;
}

.particle:nth-child(6) {
    top: 70%;
    left: 10%;
    animation-delay: 2.5s;
    animation-duration: 6.5s;
}

.particle:nth-child(7) {
    top: 40%;
    left: 50%;
    animation-delay: 1.5s;
    animation-duration: 7.5s;
}

.particle:nth-child(8) {
    top: 90%;
    left: 60%;
    animation-delay: 3.5s;
    animation-duration: 8.5s;
}

/* 폭죽 효과 */
.fireworks-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.firework {
    position: absolute;
    width: 2px;
    height: 2px;
}

/* 각 폭죽 위치 및 색상 */
.firework-1 {
    top: 25%;
    left: 20%;
    animation-delay: 0.5s;
}

.firework-2 {
    top: 35%;
    right: 25%;
    animation-delay: 0.5s;
}

.firework-3 {
    top: 90%;
    left: 60%;
    animation-delay: 0.5s;
}

.firework-4 {
    top: 62%;
    right: 10%;
    animation-delay: 0.5s;
}

.firework-5 {
    top: 66%;
    left: 10%;
    animation-delay: 0.5s;
}

/* 불꽃 파편들 */
.spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
}

/* 각 폭죽별 색상 및 불꽃 방향 */
.firework-1 .spark {
    background: #ff1744;
    box-shadow: 0 0 15px #ff1744, 0 0 30px #ff1744, 0 0 45px #ff1744;
    animation: sparkExplode1 4s ease-out infinite;
}

.firework-2 .spark {
    background: #00e5ff;
    box-shadow: 0 0 15px #00e5ff, 0 0 30px #00e5ff, 0 0 45px #00e5ff;
    animation: sparkExplode2 4s ease-out infinite;
}

.firework-3 .spark {
    background: #ffea00;
    box-shadow: 0 0 15px #ffea00, 0 0 30px #ffea00, 0 0 45px #ffea00;
    animation: sparkExplode3 4s ease-out infinite;
}

.firework-4 .spark {
    background: #ff6d00;
    box-shadow: 0 0 15px #ff6d00, 0 0 30px #ff6d00, 0 0 45px #ff6d00;
    animation: sparkExplode4 4s ease-out infinite;
}

.firework-5 .spark {
    background: #e040fb;
    box-shadow: 0 0 15px #e040fb, 0 0 30px #e040fb, 0 0 45px #e040fb;
    animation: sparkExplode5 4s ease-out infinite;
}

/* 각 불꽃 파편의 방향별 애니메이션 오버라이드 */
.spark:nth-child(1) { /* 오른쪽 → */ }
.spark:nth-child(2) { /* 오른쪽 위 ↗ */
    animation-name: sparkExplode45deg !important;
}
.spark:nth-child(3) { /* 위 ↑ */
    animation-name: sparkExplode90deg !important;
}
.spark:nth-child(4) { /* 왼쪽 위 ↖ */
    animation-name: sparkExplode135deg !important;
}
.spark:nth-child(5) { /* 왼쪽 ← */
    animation-name: sparkExplode180deg !important;
}
.spark:nth-child(6) { /* 왼쪽 아래 ↙ */
    animation-name: sparkExplode225deg !important;
}
.spark:nth-child(7) { /* 아래 ↓ */
    animation-name: sparkExplode270deg !important;
}
.spark:nth-child(8) { /* 오른쪽 아래 ↘ */
    animation-name: sparkExplode315deg !important;
}

/* 애니메이션 키프레임들 */
@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
    50% {
        transform: translateY(-30px) translateX(20px);
        opacity: 0.8;
    }
}

/* 불꽃 애니메이션들 - 4초 사이클로 매우 빠르게 터지는 타이밍 */
@keyframes sparkExplode1 {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    3% {
        opacity: 1;
        transform: translate(0, 0) scale(1.4);
    }
    18% {
        opacity: 0.8;
        transform: translate(120px, 0) scale(1.2);
    }
    35% {
        opacity: 0;
        transform: translate(180px, 0) scale(0.1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes sparkExplode2 {
    0%, 20% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    23% {
        opacity: 1;
        transform: translate(0, 0) scale(1.5);
    }
    38% {
        opacity: 0.9;
        transform: translate(130px, 0) scale(1.3);
    }
    55% {
        opacity: 0;
        transform: translate(190px, 0) scale(0.1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes sparkExplode3 {
    0%, 40% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    43% {
        opacity: 1;
        transform: translate(0, 0) scale(1.6);
    }
    58% {
        opacity: 0.8;
        transform: translate(125px, 0) scale(1.4);
    }
    75% {
        opacity: 0;
        transform: translate(185px, 0) scale(0.1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes sparkExplode4 {
    0%, 55% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    58% {
        opacity: 1;
        transform: translate(0, 0) scale(1.4);
    }
    73% {
        opacity: 0.9;
        transform: translate(135px, 0) scale(1.2);
    }
    90% {
        opacity: 0;
        transform: translate(195px, 0) scale(0.1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes sparkExplode5 {
    0%, 70% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    73% {
        opacity: 1;
        transform: translate(0, 0) scale(1.7);
    }
    88% {
        opacity: 0.9;
        transform: translate(140px, 0) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(200px, 0) scale(0.1);
    }
}

/* 방향별 불꽃 애니메이션 - 4초 사이클 */
@keyframes sparkExplode45deg {
    0%, 70% { opacity: 0; transform: translate(0, 0) scale(1); }
    73% { opacity: 1; transform: translate(0, 0) scale(1.7); }
    88% { opacity: 0.9; transform: translate(100px, -100px) scale(1.5); }
    100% { opacity: 0; transform: translate(160px, -160px) scale(0.1); }
}

@keyframes sparkExplode90deg {
    0%, 70% { opacity: 0; transform: translate(0, 0) scale(1); }
    73% { opacity: 1; transform: translate(0, 0) scale(1.7); }
    88% { opacity: 0.9; transform: translate(0, -140px) scale(1.5); }
    100% { opacity: 0; transform: translate(0, -220px) scale(0.1); }
}

@keyframes sparkExplode135deg {
    0%, 70% { opacity: 0; transform: translate(0, 0) scale(1); }
    73% { opacity: 1; transform: translate(0, 0) scale(1.7); }
    88% { opacity: 0.9; transform: translate(-100px, -100px) scale(1.5); }
    100% { opacity: 0; transform: translate(-160px, -160px) scale(0.1); }
}

@keyframes sparkExplode180deg {
    0%, 70% { opacity: 0; transform: translate(0, 0) scale(1); }
    73% { opacity: 1; transform: translate(0, 0) scale(1.7); }
    88% { opacity: 0.9; transform: translate(-140px, 0) scale(1.5); }
    100% { opacity: 0; transform: translate(-220px, 0) scale(0.1); }
}

@keyframes sparkExplode225deg {
    0%, 70% { opacity: 0; transform: translate(0, 0) scale(1); }
    73% { opacity: 1; transform: translate(0, 0) scale(1.7); }
    88% { opacity: 0.9; transform: translate(-100px, 100px) scale(1.5); }
    100% { opacity: 0; transform: translate(-160px, 160px) scale(0.1); }
}

@keyframes sparkExplode270deg {
    0%, 70% { opacity: 0; transform: translate(0, 0) scale(1); }
    73% { opacity: 1; transform: translate(0, 0) scale(1.7); }
    88% { opacity: 0.9; transform: translate(0, 140px) scale(1.5); }
    100% { opacity: 0; transform: translate(0, 220px) scale(0.1); }
}

@keyframes sparkExplode315deg {
    0%, 70% { opacity: 0; transform: translate(0, 0) scale(1); }
    73% { opacity: 1; transform: translate(0, 0) scale(1.7); }
    88% { opacity: 0.9; transform: translate(100px, 100px) scale(1.5); }
    100% { opacity: 0; transform: translate(160px, 160px) scale(0.1); }
}




/** S : 해상도 분기 - 1 :: 기기의 가로 기준 해상도 */

/* 모바일 + 태블릿 */
@media (max-width: 1199px){
}

/* 모바일 - 저해상도, 구형 스마트폰 */
@media (max-width: 359px){
}

/* 모바일 - 일반 */
@media (min-width: 360px) and (max-width: 767px){
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1199px){
}
@media (min-width: 900px) and (max-width: 1199px){

}


/* PC - 일반 (기본 베이스) */
@media (min-width: 1200px) {
}

/* PC - 2k (qhd 기준 2560px * 1440px) */
@media (min-width: 2400px) {
}

/* PC - 4k (uhd 기준 3840px * 2160px)*/
@media (min-width: 3000px) {
}

/** E : 해상도 분기 - 1 :: 기기의 가로 기준 해상도 */


/** S : 해상도 분기 - 2 :: 기기의 가로/세로 해상도, 화면 방향 기준 */

/* 모바일 + 태블릿 */
@media (max-width: 1199px), (orientation: portrait), (min-width: 3841px), (min-height: 2161px) { 
    #section_01{
        padding: 50px 0;
    }
    .container {
        min-width: 100%;
    }
    #section_01 .card-group{
        flex-direction: column;
    }


}

/* 모바일 - 일반 (기본 베이스) */
@media (min-width: 1px) and (max-width: 767px) {
    #section_01{
        min-height: fit-content;        
    }
    #section_01 .img-contopia {
        width: 262px;
        height: 62px;
    }
    #section_01 .text.subject{
        margin-bottom: 20px;
    }
    #section_01 .card-group .card{
        height: 123px;
    }
    #section_01 .card-group .card a{
        border-radius: 10px;
        box-shadow: 0px 5px 9px 0 rgba(62, 62, 62, 0.53);
    }

}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1199px), (min-width: 768px) and (orientation: portrait), (min-width: 3841px), (min-height: 2161px) { 
    #section_01 .img-contopia {
        width: 480px;
        height: 144px;
    }
    #section_01 .text.subject{
        margin-bottom: 43px;
    }
    #section_01 .card-group .card{
        height: 260px;
    }
    #section_01 .card-group .card a{
        border-radius: 30px;
        box-shadow: 0px 5px 9px 0 rgba(62, 62, 62, 0.53);
    }
}

/* PC - 일반 (기본 베이스) */
@media (min-width: 1200px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {
}

/* PC - 2k (qhd 기준 2560px * 1440px) */
@media (min-width: 2400px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {
}

/* PC - 4k (uhd 기준 3840px * 2160px)*/
@media (min-width: 3000px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {
}

/** E : 해상도 분기 - 2 :: 기기의 가로/세로 해상도, 화면 방향 기준 */


/* 
폰트사이즈

기본(일반)
PC : 16px
태블릿 : 15px
모바일 : 15px

글 리스트 제목
PC : 20px
태블릿 : 18px
모바일 : 16px

글 리스트 부제목
PC : 16px
태블릿 : 15px
모바일 : 15px

글 리스트 날짜, 태그
PC : 14px
태블릿 : 14px
모바일 : 14px

*/