#main_container #MORU{
	position: relative;
	height: 100vh;
	background:#000;
}
#main_container #MORU video,
#main_container #MORU img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#main_container #MORU img{display: none;}
#main_container #MORU .absolute{
	z-index: 1;
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#main_container #MORU .txt_area{
	position: absolute;
	width: 100%; height: 100%;
	display: flex;
	align-items: flex-end;
	padding-right: 15px;
	padding-bottom: 20rem;
}
#main_container #MORU .txt_box{display: none;}
#main_container #MORU .txt_box > div{
	position: relative;
	color: rgba(0,0,0,0);
}
#main_container #MORU .txt_box > div.d-flex{gap: 2rem;}
#main_container #MORU p{
	line-height: 1.2;
	letter-spacing: 1px;
	font-weight: 700;
	-webkit-background-clip: text;
  background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  display: inline;
}
#main_container #MORU .color{
	background-image: linear-gradient(0deg, #ff4b12 0%, #ff4b12 100%);
}
#main_container #MORU .txt_box.active p {
	background-size: 100% 100%;
	transition:1s cubic-bezier(1,1,1,1);
}
#main_container #MORU .txt_box.active .color{
	transition:.3s cubic-bezier(1,1,1,1) 1s;
}
#main_container #MORU .txt_box3.active > div:last-child p{
	transition-delay: 1s;
}
#main_container #MORU .txt_box3.active  > div:last-child .color{
	transition:.3s cubic-bezier(1,1,1,1) 2s;
}
#main_container #MORU .txt_box4.active > div p:last-child{
	transition:2s cubic-bezier(1,1,1,1) 1s;
}
#main_container #MORU .txt1{font-size: 6rem;}
#main_container #MORU .txt2{font-size: 6rem;}
#main_container #MORU .txt3{font-size: 12rem; font-weight: 800;}
/* #main_container #MORU .txt_box2 p{position: relative;}
#main_container #MORU .txt_box2 p::after{
	content: attr(data-text);
  position: absolute;
  bottom: -2px;
  right: -2px;
  color: rgba(0,0,0,.6); 
  z-index: -1;
	opacity: 0;
}
#main_container #MORU .txt_box2.active p::after{
	opacity: 1;
	transition:1s cubic-bezier(1,1,1,1) 1s;
}
#main_container #MORU .txt_box2.active p.color::after{
	transition:.3s cubic-bezier(1,1,1,1) 2s;
} */


#main_container #MORU .scroll_down{
	cursor: pointer;
	z-index: 10;
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	height: 8rem;
	display: none;
}
#main_container #MORU .scroll_down span{
	position: relative;
	padding-bottom: 6rem;
	color: #fff;
}
#main_container #MORU .scroll_down span::before,
#main_container #MORU .scroll_down span::after{
	content: '';
	position: absolute;
	bottom: 0; left: 50%;
	width: 1px; 
	transform: translateX(-50%);
}
#main_container #MORU .scroll_down span::before{
	z-index: 1;
	background: #fff;
	height: 0;
	animation: scrollDown .7s infinite alternate;
}
#main_container #MORU .scroll_down span::after{
	height: 5rem;
	background: #555251;
}
@keyframes scrollDown {
	0%{height: 0;}
	100%{height: 5rem;}
}
@media (min-width:992px) {
	#main_container #MORU::after{
		content: '';
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		background: url(../_img/main/main_visual_bg.png) no-repeat center center / cover;
		opacity: 0;
		transition: all .3s;
	}
	#main_container #MORU.active::after{
		opacity: 1;
	}
}
@media (max-width:991.98px) {
	#main_container #MORU .txt1{font-size: 5rem;}
	#main_container #MORU .txt2{font-size: 5rem;}
	#main_container #MORU .txt3{font-size: 10rem;}
}
@media (max-width:767.98px) {
	#main_container #MORU .txt1{font-size: 4rem;}
	#main_container #MORU .txt2{font-size: 4rem;}
	#main_container #MORU .txt3{font-size: 7rem;}
}
@media (max-width:575.98px) {
	#main_container #MORU .txt_area {padding-bottom: 15rem;}
	#main_container #MORU .txt_box > div.d-flex{gap: 1.5rem;}
}
@media (max-width:350px) {
	#main_container #MORU .txt_box > div.d-flex{gap: 1rem;}
	#main_container #MORU .txt1{font-size: 3rem;}
	#main_container #MORU .txt2{font-size: 3rem;}
	#main_container #MORU .txt3{font-size: 5rem;}
}




