@charset "utf-8";


/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}
@media all and (max-width:1280px){
	.main-slide-con > div{transform:none !important;}
}



.area-main {
    max-width: var(--area-main-width);
    margin: 0px auto;
}
/* ****************** 메인 loading ********************** */
.ms-preloader{width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000;}
.main-scroll-cover{width: 100%; height: 100vh; position: absolute; z-index: 99999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: transparent;}

.main-wrap .nav-open-btn-box,
.main-wrap #headerInnerWrap {margin-top: calc(-1 * var(--header-height)); opacity: 0; transition: top 0.4s ease-in-out, margin-top ease-in-out 1.1s, opacity ease-in-out 0.5s, background-color 0.4s ease-in-out, transform 0.4s ease-in-out;}
.main-wrap .header-lang03-mo{margin-top: calc(-1 * var(--header-height)); opacity: 0; transition: top 0.4s ease-in-out, margin-top ease-in-out 1.1s, opacity ease-in-out 0.5s, background-color 0.4s ease-in-out, transform 0.4s ease-in-out;}

#mainVisualControls,
.scroll-down-wrap{margin-bottom: -5rem; opacity: 0; transition: margin-bottom ease-in-out 1.1s, opacity ease-in-out 0.5s;}

.main-wrap.index-active #headerInnerWrap,
.main-wrap.index-active .nav-open-btn-box,
.main-wrap.index-active .header-lang03-mo {margin-top:0; opacity:1;}
.main-wrap.index-active #mainVisualControls,
.main-wrap.index-active .scroll-down-wrap{margin-bottom:0; opacity:1;}

/* .main-fullpage-slider{position: relative; width: 100%; height: 100vh;}
.main-section.swiper-slide {position: relative; overflow: hidden; height: 100%;}
.main-section #mainVisual,
.main-section #mainProductCon{width: 100%; height: 100%;} */

@media all and ( min-width: 801px ){
	.main-wrap #cmProductInquiryBox{transform: translateX(6rem); opacity: 0; transition: transform ease-in-out 1.1s, opacity ease-in-out 0.5s, right 0.8s ease-in-out;}
	.main-wrap.index-active #cmProductInquiryBox{transform: translateX(0); opacity: 1;}
}
@media all and ( min-width: 1281px ){
	/* -------- Header :: fixed -------- */
	#header.hidden{top:0;}
	#header.hidden #headerInnerWrap{top: 0; background-color:#fff; border-bottom:1px solid #eee;}
	#header.hidden .nav-open-btn-box{top: 0;}
	#header.hidden .cm-logo-svg .cls-2{fill:#2f367e;}
	#header.hidden .cm-logo-svg .cls-4{fill:#76a0c7;}
	#header.hidden .cm-logo-svg .cls-5{fill:#2561ae;}
	#header.hidden #gnb > ul > li > a{color: #000; font-weight: 700;}
	#header.hidden #gnb > ul > li.selected > a{color: #fff;}
	#header.hidden .nav-open-btn{top:0;}
	#header.hidden .sitemap-line-btn .line,
	#header.hidden .nav-open-btn .line{background-color:#333}

	/* -------- Header :: hidden -------- */
	#header.hidden.scroll-up .nav-open-btn-box{transform: translateY(0);}
	#header.hidden.scroll-up #headerInnerWrap{transform: translateY(0);}
	#header.hidden.scroll-down .nav-open-btn-box{transform: translateY(calc(-1 * (var(--header-height) + 1px)));}
	#header.hidden.scroll-down #headerInnerWrap{transform: translateY(calc(-1 * (var(--header-height) + 1px)));}
}

