/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-mobile-vip-activity-common/node_modules/@music/ct-income-uikit/lib/components/image/index.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
img[src=""],
img:not([src]) {
  opacity: 0;
}
img.lazyload {
  transition: opacity 0.6s ease-in-out;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-mobile-vip-activity-common/node_modules/@music/ct-income-uikit/lib/components/layer/index.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.layer-container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}
.layer-container .mask {
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
}
.layer-container button.close {
  border-radius: 50%;
  position: relative;
}
.layer-container button.close:active {
  opacity: 0.8;
}
.layer-container button.close::after {
  content: '';
  position: absolute;
  background-size: cover;
}
.layer-container .content {
  position: relative;
  z-index: 1000;
}
.layer-container.modal {
  align-items: center;
  justify-content: center;
}
.layer-container.modal .layer {
  opacity: 0;
  margin-bottom: 72px;
}
.layer-container.modal button.close {
  width: 32px;
  height: 32px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: -72px;
  backdrop-filter: blur(20px);
  background-color: #999;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .layer-container.modal button.close {
    background-color: rgba(255, 255, 255, 0.36);
  }
}
.layer-container.modal button.close::after {
  background-image: url("data:image/svg+xml,%3Csvg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M21.913 10.087c.26.26.26.68 0 .94L16.94 16l4.974 4.973a.665.665 0 1 1-.94.94L16 16.942l-4.973 4.973a.665.665 0 0 1-.94-.94L15.058 16l-4.972-4.972a.665.665 0 1 1 .94-.94L16 15.06l4.972-4.973c.26-.26.681-.26.94 0z\" fill=\"%23fff\"/%3E%3C/svg%3E");
}
.layer-container.sheet {
  justify-content: flex-end;
}
.layer-container.sheet .layer {
  transform: translateY(100%);
}
.layer-container.sheet .content {
  position: relative;
  border-radius: 20px 20px 0 0;
  background: #fff;
  padding-bottom: var(--safe-area-inset-bottom);
}
.layer-container.sheet button.close {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 11px;
  right: 16px;
  background-color: rgba(0, 0, 0, 0.05);
}
.layer-container.sheet button.close::after {
  background-image: url("data:image/svg+xml,%3Csvg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M8.838 8.838a1 1 0 0 1 1.415 0l3.746 3.746 3.748-3.746a1 1 0 0 1 1.498 1.32l-.083.095-3.748 3.746 3.748 3.748.083.095a1 1 0 0 1-1.498 1.32L14 15.414l-3.746 3.748a1 1 0 0 1-1.498-1.32l.083-.095L12.584 14l-3.746-3.746-.083-.095a1 1 0 0 1 .083-1.32z\" fill=\"%23666\"/%3E%3C/svg%3E");
}
.layer-container .mask,
.layer-container .layer {
  transition: all 0s ease-out;
  transition-duration: inherit;
}
.layer-container.show {
  pointer-events: initial;
}
.layer-container.show .mask {
  background-color: rgba(0, 0, 0, 0.2);
}
.layer-container.show.modal .layer {
  opacity: 1;
}
.layer-container.show.sheet .layer {
  transform: translateY(0);
}
.layer-container,
.layer-container .mask,
.layer-container button.close::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.layer-container,
.layer-container .layer,
.layer-container .content {
  display: flex;
  flex-direction: column;
}
.keyboard-active .layer-container.sheet .content {
  padding-bottom: 0;
}

/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-mobile-vip-activity-common/lib/components/count-down/index.css ***!
  \*******************************************************************************************************************************************************************************************************************************************/
.countdown-text {
  font-size: 13px;
  color: #ffdadb;
  text-align: center;
}

/*!*****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-mobile-vip-activity-common/lib/components/vip-days/index.css ***!
  \*****************************************************************************************************************************************************************************************************************************************/
.vip-days-container {
  position: absolute;
  left: 214px;
  top: 141px;
  width: 100px;
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: #fff7ca;
}
.vip-days-container .day-text {
  font-family: 'Outfit', sans-serif;
  font-size: 37px;
  font-weight: bold;
}
.vip-days-container .day-unit {
  font-size: 17px;
  font-family: 'FZLanTingHeiS-H-GB', sans-serif;
  font-weight: 400;
  margin-bottom: 5px;
  margin-left: 2px;
}

/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-mobile-vip-activity-common/lib/components/marketing-modal/index.css ***!
  \************************************************************************************************************************************************************************************************************************************************/
.marketing-modal.layer-container.show .mask {
  background-color: rgba(0, 0, 0, 0.7);
}
.marketing-modal .container {
  width: 375px;
  position: relative;
}
.marketing-modal .container .background {
  width: 375px;
  height: auto;
}
.marketing-modal .container .title {
  position: absolute;
  width: 375px;
  top: 0;
}
.marketing-modal .container .title .textline {
  font-family: 'FZLanTingHeiS-H-GB', sans-serif;
  font-size: 30px;
  color: #fff7ca;
  line-height: 38px;
  text-align: center;
}
.marketing-modal .container .vip-day-wrap {
  position: absolute;
  left: 229px;
  top: 154px;
  width: 95px;
  height: 46px;
  color: #ea2323;
}
.marketing-modal .container .vip-day-wrap .day-text {
  font-size: 36px;
}
.marketing-modal .container .vip-day-wrap .day-unit {
  font-size: 21px;
}
.marketing-modal .container .action {
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.marketing-modal .time-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #ffdadb;
}

