@charset "utf-8";

html,body{ height: 100%;}

body{ background: url("../img/inc/bahhuj.jpg") no-repeat center top; background-size: cover; background-attachment: fixed;}
.inner{ width: 1200px; margin: 0 auto;}

#layout{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;}

#layout-top{ width: 1290px; background-color: #fff; margin: 0; display: flex; flex-direction: column;}
#layout-top .top-email{ height: 40px; background-color: #f5f5f5; display: flex; align-items: center;}
#layout-top .top-email .link-email{ color: #909090; display: flex; align-items: center;}
#layout-top .top-email .link-email a{ font-size: 13px; font-weight: 300; font-family: 'Open Sans','NotoSansKR' !important;}
#layout-top .top-email .link-email i + a{ margin-left: 5px;}
#layout-top .logo-search-wrap{ margin: 34px 0 0 0; display: flex; justify-content: space-between;}
#layout-top .logo{ width: 200px;}
#layout-top .logo a{ width: 100%;}
#layout-top .top-search{ height: 40px; margin: 4px 0 0 0; display: flex;}
#layout-top .top-search input{ width: 218px; height: 40px; background-color: #f5f5f5; font-weight: 600; font-size: 13px; color: #999; padding: 10px 12px;}
#layout-top .top-search button{ width: 40px; height: 40px; background-color: #c0c0c0; font-size: 14px; color: #fff;}
#layout-top .lan-box{ display: flex; align-items: center;}
#layout-top .lan-box a{ background-color: #f5f5f5; font-size: 12px; color: #000; line-height: 16px; padding: 0 10px; border: 1px solid #ccc;}
#layout-top .lan-box a + a{ border-left: 0;}
#layout-top .lan-box a.on{ background-color: #fff;}

#layout-gnb{ margin: 15px 0 25px 0;}
#layout-gnb .gnbOpen,
#layout-gnb .gnbClose{ display: none;}
#layout-gnb .gnb-box{ height: 50px; background-color: #f5f5f5; display: flex; position: relative; z-index: 1;}
#layout-gnb .gnb-box .btn-home{ width: 50px; height: 50px; background-color: #e6e6e6; display: flex; align-items: center; justify-content: center;}
#layout-gnb .gnb-box .btn-home i{ font-size: 14px; color: #787878;}
#layout-gnb .gnb-depth1{ display: flex; flex: 1;}
#layout-gnb .gnb-depth1 > .depth{ position: relative;}
#layout-gnb .gnb-depth1 > .depth > .link{ height: 50px; font-weight: 600; color: #787878; padding: 0 30px 0 20px; display: flex; align-items: center; position: relative; transition: background-color 0.15s ease-in-out;}
#layout-gnb .gnb-depth1 > .depth.on > .link,
#layout-gnb .gnb-depth1 > .depth > .link:hover{ background-color: #ab8e48; color: #fff;}
#layout-gnb .gnb-depth1 > .depth:hover .gnb-depth2{ top: 50px;}
#layout-gnb .gnb-depth1 > .depth > .link:has(+.gnb-depth2)::after{ width: 0; height: 0; content: ''; margin: -2px 0 0 0; border: 4px solid transparent; border-top-color: #aaa; position: absolute; top: 50%; right: 15px;}
#layout-gnb .gnb-depth1 > .depth.on > .link:has(+.gnb-depth2)::after,
#layout-gnb .gnb-depth1 > .depth > .link:has(+.gnb-depth2):hover::after{ border-top-color: #fff;}
#layout-gnb .gnb-depth2{ background-color: #f8f8f8; display: flex; flex-direction: column; position: absolute; top: -9999px; left: 0;}
#layout-gnb .gnb-depth2 > .depth{ position: relative;}
#layout-gnb .gnb-depth2 > .depth + .depth{ border-top: 1px solid #e9e9e9;}
#layout-gnb .gnb-depth2 > .depth > .link{ min-height: 39px; font-weight: 400; font-size: 13px; color: #909090; line-height: 18px; padding: 10px 16px; display: flex; align-items: center; word-break: keep-all; position: relative;}
#layout-gnb .gnb-depth2 > .depth > .link:hover{ background-color: #ab8e48; color: #fff;}
#layout-gnb .gnb-depth2 > .depth > .link:has(+.gnb-depth3)::after{ width: 0; height: 0; content: ''; margin: -2px 0 0 0; border: 4px solid transparent; border-left-color: #aaa; position: absolute; top: 50%; right: 10px;}
#layout-gnb .gnb-depth2 > .depth:hover .gnb-depth3{ top: 0;}
#layout-gnb .gnb-depth2 > .depth > .link:has(+.gnb-depth3):hover::after{ border-left-color: #fff;}
#layout-gnb .gnb-depth3{ background-color: #f8f8f8; display: flex; flex-direction: column; position: absolute; top: -9999px; left: 100%;}
#layout-gnb .gnb-depth3 > .depth + .depth{ border-top: 1px solid #e9e9e9;}
#layout-gnb .gnb-depth3 > .depth > .link{ min-height: 39px; font-weight: 400; font-size: 13px; color: #909090; line-height: 18px; padding: 10px 16px; display: flex; align-items: center; word-break: keep-all; position: relative;}
#layout-gnb .gnb-depth3 > .depth > .link:hover{ background-color: #ab8e48; color: #fff;}

