@charset "utf-8";

html {
    font-size: 62.5%;
}
@media all and (max-width: 765px) {
    html {
        font-size: 51%;
    }
}

/* 공통 */
.-mos {
    transition: all 0.2s ease;
}
.clearfix:after {
    clear: both;
    display: block;
    content: '';
}

body.dim {
    overflow: hidden;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
time,
figure,
article,
nav,
header,
footer,
hgroup,
video,
audio,
aside,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
button {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    vertical-align: baseline;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-break: keep-all;
}
ol,
ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption,
th,
td {
    text-align: left;
    font-weight: normal;
}
figure,
article,
header,
footer,
nav,
hgroup,
video,
audio,
aside,
main {
    display: block;
}
img {
    max-width: 100%;
    vertical-align: top;
}

/* mobile */
/*input, textarea{ -webkit-appearance: none; -webkit-border-radius:0px; border-radius:0px;}*/

/*reset mobile default style*/
body,
textarea:focus,
input:focus,
a:focus {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
::-moz-selection {
    background: #71d2ff;
    background: rgba(113, 210, 255, 0.35);
    color: #fff;
}
::selection {
    background: #71d2ff;
    background: rgba(113, 210, 255, 0.35);
    color: #fff;
}
::-moz-selection {
    background: #71d2ff;
    background: rgba(113, 210, 255, 0.35);
    color: #fff;
}

html,
body {
    /*height: 100%;*/
    width: 100%;
}
body {
    font-size: 16px;
    font-family: 'Noto Sans KR';
}
a {
    font-size: 16px;
    color: #333;
    text-decoration: none;
}
/*[lang="en"] {font-family: 'Titillium', 'notokr', sans-serif;}*/

/* INPUT */
input[type='text'],
input[type='tel'],
input[type='email'],
input[type='password'],
input[type='url'],
textarea {
    -webkit-appearance: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    font-family: sans-serif;
}

input[type='submit'],
input[type='button'],
button {
    font-family: 'Noto Sans KR';
}

input[type='radio'] {
    border-radius: 100%;
}

/* PLACEHOLDER */
::-webkit-input-placeholder {
    font-family: 'Noto Sans KR';
    font-size: 16px;
    color: #666;
}
::-moz-placeholder {
    font-family: 'Noto Sans KR';
    font-size: 16px;
    color: #666;
}
:-ms-input-placeholder {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    color: #666;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}
.sr_only {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

input,
select,
textarea,
button {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border: 1px solid #dfdfdf;
    border-radius: 0;
    padding: 0 39px 0 19px;
    height: 35px;
    line-height: 34px;
    padding-bottom: 2px;
    background: #fff url() no-repeat 100% 0;
    font-size: 13px;
}
select::-ms-expand {
    display: none;
}

/*select.selfSelect{background-color: #fbfbfb}*/
input[type='text'],
input[type='tel'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='email'],
textarea {
    border-radius: 0;
    -webkit-box-sizing: border-box;
    height: 35px;
    border: 1px solid #dfdfdf;
    padding: 0 19px;
    font-size: 13px;
    -webkit-appearance: none;
}
textarea.textareaType01 {
    padding: 10px 19px;
    height: 253px;
    width: 100%;
}
.skip,
.blind,
legend {
    position: absolute;
    top: -5000em;
    width: 0;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}
/* WRAP */
.full_wrap {
    width: 100%;
    padding-left: 90px;
    padding-right: 90px;
}
.wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

.mBr br {
    display: none;
}
.txtalcen {
    text-align: center;
}
@media all and (max-width: 1118px) {
    .brNone br {
        display: none !important;
    }
    .mBr br {
        display: block !important;
    }
}

br.mobile-on {
    display: none;
}
@media screen and (max-width: 480px) {
    br.mobile-on {
        display: block !important;
    }
}

.vm {
    vertical-align: middle !important;
}
.mt0 {
    margin-top: 0 !important;
}
.mt20 {
    margin-top: 20px !important;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* **************************************** *
 * HEADER
 * **************************************** */

#header {
    z-index: 500;
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0px !important;
    left: 0;
    -webkit-transition: height 300ms, top 290ms, box-shadow 400ms;
    transition: height 300ms, top 290ms, box-shadow 400ms;
    transition: all 300ms;
}
#header.scroll {
    background: #fff;
}
#header.scroll #menu > li > a {
    color: #000;
}
#header.open {
    background: #fff;
}
#header.open #menu > li > a {
    color: #000;
}
.lang {
    position: absolute;
    right: 50px;
    top: 30px;
}
.lang > a {
    display: block;
    color: #fff;
    border-radius: 100px;
    padding: 3px 20px;
    border: solid 1px #fff;
    font-size: 14px;
}

#header.scroll .lang {
}
#header.scroll .lang > a {
    color: #000;
    border: solid 1px #000;
}
#header.open .lang {
}
#header.open .lang > a {
    color: #000;
    border: solid 1px #000;
}
#header.scroll .lang > a:hover {
    color: #fff;
    background: #000;
    border: solid 1px #000;
}
#header.open .lang > a:hover {
    color: #fff;
    background: #000;
    border: solid 1px #000;
}

.header_wrap {
    height: 100%;
    margin: 0 auto;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
.header_wrap:before {
    content: '';
    display: block;
    position: absolute;
    left: 90px;
    right: 90px;
    bottom: 0;
    top: 0;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}
.header_inner {
    width: 100%;
    height: 100%;
    position: relative;
}

/* LOGO */
#logo {
    position: relative;
    z-index: 551;
    max-width: 1440px;
    margin: 0 auto;
    -webkit-transition: top 300ms;
    transition: top 300ms;
}
#logo a {
    display: block;
    width: 160px;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 20px;
    z-index: 551;
    background: url('../img/logo_white.png') no-repeat 0 0;
    background-size: contain;
    transition: all 300ms;
}
#header.scroll #logo a {
    background: url('../img/color-logo.png') no-repeat;
    background-size: contain;
}
#header.open #logo a {
    background: url('../img/color-logo.png') center no-repeat;
    background-size: contain;
}