/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-income-uikit/lib/components/layer/index.css ***!
  \************************************************************************************************************************************************************************************************************************/
.layer-container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}
.layer-container .mask {
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
}
.layer-container button.close {
  border-radius: 50%;
  position: relative;
}
.layer-container button.close:active {
  opacity: 0.8;
}
.layer-container button.close::after {
  content: '';
  position: absolute;
  background-size: cover;
}
.layer-container .content {
  position: relative;
  z-index: 1000;
}
.layer-container.modal {
  align-items: center;
  justify-content: center;
}
.layer-container.modal .layer {
  opacity: 0;
  margin-bottom: 72px;
}
.layer-container.modal button.close {
  width: 32px;
  height: 32px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: -72px;
  backdrop-filter: blur(20px);
  background-color: #999;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .layer-container.modal button.close {
    background-color: rgba(255, 255, 255, 0.36);
  }
}
.layer-container.modal button.close::after {
  background-image: url("data:image/svg+xml,%3Csvg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M21.913 10.087c.26.26.26.68 0 .94L16.94 16l4.974 4.973a.665.665 0 1 1-.94.94L16 16.942l-4.973 4.973a.665.665 0 0 1-.94-.94L15.058 16l-4.972-4.972a.665.665 0 1 1 .94-.94L16 15.06l4.972-4.973c.26-.26.681-.26.94 0z\" fill=\"%23fff\"/%3E%3C/svg%3E");
}
.layer-container.sheet {
  justify-content: flex-end;
}
.layer-container.sheet .layer {
  transform: translateY(100%);
}
.layer-container.sheet .content {
  position: relative;
  border-radius: 20px 20px 0 0;
  background: #fff;
  padding-bottom: var(--safe-area-inset-bottom);
}
.layer-container.sheet button.close {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 11px;
  right: 16px;
  background-color: rgba(0, 0, 0, 0.05);
}
.layer-container.sheet button.close::after {
  background-image: url("data:image/svg+xml,%3Csvg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M8.838 8.838a1 1 0 0 1 1.415 0l3.746 3.746 3.748-3.746a1 1 0 0 1 1.498 1.32l-.083.095-3.748 3.746 3.748 3.748.083.095a1 1 0 0 1-1.498 1.32L14 15.414l-3.746 3.748a1 1 0 0 1-1.498-1.32l.083-.095L12.584 14l-3.746-3.746-.083-.095a1 1 0 0 1 .083-1.32z\" fill=\"%23666\"/%3E%3C/svg%3E");
}
.layer-container .mask,
.layer-container .layer {
  transition: all 0s ease-out;
  transition-duration: inherit;
}
.layer-container.show {
  pointer-events: initial;
}
.layer-container.show .mask {
  background-color: rgba(0, 0, 0, 0.2);
}
.layer-container.show.modal .layer {
  opacity: 1;
}
.layer-container.show.sheet .layer {
  transform: translateY(0);
}
.layer-container,
.layer-container .mask,
.layer-container button.close::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.layer-container,
.layer-container .layer,
.layer-container .content {
  display: flex;
  flex-direction: column;
}

/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/tms/modal.less ***!
  \*******************************************************************************************************************************************************************************************************************************************/
