:root {
    --footerHeight: 70px;
}
footer{height : var(--footerHeight); background-color : #090417; color : #fff; padding : 17px 70px 0 31px; z-index: 9998; position: relative;}
footer:after{content:''; display : block; clear : both;}
footer .copyright-box{float: left; padding: 12px 0 0 0;}
footer .copyright-box copyright{font-size : 15px; display : flex; font-weight : 500; color : #fff;}
footer .copyright-box copyright span{display : inline-block; margin : 0 2px 0 0;}
footer .fnb-box{float: right;}
footer .fnb-box ul{margin : 0 47px 0 0;}
footer .fnb-box ul li{display : inline-block; margin : 0 0 0 31px; padding : 12px 0;}
footer .fnb-box ul li a{font-size : 15px; color : #fff; display : inline-block;}
footer .fnb-box ul li:last-child a {font-weight: 700;}
footer .family-site-box{float:right; background-color : #27262c; width : 195px; height: 34px; position: relative;}
footer .family-site-box:after{content:'Family Site'; font-size : 14px; color : #f2eaea; padding : 10px 0 0 15px; display : block; width : 100%; height: 100%; box-sizing: border-box; word-spacing: -1px; cursor: pointer;}
footer .family-site-box:before{content:''; display : block; width : 9px; height: 5px; background-image:url(/images/common/arrow_family_site_off.png); position: absolute; top : 15px; right : 12px; transform : rotate(180deg); transition : all 0.2s;}
footer .family-site-box ul{display : none;}
footer .family-site-box ul li {height : 30px;padding: 7px 0 0 15px;}
footer .family-site-box ul li:hover {background-color : #edf0f2;}
footer .family-site-box ul li a{display : block; font-size : 14px; color : #f2eaea;}
footer .family-site-box ul li:hover a {color : #090417;font-weight: 500;}
footer .family-site-box.active:before {content:''; display : block; width : 9px; height: 5px; background-image:url(/images/common/arrow_family_site_off.png); position: absolute; top : 15px; right : 12px; transform : rotate(360deg);}
footer .family-site-box.active ul {display : inline-block; position : absolute; bottom : 34px; background-color : #27262c; width : 100%;}
footer .quick-menu-box{position: fixed; top : 450px; right : 70px;}
footer .quick-menu-box ul li {border: solid 1px #d0dfff; border-bottom: none;}
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: 70px; font-size : 12px; letter-spacing: -0.072px; text-align: center; background: center 10px no-repeat #fff; color: #1f263e; position: relative; padding-top: 45px;}
footer .quick-menu-box ul li:nth-child(1) a {background-image: url('/images/common/footer/ic_remote.svg'); font-weight: 700; color: #3a53db;}
footer .quick-menu-box ul li:nth-child(2) a {background-image: url('/images/common/footer/ic_point.svg');}
footer .quick-menu-box ul li:nth-child(3) a {background-image: url('/images/common/footer/ic_open.svg');}
footer .quick-menu-box ul li:nth-child(4) 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: #ccdbf8;}
footer .quick-menu-box ul li:last-child a:before {content: none;}

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

@media (max-width: 1485px) {
	footer .quick-menu-box{display: none;}
}
@media (max-width: 1250px) {
}
@media (max-width: 980px) {
	footer{padding : 17px 30px 0 30px;}
	footer .fnb-box{display: none;}
}

@media (max-width: 600px) {
    :root {
        --footerHeight: 113px;
    }
	footer{padding : 20px 15px;}
	footer .copyright-box{padding : 0; width : 100%; margin-bottom : 20px;}
	footer .family-site-box{width : 100%; height: auto;}
	footer .family-site-box:after{padding : 12px;}
	footer .family-site-box:before{top : 50%; transform : translateY(-50%) rotate(180deg);}
	footer .family-site-box.active:before{top : 50%; transform : translateY(-50%) rotate(0deg);}
	footer .family-site-box ul li{padding : 0; height: auto;}
	footer .family-site-box ul li a{padding : 12px;}
	footer .family-site-box.active ul{height: auto; top : auto; bottom : 38px;}
}

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