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

#wrap.main-wrap{overflow: visible;}
.ms-preloader { width: 100%; height: 100%;position: fixed;z-index: 9999999; top: 0;left: 0; opacity: 1; visibility: visible; background-color: #000;}

/* ******************  메인 인트로 ********************** */
#mainIntroCover{position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 10000; overflow: hidden;}

.main-intro-top-cover {position: absolute; width: 100%; height: 100%;}
.main-intro-top-cover:before,
.main-intro-top-cover:after{position: absolute; top: 0; left: 50%; width: 100%; height: 100%; background-color: #fff; content: ''; opacity: 1; transition: opacity 0.3s, visibility 0.3s; transition-delay: 1s;}
.main-intro-top-cover:before{margin-left: calc(-1 * -25%);}
.main-intro-top-cover:after{margin-left: calc(-1 * (125% + 100px));}
.main-intro-bg-fill{position: absolute; inset: 0; background: #fff; z-index: 1;}
.main-intro-bg {position: absolute; top: 0; left: 0; /* top: 50%; left: 50%; */ width: 100%; height: 100%; /* transform: translate(-50%, -50%); */ z-index: 2; background-color: #fff; -webkit-mask-image: url('../images/common/cmLogoMask-alpha.svg'); mask-image: url('../images/common/cmLogoMask-alpha.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* -webkit-mask-size: contain; mask-size: contain; */ -webkit-mask-position: calc(50% - 100px) 50%; mask-position: calc(50% - 100px) 50%; -webkit-mask-size: 100% auto; mask-size: 100% auto; transition: -webkit-mask-position 1.2s ease, mask-position 1.2s ease; will-change: -webkit-mask-size, mask-size, -webkit-mask-position, mask-position;}

.main-sound-effect {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); z-index: 11; /* width: 625px; */ width: 100%; display: block; pointer-events: none; /* opacity: 0; transition: opacity 0.3s, transform 0.8s; */}
.main-sound-effect img{max-width: 100%;}
.main-sound-effect video {position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-48%,-50%);}

.index-active .main-sound-effect{transform: translate(-50%, -50%) scale(1); /* opacity: 1; transition-delay: 0.2s; */}
.index-active .main-intro-bg{-webkit-mask-position: 50% 50%; mask-position: 50% 50%;}
.index-active .main-intro-top-cover:before,
.index-active .main-intro-top-cover:after{opacity: 0; visibility: hidden;}

.index-active2 .main-sound-effect img,
.index-active2 .main-sound-effect video{animation:introAniOpacity ease-in-out both 0.5s;}
.index-active2 .main-intro-bg{animation: introMaskZoomPC 1.2s linear 0.4s both;}
.index-active2 #mainIntroCover{animation:introAniBgOpacity linear both 0.7s; animation-delay: 0.8s;}

@keyframes introAniOpacity {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@keyframes introMaskZoomPC{
  0%{
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    opacity: 1;
  }
  70%{
    -webkit-mask-size: 1600% auto; /* ≈ scale(16) */
    mask-size: 1600% auto;
    opacity: 1;
  }
  90%{
    -webkit-mask-size: 2000% auto; /* ≈ scale(20) */
    mask-size: 2000% auto;
    opacity: 0.1;
  }
  100%{
    -webkit-mask-size: 2600% auto; /* ≈ scale(26) */
    mask-size: 2600% auto;
    opacity: 0;
  }
}

@keyframes introMaskZoomM{
  0%{
    -webkit-mask-size: 200% auto;
    mask-size: 200% auto;
    opacity: 1;
  }
  70%{
    -webkit-mask-size: 1000% auto; /* ≈ scale(10) */
    mask-size: 1000% auto;
    opacity: 1;
  }
  90%{
    -webkit-mask-size: 1400% auto; /* ≈ scale(14) */
    mask-size: 1400% auto;
    opacity: 0.1;
  }
  100%{
    -webkit-mask-size: 2000% auto; /* ≈ scale(20) */
    mask-size: 2000% auto;
    opacity: 0;
  }
}

@keyframes introAniBgOpacity {
	0% {
		opacity:1;
	}
	20% {
		opacity:1;
	}
	70% {
		opacity:0.1;
	}
	100% {
		opacity:0;
		display: none;
	}
}


/* -------- 메인 :: index-active -------- */
.main-visual-custom-box,
.main-visual-txt-inner{opacity:0; transform: translateX(-200px);}
.index-active3 .main-visual-custom-box,
.index-active3 .main-visual-txt-inner{
	opacity:1; transform: translateX(0); transition:var(--transition-custom2);
}
.main-wrap.index-active3 .main-scroll-icon{opacity:1; transform: translateX(0); transition:var(--transition-custom2);}

@media all and ( min-width: 1281px ){
	.main-wrap #headerInnerWrap{/* transform:translateY(-100%); */margin-top: calc(-1 * (var(--header-top) + 
	var(--header-height))); transition:var(--transition-custom2);}
	.main-wrap.index-active3 #headerInnerWrap{margin-top: 0;/* transform:translateY(0%); */}
}
@media all and ( max-width: 1280px ){
	.main-wrap #headerInner{filter:blur(20px); transition:var(--transition-custom2);}
	.main-wrap .nav-open-btn{filter:blur(20px); transition: top 0.4s ease-in-out, filter 0.8s ease-in-out;}
	.main-wrap.index-active3 #headerInner,
	.main-wrap.index-active3 .nav-open-btn{filter:blur(0px);}
}

