/*서브*/

:root {
  --global--size: clamp(2rem, 4vw, 5rem);
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

.archive {width:100%; min-height:var(--nvh); position:relative; background:url(/img/bg.jpg) repeat center;}
.archive header {width:100%; position:fixed; left:0; top:0; z-index:100; padding:var(--gap-50) 0;}
.archive header .header-wrap {width:90%; max-width:1820px; margin:0 auto; display:flex; gap:20px; align-items:center; justify-content:space-between;}
.archive header .header-wrap .logo {width:150px; aspect-ratio:150/56; font-size:0; background:url(/img/logo_g.png) no-repeat center / cover;}
.archive header .header-wrap .category-wrap {display:flex; align-items:center; gap:var(--gap-16); position:relative;}
.archive header .header-wrap .category-wrap .category-box {display:flex; align-items:center; gap:var(--gap-16);}
.archive header .header-wrap .category-wrap .category-box .category {position:relative; z-index:2; border-radius:100px; background:transparent; pointer-events:none; transition:all var(--anim--hover-time) var(--anim--hover-ease);}
.archive header .header-wrap .category-wrap .category-box .category .button-shadow {--shadow-cuttoff-fix:2em; position:absolute; width:calc(100% + var(--shadow-cuttoff-fix)); height:calc(100% + var(--shadow-cuttoff-fix)); top:calc(0% - var(--shadow-cuttoff-fix) / 2); left:calc(0% - var(--shadow-cuttoff-fix) / 2); filter:blur(2px); overflow:visible; pointer-events:auto;}
.archive header .header-wrap .category-wrap .category-box .category .button-shadow:after {content:''; position:absolute; z-index:0; inset:0; border-radius:100px; background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); width:calc(100% - var(--shadow-cuttoff-fix) - 0.25em); height:calc(100% - var(--shadow-cuttoff-fix) - 0.25em); top:calc(var(--shadow-cuttoff-fix) - 0.5em); left:calc(var(--shadow-cuttoff-fix) - 0.875em); padding:0.125em; box-sizing: border-box; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; transition:all var(--anim--hover-time) var(--anim--hover-ease); overflow:visible; opacity:1;}
.archive header .header-wrap .category-wrap .category-box .category a {--border-width:clamp(1px, 0.0625em, 4px); all:unset; cursor:pointer; position:relative; z-index:3; pointer-events:auto; border-radius:100px; display:flex; align-items:center; height:56px; width:150px; align-items:center; justify-content:center; background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05)); box-shadow:inset 0 0.125em 0.125em rgba(96,96,96,0.3), inset 0 -0.125em 0.125em rgba(255,255,255,0.5), 0 0.25em 0.125em -0.125em rgba(96,96,96,0.6), 0 0 0.1em 0.25em inset rgba(255,255,255,0.2), 0 0 0 0 rgba(255,255,255,1); backdrop-filter:blur(clamp(1px, 0.125em, 4px)); -webkit-backdrop-filter:blur(clamp(1px, 0.125em, 4px)); transition:all var(--anim--hover-time) var(--anim--hover-ease);}
.archive header .header-wrap .category-wrap .category-box .category a span {font-family:var(--Montserrat); font-size:24px; font-weight:600; color:#fff;}
.archive header .header-wrap .category-wrap .category-box .category a:hover {transform: scale(0.975); backdrop-filter:blur(0.01em); -webkit-backdrop-filter:blur(0.01em); box-shadow:inset 0 0.125em 0.125em rgba(96,96,96,0.3), inset 0 -0.125em 0.125em rgba(255,255,255,0.5), 0 0.15em 0.05em -0.1em rgba(96,96,96,0.6), 0 0 0.05em 0.1em inset rgba(255,255,255,0.5), 0 0 0 0 rgba(255,255,255,1);}
.archive header .header-wrap .category-wrap .button-wrap {position:relative; z-index:2; border-radius:10px; background:transparent; pointer-events:none; transition:all var(--anim--hover-time) var(--anim--hover-ease); display:none;}
.archive header .header-wrap .category-wrap .button-wrap .button-shadow {--shadow-cuttoff-fix:2em; position:absolute; width:calc(100% + var(--shadow-cuttoff-fix)); height:calc(100% + var(--shadow-cuttoff-fix)); top:calc(0% - var(--shadow-cuttoff-fix) / 2); left:calc(0% - var(--shadow-cuttoff-fix) / 2); filter:blur(2px); overflow:visible; pointer-events:auto;}
.archive header .header-wrap .category-wrap .button-wrap .button-shadow:after {content:''; position:absolute; z-index:0; inset:0; border-radius:10px; background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); width:calc(100% - var(--shadow-cuttoff-fix) - 0.25em); height:calc(100% - var(--shadow-cuttoff-fix) - 0.25em); top:calc(var(--shadow-cuttoff-fix) - 0.5em); left:calc(var(--shadow-cuttoff-fix) - 0.875em); padding:0.125em; box-sizing: border-box; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; transition:all var(--anim--hover-time) var(--anim--hover-ease); overflow:visible; opacity:1;}
.archive header .header-wrap .category-wrap .button-wrap button {--border-width:clamp(1px, 0.0625em, 4px); all:unset; cursor:pointer; position:relative; z-index:3; pointer-events:auto; border-radius:10px; display:flex; align-items:center; width:40px; aspect-ratio:1; background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05)); box-shadow:inset 0 0.125em 0.125em rgba(108,20,23,0.3), inset 0 -0.125em 0.125em rgba(255,255,255,0.5), 0 0.25em 0.125em -0.125em rgba(108,20,23,0.6), 0 0 0.1em 0.25em inset rgba(255,255,255,0.2), 0 0 0 0 rgba(255,255,255,1); backdrop-filter:blur(clamp(1px, 0.125em, 4px)); -webkit-backdrop-filter:blur(clamp(1px, 0.125em, 4px)); transition:all var(--anim--hover-time) var(--anim--hover-ease);}
.archive header .header-wrap .category-wrap .button-wrap button:before {content:''; width:100%; height:100%; background:url(/img/icon_menu_r.svg) no-repeat center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.archive header .header-wrap .category-wrap .button-wrap button:hover {transform: scale(0.975); backdrop-filter:blur(0.01em); -webkit-backdrop-filter:blur(0.01em); box-shadow:inset 0 0.125em 0.125em rgba(108,20,23,0.3), inset 0 -0.125em 0.125em rgba(255,255,255,0.5), 0 0.15em 0.05em -0.1em rgba(108,20,23,0.6), 0 0 0.05em 0.1em inset rgba(255,255,255,0.5), 0 0 0 0 rgba(255,255,255,1);}
.archive header .header-wrap .category-wrap .button-wrap button.active:before {background-image:url(/img/icon_close_r.svg);}

.archive .bg-txt {width:100%; height:var(--nvh); position:fixed; left:0; top:0; z-index:10; display:flex; align-items:center; justify-content:center; background:url(/img/bg.jpg) repeat left top / 100% 100%;}
.archive .bg-txt span {display:block; width:80%; max-width:1183px; aspect-ratio:1183/281; background:url(/img/bg_txt_new.png) no-repeat center / cover; font-size:0;}

@media screen and (max-width: 1024px) {
    .archive header .header-wrap .logo {width:120px;}
    .archive header .header-wrap .category-wrap .category-box .category a {width:120px; height:46px;}
    .archive header .header-wrap .category-wrap .category-box .category a span {font-size:20px;}
}

@media screen and (max-width: 768px) {
    .archive header .header-wrap .logo {width:100px;}
    .archive header .header-wrap .category-wrap .button-wrap {display:block;}
    .archive header .header-wrap .category-wrap .category-box {position:absolute; right:0; bottom:0;}
    .archive header .header-wrap .category-wrap .category-box .category {opacity:0; transform:translateY(0); position:absolute; right:0; bottom:0; transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;}
    .archive header .header-wrap .category-wrap .category-box .category:nth-child(1) {transform:translateY(48px); transition-delay:0s;}
    .archive header .header-wrap .category-wrap .category-box .category:nth-child(2) {transform:translateY(96px); transition-delay:0.05s;}
    .archive header .header-wrap .category-wrap .category-box .category:nth-child(3) {transform:translateY(144px); transition-delay:0.1s;}
    .archive header .header-wrap .category-wrap .category-box.active .category {opacity:1;}
    .archive header .header-wrap .category-wrap .category-box .category a {width:100px; height:40px;}
    .archive header .header-wrap .category-wrap .category-box .category a span {font-size:18px;}
}

@media screen and (max-width: 480px) {
    .archive header .header-wrap .logo {width:85px;}
}



.archive .scroll-down {position:fixed; left:50%; bottom:var(--gap-40); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; transition:opacity 0.3s ease, visibility 0.3s ease; opacity:1; visibility:visible; z-index:11;}
.archive .scroll-down.hide {opacity:0; visibility:hidden;}
.archive .scroll-down .arrow {display:flex; flex-direction:column; align-items:center; position:relative;}
.archive .scroll-down .arrow span {display:block; width:32px; aspect-ratio:32/18; background:url(/img/scroll_arrow.png) no-repeat center / cover; opacity:0; will-change:transform, opacity;}
.archive .scroll-down .txt {font-size:var(--font-20); font-weight:600; color:var(--main-color);}

@media screen and (max-width: 480px) {
    .archive .scroll-down .arrow span {width:24px;}
}


:root {
    --tb-gap : 30px;
    --tb-size : 2;
}

.archive .list-wrap {width:100%; position:relative; z-index:50; padding-bottom:calc(var(--gap-50) * 2); padding-top:var(--nvh);}
.archive .list-wrap > .inner {width:85%; max-width:1630px; margin:0 auto;}
.archive .list-wrap .list-tb {width:100%; display:flex; gap:var(--tb-gap); flex-wrap:wrap;}
.archive .list-wrap .list-tb li {width:calc((100% - (var(--tb-gap) * (var(--tb-size) - 1))) / var(--tb-size));}
.archive .list-wrap .list-tb li .thumbnail {width:100%; aspect-ratio:800/590; border-radius:10px; overflow:hidden;}
.archive .list-wrap .list-tb li .thumbnail a {display:block; width:100%; height:100%;}
.archive .list-wrap .list-tb li .thumbnail span {display:block; width:100%; height:100%; position:relative; transition:transform 0.5s ease-in-out; transform:scale(1);}
.archive .list-wrap .list-tb li .thumbnail span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.archive .list-wrap .list-tb li:hover .thumbnail span {transform:scale(1.05);}

@media screen and (max-width: 1024px) {
    :root {
        --tb-gap : 20px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --tb-gap : 15px;
    }
}

@media screen and (max-width: 648px) {
    :root {
        --tb-gap : 15px;
        --tb-size : 1;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --tb-gap : 10px;
    }
    .archive .list-wrap .list-tb li .thumbnail {border-radius:5px;}
}



:root {
    --pop-gap : 50px;
}

.archive-popup {width:100%; height:var(--nvh); background:rgba(255,255,255,0.6); position:fixed; left:0; top:0; display:flex; align-items:center; justify-content:center; z-index:0; opacity:0; visibility:hidden; backdrop-filter:blur(100px);}
.archive-popup.active {visibility:visible; opacity:1; z-index:200;}
.archive-popup .popup-wrap {width:100%; max-width:1530px; height:90%;}
.archive-popup .popup-wrap .popup-box {width:100%; height:100%; position:relative;}
.archive-popup .popup-wrap .popup-box .btn-popup-close {width:50px; aspect-ratio:1; background:url(/img/icon_close.png) no-repeat center / cover; position:absolute; right:0; top:0; font-size:0; cursor:pointer;}
.archive-popup .popup-wrap .popup-box .popup-conts {width:100%; height:100%;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts {width:90%; height:calc(100% - var(--pop-gap) - 78px); margin:0 auto; overflow:hidden;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider {width:100%; height:100%; position:relative;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .swiper-slide {position:absolute; inset:0; opacity:0 !important; pointer-events:none; z-index:0;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .swiper-slide-active {opacity:1 !important; pointer-events:auto; z-index:2;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .slide-item .item-box {width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .slide-item .item-box .video-box {width:100%; aspect-ratio:16/9; position:relative;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .slide-item .item-box .video-box iframe {display:block; width:100%; height:100%;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .slide-item .item-box .photo-box {width:100%; height:100%; position:relative;}
.archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .slide-item .item-box .photo-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:contain;}
.archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts {width:100%; max-width:1530px; height:78px; margin:0 auto; margin-top:var(--pop-gap); overflow:hidden;}
.archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts .archive-thumb-slider {width:100%; height:100%;}
.archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts .archive-thumb-slider .swiper-slide {background:#fff;}
.archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts .archive-thumb-slider .swiper-slide img {opacity:0.4; filter:grayscale(100%);}
.archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts .archive-thumb-slider .swiper-slide-thumb-active img {opacity:1; filter:grayscale(0%)}
.archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts .archive-thumb-slider .thumb-item {width:104px; height:78px; position:relative; overflow:hidden; background:#fff; display:block;}
.archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts .archive-thumb-slider .thumb-item img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}


@media screen and (max-width: 1280px) {
    .archive-popup .popup-wrap {height:80%;}
    .archive-popup .popup-wrap .popup-box .btn-popup-close {right:5%; top:-60px;}
}

@media screen and (max-width: 480px) {
    :root {
        --pop-gap : 40px;
    }
    
    .archive-popup .popup-wrap {height:90%;}
    .archive-popup .popup-wrap .popup-box .btn-popup-close {width:35px; position:relative; right:auto; top:auto; margin:0 5% 10px auto; display:block;}
    .archive-popup .popup-wrap .popup-box .popup-conts .main-conts {height:calc(100% - var(--pop-gap) - 60px - 45px);}
    .archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts {height:60px;}
    .archive-popup .popup-wrap .popup-box .popup-conts .thumb-conts .archive-thumb-slider .thumb-item {width:80px; height:60px;}
}

@media screen and (max-height : 900px) {
    .archive-popup .popup-wrap .popup-box .popup-conts .main-conts .archive-main-slider .slide-item .item-box .video-box {max-width:720px;}
}





@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 648px) {}
@media screen and (max-width: 480px) {}