@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:block;}
.tbbr{display:block;}
.tmbr{display:block;}
.mbbr{display:none;}
.pc_view{display:none !important;}
.pt_view{display:block !important;}
.t_view{display:none !important;}
.tm_view{display:block !important;}
.m_view{display:none !important;}
.dn{display:none;}
#wrap{overflow-x:hidden;}
* {font-family:"Pretendard", "Noto Sans KR","돋움",dotum,sans-serif;box-sizing:border-box;}


.innerwrap{
	width: 94%;
	max-width: 1600px;
	margin: 0 auto;
	box-sizing: border-box;
}

 .more_btn{
	overflow:hidden;position: relative;margin:40px auto 0;
	width:180px;height:50px;border-radius:25px;background: transparent;
	display: flex;align-items:center;justify-content:center;border:1px solid #d4d4d4;
}
.more_btn>span{color:#000;font-size:14px;position: relative;z-index:10;transition:all 0.5s ease-in-out;
font-family: 'Helvetica Neue';font-weight: 400;
}
.more_btn>i{
position: relative;z-index:10;transition:all 0.5s ease-in-out;
background: url(/mpe/images/main/btn_arr.png)no-repeat center;width:6px;height:10px;display: inline-block;margin-left: 10px;
}
 .more_btn:before{
	position: absolute;content:'';
	width:100%;height:100%;
	background: #000;
	top:0;left:0;
	width:0;transition:width 0.4s;
 }
  .more_btn:hover:before{width:100%;transition:width 0.4s ease-in-out;}
  .more_btn:hover>span{color:#fff;transition:all 0.4s;}
  .more_btn:hover>i{background: url(/mpe/images/main/btn_arr_wht.png)no-repeat center;transition:all 0.4s;}
  
section h3{font-size:46px;color:#000;font-weight: 600;text-align: center;}
/*sec1 visual*/
.sec1{position: relative;}
.visual{
	overflow:hidden;
	position:relative;
	width:100vw;height:100vh;max-height:1080px;
}
.visual{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;box-sizing:border-box;
	padding-bottom: 0;
}
.visual .swiper-wrapper{width:100%;height:100%;}
.visual .swiper-slide{
	position:relative;
	width:100%;height:100%;
}
.visual .swiper-slide .bg{
	position:absolute;left:0%;top:0%;z-index:-1;
	width:100%;height:100%;	
	overflow:hidden;
}
.visual .swiper-slide .bg img{transform:scale(1.17);transition:all 2.8s;}
.visual .swiper-slide-active .bg img{transform:scale(1);}
.visual .swiper-slide .bg img{width:100%;height:100%;object-fit:cover;}
.visual .swiper-slide .txtwrap{position: absolute;top:50%;left:50%;z-index:10;transform:translate(-50%, -50%);width:94%;
max-width:1600px;
text-align: left;}
.visual .swiper-slide .txtwrap .vtit{
font-size:115px;color:#fff;font-weight: 300;letter-spacing:-0.02em;text-align: left;
margin-bottom: 15px; line-height:1.5;}
.visual .swiper-slide .txtwrap .vtit>strong{font:inherit;font-weight: bold;}
.visual .swiper-slide .txtwrap .vtxt{color:#fff;font-size:24px;font-weight: 500;font-family: "Pretendard";line-height:1.6em;}

.visual .swiper-slide .txtwrap .vtit,
.visual .swiper-slide .txtwrap .vtxt{opacity:0;transform:translateY(50px);}

.visual .swiper-slide-active .txtwrap .vtit,
.visual .swiper-slide-active .txtwrap .vtxt{
opacity:1;transform:translateY(0px);transition:all 1s;
}
.visual .swiper-slide-active .txtwrap .vtxt{transition-delay:0.15s;}

.visual .ctr{
	position: absolute;
	bottom:25%;left:50%;transform:translateX(-50%);
	display:flex;align-items:center;
	width:94%;max-width:1600px;
	margin:0px 0 0;
	z-index:150;
}

.visual .ctr{bottom:15%;opacity:0;}
.visual.in-view .ctr{opacity:1;bottom:25%;transition:all 1s;transition-delay:0.3s;}

.visual .ctr .btns{position: relative;display: flex;align-items:center;gap:17px;}
.visual .ctr .btns::before{
position: absolute;content:'';
width:1px;height:18px;background: rgba(255,255,255,0.2);
top:50%;left:50%;transform:translate(-50%, -50%);
}
.visual .ctr .vprev{
	z-index:100;
	width:13px;height:24px;
	background:url(/mpe/images/main/vprev.png)no-repeat center / cover;
	cursor:pointer;
}
.visual .ctr .vnext{
	z-index:100;
	width:13px;height:24px;
	background:url(/mpe/images/main/vnext.png)no-repeat center / cover;
	cursor:pointer;
}
.visual .vpaging{
	position:static;z-index:100;width:auto;margin-right: 30px;
	
	text-align:left;
	display: flex;align-items:center;gap:20px;
}
.visual .vpaging span{
	display:inline-block;vertical-align:top;
	box-sizing:border-box;
	position:relative;
	width:9px;height:9px;
	margin:0px 10px 0;
	border:none;
	background:transparent;opacity:1;border:1px solid #fff;
}
.visual .vpaging span.swiper-pagination-bullet-active{opacity:1;width:10px;height:10px;background:#fff;}
.visual .vplay{
width:7px;height:9px;margin:0 10px;z-index:100;margin-right: 40px;cursor:pointer;
background: url(/mpe/images/main/swiper_pause.png)no-repeat center;
}
.visual .vplay.on{
background: url(/mpe/images/main/btn_play.png)no-repeat center;
}


.sec1 .scImg{
position: absolute;right:50%;top:50%;transform:translate(50%, -50%);z-index:100;
width:94%;max-width:1600px;
display: flex;justify-content:flex-end;
}
.sec1 .scImg>div{width:158px;height:158px;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.6);
display: flex;align-items:center;justify-content:center;
}
.sec1 .scImg{right:40%;opacity:0;}
.sec1 .scImg.in-view{right:50%;opacity:1;transition:all 1s;transition-delay:0.4s;}
.sec1 .scImg>div img{
animation:scrollAni 1.5s linear infinite;
}
@keyframes scrollAni{
0%{transform:translateY(-5px);}
50%{transform:translateY(5px);}
100%{transform:translateY(-5px);}
}



/*sec2*/
.sec2{padding:180px 0 160px;background: url(/mpe/images/main/sec2_bg.jpg)no-repeat right top / cover;position: relative;}
.sec2 .innerwrap{}
.sec2 .txtarea{
	font-family: "Pretendard";color:#000000;font-weight: 400;font-size:40px;line-height: 1.4em;
}
.sec2 .txtarea strong{font-weight: 600;}
.sec2 .txtarea .bar{display: inline-block;width: 36px;height: 4px;background: #000;vertical-align:middle;}
.sec2 .txtarea .wht{position: relative;}
.sec2 .txtarea .wht>span{color:#fff;position: relative;z-index:10;font-weight: 600;}
.sec2 .txtarea .wht::before{
	position: absolute;content:'';background: #000;
	max-width:414px;height:70px;border-radius:35px;z-index:9;
	width:100%;
	top:50%;left:50%;transform:translate(-50%, -50%);
	left:-8px;transform:translateY(-50%);
}
.sec2 .img{border-radius:20px;overflow:hidden;}
.sec2 .img img{object-fit:cover;width: 100%;height: 100%;}
.sec2 .img1{aspect-ratio:2.017 / 1;margin-top: 110px;}
.sec2 .img2{
	position:absolute;right:0;bottom:80px;
	width:30%;aspect-ratio:392  / 469;
}

/*sec3*/
.sec3{position: relative;padding:160px 0;}
.sec3 .bg{
position: absolute;z-index:-1;
width:98%;max-width:1880px;border-radius:20px;overflow:hidden;
top:50%;left:50%;transform:translate(-50%, -50%);
background: url(/mpe/images/main/sec3_bg.jpg)no-repeat left top / cover;height:100%;
}
.sec3 .conarea{display: flex;gap:2.08vw;}
.sec3 .conarea .board{width:calc((100% - 2.08vw) / 2);}
.sec3 .conarea .board h3{font-size:46px;color:#000;font-weight: 600;text-align: center;margin-bottom: 45px;}
.sec3 .conarea .board .boxwrap{background: #fff;border-radius:30px;padding: 40px 3.13vw;}
.sec3 .conarea .board ul li{
width:100%;min-height:160px;border-bottom: 1px solid #cccccc;
}
.sec3 .conarea .board ul li a{display: block;width:100%;height: 100%;padding:30px 0;}
.sec3 .conarea .board ul li a .inner{
display: flex;align-items:center;
}
.sec3 .conarea .board ul li .date{width:112px;text-align: center;position: relative;padding-right: 0.8vw;}
.sec3 .conarea .board ul li .date:before{
position: absolute;max-height:79px;background: #d1d1d1;width:1px;content:'';height: 100%;
top:50%;transform:translateY(-50%);right:0;
}
.sec3 .conarea .board ul li .date .day{
font-size:64px;color:#000;font-weight: 500;font-family: 'Helvetica Neue';
}
.sec3 .conarea .board ul li .date .ym{font-size:17px;color:rgba(0,0,0,0.8);font-weight: 350;font-family: 'Helvetica Neue';letter-spacing:-0.025em;}
.sec3 .conarea .board ul li .con{width:calc(100% - 112px);padding-left: 1.46vw;}
.sec3 .conarea .board ul li .con .tag{
min-width:91px;height:38px;border-radius:19px;font-family: "Pretendard";
color:#fff;width:auto;display: inline-flex;align-items:center;justify-content:center;margin-bottom: 15px;
font-size:16px;font-weight: 600;
}
.sec3 .conarea .board ul li .con .tag.c1{background: #6094e6;}
.sec3 .conarea .board ul li .con .tag.c2{background: #64c0ab;}
.sec3 .conarea .board ul li .con .tag.c3{background: #ed5b5e;}
.sec3 .conarea .board ul li .con .tit{}
.sec3 .conarea .board ul li .con .tit ._e{font:inherit;font-size:24px;color:#000;font-weight: 500;font-family: "Pretendard";
overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;
-webkit-box-orient:vertical;word-wrap:break-word;
-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;line-height: 1.45em;
word-break:break-all;letter-spacing:-0.01em;
}
.sec3 .conarea .board ul li .con .tit ._e.type2{
display: -webkit-box;
    -webkit-line-clamp: 2; /* 두 줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sec3 .conarea .board ul li:hover .con .tit ._e{text-decoration:underline;text-underline-offset:5px;text-underline-thickness:1px;}


@media(max-width:1200px){

	.sec3 .conarea{display:block;}
	.sec3 .conarea .board{width:100%;margin-bottom:100px;}
	.sec3 .conarea .board:last-child{margin:0;}

}




/*sec4*/
.sec4{padding: 160px 0 0;}
.sec4 .innerwrap{border-bottom: 1px solid #d1d1d1;padding-bottom: 160px;}
.sec4 .titlearea{position: relative;margin-bottom: 45px;}
.sec4 .titlearea .more_btn{position: absolute;right:0;bottom:0;}
.sec4 .list3{
display: flex;gap:1.72vw;align-items: stretch;flex-wrap: wrap;
}
.sec4 .list3 li{
width:calc((100% - 1.72vw * 3 ) / 4);transition:all 0.4s;
}
.sec4 .list3 li>a{
background: #000;border-radius:20px;width:100%;height: 100%;
padding:40px 2.08vw;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sec4 .list3 li .infoarea{display: flex;flex-direction: column;aspect-ratio: 1 / 1;}
.sec4 .list3 li .infoarea .tag span{
min-width:60px;height: 35px;
margin-right:5px;margin-bottom: 10px;
border-radius:19px;background: #052a62;
display: inline-flex;align-items:center;justify-content:center;width:auto;
padding:0 1.04vw;font-size:14px;color:#fff;font-weight: 600;font-family: "Pretendard";
}
.sec4 .list3 li .infoarea .tag span.dday{background:#2a2a2a;}
.sec4 .list3 li .infoarea .tit{}
.sec4 .list3 li .infoarea .tit ._e{
display: -webkit-box;
-webkit-line-clamp: 2; /* 두 줄까지만 표시 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;word-break:break-all;letter-spacing:-0.01em;line-height: 1.45em;
font-size:20px;color:#fff;font-weight: 500;font-family: "Pretendard";
}
.sec4 .list3 li .infoarea .date{margin-top: auto;font-size:17px;color:rgba(255,255,255,0.8);font-weight: 350;font-family: 'Helvetica Neue';}
.sec4 .list3 li .btn{margin-top: 30px;border-top: 1px solid rgba(255,255,255, 0.3);}
.sec4 .list3 li .btn .more_btn_2{
display: flex;align-items:center;padding-top: 30px;
}
.sec4 .list3 li .btn .more_btn_2 span{font:inherit;color:rgba(255,255,255,0.8);font-size:14px;font-family: 'Helvetica Neue';font-weight: 400;}
.sec4 .list3 li .btn .more_btn_2>i{
position: relative;z-index:10;transition:all 0.5s ease-in-out;
background: url(/mpe/images/main/btn_arr_wht.png)no-repeat center;width:6px;height:10px;display: inline-block;margin-left: 10px;
}
.sec4 .list3 li:hover a{
background: #052a62;transition:all 0.4s;
}
.sec4 .list3 li:hover .infoarea .tag span{background: #fff;color:#052a62;font-weight: 600;}
.sec4 .list3 li:hover .infoarea .tag span.dday{background:#0f0f0f;color:#fff;font-weight: 400;}
.sec4 .list3 li:hover .infoarea .tit ._e{text-decoration:underline;text-underline-offset:5px;text-underline-thickness:1px;}


@media(max-width:1100px){
	.sec4 .list3 li{
		width:calc((100% - 1.72vw * 1 ) / 2);transition:all 0.4s;
	}	
}




/*sec5*/
.sec5{padding:160px 0;}
.sec5 .client-wrap{overflow:hidden;}
.sec5 .client-wrap {position: relative;overflow: hidden;margin-top: 50px; height: 300px;}
.sec5 .client-wrap > div {overflow:hidden;display: flex;justify-content: flex-start;white-space: nowrap;}
.sec5 .client-wrap > div + div {margin-top:160px;}
.sec5 .client-wrap ul {display:flex; position: absolute;}
.sec5 .client-wrap ul li {width:299px;height:140px;border-radius:20px;background: #f6f6f6;box-sizing:border-box;
margin: 0 10px;display: flex;align-items:center;justify-content:center;overflow:hidden;
}

.sec5 .client-wrap ul li .logo>img{display: block;max-width:100%;margin:0 auto;}
.sec5 .client-wrap ul li .logo{width:100%;display: flex;align-items:center;padding-bottom: 12px;height:85px;}
.sec5 .client-wrap ul li  .name{width:100%;
	border-top: 1px solid #bfbfbf;text-align: center;padding-top: 12px;;
	font-size:20px;color:#000;font-family: var(--fonts);font-weight: 500;letter-spacing:-0.025em;
}
.sec5  .client-wrap > div ul{animation:clientSlideAni 22s infinite linear;}
.sec5  .client-wrap > div ul + ul{animation:clientSlideAni2 22s infinite linear;}
.sec5  .client-wrap > div:nth-child(even) ul{animation-direction: reverse;}
@keyframes clientSlideAni {
  from   { transform: translateX(0%); }
  to { transform: translateX(-100%); }
}
@keyframes clientSlideAni2 {
  from   { transform: translateX(100%); }
  to { transform: translateX(0%); }
}

/*sec6*/
.sec6{padding:160px 0 200px;background: url(/mpe/images/main/sec6_bg.jpg)no-repeat center / cover;}
.sec6 h3{color:#fff;font-family: "Pretendard";font-weight: 600;}
.sec6 .faq-container {
	margin: 0 auto;margin-top: 50px;
}

.sec6 .qa-item {
	background-color: #f6f6f6;
	border-radius: 20px;
	overflow: hidden;
}
.sec6 .qa-item + .qa-item{margin-top: 20px;}
.sec6 .question {
	display: flex;
	align-items: center;
	padding: 25px 2.08vw;
	cursor: pointer;
	position: relative;
}

.sec6 .q-icon {
	width: 64px;
	height: 64px;
	background-color: #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1.56vw;
	font-family: 'Helvetica Neue';
	font-size:34px;font-weight: 500;
	color:#fff;
}

.sec6 .question-text {
	flex: 1;
	width:calc(100% - 64px - 1.56vw - 21px);
	font-size:24px;color:#000;font-family: "Pretendard";font-weight: 500;
}

.sec6 .arrow {
	width: 21px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s;
	background: url(/mpe/images/main/faq_on.png)no-repeat center;
}

.sec6 .arrow.up{
	transform: rotate(-180deg);
}
.sec6 .answer {
	display: none;
	border-top: 1px solid #c5c5c5;
	padding: 30px 2.08vw 50px;
}

.sec6 .answer-content {
	display: flex;
	align-items: flex-start;
}

.sec6 .a-icon {
	width: 64px;
	height: 64px;
	background-color: #052a62;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1.56vw;
	font-family: 'Helvetica Neue';
	font-size:34px;font-weight: 500;
	color:#fff;
	flex-shrink: 0;
}

.sec6 .answer-text {
	font-size:18px;font-family: "Pretendard";font-weight: 400;color:#000;
	line-height: 1.6em;
	padding-top: 20px;
}


/*motion*/
.fadeLeft, .fadeRight, .fadeUp, .fadeIn, .fadeImgRight{opacity:0;}
.imgAni{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.imgAni.in-view{animation-name: imgAni; animation-duration:1.25s;animation-fill-mode:forwards;}
.fadeLeft.in-view{animation-name: fadeLeft;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeRight.in-view{animation-name: fadeRight;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeUp.in-view{animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeIn.in-view{animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgRight.in-view{animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgLeft.in-view{animation-name: fadeImgLeft;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
  
  @keyframes bgScale{
   0%{transform:scale(1.15);}
   100%{transform:scale(1);}
  }
@keyframes fadeLeft{
 0%{transform:translate3d(-100px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes fadeRight{
 0%{transform:translate3d(70%, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp{
0%{transform:translate3d(0%, 60px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes imgAni{
0%{clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}

}
@keyframes fadeImgRight{
0%{opacity:0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100%{opacity:1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
@keyframes fadeImgLeft{
0%{opacity:0;clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{opacity:1;clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}
}

/*sec2 motion*/
.sec2 .txtarea{opacity:0;transform:translateY(50px);transition:all 1s;}
.sec2 .txtarea.in-view{
opacity:1;transform:translateY(0px);
}
.sec2 .txtarea .wht::before{width:0;}
.sec2 .txtarea.in-view .wht::before{width:105%;transition:all 1.2s;transition-delay:0.1s;transform-origin:left;}

.sec2 .img1{opacity:0;transform:translateX(-50px);transition:all 1.2s;}
.sec2 .img2{opacity:0;transform:translateX(50px);transition:all 1.2s;}
.sec2 .img1.in-view,
.sec2 .img2.in-view{opacity:1;transform:translateX(0px);}
.sec2 .img1.in-view{transition-delay:0.1s;}
.sec2 .img2.in-view{transition-delay:0.1s;}

/*sec3 motion*/
.sec3 .conarea .board h3{opacity:0;transform:translateY(50px);transition:all 1s;}
.sec3 .conarea .board.in-view h3{opacity:1;transform:translateY(0px);}
.sec3 .conarea .board .boxwrap{opacity:0;transform:translateY(50px);transition:all 1s;}
.sec3 .conarea .board.in-view .boxwrap{opacity:1;transform:translateY(0px);transition-delay:0.2s;}

/*sec4 motion*/
.sec4 .titlearea,
.sec4 .conarea{opacity:0;transform:translateY(50px);transition:all 1s;}
.sec4 .titlearea.in-view,
.sec4 .conarea.in-view{opacity:1;transform:translateY(0px);}
.sec4 .conarea.in-view{transition-delay:0.2s;}

/*sec5 motion*/
.sec5 h3,
.sec5 .client-wrap{opacity:0;transform:translateY(50px);transition:all 1s;}
.sec5 h3.in-view,
.sec5 .client-wrap.in-view{opacity:1;transform:translateY(0px);}
.sec5 .client-wrap.in-view{transition-delay:0.2s;}

/*sec6 motion*/
.sec6 h3,
.sec6 .faq-container{opacity:0;transform:translateY(50px);transition:all 1s;}
.sec6 h3.in-view,
.sec6 .faq-container.in-view{opacity:1;transform:translateY(0px);}
.sec6 .faq-container.in-view{transition-delay:0.2s;}