@charset "utf-8";

@media (max-width: 1640px) {
/* main */
	.mv-controll{left: 0; margin-left: 20px;}
}


@media (max-width: 1500px) {
/* intro */
	intro .link-box{gap:20px}
	intro .link-box > a{height: auto; aspect-ratio:1/1}
	
/* main */	
	#main{max-width:100%; overflow: hidden;}
	.main-board > .lbx{max-width:50%}
	
}
@media (max-width: 1300px) {
/* header */
	.deok #header .sitelogo{width: 180px;}
	.deok #header #gnb > ul > li > a{width: 100px; font-size: 18px;}
	.deok #header #gnb .link > a{font-size: 16px; width: 130px; height: 30px; gap:5px}
	.deok #header #gnb .link > a i img{width: 20px;}
	
	.hana #header .sitelogo{width: 180px;}
	.hana #header #gnb > ul > li > a{width: 100px; font-size: 18px;}
	.hana #header #gnb .link > a{font-size: 16px; width: 130px; height: 30px; gap:5px}
	.hana #header #gnb .link > a i img{width: 20px;}	
	
	#header #gnb > ul > li .submenu ul > li > a{font-size: 14px;}
}


@media (max-width: 1024px) {
/* intro */
	intro .link-box > a p{font-size: 22px;}
	intro .link-box > a p b{font-size: 28px;}
	intro .link-box > a > span{width: 150px; height: 50px; font-size: 16px; margin-top: 20px;}
	
/* header */	
	#header{height: 80px;}
	#header #gnb > ul{display: none !important;}
	#header .sitemap-btn{display: flex !important; flex-direction: column; gap:5px; width: 30px; margin-left: 20px;}
	#header .sitemap-btn span{width: 100%; height: 3px; background: #fff; border-radius: 5px;}

 .hana	#header .sitemap-btn span{background: #333; }

	.hd-bg{display: none !important; }
/* main */
	.mcnt1,
	.mcnt1 .item{height: 800px !Important;}
	.mcnt1 .m_txt .box h3{font-size: 33px; line-height: 1.5;}
	.mcnt1 .m_txt .box p{font-size: 20px; line-height: 1.5;}
	.mv-controll{bottom: 200px;}
	.main-tit{margin-bottom: 30px;}
	.main-tit h3{font-size: 32px; line-height: 1;} 
	.main-tit p{font-size: 18px; line-height: 1.5;}
	.mcnt2{padding-top: 50px; padding-bottom: 50px;}
	.mcnt2 ul{gap:20px;}
	.mcnt2 ul > li{
	a:after{ opacity: 1; translate:0% 0%;}
	a .tbx:before{opacity: 1; translate:0 0; }
	a .tbx h4{font-size: 28px; line-height: 120%; margin-bottom: 10px;}
	.tbx p{opacity: 1 !important; margin-bottom: 0 !important; font-size: 18px !important; line-height: 1.5 !important;}
	}
	.mcnt2 ul > li:hover a .tbx h4 {font-size: 28px !important; margin-bottom: 10px !Important}
	.mcnt3-wrap{padding-top: 50px; padding-bottom: 50px;}
	.main-board{flex-direction: column; }
	.main-board > .lbx{width: 100%; max-width:100%; padding: 30px;}
	.main-board > .lbx .tit h4{font-size: 26px;}
	.main-board > .lbx .tit .more a{font-size: 14px;}
	.main-board > .lbx ul > li > a{height: 40px; font-size: 18px; line-height: 1; padding-left: 20px;}
	.main-board > .lbx ul > li > a:before{left: 8px; width: 4px; height: 4px; top: 21px;}
	.main-board > .lbx ul > li > a span{font-size: 14px;}
	.main-board > .rbx ul li > a{gap:10px;}
	.main-board > .rbx ul li > a .tbx{gap:10px;}
	.main-board > .rbx ul li > a .tbx > p{font-size: 18px; line-height: 1.5; height: 3.2em;}
	.main-board > .rbx ul li > a .tbx > .info{font-size: 16px; height: 40px;}
	
/* footer */	
	.deok #footer .ft-top{height: 50px;}
	.deok #footer .ft-top ul > li > a{font-size: 16px;}
	.deok #footer .ft-top ul > li:not(:last-child):after{margin: 0 15px;}
	.deok #footer .ft-cnt{padding: 30px 20px; gap:20px}	
	.deok .scroll-top{right: 10px; bottom: 275px;}
	
	.hana #footer .ft-top{height: 50px;}
	.hana #footer .ft-top ul > li > a{font-size: 16px;}
	.hana #footer .ft-top ul > li:not(:last-child):after{margin: 0 15px;}
	.hana #footer .ft-cnt{padding: 30px 20px; gap:20px}	
	.hana .scroll-top{right: 10px; bottom: 275px;}
	
} 