/* MENU */
.menu_container {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: relative;
    font-size: 0;
    line-height: 1;
    text-align: center;
    z-index: 550;
    padding: 0 10px; /*box-shadow: 0 1px 3px rgba(0, 0, 0, .12);*/
}
#header.scroll .menu_container {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12);
}
#header.open .menu_container {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12);
}
.menu_container_bg {
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff url('') no-repeat 95.8% bottom;
    opacity: 0;
}
#menu {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 300px 0px 300px;
    max-width: 1440px;
    position: relative;
}
#menu:after {
    content: '';
    display: table;
    clear: both;
}
#menu a {
    display: block;
    line-height: 1.7;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/* 1depth */
#menu > li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 18%;
}
#menu > li > a {
    padding: 30px 0px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
#menu > li:hover > a,
#menu > li.current-page-ancestor > a {
    color: #fff;
    font-weight: 500; /*background:#046AC1;*/
}
#menu > li.on > a {
    color: #fff;
    font-weight: 500; /*background:#046AC1;*/
}
/* 2depth */
#menu > li > ul {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    border-right: 1px solid rgba(237, 239, 241, 0.05);
}
#menu > li:last-child ul {
    border-right: 0;
}
#menu > li > ul > li {
    display: block;
}
#menu > li > ul > li.on > a {
    color: #2e2e88;
}
#menu > li > ul > li > a {
    padding: 6.5px 10px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #888;
}
#menu > li > ul > li > a span {
    text-align: center;
}
#menu > li > ul > li:first-child > a {
    padding-top: 24.5px;
}
#menu > li > ul > li:last-child > a {
    padding-bottom: 36.5px;
}
#menu > li > ul > li:hover > a,
#menu > li > ul > li.current-menu-item > a,
#menu > li > ul > li.current-page-ancestor > a {
    color: #2e2e88;
}

.global_nav {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}
.global_nav .nav_item {
    display: inline-block;
    vertical-align: middle;
}
.global_nav .nav_item li {
    float: left;
    margin-right: 26px;
}
.global_nav .nav_item li a {
    font-size: 13px;
    color: #979797;
}
.global_nav .nav_item li.active a {
    color: #000000;
}

button.btnAllmenu {
    display: none;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    overflow: hidden;
    text-indent: -9999px;
    background: url('') no-repeat 50% 50%;
    cursor: pointer;
    z-index: 11000;
}
button.btnAllmenu:after {
    content: '';
    display: block;
    width: 32px;
    height: 22px;
    background: url('') no-repeat 50% 50%;
    margin: 0 auto;
}
.btnAllmenu > span {
    display: block;
    position: absolute;
    width: 30px;
    height: 1px;
    margin-left: -0px;
    background: #fff;
    transition: all 0.3s ease-in-out;
    transform: rotate(0deg);
    opacity: 1;
}
.btnAllmenu > .bar1 {
    top: 8px;
}
.btnAllmenu > .bar2 {
    top: 16px;
}
.btnAllmenu > .bar3 {
    top: 24px;
}
.btnAllmenu.open > span {
    background: #000;
}
.btnAllmenu.open > .bar1 {
    transform: rotate(45deg);
    top: 16px;
}
.btnAllmenu.open > .bar2 {
    opacity: 0;
}
.btnAllmenu.open > .bar3 {
    transform: rotate(135deg);
    top: 16px;
}
#header.open .btnAllmenu > span {
    display: block;
    position: absolute;
    width: 30px;
    height: 1px;
    margin-left: -0px;
    background: #000;
}

.popup_allmenu a.btnClose {
    display: block;
    position: absolute;
    overflow: hidden;
    right: 20px;
    top: 20px;
    z-index: 20;
    width: 30px;
    height: 30px;
}
.btnClose > span {
    display: block;
    position: absolute;
    width: 30px;
    height: 1px;
    margin-left: -0px;
    background: #000;
    transition: all 0.3s ease-in-out;
    transform: rotate(0deg);
    opacity: 1;
}
.btnClose > .bar1 {
    top: 12px;
    transform: rotate(135deg);
}
.btnClose > .bar2 {
    opacity: 0;
    left: -30px;
}
.btnClose > .bar3 {
    top: 12px;
    transform: rotate(-135deg);
}

#nav {
}
#nav > li {
    position: relative;
    display: inline-block;
    padding: 0px;
    vertical-align: top;
}
#nav > li > a {
    position: relative;
    display: block;
    padding-bottom: 10px;
    padding: 0px 10px;
    color: #222;
    font-size: 20px;
    line-height: 20px;
    z-index: 20;
    background: #fff;
}
#nav > li.icon > a {
}
#nav > li.sns {
    padding: 0;
}
#nav > li.sns > a {
    margin-left: 0;
}
#nav > li.icon > a:hover,
#nav > li.icon.on > a {
    color: #333;
    background: #fff;
}
#nav > li.icon.on > a {
}
#nav > li.icon > a:after {
    display: none;
}
#nav > li.lang > ul {
    display: none;
    position: absolute;
    top: 25px;
    left: -10px;
    width: 70px;
    padding-top: 10px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
#nav > li.lang > ul > li {
}
#nav > li.lang > ul > li:first-child {
    border-top: none;
}
#nav > li.lang > ul > li a {
    display: block;
    width: 100%;
    padding: 0px;
    font-size: 20px;
    color: #888;
}
#nav > li.lang > ul > li a:hover {
    color: #000;
}
#nav > li.lang > ul > li a img {
    display: block;
    width: 100%;
}
#nav > li.lang > ul.open {
    display: block;
    opacity: 0;
    filter: alpha(opacity= '0');
}

.dim_bg_mobile {
    position: fixed;
    left: 0;
    top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
    width: 100%;
    height: 100%;
    z-index: 20;
    display: none;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}
