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

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

.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:1200px) {
	#footer {padding: 30px 0 100px;}
}

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

@media screen and (max-width:769px){
	.footer-gnb > ul{display: flex;}
	.footer-gnb > ul > li a{width: 100%;}
}
@media screen and (max-width:425px){
	#footer img {max-width: 140px;}
	footer *{font-size: 12px !important;}

	.footer-gnb {margin: 10px 0;}
	.footer-gnb > ul {flex-wrap: wrap;}
	.footer-gnb > ul > li {margin: 5px; width: calc(50% - 10px);}
	.footer-gnb > ul > li a {width: 100%;}
}

/* =================================================================================================================================== */
/* =========================================================== partners =========================================================== */
/* =================================================================================================================================== */

.partners { padding: 30px 0;background-color: #fff;}

.pt-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);}
.pt-track { display: flex; width: max-content;}
.pt-list { display: flex; align-items: center; list-style: none; animation: pt-scroll 30s linear infinite;}
.pt-marquee:hover .pt-list { animation-play-state: paused;}
.pt-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0 45px;}
.pt-item img { height: 45px; width: auto;}

@keyframes pt-scroll {
  from { transform: translateX(0);}
  to { transform: translateX(-100%);}
}

@media screen and (max-width: 1024px) {
  .partners { padding: 60px 0;}
  .pt-item { padding: 0 30px;}
  .pt-item img { height: 36px;}
}

@media screen and (max-width: 769px) {
  .partners { padding: 20px 0;}
  .pt-item { padding: 0 10px;}
  .pt-item img { height: 50px;}
  .pt-list { animation-duration: 20s;}
}

@media screen and (max-width: 425px) {
  .pt-item { padding: 0 16px;}
  .pt-item img { height: 24px;}
}

/* =================================================================================================================================== */
/* =========================================================== partners =========================================================== */
/* =================================================================================================================================== */

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

.quick-menu { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 9000; display: flex; flex-direction: column;}
.qm-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 90px; background-color: rgba(50,50,55,0.9); border-top: 1px solid rgba(255,255,255,0.12); transition: background-color 0.3s ease;}
.qm-item:first-child { border-top: none;}
.qm-item:hover { background-color: #417bbf;}
.qm-active { background-color: #417bbf;}
.qm-icon { width: 26px; height: 26px; margin-bottom: 8px;}
.qm-icon svg { width: 100%; height: 100%;}
.qm-text { font-weight: 700; color: #fff;}

@media screen and (max-width: 1024px) {
  .qm-item { width: 70px; height: 70px;}
  .qm-icon { width: 22px; height: 22px; margin-bottom: 6px;}
}

@media screen and (max-width: 769px) {
  .quick-menu { top: auto; bottom: 0; right: 0; left: 0; transform: none; flex-direction: row; width: 100%; z-index: 99998;}
  .qm-item { flex: 1; width: auto; height: 60px; border-top: none; border-left: 1px solid rgba(255,255,255,0.12);}
  .qm-item:first-child { border-left: none;}
  .qm-icon { width: 20px; height: 20px; margin-bottom: 4px;}
  .qm-text { font-size: 12px;}
}

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

/* =================================================================================================================================== */
/* =========================================================== top-btn =========================================================== */
/* =================================================================================================================================== */

.top-btn { position: fixed;right: 10px; bottom: 10px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: rgba(50,50,55,0.85); border-radius: 100%; z-index: 9500; opacity: 0; visibility: hidden; cursor: pointer; transform: translateY(10px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;}
.top-btn.show { opacity: 1; visibility: visible; transform: translateY(0);}
.top-btn:hover { background-color: #417bbf;}
.top-btn svg { width: 22px; height: 22px;}

@media screen and (max-width: 769px) {
  .top-btn { right: 10px; bottom: 75px; width: 44px; height: 44px;}
  .top-btn svg { width: 18px; height: 18px;}
}

/* =================================================================================================================================== */
/* =========================================================== top-btn =========================================================== */
/* =================================================================================================================================== */