#articleInfo32 { position: relative; z-index: 1; }
#articleInfo32 ul { position: relative; display: flex; flex-direction: column; padding: 0; }
#articleInfo32 ul:before { position: absolute; margin-left: -10px; top: 0; width: 5px; height: 100%; background: #d4d4d4; left: calc(22% + 38px); content: ""; z-index: -1; border-radius: 10px; }
#articleInfo32 ul li { overflow: hidden; margin: 10px 0 20px; display: flex; }
#articleInfo32 ul li>div { width: 20%; margin-right: 2%; display: flex; flex-direction: column; }
#articleInfo32 ul li .titBox p, #articleInfo32 ul li .titBox h3 { margin-right: 10px; text-align: right; color: #aeaeae; }
#articleInfo32 ul li .titBox h3 { font-size: 25px; color: #565757; transition: all 0.4s ease-in-out 0s; }
#articleInfo32 ul li >.icon { position: relative; margin: 8px 10px 0; width: 40px; height: 40px; background: #c39a75; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; text-align: center; line-height: 40px; font-size: 20px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; }
#articleInfo32 ul li >.icon .fa { color: white; }
#articleInfo32 ul li >.icon:before { content: ""; position: absolute; width: 100%; height: 100%; background: #c39a7545; border-radius: 50%; z-index: -1; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); animation: scaleAndFade 3s ease-in-out infinite; -webkit-animation: scaleAndFade 3s ease-in-out infinite; }

#articleInfo32 ul li .info { position: relative; margin: 0 0 20px 3%; width: 65%; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }
#articleInfo32 ul li .info:before { position: absolute; left: -7px; top: 18px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #565757; content: ""; }
#articleInfo32 ul li .info h3 { padding: 10px; background: #565757; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; font-size: 18px; color: #fff; }

#articleInfo32 ul li .info article { padding: 15px 20px; border-left: 1px #ccc solid; border-right: 1px #dedada solid; line-height: 180%; background: white; height: 72px; overflow: hidden; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#articleInfo32 .scollbar { position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 4px; top: 0; left: calc(22% + 31px); background: #d0b398; height: 0px; transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; -ms-transition: unset; z-index: 1; max-height: 100%; }

/* animation */
@keyframes scaleAndFade { 0%, 100% { transform: scale(1.3); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.3; } }
@-webkit-keyframes scaleAndFade { 0%, 100% { -webkit-transform: scale(1.3); opacity: 1; } 50% { -webkit-transform: scale(1.4); opacity: 0.3; } }
@keyframes animatedIcon { 0% { padding-left: 10px; } 50% { padding-left: 20px; } 100% { padding-left: 10px; } }
@-o-keyframes animatedIcon { 0% { padding-left: 10px; } 50% { padding-left: 20px; } 100% { padding-left: 10px; } }
@-webkit-keyframes animatedIcon { 0% { padding-left: 10px; } 50% { padding-left: 20px; } 100% { padding-left: 10px; } }
@-moz-keyframes animatedIcon { 0% { padding-left: 10px; } 50% { padding-left: 20px; } 100% { padding-left: 10px; } }
@-ms-keyframes animatedIcon { 0% { padding-left: 10px; } 50% { padding-left: 20px; } 100% { padding-left: 10px; } }

@media screen and (max-width:768px) {
	#articleInfo32 ul li .titBox h3 { font-size: 16px; margin-right: 0; }
	#articleInfo32 ul li .titBox p { font-size: 14px; margin-right: 0; }
}
@media screen and (max-width:680px) {
	#articleInfo32 ul:before { left: 54px; height: calc(100% - 170px); }
	#articleInfo32 ul li .titBox { width: calc(100% - 90px); margin-right: 0%; display: flex; order: 1; }
	#articleInfo32 ul li { display: flex; flex-wrap: wrap; }
	#articleInfo32 .scollbar { left: 47px; max-height: calc(100% - 170px); }
	#articleInfo32 ul li:hover .titBox h3 { margin-top: 0; }
	#articleInfo32 ul li >.icon { -webkit-box-shadow: 0 0 0 8px #fff; -moz-box-shadow: 0 0 0 8px #fff; -ms-box-shadow: 0 0 0 8px #fff; box-shadow: 0 0 0 8px #fff; margin-left: 27px; margin-bottom: 14px; order: 0; margin: 17px 0 14px 27px; }
	#articleInfo32 ul li:hover .icon { -webkit-box-shadow: 0 0 0 8px #afdcf8; -moz-box-shadow: 0 0 0 8px #afdcf8; -ms-box-shadow: 0 0 0 8px #afdcf8; box-shadow: 0 0 0 8px #afdcf8; }
	#articleInfo32 ul li .info { margin: 10px 0 20px 0; width: 100%; order: 2; z-index: 5; }
	#articleInfo32 ul li .info:before { left: 40px; top: -7px; border-top: 0; border-bottom: 7px solid #565757; border-right: 7px solid transparent; border-left: 7px solid transparent; }
}
@media screen and (max-width:480px) {
	#articleInfo32 .scollbar { height: 100%; }
}