@charset "utf-8";

@media (max-width: 1600px) {
	#header .container .logo {left: 15px;}
	#header .container .logo a {max-width: 450px;}
	#header .container #gnb {padding-left: 600px;}
	#header .container #gnb > ul > li {padding-top: 100px;}
	#header .container #gnb ul li > .submenu {top: 100px;}
	#header .head-util {top: 150px;}
	
}

@media (max-width: 1400px){
	#header .container #gnb {padding-left: 300px;}
	#header .container .logo a {max-width: 300px;}
	#header .container #gnb > ul > li {padding-top: 70px;}
	#header .container #gnb > ul > li > a {width: 180px;}
	#header .container #gnb ul li > .submenu {top: 70px;}
	#header .head-util {top: 120px;}
	
	#sub #header .container #gnb {padding-left: 450px;}
	#sub #header .container .logo a {max-width: 300px;}
}

@media (max-width: 1200px){
	#sub #header .container #gnb {padding-left: 300px;}

	#footer .ft_logo {max-width: 300px;}
	#footer .right a {font-size: 35px;}
	#footer .right a span {width: 100px; height: 100px;}
	#footer .right a span::before {width: 45px; top: 34px;}
	#footer .right a span::after {width: 45px; bottom: 34px;}
	#footer .right a:hover span::before {top: 40px;}
	#footer .right a:hover span::after {bottom: 40px;}
	#footer .copyright {line-height: 1.3;}
}

@media (max-width: 1024px) {
	#gnb {display:none;}
	#footer .ft_nav {top: initial; bottom: 0; left: 0; transform: none; width: 100%; padding:50px 30px;}
	#footer .ft_nav ul {display: flex; align-items: center; gap: 20px; width: 100%; flex-wrap: wrap;}
	#footer .ft_nav ul li {flex: 1 1 auto; width: 1%;}
	#footer .ft_nav ul li ~ li {margin-top: 0;}
	
	#sub #footer .ft_nav {top: initial;}
}

@media (max-width: 768px) {
	#header .container .logo a {max-width: 250px;}
	#header .head-util {gap: 20px; top: 110px;}
	
	#sub #header .container .logo {top: 87px;}
	#sub #header .container .logo a {max-width: 250px;}
	body#sub.opened #header .logo a {max-width: 250px;}
	body#sub.opened #header .logo {top: 29px;}
	body#sub.opened #header .head-util {top: 40px;}
	
	#footer {padding-bottom: 120px;}
	#footer .inner {flex-wrap: wrap;}
	#footer .ft_logo {max-width: 100%; padding-top: 40px;}
	#footer .ft_logo img {max-width: 300px; width: 100%;}
	#footer .right {max-width: 100%; display: flex; align-items: center; gap: 20px;}
	#footer .right a {justify-content: left; font-size: 24px; gap: 15px;}
	#footer .right a ~ a {margin-top: 0;}
	#footer .right a span {width: 80px; height: 80px;}
	#footer .right a span::before {width: 30px; top: 29px;}
	#footer .right a span::after {width: 30px; bottom: 29px;}
	#footer .right a:hover span::before {top: 34px;}
	#footer .right a:hover span::after {bottom: 34px;}
	
	#footer .ft_nav {display: none;}
	
	#sub #footer {margin-top: 180px;}
	
	#footer .terms {display: block; margin-top: 30px;}
	#footer .terms ul {display: flex; width: 100%; gap: 20px;}
	#footer .terms ul li a {font-size: 18px; color: #835a4f;}
	
	
}

@media (max-width: 480px) {
	#header {height: 100px !important;}
	#header .container .logo {top: 30px !important;}
	#header .container .logo a {max-width: 180px !important;}
	#header .head-util {gap: 20px; top: 35px !important;}
	#header .head-util .lang {display: block; max-width: 30px; width: 100%;}
	#header .head-util .btn-nav {width: 60px; height: 34px;}
	#header .head-util .btn-nav > span:nth-of-type(1) {width: 50px;}
	#header .head-util .btn-nav > span:nth-of-type(3) {width: 40px;}
	#header .head-util .btn-nav > span ~ span {margin-top: 8px;}
	
	#footer .ft_logo img {max-width: 180px;}
	#footer .copyright {font-size: 16px;}
	#footer .right {gap: 10px;}
	#footer .right a {font-size: 20px; gap: 10px;}
	#footer .right a span {width: 50px; height: 50px;}
	#footer .right a span::before {width: 15px; top: 19.5px;}
	#footer .right a span::after {width: 15px; bottom: 19.5px;}
	#footer .right a:hover span::before {top: 22px;}
	#footer .right a:hover span::after {bottom: 22px;}
	
	#sub #footer {margin-top: 100px; padding-top: 240px;}
	#sub #footer::before {height: 200px;}
	
	#footer .terms ul li a {font-size: 16px;}
	
}