@import url('/css/animate.css');

.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
#articleInfo7 .item{position:relative;display: grid;grid-template-columns: 60% 35%;align-items: center;}
#articleInfo7 .item > div{animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo7 .item .photo{overflow:hidden;background-position:50%;background-repeat:no-repeat;background-size:cover;}
#articleInfo7 .item .photo img{width:100%;height:100%;object-fit:cover;position:relative}
#articleInfo7 .item .info{animation-name:fadeInRight;-webkit-animation-name:fadeInRight;margin-left: 20%;}
#articleInfo7 .item .info h5{padding:0 0 10px;color: var(--secondary);position:relative;text-transform:uppercase;font-family: "Barlow", sans-serif;font-size: max(5*(1vw + 1vh) / 2, 55px);font-weight: 800;line-height: 1.3;}
#articleInfo7 .item .info h3{padding:5px 0 20px 0;font-size:26px;color: #55504a;font-weight:600;letter-spacing:0.5px;line-height:160%}
#articleInfo7 .item .info article p{position:relative;text-align:justify;width:100%;margin-top:20px;line-height:200%;letter-spacing:1px;padding-bottom: 55px;font-size: 18px;}
#articleInfo7 .more_btn {padding: 10px 55px 10px 10px;border-radius: 40px;color: var(--secondary);border: 1px solid var(--secondary);font-family: "Noto Sans TC", sans-serif;display: inline-flex;align-items: center;}
#articleInfo7 .more_btn b{background: var(--secondary);width: 45px;height: 45px;display: inline-flex;justify-content: center;align-items: center;border-radius: 50px;margin-right: 35px;}
#articleInfo7 .more_btn b svg{width: 15px;height: 15px;fill: #c0c8d0;}
#articleInfo7 .more_btn:hover{background: var(--secondary);color: var(--white);}
#articleInfo7 .more_btn:hover b{margin-right: 20px;margin-left: 15px;background: var(--secondary);}
#articleInfo7 .more_btn:hover b svg{fill: var(--white);}

@media screen and (max-width:1024px){
	#articleInfo7 .item .info{margin: 60px auto 0;width: 90%;}
	#articleInfo7 .item{display:block;}
	#articleInfo7 .item .photo{width:90%;}
}
@media screen and (max-width:480px){
	#articleInfo7 .item > div,#articleInfo7 .item:nth-child(2n) > div{float:none}
	#articleInfo7 .item .photo:before{border:4px double rgb(255 255 255)}
	#articleInfo7 .item .info h5{font-size:30px;padding:0}
	#articleInfo7 .item .info h5:before{font-size:80px}
}