.container {
    max-width: 1230px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    position: relative
}

.m_nav {
    display: none
}

.m_nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    background: #202020;
    visibility: hidden;
    z-index: 1;
    overflow-y: auto;
    transition: all .4s ease
}

.m_nav.on {
    visibility: visible
}

#body_contents {
    margin-top: -0.5pt
}

#wrap {}

.m_nav.on ~ #wrap {
    -webkit-transform: translateX(-80%);
    transform: translateX(-80%);
    box-shadow: 0 0 10px #000
}

header * {
    /*transition:all .4s ease*/
}

header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 99;
    transition: all .4s ease;
    background: #fff;
}

header .container {
    max-width: 1230px;
    height: 100%
}

header h1 {
    display: table
}

header h1 a {
    display: table-cell;
    vertical-align: middle
}

header h1 a span {
    display: block;
    margin: 7px 0
}

header h1 .logo img {}

header h1 .txt img {
    width: 100px
}

header .gnb {
    margin: 0 auto;
    text-align: center
}

header .gnb .inner {
    height: 100px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}

header .gnb:after {
    display: block;
    content: '';
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    border-bottom: 1px solid #ddd;
    transition: all .4s ease;
    opacity: 0
}

header .gnb a {
    display: block
}

header .gnb .dep1 > li {
    display: inline-block;
    vertical-align: top;
    width: 180px
}

header .gnb .dep1 > li:first-child {
    margin-left: 300px;
}

header .gnb .dep1 > li > a {
    font-size: 17px;
    color: #323232;
    line-height: 100px;
    font-weight: 600;
}

header .gnb .dep2 {
    padding: 30px 0 60px
}

header .gnb .dep2 > li > a {
    padding: 10px;
    font-size: 15px;
    color: #969696
}

header .gnb .dep2 > li > a:hover {
    font-weight: bold;
    color: #323232
}

header.on {
    border-bottom: 1px solid #ddd;
}

header.on .gnb .inner {
    height: 370px;
    overflow: visible
}

header.on .gnb:after {
    opacity: 1
}

header.on .gnb .dep1 > li > a {
    color: #323232;
}

.mini header {
    position: fixed;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    height: 80px;
}

.mini header h1 {
    background-color: transparent;
    width: 130px;
    height: 80px
}

.mini header h1 .logo img {
    width: 34px
}

.mini header h1 .txt {
    display: none
}

.mini header .gnb .inner {
    height: 80px;
    background: #000
}

.mini header .gnb:after {
    top: 80px
}

.mini header .gnb .dep1 > li > a {
    line-height: 80px;
    color: #323232;
}

.mini header.on .gnb .inner {
    height: 500px
}

.mini header .util_nav {
    top: 20px
}

.util_nav {
    position: absolute;
    right: 15px;
    top: 30px
}

.util_nav > div {
    display: inline-block;
    vertical-align: middle
}

.util_nav .lang li {
    display: inline-block;
    float: left;
}

.util_nav .lang li a {
    color: #aaaaaa;
    border: 1px solid #aaaaaa;
}

.util_nav .lang li a {
    padding: 8px 35px;
}

.lang li.active a {
    font-weight: 600;
    color: #fff;
}

.util_nav .lang li.active a {
    cursor: default;
}

.util_nav .h_sns li {
    display: inline-block;
    margin: 0 10px
}

.util_nav .h_sns li a span {
    font-size: 0
}

.util_nav .h_sns li a {
    color: #fff;
    font-size: 20px
}

.icon-instagram:hover:before {
    font-weight: bold;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.icon-youtube:hover:before {
    color: #de1010
}

.util_nav .h_util {
    margin-right: 30px
}

.util_nav .h_util li a {
    font-weight: bold;
    font-style: italic;
    color: #fff
}

.util_nav .h_util li a:before {
    font-style: normal;
    margin-right: 5px;
    font-weight: normal
}

.main_wrap header {
    position: fixed
}

.mini header .wpml-ls-flag {
    width: 300px;
    height: auto;
}

.mini header #main-nav .navbar {
    height: 80px;
}

.mini header #main-nav .navbar-nav > li > a {
    padding: 30px 45px;
}

.mini header:before {
    top: 80px;
}

.mini header nav .oneDep:hover:before {
    top: 78px;
}

.mini header nav .oneDep > a {
    padding: 22px 55px;
}

.mini header .topUtils .utils > a {
    padding: 25px 10px;
}

.main header {
    position: fixed;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.00);
}

.mini div.toggle-sidebar {
    top: 20px;
}

header .topBtnWrap {
    z-index: 100;
}

header .topBtnWrap > button {
    float: left;
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
    line-height: 1;
    width: 30px;
    background: rgba(255, 255, 255, 0.00);
    border: 0;
    top: 3px;
    position: relative;
}

header .topBtnWrap .allMenu [class*="bar"] {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #343434;
    transition: all .2s ease;
}

