.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}
#articleInfo18 .topBox{padding:70px 0 30px;background:url(/images/style/18/img-topBg.png) no-repeat 0 0}
#articleInfo18 .topBox .text{margin:0 0 0 auto;width:40%}
#articleInfo18 .topBox .text h3{margin-bottom:15px;font-weight:normal;font-size:30px;color:#004285;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo18 .topBox .text article{animation-name:fadeInRight;-webkit-animation-name:fadeInRight;animation-delay:0.5s;-webkit-animation-delay:0.5s}
#articleInfo18 .secBox {display:flex;flex-direction: column;}
#articleInfo18 .secBox >div{border: 1px #ccc solid;border-radius: 25px;margin: 30px 0;padding: 30px;}
#articleInfo18 .secBox .photoBox{overflow:hidden;margin-bottom:25px;display: flex;flex-wrap: wrap;justify-content: center;}
#articleInfo18 .secBox p{font-size: 17px;}
#articleInfo18 .secBox .item{text-align: center;}
#articleInfo18 .secBox .item h5{font-size:20px;color:var(--white);margin-bottom: 25px;font-weight: 400;text-align: center;display: inline-block;background: var(--primary);padding: 7px 30px;border-radius: 50px;}
#articleInfo18 .secBox .item article{float:left;width:calc(100% - 220px)}
#articleInfo18 .secBox .photoBox > div{overflow:hidden;margin: 0 20px 40px;width: calc((100%/3) - 40px);animation-name:fadeInDown;-webkit-animation-name:fadeInDown;position:relative}
#articleInfo18 .secBox .photoBox > div b{position:absolute;z-index:2;bottom:15px;left:15px;background: #fff;color: #0b0f17;padding:5px 20px}
#articleInfo18 .secBox .photoBox > div img{border-radius: 25px;}

@media screen and (max-width: 1280px){
	#articleInfo18 .secBox .photoBox > div img{
    height: 457px!important;
}
}
@media screen and (max-width: 1040px){
	#articleInfo18 .secBox .photoBox > div img{
    height: auto!important;
}
}
@media screen and (max-width: 768px) {
	#articleInfo18 .topBox{position:relative}
	#articleInfo18 .topBox:before{position:absolute;width:100%;height:100%;background:rgba(255,255,255,0.35);top:0;left:0;z-index:1;content:""}
	#articleInfo18 .topBox .text{position:relative;width:50%;z-index:2}
}
@media screen and (max-width: 640px) {
	#articleInfo18 .topBox:before{background:rgba(255,255,255,0.6)}
	#articleInfo18 .secBox .item h5,#articleInfo18 .secBox .item article{display:block;}
	#articleInfo18 .secBox .item h5{margin: 0;display: block;text-align: center;border-radius: 10px;padding: 15px;font-size: 18px;}
	#articleInfo18 .secBox .photoBox > div{
    width: calc((100%/2) - 40px);
    margin-top: 40px;
    margin-bottom: 0px;
}
}

@media screen and (max-width: 480px) {
	#articleInfo18 .topBox:before{background:rgba(255,255,255,0.75)}
	#articleInfo18 .topBox .text{width:80%}
	#articleInfo18 .secBox .photoBox > div{width:calc((100%/2) - 10px)}
	#articleInfo18 .secBox .photoBox > div:nth-child(3){margin:10px 0;width:100%}
}
@media screen and (max-width: 450px) {
	#articleInfo18 .topBox{padding:30px 0}
	#articleInfo18 .topBox .text{width:95%}
	#articleInfo18 .secBox .photoBox > div{margin:10px 0;width:100%}
}