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

#mainContent{position:relative;}
/* 메인비주얼 :: Background */
.main-cover{width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000;}

/* ****************** 
 * 공통 
 ********************** */
.cm-overflow-box{overflow: hidden; display: block;}
.cm-overflow-inner{display: block; font-size:inherit; font-weight:inherit; color:inherit; opacity:0;filter:Alpha(opacity=0); transform: translateY(100%);}
.cm-overflow-box.active-item .cm-overflow-inner{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.cm-overflow-box.active-item .delay01{animation-delay:0.1s;}
.cm-overflow-box.active-item .delay03{animation-delay:0.3s;}
.cm-overflow-box.active-item .delay05{animation-delay:0.5s;}
.cm-overflow-box.active-item .delay05{animation-delay:0.7s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		transform: translateY(0); 
	}
}

/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:9999999; pointer-events:none; mix-blend-mode: difference;}
.mouse-pointer-txt{position:fixed; top:0px; left:0px; z-index:9999999; 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; height:0; transform:translate(-50%,-50%) scale(0); opacity:0; transition:var(--transition-custom); background:#fff; border-radius:50%;}
.mouse-pointer.active .pointer-circle{transform:translate(-50%,-50%) scale(1); opacity:1;}
.mouse-pointer.hover .pointer-circle{width:12rem; height:12rem;}
/* text */
.mouse-pointer-txt .pointer-txt{position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size: 1.8rem; color:#fff; font-weight:500; letter-spacing: -0.01em; transition:var(--transition-custom); opacity:0; transform:translate(-50%,-50%);  mix-blend-mode:difference; visibility: hidden; }
/* circle+text :: prev,next */
.mouse-pointer-txt.next .pointer-txt.txt02,
.mouse-pointer-txt.prev .pointer-txt.txt01{visibility: visible; opacity: 1;}
.mouse-pointer-txt.next .pointer-txt.txt01,
.mouse-pointer-txt.prev .pointer-txt.txt02{visibility: hidden; opacity: 0;}
/* circle+text :: more */
.mouse-pointer.more{mix-blend-mode:initial;}
.mouse-pointer.more .pointer-circle{background: #000;}
.mouse-pointer-txt.more .pointer-txt.more{visibility: visible; opacity: 1; mix-blend-mode:initial;}

.mouse-pointer-txt{}


/* ******************  메인 비주얼 ********************** */
#mainVisual{width:100%; position:relative;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:auto;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-inner{position: relative; width: 100%; height: 0; padding-top: 91.14%; overflow:hidden;}
.main-visual-item .parallax-img-con{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.1,1.1);}
.main-visual-item .main-visual-img{
	position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 100%;
	background-size: cover !important;
	overflow: hidden;
}
/* .main-visual-item .main-visual-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} */
.main-visual-item.active-item .parallax-img-con{animation: image-zoom-out 2s 0s forwards;}

/* 메인 비주얼 :: 상단 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:flex-end; justify-content: center;
	padding-bottom: 45rem !important;
	height:100%;
	box-sizing: border-box;
}
.main-visual-txt-inner{width: 100%; box-sizing: border-box;}
.main-visual-txt-box .txt03{padding-left: 34.5rem; margin-top: 10rem; font-size: 5rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; color: #fff;}

/* 메인 비주얼 :: 하단 고정 텍스트 */
.main-visual-fixed-txt-con{position: absolute; bottom: 12rem; left: 0; width: 100%; z-index: 1;}
/* marquee */
.visual-marquee-container{position: absolute; top: -57rem; left: 0; width: 100%;}
.visual-marquee-wrapper + .visual-marquee-wrapper {position: relative; margin-top: -17rem;}
.visual-marquee-wrapper .flow-txt {display: flex; white-space: nowrap; overflow: hidden; transition: all 0.3s; font-size: 23rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.075em; color: #fff;}
.visual-marquee-wrapper.visual-marquee-wrapper02 .flow-txt {color: var(--main-color);}
.visual-marquee-wrapper .flow-txt .txt {display: inline-block; padding-right: 2rem; animation: textLoopL 50s linear infinite; animation-play-state: paused;}
.visual-marquee-wrapper.visual-marquee-wrapper02 .flow-txt .txt{animation: textLoopR 50s linear infinite; animation-play-state: paused;}
/* marquee :: active */
.visual-marquee-container.active-item .visual-marquee-wrapper .flow-txt .txt {animation-play-state: running;}
.visual-marquee-container.active-item .visual-marquee-wrapper.visual-marquee-wrapper02 .flow-txt .txt {animation-play-state: running;}

@keyframes textLoopL {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
}
@keyframes textLoopR {
	0% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
}
/* 하단 텍스트 */
.main-visual-txt-group{display: flex; flex-wrap:wrap; width: 100%; box-sizing: border-box;}
.main-visual-txt-group .left{padding-left: 8.4rem; width: 34.5rem; box-sizing: border-box;}
.main-visual-txt-group .left strong{font-size: 11rem; font-weight: 300; letter-spacing: -0.075em; color: #fff; box-sizing: border-box; display: inline-block;}
.main-visual-txt-group .left strong span{position: relative; padding: 0 10rem 3rem 0; display: inline-block; font-style: italic;}
.main-visual-txt-group .left strong span:before{position: absolute; bottom: 0; right: 3rem; font-size: 10rem; color: #fff; opacity: 0.2; content: attr(data-label); display: inline-block; font-weight: 900; letter-spacing: -0.025em; font-style: italic;}
.main-visual-txt-group .right{width: calc(100% - 34.5rem);}
.main-visual-txt-group .main-visual-txt1{font-size:3rem; line-height: 1.3; letter-spacing:-0.035em; font-weight: 500; color:#fff;}
.main-visual-txt-group .main-visual-txt2{margin-top: 2.5rem; font-size:2.1rem; line-height: 1.57; letter-spacing: 0.05em; font-weight: 300; color:rgba(255,255,255,0.7);}
.main-visual-txt-group .main-visual-more-btn{margin-top: 6rem;}
.main-visual-txt-group .main-visual-more-btn a{max-width: 14rem; font-size:1.3rem; color:#fff; padding:2rem 3rem; background-color:transparent; display: flex; align-items: center; justify-content: space-between; border: 1px dashed rgba(255,255,255,0.3); transition: var(--transition-custom)}
.main-visual-txt-group .main-visual-more-btn a i{margin-left: 2rem;}
.main-visual-txt-group .main-visual-more-btn a:hover{background-color: #000; border: 1px dashed rgba(0,0,0,0.3);}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.1,1.1)
	}
	to {
		transform: scale(1.0,1.0)
	}
}

/* 메인 비주얼 :: 컨트롤 박스 */
.main-visual-control-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 1;}
.main-visual-control-box a{display: block; width: 50%; height: 100%;}
.main-visual-control-box a.slick-hidden{display: block;}

/* 메인 비주얼 :: 스크롤아이콘 */
.scroll-icon{position:absolute; top: 23.17%; left: 18rem; z-index:9;}
.scroll-icon .line {margin: 0 auto 10px; overflow:hidden; position:relative; display:block; width:1px; height:25px; z-index:9; background-color: rgba(88,88,88,0.6);}
.scroll-icon .line::after {display: block; content: ""; width: 100%; height: 13px; background: rgba(244,244,244,0.6); position: absolute; top: 0; left: 0; animation: scroll_ani 2s infinite;}
.scroll-icon .txt{display:block; color: rgba(255, 255, 255, 0.6); font-size:12.5px; font-weight:500; margin:15px auto 0;}
.scroll-icon:not(.main-scroll-icon) .txt{width:1em;}
.scroll-icon:not(.main-scroll-icon) .txt em{display:block; writing-mode:vertical-rl;}
.scroll-icon.main-scroll-icon .txt{letter-spacing:0.025em;}
.scroll-icon .scroll-txt{display:block;}
.scroll-icon .scroll-txt .char{display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; animation-delay:calc(60ms * var(--char-index))}

@keyframes scroll_ani {
    0%, 20% {top: -45px;}
	100% {top: 100%;}
}
@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    15%,85% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

    100% {
        opacity: 0;
        transform: translateY(50%) rotateX(-90deg)
    }
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{position: relative; z-index: 10;}
.main-tit-box p{font-size: 10rem; line-height: 0.55; letter-spacing: -0.05em; font-weight: 700; color: #000;}
.main-tit-box .main-tit01{color: #000;}
.main-tit-box .main-tit02{color: var(--main-color); text-align: right;}
.cm-btn-style{max-width: 31rem; font-size:1.9rem; font-weight: 600; color:#000; padding:2.5rem 3rem; background-color:transparent; display: flex; align-items: center; justify-content: space-between; border: 1px dashed rgba(0,0,0,0.3); transition: var(--transition-custom);}
.cm-btn-style span{margin-left: 2rem; font-size: 1.3rem; letter-spacing: -0.01em; font-weight: 500; color: rgba(0,0,0,0.3); transition: var(--transition-custom);}
.cm-btn-style:hover{background-color: #000; color: #fff; border: 1px dashed rgba(0,0,0,0.3);}
.cm-btn-style:hover span{color: rgba(255,255,255,0.3);}
/* active */
.main-intro-svg .path01{position: relative; transform: translateX(360%); opacity:0; transition: all 1.6s ease-in-out;}
.main-intro-svg .path02{position: relative; transform: translateX(-260%); opacity:0; transition: all 1.6s ease-in-out;}
.main-tit-box .main-tit01{transform: translateX(30%); opacity:0; transition: all 1.2s ease-in-out;}
.main-tit-box .main-tit02{transform: translateX(-30%); opacity:0; transition: all 1.2s ease-in-out;}
.main-tit-box.active-item .main-tit01,
.main-tit-box.active-item .main-tit02,
.main-intro-svg-box.active-item .main-intro-svg .path01,
.main-intro-svg-box.active-item .main-intro-svg .path02{transform: translateX(0); opacity:1;}


/* -------- 메인 컨텐츠 :: 컨텐츠1(인트로) -------- */
#mainIntroCon{padding: 25.5rem 0 15rem; position: relative;}
#mainIntroCon:before{position: absolute; top: 0; bottom: 0; width: 45.31%; background-color: #f5f5f5; content: ''; z-index: -1;}
.main-intro-svg{margin: 0 auto; max-width: 142rem; display: block; overflow: visible;}
.main-intro-svg .path01 {fill-rule:evenodd; stroke:none; stroke-width:1px; stroke-linecap:round; stroke-linejoin:miter; fill:rgb(241, 5, 77); stroke-dasharray: 7, 8; transform: translateX(100px);}
.main-intro-svg .path02 {fill-rule:evenodd; fill: rgb(0, 0, 0); transform: translateX(-100px);}
.main-intro-svg-box.animated .main-intro-svg .path01{animation: draw-stroke 30s linear infinite;}

.main-intro-txt-con{margin-top: 8rem; display: flex; justify-content: flex-end;}
.main-intro-txt-box{max-width: 67rem; width: 100%;}
.main-intro-txt-box h5{font-size: 4rem; line-height: 1.3; letter-spacing: -0.075em; font-weight: 700; color: #000;}
.main-intro-txt-box p{margin-top: 2rem; font-size: 2.1rem; line-height: 1.57; letter-spacing: -0.055em; font-weight: 300; color: rgba(0,0,0,0.66);}
.main-intro-txt-box a{margin-top: 3rem; /*font-size: 2.4rem; line-height: 4rem; color: #000;display: inline-block;*/ }


@keyframes draw-stroke {
	100%{stroke-dashoffset: 100%; stroke-dasharray: 7, 8;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(사업소개) -------- */
#mainBusinessCon{position: relative; z-index: 1; width: 100%;}
#mainBusinessCon:before{position: absolute; top: 0; left: 0; bottom: 0; content: ''; width: 45.31%; /* height: 100vh; */ background-color: #f5f5f5;}

.main-business-con{width: 100%;}
.main-business-con-inner{padding: 145px 0; position: relative; width: 100%;}

.main-business-left{position: absolute; top: 0; right: 0; width: 100%; height: 100vh; display: flex; align-items: center; background-color: #f5f5f5;}
#mainBusinessCon.top-fixed .main-business-left{position: fixed; top: 0; left: 0; height: 100vh;}
#mainBusinessCon.bottom-fixed .main-business-left{top: auto; bottom: 0;}
.main-business-left .area-box{padding-top: calc(var(--header-height) / 1.5) !important; width: 100%; box-sizing: border-box;}
/* 텍스트 */
#mainBusinessCon .main-tit-box,
.main-business-txt{max-width: 47.5rem;}
.main-business-txt{margin-top: 8.5rem;}
.main-business-txt .txt01{font-size: 3rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color: #000;}
.main-business-txt .txt02{margin-top: 4rem; font-size: 2.2rem; line-height: 1.36; letter-spacing: -0.05em; font-weight: 500; color: #000;}
.main-business-txt .txt03{margin-top: 2.5rem; font-size: 1.8rem; line-height: 1.66; letter-spacing: -0.055em; color: rgba(0,0,0,0.66);}
.main-business-txt .btn{margin-top: 8rem;}

.main-business-right{display: flex; align-items: center;}
.main-business-right .area-box{width: 100%; box-sizing: border-box; display: flex; justify-content: flex-end;}
/* 배경 슬라이드 */
.main-business-bg-wrapper{position: absolute; top: 0; right: 0; width: 60.93%; max-width: 1400px;}
.main-business-bg-group{position: relative; width: 100%; height: 0; padding-top: 118.08%; padding-top: 114.08%; overflow: hidden;}
.main-business-bg-list{position: absolute !important; top: 0; left: 0; width: 100%; height: 100% !important;}
.main-business-bg-list .slick-track,
.main-business-bg-list .slick-slide,
.main-business-bg-list .slick-list{width: 100% !important; height: 100% !important;}
.main-business-bg-item{position: absolute !important; left: 0 !important; width: 100%; height: 100% !important; display: block !important; transition: opacity 0.2s;}
.main-business-bg-img{position: relative; width: 100%; height: 100%; display: block; -webkit-filter: blur(10px); filter: blur(10px); transform: scale(1.05); overflow: hidden;}
.main-business-bg-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
/* 슬라이드 */
.main-business-wrapper{width: 55.6rem; position: relative; z-index: 11;}
.main-business-group{width: 100%;}
.main-business-list{width: 100%;}
.main-business-item{width: 100%;}
.main-business-item + .main-business-item{margin-top: 4rem;}
.main-business-img{position: relative; width: 100%; height: 100%; padding-top: 151.35%; display: block; box-shadow: 2rem 2rem 5.7rem -1rem rgba(0,0,0,0.16); overflow: hidden;}
.main-business-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

@media all and (min-width:1281px) and (max-height: 750px){
	.main-business-txt {margin-top: 8rem;}
	.main-business-txt .btn {margin-top: 6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(글로벌 네트워크) -------- */
#mainGlobalCon{padding-top: 23vw;}
.main-global-con{position: relative;}
/* 타이틀 */
.main-global-tit-box{position: absolute; top: 14.44%; left: 0; width: 100%; z-index: 1;}
.main-global-tit-box .main-tit-box{max-width: 47.5rem;}
.main-global-tit-box .main-tit-box p{font-weight: 600;}

.global-map-con{position:relative;}
/* 배경 */
.global-map-container{position:relative; width:100%;}
.global-map-container .global-map-bg{}
.global-map-container .global-map-img-box{position:relative;}
.global-map-container .global-nation-box{position:absolute; top:0rem; left:0px; width:100%;}
.global-map-bg-box{position:relative; width: 100%; height: 0; padding-top: 75.72%;}
.global-map-bg-img{position:absolute; top:0px; left:0; width:100%; height: 100%;}
.global-map-bg-img img{position: absolute; top: 0; left: 0; width:100%; height: 100%;}

.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%;}
/* 본사 */
.head-office-box{position: absolute; top: 50%; left: 50%; margin-top: -11.4%; margin-left: -31%; width: 14.38%;}
.head-office-logo{width: 100%;}
.head-office-logo img{max-width: 100%; image-rendering: -moz-crisp-edges; image-rendering:  -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; filter: drop-shadow(1.5rem 1.5rem 2.1rem rgba(0,0,0,0.1));}
.head-office-logo span{
	border:1px dashed rgba(0, 0, 0, 0.2) ;
	border-radius: 50%;
	animation-fill-mode: both;
	position: absolute; top: -58%; left: -26%; margin: auto; opacity: 0;
	width: 136.72%; height: 209.49%;
	animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite;
}
.head-office-logo > span:nth-child(2) {animation-delay: 1s;}
.head-office-logo > span:nth-child(3) {animation-delay: 1.5s;}
.head-office-logo > span:nth-child(4) {animation-delay:2s;}
.head-office-logo > span:nth-child(5) {animation-delay:2.5s;}
.head-office-logo > span:nth-child(6) {animation-delay:4s;}
@keyframes nation-circle {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}
}
/* 각각 국가 */
.global-nation-box .nation-circle{position:absolute; left:50%; top:50%; display: block; font-size: 6rem; color: var(--main-color);}
.global-nation-box .nation-circle.nation01{margin-left: -40.1%; margin-top: 2.6%;}
.global-nation-box .nation-circle.nation02{margin-left: -33.3%; margin-top: 7.6%; font-size: 4rem;}
.global-nation-box .nation-circle.nation03{margin-left: -27.4%; margin-top: 5.6%;}
.global-nation-box .nation-circle.nation04{margin-left: -28%; margin-top: 14.2%; font-size: 4rem; color: #000; z-index: 1;}
.global-nation-box .nation-circle.nation05{margin-left: -27.3%; margin-top: 13.2%;}
.global-nation-box .nation-circle.nation06{margin-left: -26.7%; margin-top: 14.2%; font-size: 4rem;}
.global-nation-box .nation-circle.nation07{margin-left: 28.1%; margin-top: -1%; color: #000;}
.global-nation-box .nation-circle.nation08{margin-left: 29%; margin-top: 3.1%; font-size: 3rem;}
.global-nation-box .nation-circle.nation09{margin-left: 29.9%; margin-top: 2.6%;}
.global-nation-box .nation-circle i{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.global-nation-box .nation-circle i:after{position: absolute; left: 50%; margin-left: -7px; bottom: 0.2rem; content: ''; width: 1.4rem; height: 0.3rem; background-color: rgba(0,0,0,0.1); border-radius: 0.3rem; z-index: -1;}

/* 설명 */
.global-info-box{position: absolute; top: 50%; margin-top: -20rem; left: 50%; margin-left: -24.7rem; width: 70rem; z-index: 1;}
.global-info-top{display: flex; align-items: center; justify-content: center;}
.global-num-inner{width: 28rem;}
.global-num-box02,
.global-num-box{overflow: hidden; display:flex; flex-wrap: wrap; justify-content:center; height: 1em; color:#000; font-size:10.1563vw; font-weight:600;}
.global-fix-num,
.global-num-item-box{font-size:1em; letter-spacing:-0.05em; }
.global-num-item-box{height:8em;}
.global-num-item {line-height: 1em; color: #000;}
.global-num-txt{margin-top: 3.5rem; width: 100%; font-size: 1.8rem; line-height: 1.3; font-weight: 600; color: #000; text-align: center;}
.global-num-txt i{position: relative; top: 0.2rem; font-size: 2.4rem; margin-right: 0.5rem; font-weight: 400;}
.global-num-box02,
.global-num-box02 .global-num-item,
.global-num-box02 + .global-num-txt{color: var(--main-color);}
.global-info-bottom{margin-top: 6.5rem; padding: 4rem 3rem; border-top: 1px solid #000; border-bottom: 1px solid #e5e5e5;}
.global-info-list{margin: -2rem -1.5rem; display:flex; flex-wrap: wrap;}
.global-info-item{margin: 2rem 1.5rem; width: calc(25% - 3rem);}
.global-info-flag{}
.global-info-flag img{display: inline-block; height: 3.3rem;}
.global-info-txt{margin-top: 0.7rem;}
.global-info-txt h5{margin-bottom: 2rem; font-size: 1.8rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; color: #000; position: relative;}
.global-info-txt h5:before{position: absolute; top: 0.2rem; left: -3rem; width: 1px; height: 2rem; content: ''; background-color: #e5e5e5;}
.global-info-item:nth-child(1) .global-info-txt h5:before,
.global-info-item:nth-child(4) .global-info-txt h5:before{display: none;}
.global-info-txt p{position: relative; padding-left: 1.2rem; font-size: 1.2rem; line-height: 1.5; letter-spacing: -0.025em; color: #000;}
.global-info-txt p + p{margin-top: 0.7rem;}
.global-info-txt p:before{position:absolute; top: 0.6rem; left: 0; content: ''; width: 0.6rem; height: 0.6rem; background-color: #000; border-radius: 100%;}
.global-info-txt p.point:before{background-color: var(--main-color);}

@media all and (min-width: 1921px) {
	.global-num-inner{width: 35rem;}
}
@media all and (min-width: 1921px) and (min-height: 1000px) {
	.global-num-box02, .global-num-box{font-size:10vw;}
}
@media all and (min-width: 1921px) and (min-height: 1500px) {
	.global-num-box02, .global-num-box{font-size:7vw;}
}

/* active */
/* .global-num-box02.active .global-num-item-box,
.global-num-box.active .global-num-item-box{animation:count-up-ani 3s forwards;} */
@keyframes count-up-ani {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, -87.5%, 0);
	}
}
/* active */
.global-map-bg-img{opacity: 0; transition: all 0.5s ease-in-out;}
.main-global-con.active-item .global-map-bg-img{opacity: 1;}
.head-office-box .head-office-logo{opacity: 0;  transition: all 0.7s ease-in-out;}
.head-office-box .head-office-logo img{transform: scale(0); transition: all 0.7s ease-in-out;}
.main-global-con.active-item .head-office-box .head-office-logo{opacity: 1;}
.main-global-con.active-item .head-office-box .head-office-logo img{transform: scale(1); transition-delay:0.3s;}
.nation-circle{opacity:0; transform:translateY(30px); transition: all 0.7s ease-in-out;}
.main-global-con.active-item .nation-circle{opacity:1; transform:translateY(0);}
.main-global-con.active-item .nation-circle:nth-child(1){transition-delay:0.2s;}
.main-global-con.active-item .nation-circle:nth-child(2){transition-delay:0.4s;}
.main-global-con.active-item .nation-circle:nth-child(3){transition-delay:0.6s;}
.main-global-con.active-item .nation-circle:nth-child(4){transition-delay:0.7s;}
.main-global-con.active-item .nation-circle:nth-child(5){transition-delay:0.8s;}
.main-global-con.active-item .nation-circle:nth-child(6){transition-delay:0.9s;}
.main-global-con.active-item .nation-circle:nth-child(7){transition-delay:1.1s;}
.main-global-con.active-item .nation-circle:nth-child(8){transition-delay:1.2s;}
.main-global-con.active-item .nation-circle:nth-child(9){transition-delay:1.4s;}
.main-global-con.active-item .nation-circle:nth-child(10){transition-delay:1.5s;}
.global-info-top{opacity:0; transform:translateY(30px); transition: all 0.7s ease-in-out;}
.global-info-top.active-item{opacity:1; transform:translateY(0); transition-delay:0.3s;}
.global-info-top.active-item .global-num-box02 .global-num-item-box,
.global-info-top.active-item .global-num-box .global-num-item-box{animation:count-up-ani 3s forwards; animation-delay:0.5s;}
.global-info-bottom{opacity:0; transform:translateY(30px); transition: all 1s ease-in-out;}
.global-info-bottom.active-item{opacity:1; transform: translateY(0);}


/* -------- 메인 컨텐츠 :: 컨텐츠4(ESG) -------- */
#mainEsgCon{padding: 19rem 0 17rem; background: url('/images/main/main_esg_bg.jpg') center/cover no-repeat;}
#mainEsgCon .area-box{display: flex; justify-content: space-between; width: 100%; box-sizing: border-box;}

.main-esg-left{width: 36rem;}
.main-esg-left .main-tit-box .main-tit01{color: #fff;}

.main-esg-right{width: calc(100% - 36rem);}
.main-esg-right-top{}
.main-esg-right-top .tit{font-size: 3rem; line-height: 1.3; letter-spacing: -0.025em; color: #fff; font-weight: 700;}
.main-esg-right-top .txt{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.83; letter-spacing: -0.065em; font-weight: 300; color: rgba(255,255,255,0.5);}
.main-esg-right-bottom{margin-top: 12rem;}
.main-esg-right-list{display:flex; flex-wrap: wrap;}
.main-esg-right-item{padding: 2rem 4.5rem 3.5rem; width: 33.33%; box-sizing: border-box; border-left: 1px dashed rgba(255,255,255,0.2);}
.main-esg-right-item:last-child{border-right: 1px dashed rgba(255,255,255,0.2);}
.main-esg-right-item.active-item:nth-child(1) .cm-overflow-inner{animation-delay: 0.2s;}
.main-esg-right-item.active-item:nth-child(2) .cm-overflow-inner{animation-delay: 0.4s;}
.main-esg-right-item.active-item:nth-child(3) .cm-overflow-inner{animation-delay: 0.6s;}
.main-esg-right-item .icon{}
.main-esg-right-item .icon img{display: inline-block; height: 5.6rem;}
.main-esg-right-item .tit{margin-top: 3.5rem; font-size: 3rem; line-height: 1.33; letter-spacing: -0.065em; font-weight: 300; color: #fff;}
.main-esg-right-item .tit p{margin-top: 3.5rem; font-size: 2.6rem; line-height: 1.33; letter-spacing: -0.065em; font-weight: 300; color: #fff;}
.main-esg-right-item .tit span{margin-top: 1rem; font-size: 1.6rem; color: rgba(255,255,255,0.2); display: block; letter-spacing: 0;}
.main-esg-right-item .txt{margin-top: 2.5rem; font-size: 1.8rem; line-height: 1.83; letter-spacing: -0.065em; font-weight: 300; color: rgba(255,255,255,0.5);}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Summary) -------- */
#mainSummaryCon{padding: 11.5rem 0 9rem; position: relative;}
#mainSummaryCon:before{position: absolute; content: ''; top: 0; bottom: 0; left: 50%; width: 50%; background-color: #f5f5f5;}
#mainSummaryCon .area-box{display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; position: relative;}
.main-summary-left{padding-top: 10rem; width: 56.7rem;}
.main-summary-left .main-tit-box p{font-weight: 600;}
.main-summary-txt{margin-top: 8.5rem;}
.main-summary-txt .txt01{font-size: 1.8rem; line-height: 1.83; letter-spacing: -0.01em; color: rgba(0,0,0,0.66);}
.main-summary-txt .btn{margin-top: 6rem;}

.main-summary-right{width: 85rem; display: flex; justify-content: space-between;}
.main-summary-right-item{width: calc(50% - 3rem); padding-top:0; padding-bottom: 13rem; opacity: 0; transition: var(--transition-custom2);}
.main-summary-right-item + .main-summary-right-item{padding-top:13rem; padding-bottom: 0;}
.main-summary-right-inner{padding: 5.5rem 4.5rem; border: 1px solid #d8d8d8; width: 100%; height: 65rem; box-sizing: border-box; box-shadow: 1.5rem 1.5rem 2.1rem -0.7rem rgba(42,42,42,0.1); background-color: #fff;}
/* STOCK PRICE */
.stock-price-top{padding: 5.5rem 0; position: relative; text-align: center;}
.stock-price-top .bg{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 30rem; font-weight: 900; color: rgba(0,0,0,0.07); display: block;}
.stock-price-top .tit{font-size: 2.3rem; line-height: 1.3; font-weight: 700; color: #1c1c1c; position: relative;}
.stock-price-top .total{margin-top: 2rem; font-size: 8rem; line-height: 1.1; font-weight: 700; color: var(--main-color); font-style: italic; position: relative;}
.stock-price-top .result-group{margin-top: 1rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: center; position: relative;}
.stock-price-top .result-group span{font-size: 1.8rem; line-height: 1.3; color: #1c1c1c; display: inline-block;}
.stock-price-top .result-group .result01{position: relative; padding-left: 2rem;}
.stock-price-top .result-group .result01:before{position: absolute; top: -0.4rem; left: -0.4rem; font-size: 2.5rem; display: inline-block; font-family: xeicon;}
.stock-price-top .result-group .result01.up:before{content: "\e930"; color: #fe0000;}
.stock-price-top .result-group .result01.down:before{content: "\e936"; color: #1200fe;}
.stock-price-top .result-group .result02{margin-left: 0.7rem;}
.stock-price-bottom{margin-top: 3rem;}
.stock-price-bottom dl{width: 100%; height: 5.5rem; display: flex; flex-wrap:wrap; align-items: center;}
.stock-price-bottom dl + dl{border-top: 1px solid #e5e5e5;}
.stock-price-bottom dt, 
.stock-price-bottom dd{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.05em; color: #1c1c1c; word-break: break-word;}
.stock-price-bottom dt{width: 16rem;}
.stock-price-bottom dd{width: calc(100% - 16rem); letter-spacing: 0; text-align: right;}

/* CAREERS */
.main-careers-img{}
.main-careers-img span{position: relative; width: 100%; height: 0; padding-top: 100%
; display: block;}
.main-careers-txt{margin-top: 4rem;}
.main-careers-txt .tit{font-size: 2.3rem; line-height: 1.3; font-weight: 700; color: #1c1c1c;}
.main-careers-txt .txt{margin-top: 2rem; font-size: 2.2rem; line-height: 1.5; letter-spacing: -0.065em; color: #1c1c1c;}
.main-careers-txt .btn{margin-top: 3.5rem;}
.main-careers-txt .btn a{width: 100%; font-size:1.5rem; letter-spacing: -0.05em; color:#000; padding:1.2rem 2rem; background-color:transparent; display: flex; align-items: center; justify-content: space-between; border: 1px dashed #c3c3c3; transition: var(--transition-custom); box-sizing: border-box;}
.main-careers-txt .btn a i{margin-left: 2rem; font-size: 2.4rem;}
.main-careers-txt .btn a:hover{color: #fff; background-color: #000; border: 1px dashed rgba(0,0,0,0.3);}

/* active */
.main-summary-right-item{opacity:0; transform:translateY(30px); transition: all 1s ease-in-out;}
.main-summary-right-item.active-item{padding-top:13rem; padding-bottom:0; opacity: 1;}
.main-summary-right-item + .main-summary-right-item.active-item{padding-top:0; padding-bottom:13rem;}