@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

/* AOS 3000ms 초과 지연 시간 수동 추가 */
body[data-aos-delay="3050"] .aos-animate,
[data-aos][data-aos][data-aos-delay="3050"].aos-animate {
  transition-delay: 3.05s;
}
body[data-aos-delay="3100"] .aos-animate,
[data-aos][data-aos][data-aos-delay="3100"].aos-animate {
  transition-delay: 3.1s;
}
body[data-aos-delay="3150"] .aos-animate,
[data-aos][data-aos][data-aos-delay="3150"].aos-animate {
  transition-delay: 3.15s;
}
body[data-aos-delay="3200"] .aos-animate,
[data-aos][data-aos][data-aos-delay="3200"].aos-animate {
  transition-delay: 3.2s;
}
body[data-aos-delay="3250"] .aos-animate,
[data-aos][data-aos][data-aos-delay="3250"].aos-animate {
  transition-delay: 3.25s;
}
body[data-aos-delay="3300"] .aos-animate,
[data-aos][data-aos][data-aos-delay="3300"].aos-animate {
  transition-delay: 3.3s;
}
body[data-aos-delay="3350"] .aos-animate,
[data-aos][data-aos][data-aos-delay="3350"].aos-animate {
  transition-delay: 3.35s;
}


html,
body {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: "Pretendard Variable",
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        system-ui,
        Roboto,
        "Helvetica Neue",
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
    background-color: #000;
    overflow-x: hidden;
}

a:hover {
    color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
}

.subpage-main a.text-white:hover {
    color: #fff !important;
}

.gallery-item .bg-filter-blur {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: filter 0.3s ease;
}

.gallery-item .gallery-overlay {
    background-color: rgba(0, 0, 0, 0.7); 
}

.bg-black {
    background-color: #000 !important;
}

.font-space-g {
    font-family: "Space Grotesk", sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
}

header.header-nav-menu {
    transition: background-color 0.3s, border-bottom 0.3s;
}

header.navbar-sticky-in {
    border-bottom: 0;
    box-shadow: none !important;
}


header.header-nav-menu .header-nav .navbar-nav .nav-link {
    /*font-family: "Space Grotesk", sans-serif;*/
    font-size: 1.125rem;
    color: #888;
    font-weight: 700;
    padding: 0 15px;
    transition: color 0.4s ease;
}

header.header-nav-menu .header-nav .navbar-nav .nav-link:hover {
    color: #fff;
}

.btn-link-white {
    color: #888;
}

.btn-link-white:hover {
    color: #fff;
}

.modal-content {
    border-radius: 0;
}

header.navbar-sticky-in {
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(120px);
    -webkit-backdrop-filter: blur(120px);
}

header.navbar-sticky-in .header-nav .navbar-nav .nav-link,
header.navbar-sticky-in .btn-link-white {
    color: #fff;
    transition: color 0.4s ease;
}

header.navbar-sticky-in .header-nav .navbar-nav .nav-link:hover,
header.navbar-sticky-in .btn-link-white:hover {
    background-image: linear-gradient(90deg,
            #ffffff 0%,
            #ff037b 30%,
            #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

@media (max-width: 1180px) {
    .navbar-sticky-in {
        display: block !important;
    }
}

.offcanvas {
    z-index: 1201 !important;
}

.offcanvas {
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(120px);
    -webkit-backdrop-filter: blur(120px);
}

@media (max-width: 1199.98px) {
    .nav-link {
        color: #fff;
    }

    .nav-link:hover,
    .nav-link:focus {
        background-color: transparent;
        background-image: linear-gradient(90deg,
                #ffffff 0%,
                #ff037b 30%,
                #ffffff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
}

@media (max-width: 479px) {
    .nav-link:hover {
        background-color: transparent !important;
    }
}

@media (min-width: 992px) {
    .header-logo img {
        width: auto;
        max-height: 50px;
    }
}

@media (max-width: 991.98px) {
    .header-logo img {
        width: auto;
        max-height: 36px;
    }
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    border-color: transparent;
}

.btn-close:focus,
.custom-close-btn:focus {
    outline: 0;
    box-shadow: none !important;
}

/* search1 */
#search1, #cart {
    background-color: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(120px);
    -webkit-backdrop-filter: blur(120px);
}

#search1 input {
    padding-right: 45px !important;
}

#search1 button[type="submit"] {
    right: 15px;
    padding: 0;
    color: white;
}

#search1.open {
    flex-direction: column;
}

