@charset "utf-8";

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/* body main {min-height:500px;} */
/* body main {background:url(/images/main/mainbg.png)center /cover no-repeat;} */
body main {}

.main-visual {position:relative;height:100vh; }
.main-visual .cover {width:100%; height:100%; background:#000; opacity:.6; position:absolute; left:0; top:0; z-index:1;}
.main-visual .movie {width:100%; height:100%; position:absolute; left:0; top:0;}
.main-visual .movie video {width:100%; height:100%; object-fit:cover;}
.main-visual .txt {height:100%; display:flex; flex-direction:column; justify-content:center;  z-index:1; position:relative;}
.main-visual .txt p {padding:0 0 20px; color: var(--base1);font-size:var(--fs30);font-weight: 600;line-height: normal;}
.main-visual .txt h2 {color: #FFF;font-size:var(--fs80);font-weight: 800;line-height: normal;}

/* .main-category {position:relative; padding:370px 0 0;background:url(/images/main/main_category_bg.png)center /cover no-repeat;} */
.main-category {position:relative; padding:100px 0 0;background:#000;}
.main-category-wrap {padding:1000px 0 0;}
.main-category p.bg {
	padding:0 0 230px; color:var(--base1);text-align: center;font-size:var(--fs80);font-weight: 800; line-height:.8;
	width:100%; text-align:center;left:0; top:100px; position:sticky; 
}
/* .main-category p.bg[data-aos^=fade][data-aos^=fade].aos-animate { opacity:1 !important;} */
.main-category-list {display:flex; gap:50px; flex-wrap:wrap; position:relative;}
.main-category-item {padding:20px; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:calc((100% - 150px)/4);border-radius: 20px; background:center /cover no-repeat; box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.50); border:1px solid rgba(255, 255, 255, 0.15);position:relative; overflow:hidden;}
.main-category-item:before {width:100%; height:100%; background:rgba(0,0,0,.5); left:0; top:0; position:absolute; display:block; content:'';}
.main-category-item .tit {color: #FFF;text-align: center;font-size:var(--fs40);font-weight: 700;line-height: normal; position:relative;}
.main-category-item .txt {display:none; color: #FFF;text-align: center;font-size:var(--fs20);font-weight: 700;line-height: normal; position:relative;}
.main-category-item:hover {border-color:var(--base1);}
.main-category-item:hover .tit {color:var(--base1);}
.main-category-item:hover .txt {display:block;}

.main-category-item:nth-child(1) {background-image:url(/images/main/main_category_img_01.WEBP);}
.main-category-item:nth-child(2) {background-image:url(/images/main/main_category_img_02.webp);}
.main-category-item:nth-child(3) {background-image:url(/images/main/main_category_img_03.webp);}
.main-category-item:nth-child(4) {background-image:url(/images/main/main_category_img_04.WEBP);}
.main-category-item:nth-child(5) {background-image:url(/images/main/main_category_img_05.WEBP);}
.main-category-item:nth-child(6) {background-image:url(/images/main/main_category_img_06.WEBP?v=1);}
.main-category-item:nth-child(7) {background-image:url(/images/main/main_category_img_07.WEBP);}
.main-category-item:nth-child(8) {background-image:url(/images/main/main_category_img_08.webp);}

.main-products {position:relative; background:#000;}
.main-products .bg-text-img {opacity:.05; max-width:initial; position:absolute; left:0; top:320px; animation:scroll 10s linear infinite;}
.main-products-wrap {position:relative;}
.main-products h3 {padding:0 0 50px; color: #fff;text-align: center;font-size:var(--fs48);font-weight: 700; line-height: normal; letter-spacing: -1.44px;}
.main-products-con {display:flex; gap:80px;}
.main-products-img {width:700px; height:570px; border-radius: 20px;overflow:hidden;}
.main-products-img-item {width:100%; height:100%; background:#000;}
.main-products-img-item img {width:100%; height:100%; object-fit:scale-down;}

.main-products-list {width:calc(100% - 780px); display:flex; flex-direction:column; gap:30px;}
.main-products-item {display:flex; gap:20px;}
.main-products-item .img {width:90px; height:90px;}
.main-products-item .img img {}
.main-products-item .txt {width:calc(100% - 110px); gap:10px; display:flex; flex-direction:column; justify-content:center;}
.main-products-item .txt .tit {overflow: hidden;color:rgba(255,255,255,.8);text-overflow: ellipsis;font-size:var(--fs20);font-weight: 500;line-height: normal; transition:var(--ani); white-space:nowrap;}
.main-products-item .txt dl {display:flex; gap:10px; align-items:center;}
.main-products-item .txt dt {display:flex; font-size:var(--fs14); font-weight:500; padding:0 14px; line-height:31px; justify-content: center; align-items: center; gap: 10px;border-radius: 100px;background: #B5B5B5; color:#fff; transition:var(--ani);}
.main-products-item .txt dd {font-size:var(--fs14); color:#fff; opacity:.8; font-weight: 500;line-height: normal;}

.main-products-item.active .txt .tit {color:var(--base1);}
.main-products-item.active .txt dt {background:var(--base1);}



/* .main-intro {background:url(/images/main/main_intro_bg.WEBP)center /cover no-repeat; position:relative;} */
.main-intro {background:#000; position:relative;}
.main-intro .cover {width:100%; height:100%; background:#000; opacity:.8; position:absolute; left:0; top:0;}
.main-intro-wrap { position:relative;}
.main-intro h3 {color: #fff;text-align: center;font-size:var(--fs48);font-weight: 700;line-height: normal;letter-spacing: 1.44px;}
.main-intro p {color: #fff; opacity:.8; padding:10px 0 0; text-align: center;font-size:var(--fs18);line-height: normal;}

.main-intro-list {padding:50px 0 0; display:flex; gap:20px;}
.main-intro-item {display:flex; gap:20px; flex-wrap:wrap; height:400px; border-radius:20px; background:center /cover no-repeat; overflow:hidden; position:relative;}
.main-intro-item h4 {width:100%; min-height:20px; padding:50px; position:absolute; left:0; bottom:0; color: #FFF;font-size:var(--fs24);font-weight: 700;line-height: normal; background: linear-gradient(0deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.00) 100%); transition:var(--ani);}
.main-intro-item a {display: flex;width: calc((100% - 20px)/2); flex-direction: column;justify-content: center;align-items: center; gap: 20px; background:#141414; border-radius:20px;}
.main-intro-item span {width:100% ;height:52px; background:center no-repeat;}
.main-intro-item p {color: #fff;font-size:var(--fs20);font-weight: 500;line-height: normal;letter-spacing: -0.6px;}

.main-intro-item:hover h4 {min-height:100%;}

.main-intro-item:nth-child(1) {width:480px; background-image:url(/images/main/main_intro_item_img_01.png)}
.main-intro-item:nth-child(2) {width:480px; background-image:url(/images/main/main_intro_item_img_02.png)}

.main-intro-item a:nth-child(1) span {background-image:url(/images/main/icon_main_intro_01_on.svg)}
.main-intro-item a:nth-child(2) span {background-image:url(/images/main/icon_main_intro_02_on.svg)}
.main-intro-item a:nth-child(3) span {background-image:url(/images/main/icon_main_intro_03_on.svg)}
.main-intro-item a:nth-child(4) span {background-image:url(/images/main/icon_main_intro_04_on.svg)}

.main-intro-item a:hover {background:var(--base1);}
/* .main-intro-item a:hover p {color:#fff;} */
/* .main-intro-item a:nth-child(1):hover span {background-image:url(/images/main/icon_main_intro_01_on.svg)} */
/* .main-intro-item a:nth-child(2):hover span {background-image:url(/images/main/icon_main_intro_02_on.svg)} */
/* .main-intro-item a:nth-child(3):hover span {background-image:url(/images/main/icon_main_intro_03_on.svg)} */
/* .main-intro-item a:nth-child(4):hover span {background-image:url(/images/main/icon_main_intro_04_on.svg)} */




/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 1199px) {
	
	.main-visual {padding:28vw 0; height:auto;}
	.main-visual .txt {}
	
	.main-category {padding:10vw 0 0;}
	.main-category p.bg {padding:0 0 200px; top:7vw; font-size:180px  !important;}
	.main-category-wrap {padding:0;}
	.main-category-list {gap:20px;}
	.main-category-item {width:calc((100% - 60px)/4);}
	
	
	.main-products h3 {padding:0 0 40px}
	.main-products-con {gap:20px;}
	.main-products-img {width:calc(50% - 20px);}
	.main-products-list {width:50%; gap:20px;}
	
	
	.main-intro-list {flex-wrap:wrap;}
	.main-intro-item {width:calc((100% - 20px)/2) !important;}
	.main-intro-item h4 {padding:40px;}
	.main-intro-item:last-child {width:100% !important; height:auto;}
	.main-intro-item a {width:calc((100% - 60px)/4);aspect-ratio:1/1;}
	
	
	

	
	
	
	
}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	
	.main-visual {padding:180px 0;}
	
	.main-category {padding:60px 0 0;}
	.main-category p.bg {padding:0 0 50px; top:50px; font-size:60px  !important;}
	.main-category-list {gap:10px;}
	.main-category-item {width:calc((100% - 10px)/2);}
	
	.main-products h3 {padding:0 0 30px}
	.main-products-img {display:none;}
	.main-products-list {width:100%; gap:10px;}
	
	
	.main-intro-list {gap:10px; flex-direction:column;}
	.main-intro-item {gap:10px; width:100% !important;}
	.main-intro-item h4 {padding:30px;}
	.main-intro-item:nth-child(1),
	.main-intro-item:nth-child(2) {height:45vw; min-height:250px;}
	.main-intro-item:last-child {}
	.main-intro-item a {gap:10px; width:calc((100% - 10px)/2); height:20vw; min-height:120px; aspect-ratio:auto;}
	.main-intro-item span {height:44px; background-size:auto 100%;}
	
	
	
	
	
	

	
	
	
	
}