.wrap {
    width: 100%;
    height: 100%;
}
.layer_banner {
    width: 100%;
    height: 40px;
    background: #eb024a;
    position: relative;
    text-align: center;
}
input[type="checkbox"] {
    display: none;
}
.layer_banner > label {
    display: block;
    width: 50px;
    height: 100%;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    cursor: pointer;
    position: absolute;
    top:0;
    right: 20px;
    user-select: none;
}
#layer_banner:checked + .layer_banner {
    display: none;
}

/* 햄버거 메뉴 관련 */
.ham_menu {
    width: 300px;
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 140px;
    right: 0;
    transform: translateX(100%);
    background: #fff;
    border: 2px solid #ddd;
    z-index: 999;
    transition: all 0.5s;
}
.ham_menu_active {
    transform: translateX(0);
}
.ham_menu > ul:nth-child(1) {
    display: none;
    text-align: center;
    margin-top: 20px;
}
.ham_menu > ul:nth-child(1) > li > a {
    color: #000;
}
.ham_menu > ul:nth-child(2) > li{
    text-align: center;
    font-size: 30px;
    margin: 10px 0;  
}
.ham_btn {
    width: 30px;
    height: 30px;
    float: right;
    box-sizing: border-box;
    display: none;
    cursor: pointer;
}
.ham_line {
    width: 90%;
    height: 3px;
    margin: 4px 0;
    background: #000;
}
.bg_layer {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 99;
    display: none;
}

.line_top {
    animation: line_top_transform 0.5s forwards,
    line_top_rotate 0.5s 0.5s forwards;
}
@keyframes line_top_transform {
    0% { transform: translateY(0);}
    100% { transform: translateY(7px);}
}
@keyframes line_top_rotate {
    0% {transform: translateY(7px) rotate(0);}
    100% {transform: translateY(7px) rotate(45deg);}
}

.line_mid {
    animation: line_mid 0.1s 0.5s forwards;
}
@keyframes line_mid {
    0% { transform: scale(1);}
    100% { transform: scale(0);}
}

.line_bot {
    animation: line_bot_transform 0.5s forwards,
    line_bot_rotate 0.5s 0.5s forwards;
}
@keyframes line_bot_transform {
    0% { transform: translateY(0);}
    100% { transform: translateY(-7px);}
}
@keyframes line_bot_rotate {
    0% {transform: translateY(-7px) rotate(0);}
    100% {transform: translateY(-7px) rotate(-45deg);}
}

/* X자 돌려놓기 */
.line_top_reverse {
    animation: line_top_reverse_rotate 0.5s forwards,
    line_top_reverse_transform 0.5s 0.5s forwards;
}
@keyframes line_top_reverse_transform {
    0% { transform: translateY(7px);}
    100% { transform: translateY(0);}
}
@keyframes line_top_reverse_rotate {
    0% {transform: translateY(7px) rotate(45deg);}
    100% {transform: translateY(7px) rotate(0);}
}

.line_mid_reverse {
    animation: line_mid_reverse 0.5s forwards;
}
@keyframes line_mid_reverse {
    0% { transform: scale(0);}
    100% { transform: scale(1);}
}

.line_bot_reverse {
    animation: line_bot_reverse_rotate 0.5s forwards,
    line_bot_reverse_transform 0.5s 0.5s forwards;
}
@keyframes line_bot_reverse_transform {
    0% { transform: translateY(-7px);}
    100% { transform: translateY(0);}
}
@keyframes line_bot_reverse_rotate {
    0% {transform: translateY(-7px) rotate(-45deg);}
    100% {transform: translateY(-7px) rotate(0);}
}

