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

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh;}
.fp-tableCell{padding-top: 60px; -webkit-box-sizing: border-box; box-sizing: border-box;}

@media all and ( min-width: 1221px ) and (max-height: 750px) {
	#fullpage .section{min-height:850px;}
	#fullpage .section .fp-tableCell{padding-top: 0; height:100% !important;}
	#fullpage .section#mainFooter{min-height: auto;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual .fp-tableCell{padding-top: 0;}
.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:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; background: url("../images/main/main_visual_cover01.png") center/cover no-repeat; z-index: 1;} */
.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; z-index: 10;
	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,
.main-visual-item .main-visual-txt-con .main-visual-txt3,
.main-visual-item .main-visual-txt-con .main-visual-more-btn{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:120px; line-height: 0.5; font-weight:600; letter-spacing:-0.4px; color:#fff; margin-bottom:25px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:24px; line-height: 1.3; letter-spacing:-0.1px; color:#636466; margin-bottom:35px;}
.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:2.4rem; line-height: 1.7; letter-spacing:-0.1px; color:#636466; margin-bottom:60px;}
.main-visual-item .main-visual-txt-con .main-visual-txt3 b{display: inline-block; line-height: 1.4; font-weight: 600; border-bottom: 1px solid #fff;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn{display:inline-block; height: 45px; line-height: 47px; padding: 0 17px 0 17px; position: relative; border: 1px solid rgba(99,100,102,0.3); font-size:16px; color:#636466; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn i{margin-left:30px;}
/* .main-visual-item .main-visual-txt-con .main-visual-more-btn:before{
    display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#00b3ed; opacity:0;filter:Alpha(opacity=0);
    transform:skew(-20deg); -webkit-transition:all 0.5s;transition:all 0.5s;
} */
.main-visual-item .main-visual-txt-con .main-visual-more-btn em{position:relative; left:0px; z-index:1; display:inline-block; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn span{position: absolute; top: 50%; margin-top: -1px; left: 137px; display: block; width: 16px; height: 2px; background-color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn span:before{position: absolute; top: 50%; margin-top: -6px; right: -8px; display: block; content: ''; width: 8px; height: 12px; background: url("../image/visual_more_btn.png") center/cover no-repeat;}

/* @media all and ( min-width: 801px ){
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{border-color:#00b3ed;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover em{color:#fff; left:3px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover span{-webkit-transform: translateX(5px); transform: translateX(5px);}
} */

/* 메인 비주얼 :: 제품이미지 */
.main-visual-prd-con{position:absolute; left:0px; bottom:0; width: 100%; height: 100%;}
.main-visual-prd-con .area{width: 100%; height: 100%; text-align: right; display: flex; justify-content: flex-end; align-items: flex-end; -webkit-box-sizing: border-box; box-sizing: border-box;}
.item01 .main-visual-prd-con .area{transform: translateX(90px);}
.item02 .main-visual-prd-con .area{transform: translateX(30px);}
.main-visual-prd-con img{max-height: 80%; display: inline-block !important;
transition-duration: 3s; transition: all 2s;
opacity: 0; transition-property: opacity,transform;
 transform: translateX(100px);}

/* 메인 비주얼 :: 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);
}
#mainVisual.active .main-visual-item.active-item .main-visual-txt1,
#mainVisual.active .main-visual-item.active-item .main-visual-txt2,
#mainVisual.active .main-visual-item.active-item .main-visual-txt3,
#mainVisual.active .main-visual-item.active-item .main-visual-more-btn{
	-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;
}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con .main-visual-txt3{ -webkit-animation-delay:0.7s; animation-delay:0.7s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con .main-visual-more-btn{-webkit-animation-delay:0.9s; animation-delay:0.9s;}

/* 제품비주얼 텍스트 딜레이 */
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay03 .main-visual-txt1{ -webkit-animation-delay:3.1s; animation-delay:3.1s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay03 .main-visual-txt2{ -webkit-animation-delay:3.5s; animation-delay:3.5s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay03 .main-visual-more-btn{-webkit-animation-delay:3.9s; animation-delay:3.9s;}

#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay04 .main-visual-txt1{ -webkit-animation-delay:4.1s; animation-delay:4.1s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay04 .main-visual-txt2{ -webkit-animation-delay:4.5s; animation-delay:4.5s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay04 .main-visual-more-btn{-webkit-animation-delay:4.9s; animation-delay:4.9s;}

#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay05 .main-visual-txt1{ -webkit-animation-delay:5.1s; animation-delay:5.1s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay05 .main-visual-txt2{ -webkit-animation-delay:5.5s; animation-delay:5.5s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay05 .main-visual-more-btn{-webkit-animation-delay:5.9s; animation-delay:5.9s;}

#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay06 .main-visual-txt1{ -webkit-animation-delay:6.1s; animation-delay:6.1s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay06 .main-visual-txt2{ -webkit-animation-delay:6.5s; animation-delay:6.5s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay06 .main-visual-more-btn{-webkit-animation-delay:6.9s; animation-delay:6.9s;}

#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay07 .main-visual-txt1{ -webkit-animation-delay:7.1s; animation-delay:7.1s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay07 .main-visual-txt2{ -webkit-animation-delay:7.5s; animation-delay:7.5s;}
#mainVisual.active .main-visual-item.active-item .main-visual-txt-con.txt-box-delay07 .main-visual-more-btn{-webkit-animation-delay:7.9s; animation-delay:7.9s;}


/* 제품비주얼 텍스트 위치 */
.main-visual-txt-con.txt-box-right .main-visual-txt-box{justify-content: flex-end;}
.main-visual-txt-con.txt-box-right .main-visual-txt-box .main-visual-txt-inner{width:50%;}


@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 */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:5.1%; width:100%; text-align:center; z-index:11; }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1;}
.main-visual-con .slick-dots li{float:left; margin-left:8px;}
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:10px; height:10px; background-color:#d6d6d6; font-size:0; opacity:0.5; -webkit-border-radius:10px; border-radius:10px;
}
.main-visual-con .slick-dots li.slick-active button{width: 40px; opacity:1.0;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{letter-spacing:-0.45px; text-align:center;}
.main-tit-box.ta-left{text-align: left;}
.main-tit-box .main-tit{font-size:68px; line-height: 0.5; color:#5e5e5e; font-weight:700; letter-spacing: -2px;}
.main-tit-box .main-sub-tit,
.main-tit-box .main-more-btn{
	opacity:0; 
}
.main-tit-box .main-sub-tit{display:block; margin-top:30px; font-size:16px; line-height:1.8; letter-spacing:-0.1px; color:#808080;}
.main-tit-box .main-more-btn{margin-top: 45px; display:inline-block; padding: 22px 94px 22px 38px; position: relative; font-size:14px; color:#fff; 
-webkit-border-radius: 50px; border-radius: 50px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e9de8+0,667af6+100 */
background: #0e9de8; /* Old browsers */
background: -moz-linear-gradient(left,  #0e9de8 0%, #667af6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0e9de8 0%,#667af6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0e9de8 0%,#667af6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e9de8', endColorstr='#667af6',GradientType=1 ); /* IE6-9 */}
.main-tit-box .main-more-btn span{position: absolute; top: 50%; margin-top: -1px; left: 126px; display: block; width: 40px; height: 1px; background-color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-tit-box .main-more-btn span:before{position: absolute; top: 50%; margin-top: -6px; right: -8px; display: block; content: ''; width: 8px; height: 12px; background: url("../image/visual_more_btn.png") center/cover no-repeat;}

@media all and ( min-width: 801px ){
	.main-tit-box .main-more-btn:hover span{-webkit-transform: translateX(5px); transform: translateX(5px);}
}

.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,
.aos-animate .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}
.active-section .main-tit-box .main-sub-tit,
.active-section .main-tit-box .main-more-btn{
	-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;}
.active-section .main-tit-box .main-sub-tit{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
.active-section .main-tit-box .main-more-btn{ -webkit-animation-delay:0.7s; animation-delay:0.7s;}


/* -------- 메인 컨텐츠 :: 컨텐츠1(Product Information) -------- */
#mainProductCon{}

.main-prd-tab-style{margin-top: 20px;}
.main-prd-tab-list{text-align: center; font-size: 0;}
.main-prd-tab-list li{position:relative; margin: 0 22px; display: inline-block;}
.main-prd-tab-list li:before{position: absolute; top: 50%; margin-top: -7px; left: -22px; display: block; content: ''; width: 1px; height: 14px; background-color: #cfcfcf;}
.main-prd-tab-list li:first-child:before{display: none;}
.main-prd-tab-list li a{display: block; font-size: 18px; line-height: 1.3; color: #cfcfcf; font-weight: 700; letter-spacing: -0.75px; -webkit-transition: all 0.2s; transition: all 0.2s;}
.main-prd-tab-list li.selected a{color: #5e5e5e;}

/* .main-prd-wrapper{margin-top: 15px; margin-right: -32px; position: relative; z-index: 999;}
.main-prd-wrapper .main-prd-slide{padding-bottom:70px;}
.main-prd-wrapper .swiper-container-horizontal > .swiper-scrollbar{left:0; width:100%; margin-right: 32px; width: calc(100% - 32px);}
.main-prd-wrapper .swiper-scrollbar-drag{background:#2f2f2f;} */
.main-prd-wrapper{margin-top: 15px; margin-right: -32px; position: relative; z-index: 999;}
.main-prd-wrapper .main-prd-slide{padding-bottom:90px;}
.main-prd-wrapper .swiper-container-horizontal > .swiper-scrollbar{height: 4px; left:0; bottom: 25px; width: calc(100% - 160px); background-color: #e3e3e3;}
.main-prd-wrapper .swiper-scrollbar-drag{top: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,7573f9+100 */
background: #00a3e6; /* Old browsers */
background: -moz-linear-gradient(45deg,  #00a3e6 0%, #7573f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #00a3e6 0%,#7573f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #00a3e6 0%,#7573f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3e6', endColorstr='#7573f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.main-prd-control{position: absolute; right: 30px; bottom: 0;}
.main-prd-control .arrow{display: inline-block; vertical-align: middle; cursor: pointer;}
.main-prd-control .arrow i{font-size: 18px; color: #9d9d9d;}
.main-prd-control .icon{margin: 0 10px; width: 48px; height: 48px; border: 1px solid #dbdbdb; -webkit-border-radius: 100%; border-radius: 100%; display: inline-block; vertical-align: middle; text-align: center;}
.main-prd-control .icon i{font-size: 20px; line-height: 48px; color: #4e4e4e;}

.main-prd-list{}
.main-prd-item{padding-top: 25px; padding-right: 32px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-prd-item a{position: relative; height: 0; padding-top: 126.5%; display: block; /* padding-top: 18%; */ text-align: center; border: 1px solid #e8e8e8; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 13px 13px 32px -6px rgba(0,0,0,0.08); -webkit-border-radius: 20px; border-radius: 20px; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-prd-item a:before{opacity: 0; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; display: block; content: ''; background: url("../image/gradient_line.png") center/contain no-repeat;  z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s;/* border: 6px solid; border-image-slice: 1; border-width: 3px; -webkit-box-sizing: border-box; box-sizing: border-box; border-image-source: linear-gradient(to top right, #02a2e6, #7573f9); -webkit-border-radius: 30px; border-radius: 30px; */}
.main-prd-item a:after{opacity: 0; position: absolute; top: -25px; left: 50%; margin-left: -25px; display: block; width: 50px; height: 50px; font-size: 20px; line-height: 50px; text-align: center; color: #fff; -webkit-border-radius: 100%; border-radius: 100%; z-index: 2; -webkit-transition: all 0.3s; transition: all 0.3s; content: '\e914'; font-family:xeicon;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e9de8+0,667af6+100 */
background: #0e9de8; /* Old browsers */
background: -moz-linear-gradient(left,  #0e9de8 0%, #667af6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0e9de8 0%,#667af6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0e9de8 0%,#667af6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e9de8', endColorstr='#667af6',GradientType=1 ); /* IE6-9 */}
.main-prd-item .prd-tit{position: absolute; top: 15%; left: 0; width: 100%; z-index: 1;}
.main-prd-item .prd-category{margin-bottom: 10px; font-size: 16px; line-height: 1.3; letter-spacing: -0.25px; color: #808080;}
.main-prd-item .prd-name{padding: 0 10px; font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; color: #5e5e5e;}
.main-prd-item .prd-thumb{margin-top: 20px; margin-top: 0; position: absolute; bottom: 0; left: 0; width: 100%;}
.main-prd-item .prd-thumb span{position:relative; display:block; padding-top:84.23%; padding-top: 127.02%; overflow: hidden; -webkit-border-radius: 20px; border-radius: 20px;}
.main-prd-item .prd-thumb img{position:absolute; top:0; left:0; width:100%; height:100%;  -webkit-transition: all 0.3s; transition: all 0.3s;}

@media all and ( min-width: 801px ){
	.main-prd-tab-list li a:hover{color: #5e5e5e;}
	.main-prd-item a:hover{box-shadow: 13px 13px 24px -6px rgba(0,0,0,0.3);}
	.main-prd-item a:hover:before{opacity: 1;}
	.main-prd-item a:hover:after{opacity: 1;}
	.main-prd-item a:hover .prd-thumb img{-webkit-transform: scale(1.05) rotate(0.02deg); transform: scale(1.05) rotate(0.02deg);}
}

/* 효과 */
#mainProductCon .main-prd-wrapper,
#mainProductCon .main-prd-tab-style{transform: translateY(50px); opacity: 0; visibility: hidden; transition: all 1s;}
#mainProductCon.effect-start .main-prd-wrapper,
#mainProductCon.effect-start .main-prd-tab-style{transform: translateY(0); opacity: 1; visibility: visible; transition-delay:0.6s;}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Networks) -------- */
#mainNetworkCon{}
#mainNetworkCon .main-tit-box{position: relative; z-index: 1;}

.global-map-wrapper{margin-top: -196px; position:relative; text-align: right; font-size: 0;}
.global-map-con{display: inline-block; position:relative; width: 1075px; height: 599px;}
.global-map-con-m{display:none;}
.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; }
@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; } 
}
.nation-circle{position:absolute; left:50%; top:0; display:inline-block; width:80px; height:80px;}
.nation-circle > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.nation-circle > span:nth-child(3) {
	-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
}
.nation-circle > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.nation-circle > span:nth-child(5) {
	-webkit-animation-delay: 2.5s;
		animation-delay:2.5s;
}
.nation-circle > span:nth-child(6) {
	-webkit-animation-delay: 4s;
		animation-delay:4s;
}
.nation-circle > span {
	background-color: rgba(0, 168, 229, 0.1);
	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 i{
	display:block; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:6px; height:6px; background-color:#00a8e5; 
	-webkit-border-radius:10px; border-radius:10px;
}
.nation-circle p{position:absolute; top:-80px; left:50%; margin-left: -60px; width: 118px; height:30px; font-size: 16px; line-height: 30px; font-weight: 700; letter-spacing: -0.25px; color:#2f2f2f; background-color: #fff; border: 1px solid #717171; text-align: center; -webkit-border-radius: 35px; border-radius: 35px;}
.nation-circle p:before{position: absolute; top: 30px; left: 50%; margin-left: -1px; display: block; content: ''; width: 1px; height: 88px; background-color: #717171;}

/* 효과 */
#mainNetworkCon .global-map-wrapper{opacity: 0; visibility: hidden; transition: all 1s;}
#mainNetworkCon.effect-start .global-map-wrapper{opacity: 1; visibility: visible;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Hot issue) -------- */
#mainIssueCon{}
.main-issue-con{margin-top: 30px;}
.main-issue-top-list{border-top: 1px solid #5e5e5e;}
.main-issue-top-item{border-bottom: 1px solid #e7e7e7;}
.main-issue-top-item a{position: relative; padding: 40px 13% 40px 2%; display: block;}
.main-issue-top-item a p{font-size: 14px; line-height: 1.3; letter-spacing: -0.1px;}
.main-issue-top-item a .tit{float: left; width: calc(100% - 165px); color: #5e5e5e;}
.main-issue-top-item a .date{float: right; width: 150px; text-align: right; color: rgba(128,128,128,0.7);}
.main-issue-top-item a .arrow{position: absolute; top: 50%; margin-top: -1px; right: 7%;}
.main-issue-top-item a .arrow span{position: absolute; top: 0; left: 0; display: block; width: 40px; height: 1px; background-color: #5e5e5e; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-issue-top-item a .arrow span:before{position: absolute; top: 50%; margin-top: -5px; right: -7px; display: block; content: ''; width: 7px; height: 9px; background: url("../image/visual_more_btn_bk.png") center/cover no-repeat;}

.main-issue-down-wrapper{margin-top: 30px; padding: 0 3.5%;}
.main-issue-down-list{margin: 0 -20px; display: flex; flex-wrap: wrap;}
.main-issue-down-item{padding: 20px 0; width: calc(50% - 40px); margin: 0 20px; position: relative; border: 1px solid #e2e2e2; background-color: #fff; -webkit-box-shadow: 5px 5px 13px -2px rgba(0,0,0,0.14); box-shadow: 5px 5px 13px -2px rgba(0,0,0,0.14); -webkit-border-radius: 15px; border-radius: 15px; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-issue-down-item a{display: block; width: 100%; height: 100%;}
.main-issue-down-item a:before{position: absolute; top: 12px; left: 50%; margin-left: -16px; content: ''; width: 32px; height: 8px; background-color: #e1e1e1; -webkit-border-radius: 8px; border-radius: 8px;}
.main-issue-down-item a .top{padding: 58px 6.7% 90px; text-align: center;}
.main-issue-down-item a .top img{display: inline-block; height: 30px;}
.main-issue-down-item a .top h5{margin-top: 30px; font-size: 22px; line-height: 1.3; letter-spacing: -0.35px; color: #5e5e5e; font-weight: 600;}
.main-issue-down-item a .top p{margin-top: 15px; font-size: 14px; line-height: 1.6; letter-spacing: -0.25px; color: #808080;}
#mainIssueCon .main-issue-down-item a .top p{min-height: 3.2em;}
.main-issue-down-item a .bottom{position: absolute; bottom: 0; left: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px 6.7%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#06a1e7+0,6e76f8+100 */
background: #06a1e7; /* Old browsers */
background: -moz-linear-gradient(45deg,  #06a1e7 0%, #6e76f8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #06a1e7 0%,#6e76f8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #06a1e7 0%,#6e76f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06a1e7', endColorstr='#6e76f8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
/* .main-issue-down-item a .bottom.bgc-blue{background-color: #00b3ed;}
.main-issue-down-item a .bottom.bgc-red{background-color: #e70014;}
.main-issue-down-item a .bottom.bgc-green{background-color: #40af4d;} */

.main-issue-down-item a .bottom b,
.main-issue-down-item a .bottom span{font-size: 14px; line-height: 20px; letter-spacing: -0.25px; color: #fff; display: inline-block; }
.main-issue-down-item a .bottom b{font-weight: 700; float: left;}
.main-issue-down-item a .bottom span{float: right;}

.main-issue-down-list .slick-arrow{position: absolute; top: 50%; margin-top: -15px;}
.main-issue-down-list .slick-arrow i{font-size: 30px; color: #5e5e5e;}
.main-issue-down-list .slick-prev{left: -3%;}
.main-issue-down-list .slick-next{right: -3%;}

@media all and ( min-width: 801px ){
	.main-issue-top-item a:hover .arrow span{-webkit-transform: translateX(5px); transform: translateX(5px);}
	.main-issue-down-item:hover{box-shadow: 5px 5px 20px -2px rgba(0,0,0,0.3);}
}

#mainIssueCon .main-issue-down-item{padding:0;}
#mainIssueCon .main-issue-down-item a .top{position: relative; padding:0; padding-top:63.97%;}
#mainIssueCon .main-issue-down-item a .top img{position: absolute; top:0; bottom:0; right:0; left:0; margin:auto; width:100%; height:auto;}


/* 효과 */
#mainIssueCon .main-issue-top-list,
#mainIssueCon .main-issue-down-wrapper{transform: translateY(50px); opacity: 0; visibility: hidden; transition: all 1s;}
#mainIssueCon.effect-start .main-issue-top-list,
#mainIssueCon.effect-start .main-issue-down-wrapper{transform: translateY(0); opacity: 1; visibility: visible; transition-delay:0.6s;}
#mainIssueCon.effect-start .main-issue-down-wrapper{transition-delay:0.9s;}




/* -------- 메인 컨텐츠 :: 컨텐츠4(Philosophy & Vision) -------- */
#mainVisionCon{}
.main-vision-con{margin-top: 65px;}
.main-vision-list{margin: 0 -3.5%; display: flex; flex-wrap:wrap;}
.main-vision-item{width: 26.33%; margin: 0 3.5%;}
.main-vision-inner{position: relative; height: 0; padding-top: 126.5%; border: 1px solid #e8e8e8; background-color: #fff; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 13px 13px 32px -6px rgba(0,0,0,0.08);  -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-vision-inner:before{opacity: 0; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; display: block; content: ''; background: url("../image/gradient_line.png") center/contain no-repeat;  z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-vision-inner .inner{position: absolute; top: 15%; left: 15px; right: 15px; text-align: center;}
.main-vision-inner .icon{position: relative; width: 100%; height: 98px;}
.main-vision-inner .icon img{position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; height: 98px; display: block;}
.main-vision-inner .tit{margin-top: 45px; font-size: 22px; line-height: 1.3; letter-spacing: -0.1px; font-weight: 700; color: #5e5e5e;}
.main-vision-inner .txt{margin-top: 25px; font-size: 16px; line-height: 1.8; letter-spacing: -0.1px; color: #808080;}

@media all and ( min-width: 801px ){
	.main-vision-inner:hover{box-shadow: 13px 13px 24px -6px rgba(0,0,0,0.3);}
	.main-vision-inner:hover .icon img{animation: navani 0.3s ease-in-out;}
	.main-vision-inner:hover:before{opacity: 1;}
}

@keyframes navani{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}

#mainVisionCon .main-vision-list .main-vision-item:nth-child(1),
#mainVisionCon .main-vision-list .main-vision-item:nth-child(2),
#mainVisionCon .main-vision-list .main-vision-item:nth-child(3){transform: translateY(50px); opacity: 0; visibility: hidden; transition: transform 1s, opacity 1s, visibility 1s;}
#mainVisionCon.effect-start .main-vision-list .main-vision-item:nth-child(1),
#mainVisionCon.effect-start .main-vision-list .main-vision-item:nth-child(2),
#mainVisionCon.effect-start .main-vision-list .main-vision-item:nth-child(3){transform: translateY(0); opacity: 1; visibility: visible; transition-delay:0.6s;}
#mainVisionCon.effect-start .main-vision-list .main-vision-item:nth-child(2){transition-delay:0.8s;}
#mainVisionCon.effect-start .main-vision-list .main-vision-item:nth-child(3){transition-delay:1s;}


/* -------- 메인 컨텐츠 :: FOOTER -------- */
#mainFooter .fp-tableCell {padding-top: 0;}


/* ******************  메인 오른쪽 퀵메뉴 ********************** */
.main-quick-sidebar{position:fixed; bottom: 6%; right:2%; z-index:99;}
.main-quick-sidebar > ul{width: 70px;}

.sidebar-sns-list{}
.sidebar-sns-list li{}
.sidebar-sns-list li + li{margin-top: 20px;}
.sidebar-sns-list li a{display: block; width: 70px; font-size: 26px; line-height: 40px; font-weight: 900; color: #fff; text-align: center; -webkit-transition: color 0.3s; transition: color 0.3s;}
.sidebar-sns-list li a i{font-size: 26px; line-height: 40px; color: #fff; font-weight: 400; -webkit-transition: color 0.3s; transition: color 0.3s;}

.sidebar-link-list{margin-top: 20px;}
.sidebar-link-list li{}
.sidebar-link-list li a{width:70px; height:70px; background-color: #fff21b; text-align:center; color:#fff; -webkit-border-radius: 100%; border-radius: 100%; display: flex; align-items: center; justify-content: center; -webkit-box-shadow: 6px 6px 8px 0 rgba(0,0,0,0.2); box-shadow: 6px 6px 8px 0 rgba(0,0,0,0.2);}
.sidebar-link-list li + li{margin-top: 15px;}
.sidebar-link-list li + li a{padding-top: 5px; font-size: 11px; line-height: 1.6; letter-spacing: -0.35px; font-weight: 600; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#06a1e7+0,6e76f8+100 */
background: #06a1e7; /* Old browsers */
background: -moz-linear-gradient(45deg,  #06a1e7 0%, #6e76f8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #06a1e7 0%,#6e76f8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #06a1e7 0%,#6e76f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06a1e7', endColorstr='#6e76f8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.sidebar-link-list li a i{font-size: 40px; line-height:70px; color: #533637;}

/* Black Style */
.main-quick-sidebar.black .sidebar-sns-list li a {color: #2f2f2f;}
.main-quick-sidebar.black .sidebar-sns-list li a i{color: #2f2f2f;}


/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 1;
    margin-top: -150px !important;
    top: 50%;
	left:3.1%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; margin:45px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{position:relative; display:block; width:6px; height:6px; background-color:#fff; border-radius:50%; opacity:0.3;filter:Alpha(opacity=30);}
#fp-nav ul li a span:after{position:absolute; display:inline-block; content:""; width:28px; height:28px; background-color: rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); visibility: hidden; transition:all 0.2s; animation: fadeFade 1.5s ease-in-out infinite;}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	left:40px; top:50%; transform: translateY(-50%); 
	opacity:0;filter:Alpha(opacity=0); visibility: hidden;
	display: inline-block; text-align: center; width: 50px;
	font-size:11px; line-height:1.6; padding: 2px 0; letter-spacing:-0.35px; -webkit-border-radius: 20px; border-radius: 20px;
	color:#464646; background-color: #fff;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
#fp-nav ul li:nth-child(2) .fp-tooltip{width: 100px;}
#fp-nav ul li:nth-child(3) .fp-tooltip{width: 80px;}
#fp-nav ul li:nth-child(4) .fp-tooltip{width: 80px;}
#fp-nav ul li:nth-child(5) .fp-tooltip{width: 100px;}
#fp-nav ul li .fp-tooltip:before{
  position: absolute; top: 50%; margin-top: -6px; left: -6px; content: ''; width: 0px; height: 0px;
  border-top: 6px solid transparent;
  border-bottom:6px solid transparent;
  border-right: 10px solid #fff;
 /*  opacity:0;filter:Alpha(opacity=0); visibility: hidden; */
  -webkit-transition:border-right-color 0.3s, opacity 0s, visibility 0s;
	transition:border-right-color 0.3s, opacity 0s, visibility 0s;
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{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%)}

#fp-nav ul li a.active span{opacity:1.0;filter:Alpha(opacity=100);}
#fp-nav ul li a.active span:after{visibility: visible;}

/* Black Style */
#fp-nav.black ul li a span{background-color:#464646;}
#fp-nav.black ul li a span:after{border-color:rgba(70,70,70,0.3);}
#fp-nav.black ul li .fp-tooltip{background-color: #464646; color: #fff;}
#fp-nav.black ul li .fp-tooltip:before{border-right-color: #464646;}
#fp-nav.black ul li a.active span{background-color: #333;}

#fp-nav ul li:hover .fp-tooltip{visibility: visible; opacity: 1;
-webkit-transition:opacity 0.3s, visibility 0.3s;
	transition:opacity 0.3s, visibility 0.3s;}

@keyframes fadeFade {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}



/* 비디오 영역 Start */
.background-video-wrapper{position:relative; overflow:hidden; height:100%; width:100%;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%; transform:scale(1.01)}
.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;
}


.main-tit-box .main-tit{color:#09a6e6;}

/* What's New? */
#mainProductCon .area{max-width:1454px}
.main-product-con{position: relative;}
.main-product-con .main-tit-box{position: absolute; top:50px; left:0; z-index:1;}
.main-product-img-box{position: relative; width:100%; margin:auto; margin-right:0; opacity:0;}
.main-product-img-box span{display: block; position: relative; width:100%; height:0; padding-top:calc(100vh - 120px); margin-top:60px;}
.main-product-img-box span img{position: absolute; bottom:0; right:0; max-width:100%; max-height:100%;}

.main-product-con .logo-txt{margin-top:150px; opacity:0;}
.active-section .main-product-con .logo-txt{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.3s;}

.active-section .main-product-img-box{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.5s;}


/* EXHIBITION */
.main-exbibition-con{margin-top:70px; opacity:0;}
.main-exbibition-list{display: flex; justify-content:space-between;}
.main-exbibition-list .list-item{width:30.77%; border-radius:20px; overflow:hidden; box-shadow: 28px 28px 60px 0px rgba(0, 0, 0, 0.12);}
.main-exbibition-list .list-item a{display: block; position: relative;}
.main-exbibition-list .list-item .top span{display: block; position: relative; width:100%; height:0; padding-top:100%;}
.main-exbibition-list .list-item .top span img{position: absolute; width:100%; height:100%; top:0; left:0;}
.main-exbibition-list .list-item .bottom{display: flex; align-items:center; justify-content:space-between; height:50px; padding:0 7.5%; box-sizing:border-box;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#06a1e7+0,6e76f8+100 */
background: #06a1e7; /* Old browsers */
background: -moz-linear-gradient(45deg,  #06a1e7 0%, #6e76f8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #06a1e7 0%,#6e76f8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #06a1e7 0%,#6e76f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06a1e7', endColorstr='#6e76f8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.main-exbibition-list .list-item .bottom .bottom-txt{font-size:14px; letter-spacing:-0.025em; color:#fff; font-weight:700; padding-right:10px; box-sizing:border-box;}
.main-exbibition-list .list-item .bottom .date{font-size:13px; color:#fff; text-align:right;}

.active-section .main-exbibition-con{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.5s;}


/* Networks */
#mainNetworkCon .network-map-container{max-width:1272px; margin-left:300px; opacity:0;}
#mainNetworkCon .network-nation-box .arrow{margin:220px 0 0 -243px}
.active-section .network-map-container {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 1s;}



#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 .slick-arrow{position: absolute; top:-9999px;}
.main-visual-con{z-index:1;}

/* 메인 비주얼 :: 비디오 */
.main-visual-item video{
	position: absolute;
	top: 0%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: 100%;
	transform: translate(-50%, 0%);
}