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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1750px ){	
	/* 메인 비주얼 :: 스크롤아이콘 */
	/*.main-scroll-icon{left:auto; margin-left:0; right:30px;}*/
}
@media all and ( max-width: 1024px ){
	/* 공통 :: 레이아웃 */
	/*#fullpage .section{height:auto !important;}*/
	#fullpage .fp-section .fp-tableCell{padding-top:0; height:0 !important;}
	/* 메인 비주얼 :: 이미지 */

	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:40px; margin-bottom:15px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:14px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2 .pc-br1{display:none}
	/* 메인 비주얼 :: 컨트롤러 */
	.main-visual-control .main-slide-dot li{margin-right:10px}
	.main-visual-control .main-slide-dot li button{font-size:12px}
	.main-visual-control .main-arrow a i{font-size:15px;}
	/* VIEW MORE 버튼 */
	.main-more-btn{width:125px; height:40px; line-height:40px; margin-top:35px}
	/* 메인 비주얼 :: pause,play */
	.main-visual-control .main-play-control{margin-left:3px}
	.main-visual-control .slick-control-btns button i{font-size:19px;}
}
@media all and ( max-width: 480px ){	
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-m-img{padding-top:120%}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:30px; margin-bottom:0}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 br{display:none}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:12px; display:none}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1550px ){	
	/* 버튼 */
	.main-page-btn{position:relative; right:auto; top:0; display:inline-block; transform:translateY(50px); margin-top:20px}
	.aos-animate .main-page-btn{opacity:1; transform:translateY(0); }
}
@media all and ( max-width: 800px ){	
	/* 버튼 */
	.main-page-btn{margin-top:10px}
	.main-page-btn .arrow{width:22px; height:22px; margin-left:5px}
	.main-page-btn .arrow i{font-size:17px; line-height:22px}
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit-en{font-size:14px; margin-bottom:20px}
	.main-tit-box .main-tit{font-size:28px}
}
@media all and ( max-width: 480px ){	
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:25px}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(INDUSTRIES) -------- */
@media all and ( max-width: 1380px ){	
	.accordion-list .accordion-item .accordion-inner{background-size:cover !important}
}
@media all and ( max-width: 1220px ){	
	.accordion-item .accordion-info-box dl .accordion-info-txt .pc-br{display:none}
}
@media all and ( max-width: 1024px ){
	.accordion-list-box .accordion-list{/*max-width:800px;*/ margin:0px auto;}
	.accordion-list .accordion-item{display:block; width:100% !important; height:auto; margin-top:10px; padding-left:0; }
	.accordion-list .accordion-item:first-child{margin-top:0}
	.accordion-list .accordion-item .accordion-inner{background-image:none; position:relative}
	.accordion-list .accordion-item .accordion-m-img{
		height:0; padding-top:110px; 
		background-size:cover !important;
		-webkit-transition:padding 0.4s;
		-moz-transition:padding 0.4s;
		-o-transition:padding 0.4s;
		-ms-transition:padding 0.4s;
		transition:padding 0.4s;
	}
	.accordion-list .accordion-item.active .accordion-inner{cursor:default;}
	.accordion-list .accordion-item.active .accordion-m-img{padding-top:55%}
	.accordion-item .accordion-inner .accordion-tit{left:5%; writing-mode:rl-tb; transform:translateY(-50%); top:50%}
	.accordion-item .accordion-inner .accordion-tit em{display:contents; transform:inherit; padding:0; height:auto}

	/* 아코디언 :: 타이틀 및 내용 */
	.accordion-item .accordion-info-box:before{height:100%;}
	.accordion-item .accordion-info-box dl{padding:6%}
}
@media all and ( max-width: 800px ){	
	#mainContent1{padding:50px 0}
	.accordion-list-box{margin-top:30px}
	.accordion-list .accordion-item .accordion-m-img{padding-top:80px;}
	.accordion-item .accordion-inner .accordion-tit{font-size:17px;}
	/* 아코디언 :: 타이틀 및 내용 */
	.accordion-item .accordion-info-box dl{padding:4%}
	.accordion-item .accordion-info-box dl dt{font-size:28px; margin-bottom:15px}
	.accordion-item .accordion-info-box dl .accordion-info-txt{font-size:13px}
	.accordion-item .accordion-info-box dl .industry-view-more a{font-size:11px; margin-top:15px}
	.accordion-item .accordion-info-box dl .industry-view-more a .arrow{width:39px; height:22px}
}
@media all and ( max-width: 480px ){		
	.accordion-list .accordion-item .accordion-m-img{background-size:auto !important}
	/* 아코디언 :: 타이틀 및 내용 */
	.accordion-list .accordion-item.active .accordion-m-img{padding-top:72%}
	.accordion-item .accordion-info-box dl dt{font-size:25px}
	.accordion-item .accordion-info-box dl .accordion-info-txt{font-size:12px}
}	


