@charset "UTF-8";

html {
  font-size: 20px;
}

html {
  font-size : 10px;
  overflow-x: hidden;
}

@media screen and (min-width: 320px) {
  html {
    font-size: 17px;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 19px;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 22px;
  }
}

body {
  font-size: 14px;
}

.rank-orderedList .comic-list-box .comic-list .comic-link,
.rank-orderedList .comic-list-box .comic-list .comic-cover img,
.rank-top3 .comic-link,
.rank-top3 .comic-link .comic-cover,
.rank-top3 .top3-box-item1,
.rank-top3 .top3-box-item2,
.rank-top3 .top3-box-item3 {
  border-radius: 0.1rem;
  overflow     : hidden;
}

.rank-orderedList .comic-list-box .comic-list .comic-info strong,
.rank-orderedList .comic-list-box .comic-list .comic-info small,
.rank-top3 .comic-link strong,
.rank-top3 .comic-link small {
   word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box !important; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden;
}

.rank-orderedList .comic-list-box .comic-list .comic-cover,
.rank-top3 .comic-link .comic-cover {
  background-image   : url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAANIAAAEYCAMAAAAeQ1gWAAAAgVBMVEUAAADd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d1XXN+nAAAAKnRSTlMA5v3yDSH07oH6fJ1KRrCoORzWWxPex3VqTwfRvI7hubWrhCiWBGVWPjJ1rRGyAAACcUlEQVR42u3aCW6jQBCF4WLfbGy8O96dZJzU/Q84kaIMOGBpEtMWtP7vAujpNU1XCwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAX5vtnPAwFousHf2QvIktZiP9NBFLXBz9EogNZidVuyJNIy3NxZQg3Tqu62zTQAwrcq1w12JGkbn/npEVUmOqInUGYsbU04pwKsYUR60azcSMpX6zFEP+eFcVrcWQqdaY6ak4aFU2E0OCUGvCQkqGKhqIMSNtkEnbgq1WZb4YE7jawA2kXcNIK/ZDMWipjVJp1XuoFS++mLTVRltp0+tES/OhmOVoI0faNK1VZFKijRJpU15W9CY1vYy010/urrmiHi48Tz/tAnmAwyO2h71+8RYvf8Y3qurVJn7QK+78lK6/Fda3T+1Ka+qF9etA5Dt6g7t9l9YV3gOOrQNXbwkNZLpozUXatrqd6SilXo2A483NmqTCzKDuTcWIcZrPHxZJilF5nTIqxBx/vHpZeHolFzOC5WGfeJPDMhDzgktcFuY9iy38t1W28MLcnkTAjz09D1bn7LiY7KNIP0TRfrI4ZufV4PlJescfpqdJojclk1M69KUvnga7jf6XzW7Qg7pe1yNPf8AbrV+ly2axoz/mxDPpKv8c6q+E546+VkNHf80ZSgfFepdYOidVtSzTWO/ldu2nmlzvdpRuifRukXRLC5E86RYLF56F24OFm7hI7NqWyMYDkY3HVhuHCytHQCsHdTuvU64uveIsX2zmUZSoJlE03yzyLO7npRcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA67y/iNlttzNAyewAAAABJRU5ErkJggg==");
  background-size    : contain;
  background-position: center;
  background-color   : white;
}

@font-face {
  font-family: 'iconfont';
  src        : url("../font/iconfont.eot?v=b5578579b7a67d36");
  /* IE9*/
  src: url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype"), url("../fonts/iconfont.svg") format("svg");
  /* iOS 4.1- */
}

.iconfont {
  font-family            : "iconfont" !important;
  font-style             : normal;
  -moz-osx-font-smoothing: grayscale;
}

/*
刷新1
*/
html {
  font-size: 20px;
}

html {
  font-size : 10px;
  overflow-x: hidden;
}

@media screen and (min-width: 320px) {
  html {
    font-size: 17px;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 19px;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 22px;
  }
}

body {
  font-size: 14px;
}

