@import url('https://webfontworld.github.io/pretendard/Pretendard.css');

/*
font-family: 'Pretendard';
*/

#footer{
    font-family: 'Pretendard',sans-serif;
    font-weight:400;
    padding:40px 0 80px;
    text-align:center;
    border-top:0px solid #B6B6B6;
}
#footer .container{
    width:1600px;
    margin:0 auto;
    position:relative;
}
#footer h2{
    margin-bottom:30px;
}
#footer h2 .logo{
    display:inline-block;
    width:223px;
    height:56px;
    text-indent:-9999em;
    background:url(../images/header_logo_black.png) no-repeat center center/cover;
}
#footer .link_list{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-bottom:25px;
}
#footer .link_list a{
    font-family: 'Pretendard',sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:-0.005em;
    color:#121212;
}
#footer .footer_list{
    display:flex;
    gap:0 20px;
    justify-content:center;
    align-items:center;
    width:760px;
    margin:0 auto 20px;
    flex-wrap:wrap;
}
#footer .footer_list li{
    font-family: 'Pretendard';
    font-size:14px;
    letter-spacing:-0.002em;
    margin-bottom:10px;
    color:#797979;
    position:relative;
    word-break:keep-all;
}
#footer .footer_list li br{
    display:none;
}
#footer .footer_list li + li::before{
    content:'|';
    position:absolute;
    top:50%;
    left:-12px;
    transform:translateY(-50%);
    color:#797979;
}
#footer .footer_list li.address::before{
    display:none;
}
#footer .container > p{
    font-size:14px;
    font-weight:600;
    letter-spacing:-0.002em;
    color:#9D9D9D;
    text-transform:uppercase;
}
#footer .container > p br{
    display:none;
}
#footer .container .site_list{
    position:absolute;
    bottom:0;
    right:0;
    text-align:center;
    width:226px;
    height:40px;
}
#footer .container .site_list > p{
    width:226px;
    height:40px;
    text-transform:uppercase;
    font-size:16px;
    letter-spacing:-0.005em;
    line-height:40px;
    cursor:pointer;
    text-align:center;
    color:#fff;
    background:#23442C;
}
#footer .container .site_list > ul{
    position:absolute;
    bottom:100%;
}
#footer .container .site_list li{
    width:226px;
    height:40px;
    background:rgba(35,68,44,.7);
    text-align:center;
    color:#f0f0f0;
    line-height:40px;
    display:none;
    margin-bottom:1px;
}
#footer .container .site_list li a{
    font-size:14px;
    color:#f0f0f0;
    display:block;
    width:100%;
    line-height:40px;
}
#footer .container .site_list li:not(:first-child){
    display:none;
}

/* ---------------------- RESPONSIVE ------------------------ */
@media (max-width:1650px){
    #footer .container{
        width:90%;
    }
}
@media (max-width:1380px){
    #footer .container .family{
        position:static;
        margin:30px auto 0;
    }
}
@media (max-width:1040px){
    #footer .container .site_list{
        position:relative;
        bottom:auto;
        right:auto;
        margin:30px auto 0;
    }
    #footer .container .site_list li{
        background:rgba(35,68,44,.8);
    }
}
@media (max-width:900px){
    #footer .footer_list{
        width:80%;
    }
    #footer .footer_list li.address::before{
        display:block;
    }
}
@media (max-width:857px){
    #footer{
        padding:40px 0 50px;
    }
    #footer .footer_list li:last-child::before{
        display:none;
    }
}
@media (max-width:600px){
    #footer{
        padding:40px 0 80px;
    }
    #footer .footer_list{
        flex-direction:column;
    }
    #footer .footer_list li::before{        
        display:none;
    }
    #footer .footer_list li br{
        display:block;
    }
    #footer .container > p br{
        display:block;
    }
    #footer .link_list{
        gap:10px;
    }
    #footer h2 .logo{
        width: 185px;
        height: 46px;
    }
}
@media (max-width:430px){
    #footer{
        padding:20px 0 80px;
    }
    #footer .footer_list li{
        line-height:1.2;
    }
}
@media (max-width:404px){
    #footer .footer_list li:nth-last-child(2)::before{
        display:none;
    }
}