body{margin: 0;}
input, textarea, select {
    outline: none;
}
.wrap {
    font-family: 'Nanum Myeongjo', serif;
    overflow: hidden;
}

ul {padding:0; margin: 0; list-style: none;}
a {text-decoration: none; color:inherit}

.header {
    width:100%;
    margin: 0 auto;
    background: #fff;
    position: fixed;
    top:0;
    left:0;
    z-index: 99999;
    transition: height 0.3s;
}

.width_1200 {
    width:100%;
    max-width:1200px;
    margin: 0 auto;
}
.hd_top {
    margin: 0 auto;
    position: relative;
    transition: height 0.3s;
}

/* 
    헤더 높이 바꿔주기
*/
.hd_height {height:170px}
.hd_height_active {height:130px}

.hd_top_height {height:120px}
.hd_top_height_active {height:80px}



.hd_top_L {
    width: 40vw;
    height:100%; float: left;
    position: relative;
}

.menu_login {
    width:100%;
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    font-size: 12px;
    color:#666;

    padding-left: 12px;
}
.menu_lg_li {
    float: left;
    margin-right: 30px;
}

@keyframes logo_move {
    0% {opacity:0.3; transform: scaleX(0);}
    10% {opacity:0.3; transform: scaleX(0);}
    70% {opacity:1; transform: scaleX(1);}
    100% {opacity:1; transform: scaleX(1);}
}

@keyframes logo_move2 {
    0% {opacity:0.3; transform: scaleY(0);}
    10% {opacity:0.3; transform: scaleY(0);}
    70% {opacity:1; transform: scaleY(1);}
    100% {opacity:1; transform: scaleY(1);}
}

