/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }
.imggbox {text-align: center;}

a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }

/* general class set */
.txt_clamp { overflow: hidden; height: 27px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.d_inblock.txt_clamp { display: -webkit-inline-box; }
.atag_item {width: 100%;height: 100%;top: 0;left: 0;z-index: 10;}
.nowrap_box {font-size: 0;}
.txt_num { font-family: 'Noto Sans TC', 'Noto Sans SC'; }
.flex_direction { flex-direction: column; }
.flex_wrap { flex-wrap: wrap; }


/* banner */
#banner {z-index: 1;}


/* slick */
#banner .item a{z-index: 10;}
#banner .slick-slider { z-index: 2; }
#banner .slick-slide {min-width: 100vw;}
#banner .info >* {opacity: 0;}
#banner .info b {line-height: 1;font-size: 1.2rem;-ms-writing-mode: tb-lr -webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;-webkit-transform: translateX(15px);transform: translateX(15px);}
#banner .info h2 {line-height: 140%;font-size: 2.4rem;letter-spacing: 3px;font-weight: 500;-webkit-transform: translateY(15px);transform: translateY(15px);color: #ffffff;margin-bottom: 1.5rem;border-left: 4px solid var(--secondary);padding-left: 16px;}
#banner .info p {font-size: 1.2rem;-webkit-transform: translateY(15px);transform: translateY(15px);color: var(--secondary);line-height: 160%;font-weight: 500;margin-bottom: 10px;}
#banner .slick-current .info b {opacity: 0;-webkit-transform: translateX(0);transform: translateX(0);transition-delay: .3s;-webkit-transition-delay: .3s;}
#banner .slick-current .info h2 {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);transition-delay: .4s;-webkit-transition-delay: .4s;}
#banner .slick-current .info p {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);transition-delay: .5s;-webkit-transition-delay: .5s;}
#banner .info {position: absolute;width: 570px;height: 30%;padding: 0 50px;bottom: 0;right: 0;z-index: 2;background-color: rgb(0 0 0 / 45%);display: none;}
#banner .info h2 { word-spacing: 100vw; }

/* slick-dots */
#banner .slick-dots {text-align: right;bottom: 0vw;margin: auto 0;width: 1vw;height: 30vh;top: 0;right: -40px;position: absolute;display: flex;flex-direction: column;justify-content: center;}

/* arrow */
#banner .arrow {padding: 10px 20px;width: 150px;border-radius: 35px 0 0;top: calc(60vw - 68px);right: 0;z-index: 5;}
#banner .arrow a {margin: 5px;width: 40px;height: 40px;border: 1px #aeaeae4d solid;background: #6464644d;border-radius: 50%;display: flex !important;justify-content: center;align-items: center;}
#banner .arrow a:before { width: 35%; height: 35%; border: #fff solid; border-width: 1px 0 0 1px; display: block; content: ""; -webkit-transform: rotate(-45deg) translate(2px, 2px); transform: rotate(-45deg) translate(2px, 2px); }
#banner .arrow a.next {background: rgb(55 55 55 / 67%);-webkit-transform: scaleX(-1);transform: scaleX(-1);}

/* circleBox */
.arrowBox{width:100%;height:100%;border-radius:100%;position:absolute;bottom:0;left:0;z-index: 11;}
#banner .circleBox{position:relative;width:520px;height:520px;margin:auto;left:0;bottom:-650px}
#banner .circleBox .grayCircle{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);stroke:#eeeeee;width:430px;height:430px;-webkit-animation:zoomIn 1s cubic-bezier(0.37,0,0.63,1) infinite alternate;animation:zoomIn 1s cubic-bezier(0.37,0,0.63,1) infinite alternate}
#banner .circleBox .grayCircle_s{position:absolute;z-index:1;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);stroke:#eeeeee;width:500px;height:500px;stroke-width:2;opacity:0.6}
#banner .circleBox .redCircle{position:absolute;z-index:5;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:500px;height:500px;stroke-width:2;stroke-dasharray:90;stroke-dashoffset:204;-webkit-animation:circle 12.5s ease-in-out infinite;animation:circle 12.5s ease-in-out infinite}
@-webkit-keyframes circle{to{stroke-dasharray:250;stroke-dashoffset:4510}
}@keyframes circle{to{stroke-dasharray:250;stroke-dashoffset:4510}
}@-webkit-keyframes zoomIn{to{-webkit-transform:translate(-50%,-50%) scale(1.3,1.3);transform:translate(-50%,-50%) scale(1.3,1.3);opacity:0.3}
}@keyframes zoomIn{to{-webkit-transform:translate(-50%,-50%) scale(1.3,1.3);transform:translate(-50%,-50%) scale(1.3,1.3);opacity:0.3}
}@-webkit-keyframes open{100%{-webkit-transform:translateX(-550px);transform:translateX(-550px)}
}
#banner .img_box img {height: 90vh;object-position: 50% 0%;width: 100%;object-fit: cover;position: relative;display: block;}
#banner .img_box{}
#banner .img_box img:after{opacity:1;bottom:0;position:absolute;z-index: 34;content:"";top:0rem;left:0rem;width:100%;height:100%;background-image: linear-gradient(to left,rgb(0 0 0 / 70%),transparent);}


/* scrolldown */
#scrolldown {flex-direction: column;width: 10vw;height: 10vw;border-radius: 50%;bottom: 5vw;left: 20vw;z-index: 3;background: #ff8f43;color: #fff;font-size: 14px;font-weight: 400;-webkit-transition: 0.6s;transition: 0.6s;-webkit-filter: grayscale(0);-webkit-animation: arrowtop 0.5s linear infinite forwards;animation: arrowtop 1.5s linear infinite forwards;}
#scrolldown::after {content: "";width: 9vw;height: 9vw;display: block;pointer-events: none;position: absolute;left: 50%;top: 50%;border: 1px solid #ffffff;border-radius: 99em;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);opacity: 0.5;}
#scrolldown span{color: #fff;font-size: 24px;}
@-webkit-keyframes arrowtop{0%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}
50%{-webkit-transform:translate(0,-8px);transform:translate(0,-8px)}
100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}
}@keyframes arrowtop{0%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}
50%{-webkit-transform:translate(0,-8px);transform:translate(0,-8px)}
100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}
}




