.pagehistory .pageabouttitle{font-size:42px;font-weight:var(--fontbold7);line-height:1.2;color:#1a1919;text-align:center}
.pagehistory .title{font-size:44px;font-weight:var(--color);color:#333;line-height:1.2;text-align:center;font-weight:var(--fontbold7)}
.pagehistory .pagehistory-list{max-width:1200px;margin:2.5% auto 0;position:relative;padding-bottom:20px;z-index:1}
.pagehistory .pagehistory-list::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;width:1px;height:100%;background:var(--color);z-index:-1}
.pagehistory .pagehistory-list .item{display:flex;align-items:center;justify-content:space-between;margin-bottom:50px}
.pagehistory .pagehistory-list .item:nth-child(2n){flex-direction:row-reverse}
.pagehistory .pagehistory-list .item:nth-child(2n) .left{flex-direction:row-reverse}
.pagehistory .pagehistory-list .item:nth-child(2n) .icon{background:#ef9899;color:var(--color)}
.pagehistory .pagehistory-list .item:nth-child(2n) .info::after{left:-40px;right:auto;border:20px solid transparent;border-right:20px solid #fff}
.pagehistory .pagehistory-list .item:nth-child(2n) .right{flex-direction:row-reverse}
.pagehistory .pagehistory-list .item:nth-child(2n) .year{flex-direction:row-reverse}
.pagehistory .pagehistory-list .item:nth-child(2n) .year::after{background:linear-gradient(-90deg,var(--color),#fff)}
.pagehistory .pagehistory-list .item .left,.pagehistory .pagehistory-list .item .right{width:45%}
.pagehistory .pagehistory-list .item .left{display:flex}
.pagehistory .pagehistory-list .item .icon{width:60px;height:60px;background:var(--color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:var(--fontbold6)}
.pagehistory .pagehistory-list .item .icon em{font-size:20px}
.pagehistory .pagehistory-list .item .info{width:95%;background:#fff;box-shadow:0 3px 49px 5px rgba(224,224,224,.55);border-radius:10px;padding:30px;position:relative;transition:all .1s linear}
.pagehistory .pagehistory-list .item .info:hover{box-shadow:0 3px 49px 5px rgba(198,198,198,.8)}
.pagehistory .pagehistory-list .item .info::after{content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:0;height:0;border:20px solid transparent;border-left:20px solid #fff}
.pagehistory .pagehistory-list .item .info .name{font-size:22px;font-weight:var(--fontbold6);color:#333;line-height:1.2;text-align:center;padding-bottom:15px}
.pagehistory .pagehistory-list .item .right{display:flex;align-items:center}
.pagehistory .pagehistory-list .item .length{width:50px;height:5px;background:var(--color);border-radius:3px;margin-right:10px;margin-left:10px;}
@media (min-width:769px){.pagehistory .pagehistory-list .item:nth-child(2n) .length{margin-left:20px;margin-right:0;}}
.pagehistory .pagehistory-list .item .year{width:300px;height:50px;border-radius:27px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:0;position:relative;overflow:hidden}
.pagehistory .pagehistory-list .item .year::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg,var(--color),#fff);opacity:.3;z-index:-1}
.pagehistory .pagehistory-list .item .year span:nth-child(1){color:var(--color);font-size:24px;font-weight:var(--fontbold6)}
.pagehistory .pagehistory-list .item .year span:nth-child(2){color:#000;font-weight:var(--fontbold6)}
@media (max-width:768px){.pagehistory .pageabouttitle{font-size:24px;}
.pagehistory .pagehistory-list .item{flex-wrap:wrap;flex-direction:row-reverse;margin-bottom: 25px;}
.pagehistory .pagehistory-list .item .left{flex-direction:row-reverse;width:100%;margin-bottom:10px}
.pagehistory .pagehistory-list .item .icon{background:#ef9899;color:var(--color)}
.pagehistory .pagehistory-list .item .info{width:100%;padding-top:10px;padding-bottom:10px;}
.pagehistory .pagehistory-list .item .info .name{font-size:18px}
.pagehistory .pagehistory-list .item .info::after{left:-40px;right:auto;border:20px solid transparent;border-right:20px solid #fff;display:none}
.pagehistory .pagehistory-list .item .right{flex-direction:row-reverse;flex:1}
.pagehistory .pagehistory-list .item .year{flex-direction:row-reverse}
.pagehistory .pagehistory-list .item .year::after{background:linear-gradient(-90deg,var(--color),#fff)}
.pagehistory .pagehistory-list::before{display:none}}