@charset "utf-8";

main {}
/* main .cover {width:100%; height:100%; background:#000; left:0; top:0; position:absolute; opacity:.7;} */
main .moreBtn {padding: 30px 80px;color: #FFF;font-weight: 600;line-height: 100%;background: rgba(255, 255, 255, 0.10); display:inline-block;}
main .moreBtn:hover {background:#fff; color:#000;}

.mainTitType1 {text-align:center;}
.mainTitType1 h3 {padding:0 0 20px; margin:0 0 20px; color:var(--base2); font-size:var(--fs40); font-weight:700; line-height:120%; position:relative;}
.mainTitType1 h3:after {width:50px; height:1px; background:#fff; left:50%; bottom:0; position:absolute; transform:translateX(-50%); display:block; content:'';}
.mainTitType1 p {color:var(--base4); line-height:120%;}

.txt-slide .head-slide {width:350px; display:flex; gap:10px; height:40px; overflow:hidden;}
.txt-slide .head-slide.notice {}
.txt-slide .head-slide.review {}
.txt-slide .head-slide .tit {width:80px; height:40px; display: flex; justify-content:center; align-items:center; border-radius: 100px;background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(5px); color:#fff; font-size:var(--fs15);}
.txt-slide .head-slide .bx-wrapper {width:calc(100% - 140px); box-shadow: none !important;border: 0 !important;margin: 0 !important;vertical-align: middle;background: none;}
.txt-slide .head-slide .txt {width:;}
.txt-slide .head-slide .txt a {line-height:40px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block;overflow: hidden;color: rgba(255, 255, 255, 0.70);font-weight: 600;}
.txt-slide .head-slide .txt .bx-wrapper {border:0;}

.main-visual .txt-slide {display:flex; padding:20px;gap:100px;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.20);background: rgba(0, 0, 0, 0.30);backdrop-filter: blur(15px); position:absolute; top:110px; z-index:99; max-width:1620px; left:50%; transform:translateX(-50%); width:100%;}
.main-visual .head-slide {width:calc((100% - 100px)/2);}
.main-visual .head-slide .plus {width:40px; height:40px; background:url(/images/common/icon_plus.svg)50% no-repeat; border:1px solid rgba(255, 255, 255, 0.50); border-radius:5px; }

.main-visual {width:100%; height:100vh; position:relative;}
.main-visual img {width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0;}
.main-visual-txt {height:100%; display:flex; flex-direction:column; justify-content:center; position:relative;text-align: center; padding-top:120px;}
.main-visual-txt h2 {color: #FFF; font-size:clamp(24px, 5.185vw + 7.41px, 80px); font-weight: 400;line-height:1; letter-spacing: 8px;}
.main-visual-txt h2 span {display:block;}
.main-visual-txt h3 {padding:20px 0 100px; color: var(--base4);font-size:clamp(16px, 1.481vw + 11.26px, 32px); font-weight: 400;line-height:1.4;}
.main-visual-txt h3+p {color: var(--base4); font-size:clamp(12px, 0.926vw + 9.04px, 22px); line-height:1.6;}

.main-item {padding:200px 0; background:url(/images/main/img_main_02.WEBP)center /cover no-repeat;}
.main-item-tit {}
.main-item-txt {text-align:center; color:var(--base4);}
.main-item .productSwiper {height:400px;}
.main-item .productSwiper .swiper-wrapper {height:100%;}
.main-item .productSwiper .swiper-slide { background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(5px);position:relative; transition:var(--ani); height:100%;}
.main-item .productSwiper .swiper-slide .img {padding:40px; aspect-ratio:1/1; opacity:.4;transition:var(--ani);}
.main-item .productSwiper .swiper-slide .img img {width:100%; height:100%; object-fit:scale-down;}
.main-item .productSwiper .swiper-slide .menu {position:relative;}
.main-item .productSwiper .swiper-slide .menu .heart {}
.main-item .productSwiper .swiper-slide .menu .cart {}
.main-item .productSwiper .swiper-slide .txt {padding:0 30px 40px;}
.main-item .productSwiper .swiper-slide .txt p {}
.main-item .productSwiper .swiper-slide .txt .sub {color: var(--base4);font-size: var(--fs14);font-weight: 700;line-height: 100%;transition:var(--ani);}
.main-item .productSwiper .swiper-slide .txt .tit {color: var(--base4);font-weight: 500;line-height: 120%; padding:5px 0 20px;transition:var(--ani); font-size: var(--fs20);}
.main-item .productSwiper .swiper-slide .txt .price {color: #FFF;font-weight: 300;line-height: 100%; letter-spacing: -0.72px;transition:var(--ani);}
.main-item .productSwiper .swiper-slide .link {z-index:1; width:100%; height:100%; position:absolute; left:0; top:0;}

.main-item .productSwiper .swiper-slide:hover { background:#fff;}
.main-item .productSwiper .swiper-slide:hover .img { opacity:1;}
.main-item .productSwiper .swiper-slide:hover .txt {}
.main-item .productSwiper .swiper-slide:hover .txt .sub {color:#000;}
.main-item .productSwiper .swiper-slide:hover .txt .tit {color:#000;}
.main-item .productSwiper .swiper-slide:hover .txt .price {color:#000;}


.main-intro {background:#000 url(/images/main/img_main_03.WEBP)50% -200px /cover no-repeat;}

.main-about {}
.main-about h3 {padding:0 0 50px; margin:0 0 50px; color: var(--base2);font-size: var(--fs150);font-weight: 700;line-height: 100%; position:relative;}
.main-about h3:after {width:120px; height:1px; background: rgba(255, 255, 255, 0.30); left:0; bottom:0; position:absolute; display:block; content:'';}
.main-about p {color:var(--base4);}
.main-about a {}

.main-info {padding:200px 0;}
.main-info-tit {}
.main-info-list {display:flex; gap:20px;}
.main-info-list-item {padding:70px; width:calc((100% - 40px)/3); position:relative; background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(5px);}
.main-info-list-item .img {width:100%; height:100%; left:0; top:0; position:absolute;transition:var(--ani); z-index:1;}
.main-info-list-item .img img {width:100%; height:100%; object-fit:cover;}
.main-info-list-item:hover .img {opacity:.2; z-index:0;}
.main-info-list-item .txt {display:flex; flex-direction:column; justify-content:center; position:relative; opacity:0;transition:var(--ani);}
.main-info-list-item:hover .txt {opacity:1}
.main-info-list-item .txt img {right:0; top:50%; position:absolute; transform:translateY(-50%);}
.main-info-list-item .txt h4 {color: #FFF;font-size:var(--fs40);font-weight: 700;line-height: 120%; position:relative;}
.main-info-list-item .txt h5 {padding:10px 0 50px; color: #FFF;font-size:var(--fs18);font-weight: 600;line-height: 120%;}
.main-info-list-item .txt p {
	color: rgba(255, 255, 255, 0.70);
	font-weight: 500; line-height: 160%;
	text-overflow: ellipsis; overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.main-info-ps {display:block; position:relative;}
/* .main-info-ps img {width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0;} */
.main-info-ps img {width:100%; height:100%; object-fit:cover;}
.main-info-ps p {
	padding:20px; color:#fff; font-size: var(--fs18); font-weight: 700; background:rgba(0,0,0,.5);
	display:flex; height:100%; align-items:center; justify-content:center; text-align:center; position:relative;
}

.main-products-banner {
	margin:20px 0 0; padding:0 15px; width:100%; height:50px; display:block;
	color: #FFF !important; text-align: center;font-size:var(--fs18);font-weight: 700;line-height: 100%;
	border-radius: 10px;background:url(/images/main/product_banner_audio6.webp)center / cover no-repeat; 
	border: 5px solid transparent; /* 테두리 공간 확보 */
	border-radius: 20px; /* 모서리 둥글게 */
  
	/* 두 개의 배경을 겹침: 안쪽 배경색 + 바깥쪽 그라디언트 */
	/* 위아래 5px, 좌우 0 */
	border: 1px solid transparent;
    border-radius: 20px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: 0;
    border-right: 0;
    border-image-source: linear-gradient(to right, #e5e5e5, rgb(155 155 155 / 20%));
	border-image-source: linear-gradient(to right, rgb(238 238 238 / 10%), #757575, rgb(238 238 238 / 10%));
    border-image-slice: 1;
}



/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 1199px) {
	
	main .moreBtn {padding:25px 70px;}
	
	.main-visual {height:auto; padding:200px 30px 50px;}
	.main-visual-txt {height:auto; }
	.main-visual-txt h2 {letter-spacing:0; line-height:1.2;}	
	.main-visual-txt h3 {padding:2vh 0;}
	
	.main-visual .head-slide {width:100%;}
	.main-visual .txt-slide {
		 width: calc(100% - 60px); height:auto; display:flex; gap:10px;
		padding:10px;  flex-direction:column; background:none; top:80px; border:none;
		backdrop-filter:none; padding:0;
	}
	.txt-slide .head-slide.notice {border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.20); backdrop-filter: blur(15px);}
	.txt-slide .head-slide.review {border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.20); backdrop-filter: blur(15px);}
	.main-visual .txt-slide .tit {width:55px; height:30px; display: flex; justify-content:center; align-items:center; border-radius:10px;background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(5px); color:#fff; font-size:var(--fs15);}
	.main-visual .txt-slide .txt a {line-height:40px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block;overflow: hidden;color: rgba(255, 255, 255, 0.70);font-weight: 600;}
	.main-visual .head-slide .plus {width:30px; height:30px;}
	
	.main-visual .txt-slide .bx-wrapper {width:calc(100% - 105px); box-shadow: none !important;border: 0 !important;margin: 0 !important;vertical-align: middle;background: none;}
	.txt-slide .head-slide {height:50px; padding:10px; align-items:center;}
	.txt-slide .bx-viewport {}
	
	.main-item {padding:120px 0;}
	.main-item .productSwiper .swiper-slide-active { background:#fff;}
	.main-item .productSwiper .swiper-slide-active .img { opacity:1;}
	.main-item .productSwiper .swiper-slide-active .txt {}
	.main-item .productSwiper .swiper-slide-active .txt .sub {color:#000;}
	.main-item .productSwiper .swiper-slide-active .txt .tit {color:#000;}
	.main-item .productSwiper .swiper-slide-active .txt .price {color:#000;}
	.main-item .productSwiper {height:auto;}
	.main-item .productSwiper .swiper-wrapper {height:auto;}
	
	.main-about h3 {padding:0 0 40px; margin:0 0 40px;}
	.main-about h3:after {width:100px;}
	
	.main-info {padding:120px 0;}
	.main-info-list {flex-wrap:wrap;}
	.main-info-list-item {padding:0; width:calc((100% - 20px)/2);}
	.main-info-list-item .img {height:auto; aspect-ratio: 1.5 / 1; position:static;}
	.main-info-list-item .txt {padding:30px; opacity:1; border-top:1px solid #444;}
	.main-info-list-item .txt h5 {padding:10px 0 40px;}
	
	.main-info-list-item .img {position:static;}
	.main-info-list-item:hover .img {opacity:1;}
	
	
	
	
}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	main .moreBtn {padding:20px 60px;}
	
	.main-visual {padding:100px 20px 0;}
	.main-visual-txt {}
	
	
	.main-item {padding:70px 0;}
	.main-item .productSwiper .swiper-slide .img {padding:30px;}
	.main-item .productSwiper .swiper-slide .txt {padding:0 30px 30px;}
	.main-visual img {object-position:left;}
		
	
	.main-about h3 {padding:0 0 30px; margin:0 0 30px;}
	.main-about h3:after {width:80px;}
	
	.main-info {padding:70px 0;}
	.main-info-list {flex-direction:column; gap:10px; align-items:center;}
	.main-info-list-item {width:400px; max-width:100%;}
	.main-info-list-item .txt img {width:50px;}
	.main-info-list-item .txt h5 {padding:10px 0 30px;}
	
	.main-products-banner {}
	
	
	.main-products-banner {height: auto;
        border-radius: 10px;
        background: url(/images/main/product_banner_audio6_mob.webp) center / cover no-repeat;
        aspect-ratio: 4 / 1;
		object-fit:cover;
        max-width: 500px;
        margin: 0 auto;
		margin-top:30px;
}
	
	
	
}

/* ************************ 모바일 ************************ */
@media (max-width: 500px) { 

.main-item {padding:50px 0 70px;}
}

