#main_container{}

#main_container .sec01{
	height:100vh;
	background:#000;
	overflow:hidden;
}
#main_container .sec01 .section_bg{
	height:100%;
	mask: url(../_img/main/mv_mask2.svg) center center / contain no-repeat;
	opacity: 1;
	mask-size: 60%;
	mask-position: 50% 50%;
	/* transition 제거 - GSAP가 애니메이션 처리 */
}
#main_container .sec01 .high{
	background: linear-gradient(to right, #2cec87, #36aef8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#main_container .sec01 .section_bg .section_visual{
	height:100%;
	transition:all 2.5s;
	filter: blur(20px);
	opacity:1;
	transform: scale(.6);
}
#main_container.is-active .sec01 .section_bg .section_visual{
	filter: blur(0px) !important;
	transform: scale(1) !important;
}


/* 회사 소개 섹션 스타일 */
#main_container .sec01 .section_company{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transform: translateY(100%);
	opacity: 0;
	transition:all .5s;
}

#main_container .sec01 .section_company .section_content_inner{
	color: #fff;
	padding: 0 20px;
}

#main_container .sec01 .section_company .section_content_inner h2{
	font-size: 2rem;
	font-weight: 500;
	margin-bottom:6rem;
	opacity: 0;
	transform: translateY(30px);
	/* transition:all .4s ease-in-out .3s; */
}
#main_container .sec01 .section_company .section_content_inner h3{
	font-size:5rem;
	font-weight:700;
	margin-bottom:4rem;
	line-height:1.4;
	opacity: 0;
	transform: translateY(30px);
	/* transition:all .4s ease-in-out .4s; */
}

#main_container .sec01 .section_company .section_content_inner p.desc{
	font-size: 2rem;
	line-height: 1.8;
	font-weight:300;
	margin-bottom:4rem;
	opacity: 0;
	transform: translateY(30px);
	/* transition:all .4s ease-in-out .5s; */
}
#main_container .sec01 .section_company .section_content_inner p.btns{
	opacity: 0;
	transform: translateY(30px);
	/* transition:all .4s ease-in-out .6s; */
}
#main_container .sec01 .section_company .section_content_inner p.btns a{
	display:flex;
	align-items: center;
	justify-content: space-between;
	padding:1.2rem 2rem;
	background:#00F67B;
	color:#000;
	max-width:16rem;
	font-size:1.6rem;
	font-weight:500;
	border-radius:3px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#main_container .sec01 .section_company.is-view,
#main_container .sec01 .section_company.is-view .section_content_inner h2,
#main_container .sec01 .section_company.is-view .section_content_inner h3,
#main_container .sec01 .section_company.is-view .section_content_inner p.desc,
#main_container .sec01 .section_company.is-view .section_content_inner p.btns{
	opacity:1;
	transform: translateY(0px);
}




@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
	#main_container .sec01 .section_company .section_content_inner h2{
		font-size: 1.8rem;
		margin-bottom:5rem;
	}
	#main_container .sec01 .section_company .section_content_inner h3{
		font-size: 3.9rem;
		margin-bottom:3rem;
	}

	#main_container .sec01 .section_company .section_content_inner p.desc{
		font-size: 1.8rem;
		margin-bottom:3rem;
	}
	#main_container .sec01 .section_company .section_content_inner p.btns a{
		font-size:1.5rem;
	}
}
@media (max-width: 575.98px) {
	#main_container .sec01 .section_company .section_content_inner h2{
		font-size: 1.6rem;
		margin-bottom:4rem;
	}
	#main_container .sec01 .section_company .section_content_inner h3{
		font-size:2.3rem;
		margin-bottom:2rem;
	}
	#main_container .sec01 .section_company .section_content_inner p.desc{
		font-size: 1.4rem;
		line-height: 1.5;
		margin-bottom:2rem;
	}
	#main_container .sec01 .section_company .section_content_inner p.btns a{
		padding:1rem 1.5rem;
		max-width:13rem;
		font-size:1.2rem;
	}
}



/* sec02 */
#main_container .sec02{
	height: 400vh; /* 뷰포트 높이의 4배 */
}
#main_container .sec02 .container{
	padding-top:10rem;
	padding-bottom:10rem;
	position: sticky;
	top: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#main_container .sec02 .rows{
	display:flex;
	overflow:hidden;
	height:60rem; /* 원래 높이로 복원 */
	position: relative;
}
#main_container .sec02 .rows + .rows{
	margin-top:6rem;
}

#main_container .sec02 .rows > div{
	width:calc(100%/2);
	position:relative;
}

