.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
.delay1{animation-delay:0.5s;-webkit-animation-delay:0.5s}
.delay2{animation-delay:1.0s;-webkit-animation-delay:1.0s}
.titleBox{position:absolute;top:50%;letter-spacing:10px}
.titleBox em{font-size:30px;color:#fff}
.titleBox h2{font-size:34px;letter-spacing:10px;line-height:1}
.titleBox em::before{background:#fff;left:-65px}
.titleBox{text-align:center;position:relative;padding:30px 0}
.titleBox:hover h2{letter-spacing:2.5px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}
.titleBox::before{content:'';width:28%;height:1px;background:rgb(82 82 82 / 30%);position:absolute;top:50%;left:0}
.titleBox::after{content:'';width:28%;height:1px;background:rgb(82 82 82 / 30%);position:absolute;top:50%;right:0}
.titleBox h2{position:relative;padding:0 40px;letter-spacing:1.5px;display:inline-block;z-index:10;font-weight:300}
.titleBox h2 a{font-size:23px;font-weight:400}
#articleInfo15 .tit{position:relative;text-align:center;z-index:2}
#articleInfo15 .tit h3{text-align:center;font-size:33px}
#articleInfo15 .tit font{padding:0 20px;background:#fff;display:inline-block;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}
#articleInfo15:hover .tit h3,#articleInfo15:hover .tit font{letter-spacing:5px}
#articleInfo15 ul{overflow:hidden;position:relative;padding:0px 0 35px;z-index:1;display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start}
#articleInfo15 ul li{width:33%;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo15 ul li .itemOpacity{position:relative}
#articleInfo15 ul li .itemOpacity .Img{background-color:rgb(78 78 78 / 8%);overflow:hidden;margin:0px 0}
#articleInfo15 ul li .itemOpacity .Img img{-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%;object-fit:cover}
#articleInfo15 ul li .itemOpacity:hover .Img img{opacity:0.75;-webkit-transform:scale(1.00);-ms-transform:scale(1.00);transform:scale(0.99)}
#articleInfo15 ul li .itemOpacity.white .Img{background-color:#fff}
#articleInfo15 ul li{overflow:hidden;display:inline-block;vertical-align:top;width:28%;border:10px solid #efefef;margin:8px 5px 8px 0px;padding:20px;line-height:180%}
#articleInfo15 ul li strong{color:#08876c;font-weight:500;margin-right:10px;vertical-align:inherit}
#articleInfo15 .Img{text-align:center;margin:20px 0}
#articleInfo15 .Txt{color:#fff;width:100%;display:flex;text-align:center;flex-direction:column;align-items:center;padding:0px 0 30px;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0 0 0 / 72%) 100%);position:absolute;left:0;right:0;bottom:0}
#articleInfo15 ul li .item .circle:before{position:absolute;width:124px;height:124px;border:2px rgba(60,75,53,0.8) solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;left:-6px;top:-6px;z-index:-1;content:""}
#articleInfo15 ul li .item p{text-align:center;font-size:18px}
#articleInfo15 .imgBox{overflow:hidden}
#articleInfo15 .imgBox p{margin:0 1% 0 0;overflow:hidden;float:left;width:49%;animation-name:fadeInLeft;-webkit-animation-name:fadeInUp}
#articleInfo15 .imgBox p:nth-child(2){margin:0 0 0 1%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo15 .imgBox p:hover img{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}
#articleInfo15 .en a{display:block;font-size:14px;letter-spacing:.05em;color:#fff;font-family:"Poppins","Noto Sans TC",sans-serif;text-transform:uppercase}
#articleInfo15 .title a{display:block;font-size:18px;letter-spacing:3px;color:#fff;font-weight:400}


@media (max-width:960px){
	.titleBox::before,.titleBox::after{width:8%}
}
@media (max-width:768px){
	.titleBox::before,.titleBox::after{width:0%}
}
@media (max-width:480px){
	#articleInfo15 .Txt{padding:15px 10px;width:calc(100% - 20px);position:inherit;background:none}
}

@media (max-width:480px){
	#articleInfo15 .en{font-size:12px}
}

@media (max-width:480px){
	#articleInfo15 .title{font-size:15px}
}
#articleInfo15 ul li .item .circle{position:relative;margin:0 auto 15px;width:114px;height:114px;border:1px rgba(60,75,53,0.5) solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;text-align:center;font-size:55px;line-height:114px}
#articleInfo15 ul li .item:hover .circle{animation:flipInX 1.5s both;-webkit-animation:flipInX 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}

@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}
40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}
60%{transform:perspective(400px) rotateX(10deg);opacity:1}
80%{transform:perspective(400px) rotateX(-5deg)}
to{transform:perspective(400px)}
}

@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotateX(-5deg)}
to{-webkit-transform:perspective(400px)}
}

@media screen and (max-width:1024px){
	#articleInfo15 ul li .itemOpacity .Img img{height:230px}
}
@media screen and (max-width:768px){
	#articleInfo15 ul li{width:calc((100%/3) - 18px);border:5px solid #efefef;margin:5px 2px}
	#articleInfo15 ul li .itemOpacity .Img img{height:170px}
}
@media screen and (max-width:640px){
	#articleInfo15 ul li{width:calc((100%/2) - 33px)}
	#articleInfo15 ul li:nth-child(2) .item{border-left:0}
	.titleBox{padding:10px 0}
	.titleBox h2{text-align:center}
	.titleBox h2 a{font-size:21px;font-weight:400;line-height:120%}
	#articleInfo15 ul li .itemOpacity .Img img{height:auto}
}
@media screen and (max-width:480px){
	#articleInfo15 ul li{width:calc((100%/1) - 12px)}
	#articleInfo15 .imgBox p{margin:10px 0;width:100%}
}