/* 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; }
.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;margin-top: 130px;}
#banner .bannerImgBox{width:100%;height:100%;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
#banner .bannerImgBox .img{position:absolute;z-index:1;left:0}
#banner .bannerImgBox .bannerBg-orange{left:0;top:40%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:-1}
#banner .bannerImgBox .bannerBg-blue{right:0;top:150px;z-index:-1}
#banner .bannerImgBox .bannerCloud-rt{left:110px;top:90px;-webkit-animation:bannerCloud_short 8s infinite linear;animation:bannerCloud_short 8s infinite linear;z-index:10}
#banner .bannerImgBox .bannerCloud-lb{left:390px;bottom:155px;-webkit-animation:bannerCloud_short 8s infinite linear;animation:bannerCloud_short 8s infinite linear;z-index:10}
#banner .bannerImgBox .bannerTree-01,#banner .bannerImgBox .bannerTree-02,#banner .bannerImgBox .bannerTree-03{left:auto;right:360px;bottom:-30px;z-index:10}
#banner .bannerImgBox .bannerTree-01{animation:about11_jump_1 2.2s infinite 1s}
#banner .bannerImgBox .bannerTree-02{right:250px;animation:about11_jump_1 3.2s infinite 1s}
#banner .bannerImgBox .bannerTree-03{right:110px;animation:about11_jump_1 4.2s infinite 1s}
@keyframes bannerCloud_short{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}
50%{-webkit-transform:translateX(-50px);transform:translateX(-50px)}
100%{-webkit-transform:translateX(0%);transform:translateX(0%)}
}
@keyframes bannerCloud_long{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}
50%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}
100%{-webkit-transform:translateX(0%);transform:translateX(0%)}
}
@keyframes about11_jump_1{0%{transform:translate(-50%,10%) scale(1,0.85)}
50%{transform:translate(-50%,-10%) scale(1,1)}
100%{transform:translate(-50%,10%) scale(1,0.85)}
}

/* abs_txt */
#banner .abs_txt {width: 100%;height: 70%;flex-direction: column;right: 0;z-index: 1;opacity: .3;display: flex;align-items: flex-end;display: none;}
#banner .abs_txt svg { margin-left: 5rem; width: 5vw; height: 4vw; }
#banner .abs_txt b {background: transparent;line-height: .8;font-weight: 500;font-size: 14vw;color: transparent;-webkit-text-stroke: 1px #eaeaea;text-stroke: 3px #bfbfb;}

/* slick */
#banner .slick-slider { z-index: 2; }
#banner .slick-slide {min-width: 100vw;}
#banner .img_box img {width: 100%;height: 100%;object-fit: cover;}
#banner .info >* {font-weight: 500;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 h3 {line-height: 130%;font-size: 2.4rem;letter-spacing: 2px;font-weight: 700;-webkit-transform: translateY(15px);transform: translateY(15px);color: #2c7e42;background-image: url(/images/39/img-bn-t-bg.png);background-repeat: no-repeat;background-size: cover;padding: 16px 24px;}
#banner .info p {-webkit-transform: translateY(15px);transform: translateY(15px);color: #353535;font-size: 1.8rem;font-weight: 500;letter-spacing: 1px;background-image: url(/images/39/img-bn-t-bg.png);background-repeat: no-repeat;background-size: cover;padding: 16px 24px;display: inline-block;}
#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 h3,#banner .slick-current .info .country {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 .country{width: 160px;position: absolute;right: 30px;-webkit-transform: translateY(15px);transform: translateY(15px);}