/* -------- 메인 컨텐츠 :: 컨텐츠2(CLIENTS) -------- */
@media all and ( max-width: 1450px ){	
	#mainContent2.aos-animate .main-clients-con{left:30px; margin-left:0}
}
@media all and ( max-width: 1024px ){		
	#mainContent2:after{left:auto; right:0; margin:0 -8% 0 0}
	.main-clients-con .main-clients-slide li{width:240px}
}
@media all and ( max-width: 800px ){	
	#mainContent2{padding:50px 0}
	#mainContent2:after{display:none}
	.main-clients-con{left:1000px; transition:left 1.8s 0.3s !important; margin-left:0; padding:65px 15px 0}
	/*.main-clients-con .main-clients-slide{border-right:0; box-sizing:border-box}*/
	.main-clients-con .main-clients-slide:after{position:absolute; content:""; width:1px; height:100%; background-color:#d8d8d8; top:0; right:0}
	.main-clients-con .main-clients-slide li{width:256px}
	.main-clients-con .main-clients-slide li .client-con a span{height:0; padding-top:60%}
	#mainContent2.aos-animate .main-clients-con{left:0;}
	#mainContent2 .sub-slide-control{top:20px; left:auto; transform:translate(0)}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(NEWS) -------- */
@media all and ( max-width: 1450px ){	
	#mainContent3.aos-animate .main-news-con{left:30px; margin-left:0}
}
@media all and ( max-width: 1024px ){		
	.main-news-con .main-news-slide li{width:380px}
}
@media all and ( max-width: 800px ){	
	#mainContent3{padding:50px 0}
	.main-news-con{left:1000px; transition:left 1.8s 0.3s !important; margin-left:0; padding:60px 15px 0}
	.main-news-con .main-news-slide{margin:0 -5px}
	.main-news-con .main-news-slide li{margin:0 5px;}
	.main-news-con .main-news-slide li a .new-thum .new-cate{width:42px; height:42px; line-height:42px; left:10px}
	.main-news-con .main-news-slide li a .news-txt .tit{font-size:17px; margin-top:10px}
	.main-news-con .main-news-slide li a .news-txt .txt{font-size:13px; margin-top:10px}
	#mainContent3.aos-animate .main-news-con{left:0;}
	#mainContent3 .sub-slide-control{top:14px; left:auto; transform:translate(0)}
}





/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media (max-height: 850px) and (min-width: 1024px){
	#rightBar > ul > li{height:260px}
}
@media all and ( max-width: 1024px ){
	#rightBar{top:auto; bottom:0; left:0; transform:translate(0); }
	#rightBar > ul > li{float:left; width:50%; height:60px}
	#rightBar > ul > li > a{position:relative; display:block; border-top-right-radius:15px; border-bottom-left-radius:0}
	#rightBar > ul > li > a span{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
	#rightBar > ul > li > a span em{writing-mode:lr-tb}
	#rightBar > ul > li > a span .icon{display:inline-block; margin:0 0 0 10px; vertical-align:baseline}
}
@media all and ( max-width: 800px ){	
	#rightBar > ul > li{height:45px}
	#rightBar > ul > li > a span{font-size:14px;}
	#rightBar > ul > li > a span .icon{font-size:15px;}
}

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