/* ============================ footer style start ============================= */
@charset "utf-8";

#footer {padding: 30px 0; background-color: #fff; border-top: 1px solid #eeeeee;}
#footer * {text-align: center; color: #888888; font-size: 15px}
#footer p:first-of-type {margin: 20px 0 0 0;}
#footer img {max-width: 310px;	}

.footer-gnb{margin: 20px 0;}
.footer-gnb > ul{display:flex; justify-content:center;}
.footer-gnb > ul > li a{display: flex; justify-content: center; align-items: center; width: 150px;  text-align: center;}
.footer-gnb > ul > li a > img{width: 20px !important; margin-right: 10px;}
.footer-gnb > ul > li{margin: 0 10px; padding: 6px 0; border: 1px solid #eee;}

@media screen and (max-width:1025px){
	#footer img {max-width: 250px;}
	#footer p { white-space: pre-line;}
	#footer p br {display: none;}
	#footer{padding: 30px 0 120px}
}

@media screen and (max-width:769px){
	.footer-gnb > ul {flex-wrap: wrap;}
	.footer-gnb > ul > li {margin: 10px; width: calc(50% - 20px);}
	.footer-gnb > ul > li a{width: 100%;}
}
@media screen and (max-width:425px){
	.footer-gnb{margin: 10px 0;}
	.footer-gnb > ul > li{margin: 5px; width: calc(50% - 10px);}

	#footer * {font-size: 12px;}
}


/* ================================================================= */
/* ========================== quick menu ========================== */
/* ================================================================= */


#quick_menu {position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 1001; background: #003377; border-radius: 20px; transition: all 0.3s ease-in-out;}
#quick_menu a {position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 25px 10px; text-align: center; width: 100px; height: 100px; cursor: pointer;}
#quick_menu ul > li:not(:first-child) a::before {position: absolute; content: ''; left: 50%; top: 0; transform: translateX(-50%); width: calc(100% - 30px); height: 1px; background: #7e95be;}
#quick_menu a .img {width: 100%; height: 100%; padding: 8px 10px;}
#quick_menu a .img img {height: 100%;}
#quick_menu span {display: block; width: 100%; padding-top: 5px; font-family: 'NanumSquare',san-serif; font-weight: 700; transform: skew(-0.1deg); color: #fff; font-size: 14px;}

#quick_menu li {
	transition: all 0.5s;
	opacity: 0.5;
}
#quick_menu li:hover {
	opacity: 1;
}
.quick-link {position: fixed; left: 10px; bottom: 10px; z-index: 1000; cursor: pointer; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; animation-duration: 1s;
  animation-name: quick-move; animation-iteration-count: infinite; animation-direction: alternate; transition: all 0.3s ease-in-out; display: none; max-width: 55px;}
.quick-link:hover {border: 1px solid #fff; padding: 5px;}
.quick-link.none {opacity: 0; z-index: -1;}
.quick-close {position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: -50px; width: 50px; height: 50px; border-radius: 0 20px 0 0; background: #254888; opacity: 0; z-index: -1; transition: all 0.3s ease-in-out;}
.quick-close img {max-width: 30px; cursor: pointer;}

@keyframes quick-move {
  from {
    bottom: 10px;
  }

  to {
    bottom: 20px;
  }
}

@media screen and (max-width:1024px){
	#quick_menu {top: auto; right: auto; left: 0; bottom: 0; transform: none; width: 100%; border-radius: 20px 20px 0 0;}
	#quick_menu ul {display: flex; justify-content: center;}
	#quick_menu ul > li {flex: 1;}
	#quick_menu a {width: 100%;}
	#quick_menu ul > li:not(:first-child) a::before {left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 30px);}
	#quick_menu a .img img {width: auto;}
}


@media screen and (max-width:600px){
	#quick_menu li {
		opacity: 1;
	}

	#quick_menu {opacity: 0; z-index: -1; border-radius: 0;}
	#quick_menu.on {opacity: 1; z-index: 100;}
	#quick_menu.on .quick-close {opacity: 1; z-index: 100;}
	#quick_menu ul {flex-wrap: wrap;}
	#quick_menu ul > li {flex: none; width: 33.3%;}
	#quick_menu a {height: 70px; padding: 10px;}
	#quick_menu a .img {padding: 15px 10px 5px;}
	#quick_menu span {font-size: 13px;}

	#quick_menu ul > li:not(:first-child) a::before {height: 100%;}
	#quick_menu ul > li:nth-child(4) a::before {display: none;}
	#quick_menu ul > li:nth-child(n+4):nth-child(-n+6) a::after {position: absolute; content: ''; top: 5px; left: 0; width: 100%; height: 1px; background: #7e95be;}

	.quick-link {display: block;}
}

@media screen and (max-width:425px){

}