@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
******************************************************** */
@media all and ( max-width: 800px ){
	#wrap.main-wrap {overflow: hidden;}
}

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	
}
@media all and ( max-width: 800px ){
	/* -------- 메인 인트로 :: 본문 -------- */
	.main-visual-list-con{position: absolute; height: 12rem; bottom: 0; left: 0; display: flex; flex-wrap: wrap;}
	.main-visual-item{border-top: 1px solid rgba(255,255,255,0.1); background-color: rgba(0,0,0,0.25); display: block; position:relative; width: 33.33%; height: 100%; box-sizing: border-box;}
	.main-visual-item:before{display: none;}
	.main-visual-item01,
	.main-visual-item02{border-right: 1px solid rgba(255,255,255,0.1);}
	.main-visual-inner{padding-bottom: 0; justify-content: center;}
	.main-visual-en-tit{font-size:2rem; min-height: 2.6em; line-height: 1.3; display: flex; align-items: center;}
	.main-visual-tit{margin-top: 1rem; font-size: 1.7rem; line-height: 1.3;}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{padding-bottom: 5rem;}
	.main-visual-txt-box .main-visual-txt1{font-size:3.6rem; line-height: 1.2;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 2.5rem; font-size:2rem;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1280px ){
	.main-tit-box .main-sub-tit{font-size:4.8rem;}
}
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit{font-size: 2.2rem; line-height: 1.3;}
	.main-tit-box .main-sub-tit{margin-top:3rem; font-size:4.1rem; line-height: 1.23;}

	.main-pointer-btn{top:-4rem; right:0rem; width: 18rem; height: 18rem; display: none;}
	.main-pointer-btn img{width: 83.33%;}
	.main-pointer-btn .pointer-txt:before,
	.main-pointer-btn .pointer-txt:after{margin-left: -1.9rem; margin-top: -1.9rem; font-size: 3.8rem;}
	.main-pointer-btn .pointer-txt.txt02:before{margin-left: -1.6rem; margin-top: -1.6rem;  font-size: 3.2rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
@media all and ( max-width: 1280px ){
	
}
@media all and ( max-width: 800px ){
	#mainBusinessCon{padding: 13rem 0 11rem; padding: 11rem 0 11rem;}

	.main-business-inner{flex-wrap:wrap;}

	.main-business-left{width: 100%;}
	.main-business-left-inner{padding-top: 10rem;}

	.main-business-right{margin-top: 5rem; width: 100%;}
	.main-business-list{margin: -2rem 0; justify-content: center; flex-direction: row;}
	.main-business-item:nth-child(2),
	.main-business-item:nth-child(3),
	.main-business-item{margin: 2rem 2%; width: 96%; max-width: 460px;}
	.main-business-bg{padding-top: 160.86%; border-radius: 5rem;}
	.main-business-txt{top: 11.87%;}
	.main-business-txt p{font-size: 1.8rem; line-height: 1.3;}
	.main-business-txt h5{margin-top: 2rem; font-size: 3.6rem; line-height: 1.16;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(회사소개) -------- */
@media all and ( max-width: 1280px ){
	.main-company-con .main-pointer-btn{top:-11rem; right:1rem;}
	.main-company-tit{font-size: 6.5rem; padding-left: 18rem;}
	.main-company-tit + .main-company-tit{padding-left: 48rem;}
	.main-company-txt{padding-left: 48rem;}
}
@media all and ( max-width: 800px ){
	#mainCompanyCon{position: relative; padding:11rem 0 19rem; padding: 6rem 0 10rem;}
	#mainContent > article#mainCompanyCon {overflow: hidden;}

	.main-company-bg{position: absolute; bottom: -19rem; left: 0; width: 100%; height: 50rem; mix-blend-mode: luminosity; display: block;}

	.main-company-con .main-pointer-btn{top:-11rem; right:3rem;}
	.main-company-tit{font-size: 4.3rem; line-height: 1.1; text-shadow: 0 0 4.6rem #0054ff; padding-left: 0;}
	.main-company-tit + .main-company-tit{margin-top: 1rem; padding-left: 0;}
	.main-company-txt{margin-top:4rem; padding-left: 0; font-size:2.1rem; line-height: 1.54;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(핵심가치) -------- */
/* @media all and (max-width:1780px){
	.main-value-link,
	.main-value-bg{transform:scaleX(1.0);}
	.main-value-item.prev3 .main-value-link,
	.main-value-item.prev2 .main-value-link,
	.main-value-item.prev1 .main-value-link{transform: scaleX(0.94);}
	.main-value-item.prev3 .main-value-bg,
	.main-value-item.prev2 .main-value-bg,
	.main-value-item.prev1 .main-value-bg{transform: scaleX(1.0);}
}
@media all and ( max-width: 1280px ){
	.main-value-item{top: 17rem; height: 38rem;}
	.main-value-inner,
	.main-value-link,
	.main-value-bg{height: 38rem; border-radius: 38rem;}
	.main-value-tit{font-size: 7rem;}
	.main-value-item1 .main-value-tit{font-size: 6rem;}
} */
@media all and ( max-width: 800px ){
	#mainValueCon{padding: 20rem 0 11.5rem; padding: 10rem 0 5rem;}
	#mainValueCon:before{position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; content: ''; background-color: #000724; display: none;}
	.main-value-wrapper{margin-top: 8rem;}
	.main-value-list{width: 100%;}
	.main-value-item{/* position: sticky; top: 24rem; */ position: relative; top: auto; height: 36rem;}
	.main-value-item + .main-value-item{margin-top: 0;}
	.main-value-item6{height: 10rem;}
	.main-value-inner,
	.main-value-link,
	.main-value-basis,
	.main-value-bg{height: 36rem; border-radius: 5rem;}
	.main-value-basis{background-color: transparent !important;}
	.main-value-bg {transform: scaleX(1.0);}
	.main-value-tit{width: 100%; height: 2.4em; height: auto; line-height: 1.15; font-size: 4.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* white-space: nowrap; */transform: translateY(-50%);}
	.main-value-tit span{margin-top: 1.5rem; font-size: 2rem;}
	.main-value-item1 .main-value-tit{font-size: 3.8rem;}
	.main-value-tit .m-br{display: block;}

	/* prev3 */
	.main-value-item.prev3 .main-value-inner{transform: translateY(-24rem);}
	/* prev2 */
	.main-value-item.prev2 .main-value-inner{transform: translateY(-16rem);}
	/* prev1 */
	.main-value-item.prev1 .main-value-inner{transform: translateY(-8rem);}
	.main-value-item.prev3 .main-value-tit,
	.main-value-item.prev2 .main-value-tit,
	.main-value-item.prev1 .main-value-tit{padding: 0; font-size: 2.6rem; top: 1.2rem; transform: translateY(0);}

	.main-value-wrapper.pc-ver{display: none;}
	.main-value-wrapper.main-value-wrapper-JS{display: block;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(PUBLIC RELATIONS) -------- */
@media all and (max-width:1780px){
	.main-value-con{padding: 0 5rem;}
}
@media all and (max-width:1560px){
	/* 슬라이드 */
	.main-customer-wrapper{padding-left: var(--area-padding) !important;}
}
@media all and ( max-width: 1280px ){
	#mainCustomerCon .main-tit-box{padding-right: 28rem;}
	.main-value-con{padding: 0 3rem;}
	/* Controls */
	.main-customer-controls {right:var(--area-padding); right: 0;}
	.main-customer-controls-inner{width: 25rem;}
}
@media all and ( max-width: 800px ){
	#mainCustomerCon{padding:9rem 0;}

	#mainCustomerCon .main-tit-box{position: static; padding-right: var(--area-padding); padding-right: 0;}

	/* Controls */
	.main-customer-controls {margin-top: 5rem; position: static; width: 100%;}
	.main-customer-controls > span{width: 100%;}
	.main-customer-controls-inner{width: 100%; justify-content:flex-start;}
	.main-customer-controls .pagination{display:flex; align-items:center;}
	.main-customer-controls .pagination .current,
	.main-customer-controls .pagination .total{font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 700; color: #fff;}
	.main-customer-controls .pagination .slash{margin: 0 1rem; width: 0.2rem; height: 1.4rem; background-color: rgba(255,255,255,0.25); display: block;}
	.main-customer-controls .pagination .total{opacity: 0.25;}
	.main-customer-controls .progressbar {margin: 0 2rem; position:relative; width:24rem; height:2px; background-color:rgba(255,255,255,0.15);}
	.main-customer-controls .progressbar em {position: absolute; top: 0; left: 0; width: 0; height:2px; background-color:#fff; display: block;}
	.main-customer-controls .arrow{width: 4rem; height: 4rem; display: block;}
	.main-customer-controls .arrow i {font-size:2.4rem; color: #fff;}
	.main-customer-controls .view-more{margin-left: 1rem; line-height: 4rem; font-size:2.4rem; color: #fff; display: block;}
	.main-customer-controls .view-more i{position: relative; top: 0.1rem;}

	/* 슬라이드 */
	.main-customer-container{margin-top: 10rem; position: relative;}
	.main-customer-container:after{position: absolute; top: 0; right: 0; width: 50%; height: 100%; content: ''; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00051a+0,00051a+52,00051a+100&0+0,1+52,1+100 */
	background: linear-gradient(to right,  rgba(0,5,26,0) 0%, rgba(0,5,26,0.4) 20%, rgba(0,5,26,0.7) 60%, rgba(0,5,26,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
	.main-customer-wrapper{padding-right: 13rem !important; overflow: visible !important; box-sizing: border-box;}
	.main-customer-list{display: flex;}
	.main-customer-item{width: 33.33%;}
	.main-customer-item a{display: block; width: 100%; opacity: 1; transition:var(--transition-custom); transition-property: opacity;}
	.main-customer-item.active-item + .main-customer-item a,
	.main-customer-item.active-item + .main-customer-item  + .main-customer-item a,
	.main-customer-item.active-item + .main-customer-item  + .main-customer-item ~ .main-customer-item a{opacity: 1;}
	.main-customer-item.active-item a{opacity: 1;}
	.main-customer-thum{position: relative; width: 100%; height: 0; padding-top: 100%; overflow: hidden; border-radius: 100%;}
	.main-customer-item:nth-child(2n) .main-customer-thum{border-radius: 0;}
	.main-customer-item:nth-child(2n+1) .main-customer-thum{border-radius: 0 50% 50% 0;}
	.main-customer-item:nth-child(3n+1) .main-customer-thum{border-radius: 100%;}
	.main-customer-thum span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition:var(--transition-custom);}
	.main-customer-txt{margin-top: 4.5rem;}
	.main-customer-txt .category{font-size: 1.6rem; line-height: 1.3; color: #fff; display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.main-customer-txt .tit{margin-top: 1.5rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.main-customer-item a:hover .main-customer-thum span{transform: scale(1.1) rotate(0.02deg);}
}


/* ****************** 
	* Mouse Pointer
********************** */
@media all and (max-width:800px){
	.mouse-pointer,
	.pointer-circle,
	.pointer-txt{visibility: hidden; opacity: 0;}
}

/********** 251001 유지보수 **********/
@media all and (max-width: 800px) {
	.main-visual-item {width: 25%;}
}

@media all and (max-width: 480px) {
	.main-visual-list-con {height: auto; bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
	.main-visual-item {width: 50%; height: 12rem;}
	.main-visual-item:nth-child(n + 3) {border-right: 1px solid rgba(255, 255, 255, 0.1);}
}