/* banner */
#banner {width: 100%;z-index: 6;}
#banner .item { height: 100vh; }
#banner .paroller {bottom: -16%;z-index: 2;right: 8%;}
#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: 60%;height: auto;top: 0;z-index: -1;filter: hue-rotate(-70deg);}
#banner .item .info >div {margin: auto;width: calc(80% - 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 >* {max-width: calc(100% - 30px);font-size: 27px;color: #114323;letter-spacing: 5px;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 60px;color: #114323;font-weight: 500;letter-spacing: 3px;}
#banner .item .info >div .txt .h3 span{font-size:60px;background: linear-gradient(90deg, var(--primary), #ffba48); /* 自訂漸層色 */-webkit-background-clip: text; /* Safari/Chrome 支援 */-webkit-text-fill-color: transparent; /* Safari/Chrome 支援 */background-clip: text; /* Firefox 支援 */color: transparent; /* 讓文字顏色變透明，顯示背景 */}
#banner .item .info >div .txt  article{font-family: "Poppins", sans-serif;color: #398050;font-size: 19px;letter-spacing: 1px;}
#banner .item .info >div .txt article:after{content:'';display: block;width: 90px;height: 4px;background: linear-gradient(90deg, var(--primary), #ffba48);margin: 35px 0 40px;}
#banner .item.slick-current .info >div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }

@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1); } }

/* scrolldown */
#scrolldown {position: absolute;font-weight: 300;font-size: 13px;color: #1b1b1b;white-space: nowrap;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;bottom: 30%;right: 21%;display: flex;flex-direction: row;align-items: center;gap: 20px;font-family: "Arimo", sans-serif;z-index: 5;}
#scrolldown span{width:1px;height: 120px;background: rgb(0 0 0 / 15%);position: relative;overflow: hidden;}
#scrolldown span:after{content:'';width: 1px;height: 50px;background: var(--primary);position: absolute;top: 0; animation: scrollLine 2s linear infinite;}
#scrolldown b{display: flex;width: 100px;aspect-ratio: 1/1;background: var(--secondary);border-radius: 50px;align-items: center;justify-content: center;}
#scrolldown svg{width:20px;height: 20px;fill: white;}

@keyframes scrollLine{0%{top:-50px;}100%{top:100px;}}

#example{width:100%;height: 100%;z-index: 1;}
#example *{-webkit-transition: unset;}
#example .on{bottom: 3%;left: -2%;}
#example .tw{bottom: 9%;right: 26%;}
#example .th{top: 20%;right: -2%;}
#example .fo{top: 20%;left: 30%;}

@media screen and (max-width: 1440px){
	#example .th{width: 250px;}
    #example .tw{width: 190px;}
    #example .on{width: 190px;}
    #example .fo{width: 120px;left: 35%;}
    #banner .paroller{width:300px;}
}
@media screen and (max-width: 1280px){
	#example .th{width: 200px;}
    #example .tw{width: 150px;}
    #example .on{width: 140px;}
    #banner .paroller{width: 230px;}
    #scrolldown{right: 10%;bottom: 20%;}
    #banner .item .info >div .txt .h3, #banner .item .info >div .txt .h3 span{font-size:40px;}
    #banner .item .info >div .txt >*{font-size:22px;}
    #banner .item .info >div .txt article{font-size:16px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 85vh; }
    #scrolldown{display:none;}
    #banner .item .info >div{width: calc(90% - 100px);}
}
@media screen and (max-width: 980px){
    #banner .paroller{width: 170px;bottom: -7%;}
	#banner .item { height: 75vh; }
    #example .tw{right: -7%;bottom: 21%;}
    #example .th{display: none !important;}
    #banner .item .clip video{width:auto;height:100%;left: -22%;}
}
@media screen and (max-width: 640px){
    #banner .item .clip video{left: -69%;}
    #banner .paroller{width: 130px;right: 5%;}
    #example .tw{right: -22%;bottom: 25%;}
    #banner .item .info >div{width: calc(90% - 10px);margin-bottom: 5%;}
    #banner .item .info >div .txt .h3, #banner .item .info >div .txt .h3 span{font-size: 35px;}
    #banner .item .info >div .txt >*{font-size: 17px;letter-spacing: 4px;}
    #banner .item .info >div .txt article{font-size:12px;}
    #banner{margin-top:65px;}
    #example .fo{left: -10%;top: 10%;}
    #example .on{display: none !important;}
}