@charset "utf-8";

@media (max-width: 1800px) {
/* header */
	#header #gnb > ul > li > a{font-size: 18px;}
	#header #gnb > ul > li:nth-child(1){width: 121px;}
	#header #gnb > ul > li:nth-child(2){width: 137px;}
	#header #gnb > ul > li:nth-child(3){width: 88px;}
	#header #gnb > ul > li:nth-child(4){width: 209px;}
	#header #gnb > ul > li:nth-child(5){width: 121px;}
	#header #gnb:hover{margin-left: 51px;
	> ul > li{width: 180px;}
	}
	#header #gnb .submenu{padding: 20px 0;}
	
/* main */	
	.mv-controll{left: 0; margin-left: 20px;}	
	.mcnt2 .flex-box .lbx .tbx-slider .tbx b{margin-top: 25px;}
	.mcnt2 .flex-box .rbx .img-slider{height: 100%;}
	.mcnt2 .flex-box .rbx .img-slider figure img{width: calc(100vw - 620px);}
	.mcnt2 .flex-box .rbx .img-slider figure figcaption{font-size: 28px;} 
	.mcnt4{padding: 100px 30px;}
	
}

@media (max-width: 1440px) {
/* header */
	#header .sitelogo > a{width: 200px;}
	#header #gnb > ul > li:nth-child(1){width: 100px;}
	#header #gnb > ul > li:nth-child(2){width: 110px;}
	#header #gnb > ul > li:nth-child(3){width: 80px;}
	#header #gnb > ul > li:nth-child(4){width: 190px;}
	#header #gnb > ul > li:nth-child(5){width: 120px;}
	#header #gnb{margin-left: 41px;}
	#header #gnb .submenu > ul > li > a{font-size: 14px; line-height: 1.8;}
	#header #gnb:hover{margin-left: 21px;
	> ul > li{width: 130px;}
	}
	
}

