@charset "utf-8";
/* *******************************************************
* filename : main_responsive.css
* description : 메인 레이아웃 및 컨텐츠 반응형 CSS
* date : 2020-11-25
******************************************************** */
/* ****************** 메인 비주얼 ********************** */
@media all and ( max-width: 1780px ){
/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{left:30px; margin-left:0}
}
@media all and ( max-width: 1024px ){
/* 공통 :: 레이아웃 */
/*#fullpage .section{height:auto !important;}
#fullpage .fp-section .fp-tableCell{padding-top:0; height:auto !important;}*/
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-pc-img{display:block;}
/*
.main-visual-item .main-visual-m-img{display:block; position:relative; padding-top:100%}
.main-visual-item .main-visual-m-img span{
position:absolute; top:0; left:0; 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.active-item .main-visual-m-img span{
-webkit-transform: scale(1.0,1.0) rotate(0.002deg);
transform: scale(1.0,1.0) rotate(0.002deg);
}*/
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con .main-visual-txt{padding-left:0; text-align:center}
/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{display:none}
}
@media all and ( max-width: 800px ){
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-m-img{padding-top:110%}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{margin-top:0}
.main-visual-txt-con .main-visual-txt{font-size:50px}
/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{bottom:40px}
}
@media all and ( max-width: 480px ){
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-m-img{padding-top:130%}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con .main-visual-txt{font-size:35px}
}
/* ****************** 메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
@media all and ( max-width: 800px ){
.main-tit-box .main-tit{font-size:55px;}
.main-tit-box .main-sub-tit{font-size:14px; margin-top:10px}
}
@media all and ( max-width: 480px ){
.main-tit-box .main-tit{font-size:40px;}
.main-tit-box .main-sub-tit{font-size:13px}
.main-tit-box .main-sub-tit br{display:none}
}
/* -------- 메인 컨텐츠 :: 컨텐츠1(PRODUCT) -------- */
@media (max-height: 750px) and (min-width: 1024px){
#mainProduct .lab-row .lab-col .container.rt-con{transform:scale(0.8);}
}
@media (max-height: 651px) and (min-width: 801px){
#mainContent1{height:745px !important}
}
@media (max-height: 651px) and (max-width: 800px){
#mainContent1{height:660px !important}
#mainProduct .lab-row .lab-col:first-child{padding-top:0 !important; height:220px !important}
}
@media screen and (max-width:1700px){
/* 왼쪽 */
#mainProduct .lab-title{max-width:none}
#mainProduct .lab-title .lf-txt{left:15px; right:15px; }
#mainProduct .indices{left:15px; right:15px; transform:translateX(0); width:calc(100% - 30px)}
}
@media screen and (max-width:1366px){
/* 왼쪽 */
#mainProduct .lab-title .lf-txt{font-size:35px}
}
@media screen and (max-width:1024px){
/* 왼쪽 */
#mainProduct:after{right:0;width:100%}
#mainProduct .lab-row{height:auto;display:block}
#mainProduct .lab-row .lab-col:first-child{/*height:0; padding-top:35%*/height:40vh; padding-top:0}
#mainProduct .lab-row .lab-col .container{padding-top:88px}
#mainProduct .lab-row .lab-col:last-child .container{padding-top:10%}
#mainProduct .indices{display:none}
#mainProduct .lab-title .lf-txt{text-align:center; width:calc(100% - 30px); top:18%; bottom:auto;}
#mainProduct .lab-title{display:none}
/* 오른쪽 */
.no-touchevents #mainProduct .lab-right-back{display:none}
#mainProduct .lab-row .lab-col .container.rt-con{transform:scale(1); min-height:380px}
#mainProduct .laboratories .detail{margin-top:-9%}
#mainProduct .laboratories .lab-desc{top:0; margin-top:-2%}
#mainProduct .lab-desc p{margin-top:2%; height:auto}
#mainProduct .lab-desc .detail-btn{margin-top:6%}
#mainProduct .lab-desc .desc-img{transform:scale(0.6); margin-bottom:0}
#mainProduct .indices-sm{display:block; bottom:30px}
#mainProduct .lab-desc .detail-btn{margin-top:4%}
#mainProduct .lab-desc .detail-btn .btn{height:60px; line-height:60px}
}
@media screen and (max-width:800px){
#mainProduct .lab-row .lab-col:first-child{/*padding-top:0; height:290px*/height:35vh}
#mainProduct .lab-row .lab-col:first-child .container{padding-top:60px}
#mainProduct .lab-title .lf-txt{font-size:22px; top:90px; }
/* 오른쪽 */
#mainProduct .laboratories .lab-desc{margin-top:20px}
#mainProduct .lab-desc h4{font-size:30px}
#mainProduct .lab-desc p{font-size:14px; margin-top:15px}
#mainProduct .lab-desc .detail-btn{margin-top:20px}
#mainProduct .lab-desc .detail-btn .btn{width:160px; height:50px; line-height:50px; font-size:13px}
#mainProduct .lab-desc .detail-btn .btn .arrow{margin-left:20px}
}
@media screen and (max-width:480px){
#mainProduct .lab-row .lab-col:first-child{}
#mainProduct .lab-title .lf-txt{font-size:20px; display:none}
#mainProduct .lab-desc .desc-img{transform:scale(0.55); margin-bottom:-10%}
#mainProduct .lab-desc p{font-size:11.5px}
#mainProduct .lab-row .lab-col .container.rt-con{min-height:400px}
}
/* -------- 메인 컨텐츠 :: 컨텐츠2(COMPANY) -------- */
@media screen and (max-width:1024px){
/*#mainContent2{padding:200px 0}*/
}
@media screen and (max-width:800px){
/*#mainContent2{padding:120px 0}*/
#mainContent2 .main-tit-box .main-sub-tit{margin-top:25px}
.company-link-list{margin-top:45px}
.company-link-list li .icon{height:40px}
.company-link-list li .menu-tit{font-size:14px;}
}
/* -------- 메인 컨텐츠 :: 컨텐츠3(NEWS) -------- */
@media (max-height: 651px){
#mainContent3{padding:30px 0}
}
@media screen and (max-width:1024px){
/*#mainContent3{padding:120px 0}*/
#mainContent3:before{width:190px; height:293px}
#mainContent3:after{width:310px; height:323px; bottom:-140px}
.main-news-con .main-news-list{margin:0 -15px}
.main-news-con .main-news-list li{margin:0 15px}
.main-news-con .main-news-list .slick-arrow.slick-prev{left:15px}
.main-news-con .main-news-list .slick-arrow.slick-next{right:15px}
}
@media screen and (max-width:800px){
/*#mainContent3{padding:80px 0}*/
#mainContent3 .main-tit-box .main-sub-tit{display:none}
.main-news-con{margin-top:30px}
.main-news-con .main-news-list.news-pc{display:none}
.main-news-con .main-news-list.news-mb{display:block}
.main-news-con .main-news-list{margin:0 5px}
.main-news-con .main-news-list li{margin:0 0 10px}
.main-news-con .main-news-list li a .txt-wrap{padding:22px}
.main-news-con .main-news-list li a .txt-wrap .tit{font-size:17px;}
.main-news-con .main-news-list li a .txt-wrap .txt{font-size:13px; -webkit-line-clamp:2; height:3.46em; margin-top:10px}
.main-news-con .main-news-list li a .news-date{height:45px}
.main-news-con .main-news-list li a .news-date span.date{padding-left:22px; font-size:13px;}
.main-news-con .main-news-list li a .news-date span.arrow{width:45px}
.main-news-con .main-news-list .slick-arrow{width:50px; height:50px; top:-90px}
.main-news-con .main-news-list .slick-arrow i{font-size:16px}
.main-news-con .main-news-list li a .new{width:22px; height:22px; line-height:23px; font-size:11px}
}
/* -------- 메인 컨텐츠 :: 컨텐츠4(INQUIRY) -------- */
@media (max-height: 651px){
#mainContent4{padding:30px 0}
}
@media screen and (max-width:480px){
#mainContent4 .main-tit-box .main-sub-tit{display:none}
#mainContent4 .inquiry-style08{margin-top:20px}
.main-news-con .main-news-list li a .txt-wrap .tit{font-size:15px;}
.main-news-con .main-news-list li a .txt-wrap .txt{font-size:12px}
}
/* ****************** 메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1780px){
#fp-nav{right:30px; left:auto; margin-left:0}
}
@media all and (max-width:1366px){
#fp-nav{right:10px;}
}
@media all and (max-width:1024px){
#fp-nav{display:none !important;}
}