@media (max-width: 767.98px) {

    #search1 input,
    #cart input {
        width: 100% !important;
    }
}

/* nav tabs */
.nav-tabs .nav-item:first-child .nav-link-outline {
    margin-left: 0;
} 

.nav-link-outline {
    margin: 0 10px !important;
    padding: 0;
    color: #888;
    font-size: 1.375rem;
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
}

.nav-tabs .nav-link.active.nav-link-outline {
    color: #ff037b;
}

.nav-link-outline:focus, .nav-link-outline:hover {
    color: #fff;
}
@media (max-width: 1180px) {
    .nav-tabs .nav-link {
        padding: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .nav-link-outline {
        margin: 0 10px !important;
        font-size: 1.375rem;
    }
}
@media (max-width: 767.98px) {
    .nav-link-outline {
        margin: 0 10px !important;
        font-size: 1.125rem;
    }
}
@media (max-width: 375.98px) {
    .nav-link-outline {
        margin: 0 5px !important;
        font-size: 1rem;
    }
}





.gradient-bg-1 {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 40%,
            rgba(70, 20, 80, 0.3) 70%,
            rgba(255, 100, 150, 0.2) 100%);
}

.gradient-bg-2 {
    background: linear-gradient(to right,
            rgba(255, 100, 150, 0.2) 0%,
            rgba(100, 200, 255, 0.15) 30%,
            rgba(0, 0, 0, 1) 70%,
            rgba(0, 0, 0, 1) 100%);
}



.text-pink {
    color: #ff037b !important;
}

.text-gray {
    color: #888 !important;
}

/* text */
.subpage-main {
    padding-top: 0 !important;
}

.subpage-title h1 {
    padding-top: 120px;
    padding-bottom: 70px;
    font-size: 5rem;
    font-weight: bold;
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .subpage-title h1 {
        padding-top: 100px;
        padding-bottom: 50px;
        font-size: 3.5rem;
    }
}
@media (max-width: 767.98px) {
    .subpage-title h1 {
        padding-top: 80px;
        padding-bottom: 30px;
        font-size: 2.625rem;
    }
}
@media (max-width: 375.98px) {
    .subpage-title h1 {
        padding-top: 60px;
        padding-bottom: 10px;
        font-size: 11.2vw;
    }
}

.title-2 {
    font-size: 3.125rem;
    line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .title-2 {
        font-size: 2.625rem;
    }
}
@media (max-width: 767.98px) {
    .title-2 {
        font-size: 2.125rem;
    }
}
@media (max-width: 375.98px) {
    .title-2 {
        font-size: 1.5rem;
    }
}

.small-title_line {
    position: relative;
    display: inline-block;
    padding-right: 16px;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
}

.small-title_line::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 7px;
    width: 15px;
    height: 2px;
    background-color: #888;
}

