@charset "UTF-8";

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  font: 0/0 a;
}

.clearfix:after {
  clear: both;
}

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.box.full_width {
  width: 100%;
}

.box.orient_vertical {
  box-orient: vertical;
  -webkit-box-orient: vertical;
}

.box.pack_start {
  -webkit-box-pack: start;
  box-pack: start;
}

.box.pack_end {
  -webkit-box-pack: end;
  box-pack: end;
}

.box.pack_center {
  -webkit-box-pack: center;
  box-pack: center;
}

.box.pack_justify {
  -webkit-box-pack: justify;
  box-pack: justify;
}

.box.align_start {
  -webkit-box-align: start;
  box-align: start;
}

.box.align_center {
  -webkit-box-align: center;
  box-align: center;
}

.box.align_end {
  -webkit-box-align: end;
  box-align: end;
}

.box.vertical {
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

* {
  padding: 0;
  margin: 0;
  font-family: "Open Sans","Arial","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","STHeiti","WenQuanYi Micro Hei","SimSun",sans-serif;
  font-size: .16px;
  line-height: 16px;
}

a {
  text-decoration: none;
}

html {
  height: 100%;
}

body {
  background: #f1f1f1;
  position: relative;
  min-height: 100%;
  min-width: 320px;
  opacity: 0;
  filter: alpha(opacity=0);
}

.container {
  width: 1193px;
  height: auto;
  margin: 0 auto;
}

.header {
  background: #282828;
  height: 115px;
}

.header .logo,
.header .name {
  float: left;
}

.header .share,
.header .collection,
.header .qr-code-icon {
  float: right;
}

.header .logo {
  height: 100%;
  width: auto;
  margin-left: 10px;
}

.header .logo i {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  height: 115px;
}

.header .logo img {
  vertical-align: middle;
  height: 65px;
}

.header .middler {
  width: 0;
  overflow: hidden;
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}

.header .name {
  margin-left: 28px;
  height: 115px;
  line-height: 115px;
  color: #ffffff;
  font-size: 28px;
}

.header .share .middler,
.header .collection .middler,
.header .qr-code-icon .middler {
  height: 115px;
}

.header .share .icon,
.header .collection .icon,
.header .qr-code-icon .icon {
  cursor: pointer;
  width: 45px;
  height: 45px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 55px;
  line-height: 115px;
  display: inline-block;
  vertical-align: middle;
}

.header .share {
  position: relative;
}

.header .share .icon {
  background-image: url(/images/share-icon.png?112b0bcde8f4e0572dc7db06f1767767);
}

.header .share .share-block {
  display: none;
  width: 45px;
  position: absolute;
  left: 2px;
  top: 85px;
  z-index: 999;
}

.header .share .share-block .social-share-icon {
  width: 45px;
  height: 45px;
  line-height: 45px;
  margin-left: 0;
  background: #fff;
}

.header .share .share-block .social-share-icon:hover {
  color: red;
  border-color: red;
}

.header .collection .icon {
  background-image: url(/images/collection-icon.png?097d96811fd8b92169f8356160709449);
}

.header .qr-code-icon .icon {
  background-image: url(/images/qrcode-icon.png?39ffdb677a7c0b5e86369ff268f22386);
}

.header .qr-code-icon .icon .social-share .icon-wechat {
  background: none;
  border: none;
}

.header .qr-code-icon .icon .social-share .icon-wechat:before {
  content: '';
}

.header .qr-code-icon .icon .social-share .icon-wechat .wechat-qrcode {
  top: 46px;
  z-index: 1000;
}

.header .qr-code-icon .icon .social-share .icon-wechat .wechat-qrcode:after {
  top: -15px;
  border-color: transparent transparent #f3f3f3 transparent;
}

.footer-padder {
  height: 46px;
}

.footer {
  position: absolute;
  width: 100%;
  height: 46px;
  background: #282828;
  left: 0;
  bottom: 0;
  text-align: center;
}

.footer span {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.footer span,
.footer a {
  line-height: 46px;
  font-size: 17px;
  color: #fff;
}

.footer a:hover {
  text-decoration: underline;
}

.footer .deliver {
  margin-left: 10px;
  margin-right: 10px;
}

.brands {
  height: auto;
  margin-top: 113px;
}

.brands.pc {
  display: block;
}

.brands.mobile {
  display: none;
}

.brands .line {
  background: url(/images/table.png?a7f951870c7e37b587b1dd253cf97918);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center 234px;
  width: 1066px;
  height: 378px;
  padding-left: 127px;
}

.brands .line:before,
.brands .line:after {
  content: "";
  display: table;
  font: 0/0 a;
}

.brands .line:after {
  clear: both;
}

.brands .line .item {
  float: left;
  width: 193px;
  height: 378px;
  margin-right: 54px;
}

.brands .line .item .title {
  width: 100%;
  margin-bottom: 33px;
  line-height: normal;
  font-size: 20px;
  height: 22px;
  color: #717171;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.brands .line .item .title a {
  font-size: 20px;
  color: #717171;
}

.brands .line .item .image-container {
  width: 100%;
  height: 193px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  text-align: center;
}

.brands .line .item .image-container .image {
  display: block;
  height: 186px;
  width: 184px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.brands .line .item .image-container .resize-box {
  display: inline-block;
  margin: 0 auto;
  position: relative;
}

.brands .line .item .image-container .resize-box img {
  display: none;
}

.brands .line .item .image-container .resize-box .book-border-container {
  z-index: 3;
  top: 0px;
  position: absolute;
  height: 100%;
  width: 6px;
  right: -6px;
  -webkit-transform: skewY(15deg);
          transform: skewY(15deg);
  overflow: hidden;
}

.brands .line .item .image-container .resize-box .book-border-container .shorter {
  background: url(/images/book-dark-middle.png?2782365efe5af87bcbd2e166101b29ff) repeat-y;
  background-size: 100% auto;
  width: 100%;
  z-index: 2;
  height: 100%;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: skewY(-30deg) translateY(-2px);
          transform: skewY(-30deg) translateY(-2px);
}

.tongji {
  opacity: 0;
  filter: alpha(opacity=0);
}

@media screen and (max-width: 750px) {
  .container {
    width: 100%;
  }

  .header {
    height: .98rem;
  }

  .header .logo {
    height: 100%;
    width: auto;
    margin-left: .40rem;
  }

  .header .logo i {
    height: .98rem;
  }

  .header .logo img {
    height: .53rem;
  }

  .header .name {
    max-width: 3.35rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: .25rem;
    height: .98rem;
    line-height: .98rem;
    font-size: .24rem;
  }

  .header .share .middler,
  .header .collection .middler {
    height: .98rem;
  }

  .header .share .icon,
  .header .collection .icon {
    width: .40rem;
    height: .40rem;
    margin-right: .40rem;
    line-height: .98rem;
  }

  .header .share .share-block,
  .header .collection .share-block {
    width: .40rem;
    left: .02rem;
    top: .85rem;
  }

  .header .share .share-block .social-share-icon,
  .header .collection .share-block .social-share-icon {
    width: .40rem;
    height: .40rem;
    line-height: .40rem;
    font-size: .18rem;
  }

  .header .share .share-block .icon-wechat,
  .header .collection .share-block .icon-wechat {
    display: none;
  }

  .header .qr-code-icon {
    display: none;
  }

  .footer-padder {
    height: .4rem;
  }

  .footer {
    height: .4rem;
  }

  .footer span,
  .footer a {
    line-height: .4rem;
    font-size: .14rem;
  }

  .footer .deliver {
    margin-left: .1rem;
    margin-right: .1rem;
  }

  .brands {
    margin-top: .6rem;
  }

  .brands.pc {
    display: none;
  }

  .brands.mobile {
    display: block;
  }

  .brands .line {
    background-size: 100% auto;
    width: 5.84rem;
    margin: 0 auto;
    height: 3.42rem;
    padding-left: .89rem;
    background-position: center 2.47rem;
  }

  .brands .line .item {
    width: 1.93rem;
    height: 2.82rem;
    margin-right: 1rem;
  }

  .brands .line .item:nth-child(2n) {
    margin-right: 0;
  }

  .brands .line .item .title {
    width: 100%;
    margin-bottom: .20rem;
    font-size: .20rem;
    line-height: normal;
    height: .40rem;
  }

  .brands .line .item .title a {
    font-size: .20rem;
  }

  .brands .line .item .image-container {
    width: 1.93rem;
    height: 1.93rem;
  }

  .brands .line .item .image-container .image {
    height: 1.87rem;
    width: 1.84rem;
  }

  .brands .line .item .image-container .resize-box {
    display: inline-block;
    margin: 0 auto;
    position: relative;
  }

  .brands .line .item .image-container .resize-box img {
    display: none;
  }

  .brands .line .item .image-container .resize-box .book-border-container {
    top: 0px;
    height: 100%;
    width: .06rem;
    right: -.06rem;
    -webkit-transform: skewY(15deg);
            transform: skewY(15deg);
  }

  .brands .line .item .image-container .resize-box .book-border-container .shorter {
    width: 100%;
    z-index: 2;
    height: 100%;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: skewY(-30deg) translateY(-0.02rem);
            transform: skewY(-30deg) translateY(-0.02rem);
  }
}