@import url('/css/animate.css');
.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
#articleInfo7 .item{position:relative;display:flex;justify-content: space-between;flex-wrap:wrap;margin: 30px 0;}
#articleInfo7 .item > div{width:45%;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}

#articleInfo7 .item:nth-child(2n) .photo{animation-name:fadeInRight;-webkit-animation-name:fadeInRight;order: 2;}
#articleInfo7 .item .photo:before{content:'';position:absolute;width:100%;height: 100%;bottom: -20px;left:20px;z-index:1;border: 1px solid rgb(146 146 146 / 40%);}
#articleInfo7 .item .photo img{width:100%;height:100%;object-fit:cover;position:relative}
#articleInfo7 .item .info{margin: 50px 0;width: 45%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo7 .item:nth-child(2n) .info{animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo7 .item .info h5{padding:0 0 10px;position:relative;font-weight:400;font-size: 60px;color: #666666;font-family: "Cormorant Garamond", serif;opacity: .2;line-height: 1;text-transform: uppercase;}
#articleInfo7 .item .info h3, #articleInfo20 .textEditor h3{letter-spacing:0.5px;line-height:160%;color: #666666;font-size: 28px;font-weight: 400;}
#articleInfo7 .item .info article{position:relative;text-align:justify;width:100%;margin-top:20px;line-height: 230%;letter-spacing:1px;padding-bottom:15px;}
#articleInfo20 .stepbox h4 strong span{display:block;font-size: 13px;margin:0 0 5px;text-align:center;text-transform:uppercase;font-weight: 400;color: #555;letter-spacing: 1px;}
#articleInfo20 .stepbox h4 strong{font-size:45px;font-weight:500;display:inline-block;line-height:100%;text-align:center;color:var(--primary);font-family:'Poppins',sans-serif;background-color: #fcfcfc;padding:20px 0;font-family: "Jost", sans-serif;letter-spacing: 0;}
#articleInfo20 .stepbox:last-child{margin-bottom:0}
#articleInfo20 .stepbox:before{content:"";position:absolute;background:#d5d5d5;width:1px;height:calc(100% - 0vw);left:calc(3vw + 40px);top:calc(3vw + 100px);z-index: 1;}
#articleInfo20 .stepbox{margin:2vw 0;position:relative;box-shadow: 4px 7px 30px rgb(212 211 211 / 50%);padding:2vw 3vw;background-color: rgb(255 255 255 / 65%);display: grid;align-items:center;grid-template-columns: 150px 1fr;}
#articleInfo20 .stepbox:last-child:before{opacity:0}
#articleInfo20 .flowcontent .stepbox h4{font-size:24px;line-height:1.5;letter-spacing:2px;margin:0 0 10px;font-weight:500;color:#1f1f1f}
#articleInfo20 .textEditor ul{padding-left: 0.7vw;list-style: none;}
#articleInfo20 .textEditor li{color: rgb(48 48 48);list-style-position: inside;font-size: 16px;font-weight: 400;line-height: 1.93;letter-spacing: 0.8px;padding-left: 10px;position: relative;}
#articleInfo20 .textEditor .shelfList{display:flex;flex-direction:row;flex-wrap:wrap;width:calc(100% - 0px)}
#articleInfo20 .textEditor .shelfList li{width:calc((100% / 4) - 60px);margin:20px}
#articleInfo20 .textEditor .shelfList .Txt h3{word-spacing:100vw;font-size:17px;line-height:170%}

@media screen and (max-width: 1280px) {
    .stepbox ul{padding-left:0;list-style:none}
	.stepbox h4 strong{font-size:40px;margin-right:10px}
	.flowcontent .stepbox h4{font-size:20px;margin:0 0 5px}
	.stepbox{margin:4vw 0;padding:6vw 4vw}
}
@media screen and (max-width:768px){
	#articleInfo7 .item .photo{position:relative;width:100%;margin-bottom:20px}
	#articleInfo7 .item:nth-child(2n) .photo{right:0}
	#articleInfo7 .item .info{margin:0;width:100%}
	#articleInfo7 .item .info h5,#articleInfo7 .item .info h3{}
	#articleInfo7 .item .info h3{}
	#articleInfo7 .item:nth-child(2n) .info h5,#articleInfo7 .item:nth-child(2n) .info h3{margin:0 auto 0 0}
	#articleInfo7 .item .info h5:before{font-size:130px}
}
@media screen and (max-width:480px){
	#articleInfo20 .stepbox{grid-template-columns: 90px 1fr;}
	#articleInfo20 .stepbox h4 strong{font-size: 30px;}
	#articleInfo7 .item > div,#articleInfo7 .item:nth-child(2n) > div{float:none}
	#articleInfo7 .item .info h5{font-size: 50px;padding:0;margin-top: 40px;}
	#articleInfo7 .item .info h5:before{font-size:80px}
}