.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; }
.delay3 { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
.delay4 { animation-delay: 2.0s; -webkit-animation-delay: 2.0s; }
.delay5 { animation-delay: 2.5s; -webkit-animation-delay: 2.5s; }
.delay6 { animation-delay: 3.0s; -webkit-animation-delay: 3.0s; }
.delay7 { animation-delay: 3.5s; -webkit-animation-delay: 3.5s; }
#articleInfo15 .tit { position: relative; text-align: center; z-index: 2; }
#articleInfo15 .tit h3 { text-align: center; font-size: 26px; margin-bottom: 24px; line-height: 140%; }
#articleInfo15 .tit h3 a{
    font-size: 26px;
}
#articleInfo15 .tit font { display: inline-block; transition: all 0.5s ease; font-size: 18px; line-height: 140%; text-align: center; }
#articleInfo15 .tit font:hover{ letter-spacing: 5px; }
#articleInfo15 ul { overflow: hidden; position: relative; margin: 10px 0 30px; padding: 50px 0 35px; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; }
#articleInfo15 ul li { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }
#articleInfo15 ul li .item { }
#articleInfo15 ul li:nth-child(2) .item { }
#articleInfo15 ul li .item .circle { position: relative; margin: 0 auto 15px; width: 114px; height: 114px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; box-sizing: border-box; text-align: center; font-size: 55px; line-height: 99px; }
#articleInfo15 ul li .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 ul li .item .circle:before { position: absolute; width: 124px; height: 124px; border: 2px rgba(230, 230, 230, 0.8) solid; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; box-sizing: border-box; left: -6px; top: -12px; z-index: -1; content: ""; }
#articleInfo15 ul li .item p { text-align: center; font-size: 18px; }
#articleInfo15 .imgBox p { margin: 0 1% 0 0; overflow: hidden; float: left; width: 49%; animation-name: fadeInLeft; -webkit-animation-name: fadeInUp; }
#articleInfo15 .imgBox p:nth-child(2) { margin: 0 0 0 1%; animation-name: fadeInRight; -webkit-animation-name: fadeInRight; }
#articleInfo15 .imgBox p:hover img { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); }

@media screen and (max-width: 1280px) { 
	#articleInfo15 ul { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 640px) { 
	#articleInfo15 ul { grid-template-columns: repeat(2, 1fr); gap: 30px 10px; }
	#articleInfo15 ul li:nth-child(2) .item { border-left: 0; }
}
@media screen and (max-width: 480px) { 
	#articleInfo15 ul li:nth-child(2) .item { border-right: 0; }
	#articleInfo15 .imgBox p { margin: 10px 0; width: 100%; }
}