@import url('/css/animate.css'); 
@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
.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}
#articleInfo15 .tit{position:relative;text-align:center;z-index:2}
#articleInfo15 .tit h3{text-align:center;font-size:33px}
#articleInfo15 .tit font{padding:0 20px;background:#fff;display:inline-block;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}
#articleInfo15 ul{overflow:hidden;position:relative;margin:-10px 0 30px;padding:50px 0 35px;border:1px #cfcfcfb5 solid;z-index:1}
#articleInfo15 ul li{float:left;width:33%;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo15 ul li .item{padding:20px 30px}
#articleInfo15 ul li:nth-child(2) .item{border-left:1px #e2e2e2 solid;border-right:1px #e2e2e2 solid}
#articleInfo15 ul li .item .circle{position:relative;margin:0 auto 15px;width:114px;height:114px;border:1px rgba(60,75,53,0.5) solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;text-align:center;font-size:55px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#articleInfo15 ul li .item .circle .fa{font-size:42px}
#articleInfo15 ul li .item:hover .circle{animation:flipInX 1.5s both;-webkit-animation:flipInX 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}
40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}
60%{transform:perspective(400px) rotateX(10deg);opacity:1}
80%{transform:perspective(400px) rotateX(-5deg)}
to{transform:perspective(400px)}
}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotateX(-5deg)}
to{-webkit-transform:perspective(400px)}
}
#articleInfo15 ul li .item .circle:before{position:absolute;width:124px;height:124px;border:2px rgba(60,75,53,0.8) solid;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;left:-6px;top:-6px;z-index:-1;content:""}
#articleInfo15 ul li .item p{text-align:center;font-size:18px}
#articleInfo15 .imgBox{overflow:hidden}
#articleInfo15 .imgBox p{margin:25px 0 50px;overflow:hidden;width:100%;animation-name:fadeInLeft;-webkit-animation-name:fadeInUp;border-radius:15px}
#articleInfo15 .imgBox p:nth-child(2){margin:0 0 0 1%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo15 .secBox > div{margin-bottom:30px}
#articleInfo15 .secBox .item h5{font-weight:500;font-size:22px;color:var(--black)}
#articleInfo15 .secBox .item article{float:left;width:calc(100% - 220px)}
#articleInfo15 .secBox .photoBox{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:25px}
#articleInfo15 .secBox .photoBox > div{width:calc((100%/4) - 20px);animation-name:fadeInDown;-webkit-animation-name:fadeInDown;border:5px solid #ddd;margin:10px;border-radius:10px;padding:50px;display:flex;flex-wrap:wrap;position:relative;justify-content:center;flex-direction:column;align-items:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#articleInfo15 .secBox .photoBox > div:after{content:'';width:0;height:0;border-style:solid;border-width:20px 0 20px 20px;border-color:transparent transparent transparent #dddddd;position:absolute;right:-20px}
#articleInfo15 .secBox .photoBox > div:last-child:after{display:none}
#articleInfo15 .secBox .photoBox .photo{width:80px;margin-bottom:23px;display:flex;flex-direction:column;align-items:center}
#articleInfo15 .secBox .photoBox h3{font-size:24px;line-height:140%;margin-bottom:10px;overflow:hidden}
#articleInfo15 .secBox .photoBox p{font-size:15px}
#articleInfo15 .secBox .five{display:flex;flex-wrap:wrap;margin:30px 0 20px}
#articleInfo15 .secBox .five >div{width:calc((100%/5) - 100px);background:#efefef;padding:50px}
#articleInfo15 .secBox .five >div:nth-child(2){background:#dae3ea}
#articleInfo15 .secBox .five >div:nth-child(3){background:#81a3bf}
#articleInfo15 .secBox .five >div:nth-child(4){background:#005081}
#articleInfo15 .secBox .five >div:nth-child(5){background:#ed7b25}
#articleInfo15 .secBox .five .photo{width:80px;margin-bottom:20px}
#articleInfo15 .secBox .five p{font-size:15px;text-align:justify;letter-spacing:1px}
#articleInfo15 .secBox .five >div:nth-child(3) p,#articleInfo15 .secBox .five >div:nth-child(4) p,#articleInfo15 .secBox .five >div:nth-child(5) p{color:#fff}
#articleInfo15 .secBox .three{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin-top:20px;position:relative;overflow:hidden}
#articleInfo15 .secBox .three .photo{width:85%;position:absolute;left:0}
#articleInfo15 .secBox .three .photo img{width:100%}
#articleInfo15 .secBox .three article{width:40%;z-index:2;background:#fff;padding:100px 60px;border-radius:10px;margin:60px 0;font-size:20px}
@media screen and (max-width:1460px){
	#articleInfo15 .secBox .photoBox > div{padding:20px 20px;width:calc((100%/4) - 20px)}
}
@media screen and (max-width:1280px){
	#articleInfo15 .secBox .photoBox h3{}
	#articleInfo15 .secBox .photoBox > div{width:calc((100%/2) - 130px);margin-bottom:25px}
}
@media screen and (max-width:768px){
	#articleInfo15 ul li .item{padding:15px}
	#articleInfo15 .secBox .three article{width:60%}
	#articleInfo15 .secBox .five >div{width:calc((100%/3) - 100px)}
	#articleInfo15 .secBox .five >div:nth-child(4),#articleInfo15 .secBox .five >div:nth-child(5){width:calc((100%/2) - 100px)}
	#articleInfo15 .topBox{position:relative}
	#articleInfo15 .topBox:before{position:absolute;width:100%;height:100%;background:rgba(255,255,255,0.35);top:0;left:0;z-index:1;content:""}
	#articleInfo15 .topBox .text{position:relative;width:50%;z-index:2}
}
@media screen and (max-width:640px){
	#articleInfo15 ul li{width:50%}
	#articleInfo15 ul li:nth-child(3){width:100%}
	#articleInfo15 ul li:nth-child(2) .item{border-left:0}
	#articleInfo15 .secBox .three .photo{position:relative;width:100%}
	#articleInfo15 .secBox .five >div,#articleInfo15 .secBox .five >div:nth-child(4),#articleInfo15 .secBox .five >div:nth-child(5){width:calc((100%/1) - 100px)}
	#articleInfo15 .secBox .photoBox h3{height:auto}
	#articleInfo15 .secBox .photoBox > div{width:calc((100%/1) - 0px);padding:30px}
	#articleInfo15 .topBox:before{background:rgba(255,255,255,0.6)}
	#articleInfo15 .secBox .item article{width:100%;padding:0;margin:20px 0}
	#articleInfo15 .secBox .item h5{margin-bottom:15px;text-align:left}
	#articleInfo15 .secBox .photoBox > div:after{right:unset;bottom:-20px;border-width:20px 20px 0 20px;border-color:#dddddd transparent transparent transparent}
	#articleInfo15 .secBox .photoBox h3{width:100%;margin:0 0 20px;text-align:center}
}
@media screen and (max-width:480px){
	#articleInfo15 ul li{width:100%}
	#articleInfo15 ul li:nth-child(2) .item{border-right:0;border-top:1px #e2e2e2 solid;border-bottom:1px #e2e2e2 solid}
	#articleInfo15 .imgBox p{margin:10px 0;width:100%}
}