#banner{width:100%;height: 100%;z-index: 12;position:relative;background: var(--primary);}
#banner .item{position:relative;}
#banner::after {content: "";width: 100%;height: 400px;display: block;background: url(/images/39/bn-bottom-bg.png);background-repeat: no-repeat;background-position: bottom;position: absolute;bottom: -250px;right: 0;z-index: 0;pointer-events: none;}
#banner .wrap{margin: auto;align-items: center;}
#banner .img{overflow:hidden;display:inline-block}
#banner .img img{position:relative;width: 100%;height: 100%;margin: auto;}
#banner a.pos_abs{z-index:2}
#banner .info .text *{margin:0;color: var(--white);font-size: 1.4rem;letter-spacing: 6.5px;}
#banner .info .text{position:relative;margin:150px auto 0;display:flex;gap:16px;align-items:flex-end;justify-content:center}
#banner .info .text p:nth-child(2){position:relative;display:flex;justify-content:center;flex-direction:column;align-items:flex-start;height:30px;overflow:hidden}
#banner .info .text .belize{transform:translateY(-26px)}
#banner .info .text .wisteria{transform:translateY(15px)}
#banner .info .letter{display:inline-block;transition:all 0.3s ease;opacity:0;transform:translateY(0px)}
#banner .info .letter.in{opacity:1;transform:translateY(0px)}
#banner .info .letter.out{opacity:0;transform:translateY(0px)}
#banner .info .letter.behind{opacity:0;transform:translateY(20px)}
#banner  .info{opacity:1;position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:60}
#banner .more_btn a{border-radius:30px 0 30px 0px}
#banner #ripple{opacity:.2}


/* scrollBtn */
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,15px)}
100%{transform:translate(0px,0px)}
}.page-scroll{bottom: 39%;margin-left:0;z-index:888;text-align:center;position:absolute;right: 80px;transform: translate(-50%,25%);}
.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;}
.page-scroll.style01 a b{font-size: 14px;letter-spacing: 2.5px;writing-mode: vertical-rl;font-family: 'Cormorant', sans-serif;color: var(--white);}
.page-scroll.style01 a span::after{content:"";position:absolute;top: 0;right: 0;z-index:1;width: 28px;height: 90px;-webkit-filter: contrast(0) brightness(200%);filter: contrast(0) brightness(200%);background: url(/images/39/img-bn-arrow.png);background-size:cover;background-repeat:no-repeat;animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite;-webkit-animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite}
@keyframes scrollarrow1{0%{transform:translateY(-200%)}
50%{transform:translateY(0%)}
to{transform:translateY(100%)}
}
@-webkit-keyframes scrollarrow1{0%{-webkit-transform:translateY(-200%)}
50%{-webkit-transform:translateY(0%)}
to{-webkit-transform:translateY(200%)}
}
.page-scroll.style01 a span{position:absolute;right:0;background-size:cover;background-repeat:no-repeat;top: -130px;left: 0;overflow:hidden;width: 26px;height: 90px;}

#headBan{position:relative}



@media screen and (max-width: 1470px) {
	#banner .wrap{grid-template-columns:740px 1fr;}
    #banner .img img{width:84%;height:84%}
	#banner .info .txt{margin:310px auto}
}

@media screen and (max-width: 1280px) {
	#banner,#banner .item img{height: 90vh;}
}
@media (max-width: 1180px) {
    #banner:before,.page-scroll,#banner #ripple,#banner #ripple{display:none}
}
@media screen and (max-width: 960px) {
    #banner .info .txt h2{font-size: 60px;}
	#banner .wrap{height:40vh}
	#banner .img img{width:100%;height:70%}
 	#scrollBtn{display:none}
    #banner,#banner .item img{height: 67vh;}
    #banner::after{background-size:cover;height:150px;bottom:-100px}
}
@media screen and (max-width: 560px) {
    #banner .info .txt{margin:220px auto 0;width: 98%;gap: 10px;}
	#banner .info .txt h2{font-size:50px}
    #banner,#banner .item img{height: 50vh;}
}