@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */


#skipToContent a {
    z-index: 100000;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden
}

#skipToContent a:focus,
#skipToContent a:active {
    width: 200px;
    height: 50px;
    background: #21272e;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 50px
}

.only-desktop-tablet {
    display: block;
}

.only-desktop {
    display: block;
}

.only-tablet {
    display: none;
}

.only-mobile {
    display: none;
}

/* header */
#header {
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 100;
}

#header .contain {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    z-index: 10;
    max-width: 100% !important;
}

#header .contain:hover .btn-m-menu span,
#header .contain:hover .btn-m-menu span:before,
#header .contain:hover .btn-m-menu span:after {
    background: #242424;
}

.sitelogo {
    position: absolute;
    top: 50%;
    left: var(--container-space);
    transform: translateY(-50%);
}

.sitelogo a {
    display: block;
    width: 250px;
    height: 60px;
    background: url("/images/common/logo-wht.png") no-repeat center/ contain;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
}

.sitelogo-w a {
    display: block;
    width: 200px;
    height: 50px;
    background: url("/images/common/logo-wht-e.png") no-repeat center/ contain;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999em;
}

#gnb {
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
}

#gnb>ul {
    display: flex;
    justify-content: flex-end;
}

#gnb>ul>li {
    position: relative;
    padding-right: 80px;
}

#gnb>ul>li>a {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: var(--header-height);
    color: #fff;
    font-size: var(--font-size-20);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.5em;
}

#gnb>ul>li>a:after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #11263A;
    opacity: 0;
    transition: .2s;
}

#gnb>ul>li.active>a:after {
    opacity: 1;
}

#gnb>ul>li.active>a {
    color: #11263A;
}

#gnb>ul>li:hover>a:after {
    opacity: 1;
}

#gnb .submenu {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    text-align: left;
}

#gnb .submenu>ul {
    padding: 20px 5px;
}

#gnb .submenu>ul>li>a {
    display: block;
    padding: 10px 0;
    color: #878787;
    font-size: var(--font-size-16);
    line-height: 1.33em;
}

#gnb .submenu>ul>li>a:hover {
    color: #11263A;
    text-decoration: underline;
}

#gnb .submenu>ul>li.active>a {
    color: #11263A;
    text-decoration: underline;
}

.submenu-bg {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #eee;
}

#sub #header,
#header:hover {
    background-color: #fff;
}

#sub #header #gnb>ul>li>a,
#header:hover #gnb>ul>li>a,
#header:hover .language a,
#sub #header .language a {
    color: #2c2c2c;
}

#sub #header .sitelogo a,
#header:hover .sitelogo a {
    background-image: url("/images/common/logo.png")
}

#sub #header .sitelogo-w a,
#header:hover .sitelogo-w a {
    background-image: url("/images/common/logo-e.png")
}

#sub #header #gnb>ul>li.active>a,
#header:hover #gnb>ul>li.active>a {
    color: #11263A;
}

#sub #header .language a::after,
#header:hover .language a::after {
    background-color: #11263A;
}

#sub #header .language a,
#header:hover .language a {
    color: #878787;
}

#sub #header .language a.on,
#header:hover .language a.on {
    color: #2c2c2c;
}

#sub #header {
    position: relative;
}

#main.fp-viewing-strategy #header,
.header-fixed #header {
    background: #fff;
}

#main.fp-viewing-strategy #header .sitelogo a,
.header-fixed #header .sitelogo a {
    background-image: url("/images/common/logo.png")
}

#main.fp-viewing-strategy #header .sitelogo-w a,
.header-fixed #header .sitelogo-w a {
    background-image: url("/images/common/logo-e.png")
}


#main.fp-viewing-strategy #header #gnb>ul>li>a {
    color: #2c2c2c;
}

#main.fp-viewing-strategy #header .btn-m-menu span,
#main.fp-viewing-strategy #header .btn-m-menu span:before,
#main.fp-viewing-strategy #header .btn-m-menu span:after {
    background: #fff;
}

#main.fp-viewing-strategy #header .language a::after {
    background-color: #11263A;
}

#main.fp-viewing-strategy #header .language a {
    color: #878787;
}

#main.fp-viewing-strategy #header .language a.on {
    color: #2c2c2c;
}

/* for mobile */
.only-mobile {
    display: none;
}

