#banner_area { position: relative; overflow: hidden; padding: 0; margin-top: 120px; }
#banner_area .bn_item { position: relative; width: 100%; height: 78vh; }
#banner_area .bn_item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#banner_area .bn_bg { z-index: 0; overflow: hidden; }
#banner_area .bn_bg picture { display: block; width: 100%; height: 100%; }
#banner_area .bn_bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s var(--ease-elegant,cubic-bezier(0.23,1,0.32,1)); }
#banner_area .slick-active .bn_bg img { transform: scale(1); }
#banner_area .bn_bg video,#banner_area .bn_bg iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
#banner_area .bn_overlay { z-index: 1; background: linear-gradient(90deg,rgba(var(--white-rgb),.96) 0%,rgba(var(--white-rgb),.82) 38%,rgba(var(--white-rgb),.2) 100%),linear-gradient(180deg,rgba(var(--white-rgb),.12),rgba(var(--white-rgb),.88)); pointer-events: none; }
#banner_area .bn_light {z-index: 2;right: 8%;top: 12%;width: 560px;height: 560px;border-radius: 50%;background: radial-gradient(circle,rgba(var(--secondary-rgb),.86),rgba(var(--secondary-rgb),0) 68%);animation: bnPulse 5s ease-in-out infinite;pointer-events: none;}
#banner_area .workframe {z-index: 3;width: min(1440px,calc(100% - 80px));margin: 0 auto;align-items: center;justify-content: space-between;display: flex;}
#banner_area .info_box { position: relative; z-index: 5; width: 46%; max-width: 620px; transform: translateY(20px); opacity: 0; transition: opacity .9s ease,transform .9s var(--ease-elegant,cubic-bezier(0.23,1,0.32,1)); }
#banner_area .slick-active .info_box { transform: translateY(0); opacity: 1; }
#banner_area .tag {margin: 0;color: var(--secondary);font-size: 20px;font-weight: 600;letter-spacing: .18em;text-transform: uppercase;font-family: 'Inter','Noto Sans TC',sans-serif;}
#banner_area .ch-title {margin: 10px 0 50px;color: var(--primary);font-size: clamp(40px,3vw,90px);line-height: 1.32;letter-spacing: .05em;font-weight: 700;text-shadow: 0 8px 32px rgba(var(--primary-rgb),.12);word-spacing: 100vw;position: relative;}

