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

.ms-preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #151515;
}
/* ******************  메인 비주얼 :: 처음들어왔을 때 효과 ********************** */
.main-wrap #header{top: -7.8rem; opacity:0; transition:top ease-out 1s 0.4s, opacity 0.5s 0.4s;}
.active-page .main-wrap #header{top:10px; opacity:1;}
#rightBar{transition:bottom ease-out 1.05s 0.4s, opacity 0.55s 0.4s;}
.main-wrap #rightBar{bottom: -7.8rem; opacity: 0;}
.active-page .main-wrap #rightBar{bottom: 60px; opacity:1;}

@media all and ( min-width: 801px ){
	.main-scroll-icon,
	#mainVisualControls{position:absolute; bottom: -7.8rem; left:0; width:100%; z-index:2; opacity: 0; transition:bottom ease-out 1s 0.4s, opacity 0.5s 0.4s;}
	.active-page .main-scroll-icon{bottom: 80px; opacity: 1;}
	.active-page #mainVisualControls{bottom: 75px; opacity: 1;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual {position:relative; width:100%; height:100%; overflow:hidden;z-index:1; background-color:#000;}   /* 비주얼높이값 이미지에맞게 수정 */

/* video only */
#mainVisual .background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000;}
#mainVisual .background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
#mainVisual .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;
}
#mainVisual .background-video.start iframe{opacity:0.8;filter:Alpha(opacity=80);}

/* swipe */
#mainContent {position:relative; background-color:#fff; z-index:11;}
.main-visual-item{
	position:relative; height:100%; overflow:hidden;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-container,
.main-visual-swiper,
.main-visual-wrapper{position:relative;  z-index:auto; height:100%}
.main-visual-container .swiper-slide {
	overflow: hidden;
	background-color:#333;
}
.main-visual-container .slide-inner {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background-size: cover !important;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
	background-color: #000;
}
.main-visual-item .main-visual-img{
    display:block;
    width:100%;
    height:100%;
    background-size:cover !important;
}
.main-visual-con 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%);
	opacity: 0.8;
}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; height:100%; 
	font-size: 16px; z-index: 2;
}
.main-visual-txt-con .main-visual-txt-box{
	display:flex; align-items:center; justify-content: center;
	text-align: center; padding-top: 20px; width: 100%; height:100%;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}
.main-visual-txt-group{position: relative;}
.main-visual-txt-item{position: absolute; top: 0; left: 0; z-index: -1; visibility: hidden;}
.main-visual-txt-item.active{position: static; z-index: 1; visibility: visible;}
.main-visual-txt-con .main-visual-txt1,
.main-visual-txt-con .main-visual-more-btn{
	/* opacity:0; */
}
.main-visual-txt-con .main-visual-txt1,
.main-visual-txt-con .main-visual-txt2{font-size: 56px; line-height: 1.35; letter-spacing: -0.5px; color: rgba(255,255,255,0.8); overflow: hidden;}
.main-visual-txt-con .main-visual-txt1 span,
.main-visual-txt-con .main-visual-txt2 span,
.main-visual-txt-con .main-visual-more-btn a{display:inline-block; opacity:0;}
.main-visual-txt-con .main-visual-txt1 b,
.main-visual-txt-con .main-visual-txt2 b{font-weight: 600;}
.main-visual-txt-con .main-visual-more-btn{margin-top: 45px; overflow: hidden;}
.main-visual-txt-con .main-visual-more-btn a{position: relative; display: inline-block; z-index: 0; width: 195px; height: 60px; font-size: 16px; letter-spacing: -0.25px; line-height: 60px; text-align: center; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,0.5);}
.main-visual-txt-con .main-visual-more-btn a::before{content: ""; z-index: -1; width: 0; height: 110%; opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); will-change: opacity, width; transition-property: opacity, width; transition-duration: .25s, .25s; transition-delay: .15s, 0s; transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24); background-color: var(--main-color);}

