.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: 40px 0 0;min-height:500px;text-align:center;justify-content: space-between;display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
#articleInfo20 ul li{padding: 0;display:inline-block;animation-name:fadeInDown;-webkit-animation-name:fadeInDown;transition:all linear 0.3s;position:relative;border-radius:20px}
#articleInfo20 ul li:nth-child(2n){}
#articleInfo20 ul li h3{font-weight:400;font-size:22px;letter-spacing:0.5em;margin-bottom:10px}
#articleInfo20 ul li article::before{content:"";width:60px;height:60px;background-color:var(--triadic2);position:absolute;top:-30px;right:20px;z-index:2;border-radius:50%}
#articleInfo20 ul li h3 a{color:#231f17;font-size:22px;font-weight:600}
#articleInfo20 ul li h5{font-size:16px;color:#888}
#articleInfo20 ul li.focus h5{color:#888}
#articleInfo20 ul li p.photo{margin:0px 0 15px 0;}
#articleInfo20 ul li p.photo img{box-shadow:4px 7px 30px #d4d3d3b5;aspect-ratio: 5 /3;object-fit: cover;}
#articleInfo20 ul li article{background-color:#fff;-webkit-box-shadow:0px 0px 22.8px 1.2px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 22.8px 1.2px rgba(0,0,0,0.15);box-shadow:0px 0px 22.8px 1.2px rgba(0,0,0,0.15);display:flex;-webkit-box-align:start;align-items:flex-start;margin-left:40px;margin-top:-40px;padding:30px 80px 30px 40px;position:relative;line-height:190%}
#articleInfo20 ul li article .titLine{
    position: absolute;
    top: -22px;
    right: 34px;
    color: #fff;
    z-index: 10;
    letter-spacing: 1px;
    font-family: 'Cardo', serif;
    font-weight: bold;
    font-size: 26px;
}
#articleInfo20 .bottomBox h3{text-align:center;font-size:30px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;font-weight:500;line-height:34px;letter-spacing:1px;font-size:24px;margin-bottom:20px;font-weight:600}
#articleInfo20 .bottomBox{}
#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:nth-child(2),#articleInfo20 ul li:nth-child(4){margin-top:0}
    #articleInfo20 ul{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width:960px){
	#articleInfo20 ul li{width:calc((100%/1) - 170px)}
	#articleInfo20 ul li{margin-bottom:50px;width:calc((100%/1) - 0px);padding:0}
	#articleInfo20 ul li h3{font-size:22px}
	#articleInfo20 ul li::before{top:-20px;width:60px}
	#articleInfo20 ul li p.photo{padding-right:0}
	#articleInfo20 ul li article{margin-top:-20px;padding:30px 10px 30px 30px;margin-left:10px}
	#articleInfo20 ul li article::before{width:50px;height:50px;right:10px}
	#articleInfo20 ul li article .titLine{
    right: 20px;
    top: -24px;
}
    #articleInfo20 ul li article::after{right:27px;top:-10px}
    #articleInfo20 ul{grid-template-columns: repeat(1, 1fr);}
}
@media screen and (max-width:480px){
	#articleInfo20 ul li{margin-bottom: 0px;}
	#articleInfo20{padding-top:0px}
}