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

/* ******************  메인 레이아웃(Fullpage) ********************** */
@media all and ( max-width: 1024px ){
	#fullpage .section{height:auto !important;}
	#fullpage .fp-section .fp-tableCell{padding-top:0; height:0 !important;}
}


/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1660px ){
	/* 메인 비주얼 :: 스크롤아이콘 */
	.active-page .main-scroll-icon{right:5%}
}
@media all and ( max-width: 1024px ){	
	#mainVisual{height:100%}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{top:25%}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{bottom:4.5rem}
	/* 메인 비주얼 :: 컨트롤러 */
	.main-visual-control{bottom:0}
	.active-page .main-visual-control{bottom:4.5rem}
	.main-visual-control .main-progress{width:calc(100% - 30rem); margin-left:3rem}
}	
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:1.6rem; margin-bottom:20px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:3.6rem; white-space:nowrap}
}
@media all and ( max-width: 480px ){	
	/* 메인 비주얼 :: 컨트롤러 */
	.main-visual-control .main-arrow button{width:6.5rem; height:6.5rem; font-size:2rem;}
	.main-visual-control .main-progress{width:calc(100% - 22.5rem); margin-left:2rem}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon .circle{width:6.5rem; height:6.5rem}
	.main-scroll-icon .txt img{height:9.5rem}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1024px ){	
	
}
@media all and ( max-width: 800px ){
	.main-cm-txt .tit{font-size:3.6rem}
	.main-cm-txt .tit .sm{font-size:2.8rem}
	.main-cm-txt .tit.big{font-size:3.8rem}
	.main-cm-txt .txt{font-size:1.6rem}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(사업분야) -------- */
@media all and ( max-width: 1660px ){	
	/* 우측 :: 고정텍스트 */
	.main-bs-fixbar .inner{width:40%}
}
@media all and ( max-width: 1024px ){	
	#mainBusinessCon{padding-top:8rem}
	/* 우측 :: 고정텍스트 */
	.main-bs-fixbar{position:relative; margin:0 0 5rem}
	.main-bs-fixbar > div{padding:0}
	.main-bs-fixbar .inner{float:none; width:auto}
	.main-bs-fixbar .tit{margin-bottom:2.3rem}
	.main-bs-fixbar .more-btn{margin-top:2.3rem}
	/* 좌측 :: 메뉴박스 */
	.main-bs-con .bs-box-list{max-width:none; top:0}
	.main-bs-con .bs-box-list.pc{display:none}
	.main-bs-con .bs-box-list.tb{display:block; margin:0 -1.2rem }
	.main-bs-con .bs-box-list.tb .slick-list{overflow:visible;}
	.main-bs-con .bs-box-list li{margin:0 1.2rem; max-width:none}
	.main-bs-con .bs-box-list li a .bg-img img{height:100%; top:0}
}
@media all and ( max-width: 800px ){	
	/* 우측 :: 고정텍스트 */
	.main-bs-fixbar .more-btn .circle{width:6.5rem; height:6.5rem;}
	.animated .main-bs-fixbar .more-btn .circle{margin-right:1rem}
	.main-bs-fixbar .more-btn .circle i{line-height:6.5rem}
	/* 좌측 :: 메뉴박스 */
	.main-bs-con .bs-box-list li a .txt{left:10%; bottom:6%}
	.main-bs-con .bs-box-list li a .txt dd{font-size:3.6rem}
}
@media all and ( max-width: 480px ){		
	.main-bs-con .bs-box-list.tb .slick-list{padding-right:8%}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Global Network) -------- */
@media all and ( max-width: 1024px ){	
	#mainGlobalCon,
	.global-map-con .map-img{margin-top:-12%}
	#mainGlobalCon:after{top:-48rem; background-size:cover !important}
}
@media all and ( max-width: 960px ){	
	.main-global-tit{top:auto; bottom:-12%; left:5%; margin:0}
}
@media all and ( max-width: 800px ){		
	.nation-circle .logo-circle{width:8rem; height:8rem; line-height:7.2rem; top:-9.8rem}
	.nation-circle .logo-circle img{height:4.5rem}
}
@media all and ( max-width: 640px ){	
	.main-global-tit .tit{margin-bottom:2rem}
	.nation-circle .dot{width:2.5rem; height:2.5rem}
	.nation-circle .dot:after{width:0.5rem; height:0.5rem}
	.nation-circle .spread-circle{width:20rem; height:20rem}
}
@media all and ( max-width: 480px ){	
	.main-global-tit{bottom:-30%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Question) -------- */
@media all and ( max-width: 1024px ){	
	#mainQuestionCon{margin-top:15%}
}
@media all and ( max-width: 800px ){	
	#mainQuestionCon{margin-top:47%}
	.main-quetion-tit{margin-bottom:4rem}
}
@media all and ( max-width: 480px ){	
	#mainQuestionCon{margin-top:80%}
}

/* ******************  메인 하단 배경 ********************** */
@media all and ( max-width: 1024px ){	
	.main-bt-bg{bottom:0}
}