.rank-orderedList .comic-list-box .comic-list .comic-link,
.rank-orderedList .comic-list-box .comic-list .comic-cover img,
.rank-top3 .comic-link,
.rank-top3 .comic-link .comic-cover,
.rank-top3 .top3-box-item1,
.rank-top3 .top3-box-item2,
.rank-top3 .top3-box-item3 {
  border-radius: 0.1rem;
  overflow     : hidden;
}

.rank-orderedList .comic-list-box .comic-list .comic-info strong,
.rank-orderedList .comic-list-box .comic-list .comic-info small,
.rank-top3 .comic-link strong,
.rank-top3 .comic-link small {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box !important; /** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden;
}

.rank-orderedList .comic-list-box .comic-list .comic-cover,
.rank-top3 .comic-link .comic-cover {
  background-image   : url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAANIAAAEYCAMAAAAeQ1gWAAAAgVBMVEUAAADd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d1XXN+nAAAAKnRSTlMA5v3yDSH07oH6fJ1KRrCoORzWWxPex3VqTwfRvI7hubWrhCiWBGVWPjJ1rRGyAAACcUlEQVR42u3aCW6jQBCF4WLfbGy8O96dZJzU/Q84kaIMOGBpEtMWtP7vAujpNU1XCwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAX5vtnPAwFousHf2QvIktZiP9NBFLXBz9EogNZidVuyJNIy3NxZQg3Tqu62zTQAwrcq1w12JGkbn/npEVUmOqInUGYsbU04pwKsYUR60azcSMpX6zFEP+eFcVrcWQqdaY6ak4aFU2E0OCUGvCQkqGKhqIMSNtkEnbgq1WZb4YE7jawA2kXcNIK/ZDMWipjVJp1XuoFS++mLTVRltp0+tES/OhmOVoI0faNK1VZFKijRJpU15W9CY1vYy010/urrmiHi48Tz/tAnmAwyO2h71+8RYvf8Y3qurVJn7QK+78lK6/Fda3T+1Ka+qF9etA5Dt6g7t9l9YV3gOOrQNXbwkNZLpozUXatrqd6SilXo2A483NmqTCzKDuTcWIcZrPHxZJilF5nTIqxBx/vHpZeHolFzOC5WGfeJPDMhDzgktcFuY9iy38t1W28MLcnkTAjz09D1bn7LiY7KNIP0TRfrI4ZufV4PlJescfpqdJojclk1M69KUvnga7jf6XzW7Qg7pe1yNPf8AbrV+ly2axoz/mxDPpKv8c6q+E546+VkNHf80ZSgfFepdYOidVtSzTWO/ldu2nmlzvdpRuifRukXRLC5E86RYLF56F24OFm7hI7NqWyMYDkY3HVhuHCytHQCsHdTuvU64uveIsX2zmUZSoJlE03yzyLO7npRcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA67y/iNlttzNAyewAAAABJRU5ErkJggg==");
  background-size    : contain;
  background-position: center;
  background-color   : white;
}

@font-face {
  font-family: 'iconfont';
  src        : url("../../public/font/iconfont.eot?v=b5578579b7a67d36");
  /* IE9*/
  src: url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype"), url("../fonts/iconfont.svg") format("svg");
  /* iOS 4.1- */
}

.iconfont {
  font-family            : "iconfont" !important;
  font-style             : normal;
  -moz-osx-font-smoothing: grayscale;
}

/*
刷新1
*/
/**
@mixin   :tab-nav
parameter:$itemWidth
参数说明：接受px为单位的具体px值，会在内部转换rem，参数大小为设计图上tab切换标签一个点击按钮的宽度
用途说明：用户复用列表页头部tab切换页签样式
对应html格式：
  .xxx-tab（在此处引用tab-nav）
    div.tab-list
      a.tab-list-item * n （普通样式）
      a.tab-list-item .active （选中样式）
*/
/**
 * 三列的数字列表
 */
/**
  用于左图片右内容分布形式的列表样式
*/
.rank-orderedList .comic-list-box .comic-list {
  padding-left  : 0.25rem;
  padding-right : 0.25rem;
  padding-bottom: 0.25rem;
}

