@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
}

body {
  background: #000;
  text-align: center;
  font-family: "黑体", Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0
}

#main {
  width: 100%;
  height: 100%
}

body {
  color: #dddad0;
}

#main .device_btn_group {
  padding-top: 20px;
  height: 320px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

#main .device_btn_group .btn {
  padding-top: 20px;
}

@media (max-width: 480px) {
  #main .device_btn_group {
    height: 280px;
  }

  #main .device_btn_group img {
    width: 100%;
    max-width: 310px;
  }
}

@media (min-width: 768px) {
  #main .device_btn_group {
    height: 170px;
  }

  #main .device_btn_group img {
    width: 100%;
    max-width: 310px;
  }
}

#main {
  max-width: 1170px;
  margin: 0 auto;
  background-image: url("../images/bg_install.png");
  background-size: cover;
  background-repeat: no-repeat
}

#main.mobile {
  background-image: none !important;
  background-color: #000
}

.no-padding {
  padding: 0
}

.mobile .header, .mobile .footer {
  width: 100%;
  position: fixed;
  left: 0;
  background-color: #000;
  z-index: 9999
}

.mobile .header {
  top: 0;
  height: 145px
}

@media (max-width: 480px) {
  .mobile .header {
    height: 80px
  }
}

.mobile .footer {
  padding-top: 20px;
  bottom: 0;
  height: 105px;
  background-image: url("../images/dot.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 5px
}

@media (min-width: 768px) {
  .mobile .footer {
    background-size: auto
  }
}

@media (max-width: 480px) {
  .mobile .footer {
    height: 70px
  }

  .mobile .footer .btn {
    width: 100%;
    max-width: 180px;
  }
}

.mobile .content-holder {
  padding-top: 145px;
  padding-bottom: 105px;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("../images/line_light.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 145px;
  overflow: hidden
}

@media (min-width: 768px) {
  .mobile .content-holder {
    background-size: auto
  }
}

@media (max-width: 480px) {
  .mobile .content-holder {
    padding-top: 80px;
    padding-bottom: 70px;
    background-position-y: 80px
  }
}

.mobile .content {
  max-width: 680px;
  margin: 0 auto;
  padding: 15px;
  height: 100%
}

.mobile .content .step {
  height: 100%
}

.mobile .content .step img {
  margin: 0 auto;
  border: 1px solid #a19567
}

.mobile .content .image-holder {
  height: 100%
}

.mobile .content .carousel-inner > .item {
  height: 100%
}

.mobile .content .carousel-inner > .item img {
  height: 100%;
  margin: 0 auto
}

.mobile .content .carousel-indicators {
  width: 100%;
  margin-left: -50%;
  bottom: -30px
}

.mobile .content .carousel-indicators li {
  width: 8px;
  height: 8px;
  border-color: #FFE68D;
}

.mobile .content .carousel-indicators .active {
  width: 10px;
  height: 10px;
  background-color: #FFE68D;
}

.mobile .tab {
  padding-top: 27px;
  max-width: 630px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .mobile .tab {
    padding-top: 0;
  }

  .mobile .tab .tab-btn {
    margin-right: -4px;
    max-width: 120px !important;
  }

  .mobile .title img {
    max-width: 160px;
  }
}

.mobile .tab .tab-btn {
  max-width: 160px
}

.mobile .title p {
  color: #ccbc8c;
  line-height: 1.3;
  margin: 0
}

.mobile .title p.large {
  font-size: 25px
}

.mobile .title p.small {
  font-size: 18px
}

@media (max-width: 480px) {
  .mobile .title p.large {
    font-size: 14px
  }

  .mobile .title p.small {
    font-size: 12px
  }
}

.mobile .title img {
  margin: 10px auto
}

.mobile .install {
  display: inline-block
}

.carousel-control {
  z-index: 99;
  color: #ccbc8c
}

.carousel-control:hover {
  color: #ccbc8c
}