/* CSS Document */
/* ----------------------- photos ----------------------- */
.history { width: 62.5%; margin: 80px auto 0 auto; overflow: hidden; }
.history .title { width: 300px; height: 100px; margin: 60px auto; text-align: center; color: #fff; overflow: hidden; }
.history .title span { font-size: 55px; font-family: "宋体"; font-weight: bold; letter-spacing: -0.1em; }
.history .title i { font-size: 16px; }
.history_new { width: 100%; background: url(../images/history_dian.png) center repeat-y; overflow: hidden; }
.history .start { width: 18px; height: 18px; border-radius: 50%; background-color: rgba(255,255,255,0.5); margin: 0 auto; }
.history .yuefen { width: 190px; height: 44px; line-height: 44px; text-align: center; background-color: #fff; color: #1c1b28; font-size: 16px; margin: 70px auto; overflow: hidden; }
.history ul { width: 100%; }
.history ul li { width: 55%; }
.history ul .odd { float: left; }
.history ul .even { float: right; }
.history ul .odd .l { width: 81.82%; text-align: right; color: #fff; float: left; }
.history ul .odd .r { display: block; width: 18.18%; float: right; }
.history ul .even .l { width: 81.82%; text-align: left; color: #fff; float: right; }
.history ul .even .r { display: block; width: 18.18%; float: left; }
.history .yuefen { width: 190px; height: 44px; line-height: 44px; text-align: center; font-size: 16px; margin: 70px auto; overflow: hidden; animation: totop1 1s; -webkit-animation: totop1 1s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul li .l h1 { display: block; width: 100%; line-height: 43px; font-family: "宋体"; letter-spacing: -0.1em; }
.history ul li .l i { display: block; width: 100%; height: 43px; line-height: 43px; font-size: 16px; color: #ff7800; }
.history ul li .l span { display: block; width: 100%; line-height: 25px; }
.history ul li .l img { max-width: 80%; margin-top: 20px; }
.history ul li .r b { display: block; width: 30px; height: 30px; margin: 50px auto; background: #ff7800 url(../images/history_tb.jpg) center no-repeat; border-radius: 50%; animation: xuanzhuan 1.5s; -webkit-animation: xuanzhuan 1.5s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .odd .l h1 { animation: toright 1s; -webkit-animation: toright 1s; }
.history ul .odd .l i { animation: toright 1s 0.2s; -webkit-animation: toright 1s 0.2s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .odd .l span { animation: toright 1s 0.4s; -webkit-animation: toright 1s 0.4s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .odd .l img { animation: totop 1s 0.6s; -webkit-animation: totop 1s 0.6s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .odd .l a { display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; background-color: #F60; color: #fff; margin-top: 20px; margin-bottom: 20px; float: right; animation: totop 1s 0.8s; -webkit-animation: totop 1s 0.8s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .even .l h1 { animation: toleft 1s; -webkit-animation: toleft 1s; }
.history ul .even .l i { animation: toleft 1s 0.2s; -webkit-animation: toleft 1s 0.2s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .even .l span { animation: toleft 1s 0.4s; -webkit-animation: toleft 1s 0.4s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .even .l img { animation: totop 1s 0.6s; -webkit-animation: totop 1s 0.6s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul .even .l a { display: block; width: 120px; height: 40px; line-height: 40px; text-align: center; background-color: #F60; color: #fff; margin-top: 20px; margin-bottom: 20px; float: left; animation: totop 1s 0.8s; -webkit-animation: totop 1s 0.8s; animation-fill-mode: forwards; animation-fill-mode: both; }
.history ul li .l a:hover { background: #FFF; color: #666; }
 @media (max-width: 1366px) {
.history { width: 80%; margin: 20px auto 0 auto; overflow: hidden; }
}
 @media (max-width: 1199px) {
}
 @media (max-width: 1023px) {
.history { width: 90%; margin: 20px auto 0 auto; overflow: hidden; }
}
 @media (max-width: 767px) {
.history { width: 100%; margin: 20px auto 0 auto; overflow: hidden; }
.history .title span { font-size: 40px; }
.history .title i { font-size: 14px; }
.history .title { margin: 20px auto; text-align: center; color: #fff; overflow: hidden; }
.history_new { width: 100%; background: none; background: url(../images/history_dian.png) 10% top repeat-y; overflow: hidden; }
.history .start { width: 18px; height: 18px; border-radius: 50%; background-color: rgba(255,255,255,0.5); margin-left: calc( 10% - 9px); margin-left: -webkit-calc( 10% - 9px); }
.history ul li { width: 100%; margin-bottom: 30px; }
.history ul .even { float: left; }
.history ul .odd .l { width: 80%; text-align: left; color: #fff; float: right; }
.history ul .odd .r { display: block; width: 20%; float: left; }
.history ul .even .l { width: 80%; text-align: left; color: #fff; float: right; }
.history ul .even .r { display: block; width: 20%; float: left; }
.history ul .odd .l a { float: left; }
.history ul li .l h1 { width: 95%; font-size: 25px; }
.history ul li .l i { width: 95%; }
.history ul li .l span { width: 95%; }
.history ul li .l img { max-width: 80%; margin-top: 20px; }
.history ul li .r b { width: 26px; height: 26px; margin: 52px auto; }
}
 @media (max-width: 374px) {
.history ul li .l h1 { font-size: 18px; line-height:20px; }
.history ul li .l i { font-size: 14px; }
}
 @-webkit-keyframes toleft { 0% {
opacity:0;
transform:translate3d(200px, 0, 0);
-webkit-transform:translate3d(200px, 0, 0);
}
100% {
opacity:1;
transform:translate3d(0, 0, 0);
-webkit-transform:translate3d(0, 0, 0);
}
}
@-webkit-keyframes toright { 0% {
opacity:0;
transform:translate3d(-200px, 0, 0);
-webkit-transform:translate3d(-200px, 0, 0);
}
100% {
opacity:1;
transform:translate3d(0, 0, 0);
-webkit-transform:translate3d(0, 0, 0);
}
}
@-webkit-keyframes totop { 0% {
opacity:0;
transform:translate3d(0, 200px, 0);
-webkit-transform:translate3d(0, 200px, 0);
}
100% {
opacity:1;
transform:translate3d(0, 0, 0);
-webkit-transform:translate3d(0, 0, 0);
}
}
@-webkit-keyframes totop1 { 0% {
opacity:0;
background:#000;
color:#fff;
transform:translate3d(0, 200px, 0);
-webkit-transform:translate3d(0, 200px, 0);
}
50% {
opacity:1;
background:#000;
color:#fff;
transform:translate3d(0, 100px, 0);
-webkit-transform:translate3d(0, 100px, 0);
}
100% {
opacity:1;
background:#fff;
color:#1c1b28;
transform:translate3d(0, 0, 0);
-webkit-transform:translate3d(0, 0, 0);
}
}
 @-webkit-keyframes xuanzhuan { 0% {
opacity:0;
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100% {
opacity:1;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}