@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* 1) main visual */
[data-mainVisual]{position:relative; height:100vh; height:calc(var(--vh, 1vh) * 100);}
[data-mainVisual] .mainVis {height:100%;}
/* text */
[data-visual="text"] {display:flex; flex-direction:column; position:absolute; top:50%; left:50%; z-index:5; max-width:1400rem; width:100%; box-sizing:content-box; color:var(--white); padding: 0 25rem; transform:translate(-50%, 0);}
[data-visual="text"] h2 {font-size:60rem; font-weight:600;}
[data-visual="text"] p {margin-top:50rem; font-size:22rem; line-height:1.6; font-weight:300;}
[data-visual="text"] :is(.swiper-control, h2, p){opacity:0; transform:translateY(30rem); transition:1s ease 0s; transition-property:opacity, transform; word-break:keep-all;}
/* img */
[data-visual="img"]{overflow:hidden; display:block; height:100%;}
[data-visual="img"] img{object-fit:cover; width:100%; height:100%; transform:scale(1.1); transition:transform 7000ms linear;}
/* video */
[data-visual="video"] video{object-fit:cover; width:100%; height:100%;}
/* active motion */
[data-visual="img"].motion__in img{transform:scale(1);}
[data-visual="text"].motion__in :is(.swiper-control, h2, p){opacity:1; transform:translateY(0rem);}
[data-visual="text"].motion__in h2{transition-delay:0.1s;}
[data-visual="text"].motion__in p {transition-delay:0.2s;}
[data-visual="text"].motion__in .swiper-control{transition-delay:0.3s;}
/* control */
[data-mainVisual] .swiper-control {position:absolute; bottom: 120rem; left:50%; transform: translateX(-50%); max-width:1400rem; width:100%; display:flex; gap: 24rem; align-items:center; z-index: 10;}
[data-mainVisual] .swiper-page {color: var(--white); font-size: 17rem; font-weight: 500; font-family: var(--font-eng);}
[data-mainVisual] .swiper-pagination-total {opacity: 0.3;}
[data-mainVisual] .swiper-page i {display: inline-block; margin: 0 10rem;}
[data-mainVisual] .pager_bar {position:relative; width:250rem; height:2px; background:rgba(255, 255, 255, 0.3); margin-right: 20rem;}
[data-mainVisual] .pager_bar:before {content:''; position:absolute; inset:0; width:0; background:#fff;}
[data-mainVisual] button {background-color:transparent; transition:opacity 0.3s ease;}
[data-mainVisual] button[class*="swiper_"]{color:#fff;}
[data-mainVisual] button[class*="swiper_"] p{font-size:0;}
[data-mainVisual] button[class*="swiper_"] i{font-size:17rem; display: block;}
[data-mainVisual] button:hover{opacity:1;}
[data-mainVisual] .scrollDown { position: absolute; bottom:60rem; right: 80rem; display: flex; flex-direction: column; gap: 11rem;  z-index: 50;}
[data-mainVisual] .scrollDown-group { position: absolute; inset: 0; margin: auto; display: grid; align-items: center; pointer-events: none; }
[data-mainVisual] .scrollDown-txt { font-size: 13rem; color: var(--white); text-transform: uppercase; writing-mode: vertical-lr; white-space: nowrap; }
[data-mainVisual] .scrollDown-arrow { margin-top: 1px; display: block; width: 16rem; height: 8rem; fill: var(--white); }

@media(prefers-reduced-motion:no-preference){
	.pager_bar.active::before{ animation: pager_bar var(--swiperTime) linear both; }
	@keyframes pager_bar {
		0%{ width: 0; }
		100%{ width: 100%; }
	}
}

@keyframes pager_bar{
	0%{width:0%;}
	100%{width:100%;}
}
@media(prefers-reduced-motion:reduce){
    [data-mainVisual] .scrollDown-arrow.a1{ opacity: .5; }
}
@media(prefers-reduced-motion:no-preference){
    [data-mainVisual] .swiper-slide::before{ scale: 1.1; }
    [data-mainVisual] .swiper-slide-active::before{ scale: 1; transition: 1.2s cubic-bezier(0.39, 0.58, 0.57, 1); }
    .scrollDown-arrow{ animation: visual-scroll-down-arrow 1.4s infinite; opacity: 0; }
    .scrollDown-arrow.a2{ animation-delay: .1s; }
}
@keyframes visual-scroll-down-arrow {
    0%, 20%, 100%{ opacity: 0; }
    60%{ opacity: 1; }
}

@media (max-width:1400px){
	[data-mainVisual] .swiper-control {padding: 0 25rem;}
	[data-mainVisual] .scrollDown {right: 40rem; bottom: 40rem;}
	[data-visual="text"]{box-sizing:border-box;}
}
@media (max-width:1024px){
	[data-visual="text"] h2 {font-size:45rem}
	[data-visual="video"] video{width:130%; transform:translateX(-20%);}
}
@media (max-width:768px){
	[data-visual="text"] {transform: translate(-50%, -50%);}
	[data-mainVisual] .swiper-control{bottom: auto; top:65%; transform: translate(-50%,-50%); margin-top: 30rem; gap: 15rem;}
	[data-mainVisual] .pager_bar {width: 200rem; margin-right: 0;}
	[data-mainVisual] .scrollDown {display: none;}
}
@media (max-width:480px){
	[data-visual="text"] h2{font-size:35rem;}
	[data-visual="text"] p br {display: none;}
	[data-visual="text"] p {font-size:16rem; margin-top: 30rem;}
	[data-mainVisual] .pager_bar {display: none;}
	[data-mainVisual] .swiper-page{font-size: 15rem;}
	[data-mainVisual] button[class*="swiper_"] i {font-size: 15rem;}
	[data-mainVisual] .swiper-control {margin-top: 50rem;}
	[data-visual="video"] video{width:200%; transform:translateX(-40%);}

}

.mainTit {}
.mainTit span {display: block; font-size: 25rem; font-weight: 600; opacity: 0.5;}
.mainTit h2 {font-size: 70rem; font-weight: 700; margin-top: 25rem;}
.mainTit p {font-size: 22rem; line-height: 1.7; font-weight: 400; margin-top: 30rem;}

/* bisuiness */
[data-main="bisuiness"] {padding: 200rem 0; width: 100%; height: 100%; background: url(/images/main/business-bg.jpg) no-repeat 50% 50% / cover;}
[data-main="bisuiness"] .mainTit {text-align: center; margin-bottom:80rem; color: var(--point);}
[data-main="bisuiness"] .mainList {display: grid; gap: 20rem; grid-template-columns: repeat(4,1fr);}
[data-main="bisuiness"] .mainTit span {color: #888}

[data-main="bisuiness"] .buBox {position: relative; display: block; color: var(--white); width: 100%; height: 100%;}
[data-main="bisuiness"] .buBox:hover::before {height: 450rem;}
[data-main="bisuiness"] .buBox::before {content: ''; position: absolute; inset: auto 0 0; height: 0; background: linear-gradient(0deg, #000074, #000074 8%, #0000); pointer-events: none; opacity: .6; transition: .5s;}
[data-main="bisuiness"] .buBox .txt {width: 100%; display: flex; flex-direction: column; position: absolute; bottom:0; left:0; padding: 0 40rem 50rem 40rem; z-index: 10;}
[data-main="bisuiness"] .buBox .txt dt {font-size: 35rem; font-weight: 600;}
[data-main="bisuiness"] .buBox .txt dd {font-size: 17rem; letter-spacing: -0.12rem; opacity: 0.7; margin-top: 20rem;}
[data-main="bisuiness"] .buBox .view {contain: content; height: 1em; display: inline-flex; align-items: center; gap: 9rem; text-transform: uppercase; font-size: 14rem; }
[data-main="bisuiness"] .buBox .img {}
[data-main="bisuiness"] .buBox .img img {width: 100%;}

@media(prefers-reduced-motion:no-preference){
	[data-main="bisuiness"] .buBox::before {transition: .3s;}
	[data-main="bisuiness"] .view {transition: .3s ease-in-out; margin-top:30rem;}
}
@media(hover){
	[data-main="bisuiness"] .buBox:not(:hover) .view{ margin: 0; height: 0; }
}
@media (max-width:1280px){
	[data-main="bisuiness"] .mainList {gap:15rem;}
	[data-main="bisuiness"] .buBox .txt {padding: 0 30rem 40rem 30rem;}
	[data-main="bisuiness"] .buBox .txt dt {font-size: 30rem;}
}
@media (max-width:1080px){
	.mainTit span {font-size: 20rem;}
	.mainTit h2 {font-size:50rem; }
	.mainTit p {font-size: 20rem; }
	[data-main="bisuiness"] {padding: 150rem 0;}
	[data-main="bisuiness"] .mainTit {margin-bottom: 50rem;}
	[data-main="bisuiness"] .mainList {grid-template-columns: repeat(2,1fr);}
}
@media (max-width:767px){
	.mainTit span {font-size:18rem}
	.mainTit h2 {font-size:45rem; margin-top: 20rem;}
	.mainTit p {font-size: 16rem; font-weight: 300; margin-top: 20rem;}
	[data-main="bisuiness"] {padding: 100rem 0;}
	[data-main="bisuiness"] .mainList {transition: 0.5s;}
	[data-main="bisuiness"] .mainTit {margin-bottom: 35rem;}
	[data-main="bisuiness"] .buBox .txt dt {font-size: 25rem;}
	[data-main="bisuiness"] .buBox .txt dd {font-size: 15rem; margin-top: 15rem;}
	[data-main="bisuiness"] .buBox .view {display: none;}
}
@media (max-width:480px){
	.mainTit span {font-size:15rem}
	.mainTit h2 {font-size:35rem;}
	.mainTit p {font-size: 15rem;}
	[data-main="bisuiness"] .mainList {grid-template-columns: repeat(1,1fr);}
	[data-main="bisuiness"] .mainList li {height: 400rem; overflow: hidden;}
	[data-main="bisuiness"] .buBox .txt {padding: 0 0 30rem 25rem;}
	[data-main="bisuiness"] .buBox .txt dt {font-size: 20rem;}
	[data-main="bisuiness"] .buBox .img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height:100%;}
	[data-main="bisuiness"] .buBox .img img {height: 100%; object-fit: cover;}
}

/* esg */
[data-main="esg"] {padding: 250rem 0 200rem; width: 100%; height: 100%; background: url(/images/main/esg-bg.jpg) no-repeat 50% 50% / cover; color: var(--white); overflow-x: hidden;}
[data-main="esg"] .inr {display: flex; justify-content: space-between;}
[data-main="esg"] .mainTit {width: 50%;}
[data-main="esg"] .mainTit p {opacity: 0.9;}
[data-main="esg"] .esgList {width: 38%;}
[data-main="esg"] .esgList li {}
[data-main="esg"] .esgList li a {position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 30rem; font-weight: 600; padding: 40rem 0; border-bottom: 1rem solid rgba(255, 255, 255, 0.3);}
[data-main="esg"] .esgList li a::before {content: ''; position: absolute; bottom: -1rem; left: 0; width: 0; height: 0; border-bottom: 1rem solid var(--white); transition: .8s;}
[data-main="esg"] .esgList li a:hover::before {width: 100%;}
[data-main="esg"] .esgList li a:hover [class^="xi-"] {transform:translateX(-7rem); transition: .3s;}

@media (max-width:1080px){
	[data-main="esg"] {padding:180rem 0 200rem;}
	[data-main="esg"] .esgList li a {font-size:25rem; padding: 30rem 0;}
}
@media (max-width:767px){
	[data-main="esg"] {padding: 100rem 0}
	[data-main="esg"] .inr {flex-direction: column; gap: 40rem;}
	[data-main="esg"] .mainTit {width: 100%;}
	[data-main="esg"] .esgList {width: 100%; display: grid; gap: 0 25rem; grid-template-columns: repeat(2,1fr);}
	[data-main="esg"] .esgList li a {font-size:18rem; padding: 22rem 0;}
	[data-main="esg"] .mo-hide {display:none;}
}

@media (max-width:480px){
	[data-main="esg"] {padding: 100rem 0 80rem; background: url(/images/main/esg-bg.jpg) no-repeat 0% 50% / cover;}
	[data-main="esg"] .esgList {gap: 0; grid-template-columns: repeat(1,1fr);}
	[data-main="esg"] .esgList li a {font-size:16rem; padding: 20rem 0; font-weight: 500;}
}

/* recruit */
[data-main="recruit"] {padding: 220rem 0; width: 100%; height: 100%; background: url(/images/main/recruit-bg.jpg) no-repeat 50% 50% / cover; color: var(--white); overflow-x: hidden;}
[data-main="recruit"] .inr {display: flex; justify-content: space-between;}
[data-main="recruit"] .mainTit {text-align: right;}
[data-main="recruit"] .mainTit p {opacity: 0.9;}
[data-main="recruit"] .recruitList {width: 38%;}
[data-main="recruit"] .recruitList li a {position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 30rem; font-weight: 600; padding: 40rem 0; border-bottom: 1rem solid rgba(255, 255, 255, 0.3);}
[data-main="recruit"] .recruitList li a::before {content: ''; position: absolute; bottom: -1rem; left: 0; width: 0; height: 0; border-bottom: 1rem solid var(--white); transition: .8s;}
[data-main="recruit"] .recruitList li a:hover::before {width: 100%;}
[data-main="recruit"] .recruitList li a:hover [class^="xi-"] {transform:translateX(-7rem); transition: .3s;}

@media (max-width:1080px){
	[data-main="recruit"] {padding:180rem 0 200rem;}
	[data-main="recruit"] .recruitList li a {font-size:25rem; padding: 30rem 0;}
}
@media (max-width:767px){
	[data-main="recruit"] {padding: 100rem 0}
	[data-main="recruit"] .inr {flex-direction: column-reverse; gap: 40rem;}
	[data-main="recruit"] .mainTit {width: 100%; text-align: left;}
	[data-main="recruit"] .recruitList {width: 100%; display: grid; gap: 0 25rem; grid-template-columns: repeat(2,1fr);}
	[data-main="recruit"] .recruitList li a {font-size:18rem; padding: 22rem 0;}
	[data-main="recruit"] .mo-hide {display:none;}
}
@media (max-width:480px){
	[data-main="recruit"] {padding: 80rem 0; background: url(/images/main/recruit-bg.jpg) no-repeat 15% 50% / cover;}
	[data-main="recruit"] .recruitList {gap: 0; grid-template-columns: repeat(1,1fr);}
	[data-main="recruit"] .recruitList li a {font-size:16rem; padding: 20rem 0; font-weight: 500;}
}

/* contact */
[data-main="contact"] {position: relative; display: flex; align-items: center; height: 850rem; overflow-x: clip;}
[data-main="contact"] .mainTit {color: var(--point);}
[data-main="contact"] .mainTit span {color: #888;}
[data-main="contact"] .mainTit h2 {font-size: 55rem; color: var(--point); margin-top: 0;}
[data-main="contact"] .num {display: flex; align-items: center; gap: 10rem; font-size: 40rem; font-weight: 700; color: var(--point); margin-top: 40rem;}
[data-main="contact"] .num em {font-size: 30rem; font-weight: 700;}
[data-main="contact"] .csRight {position: absolute; width: 50%; height: 100%; top: 0;right: 0;}
[data-main="contact"] .csRight iframe {width: 100%; height: 100%;}
[data-main="contact"] .tab-container {overflow: hidden; visibility: hidden; height: 0;}
[data-main="contact"] .tab-container.active {overflow: visible; visibility: visible; height: 100%;}
[data-main="contact"] .tab-menu {display: flex; align-items: center; margin-top: 80rem;}
[data-main="contact"] .tab-menu li {display: inline-flex; align-items: center; justify-content: center; width: 220rem; height: 80rem; font-size: 25rem; font-weight: 600; color: #bbb; cursor:pointer; border: 1rem solid #ddd;}
[data-main="contact"] .tab-menu li.active {background: var(--point); color: #fff; border-color: var(--point); }

@media (max-width:1080px){
	[data-main="contact"] {flex-direction: column; height: auto; overflow: hidden;}
	[data-main="contact"] .mainTit h2 {font-size: 45rem;}
	[data-main="contact"] .csLeft {display: flex; align-items: flex-end; justify-content: space-between; padding: 110rem 0;} 
	[data-main="contact"] .tab-menu {margin-top: 0;}
	[data-main="contact"] .tab-menu li {width: 170rem; height: 65rem; font-size: 18rem;}
	[data-main="contact"] .num {font-size: 30rem;}
	[data-main="contact"] .num em {font-size: 25rem;}
	[data-main="contact"] .csRight {position: inherit; width: 100%; height: 500rem;}
}
@media (max-width:767px){
	[data-main="contact"] .mainTit {width: 100%; text-align: center;}
	[data-main="contact"] .csLeft {flex-direction: column; gap:40rem; align-items: flex-start;}
	[data-main="contact"] .num {justify-content: center; margin-top: 30rem;}
	[data-main="contact"] .tab-menu {align-self: center;}


}
@media (max-width:480px){
	[data-main="contact"] .mainTit h2 {font-size: 35rem;}
	[data-main="contact"] .csLeft {padding: 80rem 0 50rem;}
	[data-main="contact"] .num {font-size: 25rem; }
	[data-main="contact"] .num em {font-size: 20rem;}
	[data-main="contact"] .tab-menu li {width: 140rem; height: 50rem; font-size: 16rem;}
	[data-main="contact"] .csRight {height: 400rem;}
}