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

/* footer */
#footer { background: #3a3a3a; padding: 40px 0; color: #fff; }
.footer-wrap { gap: 10px; }
.footer-left { flex: 1; }
.footer-link { gap: 15px; }
.footer-link li a { color: #fff; font-size: 14px; opacity: 0.9; }
.footer-link li a:hover { opacity: 1; }
.footer-link li:not(:last-child)::after { content: '|'; margin-left: 15px; opacity: 0.5; }
.footer-img img { max-width: 280px; border-radius: 5px; }
.copyright { font-size: 13px; opacity: 0.7; }
.footer-center { flex: 1; }
.footer-logo img { height: 40px; }
.footer-info p {line-height: 1.8; opacity: 0.9; }
.footer-tel { color: #b3e1e9; font-size: 32px; font-weight: 700; }
.footer-right { flex: 1; text-align: right; }
.footer-map img { max-width: 300px; }

@media screen and (max-width: 1024px) {
	.footer-img img { max-width: 220px; }
	.footer-map img { max-width: 250px; }
	.footer-tel { font-size: 28px; }
}

@media screen and (max-width: 769px) {
	#footer { padding: 30px 0; }
	.footer-wrap { flex-direction: column-reverse; text-align: center; gap: 30px; }
	.footer-left, .footer-center, .footer-right { width: 100%; text-align: center; }
	.footer-link { justify-content: center; }
	.footer-img img { max-width: 250px; }
	.footer-map img { max-width: 280px; margin: 0 auto; }
	.footer-tel { font-size: 26px; }
}

@media screen and (max-width: 480px) {
	.footer-info p { font-size: 13px; }
	.footer-tel { font-size: 22px; }
	.footer-img img { max-width: 200px; }
	.footer-map img { max-width: 100%; }
}


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

#quick_menu {position: fixed; top: 50%; transform: translateY(-50%); right: 0; z-index: 999999;}
#quick_menu span {display: block; width: 100%; padding-top: 5px; font-weight: 700; transform: skew(-0.1deg);}

#quick_menu li:first-child {cursor: pointer; color: #fff; background: #0e6572; padding: 5px 0; width: 100%; border-radius: 10px 10px 0 0; text-align: center;}
#quick_menu li:first-child a{display: inline-block; width: 100%; color: #fff;}
#quick_menu li:not(:first-child) a {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fff; width: 100px; height: 100px; font-weight: 500; font-size: 14px; border-left: 1px solid #ccc;}
#quick_menu li:not(:first-child) a:hover {transition: all 0.5s; background: #eee;}
#quick_menu li#top button {background: #000;}
#quick_menu li#top img {height: 15px;}
#quick_menu li#top span {padding-top: 10px; color: #fff;}

#top_btn {border: none; width: 100%; max-width: 100px; max-height: 100px; padding: 20px 10px; cursor: pointer; background-color: #ffffffc7; border: 1px solid #ccc; border-top: 0;}

@media screen and (max-width:1024px){
#quick_menu {padding: 0; left: 0px;	top: auto; width: 100%; height: auto; bottom: 0px; display: block; position: fixed; z-index: 200; transform:none;}
#quick_menu ul {width: 100%; height: 100%; position: relative; display: flex;}
#quick_menu ul li {width: 33.33%; height: 100%; text-align: center;}
#quick_menu ul li a {width: 100% !important; max-width: 100%	!important; padding: 10px; border-left: 0 !important; border-top: 1px solid #ccc;}
#quick_menu ul li#call {display: none;}
#quick_menu ul li:first-child {display: none;}
#quick_menu ul li#top {display: none;}
}

@media screen and (max-width: 480px){
#quick_menu li:not(:first-child) a {padding: 10px 0; font-size: 12px; height: 80px;}
#quick_menu img {height: 20px;}
}