#wrap {width: 100%; height: auto;}
#header {width: 100%; height: auto; border-bottom: 1px solid #d5d5d5;}
#container {width: 100%; height: auto;}
#footer {width: 100%; height: auto; background-color: #535353; color: #fff;}

/* header */
#header .inner {width:100%; max-width: 1560px; margin: 0 auto; display:flex; justify-content: center; position: relative; align-items: center; padding: 0 11.39em 0 19.67em;}
#header .logo {font-weight: 800; font-size: 1.67em; color: #222; position: absolute; top: 1em; left:0;}
#header .logo a {display: flex; align-items: center; gap: 0 .33em; width: 100%; height: 100%;}

#header .utill {position: absolute; top: 1.2em; right:0; display: flex; align-items: center; gap: 0 1.11em;}
#header .utill a, #header .utill button {font-weight: 500; color: #222;}
#header .utill .btnNavFullPage {display: none;}
#header .utill i[class$="-ico"] {display: block; width: 1.78em; height: 1.78em; margin: 0 auto; background-position: center; background-repeat: no-repeat;}
#header .utill .login-ico {background-image: url("../../img_new/icon/login.png");}
#header .utill .join-ico {background-image: url("../../img_new/icon/join.png");}
#header .utill .menu-ico {background-image: url("../../img_new/icon/menu.png");}

#header .nav_wrap {width: 100%; padding: 0 1.78em;}
#header::before {content: ''; display: block; width: 100%; min-height: 0; background: #fff; border-top: 1px solid #dddfe1; position: absolute; top: 5.56em; z-index: 3; opacity: 0; transition: all .3s; pointer-events: none;}
#header::before {left: 0; box-shadow: 0 6px 5px rgba(0,0,0, 0.34);}

#header .nav_wrap .nav {display: flex;}
#header .nav_wrap .nav li {flex: 1; position: relative; padding: 0 .89em;}
#header .nav_wrap .nav li .lnb_link {display: flex; align-items: center; justify-content: center; width: 100%; height: 3.85em; font-weight: 700; font-size: 1.44em; color:#222;}
#header .nav_wrap .nav li .lnb_link:after { content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%); width:0; height:5px; background:#264186; transition: all .3s; }
#header .nav_wrap .nav li .lnb_link.active:after,
#header .nav_wrap .nav li .lnb_link:hover::after {width: calc(100% - 3.2rem);}

#header .nav_wrap .nav .submenu {display: none; width: 100%; min-height: 0; position: absolute; top: 5.56em; left: 0; z-index: 4;}
#header .nav_wrap .nav .submenu ul {padding: 1.67em .5rem; display: grid; row-gap: .67em;}
#header .nav_wrap .nav .submenu ul li {text-align: left; color: #222; font-weight: 500; font-size: 1.11em; letter-spacing: -0.05em;}
#header .nav_wrap .nav .submenu ul li a:hover {text-decoration: underline; font-weight: 700; color: #264186;}

#header.nav_on::before, #header.nav_on::after {opacity: 1; min-height: 17.78em;}
#header.nav_on .nav_wrap .nav .submenu {display: block; min-height: 17.78em;}

@media screen and (max-width: 1600px) {
    #header {padding: 0 1.25em;}
    #header::before {top: 5.31em;}
    #header .inner {max-width: 100%; padding-left: 20em;}
    #header .logo {font-size: 1.5em;}
    #header .nav_wrap .nav li .lnb_link {font-size: 1.38em;}
    #header .nav_wrap .nav .submenu {top: 5.25em;}
    #header .nav_wrap .nav .submenu ul li {font-size: 1.06em;}

    #header.nav_on::before, #header.nav_on::after {opacity: 1; min-height: 14.38em;}
    #header.nav_on .nav_wrap .nav .submenu {display: block; min-height: 14.38em;}
}

