@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000;}
/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video.start iframe{opacity:0.8;filter:Alpha(opacity=80);}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
    mix-blend-mode: screen;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:7.2rem; font-weight:300; letter-spacing:-0.025em; color:#fff;}
.main-visual-txt-box .main-visual-txt2{margin-top: 1.5rem; font-size:16rem; letter-spacing:-0.025em; font-weight: 600; color: var(--main-color); position: relative;}
.main-visual-txt-box .main-visual-txt2 span {opacity: 0; transition: opacity 0.3s;}
.main-visual-txt-box .main-visual-txt3{margin-top: 5rem; font-size:2.4rem; line-height:1.5; font-weight: 300; color:rgba(255,255,255,0.6);}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.7s;}
.active-item .main-visual-txt2{animation-delay:0.5s;}
.active-item .main-visual-txt3{animation-delay:2.2s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:10%; left:0; width: 100%; z-index:9;}
.main-scroll-icon span{position: relative; width: 0.2rem; height: 13.8rem; background-color: rgba(255,255,255,0.05); display: block; overflow: hidden;}
.main-scroll-icon span::before {position: absolute;  top: 0; display: block; content: ''; width: 0.2rem; height: 50%; animation: scroll_ani 2s infinite; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.24+62,1+100 */
 /* FF3.6-15 */
 /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(255,255,255,0)), color-stop(0.62, rgba(255,255,255,0.24)), to(rgba(255,255,255,1)));
background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.24) 62%, rgba(255,255,255,1) 100%);
background: -moz-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.24) 62%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.24) 62%, rgba(255,255,255,1) 100%);
background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.24) 62%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}

