@charset "utf-8";
.main-banner {width: 100%; height: 100svh; min-height: 700px;}
.main-banner .swiper {width: 100%; height: 100%;}
.main-banner .swiper img {width: 100%; height: 100%; object-fit: cover;}

.main-cont {margin-top: 35px;}
.main-cont1,.main-cont4, .main-cont6 {padding: 0 35px;}
.main-cont5 {padding: 35px;}

.main-cont1 {display: flex; gap: 16px;}
.main-cont1 > div:first-child {flex: 1;}
.main-cont1 > div:last-child {flex: 2;}
.main-cont1 > div .img-wrap{height: 36vw; margin-bottom: 20px;}
.main-cont1 > div p {text-align: right;}
.main-cont1 > div .img-wrap img {transition: filter 0.2s;}
.main-cont1 > div:hover .img-wrap img {filter: grayscale(70%);}

.main-cont2 {position: relative; overflow: hidden; height: fit-content; padding: 10PX;}
.main-cont2 .swiper {width: 29vw; height: 36vw; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);}
.main-cont2 .scrolling-text-wrap{position: absolute; z-index: -1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; row-gap: 60px;}
.main-cont2 .scrolling-text {white-space: nowrap; font-size: 96px; width: 100%; display: inline-block; will-change: transform;}
.main-cont2 .scrolling-text:nth-child(odd) {animation: scroll-left 20s linear infinite; color: var(--line2);}
.main-cont2 .scrolling-text:nth-child(even) {animation: scroll-right 20s linear infinite;}
@keyframes scroll-left {0% { transform: translateX(0%); } 100% { transform: translateX(-50%); }}
@keyframes scroll-right {0% { transform: translateX(-50%); } 100% { transform: translateX(0%); }}

.main-cont3 {background-color: #F5F5F5; padding: 100px 35px; text-align: center;}
.main-cont3 p {margin-bottom: 30px;}

.main-cont4 .swiper-slide {max-height: 838px; height: calc(((100vw - 70px) / 3 - 60px / 3) * 1.3828);}
.main-cont4 .swiper-slide a {display: block; width: 100%; height: 100%; position: relative;}
.main-cont4 .swiper-slide a .img-wrap {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;}
.main-cont4 .swiper-slide a .txt-wrap {width: calc(100% - 60px); position: absolute; left: 30px; bottom: 30px;}
.main-cont4 .swiper-slide a .txt-wrap h5 {font-size: 32px; margin-bottom: 10px;}
.main-cont4 .swiper-slide a .txt-wrap p {}
.main-cont4 .swiper-slide a .img-wrap img {transition: filter 0.2s;}
.main-cont4 .swiper-slide a:hover .img-wrap img {filter: grayscale(100%);}

.main-cont5 h4 {font-size: 32px; margin-bottom: 44px; text-align: center;}
.main-cont5 .swiper-slide .img-wrap{margin-bottom: 25px; width: calc((100vw - 70px) / 4 - 90px / 4 ); height: calc((100vw - 70px) / 4 - 90px / 4 );}
.main-cont5 .swiper-slide .txt-wrap{padding: 0 4px; font-size: 14px;}
.main-cont5 .swiper-slide .txt-wrap .product-name {margin-bottom: 4px;}
.main-cont5 .swiper-slide a:hover .txt-wrap .product-name {text-decoration: underline;}

.main-cont6 {margin-bottom: 70px; display: flex; column-gap: 65px; align-items: center;}
.main-cont6 .img-wrap {width: 55vw; height: 45vw;}
.main-cont6 .txt-wrap h5 {font-size: 20px; color: var(--text3); margin-bottom: 50px;}
.main-cont6 .txt-wrap p {font-size: 14px; margin-bottom: 9vw;}

@media screen and (max-width: 1600px) {

}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
    .main-banner {min-height: 500px;}
    .main-cont {margin-top: 24px;}
    .main-cont1,.main-cont4, .main-cont6 {padding: 0 24px;}
    .main-cont5 {padding: 24px;}
    .main-cont3 {padding: 100px 24px;}
    .main-cont4 .swiper-slide{max-height: 670px; height: calc(((100vw - 48px) / 2 - 25px / 2) * 1.3828);}
    .main-cont5 .swiper-slide .img-wrap{width: calc((100vw - 48px) / 3 - 50px / 3 ); height: calc((100vw - 48px) / 3 - 50px / 3 );}
}
@media screen and (max-width: 768px) {
    .main-cont {margin-top: 16px;}
    .main-cont1,.main-cont4, .main-cont6 {padding: 0 16px;}
    .main-cont5 {padding: 16px;}
    .main-cont1 {flex-direction: column;}
    .main-cont1 > div .img-wrap {height: 133vw;}
    .main-cont2 .swiper {width: 70vw; height: 90vw;}
    .main-cont2 .scrolling-text {font-size: 40px;}
    .main-cont3 {padding: 100px 16px;}
    .main-cont3 p ,.simple-btn span{font-size: 14px;}
    .main-cont4 .swiper-slide{max-height: 502px; height: calc((100vw - 32px) * 1.3828);}
    .main-cont5 .swiper-slide .img-wrap{width: calc((100vw - 32px) / 2 - 20px / 2 ); height: calc((100vw - 32px) / 2 - 20px / 2 );}
    .main-cont6 {flex-direction: column; row-gap: 30px;}
    .main-cont6 .img-wrap {width: 100%; height: 78vw;}
}
@media screen and (max-width: 480px) {
}