/* banner */
#banner {width: 100%;z-index: 3;padding-top: 105px;}
#banner:before{content:'';background-image: url(/images/44/banner-wave.png);position: absolute;width: 100%;height: 300px;bottom: -60px;z-index: 2;background-size: cover;background-position: bottom;}
#banner:after{content:url(/images/44/img-bubbles1.png);position: absolute;bottom: -55px;left: 20%;z-index: 3;animation: aboutImgAnimation 10s ease-in-out infinite;}
@keyframes aboutImgAnimation {
  0% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
  25% { -webkit-transform: translateY(5px) scale(1.03); transform: translateY(5px) scale(1.03); }
  50% { -webkit-transform: translateY(10px) scale(1.06); transform: translateY(10px) scale(1.06); }
  75% { -webkit-transform: translateY(5px) scale(0.9); transform: translateY(5px) scale(0.9); }
  100% { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
#banner .item { height: 95vh; }
#banner .main-slider { }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip .bgBox { }
#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: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .item .info{background: rgb(41 41 40 / 25%);}
#banner .item .info >div {margin: 13.5% auto;width: calc(80% - 60px);}
#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: 24px;font-family: "Open Sans", sans-serif;font-weight: 300;letter-spacing: 2.2px;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 48px;letter-spacing: 1.5px;font-weight: 500;}

#banner .item.slick-current .info >div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }

/* scrollDown */
#scrollDown{position:absolute;right: 15%;bottom: 24%;z-index: 10;}
#scrollDown a{position:relative;display: flex;align-items: center;justify-content: center;}
#scrollDown a .text{position:absolute;width: 260px;animation: scrollTextRotate 20s linear infinite;transform-origin: center center;}
@keyframes scrollTextRotate {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
#scrollDown .scrollArrow {width: 32px;display: flex;flex-direction: column;align-items: center;gap: 12px;position: absolute;}
#scrollDown .scrollArrow span {display: block;width: 11px;aspect-ratio: 1/1;border-radius: 50%;background: #49a8bf;animation: dotColor 1.8s infinite ease-in-out;}
#scrollDown .scrollArrow span:nth-child(1) { animation-delay: 0s; }
#scrollDown .scrollArrow span:nth-child(2) { animation-delay: .18s; }
#scrollDown .scrollArrow span:nth-child(3) { animation-delay: .36s; }
#scrollDown .scrollArrow span:nth-child(4) { animation-delay: .54s; }
#scrollDown .scrollArrow span:nth-child(5) { animation-delay: .72s; }
@keyframes dotColor {  0%,100% { background: #49a8bf; transform: scale(1); opacity: .75; }  35% { background: #ffffff; transform: scale(1.08); opacity: 1; }  70% { background: #b8ddea; transform: scale(.96); opacity: .85; }}

@media screen and (max-width: 1366px){
    #banner:after{zoom: 70%;}
}
@media screen and (max-width: 1280px){
    #scrollDown{transform: scale(.8);}
}
@media screen and (max-width: 1024px){
    #banner:after{zoom: 50%;bottom: 35px;}
    #scrollDown{right:10%}
    #banner .item .clip video{height:100%;width: auto;}
	#banner .item { height: 85vh; }
    #banner {padding-top: 90px;}
    #banner .item .info >div{width: calc(90% - 60px);}
    #banner:before{height: 190px;bottom: -10px;}
}
@media screen and (max-width: 640px){
    #banner:after{zoom: 25%;bottom: -55px;}
    #banner:before{height: 60px;bottom: -10px;}
	#banner .item { height: 65vh; }
    #banner .item .info >div{width: calc(95% - 60px);margin-bottom: 30%;margin-top: auto;}
    #scrollDown{display:none;}
    #banner .item .info >div .txt >*{font-size: 18px;padding: 10px 0;max-width: 100%;}
    #banner .item .info >div .txt .h3{font-size: 26px;}
}