﻿.historyPage { padding: 8% 0px; overflow: hidden; }
.historyPage dd { float: left; display: block; }
.historyPage .titem { width: 26%; padding-left: 2%; }
.historyPage .citem {width: 100%;height: 426px;position: relative;}
.hisBot { position: absolute; left: 0px; width: 100%; display: block; top: 50%; height: 2px; background-color: #646464; margin-top: -1px; }
.historyDemo .item { width: 100%; height: 426px; position: relative; }
.historyDemo .xian { background: url(../images/h_i2.png) no-repeat scroll left top; width: 38px; height: 190px; position: absolute; left: 0px; }
.historyDemo .dian { background: url(../images/h_i1.png) no-repeat; width: 11px; height: 11px; position: absolute; left: -6px; }
.historyDemo .year {font-weight: bold;font-size: 36px;line-height: 1.2;color: #3a3a3a;margin-bottom: 12px;}
.historyDemo .c { font-size: 14px; line-height: 1.8; }
.historyDemo .hitem1, .historyDemo .hitem2, .historyDemo .hitem3, .historyDemo .hitem4 { padding-left: 50px; }
.historyDemo .hitem1 .dian, .historyDemo .hitem2 .dian { bottom: -6px; }
.historyDemo .hitem3 .dian, .historyDemo .hitem4 .dian { top: -6px; }
.historyDemo .hitem1 .xian, .historyDemo .hitem2 .xian { bottom: 0px; }
.historyDemo .hitem3 .xian, .historyDemo .hitem4 .xian { top: 0px; background: url(../images/h_i5.png) no-repeat scroll left bottom; }
.historyDemo .hitem2 .xian { height: 154px; }
.historyDemo .hitem3 .xian { height: 110px; }
.historyDemo .hitem4 .xian { height: 68px; }
.historyDemo .hitem1 { position: absolute; left: 5%; height: 212px; top: 0px; width: 38%; }
.historyDemo .hitem2 { position: absolute; left: 55%; height: 172px; top: 40px; width: 38%; }
.historyDemo .hitem3 { position: absolute; left: 25%; padding-top: 88px; height: 124px; top: 212px; width: 38%; }
.historyDemo .hitem4 { position: absolute; left: 70%; padding-top: 48px; height: 164px; top: 212px; width: 20%; }
.historyDemo .slick-arrow { width: 48px; height: 48px; display: block; background: url(../images/h_btn_bg.png) no-repeat scroll left top; top: 50%; margin-top: -24px; z-index: 100; }
.historyDemo .slick-arrow i{ width: 40px; height: 40px; display: block; margin: 4px auto;}
.historyDemo .slick-prev{left: -24px;}
.historyDemo .slick-next { right: -24px;}
.historyDemo .slick-prev i{-webkit-animation: start1 1s infinite ease-in-out; -moz-animation: start1 1s infinite ease-in-out; animation: start1 1s infinite ease-in-out;background: url(../images/h_btn_l.png) no-repeat scroll left center;}
.historyDemo .slick-next i{-webkit-animation: start 1s infinite ease-in-out; -moz-animation: start 1s infinite ease-in-out; animation: start 1s infinite ease-in-out;background: url(../images/h_btn_r.png) no-repeat scroll left center; }
@-webkit-keyframes start {
    0%,30% { opacity: 0; -webkit-transform: translate(-8px,0px); }
    60% { opacity: 1; -webkit-transform: translate(0,0); }
    100% { opacity: 0; -webkit-transform: translate(10px,0px); }
}
@-moz-keyframes start {
    0%,30% { opacity: 0; -moz-transform: translate(-8px,0px); }
    60% { opacity: 1; -moz-transform: translate(0,0); }
    100% { opacity: 0; -moz-transform: translate(10px,0px); }
}
@keyframes start {
    0%,30% { opacity: 0; transform: translate(-8px,0px); }
    60% { opacity: 1; transform: translate(0,0); }
    100% { opacity: 0; transform: translate(10px,0px); }
}
@-webkit-keyframes start1 {
    0%,30% { opacity: 0; -webkit-transform: translate(8px,0px); }
    60% { opacity: 1; -webkit-transform: translate(0,0); }
    100% { opacity: 0; -webkit-transform: translate(-10px,0px); }
}
@-moz-keyframes start1 {
    0%,30% { opacity: 0; -moz-transform: translate(8px,0px); }
    60% { opacity: 1; -moz-transform: translate(0,0); }
    100% { opacity: 0; -moz-transform: translate(-10px,0px); }
}
@keyframes start1 {
    0%,30% { opacity: 0; transform: translate(8px,0px); }
    60% { opacity: 1; transform: translate(0,0); }
    100% { opacity: 0; transform: translate(-10px,0px); }
}
