@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:grid;place-content:center;justify-items:center}
#articleInfo6 .mtitleJ{display:flex;flex-direction:column;align-items:center;padding:25px 0;margin-bottom:35px}
#articleInfo6 .mtitleJ h2{font-size:36px}
#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%;border-radius:35px}
#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}
#articleInfo6 .infotext{display:flex;flex-direction:column;align-items:center;padding:25px 0;margin-bottom:35px;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;text-align: center;}
#articleInfo16 h3 {
    margin-bottom: 50px;
    font-weight: 400;
    line-height: 100%;
    font-size: 30px;
    color: #000000;
    text-align: center;
    letter-spacing: 3px;
}
#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%;aspect-ratio: 16/9;object-fit: cover;}
#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: #957c5a;font-family:"Noto Serif TC",serif;font-weight: 500;margin: 0;}
#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:90%;}
}
@media screen and (max-width:870px){
	#articleInfo16 .item:nth-child(2n) .photo{
    order: unset;
}
	#articleInfo16 .item{
    margin-bottom: 10vw;
}
	#articleInfo16 .item .info{width:100%;margin-top: 15px;}
	#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;line-height: 110%;}
	#articleInfo16 .item .info h5{
    text-align: center;
}
}
@media screen and (max-width:640px){
	.box-1, .box-3{display:none;}
	#articleInfo6 .infotext{margin-top: 10px;}
	#articleInfo6 .container{display:block;padding: 0;}
	#articleInfo6 .infotext p{font-size: 15px;text-align: justify;}
}