/*sec01*/
#main_container #SERVICE{
	padding: 11.5rem 0 12rem;
	color: #fff;
	background: url(../_img/main/main_sec01_bg.jpg) no-repeat center bottom / cover;
}
#main_container #SERVICE > div{justify-content: space-between;}
#main_container #SERVICE small{color: #ff6633;}
#main_container #SERVICE .txt p{color: #bbbbbb;}
#main_container #SERVICE .txt p b{
	text-decoration: underline;
	color: #fff;
}
#main_container #SERVICE ul{
	flex-wrap: wrap;
	gap: 3rem;
	flex-shrink: 0;
	width: 60.7%;
}
#main_container #SERVICE ul li{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 5.5rem 4rem 4.5rem;
	width: calc(50% - 1.5rem);
	height: 42rem;
	border-radius: 2rem;
	border: 1px solid rgba(255, 255, 255, .5);
	transition: all .3s;
}
#main_container #SERVICE ul li:nth-child(2){margin-top: 6rem;}
#main_container #SERVICE ul li:nth-child(3){margin-top: -6rem;}
#main_container #SERVICE ul li:hover{
	background: #ff6633;
	border-color: #ff6633;
}
#main_container #SERVICE ul li img{width: 66px;}
#main_container #SERVICE ul li dt{
	margin-bottom: 5px;
	font-size: 2.4rem;
	font-weight: 900;
}
#main_container #SERVICE ul li dd{font-size: 1.8rem;}
@media (max-width:991.98px) {
	#main_container #SERVICE{padding: 8rem 0;}
	#main_container #SERVICE > div{flex-wrap: wrap;}
	#main_container #SERVICE ul{width: 100%;}
	#main_container #SERVICE ul li dt{font-size: 2.2rem;}
}
@media (max-width:767.98px) {
	#main_container #SERVICE{padding: 6rem 0;}
	#main_container #SERVICE ul{gap: 2rem;}
	#main_container #SERVICE ul li{
		padding: 4rem 3rem;
		height: 30rem;
		width: calc(50% - 1rem);
	}
	#main_container #SERVICE ul li:nth-child(2){margin-top: 4rem;}
	#main_container #SERVICE ul li:nth-child(3){margin-top: -4rem;}
	#main_container #SERVICE ul li img{width: 50px;}
	#main_container #SERVICE ul li dt{font-size: 2rem;}
	#main_container #SERVICE ul li dd{font-size: 1.6rem;}
	#main_container #SERVICE ul li dd br{display: none;}
}
@media (max-width:575.98px){
	#main_container #SERVICE ul li{
		margin: 0 !important;
		width: 100%; height: auto;
		gap: 2rem;
	}
}


#main_container #CLIENTS{
	padding: 13rem 0 20rem;
	background: #f5fcff;
	overflow: hidden;
}
#main_container #CLIENTS .swiper-wrapper{transition-timing-function: linear;}
#main_container #CLIENTS .swiper-slide{width: auto !important;}
#main_container #CLIENTS .swiper-slide > div{
	display: flex;
	align-items: center;
}
#main_container #CLIENTS .swiper-slide > div img{margin: 0 3rem;}
@media (max-width:991.98px) {
	#main_container #CLIENTS{padding: 8rem 0 12rem;}
	#main_container #CLIENTS .swiper-slide > div img{
		margin: 0 2rem;
		max-width: 130px;
		max-height: 50px;
	}
}
@media (max-width:767.98px) {
	#main_container #CLIENTS{padding: 6rem 0 10rem;}
	#main_container #CLIENTS .swiper-slide > div img{
		margin: 0 1.5rem;
		max-width: 110px;
		max-height: 40px;
	}
}
@media (max-width:575.98px) {
	#main_container #CLIENTS .swiper-slide > div img{
		max-width: 100px;
		max-height: 30px;
	}
}



