﻿.pagehistory .pagehistory-list{max-width:1200px;margin:2% auto;position:relative;padding-bottom:20px;z-index:1}
.pagehistory .pagehistory-list::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0px;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:#f1c9b4;color:var(--color)}
.pagehistory .pagehistory-list .item:nth-child(2n) .info::after{left:-40px;right:auto;border:20px solid transparent;border-right:20px solid #FFFFFF}
.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:#FFFFFF;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:var(--fontbold6)}
.pagehistory .pagehistory-list .item .icon em{font-size:var(--fontsize20);line-height: 1;}
.pagehistory .pagehistory-list .item .info{width:95%;background:#FFFFFF;box-shadow:0px 3px 25px 5px rgba(224,224,224,.3);border-radius:var(--borderradius);padding:30px;position:relative;transition:all .1s linear}
.pagehistory .pagehistory-list .item .info:hover{box-shadow:0px 3px 25px 5px rgba(198,198,198,.6)}
.pagehistory .pagehistory-list .item .info::after{content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:0px;height:0px;border:20px solid transparent;border-left:20px solid #FFFFFF}
.pagehistory .pagehistory-list .item .info .name{font-size:var(--fontsize22);font-weight:var(--fontbold6);color:var(--fontcolor);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:20px}
.pagehistory .pagehistory-list .item .year{width:300px;height:50px;border-radius:27px;display:flex;align-items:center;justify-content:space-between;padding:0px 20px;z-index:0;position:relative;overflow:hidden}
.pagehistory .pagehistory-list .item .year::after{content:"";position:absolute;left:0px;top:0px;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:var(--fontsize24);font-weight:var(--fontbold6)}
.pagehistory .pagehistory-list .item .year span:nth-child(2){color:var(--fontcolor);font-weight:var(--fontbold6)}
@media (max-width:1024px){.pagehistory .pagehistory-list .item{flex-wrap:wrap;flex-direction:row-reverse;margin-bottom:30px;}
.pagehistory .pagehistory-list .item .left{flex-direction:row-reverse;width:100%;margin-bottom:10px}
.pagehistory .pagehistory-list .item .icon{background:#f1c9b4;color:var(--color)}
.pagehistory .pagehistory-list .item .info{width:100%;padding:15px;}
.pagehistory .pagehistory-list .item .info .name{font-size:var(--fontsize18)}
.pagehistory .pagehistory-list .item .info::after{left:-40px;right:auto;border:20px solid transparent;border-right:20px solid #FFFFFF;display:none}
.pagehistory .pagehistory-list .item .length{margin:0 10px;}
.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}}