#headBan{position:relative}
#banner{z-index:3;position:relative;height:100%;width:calc(100% - 0px)}
#banner::before{position:absolute;top:0;left:0;z-index:15;content:"";width:100%;height:240px;display:block;background:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.4));pointer-events:none}
#banner .bannerList{}
#banner .img{overflow:hidden;display:inline-block}
#banner .img::after{position:absolute;bottom:0;left:0;z-index:0;content:"";width:100%;height:350px;display:block;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.7));pointer-events:none}
#banner video{overflow:hidden;position:absolute;min-width:100%;width:auto;height:auto;bottom:0}
#banner video,#banner iframe{left:0;bottom:0px;left:50%;transform:translate(-50%,0%)}
#banner img{position:relative;width:100vw;height:100vh;background:no-repeat 50% / cover}
#banner .pos_abs{width:100vw;height:100vh;top:0;left:0}
#banner .info{padding-bottom:0;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:'Saira',sans-serif;font-style:initial;margin-bottom:15px;letter-spacing:0.5px;font-weight:300}
#banner .info .txt h3{letter-spacing:2px;font-size:21px;text-align:initial;line-height:150%;font-weight:200;letter-spacing:23px;text-transform:uppercase;position:relative;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;animation:fadeIn 1s both;-webkit-animation:fadeIn 1s both;color:#fff}
#banner .info .txt h3::after{position:absolute;content:"";width:40px;height:2px;background-color:#ffffff;top:-30px;left:0}
#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:flex-start;padding:0px 0px 0px;z-index:60;width:100%;height:90%;margin:auto auto 0;position:absolute;left:0;right:0;bottom:0;align-items:flex-start}
#banner  .lqd-vslider-menu{position:absolute;top:0;left:0;width:95%;height:100%;z-index:99}
#banner .lqd-vslider-menu ul{display:flex;justify-content:space-between;height:100vh}
#banner .lqd-vslider-menu ul li{flex-basis:33.3333333333%;border-right:1px solid rgba(255,255,255,.2);font-size:18px;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;z-index:99}
#banner .lqd-vslider-menu ul li p{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;padding:40px;letter-spacing:3px;font-size:22px;font-family:'Saira',sans-serif}
#banner .info .txt h3,#banner .info .txt p{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:500;font-size:18px;letter-spacing:1px;margin-top:30px;padding:10px;line-height:140%;background-color:#fff;color:#000}
#banner .indexmain-tbox{position:relative;display:flex;align-items:flex-start;align-content:flex-start;justify-content:flex-start;width:100%;flex-direction:column;z-index:10}
#banner .slick-current .indexmain-tbox .indexmain-line{position:absolute;top:-40px;left:200px}
#banner .slick-current .indexmain-tbox .indexmain-line:after{content:"";width:130px;height:4px;background-color:#fff;transform:rotate(-90deg) scaleX(1);transition:transform 0.5s,opacity 0.5s;position:absolute;color:#fff;top:111px;left:112px}
#banner .slick-current .indexmain-tbox .indexmain-line:before{content:"";width:190px;height:4px;background-color:#fff;transform:rotate(-150deg) scaleX(1);transition:transform 0.5s,opacity 0.5s;position:absolute;color:#fff;top:0;left:0}
#banner .indexmain-bot,#banner .slick-current .indexmain-bot{position:relative;font-family:'Saira',sans-serif;letter-spacing:1.5px;padding-bottom:60px;padding-top:50px;font-size:40px;font-weight:200;letter-spacing:2px;z-index:10;text-transform:uppercase;line-height:120%}
#banner .vimgshadow{width:100%;position:relative}
#banner .vimgshadow:before{content:'';background-image:url(/images/39/img-banner-01.png);width:700px;height:710px;position:absolute;bottom:-90px;right:-40px}
#banner::after{position:absolute;bottom:0;left:0;z-index:-1;content:"";width:100%;height:380px;display:block;background:linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0));pointer-events:none}
#banner .info .txt .bannerBtn{opacity:0;margin-top:40px;display:block;width:220px;height:50px;pointer-events:auto;display:none}
#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::before{content:"";position:absolute;top:0;right:0;width:100%;height:100%;border:1px solid #fff;-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#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;align-items:center;padding:0px 25px;z-index:1;text-transform:uppercase;text-align:center;justify-content:center;font-size:12px;font-weight:300}
#banner .info .txt .bannerBtn span{position:absolute;top:50%;right:-5px;width:45px;-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}
#banner .info .txt .bannerBtn span::after{content:"";position:absolute;top:30%;left:0;margin-top:-1px;width:calc(100% - 5px);height:1px;background-color:#fff;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#banner a.pos_abs{z-index:2}
#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 .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 0px;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 rgb(255 255 255 / 17%);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:rgb(0 0 0 / 21%);border:1px solid rgb(255 255 255 / 17%)}
#banner .arrow a i{color:#fff}

