/* 프리텐다드 */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
      src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Thin.woff2') format('woff2'),
      url('../font/pretendard/Pretendard-Thin.woff2') format('woff2'),
		url('../font/pretendard/Pretendard-Thin.woff') format('woff'),
    
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
      src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Light.woff2') format('woff2'), 
        url('../font/pretendard/Pretendard-Light.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Light.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
      src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.woff2') format('woff2'), 
            url('../font/pretendard/Pretendard-Medium.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Medium.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
      src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Regular.woff2') format('woff2'), 
            url('../font/pretendard/Pretendard-Regular.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Regular.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
      src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-SemiBold.woff2') format('woff2'), 
            url('../font/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-SemiBold.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
      src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
            url('../font/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-ExtraBold.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
      src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Bold.woff2') format('woff2'), 
            url('../font/pretendard/Pretendard-Bold.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Bold.woff') format('woff'),
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
      src:  url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Black.woff2') format('woff2'),
            url('../font/pretendard/Pretendard-Black.woff2') format('woff2'),
			url('../font/pretendard/Pretendard-Black.woff') format('woff2'),
}

@keyframes gateani01 {
    100%{transform: none; opacity: 1;}
}
@keyframes gateani04 {
    100%{clip-path: circle(100%);}
}
@keyframes gateani02 {
    25%{opacity: 0.4; transform: scale(0.8);} 40%,100%{opacity: 1; transform: scale(1);}
}
@keyframes gateani03 {
    100%{letter-spacing: 0px; filter: blur(0px); transform: none; opacity: 1;} 
}
@keyframes gateani05 {
    100%{filter: hue-rotate(-360deg);}
}
.archive_wrap { overflow: hidden;}
.archive { width:100vw; height:100vh ;position: relative;display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Roboto'; padding: 30px; box-sizing: border-box;}

.archive .bg {position: absolute ; left: 0; top: 0; width: 100%; height: 100%;}
.archive .bg img{width: 100%; height: 100%;object-fit: cover; max-width: 100%; max-height: 100%; animation: gateani05 3s ease-in-out infinite forwards;}
.archive .top { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;text-align: center;gap: 15px; line-height: 1.3; letter-spacing: -1px; color: #3E3E3E; margin-bottom: 75px; white-space: nowrap;}

.archive .top img {margin-bottom: 15px;}
.archive .center_slide { position: relative; z-index: 1; overflow: hidden; width: 100%; max-width: 1040px; padding-top: 30px;}
.archive .swiper-slide {display: flex; align-items: center; justify-content: center;}
.archive .swiper-slide a { transition: all 0.5s ease; width: 100%; height: 100%;display: flex; align-items: center; justify-content: center;}
.archive .center_slide figure { aspect-ratio: 311/429; position: relative;}
.archive .center_slide figure img { width: 100%; height: 100%; object-fit: cover; max-width: 100%}
.archive .swiper-slide-active a {transform: translateY(-30px);}
.archive .slide_wrap {position: relative; width: 100%;display: flex; justify-content: center; clip-path: circle(0%); animation: gateani04 2s ease 1 forwards 0.23s;}

.archive .center_slide figure figcaption { position: absolute ; left: 0 ; top: 0; width: 100%; height: 100%; font-family: 'Pretendard' ; transition: all 0.78s ease-out;}
.archive .center_slide .year{font-size: 42px; font-weight: 700; margin-bottom: 10px; overflow: hidden;}
.archive .center_slide .year span { display: inline-block; transform: translateY(-40%); opacity: 0;}
.archive .center_slide .year span:nth-child(1) {animation-delay: 0.02s !important;}
.archive .center_slide .year span:nth-child(2) {animation-delay: 0.1s !important;}
.archive .center_slide .year span:nth-child(3) {animation-delay: 0.18s !important;}
.archive .center_slide .year span:nth-child(4) {animation-delay: 0.26s !important;}
.archive .center_slide .button{font-size:18px; font-weight: 500 ; border-radius: 100px; background-color: #77B046; width: 160px; height: 50px;display: flex;align-items: center;justify-content: center;text-align: center; font-weight: 300; width: 80px; transition: all 0.4s ease ; opacity: 0; position: relative;}
.archive .center_slide .button::before {content: ""; position: absolute; left: 50%; top: 70%; transform: translate(-50%,-50%); opacity: 0; transition: all 0.5s ease; content: "\e980"; font-family: 'xeicon' !important;} 
.archive .center_slide .button span { display: inline-block; transition: all 0.2s ease;}
.archive .center_slide .button span:nth-child(1) {transition-delay: 0.05s;}
.archive .center_slide .button span:nth-child(2) {transition-delay: 0.1s;}
.archive .center_slide .button span:nth-child(3) {transition-delay: 0.15s;}
.archive .center_slide .button span:nth-child(4) {transition-delay: 0.2s;}
.archive .center_slide .button span:nth-child(5) {transition-delay: 0.25s;}
.archive .center_slide .button span:nth-child(6) {transition-delay: 0.3s;}
.archive .center_slide .button span:nth-child(7) {transition-delay: 0.35s;}
.archive .center_slide .button span:nth-child(8) {transition-delay: 0.4s;}
.archive .center_slide .button span:nth-child(9) {transition-delay: 0.45s;}
.archive .center_slide .button span:nth-child(10) {transition-delay: 0.5s;}

.archive .center_slide li:not(.nodata) figure figcaption {background-color: #000000CC; color: #fff; display: flex; align-items: center;justify-content: center; flex-direction: column; text-align: center; opacity: 0;}
.archive .top > p { letter-spacing: 10px; filter: blur(10px); transform: translateY(50px);opacity: 0;}
.archive .t1 {font-size: 28px; animation: gateani03 1.5s ease 1 forwards ;}
.archive .t2 {font-size: 82px; font-weight: 700; animation: gateani03 1.6s ease 1 forwards 0.2s; }
.archive .nodata figcaption { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #474747;}  
.archive .nodata .dots { display: flex; gap: 10px; margin-bottom: 10px;}
.archive .nodata a {pointer-events: none;}
.archive .nodata .dots i { width: 8px; height: 8px; background-color: #77B046; border-radius: 20px; animation: gateani02 1.5s ease infinite forwards;}
.archive .nodata .dots i:nth-child(2) {animation-delay: 0.2s;} 
.archive .nodata .dots i:nth-child(3) {animation-delay: 0.4s;} 
.swiper-navigation { position: absolute; width: 100% ; top: 50%;max-width: 1760px; z-index: 1; transform: translate(-50%,-50%); left: 50%; display: none;}
.swiper-navigation > div::before { content: ""; background-color: #1E1E1E; ;width:7px;  height: 7px;left: 50%; position: absolute; top: 50%;transform: translate(-50%,-50%); border-radius: 10px;}

.swiper-navigation .swiper-button-next {transform: rotate(-180deg);}
.swiper-navigation > div::after { content: ""; ;width:calc(100% +  2px); border-bottom: 1px solid #1e1e1e; left: 50%; position: absolute; top: 50%; transform: translate(0,-50%);}
.swiper-navigation > div {width: 58px; height: 58px; border-radius: 100%; border: 1px solid #1E1E1E; opacity: 0.5;}
.archive_inner {overflow-y: auto;}

@media all and (max-width:1300px) and (max-height:900px) {
    .archive .top {margin-bottom: 40px;}
} 

@media screen and (min-width:1025px)  {
    .archive .center_slide li:not(.nodata):hover figure figcaption {opacity: 1;}
    .archive .center_slide li:hover .year span {animation: gateani01 0.5s ease 1 forwards;}
    .archive .center_slide li:hover .button {width: 160px; opacity: 1;}
    .archive .center_slide .button:hover {background-color:#0070ff; }
    .archive .center_slide .button:hover span{ transform: translateY(-5px); opacity: 0; }
    .archive .center_slide .button:hover::before { opacity: 1; top: 50%;  transition-delay: 0.2s;}

}

@media screen and (max-width:1024px) {
    .archive .center_slide {max-width: calc(100vw - 40px);}
    .archive .t2 {font-size: 70px;}
    .archive .top{margin-bottom: 40px;}
    
}

@media screen and (max-width:767px) {
    .archive .t1{font-size: 24px;}
    .archive .t2{font-size: 62px;}

}
@media screen and (max-width:640px) {
    .archive .t1{font-size: 21px;}
    .archive .top{gap: 10px;}
    .archive .t2{font-size: 47px;}
    .archive .nodata figcaption {font-size: 2.8vw;}
    .archive .nodata .dots {margin-bottom: 5px;}
    .archive .nodata .dots i{width: 6px; height: 6px; }


}

@media screen and (max-width:480px) {
    .archive .swiper-slide-active a {transform: translateY(0px);}
    .archive .t2 {font-size: 10vw;}
    .archive .t1 {font-size: 4vw;}
    .archive .top{margin-bottom: 2.8vw;}
    .archive .nodata .dots i{width: 8px; height: 8px; }
    .archive .nodata figcaption{font-size: 20px;}
    .archive .center_slide{padding-top: 14px;}

}
@media screen and (max-width:400px) {
    .archive .t1{font-size: 16px;}

}