@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2019-10-07
-------------------------------------------------*/
#header .etc { left: 0; width: 100%; }

#header .etc::before { background-color: #f1f2f4; }

#header .etc > a:first-child { border: 0 none; }

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

#header .etc a + a::before { display: inline-block; width: 1px; height: 0.4rem; margin: 0 0.5rem; background-color: #d5d5d5; content: ''; vertical-align: middle; }

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

#header .etc dl .mn01::after { display: inline-block; width: 1px; height: 0.4rem; margin: 0 0.5rem; background-color: #d5d5d5; content: ''; vertical-align: middle; }

#footer { width: 64rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; font-size: 0.75rem; clear: both; position: relative; padding: 2.75rem 0 2.5rem; font-weight: 400; color: #777; }

#footer:before{
	content: "";
	position: absolute;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 100vw;
	height: 1px;
	background-color: #ddd;
} 

#footer .ftool { position: relative; }

#footer .link { margin-bottom: 0.75rem; }

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

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

#footer .link a strong { color: #9c1c2b; }

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

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

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

#footer .address .label { font-size: 0.75rem; display: inline-block; width: 7rem; margin-right: 0.25rem; padding: 0.2rem 0; background-color: #4b4843; font-weight: 300; color: #fff; text-align: center; letter-spacing: -0.05rem; vertical-align: middle; }

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

#footer .family_site { float: right; position: relative; width: 11rem; }

#footer .family_site .group { position: relative; margin-bottom: 0.5rem; }

#footer .family_site .tt a { height: 2rem; border: 1px solid #a4a4a4; line-height: 1.9rem; 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: 100%; width: 100%; padding: 0 1rem; border: 1px solid #a4a4a4; border-bottom: 0 none; 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 .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: 0.75rem 1rem; }

#footer .sns { clear: both; padding-top: 1.5rem; text-align: right; }

#footer .sns a { display: inline-block; overflow: hidden; width: 2rem; height: 2rem; text-align: center; line-height: 2rem; 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.twitter::before { content: ''; }

#footer .sns a.youtube::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'; line-height: 1.8rem; }

#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: 3.25rem; border: 1px solid #000; line-height: 3.15rem; font-size: 0.6rem; position: fixed; right: 2rem; bottom: 0; z-index: 1; width: 3.25rem; padding-top: 0.65rem; background-color: #000; font-weight: 600; color: #fff; text-align: center; line-height: 1.2; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer .mbl_link a::before { font-size: 0.8rem; display: block; font-family: "xeicon"; font-weight: 400; content: ''; }

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

.quick { position: relative; margin: 1.25rem 0; padding-left: 7rem; }

.quick strong { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.1rem; position: absolute; left: 0; color: #000; }

.quick .list { display: table; width: 100%; table-layout: fixed; }

.quick .list li { display: table-cell; text-align: center; vertical-align: middle; }

.quick .list a { display: block; width: 7rem; height: 6rem; margin: 0 auto; padding: 0.75rem 0; font-weight: 500; color: #333; -webkit-transition: all 0.2s; transition: all 0.2s; }

.quick .list a:hover, .quick .list a:focus { background-color: #fff; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }

.quick .list a .icon { display: block; width: 3rem; height: 3rem; margin: 0 auto; }

@media (max-width: 1280px) { #footer { padding-bottom: 5.5rem; text-align: center; }
  #footer .ftool { position: static; }
  #footer .link { margin-bottom: 0; }
  #footer .link a + a::before { margin: 0 0.45rem 0 0.25rem; }
  #footer .link02 { top: auto; bottom: 2.5rem; width: 100%; padding-bottom: 3rem; }
  #footer .sns { text-align: center; }
  #footer .family_site { position: absolute; left: 50%; bottom: 0; z-index: 1; width: 100%; text-align: left; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  #footer .family_site .group { width: 12rem; margin: 0 auto; }
  #footer .family_site .group + .group { float: right; }
  #footer .address { position: relative; z-index: 0; padding-top: 1rem; }
  #footer .address::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #f8f8f8; }
  #footer .address p { width: 35rem; max-width: 100%; margin: 0 auto 0.3rem; text-align: left; }
  #footer .address p.copyright { position: relative; z-index: 0; width: 100%; margin: 0; padding-top: 1rem; text-align: center; }
  #footer .address p.copyright::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #fff; } }

@media (max-width: 1024px) { .quick .list a { width: 5.2rem; } }

@media (max-width: 768px) { #header .etc { left: -1rem; width: calc(100% + 2rem); }
  #header .etc > a { border-right: 1px solid #f1f2f4 !important; }
  #header .etc > a + a::before { display: none; }
  #header .etc dl .mn01 { border-right: 1px solid #f1f2f4; }
  #header .etc dl .mn01::after { display: none; }
  #header .etc > a { border-right: 1px solid #f1f2f4 !important; }
  #header .etc a + a::before { display: none; }
  #header .etc dl .mn01 { border-right: 1px solid #f1f2f4; }
  #header .etc dl .mn01::after { display: none; }
  #footer { padding-top: 1rem; }
  #footer .link a { display: inline; }
  #footer .link a:nth-child(4)::before { display: block; width: 100%; height: 1px; background: none; }
  #footer .address { margin-top: 0.5rem; padding-top: 0.3rem; }
  #footer .address p { text-align: center; }
  #footer .address .label { display: block; margin: 0 auto 0.25rem; }
  #footer .address .copyright { margin-top: 0; padding-top: 0.5rem; }
  .quick { margin: 1rem 0; padding-left: 0; padding-bottom: 0; }
  .quick strong { display: block; position: static; text-align: center; -webkit-transform: translate(0, 0); transform: translate(0, 0); margin-bottom: 0.5rem; }
  .quick .list li { float: left; width: 33.333%; }
  .quick .list a { width: auto; height: auto; -webkit-box-shadow: 0 0 0 !important; box-shadow: 0 0 0 !important; } }

@media (max-width: 530px) { #footer .link a:nth-child(6)::before { display: block; width: 100%; height: 1px; background: none; } }