@charset "utf-8";

/*===================================
레이아웃
===================================*/
html {
    font-size: 20px;
}
html.full {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.grid {
    position: relative;
    max-width: 1170px;
}

/*===================================
폰트
===================================*/
.sso300 {
    font-family: 'ssokor300', sans-serif;
    font-weight: 400;
}
.sso400 {
    font-family: 'ssokor400', sans-serif;
    font-weight: 400;
}
.sso700 {
    font-family: 'ssokor700', sans-serif;
    font-weight: 700;
}
.gtmbook {
    font-family: 'GothamBook', sans-serif;
    font-weight: 400;
}

.sssans-bold {
    font-family: 'ssSansBold', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

.sssans-medium {
    font-family: 'ssSansMedium', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
}

.sssans-regular {
    font-family: 'ssSansRegular', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

.sssans-light {
    font-family: 'ssSansLight', sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
}

.sssans-thin {
    font-family: 'ssSansThin', sans-serif;
    font-weight: 100;
    letter-spacing: 2px;
}

.sssharpsans-regular {
    font-family: 'ssSharpSansRegular', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

.sssharpsans-medium {
    font-family: 'ssSharpSansMedium', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
}

.sssharpsans-bold {
    font-family: 'ssSharpSansBold', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

/*===================================
컬러칩
===================================*/
/* 폰트컬러
===================================*/
.fnt-wht {
    color: #fff;
}
.fnt-sbl {
    color: #0098ef;
}
.fnt-grey {
    color: #999;
}
.fnt-blk {
    color: #000;
}
.fnt-red {
    color: #c00000;
}
/* 배경컬러
===================================*/
.bg-wht {
    background-color: #fff;
}
.bg-red {
    background-color: #0098ef;
}
.bg-grey {
    background-color: #efefef;
}
.bg-dark {
    background-color: #202228;
}

/*===================================
정렬
===================================*/
/* 포지션
===================================*/
.p-abs-cx {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.p-abs-cy {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.p-abs-cxy {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* 플로트
===================================*/
.fl-wrap:after {
    content: "";
    display: block;
    clear: both;
}
.fl-lt {
    float: left;
}
.fl-rt {
    float: right;
}
/* 텍스트
===================================*/
.txt-lt {
    text-align: left;
}
.txt-cnt {
    text-align: center;
}
.txt-rt {
    text-align: right;
}
.linebreak {
    display: block;
}

.inline-block {
    display: inline-block !important;
}
.idt-txt {
    position: relative;
    padding-left: 0.75rem;
}
.idt-txt .mark {
    position: absolute;
    top: 0;
    left: 0;
}

/*============================================================
padding & margin
============================================================*/
/* padding
============================================================*/
.p0 {
    padding: 0 !important;
}
.pt0 {
    padding-top: 0 !important;
}
.pb0 {
    padding-bottom: 0 !important;
}
.pl0 {
    padding-left: 0 !important;
}
.pr0 {
    padding-right: 0 !important;
}
.p10 {
    padding: 0.5rem !important;
}
.pt10 {
    padding-top: 0.5rem !important;
}
.pb10 {
    padding-bottom: 0.5rem !important;
}
.pl10 {
    padding-left: 0.5rem !important;
}
.pr10 {
    padding-right: 0.5rem !important;
}
.p20 {
    padding: 1rem !important;
}
.pt20 {
    padding-top: 1rem !important;
}
.pb20 {
    padding-bottom: 1rem !important;
}
.pl20 {
    padding-left: 1rem !important;
}
.pr20 {
    padding-right: 1rem !important;
}
.p30 {
    padding: 1.5rem !important;
}
.pt30 {
    padding-top: 1.5rem !important;
}
.pb30 {
    padding-bottom: 1.5rem !important;
}
.pl30 {
    padding-left: 1.5rem !important;
}
.pr30 {
    padding-right: 1.5rem !important;
}
.p40 {
    padding: 2rem !important;
}
.pt40 {
    padding-top: 2rem !important;
}
.pb40 {
    padding-bottom: 2rem !important;
}
.pl40 {
    padding-left: 2rem !important;
}
.pr40 {
    padding-right: 2rem !important;
}
.p50 {
    padding: 2.5rem !important;
}
.pt50 {
    padding-top: 2.5rem !important;
}
.pb50 {
    padding-bottom: 2.5rem !important;
}
.pl50 {
    padding-left: 2.5rem !important;
}
.pr50 {
    padding-right: 2.5rem !important;
}
.p60 {
    padding: 3rem !important;
}
.pt60 {
    padding-top: 3rem !important;
}
.pb60 {
    padding-bottom: 3rem !important;
}
.pl60 {
    padding-left: 3rem !important;
}
.pr60 {
    padding-right: 3rem !important;
}
.p70 {
    padding: 3.5rem !important;
}
.pt70 {
    padding-top: 3.5rem !important;
}
.pb70 {
    padding-bottom: 3.5rem !important;
}
.pl70 {
    padding-left: 3.5rem !important;
}
.pr70 {
    padding-right: 3.5rem !important;
}
.p80 {
    padding: 4rem !important;
}
.pt80 {
    padding-top: 4rem !important;
}
.pb80 {
    padding-bottom: 4rem !important;
}
.pl80 {
    padding-left: 4rem !important;
}
.pr80 {
    padding-right: 4rem !important;
}
.p100 {
    padding: 5rem !important;
}
.pt100 {
    padding-top: 5rem !important;
}
.pb100 {
    padding-bottom: 5rem !important;
}
.pl100 {
    padding-left: 5rem !important;
}
.pr100 {
    padding-right: 5rem !important;
}
/* margin
============================================================*/
.m0 {
    margin: 0 !important
}
.mt0 {
    margin-top: 0 !important;
}
.mb0 {
    margin-bottom: 0 !important;
}
.ml0 {
    margin-left: 0 !important;
}
.mr0 {
    margin-right: 0 !important;
}
.m10 {
    margin: 0.5rem !important;
}
.mt10 {
    margin-top: 0.5rem !important;
}
.mb10 {
    margin-bottom: 0.5rem !important;
}
.ml10 {
    margin-left: 0.5rem !important;
}
.mr10 {
    margin-right: 0.5rem !important;
}
.m20 {
    margin: 1rem !important;
}
.mt20 {
    margin-top: 1rem !important;
}
.mb20 {
    margin-bottom: 1rem !important;
}
.ml20 {
    margin-left: 1rem !important;
}
.mr20 {
    margin-right: 1rem !important;
}
.m30 {
    margin: 1.5rem !important;
}
.mt30 {
    margin-top: 1.5rem !important;
}
.mb30 {
    margin-bottom: 1.5rem !important;
}
.ml30 {
    margin-left: 1.5rem !important;
}
.mr30 {
    margin-right: 1.5rem !important;
}
.m40 {
    margin: 2rem !important;
}
.mt40 {
    margin-top: 2rem !important;
}
.mb40 {
    margin-bottom: 2rem !important;
}
.ml40 {
    margin-left: 2rem !important;
}
.mr40 {
    margin-right: 2rem !important;
}
.m50 {
    margin: 2.5rem !important;
}
.mt50 {
    margin-top: 2.5rem !important;
}
.mb50 {
    margin-bottom: 2.5rem !important;
}
.ml50 {
    margin-left: 2.5rem !important;
}
.mr50 {
    margin-right: 2.5rem !important;
}
.m60 {
    margin: 3rem !important;
}
.mt60 {
    margin-top: 3rem !important;
}
.mb60 {
    margin-bottom: 3rem !important;
}
.ml60 {
    margin-left: 3rem !important;
}
.mr60 {
    margin-right: 3rem !important;
}
.m70 {
    margin: 3.5rem !important;
}
.mt70 {
    margin-top: 3.5rem !important;
}
.mb70 {
    margin-bottom: 3.5rem !important;
}
.ml70 {
    margin-left: 3.5rem !important;
}
.mr70 {
    margin-right: 3.5rem !important;
}
.m80 {
    margin: 4rem !important;
}
.mt80 {
    margin-top: 4rem !important;
}
.mb80 {
    margin-bottom: 4rem !important;
}
.ml80 {
    margin-left: 4rem !important;
}
.mr80 {
    margin-right: 4rem !important;
}
.m90 {
    margin: 4.5rem !important;
}
.mt90 {
    margin-top: 4.5rem !important;
}
.mb90 {
    margin-bottom: 4.5rem !important;
}
.ml90 {
    margin-left: 4.5rem !important;
}
.mr90 {
    margin-right: 4.5rem !important;
}
.m100 {
    margin: 5rem !important;
}
.mt100 {
    margin-top: 5rem !important;
}
.mb100 {
    margin-bottom: 5rem !important;
}
.ml100 {
    margin-left: 5rem !important;
}
.mr100 {
    margin-right: 5rem !important;
}

/*===================================
테이블
===================================*/
/* div table
===================================*/
.div-tbl {
    display: table;
}
.div-tbl .row {
    display: table-row;
}
.div-tbl .cell {
    display: table-cell;
}

/*===================================
요소
===================================*/
/* display
===================================*/
.display-none {
    display: none;
}
.invisible {
    visibility: hidden;
}

.letter-space-0 {
    letter-spacing: 0 !important;
}

.op0 {
    opacity: 0;
}
/* 버튼
===================================*/
.btn {
    display: inline-block;
    cursor: pointer;
}
.btn .label {
    display: inline-block;
    font-weight: 400;
}
.bl-arw-btn {
    padding: 1.2rem 1rem;
    font-size: 0.9rem;
    width: 15rem;
    color: #fff;
    text-align: center;
    background-color: #0098ef;
}
.bl-arw-btn .label {
    padding-right: 1.25rem;
    background: url('../images/main/ico-visual-arw.html') no-repeat center right;
    background-size: 7px;
}

/*===================================
콘텐츠
===================================*/
/* 유튜브 플레이어
===================================*/
.ytb-player {
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    height: 0;
}
.ytb-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*===================================
모달 (zoe0909 추가)
===================================*/
.modal_wrap {
    width: 30rem;
    background-color: #fff;
}
.modal_wrap.pos_abs {
    position: absolute;
    top: 7rem;
    left: 50%;
    z-index: 9;
}
.close_modal_btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
}
.close_modal_btn:before,
.close_modal_btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 100%;
    background-color: #fff;
}
.close_modal_btn:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.close_modal_btn:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}
.modal_chk_box {
    padding: 0.75rem 1.5rem;
    background-color: transparent;
}

/*===================================
공통 애니메이션 효과
===================================*/
/* fade in animation
===================================*/
.fadeInAni {
    opacity: 0;
}
.fadeInAni.on {
    animation-name: fadeInAni;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInAni {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeInAni {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* float show animation
===================================*/
.flShowXAniRT {
    position: relative;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
}
.flShowXAniRT.on {
    animation-name: flShowXAniRt;
    animation-duration: 1.75s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes flShowXAniRt {
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes flShowXAniRt {
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
.flShowYAni {
    position: relative;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    opacity: 0;
}
.flShowYAni.on {
    animation-name: flShowYAni;
    animation-duration: 1.75s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes flShowYAni {
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes flShowYAni {
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
/* letter spacing animation
===================================*/
.txtSpaceAni {
    letter-spacing: 7px;
    opacity: 0;
}
.txtSpaceAni.lg {
    letter-spacing: 15px;
}
.txtSpaceAni.on {
    animation-name: txtSpaceAni;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes txtSpaceAni {
    100% {
        letter-spacing: 0;
        opacity: 1;
    }
}
@keyframes txtSpaceAni {
    100% {
        letter-spacing: 0;
        opacity: 1;
    }
}


.txtEngSpaceAni {
    letter-spacing: 7px;
    opacity: 0;
}
.txtEngSpaceAni.lg {
    letter-spacing: 15px;
}
.txtEngSpaceAni.on {
    animation-name: txtEngSpaceAni;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes txtEngSpaceAni {
    100% {
        letter-spacing: 2px;
        opacity: 1;
    }
}
@keyframes txtEngSpaceAni {
    100% {
        letter-spacing: 2px;
        opacity: 1;
    }
}

/*===================================
헤더 & 푸터
===================================*/
/* 헤더
===================================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: right;
    border-bottom: 1px solid rgba(153, 153, 153, 0.2);
    /* transition: background-color 0.25s; */
    z-index: 10;
}
header.fadeInAni.on {
    animation-duration: 0.75s;
    animation-delay: 1s;
}
header .ci-area {
    padding: 1rem 0;
    left: 0;
}
header .ci-hd {
    display: inline-block;
    font-size: 1.7rem;
    color: #fff;
    transition: color 0.25s;
    vertical-align: middle;
}
header .visit-count {
    display: inline-block;
    padding: 0 1.5rem;
    margin-left: 1rem;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 2rem;
    background-color: #202228;
    vertical-align: middle;
}
header .visit-count span {
    display: inline-block;
    padding: 0.5rem 0 0.5rem 1.75rem;
    background: url('../images/common/ico-header-count.html') no-repeat center left;
    background-size: 1.25rem;
}
header .visit-count .mo-txt {
    display: none;
}
nav {
    margin-bottom: 10px;
    display: inline-block;
}
nav .nav-menu {
    position: relative;
    margin-left: 1.8rem;
    font-size: 0.8rem;
    line-height: 2.4rem;
    color: #fff;
    transition: color 0.25s;
    cursor: pointer;
}
nav .nav-menu a {
    display: inline-block;
}
nav .nav-menu.active {
    color: #1428a0 !important;
}
nav .lang-btn-box {
    padding-left: 0.5rem;
}
nav .lang-btn-box:before {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: 1px;
    height: 14px;
    background-color: #fff;
    transition: background-color 0.25s;
}

.monav-btn {
    display: none;
}

nav > .nav-top {
    padding-top: 0.9rem;
    font-size: 0.6rem;
    display: inline-block;
}

nav > .nav-top > .language-select-wrapper {
    padding: 0.3rem 0.8rem;
    background-color: #dddddd;
    border-radius: 20px;
}

nav > .nav-top > .language-select-wrapper > .lang-btn {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    color: #aaaaaa;
}

nav > .nav-top > .language-select-wrapper > span {
    color: #aaaaaa;
}

nav > .nav-top > .language-select-wrapper > .lang-btn.on {
    color: #000000;
}

nav > .nav-top > button.btn-login {
    margin-right: 10px;
    margin-left: 10px;
    padding: 0.2rem 1.5rem;
    color: #FFFFFF;
    background-color: #1428a0;
    line-height: inherit;
    border-radius: 25px;
    height: 25px;
    border: 1px solid #1428a0;
}

nav > .nav-top > .visit-count-wrapper {
    color: #FFFFFF;
    line-height: 25px;
    font-size: 0.7rem;
}
/* 스크롤 헤더
===================================*/
header.dft-active,
header.active,
header.active nav{
    background-color: #fff;
}
header.dft-active .ci-hd,
header.active .ci-hd {
    color: #0098ef;
}
header.dft-active .visit-count,
header.active .visit-count {
    display: none;
}
header.dft-active nav .nav-menu,
header.active nav .nav-menu ,
header.active .visit-count-wrapper {
    color: #000;
}
header.dft-active nav .nav-menu.active:after,
header.active nav .nav-menu.active:after {
    background-color: #0098ef;
}
header.dft-active nav .lang-btn-box:before,
header.active nav .lang-btn-box:before {
    background-color: #ccc;
}
/* 푸터
===================================*/
footer {
    padding: 2rem 0;
    border-top: 1px solid #efefef;
}
.copyright {
    width: 50%;
    font-size: 0.7rem;
    line-height: 2rem;
    color: #AAAAAA;
}
.footer-el {
    width: 50%;
    text-align: right;
}
.footer-el .share-btn {
    margin-right: 0.5rem;
    width: 2rem;
    height: 2rem;
    background-color: #efefef;
    border-radius: 100%;
}
.footer-el .share-btn .ico {
    width: 100%;
}
.footer-el select {
    display: inline-block;
    padding: 0 2rem 0 1rem;
    margin-left: 0.5rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.7rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #efefef url('../images/common/ico-footer-arw.png') no-repeat center right 0.75rem;
    background-size: 12px;
    vertical-align: top;
}
.footer-el select::-ms-expand {
    display: none
}
.footer-el .btn {
    padding: 0 1rem;
    font-size: 0.7rem;
    line-height: 2rem;
    background-color: #efefef;
}

/*===================================
미디어쿼리
===================================*/
/* desktap and ipadPro, less than 1170px
======================================*/
@media screen and (max-width: 1170.98px) {

    /*===================================
    레이아웃
    ===================================*/
    .grid {
        padding-left: 15px;
        padding-right: 15px;
    }

    /*===================================
    헤더 & 푸터
    ===================================*/
    /* 헤더
    ===================================*/
    header .ci-area {
        left: 15px;
    }

    /*===================================
    모달 (zoe0909 추가)
    ===================================*/
    .modal_wrap.pos_abs {
        left: auto;
        right: 15px;
    }

}
/* iPad in portrait, landscape phones, less than 768px
======================================*/
@media screen and (max-width: 1023.98px) {

    /*===================================
    레이아웃
    ===================================*/
    html {
        font-size: 18px;
    }

    /*===================================
    헤더 & 푸터
    ===================================*/
    /* 헤더
    ===================================*/
    header {
        text-align: left;
    }
    header .ci-area {
        position: relative;
        top: auto;
        left: auto;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    header .visit-count {
        padding: 0 1rem;
        margin-left: 0.5rem;
    }
    header .visit-count span {
        padding-left: 0;
        background: none;
    }
    header .visit-count .mo-txt {
        display: inline-block;
    }
    header .visit-count .mo-txt + span {
        display: none;
    }
    /* .nav-menu-1,
    .nav-menu-2,
    .nav-menu-3,
    nav .lang-btn-box:before {
        display: none;
    }
    nav .nav-menu {
        font-size: 1rem;
        line-height: 3.5rem;
    } */
    nav {
        display: none;
    }
    .monav-btn {
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 30px;
        height: 20px;
    }
    .monav-btn span {
        display: inline-block;
        position: absolute;
        right: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
    }
    .monav-btn span:first-child {
        top: 1px;
        width: 66%;
        transition: transform 0.5s, width 0.5s;
    }
    .monav-btn span:nth-child(2) {
        top: 9px;
    }
    .monav-btn span:last-child {
        top: 17px;
        transition: transform 0.5s;
    }
    header.active .monav-btn span,
    .monav-btn.active span {
        background-color: #000
    }
    .monav-btn.active span:first-child {
        top: 9px;
        width: 100%;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .monav-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .monav-btn.active span:last-child {
        top: 9px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /*===================================
    모바일 내비게이션
    ===================================*/
    .monav-area {
        position: fixed;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        background-color: #fff;
        z-index: 10;
    }
    .monav-grid {
        position: relative;
        height: 100%;
        overflow-y: scroll;
    }
    .monav-cont {
        position: relative;
        padding: 3rem 0;
        min-height: 100%;
    }
    .monav-menu-list {
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
    }
    .monav-menu {
        display: block;
        padding: 1.1rem 0;
        font-family: 'ssokor300', sans-serif;
        font-size: 1.8rem;
        opacity: 0;
        transform: scaleY(0);
        transition: transform 0.5s, opacity 0.5s;
    }
    .monav-menu.on {
        font-family: 'ssokor700', sans-serif;
        color: #0098ef;
    }
    .mo-langbtn-box {
        margin-top: 1.8rem;
    }
    .mo-langbtn-box .btn {
        padding: 0 0.5rem;
        font-size: 1.3rem;
        opacity: 0;
        transform: scaleY(0);
        transition: transform 0.5s, opacity 0.5s;
    }
    .monav-area.active {
        width: 100%;
        height: 100%;
    }
    .monav-area.active .monav-menu,
    .monav-area.active .mo-langbtn-box .btn {
        opacity: 1;
        transform: scaleY(1);
    }
	.mo-langbtn-box.inc-login {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 4rem;
		padding: 0 2.5rem;
	}
	.mo-langbtn-box.inc-login .btn-group {
		margin: 0;
	}
	.mo-langbtn-box.inc-login .btn-group:last-child .btn {
		padding-top: 0.15rem;
		background-color: #1428a0;
		color: #fff;
	}
    
}
/* mobile
======================================*/
@media screen and (max-width: 575.98px) {

    /*===================================
    레이아웃
    ===================================*/
    html {
        font-size: 16px;
    }

    /*===================================
    정렬
    ===================================*/
    /* 텍스트
    ===================================*/
    .linebreak {
        display: inline;
    }
    .linebreak-mo {
        display: block;
    }

    /*===================================
    테이블
    ===================================*/
    /* div table
    ===================================*/
    .div-tbl,
    .div-tbl .row,
    .div-tbl .cell {
        display: block;
    }

    /*===================================
    요소
    ===================================*/
    /* 버튼
    ===================================*/
    .bl-arw-btn {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        line-height: 1.2;
    }

    /*===================================
    모달 (zoe0909 추가)
    ===================================*/
    .modal_wrap {
        width: calc(100% - 30px);
    }

    /*===================================
    공통 애니메이션 효과
    ===================================*/
    .aniEl,
    .aniEl-sq {
        -webkit-transform: translate(0) !important;
        -ms-transform: translate(0) !important;
        -moz-transform: translate(0) !important;
        transform: translate(0) !important;
        letter-spacing: 0 !important;
        opacity: 1 !important;
        animation: none !important;
    }

    /*===================================
    헤더 & 푸터
    ===================================*/
    /* 헤더
    ===================================*/
    header .ci-area {
        padding: 0.5rem 0;
    }
    header.dft-active .ci-area,
    header.active .ci-area {
        padding: 1rem 0;
    }
    header .ci-hd {
        font-size: 1rem;
    }
    header.dft-active .monav-btn span {
        background-color: #000;
    }
    /* 푸터
    ===================================*/
    footer {
        padding: 1.5rem 0;
    }
    .copyright {
        float: none;
        width: 100%;
        line-height: 1.2;
    }
    .footer-el {
        float: none;
        padding-top: 1rem;
        width: 100%;
        text-align: left;
    }

}