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

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

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

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

.main-intro-top-cover {width: 100%; height: 100vh;}
.main-intro-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-intro-bg span {position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; }
/* .main-intro-top-cover .punch-svg {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 1920px; min-height: 1080px; z-index: 10;}
.main-intro-top-cover .punch-svg .punch-hole {height: 100%; transform-origin: 50% 50%; transform-style: preserve-3d;}
.main-intro-top-cover .punch-svg.m-svg {display:none;} */

.main-intro-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center;  z-index: 11;} 
.main-intro-inner .inner {width: 1167px; margin: 0 auto; transform: translateY(-11rem);}
.main-intro-txt { font-size: 2.2rem; font-style: italic; font-weight: 500; letter-spacing: -0.015em; color: #fff; line-height: 1.3; padding-left: 2.8rem; opacity: 0; transition: var(--transition-custom); }
.main-intro-logo-box {position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%); margin-top: 2.2rem; width: 1167px; height: 194px; transition: var(--transition-custom); z-index: 2; transition-property: opacity;}
.main-intro-logo-box svg {max-width: 100%; height: 100%;}
.main-intro-logo-box02 {position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%); text-align: center; margin-top: 2.2rem; width: 1167px; height: 194px; opacity: 0;  transition: var(--transition-custom); z-index: 1; transition-property: opacity;}

.main-intro-logo-box02 .display-t,
.main-intro-logo-box02 .display-m,
.main-intro-logo-box02 .display-m2 {display: none;}

.main-intro-logo-box .cls-1 { stroke-dasharray:1800; stroke-dashoffset:1800;}
#mainIntroCover.intro .main-intro-logo-box .cls-1 { animation:stroke-draw 2.5s both;}
#mainIntroCover.intro .main-intro-logo-box .cls-1.logo-txt02 {animation-delay: 0.5s;}
#mainIntroCover.intro .main-intro-logo-box .cls-1.logo-txt03 {animation-delay: 0.8s;}
#mainIntroCover.intro .main-intro-logo-box .cls-1.logo-txt04 {animation-delay: 1.1s;}
#mainIntroCover.intro .main-intro-logo-box .cls-1.logo-txt05 {animation-delay: 1.4s;}
#mainIntroCover.intro .main-intro-logo-box .cls-1.logo-txt06 {animation-delay: 1.7s;}
#mainIntroCover.intro .main-intro-logo-box .cls-1.logo-txt07 {animation-delay: 2.0s;}
#mainIntroCover.intro .main-intro-logo-box .cls-1.logo-txt08 {animation-delay: 2.3s;}

@keyframes stroke-draw {
  0%   {
  stroke-dashoffset: 1800;
  }
  100% {
  stroke-dashoffset: 0;
  }
}

#mainIntroCover.intro-active .main-intro-txt {opacity: 1;}
#mainIntroCover.intro-active .main-intro-logo-box02 {opacity: 1;}

#mainIntroCover.intro-active2 .main-intro-bg span {animation:introAni linear both 1.5s; }
@keyframes introAni {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity:1;
	}
	50% {
		transform: translate(-50%, -50%) scale(5);
		opacity:0.1;
	}
	90% {
		opacity:0;
	}
	100% {
		transform: translate(-50%, -50%)  scale(10);
		opacity:0;
	}
}



.main-wrap #header {opacity: 0; top: calc(-1*(var(--header-height)));}
.main-wrap.active #header {opacity: 1; top: var(--header-top);}

/* ******************  메인 비주얼 ********************** */
#mainVisual{position: fixed; top:0; left:0; overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); background-color:#000; z-index: 1;}
.main-visual-con .slick-track,
.main-visual-container {position: relative; height:100%;}

