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

/* ****************** 메인 loading ********************** */
.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #000;
}
.main-wrap .nav-open-btn,
.main-wrap #headerInnerWrap {margin-top: calc(-1 * var(--header-height)); opacity: 0; transition: margin-top ease-out 1.1s, opacity ease-out 0.5s, background-color 0.4s ease-in-out;}
.main-scroll-icon{transform: translate3d(8rem,0,0); opacity: 0; transition: transform ease-out 1.1s, opacity ease-out 0.5s;}
#fp-nav{transform: translate3d(-8rem,0,0); opacity: 0; transition: transform ease-out 1.1s, opacity ease-out 0.5s;}

.main-wrap.index-active #headerInnerWrap,
.main-wrap.index-active .nav-open-btn{margin-top:0; opacity:1;}
.main-wrap.index-active .main-scroll-icon,
#fp-nav.index-active{transform: translate3d(0,0,0); opacity: 1;}

@media all and ( min-width: 1281px ){
	#header.hide #headerInnerWrap{transform: translateY(-100%);}
}


/* ******************  메인 레이아웃 ********************** */
#mainPortfolioCon,
#mainSystemCon,
#mainValueCon{padding: 10rem 0;}
#mainCompanyCon{padding: 26rem 0 0;}
.main-company-bottom{margin-top: 26rem; padding: 8rem 0; height: auto;}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative;}
/* 메인 비주얼 :: 이미지 */
.main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.active-item .main-visual-img{animation: image-zoom-out 8s 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;
	width: 100%; height:100%;
	box-sizing: border-box;
	position: relative;
}
.main-visual-txt-inner{padding-top: 3rem;}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	padding-left: 2.5rem; opacity:0; position: relative; z-index: 1;
}
.main-visual-txt-box .main-visual-txt1{font-size:5rem; font-weight:600; letter-spacing:-0.035em; color:#fff;}
.main-visual-txt-box .main-visual-txt2{margin-top: 4rem; font-size:1.6rem; line-height: 1.62; letter-spacing:-0.035em; color:#bcbcbc;}
.main-visual-txt-box .main-visual-txt3{margin-top: 2rem; font-size:1.6rem; line-height: 1.62; letter-spacing:-0.035em; color:#bcbcbc;}
.main-visual-txt-box .main-visual-more-btn{margin-top: 4.5rem;}
.main-visual-txt-box .main-visual-more-btn a{display:inline-block; font-size: 2.4rem; line-height: 4rem; color:var(--main-color); border-bottom: 0.2rem solid var(--main-color);}
.main-visual-txt-box .main-visual-more-btn a i{margin-left: 2rem; font-size: 2.2rem;}
.main-visual-txt-box .main-visual-more-btn a:hover i{animation: rotani 0.3s ease-in-out;}
#particle-image {position: absolute; top: 50%; right: 0; transform: translate(-20%,-50%); width: 50%; height: 921px; background: transparent; opacity: 0; transition:var(--transition-custom); transition-property: opacity; background-color: #000; background-image: none; z-index: 2;}
#particle-image.opacity-on{opacity: 1;}
#particle-image canvas{display: block;}
#particle-sub-image{display: none; position: absolute; top: 50%; right: 0; transform: translate(-15%,-40%); width: 80rem;	height: 48.9rem; background-color: transparent; z-index: 99; text-align: center;}
#particle-sub-image img{max-width: 100%; display: inline-block;}
@keyframes rotani{
	0% {transform: rotate(0deg);}
	50% {transform: rotate(180deg);}
	100% {transform: rotate(360deg);}
}

/* 메인 비주얼 :: 텍스트 :: 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: scale(1.08,1.08)
	}
	to {
		transform: 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);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon {position: absolute; bottom: 0; right: 8rem;  z-index: 1;}
.main-scroll-icon .inner-box {position:relative; display:flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; flex-direction: column;}
.main-scroll-icon .img{display: block;}
.main-scroll-icon .txt {font-size:1.1rem; letter-spacing:0.075em; color:rgba(255,255,255,0.6); transform: rotate(-270deg) translate(-3.5rem,-4.2rem);}
.main-scroll-icon .line {margin-top: 2.6rem; overflow:hidden; position:relative; display:block; width:0.1rem; height:9.4rem; z-index:9; background-color: rgba(255,255,255,0.15);}
.main-scroll-icon .line::after {display: block; content: ""; width: 100%; height: 3rem; background: #fff; position: absolute; top: 0; left: 0; animation: scroll_ani 2s infinite;}

@keyframes scroll_ani {
    0%, 20% {top: -4.5rem;}
	100% {top: 100%;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{display: flex; align-items: flex-end;}
.main-tit-box .main-tit{font-size:4.4rem; line-height: 1.43; letter-spacing: -0.05em; font-weight:500; color: #222;}
.main-tit-box .main-tit strong{font-size: 6rem; line-height: 1.43; letter-spacing: -0.05em; font-weight:700;}
.main-tit-box .main-sub-tit{padding-bottom: 2rem; margin-left: 7rem; font-size:1.8rem; line-height:1.55; letter-spacing:-0.05em; color: #888;}

 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(포트폴리오) -------- */
#mainPortfolioCon{position: relative;}
#mainPortfolioCon:before{position: absolute; top: 50%; margin-top: -37rem; height: 74rem;/* top: 4.08%; bottom: 4.08%; */ width: 44.94%; border-radius: 0 1rem 1rem 0; content: ''; background: url("../images/main/main_portfolio_bg.png") center/cover no-repeat;}
#mainPortfolioCon .main-tit-box {flex-direction: column; align-items: flex-start;}
#mainPortfolioCon .main-tit-box .main-step-btn{margin-top: 2.5rem; position: static;}

.main-portfolio-con{width: 100%; height: 100%; display: flex; flex-wrap:wrap; justify-content: space-between; box-sizing: border-box;}
.main-portfolio-more-btn{position: absolute; bottom: 14.69%; left: calc(44.94% - 10rem); padding: 2.5rem; width: 15rem; height: 15rem; font-size: 1.8rem; line-height: 1.44; letter-spacing: -0.05em; color: #222; font-weight: 600; background-color: var(--main-color); border-radius: 1rem; display: flex; flex-wrap:wrap; box-sizing: border-box;}
.main-portfolio-more-btn i{position: absolute; bottom: 2rem; right: 2rem; transition: right 0.3s;}
.main-portfolio-more-btn:hover i{right: 1.5rem;}

.main-portfolio-left{padding-top: 11.83%; padding-top: 16%; width: calc(100% - 75rem);}
.main-portfolio-left .main-tit-box .main-tit{color: #fff;}

.main-portfolio-right{width: 75rem; margin-right: -3rem}
.main-portfolio-prev,
.main-portfolio-next{display: none;}
.main-portfolio-item a{display: block; width: 100%; height: 100%;}
.main-portfolio-img{position: relative; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden;}
.main-portfolio-img:before{position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 100%; background: url('../images/main/main_portfolio_cover.png') 50% 100% repeat-x; z-index: 1;}
.main-portfolio-img img{position: absolute; top: 0; left: 0; width: 100%; object-fit: cover;}
.main-portfolio-img h5{position: absolute; bottom: 3rem; left: 3rem; font-size: 2.6rem; letter-spacing: -0.02em; font-weight: 500; color: #fff; z-index: 2;}
.main-portfolio-txt{position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; padding: 0 3rem; background-color: rgba(0,0,0,0.8); border-radius: 1rem; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; transition: bottom 0.4s ease-in-out; z-index: 3;}
.main-portfolio-txt .tit{font-size: 2.6rem; letter-spacing: -0.05em; font-weight: 600; color: #fff;}
.main-portfolio-txt .info{margin-top: 1.5rem; display: flex; flex-wrap:wrap;}
.main-portfolio-txt .info + .info{margin-top: 1rem;}
.main-portfolio-txt .info dt, .main-portfolio-txt .info dd{font-size: 1.4rem; letter-spacing: -0.035em; color: #fff;}
.main-portfolio-txt .info dt{position: relative; padding-left: 1.2rem; width: 8rem; box-sizing: border-box;}
.main-portfolio-txt .info dt:before{position: absolute; top: 0.4rem; left: 0; width: 0.6rem; height: 0.6rem; background-color: #818181; border-radius: 100%; content: '';}
.main-portfolio-txt .info dd{width: calc(100% - 8rem);}
.main-portfolio-txt .price{margin-top: 1.5rem; display: flex; flex-wrap:wrap; align-items: center;}
.main-portfolio-txt .price span{width: 6rem; height: 2.3rem; font-size: 1.4rem; line-height: 2.3rem; letter-spacing: -0.035em; font-weight: 600; color: #232323; text-align: center; border-radius: 0.5rem; display: block; background-color: var(--main-color);}
.main-portfolio-txt .price strong{margin-left: 1rem; width: calc(100% - 7rem); font-size: 1.6rem; letter-spacing: -0.035em; font-weight: 600; color: #fff;}
.main-portfolio-txt .price strong,
.main-portfolio-txt .tit,
.main-portfolio-txt .info dd{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media all and (min-width: 1281px) and (min-height: 2000px) {
	.main-portfolio-left{padding-top: 40%;}
}
@media all and (min-width: 1281px) and (min-height: 1000px) {
	.main-portfolio-left{padding-top: 26%;}
}
@media all and (min-width: 1281px) and (min-height: 861px) {
	#mainPortfolioCon:before{margin-top: -43rem; height: 86rem;}
	.main-portfolio-list.swiper-wrapper{height: 88rem;}
	.main-portfolio-item.swiper-slide{height: 21rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(5),
	.main-portfolio-item.swiper-slide:nth-child(6),
	.main-portfolio-item.swiper-slide:nth-child(7){height: 28rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(2){transform: translateY(-7.3rem);}
	.main-portfolio-item.swiper-slide:nth-child(3){transform: translateY(-14.6rem);}
	.main-portfolio-item.swiper-slide:nth-child(4){transform: translateY(-21.8rem);}
	.main-portfolio-item.swiper-slide:nth-child(5) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(6) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(7) .main-portfolio-txt .price{margin-top: 7rem;}
}
@media all and (min-width: 1281px) and (max-height: 860px) {
	#mainPortfolioCon:before{margin-top: -41.5rem; height: 83rem;}
	.main-portfolio-list.swiper-wrapper{height: 85rem;}
	.main-portfolio-item.swiper-slide{height: 20rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(5),
	.main-portfolio-item.swiper-slide:nth-child(6),
	.main-portfolio-item.swiper-slide:nth-child(7){height: 27rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(2){transform: translateY(-7rem);}
	.main-portfolio-item.swiper-slide:nth-child(3){transform: translateY(-14rem);}
	.main-portfolio-item.swiper-slide:nth-child(4){transform: translateY(-21rem);}
	.main-portfolio-item.swiper-slide:nth-child(5) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(6) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(7) .main-portfolio-txt .price{margin-top: 7rem;}
}
@media all and (min-width: 1281px) and (max-height: 850px) {
	#mainPortfolioCon:before{margin-top: -39rem; height: 78rem;}
	.main-portfolio-list.swiper-wrapper{height: 80rem;}
	.main-portfolio-item.swiper-slide{height: 18.5rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(5),
	.main-portfolio-item.swiper-slide:nth-child(6),
	.main-portfolio-item.swiper-slide:nth-child(7){height: 25rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(2){transform: translateY(-6.5rem);}
	.main-portfolio-item.swiper-slide:nth-child(3){transform: translateY(-13rem);}
	.main-portfolio-item.swiper-slide:nth-child(4){transform: translateY(-19.5rem);}
	.main-portfolio-item.swiper-slide:nth-child(5) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(6) .main-portfolio-txt .price,
	.main-portfolio-item.swiper-slide:nth-child(7) .main-portfolio-txt .price{margin-top: 5rem;}
}
@media all and (min-width: 1281px) and (max-height: 800px) {
	#mainPortfolioCon:before{margin-top: -37rem; height: 74rem;}
	.main-portfolio-list.swiper-wrapper{height: 76rem;}
	.main-portfolio-item.swiper-slide{height: 18rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(5),
	.main-portfolio-item.swiper-slide:nth-child(6),
	.main-portfolio-item.swiper-slide:nth-child(7){height: 24rem !important;}
	.main-portfolio-item.swiper-slide:nth-child(2){transform: translateY(-6.3rem);}
	.main-portfolio-item.swiper-slide:nth-child(3){transform: translateY(-12.7rem);}
	.main-portfolio-item.swiper-slide:nth-child(4){transform: translateY(-19rem);}
	.main-portfolio-txt .tit {font-size: 2.2rem;}
	.main-portfolio-txt .info {margin-top: 1rem;}
	.main-portfolio-txt .price{margin-top: 1rem;}
}
@media all and (min-width:801px){
	.main-portfolio-container.swiper-container{width: 100%; height: 100%; overflow: visible; display: flex; flex-wrap:wrap; align-items: center;}
	.main-portfolio-list.swiper-wrapper{display: grid; grid-template-columns: 1fr 1fr;}
	.main-portfolio-item.swiper-slide{margin-top: 1rem; width: 34rem !important; overflow: hidden;}
	.main-portfolio-item.swiper-slide:nth-child(1){order: 1;}
	.main-portfolio-item.swiper-slide:nth-child(2){order: 3;}
	.main-portfolio-item.swiper-slide:nth-child(3){order: 5;}
	.main-portfolio-item.swiper-slide:nth-child(4){order: 7;}
	.main-portfolio-item.swiper-slide:nth-child(5){order: 2;}
	.main-portfolio-item.swiper-slide:nth-child(6){order: 4;}
	.main-portfolio-item.swiper-slide:nth-child(7){order: 6;}
	.main-portfolio-item a:hover .main-portfolio-txt{bottom: 0;}
	.main-portfolio-item a{height: 100%; overflow: hidden;}
	.main-portfolio-txt{backdrop-filter: blur(5px);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(설계 단계) -------- */
#mainStepCon{}
.main-tit-box.has-btn{position: relative; padding-right: 19.5rem;}
.main-tit-box .main-step-btn{position: absolute; bottom: 2rem; right: 0;}
.main-tit-box .main-step-btn a{display: inline-block; padding: 0 1.5rem 0 2rem; font-size: 1.6rem; line-height: 5rem; font-weight: 600; letter-spacing: -0.035em; color:#222; background-color: var(--main-color); border-radius: 1rem; box-sizing: border-box; transition:var(--transition-custom);}
.main-tit-box .main-step-btn a i{margin-left: 3rem; top: 0.1rem; font-size: 1.4rem; font-weight: 400; position: relative; transition:var(--transition-custom); transition-property: transform;}
.main-tit-box .main-step-btn a:hover i{transform: translateX(0.3rem);}

.main-step-con{margin-top: 9rem; width: 100%; height: 44rem; display: flex; flex-wrap:wrap;}
.main-step-left{padding-right: 3.5rem; width: 45rem; height: 100%; background-color: #222; box-sizing: border-box; position: relative;}
.main-step-left:before{position: absolute; top: 0; left: -1000%; width: 1000%; height: 100%; background-color: #222; content: '';}
.main-step-right{padding-left: 3.5rem; width: calc(100% - 45rem); height: 100%; background-color: #333; box-sizing: border-box; position: relative;}
.main-step-right:before{position: absolute; top: 0; right: -1000%; width: 1000%; height: 100%; background-color: #333; content: '';}

.main-step-tit{padding-top: 4.5rem; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.main-step-wrapper{margin-top: 3.5rem;}
.main-step-list{display: flex; flex-wrap:wrap;}
.main-step-item{padding-top: 4.5rem; width: 33.33%; height: 28rem; text-align: center; box-sizing: border-box; border-radius: 1rem; position: relative; transition:var(--transition-custom); transition-property: background-color;}
.main-step-right .main-step-item{width: 14.28%;}
.main-step-item:before{position: absolute; top: 11.6rem; left: 0; width: 100%; height: 0.2rem; background-color: rgba(136,136,136,0.5); content: ''; transition:var(--transition-custom);}
.main-step-item .num{font-size: 2.3rem; letter-spacing: -0.065em; font-weight: 700; color: #ddd; font-style: italic; transition:var(--transition-custom);}
.main-step-item .txt{margin-top: 9.5rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.05em; font-weight: 500; color: #888; position: relative; transition:var(--transition-custom);}
.main-step-item .txt:after{position: absolute; top: -5rem; left: 50%; margin-left: -0.3rem; width: 0.6rem; height: 0.6rem; background-color: #ddd; border-radius: 100%; content: ''; transition:var(--transition-custom);}
@media all and ( min-width: 801px ){
	/* prev-active-pc */
	.main-step-item.prev-active:before{background-color: var(--main-color);}
	.main-step-item.prev-active:first-child:before{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fee100+0,fee100+100&0+0,0.28+45,1+100 */
	background: -moz-linear-gradient(left,  rgba(254,225,0,0) 0%, rgba(254,225,0,0.28) 45%, rgba(254,225,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(254,225,0,0) 0%,rgba(254,225,0,0.28) 45%,rgba(254,225,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(254,225,0,0) 0%,rgba(254,225,0,0.28) 45%,rgba(254,225,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fee100', endColorstr='#fee100',GradientType=1 ); /* IE6-9 */}
	.main-step-item.prev-active .num{color: var(--main-color);}
	.main-step-item.prev-active .txt:after{background-color: var(--main-color);}
	/* active */
	.main-step-item.active{background-color: var(--main-color);}
	.main-step-item.active:before{background-color: var(--main-color);}
	.main-step-item.active .num{color: #222;}
	.main-step-item.active .txt{color: #222;}
	.main-step-item.active .txt:after{background-color: var(--main-color);}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(시스템) -------- */
#mainSystemCon{}
#mainSystemCon .main-tit-box .main-step-btn {bottom: auto; top: 3rem;}

.main-system-con{margin-top: 3rem; position: relative; padding-right: 5.5rem;}
.main-system-left{width: 100%; padding-right: 24.1rem; box-sizing: border-box;}
.main-system-list{}
.main-system-item {position: relative;}
.main-system-item.item01 {z-index: 3;}
.main-system-item.item02 {z-index: 2;}
.main-system-item.item03 {z-index: 1;}
.main-system-item.item04 {z-index: 0;}
.main-system-inner{padding: 3.5rem; border-radius: 1.5rem; box-sizing: border-box; display: flex; flex-wrap:wrap; align-items: center; position: relative;}
.main-system-inner:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; border-radius: 1.5rem; transition:var(--transition-custom); background: transparent url("../images/main/main_system_bg.png") 140% 50% no-repeat; z-index: -1;}
.main-system-item .num{width: 10.5rem; font-size: 6rem; letter-spacing: -0.065em; font-weight: 600; color: rgba(221,221,221,0.3); font-style: italic; transition:var(--transition-custom);}
.main-system-item .txt{width: calc(100% - 32rem); font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.05em; color: #888; transition:var(--transition-custom);}
.main-system-item .system{position: absolute; top: 50%; transform: translateY(-50%); right: -24.1rem; width: 48.2rem; text-align: center; z-index: 10;}
.main-system-item .system img{max-width: 100%; display: inline-block;}
.main-system-item .system01 img,
.main-system-item .system02 img,
.main-system-item .system03 img{filter: drop-shadow(0 2rem 2rem rgba(0,0,0,0.1));}
.main-system-item .system span{position: absolute; top: 50%; left: 0; width: 100%; font-size: 2.4rem; line-height: 3.4rem; letter-spacing: -0.05em; font-weight: 600; color: #fff; text-align: center; display: block;}
.main-system-item .system span i{margin-top: 2rem; font-size: 2.4rem; line-height: 1; font-weight: 400; color: rgba(255,255,255,0.6); display: block;}
.main-system-item .system01 span{margin-top: -1.7rem;}
/* active */
.main-system-item.active .main-system-inner:before{background: #f3f3f3 url("../images/main/main_system_bg.png") 125% 50% no-repeat;}
.main-system-item.active .num{color: var(--main-color);}
.main-system-item.active .txt{color: #1d1d1d; font-weight: 500;}

.main-system-right{display: none;}
.main-system-list02{}
.main-system-item02{width: 100%; position: relative;}
.main-system-item02 + .main-system-item02{margin-top: -7.6rem;}
.main-system-item02.item01{z-index: 3;}
.main-system-item02.item02{z-index: 2;}
.main-system-item02.item03{z-index: 1;}
.main-system-item02 img{max-width: 100%;}
.main-system-item02.item01 img,
.main-system-item02.item02 img,
.main-system-item02.item03 img{filter: drop-shadow(0 2rem 2rem rgba(0,0,0,0.1));}
.main-system-item02 span{position: absolute; top: 50%; left: 0; width: 100%; font-size: 2.6rem; line-height: 3.4rem; letter-spacing: -0.05em; font-weight: 600; color: #fff; text-align: center; display: block;}
.main-system-item02.item01 span{margin-top: -1.7rem;}
.main-system-item02 span i{margin-top: 1.5rem; font-size: 2.4rem; line-height: 1; font-weight: 400; color: rgba(255,255,255,0.6); display: block;}

@media all and (min-width: 1281px) and (max-height: 850px) {
	.main-system-inner {padding: 2.5rem 3.5rem;}
}
@media all and (min-width: 1281px) and (max-height: 800px) {
	.main-system-item .system {width: 43.2rem;}
	.main-system-inner:before{background: transparent url("../images/main/main_system_bg.png") 150% 50% no-repeat;}
	/* active */
	.main-system-item.active .main-system-inner:before{background: #f3f3f3 url("../images/main/main_system_bg.png") 135% 50% no-repeat;}
}
@media all and (min-width: 1281px) and (max-height: 750px) {
	.main-system-con {padding-bottom: 5rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(가치관) -------- */
#mainValueCon{position: relative;}
#mainValueCon .main-tit-box .main-sub-tit{margin-left: 3.5rem;}

.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 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

#mainValueCon .area{position: relative;}
.main-value-wrapper{margin-top: 5.5rem;}
.main-value-list{width: 100%; display: flex; flex-wrap:wrap; background-color: #fff; border-radius: 1rem;}
.main-value-item{padding: 6rem 3.1%; width: 25%; display: flex; flex-wrap:wrap; flex-direction: column; background-color: transparent; border-radius: 0rem; box-sizing: border-box; transition:var(--transition-custom); position: relative;}
.main-value-item + .main-value-item:before{position: absolute; top: 2rem; bottom: 2rem; left: 0; width: 1px; background-color: rgba(0,0,0,0.05); content: '';}
.main-value-item .num{font-size: 2.4rem; letter-spacing: -0.065em; font-weight: 700; color: #ddd; font-style: italic;}
.main-value-item .txt-group{margin-top: 10rem;}
.main-value-item .txt-group .icon{width: 5.7rem; height: 5.5rem; display: block; transition:var(--transition-custom);}
.main-value-item .txt-group .icon01{background: url("../images/main/main_value_icon01.png") center/cover no-repeat;}
.main-value-item .txt-group .icon02{background: url("../images/main/main_value_icon02.png") center/cover no-repeat;}
.main-value-item .txt-group .icon03{background: url("../images/main/main_value_icon03.png") center/cover no-repeat;}
.main-value-item .txt-group .icon04{background: url("../images/main/main_value_icon04.png") center/cover no-repeat;}
.main-value-item .txt-group .tit{margin-top: 3.5rem; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: #000; transition:var(--transition-custom);}
.main-value-item .txt-group .txt{margin-top: 2rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.05em; color: #888;}
/* active */
.main-value-item:hover{background-color: #222; border-radius: 1rem; box-shadow: 1.9rem 1.9rem 2rem -0.9rem rgba(54,54,54,0.26);}
.main-value-item:hover .txt-group .icon01{background: url("https://smdg.kr/images/main/main_value_icon01_on.png") center/cover no-repeat;}
.main-value-item:hover .txt-group .icon02{background: url("https://smdg.kr/images/main/main_value_icon02_on.png") center/cover no-repeat;}
.main-value-item:hover .txt-group .icon03{background: url("https://smdg.kr/images/main/main_value_icon03_on.png") center/cover no-repeat;}
.main-value-item:hover .txt-group .icon04{background: url("https://smdg.kr/images/main/main_value_icon04_on.png") center/cover no-repeat;}
.main-value-item:hover .txt-group .tit{color: #fff;}


/* -------- 메인 컨텐츠 :: 컨텐츠5(회사 소개) -------- */
#mainCompanyCon{background-color: #000;}

.main-company-top{position: relative; width: 100%; height: 72.45%; display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box;}
.main-company-left{width: calc(100% - 60rem);}
.main-company-left .main-tit-box{flex-direction: column; align-items: flex-start;}
.main-company-left .main-tit-box .main-tit{color: #fff;}
.main-company-left .main-tit-box .main-sub-tit {margin-top: 2.5rem; padding-bottom: 0; margin-left: 0;}

.main-company-right{width: 60rem; position: relative; transition: var(--transition-custom2);}
.main-company-top #myCanvas{position: absolute; top: 50%; right: 0; transform: translate(20%,-50%);}
.main-company-top #tags{position: absolute; visibility: hidden; opacity: 0;}
.main-company-top #tags ul li a img{max-width: 10rem;}

.main-company-bottom{height: 27rem; height: 27.55%; background-color: #0e0e0e;}
.main-company-list{display: flex; flex-wrap:wrap; height: 100%;}
.main-company-item{position: relative; width: 20%; display: flex; flex-wrap:wrap; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.main-company-item:before{position: absolute; top: 50%; margin-top: -5rem; left: 0; width: 0.1rem; height: 10rem; background-color: rgba(255,255,255,0.15); content: '';}
.main-company-item:first-child:before{display: none;}
.main-company-item .tit{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.065em; color: #888;}
.main-company-item .info{margin-top: 2rem; font-size: 4.5rem; letter-spacing: -0.065em; font-weight: 500; color: var(--main-color);}
.main-company-item .info strong{font-weight: inherit; color:inherit;}


/* -------- 메인 컨텐츠 :: 오른쪽 퀵바 -------- */
#rightQuickBar{position:fixed; bottom:-7rem; right:15px; opacity: 0; z-index:100; transition: bottom ease-out 1.1s, opacity ease-out 0.5s;}
#rightQuickBar a{padding: 0 2.5rem; width:24rem; height:7rem; background: #FEE100 url("../images/main/icon_call.png") 13rem 100% no-repeat; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; color:#222; box-sizing:border-box; border-radius:1rem; display: flex; align-items: center;}
#rightQuickBar a i{margin-left: 0.8rem; transition: var(--transition-custom); transition-property: transform;}
#rightQuickBar a:hover i{transform: translateX(5px);}

.main-wrap.index-active #rightQuickBar{bottom: 75px; bottom: 30px; opacity: 1;}

@media all and ( max-width: 800px ){
	#rightQuickBar a{padding: 0 15px;width: 140px;height: 45px;background: #FEE100 url("../images/main/icon_call.png") 100% 100% no-repeat;background-size: 55px;font-size: 14px;}
}