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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; position:relative;}	
.main-slider-wrapper {position: relative; width: 100%; height: 100vh;}
.main-slider-wrapper:after{position:absolute; display:inline-block; content:""; width:100px; height:calc(100% - 100px); background-color:#fff; top:100px; left:0; z-index:1}
.main-slider-item {overflow: hidden; position: relative; height:100% !important;}
.main-slider-item .slide-inner {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

.main-visual-img-con{position:relative; height:100%; width:100%; background-size:cover !important; background-position:50% 0 !important; background-repeat:no-repeat !important}
.main-visual-img-con-m{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; top:50%; left:0px; width:100%; 
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index:1;
	/*margin-top:50px*/
}
.main-visual-txt-con .main-visual-txt-inner > div{position:relative; padding:0 100px}
/*.main-visual-txt-con .main-visual-txt-inner > div:after{position:absolute; display:inline-block; content:""; width:257px; height:241px; background:url("../images/main/main_txt_bg.png") no-repeat; top:-100px; left:460px; opacity:1; transition:all 0.5s}*/
.white-txt .main-visual-txt-con .main-visual-txt-inner > div:after{opacity:0}

#mainVisual .main-visual-txt-con .main-visual-txt1,
#mainVisual .main-visual-txt-con .main-visual-txt2,
#mainVisual .visual-more-btn-wrap,
#mainVisual .main-visual-paging-box{
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition:opacity 1.0s 0s, color 0.5s, transform 1.0s 0s;
	-moz-transition:opacity 1.0s 0s, color 0.5s, transform 1.0s 0s;
	-o-transition:opacity 1.0s 0s, color 0.5s, transform 1.0s 0s;
	-ms-transition:opacity 1.0s, color 0.5s, transform 1.0s 0s;
	transition:opacity 1.0s 0s, color 0.5s, transform 1.0s 0s;
}

.main-visual-txt-con .main-visual-txt1{font-weight:300; font-size:58.87px; letter-spacing:-0.4px;  line-height:1.1;}
.main-visual-txt-con .main-visual-txt1 b{font-weight:600;}
.main-visual-txt-con .main-visual-txt2{display:block; font-size:16px; font-weight:300; letter-spacing:-0.75px; opacity:0.5; margin-top:30px; line-height:1.4; word-break:keep-all}
.main-visual-txt-con .main-visual-txt2 br{display:none}
.main-visual-txt-con{color:#333;}
.white-txt .main-visual-txt-con{color:#fff}

/* 메인 비주얼 :: 바로가기 버튼 */
.visual-more-btn-wrap{position:relative; margin-top:90px; padding-bottom:15px !important}
.main-visual-more-btn{position:relative; display:inline-block; width:188px; height:60px; line-height:60px; text-align:center; font-weight:300; font-size:16px; letter-spacing:-0.75px; color:#fff;		background: rgb(142,207,59); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(142,207,59,1) 0%, rgba(56,180,188,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(142,207,59,1) 0%,rgba(56,180,188,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(142,207,59,1) 0%,rgba(56,180,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ecf3b', endColorstr='#38b4bc',GradientType=1 ); /* IE6-9 */ 
	border-bottom-left-radius:30px; border-top-right-radius:30px; overflow:hidden; z-index:1; box-shadow:5px 5px 11px 3px rgba(0,0,0,0.1)}
.main-visual-more-btn:after{position:absolute; display:inline-block; content:""; width:100%; height:100%; right:0; transition:all 0.8s; z-index:-1; transition: background 0.55s ease-in; transition-delay:0.1s}

/* 메인비주얼 바로가기 버튼 :: 오버효과 */
@media all and (min-width:801px){	
	.main-visual-more-btn:hover:after{background:#8ecf3b; }
}

#mainVisual.active-item .main-visual-txt1,
#mainVisual.active-item .main-visual-txt2,
#mainVisual.active-item .visual-more-btn-wrap,
#mainVisual.active-item .main-visual-paging-box{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateX(0px); 
    -o-transform: translateX(0px); 
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px); 
     transform: translateX(0px);
}

/* 메인 비주얼 :: 텍스트 , dot, button 애니메이션 */
.main-visual-txt-con .title-line,
#mainVisual .visual-more-btn-wrap,
#mainVisual .main-visual-paging-box{
  display: block;
  padding-bottom: 0.1em;
  overflow-y: hidden;
}
.main-visual-txt-con .title-line span {position: relative; display: inline-block;}
#mainVisual.active-item .main-visual-txt-con .title-line span,
#mainVisual.active-item .visual-more-btn-wrap .main-visual-more-btn,
#mainVisual.active-item .main-visual-paging-box > div{
  animation: text-up 1.5s cubic-bezier(0.3, 0, 0.2, 1) both;
  /*animation-delay:0.1s;*/
}
/*#mainVisual.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}*/
#mainVisual.active-item .main-visual-txt-con .title-line.main-visual-txt1.visual-txt1-bottom span{animation-delay: 0.3s; }
#mainVisual.active-item .main-visual-txt-con .main-visual-txt2 span{ -webkit-animation-delay:0.8s; animation-delay:0.6s;}
#mainVisual.active-item .main-visual-paging-box > div{animation-delay: 0.9s;}
#mainVisual.active-item .visual-more-btn-wrap .main-visual-more-btn{animation-delay: 1.1s;}

