/* 공통 */ 
.m_tit{position:relative;z-index: 1; }
.m_tit p{font-weight:bold; font-size:16px; color: var(--mainColor); margin-bottom:10px;}
.m_tit h2{font-weight:200; font-size:55px; color: #222; }
.m_tit h2 span{font-weight:600; line-height: 1.35;}
.m_tit h4{color: #666; font-size:18px; font-weight:300; margin-top: 15px;}
.m_tit.c{text-align: center;}
.m_tit.w h2{color: #fff;}
.m_tit.f45 h2{font-size:45px;}

.btn{position:relative; display:inline-block; vertical-align: top; height: 50px; overflow: hidden; border-radius:25px;}
.btn a{display:inline-block; vertical-align: top; padding: 0 40px; width: 100%; height: 100%; border:1px solid 
rgba(255, 255, 255, 0.3); color: #fff; font-weight:500; font-size:15px; line-height: 48px; border-radius:25px;transition: 0.4s; }
.btn a .icon{display:inline-block; vertical-align: top; width: 15px; height: 15px; background:url(/img/main/arrow_forward.svg) 50% 50% no-repeat; margin: 17px 0 17px 10px; transition: 0.4s}
.btn .hover_bg{display: block; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 0; height: 0;  border-radius: 50%; background: #fff; transition: width 0.3s linear, height 0.3s linear; z-index: -1; user-select: none; pointer-events: none;}

.btn.c .hover_bg{background: var(--mainColor);}
.btn.c a{border-color:rgba(34, 172, 56, 0.3); color: var(--mainColor);}
.btn.c a .icon{background:url(/img/main/arrow_forward_h.svg) 50% 50% no-repeat;}

.btn:hover .hover_bg{width: 500px; height: 500px; transition: width 0.6s linear, height 0.6s linear;}
.btn:hover a{color: var(--mainColor);}
.btn:hover a .icon{background:url(/img/main/arrow_forward_h.svg) 50% 50% no-repeat;}
.btn.c:hover a{border-color:rgba(255, 255, 255, 0.3); color: #fff;}
.btn.c:hover a .icon{background:url(/img/main/arrow_forward.svg) 50% 50% no-repeat;}

.dummy{position:fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 600;}

.main{}
.main .mv{position:relative; z-index: 10}
.main .mv .slide_wrap{position:relative; }
.main .mv .slide_wrap .slide_ctn{}
.main .mv .slide_wrap .slide_ctn .item{position:relative; }
.main .mv .slide_wrap .slide_ctn .item::before{content:""; position:absolute; top: 0; left: 0; width: 50%; height: 100vh; background: #fff; opacity: 0.1; z-index: 1;}
.main .mv .slide_wrap .slide_ctn .item::after{content:""; position:absolute; top: 0; right: 0; width: 50%; height: 100vh; background: #fff; opacity: 0.1;}
.main .mv .slide_wrap .slide_ctn .item .bg{height: 100vh; width: 100%; background: 50% 50% /cover no-repeat; background-image:url(/img/main/mv01.png);}
.main .mv .slide_wrap .slide_ctn .item .bg02{background-image:url(/img/main/mv02.png);}
.main .mv .slide_wrap .slide_txt{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; padding: 0 180px;}
.main .mv .slide_wrap .slide_txt .item{}
.main .mv .slide_wrap .slide_txt .item h2{font-weight:200; font-size:80px; color: #fff; text-align: left; opacity: 0;}
.main .mv .slide_wrap .slide_txt .item h2:last-of-type{text-align: right; transform:translateX(160px);}
.main .mv .slide_wrap .slide_txt .item h2 span{font-weight:700;}
.main .mv .slide_wrap .slide_txt .item.item01 h2{padding-left: 145px;}
.main .mv .slide_wrap .slide_txt .item.item01 h2:last-of-type{padding-right: 145px; padding-left: 0;}
.main .mv .slide_wrap .slide_ui{}
.main .mv .slide_wrap .slide_ui .scroll{position:absolute; bottom: 60px; left: 50%; transform:translateX(-50%); text-align: center; color: #fff;}
.main .mv .slide_wrap .slide_ui .scroll p{font-weight:600; font-size:16px;}
.main .mv .slide_wrap .slide_ui .scroll .icon{margin-top: 15px; opacity: 0.7;}
.main .mv .slide_wrap .slide_ui .scroll .icon i{font-size:16px;}
.main .mv .slide_wrap .slide_ui .slide_btn{position:absolute; top: 50%; right: 59px; transform:translateY(-50%);}
.main .mv .slide_wrap .slide_ui .slide_btn .btn_box{position:relative; width: 40px; height: 40px; text-align: center; margin-bottom:15px; cursor: pointer;}
.main .mv .slide_wrap .slide_ui .slide_btn .btn_box:last-of-type{margin-bottom:0;}
.main .mv .slide_wrap .slide_ui .slide_btn .btn_box svg{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) rotate(-90deg);}
.main .mv .slide_wrap .slide_ui .slide_btn .btn_box svg circle{stroke-dasharray: 125;}
.main .mv .slide_wrap .slide_ui .slide_btn .btn_box p{font-size:14px; color: #fff; line-height: 40px;}
.main .mv .slide_wrap .line .left,
.main .mv .slide_wrap .line .right{position:absolute; top: 105px; width: 1px; height: calc(100vh - 106px); background: rgba(255, 255, 255, 0.1);}

.main .mv .slide_wrap .slide_ui .scroll .icon{animation:moveScroll 1s linear infinite alternate}
.main .mv .slide_wrap .slide_ctn .item.slick-active .bg{animation:zoom 4s 0.2s linear both}
.main .mv .slide_wrap .slide_ctn .item.slick-active::before{animation:mvLeftWidth 1.5s 0.5s both}
.main .mv .slide_wrap .slide_ctn .item.slick-active::after{animation:mvRightWidth 1.5s 0.5s both}

.main .mv .slide_wrap .slide_txt .item.slick-active h2:first-of-type{animation:mvRight 2s 1s both}
.main .mv .slide_wrap .slide_txt .item.slick-active h2:last-of-type{animation:mvLeft 2s 1s both}

@keyframes mvLeft{
	0%{transform:translateX(140px); opacity:0;}
	100%{transform:translateX(0); opacity: 1;}
}

@keyframes mvRight{
	0%{transform:translateX(-140px); opacity:0;}
	100%{transform:translateX(0); opacity: 1;}
}
@keyframes zoom{
	0%{transform:scale(1.2);}
	100%{transform:scale(1);}
}
@keyframes moveScroll{
	0%{transform:translateY(0px);}
	100%{transform:translateY(-14px)}
}
@keyframes mvLeftWidth{
	0%{left: 0; width: 50%;}
	100%{width: 0;}
}

@keyframes mvRightWidth{
	0%{right: 0; width: 50%;}
	100%{width: 0;}
}

.animation_wrap{overflow: hidden;}
.m_biz{position:relative; padding: 232px 180px 244px; z-index: 1;}
.m_biz::after{content:"";position: absolute; width: 477px; height: 477px; left: -108px; top: -158px; background: var(--mainColor); opacity: 0.2; filter: blur(167px);}
.m_biz .line .left{background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 40.12%), #EEEEEE;}
.m_biz .line .right{background: linear-gradient(360deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 47.58%), #EEEEEE;}
.m_biz .line .top{background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) -8.02%, rgba(0, 0, 0, 0) 50%), #EEEEEE;}
.m_biz .line .bot{background: linear-gradient(270deg, rgba(0, 0, 0, 0.2) -4.35%, rgba(0, 0, 0, 0) 29.97%), #EEEEEE;}

.m_biz .slide_wrap{position:relative; z-index: 1; margin-top: -70px;}
.m_biz .slide_wrap .slide_ctn{margin-top: 20px; overflow: hidden;}
.m_biz .slide_wrap .slide_ctn .slick-list{padding: 50px 0; margin-right: -40px;}
.m_biz .slide_wrap .slide_ctn .item{position:relative; box-shadow: 0px 15px 34px rgba(0, 0, 0, 0.1); border-radius: 10px; text-align: center; padding: 50px 0; margin-right: 40px; background: #fff;}
.m_biz .slide_wrap .slide_ctn .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.m_biz .slide_wrap .slide_ctn .item .in{transition:0.5s; filter: blur(0);}
.m_biz .slide_wrap .slide_ctn .item .in p{font-weight:500; font-size:18px; margin-top: 28px;}
.m_biz .slide_wrap .slide_ctn .item .in .svg_box{}
.m_biz .slide_wrap .slide_ctn .item .in .svg_box svg,
.m_biz .slide_wrap .slide_ctn .item .in .svg_box svg g{stroke-dasharray: 362; stroke-dashoffset: 362; transition: 4s 0.4s;}
.m_biz .slide_wrap .slide_ctn .item .hover{position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(42, 102, 52, 0.8); box-shadow: 0px 15px 34px rgba(0, 0, 0, 0.1); border-radius: 10px; opacity: 0; transition:0.5s}
.m_biz .slide_wrap .slide_ctn .item .hover .icon{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); border:1px solid rgba(255, 255, 255,0.2); width: 40px; height: 40px; text-align: center;}   
.m_biz .slide_wrap .slide_ctn .item .hover .icon span{position:relative; display:inline-block; width: 15px; height: 1px; vertical-align: top; background: #fff; margin: 19px 0;}
.m_biz .slide_wrap .slide_ctn .item .hover .icon span::after{content:""; margin-top: -7px; display:inline-block; width: 1px; height: 15px; vertical-align: top; background: #fff;}
.m_biz .slide_wrap .slide_ui{}
.m_biz .slide_wrap .slide_ui .slide_btn{display:flex; justify-content:flex-end;}
.m_biz .slide_wrap .slide_ui .slide_btn > div{position:relative; width: 60px; height: 60px; border-radius:50%; border:1px solid #ddd; text-align: center; cursor: pointer; margin-right: 20px;}
.m_biz .slide_wrap .slide_ui .slide_btn > div:last-of-type{margin-right: 0;}
.m_biz .slide_wrap .slide_ui .slide_btn > div svg{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); }
.m_biz .slide_wrap .slide_ui .slide_btn > div svg circle{stroke-dasharray: 185; stroke-dashoffset: 185; transition: 1s;}
.m_biz .slide_wrap .slide_ui .slide_btn > div i{font-weight:400; font-size:16px; color: #ddd; line-height: 60px; transition: 1s;}
.m_biz .slide_wrap .slide_bar{position:relative; margin-top: 10px; width: 100%; height: 1px; background: rgba(0,0,0,0.1);}
.m_biz .slide_wrap .slide_bar .bar{position:absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--mainColor); transition:0.5s}

.m_about{position:relative; height: 100vh; background: #000;}
.m_about::before{content:"";position: absolute; width: 477px; height: 477px; right: -66px; bottom: -110px; background: var(--mainColor); opacity: 0.25; filter: blur(167px);}
.m_about::after{content:"";position: absolute; width: 530px; height: 530px; right: -169px; top: -260px; background: var(--mainColor); opacity: 0.2; filter: blur(167px);}
.m_about .fix_ctn{overflow: hidden; height: 100vh; position:relative;}
.m_about .fix_ctn::after{content:"";position: absolute; width: 717px; height: 717px; left: -129px; top: -130px; background: var(--mainColor); opacity: 0.2; filter: blur(197px);}
.m_about .fix_ctn .bg{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 300px; height: 300px; background:url(/img/main/main01.png) 50% 50% /cover no-repeat; border-radius:15px; transition:2s; z-index: 10;}
.m_about .fix_ctn .txt{}
.m_about .fix_ctn .m_tit{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; z-index: 10;  transition:2s 1s}
.m_about .fix_ctn .m_tit.ani02{opacity: 0; left: 20%; filter:blur(30px); transition:2s 1s}
.m_about .fix_ctn .m_tit .btn{position:absolute; bottom: -135px; left: 50%; transform:translateX(-50%);	width: auto; height: 50px; overflow: hidden; border-radius:25px;}
.m_about .fix_ctn.on .bg{width: 100%; height: 100vh; border-radius:0}
.m_about .fix_ctn.on .ani01{filter:blur(30px); left: 80%; opacity: 0;}
.m_about .fix_ctn.on .ani02{filter:blur(0); left: 50%; opacity: 1; z-index: 20;}

.m_contact{position:relative; overflow: hidden;}
.m_contact .mcon{position:relative;  padding: 52px 0 0;}
.m_contact .mcon02{position:relative;  padding: 52px 0 0; overflow: hidden;}
.m_contact .mcon01::before{content:"";position: absolute; width: 477px; height: 477px; left: -127px; top: -101px; background: var(--mainColor); opacity: 0.25; filter: blur(167px);}
.m_contact .mcon02::before{content:"";position: absolute; width: 525px; height: 525px; right: -47px; top: -96px; background: var(--mainColor); opacity: 0.25; filter: blur(167px);}
.m_contact .mcon01 .line .left{background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 59.9%), #EEEEEE;}
.m_contact .mcon01 .line .right{background: rgba(238, 238, 238, 0.1); z-index: 1;}
.m_contact .mcon01 .line .top{background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) -11.64%, rgba(0, 0, 0, 0) 20.6%), #EEEEEE;}
.m_contact .mcon01 .line .bot{bottom: -1px; background: #eee;}
.m_contact .mcon02 .line .top{background: linear-gradient(270deg, rgba(0, 0, 0, 0.2) -4.35%, rgba(0, 0, 0, 0) 29.97%), #EEEEEE;}
.m_contact .mcon02 .line .left{background: rgba(238, 238, 238, 0.1); z-index: 1;}
.m_contact .mcon02 .line .right{background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 59.9%), #EEEEEE;}
.m_contact .mcon02 .line .bot{bottom: 0;background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) -11.64%, rgba(0, 0, 0, 0) 20.6%), #EEEEEE;}
.mcon .inner{display:flex; align-items:flex-end; padding-right: 150px; overflow: hidden;}
.mcon .inner .txt{margin-bottom:132px; padding-left: 65px;}
.mcon .inner .txt .btn{margin-top: 85px;}
.mcon .inner.right{padding-right: 0; justify-content:space-between; padding-left: 150px; }
.mcon .inner.right .txt{padding-left: 100px;}
.mcon .inner.right figure{order:3;}

.m_logo_box{position:relative; padding:52px 0;}
.m_logo_box .line span{background: #eee;}
.m_logo_box .line .left.icon_top::after{top: -4px;}
.m_logo_box .line .right.icon_top::after{top: -4px;}
.m_logo_box .w1400{overflow: hidden; width: 72.9166%; max-width: none; padding: 0 150px;}
.m_logo_box .img_list{display:block; margin-top: 0; white-space: nowrap; padding: 155px 0;}
.m_logo_box .img_list .img{animation:moveLogo 10s linear infinite }
.m_logo_box .img_list .img figure{display:inline-block; vertical-align: middle; width: 2202px; margin-right: 20px;}

.ani{opacity: 0;}
.ani.move{opacity: 1;}
.m_tit.move{animation:fadeUp 1s both}
.m_biz .slide_wrap.move{animation:fadeUp 1s both}
.m_biz .slide_wrap.move .slide_ctn .item .in .svg_box svg,
.m_biz .slide_wrap.move .slide_ctn .item .in .svg_box svg g{stroke-dashoffset: 0;}
.mcon .inner figure.move{animation:fadeImgL 1s both}
.mcon .inner.right figure.move{animation:fadeImgR 1s both}
.mcon .inner .txt.move{animation:fadeUp 1s both}


@keyframes moveLogo{
	0%{transform:translateX(0);}
	100%{transform:translateX(-2225px);}
}

@keyframes fadeUp{
	0%{transform:translateY(80px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}

@keyframes fadeImgR{
	0%{transform:translateX(380px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}

@keyframes fadeImgL{
	0%{transform:translateX(-380px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}

@media (hover: hover){
	.m_biz .slide_wrap .slide_ui .slide_btn > div:hover svg circle{stroke-dashoffset: 0;}
	.m_biz .slide_wrap .slide_ui .slide_btn > div:hover i{color: var(--mainColor);}
	.m_biz .slide_wrap .slide_ctn .item:hover .in{filter: blur(4.5px);}
	.m_biz .slide_wrap .slide_ctn .item:hover .hover{opacity: 1;}
}

@media (max-width: 1800px){
	.main .mv .slide_wrap .slide_txt .item.item01 h2{padding-left: 4vw;}
	.main .mv .slide_wrap .slide_txt .item.item01 h2:last-of-type{padding-left: 0; padding-right: 4vw;}
	.main .mv .slide_wrap .slide_txt .item h2{font-size:4.3vw}

	.mcon .inner .txt{width: 50%; padding-left: 40px;}
	.mcon .inner.right .txt{padding-left: 40px;}
	.mcon .inner figure{width: 50%;}
}

@media (max-width: 1600px){
	.main .mv .slide_wrap .slide_txt{padding: 0 140px;}
	.m_biz{padding: 150px 140px;}

	.mcon .inner{padding-right: 140px;}
	.mcon .inner.right{padding-left: 140px; padding-right: 0;}
	.mcon .inner{align-items:center;}
	.mcon .inner .txt{margin-bottom:0;}
}


@media (max-width: 1400px){
	.m_tit h2{font-size:45px;}
	.m_tit.f45 h2{font-size:32px;}

	.main .mv .slide_wrap .slide_txt{padding: 0 130px;}
	.main .mv .slide_wrap .slide_ui .slide_btn{right: 39px;}

	.m_biz{padding: 150px 130px;}
	
	.mcon .inner{padding-right: 120px;}
	.mcon .inner.right{padding-left: 130px; padding-right: 0;}
	.mcon .inner .txt .btn{margin-top: 40px;}
	.m_contact .mcon01::before{left: -280px; top: -200px;}
	.m_contact .mcon02::before{right: -280px; top: -200px;}
}

@media (max-width: 1200px){
	.main .mv .slide_wrap .slide_txt{padding: 0 16px;}
	.main .mv .slide_wrap .slide_txt .item.item01 h2{padding-left: 10vw;}
	.main .mv .slide_wrap .slide_txt .item.item01 h2:last-of-type{padding-left: 0; padding-right: 10vw;}
	.main .mv .slide_wrap .line .left, .main .mv .slide_wrap .line .right{height: calc(100% - 71px); top: 71px;}
	.main .mv .slide_wrap .slide_ui .slide_btn{display:none;}

	.m_biz{padding: 150px 16px;}
	.m_biz .slide_wrap .slide_ctn{margin-top: 0;}
	
	.m_about .fix_ctn::after,
	.m_contact .mcon01::before,
	.m_contact .mcon02::before,
	.m_biz::after,
	.m_about::before,
	.m_about::after{filter:blur(0); border-radius:50%; box-shadow:0 0 200px 200px var(--mainColor); opacity: 0.12;} 

	.m_about::before,
	.m_biz::after{width: 230px; height: 230px;}
	.m_about::after{right: -370px; top: -60px;}
	.m_about .fix_ctn{display:flex; justify-content:center; align-items:center; flex-direction:colnum}
	.m_about .fix_ctn,
	.m_about,
	.m_about .fix_ctn .bg{width: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100); border-radius:0; transition:0s}
	.m_about .m_tit h2{font-size:38px;}
	.m_about .fix_ctn .txt{padding: 0 16px;}
	.m_about .fix_ctn .txt .m_tit{position: relative; top: 0; left: 0 !important; transform:translate(0); transition:0s;  opacity: 1 !important; filter: blur(0) !important;}
	.m_about .fix_ctn .txt .m_tit.ani02{position: relative; top: 0; left: 0; opacity: 1 !important; filter: blur(0); transition:0s; margin-top: 30px;}
	.m_about .fix_ctn .txt .m_tit.ani02 p{display:none; }
	.m_about .fix_ctn .txt .m_tit .btn{position:static; transform:translateX(0); margin-top: 40px;}
	.m_about .fix_ctn.on .bg{height: 100vh; height: calc(var(--vh, 1vh) * 100);}

	.mcon .inner{padding-right: 16px;}
	.mcon .inner.right{padding-left: 16px; padding-right: 0;}
	.m_logo_box .w1400{width: 100%; max-width: 1400px; padding: 0 16px;}
	.m_logo_box .img_list{padding: 60px 0; overflow: hidden;}
}

@media (max-width: 1000px){
	.m_tit h2{font-size:38px;}

	.main .mv .slide_wrap .slide_txt .item h2{font-size:5.3vw; text-align: center !important; padding: 0 !important;}
	.main .mv .slide_wrap .slide_ctn .item::before,
	.main .mv .slide_wrap .slide_ctn .item::after,
	.main .mv .slide_wrap .slide_ctn .item .bg{height: 100vh; height: calc(var(--vh, 1vh) * 100); }
	
	.m_contact .mcon01::before{left: -280px; top: -200px; width: 277px; height: 277px;}
	.m_contact .mcon02::before{right: -280px; top: -200px; width: 325px; height: 325px;}
	/* .m_biz .slide_wrap .slide_ctn .item .in .svg_box svg,
	.m_biz .slide_wrap .slide_ctn .item .in .svg_box svg g{stroke-dashoffset: 0; transition: 0s;} */
	.mcon .inner.right .txt{padding-left: 0;}
	
}

@media (max-width: 800px){
	
	.main .mv .slide_wrap .slide_txt .item{text-align: center;}
	.main .mv .slide_wrap .slide_txt .item h2{font-size:6.3vw; display:inline;}
	.main .mv .slide_wrap .slide_ui .scroll{bottom: 40px;}
	
	.m_biz{padding: 100px 16px;}
	.m_biz .slide_wrap{margin-top: 0;}
	.m_biz .slide_wrap .slide_ctn .slick-list{margin-right: -20px;}
	.m_biz .slide_wrap .slide_ctn .item{margin-right: 20px;}
	.m_biz .slide_wrap .slide_ui .slide_btn{display:none; }
	.m_biz .slide_wrap .slide_bar{margin-top: -20px;}
	.m_biz .slide_wrap .slide_ctn .item{padding: 35px 0;}

	.m_biz::after{left: -60px; top: -226px;}
	
	.m_about .txt .m_tit h2{font-size:26px;}
	.m_about .txt .m_tit h2 br{display:none;}
	.m_about .fix_ctn .m_tit.ani02{margin-top: 20px;}

	.mcon .inner{flex-wrap:wrap; padding: 0 16px !important;}
	.mcon .inner figure{width: 100%;margin-bottom:52px;}
	.mcon02 .inner figure{order:3}
	.mcon .inner .txt{width: 100%; padding: 52px 0;}

}