#articleInfo20 >h3{text-align:center;font-size:30px;font-weight: 500;margin-bottom:50px}
#articleInfo20 .topBox ul{margin-top:10px;}
#articleInfo20 .topBox li a{font-size:16px;color: #666666;text-align:center;font-weight:300;display: block;}
#articleInfo20 .topBox li a:hover{color: var(--primary);}
#articleInfo20 .topBox h5{color: var(--primary);font-size: 21px;text-align: center;line-height: 150%;height: 63px;font-weight: 500;}
#articleInfo20 .bottomBox h3{text-align:center;font-size:30px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo20 .bottomBox p{margin:10px 0 20px;text-align:center;font-size:18px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo20 .bottomBox article{animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo20 .topBox{display:flex;flex-wrap: wrap;justify-content: center;}
#articleInfo20 .topBox .info{width: calc((100%/3) - 80px);margin: 25px 10px;box-shadow: 0 0 10px rgb(0 0 0 / 10%);padding: 60px 30px;border-radius: 5px;display: flex;flex-direction: column;align-items: center;background: #fff;}
#articleInfo20 .topBox .info .photo{margin-bottom: 15px;width: 70px;}
#articleInfo20 .topBox .info:hover .photo{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:768px){
	#articleInfo20 .topBox .info{width: calc((100%/2) - 80px);}
}
@media screen and (max-width:640px){
	#articleInfo20 >h3{margin-bottom:25px;line-height: 150%;}
	#articleInfo20 .topBox .info{width: calc(100% - 80px);}
}