.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 ul{margin-bottom:20px;min-height:500px;text-align:center}
#articleInfo20 .topBox{display:grid;grid-template-columns:55% 40%;justify-content:space-between;align-items:center;margin:30px 0}
#articleInfo20 .topBox >div:first-child img{border-radius:40px}
#articleInfo20 .topBox img{width:100%;aspect-ratio:4/3;object-fit:cover}
#articleInfo20 .topBox >div{animation-name:fadeInDown;-webkit-animation-name:fadeInDown}
#articleInfo20 .topBox >div{}
#articleInfo20 .topBox >div:nth-child(2){display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
#articleInfo20 ul li.focus{padding:55px 25px;background:#caa34b;border-color:#775e27;color:#242425}
#articleInfo20 ul li h3{font-size:20px}
#articleInfo20 ul li h5{font-size:16px;color:#caa34b}
#articleInfo20 ul li.focus h5{color:#fff}
#articleInfo20 ul li p.photo{margin:15px 0}
#articleInfo20 .bottomBox{position:relative}
#articleInfo20 .bottomBox h3,#processBox h3{font-size:35px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;color:#84ad71}
#articleInfo20 .bottomBox p{margin:10px 0 20px;font-size:22px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;color:#603813;font-weight:bold}
#articleInfo20 .bottomBox article{animation-name:fadeInUp;-webkit-animation-name:fadeInUp;margin-bottom:50px;color:#603813;font-size:19px}
#articleInfo20 .bottomBox article strong{color:#84ad71;font-size:26px;font-weight:500;vertical-align:baseline}
#processBox ul{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;width:min(100%,1200px);margin:0 auto}
#processBox li{position:relative;display:flex;flex-direction:column;align-items:center;margin:30px;justify-content:center}
#processBox li .num{position:absolute;font-family:"Barlow",sans-serif;font-size:23px;width:40px;aspect-ratio:3 / 3;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--white);border-radius:50px;left:15%;z-index:2;top:0px}
#processBox li:not(:last-child,:nth-child(4)):after{content:url(/images/44/triangle.png);position:absolute;right:-40px}
#processBox li .item{border:5px solid var(--secondary);width:150px;aspect-ratio:3 / 3;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
#processBox li .item:after{content:'';position:absolute;width:100%;height:100%;border:10px solid #fff;border-radius:50%;z-index:-1;left:0;top:0}
#processBox li img{width:57px;aspect-ratio:3 / 3}
#processBox li h3{text-align:center;font-size:22px;margin-top:25px;font-weight:500;line-height:1.5}
#processBox li:hover .item:after{top:-10px;left:-10px}

@media screen and (max-width:1024px){
	#processBox ul{grid-template-columns:repeat(3,1fr)}
	#articleInfo20 .bottomBox:before{right:0%}
	#articleInfo20 .topBox{grid-template-columns:1fr;gap:25px 0}
}
@media screen and (max-width:980px){
	#processBox ul{grid-template-columns:repeat(2,1fr)}
	#articleInfo20 .bottomBox:before{display:none}
}
@media screen and (max-width:480px){
	#processBox li .num{top:0;left:-10px}
	#processBox li .item,#articleInfo13 ul.topBox{width:100%}
	#articleInfo20 ul li{margin-bottom:10px;width:calc(100% - 55px)}
	#teamm .secBox .photoBox > div{width:calc((100%/2) - 10px)}
}