/* ----------- 메인 비주얼 carousel slide ----------- */
.main-visual .slider-main img {object-fit: cover; filter: brightness(0.5); position: fixed; z-index: -9;}



/* 슬라이더 컨트롤 */
.slider-controller {position: absolute; bottom: 0; right: 0; width: 50%; height: 10rem; display: flex; flex-direction: row; align-content: center; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem 4rem;}
.slider-controller .swiper-wrapper {width: calc(100% - 6rem);}
.slider-controller .swiper-slide { height: auto;;}
.slider-controller .swiper-slide > * {opacity: 0; transition: all 0.5s;}
.slider-controller .swiper-slide-active > * {opacity: 1;}
.main-slider .showcaseSlider-nav {display: flex; flex-direction: row; align-items: center; gap: 6rem; position: absolute; right: 0; bottom: 6.75rem; width: clamp(300px, 25%, 500px); justify-content: center;}
.main-slider .swiper-button-prev, .main-slider .swiper-button-next {width: 2rem; height: 1.5rem; opacity: 0.5; position: static; transition: all 0.3s; padding: 0; margin: 0; height: fit-content;}
.swiper-button-prev:hover, .swiper-button-next:hover {opacity: 1;}
.swiper-button-next:after, .swiper-button-prev:after {content: ''; width: 100%; height: 1rem;}
.swiper-button-next:after {content: ''; background: url('/assets/icons/arrow-slim-next.svg') no-repeat;}
.swiper-button-prev:after {content: ''; background: url('/assets/icons/arrow-slim-prev.svg') no-repeat;}
.slider-controller .background {background-color: #80808079; backdrop-filter: blur(5px);}

/* 슬라이더 페이지네이션 */
.swiper-pagination {width: 4rem;position: absolute; top: 50%; right: 4rem; left: auto; transform: translateY(-50%); height: fit-content;}
.swiper-pagination .swiper-pagination-current {font-size: 3rem;}
.swiper-pagination .swiper-pagination-total {opacity: 0.7;}






.main-slider * {color: white;}
.arrow-button { display: flex; align-items: center; text-decoration: none; font-family: 'CabinetGrotesk-extrabold', sans-serif; color: #000; transition: padding 1s cubic-bezier(0.16, 1, 0.3, 1); width: fit-content; }
.arrow-button svg { width: 60px; margin-left: 10px; }
.arrow-button svg circle { transition: fill 0.75s ease; fill: transparent; }
.arrow-button:hover svg circle { fill: var(--bs-primary); }
.arrow-button:hover { padding-left: 20px; }

.main-slider { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100vw; height: clamp(500px, 100vh, 1200px); position: relative; }
.main-slider .swiper-slide { position: relative; height: 100%; overflow: hidden; }
.main-slider .swiper-slide .swiper-image {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
}
.main-slider .text-container {
    width: clamp(500px, 60%, 800px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: absolute;
    top: 50%;
    left: 14rem;
    transform: translateY(-50%);
    margin-top: -3rem;
}
.main-slider .text-container .bigTitle {
    transform: translate(-140%, 0);
    transition: all 1.15s cubic-bezier(0.58, 0, 0.28, 0.99) 0.4s;
    text-shadow: 0px 3px 5px #00000071 ;
    width: 100%;
}

.main-slider .text-container .subTitle { transform: translate(-160%, 0); transition: all 1.15s cubic-bezier(0.58, 0, 0.28, 0.99) 0.4s; font-weight: 400; }


.main-slider .text-container .container-arrow-button { transform: translate(-160%, 0); padding-right: 100%; transition: all 0.6s 1s; width: fit-content; margin-top: 1rem; }

.main-slider .text-container .container-arrow-button .arrow-button { color: #fff; }
.main-slider .text-container .container-arrow-button svg path { fill: #fff; }
.main-slider .text-container .container-arrow-button svg circle { stroke: #fff; }
.main-slider .text-container .container-arrow-button:hover svg circle { stroke: var(--bs-primary); }
.main-slider .swiper-image .filter { width: 100%; height: 100%; background-color: #10112b; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0.5; transition: opacity 0.8s ease-in 0.5s; }

/* 슬라이드 active시 보이는 텍스트 */
.main-slider .swiper-slide-active .text-container .bigTitle, .main-slider .swiper-slide-active .text-container .subTitle, .main-slider .swiper-slide-active .text-container .container-arrow-button {
    transform: translate(0, 0);
    padding-right: 0;
}

.main-slider .swiper-slide-active .swiper-image .filter { opacity: 0; }

.main-slider .swiper-pagination { position: absolute; bottom: 2rem; top: auto; left: auto; right: 0; width: clamp(300px, 25%, 500px); background: #73737362; backdrop-filter: blur(5px); padding: 0.5rem; }
.main-slider .showcaseSlider-nav .showcaseSlider-prev.swiper-button-disabled, .main-slider .showcaseSlider-nav .showcaseSlider-next.swiper-button-disabled { opacity: 1; }
.main-slider .showcaseSlider-nav .showcaseSlider-prev.swiper-button-disabled:after, .main-slider .showcaseSlider-nav .showcaseSlider-next.swiper-button-disabled:after { color: #8f9397; }
.home-showcase .scrollSliderButton { position: absolute; left: 50%; bottom: 0; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, 1.5rem); color: #fff !important; text-decoration: none; z-index: 9; }
.home-showcase .scrollSliderButton .line { height: 3rem; width: 1px; background: rgba(187, 187, 187, 0.548); margin-top: 5px; animation: scroll-anim-mobile 1.6s cubic-bezier(0.62, 0.01, 0.71, 0.47) 0s infinite normal forwards; }


/* 하단 공지사항 카드 */
.notice-card {transition: all 0.3s;}
.notice-card:hover {opacity: 0.8;}

/* `xxl` */
@media (max-width: 1399.98px) { }
/* `xl` */
@media (max-width: 1199.98px) { 

}

/* `lg` */
@media (max-width: 991.98px) { 
    body.main {margin-top: -70px;}
    .main-slider {height: clamp(500px, 90vh, 1200px); }
    .main-slider .swiper-slide .swiper-image {padding: 2rem; display: flex; justify-content: center; align-items: center;}
    .main-slider .text-container { width: 100%; margin: 0; text-align: center; align-items: center; left: 50%; transform: translate(-50%, -50%);}
    .main-slider .text-container .bigTitle {width: 90%;}
    .main-slider .text-container .subTitle {width: 80%;}
    .main-slider .swiper-pagination {background: none; width: auto;  bottom: 4.5rem; right: 50%; backdrop-filter: none; transform: translateX(50%);}
    .main-slider .showcaseSlider-nav {width: auto; right: 50%; transform: translateX(50%); z-index: 9;}
    .main-slider .arrow-button svg { width: 45px; }
    
}
/* `md` */
@media (max-width: 767.98px) {
     .main-visual .carousel-controller, .main-visual .carousel-caption {width: 100%;}  
     .main-slider .showcaseSlider-nav {bottom: 6rem;}
     .main-slider .swiper-pagination-current {font-size: 2rem;}
}

/* `sm` */
@media (max-width: 575.98px) {
    .main-visual .arrow-button svg { width: 45px; }
}



.products-slider .swiper-slide {background: #f3f3f3; height: 28rem; width: 8rem !important ;  padding: 3rem;  transition: all 0.5s ease; background-position: center; filter: grayscale(1); overflow: hidden;} 
.products-slider .swiper-wrapper {padding-bottom: 3rem;}
.products-slider .swiper-wrapper .swiper-slide-active {width: 38rem !important; background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);; filter: none;}
.products-slider .swiper-wrapper .swiper-slide p {writing-mode: vertical-lr; font-size: 1rem; font-weight: 600; position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.products-slider .swiper-wrapper .swiper-slide-active p {transition: opacity 0.6s ease-out; animation: product-header-animation 1.4s forwards; writing-mode:unset;font-size: 2rem; padding-bottom: 0.5rem; display: inline-block; position: static; height: auto; transform: none}
.products-slider .swiper-wrapper .swiper-slide a {opacity: 0;}
.products-slider .swiper-wrapper .swiper-slide-active a {opacity: 1; transition: opacity 0.6s ease-in 0.5s, background-color 0.3s ease;}
.products-slider .swiper-slide img {position: absolute; right: 3rem; bottom: 3rem; transform: translate(45%,3rem) scale(0.6);  height: clamp(200px, 60%, 300px); transition: all 0.5s ease-out; opacity: 0.3;}
.products-slider .swiper-wrapper .swiper-slide-active img {opacity: 1; transform: translateX(0);}
.products-slider .swiper-pagination {position: relative; height: 1px ;}
.products-slider .swiper-pagination .swiper-pagination-progressbar-fill {background: var(--bs-primary);}
.products-slider .swiper-button-next, .products-slider .swiper-button-prev {width: 3rem; height: 3rem; padding: 0.5rem; background: #73737362;}
.products-slider .swiper-button-next:after, .products-slider .swiper-button-prev:after {color: rgba(78, 78, 78, 0.582); font-size: 38px; filter: invert(1); margin-top: 0.25rem; opacity: 0.5; transition: all 0.2s;}
.products-slider .swiper-button-next:hover:after, .products-slider .swiper-button-prev:hover:after {opacity: 0.8;}
.products-slider .swiper-pagination-bullet-active {background: #136590;}
@keyframes product-header-animation { 0% { opacity: 0;} 30% { opacity: 0;} 100% {opacity: 1;} }

@media (max-width: 1199.98px) { 
     /* our product */
     .products-slider .swiper-slide {width: 6rem !important; height: 24rem;}
     .products-slider .swiper-wrapper .swiper-slide-active {width: 30rem !important;}

}

@media (max-width: 991.98px) { 
    /* our product */
    .products-slider {padding-bottom: 1rem;}
    .products-slider .swiper-slide {width: 4rem !important; height: 22rem; transition: all 1s ease;}
    .products-slider .swiper-wrapper {padding-bottom: 2rem;}
    .products-slider .swiper-wrapper .swiper-slide-active {width: 28rem !important;}
    /* .products-slider .swiper-pagination {transform: translateY(30px);} */
    .products-slider .swiper-pagination-bullet {width: 10px; height: 10px;}
    
}

@media (max-width: 767.98px) {
    /* our product */
    .products-slider .swiper-slide {width: 100% !important; height: 22rem; padding: 2rem;}
    .products-slider .swiper-wrapper .swiper-slide-active {width: 100% !important;}
    .products-slider .swiper-slide img {height: clamp(160px, 60%, 200px); right: 2rem; bottom: 2rem; transform: translateX(0);}
    .products-slider .swiper-wrapper .swiper-slide p {writing-mode:unset; opacity: 0; transition: all 0.3s;}
    .products-slider .swiper-wrapper .swiper-slide-active p {font-size: 1.5rem;}
}

@media (max-width: 575.98px) {
    .products-slider .swiper-wrapper .swiper-slide-active p {font-size: 1.25rem;}
    .products-slider .swiper-slide img {height: clamp(140px, 60%, 180px);}
}