﻿
html, body {
    width: 100%;
    height: 100%;
    font-family: 'microsoft YaHei',sans-serif;
    color: #000;
    background-color: #ebebeb;
}
a{text-decoration:none; color:#ffffff; outline:none;}
ul li{
    list-style-type:none;
}
.clear{clear:both;}
.hide{display:none;}
.show{display:block;}

#wx {
    display: none;
    overflow: hidden;
    width: 0px;
    height:0px;
}
img {
	width:100%;border:none; outline:none;
}

.zoom-img,
.zoom-img-wrap {
  position: relative;
  z-index: 666;
  -webkit-transition: all 500ms;
       -o-transition: all 500ms;
          transition: all 500ms;
}
/*=== app-loader ===*/
#app-loader {
    position:absolute;
    display:none;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    background-size:cover;
    background-repeat:no-repeat;
}
.loader-icon {
    position: absolute;
    width: 499px;
    height: 142px;
    left: 50%;
    margin-left: -250px;
    top: 50%;
    margin-top: -70px;
}
.preload-percent{position:absolute; width:60px; height:20px; left:50%; margin-left:-20px; top:50%; margin-top:100px;}
.preload-percent.p3{display:none; width:90px; left:50%; margin-left:-30px;}
.preload-percent.p4{display:none; width:120px; left:50%; margin-left:-40px;}
.preload-percent span{display:block; width:30px; height:40px; float:left; margin-left:-8px;
background-size:cover; background-repeat:no-repeat; background-image:url("../images/numbers.png");}

/*=== app-navi ===*/
#app-navi {
  position: fixed;
  left:0;
  top:0;
  z-index:9999;
  height: 70px;
  width:100%;
  min-width:1024px;
  background: #FFF;
  box-shadow: 0 0 10px #666666;
}
#app-navi .logo {
  position: absolute;
  left: 10%;
  top: 15%;
  width: 10.4%;
}
#app-navi .navi-container {
  position: absolute;
    right: 3%;
    top: 5%;
    width: 67%;
    min-width: 900px;
    text-align: right;
}
#app-navi .navi-container .navi-items {
    display: inline-block;
    margin-right: 0px;
    transform: scale(0.8);
}
#app-navi .navi-container .navi-items:last-child {
  margin-right:0;
}
#app-navi .navi-container .navi-items  a {
  display: block;
  text-indent: -9999px;
  font-size:0;
  overflow: hidden;
  text-decoration: none;
  height:60px;
}
#app-navi .navi-container .navi-01 a {
  background: url(../images/navi_01.png) no-repeat;
  width:92px;
}
#app-navi .navi-container .navi-02 a {
  background: url(../images/navi_02.png) no-repeat;
  width:283px;
}
#app-navi .navi-container .navi-03 a {
  background: url(../images/navi_03.png) no-repeat;
  width:205px;
}
#app-navi .navi-container .navi-04 a {
  background: url(../images/navi_04.png) no-repeat;
  width:136px;
}
#app-navi .navi-container .navi-05 a {
  background: url(../images/navi_05.png) no-repeat;
  width:137px;
}
/*=== app-swiper ===*/
#app-swiper {
    display: none;
    position:relative;

}
.app-swiper-wrapper {
  width:100%;
  height: 100%;
  position: relative;
}
.swiper-slides .compose {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-slide {
    overflow: hidden;
}
.swiper-wrapper {
    position: relative;
}

/*=== app cover ===*/
#cover1 {
  position: relative;
  width:100%;
  height:100%;
}
#cover1 .title {
  position: absolute;
  left:50%;
  top:15%;
  margin-left:-15%;
  width:40%;
}

#cover2 {
  position:relative;
  width:100%;
  height:100%;
}
#cover2 .title {
  position: absolute;
  left: 50%;
  top: 9%;
  margin-left: -35%;
  width: 60%;
}
#cover2 .content {
  position: absolute;
  left: 50%;
  top: 29%;
  margin-left: -23%;
  width: 55%;
}
#cover2 .award {
position: absolute;
    right: 24%;
    top: 55%;
width: 100px;
    text-align: center;
}
#cover2 .award h1 {
    font-size: 50pt;
    font-family: 'microsoft YaHei',sans-serif;
}
#cover2 .prize {
position: absolute;
    right: 4%;
    top: 59%;
    width: 120px;
    text-align: center;
}
#cover2 .prize h5 {
font-family: 'microsoft YaHei',sans-serif;
    font-weight: bold;
    font-size: 23pt;
    width: 120px;
    color: #FFF;
    text-align: center;
}
#cover2 .counter {
  position: absolute;
  right: 4%;
  top: 37%;
  zoom:0.8;
}
#cover2 .digits {
  position: relative;
}
#cover2 .digits .cntDigit {
  display:none;
}
#cover2 .digits .cntDigit:nth-child(-n+3) {
  display:block;
}

