/* banner */
#banner { width: 100vw; z-index: 5; }
#banner .item { height: 100vh; }
#banner .item .clip >* { min-width: 100vw; width: 100vw; }
#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%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
#banner .item a{
    z-index: 9;
    pointer-events: auto;
}
#banner .item .info { display: flex; flex-direction: column; justify-content: flex-end; z-index: 6; }
#banner .mask_bg { position: absolute; width: 100%; height: 100%; z-index: 1; }
#banner .mask_bg img { height: 100%; object-fit: cover; }
#banner,#banner * { transition: all 0s ease-in-out; -webkit-transition: all 0s ease-in-out; }
#banner .item .info >div {width: calc(100% - 60px);margin-left: 50vw;margin-bottom: 100px;}
#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; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* { padding: 10px 15px; max-width: calc(100% - 30px); font-size: 1.05rem; color: #f5f3ee; text-shadow: -1px 2px 3px rgb(37 30 21/65%); }

#banner .item .info >div .txt .h3 { padding: 0; margin-bottom: 15px; line-height: 120%; font-size: 3rem; color: white; font-weight: 600; text-shadow: -1px 4px 3px rgb(37 30 21/65%); animation: typing 2.5s steps(10,end) 0.5s forwards,blink-caret 0.8s step-end infinite; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; border-right: 3px solid #3a281c; max-width: 0; animation: typingLoop 7.5s step-end 0.5s infinite,blink-caret 0.8s step-end infinite; display: inline-block; }
#banner .item .info .indetext:before { content: ""; position: absolute; width: 3px; height: 57px; background: #f5f3ee; left: 0px; }
#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 .slick-dots { bottom: 40px; width: auto; left: 18vw; }
#banner .slick-dots li.slick-active button:before { color: #fff; }
#banner .slick-dots li button:before { color: #fff; font-size: 10px; }
#scrollDown {position: absolute;bottom: 2vw;display: flex;flex-direction: column;align-items: center;left: 9vw;}
#scrollDown:after {content: "";position: absolute;width: 6vw;height: 400px;margin-top: -30px;border-radius: 10px;top: 0;background: var(--secondary);z-index: 5;}
#scrollDown a {position: relative;z-index: 6;}
@keyframes typing {
  from { max-width: 0; }
  to { max-width: 10.5em; }
}
@keyframes typingLoop {
  0% { max-width: 0; }
  3.33% { max-width: 1.1em; }
  6.66% { max-width: 2.2em; }
  10% { max-width: 3.3em; }
  13.33% { max-width: 4.4em; }
  16.66% { max-width: 5.5em; }
  20% { max-width: 6.6em; }
  23.33% { max-width: 7.7em; }
  26.66% { max-width: 8.8em; }
  30% { max-width: 9.9em; }
  33.33%,99% { max-width: 11.5em; }
  100% { max-width: 0; }
}
@keyframes blink-caret {
  from,to { border-color: transparent; }
  50% { border-color: #ffffff; }
}
@media screen and (min-width:1441px) and (max-width:1640px) {
  #scrollDown { left: 3vw; bottom: -20vw; }
}
@media screen and (max-width: 1470px) {
  #scrollDown {bottom: 3vw;left: 10vw;}
  #banner .slick-dots { left: 12vw; }
  #banner .item .info >div{margin-left: 36vw;}
  #banner .item .info >div .txt .h3{font-size: 2.5rem;}
}
@media screen and (max-width:1280px) {
  #scrollDown { bottom: -27vw; }
}
@media screen and (max-width:1024px) {
  #banner .slick-dots { left: 5vw; }
  #scrollDown { display: none; }
  #banner .item { height: 90vh; }
  #banner .item .clip .bgBox { background-position: 30% 50%; }
}
@media screen and (max-width:980px) {
  #banner .item { height: 70vh; }
  #banner .item .clip .bgBox { background-position: 20% 50%; }
}
@media screen and (max-width:640px) {
   #banner .item .info >div .txt .h3{font-size: 2rem;}
  #banner .item .info >div .txt .indetext{font-size: 0.9rem;}
  #banner .item .info >div{margin-left: 5vw;width: 90vw;}
  #banner .item { height: 55vh; }
  #banner .item .clip .bgBox { background-position: 20% 50%; }
}