/* 헤더 부분 */
.header {
    width: 100%;
    height: 100px;
}
.top_header {
    width: 100%;
    height: 70px;
    max-width: 1050px;
    margin: 0 auto;
    position: relative;
    border-bottom: 2px #ddd;
    box-sizing: border-box;
}
.logo {
    width: 172px;
    height: 49px;
    background: url(../img/logo.png) no-repeat center / contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.logo > a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.top_header > ul {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.top_header > ul > li {
    display: inline-block;
    padding-left:20px;
}
.top_header > ul > li > a{
    text-decoration: none;
    color: gray;
    font-weight: 900;
}
.bot_header {
    width: 100%;
    height: 30px;
    max-width: 1050px;
    margin: 0 auto;
}
.main_nav {
    height: 100%;
}
.m_logo {
    display: none;
}
.m_logo > a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.bot_header > ul {
    text-align: center;
}
.bot_header > ul > li {
    display: inline-block;
    padding: 0 17px;
    box-sizing: border-box;
    height: 100%;
}
.bot_header > ul > li > a {
    text-decoration: none;
    color: #000;
    /* font-weight: 900; */
    font-size: 13px;
}
.bot_header > ul > li > a:hover {
    color: #eb024a;
}
.bot_nav_pan {
    position: relative;
    width: 100%;
    height: 0px;
    background: #fff;
    z-index: 9;
    overflow: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
.bot_nav_sec {
    position: absolute;
    width: 1050px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.bot_nav_sec_sub {
    width: calc((100% - (1px * 4)) / 5);
    height: 100%;
    float: left;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
}
.bot_nav_sec_sub:last-child {
    border-right: none;
}
.bot_nav_sec_sub > ul {
    list-style: none;
}
.bot_nav_sec_sub li {
    height: 30px;
    cursor: pointer;
    padding: 0px 0 0px 30px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 30px;
}
.bot_nav_sec_sub li:nth-child(1) {
    font-weight: 900;
}
.bot_nav_sec_sub li:hover {
    background: #ddd;
}
/* .bot_nav_sec:nth-child(1) {
    background: red;
}
.bot_nav_sec:nth-child(2) {
    background: green;
}
.bot_nav_sec:nth-child(3) {
    background: greenyellow;
}
.bot_nav_sec:nth-child(4) {
    background: pink;
}
.bot_nav_sec:nth-child(5) {
    background: hotpink;
}
.bot_nav_sec:nth-child(6) {
    background: gray;
} */


/* 푸터영역 */

.footer {
    width: 100%;
    height: 320px;
}
.footer_top {
    width: 100%;
    height: 30px;
    max-width: 1050px;
    margin: 0 auto;
    border-bottom: 2px solid #ddd;
}
.footer_top > ul {
    text-align: center;
    line-height: 30px;
}
.footer_top li {
    display: inline-block;
    padding-left: 30px;
    box-sizing: border-box;
}
.footer_top li > a {
    color: #000;
    text-decoration: none;
    /* font-weight: 900; */
    font-size: 13px;
}
.footer_top li > a:hover {
    color: #ddd;
}
.footer_bot {
    width: 100%;
    max-width:1050px;
    /* height: 290px; */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}
.footer_bot_left {
    width: 180px;
    height: 100%;
    float: left;
}
.f_logo {
    width: 180px;
    height: 54px;
    background: url(../img/f_logo.png) no-repeat center / contain;
}
.footer_bot_center {
    width: 550px;
    height: 100%;
    float: left;
    padding: 15px;
    box-sizing: border-box;
}
.footer_bot_center > ul {
    list-style: none;
}
.footer_bot_center > ul:nth-child(2) {
    margin-top: 20px;
}
.footer_bot_center > ul:nth-child(3) {
    margin-top: 20px;
}
.footer_bot_center li {
    font-size: 13px;
    /* font-weight: 900; */
    margin: 10px 0;
}
.footer_bot_right {
    width: 270px;
    height: 100%;
    float: right;
    padding: 15px 0px;
    box-sizing: border-box;
}
.footer_bot_right > h3:nth-child(1) {
    font-size: 15px;
}
.footer_bot_right > h3:nth-child(2) {
    font-size: 30px;
    color: red;
}
.footer_bot_right > p {
    font-size: 13px;
}
.footer_bot_right > h3 > a {
    text-decoration: none;
    color: #000;
    font-size: 15px;
}

@media screen and (max-width:1180px) {
    .layer_banner {
        display: none;
    }
}

@media screen and (max-width:1060px) {
    .bot_header {
        width: 100%;
        height: 30px;
        max-width: 100%;
    }
    .bot_header > ul {
        display: none;
    }
    .ham_menu > ul {
        list-style: none;
    }
    .ham_menu > ul > li > a {
        text-decoration: none;
        color: gray;
        font-weight: 900;
        font-size: 13px;
    }
    .ham_btn {
        width: 30px;
        height: 30px;
        float: right;
        box-sizing: border-box;
        display: block;
    }
    .footer_bot_right {
        width: 150px;
    }
}

@media screen and (max-width:937px) {
    .footer_bot_left {
        width: 180px;
        height: 54px;
        float: none;
        margin: 0 auto;
    }
    .footer_bot_center {
        width: 100%;
        float: none;
        padding: 15px;
        box-sizing: border-box;
        text-align: center;
    }
    .footer_bot_right {
        width: 100%;
        float: none;
        text-align: center;
    }
}

@media screen and (max-width:730px) {
    .footer_top {
        display: none;
    }
}

@media screen and (max-width:650px) {
    .header {
        height: 54px;
    }
    .ham_menu > ul:nth-child(1) {
        display: block;
    }
    .ham_menu > ul:nth-child(2) > li{
        margin: 5px 0;  
    }
    .top_header {
        display: none;
    }
    .bot_header {
        height: 54px;
    }
    .m_logo {
        display: block;
        float: left;
        width: 180px;
        height: 54px;
        background: url(../img/f_logo.png) no-repeat center / contain;
    }
    .ham_btn {
        padding: 15px;
        width: 54px;
        height: 54px;
    }
    .ham_line {
        width: 100%;
    }
    .ham_menu {
        top: 0px;
    }
    
}

/* @media screen and (max-width: 370px) {
    .footer_bot {
        height: auto;
    }
} */