.rank-orderedList .comic-list-box .comic-list .comic-item {
  border-bottom: 0.25rem solid #FFFFFF;
}

.rank-orderedList .comic-list-box .comic-list .comic-link {
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  background-color  : white;
  padding           : 0.25rem;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
}

.rank-orderedList .comic-list-box .comic-list .comic-cover {
  height      : 4.675rem;
  width       : 3.5rem;
  margin-right: 0.5rem;
}

.rank-orderedList .comic-list-box .comic-list .comic-cover img {
  display: block;
  width  : 100%;
  height : 100%;
}

.rank-orderedList .comic-list-box .comic-list .comic-info {
  -webkit-box-flex     : 1;
  -ms-flex             : 1;
  flex                 : 1;
  min-width            : 1px;
  display              : -webkit-box;
  display              : -ms-flexbox;
  display              : flex;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-pack     : center;
  -ms-flex-pack        : center;
  justify-content      : center;
}

.rank-orderedList .comic-list-box .comic-list .comic-info strong,
.rank-orderedList .comic-list-box .comic-list .comic-info small {
  display: block;
}

.rank-orderedList .comic-list-box .comic-list .comic-info strong {
  color      : #535252;
  font-size  : 0.8rem;
  line-height: 150%;
  padding-top: 0.25rem;
}

.rank-orderedList .comic-list-box .comic-list .comic-info small {
  font-size  : 0.6rem;
  color      : #969696;
  line-height: 1rem;
}

/**
用于一行三列的列表排布，
上图片，下文字.
*/
.comic-title {
  /**
  漫画标题旁边的标签
  */
}

.comic-title .tag-vip-free {
  display          : inline-block;
  vertical-align   : text-bottom;
  width            : 2.5rem;
  height           : 0.975rem;
  background-image : url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAGQAAAAnCAYAAAD5Lu2WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNUJCRjMxNjMyMUYxMUU2ODIxRjhBRjJFMDgyRkMzMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNUJCRjMxNzMyMUYxMUU2ODIxRjhBRjJFMDgyRkMzMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI1QkJGMzE0MzIxRjExRTY4MjFGOEFGMkUwODJGQzMxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI1QkJGMzE1MzIxRjExRTY4MjFGOEFGMkUwODJGQzMxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+9tTO+gAABGhJREFUeNrsWzuLFEEQ7pPDEx/I3E/Y+wfuqYkazQVGgjAraL6XGAqzamCk3IBmJruJkYI7YHLhTqaJeuM/cH6CjfhAo7Vaq6Go6+npeewD7IKi2dme7p7vq1f3zm7M53PhZX3khIfAE+LFE+IJ8dJQNsu++Hl3cAGax6BXQc94qFrLD9C3oA9PP59+Kuu0YaqygIyL0ByCPgJ9BQN8sxD3X6MM2Dj1A5zOQXMbjfw63Pexjoc8Bb0PN73wht0Zccqox0DML2ifgV6rk0Mug77xMC5EXoNeqpvUt4DRrx67hXiK8pAtX2X5snctJAL9Ahp2NF4MekQ+h5ATjkC7Gr+87LVUC2ryAFwvdegeIBg5aEGu90D7oGkJiDZJHZeq5j4AlTh3YOgjLffrNVLpo0asTx9woeNngI9cCiEIcAwL2INJs4q+QwRlBJqw68rathko6qGmCKA0ANzD6xMc0yZT7K/kc0mfxDJOZDCOAOePLUakCBrUMJzWISsloLqEDMnIcJ1jl+kOthkCMrbcP0bDGSHpVHfQY2UFaIlhDSkai/6snysB41Sf95YesmDiHLwjw/gZWNw+RGtJRHeSo/XN0CASFgo1GUP0ItPcM/ScPRxPVBDbZ2FMsDwiMGLEK8khKBMMCUML4MOaMb8uMZrwgoSTGQGwbwBOkHvGbLz9EqPKyTPExHt4LqSGkTV9sEZVFib0wpKAdTLPHKywy4qqR8BImBYkvo/IdWFI3jRn5cxDXJJ1yJL8wj1Ee8kBAZ57R4B9FgW+YGBNDGuS7J7c4LGxpcrKyVwB0biiMmyc2NsSEiP4mWGBRctwFZSEmxjBmhjyh6goY+uGxV0WDgtyTT/nFD0tJ2Vxv+ba2hOi6myd3Ek5SJP5qAUZscVyZUW5SuM/JzN12OeY1qI9fsAMpSCGQcvkkSp+lh2ydJyOWHIfkr1CU0lLvEs6JEyJ1hobvC1CogqDN3BvirFvj1VotgJGyXbTTWFrQkgJHCEhOpmnjsmvTNqEu8RQ+c1Ygt6tGEOHnQyfKcI9jO2kwebVSz3LSslxwqKTedPwFzrsh3pYENCN6T7zJomqTxqk8oY2HrEIQngMXWap60LGAa6pKudokKvK1YDkp7DrBW92NM6EWNc6/KbbJ+Wvy7kX3WPIkpwkiRfp8DeDkJ2TEJ209ZauCElxoW1L3bYSoqXrMzR+qCmRrKE4fqgZGjw7INdmpCAYkFCt5/xLEh6hpEBMsUpCCnH85NYmGiiTNdYZh4ecMSmLTeOPsI/pYJKHtZh4vSTfU4JzLG8TIEKHbF0m76ySENEARNnRODRsVp3g6s2ey28jOjcWLjkRj5NSPDIJVh2y1kXSDo1HigbhF3NI4zxSVmX9BqbPCy+dC+B6SuFbl5D3oDc9fAuRW6Af6oase6CHwOZJaF+CG373OLb2jLPQ3BH/3ly8UdZvo+wPO/hu7xPQK8K/29uFqHd734E+qP1ur5fViX9RzhPixRPiCfHSVP4IMAB+wWzkRG7pIwAAAABJRU5ErkJggg==");
  background-size  : 2.5rem 0.975rem;
  background-repeat: no-repeat;
}


