.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 .item .info{width:100%;z-index:2;position:relative;margin-top:40px}
#articleInfo5 .item .info h3{padding-left:7%;height:auto;font-weight:600;font-size:22px;-webkit-line-clamp:1;font-family:'Kanit',sans-serif;text-transform:uppercase}
#articleInfo5 .item .info p{padding-left:7%}
#articleInfo5 .photo{position:relative}
#articleInfo5 .photo:after{content:'';background:linear-gradient(to bottom,rgb(0 0 0 / 0%),rgb(0 0 0 / 50%));position:absolute;width:100%;height:50%;bottom:0;z-index:0}
#articleInfo5 .photo img{width:100%;display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#articleInfo5 .photo p{position:absolute;bottom:20px;font-size:20px;color:#fff;padding-left:10%;padding-right:5%;text-align:justify;z-index:1}
#articleInfo5{position:relative;z-index:2;margin:0}
#articleInfo5 .item{position:relative}
#articleInfo5 .item .info:after{content:'';position:absolute;left:7%;bottom:75px;width:1px;height:120px;background:#ccd7c7}
#articleInfo5 .info_title{background:#f1f1f1;margin: 0 0 30px;padding:20px;text-align:center;font-size: 27px;letter-spacing:5px;color: #646161;}
#articleInfo5 ul{position:relative;}
#articleInfo5 ul li{overflow:hidden;padding:20px 0;border-bottom:1px  dashed #dddddd;display:flex;}
#articleInfo5 ul li:last-child{border:0}
#articleInfo5 ul li > div{float:left;width:20%;margin-right:2%}
#articleInfo5 ul li p{margin-right:10px;color:#2d2d2d;width:100px;font-size: 18px;font-weight: 500;}
#articleInfo5 ul li article{transition:all 0.4s ease-in-out 0s;width:calc(100% - 110px);font-size: 18px;font-weight: 500;}
#articleInfo5 ul li .icon{margin:8px 10px 0;width:40px;height:40px;background:#46a4da;-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;-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}
#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 #46a4da;content:""}
#articleInfo5 ul li .info h3{padding:10px;background:#46a4da;-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}
#articleInfo5 ul li:hover .info h3{-webkit-animation:animatedIcon 1s infinite linear;-moz-animation:animatedIcon 1s infinite linear;-ms-animation:animatedIcon 1s infinite linear;-o-animation:animatedIcon 1s infinite linear}
#articleInfo5 ul li .info article{padding:15px 20px;border-left:1px #ccc solid;border-right:1px #dedada solid;line-height:180%}

@media screen and (max-width:1024px){
	#articleInfo5 .photo img{height: 350px;}
}
@media screen and (max-width: 640px){
	#articleInfo5 .info_title{font-size: 22px;}
	#articleInfo5 ul li p{width:100%;font-weight: 600;}
	#articleInfo5 ul li article{width:100%;}
	#articleInfo5 ul li{display:flex;flex-direction: column;align-items: flex-start;}
	#articleInfo5 .photo img{height: 250px;}
	#articleInfo5 .item .info{margin-top:20px;}
	#articleInfo5 .photo:after{display:none;}
	#articleInfo5 .item .info:after{left:0;bottom: 0;height: 100%;}
	#articleInfo5 .photo p{position:relative;bottom: 0;color: #222;font-size: 16px;padding: 0;margin-top: 20px;}
	#articleInfo5 ul li .titBox{width:auto}
	#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}
	#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%}
	#articleInfo5 ul li .info:before{left:40px;top:-7px;border-top:0;border-bottom:7px solid #46a4da;border-right:7px solid transparent;border-left:7px solid transparent}
}