@media all and ( max-width: 1280px ){
	.main-wrap #headerInnerWrap{position: fixed; /*top: var(--header-top);*/}
}
@media all and ( max-width: 800px ){
	.main-fullpage-slider{position: relative; width: 100%; height: auto !important;}
	.main-fullpage-slider > .swiper-wrapper{height: auto !important; flex-wrap:wrap; transform: none !important;}
	.main-section.swiper-slide {position: relative; overflow: hidden; height: auto !important;}
	.main-section #mainVisual{height: 100%;}
	.main-section #mainProductCon{height: auto;}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000;}
/* .main-visual-container{position:fixed; top:0; left:0; width:100%; height:100%;} */
.main-visual-item{position:relative; height:100vh;}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-container,
.main-visual-swiper{position:relative; z-index:auto; width: 100%; height:100vh !important;}
.main-visual-container .swiper-slide {
	overflow: hidden;
	background-color:#333;
}
.main-visual-container .slide-inner {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background-size: cover !important;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
	background-color: #000;
}
.main-visual-item .main-visual-img{
    display:block;
    width:100%;
    height:100vh;
    background-size:cover !important;
}
.main-visual-con video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.main-visual-con #player{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-visual-con iframe{
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ 
min-height: calc(100vh + 340px); 
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;}

/* -------- 메인비주얼 :: 컨트롤러 -------- */




#mainVisualControls{position:absolute; bottom:85px; bottom: 8.67%; left:0; width:100%; z-index:2;}
#mainVisualControls .area-box{}
/* 컨트롤러 :: 진행바 */
#mainVisualControls .main-visual-pagination.swiper-pagination{margin: 0 1rem; display: inline-block; vertical-align: middle; width:auto; position: static;}
#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {display: inline-block; vertical-align: middle; position:relative; width:70px; height:auto; background:none; margin-left:10px; opacity:1;filter:Alpha(opacity=100); border-radius:0;}
#mainVisualControls .main-visual-pagination button:first-child {margin-left:0;}
#mainVisualControls .main-visual-pagination .progress-bar {display:block;position:absolute; bottom:0; left:0; display:block; width:100%; height:4px; background-color: rgba(255,255,255,0.3); box-sizing: border-box;}
#mainVisualControls .main-visual-pagination .swiper-pagination-bullet-active .progress-bar{background-color: rgba(255,255,255,0.1);}
#mainVisualControls .main-visual-pagination .progress-bar .bar{display:block; position:absolute; left:0; bottom:0; width:0; height:4px; background-color: #fff;}
/* 컨트롤러 :: 이전,다음 */
#mainVisualControls .main-visual-arrow{display: inline-block; vertical-align: middle; position:relative;}
#mainVisualControls .main-visual-arrow > button{margin: 0 3px; display: inline-block; vertical-align: middle; position: static; color:#fff; text-align:center; width: 20px; height: 30px; background: none;}
#mainVisualControls .main-visual-arrow > button:after{display: none;}
#mainVisualControls .main-visual-arrow > button i{font-size: 18px; line-height: 28px;}
#mainVisualControls .main-visual-arrow > button:not(.main-pause-btn) i{font-size: 20px;}
#mainVisualControls .main-visual-arrow .main-prev-btn i{text-indent: -2px;}
#mainVisualControls .main-visual-arrow .main-next-btn i{text-indent: 2px;}
#mainVisualControls .main-visual-arrow .main-play-btn{display: none;}
#mainVisualControls .main-visual-arrow .main-play-btn i{text-indent: 2px;}

