html,
body {
  background-color: #f0f0ed;
  height: 100%;
  margin: 0; }

body,
textarea,
input,
select {
  margin: 0;
  padding: 0;
  color: #444444;
  font-size: 14px;
  line-height: 1.8;
  font-weight: normal;
  font-family: 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;
  -webkit-font-smoothing: antialiased; }

a {
  color: #663a9e;
  text-decoration: none;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease; }

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; }

img {
  border: none; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0; }

header,
.wrap,
footer {
  width: 1200px;
  margin: 0 auto; }

.wrap {
  _overflow: hidden; }

.hidden {
  display: none; }

.avatar-tiny {
  width: 24px;
  height: 24px;
  border-radius: 1px;
  float: left; }

.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    display: table;
    content: ""; }
  .clearfix:after {
    clear: both; }

.left {
  float: left; }

.right {
  float: right; }

.bull {
  margin: 0 3px;
  color: #777777; }

.gradient {
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease; }

.base-button {
  line-height: 42px;
  height: 42px;
  padding: 0 15px;
  font-weight: bold;
  border-radius: 3px;
  display: inline-block;
  font-size: 16px;
  text-align: center; }
  .base-button.big {
    font-size: 18px;
    line-height: 50px;
    height: 50px;
    padding: 0 20px; }
  .base-button.green {
    color: white;
    background-color: #39b26c; }
  .base-button.yellow {
    color: black;
    background-color: #f4d053; }
  .base-button.white {
    color: black;
    background-color: white; }
  .base-button.blue {
    color: white;
    background-color: #3494de; }
  .base-button.red {
    color: white;
    background-color: #db4b3c; }

.base-input {
  background-color: white;
  border-radius: 3px;
  border: 1px solid #d6d6d4;
  color: #555555;
  font-size: 16px;
  line-height: 22px;
  padding: 9px 20px;
  width: 200px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box; }
  .base-input:focus {
    outline: none;
    border: 1px solid #777777; }

.select-wrapper {
  position: relative; }
  .select-wrapper .arrow {
    _color: white;
    _line-height: 0;
    font-size: 0;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    border-width: 5px;
    display: inline-block;
    border-top-color: #a3a3a2;
    position: absolute;
    right: 18px;
    top: 19px; }

.avatar-small {
  width: 30px;
  height: 30px;
  float: left; }

.top-header {
  color: #777777;
  background-color: white;
  height: 40px; }
  .top-header .top-profile {
    position: relative;
    z-index: 10; }
    .top-header .top-profile:hover .profile-dropdown {
      visibility: visible;
      margin-top: 0;
      z-index: 999;
      opacity: 1; }
    .top-header .top-profile .profile-link {
      float: left;
      color: #777777;
      margin-left: -15px; }
    .top-header .top-profile .avatar-tiny {
      margin: 8px 8px 0 12px;
      _margin: -4px 8px 0 12px; }
    .top-header .top-profile .arrow {
      _color: white;
      _line-height: 0;
      font-size: 0;
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      pointer-events: none;
      border-width: 5px;
      display: inline-block;
      border-top-color: #a3a3a2;
      margin-left: 1px;
      vertical-align: -3px; }
  .top-header .top-dm-link {
    color: #777777; }
  .top-header .num {
    height: 16px;
    line-height: 16px;
    background-color: #39b26c;
    color: white;
    width: 17px;
    text-align: center;
    display: inline-block;
    border-radius: 2px;
    font-size: 12px;
    vertical-align: 1px;
    position: relative;
    margin-left: 5px; }
    .top-header .num:before {
      left: 0;
      top: 50%;
      margin-top: -3px;
      margin-left: -6px;
      position: absolute;
      _color: white;
      _line-height: 0;
      font-size: 0;
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      pointer-events: none;
      border-width: 3px;
      display: inline-block;
      border-right-color: #39b26c; }
  .top-header .top-social .icon {
    vertical-align: -4px;
    margin-right: 2px; }
  .top-header .t-wechat {
    color: #59a72a;
    margin-left: 6px; }
      .top-header .t-wechat .extra {
        visibility: hidden;
        position: absolute;
        top: 40px;
        padding:20px;
        background-color: #fff;
        z-index: 999;
        -webkit-transition: all 0.15s ease;
        transition: all 0.15s ease; }
      .top-header .t-wechat:hover .extra,.top-header .t-wechat:active .extra,.top-header .t-wechat:focus .extra{
        visibility: visible;
        opacity: 1;
        top:50px; }
  .top-header .sina-weibo {
    color: #df5d4f;
    margin-left: 6px; }
  .top-header .twitter {
    color: #489ee1;
    margin-left: 6px; }
  .top-header .top-broadcast .grey-text {
    color: #777777; }
  .top-header .top-broadcast .icon-arrow-right {
    margin-left: 4px;
    vertical-align: 0; }
  .top-header li {
    float: left;
    line-height: 40px;
    position: relative; }
    .top-header li .top-item-inner {
      height: 40px;
      display: inline-block;
      padding-left: 15px;
      padding-right: 15px;
      _padding-top: 12px;
      _height: 28px; }
  .top-header .header-vertical-sep {
    height: 14px;
    line-height: 0;
    width: 0;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 13px;
    border-right: 1px solid #dedede; }

.profile-dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 44px;
  background-color: white;
  width: 130px;
  z-index: 10;
  margin-top: -10px;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease; }
  .profile-dropdown .profile-dd-item {
    display: block;
    line-height: 36px; }
  .profile-dropdown .profile-dd-link {
    color: #555555;
    float: left;
    width: 110px;
    padding-left: 20px; }
    .profile-dropdown .profile-dd-link:hover {
      background-color: #7645b8;
      color: white; }

.global-search {
  position: relative; }
  .global-search .search-input {
    line-height: 16px;
    padding: 12px 16px;
    height: 16px;
    border: none;
    outline: none;
    border-left: 1px solid #dedede;
    width: 152px;
    float: left; }
  .global-search .submit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px; }
    .global-search .submit .icon-search {
      vertical-align: -9px;
      margin-left: 13px; }

.top-nav {
  color: white;
  margin-top: 20px;
  background-color: #7645b8;
  position: relative;
  z-index: 9; }
  .top-nav .logo {
    float: left;
    width: 237px;
    height: 60px;
    position: relative;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease; }
    .top-nav .logo .icon {
      position: absolute;
      top: 12px;
      left: 12px; }
    .top-nav .logo:hover {
      background-color: #663a9e; }
  .top-nav .main-nav { }
    .top-nav .main-nav h2:hover .mn-link {
      background-color: #663a9e; }
    .top-nav .main-nav h2:hover .mn-sub-menu {
      visibility: visible;
      opacity: 1;
      margin-top: 0; }
  .top-nav li {
    float: left; }
  .top-nav .monthly { float: right;}
  .top-nav .mn-link {
    color: white;
    height: 60px;
    line-height: 60px;
    width: 90px;
    text-align: center;
    display: inline-block;
    background-color: #7645b8;
    position: relative; }
    .top-nav .mn-link .icon-current-label {
      display: none;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -5px;
      _font-size: 0; }
    .top-nav .mn-link.current .icon-current-label {
      display: block; }
  .top-nav .mn-sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    _width: 1200px;
    height: 100%;
    background-color: #663a9e;
    margin-top: -10px;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease; }
    .top-nav .mn-sub-menu > li:first-child {
      margin-left: 15px; }
    .top-nav .mn-sub-menu:hover {
      visibility: visible; }
  .top-nav .mn-sub-menu-link {
    color: #ecdeff;
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    display: inline-block;
    background-color: #663a9e;
    font-size: 16px; }
    .top-nav .mn-sub-menu-link:hover {
      color: white; }
  .top-nav h2 {
    font-size: 18px; }

.monthly {
  position: relative;
  width: 380px;
  height: 60px;
  margin-left: 13px; }
  .monthly .monthly-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    _height: 60px;
    background-color: #39b26c; }
    .monthly .monthly-wrap:hover .free-reading {
      visibility: hidden;
      opacity: 0; }
    .monthly .monthly-wrap:hover .extra {
      visibility: visible;
      opacity: 1;
      top: 50px; }
    .monthly .monthly-wrap:hover .issue-cover-wrap {
      width: 118px;
      height: 160px; }
  .monthly .icon-monthly {
    position: absolute;
    top: 18px;
    left: 25px; }
  .monthly .extra {
    visibility: hidden;
    position: absolute;
    background-color: #39b26c;
    width: 100%;
    top: 40px;
    opacity: 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease; }
    .monthly .extra h3,
    .monthly .extra p {
      text-indent: 25px; }
    .monthly .extra h3 {
      color: #444444;
      font-size: 16px; }
    .monthly .extra .date {
      font-size: 13px;
      margin: 1px 0 15px;
      border-bottom: 1px solid #29804d;
      padding-bottom: 13px; }
    .monthly .extra .btn-wrap {
      margin: 18px 25px 25px; }
      .monthly .extra .btn-wrap .btn {
        float: left; }
  .monthly .btn {
    height: 32px;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    font-weight: bold; }
  .monthly .free-reading {
    visibility: visible;
    border-radius: 16px;
    width: 96px;
    color: #444444;
    background-color: #f4d053;
    position: absolute;
    top: 14px;
    left: 196px;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    opacity: 1; }
  .monthly .read-online {
    border-radius: 16px;
    width: 96px;
    color: #444444;
    background-color: #f4d053;
    margin-right: 10px; }
  .monthly .download-pdf {
    border-radius: 16px;
    width: 102px;
    color: #444444;
    background-color: white;
    margin-right: 10px; }
  .monthly .previous-issues {
    border-radius: 16px;
    width: 112px;
    color: #39b26c;
    background-color: #29804d; }
    .monthly .previous-issues .arrow {
      _color: white;
      _line-height: 0;
      font-size: 0;
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      pointer-events: none;
      border-width: 5px;
      display: inline-block;
      border-top-color: #39b26c;
      margin-left: 6px;
      vertical-align: -2px; }
  .monthly .download-app {
    color: #444444;
    background-color: white;
    width: 100%;
    margin-top: 18px;
    border-radius: 3px;
    height: 36px;
    line-height: 36px; }
    .monthly .download-app .icon-cellphone {
      vertical-align: -2px;
      margin-right: 5px; }
  .monthly .issue-cover-wrap {
    width: 37px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    border: 5px solid #29804d;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease; }
    .monthly .issue-cover-wrap .issue-num {
      background-color: #f4d053;
      color: #444444;
      font-size: 16px;
      font-weight: bold;
      height: 28px;
      line-height: 28px;
      border-radius: 14px;
      position: absolute;
      top: -14px;
      right: -18px;
      padding: 0 5px; }
    .monthly .issue-cover-wrap .cover-img {
      position: absolute;
      width: 100%;
      height: 100%; }

.top-ads {
  margin-top: 20px; }
  .top-ads .ad-item {
    height: 90px;
    display: inline-block;
    background-color: #d6d6d4;
    float: left; }
  .top-ads .ad-1 {
    width: 330px;
    margin-right: 20px; }
  .top-ads .ad-2 {
    width: 500px;
    margin-right: 20px; }
  .top-ads .ad-3 {
    width: 330px; }
.top-aaa {
  margin-top: 20px; }
  .top-aaa .aaa-item {
    height: 90px;
    display: inline-block;
    background-color: #d6d6d4;
    float: left; }
  .top-aaa .aaa-1 {
    width: 330px;
    margin-right: 20px; }
  .top-aaa .aaa-2 {
    width: 500px;
    margin-right: 20px; }
  .top-aaa .aaa-3 {
    width: 330px; }
.mid-ads {
  margin-top: 20px; }
  .mid-ads .ad-item {
    height: 90px;
    width: 590px;
    display: inline-block;
    background-color: #ddd; }
  .mid-ads .ad-1 {
    float: left; }
  .mid-ads .ad-2 {
    float: right; }
.mid-aaa {
  margin-top: 20px; }
  .mid-aaa .aaa-item {
    height: 90px;
    width: 590px;
    display: inline-block;
    background-color: #ddd; }
  .mid-aaa .aaa-1 {
    float: left; }
  .mid-aaa .aaa-2 {
    float: right; }

.feature-article {
  float: left;
  display: block;
  height: 250px;
  position: relative; }
  .feature-article .content {
    position: relative;
    z-index: 1;
    color: white;
    height: 100%; }
  .feature-article .content-inner {
    position: absolute;
    bottom: 25px;
    left: 30px;
    right: 30px; }
  .feature-article .title {
    font-size: 24px;
    line-height: 1.3;
    _background-color: #333; }
  .feature-article .topic {
    margin-bottom: 4px;
    display: inline-block; }
  .feature-article .gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.15);
    background-image: url(../img/feature_bg_250.png);
    _background-image: none;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0) 15%), to(rgba(0, 0, 0, 0.8) 100%));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.8) 100%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.8) 100%);
    background-repeat: repeat-x;
    background-color: rgba(0, 0, 0, 0); }
  .feature-article.two-piece {
    width: 50%; }
  .feature-article.three-piece {
    width: 33.33%; }
  .feature-article.five-piece {
    width: 240px;
    height: 180px; }
    .feature-article.five-piece .title {
      font-size: 18px;
      line-height: 1.5; }
    .feature-article.five-piece .gradient {
      background-image: url(../img/feature_bg_180.png);
      _background-image: none;
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0) 15%), to(rgba(0, 0, 0, 0.8) 100%));
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.8) 100%);
      background-image: linear-gradient(top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.8) 100%);
      background-repeat: repeat-x; }
  .feature-article .title-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .feature-article:hover .gradient {
    box-shadow: inset 0 0 30px rgba(98, 57, 153, 0.15);
    background-image: url(../img/feature_bg_250_hover.png);
    _background-image: none;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0) 15%), to(rgba(98, 57, 153, 0.7) 100%));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 15%, rgba(98, 57, 153, 0.7) 100%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0) 15%, rgba(98, 57, 153, 0.7) 100%);
    background-repeat: repeat-x;
    background-color: rgba(98, 57, 153, 0.3); }
  .feature-article.live-section {
    width: 440px;
    height: 500px; }
    .feature-article.live-section .title {
      margin-bottom: 15px; }
      .feature-article.live-section .title a {
        color: white; }
    .feature-article.live-section .live-page-link {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }
    .feature-article.live-section .live-news-item {
      margin-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .feature-article.live-section .live-news-link {
      color: white; }

.feature-articles-wrap {
  width: 760px;
  float: left; }
  .feature-articles-wrap .title {
    font-size: 18px;
    line-height: 1.5; }

.section-title {
  border-bottom: 2px solid #d6d6d4;
  margin-top: 20px;
  margin-bottom: -12px; }
  .section-title.news-title h2 {
    border-bottom-color: #7645b8; }
  .section-title.techniques-title h2 {
    border-bottom-color: #dd9c10; }
  .section-title.trade-title h2 {
    border-bottom-color: #db4b3c; }
  .section-title.price-comparison-title h2 {
    border-bottom-color: #3494de; }
  .section-title.free-apps-title h2 {
    border-bottom-color: #db3cd2; }
  .section-title.q-and-a-title h2 {
    border-bottom-color: #37cdaf; }
  .section-title.studios-title h2 {
    border-bottom-color: #eb772a; }
  .section-title h2 {
    font-size: 18px;
    float: left;
    padding-bottom: 5px;
    border-bottom: 2px solid;
    margin-bottom: -2px; }
  .section-title .more {
    color: #fff;
    background: #7645b8;
    float: right;
    margin-top: 3px;
    padding: 0 12px;
    border-radius: 50px;
  }
  .section-title .more:hover {
    background: #663a9e;
  }

.news_row {
  margin-top: 20px;
  margin-right: -20px; }

.index-base-item {
  position: relative;
  float: left;
  overflow: hidden; }
  .index-base-item .title {
    color: #444444; }
  .index-base-item:hover .title {
    color: #663a9e; }

.feature-news {
  display: inline-block;
  width: 285px;
  height: 390px;
  float: left;
  background-color: white;
  position: relative;
  margin-right: 20px; }
  .feature-news.ad .cover-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: cover;
    background-position: center; }
  .feature-news.ad .ad-indicator {
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    background-color: #7645b8;
    padding: 0 4px; }
  .feature-news .text-gradient {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../img/text_gradient_50.png);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0) 0%), to(white 75%));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 75%);
    background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 75%);
    background-repeat: repeat-x; }
  .feature-news .gradient {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.15);
    background-image: url(../img/item_bg_170.png);
    _background-image: none;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0) 35%), to(rgba(0, 0, 0, 0.8) 100%));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.8) 100%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.8) 100%);
    background-repeat: repeat-x;
    background-color: rgba(0, 0, 0, 0); }
  .feature-news .title-image-wrap {
    position: relative;
    height: 32px;
    padding-top: 138px; }
  .feature-news .time,
  .feature-news .comment {
    position: relative;
    z-index: 1;
    color: white; }
