@-webkit-keyframes fadeOutDown { 0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; } }
.tarot-index .headerbox { background: linear-gradient(180deg, #af94e2 0%, #ffffff 60%, #ffffff 100%); }

.tarot-block { background: url(../skin_img/tarot/index/bg.jpg) no-repeat; background-size: 100% auto; overflow: hidden; margin-bottom: -0.3rem; }
.tarot-block:after { content: ''; display: block; width: 100%; height: 0.3rem; background: url(../skin_img/tarot/index/bg.jpg) no-repeat left bottom; background-size: 100% auto; }
.tarot-block .text { width: 6.8rem; font-size: 0.32rem; line-height: 0.48rem; color: #eee6fa; margin: 2.46rem auto 0.6rem; text-align: justify; }
.tarot-block .list { padding-bottom: 0.1rem; }
.tarot-block .item { display: inline-block; vertical-align: top; width: 2.2rem; height: 0.76rem; line-height: 0.76rem; text-align: center; color: #fff; font-size: 0.32rem; background: #6f25cf; background-size: 100% 100%; margin-left: 0.22rem; margin-bottom: 0.4rem; border-radius: 0.38rem; }

.card-list { position: relative; z-index: 2; width: 1.4rem; height: 2.12rem; margin: 0 auto 0.1rem; }
.card-list .card { width: 1.4rem; height: 2.12rem; position: absolute; left: 0; top: 0; z-index: 9; cursor: pointer; -webkit-transition: transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.4s; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
.card-list .card.checked { display: none; }
.card-list .card-pic, .card-list .card-pic img { width: 100%; height: 100%; }
.card-list .card-pic { position: relative; }
.card-list .card-pic.active { width: 1.4rem; height: 2.12rem; animation: fadeOutDown 0.5s both; }

.select-main { background: #f7f2fc url(../skin_img/tarot/select/bg.jpg) no-repeat; background-size: 100% auto; -webkit-tap-highlight-color: transparent; }

.select-title { text-align: center; padding: 0.4rem 0; }
.select-title .title { font-size: 0.44rem; font-weight: bold; color: #3a1a80; }
.select-title .tips { font-size: 0.28rem; line-height: 0.32rem; color: #4a3d66; margin-top: 0.16rem; }
.select-title .icon-tips { display: inline-block; vertical-align: top; width: 0.32rem; height: 0.32rem; background: url(../skin_img/tarot/select/tip.png) no-repeat; background-size: 100% 100%; margin-left: 0.1rem; }

.select-block { overflow: hidden; padding-bottom: 0.56rem; }
.select-block.selected .select-head { height: 0; opacity: 0; visibility: hidden; }
.select-block.selected .select-foot1 { height: 0; opacity: 0; }
.select-block.selected .select-foot2 { height: 1.6rem; opacity: 1; }

.select-tips { text-align: center; font-size: 0.32rem; line-height: 0.6rem; margin-top: 0.6rem; margin-bottom: 0.5rem; position: relative; color: #333; }
.select-tips .count { display: inline-block; vertical-align: top; font-size: 0.48rem; font-weight: bold; line-height: 1.2; margin: 0 0.06rem; color: #e12246; }

.select-head { height: 3.6rem; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.select-body { height: 3.4rem; position: relative; z-index: 1; }
.select-body .item { position: absolute; top: 0; width: 1.4rem; height: 2.12rem; -webkit-perspective: 150rem; -moz-perspective: 150rem; perspective: 150rem; }
.select-body .item.on .card-front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.select-body .item.on .card-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.select-body .item1 { left: 0.9rem; }
.select-body .item2 { left: 3.05rem; }
.select-body .item3 { left: 5.2rem; }
.select-body .name, .select-body .title { font-size: 0.24rem; line-height: 0.36rem; color: #333333; margin: 0 -0.2rem; text-align: center; }
.select-body .name { white-space: nowrap; margin-top: 0.08rem; margin-bottom: 0.04rem; font-weight: bold; }
.select-body .title { color: #5c29cc; line-height: 0.32rem; }
.select-body .card-front, .select-body .card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.3s ease-in-out; }
.select-body .card-front { position: relative; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.select-body .card-back { position: absolute; left: 0; right: 0; top: 0; }
.select-body .card { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0 auto; }
.select-body .card-num { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 0.6rem; line-height: 0.8rem; color: #ffffff; margin-top: -0.42rem; }
.select-body .card-pic { display: block; width: 100%; height: 100%; }

.select-body4 { height: 6.8rem; }
.select-body4 .item { top: 3.4rem; }
.select-body4 .item1 { left: 3.05rem; }
.select-body4 .item2 { left: 0.9rem; }
.select-body4 .item3 { left: 5.2rem; }
.select-body4 .item4 { top: 0; left: 3.05rem; }

.select-foot { padding: 0 0.8rem; overflow: hidden; text-align: center; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; overflow: hidden; }
.select-foot .txt { font-size: 0.28rem; line-height: 0.42rem; color: #666666; }
.select-foot .btn-wrap { text-align: center; margin-top: 0.32rem; }
.select-foot .btn { display: inline-block; vertical-align: top; width: 5.1rem; height: 0.8rem; line-height: 0.76rem; text-align: center; background-color: #9666cc; font-size: 0.32rem; font-weight: 500; color: #ffffff; box-shadow: 0 0.04rem 0.04rem rgba(76, 30, 141, 0.3), inset 0 0.06rem 0.06rem rgba(236, 220, 255, 0.2), inset 0 -0.06rem 0.06rem rgba(133, 70, 204, 0.42); border-radius: 0.4rem; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }

.select-foot2 { height: 0; opacity: 0; }

.tarot-list { background-color: #fff; padding: 0.5rem 0.2rem 0.2rem; }
.tarot-list:after { content: ''; width: 2.2rem; }
.tarot-list .item { width: 2rem; height: 0.68rem; line-height: 0.68rem; padding: 0 0.1rem; overflow: hidden; text-align: center; font-size: 0.3rem; color: #666; background-color: #f0f0f0; border-radius: 0.1rem; margin-bottom: 0.3rem; }

.select-popup { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 11; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; }
.select-popup.open { opacity: 1; visibility: visible; }

.select-popup-body { width: 4.5rem; background-color: #ffffff; border-radius: 0.4rem; position: relative; z-index: 1; margin: 3.5rem auto 0; padding: 0.4rem; }
.select-popup-body p { font-size: 0.28rem; line-height: 0.42rem; color: #666; margin-bottom: 0.2rem; }
.select-popup-body b { color: #333; font-weight: bold; }
.select-popup-body .close { width: 0.8rem; height: 0.8rem; background: url(../skin_img/tarot/select/close.png) no-repeat; background-size: 100% 100%; position: absolute; left: 50%; bottom: -1.1rem; margin-left: -0.4rem; }

.select-popup-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }

.tarot-detail { background-color: #fff; padding: 0.45rem 0; }
.tarot-detail + .tarot-list { margin-top: 0.2rem; }
.tarot-detail .title { font-size: 0.4rem; font-weight: bold; color: #3a1a80; margin-bottom: 0.45rem; text-align: center; }

.tarot-card-info { color: #333; padding: 0 0.2rem; }
.tarot-card-info + .tarot-card-info { margin-top: 0.45rem; }
.tarot-card-info .card { text-align: center; }
.tarot-card-info .card-img { display: inline-block; vertical-align: top; width: 2.03rem; height: 3.08rem; }
.tarot-card-info .card-tit { font-size: 0.24rem; white-space: nowrap; margin-top: 0.16rem; }
.tarot-card-info .text { line-height: 0.6rem; font-size: 0.34rem; margin-top: 0.3rem; }
.tarot-card-info .text .hd { color: #ff6000; }

.icon-tl-hot, .icon-tl-new { display: inline-block; vertical-align: -0.02rem; margin-left: 0.1rem; }

.icon-tl-hot { width: 0.22rem; height: 0.3rem; background: url(https://www.1212.com/static/mobile/skin_img/tarot/index/hot.png) no-repeat; background-size: 100% 100%; }

.icon-tl-new { width: 0.43rem; height: 0.22rem; background: url(https://www.1212.com/static/mobile/skin_img/tarot/index/new.png) no-repeat; background-size: 100% 100%; }

.tl-hot-list { padding: 0 0.2rem 0.1rem 0.2rem; }
.tl-hot-list .section-title { margin-bottom: 0.1rem; }
.tl-hot-list .item { display: -webkit-box; display: -webkit-flex; display: flex; padding: 0.16rem 0; }
.tl-hot-list .item + .item { border-top: 1px solid #e7e7e7; }
.tl-hot-list .item:nth-child(5n+2) .tag { border-color: #4c9ad0; color: #4c9ad0; }
.tl-hot-list .item:nth-child(5n+3) .tag { border-color: #d09961; color: #d09961; }
.tl-hot-list .item:nth-child(5n+4) .tag { border-color: #d03e4c; color: #d03e4c; }
.tl-hot-list .item:nth-child(5n+5) .tag { border-color: #4c9ad0; color: #4c9ad0; }
.tl-hot-list .tag { display: inline-block; vertical-align: top; width: 1.46rem; line-height: 0.44rem; height: 0.44rem; text-align: center; color: #d03e4c; font-size: 0.26rem; border: solid 1px #d03e4c; border-radius: 0.04rem; box-sizing: border-box; }
.tl-hot-list .tit { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; font-size: 0.3rem; margin-left: 0.2rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; min-width: 0; }