@charset "UTF-8";
/* 헤더 */
#header { position: fixed; width: 100%; z-index: 5000; top: 0; }

#header.black #menu .depth01 { color: #000; }

#header.white #menu .depth01 { color: #fff; }

header .header { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; position: relative; padding-left: 15px; padding-right: 15px; }

header .header * { z-index: 1004; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-decoration: none; }

header .header .container { max-width: 1920px; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative; }

header .header .container:after { display: block; content: ""; clear: both; }

header .header .logo { float: left; padding: 15px 0; margin-right: 20px; display: block; }

header .header .logo img { width: 170px; }

header .header #menu { width: calc(100% - 350px); float: left; font-size: 16px; }

header .header #menu:after { display: block; content: ""; clear: both; }

header .header #menu .menu { float: left; width: calc(100% / 7); position: relative; top: 0; left: 0; }

header .header #menu.col-10 .menu { width: calc(100% / 10); }

header .header #menu.col-12 .menu { width: calc(100% / 13); }

header .header #menu .depth01 { padding: 10px 0; margin: 25px 0 20px; display: block; text-align: center; position: relative; line-height: 1; }

header .header #menu .depth01:before { display: block; content: ""; clear: both; left: 0; height: 3px; position: absolute; background: #000; bottom: 5px; width: 0%; margin-left: -30%; left: 50%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; left: 50%; margin-left: -35%; }

/*header .header #menu .depth01:hover:before { width: 70%; }*/
header .header #menu .depth01:hover {color: #b9aa97 !important; font-weight: bold;}

header .header #menu .depth02 { display: none; background: rgba(255, 255, 255, 0.8); color: #000; font-size: 16px; width: 180% !important; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-top: 0px !important; -webkit-transition: none; transition: none; text-decoration: none; display: none; z-index: 9999; padding-left: 20px; padding-right: 20px; }

header .header #menu .depth02 > li { position: relative; top: 0; left: 0; }

header .header #menu .depth02 > li > a { padding: 12px 0; display: block; color: #000; position: relative; }

header .header #menu .depth02 > li > a:before { display: block; content: ""; clear: both; height: 1px; position: absolute; background: #333; bottom: 5px; width: 0%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

header .header #menu .depth02 > li > a:hover:before { width: 80%; }

header .header #menu .depth02 > li a.void_link:after { display: block; content: ""; clear: both; width: 0px; height: 0px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #fff; border-right: 5px solid none; position: absolute; top: 50%; right: 15px; margin-top: -2.5px; }

header .header #menu .depth02 > li:hover .depth03 { display: block; }

header .header #menu .depth02.on { overflow: visible !important; }

header .header #menu .depth03 { position: absolute; top: 0; left: 100%; width: 100%; display: none; }

header .header #menu .depth03 > li > a { display: block; padding: 15px 0; background: #b0a07a; color: #fff; position: relative; top: 0; left: 0; }

header .header #menu .depth03 > li > a:after { display: block; content: ""; clear: both; left: 0; height: 1px; position: absolute; background: #fff; bottom: 5px; width: 0%; margin-left: -30%; left: 50%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; left: 50%; margin-left: -35%; }

header .header #menu .depth03 > li > a:hover:after { width: 70%; }

header .header .item_member { width: 130px; float: right; margin-left: 20px; }

header .header .item_member li { float: left; width: 50%; }

header .header .item_member a { padding: 35px 0; display: block; text-align: center; }

header .header .item_member .fa-phone { font-size: 20px; }

header .header .tel { width: 20%; float: left; font-size: 40px; padding: 26px 0; text-align: center; }

header .header .tel img { display: inline-block; vertical-align: middle; }