@media all and ( max-width: 1920px ) and ( min-width: 801px ){
	.main-intro-top-cover{left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1920px; height: 1080px;}
}
@media all and ( max-width: 800px ){
	.main-intro-top-cover{position: relative; width: 100%; top: 0; left: 0; transform:none;}
	.main-intro-top-cover:before,
	.main-intro-top-cover:after{top: 50%;left: 0;width: 100%;height: 30%; height: 100vw;  transition-delay: 1.8s;}
	.main-intro-top-cover:before{margin-top: calc(-1 * -25%); margin-top: calc(-1 * 150%); margin-left: 0;}
	.main-intro-top-cover:after{margin-top: calc(-1 * 50%); margin-top: 50%; margin-left: 0;}
	.main-intro-bg{-webkit-mask-size: 200% auto; mask-size: 200% auto;}
	.index-active2 .main-intro-bg {animation: introMaskZoomM 1.2s linear 0.4s both;}
	.main-sound-effect video {width: 1080px; transform:translate(-50%,-50%);}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{width:100%; height:100vh; position:relative; background-color:#000; overflow:hidden;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con.slick-slide[aria-hidden="true"] * {
  pointer-events: none;
}
.main-visual-con{z-index:1;}
.main-visual-item{position:relative;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.2);
	transition: all 1.5s cubic-bezier(0.7, 0, 0.3, 1);
	opacity:0.8;filter:Alpha(opacity=80);
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 동영상(유툽) */
.main-visual-item .background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-item .background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.main-visual-item .background-video.start iframe{opacity:1;filter:Alpha(opacity=100);}

/* 메인 비주얼 :: 동영상(다이렉트영상) */
.main-visual-item .background-video video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; height:100%; display: block;
	z-index:2;
}
.main-visual-txt-con.blank{}
.main-visual-txt-box{
	display:flex;
	align-items:flex-end;
	padding-bottom: 7.65% !important;
	height:100%;
	box-sizing: border-box;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; transform: translateX(-200px); transition: var(--transition-custom2);
}
.main-visual-txt-box .main-visual-txt1{margin-top: 1.5rem; font-size:9rem; line-height: 1.22; font-weight:600; color:#fff;}
.main-visual-txt-box .main-visual-txt1 b{font-weight: inherit; color: var(--main-color);}
.main-visual-txt-box .main-visual-txt2{margin-top: 2.5rem; font-size:2rem; line-height: 1.3; letter-spacing:-0.05em; font-weight: 500; color:#fff;}

/* 메인 비주얼 :: custom-box */
.main-visual-custom-box{position: absolute; left:0; bottom: 42.35%; margin-bottom: 5rem; width:100%; z-index:9;}
/* 메인 비주얼 :: Dots */
.main-visual-dots{width:100%;}
.main-visual-dots ul{display: flex;}
.main-visual-dots ul li + li{margin-left:1rem;}
.main-visual-dots ul li span{width:12px !important; height: auto !important; background: none !important; opacity: 1 !important; display: block !important; position: relative; cursor:pointer;}
.main-visual-dots ul li span button{position:relative; cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:12px; height:12px; font-size:0; border-radius:50%; box-sizing:border-box;}
.main-visual-dots ul li span:after{position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background-color:#fff; content:""; border-radius:50%; opacity: 1; transition:var(--transition-custom);}
.main-visual-dots ul li span button svg{position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(0) rotate(-90deg); transition:var(--transition-custom);}
.main-visual-dots ul li span button svg circle{fill:transparent; stroke:#fff; stroke-width:2.5px; stroke-linecap:round; stroke-dasharray: 25.5; stroke-dashoffset: 25.5; transition: stroke-dashoffset linear;}

/* 메인 비주얼 :: active효과 */
.active-item.main-visual-item .main-visual-img{transform: scale(1.0);}
.active-item .main-visual-txt1,
.active-item .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s;
}
.main-visual-dots ul li.slick-active button svg{transform:scale(1) rotate(-90deg);}
.main-visual-dots ul li.slick-active span:after{opacity: 0; transition-duration:0s;}


@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(-200px); 
		transform: translateX(-200px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}

/* 메인 인트로 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; text-align:center; z-index:9; bottom: 15.3%; left:50%; margin-left: 750px; opacity:0; transform: translateX(200px);}
.main-scroll-icon .txt {margin-bottom: 20px; margin-left: 3px; font-size: 15px; letter-spacing: 0.01em; font-weight: 600; color: #fff; text-wrap-mode: nowrap; writing-mode: vertical-rl;}
.main-scroll-icon .bar{display: block; position: relative; width:3px; height:9rem; overflow:hidden; margin:auto; background-color: rgba(255,255,255,0.1);}
.main-scroll-icon .bar em{position: absolute; display: block; width:100%; height:100%; animation: upDown 1.5s ease-in-out infinite; background: transparent linear-gradient(180deg, #38383800 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; opacity:0.68;}

@keyframes upDown {
	0% {
		transform:  translateY(-100%);
	}
	100% {
		transform:  translateY(100%);
	}
}
 @keyframes draw-circle {
	from {
		stroke-dashoffset: 25.5;
	}
	to {
		stroke-dashoffset: 0
	}
}
@keyframes draw-circle-ios {
	from {
		stroke-dashoffset: 25.5;
	}
	to {
		stroke-dashoffset: 0
	}
}
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0);
	}
}

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	.main-visual-txt-box{padding-bottom: 11rem !important;}
	.main-visual-custom-box{bottom: 6rem; margin-bottom: 0;}
	.main-visual-txt-box .main-visual-txt1{font-size:7rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:2rem;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{/* padding-bottom: 7.65% !important; */ padding-bottom: 11rem !important;}
	.main-visual-txt-box .main-visual-txt1{margin-top: 1.5rem; font-size:5rem; line-height: 1.22;}
	.main-visual-txt-box .main-visual-txt2{margin-top: 2.5rem; font-size:2rem; line-height: 1.5;}

	/* 메인 인트로 :: 스크롤아이콘 */
	.main-scroll-icon{position:absolute; text-align:center; z-index:9; bottom: 15.3%; left:50%; margin-left: 750px; opacity:0; transform: translateX(50px);}
	.main-scroll-icon .txt {margin-bottom: 20px; margin-left: 3px; font-size: 15px; letter-spacing: 0.01em; font-weight: 600; color: #fff; text-wrap-mode: nowrap; writing-mode: vertical-rl;}
	.main-scroll-icon .bar{display: block; position: relative; width:3px; height:9rem; overflow:hidden; margin:auto; background-color: rgba(255,255,255,0.1);}
	.main-scroll-icon .bar em{position: absolute; display: block; width:100%; height:100%; animation: upDown 1.5s ease-in-out infinite; background: transparent linear-gradient(180deg, #38383800 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; opacity:0.68;}
}


/* ******************  메인 컨텐츠 ********************** */
#mainContent{border-bottom:1px solid rgba(255,255,255,0.15); transition:var(--transition-custom2); transition-property: background-color;}
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box.ta-center{text-align: center;}
.main-tit-box .main-tit{}
.main-tit-box .main-tit strong{font-size: 9rem; font-weight: 600; color: #000; display: inline-block; position: relative;}
.main-tit-box .main-tit strong:after{position: absolute; right: -3rem; top: 0rem; width: 1.5rem; height: 1.5rem; border-radius: 100%; background-color: var(--main-color); content: '';}
.main-tit-box .main-sub-tit{margin-top: 3.5rem; font-size:1.8rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #000;}
.main-tit-box.fc-black .main-tit strong,
.main-tit-box.fc-black .main-sub-tit{color: #000;}
.main-tit-box .main-tit,
.main-tit-box .main-sub-tit,
.main-tit-box .main-install-tab-wrapper{
	opacity:0;
	transform:translateX(-50px);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
.main-tit-box.ta-center .main-tit,
.main-tit-box.ta-center .main-sub-tit{
	transform:translateY(50px);
}
 /* transition일때 */ 
.animated.main-tit-box .main-tit,
.animated.main-tit-box .main-sub-tit,
.animated.main-tit-box .main-install-tab-wrapper{
	opacity:1.0;
	transform:translateX(0);
}
.animated.main-tit-box.ta-center .main-tit,
.animated.main-tit-box.ta-center .main-sub-tit{
	transform:translateY(0);
}

#mainContent > article:not(#mainBrandCon):not(#mainInstallCon):not(#mainOnlineCon){overflow:hidden;}

/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1280px ){
	.main-tit-box .main-tit strong{font-size: 7.2rem;}
	.main-tit-box .main-tit strong:after{right: -2.4rem; top: 0rem; width: 1.2rem; height: 1.2rem;}
}
@media all and ( max-width: 800px ){
	.main-tit-box{text-align: center;}
	.main-tit-box .main-tit strong{font-size: 6rem;}
	.main-tit-box .main-tit strong:after{right: -2.4rem; top: 0rem; width: 1.2rem; height: 1.2rem;}
	.main-tit-box .main-sub-tit{margin-top: 2.5rem; font-size:1.8rem; line-height: 1.3;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(Brand) -------- */
#mainBrandCon{/* padding: 26.5rem 0 0;  */background-color: #f5f5f5;}
#mainBrandCon .main-tit-box .main-sub-tit {color: rgba(0,0,0,0.5);}

.main-brand-con{display: flex; position: relative; align-items: stretch;}

.main-brand-left {width: 40%; height: 100vh; position: sticky; top: 0; padding-top: 28rem; box-sizing: border-box;}
.main-brand-con.animated .main-tit-box .main-tit,
.main-brand-con.animated .main-tit-box .main-sub-tit{opacity:1.0; transform:translateX(0);}
.category-image-tab {margin-top: 8rem; width: 100%; height: 11rem; position: relative; overflow: hidden;}
.category-image-tab:before{position: absolute; top: 0; left: 0; width: 3px; height: 100%; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#424444+0,424444+100&0.1+0,0.25+5,1+30,1+50,1+70,0.25+95,0.1+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.24) 50%,rgba(0,0,0,0.24) 60%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.category-image-inner {height: 100%; /* transition: transform 0.3s ease; */ transition: var(--transition-custom); transition-property: transform;}
.category-image-tab .category-image{position: relative; padding-left: 3rem; width: 100%; height: 33.33%; display: flex; align-items: center; box-sizing: border-box;}
.category-image-tab .category-image:before{position: absolute; top: 50%; margin-top: -7.5px; left: 0; width: 3px; height: 15px; background-color: #000; content: ''; opacity: 0; z-index: 1; transition: var(--transition-custom); transition-property: opacity;}
.category-image-tab .category-image .txt{font-size: 2rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.02em; color: #aaa; transition: var(--transition-custom); transition-property: color;}
.category-image-tab .category-image.active .txt {color: #000;}
.category-image-tab .category-image.active:before{opacity: 1;}

.main-brand-right {padding: 25vh 0; width: 60%; max-width: 84rem; display: flex; flex-direction: column;}
.main-brand-right .slider {display: flex; flex-direction: column; align-items: center;}
.main-brand-right .slide {padding: 1rem 0; width: 100%; box-sizing: border-box; /* min-height: 100vh; */}
/* .main-brand-right .slide + .silde{margin-top: 1.5rem;} */
.main-brand-right .slide .box{position: relative; width: 100%; height: 0; padding-top: 52.38%; background-color: #000; display: block; /* filter: blur(11.8px); */ opacity: 0.4; /* transition: none; */ will-change: transform, filter, opacity;}
.main-brand-right .slide .box:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,0+87,0.14+93,1+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.14) 60%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ opacity: 0; transition: var(--transition-custom); transition-property: opacity;}
.main-brand-right .slide .box .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* border-radius: 2rem; */ overflow: hidden;}
.main-brand-right .slide .box .logo-img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 80%; max-height: 80%;}
.main-brand-right .slide .box p{position: absolute; left: 4.76%; bottom: 7.95%; right: 4.76%; font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: #fff;}
.main-brand-right .slide .box a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 2;}

.main-brand-right .slide.active + .slide .box:after{opacity: 1;}

.main-brand-m-con{display: none;}

@media all and (min-width:801px){
	.main-brand-right .slide .box{}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainBrandCon{padding: 10rem 0 10rem;/* padding: 26.5rem 0 0;  */ /* background-color: #0b0d0d; */}

	.main-brand-con{display: flex; flex-wrap:wrap; position: relative; align-items: stretch;}

	.main-brand-left {/* width: calc(100% + var(--area-padding)); margin-left: calc(-1*var(--area-padding)); height: calc(var(--header-height) + 32rem); padding: 0 var(--area-padding); top: 0; padding-top: calc(var(--header-height) + 3rem); */ width: 100%; height: auto; padding-top: 0;}
	.category-image-tab {margin-top: 5rem; width: 100%; height: 11rem; position: relative; overflow: hidden; display: none;}
	.category-image-tab:before{width: 3px;}
	.category-image-tab .category-image{padding-left: 3rem; width: 100%; height: 33.33%;}
	.category-image-tab .category-image:before{margin-top: -7.5px; left: 0; width: 3px; height: 15px;}
	.category-image-tab .category-image .txt{font-size: 2rem; line-height: 1.5;}

	.main-brand-right {padding: 5rem 0; width: 100%; max-width: none; display: none;}
	.main-brand-right .slide {padding: 5.6rem 0;}
	.main-brand-right .slide + .silde{margin-top: 1.5rem;}
	.main-brand-right .slide .box p{left: 4.76%; bottom: 7.95%; right: 4.76%; font-size: 2rem; line-height: 1.3;}

	.main-brand-m-con{margin-top: 4rem; display: block; width: 100%;}
	.main-brand-wrapper{padding-bottom: 13rem !important; position: relative;}
	.main-brand-list{}
	.main-brand-item{}
	.main-brand-item a{position: relative; width: 100%; height: 0; padding-top: 52.38%; background-color: #000; display: block; transition: none;}
	.main-brand-item a .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* border-radius: 2rem; */ overflow: hidden;}
	.main-brand-item a .logo-img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 50%; max-height: 50%;}
	.main-brand-item a p{position: absolute; left: 4.76%; bottom: 7.95%; right: 4.76%; font-size: 2rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: #fff;}

	.main-brand-control.main-control-css .swiper-pagination{background-color: rgba(0,0,0,0.1);}
	.main-brand-control.main-control-css .swiper-pagination .swiper-pagination-progressbar-fill {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,0+87,0.14+93,1+100 */
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.14) 20%,rgba(0,0,0,0.34) 40%,rgba(0,0,0,0.64) 60%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
	.main-brand-control.main-control-css .swiper-button-prev,
	.main-brand-control.main-control-css .swiper-button-next{color: #000;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(New Product) -------- */
#mainProductCon{padding: 18rem 0 22rem;}

.main-product-con{margin-top: 5.5rem;}
.main-product-wrapper.swiper-container {padding-bottom: 17rem; overflow: visible;}
.main-product-list{display: flex;}
.main-product-item {width: calc(25% - 25px);}
.main-product-item a {position: relative; display: block; width: 100%;}
.main-product-item a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%; background-color: #f2f2f2; overflow: hidden; transition: var(--transition-custom); transition-property: box-shadow;}
.main-product-item a .img-box:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0.3rem solid var(--main-color); opacity: 0; content: ''; box-sizing: border-box; transition: var(--transition-custom); transition-property: opacity;}
.main-product-item a .img-box .img {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0;}
.main-product-item a .img-box .img .img-cover {right: 0; bottom: 0; margin: auto; width: auto; height: auto; max-width: 80%; max-height: 100%; mix-blend-mode: darken;}
.main-product-item a .txt-box {margin-top: 3.5rem;}
.main-product-item a .txt-box .tit {font-size: 3rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-product-item a .txt-box .txt {margin-top: 1rem; font-size: 1.6rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: #888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.main-product-item a:hover .img-box{box-shadow: 2rem 2rem 3rem -1rem rgba(0,0,0,0.15);}
.main-product-item a:hover .img-box:after{opacity: 1;}

.main-control-css{position: absolute; bottom: calc(7.5rem + 3px); left: 0; width: 100%;}
.main-control-css .swiper-pagination{width: 100%; height: 3px; background-color: #e5e5e5;}
.main-control-css .swiper-pagination .swiper-pagination-progressbar-fill {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,0+87,0.14+93,1+100 */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.14) 20%,rgba(0,0,0,0.34) 40%,rgba(0,0,0,0.64) 60%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
.main-control-css .swiper-button-prev,
.main-control-css .swiper-button-next{top: 2.5rem; margin-top: 0; width: 6rem !important; height: 5rem !important; font-size: 1.6rem; letter-spacing: -0.02em; font-weight: 500; color: #000; display: flex; align-items: center; justify-content: space-between;}
.main-control-css .swiper-button-prev{left: 0;}
.main-control-css .swiper-button-next{right: 0;}
.main-control-css .swiper-button-prev i,
.main-control-css .swiper-button-next i{font-size: 2.4rem;}
.main-control-css .swiper-button-prev:after,
.main-control-css .swiper-button-next:after{display: none;}

@media all and (min-width:801px){
	.main-product-wrapper.swiper-container .swiper-wrapper{transition-timing-function: linear;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainProductCon{padding: 10rem 0; background-color: #fff;}

	.main-product-con{margin-top: 5.5rem;}
	.main-product-wrapper.swiper-container {padding-bottom: 13rem;}
	.main-product-item {width: calc(50% - 20px);}
	.main-product-item a .txt-box {margin-top: 3.5rem;}
	.main-product-item a .txt-box .tit {font-size: 3rem; line-height: 1.3;}
	.main-product-item a .txt-box .txt {margin-top: 1rem; font-size: 1.6rem; line-height: 1.3;}

	.main-control-css{bottom: calc(7.5rem + 3px); left: 0; width: 100%;}
	.main-control-css .swiper-pagination{height: 3px;}
	.main-control-css .swiper-button-prev,
	.main-control-css .swiper-button-next{top: 2.5rem; margin-top: 0; width: 6rem !important; height: 5rem !important; font-size: 1.6rem;}
	.main-control-css .swiper-button-prev{left: 0;}
	.main-control-css .swiper-button-next{right: 0;}
	.main-control-css .swiper-button-prev i,
	.main-control-css .swiper-button-next i{font-size: 2.4rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(PR Center) -------- */
#mainPrCon{padding: 18rem 0; background-color: #f5f5f5; /* background-color: #0b0d0d; */ transition:var(--transition-custom2); transition-property: background-color;}

.main-pr-con{margin-top: 5.5rem; position: relative;}

.main-pr-drop-open-btn{display: none;}

.main-pr-container{}
.main-pr-wrapper.swiper-container {padding-bottom: 17rem; /* overflow: visible; */}
.main-pr-list{display: flex;}
.main-pr-item {width: calc(33.33% - 40px); overflow: hidden;}
.main-pr-item a {position: relative; display: block; width: 100%;}
.main-pr-item a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%; background-color: #f2f2f2; overflow: hidden; transition: var(--transition-custom); transition-property: box-shadow;}
.main-pr-item a .img-box:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0.3rem solid var(--main-color); opacity: 0; content: ''; box-sizing: border-box; transition: var(--transition-custom); transition-property: opacity;}
.main-pr-item a .img-box .img {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0;}
.main-pr-item a .img-box .img img {object-fit: cover;}
.main-pr-item a .txt-box {margin-top: 3.5rem;}
.main-pr-item a .txt-box .tit {font-size: 2.4rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-pr-item a .txt-box .date {margin-top: 2rem; font-size: 1.6rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: #888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-pr-item a .txt-box .date i{position: relative; top: 0.2rem; font-size: 1.8rem; margin-right: 0.5rem;}

.main-pr-item a:hover .img-box{box-shadow: 2rem 2rem 3rem -1rem rgba(0,0,0,0.15);}
.main-pr-item a:hover .img-box:after{opacity: 1;}

@media all and ( min-width: 801px ){  
	.main-pr-wrapper .main-pr-item a{position: relative; transform:translateY(100%); transition: all 1.0s ease-in-out;}
	.main-pr-wrapper.animated .main-pr-item a{transform:translateY(0);opacity:1;}

	.main-pr-wrapper.animated .main-pr-item.swiper-slide-active a{transition-delay:0.1s;}
	.main-pr-wrapper.animated .main-pr-item.swiper-slide-active + .main-pr-item a{transition-delay:0.3s;}
	.main-pr-wrapper.animated .main-pr-item.swiper-slide-active + .main-pr-item + .main-pr-item a{transition-delay:0.5s;}
}
@media all and (min-width:801px){
	.main-pr-tab-wrapper-style{position: absolute; top: -12rem; right: 0;}
	.main-pr-tab-list {width: 36rem; height: 6.5rem; border-radius: 6.5rem; background-color: #fff; display: flex !important; justify-content: center;}
	.main-pr-tab-list li {width: 50%; height: 100%;}
	.main-pr-tab-list li a {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 6.5rem; transition: all 0.3s; box-sizing: border-box;}
	.main-pr-tab-list li a em {font-size: 1.8rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: #000; transition: all 0.3s;}
	.main-pr-tab-list li.selected a {background: var(--main-color);}
	.main-pr-tab-list li.selected a em {color: #fff;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainPrCon{padding: 10rem 0; background-color: #f5f5f5 !important;}

	.main-pr-con{margin-top: 5.5rem; position: relative;}

	.main-pr-drop-menu{position:relative; z-index: 11;}
	.main-pr-drop-open-btn{display:block; position:relative; padding:0 5rem 0 3rem; width: 100%; height: 6.5rem; line-height:6.5rem; font-size:1.8rem; background-color:var(--main-color); box-sizing:border-box; border-radius: 3.25rem;  transition: border-radius 0.4s 0.4s;}
	.main-pr-drop-open-btn span{font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color:#fff;}
	.main-pr-drop-open-btn .arrow{color:#fff; position:absolute; top:50%; right:2.5rem; margin-top:-1rem; font-size: 2rem; color: #fff;}
	.main-pr-drop-menu.open .main-pr-drop-open-btn{border-radius: 3.25rem 3.25rem 0 0; transition: border-radius 0s 0s;}
	.main-pr-drop-menu.open .main-pr-drop-open-btn .arrow{transform:rotate(180deg)}
	.main-pr-drop-menu ul{display:none; margin:0; height:auto; position:absolute; top:calc(100% - 1px); left:0px; right:0px; background-color:var(--main-color); z-index:11; box-sizing:border-box; border-radius: 0 0 3.25rem 3.25rem;}
	.main-pr-drop-menu ul li{position:static; display:block; float:none; width:auto; background-color:transparent}
	.main-pr-drop-menu ul li:first-child{padding-top: 10px;}
	.main-pr-drop-menu ul li:last-child{padding-bottom: 10px;}
	.main-pr-drop-menu ul li a{display:block; width:auto; height:auto; padding:10px 3rem; border:0;}
	.main-pr-drop-menu ul li a em{font-size:1.7rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 400; color: rgba(255,255,255,0.7);}
	.main-pr-drop-menu ul li.selected{background-color:transparent;}
	.main-pr-drop-menu ul li.selected a em{color:#fff; font-weight:700;}

	.main-pr-container{margin-top: 4rem;}
	.main-pr-wrapper.swiper-container {padding-bottom: 13rem;}
	.main-pr-item {width: calc(50% - 20px);}
	.main-pr-item a .txt-box {margin-top: 2.5rem;}
	.main-pr-item a .txt-box .tit {height: 2.6em; font-size: 2.4rem; line-height: 1.3; white-space: normal; text-overflow: initial; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.main-pr-item a .txt-box .date {margin-top: 2rem; font-size: 1.6rem; line-height: 1.3;}
	.main-pr-item a .txt-box .date i{top: 0.2rem; font-size: 1.8rem; margin-right: 0.5rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(Videos) -------- */
#mainVideoCon{padding: 18rem 0;}

.main-video-con{margin-top: 5.5rem; position: relative;}
.main-video-container{}
.main-video-wrapper.swiper-container {padding-bottom: 17rem; /* overflow: visible; */}
.main-video-list{display: flex;}
.main-video-item {width: calc(25% - 25px); overflow: hidden;}
.main-video-item a {position: relative; display: block; width: 100%;}
.main-video-item a .img-box {position: relative; width: 100%; height: 0; padding-top: 139.39%; background-color: #f2f2f2; overflow: hidden; transition: var(--transition-custom); transition-property: box-shadow;}
.main-video-item a .img-box:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0.3rem solid var(--main-color); opacity: 0; content: ''; box-sizing: border-box; transition: var(--transition-custom); transition-property: opacity;}
.main-video-item a .img-box .img {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0;}
.main-video-item a .img-box .img:after{position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0b0d0d+0,0b0d0d+100&0+0,1+100 */
background: linear-gradient(to bottom,  rgba(11,13,13,0) 0%, rgba(11,13,13,0.3) 60%, rgba(11,13,13,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.main-video-item a .img-box .top-group{position: absolute; top: 4.34%; left: 9.09%; right: 9.09%; display: flex; align-items: center; justify-content: space-between;}
.main-video-item a .img-box .top-group .category,
.main-video-item a .img-box .top-group .btn{height: 4rem; font-size: 1.5rem; font-weight: 600; color: #000; background-color: rgba(255,255,255,0.75); border-radius: 4rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-family2);}
.main-video-item a .img-box .top-group .category{width: 8rem;}
.main-video-item a .img-box .top-group .btn{width: 4rem; font-size: 2rem;}
.main-video-item a .img-box .tit {position: absolute; bottom: 4.34%; left: 9.09%; right: 9.09%; font-size: 2rem; line-height: 1.6; font-weight: 700; letter-spacing: -0.02em; color: #fff; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.main-video-item a:hover .img-box{box-shadow: 2rem 2rem 3rem -1rem rgba(0,0,0,0.15);}
.main-video-item a:hover .img-box:after{opacity: 1;}

/* 영상 팝업 */
.popup-main-video-con{}
.popup-main-video-box,
.popup-main-iframe-box{position:relative; width:100%; height:0; padding-bottom: 56.25%;}
.popup-main-video-box video,
.popup-main-iframe-box iframe{position:absolute; top:0px; left:0px; width: 100%; height: 100%;}

@media all and ( min-width: 801px ){  
	#wrap:not(.sub-wrap) .main-video-wrapper .main-video-item a{position: relative; transform:translateY(100%); transition: all 1.0s ease-in-out;}
	#wrap:not(.sub-wrap) .main-video-wrapper.animated .main-video-item a{transform:translateY(0);opacity:1;}

	#wrap:not(.sub-wrap) .main-video-wrapper.animated .main-video-item.swiper-slide-active a{transition-delay:0.1s;}
	#wrap:not(.sub-wrap) .main-video-wrapper.animated .main-video-item.swiper-slide-active + .main-video-item a{transition-delay:0.3s;}
	#wrap:not(.sub-wrap) .main-video-wrapper.animated .main-video-item.swiper-slide-active + .main-video-item + .main-video-item a{transition-delay:0.5s;}
	#wrap:not(.sub-wrap) .main-video-wrapper.animated .main-video-item.swiper-slide-active + .main-video-item + .main-video-item + .main-video-item a{transition-delay:0.8s;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainVideoCon{padding: 10rem 0; background-color: #fff;}

	.main-video-con{margin-top: 5.5rem;}
	.main-video-wrapper.swiper-container {padding-bottom: 13rem;}
	.main-video-item {width: calc(50% - 20px);}
	.main-video-item a .img-box .img:after{height: 40%;}
	.main-video-item a .img-box .top-group{top: 5.34%; left: 9.09%; right: 9.09%;}
	.main-video-item a .img-box .top-group .category,
	.main-video-item a .img-box .top-group .btn{height: 3rem; font-size: 1.2rem;}
	.main-video-item a .img-box .top-group .category{width: 8rem;}
	.main-video-item a .img-box .top-group .btn{width: 3rem; font-size: 1.4rem;}
	.main-video-item a .img-box .tit {bottom: 5.34%; left: 9.09%; right: 9.09%; font-size: 1.4rem; line-height: 1.6;}

	/* 영상 팝업 */
	/* .popup-main-video-con {padding-top: 6rem;} */
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Installation) -------- */
#mainInstallCon{position: relative; min-height: 100vh; background-color: #fff; box-sizing: border-box;/* url("../images/main/main_install_bg.png") left top no-repeat; background-size: cover;  */transition:var(--transition-custom2); transition-property: background-color;}
#mainInstallCon:before{position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: url("../images/main/main_install_bg_lg.png") left top no-repeat; background-size: auto; opacity: 0; transition:var(--transition-custom); transition-property: opacity;}
.bg-change#mainInstallCon:before{opacity: 1;}

.main-install-con{position: relative; width: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}

.main-install-left{width: 40%; max-width: calc(100% - 84rem); height: 100vh; position: sticky !important; top: 0; padding-top: 18rem; box-sizing: border-box; position:relative; z-index: 11;}

.main-install-tab-wrapper{margin-top: 5.5rem; width: 100%; max-width: 22rem;}
.main-install-drop-menu{position:relative;}
.main-install-drop-open-btn{display:block; position:relative; padding:0 5rem 0 3rem; width: 100%; height: 6.5rem; line-height:6.5rem; font-size:15px; background-color:var(--main-color); box-sizing:border-box; border-radius: 3.25rem;  transition: border-radius 0.4s 0.4s;}
.main-install-drop-open-btn span{font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color:#fff;}
.main-install-drop-open-btn .arrow{color:#fff; position:absolute; top:50%; right:2.5rem; margin-top:-1rem; font-size: 2rem; color: #fff;}
.main-install-drop-menu.open .main-install-drop-open-btn{border-radius: 3.25rem 3.25rem 0 0; transition: border-radius 0s 0s;}
.main-install-drop-menu.open .main-install-drop-open-btn .arrow{transform:rotate(180deg)}
.main-install-drop-menu ul{display:none; margin:0; height:auto; position:absolute; top:calc(100% - 1px); left:0px; right:0px; background-color:var(--main-color); z-index:11; box-sizing:border-box; border-radius: 0 0 3.25rem 3.25rem;}
.main-install-drop-menu ul li{position:static; display:block; float:none; width:auto; background-color:transparent}
.main-install-drop-menu ul li:first-child{padding-top: 10px;}
.main-install-drop-menu ul li:last-child{padding-bottom: 10px;}
.main-install-drop-menu ul li a{display:block; width:auto; height:auto; padding:10px 3rem; border:0;}
.main-install-drop-menu ul li a em{font-size:1.7rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 400; color: rgba(255,255,255,0.7);}
.main-install-drop-menu ul li.selected{background-color:transparent;}
.main-install-drop-menu ul li.selected a em{color:#fff; font-weight:700;}

.main-install-right{padding: 18rem 0; width: 60%; max-width: 84rem;}
.main-install-wrapper{}
.main-install-list{display: flex;}
.main-install-item{position: relative;}
.main-install-inner{padding: 4rem 3rem 5rem; height: 100%; background-color: rgba(255,255,255,0.05); display: block; box-sizing: border-box;}
.main-install-img{position: relative; width: 100%; height: 0; padding-top: 73.52%;}
.main-install-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.main-install-txt{padding-top: 35px;}
.main-install-txt .category{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: var(--main-color);}
.main-install-txt .tit{margin-top: 1.5rem; font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; color: #fff;}
.main-install-txt .info{margin-top: 2rem; display: flex; flex-wrap:wrap;}
.main-install-txt .info + .info{margin-top: 1rem;}
.main-install-txt .info dt, .main-install-txt .info dd{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500;}
.main-install-txt .info dt{padding-left: 2.4rem; padding-right: 1rem; width: 10rem; color: #fff; box-sizing: border-box; position: relative;}
.main-install-txt .info dt i{position: absolute; top: 0.1rem; left: 0;}
.main-install-txt .info dd{width: calc(100% - 10rem); color: rgba(255,255,255,0.5);}

.main-install-control{visibility: hidden; opacity: 0;}

@media all and (min-width:801px){
	.main-install-wrapper{width: 100%; overflow: visible !important;}
	.main-install-list{margin: -2rem !important; width: auto !important; height: auto !important; flex-wrap:wrap; transform: none !important;}
	.main-install-item{margin: 2rem !important; width: calc(50% - 4rem) !important; height: auto !important; transform: translateY(0); will-change: transform, opacity;}
	.main-install-item:nth-child(odd){top: 10rem;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainInstallCon{padding: 10rem 0; min-height: auto; background-color: #010101 !important;}
	#mainInstallCon:before{display: none;}

	.main-install-con{position: relative; width: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}

	.main-install-left{width: 100%; max-width: none; height: auto; position: static !important; top: 0; padding-top: 0; box-sizing: border-box;}

	.main-install-tab-wrapper{margin-top: 5.5rem; width: 100%; max-width: none;}
	.main-install-drop-menu{text-align: left;}
	.main-install-drop-open-btn{padding:0 5rem 0 3rem; height: 6.5rem; line-height:6.5rem; font-size:1.8rem; border-radius: 3.25rem;}
	.main-install-drop-open-btn span{font-size: 1.8rem;}
	.main-install-drop-open-btn .arrow{right:2.5rem; margin-top:-1rem; font-size: 2rem;}
	.main-install-drop-menu.open .main-install-drop-open-btn{border-radius: 3.25rem 3.25rem 0 0;}
	.main-install-drop-menu ul{top:calc(100% - 1px); border-radius: 0 0 3.25rem 3.25rem;}
	.main-install-drop-menu ul li:first-child{padding-top: 10px;}
	.main-install-drop-menu ul li:last-child{padding-bottom: 10px;}
	.main-install-drop-menu ul li a{padding:10px 3rem;}
	.main-install-drop-menu ul li a em{font-size:1.7rem; line-height: 1.3;}

	.main-install-right{margin-top: 4rem; padding: 0; width: 100%; max-width: none;}
	.main-install-wrapper.swiper-container {padding-bottom: 13rem;}
	.main-install-list{display: flex;}
	.main-install-item{margin-right: 2rem; position: relative; height: auto !important; align-self: stretch;}
	.main-install-item:before{position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: url("../images/main/main_install_bg.png") left top no-repeat; background-size: cover;}
	.main-install-inner{position: relative; padding: 4rem 3rem 5rem; background-color: rgba(255,255,255,0.05); display: block;}
	.main-install-img{position: relative; width: 100%; height: 0; padding-top: 73.52%;}
	.main-install-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
	.main-install-txt{padding-top: 35px;}
	.main-install-txt .category{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: var(--main-color);}
	.main-install-txt .tit{margin-top: 1.5rem; font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; color: #fff;}
	.main-install-txt .info{margin-top: 2rem; display: flex; flex-wrap:wrap;}
	.main-install-txt .info + .info{margin-top: 1rem;}
	.main-install-txt .info dt, .main-install-txt .info dd{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 500;}
	.main-install-txt .info dt{padding-left: 2.4rem; padding-right: 1rem; width: 10rem; color: #fff; box-sizing: border-box; position: relative;}
	.main-install-txt .info dt i{position: absolute; top: 0.1rem; left: 0;}
	.main-install-txt .info dd{width: calc(100% - 10rem); color: rgba(255,255,255,0.5);}

	.main-install-control{visibility: visible; opacity: 1;}
	.main-install-control.main-control-css .swiper-pagination{background-color: rgba(255,255,255,0.1);}
	.main-install-control.main-control-css .swiper-pagination .swiper-pagination-progressbar-fill {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,0+87,0.14+93,1+100 */
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 20%,rgba(255,255,255,0.34) 40%,rgba(255,255,255,0.64) 60%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
	.main-install-control.main-control-css .swiper-button-prev,
	.main-install-control.main-control-css .swiper-button-next{color: #fff;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠6(온라인문의) -------- */
#mainOnlineCon{position: relative; /* padding-bottom: 10rem; min-height: 108rem; */ min-height: 100vh; box-sizing: border-box; z-index: 1;}
#mainOnlineCon:after {display: block;
    content: "";
    width: 100%;
    bottom: 0; background: linear-gradient(rgba(219, 215, 214, 0.01), rgba(255, 255, 255, 0.9));
    position: absolute;
    left: 0;
    height: 20rem;}
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 3s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

.main-online-con{position: relative; width: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}

.main-online-left{width: 40%; height: 100vh; position: sticky; top: 0; padding-top: 22rem; box-sizing: border-box;}

:root{
	--online-padding-L:13.5rem;
}
.main-online-right{padding: 22rem 0 18rem; max-width: 84rem; width: 60%;}
.main-online-list{margin: -0.5rem 0; display: flex; flex-wrap:wrap;}
.main-online-item{margin: 0.5rem 0; width: 100%; border-radius: 0.5rem; display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box;  position: relative;}
.main-online-item:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; content: ''; background: rgba(255,255,255,0.35); backdrop-filter: blur(10px); display: none;}
.main-online-tit{width: var(--online-padding-L);}
.main-online-item input,
.main-online-item textarea{padding: 0 2rem; padding-left: var(--online-padding-L) !important; width: 100%; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: rgba(0,0,0,0.5); border: 0; background-color: rgba(255,255,255,0.5); /* backdrop-filter: blur(20px); */ box-sizing: border-box; outline:1px solid transparent; transition:var(--transition-custom); transition-property: outline-color, background-color; /* animation:animateBlur 1.5s 1.8s ease-in forwards; */}
.main-online-right.open .main-online-item input, .main-online-right.open .main-online-item textarea {animation:animateBlur 0.6s 0.2s ease-in forwards;}
.main-online-item input{height: 6rem;}
.main-online-item textarea{padding: 2rem; height: 19.5rem; resize: none;}
.main-online-item input::placeholder,
.main-online-item textarea::placeholder{color: rgba(0,0,0,0.5);}
.main-online-item.focus input,
.main-online-item.focus textarea{outline-color: #fff;}
.main-online-item.error input,
.main-online-item.error textarea{outline-color: red; /* outline-color: var(--main-color); */}
.main-online-item .form-label{position: absolute; top: 2rem; left: 2rem; padding-left: 3.2rem; font-size: 1.6rem; line-height: 2rem; letter-spacing: -0.02em; color: #000; font-weight:600; pointer-events: none;}
.main-online-item .form-label em{position: absolute; top: -0.2rem; left: 0; font-size: 2.2rem; color: var(--main-color);}

@keyframes animateBlur {
	from{backdrop-filter: blur(0);}
	to{backdrop-filter: blur(20px);}
}

@keyframes TransInquiry {
	from{transform:translateY(7%);}
	to{transform:translateY(0);}
}

/* 보안코드 */
.security-code-box{position: relative; width: 100%; border: 0; box-sizing: border-box;}
.security-code-box input{padding-left: var(--online-padding-L) !important; padding-right: 13rem; width: 100%; height: 6rem;}
.security-code-box .security-code{position: absolute; top: 0; right: 2rem; width: 10rem; font-size: 1.6rem; line-height: 6rem; letter-spacing: -0.015em; color: #000; text-align: right;}

.main-online-agree{margin-top: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.2);}
.main-online-agree .agree-txt{}
.main-online-agree .agree-txt input{display:none;}
.main-online-agree .agree-txt label{position:relative; padding-left:3rem; font-size:1.6rem; letter-spacing:-0.05em; font-weight: 500; color:#000;}
.main-online-agree .agree-txt label:before {position: absolute; top: -0.2rem; left: 0; font-size: 2rem; content: "\e92c"; font-family: xeicon;}
.main-online-agree .agree-txt input:checked + label:before {color: #fff; content: "\e92b";}
.main-online-agree .agree-txt input:checked + label i{color:#fff;}
.main-online-agree ul{}
.main-online-agree ul li{position: relative;}
.main-online-agree ul li .agree-txt label{max-width: calc(100% - 5rem); display: inline-block;}
.main-online-agree ul li a{position: absolute; top: -0.2rem; right: 0; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.045em; font-weight: 500; color: rgba(0,0,0,1); transition:var(--transition-custom); transition-property: color, border-color;}
.main-online-agree ul li a i{margin-left: 1rem; font-size: 2rem; position: relative; top: 0.2rem;}
.main-online-btn{margin-top:5rem; display: flex; align-items: center; justify-content: center;}
.main-online-btn .btn{position: relative; width: 22rem; height: 6.5rem; font-size: 1.8rem; letter-spacing: -0.02em; font-weight: 600; color: #fff; background-color: var(--main-color); border: 2px solid var(--main-color); border-radius: 6.5rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}

@media (hover: hover) and (min-width:801px) {
	.main-online-agree ul li a:hover{color: #fff;}
	.main-online-btn .btn.cm-fill-ani-JS:hover{background-color: #000; transition: var(--transition-custom); transition-property: background-color;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainOnlineCon{padding: 10rem 0; min-height: auto;}
	#mainOnlineCon:after {height: 5rem;}
	.main-online-con{position: relative; width: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}

	.main-online-left{max-width:auto; width: 100%; height: auto; position: static; padding-top: 0;}

	:root{
		--online-padding-L:12rem;
	}
	.main-online-right{padding: 5rem 0 0; width: 100%;}
	.main-online-list{margin: -0.5rem 0; display: flex; flex-wrap:wrap;}
	.main-online-item{margin: 0.5rem 0; width: 100%; border-radius: 0.5rem; display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box;  position: relative;}
	.main-online-item:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; content: ''; background: rgba(255,255,255,0.35); backdrop-filter: blur(10px); display: none;}
	.main-online-tit{width: var(--online-padding-L);}
	.main-online-item input,
	.main-online-item textarea{padding: 0 2rem; padding-left: var(--online-padding-L) !important; width: 100%; font-size: 1.4rem; line-height: 1.3;}
	.main-online-item input{height: 6rem;}
	.main-online-item textarea{padding: 2rem; height: 19.5rem;}
	.main-online-item .form-label{top: 2rem; left: 2rem; padding-left: 3.2rem; font-size: 1.6rem; line-height: 2rem;}
	.main-online-item .form-label em{top: -0.2rem; left: 0; font-size: 2.2rem;}
	/* 보안코드 */
	.security-code-box{position: relative; width: 100%; border: 0; box-sizing: border-box;}
	.security-code-box input{padding-left: var(--online-padding-L) !important; padding-right: 13rem; width: 100%; height: 6rem;}
	.security-code-box .security-code{position: absolute; top: 0; right: 2rem; width: 10rem; font-size: 1.6rem; line-height: 6rem; letter-spacing: -0.015em; color: #000; text-align: right;}

	.main-online-agree{margin-top: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.2);}
	.main-online-agree .agree-txt label{padding-left:3rem; font-size:1.6rem;}
	.main-online-agree .agree-txt label:before {top: 0; font-size: 2rem;}
	.main-online-agree ul li .agree-txt label{max-width: calc(100% - 5rem);}
	.main-online-agree ul li a{position: absolute; top: -0.2rem; right: 0; font-size: 1.4rem; line-height: 1.3;}
	.main-online-agree ul li a i{margin-left: 1rem; font-size: 2rem; position: relative; top: 0.2rem;}
	.main-online-btn{margin-top:5rem;}
	.main-online-btn .btn{width: 22rem; height: 6.5rem; font-size: 1.8rem; background-color: var(--main-color); border: 2px solid var(--main-color); border-radius: 6.5rem;}
}


/* 메인 inquiry yj 추가 */
#mainOnlineCon .main-online-right {opacity: 0; visibility:hidden; transition:opacity 0.4s ease-in;}
#mainOnlineCon .main-online-right.open {opacity: 1; visibility:visible; animation:TransInquiry 1s forwards;}
.main-inquiry-btn{margin-top:5rem; }
.main-inquiry-btn .btn{position: relative; width: 22rem; height: 6.5rem; font-size: 1.8rem; letter-spacing: -0.02em; font-weight: 600; color: #fff; background-color: var(--main-color); border: 2px solid var(--main-color); border-radius: 6.5rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}

@media (hover: hover) and (min-width:801px){
	/* .main-online-agree ul li a:hover{color: #fff;} */	
	.main-inquiry-btn .btn.cm-fill-ani-JS:hover{background-color: #fff; transition: var(--transition-custom); transition-property: background-color;}
}

@media all and (max-width:800px){
	.main-inquiry-btn .btn {margin: 0 auto;}
}