@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2019-10-10
-------------------------------------------------*/
#header { height: 6.25rem; border-bottom: 1px solid #ddd; }
#header .logo{height:2.35rem;}
#header .headerWrap { padding-top: 2rem; }
#header .etc dl a::before{vertical-align:top;}
#header .AllMn a { top: 2.75rem; }

#header .etc { width: calc(100% + 1rem); height: 2rem; line-height: 2rem; }

#header .etc::before { height: 100%; background-color: #f4f4f4; }

#header .etc > a { border-color: rgba(70, 73, 77, 0.1) !important; }

#header .etc a { color: rgba(63, 66, 70, 0.8); }

#header .etc a span { color: inherit; }

#header .etc dl { border: 0 none; }

#header .etc dl a { padding: 0; border: 0 none; }

#header .etc dl .mn01::after { display: inline-block; width: 1px; height: 0.55rem; margin: 0 0.5rem; background-color: rgba(255, 255, 255, 0.2); content: ''; vertical-align: middle; }

#header .etc dl .last a { top: 3.25rem; }

#gnb .topmenu > li > a { line-height: 4.5rem; }

#footer { background-color: #f4f4f4; }

#footer .footWrap { width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; font-size: 0.75rem; line-height: 1.33333; position: relative; color: #666; }

#footer .mbl_link .anchorLink { display: none; overflow: hidden; position: fixed; right: 2rem; bottom: 4rem; width: 2.5rem; height: 2.5rem; border-radius: 100%; background-color: #313641; text-align: center; line-height: 2.5rem; opacity: 0.7; }

#footer .mbl_link .anchorLink::before { font-size: 1.25rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #fff; content: ''; line-height: inherit; }

#footer .ftool { position: relative; z-index: 0; display: inline-block; z-index: 1; width: 100%; padding: 1rem 0; }

#footer .ftool::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: auto; bottom: 0; height: 1px; background-color: #fff; }

#footer .ftool .link { float: left; }

#footer .ftool .link a + a::before { display: inline-block; position: relative; top: -2px; width: 1px; height: 0.6rem; margin: 0 0.8rem; content: ''; vertical-align: middle; }

#footer .ftool .link a:hover { text-decoration: underline; }

#footer .ftool .link02 { float: right; margin-top: -.5rem; margin-bottom: -.5rem; }

#footer .ftool .family_site .tt { width: 10.5rem; height: 2rem; border: 1px solid #ccc; background-color: #fff; padding: .5rem 1rem; }

#footer .ftool .family_site .tt a { width: 100%; display: block; position: relative; }

#footer .ftool .family_site .tt a::after { font-size: 0.8rem; display: inline-block; position: absolute; top: -2px; right: 0; margin-left: 0.75rem; font-family: "xeicon"; color: rgba(153, 153, 153, 0.5); content: ''; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; color: #ccc; }

#footer .ftool .family_site .tt a:hover::after, #footer .ftool .family_site .tt a:focus::after { color: #555; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#footer .ftool .family_site .site { visibility: hidden; overflow: hidden; height: 0; opacity: 0; font-size: 0.75rem; line-height: 2; position: absolute; right: 0; bottom: 2.5rem; z-index: 1; width: 10.5rem; background-color: #5a5f6a; color: #fff; }

#footer .ftool .family_site .site::after { display: block; width: 100%; height: 0; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .ftool .family_site .site a { display: block; padding-left: 1.5rem; }

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

#footer .ftool .family_site.active .tt a::after { content: ''; -webkit-transform: rotate(0deg); transform: rotate(0deg); }

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

#footer .ftool .family_site.active .site::after { height: 0.8rem; }

#footer .ftool .sns { position: absolute; right: 0; top: 100%; margin-top: 1.5rem; }

#footer .ftool .sns a { display: inline-block; overflow: hidden; width: 1rem; height: 1rem; margin-left: 0.6rem; color: #555; text-align: center; line-height: 1rem; vertical-align: middle; opacity: 0.5; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .ftool .sns a::before { font-size: 1rem; display: block; position: relative; width: 100%; height: 200%; font-family: "xeicon"; content: ''; line-height: inherit; -webkit-transition: all 0.2s; transition: all 0.2s; }

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

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

#footer .ftool .sns a.youtube::before { content: ' '; }

#footer .ftool .sns a.instagram { width: 1.1rem; height: 1.1rem; margin-left: 0.5rem; line-height: 1.1rem; }

#footer .ftool .sns a.instagram::before { font-size: 1.15rem; top: 1px; content: ' '; text-indent: -1px; line-height: 1.1rem; }

#footer .ftool .sns a.instagram:hover::before { left: -1px; top: 0; }

#footer .ftool .sns a:hover { opacity: 1; }

#footer .ftool .sns a:hover::before { -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#footer .address { position: relative; z-index: 0; padding: 1.5rem 5rem 2.5rem 9.25rem; color: rgba(21, 21, 21, 0.7); }

#footer .address .logo { position: absolute; left: 0; top: auto; }

#footer .address .logo img { height: 1.55rem; }

#footer .address .copyright { font-size: 0.6rem; margin-top: 0.25rem; text-transform: uppercase; }

#footer .address p span { white-space: nowrap; }

#footer .address p span + span::before { content: ' / '; }

#footer .address p span:first-child::before { margin-left: -0.25rem; content: '. '; }

@media (max-width: 1024px) { #footer .footWrap { padding-bottom: 5rem; }
  #footer .ftool { position: static; padding: 0; }
  #footer .ftool::before { display: none; }
  #footer .ftool .link { float: none; margin: 0 -1rem; padding: 0.5rem 1rem; border-bottom: 1px solid #fff; }
  #footer .ftool .link a { display: inline-block; padding: 0.25rem; }
  #footer .ftool .link a + a::before { display: none; }
  #footer .ftool .link02 { position: absolute; left: 0; bottom: 3rem; width: 100%; }
  #footer .ftool .link02 .sns { position: absolute; left: 0; top: auto; bottom: 3.5rem; width: 100%; margin-top: 0; }
  #footer .ftool .link02 .family_site .tt { margin: 0 auto; }
  #footer .ftool .link02 .family_site .tt a { text-align: left; }
  #footer .ftool .link02 .family_site .site { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 2rem; }
  #footer .ftool .link02 .family_site .site a { padding-left: 1rem; color: #fff; text-align: left; }
  #footer .ftool .link02 .family_site.active .site { max-height: 10rem; padding: 0.25rem 0 0; }
  #footer .ftool .link02 .family_site.active .site::after { height: 0.25rem; }
  #footer .address { padding-left: 0; padding-bottom: .5rem; }
  #footer .address .logo { display: none; } }

@media (max-width: 768px) { #footer { position: relative; text-align: center; }
  #footer .footWrap { padding-bottom: 5.5rem; }
  #footer .address { padding: 1rem 0 0; }
  #footer .address span:first-child::before { display: block; width: 100%; height: 0; content: ''; } }

@media (max-width: 530px) { #header .etc dl .mn01 { border-right: 1px solid rgba(255, 255, 255, 0.2); }
  #header .etc dl .mn01::after { display: none; } }