#articleInfo20 ul {display: flex;flex-wrap: wrap;}
#articleInfo20 ul li {
	width: 25%;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	transition:all linear 0.3s;
	margin-bottom: 30px;
}
#articleInfo20 ul li.focus {
	padding: 55px 25px;
	background: #caa34b;
	border-color: #775e27;
	color: #242425;
}
#articleInfo20 ul li h3 {
	font-size: 20px;
	text-align: center;
	margin-bottom: 10px;
}
#articleInfo20 ul li article {
	font-size: 14px;
	color: #818181;
	padding: 0 20px;
	text-align: center;
}
#articleInfo20 ul li.focus h5 {
	color: #fff;
}
#articleInfo20 ul li p.photo {
	margin: 10px auto 20px;
	width: 50%;
}
#articleInfo20 ul li:hover p.photo{-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;-webkit-animation: dailogAni 4s infinite ease-in-out alternate;animation: dailogAni 4s infinite ease-in-out alternate;}
@-webkit-keyframes dailogAni {
  0%,
  10% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  5%,

  15% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  45% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50%,
  60% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  55%,
  65% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  70%,
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

@keyframes dailogAni {
  0%,
  10% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  5%,
  15% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  45% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50%,
  60% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  55%,
  65% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  70%,
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
#articleInfo20 .bottomBox h3 {
	text-align: center;
	font-size: 30px;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}
#articleInfo20 .bottomBox p {
	margin: 0 0 30px;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: justify;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}
#articleInfo20 .bottomBox article {
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}

@media screen and (max-width: 1440px) {
#articleInfo20 ul li {
	width: calc(100%/3);
}
}
@media screen and (max-width: 768px) {
	#articleInfo20 ul li {
		width: 50%;
	}
	#articleInfo20 ul li.focus {
		padding: 25px;
	}
}
@media screen and (max-width: 480px) {
	#articleInfo20 ul li {
		margin-bottom: 10px;
		width: 100%;
	}
}