@media (max-width: 640px) {
/* intro */
	intro{height: 100dvh;}
	intro .link-box{flex-direction: column;}
	intro .link-box > a{max-width:80vw; width: 80%;}

/* main */
	.mcnt2 ul{flex-direction: column;}
	.mcnt2 ul > li > a{height: auto;}
	.main-board{gap:30px}
	.main-board > .rbx ul{gap:20px}

/* footer */
	.deok #footer .ft-cnt .ft-info ul > li{font-size: 16px; gap:0px 15px}
	.deok #footer .ft-cnt .ft-link > ul{flex-wrap:nowrap; gap:0 5px}
	.deok #footer .ft-cnt .ft-link > ul > li{width: 31%;}
	.deok #footer .ft-cnt .ft-link > ul > li > a{width: auto;}


	.hana #footer .ft-cnt .ft-info ul > li{font-size: 16px; gap:0px 15px}
	.hana #footer .ft-cnt .ft-link > ul{flex-wrap:nowrap; gap:0 5px}
	.hana #footer .ft-cnt .ft-link > ul > li{width: 31%;}
	.hana #footer .ft-cnt .ft-link > ul > li > a{width: auto;}
}

@media (max-width: 480px) {
/* header */	
	.deok #header #gnb .link > a{font-size: 0; width: auto; gap:0; padding: 0px 5px;} 

	.hana #header #gnb .link > a{font-size: 0; width: auto; gap:0; padding: 0px 5px;} 
	
/* main */	
	.mcnt1,
	.mcnt1 .item{height: 110vw !Important;}
	.mcnt1 .m_txt .box h3{font-size: 28px; line-height: 1.2;}
	.mcnt1 .m_txt .box p{font-size: 18px;}
	.mv-scroll p{font-size: 14px;}
	.mv-controll{bottom: 100px;}
	.main-tit p{font-size: 16px; word-break: keep-all;}
	.main-tit p br{display: none;}
	.mcnt2 ul > li > a{height: 80vw !important;}
	.mcnt2 ul > li > a .tbx{padding: 20px;}
	.mcnt2 ul > li{
		.tbx p{font-size: 16px !important; }
	}
	.mcnt2 ul > li > a:after{right: 15px; top: 15px;}
	.main-board > .lbx ul > li > a{padding-left: 13px; }
	.main-board > .lbx ul > li > a:before{left: 0;}
	.main-board > .lbx ul > li > a span{width: 77px; text-align: right;}	
	.main-board > .rbx{width: 100%; overflow-y: auto; padding-bottom: 20px;}
	.main-board > .rbx > ul{width:130vw; }
	
/* footer */
	.deok #footer .ft-cnt .ft-info ul > li{flex-direction: column; gap:5px}
	.deok .scroll-top{bottom: 150px;}
	.deok #footer .ft-top ul > li > a{font-size: 14px !important;}
	
	.hana #footer .ft-cnt .ft-info ul > li{flex-direction: column; gap:5px}
	.hana .scroll-top{bottom: 150px;}
	.hana #footer .ft-top ul > li > a{font-size: 14px !important;}	
}