header .header .tel span { color: #b0a07a; margin-right: 15px; display: inline-block; }

header .header .menu_btn { display: block; top: 43%; margin-top: -7.5px; /*left: 15px;*/ position: absolute; z-index: 550; cursor: pointer; -webkit-transition: top 300ms; transition: top 300ms; z-index: 1005;}

header .header .menu_btn > div { display: block; width: 100%; text-indent: -9999px; border: none; background: none; }

header .header .menu_btn .btn_line { display: block; width: 100%; height: 1px; position: absolute; left: 0; background: #000; -webkit-transition: background 300ms; transition: background 300ms; }

header .header .menu_btn .btn_line01 { top: 0; }

header .header .menu_btn .btn_line02 { top: 7px; }

header .header .menu_btn .btn_line03 { bottom: 0; }



/* header .m_menu { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; letter-spacing: 0px; display: none; z-index: 100000; } */

header .m_menu { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; height: 100%; background: #b9aa97; z-index: 9999; letter-spacing: 0px; display: none; z-index: 100000; }



header .m_menu .m_menu_header_wrapper { position: relative; padding: 10px 0; }

header .m_menu .m_logo { display: inline-block; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

header .m_menu .m_logo img { height: 50px; }

header .m_menu .m_menu_close { width: 40px; height: 40px; position: absolute; margin-left: auto; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}

header .m_menu .m_menu_close span { opacity: 1; right: 0; display: block; width: 100%; height: 1px; border-radius: 10px; background-color: #000; position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; }

header .m_menu .m_menu_close span:nth-child(1) { top: 20px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

header .m_menu .m_menu_close span:nth-child(2) { top: 20px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

header .m_menu .m_menu_member_wrapper { background-color: #000; }

header .m_menu .m_menu_member_wrapper ul { padding-top: 15px; padding-bottom: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

header .m_menu .m_menu_member_wrapper a { display: inline-block; width: 33.33%; position: relative; text-align: center; }

header .m_menu .m_menu_member_wrapper a:after { content: ""; display: block; width: 1px; height: 100%; background-color: #ccc; top: 0; right: 0; position: absolute; }

header .m_menu .m_menu_member_wrapper a:last-child:after { display: none; }

header .m_menu .m_menu_member_wrapper li { color: #fff; font-weight: 700; }

header #lnb .menu.menu01 { margin-top: 10px; }

header #lnb .depth01 { display: block; font-size: 24px; padding: 10px 25px; position: relative; top: 0; left: 0; color: #fff;}

header #lnb .depth02 { display: none; background-color: #9c6b2c; padding: 10px 0; }

header #lnb .depth02 li a { font-size: 20px; padding: 8px 30px; display: block; position: relative; top: 0; left: 0; color: #fff; }

header #lnb .depth02 > li > a.void_link:before { display: block; content: ""; clear: both; position: absolute; top: 50%; margin-top: -5px; right: 30px; height: 10px; width: 1px; opacity: 1; background: #828386; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; }

header #lnb .depth02 > li > a.void_link:after { display: block; content: ""; clear: both; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 25px; width: 10px; height: 1px; background: #828386; }

header #lnb .depth02 li.active > a.void_link:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; }

header #lnb .depth03 { display: none; background: #b0a07a; }

header #lnb .depth03 li a { color: #fff; }

header #lnb .depth01.void_link:before { display: block; content: ""; clear: both; position: absolute; top: 50%; margin-top: -5px; right: 30px; height: 10px; width: 1px; opacity: 1; background: #fff; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; }

header #lnb .depth01.void_link:after { display: block; content: ""; clear: both; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 25px; width: 10px; height: 1px; background: #fff; }

header #lnb .menu.active .depth01.void_link:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; }

#header.on .header { background: rgba(255, 255, 255, 0.9); }

#header.on .header #menu .depth01 { color: #3f3f3f;}
header .m_menu_header { height: 20%; }

@media (max-width: 1600px) {
  .all_bg { display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 4900; }
  header .header #menu { width: calc(100% - 320px); }
  header .header .item_member { width: 110px; }
  header .m_menu_header { height: 20%; }
  header #lnb { /*overflow: scroll;*/ width: 100%; height: 80%; }
  header .header .container { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 0; }
  header .header .menu_btn { position: static; margin-top: 0; }
  header .header .logo { width: auto; display: inline-block; text-align: center; float: none; padding-right: 0; margin: auto; padding: 0; }
  header .header .logo img { width: auto; height: 60px; }
  header .header #menu { width: 100%; float: none; border-top: 1px solid #ddd; }
  header .header #menu .depth01 { padding: 25px 0; font-size: 15px; }
  header .header .tel { float: none; position: static; right: 15px; width: auto; top: 25px; padding: 0; line-height: 0; }
}

@media (max-width: 768px) {
  /* #header { position: relative;} */
  #header { position: fixed;}       
  #header.on { position: fixed;}
  header .header .container { padding: 8px 0; }
  header .header .menu_btn img { width: 30px; }
  header .header .logo img { height: 50px; }
  header .header .tel { font-size: 32px; }
  header .m_menu .m_menu_member_wrapper li { font-size: 18px; }
}

@media (max-width: 576px) {
header .header .logo img { height: 40px; width: 210px;}
}

/* 푸터 */
footer { background-color: #262626; color: #fff; }

footer .footer_wrapper { max-width: 1500px; margin-left: auto; margin-right: auto; border-left: 1px solid #848484; border-right: 1px solid #848484; }

footer .footer_sublink { border-bottom: 1px solid #848484; }

footer .footer_link li { margin-left: 30px; }

footer .footer_link li:first-child { margin-left: 0; }

footer .footer_copyright p { opacity: 0.8; }

footer .footer_main { border-top: 1px solid #848484; border-bottom: 1px solid #848484; }

footer .footer_main .box02 .adm a { margin: 5px 0 0 0; font-size: 0.8rem; display: inline-block; background: #000; color: #FFF; padding: 5px; }

@media (max-width: 992px) { footer .footer_wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; }
  footer .detail { background: #fff; color: #000; width: 100%; position: relative; top: -60px; padding: 15px; text-align: center; }
  footer .detail p { font-size: 14px; }
  footer .info > p { font-size: 14px; font-weight: 300; line-height: 2; }
  footer .footer_link { margin-left: auto; margin-right: auto; }
  footer .footer_link li { text-align: center; font-size: 14px; margin-left: 15px; }
  footer .sns { position: absolute; top: 30px; right: 30px; } }

@media (max-width: 768px) { footer .detail { top: -55px; }
  footer .sns img { width: 66px; } }

@media (max-width: 576px) { footer .f_logo img { width: 160px; }
  footer .sns {position: relative; top: 0; right: auto;order:-1;margin-bottom:1.5rem;margin-left:auto}
  footer .sns img { width: 50px; } }

/* 퀵메뉴 */
.quick { z-index: 2001; position: fixed; right: 20px; top: 45%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.quick ul li:last-child { cursor: pointer; }

.quick .btn_top { background: #000; color: #FFF; text-align: CENTER; padding: 5PX 0; }

.quick #tooltip-item { display: none; background: #222222; color: #fff; font-weight: bold; padding: 4px 8px; font-size: 13px; border-radius: 4px; text-align: left; }
.quick #tooltip-item[data-show] { display: block; }
#arrow,
#arrow::before { position: absolute; width: 8px; height: 8px; background: inherit; }
#arrow { visibility: hidden; }
#arrow::before { visibility: visible; content: ''; transform: rotate(45deg); }
.quick #tooltip-item[data-popper-placement^='left']>#arrow {
  right: -4px;
}

@media (max-width: 992px) { 
	.quick { display: none; right:0; top:50%;} 
	.quick ul li img {width: 60px;}
}