/* header */
header {
    z-index: 99998;
    position: relative;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid var(--color-gray400);
    background-color: var(--color-white);
}
header.navbar-fixed-top {
    position: fixed;
}
header .topHeader {
    width: 100%;
    height: 50px;
    background-color: var(--color-gray200);
}
header .topHeader .layout {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
}
header .topHeader ul {
    display: flex;
}
header .topHeader li {
    position: relative;
    margin-right: 10px;
    padding-right: 11px;
}
header .topHeader li::after {
    position: absolute;
    top: 5px;
    right: 0;
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background-color: var(--color-gray400);
}
header .topHeader li:last-of-type {
    margin-right: 0;
    padding-right: 0;
}

header .botHeader .layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    
}
header .logo a {
    display: flex;
    width: 70px;
}
header .logo a img {
    width: 100%;
}

header .topNavbar ul {
    display: flex;
}
header .topNavbar li {
    margin-right: var(--mg-40);
}
header .topNavbar li:last-of-type {
    margin-right: 0;
}
header .topNavbar li a {
    font-size: 18px;
    font-weight: var(--fw-700);
}
header .topNavbar li.on a {
    color: var(--color-green);
}
    /* header 미디어쿼리 1200px 이하 */
    @media all and (max-width: 1200px) {
        header {
            height: auto;
        }
        header .topHeader {
            display: none;
        }
        header .botHeader {
            height: 80px;
        }
        header .botHeader .layout {
            height: 80px;
        }
        header .logo a {
            width: 55px;
        }
        header .botHeader .topNavbar {
            display: none;
        }
    }
    /* header 미디어쿼리 768px 이하 */
    @media all and (max-width: 768px) {
        header .botHeader {
            height: 60px;
        }
        header .botHeader .layout {
            height: 60px;
        }
        header .logo a {
            width: 45px;
        }
    }
    

/* footer */
footer {
    padding: var(--mg-60) 0;
    text-align: center;
}
footer.subFooter {
    background-color: var(--color-gray200);
}
footer .companyName {
    margin-bottom: var(--mg-20);
}
footer .fMenu ul {
    display: flex;
    justify-content: center;
}
footer .fMenu li {
    position: relative;
    margin-right: 10px;
    padding-right: 11px;
}
footer .fMenu li:last-of-type {
    margin-right: 0;
    padding-right: 0;
}
footer .fMenu li::after {
    position: absolute;
    top: 6px;
    right: 0;
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background-color: var(--color-gray400);
}
footer .fMenu li:last-of-type::after {
    display: none;
}
footer .fInfo {
    margin-top: var(--mg-20);
}
footer .fInfo ul {
    display: flex;
    flex-wrap: wrap;
    max-width: 640px;
    margin: 0 auto;
}
footer .fInfo li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 var(--mg-5) var(--mg-5) var(--mg-5); 
}
footer .fInfo li span {
    color: var(--color-gray600);
    font-size: var(--font-14)
}
footer .copyright {
    margin-top: var(--mg-30);
    color: var(--color-gray600)
}
    /* footer 미디어쿼리 1200px 이하 */
    @media all and (max-width: 1200px) {
        footer {
            padding: var(--mg-40) 0;
        }
        footer .companyName {
            margin-bottom: var(--mg-15);
        }
        footer .fMenu ul {
            flex-wrap: wrap;
        }
        footer .fInfo {
            margin-top: var(--mg-15);
        }
        footer .fInfo li span {
            font-size: var(--font-13)
        }
        footer .copyright {
            margin-top: var(--mg-25);
        }
    }
    /* footer 미디어쿼리 768px 이하 */
    @media all and (max-width: 768px) {
        footer {
            padding: var(--mg-30) 0;
        }
        footer .companyName {
            margin-bottom: var(--mg-10);
        }
        footer .fInfo {
            margin-top: var(--mg-10);
        }
        footer .fInfo li {
            margin: 0 var(--mg-5); 
        }
        footer .fInfo li span {
            font-size: var(--font-12)
        }
        footer .copyright {
            margin-top: var(--mg-20);
        }
    }


/* kakaoBanner */
.kakaoBanner {
    margin-bottom: var(--mg-40);
}
    /* kakaoBanner 미디어쿼리 1200px 이하 */
    @media all and (max-width: 1200px) {
        .kakaoBanner {
            margin-bottom: var(--mg-30);
        }
    }
    /* kakaoBanner 미디어쿼리 768px 이하 */
    @media all and (max-width: 768px) {
        .kakaoBanner {
            margin-bottom: var(--mg-20);
        }
    }