.btn-m-menu {
    display: none;
    position: absolute;
    right: var(--container-space);
    top: 50%;
    text-indent: -9999em;
    transform: translateY(-50%);
    z-index: 99;
    transition: all 0.5s ease-in-out;
    width: 26px;
    height: 26px;
}

.btn-m-menu span {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: #fff;
}

.btn-m-menu span:before,
.btn-m-menu span:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
}

.btn-m-menu span:before {
    top: -9px;
}

.btn-m-menu span:after {
    bottom: -9px;
}


#sub .btn-m-menu span,
#sub .btn-m-menu span:before,
#sub .btn-m-menu span:after {
    background: #2c2c2c;
}

.mobile-navigation {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    overflow: auto;
    transition: .2s linear;
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    background: #fff;
    z-index: 102;
}

.mobile-navigation .home {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 20px;
}

.mobile-navigation .home a img {
    height: 40px;
    vertical-align: middle;
}

.mobile-navigation .nav-menu>ul {
    border-top: 1px solid #ddd;
}

.mobile-navigation .nav-menu>ul>li {
    border-bottom: 1px solid #ddd;
}

.mobile-navigation .nav-menu>ul>li>a {
    position: relative;
    padding: 10px 48px 10px 20px;
    display: block;
    color: #242424;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5em;
}

.mobile-navigation .nav-menu>ul>li>a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-75%) rotate(45deg);
    width: 11px;
    height: 11px;
    border-right: 2px solid #505050;
    border-bottom: 2px solid #505050;
}

.mobile-navigation .nav-menu>ul>li.active>a {
    color: #fff;
    background: var(--color-primary)
}

.mobile-navigation .nav-menu>ul>li.active>a:after {
    transform: translateY(-35%) rotate(-135deg);
    border-color: #fff;
}

.mobile-navigation .nav-menu .submenu {
    display: none;
    background: #f8f8f8;
    color: #454545;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
}

.mobile-navigation .nav-menu .submenu ul li {
    border-top: 1px solid #e5e5e5;
}

.mobile-navigation .nav-menu .submenu ul li a {
    display: block;
    padding: 12px 20px;
}

.mobile-navigation .nav-menu .submenu ul li a:hover {
    color: var(--color-primary);
}

.mobile-navigation .close {
    position: absolute;
    top: 25px;
    right: 15px;
    width: 26px;
    height: 26px;
    text-indent: -9999em;
    overflow: hidden;
}

.mobile-navigation .close:before,
.mobile-navigation .close:after {
    content: " ";
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #242424;
    border-radius: 3px;
}

.mobile-navigation .close:before {
    transform: rotate(45deg);
}

.mobile-navigation .close:after {
    transform: rotate(-45deg);
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    z-index: 101;
}

html.menu-opened {
    overflow: hidden;
}

html.menu-opened .mobile-navigation {
    -ms-transform: translateX(0);
    transform: translateX(0);
}

html.menu-opened .mobile-overlay {
    display: block;
}

.language {
    display: flex;
    align-items: center;
    padding-left: var(--padding-50-20);
}

.language a {
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-18);
    margin-left: var(--margin-15-10);
}

.language a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: #fff;
    opacity: 0;
    transition: .3s;
}

.language .on::after {
    opacity: 1;
}


/* layout */
.lnb-wrap {
    position: relative;
}

.lnb {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    z-index: 10;
}

.lnb ul {
    display: flex;
}

.lnb ul li {
    flex: 1;
    text-align: center;
    border: 1px solid #ddd;
    border-left: 0;
    background-color: #fff;
}

.lnb ul li:first-child {
    border-left: 1px solid #ddd;
}

.lnb ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
    padding: 0 15px;
    color: #878787;
    font-size: var(--font-size-18);
    ;
    line-height: 1.666em;
    letter-spacing: -.03em;
}

.lnb ul li.active {
    background: var(--color-primary);
    border: 0;
}

.lnb ul li.active a {
    color: #fff;
    font-weight: 700
}

/* main */
[data-aos=fade-up] {
    transform: translate3d(0, 100px, 0);
}

.main-visual {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: #fff;
}

