#headBan{position: relative;}
#banner {width: 100%;position: relative;overflow: hidden;margin-top: 90px;}
#banner .img{overflow: hidden;display: inline-block;}
#banner .item{-webkit-box-align:center;display:grid;grid-template-columns:39% 1fr;align-items:center}
#banner img{position:relative;width: 100%;background:no-repeat 50% / cover;}
#banner .img_box img{border-radius:180px 0 0 0;aspect-ratio: 4.55/3;}
#banner .pos_abs{width:100%;height:100vh;top:0;left:0}
#banner .info{
    margin-bottom: 110px;
}
#banner .info .txt{padding-left:200px;padding-right:20px}
#banner .info .txt{transform:scaleX(0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);-o-transform:scaleX(0);transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0}
#banner .item.slick-current .info .txt{transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}
#banner .item .info .txt{-webkit-transition-delay:.5s;transition-delay:.5s}
#banner .info .txt *{opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt h3{letter-spacing:3px;font-size:52px;line-height:130%;text-transform:uppercase;word-spacing: 100vw;margin-top:20px;animation:fadeIn 2s both;-webkit-animation:fadeIn 2s both;color:var(--primary);font-family: "Noto Serif TC", serif;}
#banner .info .txt h3,#banner .info .txt p{opacity:0;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#banner .info .txt h4{-webkit-transform:translateY(15px);transform:translateY(25px);animation-name:fadeInUp;-webkit-animation-name:fadeInUp;font-weight:400;font-size:20px;letter-spacing:1.5px;position:relative;margin-top:50px;margin-bottom:50px}
#banner .info .txt h4:before{content:"";width: 130px;height:1px;background: var(--secondary);display:block;position:absolute;top: -25px;left:0}
#banner .info .txt article{text-align: center;font-family: 'Roboto', sans-serif;font-size: 22px;font-weight: 600;text-transform: uppercase;}
#banner .info .txt p {letter-spacing: 15px;font-size: 20px;letter-spacing: 0px;-webkit-transform: translateY(15px);transform: translateY(25px);animation-name: fadeInUp;-webkit-animation-name: fadeInUp;animation: fadeIn 1s both;-webkit-animation: fadeIn 1s both;color: #343434;text-transform: uppercase;font-family: "Arimo", serif;}
#banner a.pos_abs {z-index: 2;}

/* slick-current */
#banner .slick-current .info .txt * {opacity: 1;-webkit-transform: translateY(5px);transform: translateY(5px);transition-delay: .3s;-webkit-transition-delay: .3s;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
#banner .slick-dots{bottom: 260px;width: auto;flex-direction: column;align-items: center;left: 110px;margin-top: 0px;-webkit-transform: translate(0, -50%);transform: translate(0, -290%);width: 20px;display: flex;gap: 20px 0;position: absolute;}
#banner .slick-dots li{margin: 2px 5px;}
#banner .slick-dots li button{border: 1px solid #75757500;border-radius: 50px;}
#banner .slick-dots li.slick-active button{border: 1px solid var(--complement);}
#banner .slick-dots li button:before{opacity:1;color: var(--complement);}
#banner .img_box {margin-left: auto;position: relative;z-index: 1;overflow: hidden;order: 1;}
#banner .img_box video{height: 100%;}

/* scroll_down */
#scroll_down {position: absolute;left: 37%;bottom: 20%;background-color: var(--primary);z-index: 100;border-radius: 50%;overflow: hidden;}
#scroll_down button {position: relative;width: 150px;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;z-index: 2;}
#scroll_down a.pos_abs{width:150px;height:150px}
#scroll_down button img {width: 40px;aspect-ratio: 1/1;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#scroll_down .circle_box {position: absolute;width: 80%;margin: auto;aspect-ratio: 1/1;-webkit-animation: apple_circle 50s linear infinite;animation: apple_circle 50s linear infinite;top: 7%;left: 10%;transform: translate(-50%, -50%);}
#scroll_down .circle_box svg { overflow: visible; display: block; }
#scroll_down .circle_box path { fill: none; }
#scroll_down .circle_box text {text-transform: uppercase;letter-spacing: .06em;font-size: .6em;fill: var(--white);}

