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

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

/* ******************  메인 비주얼 ********************** */
.main-bk-bg {width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000;}
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000}	
.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:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width: calc(100% + 50px);
  height: 100%;
  position: absolute; top:0; left:0;
  background-position: center;
  background-size: cover;
  background: #000;  
}
.main-visual-item .main-visual-pc-img span{position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.3s}
.main-visual-item .main-visual-pc-img img{
  width: 100%;
 /* height: 100%;*/height:calc(100%);
 position:relative; top:0px; 
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  pointer-events: none;
  transition:margin-top 0.2s
}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:370px;
	width: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{display:block; font-size:2rem; font-weight:600; letter-spacing:0; color:#fff; margin-bottom:3.5rem; line-height:1.5}
.main-visual-item .main-visual-txt-con .main-visual-txt1 em{font-weight:600; font-style: normal !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-weight:700; font-size:6rem; letter-spacing:-0.04em; color:#fff; line-height:1.5}
.main-visual-item .main-visual-txt-con .main-visual-txt2 em{font-weight:700; font-style: normal !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-prev .main-visual-pc-img{	
	transform: translateX(-50px);
}
.main-visual-item.click .main-visual-pc-img{		
	transform: inherit; animation: moveSlider 6s both linear;
}
.main-visual-item.first-item.active-item .main-visual-pc-img{
    animation: moveSlider 4s both linear;
}
.main-visual-item.active-item .main-visual-pc-img{
	animation: moveSlider 6s both linear;
}
@-webkit-keyframes moveSlider {
  0 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
 }

.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{opacity:1}
.main-visual-item .main-visual-txt1.splitting .char,
.main-visual-item .main-visual-txt2.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;
}
.main-visual-item.active-item .main-visual-txt1.splitting .char,
.main-visual-item.active-item .main-visual-txt2.splitting .char{
	-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;
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		margin-right:15px
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		margin-right:0
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

@media all and (max-width: 1024px) {
	#mainVisual {
		height: 100vh
	}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con {
		top: 25%
	}

	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon {
		bottom: 1.5rem;
	}

	/* 메인 비주얼 :: 컨트롤러 */
	.main-visual-control {
		bottom: 0;
		top: unset !important;
	}

	.active-page .main-visual-control {
		bottom: 1.5rem !important;
	}

	.main-visual-control .main-progress {
		width: calc(100% - 20rem) !important;
		margin-left: 3rem !important;
	}
}
/* 메인 비주얼 :: 컨트롤러 */
.main-visual-control{position:absolute; bottom:0rem; left:0; width:100%; z-index:9;  opacity:0; transition:bottom ease-out 1s 0.4s, opacity 0.5s 0.4s}
.main-visual-control > div{display:flex; align-items:center}
.active-page .main-visual-control{bottom:5rem; opacity:1}
/* 메인 비주얼 :: 컨트롤러 :: 화살표 */
.main-visual-control .main-arrow{}
.main-visual-control .main-arrow button{display:inline-block; width:8rem; height:8rem; text-align:center; border:1px solid rgba(255,255,255,0.22); border-radius:50%; box-sizing:border-box; font-size:2.4rem; color:#fff; transition:border-color 0.4s}
.main-visual-control .main-arrow button.prev{margin-right:-2rem}
.main-visual-control .main-arrow button:hover{border-color:#fff}
/* 메인 비주얼 :: 컨트롤러 :: 진행바 */
.main-visual-control .main-progress{margin-left:7rem; display:inline-block; width:calc(100% - 42.5rem); height:1px; background-color:rgba(255,255,255,0.3); position:relative}
.main-visual-control .main-progress em{position:absolute; top:0; left:0; background-color:#fff; height:1px}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:27rem; right:5rem; opacity:0; text-align:center; z-index:9;  transition:right ease-out 1s 0.4s, opacity 0.5s 0.4s}
.active-page .main-scroll-icon{right:13rem; opacity:1}
.main-scroll-icon .txt{display:block; animation: upDown 1.5s ease-in-out infinite; margin-bottom:-3.8rem}
.main-scroll-icon .circle{display:inline-block; width:8rem; height:8rem; border-radius:50%; background-color:var(--main-color);   }
@keyframes upDown {
	0% {
		opacity: 0.6;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.6;
		transform:  translateY(-5px);
	}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
.main-cm-txt .tit{font-weight:700; font-size:6rem; letter-spacing:-0.06rem; color:#182404; line-height:1.33}
.main-cm-txt .tit em{font-weight:700; font-style:normal !important;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
.main-cm-txt .tit .sm{font-size:4rem}
.main-cm-txt .tit.big{font-size:8rem}
.main-cm-txt .txt{font-weight:500; font-size:2rem; letter-spacing:-0.065rem; color:rgba(24,36,4,0.6); line-height:1.65}
.main-cm-txt .txt em{font-weight:500}
.main-cm-txt .txt-effect {
	display: block;
}
/* .main-cm-txt .txt-effect{display:block; white-space:nowrap} */
/* 효과 */
.main-cm-txt .txt-effect {opacity:0}
.animated .main-cm-txt .txt-effect{opacity:1}
.main-cm-txt .txt-effect.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;
}
.animated .main-cm-txt .txt-effect.splitting .char{
	-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;
}
.animated .main-cm-txt .txt{	
	-webkit-animation: text-effect-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-effect-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}	
@keyframes text-effect-up {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(50px); 
		transform: translateX(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(사업분야) -------- */
#mainBusinessCon{padding-top:15rem; position:relative; z-index:9}
#mainBusinessCon > div{position:relative}
/* 우측 :: 고정텍스트 */
.main-bs-fixbar{position:absolute; top:0; left:0; width:100%; margin-top:7rem}
.main-bs-fixbar.fixed{position:fixed}
.main-bs-fixbar.absolute{top:auto; bottom:550px}
.main-bs-fixbar .inner{float:right; width:60rem}
.main-bs-fixbar .tit{margin-bottom:5.5rem}
.main-bs-fixbar .more-btn{display:inline-block; margin-top:7rem}
.main-bs-fixbar .more-btn .circle{width:7.8rem; height:7.8rem; border-radius:50%; background:#62832b; text-align:center; vertical-align:middle; display:inline-block; /*opacity:0;*/ margin-right:2.5rem; transition:opacity ease-in-out 1.5s 0.1s , margin-right ease-in-out 1.5s 0.1s}
.main-bs-fixbar .more-btn .circle i{line-height:7.8rem; font-size:2rem; color:#fff}
.main-bs-fixbar .more-btn .btn-txt{font-weight:500; font-size:1.6rem; letter-spacing:-0.025rem; color:rgba(24,36,4,0.8); vertical-align:middle; display:inline-block}
/*.animated .main-bs-fixbar .more-btn .circle{opacity:1; margin-right:2.5rem}*/
.animated .main-bs-fixbar .more-btn{animation: text-effect-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 좌측 :: 메뉴박스 */
/*.main-bs-con{height:1460px}*/
.main-bs-con .bs-box-list.tb{display:none}
.main-bs-con .bs-box-list{max-width:63%; position:relative; top:-15rem}
.main-bs-con .bs-box-list li{float:left; width:40%; max-width:40rem; position:relative; z-index:9;}
.main-bs-con .bs-box-list.pc li:nth-child(2n-1){margin-right:7.5%}
.main-bs-con .bs-box-list.pc li.box-01{margin-top:-7%}
.main-bs-con .bs-box-list.pc li.box-02{margin-top:19%}
.main-bs-con .bs-box-list.pc li.box-03{margin-top:-20.5%}
.main-bs-con .bs-box-list.pc li.box-04{margin-top:5.8%}
.main-bs-con .bs-box-list li a{display:block;}
.main-bs-con .bs-box-list li a .bg-img{position:relative; display:block; width:100%; padding-top:150%; overflow:hidden; box-shadow:10px 15px 22px 5px rgba(0,0,0,0.09); border-radius:12px; overflow:hidden; opacity:0; transition:opacity 1.1s}
.main-bs-con .bs-box-list li a .bg-img span{position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.2s}
.main-bs-con .bs-box-list li a .bg-img img{position:absolute; left:0; width:100%; /*top:0;  height:100%*/top:-50px; height:auto; transition:transform 2.6s cubic-bezier(.19,1,.22,1); transform:scale(1.2)}
.main-bs-con .bs-box-list li a .txt{position:absolute; bottom:10%; left:12.5%}
.main-bs-con .bs-box-list li a .txt dt{font-weight:500; font-size:1.5rem; letter-spacing:0; color:#fff; text-transform:uppercase;}
.main-bs-con .bs-box-list li a .txt dd{font-weight:600; font-size:4rem; letter-spacing:-0.06rem; color:#fff; margin-top:2rem}
.animated .main-bs-con .bs-box-list li a .bg-img{opacity:1}
.animated .main-bs-con .bs-box-list li a .bg-img img{transform:scale(1)}

@media all and ( min-width: 801px ){	
	.main-bs-con .bs-box-list li a:hover .bg-img img{transform:scale(1.1)}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Global Network) -------- */
#mainGlobalCon{position:relative; margin-top:-34%}
#mainGlobalCon:after{position:absolute; content:""; width:100%; /*height:3122px;*/height:calc(100% + 107.2rem); background:url(../images/main/main_global_bg.png) no-repeat 50% 0; background-size:100% 100%; top:-40rem; right:0; z-index:-1}
.main-global-tit{position:absolute; top:50%; left:50%; margin:7.5% 0 0 0.8%; z-index:9}
.main-global-tit .tit{line-height:1.1; margin-bottom:3rem}
.global-map-con{position:relative;}
.global-map-con .map-img{max-width:100%; margin-top:-34%}
.global-map-con-m{display:none;}
.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; }
.global-area{width:100%; height:55%; margin-top:45%}
.nation-circle{position:absolute; left:50%; top:50%; display:inline-block; transform:translateY(30px); opacity:0; transition:all 1.5s}
.animated .nation-circle{transform:translateY(0); opacity:1}
.nation-circle.nation-01{transition-delay:1s}
.nation-circle.nation-02{transition-delay:0.2s}
.nation-circle.nation-03{transition-delay:0.35s}
.nation-circle.nation-04{transition-delay:0.5s}
.nation-circle.nation-05{transition-delay:0.65s}
.nation-circle.nation-06{transition-delay:0.8s}
.nation-circle .spread-circle{width:37rem; height:37rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.nation-circle .spread-circle > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.nation-circle .spread-circle > span:nth-child(3) {
	-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.nation-circle .spread-circle > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.nation-circle .spread-circle > span {
	border:2px solid rgba(97, 130, 44, 0.15) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
	animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; 
}
.nation-circle .logo-circle{background-color:#fff; width:15rem; height:15rem; text-align:center; border-radius:50%; line-height:14.2rem; border:4px solid #62832b; box-sizing:border-box; position:absolute; top:-16.8rem; left:50%; transform:translateX(-50%)}
.nation-circle .dot{display:inline-block; width:4rem; height:4rem; background:rgba(97,130,44,0.1); border-radius:50%; position:absolute; top:0; left:0}
.nation-circle.logo .dot{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.nation-circle .dot:after{position:absolute; content:""; width:0.9rem; height:0.9rem; border-radius:50%; background-color:#61822c; top:50%; left:50%; transform:translate(-50%,-50%)}

@keyframes nation-circle {
  0% {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0.6; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0; } 
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Question) -------- */
#mainQuestionCon{margin-top:3%}
.main-quetion-tit{text-align:right; margin-bottom:9rem}
.main-quetion-tit .en-tit{font-weight:700; font-size:1.8rem; letter-spacing:0; color:#182404; margin-bottom:3rem}
.main-quetion-tit .en-tit em{font-weight:700}
.main-inquiry-con{text-align:right; margin-bottom:19rem}
.main-inquiry-con .inquiry-area{display:inline-block; width:100%; max-width:81rem}


/* ******************  메인 하단 배경 ********************** */
.main-bt-bg{position:absolute; bottom:50px; left:0; width:100%; height:39%; max-height:200.8rem; min-height:170rem; z-index:-2;}
.main-bt-bg span{position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover !important; transition:transform 0.2s}

/* ****************** 스크롤 ********************** */
.main #ascrail2000{opacity:0 !important}
.main.active-page #ascrail2000{opacity:1 !important; transition:opacity 0.3s 0.4s}