.lyDim {
    position: fixed;
    left: 0%;
    top: 0;
    width: 80%;
    height: 100%;
    background-color: #000;
    z-index: 10000;
    cursor: pointer;
    display: none;
    opacity: 0.6;
}
.mobileGnbWrap {
    top: 0 !important;
    background: #fff;
    position: fixed;
    right: -100%;
    top: 0;
    width: 80%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1129;
    overflow-y: auto;
    padding-top: 0;
    padding-top: 100px;
    transition: all 0.5s ease;
}
.mobileGnbWrap .btnMobleGnbClose {
    position: absolute;
    left: 10px;
    top: 20px;
    display: none;
}
.mobileGnbWrap .btnMobleGnbClose:after {
    content: '';
    display: block;
    width: 33px;
    height: 33px;
    background: url() no-repeat 0 0;
    background-size: 33px 33px;
}
.mobileGnbWrap .logo_mobile {
    position: absolute;
    left: 20px;
    top: 20px;
}
.mobileGnbWrap .logo_mobile > a img {
    width: 100px;
}
.mobileGnbWrap .allmenu {
    padding: 0px 20px;
}
.mobileGnbWrap .allmenu > li {
}
.mobileGnbWrap .allmenu > li {
    text-align: left;
}
.mobileGnbWrap .allmenu > li:first-child {
    border-top: none;
}
.mobileGnbWrap .allmenu > li > a {
    position: relative;
    display: block;
    font-size: 17px;
    font-weight: bold;
    color: #333333;
    padding: 15px 0px 15px 0px;
    background: #fff;
    border-bottom: solid 1px #ddd;
}
.mobileGnbWrap .allmenu > li > a:before {
    position: absolute;
    right: 8px;
    top: 17px;
    font-family: 'FontAwesome';
    content: '\f054';
    color: #999;
    z-index: 9;
    font-size: 16px;
    transform: rotate(90deg);
}
.mobileGnbWrap .allmenu > li.on > a:before {
    position: absolute;
    right: 8px;
    top: 17px;
    font-family: 'FontAwesome';
    content: '\f054';
    color: #999;
    z-index: 9;
    font-size: 16px;
    transform: rotate(90deg);
}
.mobileGnbWrap .allmenu > li.open > a > span {
    position: relative;
}
.mobileGnbWrap .allmenu > li.open > a > span:before {
    position: absolute;
    content: '';
    background: rgba(46, 46, 136, 0.2);
    width: 100%;
    height: 10px;
    bottom: 0px;
    left: 0px;
}
.mobileGnbWrap .allmenu > li.menu7 {
    display: none;
}
.mobileGnbWrap .sub-menu {
    display: none; /*transition:all .5s ease;*/
}
.mobileGnbWrap li.open .sub-menu {
    display: block;
}
.mobileGnbWrap .sub-menu {
    /*background-color:#f7f7f7; */
}
.mobileGnbWrap .sub-menu > li:first-child {
    margin-top: 0;
    padding-top: 10px;
}
.mobileGnbWrap .sub-menu > li:last-child {
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.mobileGnbWrap .sub-menu > li > a {
    display: block;
    font-size: 15px;
    color: #444;
    padding: 10px 0;
    padding-left: 15px;
    position: relative;
}
.mobileGnbWrap .sub-menu > li.on > a {
    font-weight: bold;
    color: #000;
}
.mobileGnbWrap .sub-menu > li.on > a:before {
    content: '';
    position: absolute;
    left: 6px;
    top: 20px;
    width: 5px;
    height: 2px;
    background: #ed1b23;
}
.mobileGnbWrap .lang_mobile {
    position: absolute;
    left: 20px;
    bottom: 20px;
}
.mobileGnbWrap .lang_mobile > a {
    display: block;
    width: 100%;
    font-size: 14px;
    margin-top: 10px;
}
.mobileGnbWrap .lang_mobile > a > img {
    width: 20px;
    margin-right: 5px;
}

.mobileGnbWrap .dep3 {
    margin-top: 1px;
    padding-bottom: 13px;
}
.mobileGnbWrap .dep3 > li {
    margin-top: 4px;
}
.mobileGnbWrap .dep3 > li > a {
    display: inline-block;
    font-size: 13px;
    color: #444;
    position: relative;
    padding-left: 8px;
    letter-spacing: 0;
}
.mobileGnbWrap .dep3 > li > a:after {
    content: '';
    display: block;
    height: 1px;
    width: 4px;
    background-color: #828282;
    position: absolute;
    left: 0;
    top: 10px;
}
.mobileGnbWrap .dep3 > li.on > a {
    font-weight: bold;
    color: #333;
}

.mobileGnbWrap .langSelect {
    position: absolute;
    bottom: 40px;
    left: 20px;
}
.mobileGnbWrap .langSelect li {
    display: inline-block;
    margin-right: 10px;
}

.location_box {
    position: relative;
    width: 100%;
    margin-top: 0px;
    z-index: 21;
}
.locationWrap {
    width: 100%;
    position: absolute;
    top: -70px;
}
.locationWrap.fixed {
    /* position:fixed; left:0; top:90px; width:100%;*/
}
.locationArea {
    width: 100%;
    background: rgba(34, 34, 34, 0.3);
    backdrop-filter: blur(20px);
}
.locationArea .location {
    max-width: 1220px;
    margin: 0 auto;
    display: table;
    table-layout: fixed;
    width: 100%;
    z-index: 21;
}
.locationArea .location > li {
    display: inline-block;
    width: 1220px;
    vertical-align: middle;
    position: relative;
}
.locationArea .location > li:first-child {
    margin-left: 0;
    border-left: none;
}
.locationArea .location > li:last-child {
    display: none;
}
.locationArea .location > li.locationLink > a {
    display: none !important;
}

.locationArea .location > li.locationLink .selectMenu {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    border: 0px solid #e9e9e9;
    border-top: 0;
    background: none;
    display: block;
    font-size: 0px;
    text-align: center;
    height: 70px;
}
.locationArea .location > li.locationLink .selectMenu.open {
    display: block;
}
.locationArea .location > li.locationLink .selectMenu li {
    line-height: 20px;
    border-left: 1px solid #fff;
    width: 220px;
    display: inline-block;
    text-align: center;
    font-weight: 500;
}
.locationArea.sub2 .location > li.locationLink .selectMenu li {
    width: 244px;
}
.locationArea .location > li.locationLink .selectMenu li:first-child {
    border-left: none;
}
.locationArea .location > li.locationLink .selectMenu li a {
    display: block;
    padding: 25px 0px;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
}
.locationArea .location > li.locationLink .selectMenu li a.on {
    background: #fff;
    color: #000;
}
.locationArea .location > li.locationLink .selectMenu li.on1 {
    background: #fff;
}

.locationArea .ringtBtn {
    float: right;
}
.locationArea .ringtBtn a {
    display: block;
    float: left;
    margin-left: 15px;
}

@media all and (max-width: 777px) {
    /*#wrap{padding-top:65px;}*/
    .mainBody #wrap {
        padding-top: 0;
    }
    .locationWrap {
        margin-top: 0;
        height: 35px;
        position: fixed;
        width: 100%;
        top: 65px !important;
    }
    .locationArea .location > li.home {
        width: 32px;
    }
    .locationArea .location > li.home > a {
        background-size: 14px auto;
    }
    .locationArea .location > li.null {
        display: none;
    }
    .locationArea .location {
        height: 35px;
    }
    .locationArea .location > li.locationLink > a {
        line-height: 35px;
        font-size: 13px;
        background: url('../img/loca_arr_off_m.png') no-repeat 94% center !important;
        background-size: 6px 10px !important;
        padding-left: 10px;
        padding-right: 14px;
        letter-spacing: -1px;
    }
    .locationArea .location > li.locationLink .selectMenu {
        top: 35px;
    }
    .locationArea .location > li.locationLink .selectMenu li a {
        padding: 10px 10px;
        font-size: 13px;
    }
}

