@charset "utf-8";

@media (max-width: 1840px) {
	.mcnt2{width: calc(100% - 40px); margin-left: 20px;}
}
@media (max-width: 1600px) {
/* main */	
	.mcnt1 .box .tbx{padding-left: 70px;}
	.mcnt1 .box .tbx b{font-size: 65px;}
	.main-tit h4{font-size: 65px;}
	.mcnt2 .wrap2 .rbx .img-box{width: 600px; height: 520px;}
	.mcnt2 .wrap2 .rbx .img-box .item{margin-left: -115px;   /* 비율 반영 */ margin-top: -144px;    /* 비율 반영 */}
	.mcnt2 .wrap2 .rbx .img-box .item img{width: 240px;}
	.mcnt2 .wrap2 .rbx .img-box .item1 { translate: 0 109px; z-index: 10; }
	.mcnt2 .wrap2 .rbx .img-box .item2 { translate: -191px 59px; z-index: 9; }
	.mcnt2 .wrap2 .rbx .img-box .item3 { translate: -142px -84px; z-index: 8; }
	.mcnt2 .wrap2 .rbx .img-box .item4 { translate: 132px -111px; z-index: 6; }
	.mcnt2 .wrap2 .rbx .img-box .item5 { translate: 180px 32px; z-index: 7; }
	.mcnt3 .top_box .mcnt3-controll{margin-right: 0;	}
	.scroll-top.sc{right: 20px;}
	
		
}

@media (max-width: 1200px) {
	#header #gnb{padding-left: 20px;}
	#header #gnb ul > li > a{font-size: 18px; padding: 6px 30px 0;} 
}

@media (max-width: 1024px) {
	#gnb {display:none;}
	.mcnt1{height: 550px;}
	.mcnt1 .box .tbx{padding-left: 20px; padding-bottom: 50px;}
	.mcnt1 .box .tbx b{font-size: 45px;}
	.mcnt1 .box .tbx p{font-size: 16px; line-height: 1.5;}
	.mcnt1 .box .more{width: 30px; height: 30px; border-radius: 5px;}
	.mcnt1 .box .more img{width: 15px;}
	.mcnt2 .wrap2 .lbx{width: 100%;}
	.main-tit h4{font-size: 45px; line-height: 1.5; margin-bottom: 30px;}
	.main-tit b{font-size: 18px; line-height: 1.5;}
	.main-tit p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.main-tit p br{display: none;}
	.main-tit .link-box{margin-top: 30px;}
	.main-tit .link-box > a{gap:15px;}
	.main-tit .link-box > a i{width: 30px; height: 30px; 	border-radius: 5px;}
	.main-tit .link-box > a i svg{width: 15px;}
	.mcnt2 .wrap2 .rbx {margin: 0 auto; margin-top: 50px;}
	.mcnt3{height: auto; margin-top: 50px; padding: 50px 0px; overflow: hidden;} 
	.mcnt3 .top_box .mcnt3-controll {gap:15px}
	.mcnt3 .top_box .mcnt3-controll span{width: 30px;	height: 30px; border-radius: 5px;}
	.mcnt3 .top_box .mcnt3-controll span svg{width: 15px;}
	.mcnt3 .top_box .main-tit{flex:1;}
	.mcnt3 .owl-wrap{margin-top: 50px; padding-right: 0;}
	.mcnt3 .owl-wrap{}
	.mcnt3 .owl-wrap .item .tbx{padding: 20px 10px;}
	.mcnt3 .owl-wrap .item .tbx b{font-size: 18px; line-height: 1.5; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;}
	.mcnt3 .owl-wrap .item .tbx p{font-size: 16px; line-height: 1.5; margin-top: 5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;}
	.scroll-top{width: 30px; height: 30px; 	border-radius: 5px;}
	#main #footer .top-box{padding: 50px 0;}
	#footer .bottom-box ul > li.last b{width: 130px; gap:20px; font-size: 14px; padding: 10px;}

}




@media (max-width: 640px) {
	.main-tit h4{font-size: 38px;}
	.mcnt1{gap:10px; }	
	.mcnt1 .box{flex: 70px;}
	.mcnt1 .box .tbx b{font-size: 35px; line-height: 1.2;}
	.mcnt1 .box.on {& { flex: 100%;}}
	.mcnt2{padding-bottom: 50px;}
	.mcnt2 .wrap2{padding: 50px 0 0px; flex-direction: column;}
	.main-tit .link-box{position: relative; z-index: 10;}
	.mcnt2 .wrap2 .rbx{margin-top: 0px; }
	.mcnt2 .wrap2 .rbx .img-box { width: 90%; height: 80vw;}
	.mcnt2 .wrap2 .rbx .img-box .item{ width: 34.5vw;height: 43.3vw;margin-left: -17.2vw;margin-top: -21.6vw;}
	.mcnt2 .wrap2 .rbx .img-box .item img{width: auto; max-width:100%; height: auto;}
	.mcnt2 .wrap2 .rbx .img-box .item1 { translate: 0 18.2vw; }
	.mcnt2 .wrap2 .rbx .img-box .item2 { translate: -25.9vw 9.9vw; }
	.mcnt2 .wrap2 .rbx .img-box .item3 { translate: -20.7vw -14.0vw; }
	.mcnt2 .wrap2 .rbx .img-box .item4 { translate: 18.0vw -18.6vw; }
	.mcnt2 .wrap2 .rbx .img-box .item5 { translate: 21.9vw 5.3vw; }
	
	#main #footer .top-box .ft-logo{margin-bottom: 10px; }
	#main #footer .top-box .ft-logo img{width: 200px;}
	#main #footer .top-box ul > li{font-size: 14px; line-height: 1.5;}
	#main #footer .top-box p{margin-top: 10px;}
	#main #footer .bottom-box{}


	#main #footer .top-box ol{margin-top: 20px; margin-bottom: 20px;}
	.scroll-top{bottom: 100px;}
	#footer .bottom-box ul > li.last ol{height: 230px; bottom: 36px;}
	#footer .bottom-box ul > li.last ol > li > a{font-size: 12px; padding: 5px 5px;}



	
	
}



@media (max-width: 400px) {
	
}