#banner_box,#banner_box .item,#banner_box .img_box { position: relative; min-width: 100vw; }
#banner_box .img_box img { width: 100vw; height: 100vh; }
#banner_box .info_box,#banner_box .atag_item { position: absolute; }
#banner_box .slick-dots { bottom: 20px; }
#banner_box .slick-dots li { opacity: 0.2; display: inline-flex; justify-content: center; align-items: center; }
#banner_box .slick-dots li.slick-active { opacity: 1; }
#banner_box .slick-dots li button { width: 10px; height: 10px; background: var(--info); border-radius: 50%; box-shadow: 0 0 5px #fff; }
#banner_box .slick-dots li button:before { content: ""; }
#banner { position: relative; width: 100%; height: 100vh; display: grid; place-items: center; overflow: hidden; padding-top: 130px; }
#banner .item { width: 390px; height: 570px; list-style-type: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background-position: center; background-size: cover; box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset; transition: transform 0.1s,left 0.75s,top 0.75s,width 0.75s,height 0.75s; border-radius: 160px; }
/* 原本 &:nth-child(1),&:nth-child(2) */
#banner .item:nth-child(1),#banner .item:nth-child(2) { left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none; opacity: 1; backdrop-filter: saturate(110%) contrast(100%) blur(4px); -webkit-backdrop-filter: saturate(110%) contrast(100%) blur(8px); }
#banner .item:nth-child(1) .bannerImgItem,#banner .item:nth-child(2) .bannerImgItem { opacity: 0; }
#banner .item:nth-child(1) .bannerBox::after,#banner .item:nth-child(2) .bannerBox::after {position: absolute;top: 0;right: 0;z-index: 1;content: "";width: 100%;height: 100%;display: block;background: linear-gradient(180deg,rgb(35 24 21/40%) 20%,transparent 60%);pointer-events: none;}
#banner .item:nth-child(1) .bannerBox::before,#banner .item:nth-child(2) .bannerBox::before {position: absolute;top: 0;left: 0;z-index: 0;content: "";width: 100%;height: 100%;display: block;background: linear-gradient(180deg,rgb(204 131 0/40%) 0%,rgb(35 24 21/100%) 50%);pointer-events: none;opacity: 0.58;}
#banner .item:nth-child(3) { left: 45%; }
#banner .item:nth-child(4) { left: calc(50% + 330px); }
#banner .item:nth-child(5) { left: calc(50% + 760px); }
#banner .item:nth-child(6) { left: calc(50% + 1140px); opacity: 0; }

