同步

css/time.css

@@ -0,0 +1,226 @@
+/*大事记start*/
+
+.event_box {
+  position: relative;
+}
+
+.event_box .parHd {
+  width: 100%;
+  display: inline-block;
+
+
+  overflow: hidden;
+}
+.cps-link{
+  color: #fff;
+}
+.cps-link:hover{
+  color: #333 !important;
+}
+
+
+.about {
+  height: 440px;
+  /* background: url('../assets/img/about/banner.png') no-repeat;
+  background-size: 810px 100%;
+  background-position: 100% 0%; */
+  background-color: #F7F8FA;
+}
+.about .section-content{
+  height: 100%;
+  position: relative;
+}
+.about .section-content::after{
+  content: '';
+  width: 810px;
+  height: 100%;
+  background: url('../assets/img/about/banner.png') no-repeat;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-size: cover;
+}
+.parHd ul {
+  width: 100%;
+  text-align: center;
+  height: 260px;
+  margin: 0 auto;
+}
+
+.parHd .tempWrap {
+  margin: 0 auto;
+}
+
+.parHd .tempWrap:after {
+  content: '';
+
+  width: 95%;
+
+  height: 1px;
+
+  background: rgba(255, 255, 255, 0.4);
+
+  position: absolute;
+
+  /* top: 33%; */
+
+  /* right: -140%; */
+
+  right: 3%;
+
+  top: 50%;
+
+  /* margin-top: -0.5px; */
+
+  z-index: 10;
+}
+
+/*.parHd li:before{ content: ''; width: 180%; height: 1px; background: #580000; position: absolute;top: 0; right:-140%;right: 0;}*/
+
+.parHd li.no_line:before {
+  display: none;
+}
+
+.parHd li {
+  display: inline-block;
+  cursor: pointer;
+  font-size: 16px;
+  color: #000;
+  margin: 0 30px;
+  position: relative;
+}
+
+.parHd li:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: #FFFFFF;
+  border-radius: 50%;
+  opacity: 1;
+  position: absolute;
+  z-index: 20;
+  top: 126px;
+  left: 50%;
+  margin-left: -4px;
+
+}
+
+.parHd li::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  background: #FFFFFF;
+  opacity: 0.22;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 20;
+  top: 120px;
+  left: 50%;
+  margin-left: -10px;
+}
+
+.parBd {
+  text-align: center;
+  margin-top: 60px;
+}
+
+.parBd h4 {
+  position: relative;
+  font-size: 40px;
+  margin-bottom: 3%;
+  /*width: 200px;*/
+  padding: 0 60px;
+  display: inline-block;
+  text-align: center;
+}
+
+.parBd h4:after {
+  content: '';
+  background: #000;
+  width: 100px;
+  height: 1px;
+  position: absolute;
+  left: -100px;
+  bottom: 12px;
+}
+
+.parBd h4:before {
+  content: '';
+  background: #000;
+  width: 100px;
+  height: 1px;
+  position: absolute;
+  right: -100px;
+  bottom: 12px;
+}
+
+.parBd p {
+  line-height: 180%;
+  font-size: 16px;
+  width: 80%;
+  margin: 0 auto;
+}
+
+div#listBox {
+
+  width: 100%;
+
+}
+
+.sPrev,
+.sNext {
+  width: 30px;
+  height: 30px;
+  display: block;
+  position: absolute;
+  top: 50%;
+  margin-top: -15px;
+}
+
+.sPrev {
+  left: 0;
+}
+
+.sNext {
+  right: 0;
+}
+
+.sPrev img,
+.sNext img {
+  transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
+
+  -moz-transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
+
+  -webkit-transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
+
+  -o-transition: all .6s cubic-bezier(.51, 1.1, .9, .95);
+}
+
+.time-box {
+  color: #fff;
+  height: 130px;
+  width: 200px;
+  font-size: 14px;
+}
+
+.time-box .line {
+  top: 50%;
+  left: 50%;
+  margin-top: 29px;
+  position: absolute;
+  width: 1px;
+  height: 26px;
+  background: #FFFFFF;
+  opacity: 0.4;
+}
+
+
+.about-time .parHd ul li:nth-child(odd) .time-box {
+  position: relative;
+  top: 180px;
+}
+
+.about-time .parHd ul li:nth-child(odd) .time-box .line {
+  position: absolute;
+  top: -70px;
+}