.main-visual .item {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.main-visual .image {
    position: relative;
    height: 100vh;
    overflow: hidden;
    transition: 5s;
    transform: scale(1.1);
}

.main-visual .image img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 100%;
    height: auto !important;
    max-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.main-visual .main-video {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}

.main-video video {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 116.6%;
    object-fit: cover;
}

.main-visual .caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 40;
}

.main-visual .caption p {
    font-family: "Roboto", sans-serif;
    opacity: 0;
    transform: translateY(50px);
    transition: 1.4s;
    font-size: var(--font-size-80);
    font-weight: 700;
    line-height: 1.125em;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4);
}

.main-visual .caption p.t1 {
    margin-bottom: var(--margin-20-10);
    font-size: var(--font-size-60-30);
}

.main-visual .caption p.t2 {
    font-size: var(--font-size-30-20);
}

.main-visual .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    background: url("/images/main/slide_btn.svg") 50% 50% no-repeat;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 100%;
    overflow: hidden;
    text-indent: -9999em;
    line-height: 0;
    font-size: 0;
    z-index: 50;
}

.main-visual .slick-arrow:hover {
    background-color: rgba(255, 255, 255, .3);
    border: 0;
}

.main-visual .slick-prev {
    left: 140px;
}

.main-visual .slick-next {
    right: 140px;
    transform: translateY(-50%) rotate(180deg);
}

.main-visual .active .image {
    transform: scale(1);
}

.main-visual .active .caption p {
    opacity: 1;
    transform: translateY(0);
}

.main-visual .active .caption .t1 {
    transition-delay: .4s;
}

.main-visual .active .caption .t2 {
    transition-delay: .6s;
}

.main-visual .scroll {
    position: absolute;
    bottom: 60px;
    left: 50%;
    width: auto;
    margin-left: -30px;
    text-align: center;
    animation: 1.5s scrollUpDown linear infinite;
    z-index: 50;
}

@keyframes scrollUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

/* section */
.section-inner {
    padding: var(--space-130-60) 0;
}

.m-head {
    text-align: center;
}

.m-head .m-tit {
    margin-bottom: var(--margin-50-30);
    font-size: var(--font-size-80-40);
    line-height: 1em;
    color: var(--color-primary);
}

.m-head .desc p {
    margin-bottom: var(--margin-30-16);
    font-size: var(--font-size-24);
    color: #878787;
    line-height: 1.916em;
}

.m-head .desc p strong {
    font-weight: 600;
    font-size: var(--font-size-32-22);
}

.m-head.type2 .t2 {
    font-size: var(--font-size-20);
    line-height: 1em;
    color: #fff;
}

.m-head.type2 .m-tit {
    margin: var(--margin-10-5) 0 var(--margin-20-10);
    font-weight: 300;
    font-size: var(--font-size-60-30);
    line-height: 1.333em;
    color: #fff;
}

.m-head.type2 .m-tit strong {
    font-weight: 700;
}

.main-strategy {
    position: relative;
}

.main-strategy::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 657px;
    height: 579px;
    background: url(/images/main/building.jpg) no-repeat center/contain;
    z-index: -1;
}

.main-strategy::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 370px;
    height: 100vh;
    background: url(/images/main/teba.jpg) no-repeat center/cover;
    z-index: -1;
}

.main-notice {
    background: url(../images/main/bg-notice.jpg) no-repeat 50% 50%/cover;
    color: #fff;
}

.noticeSwiper {
    margin-top: var(--margin-80-40);
}

.noticeSwiper .link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
    padding: var(--padding-60-20) var(--padding-40-16);
    background-color: #fff;
}

.noticeSwiper .link .tit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    font-size: var(--font-size-28-20);
    line-height: 1.428em;
    color: #2c2c2c;
}

.noticeSwiper .link .date {
    position: relative;
    width: 100%;
    font-size: var(--font-size-14);
    color: #878787;
    line-height: 1em;
}

.noticeSwiper .link .date::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(/images/main/plus.png) no-repeat center/contain;
}

.noticeSwiper .link:hover {
    background-color: var(--color-primary);
}

.noticeSwiper .link:hover .tit,
.noticeSwiper .link:hover .date {
    color: #fff;
}

.noticeSwiper .link:hover .date::after {
    background-image: url(/images/main/plus-on.png);
}

.noticeSwiper .controls {
    width: 100%;
    max-width: 530px;
    margin: 0 auto var(--margin-40-20);
}