.rank-tab {
  height          : 2rem;
  background-color: white;
}

.rank-tab .tab-list {
  display         : -webkit-box;
  display         : -ms-flexbox;
  display         : flex;
  -webkit-box-pack: center;
  -ms-flex-pack   : center;
  justify-content : center;
}

.rank-tab .tab-list .tab-list-item {
  display    : block;
  width      : 4rem;
  text-align : center;
  height     : 2rem;
  line-height: 2rem;
  font-size  : 0.75rem;
  position   : relative;
  color      : #969696;
}

.rank-tab .tab-list .tab-list-item.active {
  color: #535252;
}

.rank-tab .tab-list .tab-list-item.active::after {
  content         : '';
  width           : 0.5rem;
  height          : 0.15rem;
  left            : 1.75rem;
  bottom          : 0;
  position        : absolute;
  background-color: #ff9a6a;
  border-radius   : 0.15rem;
  display         : block;
}

.rank-top3 .top3-box {
  display            : none;
  -webkit-box-align  : end;
  -ms-flex-align     : end;
  align-items        : flex-end;
  -webkit-box-pack   : center;
  -ms-flex-pack      : center;
  justify-content    : center;
  padding-top        : 0.95rem;
  padding-bottom     : 1.1rem;
  background-image   : url("../images/rank-banner-bg.png");
  background-position: center bottom;
  background-repeat  : no-repeat;
  background-size    : 100% auto;
}

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

.rank-top3 .comic-link {
  display: block;
}

.rank-top3 .comic-link .comic-cover {
  display: block;
}

.rank-top3 .comic-link strong,
.rank-top3 .comic-link small {
  display   : block;
  text-align: center;
  color     : white;
}

.rank-top3 .comic-link strong {
  font-size     : 0.8rem;
  line-height   : 100%;
  padding-top   : 0.3rem;
  padding-bottom: 0.15rem;
}