#cover3 {
    position:relative;
    width:100%;
    height:100%;
}
#cover3 .ele01 {
position: absolute;
    left: 50%;
    top: 10%;
    margin-left: -34%;
    width: 35%;
}
#cover3 .ele02 {
position: absolute;
    left: 50%;
    top: -11%;
    margin-left: 2%;
    width: 45%;
}
#cover32 {
    position:relative;
    width:100%;
    height:100%;
}
#cover4 {
    position:relative;
    width:100%;
    height:100%;
}
#cover4 .ele01 {
position: absolute;
    left: 50%;
    top: 5%;
    margin-left: -30%;
    width: 65%;
}
#cover4 .ele02 {
position: absolute;
    left: 50%;
    top: 16%;
    margin-left: -30%;
    width: 55%;
}
#cover4 .ele03 {
position: absolute;
    left: 50%;
    top: 31%;
    margin-left: -30%;
    width: 55%;
}
#cover4 .ele04 {
position: absolute;
    left: 50%;
    top: 45%;
    margin-left: -30%;
    width: 55%;
}
#cover4 .ele05 {
position: absolute;
    left: 50%;
    top: 55%;
    margin-left: -10%;
    width: 35%;
}
#cover4 .car-title {
position: absolute;
    left: 50%;
    top: 66%;
    margin-left: -28%;
    width: 15%;
}
#cover4 .car-info {
  position: absolute;
  top: 5%;
  left: 50%;
  margin-left: -490px;
  width: 980px;
}
#cover4 .car-info-navi {}
#cover4 .car-info-navi ul {
    margin: 0;
    padding: 0;
}
#cover4 .car-info-navi ul li {
display: inline-block;
    padding: 0;
    margin: 0;
}
#cover4 .car-info-navi ul li a {
    background-color: #eaeaea;
    color: #000;
    padding: 10px 11px;
    line-height:35px;
    font-size: 15px;
    font-weight: bold;
}
#cover4 .car-info-navi ul li a.active {
  background-color: #f2c821;
  padding: 20px 12px 10px 12px;
}
.overlay-container {
  background: url("../images/zoom_bg.png");
  position: absolute;
  display: none;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
  filter: "alpha(opacity=0)";
  opacity: 0;
  z-index:199;
}
.zoom-overlay .overlay-container {
  filter: "alpha(opacity=100)";
  opacity: 1;
}

.footer {
  position: fixed;
  bottom: -370px;
  right:0;
  z-index:99;
  width:850px;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
}
.footer:hover, #footer-wrapper.on {
  bottom:0;
}
.footer .reserve-fields {
position: absolute;
    right: 7%;
    top: 28%;
    width: 33%;

}
.footer .fields {
  margin: 5px 0;
  color:#FFF;
}
.footer .fields .tips {
  font-size:12px;
}
.footer .fields:after {
  clear:both;
}
.footer .fields label {
float: left;
    color: #FFF;
    font-size: 15px;
    width: 39%;
    line-height: 30px;
}
.footer .fields .input {
    float: left;
    width: 60%;
  font-size: 15px;
    color: #FFF;
    font-weight: 700;
    line-height: 30px;
}
input, textarea, select {
    font-size: 17px;
    line-height: 30px;
    padding: 1px 0.5em;
    width: 100%;
    color: #000;
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
}

.input input[type=checkbox], .input input[type=radio] {
    width: 20%;
}

.btn-action {
  position: absolute;

}
.btn-action.btn-submit {
  left: 15%;
}
.btn-action.btn-reset {
  right: 15%;
}
.btn-action a {
  display:block;
  font-size: 0;
  margin: 0 auto;
  background-repeat: no-repeat;
}

.btn-submit a {
  width:108px;
  height:41px;
  background-image:url("../images/footer_btn01.png");
  zoom:0.8;
}
.btn-reset a {
  width:108px;
  height:41px;
  background-image:url("../images/footer_btn02.png");
  zoom:0.8;
}

.btn-action a.btn-confirm {
  background-image:url("../images/c4_btn01.png");
}
.btn-action a.btn-share {
  background-image:url("../images/c4_btn02.png");
}
.btn-action a.btn-replay {
  background-image:url("../images/c4_btn03.png");
}


.overlay-feed {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 299;
}

.car-info-container {
}
.car-table-detail {
height: 300px;
    overflow-y: auto;
}
.car-info-container .info-switcher {
  background-color: #FFF;
  padding:10px;
}

.car-info-container .info-switcher table {
    border-collapse: separate;
    border-spacing: 2px;
    empty-cells: show;
}

.car-info-container .info-switcher table tr {}
.car-info-container .info-switcher table th,
.car-info-container .info-switcher table td {
  font-size:14px;
  line-height:30px;
  font-weight: bold;
  height:30px;
}
.car-info-container .info-switcher table th.title-type {
  width:145px;
  background-color: #979a9f;
  color:#FFF;
  text-align: left:;
  padding-left: 20px;
}
.car-info-container .info-switcher table th.type1 {
  background-color: #333;
  color:#edc91b;
  width: 115px;
  text-align: center;
  height:30px;
  line-height:30px;
  font-weight: bold;
}

.car-info-container table td.detail-type,.car-info-container table td.detail-space {
  background-color: #f3c821;
  color:#333;
  width:141px;
  text-align: left;
  padding-left: 20px;
}
.car-info-container table td.detail-space {
  width:812px;
}

.car-info-container table td.detail-info {
  font-size:10px;
  color:#333;
  width:141px;
  background-color: #e1e2e6;
  padding-left:20px;
}
.car-info-container table td.detail-info-1,
.car-info-container table td.detail-info-2,
.car-info-container table td.detail-info-3,
.car-info-container table td.detail-info-4,
.car-info-container table td.detail-info-5,
.car-info-container table td.detail-info-6,
.car-info-container table td.detail-info-7 {
  text-align: center;
  padding:0;
}
.car-info-container table td.detail-info-1 {
  width: 112px;
}
.car-info-container table td.detail-info-2 {
  width: 230px;
}
.car-info-container table td.detail-info-3 {
  width: 350px;
}
.car-info-container table td.detail-info-4 {
  width: 475px;
}
.car-info-container table td.detail-info-5 {
  width: 530px;
}
.car-info-container table td.detail-info-6 {
  width:686px;
}
.car-info-container table td.detail-info-7 {
  width:812px;
}