@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}
#articleInfo33 .mtitleJ{display:flex;flex-direction:column;align-items:center;padding:25px 0;margin-bottom:35px}
#articleInfo33 .mtitleJ h2{font-size:36px}
#articleInfo33 .mtitleJ p{font-size:17px}
#articleInfo33 .container{position:relative;display:grid;grid-template-columns: 1fr 1fr 1fr;gap:1em;width: 100%;height:500px;transition:all 400ms}
#articleInfo33 .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%}
#articleInfo33 .container .box:hover{filter:grayscale(0%) opacity(100%)}
#articleInfo33 .container:has(.box-1:hover){grid-template-columns:3fr 1fr 1fr  }
#articleInfo33 .container:has(.box-2:hover){grid-template-columns:1fr 3fr 1fr  }
#articleInfo33 .container:has(.box-3:hover){grid-template-columns:1fr 1fr 3fr  }
#articleInfo33 .infotext{display:flex;flex-direction:column;align-items:center;padding:25px 0;margin-bottom:35px;margin-top:80px}
#articleInfo33 .infotext h3{font-size:20px;text-transform:uppercase;letter-spacing:0.5em;color:#665c51}
#articleInfo33 .infotext p{font-size:19px}
#articleInfo33 .contem:before{content:"";position:absolute;width:1px;height:65px;background:#b6b6b6;left:calc(50% - 1px);top:0}
#articleInfo33 .contem{display:flex;margin:30px 0 10px;width:200px;position:relative;padding-top:80px}
#articleInfo33 .contem .mliast{display:flex;width:50%;justify-content:center}
#articleInfo33 .contem .mliast a{display:flex;flex-direction:column;align-items:center;margin:5px 10px}
#articleInfo33 .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}
#articleInfo33 .contem .mliast a span{font-size:12px}
@media screen and (max-width:870px){
	#articleInfo33 .container{width:100%;height: 300px;}
	.box::after{padding:2px 3px}
	#articleInfo33 .infotext h3{
	font-size:16px;text-align:center;margin-bottom:21px}
}