#header .mob-navi {display: none; width: 100%; max-width: 568px; height: 100%; position: fixed; top: 0; right: -100%; z-index: 999; background-color: #fff; transition: all .3s; overflow-y: auto;}
#header .mob-navi.on {right: 0; display: block;}
#header .mob-navi .mob-utill {width: 100%; height: 56px; border-bottom: 1px solid var(--clr-border); display: flex; align-items: center; justify-content: center; gap: 0 1.11em;}
#header .mob-navi .mob-utill a {font-weight: 500; color: #222; display: flex; align-items: center; gap: 0 .5em;}
#header .mob-navi .mob-utill i[class$="-ico"] {display: block; width: 1.78em; height: 1.78em; margin: 0 auto; background-position: center; background-repeat: no-repeat;}
#header .mob-navi .mob-utill .login-ico {background-image: url("../../img_new/icon/login.png");}
#header .mob-navi .mob-utill .join-ico {background-image: url("../../img_new/icon/join.png");}

#header .mob-navi .left_gnb > li {width: 100%; border-bottom: 1px solid var(--clr-border);}
#header .mob-navi .left_gnb > li > a {display: block; text-align: center; line-height: 50px; background-color: #fff; color: #000; font-weight: 600; font-size: 1.25em;}
#header .mob-navi .left_gnb > li > a.on {background-color: var(--clr-nadri1); color: #fff;}

#header .mob-navi .left_gnb > li > ul {display: none; background-color: #f9fbff; padding: 1.2em;}
#header .mob-navi .left_gnb > li > ul > li > a {display: block; text-align: center; line-height: 50px; font-size: 1.11em;}
#header .mob-navi .left_gnb > li > ul > li > a:hover {font-weight: 600; color: var(--clr-nadri4); text-decoration: underline;}
#header .mob-navi .left_gnb > li > ul > li:not(:nth-child(1)) {border-top: 1px solid var(--clr-border);}
#header .mob-navi .close {position: absolute; top: 1.1em; right: 1.2em;}

@media screen and (max-width: 1440px) {
    #header {height: 85px;}
    #header .utill a {display: none;}
    #header .utill .btnNav {display: none;}
    #header .utill .btnNavFullPage {display: block;}
    #header .nav_wrap .nav {display: none;}
}

@media screen and (max-width: 960px) {
    #header {height: 65px; padding: 0 12px;}
    #header .inner {padding: 0;}
    #header .logo {font-size: 1.2em;}
    #header .logo a img {height: 26px;}
    #header .utill {gap: .5em; top: .65em;}
}

