@charset "utf-8";

.main-hero-section {min-height: 660px; margin-bottom: var(--space-160); padding-block: 0; height: calc(100vh - var(--header-height)); max-height: 872px; position: relative; display: flex; justify-content: flex-end; column-gap: var(--fs-28);}
.main-hero-section .inner {max-width: 1720px; position: absolute; height: 100%; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; padding-bottom: var(--space-100); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;}
.main-hero-section .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-20);}
.main-hero-section .txt-wrap .swiper-controls {display: flex; align-items: center; column-gap: var(--fs-20);}
.main-hero-section .txt-wrap .swiper-controls .swiper-btn {transition: background-color 0.2s; width: 34px; height: 34px; border: 1px solid var(--color-border1); background-color: var(--color-white); display: flex; align-items: center; justify-content: center;}
.main-hero-section .txt-wrap .swiper-controls .swiper-btn:hover {background-color: var(--color-bg1);}
.main-hero-section .txt-wrap .swiper-controls .swiper-prev img {transform: rotate(180deg);}
.main-hero-section .txt-wrap .swiper-count {width: fit-content; display: flex; align-items: center; column-gap: var(--fs-14);}
.main-hero-section .txt-wrap .swiper-count .separator {width: 14px; height: 2px; border-radius: 2px; background-color: var(--color-font4);}
.main-hero-section .txt-wrap .swiper-count span:not(.separator) {width: 10px; text-align: center; font-size: var(--fs-15); font-weight: 600;}
.main-hero-section .txt-wrap .swiper-count .swiper-pagination-current {color: var(--color-font1);}
.main-hero-section .txt-wrap .swiper-count .swiper-pagination-total {color: var(--color-font4);}
.main-hero-section .txt-wrap p {color: var(--color-font2);}
.hero-txt-list {display: grid; width: 100%;}
.hero-txt-item {grid-area: 1 / 1; transition: opacity 0.6s, transform 0.6s, visibility 0.6s; display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-20); opacity: 0; visibility: hidden; transform: translateY(var(--fs-20));}
.hero-txt-item.is-active {opacity: 1; visibility: visible; transform: translateY(0);}
.main-hero-section .scroll-down {transition: opacity 0.3s; display: flex; flex-direction: column; align-items: center; row-gap: 10px; position: relative; top: var(--fs-40);}
.main-hero-section .scroll-down span {writing-mode: vertical-rl; text-orientation: mixed; color: var(--color-font4);}
.main-hero-section .scroll-down .line {position: relative; width: 2px; height: 60px; background: var(--color-static1); background: linear-gradient(180deg, rgb(var(--rgb-static1) / 1) 0%, rgb(var(--rgb-static1) / 0) 100%); overflow: hidden; transform-origin: top; animation: scrollLineMove 2s ease-in-out infinite;}
@keyframes scrollLineMove {
    0% {transform: scaleY(0); transform-origin: top;}
    50% {transform: scaleY(1); transform-origin: top;}
    50.01% {transform-origin: bottom;}
    100% {transform: scaleY(0); transform-origin: bottom;}
}
.scroll .main-hero-section .scroll-down {opacity: 0;}
.main-hero-section .main-hero-swiper {width: 62%; max-width: 1180px; height: 100%; margin: 0; position: relative;}
.main-hero-section .main-hero-swiper::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; background: linear-gradient(180deg, rgb(var(--rgb-white) / 0) 80%, rgb(var(--rgb-white) / 1) 100%); z-index: 5;}
.main-hero-section .main-hero-swiper .swiper-slide {width: 100%; height: 100%;}
.main-hero-section .main-hero-swiper .swiper-slide picture {width: 100%; height: 100%;}
.main-hero-section .main-hero-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover; object-position: right center;}

.main-section +.main-section {margin-top: var(--space-120);}

