#banner {width: 100vw;z-index: 3;overflow: hidden;}
#banner img {width: 100vw;height: 90vh;}
#banner .pos_abs {width: 100vw;height: 90vh;top: 0;left: 0;}
#banner .info {padding-bottom: 10vh;height: 90vh;}
#banner .info .txt { margin: auto; }
#banner .info .txt * { font-weight: 400; color: var(--white); opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px); }
#banner .info .txt h3 { letter-spacing: 5px; font-size: 50px;  }
#banner .info .txt p { font-weight: 300; font-size: 18px; }
#banner a.pos_abs { z-index: 2; }
#banner video , #banner iframe {position: absolute;width: 100%;height: 100%;top: 0;left: 0;object-fit: cover;}

/* scrollBtn */
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,15px)}
100%{transform:translate(0px,0px)}
}.page-scroll{bottom: 0;z-index:888;text-align:center;position:absolute;left: 50%;transform: translate(-50%,0%);}
.page-scroll p{
    color: #fff;
    font-family: 'Cardo', serif;
    font-size: 15px;
    position: relative;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -170%);
}
.page-scroll a{-webkit-transition:opacity .3s;transition:opacity .3s;text-transform:uppercase;display:flex;flex-direction: column;animation-direction:alternate;}
.page-scroll.style01 a b{
    position: absolute;
    top: 50px;
    \: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px #fff solid;
    left: 50%;
    transform: translate(-50%, -50%);
}
#banner .page-scroll.style01 a b img{
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.page-scroll.style01 a span{
    position: relative;
    display: block;
    width: 1px;
    height: 190px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    }

.page-scroll.style01 a span::after {
    content: '';
    position: absolute;
    top: 70px;
    width: 1px;
    height: 100%;
    background-color: #fff;
    animation: hero-scroll 3s cubic-bezier(.54, .09, .17, 1) infinite;
}
@keyframes hero-scroll {
  0% {
    top: -100%;
  }
  100% {
    top: 200%;
  }
}

/* slick-current */
#banner .slick-current .info .txt * { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: .3s; -webkit-transition-delay: .3s; }
#banner .slick-current .info .txt p { letter-spacing: 2px; transition-delay: .6s; -webkit-transition-delay: .6s; }

@media screen and (min-width: 1281px){
	header #webmenu .top_btn { height: 90vh; }
}
@media screen and (max-width: 768px){
    .page-scroll{
    bottom: -80px;
}
    .page-scroll.style01 a span{
    height: 170px;
}
    .page-scroll p{transform: translate(-50%, -100%);}
    .page-scroll.style01 a b{
    width: 60px;
    height: 60px;
    top: 20%;
}
    #banner ,#banner .pos_abs{
    height: 60vh;
}
}