body, html {scroll-behavior: smooth;}
body * {transition: all 0.3s; overflow: hidden;}
#wrap {min-height: 100vh; position: relative;}

/* 헤더======================================================================= */
#wrap header {max-width: 100%; min-width: 430px; overflow: hidden; margin: 0 auto; position: relative;}
#wrap header .menu {
    position: absolute; top: 0; left: 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: center; 
    width: 100%; height: 90px; padding: 15px 60px; position: relative;
    z-index: 1;
}
#wrap header .menu .logo {filter: invert(0);}
#wrap header .menu .logo a {}
#wrap header .menu .logo a img {}
#wrap header .menu .menuimg {display: none;}
#wrap header .menu nav {
    display: flex; gap: 30px; height: 90px; align-items: center;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content;
}
#wrap header .menu nav a {height: 100%; line-height: 90px; color: #fff; font-weight: 500;}
#wrap header .menu .right_menu {display: flex; gap: 15px;}
#wrap header .menu .right_menu a {}
#wrap header .menu .right_menu a img {}



/* 풋터======================================================================= */
#wrap footer {border-top: 1px solid #D9D9D9; background: #f5f5f5; padding: 60px 0;}
#wrap footer .container {
    max-width: 93%; min-width: 430px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: flex-start;
}
#wrap footer .container .left {width: 36%; display: flex; justify-content: space-between;}
#wrap footer .container .left h1 {width: 125px; height: 20px;}
#wrap footer .container .left h1 a {width: 100%;}
#wrap footer .container .left h1 a img {filter: invert(1); opacity: 30%;}
#wrap footer .container .left .wrap {width: calc(100% - 54%); display: flex; justify-content: space-between; padding-top: 20px;}
#wrap footer .container .left .wrap .pri {display: flex; flex-flow: column nowrap; gap: 20px;}
#wrap footer .container .left .wrap .pri a {font-size: 0.875rem; color: #a6a6a6;}
#wrap footer .container .left .wrap .pri a em {font-weight: 500; color: #a6a6a6;}
#wrap footer .container .left .wrap .info {display: flex; flex-flow: column nowrap; gap: 20px;}
#wrap footer .container .left .wrap .info a {font-size: 0.875rem; color: #a6a6a6;}
#wrap footer .container .left .wrap .info a em {font-weight: 500; color: #a6a6a6;}
#wrap footer .container > .right {
    width: 22%; padding-top: 20px;
    display: flex; flex-flow: column nowrap; gap: 30px; justify-content: space-between; align-items: flex-end;
}
#wrap footer .container .right .top {
    width: 100%;
    display: flex; flex-flow: column nowrap; gap: 60px; justify-content: space-between; align-items: flex-end;}
#wrap footer .container .right .top .family {width: calc(100% - 45%);}
#wrap footer .container .right .top .family a {
    width: 100%; border-radius: 50px; background: #E6E6E6; padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
}
#wrap footer .container .right .top .family a span {color: #A6A6A6; font-size: 0.875rem;}
#wrap footer .container .right .top .family a img {}
#wrap footer .container .right .top .sns {display: flex; gap: 25px; opacity: 40%;}
#wrap footer .container .right .top .sns a {width: 24px; height: 24px;}
#wrap footer .container .right .top .sns a img {}
#wrap footer .container .right p {color: #A6A6A6; font-size: 0.75rem;}