@charset "utf-8";

@media (max-width: 1440px) {
/* main */
	.mcnt1 .mv-controll{width: auto; left: 20px; margin-left: 0; translate: 0% 0;}
	.mcnt2-wrap .mcnt2{padding: 0 20px;}
	.mcnt2-wrap .mcnt2 > ul > li > a .tbx{font-size: 16px;}
}

@media (max-width: 1400px) {
/* header */
	.header-wrap{height: 80px;}
	#header .sitelogo{width: 180px;}
	#header #gnb{margin-left: 0;}
	#header #gnb > ul{gap:0 50px}
	#header #gnb > ul > li > a{ font-size: 20px;}
	#header #gnb > ul > li .subm > ul{gap:10px;}
	#header #gnb > ul > li .subm > ul > li > a{font-size: 18px;}
	.header-wrap.on {
		#header #gnb > ul {gap: 40px;}
		#header #gnb > ul > li > a { padding: 0 20px;}
	}
/* main */
	.main-board{gap:20px;}
	.mcnt4 .main-board > a .tbx b{font-size: 20px;}
	
/* footer */	
	#footer .ft-left{gap:40px;}
	#footer .ft-left .ft-logo{width: 180px;;}
	#footer .ft-right ul > li:first-child:after{margin: 0 10px;}
	#footer .ft-left ul > li{font-size: 16px;}
}

@media (max-width: 1024px) {
/* header */
	#header .hd-btn{margin-right: 0;}

	#gnb {display:none;}
	#header .sitemap-btn{width: 80px; height: 80px; margin-right: -20px; display: flex;}
/* main */	
	.mcnt1,
	.mcnt1 .item{height: 80vw !important;}
	.mcnt1 .m_txt .box h3{font-size: clamp(28px, 6.2vw, 70px); line-height: 1.2;}
	.mcnt1 .m_txt .box h3 span{font-size: clamp(18px, 4.8vw, 50px); line-height: 1.2;}
	.mcnt1 .m_txt .box p{font-size: 16px; line-height: 1.5; word-break: keep-all; text-shadow:1px 1px 8px rgba(0,0,0,2); color: #fff; font-weight: 400;}
	.mcnt1 .m_txt .box p br{display: none;}
	.mcnt1 .mv-controll{bottom: 25vw;}
	.mcnt2-wrap{margin-top: 0; width: 100%; }
	.mcnt2-wrap .mcnt2{border-radius: 0px;  }
	.mcnt2-wrap .mcnt2 ul{ gap:0px; flex-wrap:wrap;}
	.mcnt2-wrap .mcnt2 ul > li{flex:1 1 20%}
	.mcnt3-wrap{padding: 60px 0;}
	.mcnt3{flex-direction: column; }
	.mcnt3 .lbx{padding-top: 0;}
	.mcnt3 .lbx .tit small{font-size: 16px;}
	.mcnt3 .lbx .tit h3{font-size: clamp(22px, 3.8vw, 40px); line-height: 1.4;}
	.mcnt3 .lbx p{font-size: 16px; line-height: 1.5; word-break: keep-all;}
	.mcnt3 .lbx p br{display: none;}
	
	.mcnt4-wrap{margin-top: 60px;}
	.main-tit{margin-bottom: 20px;}
	.main-tit h3{font-size: clamp(20px, 3.8vw, 40px);}
	.main-tit .link-box > a{gap:5px;}
	.main-tit .link-box > a p{font-size: 16px;}
	.main-board{gap:30px 20px; flex-wrap:wrap;}
	.main-board > a{flex:1 1 40%;}
	.mcnt4 .main-board > a .tbx b{font-size: 18px;}
	.mcnt4 .main-board > a .tbx p{font-size: 14px; line-height: 1.5; -webkit-line-clamp: 100;}
	.mcnt5-wrap{margin-top: 60px;}
	.main-board > a figure img{width: 100%;}
	.mcnt5-wrap{margin-bottom: 100px;}

/* footer */
	.ft-wrap{height: auto; padding: 20px 0px;}
	#footer{flex-direction: column;}
	#footer .ft-left{flex-direction: column; align-items: center; gap:20px;}  
	#footer .ft-left ul{align-items: center;}
	#footer .ft-left ul > li{gap:10px;}
	#footer .ft-right{display: none;}
	
	
	
}

@media (max-width: 640px) {
/* header */
	#header .hd-btn .mems > ul > li > a{gap:6px; font-size: 14px;}
	#header .hd-btn .mems > ul > li:first-child > a:after{margin: 0 7px 0 7px;}
	#header .hd-btn .mems > ul > li:first-child > a{gap:6px;}
	#header .sitemap-btn{margin-left: 20px;}
	

/* main */
	.mcnt1,
	.mcnt1 .item{height: 90vw !important;}
	.mcnt1 .mv-controll{bottom: 20px; left: 50%; translate:-50% 0%;}
	.mcnt1 .m_txt .box{padding-bottom: 0; padding-top: 40px;}
	.mcnt2-wrap .mcnt2{height: auto; padding: 10px; }
	.mcnt2-wrap .mcnt2 > ul > li > a{gap:0px}
	.mcnt2-wrap .mcnt2 > ul > li > a{height: auto;}
	.mcnt2-wrap .mcnt2 > ul > li i{padding: 10px; max-width:70px}
	.mcnt2-wrap .mcnt2 > ul > li:hover > a:after{height: calc(100% + 20px); bottom: -10px;}
	.mcnt2-wrap .mcnt2::-webkit-scrollbar {width: 8px;  height: 8px;}
	.mcnt2-wrap .mcnt2::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.6); /* 스크롤바 색상 */ border-radius: 10px; /* 스크롤바 둥근 테두리 */}
	.mcnt2-wrap .mcnt2::-webkit-scrollbar-track {background: rgba(220, 20, 60, .1);  /*스크롤바 뒷 배경 색상*/}
	.mcnt3-wrap:before{background-size: 40%;		}
	.mcnt3 .rbx .box-wrap .box{flex:1 1 35%; height: auto; } 
	.mcnt3 .rbx .box-wrap .box > a{padding: 20px;}
	.mcnt3 .rbx .box-wrap .box a figure{right: 5px; bottom: 5px; max-width:80px; padding: 10px;}
	.mcnt3 .rbx .box-wrap .box a .txt small{font-size: 14px;}
	.mcnt3 .rbx .box-wrap .box a .txt b{font-size: 20px;}
	.mcnt3 .rbx .box-wrap .box a .txt span{font-size: 14px;}
	
	

}