/* footer */
#footer .inner {max-width: 1560px; padding: 3.2em 1em; margin: 0 auto; font-size: 1.11em;}
#footer .inner .foot-logo {display: flex; align-items: center; gap: 0 1rem; font-weight: 600; font-size: 1.3em;}
#footer .inner .foot-logo img {width: 10.35em; height: 1.88em;}
#footer .inner address {margin-top: 1.36em; font-size: 1.10em;}
#footer .inner .foot-menu {margin-top: .91em; display: flex; align-items: center; gap: 0 1.09em; font-weight: 500; font-size: 1.10em;}
#footer .inner .foot-menu li {position: relative;}
#footer .inner .foot-menu li:not(:nth-child(1))::before {content: ''; display: block; width: 6px; height: 6px; background-color: #fff; border-radius: 100%; position: absolute; top: 50%; left: -14px; transform: translateY(-50%);}
#footer .inner .foot-menu li a:hover {text-decoration: underline;}
#footer .inner cite {display: block; width: 100%; height: auto; padding-top: 1.25em; margin-top: 2.5em; border-top: 1px solid #7a7a7a; letter-spacing: 0;}
.bt-top {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 4.38em; height: 4.38em; background-color: #000; border: 2px solid #fff; color: #fff; border-radius: 100%; position: fixed; bottom: 2.88em; right: 2.88em; font-weight: 700; font-size: .89em; letter-spacing: 0;}

@media screen and (max-width: 960px) {
    #footer .inner {font-size: 1em;}
    #footer .inner .foot-menu {flex-direction: column; align-items: flex-start; gap: .25em;}
    #footer .inner .foot-menu li::before {display: none !important;}
    .bt-top {bottom: 1em; right: 1em; font-size: .75em;}
}

/* sub visual */
.sub-title {width: 100%; height: auto; padding: 1.9em 0; text-align: center; font-weight: 600; font-size: 2.33em; letter-spacing: 0;}
.sub-title.bg-nadri, .sub-title.bg-use, .sub-title.bg-community, .sub-title.bg-privacy {background: url("../../img_new/vis_nadri.jpg") top center no-repeat #e5eefc;}
.sub-title.bg-happy {background: url("../../img_new/vis_happymom.jpg") top center no-repeat #fae9ed;}

/* sub conetnts : layout */
.sub-contents {max-width: 1580px; padding: 0 1.11em 7.22em; margin: 0 auto;}
.sub-contents::after {content: ''; display: block; clear: both;}
.sub-contents .submenu {float: left; width: 16.67em; transform: translateY(-6.67em);}
.sub-contents .contents-wrap {float: right; width: calc(100% - 20em); height: auto;}
.sub-contents .page-title {font-weight: 700; font-size: 2.11em; color: var(--clr-text2); padding-bottom: .53em;}
.sub-contents .page-stitle {font-weight: 700; font-size: 1.56em; color: var(--clr-text2); padding-bottom: .43em;}

/* submenu */
.submenu h2 {width: 100%; height: 5.19em; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: .25em 0; text-align: center; border-radius: .75em .75em .75em 2.5em; color: #fff; font-weight: 700; font-size: 1.78em;}
.submenu h2 span {font-size: .5em; letter-spacing: 0; text-transform: uppercase;}
.submenu nav {width: 100%; height: auto; margin-top: 1.33em;}
.submenu nav ul {font-weight: 700; font-size: 1.22em;}
.submenu nav ul li {border-bottom: 1px solid #e2e5eb; position: relative;}
.submenu nav ul li a {display: block; padding: .91em 1.09em;}
.submenu nav ul li.active {background: url("../../img_new/icon/arrow_right.png") center right 10px no-repeat;}
.submenu nav ul li a:hover {text-decoration: underline;}

.submenu.nadri h2 {background-color: var(--clr-nadri1);}
.submenu.nadri h2 span {color: #a9b7ff;}
.submenu.nadri nav ul li.active {color: var(--clr-nadri1);}

.submenu.happymom h2 {background-color: var(--clr-hayype1);}
.submenu.happymom h2 span {color: #ffb8c9;}
.submenu.happymom nav ul li.active {color: var(--clr-hayype2);}

/* breadcrumb */
.breadcrumb {width: 100%; height: auto; padding: 1.11em 0 2.67em;}
.breadcrumb ul {width: 100%; display: flex; align-items: center;}
.breadcrumb ul li {display: inline-flex; align-items: center; font-size: .89em;}
.breadcrumb ul li:not(:last-child)::after {content: '>'; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; color: #9eaae7; font-size: 12px; font-family: 'Gulim';}
.breadcrumb ul li.home a {width: 1.5em; height: 1.5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M14.5 15.5a.5.5 0 0 1 0 1H9.3a.5.5 0 0 1 0-1z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M21.7 11.4q.3.3 0 .7l-.5.3-.3-.2-1.3-1.2v7c0 1.5-1.2 2.7-2.6 2.7H6.8A2.6 2.6 0 0 1 4 18v-6.8l-1.1 1q-.4.3-.8 0v-.7l2-1.7.1-.2 7.2-6.5.2-.1h.7zM7.4 8.2l-2.2 2v7.9q0 1.4 1.6 1.5H17q1.4 0 1.5-1.5v-7.9l-6.7-6z' clip-rule='evenodd'/%3E%3C/svg%3E") center / cover no-repeat;}

@media screen and (max-width: 1280px) {
    .sub-title, .sub-contents .submenu {display: none;}
    .sub-contents .contents-wrap {float: none; width: 100%;}
}