.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}
#articleInfo20{padding-top:30px}
#articleInfo20 ul{margin-bottom:20px;min-height:500px;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;margin-top:70px}
#articleInfo20 ul li{margin:50px 10px;padding:30px;width:calc((100%/2) - 120px);display:inline-block;animation-name:fadeInDown;-webkit-animation-name:fadeInDown;transition:all linear 0.3s;position:relative;border-radius:20px;display:flex;background-color:#ffffff17;align-items:center;justify-content:space-between}
#articleInfo20 ul li:nth-child(2),#articleInfo20 ul li:nth-child(4){}
#articleInfo20 ul li article::before{content:"";width:60px;height:60px;background:-webkit-gradient(linear,left top,right top,from(var(--primary)),to(var(--secondary)));background:linear-gradient(to right,var(--primary),var(--secondary));position:absolute;top:-50px;right:0;z-index:2;border-radius:50%}
#articleInfo20 ul li article::after{content:"";display:block;width:15px;height:15px;background-color:transparent;border-top:1px solid #fff;border-right:1px solid #fff;-webkit-transform:rotate(135deg);transform:rotate(135deg);position:absolute;bottom:auto;top:-25px;right:22px;margin-left:-12px;margin-top:-7px;z-index:10}
#articleInfo20 ul li h3{font-size:22px;font-weight:600;background:-webkit-gradient(linear,left top,right top,from(var(--primary)),to(var(--secondary)));background:linear-gradient(to right,var(--primary),var(--secondary));background-clip:text;-webkit-background-clip:text;color:transparent;position:absolute;top:-50px}
#articleInfo20 ul li h5{font-size:16px;color:#888}
#articleInfo20 ul li.focus h5{color:#888}
#articleInfo20 ul li p.photo{margin:0px 0px 0px 0;width:100px;height:100px}
#articleInfo20 ul li article{display:flex;-webkit-box-align:start;align-items:flex-start;margin-left:20px;width:calc(100% - 140px);padding:20px 0px 20px;position:relative;line-height:180%}
#articleInfo20 .bottomBox h3{text-align:center;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;line-height:34px;letter-spacing:1px;margin-bottom:20px;font-weight:600;background:-webkit-gradient(linear,left top,right top,from(var(--primary)),to(var(--secondary)));background:linear-gradient(to right,var(--primary),var(--secondary));background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:600;font-size:34px}
#articleInfo20 .bottomBox p{margin:0px 0 30px;text-align:center;font-size:17px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;vertical-align:baseline;text-transform:uppercase}
#articleInfo20 .bottomBox article{animation-name:fadeInUp;-webkit-animation-name:fadeInUp}

@media screen and (max-width: 1280px) {
    #articleInfo20 ul li{width:calc((100%/2) - 60px);padding:20px}
}

@media screen and (max-width: 768px) {
    #articleInfo20 ul li{width:calc((100%/1) - 170px)}
	#articleInfo20 ul li{margin-bottom:90px;width:calc((100%/1) - 0px)}
	#articleInfo20 ul li h3{font-size:23px}
	#articleInfo20 ul li::before{top:-20px;width:60px}
	#articleInfo20 ul li p.photo{padding-right:0;width:80px;height:80px}
	#articleInfo20 ul li article{margin-left:0;width:calc(100% - 0px);padding:20px 0px 10px}
	#articleInfo20 ul li article::before{width:50px;height:50px;right:10px;display:none}
	#articleInfo20 ul li article::after{right:27px;top:-25px;display:none}
	#articleInfo20 ul li{margin-bottom:60px;display:flex;flex-direction:column;align-items:center}
	#articleInfo20 .bottomBox h3{font-size:26px}
}

@media screen and (max-width: 480px) {
    #articleInfo20{padding-top:0px}
}