html, body{height: 100%; width: 100%;}
body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei",sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    margin: 0; color: #fff;
    background-color: #333;
}
p,h1,h2 {margin: 0;}
ul,li{list-style: none;}
.show {display: block !important;}
.hide {display: none !important;}

#loading {
    position: fixed; width: 100%; height: 100%; z-index: 999;
    background: #333 url(loading.gif) no-repeat center 30%;
    -webkit-background-size: 50px;
    background-size: 50px;
}
#loading span {
    position: absolute; width: 100px; height: 30px; margin-left: -50px; left: 50%; bottom: 40px;
    background: transparent url(logo-paper.svg) no-repeat center center;
    -webkit-background-size: auto 30px;
    background-size: auto 30px;
}

/* main */
.mainwrap {width: 100%; height: 100%; position: relative; z-index: 100;}

#scroller{position: relative;}
.contentwrap {box-sizing: border-box; width: 100%; padding: 0 20px;}
.contentwrap h2,
.contentwrap h3 {margin: 20px auto 10px;}
.contentwrap p {
    font-size: 16px;
    line-height: 1.8em;
    color: #fff;
    margin: 0 auto 20px;
    text-align: justify;
}

/* nav */
.toplogo {z-index: 600; width: 200px; left: 20px; top:20px;}
.toplogo img {width: 100%; vertical-align: top;}
.btn-shownav {
  position: fixed; right: 20px; top:20px; z-index: 499;
  width: 30px; height: 30px;
  background: rgba(0,0,0,0.2) url(bg-menu.png) left top no-repeat;
  -webkit-background-size: auto 30px;
  background-size: auto 30px;
  border: 1px solid rgba(255,255,255,0.5);
}
#closeNav {
    float: right;
    margin: 20px 20px 50px 0;
    width: 30px; height: 30px;
    background: transparent url(bg-menu.png) -30px top no-repeat;
    -webkit-background-size: auto 30px;
    background-size: auto 30px;
}
.mainmenu {
    position: fixed; top: 0; left: 0; z-index: 500;
    width: 100%; height: 100%;
    background-color: rgba(170,146,108,1);
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
}
.mainmenu.active {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}
.mainmenu a {text-decoration: none;}

ul.nav {margin: 0; padding: 0;}

.nav li {
  clear: both;
  width: 100%; height: 84px; overflow: hidden;
  background: transparent url(../img/nav-bg.png) center 0 no-repeat;
  -webkit-background-size: 200px auto;
          background-size: 200px auto;
}
.nav li.current{background-position: center -86px;}
.nav li a {
  display: block;
  width: 100%; height: 84px; margin: 10px 0; overflow: hidden;
  background: transparent url(../img/nav.png) center 0 no-repeat;
  -webkit-background-size: 200px auto;
          background-size: 200px auto;
}
.nav li:nth-child(1) a {background-position: center 0; }
.nav li:nth-child(2) a {background-position: center -86px;}
.nav li:nth-child(3) a {background-position: center -168px;}
.nav li:nth-child(4) a {background-position: center -252px;}
.nav a span {display: block; text-indent: -200px;}

.soundbar {
    position: fixed; top:60px; right: 20px; z-index: 499;
    width: 32px; height: 32px;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    opacity: 0;
}
.soundbar.showsoundbar {
    opacity: 1;
}
.btn-soundon {
    float: left;
    width: 30px; height: 30px;
    background: transparent url(../img/bg-sound.png) left top no-repeat;
    -webkit-background-size: auto 30px;
    background-size: auto 30px;
    border: 1px solid rgba(255,255,255,0.5);
}
.btn-soundoff {
    float: left;
    width: 30px; height: 30px;
    background: transparent url(../img/bg-sound.png) right top no-repeat;
    -webkit-background-size: auto 30px;
    background-size: auto 30px;
    border: 1px solid rgba(255,255,255,0.5);
}

