@font-face {
    font-family: 'SUITE-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Bold.woff2') format('woff2');
    font-weight: 900;
    font-style: bold;
}
@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face { 
    font-family: "SUITE-Heavy";
    src: url("../fonts/SUITE-Heavy.ttf") format("truetype");
    font-weight: bold;
} 
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    background-color: #f7f8fd ;
    padding: 8rem 1.5rem;
}
#wrap  *{
}
.header_mo {
    display: block;
    text-align: center;
    padding: 20px;
    position: fixed;
    top: 0; 
    right: 0;
    width: 100%; 
    z-index: 1000;
    background-color: #f7f8fd; 
}

.header_mo .ham {
    width: 40%;
}
.header_mo img {
    width: 50%;
    height: 20%;
}
.header_mo a {
    width: unset;
    text-align:right;
}
.header_mo nav {
    position: fixed;
    top: 0;
    right: -71%; 
    width: 50%;
    min-height: 100vh;
    background: #fff;
    z-index: 999;
    transition: .3s;
    display: block;
    background-color: #fff;
    
}
.header_wrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    flex-direction: row-reverse;
}
.header_wrap h1 {
    margin: 0;
    text-align: left;
}
.back1 {
    position: fixed;
    width: 100% !important;
    height: 100%;
    top: 0;
    display: none;
    z-index: 998;
    left: 0;
    background: #00000038;
}
nav.open + .back1 {
    display: block;
}
nav.open {
    right: 0;
    max-height: 100vh;
    width: 80%;
}

.nav_logo {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center; 
    padding: 20px;
}
.close {
    display: block;
    background: url(../img/close.png) no-repeat center/contain;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.nav_menu {
    flex-direction: column;
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.nav_menu li {
    padding: 0 1.5rem ;
    background-color: #fff;
    text-align: left;
}
.nav_menu li:last-child {
    border-bottom: none;
}
.nav_menu li a {
    width: 100%;
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    color: #fff;
    border-radius: 1.5rem;
    gap: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.nav_menu li:nth-child(1) a {
    background-color: #825ef6;
}
.nav_menu li:nth-child(2) a {
    background-color: #3c32a3;
}
.nav_menu li:nth-child(3) a {
    background-color: #42d3d8;
}
.nav_menu li a .icon {
    width: auto;
    height: 40px;
}

.header_mo .btn_wrap3 {
    display: flex;
    gap: 1rem; /* 버튼 간격 */
    width: 100%;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    margin: 3rem auto 0;
    width: 90%;
}
.header_mo .btn_wrap3:nth-of-type(3) {
    margin-top: 0;
}
.header_mo .btn_wrap3 a {
    width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 15px; 
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    border-radius: 10px; 
    text-align: center; 
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    height: 120px;
}
.header_mo .btn_wrap3 a .icon {
    width: auto;
    height: 35%;
    margin-bottom: 1.5rem;
}
footer {
    border: 1px solid #e4e4e4;
    background-color: #f7f8fd;
    padding: 20px;
}
footer p{
    line-height: 1.3;
    font-size: 1.2rem;
    font-family: 'NanumSquareNeo';
}
footer p span{
    line-height: 1.3;
    font-size: 1.2rem;
    color: #333;
    font-weight: 800;
    font-family: 'NanumSquareNeo';
}