#main_container .sec02 .rows > div .photo_box,
#main_container .sec02 .rows > div{
	height:60rem;
}
#main_container .sec02 .rows .num{
	font-size:10rem;
	font-family: 'April16th';
	font-weight:300;
	transition:all .6s ease-in-out;
	color:#ccc;
}
#main_container .sec02 .rows h3{
	font-size:5rem;
	font-weight:700;
	margin-bottom:3rem;
	-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(#111, #111);
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: all 1.4s;
}
#main_container .sec02 .rows .desc{
	font-size:2rem;
	font-weight:300;
	-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(#111, #111);
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: all 1.4s;
}
#main_container .sec02 .rows .btns{
	position:absolute;
	left:0;
	bottom:3rem;
}
#main_container .sec02 .rows .btns a.btn_view_more{
	opacity:.2
}

#main_container .sec02 .rows.is-active .num{
	color:#000;
}
#main_container .sec02 .rows.is-active .btns a.btn_view_more{
	opacity:1;
}
#main_container .sec02 .rows.is-active h3,
#main_container .sec02 .rows.is-active .desc{
	background-size: 100% 100%;
}
#main_container .sec02 .rows.is-active{
	height:15rem;
}
@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
	#main_container .sec02 .container{
		max-width: 95%;
	}

	#main_container .sec02 .rows > div{
		position: absolute;
		width: 100%;
	}
	#main_container .sec02 .rows > div:first-child{
		z-index: 2;
		padding: 1rem 3rem;
		backdrop-filter: brightness(70%);
	}
	#main_container .sec02 .rows > div:last-child{
		z-index: 1;
		height: 100%;
	}
	
	#main_container .sec02 .rows .num{
		color:#646464;
	}
	#main_container .sec02 .rows h3{
		-webkit-text-fill-color: rgba(255, 255, 255, 0.2);
		background-image: linear-gradient(#ececec, #ececec);
	}
	#main_container .sec02 .rows .desc{
		-webkit-text-fill-color: rgba(255, 255, 255, 0.2);
		background-image: linear-gradient(#ececec, #ececec);
	}
	
	#main_container .sec02 .rows.is-active .num{
		color:#fff;
	}
	
	#main_container .sec02 .rows .btns{
		position:absolute;
		left:3rem;
	}
}
@media (max-width: 575.98px) {
	
	#main_container .sec02 .rows > div .photo_box{
		background-size: cover !important;
	}
}

/*sec03*/
#main_container .sec03{
	_margin-top:-90rem;
}
#main_container .sec03 .rows{
	display:flex;
}
#main_container .sec03 .rows > div{
	width:calc(100%/2);
	overflow:hidden;
}
#main_container .sec03 .rows .tab_container{
	position:relative;
}
#main_container .sec03 .rows .tab_container:not(.tab_container1){
	display:none;
}
#main_container .sec03 .rows .tab_container .swiper-slide .photo{
	padding-top:70rem;
}
#main_container .sec03 .rows .tab_container .controller{
	position:absolute;
	right:0;
	bottom:0;
	z-index:2;
	display:flex;
	align-items: center;
	justify-content: center;
	gap:1px;
}
#main_container .sec03 .rows .tab_container .sec03_arrow_prev,
#main_container .sec03 .rows .tab_container .sec03_arrow_next{
	display:flex;
	width:8rem;
	height:8rem;
	align-items: center;
	justify-content: center;
	background:#000;
	color:#fff;
	font-size:2.4rem;
	cursor:pointer;
}
#main_container .sec03 .rows .tab_container .sec03_arrow_next{
	order:1;
}

#main_container .sec03 .rows .tab_container .swiper-button-disabled{
	opacity:.3;
}


#main_container .sec03 .info{
	display:flex;
	flex-direction: column;
}
#main_container .sec03 .info > div{
	padding:7rem 10rem;
	flex-grow: 1;
}
#main_container .sec03 .info > div:nth-child(2){
	background:#F6F6F6;
}
#main_container .sec03 .info .tabs{
	list-style:none;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	max-width:60rem;
}
#main_container .sec03 .info .tabs li{
	width:calc(100%/2);
}
#main_container .sec03 .info .tabs li a{
	font-size:2rem;
	color:#888;
	padding:1rem 1.5rem;
	display:block;
	position:relative;
}
#main_container .sec03 .info .tabs li a::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:2px;
	height:100%;
	background:#DADADA;
}
#main_container .sec03 .info .tabs li a.is-active{
	color:#000;
	font-weight:500;
}
#main_container .sec03 .info .tabs li a.is-active::before{
	background:#000;
}