/* share btn */
.paper-share {margin-top: 20px; text-align: center;}
.paper-share a {
    display:inline-block;
    width: 30px;
    height: 30px;
    margin:0 10px 0 0;
    cursor:pointer;
}
.jiathis_button_tsina {background: url(paper-share.png) no-repeat 0 0; -webkit-background-size: 90px auto; background-size: 90px auto; }
.jiathis_button_cqq {background: url(paper-share.png) no-repeat -30px 0; -webkit-background-size: 90px auto; background-size: 90px auto; }

/* cover */
.cover, .bgimg, .bgwrap, .bgcover, .bgmap {
    position: fixed; top: 0; left: 0; overflow: hidden; z-index: 1;
    width: 100%; height: 100vh;
}
.bgimg {
    opacity: 0; z-index: 2;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
}
.c1 .bgimg, #bgc1map{background-image: url(../img/imgbg1.jpg);}
.c2 .bgimg, #bgc2map{background-image: url(../img/imgbg2.jpg);}
.c3 .bgimg, #bgc3map{background-image: url(../img/imgbg3.jpg);}
.c4 .bgimg {background-image: url(../img/imgbg4.jpg);}

.bgwrap {opacity: 0; z-index: 3;}
.bg-end {background-color: #999;}
.bgcover {
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
    z-index: 3;
    top:100vh;
}
.bgc1 {background-image: url(../img/c1.jpg);}

.bgmap {
    z-index: 4;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
    top:100vh;
}

/* .cover:before {
    content: '';
    display: block;
    padding-top: 178.8%;
} */
.c1 .cover {
  background:url(../img/cover1.jpg) 0 0;
  -webkit-background-size: 2500% 100vh;
  background-size: 2500% 100vh;
  animation: frame25 steps(25) 4s infinite both;
}
.c2 .cover{
  background:url(../img/cover2.jpg) 0 0;
  -webkit-background-size: 3000% 100vh;
  background-size: 3000% 100vh;
  animation: frame30 steps(30) 4s infinite both;
}
.c3 .cover{
  background:url(../img/cover3.jpg) 0 0;
  -webkit-background-size: 3000% 100vh;
  background-size: 3000% 100vh;
  animation: frame30 steps(30) 4s infinite both;
}
.c4 .cover{
  background:url(../img/cover4.jpg) 0 0;
  -webkit-background-size: 3000% 100vh;
  background-size: 3000% 100vh;
  animation: frame30 steps(30) 4s infinite both;
}

.top-logo-ford {width: 75%; padding: 20px 0 0 15px;}
.top-logo-ford img {width: 100%; vertical-align: top;}

.stopstep {
    -webkit-animation-play-state: paused !important;
            animation-play-state: paused !important;
}

.fullholder {width: 100%; height: 100vh;}

.poem p {text-align: center;}

.imgbox,
.imgboxfull {margin: 20px -20px;}

.imgbox img, .imgboxfull img {width: 100%; vertical-align: top;}
.imgbox p, .imgboxfull p {margin-top: 10px; color: #ccc; font-size: 14px;}
.imgbox p,
.imgboxfull p {padding: 0 20px; line-height: 1.4em;}

/* video */
.mediarow {margin: 30px -20px;}
.videobox {width: 100%; padding-bottom: 56.25%; position: relative; overflow: hidden;}
.playbtn {
    position: absolute; left: 0; top: 0; z-index: 20; cursor: pointer;
    width: 100%; height: 100%; background:transparent url(../assets/btnplay.png) no-repeat center center;  background-size: 50px;}
.playVideo .playbtn {display: none;}
.mediarow video {width: 100%; position: absolute;}
.mediarow p {color: #ccc; font-size: 14px; padding: 10px 20px 0;}

.nextpage {width: 100%; margin-top: 50px; padding-bottom: 20px; position: relative;}
.nextpage .adcar {
    position: absolute; left: 0; top: -30px;
    width: 72px; height: 30px;
    background:transparent url(../../img/thecar.png) no-repeat center center;
    -webkit-background-size: auto 30px;
    background-size: auto 30px;
    -webkit-transition: -webkit-transform 2s ease;
            transition: transform 2s ease;
    -webkit-transform: translate(0,0);
            transform: translate(0,0);
}
.nextpage a {text-decoration: none; display: block;}
.nextpage img {width: 100%; vertical-align: top;}

.contentwrap .mediadesc {
  margin-top: 10px;
  margin-bottom: 30px;
  color: #666;
  font-size: 14px;
}

.hxshuzi {
    width: 100%; height: 0; padding-bottom: 60%; position: relative; overflow: hidden;
    background: #a99371 url(../img/bg-card.png) 107% 115% no-repeat;
    border-radius: 6px; margin-bottom: 20px;
}

#maskMove {
  position: absolute; width: 94%; height: 100%; z-index: 20; top:100%;
  background-color: #a99371; left: 3%;
}
.hxshuzi span {
    position: absolute; left: 10px; top:20px; z-index: 1;
    font-size: 170px; line-height: 160px; color: #88775d;
    font-family: "Microsoft Yahei";
    font-weight: normal;
    letter-spacing: -20px;
}

.hxshuzi .textbox {
    position: absolute; right: 28px; top:20px; z-index: 2;
    width: 66%;
}
.hxshuzi .textbox h1 {
    float: left;
    color: #fff; font-size: 20px; border-top: 1px solid #fff; margin-bottom: 10px;
}
.hxshuzi .textbox p {
    clear: both;
    color: #fff; font-size: 15px; line-height: 1.5em;
}
.hxshuzi a {
  position: absolute; right: 20px; top:20px; z-index: 5;
  width: 52px; height: 29px;
  background: transparent url(../img/btn-refresh.png) 0 0 no-repeat;
  font-size: 0; color: transparent;
  text-decoration: none;
}

.cover .ctitle {width: 100%; text-align: center;}
.cover .hidetitle {
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    opacity: 0;
}
.c1 .cover .ctitle {width: 180px; text-align: center; position: absolute; left: 50%; margin-left: -90px;}
.c1 .cover .ctitle img {width: 60%; margin: 30% auto 0;}
.c2 .cover .ctitle img {width: 60%; margin: 80% auto 0;}
.c3 .cover .ctitle img {width: 60%; margin: 80% auto 0;}
.c4 .cover .ctitle img {width: 60%; margin: 10% auto 0;}

.fullgimg {width: 100%;}
.fullgimg img {width: 100%; vertical-align: top;}

.footer{
    margin:150px auto 0;
    padding-bottom: 30px;
    width: 100%;
    color:#333;
}
.footer h2{
  border-bottom: 1px solid rgba(0,0,0,.5);
  margin-bottom: 30px;
  font-size: 16px;
  text-align: center;
}
.footer h2 span {
    display: inline-block;
    background-color: #fff;
    padding: 2px 20px;
    position: relative;
    top: 10px;
}
.footer p {
    text-align: center;
}

/* endtext */
.endtitle {text-align: center; margin-top: 80px !important;}
.endtitle img {vertical-align: top; width: 36%;}
.endwrap {width: 100%;}
.endtext h3 {margin-bottom: 0;}
.endtext p {font-size: 14px;}
.endgallary {width: 100%;}

/* theChart */
.thechart {margin: 0 -20px; position: relative;}
.tips-move {
    position: absolute; width: 200px; height: 60px; z-index: 300;
    left: 50%; margin-left: -100px; top:100px;
    background: transparent url(../img/tips-move.png) left top no-repeat;
    -webkit-background-size: auto 60px;
    background-size: auto 60px;
    -webkit-animation: tipshake 2s alternate infinite ease-in-out;
    animation: tipshake 2s alternate infinite ease-in-out;
    opacity: 1;
    pointer-events: none;
}
.tipsmove-show {
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    opacity: 0;
}
.titleinfo {height: 32px; position: relative;}
.titleinfo h2 {position: absolute; left:50%; font-size: 12px;  margin:0 0 0 -50px; text-align: center;}
.titleinfo em {width: 100%; position: absolute; border-bottom: 1px solid rgba(255,255,255,0.5); top:13px;}
.titleinfo h2,
.titleinfo span {
    background-color: #333;
    padding: 2px 10px;
    border-radius: 20px;
}
.titleinfo .ntext {position: absolute; right: 5px; font-size: 12px; }
.titleinfo .stext {position: absolute; left: 5px; font-size: 12px; }

svg {vertical-align: top;}

.background {
  fill: none;
  pointer-events: all;
}

.axis path.domain {
    stroke:#000;
    stroke-width:1;
    fill:none;
}

.tick text {fill:none; font-size: 10px;}
.tick line {
    fill: none;
    stroke: #6a6a6a;
    shape-rendering: crispEdges;
}

#imgGrid {position: relative; width:100%; overflow: hidden;}
#imgGrid .grid {
    position: absolute; top:0; height: 100%;
    border-right: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none;  /*webkit浏览器*/
    -ms-user-select: none;   /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    font-size: 0;
}
#linechart {width: 100%;}
.area-haiba path {fill: rgba(255,255,255,0.3);}
.bar-renkou rect {fill:#fff;}
.bar-rain rect {fill:rgba(255,255,255,0.3);}

/* middle text */
.annotations {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
}
.annotations li {
    position: absolute;
    top: 10px;
    margin: 0;
    list-style-type: none;
    padding: 10px 0 0 0;
}
.annotation {
  position: relative;
  font-size: 10px;
  color: #fff;
  word-wrap: normal;
  word-break: keep-all;
}
.annotation-bar {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-bottom: solid 1px;
  border-right: solid 1px;
  border-left: solid 1px;
  border-color: #fff;
  height: 3px;
}

.tuli {text-align: center; width: 100%; padding-bottom: 20px;}
.tuli img {width: 80%; vertical-align: top;}

/* gallery */
.gwrap {overflow: hidden; position: relative;}
.contentwrap .gwrap {margin-left: -20px;}
.gimgbox {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    font-size: 0;
}
.slide {float: left;}
.slide img {width: 100%; vertical-align: top;}
.slide p {font-size: 14px; color: #999; line-height: 1.5em; padding:10px 20px 0; }
.endgallery .slide p {color: rgba(255,255,255,0.8);}
.slide p span {vertical-align: sub; font-size: 10px;}

#g1pos {
    position: relative; top:-90px;  z-index: 100;
    height: 4px; margin:0 -20px;
    background-color: rgba(255,255,255,0.2);
}
#dotty {
    position: absolute; height: 4px; min-width: 2px;
    background: #ab936d;
}

.btn-comment {
    position: fixed; z-index: 300; bottom:120px; right: 0;
    width: 60px; height: 50px;
    background: transparent url(../img/icon-comment.png) no-repeat center 30%;
    -webkit-background-size: 60px auto;
    background-size: 60px auto;
    -webkit-transform: translate(60px,0);
    transform: translate(60px,0);
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
}
.btn-comment.show-onside {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

/* maker */
.endc {
    margin: 0 -20px; height: 100vh;
    box-sizing: border-box;
    padding-top: 20px;
}
.endc h2 {
    padding-bottom: 10px;
    padding-left: 20px;
    background: transparent url(../img/bg-endt.png) no-repeat 20px bottom;
    -webkit-background-size: 250px auto;
    background-size: 250px auto;
}
.endc h2 a {color: #fff; text-decoration: none;}
.maker {color: rgba(255,255,255,0.5); font-size: 12px; margin: 0; padding: 20px 0 30px 20px;}
.maker li {clear: both; line-height: 18px;}
.maker li span {float: left; width: 68px;}
.maker li em {float: left; overflow: hidden; font-style: normal;}
.maker li i {border: 1px solid rgba(255,255,255,0.5); font-style: normal;}
.zanzhu {height: 50px; clear: both; padding-top: 30px;}
.zanzhu p {text-align: center; font-size: 14px;}
.zanzhu p img {display: inline-block; vertical-align:middle; margin-left: 10px;}

@keyframes frame25{
  to{background-position: -2500% 0;}
}
@keyframes frame30{
  to{background-position: -3000% 0;}
}

@-webkit-keyframes tipshake{
    0% {-webkit-transform : translateX(0); }
    50% {-webkit-transform : translateX(-5px); }
    100% {-webkit-transform : translateX(0px); }
}
@keyframes tipshake{
    0% {transform : translateX(0);  }
    50% {transform : translateX(-5px);}
    100% {transform : translateX(0px);}
}