/* lang */

.lang_container {
    display: block;
    position: absolute;
    top: 35.5px;
    right: 100px;
    z-index: 551;
    -webkit-transition: top 300ms;
    transition: top 300ms;
}

.lang_menu {
    display: block;
}

.lang_menu li {
    float: left;
}

.lang_menu li a {
    display: block;
    padding: 0 10.5px;
    position: relative;
    font-size: 12px;
    font-weight: 600;
    color: #222;
}

.lang_menu li a:after {
    content: '';
    display: block;
    width: 1px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
    background: #c7c7c7;
}

.lang_menu li:first-child a {
    padding-left: 0;
}

.lang_menu li:last-child a {
    padding-right: 0;
}

.lang_menu li:last-child a:after {
    display: none;
}

.lang_menu li.active a {
    color: #1c9ad6;
}

/* search */

.search_container {
    position: absolute;
    top: 38px;
    right: 50px;
    z-index: 551;
    -webkit-transition: top 300ms;
    transition: top 300ms;
}

.search_btn {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
}

.search_btn:after {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'nanumsquarer1', 'Montserrat';
    content: '\e932';
    font-size: 20px;
    line-height: 1;
    font-weight: normal;
    text-align: center;
    color: #000;
    -webkit-transition: color 300ms;
    transition: color 300ms;
}

.search_btn:hover:after {
    color: #1c9ad6;
}

/* mobile */

#small_menu_btn,
#small_menu_close,
#small_menu_overlay,
#small_menu_container {
    display: none;
}

/* minimize */

.minimize#header {
    /*height: 75px;top: 0 !important;box-shadow: 0 1px 3px rgba(0, 0, 0, .12);*/
}

body.mo #header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.minimize .header_wrap:before {
    left: 0;
    right: 0;
}

body.mo .header_wrap:before {
    left: 0;
    right: 0;
}

/*.minimize #logo a{top: 14px;}

.minimize #menu > li > a {padding: 22.5px 0;}*/

.minimize .menu_container_bg {
    top: 75px;
}

.minimize .lang_container {
    top: 28px;
}

.minimize .search_container {
    top: 27.5px;
}

/* single active */

.single-notice #menu > li.menu-item-promote > a,
.single-career #menu > li.menu-item-career > a,
.single-inquiry #menu > li.menu-item-career > a {
    color: #1c9ad6;
}

.single-notice #menu > li > ul > li.menu-item-news > a,
.single-career #menu > li > ul > li.menu-item-employment > a,
.single-inquiry #menu > li > ul > li.menu-item-career-inquiry > a {
    color: #fff;
}

/* 다국어 예외처리 */
html:not([lang='ko']) .search_container {
    display: none;
}
html:not([lang='ko']) .lang_container {
    right: 50px;
}

/* scroll hide menu error debugging */
body.search_open #header,
body.open_menu #header {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

.go_top {
    display: block;
    width: 59px;
    height: 59px;
    position: absolute;
    top: -22px;
    right: 90px;
    cursor: pointer;
    background: #222;
    -webkit-transition: opacity 0.3s, background 0.3s;
    transition: opacity 0.3s, background 0.3s;
    z-index: 999;
}

.go_top:after {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-family: '';
    content: '\e900';
    font-size: 14px;
    line-height: 59px;
    font-weight: normal;
    text-align: center;
    color: #fff;
    -webkit-transition: color 300ms;
    transition: color 300ms;
}

.go_top:hover {
    background: #1c9ad6;
}

.go_top.js_go_top_fix {
    position: fixed;
    top: inherit;
    bottom: 15px;
}

.go_top.js_go_top_hide {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
}

.scroll_down {
    display: none;
    width: 76px;
    height: 76px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -38px;
    z-index: 120;
    -webkit-transition: background 300ms;
    transition: background 300ms;
}
.scroll_down > svg {
    width: 76px;
    height: 76px;
    position: absolute;
    top: 0;
    left: 0;
}
.scroll_down:after {
    display: block;
    content: '';
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -8px 0 0 -8px;
}
.scroll_down:hover {
    background: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}
