@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: 400;
}
.gtmbook {
    font-family: 'GothamBook', sans-serif;
    font-weight: 400;
}

/*===================================
컬러칩
===================================*/
/* 폰트컬러
===================================*/
.fnt-wht {
    color: #fff;
}
.fnt-sbl {
    color: #0098ef;
}
.fnt-grey {
    color: #999;
}
.fnt-blk {
    color: #000;
}
/* 배경컬러
===================================*/
.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;
}
.idt-txt {
    position: relative;
    padding-left: 0.75rem;
}
.idt-txt .mark {
    position: absolute;
    top: 0;
    left: 0;
}

/*===================================
테이블
===================================*/
/* 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;
}
/* 버튼
===================================*/
.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.png') 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;
}

/*===================================
공통 애니메이션 효과
===================================*/
/* 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;
    }
}

/*===================================
헤더 & 푸터
===================================*/
/* 헤더
===================================*/
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.3rem;
    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.png') no-repeat center left;
    background-size: 1.25rem;
}
header .visit-count .mo-txt {
    display: none;
}
nav {
    display: inline-block;
}
nav .nav-menu {
    position: relative;
    margin-left: 1.5rem;
    font-size: 0.8rem;
    line-height: 4rem;
    color: #fff;
    transition: color 0.25s;
    cursor: pointer;
}
nav .nav-menu a {
    display: inline-block;
}
nav .nav-menu.active:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: background-color 0.25s;
}
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;
}
nav .lang-btn {
    margin-left: 1rem;
}
nav .lang-btn.on {
    color: #0098ef; 
}
.monav-btn {
    display: none;
}
/* 스크롤 헤더
===================================*/
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 {
    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: #666;
}
.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;
    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;
    }

}
/* 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: 1;
    }
    .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);
    }
    
}
/* 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;
    }

    /*===================================
    공통 애니메이션 효과
    ===================================*/
    .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;
    }

}