@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */
.main-color{color: var(--main-color) !important;}
/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
#fullpage .section:not(#mainVisual, #mainFooter) .fp-tableCell{padding-top: 25px;}
@media all and ( min-width: 1025px ) and (max-height: 750px) {
	/* #fullpage .section:not(#mainFooter){min-height:750px;} */
	#fullpage .section .fp-tableCell{height:100% !important;}
	#fullpage .section:not(#mainVisual, #mainFooter) .fp-tableCell{padding: 70px 0 !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; height:calc(var(--full-height) - var(--header-height)) !important; 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-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;
	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{display:block; font-size:96px; font-weight:900; color:#222; margin-bottom:15px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:20px; font-weight: 400; letter-spacing:-0.15px; color:rgba(34,34,34,.6); line-height: 1.3;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .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.active-item .main-visual-txt1,
.main-visual-item.active-item .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.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}
.main-visual-item .main-visual-txt1.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{
	-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);
		-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);
	}
}

/* 메인 비주얼 :: Dots & Arrow */
.main-visual-controls{position: absolute; bottom: 120px; width: 100%; z-index: 99;}
.main-visual-controls .area-box{display: flex; align-items: center;}
.main-visual-controls .arrow-box{margin-top: 6px;}
.main-visual-controls .arrow-box .slick-arrow{position: relative; padding: 0 20px; font-size: 36px; color: #000; opacity: .3;}
.main-visual-controls .arrow-box .slick-arrow:before{content: ""; position: absolute; top: 50%; margin-top: -12px; left: 0; width: 1px; height: 20px; background-color: rgba(0,0,0,.3);}
.main-visual-controls .arrow-box .slick-arrow:first-child{padding-left: 0;}
.main-visual-controls .arrow-box .slick-arrow:first-child:before{display: none;}
.main-visual-controls .dots-box .slick-dots li{position: relative; display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin: 0 5px; text-align: center; cursor:pointer; transition: all .3s}
.main-visual-controls .dots-box .slick-dots li:before{opacity: 0; content: ""; position: absolute; top: 0; left: -1px; width: 100%; height: 100%; border: 1px solid var(--main-color); border-radius: 50%; transition: all .3s}
.main-visual-controls .dots-box .slick-dots button{font-size: 0; width: 6px; height: 6px; background-color: rgba(0,0,0,.2); border-radius: 50%; transition: all .3s}
.main-visual-controls .dots-box .slick-dots li.slick-active:before{opacity: 1;}
.main-visual-controls .dots-box .slick-dots li.slick-active button{background-color: var(--main-color);}


/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:120px; left:85px; z-index:100;}
.main-scroll-icon span{display: block; width: 50px; text-align: center;}
.main-scroll-icon span:before{content: ""; position: absolute; top: -24px; left: 0; width: 100%; height: 50px; border-radius: 50%; background-color: var(--main-color); opacity: .2;}
.main-scroll-icon span img{animation: upDown 1.5s ease-in-out infinite;}
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:70px; text-align:center;}
.main-tit-box .main-tit{color:#000; font-size:80px; font-weight: 900;}
.main-tit-box .main-sub-tit{display:block; margin-top:15px; color:#444; font-size:20px; letter-spacing:-0.6px; font-weight:400; line-height:1.5; }
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.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;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

/* -------- 메인 컨텐츠1 :: BEST PRODUCT -------- */
/* #mainProduct:before{content: ""; position: absolute; top: 0; left: 50%; transform:translateX(-50%); width: 100%; height: 100%; background: url(/images/main/main_product_bg.jpg) center/cover no-repeat;} */
#mainProduct:before{content: ""; position: absolute; top: 0; left: 50%; transform:translateX(-50%); width: 100%; height: 100%;}

#mainProduct .product-list{display: flex; align-items: flex-end; margin: 0 -1%; transition-delay: .3s;}
#mainProduct .product-list li{position: relative; width: 31.33%; margin: 0 1%;}
#mainProduct .product-list li a{display: block; width: 100%; height: 100%;}
#mainProduct .product-list .img-box{position: relative; z-index: 1; text-align: center;}
#mainProduct .product-list .img-box span{position: relative; width: 100%; padding-top: 29em;	display: flex; flex-direction: column; align-items: center; justify-content: center;}
#mainProduct .product-list .img-box img{position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: 80%; max-height: 80%;}
#mainProduct .product-list .txt-box{position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: end; width: 100%; min-height: 360px; margin-top: -40%; padding: 25% 5% 8%; text-align: center; background-color: #fff; border-radius: 20px; -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.08); box-shadow: 5px 5px 10px rgba(0,0,0,.08); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#mainProduct .product-list .txt-box:before{opacity: 0; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* #mainProduct .product-list .txt-box:before{opacity: 0; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/main/main_prd_overEffect.png) center no-repeat;} */
#mainProduct .product-list .txt-box > div{position: relative; z-index: 1; width: 100%;}
#mainProduct .product-list .txt-box .txt-inner{display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 9em; margin-bottom: 30px;}
#mainProduct .product-list .txt-box strong{font-size: 48px; font-weight: 800; color: #333; letter-spacing: -.15px; line-height: 1.1; text-transform:uppercase;}
.cm-plus-icon{position: relative; display: block; width: 64px; height: 64px; margin: auto; text-align: center;}
.cm-plus-icon:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:50%; border: 1px dashed var(--main-color); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.cm-plus-icon i{position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 75%; height: 75%; line-height: 48px; background-color: var(--main-color); border-radius:50%; font-size: 22px; color: #fff;}
/* hover.ver */
#mainProduct .product-list li .txt-box, #mainProduct .product-list li .txt-box:before, #mainProduct .product-list li .txt-box strong,
.cm-plus-icon i, .cm-plus-icon:before{transition: all .3s}
#mainProduct .product-list li:hover .txt-box{background-color: var(--main-color);}
#mainProduct .product-list li:hover .txt-box:before{opacity: 1;}
#mainProduct .product-list li:hover .txt-box strong{color: #fff;}
.hover-wrapper:hover .cm-plus-icon:before{border-color: #fff; -webkit-animation: spin 8s infinite linear; animation: spin 8s infinite linear;}
.hover-wrapper:hover .cm-plus-icon i{background-color: #fff; color: var(--main-color);}
@keyframes spin {
    0%  {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}



@keyframes eavesdropping-circle {
  0% {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0.08; 
   }
  50% {
	opacity: 0.1; 
   }
  100% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0; } 
}

/* -------- 메인 컨텐츠3 :: SAMHWAN STEEL -------- */
#mainSteel:before{content: ""; z-index: -1; position: absolute; top: 0; left: 50%; transform:translateX(-50%); width: 100%; height: 100%; background-color: #f3f3f3}
#mainSteel .white-bg-cover{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 48%;}
#mainSteel .white-bg-cover:after{content: ""; position: absolute; display: block; width: 100%; height: 100%; background-color: #f3f3f3; transition: transform 1s cubic-bezier(0.3, 0, 0.1, 1); transform-origin: 100% 0;}
#mainSteel .main-tit-box .main-tit, #mainSteel .main-tit-box .main-sub-tit{color: #fff;}
#mainSteel .main-tit-box .main-sub-tit{opacity: .65;}
#mainSteel .menu-link-list{display: flex; border-radius: 25px; overflow: hidden;}
#mainSteel .menu-link-list .menu-con{display: table; width: 50%; height: 280px; overflow: hidden;}
#mainSteel .menu-link-list .menu-con a{display: table-cell; vertical-align: middle; padding: 2% 8%; width: 100%; height: 100%; background: center/cover no-repeat; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#mainSteel .menu-link-list .menu-con h4{margin-bottom: 5px; font-size: 32px; font-weight: 600; color: #fff; letter-spacing: -.5px; line-height: 1.3;}
#mainSteel .menu-link-list .menu-con em{display: block; font-size: 18px; font-weight: 400; color: #fff; opacity: .4;}
#mainSteel .menu-link-list .menu-con .cm-plus-icon{margin: 30px 0 0;}
#mainSteel .menu-link-list .menu-con .cm-plus-icon:before{border-color: #fff;}
#mainSteel .menu-link-list .menu-con .cm-plus-icon i{background-color: #fff; color: var(--main-color);}
#mainSteel .menu-icon-list{display: flex; transition-delay: .3s;}
#mainSteel .menu-icon-list li{position: relative; width: 33.33%; margin-top: 5%;}
#mainSteel .menu-icon-list li:before{content: ""; position: absolute; top: 50%; margin-top: -61px; right: 0; width: 1px; height: 122px; background-color: rgba(0,0,0,.1);}
#mainSteel .menu-icon-list li:last-child:before{display: none;}
#mainSteel .menu-icon-list li a{display: block; width: 100%; height: 100%; padding: 0 3%; text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#mainSteel .menu-icon-list h4{margin-top: 20px; font-size: 24px; font-weight: 500; color: #292929; letter-spacing: -.35px; line-height: 1.3;}
#mainSteel .menu-icon-list p{margin-top: 10px; font-size: 17px; font-weight: 400; color: #888; letter-spacing: -.5px; line-height: 1.3;}
.active-section .white-bg-cover:after{transform: scale(0, 1);}



/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; top:55%; right:2%; z-index:99; margin-top:-142px;
	opacity:0;filter:Alpha(opacity=0);
	visibility:hidden;
	transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-webkit-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
#rightBar.fixed{visibility:visible; opacity:1.0;filter:Alpha(opacity=100); top:50%;}
#rightBar > ul {width:56px;}
#rightBar > ul > li{border-top:1px solid #7f7f7f;}
#rightBar > ul > li:first-child{border-top:0;}
#rightBar > ul > li > a{
	display:block; width:56px; height:56px; background-color:#000; text-align:center; line-height:56px; color:#fff;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
}
#rightBar > ul > li > a:hover{background-color:#7f7f7f}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
	z-index: 100;
	margin-top: -32px;
	top: 50%;
	right:85px;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:40px; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display: flex; align-items: center; justify-content: center; position:relative; width:100%; height:40px; box-sizing:border-box; }
#fp-nav ul li a:before{opacity: 0; content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid var(--main-color); border-radius: 50%;}
#fp-nav ul li a span{display:block; width:10px; height:10px; background-color:#000; border-radius:50%; opacity:0.4;filter:Alpha(opacity=40);}
#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;
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active:before{opacity: 1; -webkit-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite;}
#fp-nav ul li a.active span{background-color:var(--main-color); opacity:1.0;filter:Alpha(opacity=100);}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;filter:Alpha(opacity=100);}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}

@keyframes ball-scale-multiple {
	0% {
	-webkit-transform: scale(0.33);
        transform: scale(0.33);
		opacity: 0.3; 
	}
	5% {
		opacity: 0.8; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}  
}


/* dark-mode.ver */
#header .logo img.dark{display: none;}
#header.dark-mode .logo img.white{display: none}
#header.dark-mode .logo img.dark{display: block;}
#header.dark-mode .header-lang .lang-open-btn{background-color: #000;}
#header.dark-mode #gnb > ul > li > a{color: #fff;}
.main-visual-item[data-mode="dark"] .main-visual-txt-con .main-visual-txt1{color: #fff; text-shadow: 3px 3px 5px rgba(0,0,0,.4)}
.main-visual-item[data-mode="dark"] .main-visual-txt-con .main-visual-txt1 .main-color{color: #0d9edf!important;}
.main-visual-item[data-mode="dark"] .main-visual-txt-con .main-visual-txt2{color: rgba(255,255,255,.5);}
.main-visual-controls.dark-mode .dots-box .slick-dots button{background-color: rgba(255,255,255,.6);}
.main-visual-controls.dark-mode .arrow-box .slick-arrow{color: rgba(255,255,255,.5);}
.main-visual-controls.dark-mode .arrow-box .slick-arrow:before{background-color: rgba(255,255,255,.2);}
.main-scroll-icon span img.dark{display: none;}
.main-scroll-icon.dark-mode span img.white{display: none;}
.main-scroll-icon.dark-mode span img.dark{display: inline-block;}
#fp-nav.dark-mode ul li a:before{border-color: #fff;}
#fp-nav.dark-mode ul li a.active span{background-color: #fff;}