.scroll_down span {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
}

#footer {
    position: relative;
    background: #f3f3f3;
    padding: 40px 0px 50px;
}
#footer .footerArea {
    max-width: 1440px;
    margin: 0px auto;
}
#footer .footerArea .footer-top {
    border-bottom: solid 2px #ccc;
    margin-bottom: 30px;
    display: inline-block;
    padding-bottom: 30px;
    width: 100%;
    position: relative;
}
#footer .footerArea .footer-top .sns {
    margin-left: 80px;
    position: relative;
    top: 10px;
}
#footer .footerArea .footer-top .sns a {
    color: #888;
}
#footer .footerArea .footer-top .youtube {
    position: absolute;
    right: 0px;
    top: 10px;
}
#footer .footerArea .footer-top .insta {
    position: absolute;
    right: 50px;
    top: 10px;
}
#footer .footerArea .footer-top .blog {
    position: absolute;
    right: 100px;
    top: 10px;
}
#footer .footerArea .footer-top .flogo {
    margin-right: 20px;
}
#footer .footerArea .footer-bottom {
    position: relative;
}
#footer .footerArea .footer-bottom address {
    width: 100%;
    max-width: 1400px;
    font-size: 14px;
    color: #888;
    display: inline-block;
    line-height: 24px;
    margin-right: 47px;
}
#footer .footerArea .footer-bottom span {
    font-size: 14px;
    color: #888;
    display: inline-block;
    line-height: 24px;
    margin-bottom: 10px;
}
#footer .footerArea .footer-bottom span.fmr {
    margin-right: 47px;
}
#footer .footerArea .footer-bottom .f-info {
    width: 1400px;
    /* width: 740px; */
    text-align: justify;
    margin-left: 240px;
}
#footer .footerArea .footer-bottom .blogo {
    position: absolute;
    right: 0px;
    top: 0px;
}
#footer .footerArea p {
    margin-top: 80px;
    font-size: 12px;
    color: #888;
}
.address_highlight {
    font-weight: 800;
}

/* 스크롤 버튼 */
#scrollTop {
    position: fixed;
    display: none;
    bottom: 30px;
    right: 0px;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    z-index: 50;
}
#scrollTop .inner {
    margin: 0 auto;
    max-width: 1440px;
    height: 100%;
    padding: 0 0px;
    text-align: right;
}
#scrollTop a {
}

@media all and (min-width: 1921px) {
    .full_bg_section {
        background-size: 100% 100%;
    }
}

/* ***************** */

/* MAIN */

/* ***************** */

.main_section {
    padding: 105px 0 120px;
}
.main_section_title {
    display: block;
    padding-bottom: 66px;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.25;
    text-align: center;
    color: #222;
    font-weight: 400;
}
/* Video quick debug */

.main_section video {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
}

/* Load motion */

.main_visual_item_01 .main_visual_bg {
    -webkit-transform: translateZ(0) scale(1.1);
    transform: translateZ(0) scale(1.1);
    -webkit-transition: 1800ms;
    transition: 1800ms;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); /* easeOutQuart */
}

.first_bg_loaded .main_visual_item_01 .main_visual_bg {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
}

/* floating card motion */

.main_chemical_list li:nth-child(2) .jt_card img {
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
}

.main_chemical_list li:nth-child(3) .jt_card img {
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms;
}

/* move to sub.css*/

.about_history {
    position: relative;
    z-index: 2;
}

.about_banner:after {
    content: '';
    height: 100%;
    width: 100%;
    display: block;
    background: #fff;
    position: absolute;
    bottom: -100%;
}

.irregular_grid_img {
    z-index: 1;
}

/* about motion */

html:not(.mobile) .about_banner_pic {
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
    -webkit-transition: -webkit-transform 1.8s cubic-bezier(0.03, 0.44, 0.33, 1.18);
    transition: -webkit-transform 1.8s cubic-bezier(0.03, 0.44, 0.33, 1.18);
    transition: transform 1.8s cubic-bezier(0.03, 0.44, 0.33, 1.18);
    transition: transform 1.8s cubic-bezier(0.03, 0.44, 0.33, 1.18),
        -webkit-transform 1.8s cubic-bezier(0.03, 0.44, 0.33, 1.18);
}

html:not(.mobile) .about_banner_pic img {
    opacity: 0;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
}

html:not(.mobile) .about_banner_pic.jt_animate {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

html:not(.mobile) .about_banner_pic.jt_animate img {
    opacity: 1;
}

/* fix splittext plugin wrong break line */

.jt_animate_txt {
    white-space: nowrap;
}

html.ie .jt_animate_subtitle,
html.ie .jt_animate_title,
html.ie .jt_animate_txt {
    -webkit-transform: translateZ(0) rotate(0.1deg);
    transform: translateZ(0) rotate(0.1deg);
}

/* Main slideshow */

.main_visual {
    overflow: hidden;
}

#lighthouse_light {
    opacity: 0;
    background: url(../images/main/light.png) center center no-repeat;
    content: '';
    display: block;
    position: absolute;
    width: 92px;
    height: 91px;
    top: 50%;
    left: 50%;
    margin-top: -67px;
    margin-left: 13px;
    -webkit-transform: translateZ(0) rotate(0deg);
    transform: translateZ(0) rotate(0deg);
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}

.main_visual_item_01 .main_visual_bg canvas {
    opacity: 0;
}

.load .main_visual_item_01 .main_visual_bg canvas {
    opacity: 1;
}

.main_visual_item_01 .main_visual_bg {
    background-image: url(../images/main/main-visual-01-motion.jpg);
}

html:not(.mobile) .main_visual_item_01 .main_visual_bg.main_visual_lighthouse_fg {
    background-image: url(../images/main/main-visual-01-fg-motion.png);
}

