/* ==========================================================================
#HEADER
========================================================================== */
header{ position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: auto; transition: .3s; box-shadow: unset; }
header .header .top{ position: relative; height: 125px; padding: 0 40px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(255,255,255,.4); transition: .3s; z-index: 1000;}
header .header .top > a{ margin: 0 10px; position: relative; }
header .header .top > a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; transition: .3s; transform: scaleX(0);}
header .header .top > a:hover:after{ transform: scaleX(1);}
header .header .logo{ margin: 0 30px;}
header .header .logo, header .header .logo a{ display: block; width: fit-content; height: fit-content; width: 102px; height: 24px; position: relative;}
header .header .logo img{ position: absolute; top: 0; left: 0; width: 100%; object-fit: cover; transition: .3s;}
header .header .logo img.scroll{ opacity: 0;}
header .header .btm{ display: none;}

/* header-scroll */
header.scroll{ z-index: 1000; }
header.scroll .header .top{ background-color: rgba(255,255,255); border-bottom: 1px solid #FAFAF8;  height: 65px;  }
header.scroll .header .top > a{color: #51504B;}
header.scroll .header .top > a:after{ background-color: #51504B;}
header.scroll .header .logo img.scroll{ opacity: 1;}
header.scroll .header .logo img.normal{ opacity: 0;}

#panel-area{ display: none;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{ position: fixed!important; }
    header .header .top{ height: 50px; display: flex; justify-content: space-between; align-items: center; background-color: rgba(255,255,255); border-bottom: 1px solid #DDDDDB; padding: 0 15px; }
    header .header .top > a{ display: none;}
    header .header .top .moblie-quick a{ padding-left: 20px; transition: .3s; }
    header .header .top .moblie-quick a.quick-btn{ pointer-events: none; opacity: 0;}
    header .header .top .moblie-quick a i{ position: relative; top: 2px;}
    header .header .logo{ margin: 0;}
    header .header .logo, header .header .logo a{ width: 85px; height: 20px;}
    header .header .logo img.scroll{ opacity: 1;}
    header .header .logo img.normal{ opacity: 0;}
    header .header .btm{ z-index: 999; top: 0; height: 50px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; position: relative; transition: .3s; background-color: rgba(255,255,255); border-bottom: 1px solid #DDDDDB;}



    /* header-scroll */
    header.scroll .header .top .moblie-quick a.quick-btn{ opacity: 1; pointer-events: inherit;}
    header.scroll .header .btm{ opacity: 0; top: -50px;}


    /* panel */
    #panel-area{ display: block; position: fixed; width: 100%; height: 100%; z-index: 2000; text-align: center; overflow: auto; background-color: rgba(81,80,75,0); transition: .3s; pointer-events: none; top: 0;}
    #panel-area a.close-btn{ display: block; position: fixed; width: 20%; height: 100%; left: 0; top: 0; cursor: default; }
    #panel{ position: fixed; width: 80%; top: 0; height: 100%; right: -80%; background-color: #fff; transition: .3s; }
    #panel-area.active{ background-color: rgba(81,80,75,.4); pointer-events: inherit;}
    #panel-area.active #panel{ display: block; right: 0;}
    #panel .top{ height: 50px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(81,80,75,.1); }
    #panel .top img{ width: 80px; object-fit: cover;}
    #panel .btm{ padding: 0 15px; height: calc(100% - 50px); overflow-y: auto;}
    #panel .btm .quick{ height: 82px; justify-content: center; border-bottom: 1px solid rgba(81,80,75,.1); }
    #panel .btm .quick a{ padding: 0 10px;}
    #panel .btm nav.mNav{ padding: 0 10px; border-bottom: 1px solid rgba(81,80,75,.1);}
    #panel .btm nav.mNav .topNav{ display: flex; justify-content: space-between; align-items: center; height: 42px;}
    #panel .btm nav.mNav .subNav{ text-align: left; padding: 0 15px 30px 15px;}
    #panel .btm nav.mNav .subNav a{ line-height: 32px;}
    #panel .btm nav.mNav .subNav a i{ transform: rotate(-45deg); padding-left: 5px; position: relative; top: 2px;}
    #panel .btm nav.mNav .subNav li ul{ padding-bottom: 12px;}
    #panel .btm nav.mNav .subNav a.f12{ line-height: 22px; }
    #panel .btm nav.mNav .subNav a.f12 .line{ width: 12px; height: 1px; background-color: #51504B; display: inline-block; position: relative; top: -5px;}
    #panel .btm .sns{ text-align: right; margin-top: 20px;}
}




/* footer */
.footer-popup{ position: fixed; display: flex; justify-content: center; align-items: center; background-color: rgba(81,80,75,.4); z-index: 1000; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; pointer-events: none; transition: .3s;}
.footer-popup img{ width: 320px; object-fit: cover;}
.footer-popup.show{ opacity: 1; pointer-events: inherit;}
footer{ padding: 40px 0; background-color: #FAFAF8; text-align: left; position: relative; z-index: 10;}
footer .left{ text-align: center; width: 472px;}
footer .left img{ display: inline-block;}
footer .right{ width: calc(100% - 472px); }
footer .right a.tel{ display: inline-block; padding-bottom: 20px; }
footer .right .flex-wrap { width: 400px; padding-bottom: 10px;}
.rural-click{ transition: .3s; cursor: pointer;}
.rural-click:hover{ text-decoration: underline;}
footer ul{ display: block; margin-top: 10px; }
footer li{ display: inline-block; padding-right: 10px;}
footer li .copy{ padding-right: 10px;}
footer li span{ display: inline-block; padding-right: 5px;}
footer li p{ display: inline-block;}
/* =================== 820px =================== */
@media (max-width: 1024px) {
    footer{ padding: 60px 0; text-align: center;}
    footer .left{ width: 100%; padding-bottom: 20px;}
    footer .left img{ display: inline-block;}
    footer .right{ width: 100%; }
    footer .right .flex-wrap { width: 100%; flex-direction: column; padding-bottom: unset;}
    footer .right .flex-wrap p{ padding-bottom: 5px;}
    footer li:first-child{ display: block;}
    footer li{ display: inline-block; padding-right: 10px; padding-bottom: 5px;}
    footer li .copy{ padding-right: 0; display: block; width: 100%;}
}