/* 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 0px;width:220px;border-radius:35px 0 0;top:calc(60vw - 68px);z-index:5}
#banner .arrow a{margin:5px;padding:17px;width:25px;height:25px;border:1px rgb(194 236 244 / 55%) solid;background:rgb(194 236 244 / 55%);border-radius:50%;display:flex !important;justify-content:center;align-items:center;-webkit-transform:scaleX(-1);transform:scaleX(-1)}
#banner .arrow a svg{fill:#666666;width:20px}
#banner .arrow a.next svg{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
#banner .arrow .papabar .count{font-family:"Fredoka",sans-serif;letter-spacing:5px;font-weight:600}

/* scrollBtn */
.page-scroll a{display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color: #ffffff;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;font-size:12px;padding-top:50px;z-index: 20;position: relative;}
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,-100px)}
100%{transform:translate(0px,0px)}
}
.page-scroll{bottom:40px;margin-left:0;left:50px;z-index:201;transform:translateX(-50%);text-align:center;width:20px;position:absolute}
.page-scroll:before{content:"";position:absolute;background-image:url(/images/39/img-scroll-bg.png);top:-100px;right:-120px;width:184px;height:231px;z-index:20}
.page-scroll.style01 a::before{content:"";position:absolute;background: #ffffff;top: 100px;right: 16px;width: 10px;height: 10px;border-radius: 50%;animation:web_menu002 ease-in-out 5s infinite;animation-direction:alternate;z-index: 1;}
.page-scroll.style01 a::after{box-sizing:border-box;content:"";position:absolute;top: 0;right: 20px;width:1px;height:100px;background: #ffffff;opacity:.3;z-index: 0;}
.page-scroll.style01 a span{box-sizing:border-box;position: absolute;bottom: 0;left: -20px;transform: translate(40%, 130%);color: #fff;text-transform: uppercase;font-size: 15px;font-family: "Fredoka", sans-serif;}


@media screen and (max-width: 1690px){
	#banner .slick-slide::after{left:-180px}
}
@media screen and (min-width: 1441px){
	#banner .img_box {max-width: calc(100% - 415px);margin-left: auto;position: relative;z-index: 1;overflow: hidden;order: 1;}
	#banner .arrow {top: 10px;left: 30rem;display: flex;justify-content: space-between;align-items: center;}
}
@media screen and (max-width: 1440px){
	#banner .img_box{max-width:calc(100% - 315px);margin-left:auto;position:relative;z-index:1;overflow:hidden;order:1}
	#banner .arrow{top:10px;left:25rem;display:flex;justify-content:space-between;align-items:center}
	#banner .bannerImgBox .bannerCloud-rt{left:110px;top:70px}
	#banner .bannerImgBox .bannerCloud-lb{left:390px;bottom:85px}
	#banner .info h3{font-size:2rem}
	#banner .info p{font-size:1.4rem}
}
@media screen and (max-width: 1366px){
	.arrowBox{display:none}
	#banner .slick-slide::after{left:-230px}
}
@media screen and (min-width: 1281px){
	#banner .img_box .lt{position:absolute;width:330px;height:110px;background:#fff;position:absolute;left:0;top:0;z-index:10;border-radius:0 0 60px 0}
	#banner .img_box .lt:before{content:"";display:block;position:absolute;right:-59px;top:-1px;background:url(/images/39/mask_lt.png);background-size:cover;z-index:10;width:61px;height:61px}
	#banner .img_box .lt:after{content:"";display:block;position:absolute;left:0px;bottom:-60px;background:url(/images/39/mask_lt.png);background-size:cover;z-index:10;width:61px;height:61px}
	#banner .img_box img {border-radius: 30px 0 0 30px;}
	#banner:before { position: absolute; width: 100%; height: 1px; background: var(--gary); bottom: calc(10vw - 1px); left: 0; z-index: 3; content: ""; }
	#banner .slick-slide {display: block;min-width: 30vw;}
	#banner .info {position: absolute;height: 100%;top: 0;left: 9rem;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;}
}
@media screen and (max-width: 1280px){
	#banner .img_box {max-width: calc(100% - 83px);margin-left: auto;position: relative;z-index: 1;overflow: hidden;order: 1;}
	#banner .slick-slide::after{ display: none;}
	#banner .info {padding: 1rem 2vw 2rem;display: flex;flex-direction: column;align-items: center;}
	#banner .info h3 {text-align: center;font-size: 36px;padding: 10px 0;margin: 0;}
	#banner .info p {text-align: center;font-size: 20px;line-height: 160%;padding: 0 10px;}
	#banner .info b,#banner .bannerImgBox { display: none; }
	#banner{margin-top: 100px;}
	#banner .info .country{margin-top:20px;width:260px;display: none;}
	#banner .arrow, .page-scroll{display:none}
	#banner .img_box{max-width: calc(100% - 0px);}
}

@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 h3 { word-spacing: 100vw; }
}
@media screen and (max-width: 550px){
	#banner .img_box img {height: 70vw;}
	#banner .arrow { top: calc(100vw - 68px); }
}