@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,15px)}
100%{transform:translate(0px,0px)}
}.page-scroll{margin-left:0;z-index:888;text-align:center;position:absolute;width: 20px;top: 55%;left: -60px;transform: translate(-100%, -60%);}
.page-scroll a{-webkit-transition:opacity .3s;transition:opacity .3s;display:flex;align-items:center;flex-direction:row;animation:web_menu002 ease-in-out 2s infinite;animation-direction:alternate;writing-mode: tb-rl;}
.page-scroll.style01 a b{color: #000000;font-weight: 500;font-size: 12px;letter-spacing: 2.5px;}
.page-scroll.style01 a span{position:absolute;right:0}

@media screen and (max-width: 1690px){
	#banner .slick-slide::after{left: -180px;}

}
@media screen and (max-width: 1440px){
	#banner .info h2{margin-bottom:1rem}
	#banner .info p{font-size:1.3rem}
}
@media screen and (max-width: 1366px){
	.arrowBox{display: none;}
	#banner .slick-slide::after{left: -230px;}
	#banner .img_box img{height: 78vh;}
}
@media screen and (min-width: 1281px){
	#banner:before{content:'';position:absolute;height:100%;width:110%;top:0;left:-100px;background-image:url(/images/39/img_banner_bg.jpg);background-size:contain;background-position:50% 120%;background-repeat:no-repeat;z-index:2}
	#banner {no-repeat 50% / cover;padding-top: 70px;margin: 0 auto;width: 87vw;}
	#banner .slick-slide {display: block;min-width: 30vw;}
	#banner .img_box {max-width: calc(100% - 0px);margin-left: auto;position: relative;overflow: hidden;order: 1;z-index: 1;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;}
	#banner .arrow {top: auto;bottom: 40px;left: 70px;}
}
@media screen and (max-width: 1280px){
	#scrolldown { width: 14vw; height: 14vw; bottom: 3vw; left: 6rem; }
	#banner .slick-slide::after{ display: none;}
	#banner .info {padding: 2rem 4vw 2rem;width: 380px;height: 20%;}
	#banner .info h2 {font-size: 30px;}
	#banner .info p {font-size: 14px;line-height: 160%;}
	#banner .info b { display: none; }
	#banner{margin-top: 80px;height: auto;}
	#banner .arrow,.page-scroll{display:none}
}

@media screen and (max-width: 760px){
	#banner .img_box img { height: 80vw; }
	#banner .arrow { width: auto; top: calc(80vw - 68px); }
}
@media screen and (max-width: 640px){
	#banner .info h2 {word-spacing: 100vw;font-size: 22px;}
	#banner .img_box img{height: 100%;object-fit: contain;}
}
@media screen and (max-width: 550px){
	#banner .arrow { top: calc(100vw - 68px); }
	#banner .info {padding: 2rem 5vw 2rem;width: 290px;height: 30%;}
	#banner .img_box img{}
}