#banner{width:100vw;z-index:3;position:relative;background-color: #fff;}
#banner .vimgbg::before{content:'';position:absolute;bottom:-2%;left:16%;width:550px;aspect-ratio:3/4;background-image:url(/images/39/img-bn-hatta.png);background-size:contain;background-repeat:no-repeat;z-index:4}

#banner .vimgshadow,#banner .vimgbg{width:100%}
#banner .vimgshadow::after{position:absolute;bottom:0;left:0;z-index:15;content:"";width:auto;height:100%;display:block;background:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));pointer-events:none}
#banner .img{overflow:hidden;display:inline-block}
#banner img{position:relative;width:100vw;min-width:100vw;height:100vh;background:no-repeat 50% / cover}
#banner .main-slider{position:relative}
#banner .main-slider:before{}
#banner .pos_abs{width:100vw;height: 100vh;top:0;left:0}
#banner video{overflow:hidden;position:absolute;min-width:100%;width:auto;/* height: 100%; */bottom:0;}
#banner video,#banner iframe{left:0;top: 0;left:50%;transform: translate(-50%,-10%);}
#banner .info{height:100vh;}
#banner .info .txt{transition:all 0.7s ease;max-width:88%;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:flex-end;padding:0px 60px 0px;z-index:2;width:100%;height:60%;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0px}
#banner .info .txt *{font-weight:200;color:var(--white);opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt em{font-family:'Poppins',sans-serif;font-style:initial;margin-bottom:15px;letter-spacing:0.5px;font-weight:300}
#banner .info .txt h3{letter-spacing:2px;font-size:70px;text-align:center;line-height:130%;font-weight:700;font-family:'Noto Serif TC',serif;text-transform:uppercase;color:#ffffff;position:relative;position:relative;margin-bottom:30px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;color:#e8e8e8;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#banner .info .txt{transition:all 0.7s ease;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;padding:90px 0px 0px;z-index:5;width:80%;height:100%;margin:auto;position:absolute;top:0px;left:0;right:0;bottom:0;align-items:center}
#banner .info .txt h3,#banner .info .txt p{color:var(--white);opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt article{text-align:center;font-family:'Roboto',sans-serif;font-size:22px;font-weight:600;text-transform:uppercase}
#banner .info .txt p{letter-spacing:15px;text-align:left;font-weight:400;font-size:24px;letter-spacing:4px;text-align:center}
#banner .info .txt .bannerBtn{opacity:0;margin-top:20px;display:block;width:260px;height:50px;pointer-events:auto}
#banner .info .txt .bannerBtn a{position:relative;color:#fff;display:block;width:100%;height:100%;letter-spacing:0.5px;overflow:hidden}
#banner .info .txt .bannerBtn .btnText:hover{color:#000}
#banner .info .txt .bannerBtn .btnText:hover::before{background-color:#eee}
#banner .info .txt .bannerBtn .btnText:hover span::before{border-color:transparent transparent transparent #000}
#banner .info .txt .bannerBtn .btnText:hover span::after{background-color:#000}
#banner .info .txt .bannerBtn .btnText{position:relative;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;padding:0px 20px;z-index:1;font-family:'Quantico',sans-serif;text-transform:uppercase;text-align:center;justify-content:space-between;font-size:13px;font-weight:400;align-items:center;-webkit-box-shadow:inset 0 0 0 2px #fff;box-shadow:inset 0 0 0 2px #fff;background-color:transparent}
#banner .info .txt .bannerBtn span{-webkit-animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite;animation:btnArrow 1s cubic-bezier(0.4,0,0.6,1) infinite;padding-left:35px;padding-right:35px;position:relative;display:inline-block}
#banner .info .txt .bannerBtn span::after{content:"";position:absolute;top:68%;left:20px;margin-top:-9px;width:45px;height:20px;background-image:url(/images/39/bn_arrow_white.png);background-size:contain;background-repeat:no-repeat;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#banner .info .txt .bannerBtn span::before{content:"";z-index:0;position:absolute;right:30px;top:-25px;width:110px;height:49px;-webkit-transform:skewX(45deg) translateX(30px);transform:skewX(45deg) translateX(30px);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;border-left:3px solid #fff}
#banner a.pos_abs{z-index:2}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s}
#banner .slick-current .info .txt p{transition-delay:.6s;-webkit-transition-delay:.6s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1);opacity:1;-webkit-transition:-webkit-transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s;transition:transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s}
#banner .arrow_bg{width:450px;height:140px;left:auto;bottom:-140px;transform-origin:100% 100% 0;display:none}
#banner .arrow{width:50px;display:flex;justify-content:space-between;padding:0 30px;position:absolute;z-index:10;flex-direction:column;left:1%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:none}
#banner .arrow a{width:45px;height:45px;line-height:55px;border:1px solid #fff;border-radius:50%;display:flex;opacity:.65;flex-direction:column;justify-content:center;align-items:center;margin:5px}
#banner .arrow a.prev{-webkit-transform:rotate(180deg)}
#banner .arrow a svg{fill:#ffffff;width:13px}
#banner .arrow a:hover{opacity:1;background-color:#003b71;border:1px solid #003b71}
#banner .arrow a i{color:#fff}
.section1-dots-line{border-bottom:1px solid rgba(255,255,255,0.1);width:100%;position:absolute;bottom:100px;z-index:100}

