@charset "UTF-8";

.footer {flex-shrink: 0; color: #A1ABB6; letter-spacing: -0.3px; padding: 35px 20px 170px; box-sizing: border-box; margin-top: auto; font-size: 12px; word-break: keep-all; background: #394049;}
.sns {display: flex; align-items: center; justify-content: center; padding-top: 20px;}
.sns>li {padding: 0 6px;}
.sns>li>a {display: inline-block;}
.sns>li>a>img {width: 40px; height: 40px;}

.family-wrap {position: relative; border-radius: 3px; margin-top: 20px; background-color: #545D68; box-shadow: 0 3px 6px rgba(0,0,0,0.16);}
.family-wrap .btn-site {position: relative; width: 100%; padding: 10px 20px; text-align: left; letter-spacing: -0.4px; color: #fff;}
.btn-site:after {content: ''; position: absolute; right: 20px; top: 50%; width: 0; height: 0; border-bottom: 6px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent; transform: translateY(-50%);}
.btn-site.on:after {transform: rotate(180deg);}
.list-wrap {z-index: 10; display: none; position: absolute; left: 0; bottom: 40px; font-size: 14px; border-radius: 3px; width: 100%; box-sizing: border-box;}
.site-list {background-color: #6D7885;}
.site-list li a {padding: 10px 30px; display: block; transition: all 0.3s; color: #fff;}
.list-wrap {max-height: 251px; overflow-y: auto;}
.site-list li.on a {background: #626C78;}

.footer .footer-bottom {padding-top: 20px; margin-top: 0; border-top: none; text-align: left;}
.footer-bottom .text-box {padding-top: 0;}
.footer-util {display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 0;}
.footer-util>li.highlight>a {color: #FFC107;}
.footer-util>li {padding-right: 10px; padding-left: 0; margin-right: 10px; line-height: 1.8; position: relative;}
.footer-util>li:before {content: ''; position: absolute; left: auto; right: 0; top: 5px; width: 1px; height: 11px; background: #848A92;}
.footer-util>li:last-child {padding-right: 0; margin-right: 0;}
.footer-util>li:last-child:before {display: none;}
.footer-util>li:first-child:before {display: block;}
.footer-util>li>a {color: #A1ABB6;}

@media screen and (min-width: 768px){
    .footer {padding: 30px 30px 140px;}
    .sns>li {padding: 0 5px;}
    .sns>li:first-child {padding-left: 0;}
    .footer-bottom {display: flex; justify-content: space-between; align-items: flex-end;}
    .family-wrap {margin-top: 0; min-width: 200px;}
    .family-wrap .btn-site {padding: 12px 20px;}
}
@media screen and (min-width: 1024px){
    .footer {padding: 30px;}
    .inner-footer {max-width: 1400px; margin: 0 auto;}
    .footer-top {display: flex; align-items: center; justify-content: space-between;}
    .sns {padding-top: 0; min-width: 200px;}
    .sns>li>a>img {width: 30px; height: 30px;}
    .footer-bottom {padding-top: 0;}
    .footer-util {font-size: 14px;}
    .footer-util>li:before {top: 7px; height: 12px;}
    .footer-bottom .text-box {padding-top: 5px;}
    .list-wrap {top: auto; bottom: 44px;}
    .family-wrap {width: 320px; box-sizing: border-box;}
}