@charset "utf-8";

@keyframes scroll {
  0%   { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, 30px); }
}
/* body main {min-height:500px;} */
/* body main {background:url(/images/main/mainbg.png)center /cover no-repeat;} */
body main {}
body main .plusBtn {color: #FFF;font-size: var(--fs20);font-weight: 700;line-height: 100%;display:inline-block;padding: 30px 70px; border: 1px solid rgba(255, 255, 255, 0.30);background: rgba(0, 0, 0, 0.20);backdrop-filter: blur(5px);}
body main .plusBtn:hover {background-color:var(--base1);}
/* body main .cover {left:0;top:0; width:100%; height:100%; position:absolute; background: #212329;opacity: .8;} */
body main .inner {position:relative; z-index:1}
body main .slideArrow {z-index:1;left:50%; bottom:100px; position:absolute; transition:all .3s;transform: translateX(-50%); }

.main-visual {position:relative;height:100vh;text-align: center; }
.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 {padding:6vw 0 0;height: 100%;display: flex;flex-direction: column;justify-content: center;z-index: 1; position: relative;}
.main-visual .txt h2 {color: var(--base1);text-align: center;font-size:var(--fs90);font-weight: 700;line-height: 100%; }
.main-visual .txt p {color: rgba(255, 255, 255, 0.70);font-size:var(--fs18);}
.main-visual .txt p b {padding:70px 0 20px;color: #FFF;font-size:var(--fs24);font-weight: 700;line-height: normal; display:block;}


.main-product {padding:7vw 0 10vw 5vw;background:rgba(0,0,0,.5); position:relative;}
.main-product .inner {display:flex; width:100%; justify-content:space-between;}
.main-product .bg {width:100%; height:100%; object-fit:cover; mix-blend-mode: overlay;position:absolute; left:0; top:0; }
.main-product-tit {width:calc(100% - (60vw + 40px)); min-height:450px; padding:45px 0 0 45px; position:relative;}
.main-product-tit:before {width:45px; aspect-ratio:1/1; border-width:10px 0 0 10px; border-style:solid; border-color:#fff; left:0; top:0; position:absolute; display:block; content:'';}
.main-product-tit h3 {color: #FFF;font-size: var(--fs48);font-weight: 700;line-height: 120%;}
.main-product-tit p {padding:30px 0 0 ; color:#fff;}
.main-product-tit .plusBtn {position:absolute; bottom:0;}

.main-product-list {width:calc(60vw + 40px); overflow:hidden; flex-grow:1;}
.main-product-list .swiper-slide {opacity:.3; transition:var(--ani);}
.main-product-list .swiper-wrapper {}

.main-product-list-item {width:20vw; background:#fff; display:block; position:relative; }
.main-product-list-item .best {
	border-radius: 5px; background: #000; color: #FFF;font-size:var(--fs12);font-weight: 700;line-height: 100%;
	position:absolute; right:20px; top:20px; width:62px; height:40px; line-height:40px; text-align:center;
}	
.main-product-list-item .best b {font-size:var(--fs20);}
.main-product-list-item .img {padding:4vw; background:#F8F8FB; aspect-ratio:1/1;}
.main-product-list-item .img img {width:100%; height:100%; object-fit:scale-down;}
.main-product-list-item .txt {padding:50px; border-top:3px solid transparent; transition:var(--ani);}
.main-product-list-item .txt .sub { font-size:var(--fs14);line-height: 100%; }
.main-product-list-item .txt .tit {padding:10px 0 30px; color:#000;font-size: var(--fs24);line-height: 100%; transition:var(--ani); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.main-product-list-item .txt .price {color: #000;font-size:var(--fs20);font-weight: 700;line-height: 100%;}
.main-product-list-item:hover .txt {border-color:var(--base1);}
.main-product-list-item:hover .txt .tit {color: var(--base1);}
.main-product-list .swiper-button-prev,
.main-product-list .swiper-button-next {width:80px; height:80px; background:#fff center no-repeat;}
.main-product-list .swiper-button-prev {background-image:url(/images/main/icon_slide_prev.svg); left:auto; right:150px; margin-top:-45px;}
.main-product-list .swiper-button-prev:hover {background-image:url(/images/main/icon_slide_prev_on.svg);}
.main-product-list .swiper-button-next {background-image:url(/images/main/icon_slide_next.svg); right:150px; margin-top:45px;}
.main-product-list .swiper-button-next:hover {background-image:url(/images/main/icon_slide_next_on.svg);}
.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-next {opacity:1;}

.main-company {padding:15vw 5vw 15vw 0; background:rgba(0,0,0,.7); position:relative;}
.main-company .inner {display:flex; gap:200px;  width:100%; justify-content:space-between;}
.main-company .bg {width:100%; height:100%; object-fit:cover; mix-blend-mode: overlay;position:absolute; left:0; top:0; }
.main-company-tit {}
.main-company-tit p {color:var(--base1);font-size:11vw;font-weight: 900;line-height: 80%;text-transform: uppercase; white-space:nowrap;}
.main-company-con {align-self:center; width:400px; padding-right:100px; border-right:10px solid #fff;}
.main-company-con .tit {color:#fff;color: #FFF;font-size:var(--fs48);font-weight: 700;line-height: 120%;}
.main-company-con .txt {padding:30px 0 50px;color:#fff;}
.main-company-con .txt b {}
.main-company-con .plusBtn {}

.main-board {padding:100px 30px; display:flex; justify-content:center;}
.main-board>div {display:flex; gap:40px; flex-direction:column; justify-content:space-between;}
.main-board>div+div {padding-left:5.8vw; margin-left:5.8vw; border-width:0 0 0 1px; border-style:solid; border-color:#E0E0E0;}
.main-board>div .tit {color: #000;font-size: var(--fs32);font-weight: 700;line-height: 100%; position:relative;}

.main-notice {width:500px;}
.main-notice .tit {}
.main-notice .tit .plus {
	display:flex; width:40px;aspect-ratio:1/1;
	border: 1px solid #E5E5E5; background:url(/images/common/icon_plus.svg)center no-repeat;
	right:0; top:0; position:absolute;
}
.main-notice .tit .plus:hover {background-color:#f7f7f7;}

.main-notice-list {flex-grow:1; gap:20px; display:flex; flex-direction:column;}
.main-notice-list a {color: #000; line-height: 100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.main-menu {width:510px;}
.main-menu .tit {}
.main-menu p {}
.main-menu-list {display:flex;justify-content:space-between;}
.main-menu-list a {
	display:flex; gap:5px; flex-direction:column; align-items:center; 
	color: #000; font-weight: 500; letter-spacing: -0.48px; position:relative;
}
.main-menu-list .img {}
.main-menu-list .img img {}
.main-menu-list .txt {}

.main-contact {}
.main-contact .tit {}
.main-contact p {}
.main-contact div {}
.main-contact div a {display:block;}
.main-contact div a.tel {margin:0 0 10px; color: var(--base1); font-size:var(--fs36);font-weight: 700;line-height: 100%;}
.main-contact div a.mail {padding-left:40px; height:30px; display:flex; align-items:center; line-height:1.2; position:relative;}
.main-contact div a.mail:before {width:30px; aspect-ratio: 1/1; background:url(/images/main/icon_mail.svg)center no-repeat; left:0; top:0; position:absolute; display:block; content:'';}


/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 1199px) {
	
	body main .plusBtn {padding:25px 60px;}
	
	.main-visual {padding:28vw 30px; height:auto;}
	.main-visual .txt {padding:0; height:auto;} 
	.main-visual .txt p b {padding:50px 0 10px;}
	
	.main-product .inner {flex-direction:column; gap:50px;}
	
	
	.main-product-tit {width:100%; min-height:auto; padding:40px 30px 0 40px;}
	.main-product-tit:before {width:40px; border-width:7px 0 0 7px;}
	.main-product-tit .plusBtn {position:static;}
	.main-product-tit p {padding:25px 0 30px;}
	
	.main-product-list {position:relative; width:100%;}
	.main-product-list .swiper-slide {width:calc((100% - 40px)/3);}
	.main-product-list-item {width:100%}
	.main-product-list-item .txt {padding:40px;}
	.main-product-list .swiper-button-prev,
	.main-product-list .swiper-button-next {width:60px; height:60px; right:30px;}
	.main-product-list .swiper-button-prev {margin-top:-32px;}
	.main-product-list .swiper-button-next {margin-top:32px;}
	
	.main-company {padding:15vw 5vw;}
	.main-company .inner {flex-direction:column; gap:50px;}
	.main-company-tit p {}
	.main-company-con {width:100%; padding-right:50px; border-width:7px;}
	
	
	.main-board {padding:70px 30px; flex-direction:column;}
	.main-board>div {width:100%; gap:20px;}
	.main-board>div+div {padding:4vw 0 0; margin:4vw 0 0; border-width:1px 0 0 0;}
	
	.main-menu-list {width:500px; max-width:100%;}
}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	body main .plusBtn {padding:20px 50px;}
	body main .slideArrow {bottom:50px; height:70px }
	
	.main-visual {padding:180px 20px;}
	.main-visual .txt p b {padding:30px 0 5px;}
	
	.main-product {padding:7vw 20px 10vw 5vw;}
	.main-product .inner {gap:30px;}
	.main-product-tit { padding:20px 0 0 20px;}
	.main-product-tit:before {width:30px; border-width:5px 0 0 5px;}
	.main-product-tit p {padding:20px 0 25px;}
	
	.main-product-list {}
	.main-product-list .swiper-button-prev,
	.main-product-list .swiper-button-next {display:none; width:40px; height:40px; right:20px; background-size:100%; }
	.main-product-list .swiper-button-prev {margin-top:-21px;}
	.main-product-list .swiper-button-next {margin-top:21px;}
	.main-product-list-item .txt {padding:30px;}
	.main-product-list-item .txt .tit {padding:10px 0 20px;}
	
	.swiper-slide.swiper-slide-next {opacity:.3;}
	.swiper-slide.swiper-slide-active {opacity:1;}

	.main-board>div {}
	.main-board>div+div {padding:30px 0 0; margin:30px 0 0;}
	
	.main-company-con {border-width:5px;}

	.main-board {padding:50px 20px;}
	
	
	
}