.product-section {background-image: url(/img/main/product-section-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.product-section .section-tit-wrapper {margin-bottom: var(--fs-20);}
.product-section .product-list {height: 600px; display: flex; align-items: flex-end; column-gap: var(--fs-24);}
.product-section .product-item {transition: width 0.3s, height 0.3s; width: calc(100% / 3 - var(--fs-24) * 2 / 3); height: 540px; position: relative;}
.product-section .product-item > img {width: 100%; height: 100%; object-fit: cover;}
.product-section .product-item::before {transition: background-color 0.3s; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5;}
.product-section .product-item .content-wrap {position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; padding: var(--fs-30); display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;}
.product-section .product-item .content-wrap .shortcut-btn {transition: border 0.3s; width: var(--fs-40); height: var(--fs-40); display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-font1);}
.product-section .product-item .content-wrap .shortcut-btn img {transition: filter 0.3s;}
.product-section .product-item .content-wrap .txt-wrap {width: 100%;}
.product-section .product-item .content-wrap .txt-wrap .card-tit-wrap .body-small {transition: color 0.3s; color: var(--color-static1);}
.product-section .product-item .content-wrap .txt-wrap .card-tit-wrap .card-tit {transition: color 0.3s; color: var(--color-font1);}
.product-section .product-item .content-wrap .txt-wrap .body-medium {overflow: hidden; transition: opacity 0.3s; height: 54px; margin-top: var(--fs-30); color: var(--color-font5); opacity: 0;}
.product-section .product-item:hover {width: 50%; height: 600px; flex-shrink: 0;}
.product-section .product-item:hover::before {background-color: rgb(var(--rgb-black) / 0.4);}
.product-section .product-item:hover .content-wrap .shortcut-btn {border-color: var(--color-font5);}
.product-section .product-item:hover .content-wrap .shortcut-btn img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.product-section .product-item:hover .content-wrap .txt-wrap .card-tit-wrap .body-small,
.product-section .product-item:hover .content-wrap .txt-wrap .card-tit-wrap .card-tit {color: var(--color-font5);}
.product-section .product-item:hover .content-wrap .txt-wrap .body-medium {opacity: 1;}

.overview-section {padding-block: var(--space-60);}
.overview-section .section-tit-wrap {margin-bottom: var(--space-60);}
.overview-section .overview-list {display: flex; padding-top: var(--fs-20);}
.overview-section .overview-item {transition: border 0.3s, transform 0.3s, box-shadow 0.3s; border-top: 2px solid transparent; flex: 1; padding: var(--fs-40) var(--fs-36); background-color: rgb(var(--rgb-black) / 0.05); display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-12);}
.overview-section .overview-item .body-large {color: var(--color-static1);}
.overview-section .overview-item .card-tit {color: var(--color-font1);}
.overview-section .overview-item .body-medium {color: var(--color-font2);}
.overview-section .overview-item:hover {border-color: var(--color-static1); transform: translateY(calc(var(--fs-20) * -1)); box-shadow: var(--box-shadow);}

.manufacturing-section .section-tit-wrap {margin-bottom: var(--space-60);}
.manufacturing-section .manufacturing-list {display: flex; column-gap: 1px; margin-bottom: var(--space-60);}
.manufacturing-section .manufacturing-item {flex: 1; padding: var(--fs-30); background-color: rgb(var(--rgb-white) / 0.05); display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-12);}
.manufacturing-section .manufacturing-item .ico-wrap {width: var(--fs-48); height: var(--fs-48); display: flex; align-items: center; justify-content: center; background-color: rgb(var(--rgb-white) / 0.05); border: 1px solid rgb(var(--rgb-white) / 0.05);}
.manufacturing-section .manufacturing-item .card-sub {color: var(--color-font5);}
.manufacturing-section .manufacturing-item .body-small {color: var(--color-font4);}
.manufacturing-section .manufacturing-info-list {display: flex; column-gap: var(--fs-20);}
.manufacturing-section .manufacturing-info-item {flex: 1; display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-20);}
.manufacturing-section .manufacturing-info-item .section-tit {color: var(--color-font5); text-transform: uppercase;}
.manufacturing-section .manufacturing-info-item .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: 4px;}
.manufacturing-section .manufacturing-info-item .body-large {color: var(--color-font5);}
.manufacturing-section .manufacturing-info-item .body-medium {color: var(--color-font4); word-break: keep-all;}

