﻿/* 메인 컨테이너 */
#container { position:relative;}
.MC_wrap1 {margin:4rem 0 0;}
.MC_wrap1 .con_wrap {display:flex; justify-content:space-between; height:25rem;}
.MC_wrap1 .con_wrap .MC_box1 {width:calc(100% - 23.5rem); position:relative; z-index:1;}
.MC_wrap1 .con_wrap .MC_box2 {position:relative; width:21rem; z-index:0;}
.MC_wrap1 .con_wrap .MC_box2:before {content:''; position:absolute; left: -5rem; top: -5rem; width: 29.5rem; height: 29.5rem; z-index:1; border-radius: 50%; background: rgba(255, 255, 255, 0.05);}
.MC_wrap1 .con_wrap .MC_box2:after {content:''; position:absolute; right:calc(-100vw + 30rem); bottom:0; background:#176955; width:100vw; height:60%; border-radius:25rem 0 0 0;}
.MC_wrap1 .track-container {position: absolute; overflow: hidden; width: 100%; height: 20rem;}
.MC_wrap1 .track-container .marquee-text {position: absolute; white-space: nowrap; animation: scroll-animation 80s linear infinite; font-size: 7.5rem; font-weight:900; color: #215c00; opacity:0.05; text-transform:uppercase; text-transform:uppercase;}
.MC_wrap2 {position:relative; background:#176955; padding:5rem 0 4rem;}
.MC_wrap2:before {content:''; position:absolute; left:5rem; bottom:-5rem; width:29.5rem; height:29.5rem; border-radius:50%; background:rgba(255,255,255,0.05);}
.MC_wrap2 .container {display:flex; justify-content:space-between;}
.MC_wrap2 .con_wrap {width:100%;}
.MC_wrap2 .con_wrap:nth-child(1) {max-width:30rem; width:100%;}
.MC_wrap2 .con_wrap:nth-child(2) {width: calc(100% - 34rem); margin-left: auto;}

.MC_box4{ margin-top:3.75rem;}


@media screen and (max-width: 1680px){
	.MC_wrap1 .con_wrap {justify-content:space-around;}
	.MC_wrap1 .con_wrap .MC_box1 {width: calc(100% - 23rem);}
	.MC_wrap1 .con_wrap .MC_box2 {width:19rem;}

	.MC_wrap2 .container{ padding:0 1rem;}
}

@media screen and (max-width: 1440px){
	.MC_wrap1 {margin:0; padding:3rem 0 0;}
	.MC_wrap1 .con_wrap {flex-direction:column; height:auto;}
	.MC_wrap1 .con_wrap .MC_box1 {width:100%;}
	.MC_wrap1 .con_wrap .MC_box2 {width: calc(100% + 2rem); left: -1rem;}
	.MC_wrap1 .con_wrap .MC_box1:after {content:''; position:absolute; right:-50%; bottom:-2rem; transform: translate(-50%, 0%); border-radius:50% 50% 0 0; z-index:-1; width:28rem; height:15rem; background:#176955;}
	.MC_wrap1 .con_wrap .MC_box2 {background:#176955; padding:1.5rem 1rem 0;}
	.MC_wrap1 .con_wrap .MC_box2:before {display:none;}
	.MC_wrap2 {padding:2rem 1rem 4rem;}	
	.MC_wrap2 > .container {padding:0;}
	.MC_wrap2:before {left:-10rem; bottom:-9rem;}
}

@media screen and (max-width: 1240px){
	.MC_wrap2 .con_wrap:nth-child(2) {width:calc(100% - 32rem);}
	.MC_wrap1 .con_wrap .MC_box2 {width:100%; left:0; padding:1.5rem 0rem 0;}
}

@media screen and (max-width: 1024px){	
	.MC_wrap2 .con_wrap:nth-child(1) {max-width:20rem;}
	.MC_wrap2 .con_wrap:nth-child(2) {width: calc(100% - 22rem);}
	.MC_wrap1 .con_wrap .MC_box1:after {width:22rem;}
}

@media screen and (max-width: 760px){
	.MC_wrap1 {padding:2rem 0 0;}
	.MC_wrap1 .con_wrap .MC_box1:after {width:18rem; height:13rem;}
	.MC_wrap2 .container {flex-direction:column; gap:2rem;}
	.MC_wrap2 .con_wrap:nth-child(1) {max-width:100%;}
	.MC_wrap2 .con_wrap:nth-child(1), 
	.MC_wrap2 .con_wrap:nth-child(2) {width:100%;}	

	.MC_box4{ margin-top:2rem;}
}

@media screen and (max-width: 580px){
	.MC_wrap1 {padding:0;}
	.MC_wrap1 .con_wrap .MC_box1:after {right:-100%;}
	.MC_wrap1 .con_wrap .MC_box1:before {content:''; left:0; bottom:0; position:absolute; background:#176955; width:100%; height:4rem;}
	.MC_wrap1 .track-container .marquee-text {font-size:3.5rem;}
}

@media screen and (max-width: 480px){
	.MC_wrap1 .con_wrap .MC_box1:after {width:15rem; right:-50%;}
	.MC_wrap1 .con_wrap .MC_box2 {z-index:1;}
}

@media screen and (max-width: 320px){
}

@keyframes scroll-animation {
	0% {transform: translateX(10rem);}
	100% {transform: translateX(-100%);}
}