@media (max-width: 480px) {
/* header */
	.header-wrap{height: 60px;}
	#header .sitelogo{width: 140px;}
	#header .sitemap-btn{width: 60px; height: 60px;}
	#header .sitemap-btn span{width: 40px;}
	#header .sitemap-btn span:last-child{width: 35px; margin-left: 5px;}
	#header .hd-btn .mems > ul > li > a{font-size: 12px;}
	#header .hd-btn .mems > ul > li > a svg{width: 20px; position: relative; top: -1px;}


/* main */	
	
	.mcnt2-wrap .mcnt2 > ul > li i{max-width:60px}
	.mcnt2-wrap .mcnt2 > ul > li > a .tbx{font-size: 12px;}
	.mcnt4 .main-board > a .tbx b{font-size: 16px;}

	.mcnt3 .rbx .box-wrap .box > a{padding: 10px; padding-bottom: 50px;}
/* footer */	

	.ft-wrap{padding-bottom: 70px;}
	.ft-fix{right: 0; bottom: 0;}
	.ft-fix.sc{right: 0; bottom: 0;}
	.ft-fix .quick-bt{height: 50px; bottom: 0; left: 0; width: 100%;}
	.ft-fix .quick-bt figure{display: none;}
	.ft-fix .quick-bt .on{flex-direction: row; align-items: center; justify-content: flex-start;  width: calc(100vw - 50px) !important; height: 50px; right: 50px; padding: 0 20px; border-radius: 0; gap:15px; opacity: 1 !Important;}
	.ft-fix .quick-bt.active .on{}
	
	.ft-fix .quick-bt .on b{margin-top: 0;}
	.ft-fix .quick-bt .on:before{border-radius: 0;}
	.ft-fix .quick-bt .on:after{display: none;}
	.ft-fix .scroll-top{width: 50px; height: 50px; border-radius: 0;}
	#footer .ft-left ul > li{ gap:5px; flex-direction: column;}

}