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

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage .section:before {content:""; display:block; width:1px; height:100%; background-color:rgba(255,255,255,0.15); position:absolute; left:100px; top:0; z-index:99; }
#fullpage .section.color:before {background-color:#eee;}

/* ******************  메인 비주얼 ********************** */
#fullpage #mainVisual{height:100vh}
#mainVisual{overflow:hidden; width:100%; height:1000px; 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;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.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;
	width:100%; 
	height:100%;
/* 	font-family: 'Roboto', 'IBMPlexSansKR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; */
}
.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:70px; font-weight:700; letter-spacing:-0.006428em; color:#fff; margin-bottom:24px; line-height:1;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:24px; letter-spacing:-0.010416em; color:#fff; margin-left:7px;}


/* 메인 비주얼 :: 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.5s; animation-delay:0.5s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.8s; animation-delay:0.8s;}
.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);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:40px; left:0; width:100%; text-align:center; z-index:9; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span{display:block; color:#fff; letter-spacing:5px; font-size:12px; font-weight:700; }
.main-scroll-icon .scroll-circle-box{display:block; position:relative; width:9px; height:20px; border:2px solid #fff; margin:0 auto 15px; -webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px; }
.main-scroll-icon .scroll-circle-box:before{
	position:absolute; content:""; left:3px; top:5px; width:3px; height:3px; background-color:#fff; opacity:0; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;;
	animation:mouseScroll 1.5s infinite;
}
@keyframes mouseScroll {
  0% { opacity:1; transform: translateY(0px) }
  100% {opacity:0; transform: translateY(8px)}
}


/* 메인 비주얼 :: 커버 */
.cover-wrap {position:absolute; top:0; left:0; width:100%; height:100vh; z-index:10000;}
.cm-cover-layout {position:relative; overflow:hidden; z-index:99; height:100%;}
.cm-cover-layout .cm-cover-inner {display:block; width:100%; height:100%; /*opacity: 0; transition: opacity 0.5s linear 0.62s;*/}
.cm-cover-layout .cm-cover-inner:after,
.cm-cover-layout .cm-cover-inner:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #3686ff;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all .65s ease-in-out;
    transition: all .65s ease-in-out
}

.cm-cover-layout .cm-cover-inner:after {
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}
.cm-cover-layout .cm-cover-inner:before {
    background-color: #fff;
    bottom: 0%;
    z-index:10;
}
.animated .cm-cover-layout .cm-cover-inner:after,
.animated .cm-cover-layout .cm-cover-inner:before{bottom:-100%;}
.cm-cover-layout.delay300 .cm-cover-inner:after {
	-webkit-transition-delay: .55s;
    transition-delay: .55s
}
/* 좌에서 우로 */
.animated .cm-cover-layout.left-to-right .cm-cover-inner:after,
.animated .cm-cover-layout.left-to-right .cm-cover-inner:before{right:-100%;}
.cm-cover-layout.left-to-right .cm-cover-inner:after,
.cm-cover-layout.left-to-right .cm-cover-inner:before {bottom:auto; left:auto; right:0; top:0;} 


