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

#history{ position: relative;z-index: 5; background:#fff url("../img/history_bg.jpg") no-repeat; background-position: 0 0; background-size: cover; margin: 0 auto;}

#history .list{ position: relative; display: block; margin: 0 auto; padding-bottom: 80px;}
#history .list>.timeaxis{ position: absolute;z-index: 1; left: 50%; top: 0; margin-left: -1px; width: 1px;height: 100%; background: #ccc; content: '';}
#history .list>.timeaxis:after{position: absolute;z-index: 3;left: 50%;top: -38px; margin-left: -20px; width: 40px;height: 40px;  font-family: iconfont; font-size: 4.2rem; color: #ccc; content: '\e600'; transition: all .35s;}
#history .list>ul{ margin: 0 auto;}
#history .list>ul>li{ position: relative; z-index: 5; display: block; width: 100%; box-sizing: border-box;padding: 50px 0; overflow: hidden; transition: all .35s; }
#history .list>ul>li:nth-child(odd){padding-left: 54%; text-align: left;}
#history .list>ul>li:nth-child(even){padding-right: 54%; text-align: right;}
#history .list>ul>li .dot{position: absolute;z-index: 3; left: 50%; top:70px; margin-left: -7px; width: 14px;height: 14px; border-radius: 100%; border: 2px solid rgba(255,255,255,1); background: rgba(1,64,153,1); }
#history .list>ul>li .dot:before {content: "";box-sizing: border-box;width: 40px; height: 40px;position: absolute; z-index: 2; left: 50%; top: 50%; margin-top: -20px; margin-left: -20px; border-radius: 50%; background: rgba(255,255,255,1); box-shadow: 0 0 6px 1px rgba(240,130,0,1); transform: scale(0); opacity: 1; will-change: transform, opacity;}
#history .list>ul>li .dot:after{position: absolute;z-index: 1; left: 14px;top: 4px; width: 26px;height: 1px; background: rgba(1,64,153,1); content: ''; transition: all .35s;}
#history .list>ul>li .years{ position: relative; float:left; font-size: 4rem; font-weight: 700; color: rgba(1,64,153,1);}
#history .list>ul>li .box{ float:left; padding: 10px 30px; box-sizing: border-box; text-align: left;}
#history .list>ul>li .box>.txt{font-size: 1.6rem; color: #666; line-height: 2.8rem;}
#history .list>ul>li:nth-child(even) .dot:after{right: 14px; left: auto;}
#history .list>ul>li:nth-child(even) .years{float: right;}
#history .list>ul>li:nth-child(even) .box{float: right; text-align: right;}
#history .list>ul>li:hover{ transform: scale(1.1);}
#history .list>ul>li:hover .dot:before{animation: out-circle 1s infinite;animation-timing-function: ease-in;}
#history .list>ul>li:hover .years{ color: rgba(240,130,0,1);}
#history .list>ul>li:hover .dot{background: rgba(240,130,0,1);}
#history .list>ul>li:hover .dot:after{background: rgba(240,130,0,1); width: 0;}

#loadmore{padding-top: 0!important;}
#loadmore .more{ border: 2px solid rgba(1,64,153,1)!important; background: rgba(1,64,153,1); color: #fff;}

@keyframes scaled-rect {
    0%, to {
        transform:translateZ(0) scale(1.2) rotate(0);
        -moz-transform:translateZ(0) scale(1.2) rotate(.02deg)
    }
    50% {
        transform:translateZ(0) scale(.8) rotate(0);
        -moz-transform:translateZ(0) scale(.8) rotate(.02deg)
    }
}

@keyframes out-circle {
    0% {
        transform:scale(0);
        -moz-transform:scale(0) rotate(.02deg);
        opacity:1
    }
    70% {
        opacity:1
    }
    to {
        transform:scale(1);
        -moz-transform:scale(1) rotate(.02deg);
        opacity:0
    }
}





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

    #history .list>ul>li .years{font-size: 3.6rem;}
    #history .list>ul>li .box{ width: 80%;}
    #history .list>ul>li .box>.txt{font-size: 1.4rem; line-height: 2.4rem;}


}

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

    #history .list>ul>li .years{float: none;}
    #history .list>ul>li .box{ float: none; width: 100%; padding: 10px 0;}

    #history .list>ul>li:nth-child(even) .years{float: none;}
    #history .list>ul>li:nth-child(even) .box{float: none; text-align: right;}


}




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

    #history .list>ul>li{padding: 30px 0;}

    #history .list>ul>li .dot{ top:45px; margin-left: -6px; width: 12px;height: 12px; }
    #history .list>ul>li .dot:before {width: 30px; height: 30px;margin-top: -15px; margin-left: -15px;}
    #history .list>ul>li .dot:after{ width: 12px;}


    #history .list>ul>li .years{font-size: 3rem;}
    #history .list>ul>li .box>.txt{font-size: 1.2rem; line-height: 2rem;}

}

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

    #history .list>ul>li .years{font-size: 2.4rem;}
    #history .list>ul>li .dot:after{display: none;}


    #loadmore .more{ padding: 10px 50px!important; font-size: 1.4rem!important;}



}