@charset "utf-8";
/* CSS Document */


#history{margin: 0 auto;}

#history>.display{margin: 100px auto;}
#history>.display .lists{margin: 0 auto;}
#history>.display .lists>ul{ position: relative; display: block; margin:  0 auto; padding: 30px 0;}
#history>.display .lists>ul:after{position: absolute;z-index: 1; left: 50%;top: 0;width: 3px;height: 100%; background:#ccc; content: ''; transform: translateX(-50%);}
#history>.display .lists>ul>li{ position:relative;z-index: 10; display:block; width:100%; padding:50px 0; margin: 30px auto;}
#history>.display .lists>ul>li>.title {position: absolute;z-index: 10; left: 0;top:50px;width:50%; text-align:right; box-sizing: border-box;padding-right: 50px; transition: all .5s;}
#history>.display .lists>ul>li>.title>.tit{ position: absolute;z-index: 1; right: 50px; bottom: 30px; color:#d70d19; font-size:3rem; transition:all .35s;}
#history>.display .lists>ul>li>.title>.year{ color:#666; font-weight:bold; font-size:2.4rem; transition: all .35s;}
#history>.display .lists>ul>li>.title>.spot {  position: absolute; z-index: 1; right: -7px; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 100%; background: #fff; border: 5px solid #ccc; transition: all 0.5s; box-sizing: border-box;}
#history>.display .lists>ul>li>.title>.spot>i { width: 6px; height: 6px; transition: all .5s; position: absolute; left: 50%; margin-left: -3px; top: 50%; margin-top: -3px; background: #fff; border-radius: 50%; display: block;}
#history>.display .lists>ul>li>.content { width: 100%;box-sizing: border-box; color: #666;padding-left: 50%;transition: all 0.5s;}
#history>.display .lists>ul>li>.content>.row{ padding-left: 50px; font-size: 1.6rem;line-height: 2.8rem;}
#history>.display .lists>ul>li:hover .title {color: #d70d19;}
#history>.display .lists>ul>li:hover .title>.spot {transform: scale(2.5); background: #fff; border: 1px solid #ddd;}
#history>.display .lists>ul>li:hover .title>.spot>i {background: #d70d19;}
#history>.display .lists>ul>li:hover .title>.tit{transform: scale(1.2);}
#history>.display .lists>ul>li:hover .title>.year{padding-right: 10px; }


@media only screen and (max-width: 1080px){

    #history>.display .lists>ul>li>.title>.tit{ font-size:2.4rem;}
    #history>.display .lists>ul>li>.title>.year{ font-size:2rem;}
}

@media only screen and (max-width: 860px){

    #history>.display .lists>ul:after{ left: 0;transform: translateX(0);}

    #history>.display .lists>ul>li>.title {width:60%; text-align:left; padding-left: 30px; padding-right: 0; }
    #history>.display .lists>ul>li>.title>.spot { left: -6px; right: auto; top: 50%; margin-top: -7px;}
    #history>.display .lists>ul>li>.title>.tit{ left: 30px; right: auto;font-size:2rem;}
    #history>.display .lists>ul>li>.title>.year{ font-size:1.8rem;}
    #history>.display .lists>ul>li:hover .title>.tit{transform: scale(1);}
    #history>.display .lists>ul>li>.content { padding-left: 25%;}
    #history>.display .lists>ul>li>.content>.row{font-size: 1.4rem;line-height: 2.4rem;}



}

@media only screen and (max-width: 640px){

    #history>.display { margin:50px auto;}
    #history>.display .lists>ul>li {  padding: 20px 0; margin: 0 auto;}
    #history>.display .lists>ul>li>.title{position: relative; width: 100%; top: 0;}
    #history>.display .lists>ul>li>.title>.tit{ font-size:1.6rem;}
    #history>.display .lists>ul>li>.content { padding:20px 0;}
    #history>.display .lists>ul>li>.content>.row{ padding-left: 30px; font-size: 1.4rem;line-height: 2.4rem;}


}