:root {
    --footerHeight: 60px;
}
footer {height: var(--footerHeight); background-color: #090417; color: #fff; padding: 0 50px 0 30px; z-index: 9998; position: relative; display: flex; align-items: center; gap: 30px;}
footer .copyright {margin-right: auto; font-weight: 500; font-size: 15px; color: #fff; opacity: 0.7;}

footer .fnb-box {display: flex; align-items: center; gap: 30px;}
footer .fnb-box li a {font-weight: 500; font-size : 14px; letter-spacing: -0.03em; color : #fff; opacity: 0.7;}
footer .fnb-box li .privacy {font-weight: 700; opacity: 1;}
footer .fnb-box li .remote {display: block; padding: 8px 20px; border: solid 1px #3A3D4C; background: #2C2E39; opacity: 1; border-radius: 18px;}

footer .family-site-box {background-color: #090417; flex: 0 0 194px; height: 35px; border: solid 1px #2F2E37; position: relative;}
footer .family-site-box span {font-weight: 500; font-size: 14px; color: #fff; display : block; line-height: 33px; padding-left: 12px; cursor: pointer; position: relative;}
footer .family-site-box span::after {content:''; display : block; width : 8px; height: 8px; background-image:url('/images/common/footer/ic_plus.svg'); position: absolute; top : 50%; right: 10px; transform: translateY(-50%); transition: all 0.2s;}
footer .family-site-box ul {display : none; background-color : #090417; border: solid 1px #2F2E37; position: absolute; left: -1px; bottom: 33px; width: calc(100% + 2px); border-bottom: 0;}
footer .family-site-box ul li {height : 30px;}
footer .family-site-box ul li:hover {background-color : #edf0f2;}
footer .family-site-box ul li a {display : block; line-height: 30px; font-size: 14px; color: #f2eaea; padding-left: 12px;}
footer .family-site-box ul li:hover a {font-weight: 500; color : #090417;}
footer .family-site-box.active {height: auto;}
footer .family-site-box.active span::after {transform: translateY(-50%) rotate(135deg);}
footer .family-site-box.active ul {display : block;}

footer .quick-menu-box{position: fixed; top : 450px; right : 70px;}
footer .quick-menu-box ul li {border: solid 1px #d0dfff; border-bottom: none; background: #fff;}
footer .quick-menu-box ul li ~ li {border-top: none;}
footer .quick-menu-box ul li:last-child {border-color: #000;}
footer .quick-menu-box ul li a {display: block; width : 70px; height: 65px; font-weight: 500; font-size : 12px; letter-spacing: -0.03em; text-align: center; background: center 12px no-repeat; color: #282828; position: relative; padding-top: 43px;}
footer .quick-menu-box ul li a:hover { font-weight: 700; color: #006CFF; }
footer .quick-menu-box ul li:nth-child(1) a {background-image: url('/images/common/footer/ic_chat.svg');}
footer .quick-menu-box ul li:nth-child(1) a:hover {background-image: url("/images/common/footer/ic_chat-blue.svg");}
footer .quick-menu-box ul li:nth-child(2) a {background-image: url('/images/common/footer/ic_market.svg');}
footer .quick-menu-box ul li:nth-child(2) a:hover {background-image: url("/images/common/footer/ic_market-blue.svg");}
footer .quick-menu-box ul li:nth-child(3) a {background-image: url('/images/common/footer/ic_book.svg');}
footer .quick-menu-box ul li:nth-child(3) a:hover {background-image: url("/images/common/footer/ic_book-blue.svg");}
footer .quick-menu-box ul li:nth-child(4) a {background-image: url('/images/common/footer/ic_corp.svg');}
footer .quick-menu-box ul li:nth-child(4) a:hover {background-image: url("/images/common/footer/ic_corp-blue.svg");}
footer .quick-menu-box ul li:last-child a {background-image: url('/images/common/footer/ic_top.svg'); background-position: center 20px; background-color: #000; color: #fff;}
footer .quick-menu-box ul li ~ li a:before {content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 54px; height: 1px; background-color: #d0dfff;}
footer .quick-menu-box ul li:last-child a:before {content: none;}


@media (max-width: 1485px) {
	footer .quick-menu-box{display: none;}
}
@media (max-height: 801px) {
	footer .quick-menu-box {display: none;}
}

@media (max-width: 1250px) {
    footer {padding: 0 15px 0 30px;}
}

@media (max-width: 1050px) {
	footer .fnb-box{display: none;}
}

@media (max-width: 600px) {
    :root {
        --footerHeight: 113px;
    }
	footer{padding : 20px 15px; flex-direction: column; align-items: stretch; gap: 20px;}
    footer .family-site-box {flex: 0 0 35px; margin-top: auto;}
}

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