/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
     transform: scale(1.05,1.05);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	justify-content: center;
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:8.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.05em; color: #fff;text-align:center}
.main-visual-item .main-visual-txt-con .main-visual-txt2{margin-top: 2.5rem; font-size:4.5rem; line-height: 1.47; font-weight: 400; color:#fff; text-align:center}

.main-visual-item .main-visual-txt-con .main-visual-txt1 span {color: var(--main-color);}
.main-visual-item .main-visual-txt-con .main-visual-txt2 span {color: var(--main-color);}
/* 메인 비주얼 :: active효과 */
.main-visual-item.swiper-slide-active .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
.main-visual-item.swiper-slide-active .main-visual-txt1,
.main-visual-item.swiper-slide-active .main-visual-txt2{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.first.swiper-slide-active .main-visual-txt-con .main-visual-txt1,
.main-visual-item.first.swiper-slide-active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:1s; animation-delay:1s;}
.main-visual-item.swiper-slide-active .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.swiper-slide-active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(5rem); 
		transform: translateY(5rem); 
	}
	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-visual-counter { border:0; cursor:pointer; z-index:9; font-size:24px; color:#fff;}
.main-visual-counter .main-prev-btn{font-size:24px; color:#fff; padding:0 5px}
.main-visual-counter .main-next-btn{font-size:24px; color:#fff; padding:0 5px}

/* 메인 비주얼 :: 카운터 */
.main-visual-counter {position:absolute; bottom:5rem; left:0; width:100%; /* margin-top:11.3rem; */ z-index:11; font-size:13px; color:#fff; font-weight:600; transform: translateY(100%); transition: all 1.1s ease-in-out;}
.main-visual-counter .inner-box {display:flex; justify-content:center; align-items:center; }
.main-visual-counter .count-box {margin:0 18px;}
.main-visual-pagination span {display:inline-block; vertical-align:middle; margin-left:20px; position:relative; width:20px; text-align:center}
.main-visual-pagination span:before {position: absolute; content: '0'; font-size: 13px; font-weight: 400; color: #fff; left:-5px;  }
body.active .main-visual-counter {transform:translateY(0); opacity:1;}



/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
.scroll-down-wrap{position: fixed; bottom: 8%; left: 50%; margin-left: 63rem; width: 14rem; display: flex; align-items: center; justify-content: flex-end; z-index: 1;}
.scroll-down-wrap.index-t-ver{position: absolute;}
.scroll-down-wrap .txt{font-size:1.2rem; letter-spacing:-0.05rem; color:#fff; margin-right:1.5rem; transition:var(--transition-custom);}
.scroll-down-wrap .scroll-icon{position: relative; width:0.4rem; height:4rem; background:rgba(255,255,255,0.1); transition:var(--transition-custom); overflow:hidden;}
.scroll-down-wrap .scroll-icon span{position: absolute; display: block; width:0.4rem; height:0.4rem; background:#fff; top:0.3rem; left:50%; transform:translateX(-50%); animation: scroll-icon-ani 2s ease-in-out infinite; transition:var(--transition-custom);}

.scroll-down-wrap .scroll-txt{display:inline-block; color:#fff; font-weight:700;}
.scroll-down-wrap .scroll-txt em{font-size:1em; display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; font-weight:500;}
.scroll-down-wrap .scroll-txt em:nth-child(1){animation-delay:1s;}
.scroll-down-wrap .scroll-txt em:nth-child(2){animation-delay:1.04s;}
.scroll-down-wrap .scroll-txt em:nth-child(3){animation-delay:1.08s;}
.scroll-down-wrap .scroll-txt em:nth-child(4){animation-delay:1.12s;}
.scroll-down-wrap .scroll-txt em:nth-child(5){animation-delay:1.16s;}
.scroll-down-wrap .scroll-txt em:nth-child(6){animation-delay:1.2s;}
.scroll-down-wrap .scroll-txt em:nth-child(7){animation-delay:1.24s;}
.scroll-down-wrap .scroll-txt em:nth-child(8){animation-delay:1.28s;}
.scroll-down-wrap .scroll-txt em:nth-child(9){animation-delay:1.32s;}
.scroll-down-wrap .scroll-txt em:nth-child(10){animation-delay:1.36s;}
.scroll-down-wrap .scroll-txt em:nth-child(11){animation-delay:1.4s;}

@keyframes scroll-icon-ani {
	0% {
		top:-1rem;
		opacity:0;
	}
	10% {
		top:-1rem;
		opacity:1;
	}
	32% {
		top:-1rem;
		opacity:1;
	}
	80% {
		top:4.3rem;
		opacity:1;
	}
	100% {
		top:4.3rem;
		opacity:0;
	}
}

@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    20%,80% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

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

@media all and (max-width:1600px){
	/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
	.scroll-down-wrap{right: var(--area-padding); left: auto; margin-left: 0;}
}
@media all and ( max-width: 800px ){
	/* -------- 메인비주얼 :: 컨트롤러 -------- */
	#mainVisualControls{bottom:calc(8.88% + 6rem) ; text-align: center;}
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination.swiper-pagination{margin: 0 1rem;}
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:70px; margin-left:10px;}
	#mainVisualControls .main-visual-pagination .progress-bar {height:4px;}
	#mainVisualControls .main-visual-pagination .progress-bar .bar{height:4px;}
	/* 컨트롤러 :: 이전,다음 */
	#mainVisualControls  > button{margin: 0 3px; width: 20px; height: 30px;}
	#mainVisualControls  > button i{font-size: 18px; line-height: 28px;}
	#mainVisualControls  > button:not(.main-pause-btn) i{font-size: 20px;}
	#mainVisualControls  .main-prev-btn i{text-indent: -2px;}
	#mainVisualControls  .main-next-btn i{text-indent: 2px;}
	#mainVisualControls  .main-play-btn i{text-indent: 2px;}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{padding-bottom: 10rem;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:4.8rem; line-height: 1.25; }
	.main-visual-item .main-visual-txt-con .main-visual-txt2{margin-top: 2rem; font-size:2rem; line-height: 1.5;}

	/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
	.scroll-down-wrap{position: absolute; bottom:8.88%; right:0; width: 100%; display: flex; align-items: center; justify-content: center;}
	.scroll-down-wrap .txt{font-size:1.2rem; margin-right:1.5rem;;}
	.scroll-down-wrap .scroll-icon{width:0.4rem; height:4rem;}
	.scroll-down-wrap .scroll-icon span{width:0.4rem; height:0.4rem; top:0.3rem;}
}
@media all and ( max-width: 480px ){
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:65px; margin-left:8px;}
}
@media all and ( max-width: 359px ){
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:60px;}
}

/* ******************  메인 컨텐츠 ********************** */
#mainContent{position:relative; z-index:11; transform: none !important; background-color: rgba(6,22,49,1);}
#mainContent.index-t-ver{position: relative; z-index: 99;}
.main-top-scroll-cover{position: absolute; top: -100vh; left: 0; width: 100%; height: 100vh; background-color: transparent; visibility: hidden; z-index: 999;}
.main-top-scroll-cover.show{visibility: visible;}

/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size:8rem; line-height: 1.1; font-weight:600; letter-spacing: -0.05em; color: #fff;}
.main-tit-box .main-sub-tit{margin-top: 1.5rem; font-size:2.45rem; line-height: 1.34; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.cm-main-btn-style{width: 20rem; height: 6rem; padding: 0 1.5rem; font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; border: 0.4rem solid rgba(255,255,255,0.3); border-radius: 0.5rem; box-sizing: border-box; transition:var(--transition-custom); transition-property: border-color; display: flex; align-items: center; justify-content: center;}
.cm-main-btn-style:hover{border-color: #fff;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
}
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

@media all and ( max-width: 800px ){
	#mainContent.index-t-ver{position: relative; z-index: 11;}
	.main-top-scroll-cover{display: none !important;}
	.main-tit-box .main-tit{font-size:5rem; line-height: 1.1;}
	.main-tit-box .main-sub-tit{margin-top: 1.5rem; font-size:2rem; line-height: 1.34;}
	.cm-main-btn-style{width: 20rem; height: 6rem; padding: 0 1.5rem; font-size: 1.5rem;}
}



.cm-main-tit{}
.cm-main-tit .tit{font-size:8.5rem; line-height:1.16; letter-spacing:-0.02em; color:#fff;  margin-bottom:0.45em; overflow:visible;}
.cm-main-tit .tit.cm-word-split-JS.splitting .word{overflow:visible;}
.cm-main-tit .sub-tit{font-size:2.2rem; line-height:1.43; letter-spacing:-0.02em; color:#fff; font-weight:500; margin-bottom:0.6em;}
.cm-main-tit .txt{font-size:1.8rem; line-height:1.5; color:#fff; font-weight:300; }

.cm-main-tit.black .tit,
.cm-main-tit.black .sub-tit{color:#000}
.cm-main-tit.black .txt{color:#aaa}

 @media all and (max-width:1024px){	
.cm-main-tit .tit{font-size:52px;}
 }
.active-item .cm-main-tit .tit{animation-delay:0.1s;}
.active-item .cm-main-tit .sub-tit{animation-delay:0.3s;}
.active-item .cm-main-tit .txt{animation-delay:0.5s;}

.active-item .main-visual-txt-box .cm-main-tit .tit.cm-word-split-JS.splitting .char{
	-webkit-animation: letter-glow 0.7s 0.7s ease both;
    animation: letter-glow 0.7s 0.7s ease both;
}

.active-item .cm-main-tit .sub-tit,
.active-item .cm-main-tit .txt{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

.btn-effect i.xi-plus-circle-o{transition:0s}
.btn-effect:hover i.xi-plus-circle-o{transform:rotate(180deg); transition:var(--transition-custom);}

/* 메인 공통 버튼 */
.cm-btn-style01 {position:relative; display:flex; align-items:center; justify-content:center; width:19rem; height:5rem; font-size:1.6rem; color:#fff; border:1px solid #fff; transition: border-color 0.3s; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; box-sizing: border-box;}
.cm-btn-style01:before {content:""; width:0; height:100%; background-color:var(--main-color); position:absolute; top:0; left:0; transition: width 0.3s; z-index: -1;}
.cm-btn-style01:hover {border-color:var(--main-color); !important; color: #fff !important;}
.cm-btn-style01:hover:before {width:100%;}

.cm-btn-style02{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	opacity:1;
}
.cm-btn-style02 {position:relative; display:flex; align-items:center; justify-content:center; width:19rem; height:5rem; font-size:1.6rem; color:#000; border:1px solid #000; transition: border-color 0.3s; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; box-sizing: border-box;}
.cm-btn-style02:before {content:""; width:0; height:100%; background-color:var(--main-color); position:absolute; top:0; left:0; transition: width 0.3s; z-index: -1;}
.cm-btn-style02:hover {border-color:var(--main-color); !important; color: #fff !important;}
.cm-btn-style02:hover:before {width:100%;}

.cm-btn-style02{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	opacity:1;
}



#mainContact { position: relative; z-index:-1}
#mainContact a .btn{font-size:1.2rem; line-height:2; color:#fff;}
#mainContact a .btn i{font-size:2.4rem; line-height:1; vertical-align:middle; margin-left:2rem;}



/* -------- 메인 컨텐츠 :: hiddenArea -------- */
#hiddenArea{position: relative; width: 100%; height: 20.6rem; background-color: rgba(6,22,49,1);}



/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */


/* -------- 메인 컨텐츠 :: 컨텐츠2(Semiconductor / Green Energy) -------- */
#mainContent2{}
/* 배경 효과 및 레이아웃 */
.main-con-02{width:100%; height:100%}
.main-con-02 > div{float:left; position:relative; width:50%; height:100%}
.main-con-02 > div .main-02-inner{position:absolute; top:0; width:100%; height:100%; transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.6s; transform:scaleX(0); left:0}
.main-con-02 > div .main-02-inner:after{position:absolute; display:inline-block; content:""; width:100%; height:100%; background-size:cover !important; top:0; left:0}
.main-con-02 > .main-02-lf .main-02-inner:after{background:url("../images/main/main_con02_lf.jpg") no-repeat 50% 0;}
.main-con-02 > .main-02-rt .main-02-inner:after{background:url("../images/main/main_con02_rt.jpg") no-repeat 50% 0;}
.main-con-02 > div .main-02-inner:before{position:absolute; content:""; width:100%; height:100%; top:0; background-color:#fff; transition-property:all; transition-delay:.3s; transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.6s; z-index:9; opacity:1}
.main-con-02 > .main-02-lf .main-02-inner:before{right:0; }
.main-con-02 > .main-02-rt .main-02-inner:before{left:0}
/* 텍스트 */
.main-con-02 .main-02-inner .inner-con{position:absolute; top:50%; transform:translateY(-50%); left:10%; width:100%; text-align:left; z-index:9; padding-top:105px}
.main-con-02 .main-02-inner .inner-con .txt-kr{display:block; font-weight:600; font-size:22px; letter-spacing:-0.5px; color:#fff; opacity:0.8}
.main-con-02 .main-02-inner .inner-con .txt-en{display:block; font-size:74px; letter-spacing:-0.25px; color:#fff; margin-top:30px}
.main-con-02 .main-02-inner .inner-con .txt-en.cm-word-split-JS.splitting .word{margin-bottom:0}
.main-con-02 .main-02-inner .inner-con .txt-explain{font-size:18px;  color:#fff; /*opacity:0.5;*/ line-height:1.55; word-break:keep-all; margin-top:30px}

/* 섹션 도달했을때 나오는 효과 */
#mainContent2.on .main-con-02 > div .main-02-inner{transform:scaleX(1); transform-origin:left top; transition-property:transform}
#mainContent2.on .main-con-02 > .main-02-rt .main-02-inner{transform-origin:right top; }
#mainContent2.on .main-con-02 > div .main-02-inner:before{width:0; opacity:1;}

.main-con-02 .main-02-inner .inner-con .txt-kr,
.main-con-02 .main-02-inner .inner-con .txt-explain{opacity:0}
#mainContent2.on .main-con-02 .main-02-inner .inner-con .txt-kr,
#mainContent2.on .main-con-02 .main-02-inner .inner-con .txt-explain,
#mainContent2.on .main-con-02 .main-02-inner .inner-con .txt-en{animation-delay:0.6s !important;}
.main-con-02 .main-02-inner .inner-con .txt-en.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
#mainContent2.on .main-con-02 .main-02-inner .inner-con .txt-kr,
#mainContent2.on .main-con-02 .main-02-inner .inner-con .txt-explain,
#mainContent2.on .main-con-02 .main-02-inner .inner-con .txt-en.splitting .char,
#mainContent2.on .main-con-02 .main-02-inner .inner-con .txt-en{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

 @media all and (max-width:1220px){	
	.main-con-02 .main-02-inner .inner-con{padding-top:80px}
	.main-con-02 .main-02-inner .inner-con .txt-en{font-size:65px}
	.main-con-02 > div .main-02-inner:before{transition-delay:0.1s}
 }
 @media all and (max-width:1024px){	
	.main-con-02 .main-02-inner .inner-con{padding-top:0}
	.main-con-02 > div{height:0; padding-top:60%}
	.main-con-02 .main-02-inner .inner-con .txt-kr{font-size:16px;}
	.main-con-02 .main-02-inner .inner-con .txt-en{font-size:52px; margin-top:15px}
	.main-con-02 .main-02-inner .inner-con .txt-explain{margin-top:15px; font-size:16px}
}
 @media all and (max-width:800px){	
	.main-con-02 > div{float:none; width:100%; padding-top:95%;}
	.main-con-02 > .main-02-rt{margin-top:-1px}
	.main-con-02 > .main-02-lf .main-02-inner:after{background:url("../images/main/main_con02_lf_mb.jpg") no-repeat 50% 0}
	.main-con-02 > .main-02-rt .main-02-inner:after{background:url("../images/main/main_con02_rt_mb.jpg") no-repeat 50% 0}
	.main-con-02 .main-02-inner .inner-con .txt-en,
	.main-con-02 .main-02-inner .inner-con .txt-explain{margin-top:0}
 }
 @media all and (max-width:480px){	
	.main-con-02 .main-02-inner .inner-con .txt-en{font-size:40px}
	.main-con-02 .main-02-inner .inner-con .txt-kr,
	.main-con-02 .main-02-inner .inner-con .txt-explain{font-size:14px}
 }

/* ******************  메인 커서 이펙트 ********************** */
#cmMainCursor{width: 17.6rem; height: 17.6rem;position: fixed; top: 0; left: 0; z-index: 99998; pointer-events: none; mix-blend-mode: difference;}
.cm-cursor-inner {display: block; width: 100%; height: 100%; position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.cm-cursor-circle {display: block; width: 0; height: 0; position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -90px; overflow: hidden; opacity: 0; border-radius: 50%; z-index: 1;background: #5cb9f5 no-repeat center center;}
#cmMainCursorTxt{width: 17.6rem; height: 17.6rem; position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;}
#cmMainCursorTxt .cm-cursor-circle{background: transparent;}
#cmMainCursorTxt img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: spin 10s infinite linear;}

@media all and (max-width:800px){
	#cmMainCursor, #cmMainCursorTxt{visibility: hidden; opacity: 0;}
}