@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,5px)}
100%{transform:translate(0px,0px)}
}
.page-scroll{bottom:25px;margin-left:0;right:0;z-index:888;text-align:center;position:absolute;width:110px;z-index:10}
.page-scroll a{color:#fff;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;text-transform:uppercase;display:flex;flex-direction:column;animation:web_menu002 ease-in-out 4s infinite;animation-direction:alternate;align-items:center}
.page-scroll.style01 a b{color:#ffffff;font-weight:600;font-size:13px;letter-spacing:1.5px;font-family:'Quantico',sans-serif}
.page-scroll.style01 a span{background-image:url(/images/39/scroll.gif);background-size:contain;width:19px;height:30px;margin-bottom:10px}
#bawaves{margin-top:-8%}
.waves{position:relative;width:100vw;min-width:100vw;height:17vh;min-height:100px;max-height:150px;z-index:4}
.parallax > use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite}
.parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s}
.parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s}
.parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s}
.parallax > use:nth-child(4){animation-delay:-5s;animation-duration:20s}

@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}
100%{transform:translate3d(85px,0,0)}
}
@media screen and (max-width:1660px){
    .page-scroll{}
}
@media screen and (max-width:1440px){
    #bawaves{margin-top: -13%;}
    #banner .info .txt{height:10%;}
    #banner .info .txt h3{font-size:42px}
    #banner .slick-current .info .txt p{font-size:20px}
    #banner img{width:100%;height:100vh;background:no-repeat 50% / cover}
}
@media screen and (max-width:1280px){
    #banner img{width:100%;height:100vh}
    #scrollBtn,#banner:before{display:none}
    #banner .info .txt h3{font-size:40px}
    #banner .info .txt p{font-size:16px;width:50%}
    #banner .info .txt{height:0%;top:100px}
    #banner .slick-current .info .txt p{font-size:18px}
    #banner .info .txt .bannerBtn{}
    #banner .info .txt .bannerBtn span::after{width:calc(100% - 25px)}
    #banner .info .txt .bannerBtn span{right:-25px;width:40px}
}
@media (max-width:1180px){
    #banner video,#banner iframe{height:100vh}
}
@media screen and (max-width:1140px){
    #banner:before,#banner .arrow{display:none}
    #banner .arrow{right:0}
    #banner img,#banner .info,#banner video, #banner iframe{height: 80vh;}
}
@media screen and (max-width:1024px){
    #banner .vimgbg::before{width:380px}
}
@media screen and (max-width:960px){
    #banner .info .txt h3{font-size:33px}
    #banner .info .txt p{font-size:15px;width:70%}
    #banner .info .txt .bannerBtn a{width:200px}
    #scrollBtn,.section1-dots-line{display:none}
    #bawaves{margin-top:-30%}
}
@media screen and (max-width:560px){
    #bawaves{
    /* margin-top: -30%; */
}
    #banner .info .txt{width:100%}
    #banner .info .txt article{font-size:18px;font-weight:300}
    #banner .info .txt p{font-size:14px;width:100%}
    #banner .slick-current .info .txt p{letter-spacing:1.2px}
    #banner .info .txt h3:before{bottom:-31px;width:1px;height:25px}
    #banner img,#banner .info,#banner video, #banner iframe{
    height: 50vh;
    transform: translate(-50%, 0%);
}
    #banner .vimgbg::before{width:350px;left:-20%}
    #banner .info .txt{top: 100px;}
}