#articleInfo32 { position: relative; z-index: 1; }
#articleInfo32 ul { position: relative; display: flex; flex-direction: column; padding: 0; }
#articleInfo32 ul:before {position: absolute;top: 0;width: 1px;height: 100%;background: #e5e5e5;left: calc(50% - 2px);content: "";z-index: -1;border-radius: 10px;}
#articleInfo32 ul li {overflow: hidden;margin: 10px 0;display: grid;grid-template-columns: 140px   43%;align-items: center;gap: 10px;justify-content: end;}
#articleInfo32 ul li:nth-child(2n){grid;grid-template-columns: 42.8% 140px;display: grid;justify-content: start;}
#articleInfo32 ul li:nth-child(2n) .titBox{order:3;display: flex;align-items: flex-start;}
#articleInfo32 ul li:nth-child(2n) .titBoxP{}
#articleInfo32 ul li:nth-child(2n) .titBox h3{text-align:left;}
#articleInfo32 ul li:nth-child(2n) .info{order:-1}
#articleInfo32 ul li>div {display: flex;flex-direction: column;}
#articleInfo32 ul li .titBox{
    display: flex;
    align-items: flex-end;
    position: relative;
}
#articleInfo32 ul li .titBox:before{content:'';width: 40px;height: 1px;background: #2f4f4f;position: absolute;top: 47%;left: 100%;transform: translate(-50%, -50%);z-index: 10;}
#articleInfo32 ul li:nth-child(2n) .titBox:before{content:'';top: 47%;left: auto;right: 70%;transform: translate(-50%, -50%);}

#articleInfo32 ul li .titBox p, #articleInfo32 ul li .titBox h3 {text-align: right;color: #aeaeae;}
#articleInfo32 ul li .titBox h3 {font-size: 25px;color: #ffffff;transition: all 0.4s ease-in-out 0s;font-family: "Nunito Sans", serif;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background-color: var(--primary);text-align: center;width: 140px;height: 140px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#articleInfo32 ul li >.icon {position: relative;width: 90px;height: 1px;background: #d9d9d9;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 3;position: absolute;display: none;}
#articleInfo32 ul li >.icon .fa { color: white; }
#articleInfo32 ul li .info {position: relative;background-color: #efefef69;padding: 40px;}
#articleInfo32 ul li .info p{
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--secondary);
    border-bottom: 1px solid #cbcbcb;
    padding-bottom: 10px;
}
#articleInfo32 ul li .info h3 { padding: 10px; background: #565757; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; font-size: 18px; color: #fff; }
#articleInfo32 ul li .info article {line-height: 180%;overflow: hidden;text-align: justify;}
#articleInfo32 ul li .info .Img{
    margin-top: 20px;
}
#articleInfo32 .scollbar { position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 4px; top: 0; left: calc(22% + 31px); background: #d0b398; height: 0px; transition: unset; -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; -ms-transition: unset; z-index: 1; max-height: 100%; }


@media screen and (max-width:1440px) {
    #articleInfo32 ul li {grid-template-columns: 140px 42%;gap: 10px;}
#articleInfo32 ul li:nth-child(2n){grid;grid-template-columns: 41.8% 140px;display: grid;justify-content: start;}

}
@media screen and (max-width:1366px) {
    #articleInfo32 ul li {grid-template-columns: 140px 40.8%;gap: 10px;}
#articleInfo32 ul li:nth-child(2n){grid;grid-template-columns: 39.8% 140px;display: grid;justify-content: start;}
#articleInfo32 ul:before{
    left: calc(50% - 4px);
}
}
@media screen and (max-width:1180px) {
	#articleInfo32 ul li .titBox p { font-size: 14px; margin-right: 0; }

    #articleInfo32 ul li:nth-child(2n) .titBox:before{
    left: 100%;
    right: auto;
    top: 51%;
}
    #articleInfo32 ul li .titBox:before{
    top: 50%;
}
	#articleInfo32 ul li:nth-child(2n) .titBox{order:0}
	#articleInfo32 ul li:nth-child(2n) .info{order:3}
	#articleInfo32 ul li .titBox h3{font-size:20px;margin: 0;text-align: left;width: 80px;height: 80px;}
	#articleInfo32 ul li, #articleInfo32 ul li:nth-child(2n){display: grid;grid-template-columns: 80px  1fr;gap: 10px;margin: 20px 0;}
	#articleInfo32 ul:before {left: 40px;height: 100%;}
    #articleInfo32 ul li .info{
    padding: 25px;
}
}
@media screen and (max-width:480px) {
	#articleInfo32 .scollbar { height: 100%; }
}