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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	.main-visual-txt-box .main-visual-txt1{font-size:5.5rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:11rem;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:3.8rem;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 1.5rem; font-size:6.2rem;}
	.main-visual-txt-box .main-visual-txt3{margin-top: 2.5rem; font-size:2rem; line-height:1.65;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{bottom:10%; left:0;}
	.main-scroll-icon span{width: 0.2rem; height: 13.8rem;}
	.main-scroll-icon span::before {top: 0; width: 0.2rem; height: 50%;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and (max-width:800px){
	.main-tit-box .main-tit{font-size:5.2rem;}
	.main-tit-box .main-sub-tit{margin-top:2.5rem; font-size:1.8rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(BUSINESS) -------- */
@media all and (max-width:800px){
	#mainBusinessCon{padding:10rem 0 5rem; }
	.main-business-bg{position: absolute; z-index: -1;}
	.main-business-bg.bg01{top: 12rem; left: -13rem; width: 26rem;}
	.main-business-bg.bg02{top: -4%; right: -10%; width: 31.55%;}
	.main-business-bg.bg03{top: 84rem; right: 0; visibility: hidden;}

	.main-business-wrapper{margin-top: 5rem; height: 120rem; height: 67rem;}
	.main-business-list{margin: -3rem 0;}
	.main-business-item{margin: 3rem 0; width: 100%;}
	html:not(.no-js) .main-business-item[data-scroll^="fade"][data-scroll^="fade"] {opacity: 1; -webkit-transform: none; transform: none;}
	.main-business-item a{padding: 3rem 4rem 0; height: 29.5rem; height: 23rem; border-radius: 3rem;}
	.main-business-item a:before{bottom: -26rem; right: -31rem; width: 31rem; height: 26rem;}
	.main-business-txt .tit{font-size: 3.6rem; line-height: 1.37;}
	.main-business-txt .txt{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.55;}
	.main-business-btn{margin-top: 2.5rem; width: 3rem; height: 3rem;}
	.main-business-btn .cir{font-size: 1.6rem; line-height: 3rem;}
	.main-business-btn .cir i{top: 0.2rem;}
	/* active */
	.main-business-item.active a{height: 46rem; height: 32rem; background-color: var(--main-color); border-color: var(--main-color);}
	.main-business-item.active a:before{bottom: -1px; right: -1px; transition: var(--transition-custom); transition-property: bottom, right;}
	.main-business-item.active .main-business-txt .tit{color: #fff;}
	.main-business-item.active .main-business-txt .txt{color: rgba(255,255,255,0.8);}
	.main-business-item.active .main-business-btn span{visibility: visible;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(IR·PR) -------- */
@media all and (max-width:800px){
	#mainIrCon{padding: 5rem 0 10rem;}
	.main-ir-tit{font-size: 5.2rem; line-height: 1.1;}

	.main-ir-box{margin-top: 3rem; display:block;}
	.main-ir-total{width: 100%; font-size: 9.6rem;}
	.main-ir-result{margin-top: 6rem; margin-left: 0; padding-bottom: 0;}
	.main-ir-result ul{width: 100%;}
	.main-ir-result ul li{width: calc(50% - 2rem);}
	.main-ir-result ul li:nth-child(2)~*{margin-top: 1.5rem;}
	.main-ir-result ul li .tit{font-size: 2rem; line-height: 1.3;}
	.main-ir-result ul li .result{font-size: 2rem; line-height: 1.3;}
	.main-ir-result ul li .result:before{font-size: 2rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(ESG) -------- */
@media all and (max-width:800px){
	#mainEsgCon{height: auto;}
	.main-esg-bg{width: 100%; height: 100%;}
	.main-esg-bg.animated span{transform:scale(1.0,1.0);}
	#mainEsgCon .area{display: block;}
	#mainEsgCon .area.animated .main-esg-con{opacity: 1;}

	.main-esg-con{padding-top: 10rem !important; padding-bottom: 10rem !important;}
	.main-esg-left{width: 100%; font-size: 5.2rem;}

	.main-esg-right{padding-top: 2.5rem; width: 100%;}
	.main-esg-tab-wrapper{width: 100%;}
	.main-esg-tab-list{width: 100%;}
	.main-esg-tab-list ul{width: 100%;}
	.main-esg-tab-list li{margin-right: 3.5rem;}
	.main-esg-tab-list li a{font-size: 1.8rem; line-height: 3.5rem;}

	.main-esg-tab-content{margin-top: 3.5rem;}
	.main-esg-tab-content .txt{font-size: 2.8rem; line-height: 1.44;}
	.main-esg-tab-content .btn{margin-top: 4rem;}
	.main-esg-tab-content .btn a{width: 3rem; height: 3rem;}
	.main-esg-tab-content .btn a i{font-size: 1.6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(PRESS RELEASE) -------- */
@media all and (max-width:1560px){
	.main-press-item .item-image_wrapper {width: 30rem; height: 30rem;}
}
@media all and (max-width:800px){
	#mainPressCon{padding: 10rem 0 5rem; position: relative;}
	#mainPressCon .main-tit-box .main-sub-tit{font-size: 2rem; line-height: 1.65em;}
	.main-business-bg.bg04{top: -15%; left: 0; width: 30%;}
	.main-business-bg.bg05{top: 46rem; right: 2rem; width: 36%;}

	.main-press-btn{margin-top: 4rem;}
	.main-press-btn .btn{width: 9rem; height: 9rem;}
	.main-press-btn .btn i{font-size: 2.4rem; line-height: 9rem;}

	.main-press-wrapper{margin-top: 8rem; position: relative;}
	.main-press-list{border-top: none;}
	.main-press-item{border-bottom: none;}
	.main-press-item > a{display: block; height:auto; line-height: 1.3;}
	/* 왼쪽 타이틀 */
	.main-press-info-con{margin-top: 4rem; width:100%; padding: 0 30px; text-align: center;}
	.main-press-info-con .bbs-subject-txt {padding-right: 0; max-width: 100%; font-size:2rem; line-height: 1.3;}
	.main-press-info-con .bbs-more-btn{display: none;}
	/* 오른쪽 날짜 */
	.main-press-date-con{margin-top: 1rem; position:static; font-size: 1.8rem; line-height: 1.3; opacity: 1; text-align:center;}
	/* 이미지 영역 */
	.main-press-item .item-image_wrapper {margin: 0 auto; position: relative; left: auto; width: 32rem; height: 32rem; opacity: 1 !important; transform: none !important;}
	/* 화살표 */
	.main-press-arrow{display: block; position: absolute; bottom: 1rem; width: 30px; height: 3rem;}
	.main-press-arrow i{font-size: 18px; color: #333;}
	.main-press-prev{left: -1rem;}
	.main-press-next{right: -1rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(Consultiong) -------- */
@media all and (max-width:800px){
	#mainConsultiongCon{padding: 5rem 0 14.5rem;}
	.main-consultiong-box{max-width: none;}
	.main-consultiong-box .txt01{font-size: 1.8rem; line-height: 1.3;}
	.main-consultiong-box .txt02{margin-top: 2.5rem; font-size: 2.8rem; line-height: 1.42;}
	.main-consultiong-box .txt02 b{font-weight: 700;}
	.main-consultiong-box .btn{margin: 7.5rem auto 0; position: relative; right: auto; top: auto; width: 9rem; height: 9rem;}
	.main-consultiong-box .btn:before{margin-top: -9.3rem; margin-left: -9.3rem;}
	.main-consultiong-box .btn i{font-size: 2.4rem;}
}