@charset "utf-8";

/* ===================================================== */
/* MAIN-COMMON */
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}
.section {overflow: hidden;}
.sec-header {position: relative;}


@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* MAIN-COMMON */
/* ===================================================== */



/* ===================================================== */
/*Button : S*/
.body-main .btn-wrap {display: flex; gap:1rem; align-items: center; }
.mbtn {display: flex; height:5rem; min-width:19rem; align-items: center; padding:0 6.5rem 0 2.5rem; border:1px solid #aaa; border-radius: 3rem; font-size:max(1.6rem, 13px); color:#222; font-weight: 700; transition: all 0.5s ease-in-out; position: relative; white-space: nowrap;}
.mbtn::after {content:''; display: block; width:3.6rem; height:2rem; background-color: #222; mask: url('../images/main/ico_arrow01.svg') no-repeat center / contain; -webkit-mask: url('../images/main/ico_arrow01.svg') no-repeat center / contain; position: absolute; top:50%; right:2rem; transform: translate(0, -50%); transition: all 0.3s ease-in-out;}

.mbtn.type-2 {color:#fff; background-color: #222;border-color: #222;}
.mbtn.type-2::after {background-color: #fff;}

.mbtn.type-3 {color:#fff; background-color: transparent;}
.mbtn.type-3::after {background-color: #fff;}

.mbtn:hover {color:#fff; background-color: var(--color-main); border-color: var(--color-main);}
.mbtn:hover::after {background-color: #fff;  transform: translate(5px, -50%);}
/*Button : E*/
/* ===================================================== */

@media (max-width: 480px){
	.mbtn {min-width:60%;}
}








/* ===================================================== */
/* MAIN-VISUAL : S */

.mainvisual {--control-bottom:6rem;  --control-pos : calc(var(--control-top) - var(--control-bottom) - 4rem); --vsual-txt-w : 36rem;}
.mainvisual-wrap {position: relative;}
.mainvisual-wrap {overflow: hidden; transition:all 0.5s linear 0.5s; position: relative;}

/*.is-fix .mainvisual-wrap.is-active {margin:0; border-radius: 0;}*/


.mainvisual-slide {height:100vh; height: calc(var(--vh, 1vh) * 100); min-height: 65rem; max-height:108rem; background-color: #000; position: relative; transition: height 0.3s linear;}


.mainvisual-slide .mainvisual-list {height: 100%;}
.mainvisual-slide .item {position: relative; height:100%; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.mainvisual-slide .item .bg {height:100%; width:100%; position: absolute; z-index: -1;}
.mainvisual-slide .item .bg::after {content:''; display: block; width:100%; height:100%; position: absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.2); z-index: 2;}
.mainvisual-slide .item .bg span{display: block; width: 100%;height: 100%; background:no-repeat center/cover; transform: scale(1); transition: all 10s linear;}
.mainvisual-slide .item.is-active .bg span {transform: scale(1.2);}

.mainvisual-slide .item.nth-1 .bg span {background-image: url('../images/main/main_visual01.jpg');}
.mainvisual-slide .item.nth-2 .bg span {background-image: url('../images/main/main_visual02.jpg');}
.mainvisual-slide .item.nth-3 .bg span {background-image: url('../images/main/main_visual03.jpg');}
.mainvisual-slide .item.nth-4 .bg span {background-image: url('../images/main/main_visual04.jpg');}
.main__visual-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.mainvisual-slide .swiper-slide .bg.vod {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	transition: all 10s ease-in-out;
	
}



.mainvisual-txt {position: absolute; bottom:var(--control-bottom); width:100%; z-index: 2;}
.mainvisual-txt .item {height: auto;}

.mainvisual-txt .copy-box {display:flex; justify-content: space-between; align-items: flex-end; width: 100%; padding:0 var(--outer-padding); color:#fff; height: 100%;}
.mainvisual-txt .copy-box .tit {font-size:13rem; font-weight: 100; letter-spacing: -0.05em; height:100%; display: flex; align-items: flex-end;}
.mainvisual-txt .copy-box .txt {font-size:2rem; font-weight: 300; height:100%; display: flex; align-items: flex-end; width:var(--vsual-txt-w); padding-bottom:2rem;}



.mainvisual-txt .item.swiper-slide-active .copy-box .tit{animation: clip-right 1s ease-in-out 0.5s both; }
.mainvisual-txt .item.swiper-slide-active .copy-box .txt{animation: fadeInRight 1s ease-in-out 1s both; }



@media (max-width: 1800px){
	.mainvisual-txt .copy-box .tit {font-size:11rem;letter-spacing: -0.025em;}
}

@media (max-width: 1600px){
	.mainvisual-txt .copy-box .tit {font-size:10rem;}
}


@media (max-width: 1440px){
	.mainvisual-txt .copy-box .tit {font-size:8.6rem;}
}

@media (max-width: 1200px){
	.mainvisual-txt .copy-box {display: block; height: auto;  padding:0 calc(var(--outer-padding) * 2);}
	.mainvisual-txt .copy-box .tit {display: block;}
	.mainvisual-txt .copy-box .txt {display: block; width:50%; margin-top:2rem; padding:0;}
	.mainvisual-txt .copy-box .txt br {display: none;}

	.mainvisual-txt .item.swiper-slide-active .copy-box .txt{animation-name: fade-up; }
}

@media (max-width: 1024px){
	.mainvisual-txt .copy-box .tit {font-size:7rem;letter-spacing: 0em;}
}

@media (max-width: 768px){
	.mainvisual-slide .item .bg::after {background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.1) 50%) no-repeat left bottom;}
	.mainvisual {--control-bottom:12rem;}
	.mainvisual-txt .copy-box {text-align: center;}
	.mainvisual-txt .copy-box .tit {font-size:6rem;}
	.mainvisual-txt .copy-box .txt {width:70%; margin:2rem auto 0; padding:0;}
}
@media (max-width: 640px){
	.mainvisual-txt .copy-box .txt {width:100%;}
}

@media (max-width: 480px){
	.mainvisual-txt .copy-box { padding:0 calc(var(--outer-padding) * 2);}
	
	.mainvisual-txt .copy-box .tit br {display: none;}
}


.mainvisual-slide .slide-control {position: absolute; top:var(--control-pos); left:var(--outer-padding); z-index: 3; transform: translate(0, -100%); transition: all 0.5s ease-in-out;}
.mainvisual-slide .slide-control-wrap {display: flex;  gap:1rem; align-items: center;}


.mainvisual-slide .slide-control-wrap .paging {width:auto; height:auto; display: flex; align-items: center; gap:0rem;}
.mainvisual-slide .slide-control-wrap .paging .swiper-pagination-bullet {width:8rem; height:1px; margin:0; border-radius: 0;  opacity: 1; background-color:var(--color-white-a3); transition: all 0.5s ease-in-out; position: relative;}
.mainvisual-slide .slide-control-wrap .paging .swiper-pagination-bullet::before {content:''; display: block; width:0; height:100%; background-color: #fff; position: absolute; top:0; left:0; transition: all 0.1s linear;}
.mainvisual-slide .slide-control-wrap .paging .swiper-pagination-bullet-active::before {width:100%;transition: all 1s linear;}

.mainvisual-slide .slide-control-wrap .paging .swiper-pagination-bullet:hover {background-color: var(--color-sub);}



.slide-control-wrap .btn-wrap {display: flex; align-items: center;}
.slide-control-wrap .slide-btn {font-size:0; width:4rem; height:4rem; overflow: hidden; cursor:pointer; text-align: center; display: flex; align-items: center; justify-content: center;}
.slide-control-wrap .slide-btn span {display: inline-block; width:1.2rem; height:2.2rem; background:#fff; mask: url('../images/main/ico_slide-arrow_b.svg') no-repeat center / contain; -webkit-mask: url('../images/main/ico_slide-arrow_b.svg') no-repeat center / contain; transition: all 0.3s ease-in-out;}
.slide-control-wrap .slide-btn.next {transform: rotate(180deg);}

.slide-control-wrap .slide-btn:hover span {transform: translateX(-5px); background-color: var(--color-sub);}




.mainvisual-slide .slide-control .progress {display: flex; align-items: center; justify-content: center; position: relative; width: 5.4rem; height: 5.4rem; flex-shrink: 0;}
.mainvisual-slide .slide-control .progress svg {z-index: 2; width: 100%; height: 100%; stroke-width: 1px; stroke: #fff; fill: none; stroke-dashoffset: calc(166.5 * (1 - var(--progress))); stroke-dasharray: 166.5; transform: rotate(-90deg); }
.mainvisual-slide .slide-control .progress .bg { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
}



.slide-control-wrap .play {position: absolute; top:0%; left:0%; z-index: 2; display: flex; align-items: center; justify-content: center; width:100%; height:100%; cursor: pointer; font-size: 0; text-indent: -99999px; overflow: hidden;}

.slide-control-wrap .play span {display: inline-block; width: 0; height: 0; transition: all 0.5s ease-in-out; border: solid transparent; border-width: 7px 0 7px 12px; margin-left:1px;}
.slide-control-wrap .play span::before,
.slide-control-wrap .play span::after {content:''; display: block; width:1px; height:18px; position: absolute; top:50%; left:50%;  transition: all 0.5s ease-in-out; background-color: #fff;}
.slide-control-wrap .play span::before {transform: translate(-0.5rem, -50%);}
.slide-control-wrap .play span::after {transform: translate(0.3rem, -50%);}

.slide-control-wrap .play.on span { border-color: transparent transparent transparent #fff;}

.slide-control-wrap .play.on span::before,
.slide-control-wrap .play.on span::after {background-color: transparent; transform: translate(-50%, -50%);}






@media (max-width: 1200px){
	.mainvisual-slide .slide-control {left:calc(var(--outer-padding) * 2);}
}


@media (max-width: 1024px){
}

@media (max-width: 768px){
	.mainvisual-slide .slide-control {left:50%; top:auto; bottom:2rem; transform: translate(-50%, 0%);}

	.mainvisual-slide .slide-control-wrap .paging .swiper-pagination-bullet {width:4rem;}
	.slide-control-wrap .slide-btn {width:3rem; height:3rem;}
}

@media (max-width: 640px){
}









/* 스크롤 다운 */
.visual-scroll { display: flex; justify-content: center; width:3rem; height:26rem; position: absolute; right: calc(var(--outer-padding) + var(--vsual-txt-w) + 3rem); bottom:calc(var(--control-bottom) + 2rem); transition: .3s; z-index: 1; animation: fadeIn 1s ease-in-out 1s both;}

.visual-scroll-line {width:2px; height:100%; position: relative;}
.visual-scroll-line::after {content: ''; display: block; width:2rem; height:2rem; border:solid var(--color-white-a3); border-width: 0 2px 2px 0; position:absolute; bottom:0; left:50%; transform:translate(-50%, 0) rotate(45deg); transition: all 0.3s ease-in-out;}

.visual-scroll-line em{display: block; overflow: hidden; position: relative; height:100%; background-color: var(--color-white-a2); } 
.visual-scroll-line em::before { position: absolute; top: 0; left: 0; width: 100%; height: 30%; background-color: #fff; content: ''; animation: scroll-line 2.5s linear infinite; } 
@keyframes scroll-line { 
	0% { transform: translateY(-110%); } 
	10% { transform: translateY(-60%); } 
	60% { transform: translateY(260%); } 
	70% { transform: translateY(360%); } 
	100% { transform: translateY(360%); } 
}



.scroll-btn {position: absolute; top:0; left:0; width:100%; height:100%; z-index: 1; opacity: 0;}
.scroll-btn a {display: block; height:100%; font-size:0; text-indent: -8888px; }

@media (max-width: 1200px){
	.visual-scroll {right:var(--outer-padding); height:20rem;}
}

@media (max-width: 768px){
	.visual-scroll {bottom:3rem; right:1rem; height:15rem;}
}

/* MAIN-VISUAL : E */
/* ===================================================== */








/* ===================================================== */
/* SECTION 2 R&D : S */

.main__rnd { padding:15rem 0 18rem;}
.main__rnd-wrap {margin:0 var(--outer-padding);}

.main__rnd .sec-header {display: flex; align-items: flex-end; justify-content: space-between; gap:3rem; margin-bottom:10rem;}
.main__rnd .sec-header .tit {font-size:6rem; font-weight: 300; color:#222; letter-spacing: -0.025em; line-height: 1.3;}
.main__rnd .sec-header .tit strong {color:var(--color-main); font-weight: 600;}
.main__rnd .sec-header .btn-wrap {flex-shrink: 0; padding-bottom:1rem;}

.main__rnd-list {position: relative; overflow: hidden;}

.main__rnd-list .item { overflow: hidden; height:auto;}
.main__rnd-list .item-box {width:100%;  height:100%; position: relative;  display: flex; gap:6rem; }

.main__rnd-list .swiper-slide-active .item-box::before {transform:scale(1.2)}

.main__rnd-list .image {background-color: #000; width:50%; overflow: hidden; flex-shrink: 0;}
.main__rnd-list .image img{width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block;}

.main__rnd-list .swiper-slide-active .image {animation: zoomIn 0.5s linear;}

.main__rnd-list .desc {padding-bottom:5rem;}
.main__rnd-list .desc-top {padding-bottom:4rem; border-bottom:1px solid #ccc;}
.main__rnd-list .desc-top .tit {font-size: max(1.6rem, 13px); color:#e72511; font-weight: 900;}
.main__rnd-list .desc-top .txt  {font-size: max(2rem, 16px); color:#222; line-height: 1.3; margin-top:2rem;}


.main__rnd-list .desc-item {padding-top:4rem;}
.main__rnd-list .desc-item .tit {font-size:3rem; color:#222; font-weight: 500;}
.main__rnd-list .desc-item .tit strong {font-weight: 900;}

.main__rnd-list .item.nth-1 .desc-item .tit strong {color:rgb(39, 147, 147);}
.main__rnd-list .item.nth-2 .desc-item .tit strong {color:rgb(48, 70, 98);}
.main__rnd-list .item.nth-3 .desc-item .tit strong {color:rgb(195, 53, 130);}
.main__rnd-list .item.nth-4 .desc-item .tit strong {color:rgb(63, 129, 209);}
.main__rnd-list .item.nth-5 .desc-item .tit strong {color:rgb(152, 209, 50);}

.main__rnd-list .desc-item .txt  {font-size: max(2rem, 16px); color:#222; line-height: 1.3; margin-top:2rem;}
.main__rnd-list .desc-item .stxt  {font-size: max(1.8rem, 15px); color:#666; line-height: 1.3; margin-top:0.5rem;}

.main__rnd-list .txt-list {font-size: max(2rem, 16px); color:#666; line-height: 1.2; margin-top:0.5rem; }
.main__rnd-list .txt-list li {display: flex; gap:0.6rem;}
.main__rnd-list .txt-list li::before {content: attr(data-num);}


@media (max-width: 1800px){
	.main__rnd .sec-header .tit br {display: none;}
	
}
@media (max-width: 1280px){
	.main__rnd .sec-header .tit {font-size:5.4rem;}
}

@media (max-width: 1023px){
	.main__rnd { padding:10rem 0 12rem;}

	.main__rnd .sec-header {display: block; text-align: center; margin-bottom: 6rem;}
	.main__rnd .sec-header .tit {font-size:5rem;}

	.main__rnd .sec-header .btn-wrap {margin-top:4rem; justify-content: center;}


	.main__rnd-list .item-box { height:auto; flex-direction: column; align-items: center; }

	.main__rnd-list .image {width:100%;}


	.main__rnd-list .desc {width:100%; padding-bottom:8rem;}

	.main__rnd-list .desc-item .tit {font-size:2.8rem;}

}

@media (max-width: 768px){
	.main__rnd .sec-header .tit {font-size:3.6rem;}
}


@media (max-width: 480px){
	.main__rnd .sec-header .tit br {display: none;}
	.main__rnd .sec-header .btn-wrap {width: 100%;}
	.main__rnd .sec-header .btn-wrap .mbtn {min-width:50%;}
	
}





.main__rnd-control {display: flex; align-items: center; justify-content: center; gap:2.5rem; position: absolute; bottom:0; z-index: 1; left:calc(50% + 6rem);}
.main__rnd-control .paging {width:28rem; position: relative; display: flex; align-items: center;}

.main__rnd-control .progress{width:calc(100% - 6rem); height:2px; background-color: #ababab; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.main__rnd-control .progress span{--pro: 0; width: calc(100% * var(--pro)); max-width: 100%; height:100%; display: block; background:#000; position: absolute; top:0; left:0;}
.main__rnd-control .pagination {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; font-weight: 700;}
.main__rnd-control .pagination .current {color:#222;}
.main__rnd-control .pagination .total {color:#878787;}


.main__rnd-control .btn-wrap {display: flex; gap:1rem;}
.main__rnd-control .slide-btn {width:1.4rem; height:1.4rem; cursor: pointer; position: relative; z-index: 2; font-size:0;}
.main__rnd-control .slide-btn.next {transform: rotate(180deg);}
.main__rnd-control .slide-btn::before,
.main__rnd-control .slide-btn::after {content:''; display: block; width:0.9rem; height:3px; background-color: rgba(0, 0, 0, 1); border-radius: 4px; position: absolute; top:50%; left:0; transition:all 0.3s ease-in-out;}
.main__rnd-control .slide-btn::before{transform: translate(0, -150%) rotate(-45deg);}
.main__rnd-control .slide-btn::after{transform: translate(0, 50%) rotate(45deg);}

.main__rnd-control .slide-btn span {display: block; height:3px; width:100%; border-radius: 4px; background-color: rgba(0, 0, 0, 1); position: absolute; top:50%; left:0; transform: translate(0, -50%); transition:all 0.3s ease-in-out;}
.main__rnd-control .slide-btn.swiper-button-disabled {opacity: 0.3; pointer-events: none;}

.main__rnd-control .slide-btn:hover::before,
.main__rnd-control .slide-btn:hover::after,
.main__rnd-control .slide-btn:hover span {background-color: var(--color-main);}



@media (max-width: 1023px) {
	.main__rnd-control {left:50%; transform: translate(-50%, 0);}
}
@media (max-width: 768px) {
	.main__rnd-control .slide-btn::before,
	.main__rnd-control .slide-btn::after {width:1rem; height:3px; }
	.main__rnd-control .slide-btn::before{transform: translate(0, -125%) rotate(-45deg);}
	.main__rnd-control .slide-btn::after{transform: translate(0, 25%) rotate(45deg);}
}
@media (max-width: 576px) {
	.main__rnd-control .slide-btn span{height:2px;}
	.main__rnd-control .slide-btn::before,
	.main__rnd-control .slide-btn::after {width:0.9rem; height:2px; }
	.main__rnd-control .slide-btn::before{transform: translate(0, -175%) rotate(-45deg);}
	.main__rnd-control .slide-btn::after{transform: translate(0, 75%) rotate(45deg);}
	
}


@media (hover: hover) and (pointer: fine) {}

@media (max-width: 1280px) {}

@media (max-width: 1024px) {}

@media (max-width: 768px) {}

@media (max-width: 576px) {}

@media (max-width: 480px) {}


/* SECTION 2 : E */
/* ===================================================== */









/* ===================================================== */
/* SECTION 3 : S */

/*제품소개*/
.main__product-wrap {display: flex; height:100vh; height: calc(var(--vh, 1vh) * 100); min-height: 75rem; max-height:108rem; overflow: hidden;}
.main__product-wrap .item {flex:1; width:50%; position: relative;}

.main__product-wrap .item .item-bg {overflow: hidden; width:100%; height:100%; position: absolute; inset: 0; z-index: 1;}
.main__product-wrap .item .item-bg span{display: block; background: no-repeat center bottom / cover; position: absolute; inset: 0; transition: all 0.5s ease-in-out;}

.main__product-wrap .item.nth-1 .item-bg span.off {background-image: url('../images/main/section3_bg_off.jpg');}
.main__product-wrap .item.nth-2 .item-bg span.off {background-image: url('../images/main/section3_bg2_off.jpg');}

.main__product-wrap .item.nth-1 .item-bg span.on {background-image: url('../images/main/section3_bg_on.jpg');}
.main__product-wrap .item.nth-2 .item-bg span.on {background-image: url('../images/main/section3_bg2_on.jpg');}


.main__product-wrap .item .item-bg span.on {opacity: 0; transform: translateY(-30%);}

.main__product-wrap .item.is-active .item-bg span.off {opacity: 0; transform: translateY(30%); transition-duration: 0.3s;}
.main__product-wrap .item.is-active .item-bg span.on {opacity: 1; transform: translateY(0);}






.main__product-wrap .item-box {position: relative; z-index: 2;}

.main__product-wrap .item-box{padding:13rem 10rem 0; }
.main__product-wrap .item.nth-1 .item-box {padding-left:var(--inner-padding);}
.main__product-wrap .item.nth-2 .item-box {padding-right:var(--inner-padding);}


.main__product-wrap .sec-header .tit {font-size:6.8rem; color:#fff; font-weight: 100; text-transform: uppercase; transition: all 0.5s ease-in-out;}
.main__product-wrap .sec-header .txt {font-size:3rem; color:#e27910; font-weight: 500; margin-top:3rem; line-height: 1.2;}
.main__product-wrap .sec-header .txt .image img {display: inline-block; max-height:2.6rem;}
.main__product-wrap .sec-header .txt .image + br {display: none;}
.main__product-wrap .desc {font-size:max(1.8rem, 14px); color:#fff; font-weight: 500; margin-top:2rem; line-height: 1.4; transition: all 0.5s ease-in-out;}


.main__product-wrap .btn-wrap {margin-top:6rem; opacity: 0; transition: all 0.5s ease-in-out;}
.main__product-wrap .link-btn {display: flex; height:7rem; min-width:30rem; align-items: center; padding:0 6.5rem 0 4rem; border-radius: 4rem; font-size:max(2rem, 16px); color:#fff; font-weight: 500; transition: all 0.5s ease-in-out; position: relative; background-color: #403931;}

.main__product-wrap .link-btn::before,
.main__product-wrap .link-btn::after {content:''; display: block; width: 3rem; height:1px; background-color: #fff; position: absolute; top:50%; right:3rem; transition: all 0.5s ease-in-out;}
.main__product-wrap .link-btn::before {transform: rotate(90deg);}

.main__product-wrap .link-btn:hover {background-color: #e27910;}
.main__product-wrap .link-btn:hover::before {transform: rotate(450deg);}
.main__product-wrap .link-btn:hover::after {transform: rotate(360deg);}



.main__product-wrap .item.is-active .sec-header .tit{ color:#222;}
.main__product-wrap .item.is-active .desc {color:#666;}

.main__product-wrap .item.is-active .btn-wrap{ opacity: 1; margin-top: 5rem;}



@media (hover: hover) and (pointer: fine) {}

@media (max-width: 1440px) {
	.main__product-wrap .item.nth-1 .item-box,
	.main__product-wrap .item.nth-2 .item-box {padding:15rem calc(var(--inner-padding) * 3) 0;}

	.main__product-wrap .sec-header {text-align: center;}
	.main__product-wrap .sec-header .tit {font-size:6rem;}
	.main__product-wrap .sec-header .txt {font-size:2.5rem;}
	.main__product-wrap .desc {text-align: center;}
	.main__product-wrap .btn-wrap {justify-content: center;}
	.main__product-wrap .link-btn {min-width: 28rem;}
}
@media (max-width: 1280px) {
	
}

@media (max-width: 1023px) {
	.main__product-wrap .sec-header br {display: none;}
}

@media (max-width: 960px) {
	.main__product-wrap {max-height: none; height:auto; min-height: auto;}
	.main__product-wrap {flex-wrap: wrap;}
	.main__product-wrap .item {width: 100%; flex-basis: 100%;}
	.main__product-wrap .item .item-box {padding:12rem calc(var(--inner-padding) * 1) !important;}
}


@media (max-width: 768px) {}

@media (max-width: 576px) {}

@media (max-width: 480px) {}


/* SECTION 3 : E */
/* ===================================================== */










/* ===================================================== */
/* SECTION 4 : S */
/*공장소개*/
.main__facility {background:url('../images/main/section4_bg.jpg') no-repeat left top / cover;}
.main__facility-wrap {display: flex; height:100vh; height: calc(var(--vh, 1vh) * 100); min-height: 75rem; max-height:108rem; overflow: hidden; gap:5rem; padding:0 var(--outer-padding);}

.main__facility .sec-header {width:50%; display: flex; flex-direction: column; justify-content: center; flex-shrink: 0;}

.main__facility .sec-header .tit-wrap {font-size:5rem; color:#222; font-weight: 300;}
.main__facility .sec-header .tit {color:var(--color-main); font-weight: 700; display: inline-block;}
.main__facility .sec-header .tit-wrap p {line-height: 1.2;}
.main__facility .sec-header .desc {margin-top:7rem;}
.main__facility .sec-header .stit {font-size: max(1.6rem, 13px); color:#e27910; font-weight: 900;}
.main__facility .sec-header .txt {font-size: max(2rem, 16px); color:#222; margin-top:0.5rem; line-height:1.3;}
.main__facility .sec-header .txt strong{font-weight: 600;}

.main__facility .sec-header .btn-wrap {margin-top:4rem;}



.main__facility-image {width:calc(50% - var(--inner-padding)); position: relative; padding-right:var(--outer-padding)}
.main__facility .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; }
.main__facility .item {transition: all 0.5s;}
.main__facility .item .image {font-size:0; padding:0 0 0 20%; transition: all 0.5s ease-in-out;}
.main__facility .item .image span {display: inline-block; position: relative;}
.main__facility .item .image span::before {content:''; display: block; width: 100%; height:100%; background-color: #000; position: absolute; top:2rem; left:2rem;}
.main__facility .item .image span img {position: relative;}
.main__facility .item.is-active .image{padding:0 20% 0 0;}



.main__facility-control {position: absolute; top:50%; right:calc(var(--outer-padding) - var(--inner-padding)); transform: translate(0, -50%); z-index: 2;}
.main__facility-control .btn-wrap{flex-direction: column; gap:5rem;}
.main__facility-control .slide-btn {position: relative; width:4rem; height:12rem; font-size: 0; text-indent: -99999px; overflow: hidden; transition: all 0.3s ease-in-out; cursor: pointer;}
.main__facility-control .slide-btn.prev {transform: rotate(180deg);}

.main__facility-control .slide-btn::before,
.main__facility-control .slide-btn::after {content:''; display: block; position: absolute; transition: all 0.5s ease-in-out;}
.main__facility-control .slide-btn::before {width:4rem; height:4rem; border-radius: 50%; background-color: #e27910; bottom:50%; left:0; opacity: 0;}
.main__facility-control .slide-btn::after {width:3rem; height:11rem; background-color: #222; mask: url('../images/main/section4_arrow_btn.svg') no-repeat center / contain; -webkit-mask: url('../images/main/section4_arrow_btn.svg') no-repeat center / contain; top:0; left:50%; transform: translate(-50%, 0);}

.main__facility-control .slide-btn:hover {transform: translateY(1rem);}
.main__facility-control .slide-btn.prev:hover {transform: rotate(180deg) translateY(1rem);}
.main__facility-control .slide-btn:hover::before {bottom:0; opacity: 1;}
/*.main__facility-control .slide-btn:hover::after {background-color: var(--color-main);}*/

@media (hover: hover) and (pointer: fine) {}

@media (max-width: 1200px) {
	.main__facility-wrap {display: block;height:auto; min-height:auto; max-height:none; padding:12rem var(--outer-padding) 5rem;}
	
	.main__facility .sec-header {width:100%; display: block;}
	.main__facility .sec-header .tit-wrap br {display: none;}
	.main__facility .sec-header .desc {margin-top:4rem;}

	.main__facility-image {margin-top:6rem; width:100%;}

	.main__facility .item .image { padding:0 10%; text-align: center;}
	.main__facility .item .image span {display: inline-block; position: relative;}
	.main__facility .item .image span::before {content:''; display: block; width: 100%; height:100%; background-color: #000; position: absolute; top:2rem; left:2rem;}
	.main__facility .item .image span img {position: relative;}
	.main__facility .item.is-active .image{padding:0 10%;}

	.main__facility-control {position: static; transform: translate(0, 0); margin-top:4rem;}
	.main__facility-control .btn-wrap{flex-direction: row; gap:10rem; justify-content: center;}

	.main__facility-control .slide-btn {transform: rotate(-90deg);}
	.main__facility-control .slide-btn.prev {transform: rotate(90deg);}
	.main__facility-control .slide-btn:hover {transform:rotate(-90deg) translateY(1rem);}
	.main__facility-control .slide-btn.prev:hover {transform: rotate(90deg) translateY(1rem);}
}

@media (max-width: 1023px) {
	.main__facility .sec-header {text-align: center;}
	.main__facility .sec-header .tit-wrap {font-size:5rem;}
	

	.main__facility .sec-header .btn-wrap {justify-content: center;}
}

@media (max-width: 768px) {
	.main__facility .sec-header .tit-wrap {font-size:3.6rem;}
}

@media (max-width: 576px) {}

@media (max-width: 480px) {}


/* SECTION 4 : E */
/* ===================================================== */











/* ===================================================== */
/* SECTION 5 : S */
/*ESG*/
.main__esg {padding:8rem var(--outer-padding) 20rem; background: url('../images/main/section5_bg.jpg') no-repeat center / cover;}

.main__esg .sec-header {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom:6rem; color:#fff;}
.main__esg .sec-header .tit {font-size:10rem; font-weight: 100; display: inline-block;}
.main__esg .sec-header .txt {font-size:6rem; font-weight: 300; line-height: 1.2;}
.main__esg .sec-header .stxt {font-size:max(2rem, 16px); line-height: 1.3; margin-top:3rem;}


.main__esg-list {display: flex; gap:2rem;}
.main__esg-list .item {flex:1;}
.main__esg-list .link {display: block;}

.main__esg-list .thumb {overflow: hidden; line-height: 1;  margin-bottom:2rem;}
.main__esg-list .thumb span {display: block; transition: all 0.5s ease-in-out;}
.main__esg-list .thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block;}
.main__esg-list .tit {font-size:4rem; color:#fff; font-weight: 100; line-height: 1.2; display: inline;background: linear-gradient(to right, #fff 0, #fff 100%) no-repeat left bottom; background-size: 0 1px; transition: all 0.5s ease-in-out;}

.main__esg-list .link:hover .thumb span {transform: scale(1.2); transition-duration: 1.5s;}
.main__esg-list .link:hover .tit {background-size:100% 1px;}




@media (hover: hover) and (pointer: fine) {}

@media (max-width: 1440px) {
	.main__esg-list .tit {font-size:3.2rem; }
}

@media (max-width: 1280px) {}

@media (max-width: 1023px) {
	.main__esg {padding-bottom:12rem;}
	.main__esg .sec-header {flex-wrap: wrap; text-align: center;}
	.main__esg .sec-header .tit-wrap { width: 100%;}
	.main__esg .sec-header .tit {font-size:8rem;}
	.main__esg .sec-header .txt {font-size:5rem;}
	.main__esg .sec-header .stxt {margin-top:1rem;}
	.main__esg .sec-header .btn-wrap {margin-top:6rem; justify-content: center; width: 100%;}

	.main__esg-list {flex-wrap: wrap; margin-top:6rem;  gap:4rem 3rem;}
	.main__esg-list .item {flex-basis: calc(50% - 1.5rem);}
}

@media (max-width: 768px) {
	.main__esg .sec-header .tit {font-size:7rem;}
	.main__esg .sec-header .txt {font-size:4rem;}

	.main__esg-list .tit {font-size:2.8rem; }
}

@media (max-width: 576px) {}

@media (max-width: 480px) {
	.main__esg-list {gap:6rem 3rem;}
	.main__esg-list .item {flex-basis: 100%;}
	.main__esg-list .tit {font-size:2.6rem; }
	.main__esg-list .tit br {display: none;}
}


/* SECTION 5 : E */
/* ===================================================== */












/* ===================================================== */
/* SECTION 6 : S */
/*고객지원*/
.main__cust {padding:5rem var(--outer-padding) 0; background-color: #080a12;}
.main__cust-wrap {background-color: #01162a; padding:12rem 5rem 10rem; text-align: center;}
.main__cust-wrap .tit {font-size: 6.4rem; color:#fff; font-weight: 100; display: inline-block;}
.main__cust-wrap .btn-wrap {justify-content: center; margin-top:3rem;}




@media (hover: hover) and (pointer: fine) {}

@media (max-width: 1280px) {}

@media (max-width: 1023px) {
	.main__cust-wrap .tit {font-size: 5rem;}
}

@media (max-width: 768px) {
	.main__cust-wrap {padding:10rem 3rem 8rem;}
	.main__cust-wrap .tit {font-size: 4rem; line-height: 1.5; letter-spacing: 0.05em;}
}

@media (max-width: 576px) {}

@media (max-width: 480px) {}


/* SECTION 6 : E */
/* ===================================================== */