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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
	
	.main-visual-txt-box .main-visual-txt1{font-size:7.4rem} 
	.main-visual-txt-inner {transform:translateY(-3rem)}
}
@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-inner {transform:translateY(-4rem)}
	.main-visual-txt-box .main-visual-txt1{font-size:5.2rem}
	.main-visual-txt-box .main-visual-txt2 {font-size: 2.2rem;}
	.main-visual-control-con  {margin-top: 13rem;}

.main-visual-arrows {display: none !important;}
}

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

/* -------- 메인 컨텐츠 :: 컨텐츠1(Company) -------- */
@media all and ( max-width: 1280px ){
	#mainContent1 {padding: 15rem 0 20rem;}
	.main-grid .con .img-box {width: 9rem; height: 9rem;}
	.main-grid .con.con01 .img-box {left: -4.5rem; margin-top:6.5rem;}
	.main-grid .con.con02 .img-box {width: 12rem; height: 12rem; left: -6rem; }
	.main-grid .con.con03 .img-box {width: 10rem; height: 10rem; right: -5rem; margin-top: 17.5rem;}
	.main-grid .con.con04 .img-box {width: 12rem; height: 12rem; right: -8rem;}
}
@media all and ( max-width: 800px ){ 
	#mainContent1 {padding: 15rem 0 ;}
	#mainContent1 .main-tit-box {padding: 5rem 3rem 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
	#mainContent1 .cm-more-btn {margin-top: 5rem;}
	.main-grid .con.con03 .img-box {margin-top: 23.5rem;}	
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Business) -------- */
@media all and ( max-width: 1280px ){
	#fullpage .section#mainContent2 {height: 100vh !important;}
	#mainContent2 .main-tit-box {padding-top: calc((var(--header-height)) + 2.5rem);}
	.main-business-item .inner {    padding: 0px 3rem 12.8vh;}
}
@media all and ( max-width: 800px ){
	#fullpage .section#mainContent2 {height: auto !important;}
	#mainContent2 {padding-top: 10rem;}
	#mainContent2 .main-tit-box {padding-top: 0; margin-bottom: 4.5rem;}
	#mainContent2 .main-tit-box .main-tit {font-size: 5.4rem;}
	.main-con02-bg-effect {display: none;}
	.main-con02 {display: flex; flex-direction: column-reverse; }
	
	.main-business-con {position: relative;}
	.main-business-item {width: 100%; height: 18rem;    align-items: center; border-top: 1px solid rgba(255,255,255,0.1);     transition: all 0.3s;}
	.main-business-item:hover { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(2rem);}
	.main-business-item .inner {padding: 0 calc(var(--area-padding) + 2rem); display: flex; align-items: center; text-align: left;}
	.main-business-item .inner .icon {width: 10rem; margin-bottom: 0; height: 6.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
	.main-business-item:first-child .inner .icon {height: 8rem; padding-left: 1rem;}
	.main-business-item .inner .txt-box {margin-left: 5.5rem;}
	.main-business-item .inner .tit-en {margin-bottom: 1rem;}
	.main-business-item .inner .tit {font-size: 3rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(ESG) -------- */ 
@media all and ( max-width: 1280px ){ 
	.main-esg-item .txt-con strong {font-size: 5.4rem;}
}
@media all and ( max-width:800px ){ 
	.main-con03 {display: block;}
	.main-con03 .main-tit-box .main-tit {font-size: 4.6rem;}
	.main-esg-con {width: 100%; padding: 7rem var(--area-padding) 6.5rem;}
	.main-esg-slide-con  {width: 100%; height: 47rem;}
	.main-esg-slide {height: 100%; }
	.main-esg-item .txt-con strong {font-size: 4rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(HR&News&IR) -------- */
@media all and ( max-width: 1280px ){ 
	.main-hr-con {padding: 5rem 4rem;}
	.main-new-con {height: auto; padding: 5rem 0;}
	.main-new-con .inner {padding: 0 4rem;}
	.main-ir-con {height: auto;padding: 5rem 0 7rem;}
	.main-ir-con .inner {padding: 0 4rem;}
}
@media all and ( max-width: 800px ){ 
	.main-con04 {display: block;}
	.main-con04 .main-tit-box {position: relative;}
	.main-con04 .main-tit-box .cm-more-btn2 {position: absolute; right: 0; top: 0; margin-top: 0;}
	.main-con04 .main-con04-left {width: 100%; height: 46rem;}
	.main-con04 .main-con04-right {width: 100%;}
	.main-con04 .main-con04-left .main-tit-box .main-tit {font-size: 6rem;}
	.main-con04 .main-con04-right .main-tit-box .main-tit {font-size: 5rem;}
	.main-hr-con {display: block; height: 100%; padding: 5rem var(--area-padding);}
	.main-new-con .inner {display: block; padding: 0 var(--area-padding);}
	.main-new-con .left-con {width: 100%;}
	.main-new-con .right-con {width: 100%;}
	.main-ir-con .inner {display: block; padding: 0 var(--area-padding);}
	.main-ir-con .left-con {width: 100%;}
	.main-ir-con .right-con {width: 100%;}
	.main-stock-price {margin-top: 4rem;}
}
 
/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1840px){
	#fp-nav.main-active {right: var(--area-padding);}
}
@media all and (max-width:1280px){
	#fp-nav{display:none;}
}