/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  margin: 0 40px;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
  background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
  background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;width: 100%!important;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #d59291;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 16px;
  padding-bottom: 15px;
  color: #2f3034;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
/*.cd-horizontal-timeline .events a.nian_2017{ left:260px !important}
.cd-horizontal-timeline .events a.nian_2016{ left:375px !important}
.cd-horizontal-timeline .events a.nian_2015{ left:340px !important}
.cd-horizontal-timeline .events a.nian_2014{left:400px !important}*/
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #ac2522;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #ac2522;
  border-color: #ac2522;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: #ac2522;
  border-color: #ac2522;
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: #ac2522;
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline {
    margin: 6em auto;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(../img/cd-arrow.svg) no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 0;
}
.next, .prev{display:block;position:absolute;width:35px;height:35px;cursor:pointer;border-radius:5px;z-index:3}
.prev{top:32px;left:-4px;background:url(/static/upload/images/prev.png) center center no-repeat;}
.prev:hover{background:rgba(255,0,0,1) url(/static/upload/images/prev.png) center center no-repeat;}
.next{top:32px;right:-4px;background:url(/static/upload/images/next.png) center center no-repeat;}
.next:hover{background:rgba(255,0,0,1) url(/static/upload/images/next.png) center center no-repeat;}


.no-touch .cd-timeline-navigation a:hover {
  border-color: #7b9d6f;
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: -49px;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
  max-width: 1100px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-content h2 {
  font-weight: bold;
  font-size: 2.6rem;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.2;
}
.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
}
.cd-horizontal-timeline .events-content em::before {
  content: '- ';
}
.cd-horizontal-timeline .events-content p {
  font-size: 1.4rem;
  color: #959595;
}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}



@media screen and (max-width:1215px){
.cd-horizontal-timeline .events a{width:60px}
.cd-horizontal-timeline .events a.nian_2023{ left:2% !important}
    .cd-horizontal-timeline .events a.nian_2022{ left:25% !important}
    .cd-horizontal-timeline .events a.nian_2021{ left:50% !important}
    .cd-horizontal-timeline .events a.nian_2020{ left:75% !important}
    .cd-horizontal-timeline .events a.nian_2019{ left:100% !important;}
    .cd-horizontal-timeline .events a.nian_2018{ left:125% !important;}
    .cd-horizontal-timeline .events a.nian_2017{ left:150% !important;}
    .cd-horizontal-timeline .events a.nian_2016{ left:175% !important;}
    .cd-horizontal-timeline .events a.nian_2015{ left:200% !important;}
    .cd-horizontal-timeline .events a.nian_2014{ left:225% !important;}
}
@media all and (min-width:0) and (max-width:767px){body{min-width:inherit;color:#666;border-top:0;font:14px/2 "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",Roboto,Arial,sans-serif;background:#fff}.shouji{display:block}.shoujinone{display:none !important}img{width:100%}
.toolbar{position:absolute;right:0;top:20px;width:35px;line-height:40px;}.toolbar a{color:#fff;width:70px;float:left;text-align:center;border-right:1px solid #dedede}.toolbar img{display:block;width:20px}

.header{width:100%;position:fixed;background:#fff}
.header .logo_menu{width:93.75%;margin:0 auto 12px;padding-top:8px;position:relative;top:0;height:auto;background:#fff}
.header .logo_menu .a{width:150px;display:block}
.header .logo_menu img{display:block;width:100%;margin-bottom:0}.header .logo_menu .shouji{display:block}
/*daohang*/
.menuclose{position:fixed;z-index:10;background:#ac2522;width:90%;top:51px;padding:20px 5% 20px 5%;line-height:26px;height:100%}.menuclose .tysj{display:block;width:100%;color:#fff;border-bottom:1px solid #fff;padding-bottom:2px;margin-bottom:2px}.menuclose ul{display:block;width:100%;padding:2px 0;line-height:22px}.menuclose ul li{display:inline-table;padding-right:10px}.menuclose .tyasj{font-size:14px;width:auto;display:block;color:#fff}.menuclose ul a{color:#fff;font-size:12px}
/*foot*/
.foot{padding:10px 0 0;}
.foot #foot{width:93.75%;}
.foot .h2{ padding-top:25px}
.foot .h2 img{ width:170px; border-bottom:1px solid #fff; padding-bottom:5px}.foot .sj_lm{margin-bottom:70px; margin-top:25px}.foot .sj_lm a{line-height:35px;margin-right:19px;width:auto;float:left;display:inline-block}
.copy_f .bottom2{ text-align:center}
.copy_f p{line-height:30px;padding-bottom:35px;padding-top:15px; width:93.75%; text-align:left; margin:0 auto; border-bottom:1px solid#292929}.copy_f a:hover{color:#fff!important}.copy_f .shouji{height:0}
.sp_bottom { display: block; position: fixed; bottom:0px; left:0px; width: 100%; background:#333; overflow:hidden;z-index:6;padding:6px 0 4px;color:#fff;line-height:14px;font-size:12px}.sp_bottom a{color:#fff!important}
.sp_bottom li{ width:25%; float:left;text-align:center; overflow:hidden;}
.sp_bottom .bodernone{ border:0}
.sp_bottom img{height:18px;width:auto}
/*banner*/
.banner{background-size:cover;}
.cd-horizontal-timeline .events{width:600px!important}
.cd-horizontal-timeline .events-wrapper{ width:100%; margin:0 auto}
.cd-horizontal-timeline .events a.nian_2023{ left:2% !important}
    .cd-horizontal-timeline .events a.nian_2022{ left:12% !important}
    .cd-horizontal-timeline .events a.nian_2021{ left:22% !important}
    .cd-horizontal-timeline .events a.nian_2020{ left:32% !important}
    .cd-horizontal-timeline .events a.nian_2019{ left:42% !important;}
    .cd-horizontal-timeline .events a.nian_2018{ left:52% !important;}
    .cd-horizontal-timeline .events a.nian_2017{ left:62% !important;}
    .cd-horizontal-timeline .events a.nian_2016{ left:72% !important;}
    .cd-horizontal-timeline .events a.nian_2015{ left:82% !important;}
    .cd-horizontal-timeline .events a.nian_2014{ left:92% !important;}
.prev{ left:-30px}.next{ right:-30px}
.cd-horizontal-timeline .events-content li > *{ width:93.75%}
.cd-horizontal-timeline .events-content p{ font-size:14px; color:#333}
.cd-horizontal-timeline .events-content li{ padding:0; left:0;}
.cd-horizontal-timeline .events-content h2{ font-size:18px}

}

@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .events-content h2 {
    font-size: 30px;
	color:#333;
	text-align:center;
  }
  .cd-horizontal-timeline .events-content em {
    font-size: 2rem;
  }
  .cd-horizontal-timeline .events-content p {
    font-size: 15px;
	color:#666;
  }
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}