﻿
.billboard {
 display: block;
 margin-top: 50px
}

.billboard-img {
 background: transparent center center no-repeat;
 -webkit-background-size: cover;
 background-size: cover;
 overflow: hidden
}

body.has-topBanner .billboard-hero {
 height: 650px;
 height: calc((var(--vh, 1vh) * 100) - 70px - 50px)
}

.billboard-hero {
 position: relative;
 width: 100%;
 height: calc(100vh - 85px);overflow: hidden;
/* height: calc((var(--vh, 1vh) * 100) - 70px)*/
}

.billboard-hero .swiper-container {
 height: 100%
}

.billboard-hero .swiper-wrapper {
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateZ(0)
}

.billboard-hero .swiper-slide {
 height: 100%;
 overflow: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0)
}

.billboard-hero__inner {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 background: transparent center center no-repeat;
 -webkit-background-size: cover;
 background-size: cover
}

.billboard-hero__inner div{text-align: left;color: #fff;display: block;width: 100%;}
.billboard-hero__inner h2 i{font-size: 17px;display: block;font-style: normal;font-weight: normal;letter-spacing: 0;}
.billboard-hero__inner h2{font-size: 43px;display: block;width: 100%;line-height: 1.2;font-weight: bold;letter-spacing: -.5px;}
.billboard-hero__inner p{font-size: 17px;display: block;margin-top: 15px;letter-spacing: -.5px;}

.billboard-hero__img {
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);display: none;
}

.billboard-hero__caption {
 position: absolute;
 top: 45%;
 left: 150px;
 right: 0;
 z-index: 2;
 transform: translateY(-50%);
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: start;
 -ms-flex-align: start;
 align-items: flex-start
}

.billboard-hero__caption .row {
 width: 100%
}

.billboard-hero__caption .fadeUp__item {
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transition: all 1.5s easeOut;
 -moz-transition: all 1.5s easeOut;
 -ms-transition: all 1.5s easeOut;
 -o-transition: all 1.5s easeOut;
 transition: all 1.5s easeOut;
 -webkit-transform: translateY(60px) translateZ(0);
 -moz-transform: translateY(60px) translateZ(0);
 -ms-transform: translateY(60px) translateZ(0);
 -o-transform: translateY(60px) translateZ(0);
 transform: translateY(60px) translateZ(0)
}

.fadeUp__item {
    opacity: 0;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px);
}

.billboard-hero__caption .heading-big .text-inner {
 line-height: 1
}

.billboard-hero__caption .label-text .text-inner {
 line-height: 26px
}

.billboard-hero .video__iframe {
 width: 100%;
 height: 100%;
 object-fit: cover
}

.billboard-hero .slide-controls {
 position: relative;display: block;
 z-index: 5;
 text-align: center;left: 50%;bottom: 45px;transform: translateX(-50%);color: #fff;font-size: 13px;width: 450px;height: 20px;
}

.billboard-hero .slide-controls .slide-fraction {
 width: 50px;
position: absolute;line-height: 1.5;background: rgba(255, 255, 255, 0.2);border-radius: 50px;right: 0;
}

.billboard-hero .slide-controls .slide-fraction .text-inner {
 font-weight: 200
}

.billboard-hero .slide-controls .slide-fraction .slide-fraction__active {
 font-weight: 500
}

.billboard-hero .slide-controls .slide-scrollbar {
width: 370px;height: 3px;top: 50%;transform: translateY(-50%);
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #fff;}





.main-hub .billboard-membership .card-banner {
 opacity: 1;
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0)
}

.main-hub .fixed-board__img {
 display: none
}

.main-hub .billboard-type {
 margin-right: 10px
}

.main-hub .billboard-fadeUp {
 display: block
}

.main-hub .billboard-main-1,
.main-hub .billboard-main-2 {
 overflow: hidden
}

.main-hub .billboard-main-3 {
 overflow: hidden
}

.main-hub .billboard-main-3 .billboard-row {
 padding-bottom: 60px
}

.main-hub .billboard-hero .btn-prev {
    margin: 0;
    right: auto;
    left: 0;    background: none;
}

.main-hub .billboard-hero .btn-next {
    margin: 0;
    left: auto;
    right: 0;    background: none;
}

.billboard-hero .btn-icon {
    position: absolute;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
    width: 128px;
    height: 128px;
    padding: 33px;transition: .5s;
}