@media (max-width: 1199.98px) {
	#main_container .sec03 .rows .tab_container .swiper-slide .photo{
		padding-top:65rem;
	}

	#main_container .sec03 .info > div{
		padding:5rem 8rem;
	}
	#main_container .sec03 .info .tabs{
		max-width:80rem;
	}
}
@media (max-width: 991.98px) {
	#main_container .sec03 .rows .tab_container .swiper-slide .photo{
		padding-top:60rem;
	}

	#main_container .sec03 .info > div{
		padding:3rem 4rem;
	}
	#main_container .sec03 .info .tabs{
		max-width:80rem;
	}
	#main_container .sec03 .info h3{
		font-size: 4rem !important;
	}
	#main_container .sec03 .info > div > p{
		font-size: 1.8rem !important;
	}
	#main_container .sec03 .info .tabs li a{
		font-size:1.8rem;
	}
	#main_container .sec03 .info a.btn_view_more {
		padding: 1.2rem 1.8rem;
		width: 17rem;
		font-size: 1.5rem;
	}
}
@media (max-width: 767.98px) {
	#main_container .sec03 .rows{
		flex-direction: column;
	}
	#main_container .sec03 .rows > div{
		width: 100%;
	}

	#main_container .sec03 .info > div{
		padding:7rem 10rem;
	}
	#main_container .sec03 .info h3{
		font-size: 5rem !important;
	}
	#main_container .sec03 .info > div > p{
		font-size: 2rem !important;
	}
	#main_container .sec03 .info .tabs{
		max-width:60rem;
	}
	#main_container .sec03 .info .tabs li a{
		font-size:2rem;
		padding:1rem 1.5rem;
	}
	#main_container .sec03 .info a.btn_view_more {
		padding: 1.2rem 1.8rem;
		width: 18rem;
		font-size: 1.7rem;
	}

}
@media (max-width: 575.98px) {
	#main_container .sec03 .rows .tab_container .swiper-slide .photo{
		padding-top:40rem;
	}

	#main_container .sec03 .rows .tab_container .sec03_arrow_prev,
	#main_container .sec03 .rows .tab_container .sec03_arrow_next{
		width:7rem;
		height:7rem;
		font-size:2rem;
	}

	#main_container .sec03 .info > div{
		padding:5rem 2rem;
	}
	#main_container .sec03 .info h3{
		font-size: 4rem !important;
	}
	#main_container .sec03 .info > div > p{
		font-size: 1.6rem !important;
	}
	#main_container .sec03 .info .tabs li a{
		font-size:1.6rem;
		padding:1rem 1.5rem;
	}
	#main_container .sec03 .info a.btn_view_more {
		padding: 1.2rem 1.8rem;
		width: 16rem;
		font-size: 1.5rem;
	}
}

/*sec04*/
#main_container .sec04{
	height:80rem;
	background:#000;
	display:flex;
	align-items: center;
	justify-content: center;
	color:#fff;
	text-align:center;
	position:relative;
}
#main_container .sec04 h3{
	position:relative;
	z-index:22;
}
#main_container .sec04::before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:100%;
	height:100%;
	background: radial-gradient(circle,rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 30%);
	z-index:21;
}

#main_container .sec04 .logo_maqee{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	overflow:hidden;
	width:100%;
	opacity:.7;
	z-index: 20;
}
#main_container .sec04 .logo_maqee  > div{
	display:flex;
	max-width:1888px
}
#main_container .sec04 .logo_maqee .mq_left{
	display: flex;
	animation: flowLeft 80s linear infinite;
	white-space: nowrap;
	width: 200%; /* 내용을 2배로 확장 */
	margin-bottom:8rem;
	gap: 14rem;
}
#main_container .sec04 .logo_maqee .mq_right{
	display: flex;
	animation: flowRight 80s linear infinite;
	white-space: nowrap;
	width: 200%; /* 내용을 2배로 확장 */
	gap: 14rem;
}


#main_container .sec04 video{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 100%;
	height: 100%;
}

@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
	#main_container .sec04 h3{
		font-size: 3.5rem !important;
	}
}
@media (max-width: 767.98px) {
	#main_container .sec04 h3{
		font-size: 3rem !important;
	}
}
@media (max-width: 575.98px) {
	#main_container .sec04{
		height:60rem;
	}
	#main_container .sec04 h3{
		font-size: 2.5rem !important;
	}
}


@keyframes flowLeft {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

@keyframes flowRight {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
	}
}