@import url('/css/animate.css'); 
.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s 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:2s;-webkit-animation-delay:2s}
#articleInfo17{overflow:hidden}
#articleInfo17 *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#articleInfo17 .folist{}
#articleInfo17 .folist .info{display:flex;margin:0 0 0;padding:50px 0}
#articleInfo17 .folist .photo{display: grid;grid-template-columns: repeat(6, 1fr);gap: 20px;padding: 0 0 20px;}
#articleInfo17 > div{display:flex;width: 100%;flex-direction:column}
#articleInfo17 .titleJ{padding: 50px;background-color: #f3f3f3;}
#articleInfo17 .titleJ h2{font-size:40px;font-weight:600;color:#000000}
#articleInfo17 .titleJ h3{font-size:16px;font-weight:400;}
#articleInfo17 .info h2{font-size:35px;color:#262527;animation-name:fadeInDown;-webkit-animation-name:fadeInDown}
#articleInfo17 .info h5{margin-bottom:20px;font-size:16px;animation-name:fadeInDown;-webkit-animation-name:fadeInDown;font-weight:400;color:#848484}
#articleInfo17 .info .item{padding:30px 30px;animation-name:fadeInDown;-webkit-animation-name:fadeInDown;box-shadow:0 0 9px 1px rgb(0 0 0 / 12%);background-color:white;margin:10px 10px;border-radius:10px}
#articleInfo17 .info p{width:100%;background-color:unset;color:#7b7b7b;text-align:left}
#articleInfo17 .info .item h4{margin-bottom:15px;color:#080404;font-size:36px;display:flex;align-items:center}
#articleInfo17 .info .item h4 span{font-size:16px;color:#666}
#articleInfo17 .photo > div{position:relative;text-align:center;transition:all .7s ease-out;}
#articleInfo17 .photo > div .photo-box{overflow:hidden;position:relative;}
#articleInfo17 .photo > div .photo-box a::before{content:'';position: absolute;width: 300px;aspect-ratio: 1/1;background: rgb(0 0 0 / 20%);););z-index: 99;opacity: 0;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#articleInfo17 .photo > div .photo-box:hover a::before{opacity: 1;}
#articleInfo17 .photo .blur{-webkit-animation-name:LeftToBack;animation-name:LeftToBack}
#articleInfo17 .photo .blur:nth-child(2){-wanimation-name:RightToBack;animation-name:RightToBack}
#articleInfo17 .photo > div .photo-box img{height: auto;width:100%;aspect-ratio: 1/1;object-fit: contain;position: relative;}
#articleInfo17 .casebox{display:flex;width:100%;margin:40px 0 10px}
#articleInfo17 .casebox .cboxv{display:flex;flex-direction:column;margin-bottom: 20px;}
#articleInfo17 .casebox .cboxv h3{}
#articleInfo17 .casebox .num{font-size: 30px;margin-right: 12px;line-height: 100%;color: var(--primary);}
#articleInfo17 .casebox .textn{font-size: 30px;font-weight: 600;color: var(--primary);}
#articleInfo17 .casebox .texbig{font-size:40px}
#articleInfo17 .casebox .cboxv .mafom{display:flex}
#articleInfo17 .casebox .cboxv .mafom p{color: var(--info);font-weight: 400;}
@-webkit-keyframes LeftToFront{0%{-webkit-transform:translateX(0)}
30%{-webkit-transform:translateX(-10%)}
100{-webkit-transform:translateX(0)}
}@keyframes LeftToFront{0%{transform:translateX(0)}
30%{transform:translateX(-10%)}
100{transform:translateX(0)}
}@-webkit-keyframes LeftToBack{0%{-webkit-transform:translateX(0)}
30%{-webkit-transform:translateX(-5%)}
100{-webkit-transform:translateX(0)}
}@keyframes LeftToBack{0%{transform:translateX(0)}
30%{transform:translateX(-5%)}
100{transform:translateX(0)}
}@-webkit-keyframes RightToFront{0%{-webkit-transform:translateX(0)}
30%{-webkit-transform:translateX(10%)}
100{-webkit-transform:translateX(0)}
}@keyframes RightToFront{0%{transform:translateX(0)}
30%{transform:translateX(10%)}
100{transform:translateX(0)}
}@-webkit-keyframes RightToBack{0%{-webkit-transform:translateX(0)}
30%{-webkit-transform:translateX(5%)}
100{-webkit-transform:translateX(0)}
}@keyframes RightToBack{0%{transform:translateX(0)}
30%{transform:translateX(5%)}
100{transform:translateX(0)}
}
@media screen and (max-width:1024px){
    #articleInfo17 .folist .photo{grid-template-columns:repeat(3,1fr)}
}
@media screen and (max-width:550px){
    #articleInfo17 .titleJ{padding:20px}
    #articleInfo17 .casebox .num,#articleInfo17 .casebox .textn{font-size:20px}
}