.logo {
    width:134px;
    height:100%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.logo a {
    width:100%;
    height:100%;
    display: block;
    text-indent: -9999px;
    font-size: 0;
}

.logo_img {
    transform: scaleX(0);
    opacity:0;
    width:100%;
    position: absolute;
    top:0;
}

.logo_img1 {
    height:100%;
    background: url(../img/logo1.png) no-repeat left / cover;
    animation: logo_move 1s forwards;
    transform-origin:left;
}   
.logo_img2 {
    height:100%;
    background: url(../img/logo2.png) no-repeat right;
    animation: logo_move 1s 0.6s forwards;
    transform-origin:right;
}
.logo_img3 {
    height:100%;
    background: url(../img/logo3.png) no-repeat right;
    animation: logo_move2 1s 0.3s forwards;
    transform-origin:bottom;
}

.search_box {
    width:12%;
    height:30px;
    line-height: 28px;
    border: 1px solid #bbb;
    border-radius: 25px;
    position: absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    font-size: 12px;
    color:#666;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    margin-right: 12px;
}

.ip_search {
    width:calc(80% - 10px);
    height:100%;
    border: 0;
    outline: none;
    position: absolute;
    left:0;
    padding-left:10px;
    box-sizing: border-box;
}

.btn_search {
    display: block;
    width: 26%;
    height: 100%;
    float: right;
    background: none;
    border: 0;
    cursor: pointer;
    background: url(../img/search.png) no-repeat right center;
}

.btn_search img {margin-top: 2px;}

.hd_bot {
    width:100%;
    height:50px;
    
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    background: #fff;
}

.hd_box_inner {
    height:50px;
}

.gnb {
    height: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 0;
    color:#444;
}

.gnb_li {
    display: inline-block;
    height:99%;
    line-height: 48px;
    font-size: 14px;
    padding: 0 2px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 21px;
}
.gnb_li > a {
    display: block;
    width:100%;
    height:100%;
}

.gnb_li:hover {
    color:#222;
    font-weight: 600;
    border-bottom: 3px solid #222;
}


/* ////////////////메인 */
.main {
    width:100%;
    transition: margin 0.3s;
    position: relative;
}

.footer {
    padding: 70px 0;
    box-sizing: border-box;
    font-size: 15px;
    color:#222;
}

.ft_box {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
}
.ft_border {
    padding-left: 15px;
    box-sizing: border-box;
    border-left: 4px dotted #ddd;
}

.ft_aside {
    /* background: cornflowerblue; */
    float: left;
}

.ft_title {
    font-size: 18px;
    padding-bottom: 5px;
    box-sizing: border-box;
    font-weight: 800;
    color:#111;
}

.ft_text {
    line-height: 1.8;
    color:#444;
}

.ft_cs_num {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.3;
    color:#111;
}

.ft_cs_time {
    line-height: 1.4;
    font-weight: 600;
}

.ft_L_sec_2 {
    margin-top: 20px;
}

.ft_C {
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
}

.ft_R {
    float: right;
}

.fixed_menu {
    width:35px;
    position: fixed;
    top:50%;
    transform: translateY(-50%);
    right: -35px;
    z-index: 99999;
    font-size: 0;
    opacity: 0;
    transition: all 0.5s, opacity 1.2s;
}

.fixed_menu img {
    cursor: pointer;
    margin-bottom: 8px;
}
.hd_big_hide{display: none;}
.hd_sm_hide{display: block;}

.main_mg_top {margin-top: 170px;}
.main_mg_top_active {margin-top: 130px;}

.ft_big_hide{display: none;}
.ft_sm_hide{display: block;}

@media screen and (max-width: 1200px) {
    .main_mg_top {margin-top: 220px;}
    .main_mg_top_active {margin-top: 180px;}

    .hd_height {height:220px}
    .hd_height_active {height:180px}
    .hd_top_height {height:120px}
    .hd_top_height_active {height:80px}
    .hd_bot {height:100px;}

    .footer {
        padding: 70px 0;
        box-sizing: border-box;
        font-size: 15px;
        color:#222;
    }

    .ft_box {
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .ft_border {
        padding-left: 15px;
        box-sizing: border-box;
        border-left: 4px dotted #ddd;
    }

    .ft_aside {
        /* background: cornflowerblue; */
        float: left;
    }

    .ft_title {
        font-size: 18px;
        padding-bottom: 5px;
        box-sizing: border-box;
        font-weight: 800;
        color:#111;
    }

    .ft_text {
        line-height: 1.8;
        color:#444;
    }

    .ft_cs_num {
        font-size: 32px;
        font-weight: 900;
        line-height: 1.3;
        color:#111;
    }

    .ft_cs_time {
        line-height: 1.4;
        font-weight: 600;
    }

    .ft_L_sec_2 {
        margin-top: 20px;
    }

    .ft_C {
        position: absolute;
        top:0;
        left:35%;
        transform: translateX(0);
    }

    .ft_R {
        float: right;
    }
}

@media screen and (max-width: 840px) {
    .ft_big_hide{display: block;}
    .ft_sm_hide{display: none;}
    
    .ft_aside {
        width:100%;
        overflow: hidden;
        position: relative;
    }
    .ft_top {
        width:100%;
        height:100%;
        float: left;
    }
    .ft_L {
        width:35%;
        min-width: 270px;
        float: left;
    }

    .ft_C {
        position: absolute;
        top:0;
        left:0;
    }

    .ft_R_out {
        width:calc(100% - 280px);
        height: 100%;
        float: left;
        position: relative;
    }

    .ft_C {
        width:100%;
        position: absolute;
        top:0;
        left:0;
    }
    .ft_R {
        position: absolute;
        bottom:0;
        right:0;
    }

    .ft_bot {
        clear: both;
        position: relative;
        width:100%;
        height: 130px;
    }

    .ft_last {
        width:40%;
        height:100%;
        position: absolute;
        top:-25%;
        right:0;
    }
}

@media screen and (max-width: 780px) {
    .hd_top_L {
        width: 30%;
        height:100%; float: left;
        position: relative;
    }

    .menu_login {
        width:100%;
        position: absolute;
        top:50%;
        left:0;
        transform: translateY(-50%);
        font-size: 0;
        color:#666;
        text-align: center;

        padding-left: 12px;
    }
    .menu_lg_li {
        display: inline-block;
        font-size: 12px;
        float: none;
        padding: 5px 0;
        box-sizing: border-box;
        margin-right: 30px;
    }

    .search_box {
        min-width: 90px;
    }
    .btn_search {background: url(../img/search.png) no-repeat right center}
}

@media screen and (max-width: 640px) {
    .main_active{position: relative; left:100%}
    .main_mg_top {margin-top: 50px;}

    .burger {
        width:26px;
        height:20px;
        /* background: burlywood; */
        position: absolute;
        left: 12px;
        top:50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .burger div {
        width:100%;
        height:3px;
        border-radius: 2.5px 0 2.5px 0;
        background: #aaa;
        position: absolute;
        left:0;
        cursor: pointer;
    }
    .burger div:nth-child(2) {
        margin-top: 8.5px;
    }

    .burger div:nth-child(3) {
        bottom:0;
    }
    .hd_big_hide{display: block;}
    .hd_sm_hide{display: none;}

    .header_sm {
        width:100%;
        height: 60px;
        margin: 0 auto;
        background: #fff;
        position: fixed;
        top:0;
        left:0;
        z-index: 99999;
        transition: height 0.3s;
        border-bottom: 1px solid #ddd;
    }

    .logo {
        width:80px;
        height:100%;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

    .logo img {
        width: 100%;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
  
    .sm_hd_pan {
        position: absolute;
        top:90px;
        left:-100%;
        width:100%;
        height:100vh;
        background: #fff;
        z-index: 99999;
        padding: 30px;
        box-sizing: border-box;
    }
    .hd_top {
        height:100%;
        margin: 0 auto;
        position: relative;
        transition: height 0.3s;
    }

    .hd_top_L {
        width: 40vw;
        height:100%; float: left;
        position: relative;
    }

    .sm_menu_login {
        width:100%; 
        overflow: hidden;
        line-height: 38px;
        text-align: center;
        position: static;
        top:0;
        left:0;
        transform: translateY(0);

        margin-top: 20px;
        font-size: 15px;
        color:#222;
        padding: 5px 0;
        box-sizing: border-box;
        padding-left: 0;
    }
    .menu_lg_li {
        display: block;
        margin: 0 10px;
        padding: 0;
    }

    .menu_lg_li a {
        display: block;
        width:100%;
        height: 100%;
    }

    .btn_search img {margin-top: 0;}

    .gnb_top {
        margin-top: 30px;
        overflow: hidden;
        border-top: 2px solid #222;
        border-bottom: 2px solid #222;
    }
    .gnb {
        margin: 0 auto;
        text-align: center;
        font-size: 0;
        color:#222;
        background: transparent;
        border-bottom: 0;
    }

    .gnb_li {
        display: block;
        height:100%;
        line-height: 1.3;
        font-size: 14px;
        padding: 15px 2px;
        box-sizing: border-box;
        cursor: pointer;
        margin: 0;
    }
    .gnb_li > a {
        display: block;
        width:100%;
        height:100%;
    }

    .gnb_li:hover {
        color:#fff;
        background: #222;
        border: 0;
        font-weight  : 900;
    }
    .gnb {
        padding: 10px;
        box-sizing: border-box;
        width:calc(100% / 2);
    }
    .gnb_L {
        float: left;
    }
    .gnb_R {
        float: right;
    }

    .menu_btn {
        width:100%;
        overflow: hidden;
        color: #222;
    }

    .menu_lg_btn {
        width: calc((100% - 10px) / 2);
        height: 40px;
        float: left;
        color: #fff;
        text-align: center;
        line-height: 40px;
    }
    .menu_lg_btn:first-child {
        background: #222;
        margin-right: 10px;
    }
    .menu_lg_btn:last-child {
        background: #444;
    }

    .menu_lg_btn:hover {
        background: #fff;
        color:#222;
        border: 1px solid #222;
        box-sizing: border-box;
        cursor: pointer;
    }

    .footer {
        padding: 50px 0;
        text-align: center;
    }

    .ft_border {
        padding: 18px 0;
        box-sizing: border-box;
        border-left: 0;
        border-top: 4px dotted #ddd;
    }

    .ft_aside {
        width:100%;
        overflow: auto;
        position: static;
    }
    .ft_top {
        width:100%;
        height:100%;
        float: none;
    }
    .ft_L {
        width:100%;
        min-width: auto;
        float: none;
    }

    .ft_C {
        position: static;
    }

    .ft_R_out {
        width: 100%;
        height: auto;
        float: none;
        position: static;
    }

    .ft_C {
        width:100%;
        position: static;
        top:0;
        left:0;
    }
    .ft_R {
        position: static;
        bottom:0;
        right:0;
    }
    .ft_bot {
        position: static;
        width:100%;
        height: auto;
        padding: 0;
        margin-top: 25px;
    }

    .ft_last {
        width: 100%;
        height:auto;
        position: static;
        top:0;
        right:0;
    }

    .ft_bot .ft_border {
        border-bottom: 4px dotted #ddd;
    }
}

@media screen and (max-width:450px) {
    .footer {
        font-size: 3vw;
    }
    .ft_title {
        font-size: 4vw;
    }
    .ft_cs_num {
        font-size: 7.5vw;
    }


    .search_box {
        min-width: auto;
        width:20vw;
        height:30px;
        line-height: 28px;
    }
    
    .ip_search {
        width:calc(80% - 10px);
        height:100%;
        border: 0;
        outline: none;
        position: absolute;
        left:0;
        padding-left:10px;
        box-sizing: border-box;
        font-size: 3vw;
    }
    
    .btn_search {
        display: block;
        width: 26%;
        height: 100%;
        float: right;
        background: none;
        border: 0;
        cursor: pointer;
        background: url(../img/search.png) no-repeat right center / contain;
    }

    .btn_search img {margin-top: 0;}
}

@media screen and (max-width: 400px) {
    .gnb_li, .menu_lg_li {
        font-size: 3vw;
    }
    .menu_lg_btn {
        font-size: 4vw;
    }

}


@media screen and (max-width: 380px) {
    .gnb_li, .menu_lg_li {
        font-size: 3vw;
    }
    .menu_lg_btn {
        font-size: 4vw;
    }
}

@media screen and (max-width: 300px) {
    .logo {left: 42%;}
}