.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}
#articleInfo15 .tit{position:relative;text-align:center;z-index:2;display:flex;align-items:center;justify-content:center;margin:30px 0}
#articleInfo15 .tit:after{content:'';width:100%;height:1px;position:absolute;background:#efefef}
#articleInfo15 .tit h3{text-align:center;font-family:"Noto Serif TC",serif;font-size:35px;font-weight:500;line-height:170%;letter-spacing:2px;display:flex;justify-content:center;align-items:center;position:relative;z-index:2;background:#fff;padding:0 20px}
#articleInfo15 .tit h3:after{content:url(/images/44/img-star.png);margin-left:10px;margin-top:5px}
#articleInfo15 .tit h3:before{content:url(/images/44/img-star.png);margin-right:10px;margin-top:5px}
#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 ul{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between}
#articleInfo15 ul li{width:calc(100%/3);animation-name:fadeInUp;-webkit-animation-name:fadeInUp;position:relative}
#articleInfo15 ul li .item{width:300px;height:300px;background:#f9f8ef;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
#articleInfo15 ul li:first-child:before{content:url(/images/44/img-coin.png);position: absolute;right: 70px;top: 40px;z-index: 2;}
#articleInfo15 ul li:first-child:after{content:url(/images/44/img-people3.png);position: absolute;left: -40px;bottom: 0px;z-index: 2;animation-name: people3;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 1.5s;zoom: 95%;}
@keyframes people3{0%{transform-origin:right bottom;transform:rotate(-3deg)}100%{transform-origin:right bottom;transform:rotate(3deg)}}
#articleInfo15 ul li:last-child:before{content:url(/images/44/img-coin.png);position: absolute;left: 5px;bottom: 60px;z-index: 2;}
#articleInfo15 ul li:last-child:after{content:url(/images/44/img-people2.png);position: absolute;right: -5px;bottom: -20px;z-index: 2;animation-name: people2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 1.5s;}
@keyframes people2{0%{bottom:-20px;    right: -15px;}100%{bottom:-30px;    right: -5px;}}
#articleInfo15 ul li .item:after{content:'';background-image: url(/images/44/img-bgg.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: absolute;bottom: -55px;width: 100%;height: 45%;}
#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}
#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:20px;font-weight:500;color:#333;margin-bottom:20px;margin-top:-40px}
#articleInfo15 ul li .item article{color:var(--complement);font-size:115px;font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-5px;line-height:70%;display:flex;align-items:flex-end;justify-content:center}
#articleInfo15 ul li .item article b{font-size:18px;color:#333;letter-spacing:0;width:20px;display:inline-block;line-height:110%;margin-left:10px}
#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)}

@media screen and (max-width: 1280px) {
	#articleInfo15 ul li:first-child:before{right:0px}
}
@media screen and (max-width: 980px) {
	#articleInfo15 ul li:first-child:after{left: 165px;}
	#articleInfo15 ul li:first-child:before{right: 30%;}
	#product_area:after{display:none;}
	#articleInfo15 ul li{width: 100%;display: flex;justify-content: center;margin: 10px 0;}
	#articleInfo15 ul li:last-child:before{left: 28%;}
	@keyframes people2{0%{bottom:-20px; right: 15%;}100%{bottom:-30px; right: 20%;}}
}
@media screen and (max-width: 480px) {
	@keyframes people2{0%{bottom:-25px; right: -3%;}100%{bottom:-20px; right: 3%;}}
	#articleInfo15 ul li:last-child:before{left: 6%;}
	#articleInfo15 ul li:first-child:after{left: -15px;}
	#articleInfo15 ul li:first-child:before{right: 10%;}
	#articleInfo15 .tit h3:before, #articleInfo15 .tit h3:after{zoom:80%;margin-top: 8px;}
	#tabs_container .topBox .tt h1{font-size:30px;}
	#articleInfo15 .tit:after{display:none;}
	#articleInfo15 .tit h3{padding:0;font-size: 30px;}
	#articleInfo15 ul li{width:100%}
	#articleInfo15 ul li:nth-child(2) .item{border-right:0;border-top:1px #e2e2e2 solid;border-bottom:1px #e2e2e2 solid}
	#articleInfo15 .imgBox p{margin:10px 0;width:100%}
}