@media (max-width: 991.98px) {
    .small-title_line {
        padding-left: 0.5rem;
        padding-right: 0;
        padding-bottom: 10px;
    }

    .small-title_line::before {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 575.98px) {
    .small-title_line {
        font-size: 1rem;
        padding-bottom: 10px;
    }

    .small-title_line::before {
        bottom: -3px;
    }
}

.txt-4 {
    font-size: 1.5rem;
    line-height: 1.3;
    color: #888;
}

@media (max-width: 575.98px) {
    .txt-4 {
        font-size: 1rem;
    }
}

.txt-5 {
    font-size: 1.125rem;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .txt-5 {
        font-size: 1rem;
    }
}

.btn-link {
    font-size: 1rem;
    color: #fff;
    font-weight: 300;
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link:hover:active,
.btn-link:focus-visible {
    background-image: linear-gradient(90deg,
            #ffffff 0%,
            #ff037b 30%,
            #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.ico-arrow {
    display: inline-block;
    line-height: normal;
    width: 24px;
    height: 12px;
    background: url(/images/icon-arrow.png) no-repeat center / auto 100%;
}

.btn-link:hover .ico-arrow,
.btn-link:focus .ico-arrow,
.btn-link:active .ico-arrow,
.btn-link:hover:active .ico-arrow,
.btn-link:focus-visible .ico-arrow {
    background: url(/images/icon-arrow-on.png) no-repeat center / auto 100%;
}

.ico-back {
    display: inline-block;
    line-height: normal;
    width: 24px;
    height: 12px;
    background: url(/images/icon-back.png) no-repeat center / auto 100%;
}

.btn-link:hover .ico-back,
.btn-link:focus .ico-back,
.btn-link:active .ico-back,
.btn-link:hover:active .ico-back,
.btn-link:focus-visible .ico-back {
    background: url(/images/icon-back-on.png) no-repeat center / auto 100%;
}

/* main */
.main-slogan {
	margin-bottom: 12px;
	transition: opacity 2s ease-in-out;
	opacity: 0;
}

.main-slogan.fade-in {
    opacity: 1;
}

.main-slogan hr {
	width: 100%;
    border: 0;
    height: 0.1rem;
    background-color: #fff;
	opacity: 0.5;
}

.slogan-line {
	padding: 0 12px;
}

.main-slogan .txt-slogan {
	font-size: 1.375rem;
	font-weight: 200;
}
@media (max-width: 1399.98px) {
    .main-slogan .txt-slogan {
		font-size: 1.156rem;
	}

	.main-slogan {
		margin-bottom: 5px;
	}
}
@media (max-width: 991.98px) {
    .main-slogan .txt-slogan {
		font-size: 1.375rem;
	}
	
	.slogan-line {
		padding: 0 8px;
	}

	.main-slogan {
		margin-bottom: 10px;
	}
}
@media (max-width: 767.98px) {
    .main-slogan .txt-slogan {
		font-size: 1.094rem;
	}

	.main-slogan {
		margin-bottom: 5px;
	}
}
@media (max-width: 575.98px) {
    .main-slogan .txt-slogan {
		font-size: 1rem;
	}
	
	.main-slogan {
		margin-bottom: 0;
	}
}
@media (max-width: 475.98px) {
    .main-slogan .txt-slogan {
		font-size: 0.875rem;
	}
	.slogan-line {
		padding: 0 5px;
	}
}
@media (max-width: 375.98px) {
    .main-slogan .txt-slogan {
		font-size: 0.663rem;
	}

	.main-slogan {
		margin-bottom: 0;
	}
}

.animated-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.animated-text-container:first-child .animated-letter {
	margin: 0 0.5rem 0 0;
}

.animated-text-container:last-child .animated-letter {
	margin: 0 0 0 0.5rem;
}

.animated-letter {
    display: inline-block;
    margin: 0 0.5rem;
}

.animated-image {
    display: block;
    width: auto;
    max-height: 180px;
    opacity: 0;
    filter: blur(10px);
    transform: scale(2);
    transition: opacity 1s ease-out, filter 1s ease-out, transform 1s ease-out;
}

.animated-image.in-view {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.strip {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 1px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
}

.ticker {
    display: inline-block;
    white-space: nowrap;
    transform: translateX(0);
    will-change: transform;
}

.ticker .track {
    display: inline-block;
    padding: 20px 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
}
@media (max-width: 767.98px) {
    .ticker .track {
        padding: 10px 0;
        font-size: 1.125rem;
    }
}

.ticker .track.bg-white {
    color: #888;
    background-color: #fff;
}

.ticker .track.outline {
    color: #fff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5)
}


/* team */
.team {
    background-color: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

.team:hover {
    background-color: #fff;
}

.team-section-title {
    color: #fff;
    font-size: 2.125rem;
    font-weight: 500;
    letter-spacing: -0.05rem;
}

.team:hover .team-section-title {
    color: #ff037b;
    font-weight: 700;
}

.team-member .job {
    color: #888;
}
.team-member .name {
    color: #fff;
}

.team:hover .team-member .name {
    color: #000;
}

@media (min-width: 768px) { 
    .team-section-title {
        padding-left: 51px;
    }
    .team-section-title::before {
        content: '';
        position: absolute;
        left: 12px;
        top: -53px;
        transform: rotate(-45deg);
        width: 1px;
        height: 35px;
        background: rgba(255, 255, 255, 0.2);
        -webkit-transform: rotate(-45deg);
    }

    .team:hover .team-section-title::before {
        background: rgba(0, 0, 0, 1);
    }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .team-section-title {
        font-size: 1.75rem;
    } 
}
@media (max-width: 767.98px) {
    .team-member-col {
        justify-content: center;
    }
    
    .team-section-title {
        font-size: 1.5rem;
        text-align: center;
    } 

    .team-section-title::before {
        content: '';
        position: absolute;
        left: 50%;
        top: -48px;
        transform: rotate(-45deg);
        width: 1px;
        height: 30px;
        background: rgba(255, 255, 255, 0.2);
        -webkit-transform: translateX(-50%);
    }

    .team:hover .team-section-title::before {
        background: rgba(0, 0, 0, 1);
    }
}
@media (max-width: 375.98px) {
    .team-section-title {
        font-size: 1.25rem;
    } 

    .team-member {
        font-size: 0.875rem;
    }
}

.team.about {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 992px) {
    .blog:nth-child(2) .blog-box {
        padding-top: 4.82rem;
    }
}

.badge-info {
    display: inline-block;
    padding: 5px 10px;
    font-size: 0.813rem;
}

.badge-info.year {
    color: #fff;
    border: 0.1rem solid rgba(255, 255, 255, 0.3);
}

.badge-info.category {
    color: rgba(255, 255, 255, 0.9);
    border: 0.1rem solid #4d4d4d;
    background-color: #4d4d4d;
}

.type-a .blog-info .title {
    color: #fff;
    font-size: 1.188rem;
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .type-a .blog-info .title {
        font-size: 1.063rem;
    }

    .badge-info {
        padding: 5px 10px;
        font-size: 0.813rem;
    }
}
@media (max-width: 767.98px) {
    .type-a .blog-info .title {
        font-size: 1rem;
    }

    .badge-info {
        padding: 4px 9px;
        font-size: 0.75rem;
    }
}
@media (max-width: 375.98px) {
    .type-a .blog-info .title {
        padding: 3px 8px;
        font-size: 0.688rem;
    }

    .badge-info {
        padding: 2px 7px;
        font-size: 0.625rem;
    }
}

.card-title {
    color: #fff;
    font-size: 1.188rem;
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .card-title {
        font-size: 1.063rem;
    }
}
@media (max-width: 767.98px) {
    .card-title {
        font-size: 1rem;
    }
}
@media (max-width: 375.98px) {
    .card-title {
        padding: 3px 8px;
        font-size: 0.688rem;
    }
}

.view-title {
    color: #fff;
    font-size: 1.875rem;
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .view-title {
        font-size: 1.5rem;
    }
}
@media (max-width: 767.98px) {
    .view-title {
        font-size: 1.25rem;
    }
}
@media (max-width: 375.98px) {
    .view-title {
        padding: 3px 8px;
        font-size: 1rem;
    }
}


/* archive */
.blog-box {
    position: relative;
}

.blog-box:hover .blog-image {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-box .blog-image {
    position: relative;
    overflow: hidden;
}

.blog-box .blog-image img {
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.blog-box:hover .blog-image img {
    transform: scale(1.05);
}

/* footer */
footer .border-top {
    width: 100%;
}

.bg-image-with-blur {
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
}

.bg-blur-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(15px) brightness(0.9);
    transform: scale(1.05); 
    opacity: 0.2;
}

.bg-blur-layer.left {
    background-image: url('/images/poster/2024.webp');
    background-size: cover;
    background-position: center;
}

.bg-blur-layer.right {
    background-image: url('/images/poster/2023.webp');
    background-size: cover;
    background-position: center;
}

.content-overlay {
    position: relative;
    z-index: 2;
}


@media (min-width: 1400px) {
    .bg-img-left {
		width: 100%;
		height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('/images/main/bg-main-2025.png');
        background-repeat: no-repeat;
        background-position: left center;
        background-size: auto 100%;
        z-index: 0;
		filter: blur(15px);
		-webkit-filter: blur(15px);
		transition: filter 2s ease-out, -webkit-filter 2s ease-out;
    }

	.bg-img-left.loaded {
        filter: blur(0px) brightness(1);
        -webkit-filter: blur(0px) brightness(1);
    }
}

/* 마스크 기법 시작 */
:root {
    --img-url: url('/images/main/img-main-2025.png');
}

#scanner-wrap {
    position: relative;
    width: 800px; 
    height: calc(100vh - 98px);
    overflow: hidden;
}

@media (max-width: 991.98px) {
    #scanner-wrap {
        height: calc(100vh - 57px);
    }
}

.bg-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: blur(15px);
    transform: scale(1.02);
    z-index: 1;
}

#focus-container {
    position: absolute;
    right: 50px;
    bottom: 195px;
    width: 450px;
    height: 550px;
    z-index: 10;
}

#mask-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
}

#border-box {
    position: absolute;
    top: 0;
    left: 0; 
    
    width: 200px;
    height: 100%;
    z-index: 20;

    background-color: transparent;
    transition: background-color 2s ease; 
}

