/* banner */
#banner {padding-top: 88px;width: 100%;z-index: 3;}
#banner:before{content:'';position: absolute;width: 100%;height: 50%;bottom: 0;background: linear-gradient(180deg, rgb(254 251 250 / 0%) 50%, rgb(254 251 250) 100%);z-index: 1;pointer-events: none;}
#banner .item {aspect-ratio: 21/9;}
#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 >div {margin: auto;width: calc(70% - 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 >* {font-size: 18px;color: var(--secondary);letter-spacing: 1px;line-height: 2;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;font-size: 60px;font-weight: 600;letter-spacing: 3px;width: 40%;word-break: keep-all;line-height: 1.4;}
#banner .item .info >div .txt .en {margin-bottom: 25px;line-height: 120%;font-size: 17px;font-family: "Cormorant Garamond", serif;text-transform: uppercase;font-weight: 600;}

#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); }

/* scrollBtn */
#scrollBtn {position: absolute;text-transform: uppercase;letter-spacing: 2px;font-size: 12px;color: var(--secondary);bottom: 22%;left: calc(17% - 5px);z-index: 1;display: flex;flex-direction: row;align-items: center;gap: 20px;}
#scrollBtn svg{fill: var(--secondary);animation: floatUpDown 2.5s ease-in-out infinite;}


@keyframes spin{0%{transform:rotate(0deg) scale(1)}100%{transform:rotate(360deg) scale(1)}}
@keyframes bounce{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes floatUpDown{0%,100%{transform:translateY(0);}25%{transform:translateY(-4px);}75%{transform:translateY(4px);}100%{transform:translateY(0);}}

@media screen and (max-width: 1440px){
    #banner .item .info >div{width: calc(85% - 60px);}
    #scrollBtn{left: calc(10% - 5px);bottom: 15%;}
}
@media screen and (max-width: 1280px){
    #scrollBtn{left: calc(10% - 2px);bottom: 11%;}
	#banner { padding-top: 70px; }
}
@media screen and (max-width: 1024px){
    #banner .item .info >div{width: calc(90% - 60px);}
	#banner .item {height: 75vh;}
    #banner .item .clip video{height:100%;width: auto;}
    #banner .item .info >div .txt >*{font-size: 15px;}
    #banner .item .info >div .txt .h3{font-size: 45px;}
    #scrollBtn{display:none;}
}
@media screen and (max-width: 980px){
    #banner .item .info >div .txt >*{font-size: 14px;}
    #banner .item .info >div .txt .h3{font-size: 35px;}
	#banner .item {height: 65vh;}
}
@media screen and (max-width: 640px){
    #banner .item .info >div .txt .en{font-size: 15px;margin-bottom: 10px;width: 50%;}
    #banner .item .info >div{width:90%;}
    #banner .item .info >div .txt >*{font-size: 12px;}
    #banner .item .info >div .txt .h3{font-size: 25px;width: 50%;}
    #banner .item .info >div .txt:last-child{display:none;}
	#banner .item {height: 40vh;}
    #banner .item .clip .bgBox{background-position: 30% 50%;}
}