.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}
#articleInfo7{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;margin:50px 0}
#articleInfo7 .photoBox{width: 45%;box-shadow:10px 10px 0 #efefef;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo7 .info{width: 45%;}
#articleInfo7 .info h3{position:relative;padding:0 0 20px;font-size:30px;color:#121212;font-weight:400}
#articleInfo7 .info p{font-size:16px;text-align:justify;line-height:200%;font-family:'Noto Sans TC','Noto Sans TC',serif;font-weight: 400;color: #666666;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo7 .info article{margin: 20px 0;line-height:180%;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;font-family: 'Noto Sans TC', 'Noto Sans TC', serif;}
#articleInfo7 .info article a{color:#555;font-family: 'Noto Sans TC', 'Noto Sans TC', serif;letter-spacing: 0;}
#articleInfo7 .info li{margin: 5px 0 5px 20px;list-style-type: disc;list-style-position: inherit;color: #7a7a7a;line-height: 1.8;letter-spacing: 0.2px;font-weight: 400;}
#articleInfo7 .info ol{animation-name:fadeInRight;-webkit-animation-name:fadeInRight}

#pictureBox{padding: 50px 0 0;}
#pictureBox .col-md-12{text-align:center;margin-bottom:60px}
#pictureBox .main-title{font-size: 30px;font-weight: 500;letter-spacing:3px;color:#333}
#pictureBox .sub-title{font-size:20px;margin:24px 0 0;color:#3a6199;font-weight:600;letter-spacing:1px;line-height:1.5;text-align:center}
#pictureBox li img{-webkit-animation:2s flutter ease-in both infinite;animation:2s flutter ease-in both infinite}
#pictureBox li:nth-child(2n) img{-webkit-animation:2.5s flutter ease-in both infinite;animation:2.5s flutter ease-in both infinite}
@-webkit-keyframes flutter{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(5px);transform:translateY(5px)}75%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}
@keyframes flutter{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}25%{-webkit-transform:translateY(5px);transform:translateY(5px)}75%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}
#pictureBox ul{display:flex;flex-wrap: wrap;justify-content: center;}
#pictureBox li img{margin:10px auto;width:150px;transition:all 2s ease}
#pictureBox li{position:relative;width: calc((100%/3) - 100px);padding: 50px;display: flex;flex-direction: column;align-items: center;}
#pictureBox li:hover .info::before{opacity:1;-webkit-animation:radiusrun 1s forwards ease-in-out;animation:radiusrun 1s forwards ease-in-out}
#pictureBox li .info::before{content:"";display:block;width:calc(100% + -12px);height:calc(100% + -12px);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border: 6px #d6d6d6 dotted;border-radius:3em;opacity:0;z-index: -1;}
#pictureBox li .info h2 a{text-align:center;color:rgb(136 136 136);font-size:15px;display: block;}
#pictureBox li .number h2{font-family: 'Noto Sans TC', 'Noto Sans TC', serif;text-align: center;padding: 4px;display: block;color: rgb(187, 187, 187);font-size: 13px;position: relative;margin: 20px auto 10px;width: 30px;height: 30px;border: 1px rgb(202 202 202 / 50%) solid;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;box-sizing: border-box;}

@media screen and (max-width:768px){
	#pictureBox li{width: calc(50% - 100px);}
	#articleInfo7 .photoBox{width:100%;}
	#articleInfo7 .info{position:relative;margin-top: 0;margin-left:0;padding: 20px 0;background:none;width: 100%;}
	#articleInfo7 .info h3{left:0;}
	#articleInfo7{margin:0;}
}
@media screen and (max-width:480px){
	#pictureBox li{width: calc(100% - 50px);padding: 25px;}
	#articleInfo7 .info h3{padding: 10px 0;text-align:left}
	#articleInfo7 .info article{margin-left:0}
}