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

/* ******************  메인 레이아웃(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{width:100%; height:100vh; position:relative; background-color:#000; overflow:hidden;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
-webkit-perspective: 2000;
-webkit-backface-visibility: hidden;
}
.main-visual-con,
.main-visual-con .slick-list,
.main-visual-con .slick-track,
.main-visual-item{height:100%;}
.main-visual-con.slick-slide[aria-hidden="true"] * {
pointer-events: none;
}
.main-visual-con{z-index:1;}
.main-visual-item{position:relative;}
.main-visual-item.img-item:before {position: absolute; content: ''; width: 100%; height: 35rem; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%); z-index: 2;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-img{width:100%;height:100%;background-size:cover !important;transform: scale(1.1);transition: all 5.8s ;}
.main-visual-item .main-visual-m-img{display:none;}

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

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

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{position:absolute;left:0px; top:0;width:100%; height:100%; display: block;}
.main-visual-txt-box{position: relative; z-index: 2; display:flex; align-items:center; height:100%;box-sizing: border-box;}
.main-visual-txt-inner {width: 100%; display: flex; align-items: center; justify-content: space-between; }
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-logo-box { opacity:0; transform: translateX(-3rem); transition: var(--transition-custom2);/*  padding-right:3rem; */}
.main-visual-txt-box .main-visual-txt1{font-size:5.4rem; line-height: 1.33; font-weight:800; letter-spacing: -0.05em; color:#fff;}
.main-visual-txt-box .main-visual-txt2{margin-top: 3rem; font-size:2.4rem; line-height: 1.8; letter-spacing:-0.02em; font-weight: 600; color:#fff;}
.main-visual-txt-box .main-visual-txt1.main-visual-first-txt {font-size:6rem; margin-bottom: 4rem;}

/* 메인 비주얼 :: 화면 이미지 */
.main-visual-center-img {position: absolute; bottom: -2rem; left: 0; width: 100%; display: flex; justify-content: center; z-index: 1;}
.main-visual-center-img span { opacity:0; transform: translateY(3rem); transition: var(--transition-custom2); transition-delay:0.3s; max-width: 40rem;}
.main-visual-center-img span img {max-width: 100%;}

/* 메인 비주얼 :: active효과 */
.active-item.main-visual-item .main-visual-img{transform: scale(1.0);}
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-logo-box {animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s;}
.active-item.img-item .main-visual-txt1,
.active-item.img-item .main-visual-txt2,
.active-item.img-item .main-visual-logo-box {animation-delay:0.5s;}
.active-item .main-visual-center-img span {opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateY(0); transform: translateY(0);}

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

/* 메인 비주얼 :: custom-box */
.main-visual-custom-box{position: absolute; left:0; bottom: 5rem;width:100%; z-index:9;}

/* 메인 비주얼 :: Dots */
.main-visual-dots .slick-dots {display: flex; width: 100%;}
.main-visual-dots .slick-dots li {width: 25%; }
.main-visual-dots .line-dots {width: 100%; display: flex; flex-direction: column; text-align: left; background: none; border: 0;  padding: 0;}
.main-visual-dots .line-tit { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; opacity: 0.6; margin-top: 2rem; transition:all 0.4s;}
.main-visual-dots li.slick-active .line-tit {opacity: 1;}
.main-visual-dots .line-bar {position: relative;width: 100%; height: 2px; background: rgba(255,255,255,0.2);overflow: hidden;}
.main-visual-dots .line-bar-fill { position: absolute;  left: 0;top: 0; width: 0%; height: 100%;background: #fff;}

/* 메인비주얼 :: 화살표 */
.main-visual-arrow {display: none;}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size: 5.2rem; font-weight: 800; letter-spacing: -0.05em; color: #fff; line-height: 1.2; }
.main-tit-box .main-tit b {font-weight: inherit; color: var(--main-color); font-family: 'Montserrat';}
.main-tit-box .main-txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.6); line-height: 1.4; margin-top: 3.5rem;}
.main-tit-box .main-sub-tit{display:block; margin-bottom:2.5rem; color:var(--main-color); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--main-color);}