#jt_light_blink {
    width: 100%;
    height: 100%;
    background: -webkit-radial-gradient(center ellipse, #000000 0%, #000000 100%);
    background: radial-gradient(ellipse at center, #000000 0%, #000000 100%);
    background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.main_visual_item_03 video {
    left: 50%;
    top: 50%;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

.main_visual_item_01 .wrap {
    visibility: hidden;
}

.main_visual_item {
    background: #222;
}

html.ie .main_visual_item h2,
html.ie .main_visual_item span {
    -webkit-transform: rotate(0.1deg);
    -ms-transform: rotate(0.1deg);
    transform: rotate(0.1deg);
}

/* Main business force motion */

.main_business b {
    display: block;
}

/* Main business force motion */

.main_chemical_img {
    position: relative;
    z-index: 2;
}

/* Main recruit */

.main_info_recruit:after {
    display: none;
}

.main_info_recruit {
    position: relative;
}

.main_info_recruit:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -60px;
    height: 60px;
    background: #fff;
    width: 100%;
}

/* ***************** */

/* SUB */

/* ***************** */

html.ie .article_title,
html.ie .article_desc,
html.ie .article_sub_title {
    -webkit-transform: rotate(0.05deg);
    -ms-transform: rotate(0.05deg);
    transform: rotate(0.05deg);
}

html:not(.mobile) .article_sub_title > div,
html:not(.mobile) .article_title > div,
html:not(.mobile) .article_desc > div {
    opacity: 0;
}

html:not(.mobile) .article_title:after {
    opacity: 0;
    -webkit-transition: 1200ms;
    transition: 1200ms;
}

html:not(.mobile) .article_title.completed:after {
    opacity: 1;
}

.article_header {
    overflow: hidden;
}
.article_header .full_wrap {
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
}

.article_header_bg {
    -webkit-transform: translateZ(0) scale(1.1) rotate(0.1deg);
    transform: translateZ(0) scale(1.1) rotate(0.1deg);
    -webkit-transition: 1800ms;
    transition: 1800ms;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); /* easeOutQuart */
}

.bg_loaded .article_header_bg {
    -webkit-transform: translateZ(0) scale(1) rotate(0deg);
    transform: translateZ(0) scale(1) rotate(0deg);
}

/* value */

.strategy_plan li img {
    opacity: 0;
}

.strategy_plan li {
    background: center top no-repeat;
    background-size: cover;
}

.strategy_plan li:nth-child(1) {
    background-image: url(../images/sub/value/strategy-01.jpg);
}

.strategy_plan li:nth-child(2) {
    background-image: url(../images/sub/value/strategy-02.jpg);
}

.strategy_plan li:nth-child(3) {
    background-image: url(../images/sub/value/strategy-03.jpg);
}

.strategy_plan li:nth-child(4) {
    background-image: url(../images/sub/value/strategy-04.jpg);
}

/* network */

.point_pulse {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background: #c4102f;
    background: rgba(196, 16, 47, 0.6);
    border: 1px solid #c4122e;
    border-radius: 100%;
}

/* environment */

.environment_banner:after {
    position: absolute;
    display: block;
    bottom: -250px;
    height: 250px;
    background: white;
    width: 100%;
    left: 0;
    content: '';
}

.article_header {
    width: 100%;
    height: 570px;
    position: relative;
    text-align: center;
}

.article_header_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: no-repeat center center;
    background-size: cover;
    background-image: url();
}

.article_header_bg canvas {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 0;
}

.article_header_inner {
    height: 570px;
    position: relative;
}

.article_header_table {
    display: table;
    width: 100%;
    height: 100%;
}

.article_header_cell {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

.article_title {
    padding: 10px 0 20px;
    position: relative;
    font-size: 90px;
    line-height: 1;
    font-weight: 200;
    color: #fff;
}

.article_title:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    position: absolute;
    left: 50%;
    bottom: 0;
    background: #fff;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.article_sub_title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-top: 30px;
    display: inline-block;
    font-family: 'Pretendard Variable', Pretendard;
}
.article_desc {
    font-size: 24px;
    letter-spacing: 0;
    line-height: 1.5;
    color: #fff;
    font-weight: 200;
}
.article_desc strong {
    font-weight: 600;
}

.article_title.secondary {
    padding-top: 0;
}

.article_sub_title.secondary {
    display: block;
    padding-bottom: 7px;
    margin-left: 0;
    position: relative;
    font-size: 80px;
    letter-spacing: 0;
}

.article_sub_title.secondary:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    position: absolute;
    left: 50%;
    bottom: 0;
    background: #fff;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.article_basic_header {
    padding: 195px 0 75px;
}

.article_basic_header h1 {
    margin-left: 0.2em;
    font-size: 51px;
    font-weight: 200;
    line-height: 1.25;
    letter-spacing: 0.2em;
    text-align: center;
    color: #222;
}

/* PAGE NAV */

.article_nav {
    width: 100%;
    height: 47px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -80px;
    z-index: 1;
}

.article_nav_btn {
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    color: #fff;
}

.article_nav_btn:after {
    content: '';
    display: table;
    clear: both;
}

