/* banner */
#banner { z-index: 3; }
#banner .item { height: 95vh; }
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#banner .item .clip .bgBox { transform: scale(1.2); -webkit-transform: scale(1.2); }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; object-fit: cover; }
#banner .item .info >div { margin: auto auto 13%; width: 45vw; display: flex; flex-direction: column; align-items: center; }
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; transform: scaleX(0); -webkit-transform: scaleX(0); transform-origin: 0 0; -webkit-transform-origin: 0 0; margin: 20px 0 40px 0; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* { font-size: 22px; line-height: 2; font-weight: 300; }
#banner .item .info >div .txt p { text-shadow: 0 4px 15px rgba(0,0,0,0.6); }
#banner .item .info >div .txt .h3 { margin-bottom: 15px; line-height: 120%; font-size: 35px; }
#banner .item .h3tt .h3 { font-family: "Anybody",serif; font-size: max(4.5 * (1vw + 1vh)/2,35px); font-weight: 500; line-height: 1.3; text-align: center; text-shadow: 0 2px 8px rgb(0 0 0/42%); }
#banner .item.slick-current .clip .bgBox { -webkit-animation: scale_banner 6s linear infinite; animation: scale_banner 6s linear infinite; }
#banner .item.slick-current .info >div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }
#banner .item .h3tt { display: flex; flex-direction: column; align-items: center; }
#banner .atag_item:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgb(0 0 0/18%); }
#banner .btn { position: absolute; display: flex; align-items: center; justify-content: space-between; bottom: 46%; left: 20vw; padding: 0; z-index: 3; width: 60vw; }
#banner .btn button { display: flex !important; !i; !; align-items: center; justify-content: center; border: 1px solid rgb(221 221 221/25%); ); width: 70px; aspect-ratio: 1/1; border*-r: 5; margin: 10px 0; border-radius: 50px; background: var(--primary); }
#banner .btn button:hover { background: #dbdbdb; }
#banner .btn button:hover svg { fill: #2c2b2a; }
#banner .btn button svg { width: 13px; height: 13px; fill: var(--white); }
#banner .btn button#banner_next svg { transform: scaleX(-1); }
#banner .info { z-index: 2; }
#banner .slick-dots { bottom: 52%; width: auto; display: flex !important; flex-direction: column; align-items: center; left: 5.5%; justify-content: flex-end; }
#banner .slick-dots li { margin: 5px 0; }
#banner .slick-dots li button { border: 1px solid #75757500; border-radius: 50px; }
#banner .slick-dots li.slick-active button { border: 1px solid rgb(255 255 255/25%); }
#banner .slick-dots li button:before { opacity: 1; color: #ffffff }
#banner .text-js { opacity: 1; font-size: max(2.6 * (1vw + 1vh)/2,20px); color: #ffffff; font-weight: 400; text-transform: uppercase; line-height: 1.5; letter-spacing: 2px; min-height: 65px; }
#banner .cursor { display: block; position: absolute; height: 110%; top: 0; right: -5px; width: 1px; background-color: transparent; z-index: 1; animation: flash 0.5s none infinite alternate }
#banner .marquee-bg { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; overflow: hidden; white-space: nowrap; z-index: 1; pointer-events: none; opacity: 0.5; }
#banner .marquee-text { font-size: 15vw; font-weight: 900; color: transparent; -webkit-text-stroke: 2px #eaeaea; text-transform: uppercase; display: inline-block; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { display: flex; width: 200%; animation: marquee 30s linear infinite; opacity: 0.25; }
@keyframes flash {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
@-webkit-keyframes scale_banner {
  to { -webkit-transform: scale(1); }
}
@keyframes scale_banner {
  to { transform: scale(1); }
}
@media screen and (max-width:1470px) {
  #banner .btn {   }
  #banner .item .info >div .txt >* { font-size: 18px; }
  #banner .item .info >div { margin: auto auto 14%; }
  #banner .item .info >div .txt { margin: 20px 0; }
  #banner .text-js { min-height: 43px; }
}
@media screen and (max-width:1024px) {
  #banner .item { height: 85vh; }
  #banner .item .info >div { width: 60vw; }
  #banner .btn { width: 80vw; left: 10vw; bottom: 37%; }
  #banner .slick-dots { display: none!important; }
}
@media screen and (max-width:640px) {
  #banner .item .info >div .txt >* {font-size: 14px;text-align: center;}
  #banner .item .info >div {width: 67%;margin: auto auto 55px;}
  #banner .slick-dots,#banner .btn { display: none !important; }
  #banner .more_btn { display: none; }
  #banner .item { height: 65vh; }
  #banner .text-js {min-height: 40px;}
}

@media screen and (max-width:480px) {
  #banner .item{
    height: 500px;
}
}