.main header .topBtnWrap .allMenu [class*="bar"] {
    background-color: #fff;
}

header .topBtnWrap .allMenu .bar2 {
    margin: 8px 0 8px 4px;
}

header .topBtnWrap .allMenu:hover .bar1,
header .topBtnWrap .allMenu:hover .bar3 {
    margin-left: 4px;
}

header .topBtnWrap .allMenu:hover .bar2 {
    margin-left: 0px;
}

header .topBtnWrap .schBtn {
    font-size: 24px;
    width: auto;
    height: auto;
}

@media screen and (max-width:1366px) {
    #fp-nav.right {
        right: 40px
    }
}

@media screen and (max-width:1280px) {
    #fp-nav.right {
        right: 20px
    }

    header .gnb .dep1 > li {
        width: 140px
    }

    header .gnb .dep1 > li > a {
        font-size: 15px
    }

    header .gnb .dep2 > li > a {
        font-size: 12px
    }

    .lnb li a {
        font-size: 16px
    }

    footer {
        padding: 30px 0
    }

    footer .f_logo {
        width: 160px;
        margin-right: 40px
    }

    footer .f_info {
        margin-right: 120px
    }

    footer .f_sns {
        width: auto;
        right: 10px
    }

    .b_txt {
        font-size: 20px
    }

    .s_tit {
        font-size: 40px
    }

    .m_tit {
        font-size: 50px
    }

    .b_tit {
        font-size: 54px
    }
}

@media screen and (max-width:1240px) {
    .navbar-right {
        width: 70%;
    }
}


@media screen and (max-width:1024px) {
    #mobile-indicator {
        display: block
    }

    .m_nav {
        display: block
    }

    .all_nav {
        display: block
    }

    #body_contents {
        overflow: hidden
    }

    #body_contents.fixed {
        position: fixed;
        left: 0;
        right: 0;
        top: 0
    }

    header h1 .logo img {
        width: 30px
    }

    header h1 .txt img {
        width: 60px
    }

    header .util_nav .h_sns li {
        margin: 0 5px
    }

    footer .f_logo {
        float: none;
        margin: 0 0 10px
    }

    .mini header h1 .logo img {
        width: 26px
    }

    .mini header .util_nav .lang {}

    .gnb {
        display: none
    }

    .util_nav .lang {}

    .util_nav .h_util {
        margin-right: 15px
    }

    .s_txt {
        font-size: 16px
    }

    .m_txt {
        font-size: 17px
    }

    .b_txt {
        font-size: 18px
    }

    .l_txt {
        font-size: 28px
    }

    .s_tit {
        font-size: 36px
    }

    .m_tit {
        font-size: 46px
    }

    .b_tit {
        font-size: 50px
    }

    .main_wrap .section:not(footer) {
        padding: 90px 0
    }

    .main_wrap.mini header {
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        background-color: black
    }

    .main_wrap header .util_nav .h_util li a {
        font-size: 0
    }

    .main_wrap header .util_nav .h_util li a:before {
        font-size: 18px
    }

    .navbar-right {
        width: 75%;
    }
}

@media screen and (max-width:980px) {
    .util_nav {
        top: 25px;
        display: none;
    }

    .util_nav .lang li {
        padding: 3px 15px;
        font-size: 11px;
    }

    header .topUtils .utils > a {
        padding: 31px 10px;
    }

    .main header {
        background: #fff;
    }
}

@media screen and (max-width:480px) {
    header h1 {
        width: 230px;
        margin-left: 25%;
    }
}

@media screen and (max-width:380px) {
    header h1 {
        width: 200px;
        margin-left: 25%;
    }
}

@media screen and (max-width:320px) {
    header h1 {
        width: 180px;
        margin-left: 25%;
    }
}


header .nav_btn .menu-icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    bottom: auto;
    width: 24px;
    height: 2px;
    background-color: #4b4e53;
    margin-top: -2px
}

header .nav_btn .menu-icon::before,
header .nav_btn .menu-icon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0
}

header .nav_btn .menu-icon::before {
    bottom: 7px
}

header .nav_btn .menu-icon::after {
    top: 7px
}

header .nav_btn.is-clicked .menu-icon {
    background-color: rgba(255, 255, 255, 0)
}

header .nav_btn .menu-icon,
header .nav_btn .cd-menu-icon::before,
header .nav_btn .cd-menu-icon::after {
    transition: all .3s cubic-bezier(0.3, 0.1, 0.58, 1)
}

header .nav_btn.is-clicked .menu-icon::before,
header .nav_btn.is-clicked .menu-icon::after {
    background-color: #4b4e53;
    transition: all .3s cubic-bezier(0.3, 0.1, 0.58, 1)
}

header .nav_btn.is-clicked .menu-icon::before {
    bottom: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

header .nav_btn.is-clicked .menu-icon::after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}