#banner {width: 100vw;z-index: 3;overflow: hidden;}
#banner:before{content:'';background-image: url(/images/39/banner-bottom.png);background-repeat: no-repeat;background-position: top;background-size: cover;width: 100%;height: 75px;position: absolute;bottom: -1px;z-index: 2;}
#banner img {width: 100vw;height: 90vh;}
#banner .Img:before{content:'';width: 100%;height: 50%;position: absolute;top: 0;background: linear-gradient(0deg, rgb(0 0 0 / 0%), rgb(25 146 158 / 50%));z-index: 1;}
#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 .slick-current .info .txt p.bnTitle {letter-spacing: 5px;font-size: 50px;font-weight: 400;-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
#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;}
@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-0.5em;opacity:0}40%{opacity:0.6}100%{opacity:1}}
@keyframes tracking-in-expand{0%{letter-spacing:-0.5em;opacity:0}40%{opacity:0.6}100%{opacity:1}}


/* 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-size:15px;position:relative;top:100%;left:50%;transform:translate(-50%,-170%);font-family:header .language_box a{}
"Nunito",sans-serif}
.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);}
#banner .slick-current .info .txt p{letter-spacing:2px;}
@media screen and (min-width:1281px){
    header #webmenu .top_btn{height:90vh}
}
@media screen and (max-width:768px){
    #banner .slick-current .info .txt p.bnTitle{font-size:25px;}
    .page-scroll{bottom:-80px;display: none;}
    .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}
    
}
@media screen and (max-width:640px){
    #banner img{height:55vh}
}