@charset "utf-8";

/*
 * File       : footer.css
 * Author     : SMART GEO
 * Guideline  : -
 * Update : 2021-10-25
 *
 * Dependency : 풋터 스타일
 *
 * SUMMARY:
 * 01) 전역 스타일
 */

/* **************************************** *
 * 01) 전역 스타일
 * **************************************** */

#footer { display: flex; justify-content: center; height: 300px; padding: 64px 100px; border-top: 1px solid #eeeeee;background-color: white; }
#footer .fp-tableCell { display: inline-block; text-align: center; }
#footer .footer_outer { display: inline-block; max-width: 1320px; width: 100%; }
#footer .footer_inner { display: flex; flex-direction: column; flex-wrap: nowrap; }
#footer .footer_inner ul li { display: inline-block; }
#footer .footer_inner .item { text-align: left; margin-bottom: 18px; font-size: 18px; }
#footer .footer_inner .item.nav { display: flex; justify-content: space-between; }
#footer .footer_inner .item.nav .menu li { position: relative; color: #444444; margin-right: 50px; font-weight: bold; }
#footer .footer_inner .item.nav .menu li:last-child { margin-right: 0; }
#footer .footer_inner .item.nav .menu li:after { content: ""; position: absolute; top: 2px; right: -25px; width: 1px; height: 18px; background-color: #D9D9D9; }
#footer .footer_inner .item.nav .menu li:last-child:after { content: unset; }
#footer .footer_inner .item.nav .menu li a { color: inherit; }
#footer .footer_inner .item.nav .sns { display: flex; align-items: center; gap: 20px; }
#footer .footer_inner .item.nav .sns a { display: inline-block; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; }
#footer .footer_inner .item.nav .sns a.instagram { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_instagram.svg") no-repeat center center/cover; }
#footer .footer_inner .item.nav .sns a.naver { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_naver.svg") no-repeat center center/cover; }
#footer .footer_inner .item.nav .sns a.youtube { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_youtube.svg") no-repeat center center/cover; }
#footer .footer_inner .item.nav .sns a.talktalk { background: url("https://cheongmac.blob.core.windows.net/common/ic_footer_talktalk.svg") no-repeat center center/cover; }
#footer .footer_inner .item.info { display: flex; color: #868686; }
#footer .footer_inner .item.info .name { margin-right: 32px; font-weight: 700; }
#footer .footer_inner .item.info .content div { margin-bottom: 8px; }
#footer .footer_inner .item.info .content div li { position: relative; margin-right: 24px; }
#footer .footer_inner .item.info .content div li:after { content: ""; position: absolute; top: 2px; right: -15px; width: 1px; height: 18px; background-color: #D9D9D9; }
#footer .footer_inner .item.info .content div li:last-child:after { content: unset; }
#footer .footer_inner .item.info .content div.copyright { margin-top: 16px; font-size: 16px; color: #A3A3A3; }

