@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main main {overflow: hidden; }
.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;}


.color-b {color:#222 !important;}
.color-g {color:#666 !important;}
.color-1 {color:#172b80 !important;}
.color-2 {color:#aa3a00 !important;}
.color-3 {color:var(--color-main) !important;}



.sec-header {color:#222; display: flex; align-items: center; gap:4rem;}
.sec-header .sec-tit {font-size:6.5rem; font-weight: 700; padding-right:4rem;}
.sec-header .sec-tit::after {content:''; display: block; width:1px; height:calc(100% - 3rem); background-color: rgba(53, 53, 53, 0.2); position: absolute; top:50%; right:0; transform: translate(0, -50%);}
.sec-header .sec-txt {font-size:max(2rem, 18px); font-weight: 500; line-height: 1.5; color:#676767;}

@media (max-width: 1024px){
	.sec-header .sec-tit {font-size:5rem;}
	.sec-header .sec-txt {font-size:max(2rem, 18px);}
}

@media (max-width: 768px){
	.sec-header {flex-direction: column; text-align: center; row-gap: 2rem;}
	.sec-header .sec-tit {padding-right: 0; padding-bottom:1.5rem;}
	.sec-header .sec-tit::after {width:5rem; height:1px; top:100%; left:50%; transform: translate(-50%, 0);}
}




@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 */
/* ===================================================== */






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



.mainvisual {margin:var(--header-height) 0 0 0; position: relative;}
.mainvisual-wrap {border-radius: 1.5rem; overflow: hidden; transition:all 0.5s linear 0.5s; position: relative;width:calc(100% - var(--outer-padding) * 2); left:50%; transform: translate(-50%, 0);}
.mainvisual-wrap.is-active { opacity: 1; width:calc(100% - var(--outer-padding) * 2); animation: clip-center 1.2s ease-in-out;}
/*.is-fix .mainvisual-wrap.is-active {margin:0; border-radius: 0;}*/


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


.mainvisual-slide .slide-list {height: 100%;}
.mainvisual-slide .item {position: relative; height:100%; overflow: hidden; display: flex; align-items: 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.5); 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.1);}

.mainvisual-slide .item.nth-1 .bg span {background-image: url('../images/main/viusal_bg01.jpg');}
.mainvisual-slide .item.nth-2 .bg span {background-image: url('../images/main/viusal_bg02.jpg');}
.mainvisual-slide .item.nth-3 .bg span {background-image: url('../images/main/viusal_bg03.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-slide .copy-box {margin:0 var(--inner-padding); color:#fff;}
.mainvisual-slide .copy-box h3 {font-size:6rem; font-weight: 700;}
.mainvisual-slide .copy-box p {margin-top:1rem; display: inline-flex; font-size:max(11px, 1.2rem); font-weight: 900; letter-spacing: 1.5em;  padding: 0.8rem 0rem 0.7rem 2rem; background-image: linear-gradient(to right, rgba(30, 55, 143, 1) 30%, rgba(180, 69, 6, 1));}

.mainvisual-slide .item.is-active .copy-box h3 {animation: clip-right 1s ease-in-out 1s both ;}
.mainvisual-slide .item.is-active .copy-box p {animation: fade-up 1s ease-in-out 1.2s both ;}

/*20250825 첫번째 슬라이드 수정*/
.mainvisual-slide .item.nth-1 .copy-box h3 {font-size:8rem; line-height: 1; font-weight: 200;}
.mainvisual-slide .item.nth-1 .copy-box h3 strong {font-size:10rem; font-weight: 700;}
.mainvisual-slide .item.nth-1 .copy-box h4 {font-size:2.5rem; font-weight: 600; margin-top:2rem;}
.mainvisual-slide .item.nth-1 .copy-box p {margin-top:2rem;}
.mainvisual-slide .item.is-active .copy-box h4 {animation: clip-right 1s linear 1.5s both ;}


.mainvisual-slide .slide-control {position: absolute; z-index: 1; bottom:18%; left:var(--inner-padding); transition: left 0.5s ease-in-out; width:calc(100% - var(--inner-padding) *2 ); max-width: 50rem; opacity: 0;}

.mainvisual-wrap.is-active .mainvisual-slide .slide-control {opacity: 1; transition: opacity 0.5s ease-in-out 1s;}

.slide-control-wrap {display: flex; width:100%; gap:3rem; align-items: center;}
.slide-control-wrap .paging {position: relative; height:1px; background-color: var(--color-white-a2);}
.slide-control-wrap .paging span {background-color: #fff;}

.slide-control-wrap .btn-wrap {display: flex; align-items: center;}
.slide-control-wrap .slide-btn {font-size:0; width:3rem; height:2rem; overflow: hidden; cursor:pointer; text-align: center;}
.slide-control-wrap .slide-btn span {display: inline-block; width:2rem; height:2rem; background:url('../images/main/ico_arrow01.png') 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);}



.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: 1440px){
	.mainvisual-slide .copy-box {margin:0 calc(var(--inner-padding) * 2);}
	.mainvisual-slide .slide-control {left:calc(var(--inner-padding) * 2);}
}


@media (max-width: 1280px){
	.mainvisual-slide .copy-box h3 {font-size:5rem;}
}


@media (max-width: 1024px){
	.mainvisual-slide .copy-box h3 {font-size:4.8rem;}
}

@media (max-width: 640px){
	.mainvisual-slide .copy-box {text-align: center;}
	.mainvisual-slide .copy-box h3 {font-size:3.6rem; text-align: center;}
	.mainvisual-slide .copy-box h3 br{display: none;}

	.mainvisual-slide .item.nth-1 .copy-box h3 {font-size:6rem;}
	.mainvisual-slide .item.nth-1 .copy-box h3 strong {font-size:6rem;}
	
	.mainvisual-slide .slide-control {left:50%; bottom:12rem; width:calc(100% - var(--inner-padding) * 2); transform: translate(-50%, 0%);}
}




.scroll-btn {position: absolute; bottom:3rem; left:50%; margin-left:-1.8rem; width:3.6rem; height:3.6rem; z-index: 1; animation: scroll-btn 1s linear infinite; opacity: 0;}
.scroll-btn a {display: block; height:100%; font-size:0; text-indent: -8888px; background:url('../images/main/ico_scroll.png') no-repeat center/contain;}

@keyframes scroll-btn {
	33% { transform: translateY(3px); } 
	66% { transform: translateY(-6px); } 
}

.mainvisual-wrap.is-active .scroll-btn {opacity: 1; transition: opacity 0.5s ease-in-out 1s;}


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










/* ===================================================== */
/* SECTION 2 : S*/
/*메인 인증서*/
.main__certi {padding:16rem 0; background: url('../images/main/section02_bg01.png') no-repeat center/cover;  --certi-padding: 13rem; --certi-btn:6rem;}
.main__certi-header .rows {display: flex; margin:0 var(--inner-padding); align-items: center; justify-content: center; gap:2rem; position: relative;}
.main__certi-header .rows::before,
.main__certi-header .rows::after {content:''; display: block; width:200%; height:2px; background-color: #000; position: absolute; top:50%; transform: translate(0, -50%);}
.main__certi-header .rows::before {left:100%;}
.main__certi-header .rows::after {right:100%;}
.main__certi-header .cols {flex:1;}
.main__certi-header .cols.nth-1 {order:1;}
.main__certi-header .cols.nth-2 {order:3;}
.main__certi-header .cols.nth-3 {order:2;}

.main__certi-header .cols {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap:0.5rem;}
.main__certi-header .cols .stit {font-size:2rem; font-weight: 700; color:#fff; padding:0.5rem 2.5rem; background-color: var(--color-sub); min-width:12rem; border-radius: 3rem;}
.main__certi-header .cols.nth-2 .stit {background-color: var(--color-sub1);}
.main__certi-header .cols .txt {font-size:3rem; font-weight: 500; color:#222; width:100%; }
.main__certi-header .cols .tit {font-size:5.2rem; font-weight: 700; color:#222;}


.main__certi-header .cols.nth-3 {gap:2rem; flex-wrap: nowrap; justify-content: space-between; width: 100%;}
.main__certi-header .cols.nth-3::before,
.main__certi-header .cols.nth-3::after {content:''; display: block; width:4.1rem; height:4.1rem; background: url('../images/main/section02_ico01.png') no-repeat center/contain;}

@media (max-width: 768px) {
	.main__certi-header .cols .stit {font-size:2rem;}
	.main__certi-header .cols .txt {font-size:2.6rem;}
	.main__certi-header .cols .tit {font-size:4rem;}
}

@media (max-width: 640px) {
	.main__certi {padding:10rem 0;}
	.main__certi-header .rows {flex-direction: column; gap:1rem;}

	.main__certi-header .cols.nth-3 {flex-direction: column; gap:1rem;}
	.main__certi-header .cols.nth-3::before,
	.main__certi-header .cols.nth-3::after {width:3rem; height: 3rem;}
}




.main__certi-wrap {margin-top:3rem; position: relative;}
.main__certi-box {margin:0 calc(var(--inner-padding) + var(--certi-btn) + 1rem); position: relative;}
.main__certi-box::before{content: ''; display: block; width:200%; height:calc(100% - var(--certi-padding) - 6rem); background-color: var(--color-main); position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 0;}


.main__certi-wrap .swiper-pagination {position: static;}

.main__certi-list {padding: var(--certi-padding) 0; position: relative; z-index: 1;}

.main__certi-wrap .swiper,
.main__certi-wrap .swiper-wrapper,
.main__certi-wrap .swiper-slide {
  height: auto !important;
}


.main__certi-list .swiper-slide { transition: transform 0.5s ease, opacity 0.5s ease, z-index 0.5s ease; font-size: 0;}
.main__certi-list .swiper-slide img {object-fit: cover; object-position: center; display: block; width:100%; height: 100%; border-radius: 0.7rem;}
.main__certi-list .swiper-slide .link {cursor: default; padding:0.7rem; background-color: #efefef; border-radius: 1rem; box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.4); height: 100%; display: block; transition: all 0.5s ease;}
.main__certi-list .swiper-slide-active .link {cursor: pointer; background-color: var(--color-main);}



.main__certi-wrap .slide-btn {position: absolute; width:var(--certi-btn); height:var(--certi-btn); font-size: 0; text-indent: -9999px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; background-color:var(--color-sub); border-radius: 50%; z-index: 10000; cursor: pointer;}

.main__certi-wrap .slide-btn span {display: block; width:1.6rem; height:1.6rem; border:2px solid #fff; border-width: 2px 2px 0 0; transform:translate(-3px, 0) rotate(45deg); transition: all 0.3s ease-in-out;}

.main__certi-wrap .slide-btn.prev {left:calc(0px - var(--certi-btn) - 1rem); top:50%; transform: translate(-100%, -50%) rotate(180deg); }
.main__certi-wrap .slide-btn.next {right:calc(0px - var(--certi-btn) - 1rem); top:50%; transform: translate(100%, -50%);}


.main__certi-wrap .slide-btn:hover {background-color: var(--color-sub1);}
.main__certi-wrap .slide-btn:hover span {transform:translate(0, 0) rotate(45deg);}


.main__certi-wrap .swiper-pagination {font-size:0;}
.main__certi-wrap .swiper-pagination .swiper-pagination-bullet {width:1.2rem; height:1.2rem; opacity: 1; background-color: #5e88bf; transition: all 0.3s ease;}
.main__certi-wrap .swiper-pagination .swiper-pagination-bullet:hover {background-color: #000;}
.main__certi-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: var(--color-sub1);}


@media (max-width: 1560px) {
	.main__certi-wrap .slide-btn.prev {left:-1rem; transform: translate(-100%, -50%) rotate(180deg); }
	.main__certi-wrap .slide-btn.next {right:-1rem; transform: translate(100%, -50%);}
}

@media (max-width: 1280px) {
	.main__certi {--certi-padding: 12rem; --certi-btn:5rem;}
	.main__certi-box {margin:0 calc(var(--inner-padding) + var(--certi-btn) );}
}


@media (max-width: 768px) {
	.main__certi {--certi-padding: 12rem; --certi-btn:4.4rem;}
	.main__certi-box {margin:0 calc(var(--inner-padding) + 1rem)}
	.main__certi-wrap .slide-btn span{width:1.2rem; height:1.2rem; transform:translate(-1px, 0) rotate(45deg)}
	.main__certi-wrap .slide-btn.prev {left:0rem; transform: translate(-50%, -50%) rotate(180deg); }
	.main__certi-wrap .slide-btn.next {right:0rem; transform: translate(50%, -50%);}
}

@media (max-width: 640px) {
	.main__certi-box {margin:0 ;}
	.main__certi-wrap .slide-btn span{width:1.2rem; height:1.2rem; transform:translate(-1px, 0) rotate(45deg)}
	.main__certi-wrap .slide-btn.prev {left:0rem; transform: translate(25%, -50%) rotate(180deg); }
	.main__certi-wrap .slide-btn.next {right:0rem; transform: translate(-25%, -50%);}
}


.main__certi-zoom {position: fixed; inset:0;  width: 100%; height: 100%; z-index: 20000;  display: none;}
.main__certi-zoom .item {position:absolute; z-index: 2; top:50%; left:50%; transform: translate(-50%, -50%); max-width: calc(100% - var(--certi-btn) - 2rem); max-height: calc(100vh - var(--certi-btn) - 2rem); text-align: center; width:100%;}

.main__certi-zoom .item .image {padding:1rem; background-color: #5e88bf; border-radius: 1rem; box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.4); display: inline-block; position: relative;}
.main__certi-zoom .item .image img {object-fit: cover; object-position: center; display: block; border-radius: 0.7rem;max-height: calc(100vh - var(--certi-btn) - 2rem);}

.main__certi-zoom .zoom-close {position: absolute; width:var(--certi-btn); height:var(--certi-btn); background-color: #1d2a4a; top:0; right:0; transform: translate(50%, -50%); font-size:0; border-radius: 50%; transition: all 0.5s ease-in-out;}

.main__certi-zoom .zoom-close::before,
.main__certi-zoom .zoom-close::after {content:''; display: block; width:calc(var(--certi-btn) / 2); height:2px; border-radius: 2px; background-color: #fff; position: absolute; top:50%; left:50%;}
.main__certi-zoom .zoom-close::before {transform:translate(-50%, -50%) rotate(45deg);}
.main__certi-zoom .zoom-close::after {transform:translate(-50%, -50%) rotate(135deg);}

.main__certi-zoom .zoom-close:hover {transform: translate(50%, -50%) rotate(360deg); background-color: var(--color-sub1);}

.main__certi-zoom .dim {position: fixed; inset: 0; z-index: 1; background-color: var(--color-black-a6); transition: all .5s; }
.main__certi-zoom.is-active .dim {-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);}

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





/* ===================================================== */
/* SECTION 3 : S*/
/*제품영역*/
.main__pro {padding:18rem 0 24rem; background: url('../images/main/section03_bg01.png') no-repeat 0 center/cover;}

.main__pro .sec-header {color:#fff;}
.main__pro .sec-header .sec-tit::after { background-color: var(--color-white-a2);}
.main__pro .sec-header .sec-txt {color:#fff;}



.main__pro-list {margin-top:15rem; --mainpro-img:22rem; --item-padding:4rem;}

.main__pro-list .list {display: flex; position: relative; z-index: 1; gap:3.5rem;}
.main__pro-list .list::before {content:''; display: block; width:300%; height:2px; background-color: #6178d0; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: -1;}
.main__pro-list .list .item {flex:1; transition: all 0.5s ease-in-out; position: relative;}
.main__pro-list .list .item.is-active {flex:2.5; padding-left:var(--item-padding);}

.main__pro-list .item .link {display: flex; align-items: center; width:100%; height:100%; gap:3rem;transition: all 0.5s ease-in-out;}


.main__pro-list .item .image {flex-shrink: 0; position: relative; font-size:0;}
.main__pro-list .item .image img {width:var(--mainpro-img); height:auto; transition: all 0.5s ease-in-out;}
.main__pro-list .item .image::before {content:''; display: block; background-color: #3e55ab; width:100%; height:100%; border-radius: 50%; position: absolute; z-index: -1; top:0; left:calc(0px - var(--item-padding)); opacity: 0; transition: all 0.5s ease-in-out;}
.main__pro-list .item .image span {display: inline-block; border-radius: 50%; overflow: hidden; background-color: #fff; position: relative;}

.main__pro-list .item.is-active .image::before {opacity: 1;}




.main__pro-list .item .tit-off {font-size:2rem; font-weight: 700; color:#fff; position: absolute; top:calc(50% + var(--mainpro-img) / 2 + 2rem); left:calc(var(--mainpro-img) / 2); transform: translate(-50%, 0); width:100%; text-align: center; transition:0.3s ease-in-out 0.5s}
.main__pro-list .item.is-active .tit-off {opacity: 0; transition:0s ease-in-out 0s}


.main__pro-list .item .desc {display: flex;  flex-direction: column; justify-content: center; font-size:0;  flex-grow: 1; overflow: hidden; padding:0rem 0 2.5rem; height:100%;}

.main__pro-list .item .desc::after {content:''; display: block; width:11rem; height:2.4rem; background:url('../images/main/ico_arrow03.png') no-repeat center/contain; position: absolute; bottom:0; left:var(--mainpro-img); opacity: 0; }
.main__pro-list .item.is-active .desc::after {opacity: 1; left:calc(var(--mainpro-img) + 3rem); transition:0.3s ease-in-out 1s;}

.main__pro-list .item .tit-on {max-height:0; overflow: hidden; opacity: 0; transition: all 0s ease-in-out 0s;}
.main__pro-list .item.is-active .tit-on {max-height: 22rem; opacity:1; transition: opacity 1s linear 0.5s, max-height 1s linear 0.5s;}

.main__pro-list .item .tit-on .txt {font-size:5rem; font-weight: 700; color:#fff; display: block;}
.main__pro-list .item .tit-on .stxt {font-size:2.2rem; font-weight: 800; color:#6178d0;}


.main__pro-list .item .text {font-size:2rem; font-weight: 600; color:#fff; max-height:0; overflow: hidden; opacity: 0; line-height: 1.3; padding-top:2rem;}
.main__pro-list .item.is-active .text {max-height: 22rem; opacity:1; transition: opacity 1s linear 0.5s, max-height 0.3s linear 0.5s;}


@media (max-width: 1440px){
	.main__pro-list {--mainpro-img:21rem;}
	.main__pro-list .list {gap:2rem;}


	.main__pro-list .item .tit-on .txt {font-size:4rem;}
	.main__pro-list .item .text {padding-top:1rem;}
}

@media (max-width: 1280px){
	.main__pro-list {--mainpro-img:19rem; --item-padding:3rem;}
	
	.main__pro-list .item .link { gap:2rem;}

	.main__pro-list .item .desc {padding:2rem 0 2.5rem;}
	.main__pro-list .item .tit-on .txt {font-size:3.2rem;}
	
}

@media (max-width: 1024px){
	.main__pro {padding:12rem 0 18rem;}
/*
	.main__pro .sec-header .sec-tit {font-size:5rem;}
	.main__pro .sec-header .sec-txt {font-size:max(2rem, 18px);}
*/
	.main__pro-list {--mainpro-img:16rem; --item-padding:2rem; margin-top:8rem;}
	.main__pro-list .item {min-height: 20rem;}
	
	.main__pro-list .item .tit-on .txt {font-size:3.2rem;}
	.main__pro-list .item .text br{ display: none;}

	.main__pro-list .item .tit-on .txt {font-size:max(2.8rem, 18px);}
	.main__pro-list .item .tit-on .stxt {font-size:max(2.2rem, 15px);}
	.main__pro-list .item .text {font-size:max(2rem, 14px)}
}

@media (max-width: 960px){
	


	.main__pro-list {--mainpro-img:15rem;}

	.main__pro-list .list {display: flex; flex-wrap: wrap; gap:4rem;}
	.main__pro-list .list::before {display: none;}
	.main__pro-list .list .item,
	.main__pro-list .list .item.is-active {flex:1; padding-left:var(--item-padding); flex-basis: 40%;}

	.main__pro-list .item .link:hover .image img {transform: scale(1.2);}

	.main__pro-list .item .image::before,
	.main__pro-list .item.is-active .image::before {opacity: 1; z-index: 0;}

	.main__pro-list .item .image::after{content:''; display: block; width:500%; height:2px; background-color: #6178d0; position: absolute; top:50%; left:0%; transform: translate(-10%, -50%); z-index: -1;}

	.main__pro-list .item .tit-off {display: none;}


	.main__pro-list .item .desc::after,
	.main__pro-list .item.is-active .desc::after {opacity: 0; left:var(--mainpro-img); transition: all 0.5s ease-in-out;}
	
	.main__pro-list .item .link:hover .desc::after{transform:translate(2rem, 0); opacity: 1;}

	.main__pro-list .item .tit-on{max-height:none; opacity: 1;}
	.main__pro-list .item .tit-on .stxt {margin-top: 0.5rem; display: block;}
	.main__pro-list .item .text {max-height:none; opacity: 1; font-weight: 300;}
}

@media (max-width: 768px){
	.main__pro {padding:10rem 0 12rem;}
/*
	.main__pro .sec-header {flex-direction: column; text-align: center; row-gap: 2rem;}
	.main__pro .sec-header .sec-tit {padding-right: 0; padding-bottom:1.5rem;}
	.main__pro .sec-header .sec-tit::after {width:5rem; height:1px; top:100%; left:50%; transform: translate(-50%, 0);}
*/

	.main__pro-list { --mainpro-img:20rem; }
	.main__pro-list .list .item,
	.main__pro-list .list .item.is-active {padding:0 2rem;}

	.main__pro-list .item .image::after {display: none; width:1000%; height:1px; left:50%; transform:translate(-50%, 0);}
	.main__pro-list .item:nth-of-type(2n+1) .image::after {display: block;}


	.main__pro-list .item .link {flex-direction: column;}
	.main__pro-list .item .desc {text-align: center; padding-bottom:4rem; justify-content: flex-start;}

	.main__pro-list .item .desc::after,
	.main__pro-list .item.is-active .desc::after {opacity: 0; left:calc(50% - 2rem); transform: translate(-50%, 0);}
	
	.main__pro-list .item .link:hover .desc::after{left:50%; transform: translate(-50%, 0); opacity: 1;}
}


@media (max-width: 480px){
	.main__pro-list .list {row-gap:6rem; }
	.main__pro-list .list .item{padding:0; flex-basis: 100%;}
	.main__pro-list .list .item.is-active {padding:0;}

	.main__pro-list .item .image::after,
	.main__pro-list .item:nth-of-type(2n+1) .image::after {display: block; width:400%;}
}
/* SECTION 3 : E*/
/* ===================================================== */





/* ===================================================== */
/* SECTION 4 공정도 : S */


/*공정도*/
.main__process {background: url('../images/main/section04_bg01.png') no-repeat center/cover; padding:15rem 0 18rem; overflow: hidden;--process-tit-h:4.5rem;}

.main__process-inwrap { margin-top: 10rem ;padding:12rem 0;}
.main__process-list {display: flex; justify-content: center; font-size: 0;}
.main__process-list .item{position: relative; }
.main__process-list .item.is-active {z-index: 1;}
.main__process-list .item:first-child::before {content:''; display: block; width:700%; height:calc(25% + 2px); position: absolute;  border:2px solid var(--color-main); border-width: 0 2px 2px 0; border-radius: 0 0 3rem 0; top:25%; left:calc(1px - 700%); transition: all 0.5s ease-in-out;}
.main__process-list .item:last-child::before {content:''; display: block; width:700%; height:calc(25% + 2px); position: absolute;  border:2px solid var(--color-main); border-width: 0 0 2px 2px; border-radius: 0 0 0 3rem; top:25%; right:calc(1px - 700%); transition: all 0.5s ease-in-out;}

.main__process-list .item.is-active::before,
.main__process-list .item.is-hover::before {border-color:var(--color-sub2)}


.main__process-list .link {display: block; position: relative; height:100%;}
.main__process-list .link::before,
.main__process-list .link::after {content:''; display: block; position: absolute; width:calc(100% + 2px); border:2px solid transparent; transition: all 0.5s ease-in-out;}


.main__process-list .link::before {border-width: 2px 2px 0 2px; border-radius: 3rem 3rem 0 0; height:calc(25% + 2px); top:-1px; left:-1px; border-color: var(--color-main);}
.main__process-list .item:nth-child(2n) .link::before {border-width: 0 2px 2px 2px; border-radius:0 0 3rem 3rem; height:calc(75% + 2px);  top:auto; bottom:-1px;}

.main__process-list .link:hover::before {border-color: var(--color-sub2);}
.main__process-list .item.is-active .link::before {border-color:var(--color-sub2);}



.main__process-list .image {mix-blend-mode: normal; overflow: hidden; transition: all 0.5s ease-in-out; text-align: center;}
.main__process-list .image img { transition: all 0.5s ease-in-out; object-fit: contain; object-position: center;}
.main__process-list .link:hover .image {mix-blend-mode: normal;}
.main__process-list .link:hover .image img{transform:translateY(-1rem) scale(1.05);}


.main__process-list .arrow {position: absolute; top:25%; right:0; transform: translate(50%, -50%)  rotate(135deg); width:3rem; height:3rem;}
.main__process-list .arrow span {display: block; width:100%; height:100%; border:solid var(--color-main); border-width: 0.4rem 0.4rem 0 0; position: absolute;top:0; left:0; transition: all 0.5s linear;}
.main__process-list .item:nth-child(2n) .arrow {transform: translate(50%, 0%) rotate(-45deg);}

.main__process-list .arrow span:nth-child(2) {top:-1rem; left:1rem; opacity: 0;}
.main__process-list .arrow span:nth-child(3) {top:-2rem; left:2rem; opacity: 0;}





.main__process-list .link:hover .arrow span {border-color:var(--color-sub2); opacity: 0;}
.main__process-list .link:hover .arrow span:nth-child(1) { animation: process__arrow 2s linear infinite;}
.main__process-list .link:hover .arrow span:nth-child(2) { animation: process__arrow 2s linear 0.5s infinite;}
.main__process-list .link:hover .arrow span:nth-child(3) { animation: process__arrow 2s linear 1s infinite;}

.main__process-list .item.is-active .arrow span {border-color:var(--color-sub2);}
.main__process-list .item.is-active .arrow span:nth-child(1) {opacity: 0.5;}
.main__process-list .item.is-active .arrow span:nth-child(2) {opacity: 1;}

@keyframes process__arrow { 
	0%{opacity: 0;}
	30%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}


.main__process-list .tit {position: absolute; width:100%; height:var(--process-tit-h); bottom:calc(100% + 2rem); left:0%;}
.main__process-list .item:nth-child(2n) .tit {bottom:calc(0px - var(--process-tit-h) - 2rem);}

.main__process-list .tit::before,
.main__process-list .tit::after {content:''; display: block; background-color: var(--color-main); position: absolute; opacity: 0;transition:all 0.5s ease-in-out; }
.main__process-list .tit::before {width:100%; height:100%;  border-radius: 1rem; top:0; left:0; transform: translate(0, 0%) skewY(0deg); transition:all 0.5s ease-in-out,  opacity 0s ease-in-out 0.5s;}
.main__process-list .tit::after {width:1.5rem; height:1.5rem; box-shadow: 3px 0 0 #000; top:100%; left:25%; transform:translate(0, -150%) rotate(45deg); }


.main__process-list .item:nth-child(2n) .tit::after {top:auto; box-shadow: 0 3px 0 #000; bottom:100%; transform:translate(0, 150%) rotate(225deg); }


.main__process-list .item.is-active .tit::before,
.main__process-list .item.is-active .tit::after {background-color: #555;}


.main__process-list .link:hover .tit::before,
.main__process-list .link:hover .tit::after {background-color: var(--color-sub2); opacity: 1;}
.main__process-list .link:hover .tit::before {border-radius: 1rem 2rem 0 0; transform: translate(0, -51%) skewY(-7deg);transition:all 0.5s ease-in-out,  opacity 0s ease-in-out 0s;}
.main__process-list .link:hover .tit::after {transform:translate(0, -70%) rotate(45deg); }
.main__process-list .item:nth-child(2n) .link:hover .tit::before {border-radius:0 0 2rem 1rem; transform: translate(0, 51%) skewY(7deg);}
.main__process-list .item:nth-child(2n) .link:hover .tit::after {transform:translate(0, 70%) rotate(225deg); }





.main__process-list .tit-wrap{width:100%; height:100%; background-color: var(--color-main); display: flex; align-items: center;  gap:0rem; padding:0.5rem 1rem; border-radius: 1rem; position: relative; z-index: 1; transition: all 0.5s ease-in-out;}


.main__process-list .link:hover .tit-wrap {background-color: var(--color-sub2);border-radius:0 0 1rem 1rem;}
.main__process-list .item:nth-child(2n) .link:hover .tit-wrap {border-radius:1rem 1rem 0 0;}
.main__process-list .item.is-active .tit-wrap {background-color: #555}

.main__process-list .tit-wrap span {display: block; transition: all 0.5s ease-in-out;}
.main__process-list .tit-wrap span:nth-child(1) {font-size:2.5rem; font-weight: 300; font-style: italic; color:#8799dc;}
.main__process-list .tit-wrap span:nth-child(2) {font-size:3rem; font-weight: 700; color:#becaf4;text-align: center; position: absolute; width:calc(100% - 6rem); bottom:0.5rem; right:1rem; transition: all 0.5s ease-in-out, font-size 0.3s ease-in-out 0.2s;}
.main__process-list .item:nth-child(2n) .tit-wrap span:nth-child(2n) {top:0.5rem;}

.main__process-list .link:hover .tit-wrap span:nth-child(1) {font-weight: 700; color:#fff;}
.main__process-list .link:hover .tit-wrap span:nth-child(2) {font-size:4rem; color:#fff;}

.main__process-list .item.is-active .tit-wrap span:nth-child(1),
.main__process-list .item.is-active .tit-wrap span:nth-child(2) { color:#fff; opacity: 0.5;}






@media (max-width: 1024px){
	.main__process {--process-tit-h:4rem;}
	.main__process-list .arrow {width:2rem; height:2rem;}
	.main__process-list .arrow span {border-width: 2px 2px 0 0;}
	.main__process-list .arrow span:nth-child(2) {top:-5px; left:5px;}
	.main__process-list .arrow span:nth-child(3) {top:-10px; left:10px;}

	.main__process-list .tit-wrap span:nth-child(1) {font-size:max(2rem, 18px);}
	.main__process-list .tit-wrap span:nth-child(2) {font-size:max(2.2rem, 20px); width:calc(100% - 5.5rem); bottom:0.7rem;}
	.main__process-list .item:nth-child(2n) .tit-wrap span:last-child {top:0.7rem;}

	.main__process-list .link:hover .tit-wrap span:nth-child(2) {font-size:max(3rem, 24px);}
}
@media (max-width: 960px){
	.main__process-inwrap {padding:2rem 0; margin-top:4rem;}
	.main__process-list {flex-wrap: wrap;}
	.main__process-list .item{width:42%;}
	.main__process-list .item:nth-child(1) {order:1;}
	.main__process-list .item:nth-child(2) {order:2;}
	.main__process-list .item:nth-child(3) {order:4;}
	.main__process-list .item:nth-child(4) {order:3;}
	.main__process-list .item:nth-child(5) {order:5;}
	.main__process-list .item:last-child {transform: translateX(-50%);}

	.main__process-list .link {padding-top:2rem;}
	.main__process-list .link::before { border-radius: 2rem 2rem 0 0;}
	.main__process-list .item:nth-child(2) .link::before {border-width: 0 0 2px 2px; border-radius:0 0 0 2rem; width: calc(50% + 1px);}
	.main__process-list .item:nth-child(3) .link::before {border-width: 2px 2px 2px 0; border-radius:0 2rem 2rem 0; width: calc(50% + 1px); height:calc(100% + 2px); left:auto; right:-1px;}
	.main__process-list .item:nth-child(4) .link::before {border-width: 0 0 2px 0; border-radius:0; width: calc(100% + 2px); height:calc(100% + 2px); left:50%;}
	.main__process-list .item:nth-child(5) .link::before {border-width: 2px 0 2px 2px; border-radius:2rem 0 0 2rem; width: calc(50% + 2px); height:calc(100% + 2px); }



	.main__process-list .item:first-child::before {border-radius: 0 0 2rem 0;}
	.main__process-list .item:last-child::before {border-width: 0 0 2px 0; border-radius: 0 0 0 0rem; top:auto; bottom:-1px; right:calc(50% - 700%);}




	.main__process-list .item:nth-child(2) .arrow,
	.main__process-list .item:nth-child(5) .arrow {inset:auto auto 0 50%; transform: translate(-100%, 50%)  rotate(45deg);}
	.main__process-list .item:nth-child(3) .arrow,
	.main__process-list .item:nth-child(4) .arrow {inset:auto auto 0 50%; transform: translate(0%, 50%)  rotate(225deg);}
	
	
	
	.main__process-list .tit {width:calc(100% - 4rem); top:2rem; bottom:auto; left:50%; transform: translateX(-50%);}
	.main__process-list .item:nth-child(2n) .tit {bottom:auto;}

	.main__process-list .tit::before {height:90%}
	.main__process-list .item:nth-child(2n) .tit::after {top:100%; box-shadow: 3px 0 0 #000; bottom:auto; transform:translate(0, -150%) rotate(45deg); }

	.main__process-list .link:hover .tit::before {border-radius: 1rem 2rem 0 0; transform: translate(0, -50%) skewY(-4deg);}
	.main__process-list .item:nth-child(2n) .link:hover .tit::before {border-radius:1rem 2rem 0 0;; transform: translate(0, -50%) skewY(-4deg);}
	.main__process-list .item:nth-child(2n) .link:hover .tit::after {transform:translate(0, -70%) rotate(45deg); }

	.main__process-list .item:nth-child(2n) .link:hover .tit-wrap {border-radius:0 0 1rem 1rem;}

	.main__process-list .item:nth-child(2n) .tit-wrap span:nth-child(2n) {top: auto; bottom:0.7rem;}

}



@media (max-width: 760px){
	.main__process-list .item{width:48%;}
}

@media (max-width: 576px){
	.main__process-list .item{width:50%;}
}


@media (max-width: 480px){
	.main__process-list .item{width:80%;}
	.main__process-list .item:nth-child(1) {order:1;}
	.main__process-list .item:nth-child(2) {order:2;}
	.main__process-list .item:nth-child(3) {order:3;}
	.main__process-list .item:nth-child(4) {order:4;}
	.main__process-list .item:nth-child(5) {order:5;}
	.main__process-list .item:last-child {transform: translateX(0%);}

	.main__process-list .item:nth-child(1) .link::after {border-width: 2px 0 0 2px; border-radius:2rem 0 0 0; width: calc(50% + 1px); height:calc(25% + 1px); border-color: var(--color-main); top:-1px; left:-1px;}
	.main__process-list .item:nth-child(1) .link:hover::after {border-color:var(--color-sub2);}
	.main__process-list .item:nth-child(1).is-active .link::after {border-color:var(--color-sub2);}

	.main__process-list .item:nth-child(1) .link::before {border-width: 2px 2px 2px 0; border-radius:0 2rem 2rem 0; width: calc(50% + 1px); height:calc(100% + 2px); left:auto; right:-1px;}
	.main__process-list .item:nth-child(2) .link::before,
	.main__process-list .item:nth-child(4) .link::before {border-width: 2px 0 2px 2px; border-radius:2rem 0 0 2rem; width: calc(50% + 1px); height:calc(100% + 2px); left:-1px;}

	.main__process-list .item:nth-child(3) .link::before,
	.main__process-list .item:nth-child(5) .link::before {border-width: 2px 2px 2px 0; border-radius:0 2rem 2rem 0; width: calc(50% + 1px); height:calc(100% + 2px); left:auto; right:-1px;}
	

	.main__process-list .item:last-child::before {right:50%;}




	.main__process-list .item:nth-child(2) .arrow,
	.main__process-list .item:nth-child(4) .arrow {inset:auto auto 0 50%; transform: translate(-100%, 50%)  rotate(45deg);}
	.main__process-list .item:nth-child(1) .arrow,
	.main__process-list .item:nth-child(3) .arrow,
	.main__process-list .item:nth-child(5) .arrow {inset:auto auto 0 50%; transform: translate(0%, 50%)  rotate(225deg);}
	
	
	

	.main__process-list .tit-wrap span:nth-child(2) {bottom:3px;}
	.main__process-list .item:nth-child(2n) .tit-wrap span:last-child {bottom:3px;}
}

@media (max-width: 376px){
	.main__process-list .item{width:100%;}
}











/*공정도 팝업*/
.mp__layer {display: none; position: fixed; inset:0; background: rgba(0, 0, 0, 0.5); z-index: 9999; -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px); --mpLayer-th: 4.5rem; --mpLayer-padding:5rem;}
.mp__layer-wrap { position: absolute; top: calc(50% + var(--mpLayer-th) / 2); left: 50%; transform: translate(-50%, -50%); background: #fff no-repeat top right/contain; border-radius: 1rem; max-width: 140rem; width: calc(100% - var(--inner-padding) * 2);}

.mp__layer-wrap.mp__detail-01 {background-image: url('../images/main/mplayer_bg01.png');}
.mp__layer-wrap.mp__detail-02 {background-image: url('../images/main/mplayer_bg02.png');}
.mp__layer-wrap.mp__detail-03 {background-image: url('../images/main/mplayer_bg03.png');}
.mp__layer-wrap.mp__detail-04 {background-image: url('../images/main/mplayer_bg04.png');}
.mp__layer-wrap.mp__detail-05 {background-image: url('../images/main/mplayer_bg05.png');}

.mp__layer-wrap::before {content:''; display: block; width:100%; position: absolute; bottom:var(--mpLayer-padding); right:4rem; text-align: right; font-size:6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color:#f3f3f3; z-index: -1; line-height: 1;}
.mp__layer-wrap.mp__detail-01::before {content:'Receiving goods';}
.mp__layer-wrap.mp__detail-02::before {content:'Production';}
.mp__layer-wrap.mp__detail-03::before {content:'Inspection / Testing';}
.mp__layer-wrap.mp__detail-04::before {content:'Packaging';}
.mp__layer-wrap.mp__detail-05::before {content:'SHIPMENT';}


.mp__layer-header {position: relative; display: flex; gap:2rem; padding-bottom:var(--mpLayer-padding);}
.mp__layer-header .txt {margin-top:3rem; font-size:max(1.8rem, 14px); font-weight: 500; color:#767676; text-indent: -2.5rem; padding-left:2.5rem;}
.mp__layer-header .txt::before {content:'※'; margin-right:4px; color:var(--color-sub2); }
.mp__layer-header .txt strong {font-weight: 600; color:#222; background: linear-gradient(to bottom, transparent 60%, rgba(220, 226, 248, 1) 60%);display: inline;}



.mp__layer-header .tit {position: static; top:0; left:0; margin-left:var(--mpLayer-padding); min-width:25rem; height:var(--mpLayer-th); color:#fff; z-index: 1; transform: translate(0, -20%); width: auto;}
.mp__layer-header .tit::before,
.mp__layer-header .tit::after {content:''; display: block; background-color:#fff; position: absolute; z-index: -1;}
.mp__layer-header .tit::before {width:100%; height:100%;  top:0; left:1rem;border-radius: 1rem 2rem 0 0; transform: translate(0, -51%) skewY(-5deg);}


.mp__layer-header .tit-wrap {position: relative; top:0; left:0%; width:auto; height:100%; color:#fff; z-index: 2;}

.mp__layer-header .tit-wrap::before,
.mp__layer-header .tit-wrap::after {content:''; display: block; background-color: var(--color-sub2); position: absolute; opacity: 1; z-index: -1;}
.mp__layer-header .tit-wrap::before {width:100%; height:100%;  top:0; left:0;border-radius: 1rem 2rem 0 0; transform: translate(0, -51%) skewY(-5deg);}
.mp__layer-header .tit-wrap::after {width:1.5rem; height:1.5rem; box-shadow: 3px 0 0 #000; top:100%; left:20%; transform:translate(0, -70%) rotate(45deg); }


.mp__layer-header .tit-wrap h3 {position: relative; height: 100%; border-radius: 0 0 2rem 1rem; background-color: var(--color-sub2); display: flex; align-items: flex-end; padding:1rem 2rem; color:#fff; font-weight: 700; gap:2rem;}

.mp__layer-header .tit-wrap span {display: block;}
.mp__layer-header .tit-wrap span:nth-child(1) {font-size:2.5rem; font-style: italic;}
.mp__layer-header .tit-wrap span:nth-child(2) {font-size:4rem; flex-grow: 1; text-align: center;}




.mp__layer-close { position: absolute; right:2rem; top:0; font-size: 0; text-indent: -9999px; width:6rem; height:6rem; background-color: #000; transform: translate(0, -50%); transition: all 0.5s ease-in-out; border-radius: 50%;}
.mp__layer-close::before,
.mp__layer-close::after {content: ''; display: block; width:50%; height:1px; background-color: #fff; position: absolute; top:50%; left:50%; transition: all 0.5s ease-in-out;}

.mp__layer-close::before {transform: translate(-50%, -50%) rotate(45deg);}
.mp__layer-close::after {transform: translate(-50%, -50%) rotate(-45deg);}

.mp__layer-close:hover {background-color: var(--color-sub2); transform: translate(0, -50%) rotate(360deg);}


.mp__layer-footer {height:3rem;}

.mp__layer-inner {overflow:hidden auto;padding:0 var(--mpLayer-padding);}

.mp__layer-con {min-height:39rem;}




@media (max-width: 1280px) {
	.mp__layer { --mpLayer-th: 4rem; --mpLayer-padding:3rem;}
	.mp__layer-wrap::before { right:3rem; font-size:5rem; letter-spacing: 0.05em;}

	.mp__layer-header {padding-bottom:5rem;}

	.mp__layer-header .tit-wrap span:nth-child(1) {font-size:2rem;}
	.mp__layer-header .tit-wrap span:nth-child(2) {font-size:3.2rem;}

	.mp__layer-close { right:-1.5rem;}
}

@media (max-width: 1024px) {
	.mp__layer { --mpLayer-padding:3rem;}
	.mp__layer-wrap::before { right:3rem; font-size:5rem; letter-spacing: 0.05em;}

	.mp__layer-header {padding:4rem var(--mpLayer-padding) 2rem; flex-direction: column;}
	.mp__layer-header .tit {position: absolute; margin:0; left:var(--mpLayer-padding);}

	.mp__layer-header .tit-wrap span:nth-child(1) {font-size:max(2rem, 16px);}
	.mp__layer-header .tit-wrap span:nth-child(2) {font-size:max(2.8rem, 20px);}

	.mp__layer-header .txt {margin-top:1rem;}

	.mp__layer-close { width:5rem; height:5rem;}
}

@media (max-width: 768px) {
	.mp__layer { --mpLayer-padding:2rem;}
	.mp__layer-wrap::before { right:0rem; font-size:4rem; letter-spacing: 0em; text-align: center; padding:0 2rem;}
}


@media (max-width: 640px) {
	.mp__layer-wrap {background-image: none !important;}
}

@media (max-width: 480px) {
	.mp__layer-wrap::before {font-size:3.4rem; letter-spacing: -0.05em; white-space: nowrap;}
}









/*내용*/
.lprocess .row {display: flex; gap:2rem; min-height: 19rem; margin-bottom: 1rem;}
.lprocess .row:last-child {margin-bottom:0;}

.lprocess .row .cols.nth-1 {flex-shrink: 0; width:18%; position: relative;}
.lprocess .row .cols.nth-2 {flex-grow: 1; padding-bottom:5rem;}
.lprocess .row .cols.nth-1::before,
.lprocess .row .cols.nth-1::after {content:''; display: block; position: absolute;}
.lprocess .row .cols.nth-1::before { width:1px; height:calc(100% - 1rem); background-color: var(--color-sub2);  left:20%; top:0;}
.lprocess .row .cols.nth-1::after { width:1.6rem; height:1.6rem; border: solid var(--color-sub2); border-width: 2px 2px 0 0;  left:20%; bottom:0rem; transform: translate(-50%, 0) rotate(135deg);}

.lprocess .row:last-child .cols.nth-1::before,
.lprocess .row:last-child .cols.nth-1::after {display: none;}




.lp__tit {font-size:3.5rem; font-weight: 700; color:var(--color-sub2); background-color: #fff; position: relative; padding:0 0 1rem 0;}



.lp__nav-wrap {display: flex; gap:2rem 4rem; flex-wrap: wrap;}
.lp__dep-1 {position: relative; flex-basis: calc(20% - 3.2rem);}
.lp__dep-1.is-active {z-index: 2;}

.lp__dep-btn {cursor: default; display: flex;  height: 5rem; border-radius: 0.5rem; padding:0 1rem; text-align: center; align-items: center; justify-content: center; background-color:#171717; color:#fff; font-size:2rem; font-weight: 700; transition: all 0.3s ease-in-out; position: relative; line-height: 1.1;}
.lp__dep-btn.is-has {cursor: pointer; background-color: var(--color-main);}
.lp__dep-btn.is-has:hover,
.lp__dep-1.is-active .lp__dep-btn.is-has {background-color: var(--color-sub2);}


.lp__dep-1 + .lp__dep-1 .lp__dep-btn::before {content:''; display: block; width:1.6rem; height:1.6rem; border: solid #171717; border-width: 2px 2px 0 0; position: absolute; right:100%; top:50%; transform: translate(-100%, -50%) rotate(45deg);pointer-events: none;}


.lp__dep-2 {display: none; position: absolute;  top:100%; left:50%; transform: translate(-50%, 0);  padding:1rem; background-color: #fff; border-radius: 0.5rem; box-shadow: 0 0 2rem var(--color-black-a2); width: 100%;}


.lp__dep-2 .link {display: block; position: relative; padding:0.5rem 0 0.5rem 1rem; font-size: max(1.5rem, 14px); font-weight: 600; color:#222; transition: all 0.3s ease-in-out; letter-spacing: -0.05em;}
.lp__dep-2 .link::before {content:''; display: block; width:5px; height:5px; border-radius: 50%; background-color: #222; position: absolute; left:0; top:1.2rem;}
.lp__dep-2 .link img {border-radius: 50%; background-color: #bfbfbf; vertical-align: bottom; transition: all 0.3s ease-in-out; margin-left:2px;}
.lp__dep-2 .link:hover {text-decoration: underline; color: var(--color-main);}
.lp__dep-2 .link:hover img {background-color: var(--color-main); transform: translateX(5px);}




@media (max-width: 1440px) {
	.lp__dep-1 { flex-basis: calc(25% - 3rem);}
}

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


@media (max-width: 1024px) {

	.lprocess .row {flex-direction: column;}

	.lprocess .row .cols.nth-1 {width:100%;}
	
	.lprocess .row .cols.nth-1::before,
	.lprocess .row .cols.nth-1::after {display: none;}
	

	.lp__tit {background-color: transparent; padding:0;}


	.lp__nav-wrap {gap:2rem 3rem;}
	.lp__dep-1 { flex-basis: calc(33.3% - 2rem);}

	.lp__dep-1 + .lp__dep-1 .lp__dep-btn::before {transform: translate(-70%, -50%) rotate(45deg);}
}

@media (max-width: 768px) {
	.lprocess .row .cols.nth-1::before,
	.lprocess .row .cols.nth-1::after {display: none;}

	.lp__nav-wrap {gap:2rem 2rem;}
	.lp__dep-1 { flex-basis: calc(50% - 1rem);}

	.lp__dep-1 + .lp__dep-1 .lp__dep-btn::before {width: 1.2rem; height:1.2rem;  transform: translate(-50%, -50%) rotate(45deg);}

	.lp__dep-2 .link::before {width:4px; height:4px; top:1.2rem;}
}


@media (max-width: 768px) {
	.lp__nav-wrap {gap:2rem 2rem;}
	.lp__dep-1 {flex-basis: 100%;}

	.lp__dep-1 + .lp__dep-1 .lp__dep-btn::before {left:50%; top:0; bottom:auto; right:auto;  transform: translate(-50%, -150%) rotate(135deg);}

	.lp__dep-2 {position:static; transform: translate(0);}
}


.mp__detail-02 .row.nth-2 .lp__dep-1:nth-child(2) {flex-basis: calc(40% - 2rem);}
@media (max-width: 1440px) {
	.mp__detail-02 .row.nth-2 .lp__dep-1:nth-child(2) {flex:2 ;}
}

.mp__detail-03 .row.nth-1 .lp__dep-1:nth-child(1),
.mp__detail-03 .row.nth-1 .lp__dep-1:nth-child(3) {flex-basis: calc(32% - 3.2rem);}
@media (max-width: 1440px) {
	.mp__detail-03 .row.nth-1 .lp__dep-1:nth-child(1),
	.mp__detail-03 .row.nth-1 .lp__dep-1:nth-child(3) {flex:1 ;}
}

.mp__detail-04 .row.nth-2 .lp__dep-1:nth-child(3),
.mp__detail-05 .row.nth-2 .lp__dep-1:nth-child(2) {flex-basis: calc(40% - 2rem);}
@media (max-width: 1440px) {
	.mp__detail-04 .row.nth-2 .lp__dep-1:nth-child(3),
	.mp__detail-05 .row.nth-2 .lp__dep-1:nth-child(2) {flex:2 ;}
}






/* SECTION 4 공정도 : E */
/* ===================================================== */





/* ===================================================== */
/* */

@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) {
}
/* */
/* ===================================================== */