@import url('/css/animate.css');
@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");

.wow{animation-name:fadeInUp;-webkit-animation-name:fadeInUp;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}
.delay1{animation-delay:0.5s;-webkit-animation-delay:0.5s}
.delay2{animation-delay:1.0s;-webkit-animation-delay:1.0s}
.delay3{animation-delay:1.5s;-webkit-animation-delay:1.5s}
.delay4{animation-delay:2.0s;-webkit-animation-delay:2.0s}
.delay5{animation-delay:2.5s;-webkit-animation-delay:2.5s}
#articleInfo6{display: flex;place-content:center;justify-items: center;flex-direction: column;align-items: center;}
#articleInfo6 .mtitleJ{display:flex;flex-direction:column;align-items:center;padding:25px 0;margin-bottom:35px}
#articleInfo6 .mtitleJ h2{font-size:36px;font-family: "Noto Serif TC", serif;}
#articleInfo6 .mtitleJ p{font-size:17px}
#articleInfo6 .container{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1em;width: 1000px;height:500px;transition:all 400ms}
#articleInfo6 .container:hover .box{filter:grayscale(100%) opacity(24%)}
.box{position:relative;background:var(--img) center center;background-size:cover;transition:all 400ms;display:flex;justify-content:center;align-items:center;height:100%;}
#articleInfo6 .container .box:hover{filter:grayscale(0%) opacity(100%)}
#articleInfo6 .container:has(.box-1:hover){grid-template-columns:3fr 1fr 1fr}
#articleInfo6 .container:has(.box-2:hover){grid-template-columns:1fr 3fr 1fr}
#articleInfo6 .container:has(.box-3:hover){grid-template-columns:1fr 1fr 3fr}
.box:nth-child(odd){margin-top:-16px}
.box:nth-child(even){margin-top:16px}
.box::after{content:attr(data-text);position:absolute;bottom:20px;background:#000;color:#fff;padding:10px 10px 10px 14px;letter-spacing:4px;text-transform:uppercase;transform:translateY(60px);opacity:0;transition:all 200ms}
.box:hover::after{transform:translateY(0);opacity:1;transition-delay:400ms}
#articleInfo6 .infotext{display:flex;flex-direction:column;align-items:center;padding: 25px 0 0;margin-top:80px}
#articleInfo6 .infotext h4{font-size: 18px;text-align:center;line-height:200%;font-family:"Noto Serif TC",serif;font-weight: 500;}
#articleInfo6 .infotext h3{font-size:30px;text-transform:uppercase;color:#665c51;font-family:"Cormorant",serif;margin-bottom:30px}
#articleInfo6 .infotext p{font-size:17px;line-height:200%;text-align:center}
#articleInfo6 .contem:before{content:"";position:absolute;width:1px;height:65px;background:#b6b6b6;left:calc(50% - 1px);top:0}
#articleInfo6 .contem{display:flex;margin:30px 0 10px;width:200px;position:relative;padding-top:80px}
#articleInfo6 .contem .mliast{display:flex;width:50%;justify-content:center}
#articleInfo6 .contem .mliast a{display:flex;flex-direction:column;align-items:center;margin:5px 10px}
#articleInfo6 .contem .mliast a svg{width:31px;height:30px;border:#333333 1px solid;border-radius:50%;padding:10px;margin-bottom:10px;ox-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
#articleInfo6 .contem .mliast a span{font-size:12px}
#articleInfo16 .item{overflow:hidden;position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
#articleInfo16 .item > div{float:left;width:50%;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo16 .item:nth-child(2n) > div{float:right}
#articleInfo16 .item:nth-child(2n) .photo{animation-name:fadeInRight;-webkit-animation-name:fadeInRight;order:1}
#articleInfo16 .item .photo{overflow:hidden}
#articleInfo16 .item .photo img{width:100%}
#articleInfo16 .item .info{animation-name:fadeInRight;-webkit-animation-name:fadeInRight;width:45%}
#articleInfo16 .item:nth-child(2n) .info{animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo16 .item .info h5{padding:10px 0;font-size:20px;color:#444;font-family:"Noto Serif TC",serif;font-weight: 500;}
#articleInfo16 .item .info h3{padding:15px;font-size:20px;color:#87623e}
#articleInfo16 .item .info article{font-size:16px;line-height:200%;margin-bottom:10px}

@media screen and (max-width:1024px){
	#articleInfo6 .container{width: 100%;}
}
@media screen and (max-width:870px){
	#articleInfo16 .item:nth-child(2n) .photo{display:none;}
	#articleInfo16 .item .info{width:100%;}
	#articleInfo16 .item > div{width:100%;}
	#articleInfo6 .container{width:100%;height:400px}
	.box::after{padding:2px 3px}
	#articleInfo6 .infotext h3{font-size: 28px;text-align:center;margin-bottom:21px}
}
@media screen and (max-width:640px){
	#articleInfo6 .mtitleJ{margin:0;}
	#articleInfo6 .mtitleJ p{text-align:center;}
	#articleInfo6 .mtitleJ h2{font-size: 28px;margin-bottom: 20px;}
	.box-1, .box-3{display:none;}
	#articleInfo6 .infotext{margin-top: 10px;}
	#articleInfo6 .container{display:block;padding: 0;}
	#articleInfo6 .infotext p{font-size:16px;}
}