@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-10-28
******************************************************** */
/* ========================================================
 * MAIN :: 공통
======================================================== */
/* 공통 :: 컨트롤바 */
.main-controls-box{position:absolute; left:100px; right:100px; bottom:110px; z-index:11;}
.main-controls-box button{margin-left:30px;}
.main-controls-box button:first-child{margin-left:0}
.main-controls-box i{color:#fff; font-size:24px;}
.main-controls-box .controls-play-btn{display:none;}
.main-controls-box .progress-bar-con{position:relative; width:100%; height:2px; background-color:rgba(255,255,255,0.15); margin-top:65px; margin-top:6.9vh}
.main-controls-box .progress-bar-con .progress-bar{position:absolute; top:0px; left:0px; height:2px; width:0; background-color:#fff;}
.main-controls-box .swiper-scrollbar-drag{height:2px; width:0; background-color:#fff;}
.main-controls-box.black-style i{color:#000}
.main-controls-box.black-style .progress-bar-con{background-color:rgba(0,0,0,0.15);}
.main-controls-box.black-style .progress-bar{background-color:#000;}


/* ========================================================
 * MAIN Visual
======================================================== */
#mainVisual{overflow:hidden; width:100%; height:937px; height:100vh; 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:100%;
}
.main-visual-con{z-index:1; opacity:0; transition:opacity 2s}
.visual-active .main-visual-con{opacity:1.0;}
/* -------- 메인 비주얼 :: 이미지 -------- */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img,
.main-visual-item .main-visual-m-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 6000ms  ease-in-out ;
    transition:transform 6000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}
/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img,
.main-visual-item.active-item .main-visual-m-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}

/* -------- 메인 비주얼 :: 텍스트 -------- */
.main-visual-txt-con{
	position:absolute; 
	top:50%; left:0px; 
	width:100%; 
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index:11;
}
.main-visual-txt-con .main-visual-txt1{display:block; font-size:44px; font-weight:700; letter-spacing:-0.25px; color:#fff; line-height:1.5}
.main-visual-txt-con .main-visual-txt1 span{/* display:block; */}
.visual-active .main-visual-txt-con .main-visual-txt1.splitting .char{
	-webkit-animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}


/* ========================================================
 * MAIN Content :: R&D
======================================================== */
#mainRndContent{position:relative; background:url(../images/main/main_rnd_bg.jpg) no-repeat 50% 50%; background-size:cover}
.main-rnd-tit{position:absolute; left:100px; top:200px; top:21.55vh; color:#000; font-size:56px; letter-spacing:-0.5px; line-height:1.25}
.aos-animate .splitting.main-rnd-tit .char{
	-webkit-animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* -------- 왼쪽,오른쪽 영역 -------- */
.circle-left-box{z-index:11; text-align:center;}
.circle-left-box .num{color:#eee; font-size:160px; font-size:8.33vw; letter-spacing:-0.5px; margin-top:-5px;}
.circle-left-box .circle-tit{position:absolute; top:50%; left:50%;  z-index:1; font-size:30px; color:#000; letter-spacing:-0.5px; font-weight:700; transform:translate(-50%,-50%);  }
.circle-right-box p{color:#000; font-size:20px; letter-spacing:-0.35px; line-height:1.75; transition:all 1s; transform:translateY(100%); opacity:0;}
/* active */
.active-item .circle-left-box .splitting .char{
	-webkit-animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .circle-right-box  p{
	transform:translateY(0); opacity:1;
}
/* -------- 가운데 영역 -------- */
.circle-inner-box{position:relative; width:600px; width:31.25vw; max-width:600px; margin:75px auto;}
.circle-inner-box .circle-more-btn{position:absolute; top:0%; right:50%; width:140px; height:140px; margin-right:-14vw}
.circle-inner-box .circle-more-btn:before{width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); content:""; box-sizing:border-box; border:2px solid #dcdcdc; border-radius:50%;}
.circle-inner-box .circle-more-btn:after{position:absolute; top:-12px; right:-20px; width:30px; height:30px; background:url(/images/main/main_rnd_more_btn_deco.png) no-repeat; content:"";  animation: spin 10s linear infinite;}
.circle-inner-box .circle-more-icon {display:block; width:100px; height:100px; margin:20px; background-color:#639143; line-height:100px; text-align:center; font-size:48px; color:#fff; border-radius:50%; transition:all 0.8s;}
.circle-inner-box .circle-more-icon i{transition:all 0.8s}
.circle-inner-box svg{
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	stroke: #639143;
	stroke-width: 1px;
	fill: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	stroke-dasharray: 208px;
	stroke-dashoffset: 147px;
	transform:rotate(-90deg);
	transition:all 1s;
}
.circle-inner-box .circle-img{overflow:hidden; border-radius:50%; padding-top:100%; height:0; position:relative; transition:transform 0.5s 1s; transform-origin: bottom center;/*  transform:scale(0); */}
.circle-inner-box .circle-img img{
	position:absolute; top:0px; left:0px; 
	width:100%;
	height:100%;
	 -webkit-transform: scale(1.15,1.15);
	 transform: scale(1.15,1.15);
	-webkit-transition:transform 5000ms  ease-in-out ;
	transition:transform 5000ms ease-in-out ;	
}
/* hover */
.circle-inner-box:hover .circle-more-icon{background-color:#528132;  box-shadow:5px 4px 12px 3px rgb(0 0 0 / 7%);}
.circle-inner-box:hover .circle-more-icon i{transform:rotate(180deg); }
.circle-inner-box:hover svg{
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	stroke-dashoffset: 0
}
/* Active  */
.active-item .circle-inner-box .circle-img{transform:scale(1); transition-delay:0s}
.active-item .circle-inner-box .circle-img img{
	-webkit-transform: scale(1.0,1.0) rotate(0.002deg);
	transform: scale(1.0,1.0) rotate(0.002deg);
}
@media all and ( min-width: 801px ){
	/* -------- 왼쪽,오른쪽 영역 -------- */
	.circle-left-box{position:absolute; right:50%; top:50%; left:0px; margin-right:16vw; transform:translateY(-50%); }
	.circle-right-box{position:absolute; left:50%; top:50%; margin-left:20vw; transform:translateY(-50%);}
}

/* ========================================================
 * MAIN Content :: Brand
======================================================== */
#mainBrandContent{background:url(../images/main/main_brand_bg.jpg) no-repeat 50% 50%; background-size:cover}
.main-brand-tit{color:#fff; font-size:56px; letter-spacing:-0.5px; line-height:1.25; margin-bottom:110px; margin-bottom:11.6vh}
.aos-animate .splitting.main-brand-tit .char{
	-webkit-animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* -------- Brand :: List -------- */
#mainBrandContent .main-brand-list-container{margin-bottom:100px; margin-right:-100px}
.main-brand-list .main-brand-item{float:left; width:500px;}
.main-brand-list .main-brand-item .main-brand-inner{display:block; position:relative; }
.main-brand-list .main-brand-item .main-brand-thumb{display:block; position:relative; padding-top:60%; height:0;  background-color:#000;}
.main-brand-list .main-brand-item .main-brand-name{position:absolute; top:50%; left:0; right:0; text-align:center; color:#fff; font-size:30px; letter-spacing:5px; transform:translateY(-50%)}
@media all and ( min-width: 801px ){	
	.main-brand-list .main-brand-item .main-brand-inner{padding-top:60%; height:0;}
	.main-brand-list .main-brand-item .main-brand-thumb{position:absolute; top:0px; left:0px; width:100%; height:100%; padding-top:0; transition:all 1s cubic-bezier(0.25, 0.1, 0.03, 0.82) 0.3s; clip:rect(0px,0px,500px,0);}
	.main-brand-list .main-brand-item .main-brand-logo{position:absolute; top:0px; left:0px; bottom:0px; right:0px; background-color:#fff; transition:all 0.6s cubic-bezier(0.25, 0.1, 0.03, 0.82); clip:rect(0px,0px,500px,0); }
	.aos-animate .main-brand-list .main-brand-item a:hover .main-brand-logo{clip:rect(0px,500px,500px,0)}

	.aos-animate .main-brand-item .main-brand-thumb{clip:rect(0px,500px,500px,0); }
}

/* ========================================================
 * MAIN Content :: Left Nav
======================================================== */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:35px;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:20px; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:20px; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{display:block; width:14px; height:14px; background:url(../images/main/fullpage_nav_icon.png) no-repeat; }
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	right:20px; top:0; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:12px; 
	color:#fff; 
	margin-right:5px; 
	text-align:right; 
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-o-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s;
	display:none;
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{background-position:0 -14px}





/* ========================================================
 * MAIN Content :: 추가영역 210115
======================================================== */
/* ******************  메인 컨텐츠 :: 퀵링크 ********************** */
#mainRndOEMContent{}
.main-rnd-oem-wrapper{display:flex; height:650px; }
.main-rnd-oem-con{width:50%; height:100%; box-sizing:border-box; padding:88px 100px; }
.main-rnd-con{background:url(/images/main/main_rnd_link_bg.jpg) no-repeat 50% 50%; }
.main-oem-con{background:url(/images/main/main_oem_link_bg.jpg) no-repeat 50% 50%; }
.main-rnd-oem-con dl{font-size:18px; margin-bottom:2.22em}
.main-rnd-oem-con dl dt{font-size:3.1em; color:#000; letter-spacing:-2px; font-weight:600; }
.main-rnd-oem-con dl dd{font-size:1em; line-height:1.88; letter-spacing:-0.35px; font-weight:400; opacity:0.5; color:#000; margin-top:2.22em;}
.main-rnd-oem-con .main-rnd-more-btn{font-size:14px; color:#000; letter-spacing:-0.5px; }
.main-rnd-oem-con .main-rnd-more-btn i{margin-left:15px; display:inline-block; position:relative; top:1px; font-size:16px; transition:all 0.3s}
.main-rnd-oem-con .main-rnd-more-btn:hover i{transform:translateX(5px)}

/* ******************  메인 컨텐츠 :: 비디오 ********************** */
#mainVideoContent{position:relative; overflow:hidden;}
.background-video-wrapper{position:relative; overflow:hidden; height:100%; width:100%; background-color:#000;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%; transform:scale(1.01); opacity:0.6}
.background-video:after{position:absolute; top:0px; left:0px; right:0px; bottom:0px; content:""; background-color:#000; z-index:111; display:none;}
.background-video.start:after{opacity:0;filter:Alpha(opacity=0); -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; }

.background-video-wrapper .background-video-bg{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:url(/images/main/background_youtube_bg.jpg) no-repeat 50% 50%; background-size:cover;}
.background-video iframe{
	width: 100vw;
	height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: 100vh;
	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;
}
.background-video-alternative{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}
#mainVideoContent .video-tit-con{position:absolute; top:50%; left:0; right:0px; transform:translateY(-50%); color:#fff; z-index:11; text-align:center;}
#mainVideoContent .video-tit-con .video-con-tit{font-size:60px; margin-bottom:25px; letter-spacing:-1px;}
#mainVideoContent .video-tit-con .video-tit-txt{font-size:16px; font-weight:400; letter-spacing:-0.35px; opacity:0.8}
#mainVideoContent .video-tit-con .video-tit-txt br{display:none;}
#mainVideoContent .video-tit-con .video-play-btn{display:block; margin:5% auto 0; width:50px; height:50px; background-color:rgba(255,255,255,0.9); border-radius:50%; color:#222; transition:all 0.3s }
#mainVideoContent .video-tit-con .video-play-btn i{line-height:50px; font-size:34px; }
#mainVideoContent .video-tit-con .video-play-btn:hover{background-color:#629143; color:#fff;}