/* banner */
#banner {z-index: 3;margin-top: 98px;background: var(--complement);}
#banner .item { height: 87vh; }
#banner .main-slider { }
#banner .item .clip:before{content:'';position: absolute;width: 100%;height: 100%;background-image: url(/images/44/banner-mask.png);background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;z-index: 1;}
#banner .item >a {z-index:3 }
#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%);opacity: .7;}
#banner .item .info{z-index: 2;display: grid;grid-template-columns: 235px 1fr;gap: 55px;align-content: end;padding: 6.5% 7.5%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#banner .item .info >div:not(.arrow) { margin: auto; width: calc(100% - 60px); }
#banner .item .info .arrow{width:100%;border: 1px solid #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
#banner .item .info .arrow svg{width: 65px;height: 65px;fill: white;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#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: 17px;letter-spacing: 1px;line-height: 2;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 37px;letter-spacing: 2px;}
#banner .item .info >div .txt .en {margin-bottom: 15px;line-height: 120%;font-size: 17px;font-family: "DM Sans", sans-serif;text-transform: uppercase;letter-spacing: 1px;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); }


@media screen and (max-width: 1280px){
	#banner {margin-top: 83px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 65vh; }
}
@media screen and (max-width: 980px){
    #banner .item .info{display:block;padding: 9.5% 2%;}
    #banner .item .info .arrow{display:none;}
    #banner .item .clip video{width:auto;}
}
@media screen and (max-width: 640px){
	#banner {margin-top:70px;}
    #banner .item .info >div .txt >* {font-size: 13px;}
    #banner .item .info >div .txt .h3 {font-size: 28px;}
    #banner .item .info >div .txt .en {font-size: 15px;}
}