#footer .footer_inner .item.nav .menu li{
    margin: 0;
}
#footer .footer_inner .item.nav .menu li:after{
    content: "";
    position: relative;
    top: 4px;
    left: 0;
    width: 1px;
    height: 18px;
    background-color: #D9D9D9;
    display: inline-block;
    margin: 0 8px 0 12px;
}
#footer .content{
    width: calc(100% - 136px);
}
#footer .footer_inner .item.info .name{
    height: auto;
    margin-top: 2px;
}
#footer .footer_inner .item.info .content div{
    width: 100%;
}
#footer .footer_inner .item.info .content div li{
    margin: 0;
}
#footer .footer_inner .item.info .content div li:after{
    content: "";
    position: relative;
    top: 4px;
    left: 0;
    width: 1px;
    height: 18px;
    background-color: #D9D9D9;
    display: inline-block;
    margin: 0 8px 0 12px;
}
#footer .footer_inner .item.info .content .clear_both_m{
    display: inline-block;
    width: auto;
}
#footer .footer_inner .item.info .content .clear_both_m:after {
    content: "";
    position: relative;
    top: 4px;
    left: 0;
    width: 1px;
    height: 18px;
    background-color: #D9D9D9;
    display: inline-block;
    margin: 0 12px;
}
#footer .footer_inner .item.info .content div:nth-child(3).clear_both_m:after{
    background-color: #ffffff;
}
@media screen and (max-width: 1320px){
    #footer{
        padding: 64px 64px;
    }
}
@media screen and (max-width: 1140px){
    #footer{
        padding: 42px 20px 104px;
        background-color: #323438;
        color: #c5c5c5;
        height: auto;
    }
    #footer .footer_inner .item.nav {
        flex-direction: column;
    }
    #footer .footer_inner .item.nav .sns a.instagram {
        background:url('https://cheongmac.blob.core.windows.net/common/ic_footer_sns_img01_w.png') center center/cover no-repeat;
        width: 32px;
        height: 32px;
    }
    #footer .footer_inner .item.nav .sns a.naver{
        background:url('https://cheongmac.blob.core.windows.net/common/ic_footer_sns_img02_w.png') center center/cover no-repeat;
        width: 32px;
        height: 32px;
    }
    #footer .footer_inner .item.nav .sns a.youtube{
        background:url('https://cheongmac.blob.core.windows.net/common/ic_footer_sns_img03_w.png') center center/cover no-repeat;
        width: 32px;
        height: 32px;
    }
    #footer .footer_inner .item.nav .sns a.talktalk{
        background:url('https://cheongmac.blob.core.windows.net/common/ic_footer_sns_img04_w.png') center center/cover no-repeat;
        width: 32px;
        height: 32px;
    }
    #footer .footer_inner .item.nav .menu{
        order: 2;
    }
    #footer .footer_inner .item.nav .menu li{
        font-weight: 700;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: -0.02em;
        color: #FFFFFF;
        margin: 0;
    }
    #footer .footer_inner .item.nav .menu li:after {
        content: "";
        position: relative;
        top: 2px;
        left: 0;
        width: 1px;
        height: 10px;
        background-color: #D9D9D9;
        display: inline-block;
        margin: 0 6px 0 10px;
    }
    #footer .footer_inner .item.nav .sns{
        order: 1;
        margin-bottom: 16px;
    }
    #footer .footer_inner .item.info{
        flex-direction: column;
        margin-bottom: 0;
    }
    #footer .footer_inner .item.info .name{
        margin-bottom: 4px;
        font-size: 12px;
    }
    #footer ul.content{
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: -0.02em;
        color: #BFBFBF;
        width: 100%;
    }

    #footer .footer_inner .item.info .content div li:after,
    #footer .footer_inner .item.info .content .clear_both_m:after {
        content: "";
        position: relative;
        top: 2px;
        left: 0;
        width: 1px;
        height: 10px;
        background-color: #BFBFBF;
        display: inline-block;
        margin: 0 6px 0 10px;
    }
    #footer .footer_inner .item.info .content div:nth-child(2).clear_both_m:after{
        background-color: #BFBFBF;
    }
    #footer .footer_inner .item.info .content div:nth-child(3).clear_both_m:after{
        background-color: #323438;
    }
    #footer .footer_inner .item.info .content div.copyright {
        margin-top: 12px;
        font-size: 10px;
        color: #A3A3A3;
    }
    #footer .footer_inner .item.info .content div{
        margin-bottom: 2px;
    }
}
@media screen and (max-width: 780px){
    #footer .footer_inner .item.info .content .clear_both_m{
        display: block;
    }
    #footer .footer_inner .item.info .content div:nth-child(2).clear_both_m:after{
        background-color: #323438;
    }
}
@media screen and (max-width: 370px){
    #footer ul.content{
        font-size: 10px;
    }
    #footer .footer_inner .item.nav .menu li{
        font-size: 10px;
        line-height: 10px;
    }
    #footer .footer_inner .item.info .content div li:after,
    #footer .footer_inner .item.info .content .clear_both_m:after {
        content: "";
        position: relative;
        top: 2px;
        left: 0;
        width: 1px;
        height: 10px;
        background-color: #BFBFBF;
        display: inline-block;
    }
}