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

/* ******************  메인 비주얼 ********************** */
@media all and ( min-width: 801px ) and (max-height: 780px) {	
	.main-visual-slide{height:calc(100% - 110px)}
	.main-visual-item .main-visual-txt-box .main-visual-txt-inner{padding-top:0}
	.main-notice-slide-con{height:110px; padding-top:26px}
}
@media all and ( max-width: 1740px ){	
	#mainVisual .main-visual-inner{padding-left:30px}
}
@media all and ( max-width: 1566px ){	
	/* 메인 비주얼 :: 슬라이드 :: 컨트롤러 */
	.main-visual-control{width:300px; height:80px; bottom:-38px}
	/* 메인 비주얼 :: Notice 슬라이드 */
	.main-notice-slide-con{padding-right:17%}
}
@media all and ( max-width: 1024px ){	
	.main-visual-slide{max-height:none; height:auto}
	/* 메인 비주얼 :: 슬라이드 :: 이미지 */
	#mainVisual .main-visual-inner{padding:0}
	.main-visual-con{max-height:none}
	.main-visual-item .main-visual-pc-img{height:0; padding-top:78%}
	/* 메인 비주얼 :: 슬라이드 :: 텍스트 */
	.main-visual-item .main-visual-txt-box{text-align:center}
	.main-visual-item .main-visual-txt-box .main-visual-txt-inner{padding:0; width:100%}
	.main-visual-item .main-visual-txt-box{text-align:center}
	/* 메인 비주얼 :: Задать вопрос 버튼 */
	.customer-inquiry-btn{display:none}
	/* 메인 비주얼 :: 슬라이드 :: 컨트롤러 */
	.main-visual-control{left:15px; right:15px; width:calc(100% - 30px)}
	/* 메인 비주얼 :: Notice 슬라이드 */
	.main-notice-slide-con{position:relative; height:auto; padding:70px 0 30px; margin:0 15px; width:auto}
}
@media all and ( max-width: 800px ){	
	/* 메인 비주얼 :: 슬라이드 :: 이미지 */
	.main-visual-item .main-visual-pc-img{padding-top:110%}
	/* 메인 비주얼 :: 슬라이드 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:37px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:15px}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn a{font-size:11px; width:175px; height:47px; line-height:47px}
	/* 메인 비주얼 :: Notice 슬라이드 */
	.main-notice-slide-con{padding:60px 0 15px}
	.main-notice-slide-con:before{height:2px; width:150px}
	.main-notice-slide-con .notice-slide-wrap.pc-slide{display:none}
	.main-notice-slide-con .notice-slide-wrap.mb-slide{display:block; position:relative; padding-top:30px}
	.main-notice-slide-con .notice-tit{float:none; width:100%; font-size:20px}
	.main-notice-slide-con .main-notice-slide{float:none; width:100%}
	.main-notice-slide-con .notice-control{float:none; position:absolute; right:0; top:-20px; font-size:20px; padding:0; width:auto}
	.main-notice-slide-con .notice-control .slide-arrow.prev{margin-right:5px}
	.main-notice-slide-con .notice-control .slide-arrow.next{margin-left:5px}
	.main-notice-slide-con .main-notice-slide .notice-slide{float:none; width:100%}
	.main-notice-slide-con .main-notice-slide .notice-slide li.slick-slide ul li{margin-bottom:25px}
	.main-notice-slide-con .main-notice-slide .notice-slide li a .tit{font-size:14px;}
	.main-notice-slide-con .main-notice-slide .notice-slide li a .date{font-size:12px; margin-top:10px}

	/* 메인 비주얼 :: 슬라이드 :: 컨트롤러 */
	.main-visual-control{height:55px; bottom:-26px}
	.main-visual-control .main-visual-conuter > .count-arrow:first-child{margin-right:30px}
	.main-visual-control .main-visual-conuter > .count-arrow:first-child:after{height:13px; right:-17px}
	.main-visual-control .main-visual-conuter > .count-arrow .num{font-size:12px}
	.main-visual-control .main-visual-conuter > .count-arrow a{font-size:19px}
}
@media all and ( max-width: 480px ){	
	/* 메인 비주얼 :: 슬라이드 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt2{display:none}
}



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit{font-size:38px}
}
@media all and ( max-width: 480px ){
	.main-tit-box .main-tit{font-size:34px}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Brand Story) -------- */
@media all and ( max-width: 1220px ){	
	.main-brand-con .rt-txt br{display:none}
}
@media all and ( max-width: 1024px ){		
	#mainBrandStory{margin:100px 0}
	#mainBrandStory:after{display:none}
	.main-brand-con{text-align:center}
	.main-brand-con > div{display:block; width:100%}
	/* 왼쪽 :: 이미지 */
	.main-brand-con .lf-img{padding-right:0; max-width:600px; margin:0 auto}
	/* 오른쪽 :: 텍스트 */
	.main-brand-con .rt-txt{padding:50px 0 0}
}
@media all and ( max-width: 800px ){	
	#mainBrandStory{margin:50px 0}
	/* 오른쪽 :: 텍스트 */
	.main-brand-con .rt-txt .main-brand-tit .en-tit{font-size:13px; margin-bottom:15px}
	.main-brand-con .rt-txt .main-brand-tit .en-tit span{padding-bottom:7px; border-width:2px}
	.main-brand-con .rt-txt .main-brand-tit .main-sub-tit{font-size:14px; margin-top:15px}
	.main-brand-con .rt-txt .main-brand-tit .more-btn{margin-top:30px}
	.main-brand-con .rt-txt .main-brand-tit .more-btn a{width:180px; height:45px; line-height:45px;}
}
@media all and ( max-width: 640px ){	
	/* 오른쪽 :: 텍스트 */
	.main-brand-con .rt-txt{text-align:left}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Product) -------- */
@media all and ( max-width: 1024px ){	
	.prd-slide-con{padding:0 50px}
	.prd-slide-con .main-prd-slide .slick-arrow.slick-prev{left:-47px}
	.prd-slide-con .main-prd-slide .slick-arrow.slick-next{right:-47px}
	.prd-slide-con .main-prd-slide li a .new-cate{font-size:13px; width:55px; height:55px; line-height:55px; top:10px; left:10px}
}
@media all and ( max-width: 800px ){		
	#mainProduct{padding:50px 0 0}
	#mainProduct:after{height:60px}
	.prd-slide-con{margin-top:30px; padding:0}
	.prd-slide-con .main-prd-slide{margin:0 -15px 0 -120px}
	.prd-slide-con .main-prd-slide .slick-arrow{font-size:35px}
	.prd-slide-con .main-prd-slide .slick-arrow.slick-prev{left:-40px}
	.prd-slide-con .main-prd-slide .slick-arrow.slick-next{right:-40px}
	.prd-slide-con .main-prd-slide li a{padding-bottom:30px}
	.prd-slide-con .main-prd-slide li a .prd-txt .tit{font-size:15px}
	.prd-slide-con .main-prd-slide li a .prd-txt .explain{font-size:13px; margin-top:10px}
}
@media all and ( max-width: 480px ){		
	.prd-slide-con .main-prd-slide{margin-left:-130px}
}





/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1440px ){
	#rightBar{right:-56px;}
	#rightBar.fixed{visibility:hidden;opacity:0;filter:Alpha(opacity=0);}
}
/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1366px){
	#fp-nav{right:10px;}
}
@media all and (max-width:1024px){
	#fp-nav{display:none;}
}