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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1820px ){
	.main-visual-txt-box {padding-bottom: 11rem;}
	.main-prd-list > li .inner-con .inner {padding: 8rem 0 8rem 20rem;}
	.main-prd-list > li .inner-con .img-box span {width: 76rem;}
	
	.main-visual-inquiry-box {right: var(--area-padding); margin-right: 0;}
}
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}
@media all and ( max-width: 800px ){
	.main-scroll-icon {display: none !important;}
	/* 메인 인트로 :: 이미지 */
	.main-intro-wrap .intro-bg .layer-color { mask-size: 34rem; -webkit-mask-size: 34rem; }
	/* .main-intro-wrap .intro-bg .layer-color {background-image: url('/images/main/main_visual_01_m.jpg');}
	.main-intro-wrap .intro-bg .layer-color::before { background:url('/images/main/main_visual_01_m.jpg') no-repeat center/cover;} */
	
	@keyframes introAniLogo {
		0% {
			mask-size: 34rem; 
			-webkit-mask-size: 34rem; 
		}
		100% {
			mask-size: 1300vw; 
			-webkit-mask-size: 1300vw; 
		}
	}
	.main-intro-wrap .intro-txt-con {width: 34rem;}
	.main-intro-wrap .intro-txt  {width: 34rem;}
	.main-intro-wrap .intro-txt-con .middle-txt {height: 12.5rem;}
	.main-intro-wrap .intro-txt .txt {font-size: 1.4rem;}
	.main-intro-wrap .intro-txt.top-txt .txt {text-align: right;}
	.main-intro-wrap .intro-txt.top-txt .txt .m-br {display: block;} 

	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	
	.main-visual-txt-box {padding-bottom: 5rem; padding-top: calc(var(--header-height) + 4.5rem); align-items: flex-start;}
	.main-visual-txt-box .main-visual-txt1 {font-size: 3rem;}
	.main-visual-txt-box .main-visual-logo {height: 10.5rem;}
	.main-visual-txt-box .main-visual-logo svg {height: 100%; width: auto;}
	
	.main-visual-inquiry-box {bottom: 3rem !important;}
	.main-visual-inquiry-box a {padding: 0; }
	.main-visual-inquiry-box a .txt-box {display: none;}
	.main-visual-inquiry-box a .icon-box {font-size: 2rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	.cm-btn-full .cm-fill {display: none !important;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Product) -------- */
@media all and ( max-width: 1280px ){
	.main-prd-list  {pointer-events: visible;}
	.main-prd-list > li .basic-con {width: 8rem;}
	.main-prd-list > li .inner-con {padding-left: 8rem;}
	.main-prd-list > li .inner-con .inner .tit-box .tit {font-size: 5.4rem;}
	.main-prd-list > li .inner-con .img-box {width: calc(100vw - 32rem);}
	.main-prd-list > li .inner-con .img-box span {max-width: 50rem;}
	
	/* active */
	.main-prd-list > li.active {flex: 0 1 calc(100% - 24rem);}
	.main-prd-list > li .inner-con .inner {padding: 5rem 0 5rem 12rem;}
}
@media all and ( max-width: 800px ){
	.main-con01 {height: 40rem; transition:var(--transition-custom);}
	.main-con01:has(.active){height:calc(100vh + 30rem);}
	.main-prd-list {flex-direction: column;}
	.main-prd-list > li {height: 10rem; flex: 0 1 10rem;}
	.main-prd-list > li.active {flex: 0 1 calc(100% - 30rem);}
	.main-prd-list > li .basic-con {width: 100%; height: 10rem; padding: 0 var(--area-padding); flex-direction: row; border-bottom: 1px solid rgba(255,255,255,0.1);}
	.main-prd-list > li .basic-con:before {display: none;}
	.main-prd-list > li .basic-con strong {writing-mode: lr; font-size: 2rem;}
	.main-prd-list > li .basic-con .icon-box img {height: 24px;}
	.main-prd-list > li .basic-con .icon-box img.arrow-icon {transform: rotate(90deg)}
	.main-prd-list > li .inner-con {width: 100%; padding-left: 0; opacity: 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
	.main-prd-list > li .inner-con .inner {width: 100%; height: auto; padding: 15rem var(--area-padding) 0;}
	.main-prd-list > li .inner-con .inner .tit-box .sub-tit {font-size: 1.4rem;}
	.main-prd-list > li .inner-con .inner .tit-box .tit {font-size: 4rem;}
	.main-prd-list > li .inner-con .img-box {width: 100%;}
	.main-prd-list > li .inner-con .img-box span {width: 100%;}
	.main-prd-tab-wrapper-style {  background-color: transparent; padding: 0; margin-top: 3rem;}
	
	.main-prd-list > li.active .inner-con {opacity: 1;}
}
@media all and ( max-width: 480px ){
	.main-prd-list > li .inner-con .img-box span {width: 100%; max-width:none}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 (Industries) -------- */
@media all and ( max-width: 1280px ){
	.main-industries-list {pointer-events: visible;}
	.main-con02-top {top: 10rem;}
	.main-industries-item .inner {padding-bottom: 10rem;}
	.main-industries-item .inner dl dd p strong {font-size: 1.4rem;}
}
@media all and ( max-width: 800px ){
	.main-con02-top {display: none;}
	.main-industries-bg-wrap {opacity: 1;}
	.main-industries-list {flex-direction: column;}
	.main-industries-item {height: 20%; width: 100%;}
	
	.main-industries-item .inner {padding: 0 var(--area-padding); align-items: center;}
	.main-industries-item .inner dl {width: 100%; display: flex; flex-direction:row-reverse; justify-content: space-between;}
	.main-industries-item .inner dl dt {width: 8.5rem; height: 8.5rem;}
	.main-industries-item .inner dl dd {margin-top: 0; width: calc(100% - 8.5rem);}
	.main-industries-item .inner dl dd p {height: 1.9em;}
	.main-industries-item .inner dl dd p strong {position: relative; left: 0;    transform: translateX(0); }
	
	.main-industries-item.active {flex: 0 1 calc(100% - 46rem);}
	.main-industries-item.active .inner {opacity: 0;}
	.main-industries-item.not-active {background: rgba(0,0,0,0.4);}
	
	.main-industries-item a {z-index: 2;width: 100%; height: 100%; opacity: 0; visibility: hidden; transition:all 0.8s; }
	.main-industries-item a .inner-m {display: block; position: relative; width: 100%; height: 100%;/* height: 0; */ text-align: center; padding:4rem 0; box-sizing: border-box; }
	.main-industries-item a .inner-m .tit {font-size: 1.6rem; font-weight: 700; color: var(--main-color); position: relative;}
	.main-industries-item a .inner-m .sub-tit {font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1.3;  letter-spacing: -0.02em; margin-top: 1.5rem;}
	/* .main-industries-item a .inner-m dl {position: absolute; left: 50%; bottom: 4rem; transform:translateX(-50%); z-index: 3;} 
	.main-industries-item a .inner-m dl dt {width: 10rem; height: 10rem; margin: 0 auto ;}
	.main-industries-item a .inner-m dl dt img {max-width: 100%;}
	.main-industries-item a .inner-m dl dd {font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.4;} */
	.main-industries-item.active a {visibility: visible; opacity: 1;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (Online Inquiry) -------- */
@media all and ( max-width: 800px ){
	.main-inquiry-con > .area {align-items: end; padding: 0 4rem;}
	.main-inquiry-con > .area .left-box {padding-bottom: 4rem;}
	.main-inquiry-con .main-inquiry-tit-box .tit {font-size: 3rem;}
	.main-inquiry-con .main-inquiry-tit-box .txt {font-size: 1.6rem;}
	.main-inquiry-con > .area .right-box {display: none;}
	.main-inquiry-btn-m {display: block;}
	.main-inquiry-btn-wrap .main-inquiry-btn {height: 5.6rem; width: 100%;margin: 1.2rem 0 0 0; font-size: 1.4rem;}
	.main-inquiry-btn-wrap .main-inquiry-btn.btn-style02 {border:2px solid rgba(0,0,0,0.4); color: rgba(0,0,0,0.6);}
	.main-inquiry-btn-wrap .main-inquiry-btn.border-gradient::before {display: none;}
}