#banner .item:nth-child(1)::before,#banner .item:nth-child(2)::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center; transition: opacity 0.55s ease,filter 0.55s ease; filter: blur(7px); }
#banner .item:nth-child(1) .bannerImgItem {   }
#banner .item .bannerImgair { position: absolute; left: -190%; bottom: -200px; z-index: 2; width: 180%; opacity: 0; transform: translate(-30%,20%); margin: 0; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; }
#banner .item:nth-child(3) .bannerImgair { left: -100%; bottom: -140px; opacity: 1; transform: translate(0%,0%); animation: planeCruise 5.2s ease-in-out infinite; will-change: transform; }
@keyframes planeCruise {
  0% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(-10px,-6px) rotate(-2deg); }
  50% { transform: translate(-18px,2px) rotate(1deg); }
  75% { transform: translate(-8px,7px) rotate(2deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
#banner .item .bannerImgItem { position: absolute; width: 410px; top: 50%; left: 49.5%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; }
#banner .item .bannerImgItem .bannerImg { margin: 0; }
.content { width: min(30vw,440px); position: absolute; top: 50%; left: 6%; transform: translateY(-50%); font: 400 0.85rem helvetica,sans-serif; color: white; text-shadow: 0 3px 8px rgba(0,0,0,0.5); opacity: 0; display: none; }
/* 原本 & .title/& .description/& button */
.content .title { text-transform: uppercase; color: #fff; }
.content .description { line-height: 1.7; margin: 1rem 0 2.2rem; font-size: 0.8rem; color: #fff; }
.item:nth-of-type(2) .content { display: block; animation: show 0.75s ease-in-out 0.3s forwards; }
#banner .banner_box .content a.btn { width: fit-content; background-color: rgb(255 255 255/0%); color: white; border: 1px solid #ffffff94; padding: 0.75rem; cursor: pointer; font-family: "Cormorant",serif; font-style: italic; font-size: 16px; }

#banner .banner_box .content a.btn { border-radius: 9px; display: flex; align-items: center; font-size: 20px; font-weight: 300; line-height: 1.2; letter-spacing: 0.5px; font-family: "Lucida Calligraphy",serif; padding: 0.25rem 0.75rem; }
#banner .banner_box .content a.btn span { display: block; width: 35px; height: 35px; position: relative; }
#banner .banner_box .content a.btn span:after { content: ""; position: absolute; display: block; width: 12px; height: 12px; top: 50%; left: 50%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; border-bottom: 2px solid rgb(255 255 255/95%); border-right: 2px solid rgb(255 255 255/95%); transform: rotate(-45deg) translate(-25%,-100%); }
#banner .banner_box .content .subtitle {color: #ffffff;font-size: 26px;font-weight: 300;line-height: 1.2;letter-spacing: 0.5px;font-family: "Lucida Calligraphy",serif;font-style: italic;margin: 0 0 14px;}
#banner .banner_box .content .title { color: #fff; display: block; font-size: 37px; line-height: 160%; letter-spacing: 2.5px; margin-top: 30px; font-weight: 500; word-spacing: 100vw; font-family: "Noto Serif TC",serif; margin: 0; }
#banner .banner_box .content .description { font-size: 17px; line-height: 160%; font-weight: 300; position: relative; opacity: 0.8; }
@keyframes show {
  0% { filter: blur(5px); transform: translateY(calc(-50% + 75px)); }
  100% { opacity: 1; filter: blur(0); }
}
.nav { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 5; user-select: none; }

/* 原本 & .btn / &:hover */
	.nav .btn { color: rgb(255 255 255/70%); border: 1px solid rgb(187 187 187/60%); margin: 0 0.55rem; padding: 1.55rem; border-radius: 50%; cursor: pointer; }
	.nav .btn:hover { background-color: rgba(255,255,255,0.3); }
	.nav ion-icon { position: relative; }
	.nav ion-icon.prev:before { content: ""; display: block; width: 14px; height: 14px; border-width: 2px 2px 0 0; border-style: solid; color: #101010; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%) rotate(225deg); transform: translate(-30%,-50%) rotate(225deg); display: none; }
	.nav ion-icon.next:before { content: ""; display: block; width: 14px; height: 14px; border-width: 2px 2px 0 0; border-style: solid; color: #101010; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-60%,-50%) rotate(45deg); display: none; }

@media (width > 650px) and (width < 900px) {
	#banner .banner_box .content .title { font-size: 1rem; }
	#banner .banner_box .content .description {font-size: 1rem;}
	#banner .banner_box .content button { font-size: 0.7rem; }
	#banner .item { width: 160px; height: 270px; }
	#banner .item:nth-child(3) {left: 50%;}
	#banner .item:nth-child(4) {left: calc(50% + 280px);}
	#banner .item:nth-child(5) {left: calc(50% + 540px);}
	#banner .item:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
}


@media screen and (max-width: 1440px) {
	#banner .item { width: 320px; height: 480px; border-radius: 120px; }
	#banner .item .bannerImgItem { width: 360px; }
}
@media screen and (max-width: 1280px) {
	#banner_box .img_box img { height: auto; }
	#banner .banner_box .content {left: 4rem;z-index: 10;}
	#banner .banner_box .content .title { font-size: 31px; }
	#banner .banner_box .content .subtitle { font-size: 22px; }
}

@media screen and (max-width: 1160px) {
	#banner_box { padding-top: 80px; }
	#banner .banner_box .content {left: 4rem;width: min(31vw, 500px);}
	#banner { height: 90vh; }
	#banner .item .bannerImgair { width: 130%; }
	#banner .item:nth-child(3) .bannerImgair { left: -70%; bottom: -60px; }
	.nav {bottom: 1rem;left: 55%;}
	#banner .item { width: 280px; height: 400px; border-radius: 120px; }
	#banner .item .bannerImgItem { width: 320px; }
}

@media screen and (max-width: 960px) {
	#banner .banner_box .content {left: 2rem;width: min(100vw, 290px);top: 38%;}
	#banner .banner_box .content .title { font-size: 24px; margin-top: 10px; }
	#banner .banner_box .content .description {}
	#banner .banner_box .content .subtitle { font-size: 22px; }
	#banner .item { top: 70%; transform: translateY(-70%); }
	#banner .item {width: 220px;height: 300px;border-radius: 90px;}
	#banner .item .bannerImgItem { width: 320px; }
	#banner .item .bannerImgItem { width: 230px; }

}
@media screen and (max-width: 650px) {
	#banner .banner_box .content .title { font-size: 0.9rem; }
	#banner .banner_box .content .description { font-size: 14px; }
	#banner .banner_box .content button { font-size: 1.1rem; }
	#banner .item { width: 130px; height: 190px; }
	#banner .item:nth-child(3) {left: 47%;}
	#banner .item:nth-child(4) { left: calc(50% + 140px); }
	#banner .item:nth-child(5) { left: calc(50% + 280px); }
	#banner .item:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
	#banner .item .bannerImgItem { width: 140px; }
	#banner .item { top: 75%; }
	#banner .item:nth-child(3) .bannerImgair { left: -70%; bottom: 0px; }
	.nav .btn { padding: 1.15rem; margin: 0 0.25rem; }
	.nav { bottom: 0; left: 50%; transform: translate(-50%,-20%); }
	#banner .banner_box .content { top: 34%; }
}