@charset "UTF-8";

footer .inner {margin:0 auto; padding:0 20px; width:1320px; max-width:100%}

/* FOOTER */
#footer {background:#F4F5F6; font-size:17px; color:#1d1d1d}
#footer > .inner {padding:40px 20px 24px}
#footer .noticeArea {display:flex; justify-content:center; height:56px; border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6; background:#fff}
#footer .noticeArea .inner {display:flex; width:1320px; max-width:100%;}
#footer .noticeArea .inner > a {display:inline-block; width:320px; line-height:56px; margin-left:-1px; padding:0 52px 0 24px; max-width:100%; border-left:1px solid #c6c6c6; border-right:1px solid #c6c6c6; background:url("/images/common-new/icon_plus.png") no-repeat center right 24px / 20px auto; color:#1D1D1D}
#footer .noticeArea div.relateLink {position:relative; display:block; padding:0}
#footer .noticeArea div.relateLink > button {display:block; width:320px; height:54px; padding:0 52px 0 24px; border:none; border-right:1px solid #c6c6c6; background:#fff; text-align:left; background:url("/images/common-new/icon_plus.png") no-repeat center right 24px / 20px auto; color:#1D1D1D; font-size:17px}
#footer .noticeArea div.relateLinkDetail {display:none; position:absolute; left:0; bottom:70px; overflow:hidden; padding:24px; max-width:650px; width:calc(100vw - 110%); box-sizing:border-box; height:260px; background:#fff; border:1px solid #C6C6C6; border-radius:12px; box-shadow:0px 5px 12px 0px rgba(0,0,0,0.15)}
#footer .noticeArea div.relateLinkDetail strong {display:block; line-height:1; padding-bottom:18px; font-size:24px}
#footer .noticeArea div.relateLinkDetail ul {display:grid; grid-template-columns:repeat(auto-fit, minmax(50%, 1fr))}
#footer .noticeArea div.relateLinkDetail ul li {position:relative; padding-left:24px; line-height:28px}
#footer .noticeArea div.relateLinkDetail ul li:before {position:absolute; content:""; top:12px; left:0; width:6px; height:6px; background:#333; border-radius:50px}
#footer .noticeArea div.relateLinkDetail ul li a {border-bottom:1px solid #333; font-size:17px; letter-spacing:0}
#footer .noticeArea div.relateLinkDetail .relateLinkClose {position:absolute; top:15px; right:15px; width:40px; height:40px; background:url("/images/common-new/btn_close_m.png") no-repeat center / 24px auto; font-size:0}
#footer .footerTop,
#footer .footerBottom {display:flex; justify-content:space-between}
#footer .footerTop {padding-bottom:65px}
#footer .footerTop a {display:inline-block; height:48px; background-repeat:no-repeat; background-position:center; background-size:100% auto; font-size:0}
#footer .footerTop a.mois {width:169px; background-image:url("/images/common-new/footer_logo_mois.png")}
#footer .footerTop a.klid {width:254px; background-image:url("/images/common-new/footer_logo_klid2.png")}
#footer .footerTop a.eshare {width:136px; margin-left: 15px; background-image:url("/images/common-new/logo.png")}
#footer .footerTop address {margin-top:16px; line-height:1.6;}
#footer .footerTop address em {font-weight:700}
#footer .footerTop .snsList li {display:inline-block}
#footer .footerTop .snsList a {width:40px; height:40px}
#footer .footerTop .snsList a.kakao {background-image:url("/images/common-new/icon_sns_kakao.png")}
#footer .footerTop .snsList a.insta {background-image:url("/images/common-new/icon_sns_insta.png")}
#footer .footerTop .snsList a.youtube {background-image:url("/images/common-new/icon_sns_yt.png")}
#footer .footerTop .snsList a.facebook {background-image:url("/images/common-new/icon_sns_fb.png")}
#footer .footerTop .snsList a.naverblog {background-image:url("/images/common-new/icon_sns_blog.png")}
#footer .footerTop > div + div {text-align:right}
#footer .footerTop > div > a {width:61px}
#footer .footerTop > div > a.webwatch {background-image:url("/images/common-new/footer_logo_webwatch.png")}
#footer .footerTop > div > a.wa {background-image:url("/images/common-new/footer_logo_wa.png")}

#footer .footerBottom {padding-top:16px; border-top:1px solid #C6C6C6}
#footer .footerBottom > ul li {display:inline-block}
#footer .footerBottom > ul li.blueTxt a {font-weight:700; color:#1D56BC}
#footer .footerBottom > ul li {padding-right:10px}
#footer .footerBottom > ul li:last-child {padding-right:0}
#footer .footerBottom > ul li a {font-size:15px; color:#1D1D1D}
.pcHide {display:none}
@media (max-width:940px) {
    #footer > .inner {padding:10px 16px 32px}

    #footer .noticeArea .inner {padding:0}
    #footer .noticeArea > a {width:100%; line-height:54px; border-left:none; border-right:none}
    #footer .noticeArea div.relateLinkDetail {padding:20px; width:calc(100vw - 105%)}
    #footer .noticeArea div.relateLinkDetail ul li {padding-left:16px}
    #footer .noticeArea div.relateLinkDetail ul li a {font-size:15px}

    #footer .footerTop,
    #footer .footerBottom {flex-wrap:wrap}
    #footer .footerTop {padding-bottom:30px}
    #footer .footerTop > div > div a {height:30px}
    #footer .footerTop a.mois {width:112px}
    #footer .footerTop a.klid {width:189px}
    #footer .footerTop a.eshare {width:112px}
    #footer .footerTop .snsList {margin-bottom:-10px}
    #footer .footerTop > div + div {text-align:left}
    #footer .footerTop address {line-height:1.4}
    #footer .footerTop address em {display:block}
    #footer .footerBottom copyright {margin-top:20px; font-size:15px; color:#444}
    .pcHide {display:block}
}
@media (max-width:768px) {
    #footer .noticeArea {height:auto}
    #footer .noticeArea .inner {display:block}
    #footer .noticeArea .inner > a,
    #footer .noticeArea div.relateLink > button {width:100%; border-right:none}
    #footer .noticeArea div.relateLink > button {border-top:1px solid #ccc}
    #footer .noticeArea div.relateLinkDetail {bottom:inherit; padding:24px; max-width:100%; width:100%; height:auto; background:#F4F5F6; border:none; border-top:1px solid #C6C6C6; border-radius:0; box-shadow:none}
    #footer .noticeArea div.relateLinkDetail ul {grid-template-columns:1fr}
    #footer .noticeArea div.relateLinkDetail > strong,
    #footer .noticeArea div.relateLinkDetail > a {display:none}
    #footer .noticeArea div.relateLinkDetail ul li:before {width:5px; height:5px}
    #footer .noticeArea div.relateLinkDetail ul li a {font-size:17px}
    #footer .noticeArea div.relateLinkDetail ul li + li {margin-top:8px}
}