@media (max-width: 1024px) {
	#gnb {display:none;}
	#header{height: 80px;}	
	.lnb > ul > li ol{display: none;}
	.slnb{display: block; border-bottom: 1px solid #ddd;}
	.slnb > a{display: none;}
	.slnb > ol{display: flex; justify-content: center; align-items:center; gap:15px; padding: 20px 0;}
	.slnb > ol > li > a{font-size: 16px; line-height: 1.5; color: #666; transition:.3s;}
	.slnb > ol > li.current > a{color: #085790;}
	
	
/* main */	
	.mcnt4 .rbx{ min-height:0px}
	.mcnt1,
	.mcnt1 .item{height: 80vw !important;}
	.mcnt1 .m_txt .box h3{font-size: clamp(34px, 6.5vw, 76px); line-height: 1.2;}
	.mv-controll{	bottom: 30px;}
	.mcnt2{padding-top: 80px; padding-bottom: 100px;}
	.mcnt2 h3{font-size: clamp(30px, 6vw, 74px); line-height: 1.2;}
	.mcnt2 .flex-box{flex-direction: column; }
	.mcnt2 .flex-box .lbx{max-width:100%; padding: 40px 20px; gap:30px}
	.mcnt2 .flex-box .lbx ul > li{font-size: 14px;}
	.mcnt2 .flex-box .lbx .tbx-slider .tbx b{font-size: 26px; line-height: 1.5; margin-bottom: 15px;}
	.mcnt2 .flex-box .lbx .tbx-slider .tbx p{font-size: 16px; line-height: 1.5;}
	.mcnt2 .flex-box .rbx .img-slider figure img{width: calc(100vw - 40px);}
	.mcnt3 {padding-bottom: 100px;}
	.mcnt3 ul{flex-wrap:wrap; }
	.mcnt3 ul > li{width: calc(50% - 15px); top: 0px !Important;}

	.mcnt3 ul > li > a .tbx{padding: 30px; gap:0px}
	.mcnt3 ul > li > a .tbx span{font-size: 16px;}
	.mcnt3 ul > li > a .tbx p{font-size: 22px; line-height: 1.5;}
	.mcnt3 ul > li > a:after{right: 30px; top: 30px;}
	.mcnt3 big{font-size: 80px; line-height: 1.5;}
	.mcnt4{padding: 80px 30px;}
	.mcnt4 .lbx{position: static; }
	.mcnt4 .lbx h3{font-size: clamp(30px, 6vw, 75px); line-height: 1.2; margin-bottom: 10px;} 
	.mcnt4 .lbx h3 br{display: none;}
	.mcnt4 .rbx{margin-top: 0; padding-left: 0; }
	.mcnt4 .lbx .mcnt4-tab > li{font-size: 18px; line-height: 1.5; padding-left: 20px;	}
	.mcnt4 .lbx .mcnt4-tab > li:before{top: 8px;}
	.mcnt4 .lbx .more-link{margin-top: 30px;}
	.mcnt4 .lbx .mcnt4-tab{flex-direction: row; gap:20px}
	.mcnt4 .rbx .board-box > ul > li a{padding: 20px;}
	.mcnt4 .rbx .board-box > ul > li a .info .date{font-size: 30px;}
	.mcnt4 .rbx .board-box > ul > li a .tit{margin-top: 20px; margin-bottom: 20px; padding-bottom: 20px;}
	.mcnt4 .rbx .board-box > ul > li a .tit p{font-size: 20px; line-height: 1.5;}
	.mcnt4 .rbx .board-box > ul > li a .txt p{font-size: 16px; line-height: 1.5;}
	
/* footer */	
	.quick{right: 20px; bottom: 20px;}
	.quick ul > li > a{width: 60px; height: 60px;}
	.quick ul > li:first-child > a:hover{width: 120px;}
	.quick ul > li:first-child > a img{right: 9px;}
	.quick ul > li > a p{font-size: 14px;}
	
	.ft-cnt{flex-direction: column; padding: 30px 20px; height: auto;}
	.ft-cnt .info{	margin: 0; margin-top: 10px;		}
	.ft-bottom{flex-direction: column; gap:10px; justify-content: center;}
	.ft-cnt .info ul > li{line-height: 1.5; margin-bottom: 5px;}
	.ft-cnt .ft-nav > ul{gap:10px; margin-top: 5px;}
	.ft-cnt .ft-nav > ul > li > a{font-size: 14px;}
	.ft-cnt:after{z-index: -1;}
	.mcnt4{margin-top: 30px;}
	
}

@media (max-width: 640px) {
/* main */	
	.mcnt2 .flex-box .lbx ul{flex-wrap:wrap;}
	.mcnt2 .flex-box .lbx ul > li{flex:1 1 40%}
	.mcnt2 .flex-box .rbx .img-slider figure figcaption{font-size: 22px; line-height: 1.5; padding-bottom: 10px;}
	.mcnt2 .flex-box .lbx ul > li > p{font-size: 14px; line-height: 1.5;}	
	.mcnt2 .flex-box .lbx ul > li > ol{margin: 15px 0 30px;}
	.mcnt2 .flex-box .lbx{padding: 20px; gap:0px;}
	.mcnt2 .flex-box .lbx .tbx-slider .tbx p br{display: none;}
	.mcnt2 .flex-box .rbx .img-slider figure figcaption{font-size: 18px;}
}

@media (max-width: 480px) {
/* main */	
	.mcnt1, .mcnt1 .item{height: 100vw !important;}
	.mcnt4 .lbx .more-link > a{width: 130px; height: 50px; font-size: 16px; gap:10px}
	.mcnt4 .rbx .board-box{margin-top: 20px;}
	.mcnt4 .rbx .board-box > ul{margin-left: 0;}
	.mcnt4 .rbx .board-box > ul > li{width: 100%; margin-left: 0;}
	.mcnt4 .rbx .board-box > ul > li:nth-child(odd){top: 0;}
	.mcnt2{padding-bottom: 50px;}
	.mcnt3 ul{flex-direction: column; gap:10px}
	.mcnt3 ul > li{width: 100%; }
	.mcnt3 ul > li > a{border-radius: 10px;}
	

/* footer */
	.ft-cnt .ft-nav > ul{flex-wrap:wrap;}
	.ft-bottom{padding: 20px 20px; height: auto;}
}

@media (max-width: 400px) {
/* footer */
	.ft-cnt .info ul > li{flex-direction: column;}
}