#main_container #WORK{
	padding: 13.5rem 15px 15rem;
}
#main_container #WORK .top{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 6.5rem;
}
#main_container #WORK .top a {
	position: relative;
	padding-bottom: 1rem;
	padding-right: 4.5rem;
	color: #000;
}
#main_container #WORK .top a span{
	z-index: -1;
	position: absolute;
	bottom: -.5rem; right: 0;
	width: 6rem; height: 6rem;
	line-height: 6rem;
	text-align: center;
	border: 1px solid #dddddd;
	border-radius: 50%;
	transition: all .3s;
}
#main_container #WORK .top a:hover span{
	color: #fff;
	background: #ff6633;
	border-color: #ff6633;
}
#main_container #WORK .mySwiper{
	position: relative;
	overflow: hidden;
}
#main_container #WORK .controll{
	z-index: 10;
	position: absolute;
	left: 0; bottom: 12rem;
	display: flex;
	align-items: center;
}
#main_container #WORK .controll .btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem; height: 6rem;
	font-size: 2rem;
	color: #999999;
	background: #fff;
	border: 1px solid #777777;
	border-radius: 0;
}
#main_container #WORK .controll .btn.work-btn-next{margin-left: -1px;}
#main_container #WORK .controll .swiper-pagination{
	position: relative;
	width: auto; bottom: unset;
	margin-left: 2.5rem;
	color: #999;
}
#main_container #WORK .controll .swiper-pagination span::before{content: '0';}
#main_container #WORK .controll .swiper-pagination span.swiper-pagination-current{
	color: #ff6633;
	font-weight: bold;
}
#main_container #WORK .contents{display: flex;}
#main_container #WORK .contents .txt{
	padding-top: 12rem;
	padding-right: 3rem;
	width: 30%;
}
#main_container #WORK .contents h4{
	margin-bottom: 2rem;
	font-size: 5rem;
	font-weight: 900;
}
#main_container #WORK .contents h4 small{
	display: block;
	margin-bottom: 1rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: #ff6633;
}
#main_container #WORK .contents p{
	font-size: 2rem;
	color: #999999;
}
#main_container #WORK .contents a{width: 70%;}
#main_container #WORK .contents a img{width: 100%;}
@media (max-width:1300px) {
	#main_container #WORK .controll{bottom: 8rem;}
	#main_container #WORK .contents .txt{padding-top: 8rem;}
}
@media (max-width:1199.98px) {
	#main_container #WORK .controll{bottom: 4rem;}
	#main_container #WORK .contents .txt{
		padding-top: 4rem;
		width: 35%;
	}
	#main_container #WORK .contents a{width: 65%;}
}
@media (max-width:991.98px){
	#main_container #WORK{padding: 8rem 15px;}
	#main_container #WORK .top{margin-bottom: 3rem;}
	#main_container #WORK .top a {padding-right: 4rem;}
	#main_container #WORK .top a span{
		bottom: -.25rem;
		width: 5.5rem; height: 5.5rem;
		line-height: 5.5rem;
	}
	#main_container #WORK .controll{
		position: relative;
		bottom: 0; 
		margin-top: 2rem;
		justify-content: flex-end;
	}
	#main_container #WORK .controll .btn{width: 5rem; height: 5rem;}
	#main_container #WORK .controll .swiper-pagination{margin-left: 1.5rem;;}
	#main_container #WORK .contents{display: block;}
	#main_container #WORK .contents > *{width: 100% !important;}
	#main_container #WORK .contents .txt{
		margin-bottom: 2rem;
		padding: 0;
	}
	#main_container #WORK .contents h4{
		margin-bottom: 1rem;
		font-size: 4rem;
	}
	#main_container #WORK .contents h4 small{margin-bottom: .5rem;}
}
@media (max-width:767.98px){
	#main_container #WORK{padding: 6rem 15px;}
	#main_container #WORK .controll .btn{font-size: 1.8rem;}
	#main_container #WORK .contents .txt{margin-bottom: 1rem;}
	#main_container #WORK .contents h4{font-size: 3rem;}
	#main_container #WORK .contents p{font-size: 1.8rem;}
}
@media (max-width:575.98px){
	#main_container #WORK .controll{
		justify-content: center;
		margin-top: 1rem;
	}
	#main_container #WORK .contents p,
	#main_container #WORK .controll .btn{display: none;}
	#main_container #WORK .contents a{
		pointer-events: none;
	}
}



#main_container #CONTACT{
	display: flex;
	align-items: center;
	padding-top: 10rem;
	color: #fff;
	background: url(../_img/main/main_sec04_bg.jpg) no-repeat right center / cover;
}
#main_container #CONTACT .mapBox{
	width: 43%; height: 70rem;
	border-top-right-radius: 20rem;
	overflow: hidden;
}
#main_container #CONTACT .mapBox .root_daum_roughmap .wrap_map,
#main_container #CONTACT .mapBox .root_daum_roughmap{width: 100%; height: 100%;}
#main_container #CONTACT .mapBox .wrap_controllers,
#main_container #CONTACT .mapBox .wrap_btn_zoom,
#main_container #CONTACT .mapBox .map_border ,
#main_container #CONTACT .mapBox .root_daum_roughmap .wrap_map > .map > div:nth-of-type(2){
  display: none;
}
#main_container #CONTACT .infoBox{
	padding-left: 14rem;
	padding-right: 3rem;
	width: 57%;
}
#main_container #CONTACT .infoBox h3 small,
#main_container #CONTACT .infoBox h3 span{color: #ff6633;}
#main_container #CONTACT .infoBox dl{font-size: 2rem;}
#main_container #CONTACT .infoBox dt{
	font-weight: 900;
	color: #ff6633;
}
#main_container #CONTACT .infoBox dd{font-weight:500;}
@media (max-width:1400px) {
	#main_container #CONTACT .infoBox{padding-left: 8rem;}
	#main_container #CONTACT .infoBox h3 br{display: none;}
}
@media (max-width:991.98px) {
	#main_container #CONTACT{padding-top: 8rem;}
	#main_container #CONTACT .infoBox{padding-left: 5rem;}
}
@media (max-width:767.98px) {
	#main_container #CONTACT{
		padding: 6rem 15px;
		display: block;
	}
	#main_container #CONTACT > div{
		width: 100% !important;
		margin: 0 auto;
		max-width: 510px;
	}
	#main_container #CONTACT .mapBox{
		height: 35rem;
		border-top-right-radius: 12rem;
	}
	#main_container #CONTACT .infoBox{padding: 0;}
	#main_container #CONTACT .infoBox dl{font-size: 1.8rem;}
}
@media (max-width:575.98px){
	#main_container #CONTACT .mapBox{
		height: 30rem;
		border-top-right-radius: 8rem;
	}
}