.visual-box{ position: relative;}
.visual-box h2{ font-weight: 600; font-size: 30px; color: #fff;}
.visual-box .box-body{ min-height: 160px; background: no-repeat center center; background-size: cover; position: relative; z-index: 0;}
.visual-box .box-body::after{ width: 100%; height: 100%; background-color: #000; content: ''; opacity: 0.45; position: absolute; top: 0; left: 0; z-index: -1;}
.visual-box .box-body .inner{ padding-top: 30px;}
.visual-box .box-body h2{ z-index: 0;}
.visual-box .box-body .link{ width: 100%; height: 500px; background: no-repeat center center #fff; background-size: contain; text-indent: -9999px; display: block;}


#layout-body{ width: 1290px; background-color: #fff; padding: 0 0 100px 0; display: flex; flex-direction: column; flex: 1;}
#layout-body .body-sub{ margin-top: 38px; margin-bottom: 100px; display: flex; justify-content: space-between;}

#layout-lnb{ width: 280px; display: flex; flex-direction: column;}
#layout-lnb h2{ font-weight: 600; font-size: 20px; color: #282828; line-height: 32px; display: flex; align-items: center;}
#layout-lnb h2::after{ height: 1px; background-color: #ebebeb; content: ''; margin-left: 10px; flex: 1;}
#layout-lnb .lnb-depth{ margin: 10px 0 0 0; display: flex; flex-direction: column;}
#layout-lnb .lnb-depth .depth{ padding: 5px;}
#layout-lnb .lnb-depth .link{ font-weight: 300; font-size: 15px; color: #888; line-height: 22px; padding: 0; margin: 0; display: flex; transition: all 0.3s;}
#layout-lnb .lnb-depth .link::before{ width: 0; height: 0; content: ''; margin: 7px 0 0 0; border: 4px solid transparent; border-left-color: #aaa;}
#layout-lnb .lnb-depth .link:hover{ padding-left: 5px;}

#layout-sub{ margin: 0 0 0 20px; display: flex; flex-direction: column; flex: 1;}
#layout-sub > .sub-head{ text-align: center;}
#layout-sub > .sub-head h3{ font-weight: 300; font-size: 30px; color: #ab8e48; line-height: 1; padding: 0 20px; display: inline-block; border-left: 1px solid #ab8e48; border-right: 1px solid #ab8e48;}
#layout-sub > .sub-body{ margin: 30px 0 0 0;}

#layout-foot{ width: 1290px; background-color: #505050; padding: 17px 0 13px 0; margin: 0 0 0 0;}
#layout-foot .copy{ font-weight: 300; font-size: 12px; color: #a8a8a8;}

@media (max-width:1390px){
    #layout-top,
    #layout-body,
    #layout-foot{ width: 100%;}
}
@media (max-width:1390px){
    .inner{ width: 960px;}
    #layout-top,
    #layout-body,
    #layout-foot{ width: 1020px;}

    #layout-lnb{ width: 220px;}
}
@media (max-width:1040px){
    #layout-top,
    #layout-body,
    #layout-foot{ width: 100%;}
}
@media (max-width:990px){
    .inner{ width: 768px;}

    #layout-lnb{ width: 172px;}
}
@media (max-width:900px){
    #layout-gnb .gnb-box{ display: none;}
    #layout-gnb .gnbOpen{ width: 100%; height: 46px; background-color: #606060; display: flex;}
    #layout-gnb .gnbOpen .fa{ width: 46px; height: 46px; background-color: #585858; display: flex; align-items: center; justify-content: center;}
    #layout-gnb .gnbOpen .fa::before{ font-weight: 500; color: #fff;}
    #layout-gnb .gnbOpen .fa + .txt{ margin-left: 10px;}
    #layout-gnb .gnbOpen .txt{ font-weight: 700; font-size: 14px; color: #fff; line-height: 1.2; display: flex; align-items: center;}

    #layout-gnb .gnb-box{ width: 250px; height: 100%; background-color: #505050; flex-direction: column; overflow-y: auto; position: fixed; top: 0; left: 0; z-index: 9;}
    #layout-gnb .gnb-box .btn-home{ background-color: #505050; flex: none;}
    #layout-gnb .gnb-box .btn-home i{ color: #fff;}
    #layout-gnb .gnb-box .gnb-depth1{ flex-direction: column;}
    #layout-gnb .gnb-box .gnb-depth2{ background-color: #606060; position: static;}
    #layout-gnb .gnb-box .gnb-depth2 > .depth + .depth{ border-top: 0;}
    #layout-gnb .gnb-box .gnb-depth3{ background-color: #838383; position: static;}
    #layout-gnb .gnb-depth1 > .depth > .link::after,
    #layout-gnb .gnb-depth2 > .depth > .link::after{ display: none;}
    #layout{ transition: all 0.3s;}
    .gnbOpen body{ overflow: hidden;}
    .gnbOpen #layout{ padding-left: 250px; overflow: hidden;}
    .gnbOpen #layout-top,
    .gnbOpen #layout-body,
    .gnbOpen #layout-foot{ margin-left: 250px;}
    .gnbOpen #layout-gnb .gnb-box{ display: flex;}
    .gnbOpen #layout-gnb .gnb-depth1 > .depth > .link,
    .gnbOpen #layout-gnb .gnb-depth2 > .depth > .link,
    .gnbOpen #layout-gnb .gnb-depth3 > .depth > .link{ color: #fff;}
    .gnbOpen #layout-gnb .gnbClose{ text-indent: -9999px; display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 250px; z-index: 99;}

    #layout-lnb{ display: none;}
    #layout-sub{ margin: 0;}
}
@media (max-width:767px){
    .inner{ width: 420px;}
    #layout-top .logo-search-wrap{ flex-direction: column;}
    #layout-top .top-search{ margin-top: 30px; justify-content: flex-end;}
    #layout-lnb{ display: none;}
    #layout-sub{ margin: 0;}
}
@media (max-width:480px){
    .inner{ width: 300px;}
    #layout-top .top-search input{ width: 140px;}
}