@charset "utf-8";

@media (max-width: 1320px) {
/* header */
	#header #gnb > ul > li > a{width: 160px; font-size: 18px;}
	#header #gnb > ul > li .subm > ul > li > a{font-size: 16px;}
	
/* main */	
	.mcnt1 .mv-controll{translate: 0 0; left: 20px;}
	.mcnt2{border-radius: 0 0 150px 0;}
	
	.mcnt4 .flex-box .box .dd ul > li > a p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	

}

@media (max-width: 1024px) {
/* header */
	#gnb {display:none;}
	.header-wrap.on, .header-wrap{height: 90px !important;}
	
/* main */	
	.mcnt1{ height: 80vw !important; }
	.mcnt1 .item{ height: 80vw;  }
	.mcnt1 .item .m_txt .tit{gap:0px; margin-bottom: 20px;}
	.mcnt1 .item .m_txt .tit p{font-size: 28px; line-height: 1.5;}
	.mcnt1 .item .m_txt .box > p{font-size: 16px; line-height: 1.5;}
	.mcnt1 .mv-controll{left: 50%; translate:-50% 0; bottom: 30px; justify-content: center;}
	.mcnt2{height: auto; padding: 80px 0px 80px;}
	.mcnt2 .tbx br{display: none;}
	.mcnt2 .tbx .tit{margin-bottom: 20px;}
	.mcnt2 .tbx .tit p{font-size: 22px; line-height: 1.5;}
	.mcnt2 .tbx .tit p b{font-size: 28px; line-height: 1.5;}
	.mcnt2 .tbx .txt{gap:20px; margin-bottom: 20px;}
	.mcnt2 .tbx .txt b{font-size: 18px; line-height: 1.5;}
	.mcnt2 .tbx .txt p{font-size: 16px; line-height: 1.5;}
	.mcnt2 .tbx > p{font-size: 18px; line-height: 1.5;}
	.mcnt3{padding: 80px 0 100px;}
	.mcnt3 .tit{gap:20px;}
	
	.mcnt3 .tit b{font-size: 24px; line-height: 1.8;}
	.mcnt3 .tit b strong span:before{top: -5px;}
	.mcnt3 .tit > p{font-size: 16px; line-height: 1.5;}
	
	.mcnt3:before{width: 40vw; height: 40vw; background-size: 100%;}
	.mcnt3:after{width: 40vw; height: 40vw; background-size: 100%; left: -25vw; top: -10vw;}
	
	.mcnt3 .cnt{gap:20px;}
	.mcnt3 .cnt > a{flex: 1 1 30%; height: 250px; background-size: cover;}
	.mcnt3 .cnt > a .tit{padding-bottom: 50px !Important; font-size: 22px;}
	.mcnt3 .cnt > a .link-box{opacity: 1; bottom: 30px;}
	.mcnt3 .cnt > a .link-box > p{font-size: 14px;}
	.mcnt3 .cnt > a{border-radius: 20px;
		&:before{opacity: 0;}
		&:after{opacity: 0.4;} 
	}
	
	.mcnt4{padding: 60px 0 ;}
	.mcnt4 > div > .tit{margin-bottom: 40px;}
	.mcnt4 > div > .tit b{font-size: 28px; line-height: 1.5;}
	.mcnt4 > div > .tit p{font-size: 16px;}
	.mcnt4 .flex-box .box{flex:100%;}
	.mcnt4 .flex-box .box .dt{height: 46px; box-sizing: border-box;	 padding: 5px 10px;}
	.mcnt4 .flex-box .box .dt .tit span{font-size: 14px;}
	.mcnt4 .flex-box .box .dt .tit p{font-size: 18px;}
	.mcnt4 .flex-box .box .dd ul{padding-left: 20px;box-sizing: border-box;}
	.mcnt4 .flex-box .box .dd ul > li > a p{font-size: 16px; width: calc(100% - 100px);}
	.mcnt4 .flex-box .box .dd ul > li{margin-left: 0;}
	.mcnt4 .flex-box .box .dd ul > li > a span{font-size: 12px; width: 70px;}

/* footer */
	.scroll-top{right: 20px; width: 45px; height: 45px;}
	.ft-wrap .ft-top ul > li > a{font-size: 16px; line-height: 50px;}
	
	.ft-wrap .ft-cnt{padding-top: 30px; padding-bottom: 30px;}
	.ft-wrap .ft-cnt .ft-lbx{gap:30px; flex-direction: column;}
	.ft-wrap .ft-cnt .ft-lbx .tbx > ul > li{font-size: 16px;}

}

@media (max-width: 640px) {
/* main */	
	.mcnt1{ height: 100vw !important; }
	.mcnt1 .item{ height: 100vw;  }	
	.mcnt3 .cnt > a .tit{padding-bottom: 0 !important;}
	.mcnt3 .cnt > a{flex: 1 1 100%; height: 180px; background-position: center 20vw;}
	.mcnt3 .cnt > a .link-box{display: none;}
	
	

}

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