@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2019-02-01
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1760px){
	/* 메인 비주얼 :: 텍스트 리뉴얼 2025-08-07 MJ */
	.main-slider-txt-box.right-txt{padding-right:40px; box-sizing:border-box;}
}
@media all and ( max-width: 1520px ){	
	.main-slider-wrapper:after{width:80px; height:calc(100% - 80px); top:80px}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{left:30px}
}
@media all and ( max-width: 1024px ){
	/* 공통 :: 레이아웃 */
	/*#fullpage .section{height:auto !important;}*/
	/*#fullpage .fp-section .fp-tableCell{padding-top:0; height:0 !important;}*/
	.main-slider-wrapper:after{display:none}
	/*.main-scroll-icon{display:none}*/
	.main-scroll-icon{left:50%; transform:translateX(-50%); bottom:40px; z-index:9999;}
	.main-scroll-icon span{color:#fff}
	/* 메인 비주얼 :: 이미지 */
	/*.main-slider-wrapper{height:100%}*/
	.main-visual-img-con{display:none;}
	.main-visual-img-con-m{display:block; width:100%; height:100%; background-size:cover !important; background-position:50% 0px !important; background-repeat:no-repeat !important}
	.main-visual-txt-con .main-visual-txt-inner > div:after{width:131px; height:121px; background-size:cover !important; top:0; left:50%; transform:translateX(-50%); margin-top:-50px}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{top:0; margin-top:160px; -ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); text-align:center}
	.main-visual-txt-con .main-visual-txt-inner > div{padding:0}
	/* 메인 비주얼 :: Dots */
	.main-visual-paging-box{margin-top:400px; top:0; text-align:center}
	
	/* 메인 비주얼 :: 텍스트 리뉴얼 2025-08-07 MJ */
	#mainVisual{margin-top:0;}
	.main-slider-txt-box.left-txt{padding-left:40px;}

	.main-slider-txt-box{top:50%;}
	.main-slider-txt-box .tit{font-size:60px;}
	.main-slider-txt-box .txt{font-size:20px; margin-top:20px;}
	.main-slider-txt-box .img{margin-top:50px;}
}
@media all and ( max-width: 800px ){	
	/* 메인 비주얼 :: 이미지 */
	.main-slider-item.white-img:after{width:121px; height:111px; }
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{margin-top:180px;}
	.main-visual-txt-con .main-visual-txt1{font-size:32px}
	.main-visual-txt-con .main-visual-txt2{font-size:15px; margin-top:5px}
	.visual-more-btn-wrap{margin-top:50px}
	.main-visual-more-btn{font-size:13px; width:140px; height:45px; line-height:45px;}
	/* 메인 비주얼 :: Dots */
	.main-visual-paging-box{margin-top:300px;}
	.main-visual-paging-box span{width:40px; height:5px}

	#mainCon01 .main-scroll-icon{display:block}
	#mainCon01 .main-scroll-icon em{display:none}
}
@media all and ( max-width: 480px ){		
	.main-slider-wrapper{height:100%}
	.main-slider-item.white-img:after{top:95px}
	.main-visual-txt-con{margin-top:140px}
	.main-visual-txt-con .main-visual-txt2 br{display:inherit}
	.main-visual-paging-box{margin-top:280px}

	/* 메인 비주얼 :: 텍스트 리뉴얼 2025-08-07 MJ */
	.main-scroll-icon{display: none;}
	#mainVisual{margin-top:60px;}

	.main-slider-txt-box.right-txt{padding-right:20px;}
	.main-slider-txt-box.left-txt{padding-left:20px;}

	.main-slider-txt-box .tit{font-size:26px;}
	.main-slider-txt-box .txt{font-size:16px; margin-top:10px;}
	.main-slider-txt-box .img{margin-top:30px;}
	.main-slider-txt-box .img img{ height:20px;}
}


@media (max-height: 520px) and (max-width: 960px){	
	.con01-content{padding:50px 0 !important}
	#fullpage #mainCon01{height:600px !important;}
	#fullpage #mainCon01 .fp-tableCell{padding-top:0; height:100% !important;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box{margin-bottom:30px;}
	.main-tit-box .main-tit{font-size:24px;}
	.main-tit-box .main-sub-tit{font-size:13px;}
	.main-tit-box .main-sub-tit span{display:block;}

}

/* -------- 메인 컨텐츠 :: 컨텐츠1 :: 연구개발,바이옴제품 -------- */