.exit-detention-modal.show .mask {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.exit-detention-modal .modal-content > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: top;
}
.exit-detention-modal .modal-content > img[src=""],
.exit-detention-modal .modal-content > img:not([src]) {
  opacity: 0;
}
.exit-detention-modal .modal-content {
  width: 87.46667vw;
  padding: 11.73333vw;
  height: 87.46667vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exit-detention-modal .count-down {
  position: absolute;
  bottom: 5.33333vw;
  font-size: 3.46667vw;
  color: #FFDADB;
  text-align: center;
}
.exit-detention-modal button {
  border: none;
}
.exit-detention-modal button:active {
  opacity: 0.8;
}
.exit-detention-modal .action {
  position: relative;
  display: flex;
  margin-top: auto;
  flex-direction: column;
}
.exit-detention-modal .action .method-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9.6vw;
}
.exit-detention-modal .action .method-box .alipay,
.exit-detention-modal .action .method-box .wechat {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 8vw;
  line-height: 4.26667vw;
  font-size: 3.46667vw;
}
.exit-detention-modal .action .method-box .alipay:last-of-type,
.exit-detention-modal .action .method-box .wechat:last-of-type {
  margin-right: 0;
}
.exit-detention-modal .action .method-box .alipay i,
.exit-detention-modal .action .method-box .wechat i {
  position: relative;
  box-sizing: border-box;
  width: 4vw;
  height: 4vw;
  border-radius: 26.66667vw;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-right: 1.06667vw;
}
.exit-detention-modal .action .method-box .alipay i::before,
.exit-detention-modal .action .method-box .wechat i::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.13333vw;
  height: 2.13333vw;
  border-radius: 5.33333vw;
}
.exit-detention-modal .action .method-box .market-text {
  height: 5.33333vw;
  font-size: 3.73333vw;
  line-height: 5.33333vw;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  color: #FFFFFF;
  text-shadow: 0px 1px 4vw 0px rgba(0, 0, 0, 0.1);
}
.exit-detention-modal .action button {
  width: 64vw;
  margin-right: 2.13333vw;
  line-height: 1.4;
  font-size: 4.26667vw;
  height: 10.66667vw;
  border-radius: 26.66667vw;
  font-weight: 500;
}
.exit-detention-modal .action button:last-of-type {
  margin-right: 0;
}
.exit-detention-modal.layer-container.modal button.close {
  bottom: -13.86667vw;
}
.exit-detention-modal.paying .action button {
  opacity: 0.6;
  pointer-events: none;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/@music/ct-ksong-guide/dist/index.less ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
.m-guide-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}
.m-guide-wrap {
  box-sizing: border-box;
  position: absolute;
  width: 234px;
  height: 80px;
  background-image: url(https://s7.music.126.net/6538b64e6b18124c780d0780/76a694e090b43eca8a2b.png);
  background-repeat: no-repeat;
  background-size: contain;
  top: 10px;
  right: 12px;
  padding-left: 37px;
  padding-top: 22px;
}
.m-guide-wrap p {
  font-size: 16px;
  color: #fff;
  line-height: 24px;
}
.guidemask-enter {
  opacity: 0.1;
}
.guidemask-enter.guidemask-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-out;
}
.guidemask-appear {
  opacity: 0.1;
}
.guidemask-appear.guidemask-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-out;
}
.guidemask-exit {
  opacity: 1;
}
.guidemask-exit.guidemask-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-ksong-guide/dist/index.css ***!
  \*******************************************************************************************************************************************************************************************************/
.m-guide-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}
.m-guide-wrap {
  box-sizing: border-box;
  position: absolute;
  width: 234px;
  height: 80px;
  background-image: url(https://s7.music.126.net/6538b64e6b18124c780d0780/76a694e090b43eca8a2b.png);
  background-repeat: no-repeat;
  background-size: contain;
  top: 10px;
  right: 12px;
  padding-left: 37px;
  padding-top: 22px;
}
.m-guide-wrap p {
  font-size: 16px;
  color: #fff;
  line-height: 24px;
}
.guidemask-enter {
  opacity: 0.1;
}
.guidemask-enter.guidemask-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-out;
}
.guidemask-appear {
  opacity: 0.1;
}
.guidemask-appear.guidemask-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-out;
}
.guidemask-exit {
  opacity: 1;
}
.guidemask-exit.guidemask-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@music/ct-income-uikit/lib/base.css ***!
  \******************************************************************************************************************************************************************************************************/
.flex {
  display: flex;
  align-items: center;
}
.flex.column {
  flex-direction: column;
}
.flex.center {
  justify-content: center;
}
.fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.radius-6 {
  border-radius: 6px;
}
.radius-8 {
  border-radius: 8px;
}
.radius-10 {
  border-radius: 10px;
}
.hairline-x,
.hairline-y {
  display: block;
  background-color: rgba(0, 0, 0, 0.1);
}
.hairline-x {
  height: 1px;
}
.hairline-y {
  width: 1px;
}
.hairline-border::after {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transform-origin: top left;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
button {
  outline: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
html {
  --safe-area-inset-top: 0;
  --safe-area-inset-bottom: 0;
}
html.ios {
  --safe-area-inset-top: constant(safe-area-inset-top);
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: constant(safe-area-inset-bottom);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}
@media only screen and (device-width: 375px) and (device-height: 812px) {
  html.ios {
    --safe-area-inset-top: 44px;
    --safe-area-inset-bottom: 34px;
  }
}
@media only screen and (device-width: 414px) and (device-height: 896px) {
  html.ios {
    --safe-area-inset-top: 48px;
    --safe-area-inset-bottom: 34px;
  }
}
@media only screen and (device-width: 390px) and (device-height: 844px) {
  html.ios {
    --safe-area-inset-top: 47px;
    --safe-area-inset-bottom: 34px;
  }
}
@media only screen and (device-width: 428px) and (device-height: 926px) {
  html.ios {
    --safe-area-inset-top: 47px;
    --safe-area-inset-bottom: 34px;
  }
}
@media only screen and (device-width: 393px) and (device-height: 852px) {
  html.ios {
    --safe-area-inset-top: 59px;
    --safe-area-inset-bottom: 34px;
  }
}
@media only screen and (device-width: 430px) and (device-height: 932px) {
  html.ios {
    --safe-area-inset-top: 59px;
    --safe-area-inset-bottom: 34px;
  }
}