.main-visual-txt-item.active .main-visual-txt1 span,
.main-visual-txt-item.active .main-visual-txt2 span,
.main-visual-txt-item.active .main-visual-more-btn a,
.swiper-slide-active .main-visual-txt-con .main-visual-txt1 span,
.swiper-slide-active .main-visual-txt-con .main-visual-txt2 span,
.swiper-slide-active .main-visual-txt-con .main-visual-more-btn a{
	-webkit-animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both 1.2s;
	animation: text-up-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both 1.2s;
}
.main-visual-txt-item.active .main-visual-txt1 span,
.swiper-slide-active .main-visual-txt-con .main-visual-txt1 span{animation-delay: 0.8s;}
.main-visual-txt-item.active .main-visual-txt2 span,
.swiper-slide-active .main-visual-txt-con .main-visual-txt2 span{animation-delay: 1.1s;}
.main-visual-txt-item.active .main-visual-more-btn a,
.swiper-slide-active .main-visual-txt-con .main-visual-more-btn a{animation-delay: 1.4s;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{
	position: absolute; 
	bottom: -100px; 
	left:0; width:100%; 
	z-index: 1;
}



.main-scroll-icon .wide-box{
	text-align: right;
	text-align: center;
}
.main-scroll-icon .scroll-icon{
	position:relative; 
	width:10px; 
	height:18px; 
	border:2px solid #fff; 
	-webkit-border-radius:30px; 
	border-radius:30px; 
	display: inline-block; 
	vertical-align: middle;

}
.main-scroll-icon .scroll-icon:before{
	position:absolute; content:""; left:4.5px; top:5px; width:2px; height:2px; background-color:#fff; opacity:0; -webkit-border-radius:50%; border-radius:50%;;
	animation:mouseScroll 1.5s infinite;
}
.main-scroll-icon .scroll-txt{margin-left: 15px; font-size: 12px; color: #fff; display: inline-block; vertical-align: middle;}

/* 메인 비주얼 :: 컨트롤러 */
#mainVisualControls{position:absolute; bottom: -100px; left:0; width:100%; z-index:2;}
/* 컨트롤러 :: 이전,다음 */
#mainVisualControls .main-visual-arrow{margin-right: 50px; display: inline-block; vertical-align: middle; position:relative;}
#mainVisualControls .main-visual-arrow:before{position: absolute; top: 50%; left: 50%; margin-top: -6px; margin-left: 0; display: block; content: ''; width: 2px; height: 14px; background-color: rgba(255,255,255,0.2);}
#mainVisualControls .main-visual-arrow button{top: 0; margin-top: 0; display: inline-block; position: static; color:#fff; font-size:24px; text-align:center; width: 34px; height: 34px; background: none;}
#mainVisualControls .main-visual-arrow button:after{display: none;}
#mainVisualControls .main-visual-arrow button + button{margin-left: 25px;}
#mainVisualControls .main-visual-arrow i{display: inline-block; vertical-align: middle;}
/* 컨트롤러 :: 진행바 */
.main-visual-swiper .main-visual-pagination.swiper-pagination{display: inline-block; vertical-align: middle; position: relative; width:auto; left:auto; bottom:auto; top:auto; z-index:999;}
.main-visual-swiper .main-visual-pagination button.swiper-pagination-bullet {position:relative; width:34px; height:34px; background:none; margin-left:30px; border-radius:100%;}
.main-visual-swiper .main-visual-pagination button:first-child {margin-left:0;}
.main-visual-swiper .main-visual-pagination button:before {position: absolute; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; content: ''; width: 8px; height: 8px; background-color: #fff; -webkit-border-radius: 100%; border-radius: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.1s; transition: all 0.1s;}
.main-visual-swiper .main-visual-pagination .circle-box{position:absolute; top: 0; left: 0; width:34px; height:34px; border-radius: 50%; z-index:11; box-sizing:border-box; opacity: 0;}
.main-visual-swiper .main-visual-pagination .circle-box:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:3px solid rgba(255, 255, 255, 0.2); background-color: transparent; content: ''; -webkit-border-radius: 100%; border-radius: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.1s; transition: all 0.1s;}
.main-visual-swiper .main-visual-pagination .circle-box svg{overflow: visible; position: absolute; top: 1px; left: 1px; width: 32px; height: 32px; fill: none; stroke: #fff; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 1;}
.main-visual-swiper .main-visual-pagination .circle-box svg circle {transform-origin: center; stroke: #fff; stroke-dasharray: 401.4743; stroke-dashoffset: 401.4743; stroke-width:10px;}
.main-visual-swiper .main-visual-pagination button.swiper-pagination-bullet-active .circle-box {opacity: 1;}

@media all and ( min-width: 1921px ), ( min-height: 950px ) {
	.main-visual-container .slide-inner{background-size:cover !important;}
}
@media all and ( min-width: 801px ){
	.main-visual-txt-con .main-visual-more-btn a:hover{color: #fff; border-color: var(--main-color);;}
    .main-visual-txt-con .main-visual-more-btn a:hover::before{opacity: 1; width: 110%; transition-duration: .25s, .4s; transition-delay: 0s;}
}

@keyframes mouseScroll {
  0% { opacity:1; transform: translateY(-3px) }
  100% {opacity:0; transform: translateY(3px)}
}
@keyframes text-up-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(100%); 
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:50px;}
.main-tit-box .main-tit{position: relative; padding-left: 90px; font-size:14px; font-weight:600; color: var(--main-color);}
.main-tit-box .main-tit .char{opacity: 0;}
.main-tit-box .main-tit:before{position: absolute; top: 50%; margin-top: -3px; left: 0; display: block; content: ''; width: 0; height: 1px; background-color: var(--main-color); transition: width 0.5s;}
.main-tit-box .main-sub-tit{margin-top:25px; font-size:34px; letter-spacing:-1.25px; font-weight:600; line-height:1.4; color:#272727;}
.main-tit-box .main-sub-txt{margin-top:20px; font-size:18px; letter-spacing:-1px; line-height:1.3; color:#646464;}
.main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* animated */ 
.animated .main-tit:before,
.active-section .main-tit:before{width: 65px; transition-delay:0.3s;}
.active-section .main-tit .char,
.animated .main-tit .char{opacity: 1;}
.active-section .main-tit.splitting .char,
.animated .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;
	animation-delay:0.5s;
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		margin-right:15px
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		margin-right:0
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 공통 :: 이미지 애니메이션 */
.cm-img-ani{position: relative;overflow: hidden;}
.cm-img-ani:after{content:""; position: absolute; left:0; top:0; width:100%; height:100%; background: var(--main-color); display: block;}
.animated.cm-img-ani:after{animation:cmImgAni both 0.8s 0.2s;}

.animated.cm-img-ani.delay1:after{animation-delay:0.45s;}
.animated.cm-img-ani.delay2:after{animation-delay:0.6s;}
.animated.cm-img-ani.delay3:after{animation-delay:0.75s;}

@keyframes cmImgAni {
    0% {transform:translateX(-101%);}
    50% {transform:translateX(0);}
    100% {transform:translateX(101%);}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(BUSINESS AREA) -------- */
#mainBusinessCon{padding:120px 0 140px; background-color: #f3f3f3;}
#mainBusinessCon .main-tit-box{position: relative; padding-right: 370px;}

/* 탭 */
.main-business-tab-wrapper{position: absolute; bottom: 20px; right: 0;}
.main-business-tab{}
.main-business-tab li{position: relative; float:left; padding-left:40px;}
.main-business-tab li:before{position: absolute; top: 50%; margin-top: -2px; left: 20px; display: block; content: ''; width: 4px; height: 4px; background-color: #999; -webkit-border-radius: 100%; border-radius: 100%;}
.main-business-tab li:first-child:before{display: none;}
.main-business-tab li a{display: block; font-size: 18px; line-height: 30px; font-weight: 600; letter-spacing: -0.65px; color: #999;}
.main-business-tab li.on a{color: var(--main-color);}
.main-business-tab-wrapper .move-line{position:absolute; top: 30px; width:100%;}
.main-business-tab-wrapper .move-line span{position: absolute; top: 0; left: 0; display: block; text-align: center;}
.main-business-tab-wrapper .move-line span i{margin-left: 2px; font-size: 16px; color: var(--main-color); transform: rotate(45deg);}

/* Direction Hover */
.main-product-list {position:relative; display:flex; flex-wrap:wrap;}
.main-product-list .main-product-item {position:relative; width:25%; overflow:hidden;}
.main-product-list .main-product-item a {display:block; width:100%; height:100%;}
.main-product-list .main-product-item .hover-img{display:block; position: relative; width:100%; overflow: hidden;}
.main-product-list .main-product-item .bg {display:block; position:relative; width:100%; height: 0; padding-top: 100%;}
.main-product-list .main-product-item .bg img {position: absolute; top: 0; left: 0; width:100%; height: 100%;}
  
.main-product-list .main-product-item .overlay{
  position: absolute; overflow:hidden;
  z-index: 0;
  width:100%;
  height:100%;
  top:0;
  left:0;
  color:#fff;
  /* pointer-events: none; */
  background: rgba(88,135,249,0.85);
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
    transform: rotate3d(1, 0, 0, 90deg);
}
.main-product-list .main-product-item .overlay .inner-box { position:absolute; width:100%; height: 100%; padding:30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
 .main-product-list .main-product-item .overlay .tit {width: 100%; font-size: 26px; letter-spacing:-0.25px; color:#fff; line-height:1.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
 .main-product-list .main-product-item .overlay .txt {margin-top:25px; width: 100%; height: 2.76em; font-size: 16px; letter-spacing:-0.5px; color:#fff; line-height:1.38em; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
 .main-product-list .main-product-item .overlay .btn{margin-top: 20px; width: 100%;}
 .main-product-list .main-product-item .overlay .btn ul{margin: 0 -4px; display: flex; justify-content: center;}
 .main-product-list .main-product-item .overlay .btn li{max-width: 100px; width: calc(50% - 8px); margin: 0 4px;}
 .main-product-list .main-product-item .overlay .btn li a{position: relative; z-index: 0; display: block; width: 100%; height: 36px; line-height: 34px; font-size: 13px; letter-spacing: -0.25px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,0.5); overflow: hidden;}
 .main-product-list .main-product-item .overlay .btn li a::before{content: ""; z-index: -1; width: 0; height: 110%; opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); will-change: opacity, width; transition-property: opacity, width; transition-duration: .25s, .25s; transition-delay: .15s, 0s; transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24); background-color: var(--main-color);}
 .main-product-list .main-product-item .overlay .btn li a i{position: relative; top: 1px; margin-left: 5px; font-size: 15px; line-height: 34px;}

@keyframes in_top {
 from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
}
@keyframes in_right {
 from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes in_bottom {
  from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}
@keyframes in_left {
  from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes out_top {
 from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes out_right {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}
@keyframes out_bottom {
  from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(100%);
    }
}
@keyframes out_left {
  from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
 
/* in */
.in-top .overlay{
  transform-origin: 50% 0;
  animation: in_top .3s ease forwards;
}
.in-right .overlay{
  transform-origin: 100% 50%;
  animation: in_right .3s ease forwards;
}
.in-bottom .overlay{
  transform-origin: 50% 100%;
  animation: in_bottom .3s ease forwards;
}
.in-left .overlay{
  transform-origin: 0% 0%;
  animation: in_left .3s ease forwards;
}
/* out */
.out-top .overlay{
  transform-origin: 50% 0;
  animation: out_top .3s ease forwards;
  margin-top:-1px;
}
.out-right .overlay{
  transform-origin: 100% 50%;
  animation: out_right .3s ease forwards;
  margin-left:1px;
}
.out-bottom .overlay{
  transform-origin: 50% 100%;
  animation: out_bottom .3s ease forwards;
  margin-top:1px;
}
.out-left .overlay{
  transform-origin: 0% 50%;
  animation: out_left .3s ease forwards;
  margin-left:-1px;
}  

@media all and ( min-width: 801px ){
	.main-product-list .main-product-item .overlay .btn li a:hover{color: #fff; border-color: var(--main-color);}
    .main-product-list .main-product-item .overlay .btn li a:hover::before{opacity: 1; width: 110%; transition-duration: .25s, .4s; transition-delay: 0s;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(HOMESCARE SERVICE) -------- */
#mainHomescareCon{padding:120px 0 105px;}

.main-homescare-wrapper{}
.main-homescare-list{}
.main-homescare-item{float: left; width: 33.33%;}
.main-homescare-item a{display: block; position: relative; width: 100%; height: 0; padding-top: 120.6%; padding-top: 600px; overflow: hidden;}
.main-homescare-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s;}
.main-homescare-txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 13%; display: flex; 
flex-direction: column; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-homescare-txt .num{display: inline-block; font-size: 60px;	font-weight: 400; color: #e0bb8b;}
.main-homescare-txt .num:after{margin: 25px 0 30px; display: block; content: ''; width: 20px; height: 3px; background-color: #fff;}
.main-homescare-txt .tit{font-size: 28px; font-weight: 600; color: #e0bb8b;}
.main-homescare-txt .txt{margin-top: 20%; font-size: 16px; line-height: 1.8; letter-spacing: -0.75px; font-weight: 300; color: #fff; min-height: 7.2em; display:block; /* overflow:hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; */}
.main-homescare-txt .btn{margin-top: 30px; font-size: 13px; letter-spacing: -0.25px; color: rgba(255,255,255,0.8);}
.main-homescare-txt .btn i{position: relative; top: 2px; margin-left: 5px; font-size: 15px; color: #fff; transition: all 0.6s;}

.main-homescare-list .slick-dots{position:absolute; left:0; bottom: -50px; width:100%; text-align:center; z-index:11;}
.main-homescare-list .slick-dots li{display:inline-block; vertical-align:top; margin-left:15px;}
.main-homescare-list .slick-dots li:first-child{margin-left:0}
.main-homescare-list .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:15px; height:15px; background-color:#fff; font-size:0; border: 1px solid #c2c2c2; -webkit-border-radius:50%; border-radius:50%;
}
.main-homescare-list .slick-dots li.slick-active button{background-color:#3b3b3b; border-color: #3b3b3b;}

@media all and ( min-width: 801px ){
	.main-homescare-item a:hover .main-homescare-bg{transform: scale(1.1) rotate(0.02deg);}
	.main-homescare-item a:hover .main-homescare-txt .btn i{transform: rotate(180deg);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(REVIEW) -------- */
#mainReviewCon{padding: 130px 0 200px;}
#mainReviewCon .main-tit-box .main-tit{color: #fff;}
#mainReviewCon .main-tit-box .main-tit:before{background-color: rgba(255,255,255,0.5);}
#mainReviewCon .main-tit-box .main-sub-tit{color:#fff;}
#mainReviewCon .main-tit-box .main-sub-txt{color:rgba(255,255,255,0.7);}

.main-review-wrapper{}
.main-review-list{margin: 0 -15px;}
.main-review-item{float: left; width: calc(33.33% - 30px); margin: 0 15px;}
.main-review-item a{display: block; width: 100%; padding: 50px 11% 55px; background-color: rgba(34,34,34,0.7); -webkit-box-sizing: border-box; box-sizing: border-box; transition: background-color 0.3s;}
.main-review-txt{}
.main-review-txt .tit{font-size: 26px; line-height: 1.46; font-weight: 600; color: #fff; height: 2.92em; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-review-txt .txt{margin-top: 20px; font-size: 16px; line-height: 1.8; font-weight: 300; letter-spacing: -0.75px; color: rgba(255,255,255,0.5); height: 7.2em; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.main-review-info{margin-top: 55px; padding-right: 110px; position: relative;}
.main-review-info em{font-size: 14px; letter-spacing: -0.25px; color: #fff; display: inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-review-info .btn{position: absolute; top: -2px; right: 0; font-size: 13px; letter-spacing: -0.25px; color: rgba(255,255,255,0.8);}
.main-review-info .btn i{position: relative; top: 2px; margin-left: 5px; font-size: 15px; color: #fff; transition: all 0.6s;}

.main-review-list .slick-arrow{position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px;}
.main-review-list .slick-prev{left: -65px;}
.main-review-list .slick-next{right: -65px;}
.main-review-list .slick-arrow i{font-size: 48px; color: #fff; transition: transform 0.2s;}

.main-review-list .slick-dots{position:absolute; left:0; bottom: -60px; width:100%; text-align:center; z-index:11; visibility: hidden;}
.main-review-list .slick-dots li{display:inline-block; vertical-align:top; margin-left:15px;}
.main-review-list .slick-dots li:first-child{margin-left:0}
.main-review-list .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:15px; height:15px; background-color:#fff; font-size:0; border: 1px solid #c2c2c2; -webkit-border-radius:50%; border-radius:50%;
}
.main-review-list .slick-dots li.slick-active button{background-color:#3b3b3b; border-color: #3b3b3b;}

@media all and ( min-width: 801px ){
	.main-review-item a:hover{background-color: #ef685e;}
	.main-review-item a:hover .main-review-info .btn i{transform: rotate(180deg);}
	.main-review-list .slick-prev:hover i{transform: translateX(-10px);}
	.main-review-list .slick-next:hover i{transform: translateX(10px);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(CUSTOMER) -------- */
#mainCustomerCon{padding: 160px 0 145px; position: relative; background-color: #f3f3f3; overflow: hidden;}
#mainCustomerCon:before{position: absolute; top: 0; left: 0; content: ''; width: 841px; height: 1387px; background: url("../images/main/main_customer_bg.png") left top no-repeat;}

.main-customer-con{display: flex;}
.main-customer-con + .main-customer-con{margin-top: 120px;}
.main-customer-tit{width: 26%;}
.main-customer-tit h5{margin-bottom: 35px; font-size: 60px; font-weight: 600; letter-spacing: -0.25px; color: #272727;}
.main-customer-tit .btn{font-size: 13px; letter-spacing: -0.25px; color: #595959; transition: color 0.3s;}
.main-customer-tit .btn i{position: relative; top: 2px; margin-left: 5px; font-size: 15px; transition: transform 0.6s;}
.main-customer-board{width: 74%;}

/* faq */
.main-customer-faq{border-top:3px solid #000;}
.main-customer-faq .faq-item{border-bottom:1px solid #dadada;}
.main-customer-faq .faq-item dt{position:relative; padding:20px 85px 20px; cursor:pointer;}
.main-customer-faq .faq-item dt .question-icon,
.main-customer-faq .faq-item dd .answer-icon{position:absolute; top:15px; left:34px; width:38px; height:38px; line-height:38px; text-align:center; color:#fff; font-size:17px; font-weight:400; background-color: var(--main-color); border-radius:100%;}
.main-customer-faq .faq-item dd .answer-icon{background-color:#222;}
.main-customer-faq .faq-item dt .faq-title{display:block; color:#646464; font-size:18px; font-weight:400; letter-spacing:-0.75px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top; transition: color 0.3s;}
.main-customer-faq .faq-item dt .arrow{position:absolute; top:26px; right:35px; width:13px; height:17px;}
.main-customer-faq .faq-item dt i{font-size:17px; color:#000;}
.main-customer-faq .faq-item.open dt .arrow i{margin-top:-2px; transform:rotate(-180deg);}
.main-customer-faq .faq-item.open dt .faq-title{white-space:normal; text-overflow:unset;}
.main-customer-faq .faq-item dd{display:none; position:relative; border-top:1px solid #dadada; padding:22px 85px;}
.main-customer-faq .faq-item dd .editor{font-size:15px; line-height:1 .5; color:#646464;}
.main-customer-faq-btn{margin-top: 25px; display: flex; justify-content: flex-end;}
.main-customer-faq-btn a{position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; text-align: center; background-color: var(--main-color); border: 1px solid var(--main-color); overflow: hidden; font-size: 18px; letter-spacing: -0.25px; color: #fff; box-sizing: border-box; transition: all 0.3s;}
.main-customer-faq-btn a::before{content: ""; z-index: -1; width: 0; height: 110%; opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); will-change: opacity, width; transition-property: opacity, width; transition-duration: .25s, .25s; transition-delay: .15s, 0s; transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24); background-color: #fff;}

/* news */
.main-customer-news{display: flex; flex-wrap:wrap; margin: 0 -4%;}
.main-customer-news-item{width: 25.33%; margin: 0 4%;}
.main-customer-news-item a{padding-top: 25px; border-top: 3px solid #000; display: block; width: 100%; transition: border-color 0.3s;}
.main-customer-news-item a .date{display: block; font-size: 13px; line-height: 1.3; color: rgba(0,0,0,0.5);}
.main-customer-news-item a .tit{margin-top: 20px; font-size: 26px; line-height: 1.46; font-weight: 600; letter-spacing: -0.75px; color: #000; transition: color 0.3s;}

@media all and ( min-width: 801px ){
	.main-customer-tit .btn:hover{color: var(--main-color);}
	.main-customer-tit .btn:hover i{transform: rotate(180deg);}
	.main-customer-faq .faq-item dt:hover .faq-title{color: var(--main-color);}
	.main-customer-faq-btn a:hover{background-color: transparent; color: var(--main-color); border-color: var(--main-color);}
	.main-customer-faq-btn a:hover::before{opacity: 1; width: 110%; transition-duration: .25s, .4s; transition-delay: 0s;}
	.main-customer-news-item a:hover{border-color: var(--main-color);}
	.main-customer-news-item a:hover .tit{color: var(--main-color);}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(PR) -------- */
#mainPrCon{padding: 125px 0;}

#mainPrCon .video-iframe-wrapper{position:relative; max-width:1100px; margin:0px auto; overflow:hidden; box-shadow: 17px 17px 24px 0 rgba(0,0,0,0.5);}
#mainPrCon .video-iframe-box{position:relative; padding-top:56.36%; height:0; background-color:#000;}
#mainPrCon .video-iframe-box iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
#mainPrCon .video-cover-box{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer ;  }
#mainPrCon .video-cover-box:after{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background: url('../images/main/main_pr_icon_play.png') 50% 50% no-repeat; content:"";}
#mainPrCon .video-cover-box .thumb{display:block; width:100%; height:100%; transition:all 0.3s}
#mainPrCon .video-cover-box .thumb img{width:100%; height:100%;}

.main-sns-wrapper{margin-top: 40px;}
.main-sns-list{text-align: center; font-size: 0;}
.main-sns-list li{margin-left: 140px; position: relative; display: inline-block; vertical-align: middle;}
.main-sns-list li:first-child{margin-left: 0;}
.main-sns-list li:before{position: absolute; top: 50%; margin-top: -15px; left: -70px; content: ''; width: 2px; height: 30px; background-color: rgba(255,255,255,0.2);}
.main-sns-list li:first-child:before{display: none;}
.main-sns-list li a{display: block;}
.main-sns-list li a span{margin-right: 25px; font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.5); display: inline-block; vertical-align: middle;}
.main-sns-list li a img, .main-sns-list li a i{display: inline-block; vertical-align: middle;}
.main-sns-list li a i{font-size: 76px; color: #fff;}

@media all and ( min-width: 801px ){
	#mainPrCon .video-cover-box:hover .thumb{transform: scale(1.1) rotate(0.002deg);}
	.main-sns-list li a:hover img,
	.main-sns-list li a:hover i{animation: navani 0.3s ease-in-out;}
}
@keyframes navani{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}


/* -------- 메인 컨텐츠 :: 컨텐츠6(CONTACT) -------- */
#mainContactCon{padding: 100px 0; background-color: #f3f3f3;}

.main-contact-wrapper{}
.main-contact-list{display: flex; flex-wrap:wrap;}
.main-contact-item{position: relative; width: 25%; transition: all 0.3s; background-color: #fff;}
.main-contact-item a{padding: 58px 20px 60px; display: block; text-align: center;}
.main-contact-item a:before{position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; display: block; content: ''; content: ''; border: 1px solid #d5d5d5; transition: border-color 0.3s;}
.main-contact-img{}
.main-contact-img img{display: inline-block; height: 48px;}
.main-contact-txt{margin-top: 35px;}
.main-contact-txt h5{font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.5px; color: var(--main-color);}
.main-contact-txt p{margin-top: 20px; font-size: 16px; line-height: 1.8; letter-spacing: -0.5px; color: #646464;}

.main-contact-item.active{z-index: 1; box-shadow: 30px 30px 49px -15px rgba(0,0,0,0.11);}
.main-contact-item.active a:before{border-color: var(--main-color);}

@media all and ( min-width: 801px ){
	.main-contact-item a:hover .main-contact-img img{animation: navani 0.3s ease-in-out;}
}