#banner_area .ch-title::after {
  content:'';position:absolute;left:0;bottom:-30px;width:0;height:3px;border-radius:50px;background:linear-gradient(
		90deg,var(--primary),var(--secondary),rgba(var(--secondary-rgb),0)
	);box-shadow:0 0 18px rgba(var(--secondary-rgb),.38);transition:width 1s var(--ease-elegant,cubic-bezier(0.23,1,0.32,1)) .35s;
}
#banner_area .ch-title::after { width: 40%; }
#banner_area article { color: rgba(var(--info-rgb),.82); font-size: 1.2rem; line-height: 2; letter-spacing: .08em; }
#banner_area article br { display: block; }
#banner_area .btn_box { margin-top: 44px; gap: 28px; display: flex; }
#banner_area .more_btn {position: relative;display: inline-flex;min-width: 170px;height: 54px;align-items: center;justify-content: center;overflow: hidden;border-radius: 9px;font-size: 15px;font-weight: 700;letter-spacing: .08em;transition: .35s ease;}
#banner_area .more_btn span {position: relative;z-index: 2;font-weight: 500;}
#banner_area .more_btn.fill { color: var(--white); background: linear-gradient(135deg,var(--primary),var(--triadic2)); box-shadow: 0 16px 32px rgba(var(--primary-rgb),.25); }
#banner_area .more_btn.fill span { color: var(--white); }
#banner_area .more_btn.fill::before { content: ''; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: linear-gradient(90deg,transparent,rgba(var(--white-rgb),.38),transparent); transform: skewX(-20deg); transition: .55s ease; }
#banner_area .more_btn.fill:hover::before { left: 120%; }
#banner_area .more_btn.line { color: var(--primary); border: 1px solid rgba(var(--primary-rgb),.55); background: rgba(var(--white-rgb),.45); backdrop-filter: blur(10px); }
#banner_area .more_btn.line:hover { color: var(--white); background: var(--primary); border-color: var(--primary); }
#banner_area .more_btn.line:hover span { color: var(--white); }
#banner_area .more_btn:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(var(--primary-rgb),.22); }
#banner_area .img_box { width: 52%; height: 520px; overflow: hidden; border-radius: 36px; mix-blend-mode: multiply; filter: drop-shadow(0 30px 60px rgba(var(--primary-rgb),.18)); animation: floatImg 5.8s ease-in-out infinite; transform: translateX(40px) scale(.96); opacity: 0; transition: opacity 1s ease .15s,transform 1s var(--ease-elegant,cubic-bezier(0.23,1,0.32,1)) .15s; }
#banner_area .slick-active .img_box { transform: translateX(0) scale(1); opacity: 1; }
#banner_area .img_box img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
#banner_area .slick-dots { position: absolute; left: 50%; bottom: 34px; z-index: 8; display: flex !important; align-items: center; justify-content: center; gap: 10px; transform: translateX(-50%); }
#banner_area .slick-dots li { width: auto; height: auto; margin: 0; }
#banner_area .slick-dots li button { display: block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb),.24); font-size: 0; cursor: pointer; transition: .35s ease; }
#banner_area .slick-dots li.slick-active button { width: 34px; border-radius: 20px; background: var(--secondary); }
#banner_area .slick-arrow { position: absolute; top: 50%; z-index: 9; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(var(--white-rgb),.72); color: var(--primary); font-size: 0; box-shadow: 0 12px 32px rgba(var(--primary-rgb),.12); backdrop-filter: blur(12px); cursor: pointer; transform: translateY(-50%); transition: .35s ease; }
#banner_area .slick-arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
#banner_area .slick-prev { left: 32px; }
#banner_area .slick-prev::before { transform: translate(-35%,-50%) rotate(-135deg); }
#banner_area .slick-next { right: 32px; }
#banner_area .slick-next::before { transform: translate(-65%,-50%) rotate(45deg); }
#banner_area .slick-arrow:hover { background: var(--primary); color: var(--white); transform: translateY(-50%) scale(1.08); }
@keyframes bnPulse {
  0%,100% { transform: scale(1); opacity: .65; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes floatImg {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media screen and (max-width:1640px) {
	#banner_area { margin-top: 90px; }
}
@media screen and (max-width:1400px) {
    #banner_area .bn_item{height: 85vh;}
    #banner_area .tag{font-size: 16px;}
    #banner_area .img_box{height:450px}
}
@media screen and (max-width:1280px) {
    #banner_area .more_btn span{font-size:15px;}
	#banner_area .workframe {width: calc(90% - 50px);}
	#banner_area .ch-title {font-size: 40px;}
    #banner_area article{font-size: 17px;}
}
@media screen and (max-width:980px) {
	#banner_area,#banner_area .bn_slider,#banner_area .slick-list,#banner_area .slick-track,#banner_area .bn_item { height: auto; min-height: auto; }
	#banner_area .workframe { display: block; height: auto; padding: 90px 0 76px; }
	#banner_area .info_box { width: 100%; max-width: 620px; }
	#banner_area .img_box { display: none; }
	#banner_area .bn_bg { position: absolute; }
	#banner_area .bn_overlay { background: linear-gradient(180deg,rgba(var(--white-rgb),.95) 0%,rgba(var(--white-rgb),.78) 58%,rgba(var(--white-rgb),.62) 100%); }
	#banner_area .bn_light { width: 300px; height: 300px; right: 80%; top: 12%; }
}
@media screen and (max-width:550px) {
    #banner_area .tag{font-size: 14px;}
	#banner_area { margin-top: 70px; }
	#banner_area .workframe {width: calc(100% - 32px);padding: 32px 0 34px;}
	#banner_area .ch-title {font-size: 32px;letter-spacing: .08em;}
	#banner_area article {font-size: 14px;line-height: 2;}
	#banner_area .btn_box {margin-top: 24px;gap: 20px;}
	#banner_area .more_btn { width: 100%; margin-bottom: 14px; }
	#banner_area .img_box { height: 300px; border-radius: 24px; }
	#banner_area .slick-arrow { display: none !important; }
}