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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1500px ){
	.main-visual-con .background-video-wrapper { padding-top: 100vh;}
}
@media all and ( max-width: 1280px ){

	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}

	.main-visual-txt-inner {width: calc(100% - 10rem); padding-bottom: 8rem;}
	.main-wrap.main-active #header {top: 0;}
	.main-wrap.main-active .nav-open-btn {top: 21px;}
}
@media all and ( max-width: 800px ){
	.main-visual-txt-inner {padding-bottom: 6rem;}
	.main-visual-txt-box .main-visual-tit {font-size: 4rem;}
	.main-visual-txt-bottom {display: none;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and (min-width:801px) {
	/* Over BG */
	.cm-fill-btn .cm-fill {
		position: absolute;
		display: block;
		width: 0px;
		height: 0px;
		transform: translate(-50%,-50%);
		border-radius: 50%;
		background: #fff;
		transition: width 0.5s ease-out, height 0.5s ease-out;
	}
	.cm-fill-btn:hover .cm-fill{
		width: 40vw;
		height: 40vw;
		transition: width 0.5s ease-in 0.1s, height 0.5s ease-in 0.1s;
	}
}
@media all and ( max-width: 1280px ){
	.main-tit-box .main-tit02 {font-size: 6rem;}
}
@media all and ( max-width: 800px ){
	.main-tit-box .main-sub-tit {margin-bottom: 2rem;}
	.main-tit-box .main-tit01 {font-size: 2rem;}
	.main-tit-box .main-tit02 {font-size: 3.6rem; margin-top: 2rem;}
	.main-tit-box .main-txt {font-size: 1.4rem; line-height: 1.8;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(About us) -------- */
 @media all and (max-width:1280px){
 	#mainContent1 .bg:before {right: auto; left: 0; width: 100%; height: 30rem; bottom: -30rem; top: auto;}
	.main-about-con {padding: 12rem 0; display: block;}
	.main-about-con .left-con {width: 100%; margin-bottom: 5rem;}
	.main-about-con .right-con {width: 100%;}
	.main-about-con .right-con .main-about-video {max-width: 66rem;}
	.main-about-video .background-video-wrapper {/* padding-top: 0; height: 42rem; */}
	#mainContent1.animated .bg:before {width: 100%; bottom: 0;}
 }
 @media all and (max-width:800px){
	.main-about-con {padding: 8rem 0;}
	.main-about-con .left-con {text-align: center;}
	.main-about-con .main-btn-style01 {margin: 4rem auto 0;}
 	.main-about-con .right-con {height: 38rem;}
	.main-about-con .right-con .main-about-video {width: 100%; transform: translate(0, -50%);}
	.main-about-con .right-con .main-about-video {max-width: none;}
	.main-about-video .about-btn-box {width: 10rem ;height: 10rem; margin-top: -5rem; margin-left: -5rem;}
	.main-about-video .background-video-container {width: 100%; height: 100%;}
 }
 @media all and (max-width:640px){
	#mainContent1 .bg:before {height: 25rem;}
	.main-about-con .right-con {height: 33rem;}
 }
 @media all and (max-width:480px){
	#mainContent1 .bg:before {height: 20rem;}
 	.main-about-con .right-con {height: 25rem;}
	.main-visual-txt-box .main-visual-tit span {display: inline; transform: translateX(0);}	
 }
/* -------- 메인 컨텐츠 :: 컨텐츠2 (Products) -------- */
@media all and (max-width:1280px){
	.main-prd-pc {height: 100vh;}
	.main-prd-inner {padding-bottom: 16rem;}
}
@media all and (max-width:800px){
	.main-prd-pc {display: none;}
	.main-prd-m {display: block; position: relative; width: 100%;}
	.main-prd-m .main-tit-box {position: absolute; top: 8rem; left: 0; width: 100%; text-align: center; z-index: 5;}
	.main-prd-m .main-tit-box .main-tit01 {color: #fff; font-size: 3rem;}
	.main-prd-m .main-tit-box .main-sub-tit ,
	.main-prd-m .main-tit-box .main-tit01 span,
	.main-prd-m .main-tit-box .main-tit02,
	.main-prd-m .main-tit-box .main-txt {opacity: 1;}

	.main-prd-m-container {position: relative; height: 800px;}
	/* .main-prd-m-list {position: relative; height: 100%;} */
	.main-prd-m-list li {position: absolute;top: 0;left: 0;width: 100%;}
	.main-prd-m-container.init-mode .swiper-wrapper {
		position: relative;
		display: block;
		transform: none !important;
	}
	.main-prd-m-container.init-mode .main-prd-m-list li {
		position: absolute;top: 0;left: 0;width: 100%;transform: translateX(100vw);transition: all 0.5s ease;
	}
	.main-prd-m-container.init-mode .main-prd-m-list li.show {
		transform: translateX(0);
	}
	.main-prd-m-container.active-on .main-prd-m-list li {position: relative; }
	.main-prd-m-list li .list-item-wrap {position: relative; width: 100%; height: 100%; overflow: hidden;}
	.main-prd-m-list li .bg {position: absolute; top: 50%; left: 50%; width: 100%; height: 800px; transform: translate(-50%,-50%);}
	.main-prd-m-list li .bg:before {position: absolute; width: 100%; height: 100%; content: ''; top: 0; left: 0; background: rgba(0,0,0,0.1);}
	.main-prd-m-list li a {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1;}
	.main-prd-m-list li a .inner {display: flex; flex-direction:column; align-items: center; justify-content: end; padding:8rem 0 14.5rem; text-align: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.main-prd-m-list li.swiper-slide-active a .inner {opacity: 1; visibility: visible;}
	.main-prd-m-list li a dl {width: 100%; text-align: center;}
	.main-prd-m-list li a dl dt {width: 14rem; height: 14rem; margin: 0 auto 1rem;}
	.main-prd-m-list li a dt svg {max-width: 100%;}
	.main-prd-m-list li a dd {font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; color: #fff; line-height: 1.2;}

	.main-prd-m-wrap {position: relative; width: 100%;}
	.main-prd-m-wrap .main-prd-m-list {position: relative !important; width: 100%; height: 100vh;}
	.main-prd-m-wrap .main-prd-m-list li {position: absolute; top: 100%; left: 0; width: 100%; height: 100%; transform: translateY(100%);  transition: var(--transition-custom4);}
	.main-prd-m-wrap .main-prd-m-list li.first {position: absolute; top: 0; bottom: auto; height: 100%; transform: translateY(0);}
	.main-prd-m-wrap .main-prd-m-list li.active {  transform: translateY(0);}
	
	.main-prd-m-control {position: absolute; bottom: 4rem; width: 100%; display: flex; align-items: center; padding: 0 var(--area-padding); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; z-index: 1; opacity: 0;  transition: var(--transition-custom);}
	.main-prd-m-container.active-on .main-prd-m-control {opacity: 1;}
	
	.prd-m-swiper-button {width: 2.4rem;}
	.prd-m-swiper-button i {color: #fff; font-size: 2.4rem;}
	.prd-m-swiper-pagination.swiper-pagination-progressbar {position: relative !important; width: calc(100% - 6.8rem); height: 5px; margin: 0 1rem; background: rgba(255,255,255,0.1);}
	.prd-m-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #fff;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (PR Center) -------- */
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	.main-pr-con {padding: 15rem 0;}
	.main-pr-list {padding: 10rem 0;}
	.fp-tableCell .fullpage-inner-scroll {max-height: none;}
	.fp-tableCell .fullpage-inner-scroll-bottom {max-height: none;}
}
@media all and (max-width:1280px){
	.main-pr-con{display: block; padding:12rem 0 23rem; width:100%;}
	.main-pr-con > .main-scroll-fixed {position: relative !important; top:auto !important; padding: 0;}
	.main-pr-con .main-tit-box{position: relative; width:100%; top:auto; left:auto; transform:none; text-align:center; margin-bottom:5rem;}
	.main-pr-list {padding: 5rem 0 0;}
}
@media all and ( max-width: 800px ){
	.main-pr-con {padding: 8rem 0 0;}
	.main-pr-con .main-tit-box {margin-bottom: 1rem;}
	.main-pr-list-wrap {position: relative; width: 100vw; margin:0 calc(-1 * var(--area-padding)) ;  overflow-X: auto; overflow-y: hidden; box-sizing: border-box; padding:3rem var(--area-padding) 8rem;}
	.main-pr-list-wrap::-webkit-scrollbar  {display: none;}
	.main-pr-list { flex-wrap: nowrap; padding: 3rem 5rem 3rem 3rem; margin: 0;}    
	.main-pr-list li {width: 31rem; margin:0 3rem 0 0; -webkit-box-shadow: 2rem 2rem 4rem #00000029;-moz-box-shadow: 2rem 2rem 4rem #00000029; box-shadow: 2rem 2rem 4rem #00000029;}
	.main-pr-list li:last-child {margin: 0;}
	#mainContent3.animated .main-pr-list li:nth-child(odd) {transform: translateY(0);}
	.main-pr-list li a .txt-box {padding: 3rem 2rem;}
	.main-pr-list li a .txt-box .tit {margin-bottom: 0; font-size: 2.4rem;}
	.main-pr-list li a .txt-box .txt {display: none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4 (ESG) -------- */ 
@media all and (max-width:1280px){
	.main-esg-con {padding: 12rem 0 10rem;}
	.main-esg-top {padding: 0 0 7.5rem;}
	.main-esg-bottom {padding-top: 7rem; display: block;}
	.main-esg-bottom .main-btn-style01 {margin-top: 3rem;}
}
@media all and (max-width:800px){
	.main-esg-con {padding: 8rem 0;}
	.main-esg-top {padding: 0 0 4rem;}
	.main-esg-bottom {padding-top: 4rem;}
	.main-esg-bottom .main-esg-txt-box {text-align: center;}
	.main-esg-bottom .main-esg-txt-box .txt01 {font-size: 2rem;}
	.main-esg-bottom .main-esg-txt-box .txt02 {font-size: 1.4rem;}
	.main-esg-bottom .main-btn-style01 {margin: 4rem auto 0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5 (Products 슬라이드) -------- */ 
@media all and (max-width:1280px){
	#fullpage .section#mainContent5 {height: 100vh !important;}

	.main-prd2-inner {width: calc(100% - 10rem);}
	.main-prd-pagination .swiper-pagination-bullet {width: 100%; display: none;}
	.main-prd-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {display: block;}
}
@media all and (max-width:800px){
	#fullpage .section#mainContent5 {height: auto !important;}
	.main-prd2-con {position: relative; padding-bottom: 8rem;}
	.main-prd2-con:before {display: none;}
	.main-prd2-con .area-box {padding: 0;}
	.main-prd2-inner {width: 100%; padding: 8rem 0 6rem;}
	.main-prd2-inner .main-tit-box  {text-align: center; padding: 0 var(--area-padding); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
	.main-prd2-inner .main-tit-box .main-sub-tit {margin: 0 auto;}
	.main-prd2-inner .main-tit-box .main-tit02 {font-size: 3.6rem; color: #000;}
	.main-prd-txt {position: relative; bottom: auto; font-size: 1.4rem; color: #000; transform: translateX(30rem); transition: all 2.0s 
cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; margin-top: 2rem;height: 2.8em;}
	#mainContent5.animated .main-prd-txt {opacity: 1; transform: translateX(0);}
	#mainContent5.animated-end .main-prd-txt {opacity: 0; transform: translateX(-30rem);}
	.main-prd2-inner .main-btn-style01 {display: none;}
	.main-prd2-m-img {display: block; position: relative; width: 100%; height: 0; padding-top: 56.31%;}
	.main-prd2-m-img span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block;}
	
	.main-prd2-m-btn {position: absolute; left: 50%; bottom: -16.5rem; width: 18rem; height: 6rem; line-height: 6rem; text-align: center; border-radius: 6rem; margin-left: -9rem; background: #000; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff;}
	.main-prd2-m-btn em {font-weight: 700;}
	.main-prd2-progress-bar {display: none;}
	.main-prd2-control-box {display: block; padding: 4rem var(--area-padding); box-sizing: border-box;}
	.main-prd2-control-box .main-prd-btn {}
	.main-prd2-control-box .slide-btn {display: none;}
	.main-prd2-control-box .slide-btn button {}
	.main-prd2-control-box .slide-arrow-btn {width: 100%; height: 2.6rem; display: flex; align-items: center; }
	.main-prd2-control-box .slide-arrow-btn button {display: flex; align-items: center; color: #000; margin: 0 !important;}
	.prd2-m-swiper-pagination {display: block;}
	.prd2-m-swiper-pagination {position: relative !important; width: calc(100% - 6.8rem); height: 5px; margin: 0 1rem;}
	.prd2-m-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #000;}
	
 	.main-prd-slide-container {display: none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠6 (Online Inquiry) -------- */ 
@media all and (max-width:1280px){
	.main-online-con {padding: 12rem 0;}
	.main-online-list {display: block;}
	.main-online-list li {width: 100%;}
}
@media all and (max-width:800px){
	.main-online-con {padding: 8rem 0; background: #F5F9FC;}
	.main-online-con .main-tit-box .main-sub-tit {margin-bottom: 0;}
	.main-online-list {padding-top: 0;}
	.main-online-list li {height: auto;}
	
	.main-online-list li a .inner {padding: 3rem 2.5rem !important;}
	.main-online-list li a .txt-box  {width: calc(100% - 7rem); padding-right: 3.5rem;box-sizing: border-box;}
	.main-online-list li a .txt-box dt {font-size: 2rem;}
	.main-online-list li a .txt-box dd {font-size: 10px; padding-top: 1rem;}
	.main-online-list li a .icon {width: 7rem !important;}
	
	.main-online-btn-con {padding: 4rem 0;}
	.main-online-logo {display: none;}
	
}

/* ******************  메인 온라인문의 퀵메뉴 ********************** */
@media all and (max-width:1780px){
	#mainQuickBtn {right: 0;}
}
@media all and (max-width:1280px){
	#mainQuickBtn {width: 6rem; height: 6rem; right: var(--area-padding); bottom: 11rem;}
	.main-visual-link-box .inner-circle {width: 6rem; height: 6rem;  background:linear-gradient(135deg, #008FE3 0%, #0066A2 100%);}
	.main-visual-link-box .inner-circle:before {display: none;}
	.main-visual-link-box svg {display: none;}
	.main-visual-link-box .inner-circle .icon-box {}
}
@media all and (max-width:800px){
	#mainQuickBtn {bottom: 3rem; right: 15px;}
}