.time {
font-size: 13px;
font-style: normal;
color: #BBB;
display: inline-block;
}
  .feature-news .time {
    margin-left: 22px; }
  .feature-news .comment {
    margin-right: 22px; }
  .feature-news .title-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .feature-news .gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
  .feature-news .content {
    color: #444444;
    padding: 15px 22px 0;
    overflow: hidden;
    height: 205px; }
  .feature-news .title {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 6px; }
  .feature-news .summary {
    font-size: 16px;
    color: #777777; }
  .feature-news:hover h3 {
    color: #663a9e; }
  .feature-news:hover .gradient {
    box-shadow: inset 0 0 30px rgba(98, 57, 153, 0.15);
    background-image: url(../img/item_bg_170_hover.png);
    _background-image: none;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0) 30%), to(rgba(118, 69, 184, 0.6) 100%));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(118, 69, 184, 0.6) 100%);
    background-image: linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(118, 69, 184, 0.6) 100%);
    background-repeat: repeat-x;
    background-color: rgba(118, 69, 184, 0.5); }

.article-item .title,
.price-comparision-item .title,
.app-item .title,
.studio-item .title,
.question-item .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
.article-item .gradient,
.price-comparision-item .gradient,
.app-item .gradient,
.studio-item .gradient,
.question-item .gradient {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0; }
.article-item:hover .gradient,
.price-comparision-item:hover .gradient,
.app-item:hover .gradient,
.studio-item:hover .gradient,
.question-item:hover .gradient {
  box-shadow: inset 0 0 30px rgba(98, 57, 153, 0.15);
  background-color: rgba(98, 57, 153, 0.3); }

