@charset "utf-8";

@font-face {
    font-family: 'RIDIBatang';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PurenJeonnam';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/PureunJeonnam.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.block-345 { display: none; }
.block-425 { display: none; }

body{overflow-x: hidden;}
.clearfix::after{content: ''; clear: both;}

/* top-btn */
.top_btn{ position: fixed; right: 20px; bottom: -50px; display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-color: #e6eaed; opacity: 1; transition: all 0.3s ease-in-out; z-index: 999; display: block;}
.top_btn i{ color: #868f96; font-size: 30px; text-align: center; line-height: 50px; display: block; }
.top_btn.on{ opacity: 1; cursor: pointer; bottom: 30px;}


/* gnb */
.gnb{ width: 100%; height: 100px; position: absolute; top: 0; left: 0; z-index: 999; transition: all 0.3s ease-in-out;}
.gnb .gnb-in{ width: 1600px; height: 100%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));}
.gnb .gnb-in .logo a{ display: block; width: 100%; height: 100%;}
.gnb .gnb-in .logo a img{ width: 150px; filter: invert(1);}

.btn-area{ display: flex; justify-content: space-between; align-items: center;}
.ham-btn{ position: relative; width: 40px; height: 30px; cursor: pointer;}
.ham-btn::before, .ham-btn::after, .ham-btn div{ content: ''; display: block; height: 2px; margin: 10px 0; transition: all 0.3s ease-in-out; background-color: #fff; }
.ham-btn::before{ margin-top: 0;}

.gnb.scroll .ham-btn div, .gnb.scroll .ham-btn::before, .gnb.scroll .ham-btn::after{ background-color: #000;}
.gnb.hammenu-on .ham-btn div, .gnb.hammenu-on .ham-btn::before, .gnb.hammenu-on .ham-btn::after{ background: #000;}
.gnb.hammenu-on .ham-btn div{ background-color: transparent;}
.gnb.hammenu-on .ham-btn::before{ transform: translateY(16px) rotate(45deg);}
.gnb.hammenu-on .ham-btn::after{ transform: translateY(-8px) rotate(-45deg);}

.gnb.scroll{ width: 100%; height: 100px; background-color: #fff; transition: all 0.5s ease-in-out; position: fixed;}
.gnb.scroll .gnb-in{ justify-content: space-between;}
.gnb.scroll .gnb-in h1 a{ display: block;}
.gnb.scroll .gnb-in h1 a img{ width: 150px; filter: invert(0);}

.menu .submenu{ height: 0; visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; /*display: flex; flex-direction: column; flex-wrap: wrap; width: 80%; margin: 0 auto;*/}
.menu .submenu > li{ text-align: center; padding: 10px 0;}
.menu .submenu > li > a{ display: block; color: #9ba4aa; font-size: 14px; line-height: 1.25em;  }
.menu .submenu > li > a:hover{ color: #000; }

.hammenu{ position: fixed; top: 0; right: -100%; z-index: -1;  width: 30%; height: 100vh; background-color: #fff; transition: all 0.5s ease-in-out; }
.hammenu .hammenu-in{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-around; flex-direction: column; justify-content: start; padding-top: 100px; }
.hammenu .hammenu-in .menu{ display: flex; justify-content: center; flex-direction: column; width: 100%; margin: 100px auto;     margin: 0;}
.hammenu .hammenu-in .menu > li{ /*padding-bottom: 10px;*/ position: relative; transition: all 0.3s ease-in-out;  }
.hammenu .hammenu-in .menu > li.active> a{ color: #000; }
.hammenu .hammenu-in .menu > li > a{ color: #9ba4aa; font-size: 18px; text-align: center; display: block; padding: 15px 0; position: relative;  }
.hammenu .hammenu-in .menu > li > a i{ font-size: 12px; position: absolute; top: 33%; right: 40%; transition: all 0.3s ease-in-out;}
.hammenu .hammenu-in .menu > li > a:hover{ color: #000;}
.hammenu .hammenu-in .menu > li > a.on{ color: #000; }
.hammenu .hammenu-in .menu > li > a.on i{ transform: rotate(135deg); top: 35%; transition: all 0.3s ease-in-out;}
.hammenu .hammenu-in .menu > li.on .submenu{ visibility: visible; opacity: 1; margin-bottom: 10px;  }



/* .hammenu .hammenu-in .menu li a::after{ content: ''; display: block; width: 50px; height: 1px; background-color: #646a70; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: none; transition: all 0.8s ease-in-out; } */
/* .hammenu .hammenu-in .menu li:hover a::after{ content:''; display: block;} */

.gnb.hammenu-on .hammenu{ right: 0%;}

.inq-btn{ display: flex; justify-content: space-around; width: 100%; order: -1; width: 80%; margin-bottom: 50px; }
.inq-btn .call-btn, .inq-btn .res-btn{ width: 40%; height: 50px; border: 1px solid #c7cdd2; border-radius: 20px; line-height: 54px; transition: all 0.5s ease-in-out;}
.inq-btn .call-btn a, .inq-btn .res-btn a{ display: block; text-align: center; line-height: 50px; }
.inq-btn .call-btn a i, .inq-btn .res-btn a i{ font-size: 18px; vertical-align: middle; margin-right: 20px;}
.inq-btn .call-btn a:hover, .inq-btn .res-btn a:hover{ background-color: #c7cdd2; border: none; border-radius: 20px; color: #fff;}

/* footer */
.footer{ width: 100%; }
.footer .footer-in{ width: 1600px; border-top: 1px solid #e6eaed; padding: 50px 30px; margin: 0 auto; display: flex; justify-content: space-between;}

.foot-left .foot-logo{ margin-bottom: 60px; }
.foot-left .foot-logo h1 img{ width: 150px;}
.foot-left .foot-info{ margin-top: 60px;}
.foot-left .foot-info p{ font-size: 14px; color: #000; margin-bottom: 10px;}
.foot-left .foot-info p a{ display: block;}

.foot-right{ display: flex; flex-direction: column; justify-content: flex-end;}
.foot-right .foot-r-t{ margin-bottom: 30px; }
.foot-right .foot-r-t p, .foot-right .foot-r-b p{ font-size: 14px; text-align: right; margin-bottom: 5px; color: #646a70; }
.foot-right .foot-r-t p img{ width: 30px;}

.who{ transition: all 0.3s ease-in-out;}
.who:hover{ color: #ff5a53;}


/* --------------------------------------------------- 반응형웹 ------------------------------------------------------------ */
@media all and (max-width: 1600px){
    .gnb .gnb-in{ width: 95% !important;}
    .gnb.scroll .gnb-in{ width: 95%;}
    /* .ham-btn{ margin-right: 10px;} */
    .footer .footer-in{ width: 95%;}
}
@media all and (max-width: 1280px){
    .inq-btn { width: 100%; }
}

@media all and (max-width: 1024px){
    .inq-btn .call-btn a i, .inq-btn .res-btn a i { margin-right: 10px; }
}


@media all and (max-width: 768px){
    .hammenu{ width: 100%;}
    .gnb.hammenu-on .gnb-in .logo a img{ filter: invert(0);}

    .footer .footer-in{ width: 95%; flex-direction: column; padding: 50px 0; }
    .foot-left .foot-logo{ margin: 0 auto;}
    .foot-left .foot-logo h1{ text-align: center;}
    .foot-left .foot-info p{ text-align: center;}
    .foot-right .foot-r-t p, .foot-right .foot-r-b p{ text-align: center;}
}



@media all and (max-width: 425px){
    .block-425 { display: block; }

    .foot-right .foot-r-t p, .foot-right .foot-r-b p{ font-size: 12px;}

}
@media all and (max-width: 345px){
    .block-345 { display: block; }
}