@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;}


.color-b {color:#222 !important;}
.color-g {color:#666 !important;}
.color-1 {color:var(--color-main) !important;}
.color-2 {color:#2865b5 !important;}





.body-main .section {overflow: hidden;}



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





/*Quick*/
.body-main .quick {bottom:12rem;}
.body-main.is-fix .quick {bottom:4rem;}
.body-main .quick.is-hold {bottom:calc(100% + 4rem); }


@media (max-width: 640px){
	.body-main .quick {bottom:4rem;}
	.body-main .quick.is-hold {bottom:calc(100% + 4rem); }
}


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

.mainvisual {position: relative; --vsymbol-width:26rem; --vsymbol-height:14.4rem; --visual-padding-1:8rem;}
.mainvisual-wrap {overflow: hidden; transition:all 0.5s linear 0.5s; position: relative;}

.mainvisual-slide {height:100vh; height: calc(var(--vh, 1vh) * 100 ); min-height: 70rem; max-height:97rem; background-color: #000; position: relative;transition: height 0.3s ease-in-out;}

.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 80% 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/visual_bg01.jpg');}
.mainvisual-slide .item.nth-2 .bg span {background-image: url('../images/main/visual_bg02.jpg');}
.mainvisual-slide .item.nth-2 .bg::after { background-color: rgba(0, 0, 0, 0.3);}

.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); width:100%; position: relative; padding:var(--visual-padding-1);}
.mainvisual-slide .copy-box::before,
.mainvisual-slide .copy-box::after {content:''; display: block; background-color: var(--color-white-a2); position: absolute;}
.mainvisual-slide .copy-box::before {width:200%; height:1px; left:calc(var(--vsymbol-width) + 2rem); top:0;}
.mainvisual-slide .copy-box::after {width:1px; height:400%; top:calc(var(--vsymbol-height) + 2rem); left:0;}

.mainvisual-slide .copy-item::before {content:''; display: block; width:var(--vsymbol-width); height:var(--vsymbol-height); background:url('../images/main/symbol01.png') no-repeat left top / contain; position: absolute; top:0; left:0;}

.mainvisual-slide .copy-box h3 {font-size:6rem; color:#fff; font-weight: 600; line-height: 1.1;}
.mainvisual-slide .copy-box p {font-size:2.6rem; color:var(--color-white-a6); font-weight: 600; font-family: var(--font-lexe); margin-top:2rem; display: inline-flex;  }
.mainvisual-slide .copy-box br {display: none;}


.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 ;}





.mainvisual-slide .slide-control {position: absolute; z-index: 1; left:calc(var(--inner-padding) + var(--visual-padding-1));  opacity: 0;}

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

.mainvisual-slide .slide-control-wrap {display: flex; width:100%; gap:1rem; align-items: center;}

.mainvisual-slide .slide-control-wrap .slide-btn {font-size:0; width:2.4rem; height:2.4rem; overflow: hidden; cursor:pointer; text-align: center; flex-shrink: 0; transition: all 0.5s ease-in-out;}
.mainvisual-slide .slide-control-wrap .slide-btn span {display: inline-block; width:1rem; height:100%; background:url('../images/main/ico_arrow01.png') no-repeat center/contain; transition: all 0.3s ease-in-out;}
.mainvisual-slide .slide-control-wrap .slide-btn.next {transform: rotate(180deg);}
.mainvisual-slide .slide-control-wrap .slide-btn:hover span {transform: translateX(-3px);}


.mainvisual-slide .slide-control-wrap .paging {width:auto; height:auto; display: flex; align-items: center; gap:1rem;}
.mainvisual-slide .slide-control-wrap .paging .swiper-pagination-bullet {width:7rem; height:0.4rem; margin:0; border-radius: 0;  opacity: 1; background-color:var(--color-white-a2); 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-main);}




@media (max-width: 1440px){

}


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


@media (max-width: 1024px){
	.mainvisual {--vsymbol-width:20rem; --vsymbol-height:11.1rem; --visual-padding-1:6rem;}
	.mainvisual-slide .copy-box h3 {font-size:5rem;}
	.mainvisual-slide .copy-box p {font-size:max(2rem, 18px);}
}

@media (max-width: 768px){
	.mainvisual {--vsymbol-width:15rem; --vsymbol-height:8.3rem; --visual-padding-1:4rem;}
}



@media (max-width: 576px){
	.mainvisual {--vsymbol-width:12rem; --vsymbol-height:6.6rem; --visual-padding-1:3rem;}
	.mainvisual-slide .copy-box {text-align: center;}
	.mainvisual-slide .copy-box br {display: none;}

	.mainvisual-slide .copy-box h3 {font-size:4rem;}


	.mainvisual-slide .slide-control { left:50%; transform: translate(-50%, 0);}
}




/* 스크롤 다운 */
.visual-scroll { display: flex; flex-direction: column; align-items: center; gap:1rem; position: absolute; right: var(--outer-padding); bottom: 0; transition: .3s; z-index: 1;}

.visual-scroll-txt {flex-shrink: 0; font-size:max(1.3rem, 11px); color:var(--color-white-a8); letter-spacing:-0.05em; text-transform: uppercase; text-align: center;  writing-mode:sideways-rl ; text-orientation: mixed;}



.visual-scroll-line { overflow: hidden; position: relative; width: 1rem; height:10rem; background-color: var(--color-white-a1); } 

.visual-scroll-line em {content:''; display: block; width:100%; height:1rem; position: absolute; top:0; left:0; background-color:var(--color-white-a6);animation: scroll-line-1 3s linear infinite;}
.visual-scroll-line em::before,
.visual-scroll-line em::after {content:''; display: block; width:100%; height:100%; position: absolute; top:100%;}
.visual-scroll-line em::before {background-color: var(--color-white-a2); top:-100%;}
.visual-scroll-line em::after {background-color: #fff;}

@keyframes scroll-line-1 { 
  0% {top:-60%; } 
  10% { top:-60%; } 
  60% { top: 100%; } 
  70% { top: 210%; } 
  100% { top: 210%; } 
}



.visual-scroll-line::before { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: #fff; content: ''; animation: scroll-line 2.5s linear infinite; display: none;} 
@keyframes scroll-line { 
  0% { transform: translateY(-110%); } 
  10% { transform: translateY(-60%); } 
  60% { transform: translateY(160%); } 
  70% { transform: translateY(210%); } 
  100% { transform: translateY(210%); } 
}



.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: 640px){
	
}

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


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








/* ===================================================== */
/* SECTION 2 : S */
/*사업분야*/
.main__business {padding:16rem 0 8rem; background:#122431 url('../images/main/section02_bg01.png') no-repeat right top / contain; }
.main__business::before {content:''; width:74%; height:100%; background: url('../images/main/section02_bg02.png') no-repeat left bottom / contain; position: absolute; left:0; bottom:0;}



.main__business-wrap  {position: relative; display: flex; justify-content: space-between; gap:4rem;}
.main__business-wrap .cols {position: relative; }
.main__business-wrap .cols.nth-1 {margin-left:var(--inner-padding);}
.main__business-wrap .cols.nth-2 {width: 52%; padding-left:1rem;}


.main__business-wrap .sec__header .txt{font-size:4rem; color:#fff; font-weight: 700; letter-spacing: -0.025em;}

.main__business-tab {margin-top:5rem;  max-width: 48rem;}

.main__business-tab .item {padding:0 1rem 0 3rem; position: relative; cursor: pointer;}
.main__business-tab .item::before {content:''; display: block; width:0%; height:calc(100% + 2px); background-color:var(--color-main); position: absolute; top:-1px; left:0; border-radius: 1rem; transition: width 0.5s ease-in-out;}
.main__business-tab .item .link {position: absolute; top:0; left:0; width:100%; height:0; font-size:0; transition: height 0s linear; z-index: 1;}

.main__business-tab .item.is-active::before {width:100%;}
.main__business-tab .item.is-active .link {height:100%; transition-duration: 0.3s;}



.main__business-tab .item-box {display: flex; height:8rem; align-items: center; width:100%; border-bottom:1px solid var(--color-main); position: relative; transition:border-color 0.5s ease-in-out;}
.main__business-tab .item:last-child .item-box {border-color:transparent;}
.main__business-tab .tit {font-family: var(--font-lexe); font-size:2rem; color:var(--color-white-a5); font-weight: 500; transition:color 0.5s ease-in-out; flex-grow: 1; padding-right:4rem;}
.main__business-tab .tit::after {content:''; display: block; width:1.3rem; height:1.3rem; background: url('../images/main/ico_arrow03.png') no-repeat center/contain; transition: all 0.3s ease-in-out; position: absolute; top:50%; right:2rem; transform: translate(-50%, 50%); opacity: 0; }

.main__business-tab .item.is-active .item-box {border-color:transparent;}
.main__business-tab .item.is-active .tit {color:#fff;}
.main__business-tab .item.is-active .tit::after {transform: translate(0, -50%); opacity: 1; transition-delay: 0.5s;}



.main__business-desc {min-height:var(--business-desc-height);}
.main__business-desc .item {opacity: 0; position: absolute;  right:0; top:0; transition: all 0.5s ease-in-out;}
.main__business-desc .item.is-active {opacity: 1; z-index: 1;}


.main__business-desc .image { font-size: 0; transform: translate(150%, 0); transition: opacity 0.5s ease-in-out; opacity: 0; position: relative;}
.main__business-desc .image span {display: block;border-radius:0 0 0 5rem; overflow: hidden;}
.main__business-desc .image img {object-fit: cover;width: 100%; height: 100%; }

.main__business-desc .image::after {content:''; display: block; width:32%; height:100%; background:url('../images/main/symbol02.png') no-repeat right bottom / contain; position: absolute; right:0; bottom:-2.5rem;}


.main__business-desc .item.is-active .image {transform:translate(0, 0); opacity: 1; transition: all 0.5s ease-in-out;}

.main__business-desc .desc {color:#fff; margin-right:var(--inner-padding);  padding:0 2rem 0 5rem; margin-top:-4rem; }
.main__business-desc .item.is-active .desc {animation: fadeInUp 1s ease-in-out both;}

.main__business-desc .desc .tit { font-family: var(--font-lexe); font-size:6.8rem; line-height: 1; letter-spacing: -0.025em;}
.main__business-desc .desc .txt { font-size:max(2.2rem, 16px); line-height: 1.5; letter-spacing: -0.05em; margin-top:4rem;}



@media (max-width: 1280px){

	.main__business-wrap .cols.nth-2 {width: 55%;}


	.main__business-wrap .sec__header .txt{font-size:max(3.2rem, 26px);}
	.main__business-tab {margin-top:5rem;}

	.main__business-tab .item {padding:0 2rem 0 2rem;}
	



	.main__business-tab .item-box { height:8rem;}
	.main__business-tab .tit {font-size:2rem; padding-right:3rem;}
	.main__business-tab .tit::after {right:0;}

	.main__business-desc .image span {border-radius:0 0 0 4rem;}

	.main__business-desc .image::after {width:30%; bottom:-2rem;}

	.main__business-desc .desc {padding:0 2rem 0 4rem;  margin-top:-4rem; }


	.main__business-desc .desc .tit { font-size:5.6rem;}
	.main__business-desc .desc .txt {margin-top:3rem;}

}


@media (max-width: 960px){

	.main__business {padding:12rem 0 10rem;}
	.main__business-wrap {flex-wrap: wrap; row-gap: 8rem;}
	.main__business-wrap .cols.nth-1,
	.main__business-wrap .cols.nth-2 {width:100%; margin:0; padding:0 var(--inner-padding)}

	.main__business-wrap .sec__header .txt{text-align: center;}
	
	
	.main__business-tab {max-width: none;}
	.main__business-tab .list {display: flex; flex-wrap: wrap;}
	.main__business-tab .item {flex:1; flex-basis: 40%;}
	.main__business-tab .item:nth-child(1) .item-box,
	.main__business-tab .item:nth-child(2) .item-box {border-top:1px solid var(--color-main)}
	.main__business-tab .item:last-child .item-box {border-color:var(--color-main);}

	.main__business-desc .image {max-width: 70%; margin: 0 auto;}

	.main__business-desc .desc .tit { font-size:5rem; text-align: center;}
	
}

@media (max-width: 768px){
	.main__business-desc .desc {margin-right:0;  padding:0; margin-top:5rem; }
	.main__business-desc .desc .tit { font-size:4.5rem;}
}

@media (max-width: 480px){
	.main__business-wrap .sec__header br{display: none;}
	.main__business-desc .image {max-width: none;}

	.main__business-tab .item {flex-basis: 100%;}
	.main__business-tab .item-box {height:7rem;}
	.main__business-tab .item:nth-child(2) .item-box {border-color:var(--color-main);}
}

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





/* ===================================================== */
/* SECTION 3 : S*/
/*지속가능경영*/
.main__esg  {padding:16rem 0 16rem;  background: url('../images/main/section03_bg01.png') no-repeat center bottom / cover;}

.main__esg .sec__header {text-align: center;}
.main__esg .sec__header .tit{ font-size:5.8rem; color:#222; font-weight: 700;}
.main__esg .sec__header .txt{ font-size:max(2.4rem, 17px); color:#999; font-weight: 500; margin-top:2.5rem;}
.main__esg .sec__header .txt strong {color:#222; font-weight: 700;}


.main__esg-list {margin-top:14rem;}
.main__esg-list .list {display: flex; gap:2.5rem;}
.main__esg-list .item {flex:1; height:36rem;}

.main__esg-list .link {width:100%; height:100%; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; border-radius: 2rem; background-color: rgba(34, 34, 34, 0.7); position: relative; transition: all 0.5s ease-in-out; padding:0 2rem;}

.main__esg-list .link::before,
.main__esg-list .link::after {content:''; display: block; width:0; height:0; background: url('../images/main/symbol03.png') no-repeat center / contain; position: absolute; transition: all 0.5s ease-in-out; opacity: 0;}
.main__esg-list .link::before {top:0; left:0;}
.main__esg-list .link::after {bottom:0; right:0; transform: rotate(180deg);}


.main__esg-list .link:hover {border-radius: 5rem 2rem; background-color: #fff; transform: translate(0, -4rem);}
.main__esg-list .link:hover::before,
.main__esg-list .link:hover::after {opacity: 1; width:19.3rem; height:10.2rem; transition-delay: 0.5s;}


.main__esg-list .tit {font-size:3rem; color:#fff; font-weight: 700; position: relative; transition: all 0.5s ease-in-out; }
.main__esg-list .tit::before {content:''; display: block; height:6.8rem; width:6.8rem; background:no-repeat center top /contain; margin:0 auto 1rem; transition: all 0.5s ease-in-out;}
.main__esg-list .item.nth-1 .tit::before {background-image: url('../images/main/section03_ico01.png');}
.main__esg-list .item.nth-2 .tit::before {background-image: url('../images/main/section03_ico02.png');}
.main__esg-list .item.nth-3 .tit::before {background-image: url('../images/main/section03_ico03.png');}

.main__esg-list .link:hover .tit {color:#222;}

.main__esg-list .item.nth-1 .link:hover .tit::before {background-image: url('../images/main/section03_ico01_on.png');}
.main__esg-list .item.nth-2 .link:hover .tit::before {background-image: url('../images/main/section03_ico02_on.png');}
.main__esg-list .item.nth-3 .link:hover .tit::before {background-image: url('../images/main/section03_ico03_on.png');}




.main__esg-list .txt {display: none; font-family: var(--font-lexe); font-size:max(1.8rem, 16px); color:#fff; opacity: 0.6; margin-top: 0.5rem; transition: all 0.5s ease-in-out;}
.main__esg-list .link:hover .txt {color:#222;}



.main__esg-list .more {width:0rem; height:0rem; font-size:0;  position: relative; border-radius: 50%; background-color: #444; margin-top:0rem;  box-shadow: 0 0 2rem var(--color-black-a3); transition: all 0.5s ease-in-out;}
.main__esg-list .more::before,
.main__esg-list .more::after {content:''; display: block; width:33%; height:2px; background-color: #fff; position: absolute; top:50%; left:50%;transform: translate(-50%, -50%); opacity: 0;}
.main__esg-list .more::after {transform: translate(-50%, -50%) rotate(90deg);}


.main__esg-list .link:hover .more {width:4rem; height:4rem;  margin-top:4rem; transform: rotate(720deg); transition: all 0.5s ease-in-out 0.3s;}
.main__esg-list .link:hover .more::before,
.main__esg-list .link:hover .more::after {opacity: 1;}

@media (max-width: 1024px){
	.main__esg .sec__header .tit{ font-size:4.6rem;}
}

@media (max-width: 768px){
	.main__esg .sec__header .txt br {display: none;}

	.main__esg-list {margin-top:10rem;}
	.main__esg-list .list {flex-wrap: wrap;}
	.main__esg-list .item {flex-basis: 100%; height:auto;}
	.main__esg-list .link { padding:4rem 3rem;}
	.main__esg-list .tit {display: flex; align-items: center; justify-content: center; gap:1rem;}
	.main__esg-list .tit::before {width: 5rem; height:5rem; margin:0;}
	
}



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









/* ===================================================== */
/* SECTION 4 : S */
/*회사소개*/
.main__info {background: url('../images/main/section04_bg01.png') no-repeat center / cover;}
.main__info-wrap .list{height:100vh; height: calc(var(--vh, 1vh) * 100 ); min-height: 70rem; max-height:96rem; display: flex; align-items: stretch;}

.main__info-wrap .item {flex:1; border-right:1px solid var(--color-white-a5); min-height:0;}
.main__info-wrap .item:last-child {border:0;}
.main__info-wrap .link {width:100%; height:100%; display: flex; flex-direction: column; justify-content: center; align-items: center;  position: relative; transition: all 0.5s ease-in-out; padding:0 2rem;}

.main__info-wrap .tit {font-size:3.2rem; color:#fff; font-weight: 700; position: relative; text-align: center; width:100%;}
.main__info-wrap .tit::before {content:''; display: block; height:10rem; width:100%; background:no-repeat center top /contain; margin-bottom:1rem;}
.main__info-wrap .item.nth-1 .tit::before {background-image: url('../images/main/section04_ico01.png');}
.main__info-wrap .item.nth-2 .tit::before {background-image: url('../images/main/section04_ico02.png');}
.main__info-wrap .item.nth-3 .tit::before {background-image: url('../images/main/section04_ico03.png');}

.main__info-wrap .stxt {font-family: var(--font-lexe); font-size:max(1.8rem, 15px); font-weight: 500; margin-top:0.5rem; display: none;}

.main__info-wrap .txt {font-size:max(1.8rem, 16px); color:#fff; font-weight: 500; text-align: center; line-height:1.5; opacity: 0.7; margin-top: 2rem;}

.main__info-wrap .more { font-size: max(1.5rem, 13px); color:#fff; text-transform: uppercase; position: relative; margin-top:0rem; padding-right:3rem; transition: all 0.5s ease-in-out; opacity: 0;}
.main__info-wrap .more::after {content:''; display: block; width:2rem; height:1.2rem;  background: url('../images/main/ico_arrow02.png') no-repeat center / contain; position: absolute; top:50%; right:0; transform: translate(0, -50%);}



.main__info-wrap .item-box {transition: 0.5s ease-in-out;}
.main__info-wrap .link:hover .item-box {transform: translateY(-2rem);}
.main__info-wrap .link:hover .more {transform: translateY(2rem);  opacity: 1; }


@media (max-width: 768px){
	.main__info-wrap .list {flex-wrap: wrap; height:auto;}
	.main__info-wrap .item {flex-basis: 100%; border:0; border-bottom:1px solid  var(--color-white-a5);}
	.main__info-wrap  .link { padding:6rem 3rem 4rem;}
	.main__info-wrap  .tit {display: flex; align-items: center; justify-content: center; gap:1rem;}
	.main__info-wrap  .tit::before {width: 5rem; height:5rem; margin:0;}

	.main__info-wrap .stxt {display: none;}

}
@media (max-width: 480px){
	.main__info-wrap .txt br {display: none;}
}


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









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

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