.techniques-articles {
  margin-top: 10px;
  margin-right: -20px; }

.article-item {
  width: 590px;
  height: 150px;
  margin-right: 20px;
  margin-top: 20px;
  display: inline-block;
  background-color: white; }
  .article-item .title-image {
    width: 150px;
    height: 150px;
    float: left;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .article-item .gradient {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0; }
  .article-item .content {
    margin-left: 170px;
    color: #444444;
    padding: 16px 16px 0 0; }
  .article-item .title {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 4px; }
  .article-item .author {
    margin-bottom: 4px; }
  .article-item .summary {
    font-size: 16px;
    color: #777777; }

.trade {
  margin-top: 10px;
  margin-right: -25px; }

.product-item {
  width: 220px;
  height: 250px;
  margin-top: 20px;
  margin-right: 25px;
  text-align: center;
  overflow: hidden; }
  .product-item .product-img {
    width: 100%;
    height: 100%;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .product-item .title {
    font-size: 18px;
    margin: -4px 0; }
  .product-item .type {
    color: #777777; }
  .product-item .content {
    width: 100%;
    position: absolute;
    padding: 8px 0;
    left: 0;
    bottom: -120px;
    background: white;
    background: rgba(255, 255, 255, 0.95);
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease; }
  .product-item .product-operations {
    padding: 0 36px;
    margin: 10px 0; }
  .product-item:hover .content {
    bottom: 0px; }
  .product-item:hover .title {
    color: #444444; }

.product-operations {
  text-align: center; }
  .product-operations .num {
    font-size: 12px;
    height: 17px;
    line-height: 17px;
    padding: 0;
    border-radius: 8px;
    color: white;
    display: inline-block;
    padding: 0 5px; }
  .product-operations .desc {
    display: block; }
  .product-operations .using {
    color: #db4b3c; }
    .product-operations .using .num {
      background-color: #db4b3c; }
  .product-operations .want {
    color: #3494de; }
    .product-operations .want .num {
      background-color: #3494de; }
  .product-operations .comment {
    color: #39b26c; }
    .product-operations .comment .num {
      background-color: #39b26c; }
  .product-operations .want-to-buy {
    margin-top: 10px;
    display: block;
    width: 100%;
    background-color: #3494de;
    color: white;
    font-size: 15px;
    line-height: 40px;
    height: 40px;
    border-radius: 3px; }

.two-cols {
  margin-right: -40px; }

.two-col-piece {
  margin-right: 40px;
  width: 580px;
  float: left; }
  .two-col-piece .section-title {
    margin-bottom: -2px; }

.price-comparision-item,
.app-item {
  width: 100%;
  height: 100px;
  display: block;
  margin-top: 20px;
  background-color: white; }
  .price-comparision-item .product-img,
  .app-item .product-img {
    float: left;
    width: 100px;
    height: 100px;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .price-comparision-item .content,
  .app-item .content {
    float: left;
    margin-left: 20px;
    margin-top: 7px; }
  .price-comparision-item .title,
  .app-item .title {
    font-size: 20px; }
  .price-comparision-item .info,
  .app-item .info {
    font-size: 16px;
    margin-top: -4px;
    color: #444444; }
  .price-comparision-item .price,
  .app-item .price {
    color: #db4b3c; }
  .price-comparision-item .meta,
  .app-item .meta {
    color: #777777; }

.question-item {
  width: 100%;
  height: 100px;
  display: block;
  margin-top: 20px;
  background-color: white; }
  .question-item .content {
    padding: 18px 30px; }
  .question-item .title {
    font-size: 20px; }
  .question-item .meta {
    color: #777777; }
    .question-item .meta .name {
      color: #3494de; }

.studios-wrap {
  margin-right: -20px; }

.studio-item {
  width: 280px;
  height: 100px;
  float: left;
  margin-top: 20px;
  margin-right: 20px;
  background-color: white; }
  .studio-item .studio-img {
    float: left;
    width: 100px;
    height: 100px;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .studio-item .content {
    margin-left: 20px;
    margin-top: 20px;
    float: left; }
  .studio-item .title {
    font-size: 20px; }
  .studio-item .location {
    color: #777777; }

.category-title {
  margin-top: 40px;
  border-bottom: 2px solid #d6d6d4; }
  .category-title h2 {
    font-size: 18px;
    float: left;
    padding-bottom: 5px;
    border-bottom: 2px solid;
    margin-bottom: -2px; }
  .category-title.news-title h2 {
    border-bottom-color: #7645b8; }
  .category-title.hardware-title h2 {
    border-bottom-color: #db4b3c; }
  .category-title.magazine-title h2 {
    border-bottom-color: #39b26c; }
  .category-title.advanced-search-title h2 {
    border-bottom-color: #db4b3c; }
  .category-title.search-results-title {
    margin-top: 15px; }
    .category-title.search-results-title h2 {
      border-bottom-color: #db4b3c; }
    .category-title.search-results-title em {
      color: #db4b3c;
      font-style: normal; }
  .category-title a {
    float: right;
    color: #fff;
    padding: 0 10px;
    border-radius: 50px;
    background: #7645b8;
   }
    .category-title a:hover {
      color: #fff;
      background: #663a9e;
    }
    .category-title a + a {
      margin-right: 20px; }
  .category-title .icon-advanced-search {
    vertical-align: -1px;
    margin-right: 4px; }
  .category-title .icon-fold {
    vertical-align: 3px;
    margin-right: 3px; }
  .category-title .icon-submit-item {
    vertical-align: -2px;
    margin-right: 3px; }

.cate-row {
  padding: 16px 0;
  border-top: 1px solid #e3e3e0; }
  .cate-row:first-child {
    border-top: none; }
  .cate-row.with-margin {
    padding: 20px 0; }
  .cate-row h3 {
    font-size: 16px;
    float: left;
    min-width: 110px;
    _width: 110px;
    color: #555555; }
    .cate-row h3.with-margin {
      margin-top: 7px;
      _margin-top: -10px; }
  .cate-row .v-sep {
    width: 0;
    border-left: 1px solid #E3E3E0;
    float: left;
    height: 30px;
    margin: 6px 30px; }
  .cate-row .cate-content {
    float: left;
    max-width: 1090px; }
    .cate-row .cate-content li {
      float: left;
      margin-right: 20px; }
  .cate-row .cate-sub-row {
    color: #777777; }
    .cate-row .cate-sub-row + .cate-sub-row {
      margin-top: 15px; }
  .cate-row .filter-item-link {
    color: #777777;
    font-size: 16px; }
    .cate-row .filter-item-link:hover {
      color: #663a9e; }
    .cate-row .filter-item-link.more {
      font-size: 14px;
      vertical-align: -1px; }
      .cate-row .filter-item-link.more .icon-expand {
        vertical-align: 2px;
        margin-right: 5px; }
  .cate-row .additional-info {
    margin-left: 25px;
    vertical-align: -8px; }
  .cate-row .warning {
    margin-left: 25px; }

.additional-info,
.warning {
  color: #777777; }
  .additional-info .icon-info,
  .warning .icon-info {
    vertical-align: -1px;
    margin-right: 5px; }

.date-picker-wrap {
  float: left; }
  .date-picker-wrap .date-picker {
    float: left;
    height: 40px;
    line-height: 40px;
    background-color: white;
    border-radius: 3px;
    border: 1px solid #d6d6d4;
    color: #777777;
    font-size: 16px;
    padding: 0 20px; }
    .date-picker-wrap .date-picker .icon-calendar {
      vertical-align: -1px;
      margin-right: 6px; }
  .date-picker-wrap .dash {
    height: 0;
    width: 8px;
    border: 1px solid #DBDBD9;
    display: inline-block;
    margin: 20px 10px 0;
    float: left;
    _font-size: 0;
    _line-height: 0; }
  .date-picker-wrap .base-button {
    margin-left: 20px; }

.more-items {
  display: block;
  margin: 40px auto 0;
  background-color: #d6d6d4;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  color: #555555;
  width: 590px;
  height: 50px;
  line-height: 50px;
  font-size: 16px; }

.hardware-items-wrap {
  margin-top: -20px;
  margin-right: -40px; }
  .category-title + .hardware-items-wrap {
    margin-top: 0; }

.hardware-item {
  width: 580px;
  height: 200px;
  margin-right: 40px;
  margin-top: 40px;
  float: left;
  background-color: white;
  position: relative; }
  .hardware-item .cover-img {
    width: 200px;
    height: 100%;
    float: left;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .hardware-item .product-operations {
    position: absolute;
    width: 120px;
    height: 50px;
    padding: 75px 40px;
    top: 0;
    left: 0;
    background: white;
    background: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease; }
    .hardware-item .product-operations .num {
      font-size: 15px;
      line-height: 22px;
      height: 22px;
      border-radius: 11px;
      margin-bottom: 6px; }
  .hardware-item .content {
    padding: 12px 20px;
    margin-left: 200px;
	height:170px;overflow:hidden;
	}
  .hardware-item .title {
    font-size: 20px;
    color: #444444;
    overflow: hidden;
    text-overflow: ellipsis;
     }
    .hardware-item .title .name {
      color: #663a9e; }
  .hardware-item .info,
  .hardware-item .summary {
    color: #444444;
    font-size: 16px; }
  .hardware-item .info {
    margin-top: -2px; }
  .hardware-item .summary {
    margin-top: 4px; }
  .hardware-item .price {
    color: #db4b3c; }
  .hardware-item .extra-info {
    color: #777777;
    margin-top: 3px; }
    .hardware-item .extra-info em {
      color: #555555;
      font-style: normal; }
    .hardware-item .extra-info + .extra-info {
      margin-top: -2px; }
  .hardware-item:hover .product-operations {
    visibility: visible;
    opacity: 1; }
  .hardware-item:hover .title {
    color: #663a9e; }

.magazine-items-wrap {
  margin-right: -50px;
  margin-top: -20px; }

.magazine-item {
  width: 200px;
  height: 272px;
  margin-right: 50px;
  margin-top: 50px;
  float: left;
  position: relative; }
  .magazine-item .cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .magazine-item .new-indicator {
    background-color: #f4d053;
    color: #444444;
    font-size: 16px;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    position: absolute;
    top: -14px;
    right: -22px;
    padding: 0 5px;
    text-transform: uppercase; }
  .magazine-item .content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background: #39b26c;
    background: rgba(57, 178, 108, 0.9);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease; }
  .magazine-item .title {
    color: white;
    font-size: 20px;
    margin-top: 40px; }
  .magazine-item .date {
    color: white;
    color: rgba(255, 255, 255, 0.7);
    margin: 4px 0 15px; }
  .magazine-item .base-button {
    width: 80px; }
    .magazine-item .base-button + .base-button {
      margin-top: 20px; }
  .magazine-item:hover .content {
    visibility: visible;
    opacity: 1; }

.page-content {
  background-color: white; }
  .page-content.article {
    margin-top: 20px; }
  .page-content .main-content {
    float: left;
    width: 670px;
    padding: 40px 79px 65px 70px;
    border-right: 2px solid #f0f0ed; }
  .page-content .main-title {
    border-bottom: 2px solid #f0f0ed; }
    .page-content .main-title h2 {
      font-size: 30px;
      border-bottom: 2px solid #7645b8;
      padding-bottom: 18px;
      margin-bottom: -2px;
      float: left; }
      .page-content .main-title h2 strong {
        color: #663a9e; }
  .page-content .main-info {
    color: #777777; }
    .page-content .main-info a,
    .page-content .main-info span {
      color: #444444; }
  .page-content .showcase .hero-img {
    width: 100%;
    border: 2px solid #f0f0ed;
    _margin-right: -4px; }
  .page-content .showcase .img-chooser {
    margin-top: 20px; }
    .page-content .showcase .img-chooser .img-item-list {
      float: left; }
      .page-content .showcase .img-chooser .img-item-list + .img-item-list {
        margin-left: 20px; }
      .page-content .showcase .img-chooser .img-item-list.current .img-item-link {
        border: 2px solid #7645b8; }
    .page-content .showcase .img-chooser .img-item-link {
      width: 100px;
      height: 100px;
      position: relative;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      border: 2px solid #f0f0ed;
      display: inline-block; }
    .page-content .showcase .img-chooser .img-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: contain;
      background-position: center; }
  .page-content .sec {
    margin-top: 25px; }
  .page-content .sub-title {
    border-bottom: 2px solid #f0f0ed;
    margin-bottom: 15px; }
    .page-content .sub-title .title-switch {
      float: left; }
      .page-content .sub-title .title-switch + .title-switch {
        margin-left: 15px; }
      .page-content .sub-title .title-switch h3 {
        color: #444444;
        border-bottom-color: transparent;
        font-size: 16px; }
      .page-content .sub-title .title-switch.current.hardware-news-title h3 {
        color: #db3cd2;
        border-bottom-color: #db3cd2; }
    .page-content .sub-title h3 {
      font-size: 18px;
      float: left;
      padding-bottom: 5px;
      margin-bottom: -2px;
      border-bottom: 2px solid; }
    .page-content .sub-title.product-info-title h3 {
      border-bottom-color: #7645b8; }
    .page-content .sub-title.usage-title h3, .page-content .sub-title.relative-news-title h3 {
      border-bottom-color: #db4b3c; }
    .page-content .sub-title.compare-title h3 {
      border-bottom-color: #3494de; }
    .page-content .sub-title.relative-products-title h3 {
      border-bottom-color: #37cdaf; }
    .page-content .sub-title.comments-title h3 {
      border-bottom-color: #db4b3c; }
    .page-content .sub-title.comments-title strong {
      color: #db4b3c; }
  .page-content .product-info p,
  .product-info ol,
  .product-info ul,
  .product-info blockquote,
  .product-info img {
    font-size: 18px; margin-top: 18px; }
  .product-info ul {
    list-style: disc;
    padding-left: 25px; }
  .product-info ol {
    list-style: decimal;
    padding-left: 25px; }
  .product-info li + li {
    margin-top: 5px; }
  .product-info img {
    margin-left: -70px;
    margin-right: -79px;
    height: auto;
  }
  .wechat-share {
    display: inline-block;
    position: relative;
  }
  .wechat-share .wechat-qrcode {
    display: none;
  }
  .wechat-share:hover .wechat-qrcode {
    display: block;
    width: 200px;
    height: 200px;
    padding-top: 15px;
    position: absolute;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  .page-content .product-info p + p {
    margin-top: 10px; }
  .page-content .product-info .info-pieces {
    margin: 0 0 15px; }
  .page-content .product-info .main-info {
    float: left; }
    .page-content .product-info .main-info div + div,
    .page-content .product-info .purchase-info div + div {
      margin-top: 5px; }
  .page-content .product-info .purchase-info {
    float: right;
    margin-top: 3px; }
  .page-content .product-info .em {
    font-size: 16px; }
  .page-content .product-info .info {
    color: #444444; }
  .page-content .product-info .price {
    color: #db4b3c; }
  .page-content .usage .usage-block {
    width: 190px;
    float: left; }
    .page-content .usage .usage-block + .usage-block {
      margin-left: 50px; }
  .page-content .usage h4 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 5px; }
  .page-content .usage strong {
    font-weight: normal; }
  .page-content .usage .person-item {
    width: 30px;
    height: 30px;
    float: left; }
    .page-content .usage .person-item + .person-item {
      margin-left: 10px; }
  .page-content .usage .person-link {
    width: 30px;
    height: 30px;
    display: inline-block; }
  .page-content .usage .base-button {
    width: 120px;
    margin-top: 20px; }
  .page-content .items-wrap {
    margin-right: -20px;
    margin-top: -15px; }
  .page-content .sidebar {
    float: right;
    width: 320px;
    padding: 40px 30px 65px 29px; }
    .page-content .sidebar .news-item-link {
      color: #555555; }
      .page-content .sidebar .news-item-link:hover {
        color: #663a9e; }
    .page-content .sidebar .news-list-item + .news-list-item {
      margin-top: 8px; }
  .page-content .side-product-items-wrap {
    margin-right: -20px;
    margin-top: -15px; }

.page-product-item {
  width: 186px;
  border: 2px solid #f0f0ed;
  padding: 10px;
  margin-right: 20px;
  margin-top: 20px;
  float: left;
  position: relative; }
  .page-product-item .cover-img {
    width: 100%;
    height: 140px;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    background-position: center; }
  .page-product-item .gradient {
    width: 186px;
    height: 140px;
    position: absolute;
    top: 10px;
    left: 10px; }
  .page-product-item .content {
    padding: 6px 4px 0; }
  .page-product-item .title {
    font-size: 14px;
    color: #3494de;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .page-product-item .label {
    color: #777777; }
  .page-product-item .value {
    color: #555555; }
  .page-product-item:hover .title {
    color: #663a9e; }
  .page-product-item:hover .gradient {
    box-shadow: inset 0 0 30px rgba(98, 57, 153, 0.15);
    background-color: rgba(98, 57, 153, 0.3); }

.side-product-item {
  width: 150px;
  margin-right: 20px;
  margin-top: 20px;
  float: left;
  position: relative; }
  .side-product-item .cover-img {
    width: 146px;
    height: 146px;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc);
    border: 2px solid #f0f0ed;
    background-position: center; }
  .side-product-item .gradient {
    width: 100%;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0; }
  .side-product-item .title {
    font-size: 16px;
    text-align: center;
    color: #444444;
    margin-top: 4px; }
  .side-product-item:hover .title {
    color: #663a9e; }
  .side-product-item:hover .gradient {
    box-shadow: inset 0 0 30px rgba(98, 57, 153, 0.15);
    background-color: rgba(98, 57, 153, 0.3); }

.comments .add-comment {
  font-size: 16px;
  color: #db4b3c;
  display: inline-block;
  margin-top: 1px; }
  .comments .add-comment .icon-add-comment {
    vertical-align: 0px;
    margin-right: 6px; }
.comments .comment-list-item {
  padding: 20px 0; }
  .comments .comment-list-item + .comment-list-item {
    border-top: 1px solid #f0f0ed; }
.comments .person-item .name {
  color: #db4b3c;
  font-weight: bold;
  margin-left: 12px;
  vertical-align: -2px; }
.comments .published-time {
  font-size: 13px;
  color: #777777;
  margin-top: 4px; }
.comments .comment-content {
  margin-top: 12px; }
.comments .meta {
  margin-top: 5px; }
  .comments .meta .downvote {
    margin-left: 18px; }
  .comments .meta a {
    color: #a2a2a1; }
    .comments .meta a:hover, .comments .meta a.active {
      color: #db4b3c; }
  .comments .meta .icon-up,
  .comments .meta .icon-down {
    vertical-align: 0px;
    margin-right: 5px; }
  .comments .meta .icon-reply {
    vertical-align: 1px;
    margin-right: 6px; }
.comments .post-comment .title {
  font-size: 16px; }
.comments .post-comment .anon input[type="checkbox"] {
  vertical-align: 2px;
  margin-right: 4px; }
.comments .post-comment .comment-box {
  display: block;
  width: 100%;
  resize: none;
  border-radius: 3px;
  margin: 18px 0 20px;
  height: 140px;
  padding: 12px 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 2px solid #f0f0ed; }
  .comments .post-comment .comment-box:focus {
    border: 2px solid #777777;
    outline: none; }
.comments .post-comment .captcha-img {
  margin-left: 15px;
  float: left; }
.comments .post-comment .captcha-input {
  height: 20px;
  line-height: 20px;
  float: left;
  border-radius: 3px;
  width: 90px;
  padding: 9px 10px;
  border: 2px solid #f0f0ed;
  margin-left: 15px; }
  .comments .post-comment .captcha-input:focus {
    border: 2px solid #777777;
    outline: none; }

.post-content {
  margin: 7px 0 35px 0;
  font-size: 18px; }
.post-content p,
.post-content ol,
.post-content ul,
.post-content blockquote,
.post-content img {
  margin-top: 18px; }
.post-content ul {
  list-style: disc;
  padding-left: 25px; }
.post-content ol {
  list-style: decimal;
  padding-left: 25px; }
.post-content li + li {
  margin-top: 5px; }
.post-content img {
  margin-left: -70px;
  margin-right: -79px;
  height: auto;
}
.post-content h1 {
  color: #ff6600;font-size: 24px;font-weight: 700;text-align: center;
}
.post-content h2 {
  color: #6633ff;font-size: 18px;font-weight: 700;text-align: left;
}
.footnote {
  padding-top: 30px;
  border-top: 1px dashed #f0f0ed; }
  .footnote p + p {
    margin-top: 5px; }

.side-procuct-item-big {
  margin-top: 25px; }
  .side-procuct-item-big .cover-img {
    width: 120px;
    height: 120px;
    float: left;
    margin-right: 20px;
    background-position: center;
    background-size: cover;-ms-behavior: url(/data/assets/css/backgroundsize.min.htc); }
  .side-procuct-item-big .title {
    color: #444444;
    font-size: 16px;
    margin-top: 5px; }
  .side-procuct-item-big .desc {
    color: #777777; }
  .side-procuct-item-big .product-operations {
    margin-left: 140px;
    width: 120px;
    margin-top: 5px; }
  .side-procuct-item-big .intro {
    margin-top: 15px; }

footer {
  margin-top: 40px;
  padding-bottom: 140px; }

.footer-nav {
  border: 2px solid #d6d6d4;
  border-width: 2px 0;
  padding: 30px 12px; }
  .footer-nav h4 {
    font-size: 14px;
    margin-bottom: 6px; }
  .footer-nav .col {
    width: 80px;
    float: left;
    margin-left: 57px; }
    .footer-nav .col:first-child {
      margin-left: 0; }
    .footer-nav .col:hover .footer-nav-link {
      color: #444444; }
    .footer-nav .col .footer-nav-link {
      color: #777777; }
      .footer-nav .col .footer-nav-link:hover {
        color: #663a9e; }

.footer-info {
  padding: 30px 12px 0; }
  .footer-info .logo {
    float: left;
    width: 46px;
    height: 36px;
    background-position: 0 -125px; }
  .footer-info .footer-info-link {
    color: #555555; }
    .footer-info .footer-info-link:hover {
      color: #663a9e; }
  .footer-info .content {
    margin-left: 75px;
    margin-top: -7px;
    color: #777777; }
    .footer-info .content > div + div {
      margin-top: -1px; }

.ie .top-header .top-profile .arrow {
  vertical-align: 7px;
  _vertical-align: -1px; }
.ie .top-header .top-social .icon {
  vertical-align: -1px;
  margin-right: 6px; }
.ie .top-header .top-broadcast .icon-arrow-right {
  vertical-align: 4px;
  _vertical-align: -2px; }
.ie .global-search .submit .icon-search {
  vertical-align: -11px;
  _vertical-align: -13px; }
.ie .monthly .download-app .icon-cellphone {
  vertical-align: 1px; }
.ie .date-picker-wrap .date-picker .icon-calendar {
  vertical-align: 2px;
  margin-right: 8px;
  _vertical-align: 10px; }
.ie .category-title .icon-advanced-search {
  vertical-align: 2px;
  margin-right: 6px;
  _vertical-align: 0; }
.ie .category-title .icon-fold {
  vertical-align: 5px;
  margin-right: 5px;
  _vertical-align: -3px; }
.ie .cate-row .filter-item-link.more .icon-expand {
  vertical-align: 5px;
  _vertical-align: -3px; }
.ie .additional-info .icon-info, .ie .warning .icon-info {
  vertical-align: 2px;
  margin-right: 8px; }
.ie .comments .meta .icon-up,
.ie .comments .meta .icon-down {
  vertical-align: 2px;
  _vertical-align: -1px; }
.ie .comments .meta .icon-reply {
  vertical-align: 4px;
  _vertical-align: -2px; }
.ie .comments .meta .add-comment .icon-add-comment {
  vertical-align: 2px;
  _vertical-align: -2px; }
.ie .comment-box {
  width: 626px !important; }
.ie .footer-info .logo {
  vertical-align: baseline; }
.ie .cate-content .select-wrapper {
  margin-top: 8px; }
.ie .select-wrapper .arrow {
  display: none; }
.ie .base-input {
  height: 22px; }

.icon {
  display: inline-block;
  background-image: url(../img/icons.png);
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  vertical-align: middle; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon {
    background-image: url(../img/icons@2x.png);
    background-size: 240px 240px; } }
.icon-logo {
  background-position: 0 -46px;
  width: 191px;
  height: 36px; }
  a:hover > .icon-logo {
    background-position: 0 0; }

.icon-weibo {
  background-position: -56px -125px; }

.icon-wechat {
  background-position: -24px -196px; }

.icon-twitter {
  background-position: -189px -92px; }

.icon-cellphone {
  background-position: 0 -195px;
  width: 10px; }

.icon-current-label {
  width: 10px;
  height: 5px;
  background-position: -140px -148px; }

.icon-arrow-right {
  width: 7px;
  height: 10px;
  background-position: -120px -171px; }
  a:hover > .icon-arrow-right {
    background-position: -104px -171px; }

.icon-search {
  width: 14px;
  height: 14px;
  background-position: -165px -93px; }

.icon-monthly {
  width: 155px;
  height: 23px;
  background-position: 0 -92px; }

.icon-advanced-search {
  width: 14px;
  height: 14px;
  background-position: -201px -47px; }
  a:hover > .icon-advanced-search {
    background-position: -201px -1px; }

.icon-submit-item {
  width: 14px;
  height: 14px;
  background-position: -48px -171px; }
  a:hover > .icon-submit-item {
    background-position: -24px -171px; }

.icon-fold {
  width: 13px;
  height: 7px;
  background-position: -79px -148px; }
  a:hover > .icon-fold {
    background-position: -56px -148px; }

.icon-expand {
  width: 13px;
  height: 7px;
  background-position: -212px -125px; }
  a:hover > .icon-expand {
    background-position: -189px -125px; }

.icon-calendar {
  width: 14px;
  height: 14px;
  background-position: 0 -171px; }

.icon-info {
  width: 13px;
  height: 13px;
  background-position: -82px -125px; }

.icon-up {
  width: 11px;
  height: 12px;
  background-position: -168px -125px; }
  .active > .icon-up, a:hover > .icon-up {
    background-position: -147px -125px; }

.icon-down {
  width: 11px;
  height: 12px;
  background-position: -126px -125px; }
  .active > .icon-down, a:hover > .icon-down {
    background-position: -105px -125px; }

.icon-add-comment {
  width: 13px;
  height: 13px;
  background-position: -215px -92px; }

.icon-reply {
  width: 12px;
  height: 9px;
  background-position: -202px -71px; }
  a:hover > .icon-reply {
    background-position: -202px -25px; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles for mobile */ }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles for tablet */ }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  /* Don't forget your Retina CSS! */
  body {
    background-size: 72px 72px; } }


.title-logo {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 20px;
	top: 15px;
	border-radius: 40px;
	overflow: hidden;
}
.title-logo img {
	width: 40px;
	height: 40px;
}
.video-responsive {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
  padding-top: 3rem;
  position: relative;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Magazine */
.magazine-wrap{width:1200px;background-color:#fff;margin:15px 0}
.magazine-item-wrap{width:1200px;height:978px;}
.magazine-item-wrap .magazine-item-sidebar{width:400px;height:978px;background-color:#F8F8F7;position:relative;padding:10px 0 30px 0;}
.magazine-item-wrap .magazine-item-main{width:720px;height:978px;}
.magazine-nav .magazine-nav-sidebar{width:320px;background:#7645b8;padding:20px 40px;text-align:center;}
.magazine-nav .magazine-nav-main{width:720px;background-color:#fff;padding:20px 40px;text-align:center;}
.magazine-nav .btn{height:30px;display:inline-block;border-radius:16px;color:#333;background-color:#fff;height:30px;line-height:30px;font-size:14px;text-align:center;font-weight:bold}
.magazine-nav .previous-issues{width:90px;color:#D9CEE7;background-color:#663A9E;margin-right:5px}
.magazine-nav .download-pdf{width:90px;margin-right:5px}
.magazine-nav .download-demo{width:120px}
.magazine-nav .share{width:260px;margin-right:5px}
.magazine-nav .download-app{width:170px;position:relative}
.magazine-nav .download-app:hover .extra{visibility:visible;opacity:1}
.magazine-nav .fullscreen{width:80px;color:#D9CEE7;background-color:#663A9E;margin-left:30px;}
.magazine-nav .extra{visibility:hidden;position:absolute;background-color:#7645b8;width:161px;height:161px;padding:10px;top:35px;z-index:99;opacity:0;-webkit-transition:all .15s ease;transition:all .15s ease}
.magazine-menu{outline:none;}
.magazine-menu .menu-section{margin:10px 0;}
.magazine-menu .mm-link{font-size:20px;color:#663a9e;font-weight:bold;padding:10px 40px}
.magazine-menu .mm-sub li{margin:5px 0;padding:5px 40px;}
.magazine-menu .mm-sub-link li{font-size:14px;line-height:24px;color:#333;}
.magazine-menu .current li,.magazine-menu .mm-sub li:hover{color:#fff;background-color:#663A9E;}
.magazine-menu .mm-sub-link span{font-size:12px;display:inline-block;width:36px;height:18px;line-height:20px;text-align:center;margin:0 10px 0 0;}
.magazine-menu .mm-sub-link .pagenum{color:#fff;background-color:#7645B8;}
.magazine-menu .mm-sub-link .ad{color:#333;background-color:#F4D053;}
.magazine-item-sidebar .nano{position:relative;width:400px;height:978px;overflow:hidden;}
.magazine-item-sidebar .nano .content{position:absolute;overflow:scroll;overflow-x:hidden;top:0;left:0;right:0;bottom:0;}
.magazine-item-sidebar .nano > .pane{background:rgba(0,0,0,.15);position:absolute;width:10px;right:5px;top:20px;bottom:0;visibility:hidden\9;opacity:.01;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.magazine-item-sidebar .nano > .pane > .slider {background:#444;background:rgba(0,0,0,.5);position:relative;margin:0 1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.magazine-item-sidebar .nano:hover > .pane, .pane.active, .pane.flashed{visibility:visible\9;opacity:0.99;}

.magazine-item-main{width:720px;height:978px;overflow:hidden;margin:0 40px;position:relative;}
.magazine-item-main .magazine-data{position:absolute;top:-70px;}
.magazine-item-main #magazine-image{width:720px;height:978px;background:#fff url(../img/loading.gif) no-repeat center center;position:relative;}
.magazine-item-main:hover .magazine-arrows a[href]{display:block;}
.magazine-item-main .fullscreen:hover{cursor:pointer;}
.magazine-arrows{width:720px;height:auto;}
.magazine-arrows a{display:none;position:absolute;top:50%;margin-top:-460px;width:120px;height:920px;z-index:999;text-indent:-9999px;}
.magazine-arrows .mag-prev{background:url(../img/controlsc.png) -40px center no-repeat;left:0;}
.magazine-arrows .mag-next{background:url(../img/controlsc.png) 80px center no-repeat;right:0;}

.fullscreen-viewport{position:absolute;width:100%;height:auto;top:0;left:0;z-index:9999;margin:0;background-color:#333;opacity:0.98;}
.fullscreen-viewport .magazine-item-wrap,.fullscreen-viewport .magazine-nav{width:1200px;margin:0 auto;}
.fullscreen-viewport .magazine-item-main,.fullscreen-viewport .magazine-arrows,.fullscreen-viewport #magazine-image{width:100%;height:auto;margin:0 auto;}
.fullscreen-viewport .magazine-item-sidebar{display:none;}