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

/* ****************** 
	* Mouse Pointer
********************** */
@media all and ( max-width: 800px ){
	.mouse-pointer .pointer-txt{font-size: 1.6rem;}
	.mouse-pointer.hover .pointer-circle{width:8rem; height:8rem;}
}

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 800px ){
	.main-visual-inner{padding-top: 286.40%;}
	.main-visual-item .main-visual-img{left: 50%; margin-left: -960px; width: auto; left: 0; margin-left: 0; width: 100%;}

	/* 메인 비주얼 :: 상단 텍스트 */
	.main-visual-txt-box{padding-bottom: 50rem !important;}
	.main-visual-txt-inner{width: 100%;}
	.main-visual-txt-box .txt03{padding-left: 0; margin-top: 6rem; font-size: 2.8rem; line-height: 1.42;}
	.main-visual-txt-box .txt03 br{display: none;}

	/* 메인 비주얼 :: 하단 고정 텍스트 */
	.main-visual-fixed-txt-con{bottom: 12rem;}
	/* marquee */
	.visual-marquee-container{top: -35rem;}
	.visual-marquee-wrapper + .visual-marquee-wrapper {margin-top: -8rem;}
	.visual-marquee-wrapper .flow-txt {font-size: 10rem; line-height: 1.3;}
	.visual-marquee-wrapper .flow-txt .txt {padding-right: 2rem;}
	/* 하단 텍스트 */
	.main-visual-txt-group .left{padding-left: 0; width: 100%;}
	.main-visual-txt-group .left strong{font-size: 7.2rem;}
	.main-visual-txt-group .left strong span{padding: 0 8rem 4rem 0;}
	.main-visual-txt-group .left strong span:before{bottom: 2rem; right: 2rem; font-size: 7.2rem;}
	.main-visual-txt-group .right{margin-top: 0; width: 100%;}
	.main-visual-txt-group .main-visual-txt1{font-size:2.5rem; line-height: 1.3;}
	.main-visual-txt-group .main-visual-txt2{margin-top: 2rem; font-size:1.8rem; line-height: 1.57;}
	.main-visual-txt-group .main-visual-more-btn{margin-top:5rem;}
	.main-visual-txt-group .main-visual-more-btn a{max-width: 14rem; font-size:1.3rem; padding:2rem 2rem;}
	.main-visual-txt-group .main-visual-more-btn a i{margin-left: 2rem;}

	/* 메인 비주얼 :: 스크롤아이콘 */
	.scroll-icon{display: none;}
}
@media all and ( max-width: 480px ){
	/* 메인 비주얼 :: 상단 텍스트 */
	.main-visual-txt-box{padding-bottom: 59rem !important;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box p{font-size: 4.8rem; line-height: 0.55;}
	.cm-btn-style{max-width: 20rem; font-size:1.5rem; padding:2rem 2rem;}
	.cm-btn-style span{margin-left: 2rem; font-size: 1.1rem;}
	/* active */
	.main-intro-svg .path01{transition: all 1.2s ease-in-out;}
	.main-intro-svg .path02{transition: all 1.2s ease-in-out;}
	.main-tit-box .main-tit01{transition: all 0.8s ease-in-out;}
	.main-tit-box .main-tit02{transition: all 0.8s ease-in-out;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(인트로) -------- */
@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainIntroCon{padding: 10rem 0 5rem;}
	#mainIntroCon:before{display: none;}
	.main-intro-svg{margin: 0; max-width: 35rem;}

	.main-intro-txt-con{margin-top: 4rem; display: flex; justify-content: flex-start;}
	.main-intro-txt-box{max-width: 67rem; width: 100%;}
	.main-intro-txt-box h5{font-size: 2.8rem; line-height: 1.3;}
	.main-intro-txt-box p{margin-top: 2rem; font-size: 1.8rem; line-height: 1.57;}
	.main-intro-txt-box a{margin-top: 3rem; /*font-size: 2rem; line-height: 4rem;*/}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(사업소개) -------- */
@media all and (max-width:1460px){ 
	#mainGlobalCon {padding-top: 20vw;}
}
@media all and (max-width:1280px){
	.main-business-con-inner{padding: 180px 0 145px;}
	.main-business-left,
	#mainBusinessCon.top-fixed .main-business-left{height: 900px;}
	/* 텍스트 */
	#mainBusinessCon .main-tit-box,
	.main-business-txt{max-width: 47.5rem; width: 45%;}
	.main-business-bg-wrapper {width: 50%;}
	.main-business-bg-group{padding-top: 900px;}

	.main-business-wrapper{width: 40%;}
}
@media all and (max-width:800px){
	.main-business-con-inner{padding: 5.5rem 0 14rem; background-color: #f5f5f5;}

	.main-business-left{position: relative !important; padding-bottom: 5rem !important; width: 100% !important; height: auto !important; display: block !important; transform: none !important;}
	#mainBusinessCon.top-fixed .main-business-left{position: relative; height: auto;}
	#mainBusinessCon:before{display: none;}
	.main-business-left .area-box{padding-top:0 !important;}
	/* 텍스트 */
	#mainBusinessCon .main-tit-box{max-width: 24.5rem; width: 100%;}
	.main-business-txt{margin-top: 5rem; max-width: none; width: 100%;}
	.main-business-txt .txt01{font-size: 2.4rem; line-height: 1.3;}
	.main-business-txt .txt02{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.36;}
	.main-business-txt .txt03{display: none;}
	.main-business-txt .btn{margin-top: 4.5rem;}

	.main-business-right{display: flex; align-items: center;}
	.main-business-right .area-box{width: 100%; box-sizing: border-box; display: flex; justify-content: flex-end;}
	/* 배경 슬라이드 */
	.main-business-bg-wrapper{position: absolute; bottom: 0; left: var(--area-padding); right: auto; transform: translateY(100%); margin: 0; width: calc(100% - (var(--area-padding) * 2));}
	.main-business-bg-group{padding-top: 136.52%;}
	.main-business-bg-item.active-item-m{opacity: 1; z-index: 1;}
	/* 슬라이드 */
	.main-business-wrapper{width: 77.14%; margin: 4rem auto 0; box-shadow: 2rem 2rem 5.7rem -1rem rgba(0,0,0,0.16);}
	.main-business-group{width: 100%;}
	.main-business-list{width: 100%;}
	.main-business-item{width: 100%;}
	.main-business-item + .main-business-item{margin-top: 0;}
	.main-business-img{box-shadow: none;}

	/* active */
	.main-business-bg-list,
	.main-business-wrapper{opacity:0; transition: all 1s ease-in-out;}
	.main-business-bg-list.active-item,
	.main-business-wrapper.active-item{opacity:1;}
}
@media all and (max-width:480px){
	.main-business-con-inner {padding: 5.5rem 0 10rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(글로벌 네트워크) -------- */
@media all and (max-width:1280px){
	#mainGlobalCon{padding: 14.5rem 0 6rem;}
	/* 타이틀 */
	.main-global-tit-box{top: -4.5rem;}
	/* 설명 */
	.global-info-box{position: relative; top: 0; margin-top: -8rem; left: 0; margin-top: 0; margin-left: 0; width: 100%;}
}
@media all and (max-width:800px){
	/* 타이틀 */
	.main-global-tit-box .main-tit-box{max-width: 24rem;}
	/* 배경 */
	.global-map-bg-img{opacity: 1;}
	.spidochescaler-container{transform: scale(1.2) translateX(25px) !important;}
	/* 설명 */
	.global-num-inner{width: 18rem;}
	.global-num-box02,
	.global-num-box{height: 1em; font-size:10.1563vw;}
	.global-fix-num,
	.global-num-item-box{font-size:1em;}
	.global-num-item-box{height:8em;}
	.global-num-item {line-height: 1em;}
	.global-num-txt{margin-top: 2.5rem; font-size: 1.6rem; line-height: 1.3;}
	.global-num-txt i{top: 0; font-size: 2.4rem; margin-right: 0; margin-bottom: 1rem; display: block;}
	.global-info-bottom{margin: 5rem var(--area-padding) 0; padding: 4rem 0; box-sizing: border-box;}
	.global-info-list{margin: -2rem 0;}
	.global-info-item{margin: 2rem 0; width: 100%; padding: 0 2rem; display: flex; box-sizing: border-box;}
	.global-info-flag{width: 10rem;}
	.global-info-flag img{height: 3.3rem;}
	.global-info-txt{width: calc(100% - 10rem); margin-top: 0;}
	.global-info-txt h5{margin-bottom: 1rem; font-size: 1.8rem; line-height: 1.3;}
	.global-info-txt h5:before{display: none;}
	.global-info-txt p{padding-left: 1.2rem; font-size: 1.2rem; line-height: 1.5;}
	.global-info-txt p + p{margin-top: 0.7rem;}
	.global-info-txt p:before{top: 0.6rem; width: 0.6rem; height: 0.6rem;}
}
@media all and (max-width:320px){
	.spidochescaler-container {transform: scale(1.2) translateX(10px) !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(ESG) -------- */
@media all and (max-width:1620px){
	.main-esg-right-item .pc-br,
	.main-esg-right-top .pc-br{display: none;}
}
@media all and (max-width:800px){
	#mainEsgCon{padding: 8rem 0;}
	#mainEsgCon .area-box{display: block;}

	.main-esg-left{width: 100%;}

	.main-esg-right{margin-top: 4rem; width: 100%;}
	.main-esg-right-top .tit{font-size: 2.5rem; line-height: 1.3;}
	.main-esg-right-top .txt{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.83;}
	.main-esg-right-bottom{margin-top: 4.5rem;}
	.main-esg-right-list{border-top: 1px dashed rgba(255,255,255,0.2); border-bottom: 1px dashed rgba(255,255,255,0.2);}
	.main-esg-right-item{padding: 4rem 0 3.5rem; width: 100%; border-left:0;}
	.main-esg-right-item + .main-esg-right-item{border-top: 1px dashed rgba(255,255,255,0.2);}
	.main-esg-right-item:last-child{border-right: 0;}
	.main-esg-right-item.active-item:nth-child(1) .cm-overflow-inner,
	.main-esg-right-item.active-item:nth-child(2) .cm-overflow-inner,
	.main-esg-right-item.active-item:nth-child(3) .cm-overflow-inner{animation-delay: 0s;}
	.main-esg-right-item .icon img{height: 5.6rem;}
	.main-esg-right-item .tit{margin-top: 2rem; font-size: 3rem; line-height: 1.33;}
	.main-esg-right-item .tit span{margin-top: 1rem; font-size: 1.6rem;}
	.main-esg-right-item .txt{margin-top: 2.5rem; font-size: 1.8rem; line-height: 1.83;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(Summary) -------- */
@media all and (max-width:1280px){
	.main-summary-left{width: calc(48% - 7rem);}
	.main-summary-txt .txt01 .pc-br{display: none;}

	.main-summary-right{width: 52%; display: flex; justify-content: space-between;}
	.main-summary-right-item{width: calc(50% - 1.5rem);}
	.main-summary-right-inner{padding: 3rem 2.5rem; height: 53rem;}
	/* STOCK PRICE */
	.stock-price-top{padding: 3.5rem 0;}
	.stock-price-top .bg{font-size: 20rem;}
	.stock-price-top .total{font-size: 7rem;}
	.stock-price-bottom{margin-top: 1rem;}
}
@media all and (max-width:800px){
	#mainSummaryCon{padding: 10rem 0 5rem;}
	#mainSummaryCon:before{bottom: auto; left: 0; width: 100%; height: 50%;}
	#mainSummaryCon .area-box{display: block;}
	.main-summary-left{padding-top: 0; width: 100%;}
	.main-summary-left .main-tit-box{width: 26.6rem;}
	.main-summary-txt{margin-top: 5rem;}
	.main-summary-txt br{display: none;}
	.main-summary-txt .txt01{font-size: 1.8rem; line-height: 1.83;}
	.main-summary-txt .btn{margin-top: 2rem;}

	.main-esg-right-item .tit p{margin-top: 3.5rem; font-size: 3rem; line-height: 1.33; letter-spacing: -0.065em; font-weight: 300; color: #fff;}

	.main-summary-right{margin-top: 5rem; width: 100%; display: block;}
	.main-summary-right-item + .main-summary-right-item,
	.main-summary-right-item{width: 100%; padding:0; opacity: 0;}
	.main-summary-right-item + .main-summary-right-item{margin-top: 5rem;}
	.main-summary-right-inner{padding: 5rem; height: auto;}
	/* STOCK PRICE */
	.stock-price-top{padding: 4rem 0;}
	.stock-price-top .bg{font-size: 26rem;}
	.stock-price-top .tit{font-size: 2.3rem; line-height: 1.3;}
	.stock-price-top .total{margin-top: 1rem; font-size: 7.2rem;}
	.stock-price-top .result-group{margin-top: 1rem;}
	.stock-price-top .result-group span{font-size: 1.8rem; line-height: 1.3;}
	.stock-price-top .result-group .result01{padding-left: 2rem;}
	.stock-price-top .result-group .result01:before{top: -0.4rem; left: -0.4rem; font-size: 2.5rem;}
	.stock-price-top .result-group .result02{margin-left: 0.7rem;}
	.stock-price-bottom{margin-top: 1.5rem;}
	.stock-price-bottom dl{width: 100%; height: 4.5rem;}
	.stock-price-bottom dt, 
	.stock-price-bottom dd{font-size: 1.4rem; line-height: 1.3;}
	.stock-price-bottom dt{width: 16rem;}
	.stock-price-bottom dd{width: calc(100% - 16rem);}

	/* CAREERS */
	.main-careers-txt{margin-top: 3.5rem;}
	.main-careers-txt .tit{font-size: 2.2rem; line-height: 1.3;}
	.main-careers-txt .txt{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.5;}
	.main-careers-txt .btn{margin-top: 3rem;}
	.main-careers-txt .btn a{width: 100%; font-size:1.5rem; padding:1.2rem 2rem;}
	.main-careers-txt .btn a i{margin-left: 2rem; font-size: 2.4rem;}

	/* active */
	.main-summary-right-item + .main-summary-right-item.active-item,
	.main-summary-right-item.active-item{padding: 0; opacity:1; transform:translateY(0);}
}

/* -------- 메인 컨텐츠 :: 테블릿용 추가 css -------- */
@media all and ( min-width: 801px ) and ( min-height: 900px ){
	/* mainVisual */
	.is-mobile .main-visual-inner{padding-top: 126%;}
	.is-mobile .visual-marquee-container{top: -54rem;}
	.is-mobile .visual-marquee-wrapper .flow-txt {font-size: 20rem;}
	.is-mobile .main-visual-txt-box .txt03{font-size: 4.3rem;}
	/* business */
	.is-mobile .main-business-con-inner {padding: 145px 0;}
	.is-mobile .main-business-left,
	.is-mobile #mainBusinessCon.top-fixed .main-business-left{height: 100vh;}
	.is-mobile .main-business-bg-group{padding-top: 100vh;}
}
@media all and ( min-width: 1025px ) and ( max-height: 830px ){
	/* mainVisual */
	.main-visual-inner{padding-top: 126%;}
	.visual-marquee-container{top: -54rem;}
	.visual-marquee-wrapper .flow-txt {font-size: 20rem;}
	.main-visual-txt-box .txt03{font-size: 4.3rem;}
	/* business */
	.main-business-con-inner {padding: 145px 0;}
	.main-business-left,
	#mainBusinessCon.top-fixed .main-business-left{height: 100vh;}
	.main-business-bg-group{padding-top: 100vh;}
}