.rank-top3 .comic-link small {
  font-size     : 0.6rem;
  line-height   : 100%;
  padding-bottom: 0.35rem;
}

.rank-top3 .top3-box-item1,
.rank-top3 .top3-box-item2,
.rank-top3 .top3-box-item3 {
  position: relative;
}

.rank-top3 .top3-box-item1 .comic-link,
.rank-top3 .top3-box-item2 .comic-link,
.rank-top3 .top3-box-item3 .comic-link {
  background-repeat  : no-repeat;
  background-position: right bottom;
  background-size    : auto 2.25rem;
}

.rank-top3 .top3-box-item1:before,
.rank-top3 .top3-box-item1::after,
.rank-top3 .top3-box-item2:before,
.rank-top3 .top3-box-item2::after,
.rank-top3 .top3-box-item3:before,
.rank-top3 .top3-box-item3::after {
  position         : absolute;
  content          : '';
  height           : 1px;
  -webkit-transform: scale(1, 0.5);
  transform        : scale(1, 0.5);
  background-color : #C5C5C5;
}

.rank-top3 .top3-box-item1:before,
.rank-top3 .top3-box-item2:before,
.rank-top3 .top3-box-item3:before {
  top: -0.35rem;
}

.rank-top3 .top3-box-item1:after,
.rank-top3 .top3-box-item2:after,
.rank-top3 .top3-box-item3:after {
  top: -0.2rem;
}

.rank-top3 .top3-box-item1 {
  width       : 5.25rem;
  margin-left : 1rem;
  margin-right: 1rem;
}

.rank-top3 .top3-box-item1:before {
  width: 4.75rem;
  left : 0.25rem;
}

.rank-top3 .top3-box-item1:after {
  width: 5rem;
  left : 0.125rem;
}

.rank-top3 .top3-box-item1 .comic-link {
  background-color: #e86a3e;
  background-image: url("../images/top3_1bg.jpg");
}

.rank-top3 .top3-box-item1 .comic-link .comic-cover {
  width : 5.25rem;
  height: 7rem;
}

.rank-top3 .top3-box-item2,
.rank-top3 .top3-box-item3 {
  width: 4.35rem;
}

.rank-top3 .top3-box-item2:before,
.rank-top3 .top3-box-item3:before {
  width: 3.85rem;
  left : 0.25rem;
}

.rank-top3 .top3-box-item2:after,
.rank-top3 .top3-box-item3:after {
  width: 4.1rem;
  left : 0.125rem;
}

.rank-top3 .top3-box-item2 .comic-link,
.rank-top3 .top3-box-item3 .comic-link {
  background-color: #ffa755;
}

.rank-top3 .top3-box-item2 .comic-link .comic-cover,
.rank-top3 .top3-box-item3 .comic-link .comic-cover {
  width : 4.35rem;
  height: 5.8rem;
}

.rank-top3 .top3-box-item2 .comic-link {
  background-image: url("../images/top3_2bg.jpg");
}

.rank-top3 .top3-box-item3 .comic-link {
  background-image: url("../images/top3_3bg.jpg");
}

.rank-orderedList {
  padding-top: 0.25rem;
}

.rank-orderedList-not-banner {
  padding-top: 2.25rem !important;
}

.rank-orderedList .comic-list-box {
  display: none;
}

.rank-orderedList .comic-list-box .comic-list .comic-item {
  position: relative;
}

.rank-orderedList .comic-list-box .comic-list .comic-item .comic-index {
  position   : absolute;
  font-size  : 1.5rem;
  color      : #C5C5C5;
  right      : 0.45rem;
  line-height: 100%;
  top        : 0.45rem;
  display    : block;
  font-style : normal;
}

.rank-orderedList .comic-list-box .comic-list .comic-item .comic-title {
  padding-right     : 2rem;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
}

.rank-orderedList .comic-list-box.active,
.rank-orderedList.common-list .comic-list-box {
  display: block;
}

.rank-orderedList.common-list .comic-list-box {
  margin-top: 2.5rem;
}