.inner-img {
    position: absolute;
    width: 800px;
    height: calc(100vh - 98px);
    background-image: var(--img-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: blur(0px);
    
    top: 0;
    left: 0;
    
    opacity: 0;
    transition: opacity 1s ease-in-out;
    will-change: transform;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .inner-img {
        height: calc(100vh - 57px);
    }
}

.border-line {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.border-top { top: 0; left: 0; height: 1px; width: 0%; }
.border-right { top: 0; right: 0; width: 1px; height: 0%; }
.border-bottom { bottom: 0; right: 0; height: 1px; width: 0%; }
.border-left { bottom: 0; left: 0; width: 1px; height: 0%; }

#focus-container.active .inner-img {
    opacity: 1;
}

/* 바로 맥동 효과로
#focus-container.active #border-box {
    background-color: rgba(255, 255, 255, 0.15); 
}
*/

@media (max-width: 1199.98px) {
	#scanner-wrap {
		width: 600px; 
	}

	#focus-container {
		right: 0px;
		bottom: 230px;
		width: 400px;
		height: 480px;
	}

	#border-box {
		width: 150px;
	}

	.inner-img {
		width: 600px;
	}

	section.about {
		padding: 0 0 100px 0;
	}
}

/* 1. 맥동 애니메이션 정의 (천천히, 더 자연스러운 투명도 범위) */
@keyframes pulse-bg-natural {
    0%, 100% {
        /* 시작: 거의 투명하게 시작하여 경계가 부드러움 */
        background-color: rgba(255, 255, 255, 0.05);
    }
    50% {
        /* 중간: 너무 쨍하지 않게 은은한 밝기까지만 도달 */
        background-color: rgba(255, 255, 255, 0.3);
    }
}

/* 2. 맥동 효과 적용 클래스 */
#border-box.pulsing {
    transition: none; /* 기존 트랜지션 간섭 제거 */
    
    /* 5초 주기로 아주 천천히 호흡하듯(ease-in-out) 반복 */
    animation: pulse-bg-natural 5s infinite ease-in-out;
}