@import url("/font/XEIcon-2.3.3/xeicon.css");

[class*='MC_wrap'] {margin:8rem 0; z-index:1;}

.MC_wrap1 {display:flex; gap:8rem; height:50rem; position:relative; z-index:2; margin-top:4rem;}
.MC_wrap1 .MC_Box1 {flex:1; width:calc(100% - 90rem); display:flex; align-items:center; justify-content:center; flex-direction:column;}
.MC_wrap1 .MC_Box2 {min-width:0; width:90rem;}
.MC_wrap2 {position:relative;}
.MC_wrap2 .bg {position: absolute; overflow: hidden; width: 100vw; left: 50%; height: 100vh; overflow: hidden; top: -150%; transform: translate(-50%, 0); z-index: -1;}
.MC_wrap2 canvas {width: 100%; max-width: 100%; aspect-ratio: 5 / 4; height: auto;}
.MC_wrap2 canvas.blob_left {position:absolute; width:100%; height:100%; left: 20rem; transform: translate(-50%, 0);}
.MC_wrap2 canvas.blob_right {position:absolute; width:100%; height:100%; right:20rem; transform: translate(50%, 0) rotate(180deg);}

.MC_wrap3 {position:relative; z-index:1;  margin:16rem 0; display:flex; gap: 5rem;}
.MC_wrap3:before {content:''; position:absolute; height:calc(100% + 16rem); background:#129f97 url('/images/main/MC_wrap3_bg.svg') no-repeat 0% 100%; background-size:100%; top:-8rem; left:0; border-radius:0 5rem 5rem 0; z-index:-1; opacity:0;}
.MC_wrap3.active::before { opacity:1; transition: 0.3s; width: 100vw; right: calc(50% - (172rem / 2)); left:auto;}
.MC_wrap3 .MC_Box4 {width:calc(100% - 38rem); min-width:0;}
.MC_wrap3 .MC_Box5 {width:38rem;}
.MC_wrap4 {position:relative; z-index:0; margin:16rem 0;}
.MC_wrap4:before {content:''; position:absolute; width:100vw; height:calc(100% + 60rem); background:#F3EEFD; top:-50rem; right: calc(50% - (187rem / 2)); border-radius:0 5rem 5rem 0; z-index:-1; transform: translateY(4rem); opacity:0; }
.MC_wrap4.active:before { transition: 0.3s; opacity:1; transform: translateY(0rem); }

.MC_wrap5 {position:relative; width:100%; height:100%;}
.MC_wrap5:before {content:''; position:absolute; width:100%; height:100%; top:-6rem; background:url('/images/main/MC_wrap4_bg.png') no-repeat 50% 100%; background-size:100%; opacity:0.5;}
.MC_wrap6 .MC_Box8 {padding-top:6rem;} 
.MC_wrap7 {margin:0; position:relative; z-index:0;}
.MC_wrap7:before {content:''; position:absolute; width:100vw; height:50%; background:#f2f2f2; bottom:0; left:50%; transform:translate(-50%, 0); z-index:-1;}




#gnb li a[target='_blank']:after {position: absolute; top: 0.55rem; left: 5; font-family: 'xeicon'; line-height: 1; content: "\e980"; z-index: 2;}
#gnb li a span {position: relative; z-index: 2; font-size:2.2rem;}
.gnb-toggle-wrap.depth02 ul li > .content > ul > .dep > a span {font-size:1.8rem!important;}
.gnb-toggle-wrap.depth02 ul li > .content ul .dep .depth03 a span {font-size:1.7rem!important;}

[id^="mGnb-anchor"] li  a[target='_blank']:after {position: relative; font-family: 'xeicon'; line-height: 1; content: "\e980"; z-index: 2; top:-1px;}






@media screen and (max-width: 1850px){
	.main_container { overflow: hidden; }
	.MC_wrap3:before { border-radius: 0; }
	.MC_wrap3.active::before { right: auto; left: 50%; transform: translate(-50%, 0); }
	.MC_wrap4:before { transform: translateY(0rem); width: 100vw; border-radius: 0; }
	.MC_wrap4.active:before { transition: 0.3s; right: auto; left: 50%; opacity: 1; transform: translate(-50%, 0); }
}


@media screen and (max-width: 1600px){
	[class*='MC_wrap'] { margin: 0; z-index: 1; padding: 5rem 0; }
	.main_container { padding: 0 2rem; }
	.MC_wrap1 { gap: 3rem; z-index: 2; height: auto; }
	.MC_wrap3:before { height: 100%; top: 0; }
	.MC_wrap4:before { height: 100%; top: 0; }
	.MC_wrap6 .MC_Box8 { padding: 0; }
	.MC_wrap7 { padding-top: 0; padding-bottom: 2.5rem; }
}

@media screen and (max-width: 1440px){
	.MC_wrap1 .MC_Box1 {width: calc(100% - 70rem);}
	.MC_wrap1 .MC_Box2 {width: 70rem;}
}

@media screen and (max-width: 1280px){
	.MC_wrap1 { flex-direction: column; height: auto; gap:5rem; padding:5rem 0 0;}
	.MC_wrap1 .MC_Box1 { width: 100%; }
	.MC_wrap1 .MC_Box2 { width: 100%; flex: 1; }
	.MC_wrap5 { overflow: hidden; }
}


@media screen and (max-width: 1024px){
	.MC_wrap2 .bg {top:-100%;}
	.MC_wrap2 canvas.blob_left {left:-20rem;}
	.MC_wrap2 canvas.blob_right {right:-20rem;}
	.MC_wrap3 { gap: 3rem; }
	.MC_wrap3.active::before { width: 100vw; left: 50%; right: auto; transform: translate(-50%, 0); }
	.MC_wrap4:before { width: 100vw; left: 50%; right: auto; transform: translate(-50%, 0); }
	.MC_wrap7:before { width: 100vw; left: 50%; transform: translate(-50%, 0); }
}


@media screen and (max-width: 768px){
	/*.main_container {padding:0;}*/
	.MC_wrap3 { flex-direction: column; gap: 2.4rem; margin: 0; }
	.MC_wrap3 .MC_Box4 { width: 100%; }
	.MC_wrap3 .MC_Box5 { width: 100%; margin-top:2rem; }
	.MC_wrap2 .bg { height: 60vh; }
	.MC_wrap2 canvas { aspect-ratio: 4 / 3; }
	.MC_wrap5:before { background-size: cover; }
	
	.MC_wrap6 {padding:1rem 0;}
}