@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2019-02-01
******************************************************** */
/* ========================================================
 * MAIN :: 공통
======================================================== */
@media all and ( max-width: 1220px ){
	.main-controls-box:not(.main-visual-controls){position:static;}
	.main-visual-controls{left:15px; right:15px; bottom:15px;}
	.main-controls-box button{margin-left:15px;}
	.main-controls-box .progress-bar-con{margin-top:6%}
}
@media all and ( min-width: 801px ) and (max-height: 800px) {
	.main-controls-box{bottom:50px;}
}
@media all and ( min-width: 1021px ) and (max-height: 800px) {
	#fullpage #mainRndContent,
	#fullpage #mainBrandContent{min-height:750px}
}

/* ========================================================
 * MAIN Visual
======================================================== */
@media all and ( max-width: 1220px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section{height:auto !important;}
	#fullpage .fp-section:not(#mainVisual) .fp-tableCell{padding-top:0; height:auto !important;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-con{height:100vh}
}

@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{top:auto; bottom:125px; transform:none;}
	.main-visual-txt-con .main-visual-txt1{font-size:6vw}
	/* 메인 비주얼 :: 화살표 */
	.main-visual-con .slick-arrow{display:none !important;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
}
@media all and ( max-width: 480px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{bottom:75px;}
	.main-visual-txt-con .main-visual-txt1{font-size:7vw}
}

/* ========================================================
 * MAIN Content :: R&D
======================================================== */
@media all and ( max-width: 1536px ){
	/* -------- 왼쪽,오른쪽 영역 -------- */
	.circle-left-box .circle-tit{font-size:22px;}
	.circle-right-box p{font-size:16px;}
	/* -------- 가운데 영역 -------- */
	.circle-inner-box .circle-more-btn{transform:scale(0.7); margin-right:-18vw }
}
@media all and ( max-width: 1220px ){
	#mainRndContent{padding:150px 15px;}
	#mainRndContent .area-box{margin:0}
	.main-rnd-tit{position:static;}
	/* -------- 가운데 영역 -------- */
	.circle-inner-box .circle-more-btn{transform:scale(0.5); margin-right:-20vw}
}

@media all and ( max-width: 800px ){
	#mainRndContent{padding:15% 15px; background:url(../images/main/main_rnd_bg_m.jpg) no-repeat 100% 100%; background-size:cover;}
	.main-rnd-tit{position:static; font-size:7.5vw; margin-bottom:0.3em}
	.main-rnd-list-con{margin-bottom:10%}
	/* -------- 왼쪽,오른쪽 영역 -------- */
	.circle-left-box{position:relative;}
	.circle-left-box .circle-tit{width:100%;}
	.circle-right-box{text-align:center;}
	.circle-right-box p{font-size:14px;}
	/* -------- 가운데 영역 -------- */
	.circle-inner-box{width:75%; margin:0 auto 6.25%;}
	.circle-inner-box .circle-more-btn{transform:scale(0.5); margin-right:-45vw; margin-top:-10%}
}
@media all and ( max-width: 480px ){
	/* -------- 왼쪽,오른쪽 영역 -------- */
	.circle-left-box .num{font-size:80px}
}

/* ========================================================
 * MAIN Content :: Brand
======================================================== */
@media all and ( max-width: 1366px ){
	.main-brand-list .main-brand-item{width:300px;}
	.main-brand-list .main-brand-item .main-brand-name{font-size:21px;}
	.main-brand-list .main-brand-item .main-brand-logo img{width:100%}
}
@media all and ( max-width: 1220px ){
	#mainBrandContent{padding:150px 0;}
	#mainBrandContent .main-controls-box{margin:0 15px;}
	#mainBrandContent .main-brand-list-container{margin-right:-15px; margin-bottom:10%;}
}
@media all and ( max-width: 800px ){
	#mainBrandContent{padding:18% 0; }
	.main-brand-tit{font-size:7.5vw; margin-bottom:1.7em}
	.main-brand-list .main-brand-item .main-brand-logo{background-color:#fff;}
	.main-brand-list .main-brand-item .main-brand-name{display:none;}
}
@media all and ( max-width: 480px ){
	.main-brand-list .main-brand-item{width:60%;}
}

/* ========================================================
 * MAIN Content :: Left Nav
======================================================== */
@media all and (max-width:1024px){
	#fp-nav{display:none;}
}

/* ========================================================
 * MAIN Content :: 추가영역 210115
======================================================== */
/* ******************  메인 컨텐츠 :: 퀵링크 ********************** */
@media all and (max-width:1220px){
	.main-rnd-oem-wrapper{height:auto}
	.main-rnd-oem-con{padding:5%; background-size:cover !important;}
	.main-rnd-oem-con dl{font-size:15px}
}
@media all and (max-width:800px){
	.main-rnd-oem-wrapper{display:block;}
	.main-rnd-oem-con{width:auto; height:auto; padding:30px 15px}
	.main-rnd-oem-con dl{font-size:12px}
	.main-rnd-oem-con dl dt{font-size:2em}
}
/* ******************  메인 컨텐츠 :: 비디오 ********************** */
@media all and (max-width:1220px){
	#mainVideoContent{height:0 !important; padding-top:60%;}
	.background-video-wrapper{position:absolute; top:0px; left:0px; }
	#mainVideoContent .video-tit-con .video-tit-txt{line-height:1.5}
	#mainVideoContent .video-tit-con .video-tit-txt br{display:block;}
}
@media all and (max-width:800px){
	#mainVideoContent .video-tit-con .video-con-tit{font-size:30px;}
	#mainVideoContent .video-tit-con .video-tit-txt{font-size:13px;}
}