@-webkit-keyframes apple_circle{0%,100%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}
50%{transform:rotate(1turn);-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-ms-transform:rotate(1turn);-o-transform:rotate(1turn)}
}@keyframes apple_circle{0%,100%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}
50%{transform:rotate(1turn);-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-ms-transform:rotate(1turn);-o-transform:rotate(1turn)}
}

/* scrollBtn */
.page-scroll a{display: flex;-webkit-transform:translate(0,-50%);transform: translate(0,-50%);color: #575757;text-decoration:none;font-size: 14px;writing-mode: vertical-lr;text-transform: uppercase;letter-spacing: 3.5px;align-items: center;}
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,-100px)}
100%{transform:translate(0px,0px)}
}
.page-scroll{bottom: 25%;margin-left:0;left: 100px;z-index: 200;text-align:center;position:absolute}
.page-scroll.style01 a span{animation:none;box-sizing:border-box;position:relative;-webkit-animation-name:upDown;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-duration:5s;margin-top:10px}
.page-scroll.style01 a svg{width: 40px;height: 22px;fill: #575757;}
@keyframes upDown{0%{top:0;}50%{top:calc(30% - 5px);}100%{top:0;}}

@media screen and (max-width: 1560px){
	#banner .slick-dots{left:40px;bottom:230px}
	.page-scroll{left:30px}
	#banner .info .txt{padding-left:120px;padding-right:0}
	#banner .info .txt h3{font-size:42px}
	#banner .info{margin-bottom:50px}
}

@media screen and (max-width: 1440px){
	#banner .info .txt{height:10%}
	#banner .slick-current .info .txt p{font-size:20px}
	#scroll_down .circle_box{}
	#scroll_down button,#scroll_down a.pos_abs{width:110px}
	#banner .info .txt h3{font-size:34px}
	.page-scroll{left:30px}
	#banner .info{margin-bottom:0px}
}
@media screen and (max-width: 1280px){
	#banner img{width:100%;height:100%}
	#scrollBtn{display:none}
	#banner .info .txt p{font-size:16px}
	#banner .info .txt{height:0%;padding-left:70px}
	#banner .slick-current .info .txt p{font-size:17px}
	#scroll_down{display:none}
	#banner{margin-top: 76px;}
	#banner:before{display:none}
	#banner .slick-dots{bottom:100px;left:20px}
}
@media screen and (max-width: 1140px){
	#banner .item{grid-template-columns:44% 1fr}
	#banner img{height: 50vh;}
}
@media screen and (max-width: 960px){
    #banner .img_box video{height:auto;width: 120%;}
	#banner .info .txt{padding-left: 40px;padding-top:40px}
	#banner .info .txt h4{font-size:18px}
	#banner .info .txt p{font-size:15px}
	#banner img{height: auto;}
	#scrollBtn{display:none}
	#banner .info .txt h3{margin-top:20px;font-size:36px;letter-spacing:4px}
	#banner .info{padding-bottom:0vh}
	#banner .item{width: 100%;display: flex;flex-direction: column;}
	#banner .slick-dots li{display:none}
	#banner .img_box{order:0}
}

@media screen and (max-width: 560px){
	#banner .info .txt{width:100%;padding-left:20px;padding-top:30px}
	#banner .info .txt article{font-size:18px;font-weight:300}
	#banner .info .txt p{font-size:14px}
	#banner .info .txt h3:before{bottom:-31px;width:1px;height:25px}
	#banner .slick-current .info .txt p{letter-spacing:1.2px}
	#banner .img_box img{border-radius:110px 0 0 0}
	#banner .info .txt h3{font-size:32px;margin-top:10px;word-spacing: unset;}
	#banner .slick-current .info .txt p{font-size:14px}
}