@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
.wow{animation-name:fadeInDown;-webkit-animation-name:fadeInDown;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-fill-mode:both;-webkit-animation-fill-mode:both;animation-duration:1s;-webkit-animation-duration:1s}
#articleInfo5{position:relative;z-index:1}
#articleInfo5 ul{position:relative;display:flex;flex-direction:column;padding:0}
#articleInfo5 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}
#articleInfo5 ul li{overflow:hidden;margin:10px 0 20px;display:flex}
#articleInfo5 ul li > div{width:20%;margin-right:2%;display:flex;flex-direction:column}
#articleInfo5 ul li .titBox p,#articleInfo5 ul li .titBox h3{margin-right:10px;text-align:right;color:#aeaeae}
#articleInfo5 ul li .titBox h3{font-size:25px;color:#565757;transition:all 0.4s ease-in-out 0s}
#articleInfo5 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}
#articleInfo5 ul li .icon .fa{color:white}
#articleInfo5 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}
@keyframes scaleAndFade{0%,100%{-moz-transform:scale(1.3);-webkit-transform:scale(1.3);-o-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);opacity:1}
50%{-moz-transform:scale(1.4);-webkit-transform:scale(1.4);-o-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);opacity:0.3}
}#articleInfo5 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}
#articleInfo5 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:""}
#articleInfo5 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}
@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}
}#articleInfo5 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}
#articleInfo5 .ganheigh{}
#articleInfo5 .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%}
@media screen and (max-width:1280px){
	#articleInfo5 ul:before{}
}
@media screen and (max-width:768px){
	#articleInfo5 ul:before{}
	#articleInfo5 ul li .titBox h3{font-size:16px;margin-right:0}
	#articleInfo5 ul li .titBox p{font-size:14px;margin-right:0}
}
@media screen and (max-width:680px){
	#articleInfo5 ul:before{left:54px;height:calc(100% - 170px)}
	#articleInfo5 ul li .titBox{width:calc(100% - 90px);margin-right:0%;display:flex;order:1}
	#articleInfo5 ul li{display:flex;flex-wrap:wrap}
	#articleInfo5 .scollbar{left:47px;max-height:calc(100% - 170px)}
	#articleInfo5 ul li:hover .titBox h3{margin-top:0}
	#articleInfo5 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}
	#articleInfo5 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}
	#articleInfo5 ul li .info{margin:10px 0 20px 0;width:100%;order:2;z-index:5}
	#articleInfo5 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){
	#articleInfo5 .scollbar{height:100%}
}