.noticeSwiper .controls .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.noticeSwiper .controls .btns .notice-btn {
    display: flex;
    align-items: center;
    font-size: var(--font-size-16);
    line-height: 1em;
}

.noticeSwiper .controls .btns .notice-btn.prev i {
    margin-right: 20px;
}

.noticeSwiper .controls .btns .notice-btn.next i {
    margin-left: 20px;
}

.noticeSwiper .btn-more {
    font-size: var(--font-size-20);
    line-height: 1em;
    color: #fff;
    text-decoration: underline;
}

/* sub page */
.contain {
    max-width: 1520px;
    margin: 0 auto;
    padding-left: var(--container-space);
    padding-right: var(--container-space);
}

#contArea {
    max-width: 1520px;
    padding-left: var(--container-space);
    padding-right: var(--container-space);
    margin: 0 auto;
}

#contArea.wide {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

#sub #contArea,
#sub .contain {
    max-width: 1320px;
}

.sub-title {
    font-size: var(--font-size-50);
    line-height: var(--line-height-sm);
    color: var(--color-primary);
    text-align: center;
    word-break: keep-all;
}

.sub-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    border-radius: var(--border-radius-30);
    background-color: var(--color-warning);
    font-size: var(--font-size-20);
    color: var(--color-white);
    text-align: center;
}

.real-cont {
    padding: var(--space-130-60) 0 var(--space-150-80);
}

.sub-visual {
    position: relative;
    height: 300px;
    z-index: 10;
    overflow: hidden;
}

.sub-visual .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.09);
    -ms-transform: scale(1.09);
    /* IE 9 */
    -moz-transform: scale(1.09);
    /* Firefox */
    -webkit-transform: scale(1.09);
    /* Safari and Chrome */
    -o-transform: scale(1.09);
    /* Opera */
    transition: all 2s ease-out 0s;
    transition-delay: 0.1s;
    z-index: 0;
}

.sub-visual.load .background {
    transform: scale(1);
    -ms-transform: scale(1);
    /* IE 9 */
    -moz-transform: scale(1);
    /* Firefox */
    -webkit-transform: scale(1);
    /* Safari and Chrome */
    -o-transform: scale(1);
    /* Opera */
}

.sub-visual .tt-wrap {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #fff;
    text-align: center;
}

.sub-visual .tt-wrap .tit {
    font-size: var(--font-size-48-24);
    line-height: 1.2em;
    font-weight: 700;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4);
}

/* footer2 */
#footer2 {
    background-color: #121212;
    padding: var(--padding-40-20) 0;
}

#footer2 .contain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100% !important;
}

#footer2 .foot-tit {
    font-size: var(--font-size-16);
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
}

#footer2 .foot-info {
    max-width: 560px;
}

#footer2 address {
    font-style: normal;
    display: flex;
    flex-wrap: wrap;
    font-weight: 300;
    margin: 0 -15px;
}

#footer2 address p {
    padding: 0 15px;
    color: rgba(255, 255, 255, .6);
    font-size: var(--font-size-14);
    line-height: 1.714em;
}

#footer2 address p:last-child {
    width: 100%;
}

#footer2 .foot-menu {
    display: flex;
    justify-content: flex-end;
    margin: 0 -20px;
}

#footer2 .foot-menu li {
    position: relative;
    padding: 0 20px;
}

#footer2 .foot-menu li:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: #fff;
}


#footer2 .foot-menu li a {
    position: relative;
    padding-left: 21px;
    color: #fff;
    font-size: var(--font-size-15);
    line-height: 1.466em;
}

#footer2 .foot-menu li:nth-child(1) a {
    color: #d0ae28;
}

#footer2 .foot-menu li a:before {
    content: '';
    width: 15px;
    height: 15px;
    background: url('/images/common/pop-up.png')no-repeat 50% 50%/contain;
    position: absolute;
    left: 0;
    top: 2px;
}

#footer2 .copy {
    margin-top: var(--margin-40-20);
    color: rgba(255, 255, 255, .6);
    font-size: var(--font-size-14);
    line-height: 1.714em;
    text-align: right;
    padding-top: 16px;
}

#footer2 .copy a {
    color: rgba(80, 80, 80, 0.6);
}

#footer2 .copy a:hover {
    text-decoration: underline;
}