.news-section {background-image: url(/img/main/news-section-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: left top;}
.news-section .section-tit-wrapper {margin-bottom: var(--fs-30);}
.news-section .news-list {display: flex; align-items: center; column-gap: var(--fs-30);}
.news-section .news-item {transition: border 0.3s, box-shadow 0.3s; flex: 1; background-color: rgb(var(--rgb-black) / 0.05); padding: var(--fs-40); border-top: 2px solid transparent; display: flex; flex-direction: column; align-items: flex-start;  row-gap: 10px;}
.news-section .news-item:hover {border-color: var(--color-static1); box-shadow: var(--box-shadow);}
.news-section .news-item .news-date {color: var(--color-font2);}
.news-section .news-item .news-tit {display: -webkit-box; color: var(--color-font1); line-height: calc(var(--fs-64) / 2); height: var(--fs-64); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.news-section .news-item .news-txt {display: -webkit-box; color: var(--color-font3); line-height: calc(var(--fs-48) / 2); height: var(--fs-48); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

@media screen and (max-width:1440px) {
    .main-hero-section .main-hero-swiper {width: 68;}

    .product-section .product-list,
    .product-section .product-item:hover {height: 480px;}
    .product-section .product-item {height: 440px;}
}

@media screen and (max-width:1024px) {
    .main-hero-section {min-height: 550px;}
    .main-hero-section .main-hero-swiper {width: 75%;}
    .main-hero-section .main-hero-swiper::before {background: linear-gradient(180deg, rgb(var(--rgb-white) / 0) 0%, rgb(var(--rgb-white) / 1) 100%);}
    .hero-txt-item {justify-content: flex-end;}

    .product-section .product-item .content-wrap .txt-wrap .body-medium {height: 70px;}
    
    .overview-section .overview-list {flex-direction: column;}
    .overview-section .overview-item:hover {transform: unset;}
    
    .manufacturing-section .manufacturing-list {flex-wrap: wrap; row-gap: 1px;}
    .manufacturing-section .manufacturing-item {flex: unset; width: calc(50% - 0.5px);}
    .manufacturing-section .manufacturing-info-list {flex-direction: column; row-gap: var(--fs-20);}
    
    .news-section .news-list {flex-wrap: wrap; row-gap: var(--fs-30);}
    .news-section .news-item {flex: unset; width: calc(50% - var(--fs-30) / 2);}
}

@media screen and (max-width: 768px) {
    .main-hero-section {margin-bottom: 0; width: 100%; height: auto; min-height: unset; max-height: 600px;  aspect-ratio: 402/440;}
    .main-hero-section .inner {padding-bottom: 50px;}
    .main-hero-section .main-hero-swiper {width: 100%;}
    .main-hero-section .txt-wrap .swiper-count .separator {background-color: var(--color-font1);}
    .main-hero-section .txt-wrap .swiper-count .swiper-pagination-current {color: var(--color-static1);}
    .main-hero-section .txt-wrap .swiper-count .swiper-pagination-total {color: var(--color-font1);}
    .main-hero-section .scroll-down,
    .main-hero-section .txt-wrap .swiper-controls,
    .main-hero-section .txt-wrap .body-large,
    .main-hero-section .main-hero-swiper::before,
    .main-hero-section .txt-wrap p {display: none; visibility: hidden;}
    .main-hero-section .main-hero-swiper .swiper-slide img {object-position: center center;}

    .main-section +.main-section {margin-top: 0;}

    .product-section {background-image: none; background-color: var(--color-bg1);}
    .product-section .section-tit-wrapper,
    .overview-section .section-tit-wrap,
    .news-section .section-tit-wrapper {margin-bottom: 32px;}
    .product-section .product-list {height: fit-content; flex-direction: column; row-gap: 32px;}
    .product-section .product-item {width: 100%; height: 260px;}
    .product-section .product-item:hover {width: 100%; height: 260px;}
    .product-section .product-item .content-wrap .txt-wrap .body-medium {height: 54px;}

    .manufacturing-section .manufacturing-item,
    .news-section .news-item {padding: 30px 20px;}
}
@media screen and (max-width: 600px) {
    .manufacturing-section .manufacturing-item,
    .news-section .news-item {width: 100%;}
}

@media screen and (max-width: 480px) {
    /* .main-hero-section {width: 100%; height: auto; min-height: unset; aspect-ratio: 402/440;} */
    .main-hero-section {max-height: unset;}
    .main-hero-section .inner {padding-bottom: 30px;}

    .product-section .product-item .content-wrap .txt-wrap .body-medium {display: none; visibility: hidden;}

    .manufacturing-section .manufacturing-info-item,
    .manufacturing-section .manufacturing-info-item .txt-wrap {align-items: center; text-align: center;}
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */