@import url('/css/animate.css');
.wow{animation: fadeInUp 1.5s both;-webkit-animation: fadeInUp 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 h3{text-align:center;font-weight:500;font-size:30px;margin-bottom:60px;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
#articleInfo15 >p{margin-bottom: 50px;font-weight: 300;line-height: 200%;padding: 0 8px;margin-top: 20px;}
#articleInfo15 >p a{color: var(--primary);}
#articleInfo15 .info{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:80px}
#articleInfo15 .info .item{width:calc((100%/3) - 100px);margin:10px;box-shadow:0 0 10px rgb(0 0 0 / 15%);border-radius:5px;display:flex;flex-direction:column;align-items:center;padding:40px;background: #fff;}
#articleInfo15 .info .item .circle{width:110px;border:1px solid #29a6dd;border-radius:100px;padding:7px;margin-bottom:20px}
#articleInfo15 .info .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)}}
#articleInfo15 ol{width:calc(100% - 30px);padding-left:30px}
#articleInfo15 li{width:100%;list-style:disc}
#articleInfo15 ul li .item{padding:20px 30px}
#articleInfo15 ul li:nth-child(2) .item{border-left:1px #e2e2e2 solid;border-right:1px #e2e2e2 solid}
#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:18px}
#articleInfo15 .imgBox{overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center}
#articleInfo15 .imgBox p{margin:8px;width: calc((100%/3) - 16px);}
#articleInfo15 .imgBox p.first{width: calc((100%/1) - 16px);}
#articleInfo15 .imgBox p img{border-radius:5px}
#articleInfo15 .imgBox p:hover img{transform: scale(0.98);border-radius: 5px;}

@media screen and (max-width:768px){
	#articleInfo15 .info .item{width: calc((100%/2) - 100px);}
}
@media screen and (max-width:640px){
	#articleInfo15 .info .item{width: calc(100% - 100px);}
	#articleInfo15 .imgBox p{width: calc(100% - 20px);margin: 10px;}
}