:root {
    --bg: #F5F7FA;
    --main: #4682A9;
    --btn: #749BC2;
} 


/* 기본 글자 크기 및 폰트 설정 */
html {
    font-size: 62.5%; /* 10px = 1rem */
}

body {
    font-size: 1.6rem; /* 기본 본문 16px */
    line-height: 1.5;
    color: #222;
    background-color: #fff;
}

/* Heading 스타일 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: #111;
}

h1 {
    font-size: 2.4rem; /* 24px */
}

h2 {
    font-size: 2rem; /* 20px */
}

h3 {
    font-size: 1.8rem; /* 18px */
}

/* 본문 텍스트 */
p {
    font-size: 1.6rem; /* 16px */
    line-height: 1.2;
}

.inner {
    max-width: 1182px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

header {
    border-bottom: 1px solid #fff;
}

header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 1.5rem;
}

header h1 a {
    display: flex;
}

header .btn_menu {
    display: none;
}

header nav {
    display: flex;
    z-index: 9999;
    gap: 5rem;
}

header nav a {
    color: #18191F;
}

header nav .on {
    color: #4682A9;
    font-weight: 700;
}

footer {
    background: #263238;
    padding: 6.4rem;
}

footer .inner {
    display: flex;
    justify-content: space-between;

}

footer .footer_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .8rem;
    height: 15rem;
}

footer .footer_info .copy_list * {
    color: #fff;
    font-size: 1.4rem;
    line-height: 2rem;
}

footer .footer_info .copy_list p {
    margin-bottom: .8rem;
}

footer .footer_nav {
    display: flex;
    gap: 2.4rem;
}

footer .footer_nav .footer_nav_link {
    display: block;
    position: relative;
    width: 8rem;
    text-align: center;
    color: #F5F7FA;
    font-size: 1.4rem;
    line-height: 2rem;
}

footer .footer_nav .footer_nav_link::after {
    content: "";
    position: absolute;
    right: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1rem;
    background: rgba(255,255,255,0.4);
}

footer .footer_nav li:last-child .footer_nav_link::after {
    display: none;
}


/* 반응형 */
@media screen and (max-width: 1279px) {
    header .inner { flex-wrap: wrap; position: relative;}
    header h1 a img { width: 160px;}
    header .btn_menu { display: block; width: 29px; height: 29px; background: url("../img/menu.png") no-repeat center/25px auto;}
    header nav { width: 100%; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; padding: 0 1.5rem; background: #F5F7FA; height: 0; overflow: hidden; transition: 0.2s;}

    .btn_menu.open { background-image: url("../img/close.png");}
    header nav.on { height: calc(100vh - 1.6rem - 29px);}
    header nav a { font-weight: 600; padding: 1.6rem 1.5rem; border-bottom: 1px solid #fff;}

    footer { padding: 3rem 1.5rem;}
    footer .inner { display: block; padding: 0;}
    footer .footer_info { gap: 1.5rem; height: unset;}
    footer .footer_nav { gap: unset; justify-content: space-around; margin-top: 1.5rem;}
    footer .footer_nav .footer_nav_link { width: unset;}
    footer .footer_nav .footer_nav_link::after { right: -24%;}
}