/* -------- 메인 컨텐츠 :: 컨텐츠1(브랜드소개) -------- */
#mainContent1 {}
.main-con01-txt-con {position: relative; text-align: center; height: 100vh; z-index: 1;}
.main-con01-txt-con .txt-box {position: absolute; width: 100%; left: 0; top: 50%; transform:translateY(-50%); padding: 0 var(--area-padding); box-sizing: border-box;}
/* .main-con01-txt-con .txt-box.txt-box3 {margin-top: 14rem;} */
.main-con01-txt01 {transition: var(--transition-custom);}
.main-con01-txt01 span {display: block; font-size: 7rem; font-weight: 800; letter-spacing: 0.5em; color: #fff; line-height: 1.4; opacity: 0; transition: var(--transition-custom2);}
.main-con01-txt01 span b {font-weight:inherit; background: linear-gradient(90deg, var(--main-color), var(--main-color) 50%, #fff 0); background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;background-position: 100%;}
.main-con01-txt01 span em {font-weight:inherit; color:  var(--main-color);}
.animated.main-con01-txt01 span {opacity: 1; letter-spacing: -0.05em;}
.animated.main-con01-txt01 span b {animation: text-color-change 1.0s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.6s;}
@keyframes text-color-change {
    from {
        background-position: 100%;
    }
    to {
       background-position: 0%;
    }
}
.main-con01-txt02 {text-align: center;}
.main-con01-txt02 span {display: block; font-size: 9rem; font-weight: 700; letter-spacing: -0.02em; color: #fff;}
.main-con01-txt02 span.bottom-txt {margin-top: 3.5rem;}
.main-con01-txt02 span b {font-weight:inherit; color: var(--main-color);}
.main-con01-txt03 {font-size: 2.6rem; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.6); line-height: 1.5; }
.main-con01-txt03 span {display: block; font-size: 6.2rem; font-weight: 800; letter-spacing: -0.05em; color: #fff; line-height: 1.4; }
.main-con01-txt03 span b {font-weight:inherit;  background: linear-gradient(90deg, var(--main-color), var(--main-color) 50%, #fff 0); background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%; background-position: 100% 0%; }
.main-con01-txt03 span em {font-weight:inherit; color:  var(--main-color);}
.main-con01-txt04 {font-size: 2.6rem; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.6); line-height: 1.5; }
.main-con01-txt04 span {display: block; font-size: 6.2rem; font-weight: 800; letter-spacing: -0.05em; color: #fff; line-height: 1.4; }
.main-con01-txt04 span b {font-weight:inherit;  background: linear-gradient(90deg, var(--main-color), var(--main-color) 50%, #fff 0); background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%; background-position: 100% 0%; }
.main-con01-txt04 span em {font-weight:inherit; color:  var(--main-color);}

/* .main-banner-con {position: relative; width: 100%; }
.main-banner-con .banner-txt { position: fixed; top: 0;  left: 0; width: 100%; height: 100vh; display: flex; align-items: center; z-index: 10; pointer-events: none; opacity: 0;}
.main-banner-con .banner-txt .inner {position: relative; width: 100%;}
.main-banner-con .banner-txt .inner .txt-wrap {position: absolute; width: 100%; left: 0; top: 50%; transform:translateY(-50%);}
.main-banner-con .banner-txt .inner p { font-size: 5.2rem; font-weight: 800; letter-spacing: -0.05em; color: #fff; line-height: 1.34;}
.main-banner { }
.main-banner-item {width: 100vw; height:100vh; }
.main-banner-item.item03 {height: 200vh;}
.main-banner-item .inner { position: relative; width: 100vw; height: 100vh; overflow: hidden; margin: 0 auto;}
.main-banner-item .inner span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.main-banner-item .inner span img {position: absolute;top: 0; left: 0;width: 100%;  height: 100%;object-fit: cover;} */
/* .main-banner-con .main-banner-item .inner {position: relative; overflow: hidden;}
.main-banner-con .main-banner-item .inner span { display: block; width: 100vw; height: 100vh; position: absolute; left: 50%;top: 50%; transform: translate(-50%, -50%);}
.main-banner-con .main-banner-item .inner span img {width: 100vw; height: 100%; object-fit: cover; display: block;}
.main-banner-con .main-banner-item.item01 .inner span img {  transform: scale(0.6, 0.6);} */

.main-banner-txt-con {position: relative; height: 100vh; z-index: 2;}
.main-banner-txt-con .banner-txt {position: absolute; left: calc((100% - var(--area-width))/2); top: 50%; transform: translateY(-50%);}
.main-banner-txt-con .banner-txt .txt {font-size: 5.2rem; font-weight: 800; letter-spacing: -0.05em; color: #fff; line-height: 1.34; /* opacity: 0; transform: translateY(3rem); transition:var(--transition-custom2); */}
.main-banner-txt-con .banner-txt .txt b { font-size: 6.2rem; color: var(--main-color);}

.main-banner-motion-con {position: relative; z-index: 1; height: 300vh;}
.main-banner-item {height: 100vh;}
/* .main-banner-item.item03 {height: 200vh;} */
.main-banner-item.item01 .main-banner-inner {margin-top: -100vh;}
.main-banner-item .motion-box {position: relative; width: 100%;height: 100vh;}
.main-banner-item .motion-box-inner{  position: relative; width: 100%;height: 100vh;will-change: transform, width, height, border-radius;}
.main-banner-item .motion-box-inner span {overflow: hidden; position: absolute;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0); width: 80%; height: 80%; border-radius: 3rem;z-index: 1; display: flex; align-items: center; justify-content: center; will-change: width, height, border-radius;}
.main-banner-item.item01 .motion-box-inner span {width: 55rem; height: 80%;}
.main-banner-item .motion-box-inner span img {width: 100vw; height: 100%; object-fit: cover; display: block;}
.main-banner-item .motion-box-inner span img.display-m {display: none;}

.main-con01-bottom {padding: 20rem 0 ;}
.main-con01-bottom .bottom-txt {text-align: center; font-size: 6rem; font-weight: 800; letter-spacing: -0.05em; color: #fff; line-height: 1.34;}
.main-con01-bottom .bottom-txt b {font-size: 6.2rem; line-height:6rem; color: var(--main-color);}


/* -------- 메인 컨텐츠 :: 컨텐츠2(서비스소개) -------- */
#mainContentBottom {position: relative;}
#mainContent2 {height: 100vh;position: relative; z-index: 1;}
.main-con02 {width: 100%; height: 100%;}
.main-service-list {display: flex; width: 100%; height: 100%;}
.main-service-list > li {position: relative; flex: 1; height: 100%; transition: flex 1.2s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; cursor: pointer; /* pointer-events: none; */} 
.main-service-list > li:before {position: absolute; content: ''; width: 1px; height: 100%; background-color: #000; left: 0; top: 0; z-index: 1;  transition: all 0.4s;}
.main-service-list > li:first-child:before {display: none;}
/* .main-con02.on .main-service-list > li  {pointer-events: visible;} */
.main-service-list > li .inner-wrap {position: relative; width: 100%; height: 100%; }
@media all and ( min-width: 801px ){
	.main-service-list > li .inner-wrap  {transform:translateY(50%); transition: transform 0.8s ease-in-out;}
	.animated .main-service-list > li .inner-wrap {transform:translateY(0%);transition-delay:0.2s;}
	.animated .main-service-list > li:nth-child(2) .inner-wrap {transition-delay:0.35s;}
	.animated .main-service-list > li:nth-child(3) .inner-wrap {transition-delay:0.5s;}
	.animated .main-service-list > li:nth-child(4) .inner-wrap {transition-delay:0.65s;}
}

.main-service-list > li .inner-wrap .bg {width: 100%; height: 100%; overflow: hidden;}
.main-service-list > li .inner-wrap .bg img{display: block;  width: 100%; height: 100%; object-fit: cover;  transition: opacity 0.2s;}
.main-service-list > li .inner-wrap .bg img.basic-img {transition: opacity 0.2s, transform 0.4s;}
.main-service-list > li .inner-wrap .bg .over-img {position: absolute; opacity: 0; top: 0; left: 0; }
.main-service-list > li .inner-wrap .basic-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: end;  transition: all 0.4s;}
.main-service-list > li .inner-wrap .basic-inner:before {position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); opacity: 0; transition: all 0.4s;}
.main-service-list > li .inner-wrap .basic-inner .top-tit {position: absolute; z-index: 1;  top:50%; left: 50%; transform:translate(-50%,-50%); margin-top: -30rem; transition: all 0.4s; text-align: center;}
.main-service-list > li .inner-wrap .basic-inner .top-tit strong {display: block; font-size: 8rem; font-weight: 700; color: #fff; transition: all 0.4s;}
.main-service-list > li .inner-wrap .basic-inner .top-tit span {display: block; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.3; margin-top: 1rem;  transition: all 0.4s;}

.main-service-list > li .inner-wrap .basic-inner dl {width: 100%; padding: 0 2rem 10rem; text-align: center; box-sizing: border-box;  transition: all 0.3s;}
.main-service-list > li .inner-wrap .basic-inner dl dt {font-size: 2rem; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.3; margin-bottom: 2.5rem;}
.main-service-list > li .inner-wrap .basic-inner dl dd img {max-width: 100%;}
.main-service-list > li .over-inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 9rem 6rem 8rem 12rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; opacity: 0;  transition: all 0.4s;}
.main-service-list > li .over-inner:before {position: absolute; content: ''; width: 50%; height: 0; right: 0; top: 0; transition: var(--transition-custom2);}
.main-service-list > li:first-child .over-inner:before {background: linear-gradient(180deg,  rgba(4,176,132,1), rgba(4,176,132,0));}
.main-service-list > li:nth-child(2) .over-inner:before {background: linear-gradient(180deg,  rgba(0,168,255,1), rgba(0,168,255,0));}
.main-service-list > li:nth-child(3) .over-inner:before {background: linear-gradient(180deg,  rgba(37,99,235,1), rgba(37,99,235,0));}
.main-service-list > li:nth-child(4) .over-inner:before {background: linear-gradient(180deg,  rgba(0,58,83,1), rgba(0,58,83,0));}

.main-service-list > li .over-inner .top-con {position: relative; display: flex; align-items: end;  white-space: nowrap; z-index: 1;}
.main-service-list > li .over-inner .top-con .tit {margin-right: 2.5rem; font-size: 8.4rem; font-weight: 700; letter-spacing: -0.02em; color: rgba(255,255,255,0.6); line-height: 1;}
.main-service-list > li .over-inner .top-con .tit b {font-weight: 700; color: #fff;}
.main-service-list > li .over-inner .top-con .txt-box {margin-top: -1rem;}
.main-service-list > li .over-inner .top-con .txt01 {font-size: 2.2rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1.4;}
.main-service-list > li .over-inner .top-con .txt02 {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.8); line-height: 1.6; margin-top: 1rem; }
.main-service-list > li .over-inner .bottom-con {position: relative; z-index: 1;}
.main-service-list > li .over-inner .bottom-con .left-con {width:50rem; padding-bottom: 12rem;}
.main-service-list > li .over-inner .bottom-con .left-con > .tit {font-size: 3.4rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1.4; margin-bottom: 4rem;}
.main-service-list > li .over-inner .bottom-con .left-con > .tit-box { position: relative;display: block;  padding: 1.5rem; width: 100%;  text-align: center; border-radius: 3rem;background: rgba(255,255,255,0.2);  box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.1);margin-bottom: 2.5rem;  box-sizing: border-box; overflow: hidden;}
.main-service-list > li .over-inner .bottom-con .left-con > .tit-box:before { display: block; content: '';position: absolute;top: 0; left: 0; width: 0;height: 100%; background-color: rgba(245,74,72,0.9);  border-radius: 3rem; transition: var(--transition-custom2);}
.main-service-list > li .over-inner .bottom-con .left-con > .tit-box span {position: relative; z-index: 1;  display: inline-block; font-size: 1.8rem;  font-weight: 700; letter-spacing: -0.05em;  color: #fff; line-height: 1.3;}
.main-service-list > li .over-inner .bottom-con .right-con {position: absolute; top: 0; right: 0; width: 49rem; box-sizing: border-box; z-index: 1;}
.main-service-list > li .over-inner .bottom-con .right-con .logo-box img {max-width: 100%;}
.main-service-list > li .over-inner .bottom-con .right-con .logo-box img.display-pc {display: block;}
.main-service-list > li .over-inner .bottom-con .right-con .logo-box img.display-m { display: none;}
.main-service-list > li .over-inner .bottom-con .right-con .txt {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1.66; margin-top: 4rem;}
.main-service-list > li .over-inner .bottom-con .right-con .icon-list {display: flex; flex-wrap: wrap; margin: -0.2rem; padding-top: 3rem;}
.main-service-list > li .over-inner .bottom-con .right-con .icon-list li {width: calc(25% - 0.4rem); margin: 0.2rem; background-color: #fff; border-radius: 1rem; padding: 1.3rem 0.5rem; max-width: 7.5rem; text-align: center; box-sizing: border-box;}
.main-service-list > li .over-inner .bottom-con .right-con .icon-list li .icon {display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto;}
.main-service-list > li .over-inner .bottom-con .right-con .icon-list li .icon img {max-width: 100%;}
.main-service-list > li .over-inner .bottom-con .right-con .icon-list li strong {display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.05em; color: #222; line-height: 1.2; margin-top: 0.7rem;}
.main-service-list > li .over-inner .bottom-con .right-con .more-btn {width: 8rem; height: 8rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; background-color: rgba(255,255,255,0.1); transition: all 0.4s; margin-top: 4.5rem;}
.main-service-list > li .over-inner .bottom-con .right-con .more-btn:hover {background-color: var(--main-color); border-color: var(--main-color);}
.main-service-list > li .over-inner-img {position: absolute; width: 42rem; left: 50%; bottom: 0; transform:translateX(-50%); margin-left: -3rem;}
.main-service-list > li .over-inner-img img {max-width: 100%; position: relative; z-index: 1;}
.main-service-list > li .over-inner-img .inner-circle {position: absolute; top: 0; left: 50%;  transform:translateX(-50%); width: 28rem; height: 28rem; border-radius: 50%;}
.main-service-list > li .over-inner-img .inner-circle:before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; transform-origin:center; border-radius: 50%; transform:scale(0);transition: var(--transition-custom2);}
.main-service-list > li .over-inner-img .inner-circle .inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-service-list > li .over-inner-img .inner-circle .inner:before {position: absolute; content: ''; width: 2.5rem; height: 2.5rem; left: 50%; bottom: -1.25rem; background: var(--main-color); border-radius: 50%;}
.main-service-list > li:first-child .over-inner-img .inner-circle:before {background-color: rgba(4,176,132,0.8);}
.main-service-list > li:nth-child(2) .over-inner-img .inner-circle:before {background-color: rgba(0,168,255,0.8);}
.main-service-list > li:nth-child(3) .over-inner-img .inner-circle:before {background-color: rgba(37,99,235,0.8);}
.main-service-list > li:nth-child(4) .over-inner-img .inner-circle:before {background-color: rgba(0,58,83,0.8);}

.main-service-list > li:nth-child(2) .over-inner .bottom-con .right-con {top: -5rem;}
.main-service-list > li:nth-child(4) .over-inner .bottom-con .left-con {padding-bottom: 20rem;}
.main-service-list > li:nth-child(4) .over-inner .bottom-con .left-con > .tit-box {max-width: 33rem;}
.main-service-list > li:nth-child(4) .over-inner .bottom-con .left-con > .tit {font-size: 4.4rem;}
.main-service-list > li:nth-child(4) .over-inner .bottom-con .right-con {top: -20%;}


@media all and ( min-width: 801px ){
	/* hover */
	.main-service-list > li:not(.not-active, .active):hover .inner-wrap .bg .basic-img {-webkit-transform: scale(1.1) rotate(0.002deg); 
			-moz-transform: scale(1.1) rotate(0.002deg);
			-ms-transform: scale(1.1) rotate(0.002deg);
			-o-transform: scale(1.1) rotate(0.002deg); 
			transform: scale(1.1) rotate(0.002deg);}
}
/* active */
.main-service-list > li.not-active .inner-wrap .basic-inner:before {opacity: 1;}
.main-service-list > li.not-active .inner-wrap .basic-inner .top-tit {margin-top: 0;}
.main-service-list > li.not-active .inner-wrap .basic-inner .top-tit strong {font-size: 5rem; opacity: 0.5;}
.main-service-list > li.not-active .inner-wrap .basic-inner .top-tit span {display: none;}
.main-service-list > li.not-active .inner-wrap .basic-inner dl {opacity: 0;}
.main-service-list > li.active {/* flex: 0 1 81.25%; */  flex: 0 1 85%;}
.main-service-list > li.active .bg .over-img {opacity: 1;}
.main-service-list > li.active .inner-wrap .basic-inner {opacity: 0;}
.main-service-list > li.active .over-inner {opacity: 1;}
.main-service-list > li.on .over-inner:before {height: 100%;}
.main-service-list > li.on .over-inner .bottom-con .left-con .tit-box:before {width: 100%;}
.main-service-list > li.on .over-inner-img .inner-circle:before {transform: scale(1.0)}
.main-service-list > li.on .over-inner-img .inner-circle .inner {animation:spin-ani 8s infinite linear;}

@keyframes spin-ani {
  to { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { transform: rotate(360deg); }
}
 
 /* 카운트 영역 */
.main-service-count-list {display: flex; flex-wrap: wrap;  margin: -0.5rem; padding-bottom: 5rem;}
.main-service-count-item { width: calc(33.33% - 1rem); height: 11rem;border: 1px solid rgba(255,255,255,0.5); border-radius: 1.5rem; box-sizing: border-box;margin: 0.5rem; display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center; padding: 0.5rem; backdrop-filter:blur(1rem)}
.main-service-count-item .item-tit {display: block; font-size: 1.4rem;  font-weight: 600;letter-spacing: -0.05em; color: #fff; line-height: 1.3; margin-bottom: 1rem;}
.main-service-count-item .tit {font-size: 1.9rem; font-weight: 600; letter-spacing: -0.05em;color: #fff; line-height: 1.36;}
.main-service-count-item .number { display: flex; align-items: center; }
.count-num-box{display:flex; align-items:center; font-size:4.2rem}
.count-num-box > p {color: #fff;font-size: 4.2rem; line-height: 4.2rem; font-weight: 600;letter-spacing: -0.025em;} 
.count-unit {position: relative; top: 0;  font-size: 3rem; letter-spacing: -0.025em;color: #fff; font-weight: 700;  margin-left: 0;}
.count-num-item-wrap{height:1em; overflow:hidden;}
.count-num-item-wrap .count-num-item-box{height:42rem;}
.count-num-item-wrap .count-num-item-box .count-num-item { font-size: 4.2rem; letter-spacing: -0.05em;  color: #fff; font-weight: 600;  padding-right: 0.1rem; line-height: 1em;}	 

.main-service-count-item .count-num-box.small { font-size: 3.4rem;}
.main-service-count-item .count-num-box.small > p { font-size: 3.4rem; line-height: 3.4rem;}
.main-service-count-item .count-unit.small { font-size: 2.4rem}
.main-service-count-item .small .count-num-item-wrap .count-num-item-box {  height: 34rem;}
.main-service-count-item .small .count-num-item-wrap .count-num-item-box .count-num-item {font-size: 3.4rem;}

/* 카운트 active */
.count-play .count-num-item-box{animation:count-up-ani 3s forwards;}
.count-play .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);
    }
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(뉴스+파트너) -------- */
#mainContent3 {position: relative; /* position: absolute; width: 100%; top: 0; left: 0; */ z-index: 2; padding: 18.5rem 0 15rem; margin-top: 0; /*  transform:translateY(130vh); */ background-color: #050505;}
.main-news-top {display: flex; align-items: end; margin-bottom: 5.5rem;}
.main-news-top .main-tit-box {width: calc(100% - 20rem); padding-right: 3rem; box-sizing: border-box;}
.main-news-top .main-news-control-con {width: 20rem; display: flex; align-items: center; justify-content: space-between;}
.main-news-control-con .slick-arrow {width: 5.1rem; height: 1.5rem;}
.main-news-control-con .slick-arrow img {max-width: 100%;}
.main-news-control-con .slick-arrow.main-news-next-arrow {margin-left: 2rem;}
.main-news-control-con .more-btn {display: block; font-size: 3.2rem; color: #fff; opacity: 0.4; transition:all 0.4s;}
.main-news-control-con .more-btn:hover {opacity: 1;}

.main-tit-box .main-news-tit {font-weight: 700; letter-spacing: -0.02em;}

.main-card-con {}
.main-cardnews-list .slick-list {margin: 0 -3rem;}
.main-cardnews-list .slick-slide {margin: 0 3rem;}
.main-cardnews-list a {display: block;}
.main-cardnews-list a .img-box {position: relative; width: 100%; height: 0; padding-top: 58.69%;}
.main-cardnews-list a .img-box span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; border-radius:1.5rem; overflow: hidden;}
.main-cardnews-list a .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.5s;}
.main-cardnews-list a .info-box {padding: 3rem 0 1rem;}
.main-cardnews-list a .info-box .item-logo {height: 3rem; line-height: 3rem; margin-bottom: 2.5rem;}
.main-cardnews-list a .info-box .item-logo img {max-height: 100%;}
.main-cardnews-list a .info-box .txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; color: #fff; line-height: 1.6; height: 5em; overflow:hidden;display:block;display: -webkit-box;   -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 2.5rem;}
.main-cardnews-list a .info-box dl {display: flex; align-items: center;}
.main-cardnews-list a .info-box dl dt {padding: 0 1.5rem; height: 3rem; display: flex;line-height: 1.6;  align-items: center; background-color: var(--main-color); border-radius: 1.5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; margin-right: 1rem;     white-space: nowrap;}
.main-cardnews-list a .info-box dl dd {font-size: 1.5rem; font-weight: 500; letter-spacing: -0.05em; color: rgba(255,255,255,0.6); line-height: 1.3;}

.main-news-con {padding-top: 17rem;}
.main-news-list .slick-list {margin: 0 -3rem;}
.main-news-list .slick-slide {margin: 0 3rem;}
.main-news-list a {display: block;}
.main-news-list a .img-box {position: relative; width: 100%; height: 0; padding-top: 58.69%;}
.main-news-list a .img-box span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; border-radius:1.5rem; overflow: hidden;}
.main-news-list a .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.5s;}
.main-news-list a .info-box {padding: 3rem 0 1rem;}
.main-news-list a .info-box .txt {font-size: 2.4rem; font-weight: 500; letter-spacing: -0.05em; color: #fff; line-height: 1.3; height: 2.7em; overflow:hidden;display:block;display: -webkit-box;   -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 2rem;}
.main-news-list a .info-box .txt span {display: inline-block; color: var(--main-color);}
.main-news-list a .info-box .date {font-size: 1.5rem; font-weight: 500;}

@media all and (min-width:801px){
	.main-cardnews-list a:hover .img-box span img {-webkit-transform: scale(1.1) rotate(0.002deg); 
		-moz-transform: scale(1.1) rotate(0.002deg);
		-ms-transform: scale(1.1) rotate(0.002deg);
		-o-transform: scale(1.1) rotate(0.002deg); 
		transform: scale(1.1) rotate(0.002deg);}
		
	.main-news-list a:hover .img-box span img {-webkit-transform: scale(1.1) rotate(0.002deg); 
		-moz-transform: scale(1.1) rotate(0.002deg);
		-ms-transform: scale(1.1) rotate(0.002deg);
		-o-transform: scale(1.1) rotate(0.002deg); 
		transform: scale(1.1) rotate(0.002deg);}
}

.main-parter-con {padding-top: 17rem;}
.main-parter-con .main-tit-box .main-tit {font-size: 5.2rem; line-height: 1.3;}
.main-parter-list-con {position: relative; margin-top: 8rem;}
.main-parter-list-con:before {position: absolute; content: '';  width: calc((100vw - var(--area-width)) / 2); height: 100%;  top: 0;  left: calc(-1 * ((100vw - var(--area-width)) / 2)); z-index: 99; background: linear-gradient(to right, #050505 30%, transparent);}
.main-parter-list-con:after {position: absolute; content: '';  width: calc((100vw - var(--area-width)) / 2); height: 100%;  top: 0;  right: calc(-1 * ((100vw - var(--area-width)) / 2)); z-index: 99; background: linear-gradient(to left,  #050505 30%, transparent);}
.main-partners-list {display:flex; flex-flow:row nowrap;}
.main-partners-list .partner-item {width: 20rem; margin:0 2rem; height: 8rem; }
.main-partners-list .partner-inner {width: 100%;}
.main-partners-list .partner-inner > span {display: block; width: 100%; position: relative; height: 0; padding-top:40%;}
.main-partners-wrap {position: relative; height: 8rem;}
.main-partners-roller {position:absolute; height: 100%;}
.main-partners-middle,
.main-partners-bottom {margin-top: 3rem;}

/* ****************** 
	* Mouse Pointer
********************** */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }
/* base */
.mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width: 0; height:0; border-radius:50%; background-color: rgba(215,32,39,0.9);  transform:translate(-50%,-50%); transition:var(--transition-custom); }
.mouse-pointer .pointer-txt{position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:11rem; height:11rem; font-size:1.5rem; color:#fff; transition:var(--transition-custom); transform: translate(-50%,-50%) scale(0.5); border-radius: 100%; opacity:0; visibility: hidden; }

/* view */
.mouse-pointer.view .pointer-circle {width:11rem; height:11rem; box-shadow: 1rem 1rem 4rem rgba(0,0,0,0.25);}
.mouse-pointer.view .pointer-txt {transform: translate(-50%,-50%) scale(1.0); visibility: visible; opacity: 1;}

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