.billboard-hero .btn-icon .icon {
    width: 62px;
    height: 62px;
}

.icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: transparent no-repeat center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: 0/0 a !important;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.icon.icon-chevron-left-slim.icon-white {
    background-image: url(//cdn.ananti.kr/plf/ui/img/icon/icon-chevron-left-slim__white.svg);
}

.icon.icon-chevron-right-slim.icon-white {
    background-image: url(//cdn.ananti.kr/plf/ui/img/icon/icon-chevron-right-slim__white.svg);
}


body.has-topBanner .billboard-hero_sub {
 height: 650px;
 height: calc((var(--vh, 1vh) * 100) - 70px - 50px)
}

.billboard-hero_sub {
 position: relative;
 width: 100%;
 height: calc(100vh - 52px);overflow: hidden;margin-top: -85px;
/* height: calc((var(--vh, 1vh) * 100) - 70px)*/
}

.billboard-hero_sub .swiper-container {
 height: 100%
}

.billboard-hero_sub .swiper-wrapper {
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateZ(0)
}

.billboard-hero_sub .swiper-slide {
 height: 100%;
 overflow: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0)
}

.billboard-hero_sub__inner {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 background: transparent left center no-repeat;
 -webkit-background-size: cover;
 background-size: cover
}

.billboard-hero_sub__inner div{text-align: left;color: #fff;display: block;width: 100%;}
.billboard-hero_sub__inner h2 i{font-size: 17px;display: block;font-style: normal;font-weight: normal;letter-spacing: 0;}
.billboard-hero_sub__inner h2{font-size: 43px;display: block;width: 100%;line-height: 1;font-weight: bold;letter-spacing: -.5px;}
.billboard-hero_sub__inner p{font-size: 17px;display: block;margin-top: 15px;letter-spacing: -.5px;}

.billboard-hero_sub__img {
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);display: none;
}

.billboard-hero_sub__caption {
 position: absolute;
bottom: 125px;
 left: 50px;
 right: 0;
 z-index: 2;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: start;
 -ms-flex-align: start;
 align-items: flex-start
}

.billboard-hero_sub__caption .row {
 width: 100%
}

.billboard-hero_sub__caption .fadeUp__item {
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transition: all 1.5s easeOut;
 -moz-transition: all 1.5s easeOut;
 -ms-transition: all 1.5s easeOut;
 -o-transition: all 1.5s easeOut;
 transition: all 1.5s easeOut;
 -webkit-transform: translateY(60px) translateZ(0);
 -moz-transform: translateY(60px) translateZ(0);
 -ms-transform: translateY(60px) translateZ(0);
 -o-transform: translateY(60px) translateZ(0);
 transform: translateY(60px) translateZ(0)
}


.billboard-hero_sub__caption .heading-big .text-inner {
 line-height: 1
}

.billboard-hero_sub__caption .label-text .text-inner {
 line-height: 26px
}

.billboard-hero_sub .video__iframe {
 width: 100%;
 height: 100%;
 object-fit: cover
}

.billboard-hero_sub .slide-controls {
 position: relative;display: block;
 z-index: 5;
 text-align: center;left: 50%;bottom: 45px;transform: translateX(-50%);color: #fff;font-size: 13px;width: 450px;height: 20px;
}

.billboard-hero_sub .slide-controls .slide-fraction {
 width: 50px;
position: absolute;line-height: 1.5;background: rgba(255, 255, 255, 0.2);border-radius: 50px;right: 0;
}

.billboard-hero_sub .slide-controls .slide-fraction .text-inner {
 font-weight: 200
}

.billboard-hero_sub .slide-controls .slide-fraction .slide-fraction__active {
 font-weight: 500
}

.billboard-hero_sub .slide-controls .slide-scrollbar {
width: 370px;height: 3px;top: 50%;transform: translateY(-50%);
}


.main-hub .billboard-hero_sub .btn-prev {
    margin: 0;
    right: auto;
    left: 0;    background: none;
}

.main-hub .billboard-hero_sub .btn-next {
    margin: 0;
    left: auto;
    right: 0;    background: none;
}

.billboard-hero_sub .btn-icon {
    position: absolute;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
    width: 128px;
    height: 128px;
    padding: 33px;
}

.billboard-hero_sub .btn-icon .icon {
    width: 62px;
    height: 62px;
}