@media all and ( max-width: 1580px ){	
		/* 컨텐츠 내용 :: */
		.con01-content .con01-link-list{padding:0 100px}
		.con01-content .con01-link-list li{height:175px}
		.con01-content .con01-link-list li:nth-child(2):after{display:none}
}
@media all and ( max-width: 1220px ){	
		/* 컨텐츠 내용 :: */
		.con01-content .con01-link-list{padding:0 10px}
}

@media all and ( max-width: 960px ){	
	/*배경 효과 및 레이아웃*/
	.con01-inner > div{float:none; width:100%;}
	.con01-inner > div.con01-lf{height:calc(50% + 40px); height:50%}
	.con01-inner > div.con01-rt{height:calc(50% - 40px); height:50%; margin-top:-1px}
	.con01-inner > div.con01-lf .con01-img:after{background:url("../images/main/main_con1_lf_bg_mb.jpg") 50% 0; }
	.con01-inner > div.con01-rt .con01-img:after{background:url("../images/main/main_con1_rt_bg_mb.jpg") 50% 0; }
	/* 컨텐츠 내용 :: */
	.con01-content{padding-top:0; top:50%; transform:translate(-50%,-50%)}
	.con01-inner > div.con01-lf .con01-content{/* padding-top:80px */}
	.con01-content .con01-tit{font-size:24px}
	.con01-content .con01-sub{font-size:14px; margin-top:20px}
	.con01-content .con01-link-list{margin-top:20px}
	.con01-content .con01-link-list li{width:25%; /*height:auto;*/height:140px}
	.con01-content .con01-link-list li .link-list-inner{padding:0 5%}
	.con01-content .con01-link-list li:after{height:80%}
	.con01-content .con01-link-list li .link-list-tit{margin-top:10px; font-size:13px; height:35px}
	.con01-content .con01-link-list li:nth-child(2):after{display:inline-block}

	.con01-content .con01-link-list li a:after{display: none;}

}
@media all and ( max-width: 480px ){	
	/*배경 효과 및 레이아웃*/
	.con01-inner > div{float:none; width:100%; }
	.con01-inner > div.con01-lf{height:calc(50% + 30px); height:50%}
	.con01-inner > div.con01-rt{height:calc(50% - 30px); height:50%}
	/*	.con01-inner > div.con01-lf{height:calc(50% - 30px); padding-top:60px; }
	.con01-inner > div.con01-rt{height:calc(50% - 30px);  } */
	/* 컨텐츠 내용 :: */
	.con01-inner > div.con01-lf .con01-content{/* padding-top:60px */}
	.con01-content .con01-tit{font-size:22px}
	.con01-content .con01-sub{font-size:13px; margin-top:15px}
	.con01-content .con01-link-list li{height:auto; width:50%;}
	.con01-content .con01-link-list li:nth-child(-n+2){margin-bottom:20px}
	.con01-content .con01-link-list li .link-list-icon img{height:30px}
	.con01-content .con01-link-list li .link-list-tit{font-size:13px; height:auto}
	.con01-content .con01-link-list li{width:50%}
	.con01-content .con01-link-list li:nth-child(2):after{display:none}
	.con01-content .con01-link-list li:after{height:100%}


}

