@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2019-09-26
-------------------------------------------------*/
#footer { width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; font-size: 0.75rem; position: relative; z-index: 1; padding: 2rem 0 3rem; font-weight: 400; color: #666; }

#footer .link a { display: inline-block; padding: 0.7rem 0; vertical-align: middle; }

#footer .link a + a::before { display: inline-block; width: 1px; height: 0.5rem; margin: 0 0.5rem; background-color: #d1d1d1; content: ''; }

#footer .link a strong { color: #0e315b; }

#footer .link02 { position: absolute; right: 0; top: 2rem; }

#footer .address { clear: both; padding-top: 0.75rem; }

#footer .address p { margin-bottom: 0.3rem; }

#footer .address .label { display: inline-block; width: 7rem; margin-right: 0.75rem; padding: 0.25rem 0; border-radius: 0.15rem; background-color: #5a5f6a; color: #fff; text-align: center; vertical-align: middle; }

#footer .address .copyright { margin: 0.8rem 0 0; }

#footer .family_site { position: relative; width: 18.75rem; padding-right: 4.25rem; }

#footer .family_site .tt a { height: 2.5rem; border: 1px solid #d7d7d7; line-height: 2.4rem; display: block; position: relative; width: 100%; padding-left: 1rem; }

#footer .family_site .tt a:hover::after, #footer .family_site .tt a:active::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .family_site .tt a::after { position: absolute; right: 1rem; top: 0; font-family: "xeicon"; color: #4c4c4c; content: ''; }

#footer .family_site .site { visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: absolute; left: 0; bottom: 2.6rem; width: calc(100% - 4.25rem); padding: 0 1rem; border: 1px solid #d7d7d7; background-color: #fff; max-height: 15rem; overflow-y: scroll !important; }

#footer .family_site .site a { display: block; }

#footer .family_site .site a:hover, #footer .family_site .site a:focus { text-decoration: underline; }

#footer .family_site .btn { height: 2.5rem; border: 1px solid #5a5f6a; line-height: 2.4rem; position: absolute; right: 0; top: 0; width: 4rem; background-color: #5a5f6a; color: #fff; text-align: center; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .family_site .btn:hover, #footer .family_site .btn:focus { background-color: #fff; color: #5a5f6a; }

#footer .family_site.active .tt a::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

#footer .family_site.active .site { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; padding: 1rem; }

#footer .sns { margin-top: 1.5rem; text-align: right; }

#footer .sns a { display: inline-block; overflow: hidden; width: 2.5rem; height: 2.5rem; margin-left: 0.5rem; border-radius: 100%; background-color: #fafafa; text-align: center; line-height: 2.5rem; vertical-align: top; }

#footer .sns a::before { font-size: 1.1rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #999; content: ''; }

#footer .sns a.facebook::before { content: ''; }

#footer .sns a.instagram::before { content: ''; }

#footer .sns a.blog::before { font-size: 1.2rem; font-family: "Titillium+Web"; font-weight: 600; content: 'b'; text-indent: 0.15rem; line-height: 2.3rem; }

#footer .sns a:hover, #footer .sns a:focus { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); -webkit-transition: all 0.3s 0.1s; transition: all 0.3s 0.1s; }

#footer .mbl_link a { height: 3rem; border: 1px solid #9c1c2b; line-height: 2.9rem; position: absolute; right: -6.5rem; top: -2rem; width: 3rem; background-color: #9c1c2b; color: #fff; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .mbl_link a:hover, #footer .mbl_link a:focus { background-color: #fff; color: #9c1c2b; }

@media (max-width: 1400px) { #footer .mbl_link a { right: -1rem; } }

@media (max-width: 1280px) { #footer { padding-bottom: 7.5rem; text-align: center; }
  #footer .link a + a::before { margin: 0 0.45rem 0 0.25rem; }
  #footer .link02 { top: auto; bottom: 1rem; width: 100%; padding-bottom: 3rem; }
  #footer .sns { text-align: center; }
  #footer .family_site { position: absolute; left: 50%; bottom: 0; z-index: 1; max-width: 100%; text-align: left; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  #footer .mbl_link a { position: fixed; right: 0; top: auto; z-index: 1; bottom: 4.5rem; margin-top: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  #footer .address, #footer .copyright { position: relative; z-index: 0; padding-top: 1rem; }
  #footer .address::before, #footer .copyright::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #f8f8f8; }
  #footer .copyright::before { background-color: #fff; } }

@media (max-width: 768px) { #footer { padding-top: 1rem; }
  #footer .address { margin-top: 0.5rem; }
  #footer .link a { display: inline; }
  #footer .link a:nth-child(4)::before { display: block; width: 100%; height: 1px; background: none; } }

@media (max-width: 530px) { #footer .link a:nth-child(6)::before { display: block; width: 100%; height: 1px; background: none; }
  #footer .address { padding-top: 0.5rem; }
  #footer .address .label { display: block; margin: 0 auto 0.25rem; }
  #footer .address .copyright { margin-top: 0; padding-top: 0.5rem; } }