.article_nav_pic {
    width: 47px;
    height: 100%;
    position: relative;
    text-indent: -9999px;
    line-height: 0;
    border: 2px solid #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border-color 0.5s, -webkit-transform 0.5s;
    transition: border-color 0.5s, -webkit-transform 0.5s;
    transition: border-color 0.5s, transform 0.5s;
    transition: border-color 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

.article_nav_pic:after {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    background: no-repeat center center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.article_nav_pic:before {
    content: '';
    display: block;
    width: 46px;
    height: 1px;
    position: absolute;
    top: 50%;
    margin-top: -0.5px;
    background: #fff;
    -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.article_nav_btn:hover .article_nav_pic {
    -webkit-transform: scale(0.9) rotate(0.05deg);
    -ms-transform: scale(0.9) rotate(0.05deg);
    transform: scale(0.9) rotate(0.05deg);
}

.article_nav_btn .article_nav_pic {
    -webkit-transform: rotate(0.05deg);
    -ms-transform: rotate(0.05deg);
    transform: rotate(0.05deg);
}

.article_nav_title {
    width: 120px;
    height: 100%;
    opacity: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.article_nav_table {
    display: table;
    width: 100%;
    height: 100%;
}

.article_nav_cell {
    display: table-cell;
    vertical-align: middle;
}

.article_nav_title p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
}

.article_nav_title p span {
    display: inline-block;
    padding: 0 2px;
}

.article_nav_pre {
    left: 0;
}

.article_nav_pre .article_nav_pic,
.article_nav_pre .article_nav_title {
    float: left;
}

.article_nav_pre .article_nav_pic:after {
    background-image: url(../images/icon/icon-arrow-left.svg);
}

.article_nav_pre .article_nav_pic:before {
    left: 20px;
}

.article_nav_pre .article_nav_title {
    margin-left: 15px;
    text-align: left;
    -webkit-transform: translateX(8px);
    -ms-transform: translateX(8px);
    transform: translateX(8px);
}

.article_nav_next {
    right: 0;
}

.article_nav_next .article_nav_pic,
.article_nav_next .article_nav_title {
    float: right;
}

.article_nav_next .article_nav_pic:after {
    background-image: url(../images/icon/icon-arrow-right.svg);
}

.article_nav_next .article_nav_pic:before {
    right: 20px;
}

.article_nav_next .article_nav_title {
    margin-right: 15px;
    text-align: right;
    -webkit-transform: translateX(-8px);
    -ms-transform: translateX(-8px);
    transform: translateX(-8px);
}

.article_nav_btn:hover .article_nav_pic {
    border-color: #fff;
}

.article_nav_btn:hover .article_nav_pic:before {
    width: 0px;
    -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.article_nav_btn:hover .article_nav_title {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;
}

/* BREADCRUMB */
.article_breadcrumbs {
    height: 159px;
    margin-top: -159px;
    position: relative;
    box-sizing: border-box;
    min-width: auto !important;
}
.article_breadcrumbs .wrap {
    width: auto;
}

.article_breadcrumbs_inner {
    background: #fff;
}

.breadcrumb {
    padding: 59px 30px 60px;
}
.breadcrumb:after {
    content: '';
    display: block;
    clear: both;
}

.breadcrumb li {
    float: left;
    position: relative;
    padding-right: 18px;
    margin-right: 10px;
}
.breadcrumb li:after {
    content: '';
    display: block;
    width: 6px;
    height: 9px;
    background: url() no-repeat 0 0;
    position: absolute;
    right: 0;
    top: 7px;
}
.breadcrumb li:last-child:after {
    display: none;
}

.breadcrumb li a,
.breadcrumb li span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: #666;
    -webkit-transition: color 300ms;
    transition: color 300ms;
    position: relative;
}

.breadcrumb li a:hover {
    color: #2e87cc;
}

.breadcrumb li.separator {
    padding: 0 5px;
}

.breadcrumb li.separator span:after {
    display: block;
    font-family: '';
    content: '\e93b';
    font-size: 10px;
    font-weight: normal;
    line-height: 22px;
    color: #aaa;
}

.breadcrumb li.home {
}

.breadcrumb li.home a {
    padding-left: 14px;
    overflow: hidden;
    text-indent: -9999px;
}

.breadcrumb li.home a:after {
    display: block;
    content: '';
    width: 14px;
    height: 13px;
    background: url() no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 3px;
}

.breadcrumb li.home + li.separator {
    display: none;
}

/* **************************************** *
 * BUTTON
 * **************************************** */

/* Default */

.wr_btn {
    display: inline-block;
    min-width: 180px;
    padding: 21px 29px;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 0px;
    background: transparent;
    overflow: hidden;
    -webkit-transition: color 0.55s cubic-bezier(0.52, 0.08, 0.18, 1);
    transition: color 0.55s cubic-bezier(0.52, 0.08, 0.18, 1); /*border-radius: 51px;*/
    vertical-align: top;
}

.wr_btn[lang='en'] {
    padding: 16.5px 29px;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.wr_btn span {
    position: relative;
    line-height: 1;
    vertical-align: top;
}

.wr_btn:before {
    content: '';
    display: block;
    width: 120%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: translateX(-101%) skewX(-17.62deg);
    -ms-transform: translateX(-101%) skewX(-17.62deg);
    transform: translateX(-101%) skewX(-17.62deg);
    -webkit-transition: -webkit-transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1);
    transition: -webkit-transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1);
    transition: transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1);
    transition: transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1),
        -webkit-transform 0.55s cubic-bezier(0.52, 0.08, 0.18, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.wr_btn.hover:before {
    -webkit-transform: translateX(0) skewX(-17.62deg);
    -ms-transform: translateX(0) skewX(-17.62deg);
    transform: translateX(0) skewX(-17.62deg);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}

/* basic style */
.btn_small {
    min-width: 100px;
    padding: 8px 20px;
    font-size: 14px;
}

.wr_basic_btn {
    text-align: center;
}

.wr_basic_btn.primary {
    color: #222;
    border-color: #222;
}
.wr_basic_btn.primary:hover {
    color: #fff !important;
}
.wr_basic_btn.primary:before {
    background: #222;
}

.wr_basic_btn.orange:hover {
    border-color: #f7931d;
}
.wr_basic_btn.orange:before {
    background: #f7931d;
}

.wr_basic_btn.secondary {
    color: #fff;
    border-color: #fff;
}
.wr_basic_btn.secondary:before {
    background: #fff;
}
.wr_basic_btn.secondary:hover {
    color: #222;
}

.wr_basic_btn.mint:before {
    background: #21bbb1;
}
.wr_basic_btn.mint:hover {
    border-color: #21bbb1;
}

.mobile-style {
    display: none !important;
}
.pc-style {
    display: inline-block !important;
}

@media screen and (max-width: 1024px) {
    .mobile-style {
        display: inline-block !important;
    }
    .pc-style {
        display: none !important;
    }
}

/* loading indicator */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
}
#page-loader > .inner2 {
    display: table;
    width: 100%;
    height: 100%;
}

