@charset "utf-8";

@media (max-width: 1680px) {
/* header */
	#header #gnb > ul{gap:20px;}
	.header-wrap.on {
		#header #gnb > ul > li > a {width: 110px !important;}
	}
	#header #gnb > ul > li .subm > ul > li > a{font-size: 12px;}
	#header .sitemap-btn{margin-left: 15px;}
	.hd-my > a{width: 96px; font-size: 12px; padding: 8px 9px 8px 7px; }
	.hd-langs > b{font-size: 12px; width: 60px; padding: 8px 7px 8px 5px;}
	.hd-langs > ul > li > a{font-size: 12px;}
	.hd-langs > ul{padding: 5px 13px;}
	.hd-login{margin-right: 15px;}
	.hd-login > li > a{font-size: 12px;}

/* main */
	main .mcnt4 .flex-box a{padding: 10px;}
	main .mcnt4 .tit-box b{font-size: 18px;}
	main .mcnt4 .tit-box b p{font-size: 12px;}
	main .mcnt5 .wrap .tbx b{font-size: 18px;}
	main .mcnt4 .flex-box a .tbx p{word-break: break-all;}
	main .mcnt4 .flex-box a .tbx p br{display: none;}
}

@media (max-width: 1400px) {
/* main */
	main .flex-1{flex-wrap:wrap; gap:20px} 
	main .mcnt1{width: 100%; 	border-radius: 20px; overflow: hidden;} 
	main .mcnt2{width: calc(35% - 10px);}
	main .mcnt3{width: calc(65% - 10px);}
	main .flex-2{flex-direction: column;}
	main .board-main .img-box{background-size: cover;}
}

@media (max-width: 1240px) {
/* header */
	#gnb {display:none;}
	.hd-info{margin-left: auto;}
}



@media (max-width: 1024px) {
/* main */
	main .mcnt1 .tbx b{font-size: 20px; line-height: 1.5; word-break: keep-all;}
	main .mcnt1 .tbx b br{display: none;}
	main .mcnt4 .flex-box a{flex:30%}
	main .flex-2{gap:20px;}
	main .mcnt5 .wrap .tbx{flex:100%; gap:5px; padding: 0; margin-bottom: 20px;}
	main .mcnt5 .wrap .tbx b br{display: none; }
	main .mcnt5 .wrap .box{flex: 1 1 45%}
	
/* footer */	
	.footer-wrap{padding: 30px 0;}
	#footer{flex-direction: column; gap:20px;}
	#footer .ft-cnt{margin-left: 0;}
	#footer > ul{margin-left: 0; justify-content: center; gap: 12px 20px;}
	main .mcnt4 .tit-box{gap:10px;}
	main .mcnt4 .tit-box b{flex-direction: column; align-items: flex-start; gap:5px}	
	
	.scroll-top{width: 40px; height: 40px; right: 20px; bottom: 120px;}
	
	
}

@media (max-width: 640px) {
	#footer .family-site{flex-basis: 100%; text-align: center;}
	#footer .family-site select{width: 280px;}
/* header */
	#header .hd-info{display: none;}
	
/* main */	
	main .mcnt5 .wrap .box{flex:100%;}
	main .board-main{flex-direction: column; gap:20px}
	
}

@media (max-width: 480px) {
/* main */	
	main .mcnt4 .flex-box a{flex:48%;}	
	main .mcnt2{width: 100%;}
	main .mcnt3{width: 100%; height: 53vw;}
	

}