@keyframes scroll_ani {
    0%, 20% {top: -50%;}
	100% {top: 100%;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{text-align:center;}
.main-tit-box .main-tit{font-size:8rem; line-height: 1.1; font-weight:600; letter-spacing: -0.025em; color: #111;}
.main-tit-box .main-sub-tit{margin-top:2.5rem; font-size:2.2rem; font-weight:300; line-height:1.5; color: rgba(51,51,51,0.8);}


/* -------- 메인 컨텐츠 :: 컨텐츠1(BUSINESS) -------- */
#mainBusinessCon{padding:18.5rem 0 7rem; position: relative;}
.main-business-bg{position: absolute; z-index: -1;}
.main-business-bg img{max-width: 100%;}
.main-business-bg.bg01{top: 12rem; left: 0; width: 21.87%;}
.main-business-bg.bg02{top: 7rem; right: 11rem; width: 11.66%;}
.main-business-bg.bg03{top: 84rem; right: 0; width: 25.57%;}

.main-business-wrapper{margin-top: 6.5rem; height: 54rem; height: 38rem;}
.main-business-list{margin: 0 -3.12%; margin: 0 -1.56%; display: flex; flex-wrap:wrap;}
.main-business-item{margin: 0 3.12%; width: 27.09%; margin: 0 1.56%; width: 46.88%;}
.main-business-item a{padding: 4rem 5rem 0; height: 34.5rem; height: 27rem; background-color: #eee; border-radius: 4rem; border: 1px solid #cfcfcf; box-sizing: border-box; display: block; position: relative; overflow: hidden;}
.main-business-item a:before{position: absolute; bottom: -27.7rem; right: -42rem; content: ''; width: 42rem; height: 27.7rem; background: url('/images/main/main_business_bg.png') center/cover no-repeat;}
.main-business-txt{}
.main-business-txt .tit{font-size: 4rem; line-height: 1.37; letter-spacing: -0.025em; font-weight: 300; color: #333;}
.main-business-txt .tit b{font-weight: 600;}
.main-business-txt .txt{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.55; font-weight: 300; color: #333;}
.main-business-btn{margin-top: 4.5rem; position: relative; width: 3rem; height: 3rem; display: block;}
.main-business-btn .cir{width: 100%; height: 100%; font-size: 1.6rem; line-height: 3rem; color: #333; text-align: center; background-color: #fff; border-radius: 100%;}
.main-business-btn .cir i{position: relative; top: 0.2rem;}
.main-business-btn span{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border:1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; opacity: 0; margin: 0; box-sizing: border-box; animation-fill-mode: both; animation: business-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; visibility: hidden;}
.main-business-btn span:nth-child(2) {
	animation-delay: 1s; 
}
.main-business-btn span:nth-child(3) {
	animation-delay: 1.5s;
}
.main-business-btn span:nth-child(4) {
	animation-delay:2s;
}
.main-business-btn span:nth-child(5) {
	animation-delay:2.5s;
}
@keyframes business-circle {
	0% {
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		transform: scale(1);
		opacity: 0; 
	}
}
/* active */
.main-business-item a{transition: var(--transition-custom); transition-property: background-color, border-color, height;}
.main-business-txt .tit,
.main-business-txt .txt{transition: var(--transition-custom); transition-property: color;}

@media all and (min-width:801px){
	.main-business-item.active-pc a{height: 54rem; height: 38rem; background-color: var(--main-color); border-color: var(--main-color);}
	.main-business-item.active-pc a:before{bottom: -1px; right: -1px; transition: var(--transition-custom); transition-property: bottom, right;}
	.main-business-item.active-pc .main-business-txt .tit{color: #fff;}
	.main-business-item.active-pc .main-business-txt .txt{color: rgba(255,255,255,0.8);}
	.main-business-item.active-pc .main-business-btn span{visibility: visible;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(IR·PR) -------- */
#mainIrCon{padding: 7rem 0 14rem;}
.main-ir-tit{font-size: 7rem; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; color: #111;}

.main-ir-box{margin-top: 3rem; display: flex; align-items: flex-end;}
.main-ir-total{width: 50rem; font-size: 15rem; letter-spacing: -0.07em; font-weight: 700; color: #111;}
.main-ir-result{margin-left: 2rem; padding-bottom: 2rem;}
.main-ir-result ul{width: 38rem; display: flex; flex-wrap:wrap; justify-content: space-between;}
.main-ir-result ul li{width: calc(50% - 2rem); display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.main-ir-result ul li:nth-child(2)~*{margin-top: 1.5rem;}
.main-ir-result ul li .tit{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.065em; color: #666;}
.main-ir-result ul li .result{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: #333;}
.main-ir-result ul li .result:before{font-size: 2rem; display: inline-block; vertical-align: middle; font-family: xeicon;}
.main-ir-result ul li .result.up:before{content: "\e930"; color: #c41111;}
.main-ir-result ul li .result.down:before{content: "\e936"; color: #1200fe;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(ESG) -------- */
#mainEsgCon{position: relative; width: 100%; height: 100vh; overflow: hidden;}
.main-esg-bg{width: 75%; height: 50%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); transition: all 0.6s; overflow: hidden;/* position: absolute; top: 0; left: 0; width:100%; height:100%;  */}
.main-esg-bg span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-esg-bg.on{width: 100%; height: 100%;}
.main-esg-bg.on span{transform:scale(1.0,1.0);}
#mainEsgCon .area{width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-wrap:wrap; align-items: center; position: relative;}

.main-esg-con{width: 100%; display: flex; flex-wrap:wrap; opacity: 0; transition: opacity 0.6s;}
.main-esg-con.on{opacity: 1;}
.main-esg-left{width: 19.5rem; font-size: 7rem; letter-spacing: -0.025em; font-weight: 600; color: #fff;}

.main-esg-right{padding-top: 1rem; width: calc(100% - 19.5rem);}
.main-esg-tab-wrapper{width: 100%;}
.main-esg-tab-list{width: 100%;}
.main-esg-tab-list ul{display: flex; flex-wrap:wrap; width: 100%;}
.main-esg-tab-list li{margin-right: 3rem;}
.main-esg-tab-list li a{font-size: 1.8rem; line-height: 3.5rem; letter-spacing: -0.075em; font-weight: 500; color: #fff; display: inline-block; position: relative;}
.main-esg-tab-list li a:before{position: absolute; left: 50%; bottom: 0; width: 0; height: 0.3rem; background-color: #fff; content: ''; transition: var(--transition-custom);}
.main-esg-tab-list li a:hover:before,
.main-esg-tab-list li.selected a:before{left: 0; width: 100%;}

.main-esg-tab-content{margin-top: 3.5rem;}
.main-esg-tab-content .txt{font-size: 4rem; line-height: 1.25; letter-spacing: -0.075em; font-weight: 500; color: #fff;}
.main-esg-tab-content .btn{margin-top: 5rem;}
.main-esg-tab-content .btn a{width: 3rem; height: 3rem; background-color: #74bc57; border-radius: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
.main-esg-tab-content .btn a i{font-size: 1.6rem; color: #fff;}


/* -------- 메인 컨텐츠 :: 컨텐츠4(PRESS RELEASE) -------- */
#mainPressCon{padding: 17rem 0 7.5rem; position: relative;}
#mainPressCon .main-tit-box{text-align: left;}
#mainPressCon .main-tit-box .main-sub-tit{font-size: 2rem; letter-spacing: -0.05em; font-weight: 500;}
.main-business-bg.bg04{top: -5rem; left: 0; width: 15.36%;}
.main-business-bg.bg05{top: 76.5rem; right: 12rem; width: 13.33%;}

.main-press-btn{margin-top: 4rem;}
.main-press-btn .btn{width: 9rem; height: 9rem; text-align: center; background-color: var(--main-color); border-radius: 100%; display: block; box-shadow: 1.9rem 1.9rem 6rem 0 var(--main-color); transition: all 0.3s;}
.main-press-btn .btn i{font-size: 2.4rem; color: #000; line-height: 9rem;}
.main-press-btn .btn:hover{transform: scale(1.1);}
.main-press-btn .btn:hover i{animation: rtmotion 0.3s ease-in-out;}

@keyframes rtmotion{
	0% {transform: rotate(0deg);}
	25% {transform: rotate(45deg);}
	50% {transform: rotate(90deg);}
	75% {transform: rotate(135deg);}
	100% {transform: rotate(180deg)}
}

.main-press-wrapper{margin-top: 8.5rem;}
.main-press-list{border-top: 1px solid rgba(0,0,0,0.1);}
.main-press-item{border-bottom: 1px solid rgba(0,0,0,0.1);}
.main-press-item > a{display:flex; align-items: center; position:relative; width: 100%; height:8.6rem; line-height: 8.6rem;}
/* 왼쪽 타이틀 */
.main-press-info-con{width:100%; padding-right: 10rem; box-sizing: border-box;}
.main-press-info-con .bbs-subject-txt {padding-right: 1.5rem; max-width: 90%; text-overflow: ellipsis; white-space: nowrap; font-size:1.8rem; color:#333; letter-spacing:-0.075em; display: inline-block; vertical-align:middle; overflow: hidden;}
.main-press-info-con .bbs-more-btn{font-size: 1.8rem; color:#333; opacity: 0; transition:all 0.3s; display: inline-block; vertical-align: middle;}
/* 오른쪽 날짜 */
.main-press-date-con{position:absolute; right:0; font-size: 1.5rem; letter-spacing: -0.075em; color: #333; opacity: 0.8; text-align:right; transition:all 0.3s;}
/* 이미지 영역 */
.main-press-item .item-image_wrapper {position: absolute; left: 0; width: 40rem; height: 40rem; border-radius: 100%; overflow: hidden; pointer-events: none; opacity: 0; z-index: 10;}
.main-press-item .item-image_inner {position: relative; width: 100%; height: 100%; overflow: hidden;}
.main-press-item .item-image_inner .item-image {position: absolute; left: 0; top: 0; height: 100%; width: 100%; object-fit: cover;}
.main-press-arrow{display: none;}
/* hover */
.main-press-item a:hover .bbs-more-btn {opacity: 1;}
.main-press-item a:hover .main-press-date-con{opacity: 1;}

@media all and (min-width:801px){
	.main-press-list.swiper-wrapper{display: block; transform: none !important;}
	.main-press-item.swiper-slide{width: 100% !important;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Consultiong) -------- */
#mainConsultiongCon{padding: 17rem 0 14.5rem;}
.main-consultiong-box{max-width: 53rem; position: relative;}
.main-consultiong-box .txt01{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: #333;}
.main-consultiong-box .txt02{margin-top: 2.5rem; font-size: 4rem; line-height: 1.37; letter-spacing: -0.065em; font-weight: 300; color: #333;}
.main-consultiong-box .txt02 b{font-weight: 700;}
.main-consultiong-box .btn{position: absolute; right: -9.4rem; top: 2.5rem; width: 9rem; height: 9rem; background-color: var(--main-color); border-radius: 100%; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 1.9rem 1.9rem 6rem 0 var(--main-color); transition: all 0.3s;}
.main-consultiong-box .btn:before{position: absolute; margin: auto; top: 50%; left: 50%; margin-top: -9.3rem; margin-left: -9.3rem; content: ''; background: url("../images/main/main_consultiong_bg.png") center/cover no-repeat; width: 18.6rem; height: 18.6rem; animation: spin 10s infinite linear;}
.main-consultiong-box .btn i{font-size: 2.4rem; color: #333;}
.main-consultiong-box .btn:hover{transform: scale(1.1);}
.main-consultiong-box .btn:hover:before{animation-play-state: paused;}
.main-consultiong-box .btn:hover i{animation: navani 0.3s ease-in-out;}

@keyframes navani{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}
@keyframes spin {
    0%  {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}


/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; mix-blend-mode: difference;}
.mouse-pointer-txt{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none;}
.is-mobile .mouse-pointer{visibility: hidden; opacity: 0;}
.is-mobile .mouse-pointer-txt{visibility: hidden; opacity: 0;}
/* circle */
.mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width:0.8rem; height:0.8rem; transform:translate(-50%,-50%) scale(1); transition:var(--transition-custom); background: var(--main-color); border-radius:50%;}
.cm-magnetic-btn{transition:transform 0.1s}