.spinner {
    width: 40px;
    height: 40px;

    position: relative;
    margin: 25% auto;
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #121212;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2s infinite ease-in-out;
    animation: sk-bounce 2s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
@media screen and (max-width: 768px) {
    .spinner {
        margin: 60% auto;
    }
}

.splitting .char {
    animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
    animation-delay: calc(60ms * var(--char-index));
}

@keyframes slide-in {
    from {
        /*transform: translateY(-1em) rotate(-.5turn) scale(0.5);*/
        transform: translateX(1.5em) scale(1);
        opacity: 0;
    }
}

@media all and (max-width: 1440px) {
    #logo {
        left: 20px;
    }
    #logo a {
        width: 155px;
        height: 50px;
        background-size: contain;
    }
    .header_wrap {
        padding: 0 0px;
    }
    #footer .footerArea {
        padding: 0px 20px 0px;
    }
    #scrollTop {
        right: 20px;
    }
    #menu {
        width: 100%;
        box-sizing: border-box;
        padding: 0px 110px 0px 170px;
        max-width: 100%;
        position: relative;
    }
    #menu > li {
        width: 20%;
    }
    .lang {
        right: 20px;
    }
}
@media all and (max-width: 1280px) {
    .global_nav {
        right: 20px;
    }
}

@media all and (max-width: 1023px) {
    #menu {
        padding: 0 150px 0 330px;
    }
    #menu > li > a {
        font-size: 16px;
    }
    #menu > li > ul > li > a {
        font-size: 14px;
        padding-left: 15px;
        padding-right: 15px;
    }
    #menu > li > ul > li .dep3 {
        padding-left: 15px;
        padding-right: 15px;
    }
    #menu > li > ul > li .dep3 a {
        font-size: 13px;
    }

    .menu_container {
        height: 65px;
    }
    .menu_container #menu {
        display: none;
    }

    body.mo #header {
        box-shadow: none;
    }

    .header_wrap {
        padding: 0;
    }
    #header {
        top: 0 !important;
        height: 65px !important;
    }

    .minimize#header {
        height: 65px;
    }
    .menu_container_bg {
        display: none;
    }
    #logo a {
        left: 0px;
    }
    #logo a {
        top: 16px !important;
        width: 103px;
        height: 33px;
        background-size: contain;
    }
    #header.open #logo a {
        width: 103px;
        height: 33px;
        background: url('../img/logo_white.png') no-repeat;
        background-size: contain;
    }
    #header.open #logo a {
    }

    #header.open {
        background: transparent;
    }
    #header.open #menu > li > a {
        color: #000;
    }

    /* LOGO */

    #header.open .menu_container {
        box-shadow: none;
    }

    .global_nav button.btnAllmenu:after {
        width: 20px;
        height: 15px;
        background-size: cover;
    }
    .global_nav .nav_item li {
        margin-right: 15px;
    }
    .global_nav .nav_item li a {
        font-size: 12px;
    }

    .article_header {
        height: 250px;
    }
    .article_header_inner {
        height: 250px;
    }
    .article_sub_title {
        font-size: 32px;
        font-weight: 500;
        color: #fff;
        margin-top: 45px;
        display: inline-block;
    }
    .article_desc {
        font-size: 16px;
        letter-spacing: 0;
        line-height: 1.5;
        color: #fff;
        font-weight: 200;
    }
    .article_desc strong {
        font-weight: 600;
    }

    #header.scroll button.btnAllmenu {
    }
    button.btnAllmenu {
        display: inline-block;
        position: fixed;
        right: 20px;
        top: 15px;
        z-index: 1130;
    }
    #wrap.mobile-scroll button.btnAllmenu > span {
        background: #000;
    }

    #footer {
        position: relative;
        background: #f3f3f3;
        padding: 20px 0px 30px;
    }
    #footer .footerArea {
        max-width: 100%;
        margin: 0px auto;
    }
    #footer .footerArea .footer-top {
        margin-bottom: 30px;
        display: inline-block;
        padding-bottom: 30px;
        width: 100%;
        position: relative;
        font-size: 0px;
    }
    #footer .footerArea .footer-top .sns {
        margin-left: 0px;
        position: relative;
        top: 10px;
        width: 20%;
        display: inline-block;
    }
    #footer .footerArea .footer-top .sns a {
        font-size: 13px;
    }
    #footer .footerArea .footer-top .youtube {
        position: absolute;
        right: 0px;
        top: 5px;
    }
    #footer .footerArea .footer-top .flogo {
        margin-right: 20px;
        display: block;
        width: 100%;
    }
    #footer .footerArea .footer-bottom {
        position: relative;
    }
    #footer .footerArea .footer-bottom address {
        font-size: 12px;
        display: block;
        line-height: 24px;
        margin-right: 0px;
    }
    #footer .footerArea .footer-bottom span {
        font-size: 12px;
        color: #888;
        display: inline-block;
        line-height: 24px;
        margin-bottom: 0px;
    }
    #footer .footerArea .footer-bottom span.fmr {
        margin-right: 0px;
    }
    #footer .footerArea .footer-bottom span.sec {
        margin-top: 30px;
    }
    #footer .footerArea .footer-bottom .f-info {
        width: 100%;
        text-align: justify;
        margin-left: 0px;
    }
    #footer .footerArea p {
        margin-top: 50px;
        font-size: 11px;
        color: #888;
    }

    /* 스크롤 버튼 */
    #scrollTop {
        right: 20px;
        bottom: 10px;
    }
    #scrollTop .inner {
        max-width: 100%;
        padding: 0px;
    }
    #scrollTop a {
    }
}