/* -------- 메인 컨텐츠 :: 컨텐츠2 :: About GIBIOME -------- */
@media all and ( max-width: 1220px ){	
	.con02-tit{margin-bottom:4%}
}
@media all and ( max-width: 800px ){	
	/* 컨텐츠2 :: 레이아웃 및 타이틀 */
	.con02-wrap{margin:15% 10px 30px}
	.con02-tit{font-size:30px; margin-bottom:30px}
	.con02-con-wrap{position:relative; height:auto; margin:0}
	.con02-con-wrap > div{float:none; width:100%; position:static; margin:0}
	.con2-box-tit{font-size:23px; margin-bottom:0}

	/* 컨텐츠2 :: 왼쪽(R&D 센터) */
	.con02-con-wrap > div.con02-box-lf{position:relative; display:inline-block; width:48%; padding-top:42%; margin-right:4%}
	.con02-menu-box.rnd-box{position:absolute; top:0; left:0; right:0; bottom:0; height:100%; display:block}
	.con02-menu-box.rnd-box .rnd-box-inner{display:block}
	.con02-menu-box.rnd-box .con2-box-tit{position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%)}
	.rnd-button-wrap{display:none}
	.rnd-link{display:block; position:absolute; top:0; left:0; width:100%; height:100%}
	
	/* 컨텐츠2 :: 오른쪽 */
	.con2-box-tit.rt-big-tit,
	.con2-box-tit.rt-small-tit{font-size:19px; margin-bottom:8px}
	/* 컨텐츠2 :: 오른쪽 :: 회사소개 */
	.con02-menu-box.company-box{position:absolute; right:0; top:0; width:48%; height:auto; padding-top:42%}
	.con02-box-rt .con02-menu-box.company-box a{position:absolute; top:0; left:0; display:block}
	.con02-box-rt .con02-menu-box.company-box .box-rt-inner{display:block; height:85%; padding:15% 8% 0}
	.con2-box-rt-sub{font-size:13px}
	.con02-box-rt .con02-menu-box.company-box .arrow-btn-icon{position:absolute; bottom:0; margin:0 0 15%}

	/* 컨텐츠2 :: 오른쪽 :: 경영진소개,인재채용 */
	.con02-box-rt-bottom{margin:4% -2% 0}
	.con02-box-rt-bottom > div{position:relative; height:auto; padding-top:42%; width:46%; margin:0 2%}
	.con02-box-rt .con02-box-rt-bottom .con02-menu-box a{position:absolute; top:0; left:0; width:100%; height:100%}
	.con02-box-rt .con02-box-rt-bottom .con02-menu-box a .box-rt-inner{padding:15% 8% 0; position:relative; height:85%}
	.con02-box-rt-bottom .con02-menu-box .arrow-btn-icon{width:28px; height:28px; position:absolute; bottom:15%; left:8%}
	.con02-box-rt-bottom .con02-menu-box .arrow-btn-icon .arrow-icon i{width:7.7px; background-size:15px}
	.con02-box-rt-bottom .con02-menu-box .con2-view-detail strong{font-size:13px}
}
@media all and ( max-width: 480px ){	
	/*#mainCon02{background:url("../images/main/main_con02_bg.jpg") no-repeat 40% 60px}*/
	.con02-wrap{margin:50px 0 30px}
	/* 컨텐츠2 :: 오른쪽 :: 회사소개 */
	.con2-box-tit.rt-big-tit, .con2-box-tit.rt-small-tit{font-size:17px; margin-bottom:5px}
	.con2-box-rt-sub{font-size:12px}
	/* 컨텐츠2 :: 오른쪽 :: 화살표에서 플러스로 바뀌는 버튼 */
	.arrow-btn-icon,
	.con02-box-rt-bottom .con02-menu-box .arrow-btn-icon{width:20px; height:20px;}
	.arrow-btn-icon .arrow-icon i,
	.con02-box-rt-bottom .con02-menu-box .arrow-btn-icon .arrow-icon i{background-size:13px; width:6.8px; opacity:0.7; margin:2px 0 0}
	.arrow-btn-icon .arrow-icon i{margin:4px 0 0}	
}



/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1520px){
	#fp-nav{left:30px;}
}
@media all and (max-width:1024px){
	#fp-nav{display:none;}
}


/* 메인비주얼 영상추가 및 섹션 추가 2022-10-19 */
@media all and (max-width:1520px){
	/* 메인비주얼 영상 */
	.background-video iframe{width: calc(100vw - 80px); right: auto; left:80px;}
}
@media all and (max-width:1024px){	
	/* 메인비주얼 영상 */
	#mainVisual{margin-top:80px;}
	#mainVisual,
	#mainVisual .fp-tableCell{height:56.25vw !important; /* min-height:50vh; */}
	.background-video iframe{width: 100%; right: auto; left:50%; transform:translate(-50%, -50%); /* min-height:50vh; */ min-width:auto;}
	/* 메인 CI */
	#mainConCi .con01-content .con01-tit img{height:39.9px;}
	#mainConCi,
	#mainConCi .fp-tableCell{height:56.25vw !important; min-height:50vh;}
	#mainConCi .main-scroll-icon em{display: none;}
}
@media all and (max-width:960px){
	/* 메인 CI */
	#mainConCi{margin-top:-1px;}
}
@media all and (max-width:480px){
	#mainVisual{margin-top:60px;}
	/* 메인 CI */
	#mainConCi .con01-content .con01-tit img{height:28.5px;}
}