@charset "utf-8";

.historical-page { position:relative; margin:0 auto ; padding-top:10px; width:1140px; height:690px; line-height:24px; overflow:hidden}
.historical-page .column-title { position:absolute; z-index:100; border-left:4px solid #007ee8; padding-left:5px; color:#007ee8; line-height:1}
.historical-page .column-title .name { display:block; font-size:24px; color:#fff}
.historical-page .column-title .en { display:block; padding-top:5px; font-size:22px}

.news-list { position:absolute; z-index:100; left:50px !important; top:210px; padding-left:20px; color:#fff; line-height:1.7; -webkit-transition:all 0.3s ease-out 0.4s; transition:all 0.3s ease-out 0.4s}
.news-list li { list-style:square}
.news-list a{ color:#fff; text-shadow: 1px 1px 1px #000}
.news-list a:hover{ text-decoration:underline}

.imprint-box { position:relative; z-index:10; width:100%; height:100%}
.imprint-container { position:relative; width:100%; height:100%}
.imprint-box>.column-title { left:50px; top:50px; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out}
.imprint-container .swiper-slide { position:relative; background:no-repeat center; background-size:100%; -webkit-transition:all 0.7s ease-out; transition:all 0.7s ease-out}
.imprint-container .swiper-pagination { left:50px; top:120px; bottom:auto; width:50%; line-height:2; text-align:left; font-size:14px; color:#fff; -webkit-transition:all 0.3s ease-out 0.2s; transition:all 0.3s ease-out 0.2s}
.imprint-container .swiper-pagination-bullet { opacity:1; border-radius:0; margin:0 10px 10px 0 !important; border:1px solid #fff; padding:0 10px; width:auto; height:auto; background:transparent}
.imprint-container .swiper-pagination-bullet-active { border-color:#0165e2; color:#0165e2; font-weight:bold}

.historical-box { margin:0 auto; position:absolute; z-index:100; left:50%; bottom:10px; margin-left:-520px; width:1040px; height: 166px; font-size:14px; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out}
.historical-box>.historical-bg { position:absolute; left:-50%; bottom:-10px; width:200%; height:371px; background:url(../images/historical-bg.png) repeat-x top; pointer-events:none}
.historical-box>.column-title { bottom:180px; left:0px}
.historical-box>.historical-line { position:absolute; top:33px; left:-30px; padding:0 30px; width:100%; height:5px; background:url(../images/historical-line.png) repeat-x center}
.historical-box>.historical-arrow { position:absolute; top:17px; width:34px; height:34px; background:no-repeat center}
.historical-box>.historical-arrow.prev { left:-40px; background-image:url(../images/historical-arrow-prev.png)}
.historical-box>.historical-arrow.next { right:-40px; background-image:url(../images/historical-arrow-next.png)}
.historical-container { margin-left:-5px; padding:0 5px; width: 100%; height: 100%}
.historical-container .swiper-slide {}
.historical-container .swiper-slide>.date { width:100%; text-align:center; color:#fff; font-weight:bold}
.historical-container .swiper-slide>.style { height:33px; background:url(../images/historical-style.png) no-repeat center; -webkit-transition:all 0.7s ease-out; transition:all 0.7s ease-out}
.historical-container .swiper-slide>.content { height:106px; border-top:1px solid #dcdcdc; color:#666; background:url(../images/historical-content.png) top center; overflow:hidden; -webkit-transition:all 0.7s; transition:all 0.7s}
.historical-container .swiper-slide>.content>.sub { padding:6px 5px 0; color:#fff; text-align:center; font-size:16px}
.historical-container .swiper-slide>.content>.text { padding:0 5px 5px}
.historical-container .swiper-slide>.content>.media { position:relative; cursor:pointer; overflow:hidden}
.historical-container .swiper-slide>.content>.media>img { display:block; width:100%}
.historical-container .swiper-slide>.content>.media:after { content:""; position:absolute; right:5px; bottom:5px; width:24px; height:15px; background:url(../images/historical-icon-video.png) no-repeat center}
.historical-container .swiper-slide>.content .btn-audio { display:inline-block; width:23px; height:21px; vertical-align:top; background:url(../images/historical-icon-audio.png) no-repeat center}
.historical-container .swiper-slide>.content .play { background-color:#e8505c; background-image:url(../images/historical-icon-audio-active.png) }
.historical-container .swiper-slide>.content .media[data-url=""] { cursor:default}
.historical-container .swiper-slide>.content .media[data-url=""]:after,
.historical-container .swiper-slide>.content>.media>img[src=""],
.historical-container .swiper-slide>.content .btn-audio[data-url=""] { display:none}

.historical-container .active>.date { color:#007ee8}
.historical-container .active>.style { background-image:url(../images/historical-style-active.png)}
.historical-container .active>.content { border-radius:10px; border-top-color:#0267e5; color:#fff; background-image:url(../images/historical-content-active.png)}
.historical-container .active>.content>.media { border-radius:10px}

@media screen and (min-width: 0px){
.imprint-box>.column-title,
.imprint-container .swiper-pagination,
.news-list { opacity:0; filter:alpha(opacity=0); left:0}
.imprint-container .swiper-slide { -webkit-background-size:110%}
.historical-box { opacity:0; filter:alpha(opacity=0); bottom:-300px}
}
.init .imprint-box>.column-title,
.init .imprint-container .swiper-pagination,
.init .news-list { opacity:1; filter:alpha(opacity=100); left:50px}
.init .imprint-container .swiper-slide { -webkit-background-size:100%}
.init .historical-box {opacity:1; filter:alpha(opacity=100); bottom:10px}