/* scrollBtn */
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,70px)}
100%{transform:translate(0px,0px)}
}

.page-scroll{bottom:100px;margin-left:0;left:-48px;z-index:888;text-align:center;position:absolute}
.page-scroll a{letter-spacing:3.5px;display:inline-block;color:#fff;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;text-transform:uppercase;display:flex;align-items:center;flex-direction:row}
.page-scroll.style01 a b{color:#1a1a1a;font-weight:500;font-size:12px;letter-spacing:1.5px;font-family:'Saira',sans-serif;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl}
.page-scroll.style01 a span::after{display:block;height:70px;content:"";background:#cccccc;width:1px;transform:translateY(0) translateX(-50%);left:50%;bottom:0;position:absolute}
.page-scroll.style01 a span::before{content:'';width:8px;height:8px;background:#000000;position:absolute;bottom:70px;left:1px;z-index:10;animation:web_menu002 ease-in-out 4s infinite;animation-direction:alternate}
.page-scroll.style01 a span{position:absolute;right:0;bottom:-100px;transform:translateY(0) translateX(-50%);left:50%}


@media screen and (max-width: 1440px) {
    #banner .info .txt{height:90%}
    #banner img{width:100%;height:100vh;background:no-repeat 50% / cover}
    #banner .vimgshadow:before{background-size:cover;width:490px;height:490px;bottom:-20px}
    #banner .vimgshadow p{font-size:150px;display:none}
}
@media screen and (min-width: 1367px){  
    #banner{z-index:3;position:relative;margin:0 30px 0 70px;height:100%;width:calc(100% - 100px)}
}
@media screen and (max-width: 1280px) {
    #banner{padding-top:50px}
    #banner img{margin:0 auto 0px;width:100%;height:100vh}
    #scrollBtn,#banner:before{display:none}
    #banner .info .txt p,#banner .info .txt h3{}
    #banner .info .txt{height:100%}
    #banner .info .txt .bannerBtn{width:180px;margin-top:20px}
    #banner .info .txt .bannerBtn span::after{width:calc(100% - 25px)}
    #banner .info .txt .bannerBtn span{right:-25px;width:40px}
}

@media (max-width: 1180px) {
    #banner .info .txt .bannerBtn{margin-top:20px}
}

@media screen and (max-width: 1140px) {
    #banner .arrow{display:none}
    #banner .arrow{right:0}
    #banner::before{position:absolute;top:0;left:0;z-index:15;content:"";width:100%;height:150px;display:block;background:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.7));pointer-events:none}
    #banner .slick-current .indexmain-tbox .indexmain-line#banner .slick-current .indexmain-tbox .indexmain-line{}
}

@media screen and (max-width: 960px) {
    #banner .info,#banner .info .txt,#banner .lqd-vslider-menu ul{width:100%}
    #banner .info .txt h3{font-size:18px;letter-spacing:9px}
    #banner .indexmain-bot,#banner .slick-current .indexmain-bot{padding-top:10px;margin-top:20px;font-size:30px}
    #banner .slick-current .indexmain-tbox .indexmain-line:before{width:130px;height:4px;top:-66px;left:45px}
    #banner .slick-current .indexmain-tbox .indexmain-line:after{top:10px;left:120px;width:90px}
    #banner .vimgshadow:before{width:250px;height:250px;bottom:-20px}
    #banner .info .txt .bannerBtn a{width:200px}
    #scrollBtn{display:none}
    #banner .slick-current .indexmain-tbox .indexmain-line{width:120px;top:70px;left:90px}
    #banner .slick-current .info .txt p{margin-top:30px}
    #banner{width:calc(100% - 0px);margin:0}
}

@media screen and (max-width: 560px) {
    #banner .lqd-vslider-menu ul{width:auto}
    #banner .lqd-vslider-menu ul li p{padding:40px 31px;font-size:19px}
    #banner .info .txt article{font-size:18px;font-weight:300}
    #banner .info .txt p{font-size:14px}
    #banner .slick-current .info .txt p{letter-spacing:1.2px}
    #banner .info .txt h3:before{bottom:-31px;width:1px;height:25px}
    #banner .info,#banner .info .txt,#banner .lqd-vslider-menu ul,#banner img{height:74vh}
    #banner .info .txt .bannerBtn{width:120px}
    #banner .info .txt .bannerBtn .btnText{padding:0px 5px;height:40px}
    .morph{width:430px;height:430px;bottom:-270px;left:-90px}
}