.main-visual-container .main-visual-wrapper{position:relative;  z-index:auto; height:100%}
.main-visual-container .main-visual-swiper {height:100% !important;}
.main-visual-container .swiper-slide {overflow: hidden;}
.main-visual-container .slide-inner {width: 100%;height: 100%;position: absolute; left: 0;top: 0; z-index: 1; background-color: var(--color-dark);}
.main-visual-con,
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
}
.main-visual-item .main-visual-img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main-visual-item .main-visual-clipped-img {clip-path: url(#svgTextPath);
    filter: blur(1rem);
	fill:none; 
	stroke:#fff;
	stroke-width:1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	margin-top: 2.2rem;
    width: 1167px;
    height: 194px;
	/* 	transition: all 0.4s ease-in-out; transition-property:filter; */
}
.main-visual-item .main-visual-clipped-img img { position: absolute;top: 50%;  left: 50%; transform: translate(-50%, -50%); }
.main-visual-logo-box {position: absolute;}
.main-visual-logo-box svg {width: 100%; height: 100%;}
/* .main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;} */

/* @media all and ( min-width: 1281px ){
	.main-visual-item.active-item .main-visual-img img ,
	.main-visual-item.active-item .main-visual-clipped-img img  {animation: image-zoom-out 5s 0s forwards;}
} */


/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-logo {position: absolute; top: 50%;  left: 50%;  transform: translate(-50%, -50%); margin-top: 2.2rem; width: 1167px; height: 194px; transition-property:opacity;}
.main-visual-logo svg {width: 100%; height: 100%;}

.main-visual-txt-inner {display: flex; align-items: center; position: relative;  width: 1167px; margin: 0 auto; transform: translateY(-11rem); padding-left: 5.5rem;}
/* .main-visual-txt-box .main-visual-txt {
	opacity:0; 
} */
.main-visual-txt-box .main-visual-txt {font-size: 2.2rem; font-style: italic; font-weight: 500; letter-spacing: -0.015em; color: #fff; line-height: 1.3;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-more-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-more-btn{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: translate(-50%, -50%) scale(1.06,1.06) 
	}
	to {
		transform:  translate(-50%, -50%) scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-pagination.swiper-pagination{position: relative; display:flex; align-items: center; margin-left: 2.6rem;}
.main-visual-pagination button.swiper-pagination-bullet {position:relative; width:6px; height:6px; border-radius: 6px; background:#fff; margin-left:7px; opacity:1;filter:Alpha(opacity=100); overflow: hidden; transition: all 0.8s ease-in-out;}
.main-visual-pagination button:first-child {margin-left:0;}
/* .main-visual-pagination button:before {content:""; display:block;position:absolute; bottom:0; left:0; display:block; width:60px; height:6px; border-radius: 6px;  background: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: all 0.8s ease-in-out;} */
.main-visual-pagination .num {display:none; }
.main-visual-pagination .progress-bar {display:block; position:absolute; left:0; bottom:0;  width:0; height:5px; border-radius: 5px;background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.2)); }
.main-visual-pagination button.swiper-pagination-bullet-active {width: 60px;  background: rgba(255,255,255,0.2);} 

/* 메인 비주얼 :: Installer Locator 버튼 */
.main-installer-locator-btn {position: absolute; bottom: 7rem; right: 14rem; width: 13rem; height: 13rem;  box-sizing: border-box; border-radius: 13rem; display: flex; align-items: center; z-index: 10;}
.main-installer-locator-btn::before, 
.main-installer-locator-btn::after {position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; pointer-events: none; border: 0.2rem solid #fff; border-radius: 50%; margin: -0.2rem; box-sizing: border-box;}
.main-installer-locator-btn::before { opacity: 1; transform: scale(1);}
.main-installer-locator-btn::after{visibility: visible; opacity: 0; transform: scale(0.5);}
.main-installer-locator-btn .flow-txt-wrap {overflow: hidden; padding-top: 3rem;}
.main-installer-locator-btn .flow-txt {display: flex; white-space: nowrap; overflow: hidden; transition: all 0.3s;}
.main-installer-locator-btn .flow-txt span{padding: 0 1rem; font-size: 1.6rem; letter-spacing: -0.05em; font-weight: 400; color:#fff; display: inline-block; animation: textLoopL 4s linear infinite;}
.main-installer-locator-btn .flow-txt span:nth-child(even){opacity: 0.1;}
.main-installer-locator-btn > span {position: absolute; top: 50%; left: 50%; margin-top: -2.6rem; font-size: 2.2rem; color: #fff; margin-left: -1.1rem; display: block;}
@keyframes textLoopL {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(-200%, 0, 0);
	  transform: translate3d(-200%, 0, 0);
	}
}

@media all and ( min-width: 801px ){
	.main-installer-locator-btn:hover{border-color: transparent;}
	.main-installer-locator-btn:hover::before {transition: all 0.5s ease-in-out; transform: scale(1.5); opacity: 0; border-width: 0.1rem;}
	.main-installer-locator-btn:hover::after {transition: all 0.3s ease-in-out;transform: scale(1); opacity: 1; border-width: 0.2rem;}
}

/* 인트로 Ative */
/* #mainVisual.intro-active .main-visual-item .main-visual-clipped-img  {filter: blur(1rem);}
#mainVisual.intro-active .main-visual-logo {opacity: 1;} */


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
#mainContent { position: relative; margin-top: 100vh; z-index: 9;}

/* 공통 :: 타이틀 */
.main-tit-box{position: relative; z-index: 10; text-align: center;}
.main-tit-box .main-tit {font-size: 11rem; font-weight: 600; letter-spacing: -0.015em; color: var(--color-dark); line-height: 1.1; }
.main-tit-box .main-tit span {position: relative; display: inline-block !important;}
.main-tit-box .main-txt01 {font-size:2rem; font-weight: 600; letter-spacing: -0.015em; color: #fff; line-height: 1.5; margin-top: 4rem;}
.main-tit-box .main-txt02 {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.015em; color: rgba(255,255,255,0.7); line-height: 1.625; margin-top: 1rem;}

.cm-overflow-box{overflow: hidden; display: block;}
.cm-overflow-inner{display: block; font-size:inherit; font-weight:inherit; color:inherit; opacity:0;filter:Alpha(opacity=0); transform: translateY(100%);}
.animated .cm-overflow-box .cm-overflow-inner{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.animated .cm-overflow-box .delay01{animation-delay:0.1s;}
.animated .cm-overflow-box .delay03{animation-delay:0.3s;}
.animated .cm-overflow-box .delay05{animation-delay:0.5s;}
.animated .cm-overflow-box .delay07{animation-delay:0.7s;}

/* 공통 :: 버튼 효과 */
.main-effect-btn::before, 
.main-effect-btn::after {position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; pointer-events: none; border: 0.2rem solid var(--color-light); border-radius: 50%; margin: -0.2rem; box-sizing: border-box;}
.main-effect-btn::before { opacity: 1; transform: scale(1);}
.main-effect-btn::after{visibility: visible; opacity: 0; transform: scale(0.5);}
@media all and ( min-width: 801px ){
	.main-effect-btn:hover{border-color: transparent;}
	.main-effect-btn:hover::before {transition: all 0.5s ease-in-out; transform: scale(1.5); opacity: 0; border-width: 0.1rem;}
	.main-effect-btn:hover::after {transition: all 0.3s ease-in-out;transform: scale(1); opacity: 1; border-width: 0.2rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1 (Ultrafit Total) -------- */
#mainContent1{height:0 !important}
.main-con01-wrap{position: relative; width:100%; overflow:hidden;  height: 100vh;}
.main-con01-wrap .main-con01-bg{position: absolute; top:0; right:0; width:100%; height: 100%; overflow:hidden;}
.main-con01-wrap .main-con01-bg span{display: block; position: absolute; top:0; left:0; width:100%; height:100vh; filter: grayscale(1); transition: all 0.6s ease-in-out;}
.main-con01-wrap .main-con01-bg span img{height:100%; width:100%; object-fit: cover;}

.main-con01{position: absolute; top:0; left:0; width:100%; height:100%; z-index: 1;}
.main-con01-inner {position: relative; width: 100%; height: 100%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.main-con01-tit-wrap {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main-con01-tit {position: relative; z-index: 1; text-align: center;}
.main-con01-tit.m-ver {display: none;}

.main-con01-tit .text{position:relative; font-size: 11rem; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; background-image: linear-gradient(90deg, var(--color-light) 0%, var(--color-light) 0%, transparent 0.1%); background-repeat: no-repeat;-webkit-text-fill-color: rgba(255, 255, 255, 0.13);-webkit-background-clip: text; background-clip: text;}

.main-con01-list {position: relative;  display: flex; flex-wrap: wrap; margin: 0 -2.25rem; height: 100%; align-items: center;}
.main-con01-list li {width: calc(33.33% - 4.5rem); margin: 0 2.25rem; border-radius: 1.4rem; background: rgba(255,255,255,0.13); backdrop-filter: blur(3rem); }
.main-con01-list li .inner {display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; height: 45rem; border-radius: 1.4rem; padding: 4rem 4rem 4.5rem 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 2.7rem 2.7rem 4.3rem rgba(0,0,0,0.48);}
.main-con01-list li .inner dl {margin-bottom: 6rem;}
.main-con01-list li .inner dl dt {margin-bottom: 2.2rem;}
.main-con01-list li .inner dl dt .tit {font-size: 2.8rem; font-weight: 600; letter-spacing: -0.015em; color: #fff; line-height: 1.2;}
.main-con01-list li .inner dl dt .tit span {display: block; font-size: 1.9rem; font-weight: 500; }
.main-con01-list li .inner dl dd .txt {position: relative; padding-left: 1.8rem; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.015em; color: #fff; line-height: 1.75;}
.main-con01-list li .inner dl dd .txt:before {position: absolute; content: ''; width: 3px; height: 3px; left: 0.4rem; top: 1.2rem; background: #fff; opacity: 0.5;}
.main-con01-list li .inner .icon-box {text-align: right;}
#mobileCon.display-m {display: none;}
.main-con01-list.display-m {display: none;}

@media all and (min-width:801px){
	.main-con01-list .list-item{transform:translateY(50%); opacity: 0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Ultrafit Film) -------- */
#mainContent2{background: var(--color-light); position: relative;}
.main-con02 {padding:25rem 0;}
.main-film-con .display-m {display: none;}
.main-film-tab-wrapper-style {margin: 2.5rem 0 6.5rem;}
.main-film-tab-list {display: flex; justify-content: center;}
.main-film-tab-list li {width: 16.2rem; height: 3.4rem; margin: 0 0.3rem;}
.main-film-tab-list li a {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: end; padding: 0 1rem 0 0.6rem; border: 2px solid var(--color-dark); border-radius: 1.7rem; transition: all 0.3s; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.main-film-tab-list li a em {font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; color: var(--color-dark); transition: all 0.3s;}
.main-film-tab-list li a:before{position: absolute; left: 0.6rem; top: 50%; margin-top: -1rem; content: '\e92c'; font-family: xeicon; font-size: 2rem; color: var(--color-dark); transition: all 0.3s;}
.main-film-tab-list li.selected a {background: var(--color-dark);}
.main-film-tab-list li.selected a em {color: var(--color-light);}
.main-film-tab-list li.selected a:before {content: '\e92b'; color: var(--color-light);}
.main-film-list .slick-list {overflow: visible; margin:0 -1.25rem;}
.main-film-list .slick-slide {margin: 1.25rem;}
.main-film-list li {}
.main-film-list li a {position: relative; display: block; width: 100%; opacity: 0; transform: translateY(30px); transition:var(--transition-custom2); }
.main-film-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 2.4rem; overflow: hidden;}
.main-film-list li a .img-box:before {position: absolute; top: 1.4rem; right: 1.4rem; z-index: 2; font-size: 3.2rem; color: var(--color-light); content: '\e915'; font-family: xeicon; transform:rotate(45deg); opacity: 0; transition: all 0.3s;}
.main-film-list li a .img-box .img {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0;}
.main-film-list li a .img-box .img-on {position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: var(--transition-custom);}
.main-film-list li a .txt-box {margin-top: 2rem;}
.main-film-list li a .txt-box .tit {font-size: 2.7rem; font-weight: 600; letter-spacing: -0.015em; color: var(--color-dark); line-height: 1.2;;}
.main-film-list li a .txt-box .txt {margin: -0.6rem; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.015em; color: var(--color-dark); opacity: 0.5; line-height: 1.2; padding-top: 0.8rem;}
.main-film-list li a .txt-box .txt span {position: relative; display: inline-block; margin: 0.6rem;}
.main-film-list li a .txt-box .txt span:before {position: absolute; content: ''; width: 1px; height: 11px; left: -0.6rem; top:0.2rem; background: rgba(0,0,0,0.2);}
.main-film-list li a .txt-box .txt span:first-of-type:before {display: none;}
.main-film-list li a:hover .img-box:before ,
.main-film-list li a:hover .img-box .img-on {opacity: 1;}

.animated .main-film-list li a {opacity: 1; transform: translateY(0);}
.animated .main-film-list li.slick-current a {transition-delay:0.2s;}
.animated .main-film-list li.next01 a {transition-delay:0.4s;}
.animated .main-film-list li.next02 a {transition-delay:0.6s;}
.animated .main-film-list li.next03 a {transition-delay:0.8s;}
.animated .main-film-list li.next04 a {transition-delay:1.0s;}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (About ULTRAFIT) -------- */
#mainContent3{}
.main-con03 {}
.main-con03-wrap {position: relative; background: var(--color-light);}
.main-con03-wrap .main-tit-box {text-align: left; transition: all 1.0s ease-in-out;}
.main-con03-wrap.animated .main-tit-box { transform:translateY(0);}
.main-con03-wrap .main-con03-bg {position: absolute; width: 100%; height: 151rem; top:  21.1rem; left: 50%; transform:translateX(-50%); border-radius: 4rem; background: url(/images/main/main_about_bg.jpg)no-repeat center/cover; transition: all 1.0s ease-in-out;}
.main-con03-wrap.animated .main-con03-bg {width: var(--area-box-width);}
.main-con03-wrap .main-con03-tit-con {position: relative; z-index: 1;  mix-blend-mode: difference;}
.main-con03-tit-con .main-tit-box { transform:translateY(15rem);}
.main-con03-tit-con .main-tit-box .main-tit {color: #fff; font-size: 12.2rem;}
.main-con03-wrap .main-con03-inner {position: relative; height: 145rem; padding-bottom: 15rem;display: flex; flex-direction: column; justify-content: space-between; z-index: 1; box-sizing: border-box;}
.main-about-top {position: relative; padding-right: 15rem; box-sizing: border-box;}
.main-about-top .main-tit-box { transform:translateY(10rem); transition-delay:0.2s;}
.main-about-top .main-more-btn {position: absolute; top: 0; right: 0; width: 11rem; height: 11rem; border-radius:50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); backdrop-filter:blur(10px); color: var(--color-light); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.main-about-top .main-more-btn i {font-size: 2rem;}
.main-about-top .main-more-btn span {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.015em; display: block; margin-top: 0.7rem;}

.main-about-bottom {display: flex;}
.main-about-item {width: 50%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.main-about-item.item02 {padding-left: 4rem;}
.main-about-item .tit {position: relative; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); box-sizing: border-box;}
.main-about-item .tit strong {position: relative; display: inline-block; font-size: 2.2rem; font-weight: 600; letter-spacing: -0.015em; color: var(--main-color);}
.main-about-item .tit strong:before {position: absolute; content: ''; width: 100%; height: 1px; background: var(--main-color); left: 0; bottom: calc(-1*(2rem + 1px));}
.main-about-item .inner-item {display: flex; align-items: center; height: 21rem; border-bottom:  1px solid rgba(255,255,255,0.1); box-sizing: border-box;}
.main-about-item dl {}
.main-about-item dl dt {font-size: 3.6rem; font-weight: 600; letter-spacing: -0.015em; color: #fff; line-height: 1.16;}
.main-about-item dl dd {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.015em; color: rgba(255,255,255,0.35); line-height: 1.43; padding-top: 0.7rem;}


/* -------- 메인 컨텐츠 :: 컨텐츠4(Request a Sample) -------- */
#mainContent4{position: relative; background: var(--color-light);}
.main-con04 {padding: 33rem 0;}
.main-con04 .txt-flow-con {position: relative; display: block; width: 100%; height: 12rem; overflow: hidden;}
.main-con04 .txt-flow-con .bg-box { width: 100%; height: 100%;  background: linear-gradient(45deg, #1d7ad6 0%, #021323 100%);/* linear-gradient(45deg, #1d7ad6 0%, #021323 100%); */}
.main-con04 .flow-txt {width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 2; mix-blend-mode:lighten;}
.main-con04 .maskBg {width: 100%; height: 100%; background: var(--color-light); display: flex; align-items: center; overflow: hidden;} 
.main-con04 .maskBg .marquee {width: 100%; height: 100%; position: relative;}
.main-con04 .maskBg .marquee .absol {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center;}
.main-con04 .maskBg .marquee .absol .mar_ch {display: inline-flex; align-items: center; will-change: transform; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transform: translate3d(0, 0, 0);} 
.main-con04 .maskBg .marquee .absol h4 {font-size:12rem; letter-spacing:-0.015em; color: var(--color-dark); font-weight: 700; box-sizing:border-box; white-space:nowrap; padding-right:4.5rem; text-transform: uppercase;}
.main-con04 .maskBg .marquee .absol span {display: inline-block; margin-right: 4.5rem;}
.main-con04-txt-wrap {padding-top: 4.5rem;}
.main-con04-txt {text-align: center; font-size: 2.3rem; font-weight: 500; letter-spacing: -0.015em; color: var(--color-dark); line-height: 1.52; }
.main-con04-m {display: none;}

@media all and (max-width:1280px){
	.txt-flow-con {height: 10rem;}
	.maskBg .marquee .absol h4 {font-size:9rem;}
}

@keyframes flowText {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

#mainBottom {position: relative; z-index: 2; background: #000;}
/* -------- 메인 컨텐츠 :: 컨텐츠5 (Installer Locator) -------- */
#mainContent5{position: relative; /* height: 100vh; */}
/* .main-con05-bg {position: absolute; top: 0; right: 0; width: 100%;height: 100%; overflow: hidden; } */
.main-con05-wrap {position: relative; height: 100%; background: url(/images/main/main_con05_bg.jpg)no-repeat center/cover;}
.main-con05 {padding: 25rem 0;}
.main-con05 .main-tit-box {text-align: left;}
.main-con05 .main-tit-box .main-tit {color: #fff; font-weight: 500; font-size: 8.3rem;}
.main-con05 .main-tit-box .main-txt02 {color: rgba(255,255,255,0.5); padding-top:2rem;}
.main-con05-bottom {padding-top: 11rem; display: flex; justify-content: space-between;}
.main-con05-bottom .main-con05-btn {margin-top: 2rem; width: 14.4rem; height: 14.4rem; border-radius:50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;  background: rgba(0,0,0,0.3); backdrop-filter:blur(10px); color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.main-con05-bottom .main-con05-btn.main-effect-btn::before, 
.main-con05-bottom .main-con05-btn.main-effect-btn::after {border: 0.3rem solid #fff; margin: -0.3rem;}
.main-con05-bottom .main-con05-btn i {font-size: 1.5rem;}
.main-con05-bottom .main-con05-btn span {font-size: 1.5rem; line-height: 1.33; margin-top: 1rem;}
/* 카운트 */
.main-con05-num-box {display:flex; align-items:flex-end;}
.main-con05-num-box .count-num-box{ display:flex; align-items:center; justify-content: center; font-size:3rem}
.main-con05-num-box .count-num-box .num {line-height: 1em; font-size: 20rem; color:#fff; font-weight:300;}
.main-con05-num-box .count-num-item-wrap{height:6.67em; overflow:hidden;}
.main-con05-num-box .count-num-item-wrap .count-num-item-box{height:66.7em; }
.main-con05-num-box .count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; font-size: 20rem; color:var(--color-light); letter-spacing: -0.015em; font-weight:300;}
.main-con05-num-box .txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.015em; color: #fff; line-height: 1.5; padding-bottom: 2rem;}
/* active */
.animated .count-num-item-box{animation:count-up-ani 4s forwards;}
.animated .count-num-item-box.down {animation:count-down-ani 4s forwards;}
@keyframes count-up-ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -90%, 0);
    }
}
@keyframes count-down-ani {
    0% {
        transform: translate3d(0, -90%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}  


/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }
/* view */
.mouse-pointer .pointer-circle{opacity: 0; position:absolute; top:50%; left:50%; width: 13rem; height: 13rem; border: 0.3rem solid var(--color-dark); border-radius:50%; transform:translate(-50%,-50%) scale(0); backdrop-filter: blur(10px); box-sizing: border-box; transition:var(--transition-custom);  transition-property: transform, opacity;}
.mouse-pointer .pointer-txt {opacity: 0;position:absolute; left:50%; top:50%; display:flex; flex-direction: column; align-items:center; justify-content:center; text-align: center; width:100%; height:100%; font-size: 1.7rem; color:var(--color-dark); border-radius: 100%;  transform:translate(-50%,-50%) scale(0); transition:var(--transition-custom);}
.mouse-pointer .pointer-txt i {font-size: 2.4rem; margin-bottom: 0.7rem;}
.mouse-pointer .pointer-txt em {display: block; font-weight: 500;}
/* view active */
.mouse-pointer.view .pointer-circle{opacity: 1; transform:translate(-50%,-50%) scale(1);}
.mouse-pointer.view .pointer-txt{opacity: 1; transform:translate(-50%,-50%) scale(1);}
/* drag */
.mouse-pointer .drag-circle{opacity: 0; position:absolute; top:50%; left:50%; width: 12.7rem; height: 12.7rem; border: 0.4rem solid #1a6fc2; border-radius:50%; transform:translate(-50%,-50%) scale(0); backdrop-filter: blur(10px);box-sizing: border-box; transition:var(--transition-custom); transition-property: transform, opacity;}
.mouse-pointer .drag-txt {opacity: 0; position:absolute; left:50%; top:50%; width: 12.7rem; height: 12.7rem; transform:translate(-50%,-50%) scale(0); transition:var(--transition-custom); display: flex; align-items: center; justify-content: center;}
.mouse-pointer .drag-txt img{max-width: 100%;}
/* drag active */
.mouse-pointer.drag{}
.mouse-pointer.drag .drag-circle{opacity: 1; transform:translate(-50%,-50%) scale(1);}
.mouse-pointer.drag .drag-txt{opacity: 1; transform:translate(-50%,-50%) scale(1);}

.is-mobile .mouse-pointer,
.is-mobile .pointer-circle,
.is-mobile .pointer-txt {visibility: hidden; opacity: 0;}

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