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



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{word-break:keep-all}
.main-tit-box .main-tit{color:#040404; font-size:80px; font-weight:700; letter-spacing:0}
.main-tit-box .main-sub-tit{color:#666; font-size:19px; letter-spacing:-0.65px; font-weight:400; line-height:1.52; }

/* -------- 메인 컨텐츠 :: 컨텐츠1(PRODUCT) -------- */
#mainContent1{height:897px}
#mainContent1 .main-tit-box .main-tit{color:#000}
#mainContent1 .main-tit-box .main-sub-tit{margin-top:20px;}
.half-con{height:100%; position:relative}
.half-con > .main-con-sec{float:left; width:50%; height:100%;}


/* 왼쪽 */
.main-con1 > .main-con-sec.main-prd-lf{position:relative; z-index:2;}
.main-prd-lf .con-inner{padding:0 20px 0 195px; position:absolute; top:50%; transform:translateY(-50%); left:0; width:calc(100% - 215px)}
.main-prd-lf .con-inner .slider-prd-txt{margin-top:85px}
.main-prd-lf .con-inner .slider-prd-txt li{margin-bottom:15px}
.main-prd-lf .con-inner .slider-prd-txt li .inner{display:block; width:410px; position:relative; cursor:pointer}
.main-prd-lf .con-inner .slider-prd-txt li .inner:before,
.main-prd-lf .con-inner .slider-prd-txt li .inner:after{position:absolute; display:inline-block; content:""; opacity:0; transition:all 0.4s}
.main-prd-lf .con-inner .slider-prd-txt li .inner:before{width:calc(100% - 65px); height:1px; background-color:#0082cb; bottom:-2px; right:0;}
.main-prd-lf .con-inner .slider-prd-txt li .inner:after{width:24px; height:15px; background:url("/images/icon/blue_arrow.png"); background-size:cover !important; right:0; top:50%; transform:translateY(-50%);}
.main-prd-lf .con-inner .slider-prd-txt li .num,
.main-prd-lf .con-inner .slider-prd-txt li .name{display:inline-block; margin:0 -1px; vertical-align:middle; transition:all 0.3s}
.main-prd-lf .con-inner .slider-prd-txt li .num{width:47px; height:47px; border:1px solid #dcdcdc; box-sizing:border-box; text-align:center; line-height:47px; font-weight:400; font-size:14px; letter-spacing:0; color:#000}
.main-prd-lf .con-inner .slider-prd-txt li .name{width:calc(100% - 67px); padding-left:20px; font-weight:400; font-size:22px; letter-spacing:0; color:#000}


.main-prd-lf .con-inner .slider-prd-txt li.slick-current .inner .num{background-color:#0082cb; color:#fff}
.main-prd-lf .con-inner .slider-prd-txt li.slick-current .inner .name{color:#0082cb; font-weight:600}
.main-prd-lf .con-inner .slider-prd-txt li.slick-current .inner:before,
.main-prd-lf .con-inner .slider-prd-txt li.slick-current .inner:after{opacity:1}

/*
.main-prd-lf .con-inner .slider-prd-txt li a:hover .num{background-color:#0082cb; color:#fff}
.main-prd-lf .con-inner .slider-prd-txt li a:hover .name{color:#0082cb; font-weight:600}
.main-prd-lf .con-inner .slider-prd-txt li a:hover:before,
.main-prd-lf .con-inner .slider-prd-txt li a:hover:after{opacity:1}
*/


/* 오른쪽 */
.half-con > .main-con-sec.main-prd-rt{position:relative; transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.55s; transform:scaleX(0); float:right; z-index:3; }
.main-prd-rt:after{position:absolute; content:""; width:100%; height:100%; right:0; top:0; background-color:#fff; transition-property:width; transition-delay:.4s; transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.55s; z-index:9; opacity:1}
.main-prd-rt .prd-rt-wrap{position:absolute; top:0; left:0; width:100%; height:100%; }
.main-prd-rt .slider-prd-img{position:static}
.main-prd-rt .slider-prd-img,
.main-prd-rt .slider-prd-img .slick-list,
.main-prd-rt .slider-prd-img .slick-track{height:100%}
.main-prd-rt .slider-prd-img .prd-big-img{background-size:cover !important; display:block; width:100%; height:100%}
.main-prd-rt .slider-prd-img .slick-list{z-index:9}

.main-prd-rt .slider-prd-img .slick-dots{position:absolute; bottom:0; left:50%; transform:translate(-50%); z-index:999; width:595px; margin-bottom:3.7%; cursor:pointer; margin-left:-50%; opacity:0; transition:opacity 0.7s; transition-delay:1s}
.main-prd-rt .slider-prd-img .slick-dots li{position:relative; float:left; margin:0 3px; border:1px solid rgba(255,255,255,0.3); width:110px}
.main-prd-rt .slider-prd-img .slick-dots li.slick-active:after,
.main-prd-rt .slider-prd-img .slick-dots li.slick-active:before{position:absolute; display:inline-block; }
.main-prd-rt .slider-prd-img .slick-dots li.slick-active:after{content:""; width:100%; height:100%; background-color:#0082cb; top:0; left:0; opacity:0.8}
.main-prd-rt .slider-prd-img .slick-dots li.slick-active:before{content: "\e913"; font-family: xeicon; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; z-index:9; font-size:28px}
.main-prd-rt .slider-prd-img .slick-dots li img{max-width:100%}

#mainContent1.aos-animate .main-prd-rt{transform:scaleX(1); transform-origin:left top; transition-property:transform}
#mainContent1.aos-animate .main-prd-rt:after{width:0; opacity:1}
#mainContent1.aos-animate .main-prd-rt .slider-prd-img .slick-dots{opacity:1}


/* -------- 메인 컨텐츠 :: 컨텐츠2(APPLICATION) -------- */
.main-con2{position:relative}
/* 왼쪽 */
.main-app-lf{position:absolute; top:0; left:0; width:50%; height:100%}
.main-app-lf:after{position:absolute; display:inline-block; content:""; width:100%; height:100%; background:url("http://unieye.co.kr/images/main/main_app_bg.jpg") no-repeat 50% 0; background-size:cover; top:0; left:0}
.main-app-lf .app-lf-inner{position:absolute; top:50%; left:0; transform:translateY(-50%); padding:0 0 0 195px; z-index:9}
.main-app-lf .app-lf-inner .main-tit-box .main-tit{color:#fff}
.main-app-lf .app-lf-inner .main-tit-box .main-sub-tit{color:#fff; margin-top:50px}
.main-app-lf{transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.5s; transform:scaleX(0);}
.main-app-lf:before{position:absolute; content:""; width:100%; height:100%; right:0; top:0; background-color:#fff; transition-property:width; transition-delay:.4s; transition-timing-function:cubic-bezier(.64,.045,.35,1); transition-duration:.5s; z-index:9; opacity:1}

#mainContent2.aos-animate .main-app-lf{transform:scaleX(1); transform-origin:left top; transition-property:transform}
#mainContent2.aos-animate .main-app-lf:before{width:0; opacity:1}

/* 오른쪽 */
.main-app-rt{float:right; width:50%}
.app-menu-list{height:100%}
.app-menu-list li{float:left; width:50%; /*height:450px;*/ transition:background-color 0.4s; background-color:#fff}
.app-menu-list li:first-child,
.app-menu-list li:nth-child(4){background-color:#f0f0f0}
.app-menu-list li .inner{position:relative; display:block;}
.app-menu-list li .inner .app-menu-txt{padding:18.5% 15% 13%;  word-break:keep-all}
.app-menu-list li:first-child .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_01.png") no-repeat}
.app-menu-list li:nth-child(2) .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_02.png") no-repeat}
.app-menu-list li:nth-child(3) .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_03.png") no-repeat}
.app-menu-list li:last-child .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_04.png") no-repeat}
.app-menu-list li .inner-box{transition:all 0.4s; padding-bottom:30%; background-position:86% 80% !important; display:block}
.app-menu-list li .inner .app-menu-txt .tit{font-weight:500; font-size:32px; letter-spacing:-0.25px; color:#000; line-height:1.3; transition:all 0.4s}
.app-menu-list li .inner .app-menu-txt .explain{font-weight:400; font-size:19px; letter-spacing:-0.65px; color:#666; line-height:1.52; margin-top:30px; transition:all 0.4s}

@media all and (min-width:801px){	
	.app-menu-list li:hover{background-color:#0082cb}
	.app-menu-list li:hover .app-menu-txt .tit,
	.app-menu-list li:hover .app-menu-txt .explain{color:#fff}
	.app-menu-list li:hover:first-child .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_01_on.png") no-repeat}
	.app-menu-list li:hover:nth-child(2) .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_02_on.png") no-repeat}
	.app-menu-list li:hover:nth-child(3) .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_03_on.png") no-repeat}
	.app-menu-list li:hover:last-child .inner-box{background:url("http://unieye.co.kr/images/main/main_app_icon_04_on.png") no-repeat}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(TECHNOLOGY) -------- */
#mainContent3{background:url("../images/main/main_technology.jpg") no-repeat 50% 0; background-size:cover; position:relative; height:896px}
.technology-inner{position:absolute; top:50%; left:0; transform:translateY(-50%) perspective(2000px); padding-left:200px; width:1300px}
.technology-inner .main-tit-box .sub-txt{display:block; font-weight:600; font-size:18px; letter-spacing:-0.25px; color:#fff; margin-bottom:15px}
.technology-inner .main-tit-box .main-tit{color:#fff}
.technology-inner .main-tit-box .main-sub-tit{color:#fff; margin-top:70px;}
.technology-inner .main-tit-box .more-view-btn{display:inline-block; width:235px; height:68px; line-height:68px; text-align:center; background-color:#fff; font-weight:600; font-size:15px; letter-spacing:0; color:#000; margin-top:40px}
.technology-inner .main-tit-box .more-view-btn em{display:inline-block; width:24px; height:15px; background:url("../images/main/black_arrow.png") no-repeat; background-size:cover !important; margin-left:32px; vertical-align:middle; position:relative}

#mainContent3 .technology-inner{clip: rect(0px, 0, 500px, 0); opacity: 0; transition: all 2s}
#mainContent3.aos-animate .technology-inner{clip: rect(0px, 1300px, 500px, 0); opacity: 1}

@media all and (min-width:801px){	
	.technology-inner .main-tit-box .more-view-btn:hover em{animation: movearrow 0.9s ease-in-out; animation-iteration-count: infinite;}
}
@keyframes movearrow {
	  0% {
		left:0
	  }
	  50% {
		left:-4%
	  }
	  100% {
		left:0
	  }
	}


/* -------- 메인 컨텐츠 :: 컨텐츠4(NEWS) -------- */
.main-news-inner{max-width:1300px; margin:0 auto; position:relative; padding:130px 0 135px}
.main-news-con{position:relative; padding-top:165px}
.main-news-con .main-tit-box{text-align:center; margin-bottom:45px; position:absolute; width:400px; top:0; left:50%; text-align:center; clip:rect(0px, 200px, 180px, 200px); opacity: 0; transform:perspective(2000px) translateX(-50%); transition:all 0.8s}
.main-news-con .main-tit-box .main-tit{font-size:90px; margin-bottom:15px}

#mainContent4.aos-animate .main-tit-box{clip:rect(0px, 400px, 180px, 0px); opacity: 1}


.main-news-list .bbs-item > a{display:block; position:relative; padding:30px 70px 30px 40px; height:90px; border-bottom:1px solid #e3e3e3; background-color:#fff; transition:all 0.3s}
.main-news-list .bbs-item:first-child > a{border-top:1px solid #000}
.main-news-list .bbs-item .news-category{position:absolute; top:50%; transform:translateY(-50%); left:40px; width:85px; /*height:34px; line-height:34px;*/ text-align:center; border:1px solid #808080; box-sizing:border-box; font-weight:400; font-size:15px; letter-spacing:-0.65px; color:#000; transition:all 0.3s; padding:8px 0}
.main-news-list .bbs-item .bbs-list-info-con{margin:0 25% 0 140px;}
.main-news-list .bbs-item .bbs-subject-box{display:block; position:relative; padding:0 30px 0 0; margin-bottom:10px } 
.main-news-list .bbs-item .bbs-subject-txt-box{display:inline-block; position:relative; max-width:100%; }
.main-news-list .bbs-item .bbs-subject-txt{display: block; padding-right: 5px; width: 100%; font-size:22px; font-weight:500; line-height:1.1; vertical-align:middle; color:#000; letter-spacing:-0.25px; transition:all 0.3s}
.main-news-list .bbs-item .bbs-list-info-con .notice-tit{display:inline-block; vertical-align:middle; border:1px solid #34bdd7; height:25px; line-height:25px; border:1px solid #34bdd7; padding:0 15px; font-size:14px; letter-spacing:-0.5px; color:#34bdd7; margin-right:10px;}
.main-news-list .bbs-item .bbs-subject-txt .category{font-weight:500; color:#34bdd7; margin-right:5px; }
.main-news-list .bbs-item .bbs-list-info-con .bbs-list-sub-txt{font-weight:400; color:#666; font-size:16px; letter-spacing:-0.65px; line-height:1.5; margin-bottom:20px}
.main-news-list .bbs-item .bbs-list-info-con .main-news-date{font-weight:400; font-size:14px; letter-spacing:0; color:#666}
.main-news-list .bbs-item .bbs-list-info-con .main-news-date i{margin-right:5px; font-size:18px; color:#818181; vertical-align:middle; margin-top:-4px}
.main-news-list .bbs-item .main-news-thum{position:absolute; top:30px; right:70px; text-align:right; width:144px}
.main-news-list .bbs-item .main-news-thum span{position:relative; display:block; padding-top:61%}
.main-news-list .bbs-item .main-news-thum span img{position:absolute; top:0; left:0; width:100%; height:100%}

.main-news-con .more-view-btn{position:absolute; right:0; top:47px; font-weight:600; font-size:15px; letter-spacing:0; color:#0082cb}
.main-news-con .more-view-btn .arrow{display:inline-block; margin-left:11px; width:25px; height:14px; background:url("/images/icon/blue_arrow.png") no-repeat; background-size:cover !important; vertical-align:top}

@media all and (min-width:801px){
	.main-news-list .bbs-item a:hover{background-color:#f6f6f6}
	.main-news-list .bbs-item a:hover .news-category{border-color:#000; background-color:#000; color:#fff}
	.main-news-list .bbs-item a:hover .bbs-subject-txt{color:#0082cb}
	.main-news-con .more-view-btn:hover{animation: move 0.9s ease-in-out; animation-iteration-count: infinite;}
}
@keyframes move {
	  0% {
		margin-right:0;
	  }
	  50% {
		margin-right:1%;
	  }
	  100% {
		margin-right:0;
	  }
	}


/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{position:fixed;z-index:99; transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); top: 50%; left:70px; transform:translateY(-50%); width:33px}
#rightBar > ul {}
#rightBar > ul > li{position:relative; margin:30px 0;}
#rightBar > ul > li > a{display:block; position:relative; box-sizing:border-box; padding:5px;}
#rightBar > ul > li > a span{position:relative; display:block; width:5px; height:5px; background-color:#fff; border-radius:50%; opacity:0.55;filter:Alpha(opacity=50);}
#rightBar > ul > li > a span:after{position:absolute; display:inline-block; content:""; width:33px; height:33px; border:1px solid #fff; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; transition:all 0.2s}
#rightBar > ul > li.active a span{opacity:1.0;filter:Alpha(opacity=100);}
#rightBar > ul > li.active a span:after{opacity:1}
#rightBar > ul.bk-bar li a span{background-color:#343434}
#rightBar > ul.bk-bar li a span:after{border-color:rgba(52,52,52,0.3)}
/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:80px;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; margin:30px 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:5px; height:5px; background-color:#fff; border-radius:50%; opacity:0.55;filter:Alpha(opacity=50);}
#fp-nav ul li a span:after{position:absolute; display:inline-block; content:""; width:33px; height:33px; border:1px solid #fff; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; transition:all 0.2s}
#fp-nav ul li .fp-tooltip{display:none}
#fp-nav ul li a.active span{opacity:1.0;filter:Alpha(opacity=100);}
#fp-nav ul li a.active span:after{opacity:1}


/* Black Style */
#fp-nav.black ul li a span{background-color:#343434}
#fp-nav.black ul li .fp-tooltip{color:#222;}
#fp-nav.black ul li a span:after{border-color:rgba(52,52,52,0.3)}