@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */
.ms-preloader {width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #151515;}

/* ******************  메인 레이아웃(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;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; padding-top: var(--header-height);}
/* #mainVisual:before {position: absolute; content: ''; bottom: 3rem; right: calc((100% - var(--area-wide-width))/2); width: 10.5rem; height: 10.5rem; background: url(/images/main/main_visual_svg.svg)no-repeat center/100%; z-index: 9;}
 */
.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{z-index:1;box-sizing: border-box; padding-bottom: 3rem !important; }

/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;  border-radius: 6rem; overflow: hidden;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.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%;
	padding: 0 5rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:flex-start; padding-top: 17% !important;
	height:100%; box-sizing: border-box;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:2rem; line-height: 1.3; font-weight:600; letter-spacing:-0.02em; color:#fff;}
.main-visual-txt-box .main-visual-txt2{margin-top: 2rem; display: flex; align-items: center;}
.main-visual-txt-box .main-visual-txt2 .txt{font-size:6.4rem; line-height: 1.2; font-weight: 700; letter-spacing:-0.05em; color:#fff;}
.main-visual-txt-box .main-visual-txt2 .line{margin: 0 5.9rem; width: 30rem; height: 0.4rem; background-color: rgba(255,255,255,0.3); border-radius: 0.4rem; position: relative;}
.main-visual-txt-box .main-visual-txt2 .line em{position: absolute; top: 0; left: 0; width: 0; height: 0.4rem; background-color: #fff; border-radius: 0.4rem; display: block; transition: width 5s linear;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.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;
}
.active-item .main-visual-txt1{}
.active-item .main-visual-txt2{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;}
.main-visual-item.active-item .main-visual-txt2 .line em{width: 100%;}

/* 메인 비주얼 :: 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);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; top: calc(39% + 17rem); width:100%; text-align:left; z-index:11; padding: 0 8rem; box-sizing: border-box;}
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; }
.main-visual-con .slick-dots li{float:left; margin-left:1.5rem;}
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:1rem; height:1rem; background-color:#fff; font-size:0; opacity:0.8; border-radius:1rem; transition:var(--transition-custom); transition-property: width, opacity;
}
.main-visual-con .slick-dots li.slick-active button{width: 4rem; opacity:1.0;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; text-align:center; display: flex; flex-direction: column; z-index:9; top: 50%; left:50%; margin-left: 920px; transform: translateY(-50%); /* opacity:0; transform: translateX(200px); */}
.main-scroll-icon .txt {margin-bottom: 0.5rem; margin-left: -0.1rem; font-size: 1.4rem; font-weight: 500; color: #555; text-wrap-mode: nowrap; writing-mode: vertical-rl;}
.main-scroll-icon .circle-box{display:inline-block; vertical-align: middle; position:relative; width:0.8rem; height:1.4rem; border:1px solid #555; border-radius:3rem;}
.main-scroll-icon .circle-box span:before{position:absolute; content:""; left:50%; margin-left: -0.1rem; top:5px; width:0.2rem; height:0.2rem; background-color:#555; opacity:0; animation:mouseScroll 1.5s infinite;}

@keyframes mouseScroll {
	0% { opacity:1; transform: translateY(-3px) }
	100% {opacity:0; transform: translateY(3px)}
}

/* 메인 비주얼 :: 하단 흰색 */
.main-visual-point {position: absolute; content: ''; bottom: 3rem; right: calc((100% - var(--area-wide-width))/2); width: 8rem; height: 8rem; border-radius: 5rem 0 0 0; background-color: #fff; z-index: 9; transition:width 0.4s cubic-bezier(.7, 0, .2, 1), transform 0.6s ease-in-out; }
.main-visual-point:before,
.main-visual-point:after {position: absolute; content: ''; width: 25px; height: 25px; background: url(/images/main/main_visual_svg.svg)no-repeat center/100%; }
.main-visual-point:before {top: -25px; right: 0;}
.main-visual-point:after {bottom: 0; left: -25px;}
.main-visual-point.on {width: 20rem;}

.main-visual-point.hide {transform:translate(8rem, 8rem); }

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; color: var(--main-color);}
.main-tit-box .main-sub-tit{margin-top: 3rem; font-size: 5rem; line-height: 1.36; letter-spacing: -0.05em; font-weight: 700; color: #222; font-family: var(--font-family2);}
.main-tit-box .main-sub-tit b{font-weight: inherit; color: var(--main-color2);}
.main-tit-box .main-btn{margin-top: 5.5rem;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

.cm-btn-style{width: 16rem; height: 5.5rem; font-size: 1.6rem; letter-spacing: -0.031em; font-weight: 600; color: #888; border-radius: 5.5rem; border: 1px solid #ddd; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition:var(--transition-custom);}
.cm-btn-style:not(.not-hover):hover{border-color: var(--main-color2); background-color: var(--main-color2); color: #fff; box-shadow: 0 0.4rem 3rem 0 rgba(0,0,0,0.15);}
.cm-btn-style.not-hover {border-color: var(--main-color2); background-color: var(--main-color2); color: #fff; box-shadow: 0 0.4rem 3rem 0 rgba(0,0,0,0.15);}

/* -------- 메인 컨텐츠 :: 컨텐츠2(ABOUT US) -------- */
#mainAbout{position: relative;padding: var(--header-height) 0 0;}
.main-about-con {position: relative;}
.main-about-left-con {position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; z-index: 1;}
.main-about-left-con .area-box {height: 100%;}
.main-about-left-con .inner {position: relative; width: 50%; height: 100%; padding: 18.5rem 0 7rem; display: flex; flex-direction:column; justify-content: space-between;box-sizing: border-box; z-index: 1;}
.main-about-tab {position: relative;}
.main-about-tab:before {position: absolute; content: ''; width: 1px; height: calc(100% - 6rem); background-color: rgba(34,34,34,0.2); left: 6px; top: 3rem;}
.main-about-tab ul li {padding: 1.7rem 0;}
.main-about-tab ul li a {position: relative; width: 100%; padding-left: 4rem; display: flex; align-items: center; box-sizing: border-box; cursor: pointer;}
.main-about-tab ul li a:before {position: absolute; left: 1px; top: 50%; margin-top: -5.5px; content: ''; width: 11px; height: 11px; border-radius: 11px; border: 2px solid  rgba(34,34,34,0.2); background-color: #fff; box-sizing: border-box;}
.main-about-tab ul li a:after {position: absolute; left: 0; top: 50%; margin-top: -6.5px; content: ''; width: 13px; height: 13px; border-radius: 13px; background-color: #222222; opacity: 0; transition:all 0.5s;}
.main-about-tab ul li a strong {display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: #222; opacity: 0.3; line-height: 1.3; margin-right: 1.5rem; transition:all 0.5s;}
.main-about-tab ul li a p {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; color: #222; opacity: 0.3; line-height: 1.3; transition:all 0.5s;}
.main-about-tab ul li.slick-active a:after {opacity: 1;}
.main-about-tab ul li.slick-active a strong {font-size: 3rem; opacity: 1;}
.main-about-tab ul li.slick-active a p {font-size: 2.6rem; opacity: 1;}

.main-about-right-con {position: relative; display: flex; justify-content: end; overflow: hidden;}
.main-about-right-con:before {position: absolute; content: ''; width: 28.6rem; height: 28.6rem; top: 50%; left: 50%; margin: -14.3rem 0 0 -14.3rem; background: url(/images/main/main_about_txt.png)no-repeat center/cover; z-index: 10; animation: spin 14s infinite linear;}
.main-about-list {position: relative; width: 50%;}
.main-about-list .slick-list {overflow: visible;}
.main-about-list li .bg-img-con {position: relative; width: 100%; height: 0; padding-top: 89.583%; }
.main-about-list li .bg-img-con:before {position: absolute; content: ''; width: 11rem; height: 27rem; left: 0; top: 50%;  transform:translateY(-50%); background: url(/images/main/main_about_svg.svg)no-repeat center/100%; z-index: 1;}
.main-about-list li .bg-img-con span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 0 0 0 6rem; }
.main-about-list li .icon-box {position: absolute; width: 17rem; height: 17rem; top: 50%; left: -8.5rem; transform:translateY(-50%); border-radius:50%; background-color: #000; z-index: 4; display: flex; align-items: center; justify-content: center;}
.main-about-list li .icon-box span {display: block; width: 7.9rem; height: 7rem; }
.main-about-list li .icon-box span img {max-width: 100%;}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { transform: rotate(360deg) ; }
}

@media all and ( min-width: 801px ){
	.main-about-list li .bg-img-con span {transform:translateX(101%); transition: transform 1.0s ease-in-out}
	.animated .main-about-list li .bg-img-con span {transform:none;} 
}

#mainBusinessPerformanceWrap{position: relative; }
/* -------- 메인 컨텐츠 :: 컨텐츠3(BUSINESS) -------- */
#mainBusiness{position: relative; z-index: 2; padding:20rem 0 10rem ;}
.business-cover-list{position: relative; display: flex; overflow:hidden; margin-top:9rem;}
.business-cover-list .list-item{width:25%; position: relative;}
.business-cover-list .list-item .inner{position: relative; width:100%; height:0; padding-top:200%; z-index:1;}
.business-cover-list .list-item .inner .line{position: absolute; content:''; width:1px; height:100%; background:#fff; left:0; top:0;}
.business-cover-list .list-item:nth-child(1) .inner .line{display: none;}
.business-cover-list .list-item .inner .txt-box{position: absolute; bottom:0; left:0; width:100%;  display: flex; flex-direction:column; justify-content:flex-end; padding:0 4rem 4.5rem; box-sizing:border-box; transform: translateY(100%); overflow: hidden; transition: var(--transition-custom); opacity: 1; z-index: 10; margin-bottom: 8rem;}
.business-cover-list .list-item .inner .txt-box .tit{font-size:4rem; line-height:1.2; letter-spacing:-0.05em; color:#fff; font-weight:700; padding-bottom: 3rem; transition:var(--transition-custom);}
.business-cover-list .list-item .inner .txt-box .txt{font-size:1.7rem; line-height:1.625; letter-spacing:-0.05em; color:#fff; font-weight:400;}
.business-cover-list .list-item:hover .inner .txt-box { transform: translateY(0); margin-bottom: 0;}
.business-cover-list .list-item.off .inner .txt-box {opacity: 0.15;}

/* 위아래 흰색 여백생성 */
.business-cover-list .list-item .inner:before{position: absolute; content:''; width:100%; height:100px; background:#fff; left:0; top:0px;}
.business-cover-list .list-item .inner:after{position: absolute; content:''; width:100%; height:100px; background:#fff; left:0; bottom:0px;}
/* 왼쪽 위, 오른쪽 아래 radius 추가 */
.business-cover-list .list-item .inner .plus{position: absolute; width:9rem;height:9rem; background:#fff; background: radial-gradient(circle at 0 0, transparent 71%, #fff 72%); }
.business-cover-list .list-item:nth-child(1) .inner .plus{top:99px; left:0; transform:rotate(180deg);}
.business-cover-list .list-item:nth-child(4) .inner .plus{bottom:99px; right:0; transform:rotate(0deg);}
/* even */
.business-cover-list .list-item:nth-child(even) .inner .txt-box{bottom:100px;}
.business-cover-list .list-item:nth-child(even) .inner:before{top:-100px;}
/* odd */
.business-cover-list .list-item:nth-child(odd) .inner:after{bottom:-100px;}

/* 배경이미지 */
.business-cover-list .list-item .bg{position: absolute; width:100%; height:calc(100% + 20rem); top:-20rem; left:0; background-repeat:no-repeat !important; background-size:cover !important; transition:opacity 0.4s;}
/* nth-child :: 이미지 및 위치잡기 */
.business-cover-list .list-item:nth-child(1){ border-radius:6rem 0 0 0}
.business-cover-list .list-item:nth-child(1) .bg{background-image:url('/images/main/main_business_img01.jpg'); background-position: 0% center;}
.business-cover-list .list-item:nth-child(2) .bg{background-image:url('/images/main/main_business_img02.jpg'); background-position: 33.33% center;}
.business-cover-list .list-item:nth-child(3) .bg{background-image:url('/images/main/main_business_img03.jpg'); background-position: 66.66% center;}
.business-cover-list .list-item:nth-child(4) .bg{background-image:url('/images/main/main_business_img04.jpg'); background-position: 100% center;}
/* cover :: 이미지 및 위치잡기 */
.main-business-img-box{position: relative; background:#fff;}
.business-hover-bg{position: absolute; top:0; left:0; width:100%; height:100%; border-radius:6rem 0 6rem 0; overflow:hidden;}
.business-hover-bg .list-item{position: absolute; width:100%; height:calc(100% + 20rem); top:-20rem; left:0; background:no-repeat; background-size:cover; transition:opacity 0.4s; opacity:0;}
.business-hover-bg .list-item:nth-child(1){background-image:url('/images/main/main_business_img01.jpg'); background-position: 0% center;}
.business-hover-bg .list-item:nth-child(2){background-image:url('/images/main/main_business_img02.jpg'); background-position: 33.33% center;}
.business-hover-bg .list-item:nth-child(3){background-image:url('/images/main/main_business_img03.jpg'); background-position: 66.66% center;}
.business-hover-bg .list-item:nth-child(4){background-image:url('/images/main/main_business_img04.jpg'); background-position: 100% center;}

/* -------- 메인 컨텐츠 :: 컨텐츠4(PERFORMANCE) -------- */
#mainPerformance{position: relative; z-index: 1; /* padding:25rem 0 0; top: 5rem; */ }
.main-performance-con {display: flex; position: relative; justify-content: flex-end;}
.main-performance-con .cm-btn-style {margin-top: 4.5rem;}
.main-performance-con .left-con {position: relative;  width: 53.333%;}
.main-performance-con .left-con .main-performance-left-inner {position: relative;  height: 100vh; padding-top: 25rem;  box-sizing: border-box;}
.main-perform-wrap-bg {position: absolute; width: 100vw; height:200vh; left: calc(-1*((100vw - var(--area-box-width))/2)); bottom: 0; z-index: -1; overflow: hidden; }
.main-perform-wrap-bg span {display: block; width: 100%; height: 100%; position: relative; top: 7rem; background: url("../images/main/main_performance_bg.png") center bottom no-repeat; background-size: cover;}
.main-performance-con .right-con {width: 46.667%; position: relative; z-index: 2; min-height: calc(100vh + 45rem); transform:translateY(55rem); box-sizing: border-box;}
.main-performance-list {display: flex; flex-wrap: wrap; gap:4rem;}
.main-performance-list .list-item { width: calc(50% - 2rem); height: 33rem; border-radius:2.5rem; background-color: #fff; box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.15); padding: 4.5rem 4rem;  box-sizing: border-box; /* opacity: 0; transform:translateY(30px); transition:var(--transition-custom2); transition-property: opacity, transform; */}
@media all and (min-width:801px){
	.main-performance-list .list-item:nth-child(odd) {margin-top: -14.5rem;}
}
.main-performance-list .list-item .info-box {display: flex; flex-direction:column; justify-content: space-between; height: 100%;}
.main-performance-list .list-item .txt-box span {display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--main-color2);}
.main-performance-list .list-item .txt-box .txt {font-size: 2rem; font-weight: 600; letter-spacing: -0.05em; color: #555; line-height: 1.5; margin-top: 2.5rem;} 
.main-performance-list .list-item .num-box {display: flex; justify-content:end; align-items: end;}
/* .animated .main-performance-list li { opacity: 1; transform: none;} 
.animated .main-performance-list li:nth-child(1) {transition-delay:0.6s;}
.animated .main-performance-list li:nth-child(2) {transition-delay:0.9s;}
.animated .main-performance-list li:nth-child(3) {transition-delay:1.2s;}
.animated .main-performance-list li:nth-child(4) {transition-delay:1.5s;} */
/* 카운트 */
.count-num-box{display:flex; align-items:center; font-size:3rem}
.count-num-item-wrap{height:2em; overflow:hidden;}
.count-num-item-wrap .count-num-item-box{height: 64rem;}
.count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; color:var(--main-color); font-weight:600; font-size:6.4rem; letter-spacing: -0.05em; text-align: center;}	 
.count-unit {position: relative; top: -0.3rem; font-size:2.8rem; letter-spacing:-0.05em; color: #555; font-weight: 600; line-height:1.2; margin-left: 0.5rem;}
/* 카운트 active */
.animated .count-num-item-box{animation:count-up-ani 3s forwards;}
.animated .count-num-item-box.down {animation:count-down-ani 3s 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);
    }
} 

.main-performance-flow-wrap {position: absolute; left: calc(-1*((100vw - var(--area-box-width))/2)); bottom: -4rem; width: 100vw; height: 22rem; z-index: 1;}
.main-performance-flow-wrap  .inner {position: relative; width: 100%; height: 22rem; overflow: hidden;}
.main-performance-flow-wrap .flow-txt {width: 100%;height: 100%; position: absolute; top: 0; left: 0; mix-blend-mode: lighten;}
.main-performance-flow-wrap .maskBg {width: 100%; height: 100%;  display: flex; align-items: center; overflow: hidden;} 
.main-performance-flow-wrap .maskBg .marquee {width: 100%; height: 100%; position: relative;}
.main-performance-flow-wrap .maskBg .marquee .absol {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center;}
.main-performance-flow-wrap .maskBg .marquee .absol .mar_ch {display: flex; align-items: center;}
.main-performance-flow-wrap .maskBg .marquee .absol h4 {font-size:20rem; letter-spacing:-0.02em; color: rgba(255,255,255,0.8); font-weight: 700; box-sizing:border-box; white-space:nowrap; margin: 0 2.5rem;}


/* -------- 메인 컨텐츠 :: 컨텐츠5(CONTACT US) -------- */ 
#mainContact{padding:25rem 0 17rem;}
.main-contact-list{margin-top: 6rem; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.main-contact-item{position: relative; width: calc(50% - 2rem);}
.main-contact-item a{position: relative; width: 100%; height: 36rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-radius: 2.5rem;}
.main-contact-item a .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition:var(--transition-custom);}
.main-contact-item .inner {position: relative; z-index: 1;}
.main-contact-item .tit{font-size: 4.6rem; line-height: 1.3; font-weight: 600; color: #fff; transition:var(--transition-custom); transition-property: padding-bottom;}
.main-contact-item .txt{margin-top: 1rem; font-size: 2rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: rgba(255,255,255,0.6); transition:var(--transition-custom); transition-property: opacity;}
.main-contact-item .cm-btn-style{position: absolute; top: 50%; margin-top: 1.2rem; left: 50%; transform:translateX(-50%); border-color: var(--main-color2); background-color: var(--main-color2); color: #fff; box-shadow: 0 0.4rem 3rem 0 rgba(0,0,0,0.15); opacity: 0; transition:var(--transition-custom); transition-property: opacity;}
.main-contact-item a:hover .bg {-webkit-transform: scale(1.1) rotate(0.02deg); 
	-moz-transform: scale(1.08) rotate(0.02deg); 
	-ms-transform: scale(1.08) rotate(0.02deg); 
	-o-transform: scale(1.08) rotate(0.02deg); 
	transform: scale(1.08) rotate(0.02deg);}
.main-contact-item a:hover .tit{padding-bottom: 5rem;}
.main-contact-item a:hover .txt{opacity: 0;}
.main-contact-item a:hover .cm-btn-style{opacity: 1;}


/* ****************** 메인 왼쪽 퀵메뉴 ********************** */
#leftBar{
	position:fixed; 
	top:50%; left:calc((100% - var(--area-wide-width))/2 - 2.5rem); 
	z-index:99; 
	transform: translateY(calc(-1 * (50% - var(--header-height) / 2)));
	/* opacity:0;
	visibility:hidden; */
}
#leftBar ul {position: relative;/* padding: 5rem 0; */ width: 5rem; height: 26rem; background-color: #fff; border-radius: 5rem; display: flex; flex-direction: column; justify-content: center;}
#leftBar ul:before {position: absolute; content: ''; width: 50%; height: calc(100% + 2rem); right: 0; top: -1rem; background: url(/images/main/left_bar_svg.svg)no-repeat center/100%; z-index: 1;transition:all 0.3s; transition-property: opacity;}
#leftBar.visual-off ul:before {opacity: 0;}
#leftBar ul > li{position: relative; z-index: 1;margin:1.25rem 0;}
#leftBar ul > li > a{position: relative; display: flex; justify-content: center; transition: var(--transition-custom); }
#leftBar ul > li > a em {display: block; opacity: 1; width: 8px; height: 8px; border-radius: 8px; background: #D9D9D9; margin: 0 auto; transition: var(--transition-custom);}
#leftBar ul > li > a span {position: absolute; left: 50%;  top: 50%; transform: translate(-50%,-50%); opacity: 0; font-size: 11px; font-weight: 700; color: #000; text-wrap-mode: nowrap; writing-mode: vertical-rl; transition: var(--transition-custom);}
#leftBar ul > li.selected > a {padding: 2rem 0;}
#leftBar ul > li:nth-child(1).selected > a {padding: 1.5rem 0;}
#leftBar ul > li:nth-child(4).selected > a {padding: 3rem 0;}
#leftBar ul > li.selected > a em {opacity: 0;}
#leftBar ul > li.selected > a span {opacity: 1;}
#leftBar ul > li.selected > a:before {opacity: 1;}

#leftBar.black-ver ul > li > a em {background: rgba(0,0,0,0.3);}
#leftBar.black-ver ul > li.selected > a em {background: var(--main-color);}

/* ****************** 메인 오른쪽 퀵메뉴 ********************** */
.main-quick-menu {position: fixed; bottom: 3rem; right: calc((100% - var(--area-wide-width))/2); width: 6rem; height: 6rem; z-index: 99; transition:var(--transition-custom);}
.main-quick-menu a { position: absolute; top: 0; right: 0; display: inline-block;width: 100%; height: 100%; border-radius: 2.5rem; background-color: var(--main-color2); font-size: 2.4rem; color: #fff; box-shadow: 0 0.4rem 1.5rem rgba(0,0,0,0.15); text-align: right; transition:width 0.4s cubic-bezier(.7, 0, .2, 1);}
.main-quick-menu a .txt {position: absolute; top: 50%; transform:translateY(-50%); left: 2.5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; display: inline-block;text-align: left;  vertical-align: middle; opacity: 0; transition: opacity 0.2s ease-in-out; transition-delay: 0s; white-space: nowrap;}
.main-quick-menu a i {position: absolute; right: 0; top: 0; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 400; }
.main-quick-menu.bottom-fixed {bottom: 10rem;}
.main-quick-menu a:hover {width: 18rem; }
.main-quick-menu a:hover .txt {opacity: 1; transition-delay: 0.2s;}

@media (max-width: 1860px){
	#leftBar {left: calc(var(--area-padding) - 2.5rem); }
	.main-quick-menu  {right:var(--area-padding); }
}


/* 이미지(webp 미지원 호환성 보강) */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	#mainBusinessPerformanceWrap .main-bp-wrap-bg span  {background-image: image-set(url("../images/main/main_performance_bg.webp") type("image/webp"), url("../images/main/main_performance_bg.png")  type("image/png"));}
}