/* ******************  메인 컨텐츠 :: 공통 ********************** */
/* 공통 :: 타이틀 */
.main-tit-box .main-tit{color:#000; font-size:65px; font-weight:700; letter-spacing:-0.005em; }
.main-tit-box .main-sub-tit{display:block; margin-bottom:15px; color:#3686ff; font-size:20px; letter-spacing:-0.05em; font-weight:700; }
.main-tit-box .main-sub-txt{margin-top:21px; margin-bottom:13px; color:#000; font-size:25px; letter-spacing:-0.03em; line-height:1.5; font-weight:700; }
.main-tit-box .main-txt{ color:#888; font-size:16px; line-height:1.875em; letter-spacing:-0.021875em; }

/* 공통 :: 기술레이아웃 */
.main-tech-con {display:flex; align-items:center;}
.main-tech-con .img-con {width:50%;}
.main-tech-con .img-con  img {max-width:100%;}
.main-tech-con .txt-con {width:50%;}
/* 버튼 */
.main-more-btn{position:relative; display:inline-block; width:100px; height:100px; border-radius:50%; text-align:center;  background-color:rgba(54,134,255,0.2);}
.main-more-btn:before {content:""; position:absolute; top:50%; left:50%; margin:-80px 0 0 -80px; width:160px; height:160px; border:1px dashed rgba(54,134,255,0.2); border-radius:50%;  animation: rotate_image 10s linear infinite;}
.main-more-btn .circle{position:absolute; top:50%; left:50%; margin:-40px 0 0 -40px; border-radius:50%; display:inline-block; width:80px; height:80px;  background-color:#3686ff; transition:all 0.3s}
.main-more-btn .icon{font-size:24px; color:#fff; line-height:100px; position:relative; z-index:9; transition:all 0.4s}
@media all and ( min-width: 801px ){		
	.main-more-btn:hover .circle{animation: circleHover 0.7s both;}
	.main-more-btn:hover .icon{animation: iconHover 0.7s both;}
}
@keyframes circleHover {
	0% {
		transform:scale(1); 
	}
	50% {
		transform:scale(1.4); 
	}
	100% {
		transform:scale(1); 
	}
}
@keyframes iconHover {
	0% {
		transform:rotate(0); 
	}
	100% {
		transform:rotate(180deg); 
	}
}

@keyframes rotate_image{
	100% {
    	transform: rotate(360deg);
    }
}

/* ******************  메인 컨텐츠 :: Press Release ********************** */
#mainPrCon .main-tit-box { text-align:center; margin-bottom: 60px;}
#mainPrCon .main-tit-box .main-tit {color: #fff;}
.main-pr-list {/* margin:0 -15px; */}
.main-pr-list li {margin:0 15px; }
.main-pr-con .list-box .main-pr-list .slick-track > li {opacity:0;}
.main-pr-con .list-box.animated .main-pr-list .slick-track > li {opacity:1;}
.main-pr-con .list-box.animated .main-pr-list .slick-track > li.first {
	-webkit-animation: text-active-animation 1.3s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}


.main-pr-list .slick-track > li {width:380px;}
.main-pr-list a {position:relative; display:block; background-color:#fff; transition: all 0.4s;}
.main-pr-list a .txt-box {padding:40px 40px 50px; }
.main-pr-list a .category {font-size: 13px; letter-spacing: 0.01923em; color: #3686ff; transition: all 0.4s;}
.main-pr-list a .img-wrap { top:0; left:0; width:100%; height:100%;}
.main-pr-list a .img-wrap span {display:block; position:relative; padding-top:63.15%;  }
.main-pr-list a .tit {display:block; font-size: 24px; line-height:1.5; height:3em;  letter-spacing: 0.01458em; color: #000; font-weight:600; margin-top:47px; transition: all 0.4s;}
.main-pr-list a .txt {font-size: 15px; line-height:2; height:6em;  letter-spacing: 0.01666em; color:#000; font-weight:300; margin-top:10px; opacity:0.5; transition: all 0.4s;}
.main-pr-list a .date {display:block; font-size: 13px; color: #aaa; margin-top:45px; transition: all 0.4s;}
/* 이미지버전 */
.main-pr-list a .img-wrap + .txt-box {padding:27px 30px 30px;}
.main-pr-list a .img-wrap + .txt-box .tit {margin-top:0; font-size:20px;}
.main-pr-list a .img-wrap + .txt-box .category {position:absolute; top:40px; left:40px; color: #fff;}
.main-pr-list a .img-wrap + .txt-box .date {margin-top:10px;}
/* hover */
@media all and (min-width:801px){
	.main-pr-list a:hover {background-color: #3686ff; }
	.main-pr-list a:hover .category  , .main-pr-list a:hover .tit , .main-pr-list a:hover .txt ,
	.main-pr-list a:hover .date  {color: #fff; }
}
/* dots */
.main-pr-list .slick-dots {position:absolute; width:100%; bottom:-93px; left:0; text-align:center; }
.main-pr-list .slick-dots li {display:inline-block;}
.main-pr-list .slick-dots li button {position:relative; width:10px; height:10px; border:2px solid rgba(255,255,255,0.35); border-radius:50%; font-size:0; transition: all 0.4s;}
.main-pr-list .slick-dots li button:before {content:""; width:24px; height:24px; background-color:rgba(255,255,255,0.15); position:absolute; left:50%; top:50%; margin:-12px 0 0 -12px; border-radius:50%; opacity:0; transition: all 0.4s;}
.main-pr-list .slick-dots li.slick-active button {background-color:#fff;}
.main-pr-list .slick-dots li.slick-active button:before {opacity:1;}

/* arrow */
.main-pr-list .slick-arrow {position:absolute; top:50%; margin-top:-40px; width:80px; height:80px; border-radius:50%; background-color:rgba(255,255,255,0.1); font-size:24px; color: #fff; transition: all 0.4s;}
.main-pr-list .slick-arrow i {line-height:82px;}
.main-pr-list .slick-arrow.slick-prev {left:0; margin-left:-110px;}
.main-pr-list .slick-arrow.slick-prev i {margin-left: -5px;}
.main-pr-list .slick-arrow.slick-next {right:0; margin-right:-110px;}
.main-pr-list .slick-arrow.slick-next i {margin-right: -5px;}
.main-pr-list .slick-arrow.slick-disabled {background:none; color: rgba(255,255,255,0.25); cursor:auto;}


/* ******************  메인 컨텐츠 :: Aptamer ********************** */
#mainAptamerCon .fp-tableCell {padding-top:100px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
#mainAptamerCon .main-tech-con {/* display:table; width:100%; table-layout:fixed; */ flex-direction:row-reverse;}
/* #mainAptamerCon .main-tech-con .img-con {display:table-cell; vertical-align:middle; width:50%} */
#mainAptamerCon .main-tech-con .txt-con {/* display:table-cell; vertical-align:middle; width:50%;  */padding-left:100px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
#mainAptamerCon .main-tech-con .main-more-btn {margin-top:110px;}
#mainAptamerCon .main-tech-con .img-wrap {position:relative; padding-bottom:30px;}
#mainAptamerCon .main-tech-con .img-wrap iframe {width:100%; }
/* .background-video-wrapper{position:relative; overflow:hidden; width:100%; padding-top:56.25%; background-color:#fff;}
.background-video {position:absolute; top: 0; left: 0; width:100%; height:100%;}
.background-video iframe{	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; min-height: calc(100% + 340px); pointer-events:none; opacity:0; transition:opacity 0.4s; }
.background-video.start iframe{opacity:1; }
.background-video-alternative{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}
 */
#mainAptamerCon .main-tech-con .img-wrap:before {content:""; width:51.94%; padding-top:31.16%; display:block; position:absolute; bottom: 0; left:-30px; background:url("/images/main/main_aptamer_triangle.png") no-repeat; background-size:cover; z-index:-1;}

/* ******************  메인 컨텐츠 :: BiFAp ********************** */
#mainBiFApCon .fp-tableCell { padding-top:100px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-bifap-con {display:flex; align-items:center;}
.main-bifap-con .txt-con {width:50%; }
.main-bifap-con .txt-con .tit {font-size:54px; letter-spacing:-0.04em; line-height:1.2962em; color: #000;}
.main-bifap-con .txt-con .txt {font-size:18px; letter-spacing:-0.06em; line-height:1.77em; color: #888; margin-top:14px;}
.main-bifap-con .link-con { width:50%; padding:0 30px 0 50px; text-align:right; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-bifap-con .link-con .inner {position:relative;}
.main-bifap-con .link-con .inner:before {content:""; width:calc(100% - 190px); height:1px; background-color:#ddd; position:absolute; top:50%; left:0; }
.main-bifap-con .link-con .main-more-btn {display:inline-block; }

#mainBiFApCon .main-tech-con {position:relative; display:table; width:100%; height:100%; margin-top:90px;}
#mainBiFApCon .main-tech-con .img-con {display:table-cell; vertical-align:top; }
#mainBiFApCon .main-tech-con .img-con .img-wrap {position:relative; height:100%; background:url("/images/main/main_bifap_img.jpg") center no-repeat; background-size:cover;}
#mainBiFApCon .main-tech-con .txt-con {display:table-cell; vertical-align:top; background-color:#fff;  color: #000; text-align:left; padding:57px 50px;}
#mainBiFApCon .main-tech-con .txt-con .tit {font-size:46px; letter-spacing: -0.6px; line-height:1.304;}
#mainBiFApCon .main-tech-con .txt-con .txt {font-size:18px; letter-spacing: -0.35px; line-height:1.77; color: #888; margin-top:11px;}

/* #mainBiFApCon .main-tech-con .txt-con .main-tit-box {display:table; width:100%; height:100%; padding:0 20px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
#mainBiFApCon .main-tech-con .txt-con .main-tit-box .main-tit {display:table-cell; vertical-align:middle;}
 */

/* ******************  메인 컨텐츠 :: Pipeline ********************** */
.main-pipe-con .txt-con {width:30%; }
.main-pipe-con .link-con{width:70%}
.main-tech-pipe-con{display: flex; flex-wrap:wrap; width:100%; margin-top:90px;}
.main-tech-pipe-con .main-pipe-list{width:25%; text-align:center; padding:0 10px; box-sizing:border-box;}
.main-tech-pipe-con .main-pipe-list .img-wrap{margin-bottom:43px;}
.main-tech-pipe-con .main-pipe-list .img-wrap span{position: relative; display: block; width:100%; height:0; padding-top:48.22%;}
.main-tech-pipe-con .main-pipe-list span img{position: absolute; display: block; height:100%; top:0; right:0; bottom:0; left:0; margin:auto; max-width:100%;}
.main-tech-pipe-con .main-pipe-list .sub-tit{display: block; font-size:30px; line-height:1em; letter-spacing:-0.25px; color:#000; font-weight:600; margin-bottom:25px;}
.main-tech-pipe-con .main-pipe-list .main-txt{font-size:18px; line-height:1.66em; letter-spacing:-0.75px; color:#333; font-weight:500; margin-bottom:25px;}
.main-tech-pipe-con .main-pipe-list .main-txt-02{position: relative; font-size:16px; line-height:1.75em; letter-spacing:-0.75px; color:#888; text-align:left; margin:0 11%; padding-left:8px;}
.main-tech-pipe-con .main-pipe-list .main-txt-02:before{position: absolute; content:''; width:4px; height:4px; -webkit-border-radius:50%;border-radius:50%; background:#888; top:11px; left:0;}


/* ******************  메인 컨텐츠 :: Lung ********************** */
#mainLungCon .main-tech-con {}
#mainLungCon .main-tech-con .main-tit-box .main-tit span {display:inline-block;}
#mainLungCon .main-tech-con .txt-con {padding-right: 65px;}
#mainLungCon .main-tech-con .img-con a {display:block; }
#mainLungCon .main-tech-con .img-con img {max-width:100%;}

/* ******************  메인 :: Footer ********************** */
#mainFooter:before {display:none !important;}

/* ******************  메인 왼쪽 nav (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:40px;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; box-sizing:border-box; padding:13.5px 5px; }
#fp-nav ul li a span{display:block; width:8px; height:8px; background-color:#fff; border-radius:50%; opacity:0.15;filter:Alpha(opacity=15);}

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

/* Color Style */
#fp-nav.color ul li a span{background-color:#3686ff}