/**
* 主要放header 和 footer 以及一些重置公共属性和font-face
**/
@font-face {
  font-family: "SFProText";
  src: url("../../fonts/SanFranciscoText-Medium.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SFProText-Medium";
  src: url("../../fonts/SanFranciscoText-Medium.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SFProText-Semibold";
  src: url("../../fonts/SanFranciscoText-Semibold.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SFProText-Regular";
  src: url("../../fonts/SanFranciscoText-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SFProText-Bold";
  src: url("../../fonts/SanFranciscoText-Bold.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Medium";
  src: url("../../fonts/Gilroy-Medium-2.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Regular";
  src: url("../../fonts/gilroy-regular-3.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("../../fonts/gilroy-bold-4.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Black";
  src: url("../../fonts/gilroy-black-6.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBoldItalic";
  src: url("../fonts/Gilroy-ExtraBoldItalic-10.otf");
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 14.4px !important;
}
.container-310 {
  position: relative;
  width: 1110px;
  margin: 0 auto;
}
.container-311 {
  position: relative;
  width: 1400px;
  margin: 0 auto;
}

ul,ol{
  list-style: none;
}
*, *::before, *::after {
  box-sizing: border-box;
  letter-spacing: normal;
}
a{
  text-decoration: none;
}
ul,ol,h1,h2,h3,h4,p{
  margin: 0;
  padding: 0;
}
input, input:focus, button, textarea{
  outline: none;
  border: 0 solid;
  margin: 0;
  padding: 0;
  background-color: #fff;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
a{
  color: #303133;
}
a, a:hover {
  text-decoration: none;
  cursor: pointer;
}

.show{
  display: block !important;
}
.hide{
  display: none !important;
}
.text-center{
  text-align: center;
}
*{
  font-family: SFProText-Medium, SFProText, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
  margin: 0;
  padding: 0;
  font-family: SFProText-Medium, SFProText, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.icon,.icon-before:before,.icon-after:after{
  content: '';
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-image: url("/public/pc/image/icons.png?t=1648694794996");
  background-size: 65.8rem 131.6rem;
}
.icon.webp,.icon-before.webp:before,.icon-after.webp:after{
  background-image: url("/public/pc/image/icons.webp?t=1648694794996");
}
.relative{
  position: relative;
}
/*公共header-start*/
header{
  height: 5rem;
  background-color: #fff;
  font-size: 0;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #E1E2E6;
}
header .icon-logo{
  position: absolute;
  left: 0;
  top: 1.665rem;
  cursor: pointer;
  margin-right: 0.97rem;
}
.icon-logo{
  width: 11.4rem;
  height: 1.67rem;
  background-position: -7.5rem -95.45rem;
}
.nav{
  display: inline-block;
  padding-left: 11.8rem;
  line-height: 5rem;
  font-family: SFProText-Semibold, SFProText;
}
.nav li{
  display: inline-block;
  font-size: 1.25rem;
  padding: 0 1.11rem;
}
.nav li.active a{
  color: #07BEB8;
  font-family: SFProText-Medium, SFProText;
}
.contest-tab, .creator-tab{
  position: relative;
}
.contest-tab>a:before{
  content: 'PRIZE';
  display: block;
  position: absolute;
  right: 0.7rem;
  top: 0.8rem;
  background: #FB5012;
  border-radius: 0.63rem 0.63rem 0.63rem 0;
  padding: 2px 6px 0 6px;
  font-size: 12px;
  font-family: SFProText-Semibold, SFProText;
  color: #FFFFFF;
  line-height: 0.83rem;
}
header .header-right{
  position: absolute;
  right: 0;
  top: 1.08rem;
  font-size: 0;
}
.hand-down-divider{
  width: 1px;
  height: 1.11rem;
  background: #E8E9ED;
  margin: 0 1rem;
}
.header-right>i, .header-right>span,
.publish,.download_app,.user-center.logined span:after,.user-center img,
.sub-header li+li:before,.user-center a,
.toggle-publish span{
  display: inline-block;
  vertical-align: middle;
}
.header-right>i, .header-right>span{
  cursor: pointer;
}
header .header-right .icon-search{
  width: 1.67rem;
  height: 1.67rem;
  background-position: -27.91rem -15.66rem;
  background-size: 31.12rem 62.27rem;
  margin-right: 1.11rem;
}
header .header-right .icon-library{
  width: 1.67rem;
  height: 1.67rem;
  background-position: -6.5rem -99.4rem;
  margin-right: 1.11rem;
}
.publish{
  position: relative;
  background-color: #303133;
  padding: 0.6rem 1.11rem;
  color: #fff;
  border-radius: 1.25rem;
  font-size: 0.97rem;
}
.contest-tab:hover .toggle-contest,
.creator-tab:hover .toggle-contest,
.publish:hover .toggle-publish,
.download_app:hover .toggle_download_app,
.user-center.logined:hover .toggle-center{
  display: block;
}
.icon-publish{
  width: 0.37rem;
  height: 0.37rem;
  background-position: -5.88rem -0.43rem;
  background-size: 29.11rem 58.21rem !important;
  margin-left: 0.3rem;
}
.contest-tab .icon-publish, .creator-tab .icon-publish {
  filter: brightness(0);
}
.download_app{
  position: relative;
  background-color: #F7743E;
  padding: 0.6rem 1.11rem;
  color: #fff;
  border-radius: 1.25rem;
  font-size: 0.97rem;
}
.toggle-contest,.toggle-publish,.toggle-center{
  display: none;
  position: absolute;
  top: 3.5rem;
  right: 0;
  width: 16.11rem;
  height: 13.61rem;
  padding: 1.11rem;
  background: #fff;
  border-radius: 0.56rem;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.toggle_download_app{
  display: none;
  position: absolute;
  top: 3.5rem;
  right: 0;
  width: auto;
  height: auto;
  padding: 1.11rem;
  background: #fff;
  border-radius: 0.56rem;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.toggle_download_app .icon-google{
  margin-right: 0;
}
.toggle-contest {
  top: 4.79rem;
  right: -7rem;
  width: 20.49rem;
  padding: .56rem;
  height: auto;
}
.toggle-contest:before,.toggle-publish:before,.toggle-center:before{
  position: absolute;
  content: ' ';
  top: -0.4rem;
  right: 2.86rem;
  width: 0;
  height: 0;
  border: 0.5rem solid #fff;
  transform: rotate(-45deg);
  box-shadow: 0.2rem -0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.1);
}
.toggle-contest:before {
  right: 9.86rem;
}
.toggle-contest::after, .toggle-publish::after, .toggle-center::after {
  content: '';
  position: absolute;
  top: -1rem;
  left: 0;
  width: 100%;
  height: 1rem;
}
.toggle-publish li+li,.toggle-contest li+li{
  margin-top: 0.56rem;
}
.toggle-publish li>a{
  display: block;
  background: #ECFAFA;
  height: 5.42rem;
  border-radius: 0.28rem;
}
.toggle-contest li {
  display: block;
  position: relative;
  z-index: 1;
}
.toggle-contest li:hover {
  background: rgba(233, 236, 240, 0.4);
}
.toggle-contest li>a{
  display: block;
  height: 3.33rem;
  line-height: 3.33rem;
  font-size: 1.11rem;
  font-family: SFProText-Semibold, SFProText;
  font-weight: 600;
  color: #303133;
}
.toggle-publish li:last-child a{
  background: #ECF1FA;
}
.icon-comic,.icon-novel{
  width: 4.44rem;
  height: 4.44rem;
  vertical-align: top;
}
.icon-comic{
  background-position: -22.31rem -76.82rem;
}
.icon-novel{
  background-position: -22.31rem -81.81rem;
}
.toggle-publish .icon-more{
  width: 0.83rem;
  height: 0.83rem;
  background-position: -0.16rem -6.3rem;
  background-size: 36rem 72rem;
  margin-top: 1.2rem;
}
.toggle-publish span{
  font-family: SFProText-Semibold, SFProText;
  font-size: 1.11rem;
  font-weight: 600;
  color: #303133;
  line-height: 1.39rem;
  width: 7rem;
  margin-top: 1.3rem;
  margin-left: 0.56rem;
}
.user-center{
  position: relative;
  padding: 0.28rem 0.83rem 0.28rem 0.28rem;
  border-radius: 1.25rem;
  border: 0.07rem solid #E1E2E6;
  font-size: 0;
  margin-left: 0.53rem;
}
.user-center>a{
  position: relative;
  padding-left: 0.83rem;
  padding-right: 0.2rem;
  font-size: 0.97rem;
  font-style: normal;
}
.user-center.logined>a:after{
  content: "";
  width: 0.37rem;
  height: 0.37rem;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-image: url('/public/pc/image/icons.webp?t=1658114414594');
  background-position: -5.88rem -0.43rem;
  background-size: 29.11rem 58.21rem;
  margin-left: 0.3rem;
  filter: brightness(0);
}
.user-center.logined>a:after {
  background-image: url('/public/pc/image/icons.webp?t=1658114414594');
}
.user-center>img{
  width: 1.94rem;
  height: 1.94rem;
  border-radius: 50%;
}
.wallet-link {
  width: 100%;
}
.toggle-center{
  width: 16.67rem;
  height: 18.75rem;
  padding: 0;
}
.toggle-center li:first-child{
  border-bottom: 1px solid #F0F2F5;
  font-size: 0;
  padding: 1.39rem 1.11rem;
}
.toggle-center li:first-child span{
  line-height: 1.6rem;
  display: inline-block;
  vertical-align: middle;
  padding-left: 0.83rem;
  width: 11rem;
  font-size: 1.11rem;
  font-family: SFProText-Semibold, SFProText;
}
.toggle-center img{
  width: 3.33rem;
  height: 3.33rem;
  border-radius: 50%;
}
.toggle-center li:nth-of-type(2){
  border-bottom: 1px solid #F0F2F5;
  padding: 1.25rem 1.11rem;
  font-size: 1.11rem;
}
.toggle-center .wallet-link{
  position: relative;
}
.toggle-center .wallet-link:after{
  content: ' ';
  position: absolute;
  top: 0.66rem;
  right: 0;
  border-right: 2px solid #454545;
  border-top: 2px solid #454545;
  height: 0.52rem;
  width: 0.52rem;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
header .i-before_gems:before{
  width: 1.04rem;
  height: 1.22rem;
  background-position: -15.73rem -40.31rem;
  background-size: 36.67rem 73.28rem;
  margin-right: 0.28rem;
}
.toggle-center li:nth-of-type(3) {
  position: absolute;
  bottom: 1.11rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.11rem;
}
.toggle-center li:nth-of-type(3) a{
  color: #9FA2A8;
}
header .i-before_out:before{
  width: 1.39rem;
  height: 1.39rem;
  background-position: -25.31rem -15.51rem;
  background-size: 33.4rem 66.8rem;
  filter: invert(71%) sepia(4%) saturate(355%) hue-rotate(182deg) brightness(92%) contrast(83%);
}
/*header-end*/
/*main-start*/
main{
  margin-top: 5rem !important;
  min-height: calc(100vh - 425px);
}
.two-line,.book-desc1{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal !important;
}
.sub-header{
  border-bottom: 1px solid #E1E2E6;
  border-left: none;
  border-right: none;
  font-size: 1.11rem;
  text-align: center;
}
.icon-arrow-up-circle {
  position: absolute;
  top: 1rem;
  right: 0;
  width: 1.8rem;
  height: 1.8rem;
  background-position: -7.06rem -51.4rem;
  background-size: 32.9rem 65.8rem;
  cursor: pointer;
  transition: all 0.35s;
  transform: rotate(180deg);
}
.icon-arrow-up-circle.down {
  transform: rotate(0deg);
}
.sub-header ul {
  white-space: nowrap;
  overflow: hidden;
  line-height: 3.61rem;
  margin: 0 3rem;
}
.sub-header ul.unfolded-ul {
  white-space: initial;
  overflow: initial;
}
.sub-header li{
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.sub-header li a.active{
  color: #303133;
}
.sub-header li a.active:after{
  content: '';
  position: absolute;
  bottom: -.6rem;
  left: 50%;
  display: block;
  margin-left: -.555rem;
  width: 1.11rem;
  height: 0.21rem;
  background: #303133;
  border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
}
.sub-header li+li:before{
  content: '';
  height: 1.11rem;
  width: 1px;
  background-color: #E8E9ED;
  margin: 0 2.78rem;
}
.sub-header a{
  color: #9FA2A8;
  position: relative;
}
/*footer start*/
footer{
  background: #F8F9FA;
}
.footer-down{
  background: linear-gradient(180deg, #E0E2E5 0%, #F8F9FA 100%);
  font-size: 0;
  border-bottom: 1px solid #E8E9ED;
}
.footer-down span{
  display: inline-block;
  vertical-align: middle;
  font-size: 1.39rem;
  color: #303133;
  line-height: 1.94rem;
  width: 16.94rem;
  margin: 0 1.32rem;
}
.icon-google,.icon-appstore{
  width: 9.58rem;
  height: 3.33rem;
  cursor: pointer;
}
.icon-google{
  background-position: -31.94rem -99.86rem;
  margin-right: 1.39rem;
}
.icon-appstore{
  background-position: -22.36rem -99.86rem;
}
.icon-person{
  background-position: 0 -102.88rem;
  width: 11.94rem;
  height: 9.72rem;
}
.social-contact{
  padding-top: 1.94rem;
  padding-bottom: 1.74rem;
}
.link-group a{
  width: 2.78rem;
  height: 2.78rem;
  margin: 0 1.11rem;
}
.icon-facebook{
  background-position: -11.44rem -99.45rem;
}
.icon-twitter{
  background-position: -14.75rem -99.6rem;
}
.icon-play{
  background-position: -18.27rem -99.59rem;
}
.icon-instagram{
  background-position: -18.27rem -102.92rem;
}
.inner-link{
  margin: 1.18rem 0 0.83rem 0;
}
.inner-link a{
  color: #606266;
  font-size: 1.11rem;
  padding: 0 1.11rem;
}
.inner-link i{
  display: inline-block;
  vertical-align: top;
  width: 1px;
  height: 1.11rem;
  background-color: #E1E2E6;
  margin-top: 0.3rem;
}
.help-txt span{
  font-family: "SFProText-Regular", "SFProText";
  color: #606266;
  font-size: 0.97rem;
}
.help-txt span+span:before{
  content: '';
  width: 1px;
  height: 0.69rem;
  background-color: #E1E2E6;
  margin: 0 1.11rem;
  display: inline-block;
  vertical-align: middle;
}
footer .copyright .icon-logo_footer{
  width: 9.6rem;
  height: 1.4rem;
  background-position: -23.33rem -44.86rem;
  cursor: pointer;
}
.copyright p{
  color: #BABCC2;
  font-size: 0.97rem;
  padding: 0.4rem 0 1.11rem 0;
}
section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-0{
  margin-top: 0 !important;
}
/*main start*/
.buyer-bonus{
  display: none;
  position: fixed;
  z-index: 97;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../image/contri/img_1st_bonus.png');
}
.buyer-bonus-entry,.buyer-bonus-close{
  position: absolute;
}
.buyer-bonus {
  top: 52.5%;
  right: 8.5%;
  width: 150px;
  height: 173px;
}
.buyer-bonus-entry {
  bottom: 0;
  left: 0;
  right: 5%;
  height: 88%;
}
.buyer-bonus-close {
  top: 0;
  right: 0;
  width: 20%;
  height: 28px;
}
.btn-up {
  position: fixed;
  background-position: -4px -1190px;
  background-size: 800px 1600px;
  height: 60px;
  width: 60px;
  bottom: 200px;
  right: 80px;
  display: none;
}
.toast-message {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.5rem;
  position: fixed;
  bottom: 20px;
  z-index: 1003;
  left: 50%;
  color: #fff;
  font-size: 16px;
  line-height: 32px;
  padding: 12px 20px;
  max-width: 78vw;
  transform: translate3d(-50%,0,0);
}
.toast-loading {
  display: none;
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.5rem;
  position: fixed;
  top: 50%;
  z-index: 1003;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}

.toast-loading:after {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAYAAAAc0MJxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzNDRBMDA0NUI0MDExRThCQTVERDQwMTlGN0Q4NTBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVFOEM5OENBNUI0NTExRThCQTVERDQwMTlGN0Q4NTBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzM0NEEwMDI1QjQwMTFFOEJBNURENDAxOUY3RDg1MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzM0NEEwMDM1QjQwMTFFOEJBNURENDAxOUY3RDg1MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6vfKCgAAAILUlEQVR42uxcWWyV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) no-repeat;
  background-size: 100% 100%;
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  margin: 75px;
  transform-origin: center;
  -webkit-transform-origin: center;
  animation: rotating 1s linear infinite;
  -webkit-animation: rotating 1s linear infinite; /* Safari and Chrome */
}
.success-message {
  display: none;
  height: 3.42rem;
  padding: 2.22rem .75rem .67rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.44rem;
  position: fixed;
  top: 50%;
  z-index: 1003;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  font-size: 0.44rem;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 0.53rem;
  text-align: center;
}

.success-message:after {
  width: 1.22rem;
  height: 1.22rem;
  position: absolute;
  top: .67rem;
  left: 50%;
  margin-left: -.61rem;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAAAXNSR0IArs4c6QAAB4dJREFUeF7tnUmIHkUUx//lvu+74g7u4gKCiLiDXlzADS8uuKMHV8STIIi4HgRFFEUQERVEQTyoB5FcPEggE40QowlJjDHG6ETj6GjJf3w99PR0f13Lq+4ev3rwwcDU1r+vvlfvvXpVbTAgsdbuAKD82R7ANgC2ArC1fDjiv+XzD4BpAFMA/ig+xhj+PQgxfY7CWrsjgF0B7AZgF4GpMSRC3wzgVwCTxpgtGo2GtNE5YGstZ+Xe8uHfXQhn+E/8GGP4d2fSCWBrLfvZC8C+MlM7e8CajjizfwSw0RhjUw8kKWABuw+AAwB0NVtdmXEmrwOwISXoZICttVQDBwPYzvWJeyr3J4A1xhiqEHVRBywL16GyeKkPOGGDkwBWaS+IaoBFHXDG7g9Ard2EQOuapk7+QWa0in5WASGWwZEAdu4YSKrufgOwQsPiiAZsrd0TwGGKNmwqaL7t0pZeaYz52bdiuXwUYGvtgbKQxYxh6HW5AH4fOshgwNZaLmT7hXa8wOqtN8asChmzN2BZzI4QxyGkz4VaZyOAb31t5hDAXMzolY2j0Ptb4fPgXoDHTC00cfRSF86Ax2RBc52czgufE2AxxY5y7T2yHGO/xwI4BcDhYgLSeaGNvZO0/TsA2qp0ClYC+A7AYgDLADBG3IV842LCtQIWJ+K4xHYug+pnAbgEwBkRbjbd3c8BfAhgkQTjU8GmnfxVmzMyErBYDJxNqTy03QFcC+BKAHsok9gE4B0AbwL4Rbntojn+ipaNsizaAB8ioUbt8XFb6EaBW/zstfso2qM6IeRXZUtJu591xpjVTY02Apao2PEJAjdnA3gAAL3ALoXe2JMAPlPulEGhL5uicKMAHxOhC+ueYVsA94g6aNX9yhCK5giDauNZAH8p9sF9v6/r2qt9UAmW01vTEm4VPSPWgVabMe3Q2rhXto5i2inXpZc3L2g/D7AsbCcp7kQwZvEcgIO0nkSpnbUA7maQXak97owsqS54dYA52xh+1BDCfWnArjXjC7coQmZ4kxuqszIHsMzeE5U2KPlFvTzAmVudOJzJNyupC26kTpRncRUwNyo1dC8XtFcGpHPbfo3UyTcpLXxzdHEVMJ0KZtjEyoMAroptpOP6bwN4QqHPzcYYfmEzMgtYXGIubrFCO/fpBPZz7Lja6tOEu0/JTuZiN5NBVAbMVT52paeH9lYPTkQbPNf/0xm5WsHjW2uMoW6fA5izNzb75g7RZa4PNMRyXDteiBzYlDFmySxgcYtPiGyUgZv3SyHFyOZ6q87YxaUKAaKldJ9nVIS1lpuXtFlj5DYxd2LaGEpdmpcvRg6GWULrC8BHR4YLGc9lDFY75Bj5jMHVGepkbJox31DZZIxZXgDm7gEhhco5AJ4KrTzQevcD+DRibNPGmMVG0vbpvcXI4wAuiGkgQV0Gwxk542p+ssxIbke5yicAHnIt3FBugoD5s6aKCBUO+mPl0GboWIp6DIDfCaCckXMxgEc9Gub204WRe3zLCZjJ0dy5CBUG5V8LrZygHuHeLhui1eZfB8A4t6tcz2C6a+GacqsJmDu3zEIPleskkB5aX7PeKLjshzsa53p0yMD8Gx7lq0U3EHDszsXDAK6IGIRW1Ta4DEC9K/nLrn2y/GOuhWvKTRIwHQwepwoV2ounhVZWqtcGl93QKrjGs78vANC+D5UtBBzrIr+nEMMIfQDWc4F7FwDqU1+hBXKZb6VS+SkCjrWBPwp0MHga8wNZjE4FcGbAg6SEy+HQ4bgoYFxFlWkCPj0ytMgMGt+TRLRRb5CUp2IwnCnU5662amq4HBf32ZhxFCq2L8BMAnm+ZtR0Tx9xgNwFXDXAfagIQqR6qJM2yF3BVVMRfSxyDMrTJm2SJshdwuXY1gC4PFQ/8BaAvsw0RqluZR6BB+Su4XJoKmZaX44GD2XTfFrqAJnmUpP7W1QPNcVGTVAVR6NPV9kF8vnyJTDZuklSwGVfKq5y38EeF8ijZlkquOxTJdgzhHAlITNPbMJzQUkJVy1cya32IQTcfSGnhMvvWSfgzpYU3GWtLSNXdZEaLrHobBkJ4CFterZB7gKu+qbn0LbtmyB3AZdzTn3bnvHgoSWeVCF3BVc/8UTURKzLzGa0U6cKyOcFxnM9jZKZ4vqpUwJ4qMl/PKzC7Z4uJGnyHxP/cvqqzjGv+emrMotzAnb876Q+AVsA5yME8YBHHiFgrlo+BBMOefQhGJnF+RhXOODRx7gEMGdxPojoD9ntIKKyLi6GmY/SVr8whZSqapP5MHiZSL7OwFlHhF1nIKoiX8jRzjnsQo7SgpevlGmGHHeljECmC50vRZoPOf5SpKLNAVzrxY1Z3u1TvtaLYUVeEb6wr/UqQR6Hm1bbNe5/JXQvpitBHqcbV5tgp7lasQQ5Xw7qOs9D8oLz9bZ+794Ivl5rzG5i9VIL5QkeDFhMuHFY+JwXtDrNEQVYIOdL8kfo5GjAJWckv+ahBrQK4JJbnV9UUoGsBrhkxjGJJb9qR4CoAy6Bzi+LCrGDPWxsZm3yC8yvO/OBFlI2v7AvhFpgnfzKyUBwIdXyS1NDqEXU+T++9vdfb6fdpZm4p3sAAAAASUVORK5CYII=) no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  content: '';
  display: block;
}
@-webkit-keyframes rotating {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
.Modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
}
.Modal .content {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 50%;
  padding: 50px;
  border-radius: 3px;
  background: #fff;
  transform: translate(-50%, -30%) scale(0);
}
.Modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 18px;
  height: 18px;
  padding: 5px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background: #313131;
  color: #fff;
}
.Modal .close:before {
  content: "✕";
}
.Modal.is-visible {
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
  transition: background 0.35s;
  -webkit-transition: background 0.35s;
  transition-delay: 0.1s;
  z-index: 1000;
}
.Modal.is-visible .content {
  transform: translate(-50%, -30%) scale(1);
  -webkit-transform: translate(-50%, -30%) scale(1);
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
}
.primary-btn {
  background: #07BEB8;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
}
.primary-btn:active {
  background: #059590;
}
.cancel-btn {
  background: #F0F2F5;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #606266;
  text-align: center;
  cursor: pointer;
}
.disable-btn {
  background: #CBCED4;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  cursor: not-allowed;
}
.disable-btn:active {
  background: #CBCED4;
}

.card-bg-blue {
  position: absolute;
  top: 16px;
  right: 0;
  width: 85px;
  height: 123px;
  background: linear-gradient(90deg, #536aff  0%, #004eff  100%);
  opacity: .4;
  filter: blur(39px);
  z-index: -1;
}
.card-bg-cyan {
  position: absolute;
  top: 23px;
  right: 65px;
  width: 123px;
  height: 123px;
  background: linear-gradient(90deg, #00ffd9  0%, #00d0ff  100%);
  opacity: 0.4;
  filter: blur(39px);
  z-index: -1;
}
.card-bg-gem {
  position: absolute;
  top: 50px;
  right: -37px;
  width: 172px;
  height: 173px;
  background-image: url("../image/all/bg_gems_topup@2x.png");
  background-size: contain;
  z-index: -1;
}
.primary-btn {
  height: 60px;
  line-height: 60px;
  border-radius: 12px;
  font-size: 22px;
}
.cancel-btn {
  height: 60px;
  line-height: 60px;
  border-radius: 12px;
  font-size: 22px;
}
.disable-btn {
  height: 60px;
  line-height: 60px;
  border-radius: 12px;
  font-size: 22px;
}
/*modal*/
.modal, .modal-chapter, .modal-report, .modal-survey, .modal-download, .modal-account{
  display: none;
}
.modal-mask,.modal-chapter-mask, .modal-report-mask, .modal-survey, .modal-download-mask .modal-account-mask{
  background-color: rgba(0,0,0,.6);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
}
#search-mask {
  z-index: 98;
}
.modal-dialog,.modal-chapter-dialog,.modal-report-content, .modal-download-content, .modal-account-content, .modal-logout-content{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
  z-index: 999;
  overflow: hidden;
  background-color: #fff;
}
.modal-account-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.account-login {
  flex: auto;
}
.content_block{
  position: absolute;
  left: 0;
  background: #fff;
  width: 100%;
}
.modal-dialog, .modal-chapter-dialog, .modal-report-content, .modal-download-content, .modal-account-content, .modal-logout-content {
  width: 600px;
  padding: 20px;
  border-radius: 8px;
}
.modal-content-title {
  font-size: 25px;
  font-family: SFProText-Bold, SFProText;
  font-weight: bold;
  color: #303133;
  line-height: 29px;
}
.modal-content-body{
  min-height: 92px;
  font-size: 20px;
  font-family: SFProText-Regular, SFProText;
  font-weight: 400;
  color: #303133;
  line-height: 30px;
  margin-top: 16px;
  margin-bottom: 33px;
}
.modal-content-footer {
  display: flex;
  justify-content: space-between;
}
.modal-content-btn {
  width: 240px;
}

.modal-account-content .icon-back {
  position: absolute;
  top: 6px;
  left: 22px;
}
.modal-account-content .icon-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
}
.modal-account-content .boyandgirl {
  height: 160px;
  font-size: 0;
}
.modal-account-content .scene-title {
  display: inline-block;
  height: 160px;
  width: 188px;
  line-height: 160px;
  transition: width 300ms;
  -webkit-transition: width 300ms;
  font-size: 34px;
  font-family: SFProText-Bold, SFProText;
  font-weight: bold;
  color: #303133;
}
.modal-account-content .scene-title.no-text {
  width: 164px;
}
.modal-account-content .icon-boyandgirl {
  vertical-align: top;
}
.account-login .account-login-logo {
  text-align: center;
  padding: 6px;
}
.account-login .account-login-logo .icon-logo {
  position: initial;
  left: initial;
  top: initial;
}
.account-login .account-login-text {
  height: 48px;
  font-size: 20px;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #606266;
  line-height: 30px;
  padding: 8px;
  text-align: center;
}
.modal-account-content .account-login-recently {
  padding: 48px 70px 22px;
}
.modal-account-content .recently-btn {
  position: relative;
  padding-left: 70px;
  padding-right: 70px;
  text-align: left;
  font-size: 20px;
}
.pc-search {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 20.83rem;
  height: 2.8rem;
  background: #FFFFFF;
  border-radius: 1.32rem;
  border: 0.07rem solid #000000;
  padding: 0.66rem 6.88rem 0.66rem 1.04rem;
}
.pc-search-w{
  width: 23.83rem;
}
.recently-btn .icon {
  position: absolute;
  top: 12px;
  left: 22px;
  width: 34px;
  height: 34px;
}
.icon-favorite{
  background-size: 665px 1330px;
  background-position: -564px -404px;
  width: 33px;
  height: 33px;
}
.active .icon-favorite {
  background-position: -564px -438px;
  width: 33px;
  height: 33px;
}
.active .icon-favorite-plus {
  background-position: -56px -1372px;
}
.icon-Facebook-white {
  background-size: 665px 1330px;
  background-position: -631px -727px;
}
.icon-Google-white {
  background-size: 665px 1330px;
  background-position: -593px -727px;
}
.icon-Twitter-white {
  background-size: 665px 1330px;
  background-position: -552px -727px;
}
.icon-Line-white {
  background-size: 665px 1330px;
  background-position: -514px -727px;
}
.icon-Apple-white{
  width: 1.33rem;
  height: 1.33rem;
  background-image: url('../image/ic_login_apple_white.png') !important;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon-modal-close{
  width: 22px;
  height: 22px;
  background-size: 665px 1330px;
  background-position: -534px -415px;
}
.icon-back{
  width: 33px;
  height: 33px;
  background-size: 665px 1330px;
  background-position: -294px -305px;
  margin: 16px 0;
}
.icon-boyandgirl {
  width: 226px;
  height: 160px;
  background-size: 665px 1330px;
  background-position: -437px -483px;
}
.recently-btn .icon-right-white {
  position: absolute;
  top: 20px;
  left: initial;
  right: 22px;
  width: 22px;
  height: 22px;
  background-size: 665px 1330px;
  background-position: -449px -732px;
}
.modal-account-content .account-login-or {
  position: relative;
  height: 52px;
  padding: 0 70px;
}
.account-login-or::before {
  content: "";
  display: block;
  height: 22px;
  border-bottom: 1px solid #F0F2F5;
}
.account-login-or::after {
  content: "OR";
  position: absolute;
  top: 12px;
  left: 260px;
  display: block;
  width: 52px;
  height: 20px;
  font-size: 16px;
  color: #BABCC2;
  line-height: 20px;
  text-align: center;
  background: #fff;
}
.modal-account-content .account-login-types {
  display: flex;
  justify-content: space-between;
  padding: 0 70px;
}
.account-login-types .type-item {
  cursor: pointer;
  width: 70px;
  height: 70px;
}
.account-login-types .type-item .iconFontIconSvg{
    width: 100%;
    height: 100%;
  }
.icon-Facebook {
  width: 70px;
  height: 70px;
  background-size: 665px 1330px;
  background-position: -597px -651px;
}
.icon-Google {
  width: 70px;
  height: 70px;
  background-size: 665px 1330px;
  background-position: -525px -651px;
}
.icon-Twitter {
  width: 70px;
  height: 70px;
  background-size: 665px 1330px;
  background-position: -454px -651px;
}
.icon-Line {
  width: 70px;
  height: 70px;
  background-size: 665px 1330px;
  background-position: -383px -651px;
}
.icon-Apple{
  width: 70px;
  height: 70px;
  background-image: url('../image/ic_login_apple.png') !important;
  background-repeat: no-repeat;
  background-size: cover;
}
.modal-account-content .account-login-withemail {
  padding-top: 22px;
  height: 50px;
  font-size: 16px;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #BABCC2;
  line-height: 28px;
  text-align: center;
}
.modal-account-content .icon-email-login {
  margin-left: 3px;
  vertical-align: initial;
  width: 16px;
  height: 16px;
  background-size: 665px 1330px;
  background-position: -519px -414px;
}
.modal-account-content .continue-agree {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: SFProText-Regular, SFProText;
  font-weight: 400;
  color: #BABCC2;
  line-height: 20px;
  padding-top: 32px;
  background-color: #fff;
}
.account-vcode {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 70px;
}
.account-form .account-vcode .account-code {
  width: 100%;
  padding: 0;
  height: 0px;
  font-size: 35px;
  overflow: hidden;
  border: none;
  outline: none;
  opacity: 0;
  margin-left: -100%;
  -webkit-tap-highlight-color: transparent;
}
.code-get {
  padding: 0 70px;
}
.code-get.active {
  color: #07BEB8;
}
.code-hint {
  font-size: 12px;
  font-family: SFProText-Regular, SFProText;
  font-weight: 400;
  color: #FF3F3F;
  line-height: 14px;
}
.record-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* monior cursor */
.account-active:after {
  content: ' ';
  display: inline-block;
  width: 2px;
  height: 34px;
  background: #07BEB8;
  animation: .8s disappear linear infinite;
}
.account-form {
  position: relative;
  display: none;
  margin-bottom: 21px;
}
.account-form .relative::after {
  content: "";
  display: block;
  width: 100%;
  height: 11px;
}
.account-form input {
  outline: 0;
  background: #F8F9FA;
  width: 100%;
  border: 1px solid #F0F2F5;
  margin: 0;
  padding: 21px;
  box-sizing: border-box;
  font-size: 20px;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #303133;
  border-radius: 11px;
}
.account-form input.error {
  border-color: #FF3F3F;
}
.account-form input:focus {
  background: #fff;
  border-color: #07BEB8;
}
.account-form .validate-text {
  margin-top: 6px;
  margin-left: 22px;
  font-size: 16px;
  font-family: SFProText-Regular, SFProText;
  font-weight: 400;
  color: #FF3F3F;
  line-height: 20px;
}
.account-form .primary-btn {
  margin-top: 11px;
}

.account-form .forgot-title {
  padding-top: 60px;
  height: 102px;
  font-size: 34px;
  font-family: SFProText-Bold, SFProText;
  font-weight: bold;
  color: #303133;
  line-height: 41px;
}
.account-form .forgot-desc {
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #606266;
  padding-top: 8px;
  padding-bottom: 34px;
  font-size: 20px;
  line-height: 30px;
}

.account-form .code-title {
  font-family: SFProText-Bold, SFProText;
  font-weight: bold;
  color: #303133;
  padding-top: 60px;
  font-size: 34px;
  line-height: 41px;
}

.account-form .code-desc {
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #606266;
  padding-top: 8px;
  padding-bottom: 34px;
  font-size: 20px;
  line-height: 30px;
}
.code-hint {
  font-size: 16px;
  line-height: 20px;
}

.account-labels {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  margin-top: 24px;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}
.account-labels2 .account-label {
  background: #F8F9FA;
  border: 1px solid #F0F2F5;
  float: left;
  color: #313131;
  text-align: center;
  height: 58px;
  line-height: 58px;
  width: 58px;
  font-size: 28px;
  border-radius: 11px;
}
.account-labels2 .account-label.active {
  background: #fff;
  border: 1px solid #07BEB8;
}
.code-get {
  font-size: 14px;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #BABCC2;
  line-height: 16px;
  padding-bottom: 24px;
}

.modal-account-content img, .modal-account-content span.email {
  position: initial
}

.account-form .check-email-title {
  font-family: SFProText-Bold, SFProText;
  font-weight: bold;
  color: #303133;
  padding-top: 60px;
  height: 102px;
  font-size: 34px;
  line-height: 40px;
}
.account-form .check-email-desc {
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #606266;
  padding-top: 8px;
  padding-bottom: 34px;
  font-size: 20px;
  line-height: 30px;
}
.account-form .check-email-desc .email,.account-form .code-desc .email {
  color: #303133;
}
.account-form .check-email-hint {
  font-family: SFProText-Regular, SFProText;
  font-weight: 400;
  color: #A0A3A8;
  padding-top: 6px;
  padding-bottom: 34px;
  font-size: 16px;
  line-height: 30px;
}
.account-form #retry-btn {
  position: relative;
  margin-top: 28px;
}
.account-form #retry-btn::before {
  content: 'Not received the mail?';
  display: block;
  position: absolute;
  top: -28px;
  left: 0;
  font-size: 16px;
  font-family: SFProText-Regular, SFProText;
  font-weight: 400;
  color: #FF3F3F;
  line-height: 20px;
}
@keyframes disappear {
  100% {
    opacity: 0;
  }
}
.icon-clock {
  width: 22px;
  height: 22px;
  background-size: 665px 1330px;
  background-position: -506px -445px;
  margin-top: -5px;
  margin-right: 12px;
}
.password-wrapper .icon-invisible {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 17px;
  right: 20px;
  background-size: 665px 1330px;
  background-position: -373px -730px;
}
.password-wrapper .visible {
  background-size: 665px 1330px;
  background-position: -410px -730px;
}
.account-form .account-message {
  margin: 20px 0 0;
  color: #b3b3b3;
  font-size: 20px;
}
.account-form .account-message a {
  color: #07BEB8;
  text-decoration: none;
}
.account-form .account-message .forgot-mode {
  float: right;
}
.account-form .page-2-2 {
  display: none;
}
.account-form .code-form {
  display: none;
}
.account-form .forgot-form {
  display: none;
}
.account-form .check-email-form {
  display: none;
}

.pc-search .input-search{
  font-size: 0.97rem;
  font-family: SFProText-Regular, SFProText;
  font-weight: 400;
  color: #303133;
  line-height: 1.36rem;
}
.pc-search .search-btn {
  position: absolute;
  top: .42rem;
  right: 5.28rem;
  width: 1.67rem;
  height: 1.67rem;
  cursor: pointer;
}
.pc-search .btn-cancel {
  position: absolute;
  top: .63rem;
  right: .69rem;
  width: 3.95rem;
  height: 1.18rem;
  font-size: 0.97rem;
  font-family: SFProText-Medium, SFProText;
  font-weight: 500;
  color: #9FA2A8;
  line-height: 1.36rem;
  padding-left: .69rem;
  border-color: #E8E9ED;
  border-left: 1px solid #E8E9ED;
  cursor: pointer;
  background-color: #fff;
}
.pc-search .btn-cancel:hover {
  background-color: #fff;
  border-color: #E8E9ED;
}
#cookies_popup_container {
  display: none;
}
#cookies_popup_container {
  position: fixed;
  background: #FFFFFF;
  z-index: 9999;
  color: #212121;
  font-size: 0;
  width: 580px;
  height: 120px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  bottom: 43px;
  right: 11px;
  padding: 28px;
}
#cookies_popup_container p, #cookies_popup_container .btn-agree{
  display: inline-block;
  vertical-align: middle;
}
#cookies_popup_container p>a{
  border-bottom: 1px solid #212121;
}
#cookies_popup_container .btn-agree {
  text-align: center;
}
#cookies_popup_container p{
  font-size: 16px;
  padding-right: 28px;
  width: calc(100% - 88px);
}
#cookies_popup_container .btn-agree {
  font-size: 16px;
  width: 88px;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  color: #FFFFFF;
}
section .img-text__tag span:not(:last-child):after, section .img-text__label span:not(:last-child):after, section .book-tag span:not(:last-child):after {
  content: '/';
  margin-left: 5px;
  margin-right: 5px;
  vertical-align: baseline;
  display: inline-block;
}

/*tag -series*/
.exclusive-tag,.tag,.new-tag,.discount-tag,.sp-tag{
  font-size: 0.73rem;
  line-height: 1.13rem;
  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
  border-radius: 0.14rem;
  background: #07BEB8;
  color: #fff;
}
.exclusive-tag,.new-tag,.discount-tag,.sp-tag{
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
}
.new-tag{
  color: #45E8E3;
  background: #303133;
}
.discount-tag{
  background: #FB5012;
  color: #fff;
}
.rank-tag{
  position: absolute;
  top: 0;
  left: 0;
  width: 2.08rem;
  height: 2.08rem;
  padding-top: 0.4rem;
  padding-left: 0.5rem;
  text-align: left;
  font-size: 1.94rem;
  line-height: 1.94rem;
  color: #FFFFFF;
  border-radius: 0.11rem 0 0 0;
  font-family: "Gilroy-ExtraBoldItalic";
  -webkit-text-stroke: 0.1rem #303133;
  background: url("../../image/all/bg-rank.png") no-repeat;
  background-size: contain;
}
.sub-tag{
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 1.18rem;
  padding-left: 0.5rem;
  padding-right: 0.2rem;
  color: #fff;
  font-size: 0.73rem;
  border-radius: 0.14rem;
  background: transparent;
  overflow: hidden;
  font-weight: normal;
}
.sub-tag:before{
  content: '';
  display: block;
  position: absolute;
  left: 0.2rem;
  top: 0;
  width: 12rem;
  height: 1.18rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.28rem 0 0 0;
  transform: skew(348deg);
}
.sub-tag>span{
  position: relative;
  z-index: 2;
}
.fb-ti-Dialog-pc{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999999999;
  background: rgba(0, 0, 0, 0.3);
}
.fb-ti-Dialog-pc .fb-ti-Dialog-el{
    width: 360px;
    height: 220px;
    background: #fff;
    border-radius: 16px;
    position: absolute;
    top: -12rem;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 25px 25px 10px !important;
  }
.fb-ti-Dialog-pc .fb-ti-Dialog-el .modal-close_right {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 2;
  padding: 0.266667rem;
}
.fb-ti-Dialog-pc .fb-ti-Dialog-el .modal-close_right {
  padding: 2px 3px 0 0;
}

.fb-ti-Dialog-pc .fb-ti-Dialog-el .dialog-content {
  font-family: SFProText-Regular-Regular, SFProText-Regular;
  line-height: 20px;
  width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
}

.fb-ti-Dialog-pc .fb-ti-Dialog-el .dialog-emai {
  color: #5286EE;
}

.fb-ti-Dialog-pc .fb-ti-Dialog-el .dialog-content-title {
  font-family: SFProText-Bold-Regular, SFProText-Bold;
  font-size: 18px;
  margin-top: 7px;
  margin-bottom: 5px;
}
.fb-ti-Dialog-pc .fb-ti-Dialog-el .dialog-button{
  width: 100%;
  height: 44px;
  border: none;
  margin-top: 1.2rem;
  background: #07BEB8;
  border-radius: 8px 8px 8px 8px;
  font-size: 14px;
  font-family: SFProText-Medium-Regular,
    SFProText-Medium;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 16px;
  cursor: pointer;
}
.fb-ti-Dialog-pc .fb-ti-Dialog-el .icon-modal-close{
  display: block !important;
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
}