header {
    background-color: #001424;
    position: fixed; left: 0;top: 0;
    height: 6rem; width: 100vw;
    z-index: 100;
    display: flex; justify-content: center; align-items: center;
}
header .open_nav {position: absolute; left: 2rem; width: 3rem;}
header a {display: block;}
header .logo {height: 3rem;}
header .prev {position: absolute; right: 2rem; height: 2.5rem;}
header .tile {position: absolute;top: 90%; width: 100%;}

/* ham : 공통*/
.nav_wrap nav {
    left: -100%;
    display: none;
    left: 0;
    position: fixed;background-color: #fff;width: 70%; height: 100vh;
    z-index: 130;
}
.nav_wrap nav .logo_wrap {display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; height: 6rem;}
.nav_wrap nav .logo_wrap img {height: 3rem;}
.nav_wrap nav .logo_wrap img.close_nav {height: 2rem;}
.nav_wrap nav .con ul li a {font-size: 1.6rem; display: block; padding: 1.3rem; border: 1px solid #bebfbf; border-right: none; border-top: none; }
.nav_wrap nav .con ul li img {position: absolute; right: 1rem; height: 1rem; top: 50%; transform: translateY(-50%);}


/* ham : 자주찾는 꿈 해몽 */
.nav_wrap nav .con1 h1 {padding: 1rem 2rem ;height: 5rem; background-color: #001424; color: #fff; display: flex; justify-content: start; align-items: center; font-size: 2rem; font-family: 'Paybooc';}
.nav_wrap nav .con1 ul {display: flex; flex-wrap: wrap;}
.nav_wrap nav .con1 ul li {width: 50%; display: block; box-sizing: border-box; position: relative;}
.nav_wrap nav .con1 ul li:nth-of-type(1) {background-color: #dff1f7;}
.nav_wrap nav .con1 ul li:nth-of-type(2) {background-color: #d7d6f2;}
.nav_wrap nav .con1 ul li:nth-of-type(3) {background-color: #ffe6f0;}
.nav_wrap nav .con1 ul li:nth-of-type(4) {background-color: #f4e8dc;}
 
/* ham : 해몽백과 */
.nav_wrap nav .con2 {margin: 1rem;display: flex;}
.nav_wrap nav .con2 h1 {
    padding: 1.8rem; color: #001424;
    background-color: #eceded;
    font-family: 'Paybooc';
    width: 50%; font-size: 1.8rem; font-weight: 600;
}
.nav_wrap nav .con2 ul {width: 50%;}
.nav_wrap nav .con2 ul li {position: relative; border: 1px solid #eee; border-bottom: none;}
.nav_wrap nav .con2 ul li:last-of-type {border: 1px solid #eee}
.nav_wrap nav .con2 ul li a {display: block;padding: 1rem; }
.nav_wrap nav .con2 ul li img {position: absolute; right: 1rem; height: 1rem; top: 50%; transform: translateY(-50%);}


.nav_wrap .nav_bg {
    position: fixed; left: 0; top: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.6); width: 100vw; height: 100vh; z-index: 120;}


/* 메뉴 활성화 */
.nav_wrap nav.on {display: block; transition: .5s; left: -2px;}
.nav_wrap .nav_bg.on {display: block;}






/* 검색창 */
#wrap {display: flex; justify-content: flex-start; align-items: center; flex-direction: column;}
#wrap form {
    width: 100%; margin-top: 6rem; 
    min-height: 6rem;
    display: flex; align-items: end;
    position: relative;
}
#wrap form img {
    object-fit: contain; width: 100%;
}
#wrap form label {
    display: flex; justify-content: space-between; 
    width: calc(100% - 4rem); 
    position: absolute; bottom: 10%; left: 2rem;
}
#wrap form label input[type="text"] {
    display: flex; justify-content: center; align-items: center;
    border: 1px solid #ccc;
    border-radius: .5rem;
    padding: 1rem 5rem 1rem 2rem; 
    font-size: 1.8rem;
    color: #001424;
    width: 100%;
}
#wrap form label input[type="submit"] {
    background: url(../sub/search.png) no-repeat 0 center / 60%;
    filter: brightness(0);
    position: absolute; width: 3rem ; height: 3rem; text-indent: -9999px; 
    right: 1rem; top: 50%; transform: translateY(-50%); 
}



em {font-size: inherit; font-weight: inherit; background-color: #ce3875; color: #fff;}