@charset "utf-8";
.header {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff; 
    box-sizing: border-box;
    height: 90px;
    z-index: 100;
    box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 10%); 
}
.header_ceterbox {
    max-width: 1200px; 
    width: 100%;
    height: 100%;
    display: flex; 
    align-items: center; 
    margin: 0 auto;
    justify-content: space-between;
} 
.header .logo img {width: 220px; height: auto;}

.header_bg {
    width: 100%;
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: -1;
    opacity: 0;
    box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 10%); 
    transition: 0.2s;
}

header:hover .header_bg {
    transition: 0.2s;
    width: 100%;
    height: 210px;
    opacity: 1;
    background-color: #fff;
}

header:hover .gnb_depth {visibility: visible; opacity: 1;}

.gnb {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
.gnb > ul {display: flex; width: 100%; height: 100%;}
.gnb > ul > li {}
.gnb > ul > li > a {padding: 32px 40px 32px 0px; font-size: 18px; font-weight: bold; transition: 0.3s; box-sizing: border-box;}
.gnb > ul > li > a.active {color: #ef4d4d;}
.gnb > ul > li > a:hover {transition: 0.3s; color: #ef4d4d;}

.gnb_depth {
    position: absolute; 
    width: 100%;
    top: 64px;
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    background-color: #fff;
}

.gnb_depth li {padding-bottom: 30px;}
.gnb_depth li a {font-size: 18px; transition: 0.3s;}
.gnb_depth li a:hover {transition: 0.3s; color: #ef4d4d;}

.footer {width: 100%; box-sizing: border-box; background-color: #eee;}
.footer_container {padding: 80px 0;}

.footer_left {position: absolute; top: 50%; left: 0; transform: translate(0% , -50%);}
.footer_left h2 {padding-bottom: 10px;}
.footer_left ul {}
.footer_left ul li {display: inline-block; padding-right: 20px;}
.footer_left ul li p {}
.footer_left ul li p span {font-weight: bold;}

.footer_right {position: absolute; top: 50%; right: 0; transform: translate(0% , -50%);}
.footer_right ul {}
.footer_right ul li {display: inline-block; padding-left: 20px;}
.footer_right ul li a {font-weight: bold; border-bottom: 1px solid #000; }

.m_menu_btn {position: absolute; right: 15px; top: 50%; transform: translate(0 , -50%);}

.m_menu_box {
    position: fixed;
    right: 0;
    top: 0;
    max-width: 768px;
    width: 0%;
    height: 100vh; 
    background-color: #fff;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); 
    transition: 0.3s;
}
.m_menu_box.active {width: 100%; transition: 0.3s;}
.m_menu_box .m_close_btn {
    text-align: right;
    padding: 15px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
}

.m_inner {padding: 40px 40px; box-sizing: border-box;}
.m_inner > ul > li {padding: 16px 0; box-sizing: border-box;}
.m_inner > ul > li > a {cursor: pointer; display: block;}
.m_category {position: relative; display: block; font-size: 20px; font-weight: bold;}
.m_category .img_box {position: absolute; top: 50%; right: 0; transform: translate(0, -50%) rotate(0deg); transition: transform 0.2s ease-in-out;}
.m_category .img_box.active {transform: translate(0, -50%) rotate(180deg);}

.m_depth {display: none; margin-top: 15px; padding: 12px 16px; box-sizing: border-box;}
.m_depth.active {display: block;}
.m_depth ul {}
.m_depth ul li {padding-bottom: 15px;}
.m_depth ul li:last-child {padding-bottom: 0;}
.m_depth ul li a {font-size: 18px; font-weight: normal;}
.m_depth ul li a:hover {color: #999;}

@media screen and (max-width: 1200px){
    .header {height: 70px;}
    .logo {padding-left: 10px;}
    .logo img{width: 190px;}
    .gnb {display: none;}
    .m_menu_btn {display: block;}
}