@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{position:relative;z-index:2}
#articleInfo17:before{content:"";position:absolute;width:100%;height:700px;top:0;background:url(/images/40/run_bg.png);}
#articleInfo17 *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#articleInfo17 .folist{display:flex;width:100%}
#articleInfo17 .folist .info{display:flex;margin:0 0 0;padding:50px 0}
#articleInfo17 .folist .mapoufo{position:relative;height:413px;display:flex;justify-content:center}
#articleInfo17 .folist .photo{display:flex;position:absolute}
#articleInfo17>div{display:flex;width:47%;flex-direction:column}
#articleInfo17 .end_textbox{width:100%}
#articleInfo17 .end_textbox p{font-size:max(1.2 * (1vw + 1vh) / 2,14px);display:flex;flex-direction:column;align-items:center;padding:12px 20px;border:#e3e3e3 1px solid;border-radius:50px;background:#584a3d;color:white}
#articleInfo17 .titleJ{padding:10px 20px 25px;width:100%}
#articleInfo17 .titleJ h2{font-weight:600;color:#000000;font-size:max(2.6 * (1vw + 1vh) / 2,24px)}
#articleInfo17 .titleJ h3{font-size:max(1 * (1vw + 1vh) / 2,15px);color:#5e5e5e;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;width:33.3%}
#articleInfo17 .info p{width:100%;background-color:unset;color:#656565;font-weight:300;text-align:left;font-size:max(1.2 * (1vw + 1vh) / 2,15px)}
#articleInfo17 .info .item h4{margin-bottom:15px;color:#695a4b;display:flex;align-items:center;font-size:max(1.6 * (1vw + 1vh) / 2,16px)}
#articleInfo17 .info .item h4 span{font-size:max(1.6 * (1vw + 1vh) / 2,18px);color:#695a4b;font-weight:400}
#articleInfo17 .info .item h4 span:before{margin:0 15px;content:"/"}
#articleInfo17 .photo>div{position:relative;padding:10px 0px 0;margin:30px 0px 0;display:flex;text-align:center;transition:all .7s ease-out;-webkit-animation:picture_scroll 40s linear infinite;animation:picture_scroll 40s linear infinite;transform:translateX(0%);width:180vw}
#articleInfo17.comtwo .photo>div{margin:0;padding:0}


@keyframes picture_scroll {
	from {transform: translateX(0%);}

	to {transform: translateX(-70%);}
}

@-webkit-keyframes picture_scroll {
	from {-webkit-transform: translateX(0%);}

	to {-webkit-transform: translateX(-100%);}
}

#articleInfo17 .photo>div .photo-box{overflow:hidden;position:relative;background-position:50%;background-repeat:no-repeat;background-size:cover;line-height:0;cursor:pointer;width:100%;max-width:100%}
#articleInfo17 .photo .focus,#articleInfo17 .photo>div .photo-box,#articleInfo17 .photo>div .photo-box img{border-radius:20px}
#articleInfo17 .photo .focus{-webkit-box-shadow:0 0 10px 2px rgb(196 196 196 / 20%);box-shadow:0 0 10px 2px rgb(196 196 196 / 20%);margin:0 30px;width:30vw}
#articleInfo17 .photo .focus:nth-child(even),#articleInfo17 .photo .focus:nth-child(even) .photo-box,#articleInfo17 .photo .focus:nth-child(even) .photo-box img{border-radius:20px 187px 187px  20px}
#articleInfo17 .photo .focus:nth-child(odd),#articleInfo17 .photo .focus:nth-child(odd) .photo-box,#articleInfo17 .photo .focus:nth-child(odd) .photo-box img{border-radius:187px 20px 20px 187px}
#articleInfo17.comtwo .photo .focus{box-shadow:-1px -6px 13px 2px rgb(16 16 16 / 23%)}
#articleInfo17 .photo .focus:nth-child(2){}
#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:360px;width:100%;object-fit:cover}
#articleInfo17 .casebox{display:flex;width:100%;margin:40px 0 10px;flex-wrap:wrap;flex-direction:unset;justify-content:space-between}
#articleInfo17 .casebox .cboxv{display:flex;flex-direction:column;border-bottom:rgb(205 205 205 / 41%) 1px solid;padding-bottom:40px;margin-bottom:50px;width:48%}
#articleInfo17 .casebox .cboxv h3{display:flex;align-items:center;margin-bottom:20px}
#articleInfo17 .casebox .cboxv h3 span{color:#695a4b}
#articleInfo17 .casebox .num{font-size:max(1.8 * (1vw + 1vh) / 2,16px);padding-right:40px;border-right:rgb(117 116 116 / 30%) 1px solid;margin-right:30px}
#articleInfo17 .casebox .textn{font-size:23px;font-weight:400;font-size:max(1.6 * (1vw + 1vh) / 2,18px)}
#articleInfo17 .casebox .texbig{font-size:40px}
#articleInfo17 .casebox .cboxv .mafom{display:flex}
#articleInfo17 .casebox .cboxv .mafom p{color:#656565;font-weight:300;font-size:max(1.2 * (1vw + 1vh) / 2,14px)}

@-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:1470px) {
	#articleInfo17:before{height:130px}
	#articleInfo17 .folist .mapoufo{height:290px}
	#articleInfo17 .photo>div .photo-box{}
	#articleInfo17 .photo>div .photo-box img{height:250px}

}
@media screen and (max-width:1280px) {
	#articleInfo17 .folist .mapoufo:before{font-size: 7rem;}
}

@media screen and (max-width:1024px) {
	#articleInfo17 .photo>div{margin:0;width:150vw}
	#articleInfo17 .folist .mapoufo{height:200px}
	#articleInfo17 .photo>div .photo-box img{height:120px}
	#articleInfo17 .photo>div .photo-box{}
	#articleInfo17 .folist .photo{width:300vw}
	#articleInfo17 .photo .focus{margin:0 15px}
}

@media screen and (max-width:768px) {
	#articleInfo17 .titleJ{width:100%;padding:5px 0 15px}
	#articleInfo17 .folist .info{display:flex;flex-direction:column;padding:3px 0px}
	#articleInfo17 .info .item{width:100%;margin:0 0 26px;box-shadow:0 0 4px 1px rgb(0 0 0 / 12%)}
	#articleInfo17 .folist .photo{position:relative}
	#articleInfo17 .folist .mapoufo{height:auto}
	#articleInfo17 .photo>div .photo-box img{height:129px}
	#articleInfo17 .photo>div .photo-box{width:220px}
	#articleInfo17 .casebox .cboxv{width:100%;margin-bottom:5px;padding-bottom:5px;margin-top:10px}
	#articleInfo17 .end_textbox p{border-radius:6px}
	#articleInfo17 .folist .mapoufo:before{font-size:3rem}
	#articleInfo17 .photo>div{width:300vw}
	
}
@media screen and (max-width:480px){
	#articleInfo17 .photo>div .photo-box{width:100%}
	#articleInfo17 .photo>div .photo-box img{aspect-ratio:1/1;width:100%;object-fit:cover;height:150px}
	#articleInfo17 .photo .focus{margin:0 4px;width:250px}
}