* {margin: 0; padding: 0;}
@font-face {
    font-family: 'pretendard';
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
    src: url('../fonts/Pretendard-Regular.otf') format('otf');
    src: url('../fonts/Pretendard-Regular.ttf') format('ttf');
    src: url('../fonts/Pretendard-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html, body {overflow-y: auto; overflow-x: hidden; color: #333; margin: 0; padding: 0; -ms-overflow-style: none;
   font-family: 'Pretendard', Arial, sans-serif; line-height: 180%;
}
::-webkit-scrollbar {
    display: none;
  }
li {list-style: none;}
a {text-decoration: none; color: #333;}
p {color: #333;}
body { background-color:#fff;  min-width: 320px}

/* header */

.header {border-bottom: 1px solid #e7e7e7; box-sizing: border-box; width: 100%; position: fixed; top: 0px; left: 0px; background: #fff; z-index: 9;}
.header-box {max-width: 1600px; width: 98%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;  height: 70px;}
.header img {width: 110px;}
.header-txt {display: flex; width: 100%; justify-content: center; gap: 8rem}
.header-txt li { text-align: center;}
.header-txt li a {font-weight:700; font-size: 18px; display: block; width: 100%;}

.mheader-txt {position: absolute; top:71px; left: 0; width: 100%; background: #333; border-top:1px solid #ccc; box-shadow: 0px 4px 7px rgba(0,0,0,0.3); display: none;}
.mheader-txt li {width: 100%;}
.mheader-txt li a {font-size: 16px; color: #fff; height: 50px; line-height: 50px; margin: 0; text-align: center;  border-bottom: 1px solid #121212; display: block; box-shadow: 0 1px 1px rgb(255 255 255 / 10%); display: block;}

.outlink {display:flex; margin-left: auto}
.outlink li {margin:0 8px; color:#888; font-size: 12px;}
.outlink li a.active {font-weight:500; font-size: 14px; color:#333}
.outlink li a {font-weight:500; font-size: 14px; color:#888; }

#menuBtn {display: none; cursor: pointer;}

/* footer */
footer { width: 100%; margin-top:0px; background-color: #1e1e1e; padding: 20px 0px; z-index: 2; overflow-x:hidden}
#footer.footer_fix { position: fixed;  top: initial; bottom: 0;z-index: 500; }

#footer .footer_wrap { max-width: 1280px; margin: 0 auto; width: 95%;}
#footer .footer_box {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 50px; align-items: center;}
.fb_section01 {display: flex; justify-content: center; margin-right: 50px;}
.fb_section i {color: #fff; padding-top: 5px; margin-right: 10px; background: #5b5b5b; height: 20px; width: 25px; text-align: center; border-radius: 50px;}
.fb_section01 p {margin-bottom: 7px;}
.fb_section02 p {margin-bottom: 5px; margin-right: 50px;}
.fb_section03 img {width: 110px; margin-bottom: 15px;}
#footer .footer_wrap p { font-family: 'notokr-thin'; font-size: 14px; color: #fff; opacity: 1; font-weight: 100;}
#footer .footer_wrap .footer_box a {color: #00a1ff; font-size: 14px; font-weight: bold;}
#footer .footer_wrap p.copy { font-size: 12px; margin-top: 0px; opacity:0.8;}


/* 스크롤 탑 */

.scroll_button {position: fixed; bottom: 5%; right: 5%; z-index: 9999; display: none;}
#scrollTopButton {background: #0000008f; border: 0px solid #ccc; padding: 15px; border-radius: 50px; cursor: pointer;}
#scrollTopButton i {font-size: 20px; color: #fff;}


@media screen and (max-width: 1000px) { 
    .header-txt {gap: 3rem}
    .scroll_button {display: block;}
    #footer .footer_box {justify-content: flex-start;}
}

@media screen and (max-width: 768px) {
    header nav.on {display: block}
    .header-box {margin: 0px; padding: 0px 15px; width: 85%;}
    .header-box ul.header-txt {margin: 0;}
    .header-txt {display: none;}

    #menuBtn {display:block; top: 16px; right: 10px; font-size: 24px; }
    #menuBtn i {opacity: 0; transition: 0s; position: absolute; right: 20px; top: 23px;}
    #menuBtn i.on {display: block; opacity: 1; transition: 1s;}
    
    footer {margin-top:30px; padding: 10px; box-sizing: border-box;}
    .fb_section01 {margin-right: 0px;}
    .outlink {margin-right: 5%;}
}