.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{margin-top:70px}
#articleInfo18 .secBox .photoBox{overflow:hidden;margin-bottom:20px;display:flex;justify-content:space-between;flex-wrap:wrap}
#articleInfo18 .secBox .item{margin-top:50px}
#articleInfo18 .secBox .item h5{font-weight:400;font-size:23px;color:#886d5c}
#articleInfo18 .secBox .item article{margin-top:20px;font-size: 16px;text-align:justify}
#articleInfo18 .secBox .photoBox > div{overflow:hidden;width:calc((100%/3) - 30px);animation-name:fadeInDown;-webkit-animation-name:fadeInDown;border-radius:20px}
#articleInfo18 .secBox .photoBox > div:hover img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}

#articleInfo7{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
#articleInfo7 .photoBox{width:50%;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft;border-radius:20px;overflow:hidden}
#articleInfo7 .photoBox img{}
#articleInfo7 .info{width:45%}
#articleInfo7 .info h3{position:relative;padding:40px 0;font-size:44px;left:-20%;color:#fff;text-shadow:1px 1px 7px #000000}
#articleInfo7 .info:hover h3{animation:animatedIcon 1s;-webkit-animation:animatedIcon 1s infinite linear;-moz-animation:animatedIcon 1s infinite linear;-ms-animation:animatedIcon 1s infinite linear;-o-animation:animatedIcon 1s infinite linear}
#articleInfo7 .info p{font-size: 16px;line-height:200%;text-align:justify;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo7 .info article{margin:30px 0 10px 20px;line-height:180%;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}

#articleInfo12{overflow:hidden;margin-top: 40px;display: flex;flex-wrap: wrap;justify-content: space-between;}
#articleInfo12 >div{width: 45%;}
#articleInfo12 .left article{margin: 30px 0 0 0;animation-name:fadeInRight;-webkit-animation-name:fadeInRight;text-align: justify;line-height: 200%;}
#articleInfo12 .left h4{animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft;font-weight:400;font-size:23px;color:#886d5c}
#articleInfo12 >div:nth-child(2){width: 50%;}
#articleInfo12 .right .topBox{overflow:hidden}
#articleInfo12 .right p{margin:0 2% 0 0;float:left;width:48%;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo12 .right p:nth-child(2){margin:0 0 0 2%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo12 .right p b{margin-top: 10px;display: block;text-align: center;font-weight: 400;}
#articleInfo12 .right img{border-radius: 15px;}
#articleInfo12 .right img:hover{transform:scale(0.95)}
#articleInfo12 .right .downBox{animation-name:fadeInUp;-webkit-animation-name:fadeInUp}

#articleInfo15 .tit{position:relative;text-align:center;z-index:2}
#articleInfo15 .tit h3{font-weight:400;font-size:23px;color:#886d5c}
#articleInfo15 .tit font{display: 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;z-index:1;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 50px;}
#articleInfo15 ul li{width: calc((100%/4) - 20px);animation-name:fadeInUp;-webkit-animation-name:fadeInUp;background: #886d5c;padding: 30px 0;border-radius: 20px;}
#articleInfo15 ul li .item{}
#articleInfo15 ul li:nth-child(2) .item{}
#articleInfo15 ul li .item .circle{position:relative;margin: 20px auto;width:114px;height:114px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;text-align:center;font-size:55px;line-height:114px;display: flex;justify-content: center;align-items: center;}
#articleInfo15 ul li .item .circle img{width: 65px;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#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: 134px;height: 134px;border: 2px dashed #ffffff;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;left: -11px;top: -11px;z-index: 0;content:"";animation: bgWhirligig-2 50s infinite linear;}
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
#articleInfo15 ul li .item p{text-align:center;font-size: 18px;margin-top: 40px;font-weight: 500;color: var(--white);}
#articleInfo15 ul li .item article{text-align: center;color: var(--white);}
#articleInfo15 .imgBox{overflow:hidden}
#articleInfo15 .imgBox p{margin:0 1% 0 0;overflow:hidden;float:left;width:49%;animation-name:fadeInLeft;-webkit-animation-name:fadeInUp}
#articleInfo15 .imgBox p:nth-child(2){margin:0 0 0 1%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo15 .imgBox p:hover img{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}

@media screen and (max-width:1024px){
	#articleInfo18 .secBox .photoBox > div{width: calc((100%/3) - 15px);}
	#articleInfo15{margin-top: 30px;}
	#articleInfo15 ul li{width: calc((100%/2) - 20px);margin-bottom: 40px;}
	#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}
	#articleInfo12 >div{width: 100%;}
	#articleInfo12 >div:nth-child(2){width: 100%;margin-top: 30px;}
	#articleInfo7 .photoBox{position:relative;width: 100%;}
	#articleInfo7 .info{position:relative;margin-top: 30px;margin-left:0;width: 100%;}
	#articleInfo7 .info h3{left:0;text-align:right}#articleInfo18 .topBox:before{background:rgba(255,255,255,0.6)}
	#articleInfo18 .secBox .item h5,#articleInfo18 .secBox .item article{width:100%}
	#articleInfo18 .secBox .item h5{margin-bottom:15px;text-align:left}
}
@media screen and (max-width:480px){
	#articleInfo15 ul li{width: 100%;margin-bottom: 16px;}
	#articleInfo12, #articleInfo12 .left article{margin-top: 15px;}
	#articleInfo18 .secBox .photoBox{margin: 0;}
	#articleInfo18 .secBox .item{margin-top: 10px;}
	#articleInfo18 .secBox{margin-top: 10px;}
	#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{margin:10px 0;width:100%}
	#articleInfo7 .info{padding: 0;}
	#articleInfo7 .info h3{padding:20px 0;text-align:left}
	#articleInfo7 .info article{margin-left:0}
}