@keyframes text-up {
  from {
    transform: translate3d(0, 150%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:55px; left:40px; margin-left:0; text-align:center; z-index:9}
.main-scroll-icon span{display:block; color:#595959; padding-bottom:5px; letter-spacing:-0.5px; font-size:10px; font-weight:700; line-height:1.1}
.main-scroll-icon i{font-size:18px; display:inline-block; margin-top:3px}
#mainCon01 .main-scroll-icon{display:none}

/* Paging 영역 */
.main-visual-paging-box{position:absolute; top:50%; left:0; right:0; z-index:11;/*margin-top:100px;*/margin-top:125px}
.main-visual-paging-box .main-visual-paging{padding:0 100px}
.main-visual-paging-box span{display:inline-block; width:56px; height:7px; background:#7a7a7a; opacity:0.3; margin-right:5px; border-radius:0}
.main-visual-paging-box .swiper-pagination-bullet-active{opacity:1.0}

/* 메인 비주얼 :: 텍스트 리뉴얼 2025-08-07 MJ */
.main-slider-txt-box{position: absolute; top:calc(50% + 50px); transform:translateY(-50%); width:100%; color:#000;}
.main-slider-txt-box .area-wrap{width:100%; max-width:1700px; margin:auto;}

.main-slider-txt-box .tit{display: block; font-size:120px; line-height:1.16; letter-spacing:-0.04em; font-weight:700;}
.main-slider-txt-box .txt{font-size:24px; line-height:1.5; letter-spacing:-0.04em; font-weight:600; margin-top:46px;}
.main-slider-txt-box .img{margin-top:95px;}

.main-slider-txt-box.left-txt{text-align:left; padding-left:130px;}
.main-slider-txt-box.right-txt{text-align:right;}
.main-slider-txt-box.white-txt{color:#fff;}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠1 :: 연구개발,바이옴제품 -------- */
/* 컨텐츠1:: 배경 및 레이아웃*/
.con01-inner{position:relative; width:100%; height:100%;}
.con01-inner > div{width: 50%; height:100%; float: left; overflow: hidden; position:relative; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform:scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); transition-timing-function: cubic-bezier(.64,.045,.35,1); transition-duration: .5s;}
.con01-inner > div::after {content:""; position:absolute; width:100%; height:100%; right:0; top:0px; /*background: #38b4bc; */ background-color:#fff;  transition-property: width; transition-delay: .5s;transition-timing-function: cubic-bezier(.64,.045,.35,1); transition-duration: .5s;}
.con01-inner > div .con01-img{position: relative; top:0; left:0; width: 100%; height: 100%; overflow:hidden; }
.con01-inner > div .con01-img:after{position:absolute; display:inline-block; content:""; width:100%; height:100%; top:0; left:0; background-size:cover !important; transform: scale(1.0,1.0); transition:transform 1300ms ease-in-out;}
.con01-inner > div.con01-lf .con01-img:after{background:url("../images/main/main_con1_lf_bg.jpg") 50% 0; }
.con01-inner > div.con01-rt .con01-img:after{background:url("../images/main/main_con1_rt_bg.jpg") 50% 0; }

/* 컨텐츠1:: 배경 효과 */
#mainCon01.on .con01-inner > div::after,
#mainCon01.active .con01-inner > div::after{width:0;}
#mainCon01.on .con01-inner > div,
#mainCon01.active .con01-inner > div{-webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); transform-origin:left top; transition-property: transform;}

/* 컨텐츠1 :: 내용 :: */
.con01-content{position:absolute; left:50%; transform:translateX(-50%); /*top:30%;*/top:35%; word-break:keep-all; text-align:center; width:calc(100% - 30px); padding:0 15px}
.con01-content .con01-tit{font-weight:600; font-size:44px; letter-spacing:-0.5px; color:rgba(255,255,255,0.9)}
.con01-content .con01-sub{font-weight:500; font-size:16px; letter-spacing:-0.5px; color:#c6c6c6; line-height:1.75; margin-top:40px}

/* 컨텐츠1 :: 내용 :: 링크 리스트 */
.con01-content .con01-link-list{display:block; margin-top:60px; overflow:hidden}
.con01-content .con01-link-list li{position:relative; display:inline-block; vertical-align:top; width:190px; height:190px; margin:0 -2.5px; overflow:hidden}
.con01-content .con01-link-list li:after{position:absolute; display:inline-block; content:""; width:1px; height:110px; background-color:rgba(255,255,255,0.5); top:50%; right:0; transform:translateY(-50%); z-index:-2}
.con01-content .con01-link-list li:last-child:after{display:none !important;}
.con01-content .con01-link-list li a{position:relative; display:table; width:100%; height:100%}
.con01-content .con01-link-list li a:after{position:absolute; display:inline-block; content:""; width:100%; height:100%; 
	background: rgb(142,207,59); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(142,207,59,1) 0%, rgba(56,180,188,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(142,207,59,1) 0%,rgba(56,180,188,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(142,207,59,1) 0%,rgba(56,180,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ecf3b', endColorstr='#38b4bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	bottom:-100%; left:0; border-radius:15px;  z-index:-1; transition:all 0.6s
}
.con01-content .con01-link-list li .link-list-inner{display:table-cell; vertical-align:middle}
.con01-content .con01-link-list li .link-list-tit{display:block; font-weight:600; font-size:16px; letter-spacing:-0.5px; color:rgba(255,255,255,0.9); line-height:1.35; margin-top:24px; transition:all 0.6s; padding:0 2%; height:25px}
.con01-content .con01-link-list li .hover-arrow{position:absolute; /*bottom:30px;*/ left:50%; transform:translateX(-50%); display:inline-block; width:28px; height:28px; border-radius:50%; background-color:#fff; text-align:center; margin-top:18px; opacity:0; transition:all 0.6s; bottom:-100%}
.con01-content .con01-link-list li .hover-arrow i{color:#4dbcbd; font-size:14px; font-weight:600; line-height:28px; margin-right:-3px;}

/* 컨텐츠1 :: 링크 리스트 오버시 효과 */
@media all and (min-width:801px){
	.con01-inner > div:hover .con01-img:after{transform: scale(1.15,1.15) rotate(0.01deg);}
	.con01-content .con01-link-list li a:hover:after{bottom:0}
	.con01-content .con01-link-list li a:hover .link-list-tit{margin-top:15px; padding-bottom:50px}
	.con01-content .con01-link-list li a:hover .hover-arrow{opacity:1; bottom:30px}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2 :: About GIBIOME -------- */
/* 컨텐츠2 :: 레이아웃 및 타이틀 */
#mainCon02{background:url("../images/main/main_con02_bg.jpg") no-repeat 50% 60px; background-size:cover}
.con02-wrap{margin-top:6%}
.con02-tit{text-align:center; font-weight:700; font-size:55.52px; letter-spacing:-0.25px; color:#333; /*margin-bottom:75px*/ margin-bottom:6%}
.con02-tit span{color:#163a6b; letter-spacing:-1.5px}
.con02-tit span b{color:#51afb5}
.con02-con-wrap{margin:0 -1%; height:530px;}
.con02-con-wrap > div{float:left; width:48%; margin:0 1%; }
.con02-box-bg{border-radius:15px; overflow:hidden}
.con02-box-bg,
.con02-box-bg span{position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; transition:transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); background-size:cover !important}
.con2-box-tit{position:relative; font-weight:600; font-size:37.25px; letter-spacing:-0.5px; color:#fff; margin-bottom:30px; font-family: 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

/* 컨텐츠2 :: 왼쪽(R&D 센터) */
.con02-con-wrap > div.con02-box-lf{position:relative}
.con02-box-lf .con02-box-bg span{background:url("../images/main/main_con2_bg01.jpg") no-repeat 50% 0;}
.con02-menu-box.rnd-box{display:table; width:100%;  height:530px;}
.con02-menu-box.rnd-box .rnd-box-inner{display:table-cell; vertical-align:middle; text-align:center}
.rnd-button-wrap ul li{position:relative; display:inline-block; width:170px; height:60px; line-height:60px; text-align:center; overflow:hidden; border:1px solid rgba(255,255,255,0.8); margin:0 -2px}
.rnd-button-wrap ul li a{display:table; width:100%; height:100%}
.rnd-button-wrap ul li a:before{border-bottom-color:rgba(255,255,255,1.0)}
.rnd-button-wrap ul li a .inner{position:relative; z-index:1; display:table-cell !important; vertical-align:middle}
.rnd-button-wrap ul li a .tit{display:inline-block; vertical-align:middle; width:calc(100% - 30px); font-weight:500; font-size:16px; letter-spacing:-0.5px; line-height:1.125; color:#fff; transition:all 0.5s;}
.rnd-button-wrap ul li a i{position:absolute; top:50%; right:5px; font-size:20px; margin-top:-10px; color:#464646; transition:all 0.5s; opacity:0;}
.rnd-link{display:none}

/* rnd센터 버튼 효과 */
.cm-button-effect01{position: relative; display: block; overflow: hidden; margin:0px auto;}
.cm-button-effect01:before {content: ''; position: absolute; top: 0; right: -50px; bottom: 0; left: 0; border-right: 50px solid transparent; border-bottom: 80px solid rgba(255,255,255,0.8); -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.cm-button-effect01:hover {color: #f6821c;}
.cm-button-effect01:hover:before {-webkit-transform: translateX(0); transform: translateX(0);}

/* 컨텐츠2 :: 오른쪽 */
/* 컨텐츠2 :: 오른쪽 :: 화살표에서 플러스로 바뀌는 버튼 */
.arrow-btn-icon{position:relative; width:28px; height:28px; margin-top:55px; background-color:#fff; border-radius:50%}
.arrow-btn-icon .arrow-icon{position:absolute; left:50%; top:50%; transition:all 0.3s; transform:translate(-50%,-50%); margin-left:-1px; margin-top:-1px}
.arrow-btn-icon .arrow-icon i{display:block; width:7.7px; height:16px; transition:all 0.3s; background:url("../images/button/more_btn_black.png") no-repeat; background-size:15px; margin:2px 0 0 0}
@media all and (min-width:801px){
	.con02-box-rt .con02-menu-box a:hover .arrow-btn-icon .arrow-icon{margin:-1px 0 0 -1px}
	.con02-box-rt .con02-menu-box a:hover .arrow-btn-icon .arrow-icon i{width:16px; transform:rotate(135deg)}
}
/* 컨텐츠2 :: 오른쪽 :: 회사소개 */
.con02-menu-box.company-box{height:250px;  box-shadow:2px 3px 11px 5px rgba(0,0,0,0.2); border-radius:15px}
.con02-box-rt .con02-menu-box.company-box .con02-box-bg span{background:url("../images/main/main_con2_bg02.jpg") no-repeat 50% 0;}
.con02-box-rt .con02-menu-box.company-box a{position:relative; display:table; width:100%; height:100%}
.con02-box-rt .con02-menu-box.company-box .box-rt-inner{position:relative; display:table-cell; vertical-align:middle; padding:0 5% 0 8.5%}
.con2-box-tit.rt-big-tit{margin-bottom:12px; font-size:28px}
.con2-box-rt-sub{position:relative; font-weight:400; font-size:15px; letter-spacing:-0.5px; color:rgba(255,255,255,0.6); line-height:1.4; word-break:keep-all}

/* 컨텐츠2 :: 오른쪽 :: 경영진소개,인재채용 */
.con02-box-rt-bottom{margin:30px -2.1% 0}
.con02-box-rt-bottom > div{float:left; width:45.8%; margin:0 2.1%; border-radius:15px; box-shadow:2px 3px 11px 5px rgba(0,0,0,0.11); background-size:cover !important; height:250px;}
.con02-box-rt .con02-menu-box.member-box .con02-box-bg span{background:url("../images/main/main_con2_bg03.jpg") no-repeat 50% 0;}
.con02-box-rt .con02-menu-box.recruit-box .con02-box-bg span{background:url("../images/main/main_con2_bg04.jpg") no-repeat 50% 0;}
.con02-box-rt .con02-box-rt-bottom .con02-menu-box a{position:relative; display:block; width:100%; height:100%}
.con02-box-rt .con02-box-rt-bottom .con02-menu-box a .box-rt-inner{padding:50px 5% 0 12%}
.con2-box-tit.rt-small-tit{margin-bottom:12px; font-size:24px}
.con02-box-rt-bottom .con02-menu-box .con2-view-detail strong,
.con02-box-rt-bottom .con02-menu-box .con2-view-detail .arrow-btn-icon{display:inline-block; margin:0 -1px; vertical-align:middle}
.con02-box-rt-bottom .con02-menu-box .con2-view-detail strong{position:relative; font-weight:500; font-size:14px; letter-spacing:-0.5px; color:rgba(255,255,255,0.7); margin-right:5px}
.con02-box-rt-bottom .con02-menu-box .arrow-btn-icon{margin-top:0; width:22px; height:22px;}
.con02-box-rt-bottom .con02-menu-box .arrow-btn-icon .arrow-icon{margin-top:0}
.con02-box-rt-bottom .con02-menu-box .arrow-btn-icon .arrow-icon i{background-size:13px; width:6.7px; opacity:0.7; margin:2px 0 0 0}

@media all and (min-width:801px){	
	/* rnd센터 버튼 오버효과 */
	.rnd-button-wrap ul li a:hover .tit{color:#333;}
	.rnd-button-wrap ul li a:hover i{opacity:1.0;}
	.con02-box-lf:hover .con02-box-bg span{transform: scale(1.2) rotate(0.002deg);}

	/* 화살표 플러스로 바뀌는 버튼 오버효과 */
	.con02-box-rt .con02-box-rt-bottom .con02-menu-box a:hover .arrow-btn-icon .arrow-icon{margin-left:-2px}
	.con02-box-rt .con02-box-rt-bottom .con02-menu-box a:hover .arrow-btn-icon .arrow-icon i{background-size:12px; margin:1px 0 0 -1px}
	.con02-box-rt .con02-menu-box a:hover .con02-box-bg span{transform: scale(1.2) rotate(0.002deg);}

}


/* ******************  메인 오른쪽 퀵메뉴 (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; 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:8px; height:8px; background-color:#d3d3d3; border-radius:50%;}
#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 span{background-color:#3bb5b8}
#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:before{
	position: absolute; 
	top: -4px; 
	left: -4px; 
	display: block;
	content: ''; 
	width:26px; 
	height: 26px; 
	border:1px solid transparent; 
	box-sizing: border-box;
	border-radius:50%;
	-webkit-backface-visibility: hidden;
}
#fp-nav ul li a.active:before{
	border-color: #3bb5b8;
    animation: wave-animate 1.5s infinite ease-out;
}
@keyframes wave-animate {
	0% {
		transform: scale(0.33);
		opacity: 1;
		transform-origin: center;
	}
	80%{
		opacity:0.7;
	}
	100% {
		transform: scale(1.0);
		opacity: 0;
		transform-origin: center;
	} 
}

/* Black Style */
#fp-nav.black ul li a span{background-color:rgba(211,211,211,0.7)}
#fp-nav.black ul li a.active span{background-color:rgba(255,255,255,0.8)}
#fp-nav.black ul li a.active:before{border-color:rgba(255,255,255,0.7)}
#fp-nav.black ul li .fp-tooltip{color:#222;}



/* 메인비주얼 영상추가 및 섹션 추가 2022-10-19 */
/* 메인비주얼 영상 */
.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.03)}
.background-video iframe{
	width: calc(100vw - 100px);
	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%;
	right: 0%;
	transform: translate(0%, -50%);
	pointer-events:none;
}

/* 메인 CI */
#mainConCi.on .con01-inner > div::after,
#mainConCi.active .con01-inner > div::after{width:0;}
#mainConCi.on .con01-inner > div,
#mainConCi.active .con01-inner > div{-webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); transform-origin:left top; transition-property: transform;}
#mainConCi .con01-inner > div{width:100%;}
#mainConCi .con01-inner > div.con01-ci-wrap .con01-img:after{background:url("../images/main/main_con1_ci_bg.jpg") 50% 0; }