@font-face {
  font-family: 'BluuNext';
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/BluuNext-Bold.woff2) format('woff2'), url(../fonts/BluuNext-Bold.woff) format('woff');
}

@font-face {
  font-family: 'ProductSans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/ProductSans-Regular.woff2) format('woff2'), url(../fonts/ProductSans-Regular.woff) format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/Roboto-Regular-Latin.woff2) format('woff2'), url(../fonts/Roboto-Regular-Latin.woff) format('woff');
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/Roboto-Regular-Cyrillic.woff2) format('woff2'), url(../fonts/Roboto-Regular-Cyrillic.woff) format('woff');
  unicode-range: U+0000-00FF,    U+0131,    U+0152-0153,    U+02BB-02BC,    U+02C6,    U+02DA,    U+02DC,    U+2000-206F,    U+2074,    U+20AC,    U+2122,    U+2191,    U+2193,    U+2212,    U+2215,    U+FEFF,    U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/Roboto-Regular-LatinExt.woff2) format('woff2'), url(../fonts/Roboto-Regular-LatinExt.woff) format('woff');
  unicode-range: U+0100-024F,    U+0259,    U+1E00-1EFF,    U+2020,    U+20A0-20AB,    U+20AD-20CF,    U+2113,    U+2C60-2C7F,    U+A720-A7FF;
}

@font-face {
  font-family: 'BebasNeue-Regular';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/BebasNeue-Regular.woff2) format('woff2'), url(../fonts/BebasNeue-Regular.woff) format('woff');
}

@font-face {
  font-family: 'GoogleSans-Regular';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/GoogleSans-Regular.woff2) format('woff2'), url(../fonts/GoogleSans-Regular.woff) format('woff');
}

@font-face {
  font-family: 'GoogleSans-Bold';
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/GoogleSans-Bold.woff2) format('woff2'), url(../fonts/GoogleSans-Bold.woff) format('woff');
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Helvetica, Arial, sans-serif, serif;
  font-size: 16px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,h1,h2,h3,h4,h5,h6,p,ul,ol {
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
}

li {
  list-style: none;
}

html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

a,a:hover,a:visited {
  outline: none;
}

img {
  max-width: 100%;
  transition: opacity ease .3s;
  vertical-align: middle;
  opacity: 1;
}

img[data-src] {
  opacity: 0;
}

button {
  border: none;
  background: none;
}

input:focus,button:focus {
  outline: none;
}

::-webkit-input-placeholder {
  color: #ccc;
}

::-moz-placeholder {
  color: #ccc;
}

:-ms-input-placeholder {
  color: #ccc;
}

article,aside,footer,header,main,section {
  display: block;
}

input[type='checkbox'],input[type='radio'] {
  display: none;
}

.wrapper {
  padding: 0 20px;
}

.section-sort-tl,.login,.banner-tl,.common-tl,.horo-box-span,.horo-box-tl,.astro-box-info,.compat-box-info,.page-tl,.love-tl,.page-action-tl,.review-con h3,.review-con h2,.popular-tl,.ask-section-tl,.tarot-review-tl,.archive-tl,.name-tl,.loveresult h3,.horopage-tl,.article-tl,.article-con p strong,.article-con h3,.fortune-con h3,.astro-h3,.quiz-article,.cate-article,.number-item,.relate-h3,.love-com-tl,.center-tl,.center-h3,.home-sign-link,.home-horo-tl,.home-tarot-tl,.scorpio-tl,.sign-tl .horo-info-tl-link,.inner-left-tl,.astropage .article-con h4,.sort-directory-tl,.zodiac-h3,.menu-share-title,.topic-tl {
  font-family: 'BluuNext', sans-serif, serif;
  font-weight: bold;
}

.horo-info-tl-link,.article-item-tl,.love-com-desc,.home-horo-txt,.home-tarot-txt,.home-horo-btn,.match-item,.quiz-total,.quiz-question-tl,.astro-sign-link,.sign-text,.bar-item-more span,.share-title,.quiz-start-text {
  font-family: 'ProductSans', sans-serif, serif;
  font-weight: normal;
}

.header {
  position: relative;
  height: 56px;
  text-align: center;
  background-color: #051c35;
}

#topmenu {
  display: none;
}

.opacityblack {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

.opacityblack {
  z-index: 1002;
  top: 0;
  transition: all ease .3s;
  background-color: rgba(0, 0, 0, .75);
}

.header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 60px;
}

.homeheader .header {
  position: relative;
  z-index: 4;
}

.header-contain {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  position: relative;
  z-index: 1005;
  display: inline-block;
  width: 172px;
  height: 56px;
  background-image: url(../images/horoscope-logo.png);
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 172px 20px;
}

.icon-menu {
  width: 25px;
  height: 25px;
  fill: #fff;
  margin-top: auto;
}

.navfix {
  position: absolute;
  z-index: 1003;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.navfix-wp {
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 26px;
  transition: all 300ms cubic-bezier(.165, .84, .44, 1);
  text-align: left;
  background-color: #051c35;
}

#topmenu:checked ~ .navfix .navfix-wp {
  max-height: 1000px;
  padding-top: 54px;
}

#topmenu:checked ~ .opacityblack {
  display: block;
}

.mb-none {
  display: none;
}

.topmenu-box {
  position: absolute;
  z-index: 1004;
  top: 20px;
  right: 14px;
  width: 20px;
  height: 16px;
}

.menu-icon,.menu-icon::before,.menu-icon::after {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
}

.menu-icon {
  position: relative;
  z-index: 1000;
  display: block;
  width: 14px;
}

.menu-icon::before,.menu-icon::after {
  position: absolute;
  top: 7px;
  right: 0;
  width: 20px;
  content: '';
  transition: all ease .3s;
}

.menu-icon::after {
  top: 14px;
  width: 10px;
}

#topmenu:checked ~ .topmenu-box .menu-icon {
  background: none;
}

#topmenu:checked ~ .topmenu-box .menu-icon::before {
  transform: rotate(45deg);
}

#topmenu:checked ~ .topmenu-box .menu-icon::after {
  width: 20px;
  transform: rotate(-45deg);
  transform-origin: 1px -2px;
}

.login {
  line-height: 30px;
  position: relative;
  z-index: 1004;
  padding: 0 12px;
  font-size: 16px;
  color: #2656c9;
  background-color: #fff;
  border-radius: 16px;
}

.pc-navfix {
  position: relative;
}

.sort-ls {
  overflow: hidden;
  max-height: 0;
  transition: all ease .3s;
}

.sort-link {
  font-weight: 700;
  line-height: 40px;
  display: block;
  padding-left: 24px;
  color: #999;
  font-size: 14px;
}

#radio0,#radio1,#radio2,#radio3,#radio4 {
  display: none;
}

#radio0:checked ~ #sort-ls0,#radio1:checked ~ #sort-ls1,#radio2:checked ~ #sort-ls2,#radio3:checked ~ #sort-ls3,#radio4:checked ~ #sort-ls4 {
  max-height: 320px;
  margin-top: 8px;
  margin-bottom: 26px;
}

#radio0:checked + label .section-sort-tl::after,#radio1:checked + label .section-sort-tl::after,#radio2:checked + label .section-sort-tl::after,#radio3:checked + label .section-sort-tl::after,#radio4:checked + label .section-sort-tl::after {
  top: 6px;
  transform: rotate(-135deg);
  border-color: #222;
}

.section-sort-tl {
  font-size: 18px;
  line-height: 1;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 26px;
}

.section-sort-txt {
  flex: 1;
  color: #fff;
}

.section-sort-tl::after {
  position: absolute;
  top: 4px;
  right: 2px;
  width: 5px;
  height: 5px;
  content: '';
  transform: rotate(45deg);
  border: 1px solid #999;
  border-width: 0 1px 1px 0;
}

.coverlink {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* quiz */
.common-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: -20px;
  margin-left: -20px;
  margin-top: 16px;
}

.common-scroll::-webkit-scrollbar {
  display: none;
}

.banner-ls {
  display: flex;
  overflow: hidden;
  width: calc(300% - 48px);
  margin-bottom: 16px;
  padding-right: 20px;
  padding-left: 8px;
}

.banner-item {
  overflow: hidden;
  width: 33.3333%;
  padding-left: 12px;
}

.banner-con {
  position: relative;
}

.banner-con-img {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  object-fit: cover;
}

.banner-tag {
  position: absolute;
  padding: 4px 16px 46px 12px;
  min-height: 65px;
  width: 100%;
  bottom: 0;
  border-radius: 0 0 14px 14px;
  color: #fff;
}

.banner-tag-tl {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}

.banner-tag-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 24px;
}

.banner-tag-link {
  background-color: #c52f66;
  color: #fff;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 18px;
}

.banner-con:hover .banner-tag-desc {
  text-decoration: underline;
}

.common-tl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
}

.quiz-common-tl,.emailpage .common-tl {
  margin-top: 16px;
  justify-content: center;
}

.horopage-sign .common-tl {
  font-size: 22px;
  margin-bottom: 16px;
}

.horopage-sign {
  margin: 20px 0 20px;
}

.gotop {
  position: fixed;
  bottom: 70px;
  right: 16px;
  width: 46px;
  height: 46px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  line-height: 46px;
  box-shadow: 0 6px 6px rgb(0 0 0 / 15%);
  font-size: 24px;
  z-index: 100;
  cursor: pointer;
}

/* index-page */
.index-ads,
.test-ads {
  margin-top: 16px;
}

.center-h3 {
  font-size: 22px;
  margin-top: 26px;
  text-align: center;
  color: #999;
}

.center-tl {
  font-size: 24px;
  margin-top: 24px;
  margin-bottom: 16px;
  text-align: center;
}

.center-h3 + .center-tl {
  margin-top: 4px;
  margin-bottom: 16px;
}

.sign-ls {
  display: flex;
  flex-wrap: wrap;
  margin-top: -16px;
  margin-left: -16px;
}

.adspadding .sign-ls {
  margin-bottom: 16px;
}

.sign-item {
  width: 50%;
  margin-top: 16px;
  padding-left: 16px;
  text-align: center;
}
.sign-item:hover .horo-info-tl-link{
  color: #1a66d7;
}

.sign-con {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #999;
  padding: 10px;
  border-radius: 10px;
}

.sign-wp {
  position: relative;
}

.sign-pic-wp {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  margin-top: 14px;
}

.sign-pic-img,.rankcon-center-img {
  height: 64px;
  transition: all ease .3s;
  border-radius: 100%;
  background-color: #f8f8f8;
}

.sign-pic-img.no-bgc {
  background: none;
  height: 80px;
}

.sign-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 1px dashed #999;
  padding-top: 10px;
}

.homepage .sign-desc {
  padding-top: 0;
  border-top: none;
}

.sign-tl {
  position: relative;
  left: 3px;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
}

.sign-text {
  display: block;
  font-size: 12px;
  text-align: left;
  color: #999;
  white-space: nowrap;
}

.sign-text.sign-year {
  white-space: wrap;
  text-align: center;
}

.section-explore-hr {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-top: -16px;
}

.explore-hr-item {
  width: 50%;
  padding-left: 12px;
  margin-top: 16px;
}

.explore-hr-padding {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 16px;
  color: #fff;
}

.explore-hr-padding:hover {
  opacity: .8;
}

.bg-weekly-horo {
  background-color: #586181;
}

.bg-monthly-horo {
  background-color: #f16ea1;
}

.bg-yearly-horo {
  background-color: #48c6af;
}

.bg-love-horo {
  background-color: #3393b0;
}

.bg-career-horo {
  background-color: #4d48af;
}

.bg-health-horo {
  background-color: #9980f1;
}

.bg-tarot {
  background-color: #321f56;
}

.bg-love-tarot {
  background-color: #005E54;
}

.bg-monthly-tarot {
  background-color: #0b81a5;
}

.bg-yearly-tarot {
  background-color: #C2BB00;
}

.bg-yesno-tarot {
  background-color: #E1523D;
}

.bg-ask-compatibility {
  background-color: #00CCBF;
}

.explore-hr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hr-inner-left {
  display: flex;
  flex-direction: column;
}

.inner-left-tl {
  display: flex;
  align-items: center;
  height: 102px;
  font-size: 20px;
  padding: 10px 0;
}

.inner-left-desc {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  display: none;
}

.inner-left-span {
  display: block;
  font-size: 12px;
}

.icon-read-more {
  width: 24px;
  height: 24px;
  fill: #fff;
  margin-left: 5px;
}

.hr-inner-right {
  height: 50px;
  display: none;
}

.inner-right-icon {
  width: 64px;
  height: 64px;
  display: none;
}

.inner-icon {
  width: 64px;
  height: 64px;
  fill: #fff;
}

.section-pupular-compb {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
}

.section-popular-test {
  width: 100%;
  margin-bottom: 20px;
}

.section-compb-test {
  margin-left: -12px;
  margin-top: 0;
}

.popular-compat {
  height: 100%;
  border-radius: 16px;
}

.explore-hr-item.test-item {
  width: 50%;
  margin-top: 0;
}

.explore-hr-item.test-top {
  margin-top: 16px;
}

.article-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-bottom: -16px;
}

.article-item {
  width: 50%;
  margin-bottom: 16px;
  padding-left: 12px;
}

.article-item-con {
  position: relative;
}

.article-item-con:hover .article-item-tl {
  text-decoration: underline;
}

.article-item-place {
  position: relative;
  overflow: hidden;
  overflow: hidden;
  margin-bottom: 8px;
  padding-top: 66.7%;
  border-radius: 16px;
  background-color: #f8f8f8;
}

.article-item-pic {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: all ease .3s;
  -o-object-fit: cover;
  object-fit: cover;
}

.article-item-con:hover .article-item-pic {
  transform: scale(1.2);
  opacity: .8;
}

.article-item-tl {
  font-family: Gilroy-Medium;
  font-size: 16px;
  line-height: 1.2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-item-tl.quiz-tl {
  -webkit-line-clamp: 1;
}

.article-item-tl.quiz-start-tl {
  -webkit-line-clamp: 1;
  line-height: 2;
}

/* zodiac-love-page */
.select-label,
.action-link {
  line-height: 44px;
  height: 44px;
  border-radius: 4px;
}

.select-label {
  position: relative;
  display: block;
  padding-left: 12px;
  cursor: pointer;
  border: 1px solid rgba(203, 156, 112, .25);
}

.select-label::after {
  position: absolute;
  top: 16px;
  right: 12px;
  display: block;
  width: 0;
  height: 0;
  content: '';
  border: 8px solid rgba(203, 156, 112, .75);
  border-color: rgba(203, 156, 112, .75) transparent transparent transparent;
  border-radius: 3px;
}

.action-link {
  display: block;
  color: #fff;
  background-color: #1a5877;
}

.match-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}

.match-item {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 12px;
  color: #ddab7d;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 100%;
}

.match-plus {
  position: relative;
  display: block;
  width: 15px;
  height: 3px;
  margin: 0 16px;
  background-color: #cb9c70;
}

.match-plus::after {
  position: absolute;
  top: -6px;
  left: 6px;
  width: 3px;
  height: 15px;
  content: '';
  background-color: #cb9c70;
}

.footer {
  margin-top: 16px;
  padding-top: 20px;
  padding-bottom: 24px;
  text-align: center;
  border-top: 6px solid #ddab7d;
  background-color: #051c35;
}

.footer .logo {
  margin-bottom: 12px;
  height: 20px;
}

.us-link {
  font-size: 14px;
  line-height: 1.8;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  color: rgba(255, 255, 255, .5);
}

.footer-horo {
  margin-bottom: 20px;
}

.us-link.link-add {
  font-size: 16px;
}

.home-tarot-in {
  position: relative;
  padding: 16px 16px 22px;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  background-image: linear-gradient(90deg, #263282 0%, #7531aa 100%), linear-gradient(#7531aa, #220b3f);
}

.home-tarot-in-ls {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-left: 75px;
}

.home-tarot-in-item {
  position: relative;
  width: 125px;
  margin-left: -75px;
  transition: transform .3s ease-in-out;
  border: 2px solid #ddab7d;
  border-radius: 6px;
  box-shadow: -1px 1px 8px 0 rgba(0, 0, 0, .24);
}

.home-tarot-in-item:hover {
  box-shadow: 0 0 16px rgba(198, 156, 111, .8);
}

.adspadding {
  padding-top: 16px;
}

.page-tl,.love-tl {
  font-size: 22px;
  line-height: 1.1;
  padding-top: 20px;
  padding-bottom: 16px;
}

.love-tl {
  display: flex;
  align-items: center;
}

.love-tl img {
  height: 64px;
  margin-right: 12px;
}

.page-tl .special-tag {
  color: #e31300;
}

.review-con {
  margin-bottom: 16px;
}

.review-con p {
  margin-top: 16px;
  margin-bottom: 16px;
}

.adspadding .review-con p {
  margin-top: 0;
}

.descript {
  margin: 32px 0;
}

.page-action-tl {
  font-size: 24px;
  margin: 27px 0 16px;
  text-align: center;
  color: #cb9c70;
}

.tarot-ls {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6px;
  margin-left: -10px;
}

.tarot-item {
  width: 33.33333%;
  margin-bottom: 10px;
  padding-left: 10px;
}

.trend-ls {
  display: flex;
  flex-wrap: wrap;
  margin-top: -24px;
  margin-bottom: 24px;
  margin-left: -12px;
}

.trend-item {
  width: 50%;
  margin-top: 24px;
  padding-left: 12px;
}

.trend-item-con {
  position: relative;
}

.trend-item-pic {
  width: 100%;
  border-radius: 4px;
}

.trend-item-tl {
  font-size: 16px;
  margin-top: 12px;
}

.review-img {
  height: 200px;
  margin-bottom: 16px;
  -o-object-fit: cover;
  object-fit: cover;
}

.horo-detail-tl {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.horo-detail-con {
  padding-bottom: 5px;
}

.review-con h2 {
  font-size: 18px;
}

.review-con h3 {
  font-size: 16px;
  margin: 12px 0 -12px;
}

.tab-trend {
  display: flex;
  border: 1px solid #1a5877;
  overflow: hidden;
  margin-top: 16px;
  margin-bottom: 16px;
  border-radius: 30px;
}

.tab-trend-link {
  line-height: 48px;
  flex: 1;
  height: 48px;
  padding-bottom: 0;
  text-align: center;
  border-left: 1px solid #1a5877;
}

.tab-trend-link:first-child {
  border-left: none;
}

.tab-trend-link:hover {
  background-color: #472f85;
  color: #fff;
}

.tab-trend-active {
  font-weight: bold;
  position: relative;
  color: #562171;
}

.tab-trend-active .tab-trend-txt {
  position: relative;
  font-weight: blod;
  color: #fff;
}

.tab-trend-active::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  display: block;
  content: '';
  width: auto;
  height: auto;
  margin-left: 0;
  background-color: #1a5877;
}

.horo-trend-ls {
  display: flex;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: -9px;
}

.horo-trend-item {
  flex: 1;
  padding-left: 9px;
}

.horo-share {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.horo-share-item {
  position: relative;
  margin-left: 8px;
  margin-right: 8px;
}

.icon-share {
  width: 50px;
  height: 50px;
}

.horo-trend-con {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  line-height: 48px;
  border-radius: 3px;
  background-image: linear-gradient(to right, #06162d, #064b6c);
}

.horo-trend-link {
  font-size: 16px;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  color: #fff;
}

.article-con .section-explore-hr {
  margin-top: -16px;
  margin-left: -12px;
}

.article-con .explore-hr-item {
  padding-left: 12px;
  margin-top: 16px;
}

.article-con .hr-inner-right {
  height: 40px;
}

.name-section {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 32px;
  border-radius: 16px;
  background-image: linear-gradient(360deg, #f7bdc8 0%, #c87d8b 100%);
}

.name-section-pic {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  transform: translate(-50%, -50%);
  opacity: .3;
}

.name-tl {
  margin-bottom: 32px;
  text-align: center;
  color: #fff;
}

.name-section-con {
  position: relative;
  z-index: 9;
}

.name-input {
  font-size: 16px;
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 16px;
  padding-left: 16px;
  border: none;
  border-radius: 22px;
}

.name-btn {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 18px;
  line-height: 44px;
  height: 44px;
  margin-top: 32px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border-radius: 22px;
  background-color: #1a5877;
}

.icon-love {
  width: 29px;
  height: 22px;
  margin-right: 3px;
}

.modal-section {
  position: fixed;
  z-index: 1006;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  background-color: rgba(0, 0, 0, .35);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-width: 300px;
  max-width: 600px;
  height: 350px;
  padding: 32px 32px 0;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 16px;
  background-color: #fff;
}

.modal-tl {
  font-size: 18px;
}

.popular-ls {
  margin-bottom: 16px;
}

.popular-item {
  margin-top: 16px;
}

.popular-tarot,.popular-compat,.popular-ask,.popular-name {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.popular-compat .popular-con {
  align-items: center;
  justify-content: center;
}

.popular-compat {
  text-align: center;
}

.popular-tl {
  font-size: 18px;
}

.popular-tl a {
  color: #fff;
}

.popular-item-bg {
  width: 100%;
  height: 100%;
  min-height: 270px;
  background-color: #f8f8f8;
  -o-object-fit: cover;
  object-fit: cover;
}

.popular-con {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 16px;
  padding-right: 180px;
}

.popular-link {
  font-family: 'BluuNext', sans-serif, serif;
  line-height: 44px;
  position: absolute;
  bottom: 22px;
  left: 16px;
  display: inline-block;
  height: 44px;
  padding: 0 22px;
  cursor: pointer;
  text-align: center;
  color: #2a5274;
  border-radius: 22px;
  background-color: #ddab7d;
}

.popular-compat .popular-link {
  position: static;
}

.popular-compat .popular-con {
  padding-right: 0;
  padding-left: 0;
}

.popular-ask-img {
  position: absolute;
  right: 16px;
  bottom: 0;
  width: 120px;
}

.trend-name-img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 250px;
  opacity: .1;
}

.loveresult {
  margin-bottom: 16px;
}

.loveresult h3 {
  width: 60px;
  font-size: 22px;
  border-bottom: 2px solid #1a5877;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
}

.loveresult p {
  margin-top: 8px;
}

.love-r-flex {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.loveresult-tl {
  text-align: center;
  color: #fff;
}

.loveitem-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loveitem p {
  line-height: 1.7;
  margin-bottom: 16px;
  color: #fff;
}

.action-box {
  display: flex;
  margin-left: -8px;
}

.action-link {
  flex: 1;
  margin-left: 8px;
  text-align: center;
}

.ask-section {
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: row-reverse;
  min-height: 360px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 16px;
  padding-top: 32px;
  border-radius: 4px;
  background: linear-gradient(180deg, #172053 0%, #050611 100%);
}

.ask-section-tl {
  text-transform: capitalize;
}

.ask-section-con {
  padding-left: 16px;
  padding-right: 8px;
  margin-bottom: 16px;
}

.ask-section-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
}

.ask-section-desc {
  color: #fff;
  padding-right: 4px;
}

.ask-section-img {
  height: 200px;
}

.ask-section-tl {
  font-size: 30px;
  color: #fff;
}

.tarot-result-img {
  flex: 0 0 150px;
  width: 150px;
  height: 250px;
  margin: 0 auto;
  /* background-color: rgba(0, 0, 0, .1); */
}

.meanings-img {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
  background: url('../images/meanings-bg.png') no-repeat center center;
  background-size: cover;
}
.meanings-img img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  object-fit: contain;
}

.tarot-review p {
  margin: 16px 0;
}

.tarot-review-tl {
  margin-top: 16px;
  margin-top: 14px;
  background-color: #f5e6d4;
  padding-left: 16px;
  border-left: 4px solid #daa521;
  padding-top: 10px;
  padding-bottom: 8px;
}

.tarot-review-info h3 {
  margin-top: 16px;
  margin-bottom: 14px;
}

.question-section {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 32px 20px;
  color: #fff;
  border-radius: 4px;
  background-image: linear-gradient(360deg, #4e2c6b 0%, #211939 100%);
}

.question-desc {
  text-align: center;
  margin-bottom: 20px;
}

.question-desc-span {
  color: rgba(255, 255, 255, .6);
}

.love-title {
  font-size: 18px;
  display: block;
  margin-bottom: 16px;
  text-align: center;
}

.down-wp {
  position: relative;
  height: 44px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.select-label {
  position: relative;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-weight: 400;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 3px;
}

.select-label::after {
  position: absolute;
  top: 18px;
  right: 12px;
  display: block;
  width: 0;
  height: 0;
  content: '';
  border: 6px solid #fff;
  border-color: #fff transparent transparent transparent;
}

.love-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 48px 0;
}

.love-line::before {
  position: absolute;
  top: 48px;
  right: 0;
  left: 0;
  display: block;
  height: 1px;
  content: '';
  background-color: rgba(255, 255, 255, .2);
}

.love-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100%;
  background-color: #3b214f;
}

.icon-love {
  width: 29px;
  height: 22px;
}

.user-action {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -16px;
}

.user-action:hover {
  opacity: .8;
}

.user-action .question-more {
  margin-left: 16px;
}

.question-more,.astro-more,.topic-more {
  font-family: 'BluuNext', sans-serif, serif;
  line-height: 44px;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 44px;
  margin-top: 16px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border-radius: 22px;
  background-color: #1a5877;
}

.topic-more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.astro-more {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.question-more:hover {
  text-decoration: underline;
  opacity: .85;
}

.question-index-more {
  font-size: 16px;
  /* line-height: 44px; */
  position: relative;
  display: block;
  overflow: hidden;
  width: 300px;
  /* height: 44px; */
  margin-top: 18px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border-radius: 24px;
  background-color: #1a5877;
  font-family: Gilroy-Bold;
  padding: 14px 0;
  line-height: 1.2;
}

.question-index-more:hover,.horo-btn-link:hover {
  box-shadow: 5px 6px 10px rgba(0, 0, 0, .25);
}

.love-choice {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.love-choice-img {
  height: 80px;
  margin-left: 16px;
  margin-right: 16px;
}

.icon-choice-add {
  width: 20px;
  height: 20px;
  fill: #666;
}

.breadcrumb {
  display: none;
}

.privacypage,.aboutpage,.emailpage,.errorpage {
  min-height: 80vh;
}

.about-us h2 {
  margin-top: 16px;
  margin-bottom: 10px;
  font-weight: 700;
}

.about-us h3 {
  margin-bottom: 10px;
  font-weight: 700;
}

.about-us ul {
  margin-bottom: 14px;
  padding-left: 40px;
}

.about-us li {
  line-height: 24px;
  margin-bottom: 8px;
  list-style: disc;
}

.about-us p {
  line-height: 24px;
  margin-bottom: 14px;
}

.about-us h4 {
  line-height: 24px;
  font-weight: 700;
  margin: 14px 0;
}

.about-us h6,.about-us h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 25px;
  margin: 14px 0;
}

.error-no {
  font-size: 28px;
  margin-bottom: 10px;
  text-align: center;
}

.error-info {
  text-align: center;
}

.error-gohome {
  line-height: 44px;
  position: relative;
  bottom: 0;
  display: block;
  max-width: 320px;
  margin: 44px auto 64px;
  text-align: center;
  border-radius: 6px;
  background-image: linear-gradient(114deg, #ddbe85, #c8a56e);
  box-shadow: 0 6px 8px rgba(0, 0, 0, .08);
}

.error-img {
  display: block;
  width: 170px;
  margin: 80px auto 4px;
}

.archive-tl {
  margin-top: 24px;
}

.formbox {
  max-width: 728px;
  margin: 16px auto 32px;
  padding: 16px;
  box-shadow: 0 0 6px rgb(0 0 0 / 8%);
}

.form-text {
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.useremail,.username {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 0 16px;
  border: 1px solid #efefef;
}

.formbox-btn {
  font-weight: bold;
  line-height: 56px;
  width: 100%;
  cursor: pointer;
  text-align: center;
  color: #fff;
  background-color: #1a5877;
}

.form-notice {
  margin-top: 16px;
  text-align: center;
  color: #999;
}

.success {
  position: fixed;
  z-index: -5;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  transition: all ease .3s;
  text-align: center;
  opacity: 0;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .55);
}

.icon-success {
  display: block;
  width: 40px;
  height: 20px;
  margin-bottom: 16px;
  transform: rotate(-45deg);
  border: 3px solid #fff;
  border-width: 0 0 3px 3px;
}

.tarot-review-result {
  margin-top: 16px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.horopage-line {
  display: flex;
  align-items: center;
  margin: 16px 0;
}

.article-con {
  margin-top: 16px;
}

.article-con .how-link {
  display: flex;
  align-items: center;
  padding: 0 0 10px 20px;
  text-decoration: underline;
}

.article-con .how-link::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 10px;
}

.article-con img {
  width: 100%;
  margin-bottom: 16px;
}

.article-con .kid-fun-piccon {
  margin-bottom: 0;
}



.horopage-line .down-wp {
  width: 120px;
  margin: 0;
}

.horopage-info {
  flex: 1;
  padding-left: 12px;
}

.horopage-tl {
  font-size: 24px;
  line-height: 1.2;
}

.horopage-desc {
  font-size: 12px;
  color: #666;
}

.astro-con {
  margin-bottom: 20px;
  margin-top: 20px;
}

.astro-con p {
  margin: 14px 0;
}

.astro-pic {
  margin-bottom: 20px;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.screen-two {
  margin-top: 20px;
}

.horopage-tl-sub {
  font-size: 14px;
}

.more-trend-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
}

.more-trend-item {
  width: 50%;
  margin-bottom: 16px;
  padding-left: 12px;
}

.more-trend-con {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 8px;
  border-right: 2px solid #eee;
  border-bottom: 2px solid #eee;
  background-color: #f8f8f8;
}

.more-trend-link {
  flex: 1;
  padding-left: 8px;
}

.articlepage {
  min-height: 60vh;
  margin-top: 16px;
}

.quiz-article {
  font-size: 24px;
  margin: 16px 0 14px;
  padding-left: 11px;
  border-left: 5px solid #bd9956;
}

.astro-h3 {
  font-size: 24px;
  margin: 24px 0 20px;
}

.article-con h2 {
  font-size: 20px;
  margin: 16px 0 14px;
  font-weight: 700;
}

.article-con h3,
.fortune-con h3 {
  font-size: 20px;
  margin: 16px 0 14px;
  color: #a855f7;
}

.cate-article {
  font-size: 26px;
  line-height: 1.4;
  margin: 24px 0 20px;
}

.article-con h4 {
  font-weight: 700;
  margin-bottom: 16px;
  margin-top: 16px;
}

.article-con b {
  display: block;
  margin-top: 14px;
}
.relate-h3 {
  font-size: 24px;
  margin: 20px 0 16px;
}

.relate-h3-spe {
  margin-bottom: -2px;
}

.astropage .article-con h4 {
  margin-bottom: -10px;
}

.mentalpage .article-con h3 + img {
  margin-bottom: 16px;
}

.article-con img + p {
  margin-top: 0;
}

.mentalpage .screen-two {
  display: none;
}

.article-con p,
.fortune-con p {
  margin: 14px 0;
}

.repicfix-img {
  display: block;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
  -o-object-fit: cover;
  object-fit: cover;
}

.article-tl {
  line-height: 1;
  margin-bottom: 15px;
}

.nextpage {
  font-family: 'BluuNext', sans-serif, serif;
  height: 44px;
  line-height: 44px;
  display: block;
  margin: 16px 0;
  text-align: center;
  color: #fff;
  border-radius: 22px;
  background-color: #1a5877;
}

.text-special {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.email-btn {
  height: 40px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #fff;
  padding: 0 30px;
  background-color: #1a5877;
}

.home-horo-item {
  margin-top: 16px;
}

.home-horo-con {
  position: relative;
}

.home-horo-bg {
  width: 100%;
  background-color: #f8f8f8;
  -o-object-fit: cover;
  object-fit: cover;
}

.home-horo-info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 16px;
  color: #fff;
}

.home-horo-tl {
  font-size: 18px;
}

.home-horo-tl > a {
  color: #fff;
}

.home-horo-txt,.home-tarot-txt {
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
}

.home-horo-btn {
  line-height: 44px;
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: block;
  width: 136px;
  text-align: center;
  color: #0b3250;
  border-radius: 44px;
  background-color: #ddab7d;
}

.home-tarot-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
}

.home-tarot-item {
  width: 50%;
  margin-top: 16px;
  padding-left: 16px;
}

.home-tarot-con {
  position: relative;
  padding: 16px;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  background-image: linear-gradient(180deg, #263282 0%, #214 100%), linear-gradient(#220b3f, #220b3f);
}

.home-tarot-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 32px;
}

.home-tarot-card.new-card {
  margin-bottom: 20px;
}

.home-tarot-card-md {
  position: relative;
  z-index: 2;
  transition: transform .3s ease-in-out;
}

.home-tarot-card-md,.home-tarot-card-lf,.home-tarot-card-rt {
  width: 76px;
  height: 109px;
  border: solid 1px #ddab7d;
  border-radius: 3px;
}

.home-tarot-card-lf,.home-tarot-card-rt {
  height: 80px;
  margin-bottom: -20px;
  opacity: .2;
}

.home-tarot-card-lf {
  margin-right: -40px;
  transform: rotate(-30deg);
}

.home-tarot-card-rt {
  margin-left: -40px;
  transform: rotate(30deg);
}

.home-tarot-tl {
  font-size: 18px;
}

.tarotpage .home-tarot-tl {
  font-size: 22px;
}

.tarotpage .home-tarot-in {
  margin: 16px 0;
  padding: 32px 16px;
}

.home-tarot-tl > a {
  color: #fff;
}

.trend-common-link {
  font-family: 'BluuNext', sans-serif, serif;
  line-height: 44px;
  display: inline-block;
  height: 44px;
  padding: 0 20px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border-radius: 22px;
  background-color: #172053;
  margin-top: 16px;
}

.tarot-review-info p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-top: 8px;
}

.test-email {
  margin-top: 16px;
}

.quiz-block {
  margin: 16px 0;
  padding: 24px 16px 29px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 10px;
  background-color: rgb(250, 250, 250);
}

.quiz-block-tl {
  text-align: center;
}

.quiz-block-info {
  margin-top: 12px;
}

.quiz-block-info h4 {
  font-size: 18px;
  font-weight: 700;
  border-left: 6px solid #6f51b8;
  padding-left: 12px;
  margin: 16px 0;
}

.quiz-block-info img {
  display: block;
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
}

.quiz-block-info p {
  margin: 12px 0;
}

.quiz-block-start {
  font-family: 'BluuNext', sans-serif, serif;
  line-height: 44px;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 44px;
  margin-top: 24px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border-radius: 22px;
  background-color: #1a5877;
}

.quiz-start .question-more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.quiz-wrapper .quiz-block-info {
  margin-top: 16px;
}

.quiz-wrapper .quiz-block-start {
  margin-top: 16px;
  margin-bottom: 21px;
}

.relate-con {
  display: none;
}

.viewportpage .pageright,.viewportpage .footer {
  display: none;
}

@-webkit-keyframes shineAnimation {
  0% {
    left: -10%;
    opacity: .6;
  }

  66% {
    left: 100%;
    opacity: 1;
  }

  to {
    left: 100%;
    opacity: 1;
  }
}

@keyframes shineAnimation {
  0% {
    left: -10%;
    opacity: .6;
  }

  66% {
    left: 100%;
    opacity: 1;
  }

  to {
    left: 100%;
    opacity: 1;
  }
}

.quiz-question-tl {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 154px;
  background-color: #5e3783;
  color: #fff;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0;
  padding: 16px 20px;
}

.quiz-question-ls {
  margin-bottom: 12px;
  margin-top: 12px;
}

.quiz-link-wp {
  text-align: right;
}

.quiz-question-item,.mentalpage .article-con h4 {
  padding: 14px 16px;
  cursor: pointer;
  font-weight: bold;
  border: 1px solid #f4f4f4;
  border-radius: 4px;
  margin-bottom: 8px;
  box-shadow: 0 1px 1px rgb(173 168 168 / 10%);
}

.article-con .flex {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}

.article-con .flex h4 {
  width: 50%;
  padding: 0;
  border: none;
  padding-left: 20px;
}

.article-con .flex img {
  margin-bottom: 0;
  box-shadow: -1px 3px 7px rgb(0 0 0 / 60%);
}

.article-con h4:hover  img {
  border: 2px solid #e4b985;
  border-radius: 4px;
}
.article-con > ul {
  margin: 16px 0;
}
.article-con > ul > li {
  line-height: 28px;

  position: relative;

  padding-left: 12px;
}
.article-con > ul > li::before
{
    position: absolute;
    top: 11px;
    left: 0;

    width: 4px;
    height: 4px;

    content: '';

    border-radius: 100%;
    background-color: #000;
}

.quiz-block-des img {
  margin: 16px auto;
  display: block;
}

.selectitem {
  background-color: #d9a96f;
  color: #000;
}

.quiz-question-link {
  display: block;
  transition: all ease .3s;
}

.quiz-result-con {
  background-color: #fff;
}

.quiz-total {
  font-weight: bold;
  line-height: 1.1;
  margin-top: 24px;
  color: #cb9c70;
}

.quiz-progress {
  position: relative;
  width: 100%;
  height: 3px;
  margin: 16px 0;
  background-color: #ddd;
}

.quiz-progress-active {
  position: absolute;
  left: 0;
  height: 3px;
  background-color: #cb9c70;
}

.quiz-block-or {
  margin: 24px 0;
  text-align: center;
}

.quiz-block-email {
  font-size: 14px;
  line-height: 42px;
  display: block;
  width: 140px;
  margin: 0 auto;
  -webkit-animation: pulse 1s ease-in-out;
  animation: pulse 1s ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  text-align: center;
  border: 1px solid #444;
  border-radius: 4px;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

.mbti-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
}

.mbti-pro {
  position: relative;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #ddd;
}

.mbti-pro-act {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  background-color: #bd9956;
}

.mbti-bar-con {
  display: flex;
  align-items: center;
  height: 55px;
  padding: 0 20px;
}

.mbti-bar-ls {
  display: flex;
  flex: 1;
}

.mbti-bar-item {
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  width: 90px;
  padding-right: 20px;
  color: #000;
}

.mbti-bar-next,.quiz-link-pc {
  font-size: 16px;
  line-height: 40px;
  width: 125px;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  background-color: #ddd;
}

.quiz-link-pc {
  display: none;
  margin-bottom: 16px;
  background-color: #bd9956;
}

.mbti-bar-link {
  display: block;
  color: #fff;
}

.mbti-bar-total {
  color: #888;
}

.icon-restart {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

#btn-abled {
  display: none;
  background-color: #bd9956;
}

@-webkit-keyframes pulse {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes pulse {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scaleX(1);
  }
}

.share-btn {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.quiz-wrapper .share-btn {
  margin-bottom: 16px;
}

.icon-link {
  position: relative;
  display: block;
  margin-right: 8px;
  margin-left: 8px;
}

.icon-link::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 36px;
  height: 36px;
  content: '';
  background-color: #fff;
}

.icon-facebook {
  position: relative;
  width: 40px;
  height: 40px;
}

.icon-twitter-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  margin-left: 8px;
  border-radius: 2px;
  background-color: #1d9bf0;
}

.icon-line,.icon-twitter {
  width: 30px;
  height: 30px;
}

.test-value-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
}

.test-value-item {
  flex: 0 0 50%;
  width: 50%;
  padding-left: 16px;
}

.test-value-drag {
  margin-top: 16px;
}

.test-value-tl {
  margin-bottom: 8px;
}

.droptarget,.test-answer-con {
  height: 120px;
  border-radius: 12px;
  background-color: #fff;
}

.test-value-tl {
  margin-top: 16px;
  color: #bd9956;
}

.test-answer-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 16px;
  cursor: pointer;
  transition: all ease .3s;
  border: 1px solid #ebedf0;
}

.test-answer-des {
  line-height: 1.2;
  display: block;
  margin: 6px 0;
}

.testpage .quiz-block {
  background-color: #fff;
}

.droptarget {
  background-color: #f2f4f5;
}

.test-reset {
  line-height: 36px;
  width: 120px;
  margin: 0 auto;
  margin-top: 16px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #562171;
}

.next-test {
  line-height: 42px;
  display: block;
  margin-bottom: 16px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #1a5877;
}

.quiz-block .formbox {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
}

.quiz-block .useremail,.quiz-block .username,.quiz-block .formbox-btn {
  line-height: 42px;
  height: 42px;
  border-radius: 3px;
}

.test-email-text {
  margin: 16px;
  text-align: center;
}

.score-progress {
  position: relative;
  height: 15px;
  margin-top: 6px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: #f2f4f5;
}

.item-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  border-radius: 6px;
}

.item-blue {
  background-color: #5a9ae9;
}

.item-gold {
  background-color: gold;
}

.item-green {
  background-color: #79d292;
}

.item-orange {
  background-color: #ffa501;
}

.color-result-des {
  text-align: center;
}

.color-result {
  font-size: 30px;
  margin: 16px 0;
  text-align: center;
}

.test-result-box {
  font-size: 0;
  margin-right: -12px;
}

.review-con h3.true-color-tl {
  margin-top: 24px;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 5px solid #cb9c70;
}

.blue-descript,.gold-descript,.green-descript,.orange-descript {
  font-size: 16px;
  display: none;
  padding-right: 12px;
}

#blue-result:checked ~ .blue-descript,#gold-result:checked ~ .gold-descript,#green-result:checked ~ .green-descript,#orange-result:checked ~ .orange-descript,#blue-result-like:checked ~ .blue-descript,#gold-result-like:checked ~ .gold-descript,#green-result-like:checked ~ .green-descript,#orange-result-like:checked ~ .orange-descript {
  display: block;
}

#blue-result:checked ~ .test-tab-blue,#blue-result-like:checked ~ .test-tab-blue {
  color: #5a9ae9;
  border-color: #5a9ae9;
}

#gold-result:checked ~ .test-tab-gold,#gold-result-like:checked ~ .test-tab-gold {
  color: gold;
  border-color: gold;
}

#green-result:checked ~ .test-tab-green,#green-result-like:checked ~ .test-tab-green {
  color: #79d292;
  border-color: #79d292;
}

#orange-result:checked ~ .test-tab-orange,#orange-result-like:checked ~ .test-tab-orange {
  color: #ffa501;
  border-color: #ffa501;
}

.review-con .gold-descript p,.review-con .blue-descript p,.review-con .orange-descript p,.review-con .green-descript p {
  margin-top: 8px;
  margin-bottom: 0;
}

.test-tab-blue,.test-tab-gold,.test-tab-green,.test-tab-orange {
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  width: 25%;
  padding-right: 12px;
  cursor: pointer;
}

.test-tab-con {
  line-height: 30px;
  display: block;
  height: 30px;
  padding: 0 8px;
  transition: all ease .3s;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 15px;
}

.test-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
  background-image: url(../images/test_icon.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.select-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  padding-left: 9px;
}

.quiz-block .select-wp {
  display: flex;
  flex: 1;
  margin: 12px 0 16px;
}

.quiz-block .select-box {
  flex: 0 0 120px;
  width: 120px;
  padding-left: 0;
}

.quiz-block .select-radio {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border: 1px solid #1a5877;
  border-radius: 100%;
}

#female:checked + .select-box .select-radio,#male:checked + .select-box .select-radio {
  background-color: #1a5877;
}

.quiz-block .formbox > label {
  font-weight: bold;
}

.mbti-item h3 {
  margin-top: 16px;
  line-height: 1.4;
  font-weight: 700;
}

.mbti-t-item h3 {
  margin-top: 16px;
}

.mbti-qs-ls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 16px -16px;
}

.mbti-qs-con {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.mbti-qs-item {
  padding-left: 12px;
}

.mbti-qs-s,.mbti-qs-m,.mbti-qs-l {
  display: block;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.mbti-qs-active .mbti-qs-s,.mbti-qs-active .mbti-qs-m,.mbti-qs-active .mbti-qs-l {
  background-color: #bd9956;
}

.mbti-qs-s {
  width: 4.5vw;
  min-width: 30px;
  height: 4.5vw;
  min-height: 30px;
}

.mbti-qs-m {
  width: 5.5vw;
  min-width: 40px;
  height: 5.5vw;
  min-height: 40px;
}

.mbti-qs-l {
  width: 5.5vw;
  min-width: 40px;
  max-width: 50px;
  height: 5.5vw;
  min-height: 40px;
  max-height: 50px;
}

.mbti-qs-txt {
  font-size: 12px;
  height: 16px;
  margin-top: 8px;
}

.mbti-t-qs-ls {
  display: flex;
  margin-bottom: 16px;
  margin-left: -16px;
}

.mbti-t-qs-item {
  width: 50%;
  margin-top: 16px;
  padding-left: 16px;
}

.mbti-t-qs-con {
  line-height: 48px;
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
  background-color: #f0f0f0;
}

.mbti-t-qs-active .mbti-t-qs-con {
  color: #fff;
  background-color: #888;
}

.mbti-result-top {
  text-align: center;
}

.mbti-result-subtl {
  font-size: 18px;
  margin-top: 12px;
  margin-bottom: 8px;
}

.mbti-result-tl {
  font-size: 28px;
}

.mbti-result-img {
  max-width: 200px;
  max-height: 200px;
  margin-top: 10px;
  margin-bottom: 16px;
}

.mbti-result-des {
  font-size: 16px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: center;
}

.mbti-result-line,.mbti-label {
  display: flex;
  align-items: center;
}

.mbti-label {
  font-size: 14px;
  justify-content: space-between;
  margin-top: 6px;
  margin-bottom: 16px;
}

.mbti-label-lf,.mbti-label-rt,.mbti-result-lf,.mbti-result-rt {
  font-weight: 700;
  width: 84px;
  color: #888;
}

.mbti-result-rt,.mbti-label-rt {
  text-align: right;
}

.mbti-result-bg {
  position: relative;
  flex: 1;
  height: 20px;
  border-radius: 10px;
  background-color: #efefef;
}

.mbti-result-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #bd9956;
}

.mbti-result-color {
  color: #bd9956;
}

.mbti-start-lf {
  left: 0;
  border-radius: 10px 0 0 10px;
}

.mbti-start-rt {
  right: 0;
  border-radius: 0 10px 10px 0;
}

.review-con h3.personal-tl {
  font-size: 18px;
  line-height: 1;
  margin: 20px 0 14px;
  padding-left: 11px;
  border-left: 5px solid #bd9956;
}

.rank-modal {
  position: fixed;
  z-index: 1008;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.rank-modal-tl {
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.rank-modal-con {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.rank-modal-wp {
  position: relative;
  max-width: 1026px;
  padding: 32px 16px 32px;
  background-color: #fff;
}

.rank-modal-close {
  position: absolute;
  top: 26px;
  right: 14px;
  cursor: pointer;
  transform: rotate(45deg);
}

.rank-modal-close::before,.rank-modal-close::after {
  position: absolute;
  display: block;
  content: '';
  background-color: #888;
}

.rank-modal-close::before {
  right: 0;
  width: 20px;
  height: 2px;
}

.rank-modal-close::after {
  top: -9px;
  right: 9px;
  width: 2px;
  height: 20px;
}

.rankcon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #eee;
  padding: 16px;
}

.rankcon-left {
  width: 25px;
}

.rankcon-center {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 20px;
}

.rankcon-center-info {
  margin-left: 10px;
}

.rankcon-tl {
  font-size: 16px;
  font-weight: 700;
}

.rankcon-des {
  text-align: justify;
}

.rankcon-info {
  flex: 1;
  padding-left: 16px;
}

.rankcon-top {
  display: flex;
}

.rankcon-top-pic {
  flex: 0 0 30px;
  width: 30px;
  height: 39.75px;
}

.rankcon-top-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  height: 39.75px;
  margin-left: 8px;
}

.rankcon-date {
  font-size: 12px;
}

.rankcon-right {
  width: 100%;
}

.rankcon-btn {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 14px;
  line-height: 28px;
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  transition: all ease .3s;
  color: #fff;
  border-color: #1a5877;
  background-color: #1a5877;
}

.horoscope-link {
  line-height: 40px;
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #1a5877;
}

.rankitem {
  position: relative;
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
}

.rank-hidden {
  overflow: hidden;
  max-height: 0;
  transition: all ease .3s;
}

.more-rank {
  font-size: 15px;
  position: relative;
  display: block;
  margin-bottom: 16px;
  padding-bottom: 16px;
  cursor: pointer;
  color: #bd9956;
  border-bottom: 1px solid #eee;
}

.more-rank::before,.more-rank::after {
  position: absolute;
  right: 0;
  content: '';
  background-color: #bd9956;
}

.more-rank::before {
  top: 10px;
  width: 16px;
  height: 2px;
}

.more-rank::after {
  top: 3px;
  right: 7px;
  width: 2px;
  height: 16px;
}

#ctrlrank {
  display: none;
}

#ctrlrank:checked ~ .rank-hidden {
  max-height: 2000px;
}

#ctrlrank:checked ~ .more-rank::after {
  display: none;
}

.homerank {
  margin: 24px auto 0;
}

.ranklist {
  margin-top: 16px;
}

.quiz-con {
  position: relative;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
}

.quiz-con:hover .quiz-tl,.quiz-con:hover .quiz-start-tl {
  text-decoration: underline;
}

.quiz-con:hover .quiz-item-pic {
  transform: scale(1.2);
  opacity: .8;
}

.quiz-like-item:hover .quiz-like-img {
  transform: scale(1.2);
  opacity: .8;
}

.quiz-con-top {
  display: flex;
}

.quiz-item {
  margin-bottom: 16px;
}

.quiz-ads-item {
  margin-bottom: 16px;
  height: 250px;
}

.quiz-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
}

.quiz-item {
  width: 50%;
  padding-left: 16px;
}

.quiz-like-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
}

.quiz-like-item {
  width: 50%;
  padding-left: 16px;
  margin-bottom: 16px;
}

.quiz-like-con {
  position: relative;
}

.quiz-like-pic {
  width: 100%;
  height: 120px;
  background-color: #f8f8f8;
  overflow: hidden;
}

.quiz-like-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: all ease .3s;
}

.quiz-like-desc {
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
}

.quiz-like-item:hover .quiz-like-desc {
  color: #3c5def;
}

.hidden-desk {
  display: block;
}

.quiz-item-an {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 50%;
  background-color: #f8f8f8;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.quiz-start-img {
  position: relative;
  overflow: hidden;
  padding-top: 66.7%;
  background-color: #f8f8f8;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.quiz-item-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transition: all ease .3s;
  -o-object-fit: cover;
  object-fit: cover;
}

.quiz-con-bt {
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

.quiz-item-tl {
  font-size: 14px;
}

.list-ads {
  width: 100%;
  margin-bottom: 16px;
}
.quiz-lab-ads {
  grid-column: 1 / -1;
}

.quiz-lab-left {
  flex: 0 0 120px;
  width: 100%;
  height: 100px;
  border-radius: 4px;
  background-color: #f8f8f8;
  overflow: hidden;
}
.quiz-lab-pic {
  width: 100%;
  height: 100%;
  transition: all ease .3s;
  object-fit: cover;
}
.quiz-center-tag {
  font-size: 14px;
  color: #c52f66;
}
.quiz-center-desc {
  font-family: 'ProductSans', sans-serif, serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.quiz-lab-desc {
  flex: 1;
  height: 90px;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 6px 6px 0;
}
.quiz-lab-start {
  align-self: flex-end;
  width: 76px;
  padding: 2px 0;
  border-radius: 14px;
  text-align: center;
  background-color: #1d49a7;
  color: #fff;
  margin: 2px 0;
}
.quiz-lab-right {
  margin-right: 16px;
}
.quiz-lab-con:hover .quiz-lab-pic {
  transform: scale(1.1);
}
.quiz-lab-con:hover .quiz-center-desc {
  text-decoration: underline;
}

.quiz-lab-ls {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.quiz-lab-con {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: all ease .3s;  
}
.quiz-lab-center {
  width: 100%;
  font-family: 'ProductSans', sans-serif, serif;
}
.quiz-bt-tl {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quiz-icon-right {
  width: 26px;
  height: 26px;
}

.quiz-icon-share {
  width: 26px;
  height: 26px;
  margin-right: 4px;
}

.quiz-start-an {
  position: relative;
  padding-top: 50.6%;
  width: 100%;
  overflow: hidden;
  margin-top: 16px;
}

.quiz-start-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiz-lab-first {
  width: 100%;
  position: relative;
  display: inline-block;
  margin-top: 48px;
  margin-bottom: 16px;
}

.icon-special {
  position: absolute;
  top: -27px;
  left: -27px;
  z-index: -1;
  display: block;
  width: 100px;
  height: 100px;
}
.quiz-first-top {
  overflow: hidden;
}
.quiz-first-tl {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.quiz-first-pic {
  width: 100%;
  transition: all 0.3s ease;
}
.quiz-lab-first:hover .quiz-first-pic {
  transform: scale(1.1);
}
.quiz-lab-first:hover .quiz-first-info {
  text-decoration: underline;
}

.quiz-first-info {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 12px;
}

.quiz-first-desc {
  font-size: 16px;
  margin-top: 6px;
  margin-bottom: 16px;
}

.quiz-start-text {
  margin-top: 16px;
  font-size: 16px;
}

.quiz-start-text p {
  margin: 14px 0;
}

.quiz-start-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
}

.quiz-start-item {
  width: 50%;
  padding-left: 12px;
}

.ma-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mmt-16 {
  margin-top: 16px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-0 {
  margin-top: 0;
}

.quiz-top-wp {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.quiz-top-restart {
  font-size: 15px;
  box-shadow: rgba(0,0,0,.12) 0 1px 3px,rgba(0,0,0,.24) 0 1px 2px;
  border-radius: 16px;
  background-color: #dde1e2;
  padding: 5px 10px;
  display: flex;
  align-items: center;
}

.icon-top-restart {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.quiz-top-progress {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-left: 16px;
  background-color: #bfcbd4;
  border-radius: 13px;
  height: 26px;
  box-shadow: rgba(50,50,93,.25) 0 2px 5px -1px,rgba(0,0,0,.3) 0 1px 3px -1px,inset 0 1px 3px rgba(0,0,0,.5);
}

.progress-success {
  width: 0%;
  height: 26px;
  border-radius: 13px;
  background: -webkit-linear-gradient(0deg,hsla(339,88%,57%,1) 0%,hsla(219,88%,57%,1) 99%);
  transition: none 0s ease 0s;
}

.progress-con-label {
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  text-shadow: 0 1px 1px #000000d6;
}

.quiz-rate {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  margin-bottom: -8px;
}

.rate-num {
  color: #7950de;
  margin-bottom: 8px;
}

.num-weight {
  font-weight: 700;
}

.quiz-pro {
  position: relative;
  display: block;
  max-width: 100%;
  background-color: #0000001a;
  border-radius: 2px;
  box-shadow: 0 1px 1px 0 #00000024, 0 1px 1px 0 #0000001f, 0 2px 1px -5px #00000033;
  margin-top: 16px;
}

.quiz-pro-act {
  position: relative;
  background-color: #405dd4;
  display: block;
  width: 0;
  height: 30px;
  min-width: 10px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  transition: width 300ms ease, background-color 300ms ease;
}

.quiz-pro-label {
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  bottom: auto;
  margin-top: 5px;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: color .4s ease;
}

.quiz-page-question,.quiz-res-tl {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
  border-radius: 2px;
  margin: 16px 0;
}

.quiz-res-tl {
  font-weight: 500;
}

.quiz-page-img {
  position: relative;
  padding-top: 50%;
  width: 100%;
  overflow: hidden;
  background: #f8f8f8;
  border-radius: 2px;
  margin-bottom: 16px;
}

.quiz-page-pic {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quiz-page-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-bottom: 8px;
  margin-top: 16px;
}

.quiz-page-item {
  width: 100%;
  padding-left: 12px;
  margin-bottom: 12px;
  position: relative;
}

.quiz-page-item.result-images-item {
  width: 50%;
}

.quiz-page-con {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 55px;
  background-color: #f6f6f6;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 16px;
  box-shadow: rgba(0,0,0,.12) 0 1px 3px,rgba(0,0,0,.24) 0 1px 2px;
}

.quiz-page-con span {
  flex: 1;
}

.order-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #c5d5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.order-true,.order-false,.order-img-true,.order-img-false {
  display: none;
}

.test-true {
  position: relative;
  background-color: #27a502;
  box-shadow: rgb(0 148 1 / 12%) 0 1px 3px,rgb(0 148 1 / 24%) 0 1px 2px;
  color: #fff;
}

.test-false {
  position: relative;
  background-color: #d70101;
  box-shadow: rgb(148 27 0 / 12%) 0 1px 3px,rgb(148 27 0 / 24%) 0 1px 2px;
  color: #fff;
}

.test-type {
  position: relative;
  background-color: #f5f0ea;
}

.quiz-images-item .test-true {
  background-color: #d4ebcd;
}

.quiz-images-item .test-false {
  background-color: #f1c4c4;
}

.test-true .order-wrap,.test-false .order-wrap,.test-type .order-wrap {
  border: none;
}

.test-true .order-true,.test-false .order-false,.test-true .order-img-true,.test-false .order-img-false,.test-type .order-true {
  display: block;
}

.test-true .order-true,.test-false .order-false,.test-type .order-true {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #6dd271;
  border: 3px solid #ffffff73;
  display: flex;
  justify-content: center;
  align-items: center;
}

.test-false .order-false {
  background-color: #dd8279;
}

.test-type .order-true {
  background-color: #3871e1;
}

.icon-true {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.icon-false {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.order-img-true,.order-img-false {
  position: absolute;
  top: 24px;
  left: 30px;
}

.icon-img-true {
  width: 30px;
  height: 30px;
  fill: #38c296;
}

.icon-img-false {
  width: 30px;
  height: 30px;
  fill: #e95650;
}

.test-false span {
  text-decoration: line-through;
}

.test-true .quiz-images-pic {
  border-color: #38c296;
}

.test-false .quiz-images-pic {
  border-color: #e95650;
}

.quiz-page-link {
  position: relative;
  width: 100%;
  padding: 10px 28px;
  margin-bottom: 21px;
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  text-align: center;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 5px rgba(0,0,0,.15);
  background-color: #f23276;
  transition: all .3s;
  cursor: pointer;
  display: none;
}

.quiz-page-link i {
  position: relative;
  width: 14px;
  height: 14px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: rotate(45deg);
  display: inline-block;
  animation: wave 1s infinite;
}

@keyframes wave {
  0% {
    opacity: .3;
  }

  50% {
    opacity: .6;
  }

  100% {
    opacity: 1;
  }
}

.quiz-page-link i:first-child {
  margin-left: 8px;
  animation-delay: 0.2s;
}

.quiz-page-link i:nth-child(2) {
  animation-delay: 0.4s;
}

.reveal-box {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  box-shadow: rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 2px 6px 2px;
  display: none;
}

.reveal-true {
  border: 3px solid #119503;
  background-color: #f6fff3;
}

.reveal-false {
  border: 3px solid #c61616;
  background-color: #fff3f3;
}

.reveal-true-tl,.reveal-false-tl {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  display: none;
}

.reveal-true-tl {
  color: #007512;
}

.reveal-false-tl {
  color: #970000;
}

.reveal-answer {
  margin-left: 10px;
}

.icon-reveal-true,.icon-reveal-false {
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 16px;
}

.icon-reveal-true {
  border: 3px solid #489126;
  background-color: #cef9d469;
  fill: #007512;
}

.icon-reveal-false {
  border: 3px solid #ca4a4a;
  background-color: #f9cece69;
  fill: #970000;
}

.reveal-true .reveal-true-tl,.reveal-false .reveal-false-tl {
  display: flex;
}

.reveal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 12px;
}

.reveal-img {
  width: 80%;
  box-shadow: rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px;
  border-radius: 16px;
  margin-top: 10px;
}

.quiz-btn {
  margin-top: 16px;
}

.quiz-btn-item {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin: 14px auto;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #3871e1;
}

.quiz-disabled {
  border-color: #ddd;
  background-color: #ddd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-next {
  background-color: #3871e1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.quiz-restart {
  color: #3871e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-arrow {
  width: 20px;
  height: 20px;
  fill: #fff;
  margin-left: 12px;
}

.quiz-restart .quiz-arrow {
  fill: #3871e1;
}

.quiz-restart:hover {
  text-decoration: underline;
}

/* .quiz-page-question {
    padding: 10px;
    background-color: #aaa;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
    border-radius: 2px;
    margin: 16px 0 20px;
} */

.quiz-detail .quiz-page-con {
  justify-content: center;
  height: 60px;
  line-height: 60px;
  padding: 0;
  font-size: 17px;
  background-color: #d4d4d5;
  color: #554c4c;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
  border-radius: 4px;
}

.quiz-page-con.result-images-con {
  height: auto;
}

.correct-item::after,.incorrect-item::after,.fact-item::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -15px;
  top: -20px;
  border-radius: 20px;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.correct-item::after {
  background: url(../images/quiz/correct-answer.svg) no-repeat center center #fff;
}

.incorrect-item::after {
  background: url(../images/quiz/incorrect-answer.svg) no-repeat center center #fff;
}

.fact-item::after {
  background: url(../images/quiz/correct-user-answer.svg) no-repeat center center #fff;
}

.correct-item .quiz-page-con,.fact-item .quiz-page-con {
  background-color: #27a502;
  border-color: #27a502;
  color: #fff;
}

.incorrect-item .quiz-page-con {
  background-color: #d70101;
  border-color: #d70101;
  color: #fff;
}

.quiz-images-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-top: 16px;
  margin-bottom: 6px;
}

.quiz-images-item {
  width: 50%;
  padding: 0 0 12px 12px;
}

.quiz-images-pic {
  display: block;
  margin: 0 auto;
  border: 5px solid #aaa;
  border-radius: 10px;
}

.quiz-images-pic.quiz-page-con {
  padding: 0;
  background-color: #fff;
}

.quiz-images-pic.result-images-pic {
  border: none;
  padding: 15px 0;
  max-width: 60%;
}

.quiz-topic-tl {
  margin-bottom: 16px;
  font-weight: 700;
}

.test-relate {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  margin-top: 4px;
  margin-bottom: 16px;
  padding: 0 12px 12px;
  display: none;
}

.test-relate-tl {
  font-size: 16px;
  font-weight: 700;
  margin-top: 24px;
  text-align: left;
}

.test-relate-ls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  margin-right: -10px;
}

.test-relate-item {
  width: 50%;
  padding-right: 10px;
  margin-bottom: 12px;
}

.test-relate-con {
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 12px;
  background-color: #f7f9fb;
  border-radius: 4px;
}

.test-relate-tag {
  font-size: 12px;
  line-height: 1.2;
  color: #666;
}

.test-relate-num {
  font-size: 20px;
  font-weight: 700;
  margin-top: 16px;
}

.relate-true-score {
  font-size: 20px;
  font-weight: 700;
  margin-top: 16px;
  color: #32ba7c;
}

.relate-false-score {
  font-size: 20px;
  font-weight: 700;
  margin-top: 16px;
  color: #e04f5f;
}

.math-desk {
  display: flex;
  justify-content: flex-end;
  margin-top: -20px;
  margin-bottom: 16px;
}

.math-desk .horo-explore-link {
  display: none;
}

.scorpio-con {
  margin-left: -16px;
}

.scorpio-section {
  position: relative;
  padding-left: 16px;
  margin-top: 16px;
}

.scorpio-section-inner {
  padding-left: 24px;
  padding-right: 24px;
  border: 1px solid #eee;
}

.scorpio-tl {
  position: relative;
  padding: 16px 0;
  text-align: center;
}

.scorpio-tl::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 3px;
  margin-left: -30px;
  content: '';
  background-color: #1a5877;
}

.scorpio-date {
  font-size: 14px;
  display: block;
  margin: 12px 0;
  text-align: center;
}

.scorpio-des {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  margin-bottom: 16px;
  -webkit-line-clamp: 3;
  text-align: center;
}

.scorpio-des h3 {
  font-size: 16px;
}

.scorpio-more {
  font-family: 'BluuNext', sans-serif, serif;
  display: block;
  width: 100%;
  height: 40px;
  margin: 20px auto 24px;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  background-color: #1a5877;
  color: #fff;
  border-radius: 20px;
}

.scorpio-ads {
  margin-top: 24px;
}

.scorpio-border-ads {
  padding-left: 16px;
}

.astro-sign-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
  margin-top: -16px;
}

.astro-sign-item {
  width: 33.3333%;
  padding-left: 16px;
  margin-top: 16px;
}

.astro-sign-link {
  border: 1px solid #bd9956;
  line-height: 32px;
  border-radius: 16px;
  text-align: center;
  font-size: 14px;
}

.story-img {
  width: 100%;
  padding-top: 27.5%;
  position: relative;
}

.story-index-img {
  position: absolute;
  top: 0;
}

.zodiac-img {
  width: 100%;
  padding-top: 48.8%;
  position: relative;
}

.zodiac-index-img {
  position: absolute;
  top: 0;
}

.story-index p {
  margin: 16px auto;
}

.story-h4 {
  font-weight: 700;
  margin: 16px auto;
}

.story-p {
  margin-bottom: 8px;
}

.story-top {
  margin-top: 16px;
}

.story-ads-bottom {
  margin-bottom: 20px;
}

.story-ads-tb {
  margin-top: 20px;
  margin-bottom: 20px;
}

.bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2100;
  width: 100%;
  margin-top: 24px;
}

.bottom-bar-line {
  border-top: 3px solid #ddab7d;
}

.bottom-bar-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 0 20px;
  background-color: #fff;
}

.bottom-bar-item {
  position: relative;
  width: 45%;
  background-color: #051c35;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.bottom-bar-item.more:hover,.bottom-bar-item.right:hover {
  cursor: pointer;
}

.bottom-bar-item.special {
  width: 100%;
}

.bar-item-more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bar-item-more span {
  font-size: 15px;
  padding-left: 5px;
}

.icon-more {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.sort-directory {
  background-color: #efece9;
  margin-top: 24px;
  margin-bottom: 24px;
}

.sort-directory-tl {
  color: #444;
  font-size: 20px;
  font-weight: 700;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.sort-directory-ul {
  padding-bottom: 20px;
}

.sort-directory-li {
  list-style: disc inside;
  padding: 0 0 10px 20px;
}

.sort-directory-desc {
  font-size: 16px;
  text-decoration: underline;
}

.sort-directory-desc:hover {
  color: #051c35;
}

.sort-directory-btn {
  display: flex;
  justify-content: center;
}

.sort-directory-link {
  z-index: 999;
  position: relative;
  width: 60%;
  height: 55px;
  line-height: 55px;
  border-radius: 8px;
  display: inline-block;
  background-color: #051c35;
  color: #fff;
  text-align: center;
  margin: 24px auto;
}

.sort-directory-link:hover {
  transition: all ease 0.3s;
  box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
}

.sort-btn-desc {
  font-weight: 700;
}

.sort-btn-desc::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 25px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.zodiac-h3 {
  font-size: 20px;
  line-height: 1.1;
  margin-top: 20px;
  margin-bottom: 18px;
  font-weight: 700;
}

.control-none {
  display: none;
}

.control-show {
  display: block;
}

.opacitymask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 66px;
  z-index: 1010;
  transition: all ease 0.3s;
  background-color: rgba(0, 0, 0, 0.55);
  display: none;
}

.bottom-more,.bottom-more-list {
  position: fixed;
  bottom: 80px;
  display: none;
  z-index: 1020;
  left: 0px;
  right: 0px;
  padding: 0px 40px 20px;
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  margin: 0px 20px;
  animation: move-top 0.6s;
}

.bottom-more .icon-new,.result-link .icon-new {
  width: 20px;
  height: 30px;
}

.menu-share-info {
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
}

.menu-share-img {
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  border-radius: 50%;
}

.menu-share-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 18px;
  margin-left: 10px;
  font-weight: 700;
}

.menu-items {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
  cursor: pointer;
  background-color: #eee;
  border-radius: 20px;
  padding: 4px 0 4px 14px;
}

.space-between {
  justify-content: space-between;
}

.catecon-title {
  flex: 1;
  font-size: 14px;
  color: #000;
  font-weight: normal;
  padding-left: 10px;
  margin-right: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: underline;
}

.quiz-share-con {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.share-facebook,.share-line,.share-twitter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 38px;
  margin: 16px 10px 0 0;
  border-radius: 4px;
}

.share-facebook {
  background-color: #3b5997;
}

.share-line {
  background-color: #01b902;
}

.share-twitter {
  background-color: #000;
}

.icon-share {
  width: 22px;
  height: 22px;
}

.icon-twitterx {
  width: 40px;
  height: 40px;
}

.quiz-share-con span {
  margin-left: 2px;
  color: #fff;
  font-weight: 700;
  margin-right: 5px;
}

.angel-search {
  position: relative;
  width: 100%;
}

.angel-search input {
  width: 100%;
  padding: 10px 16px;
  outline: none;
  border: 1px solid #b3b4b6;
  border-radius: 4px;
}

input[type="search"]::-webkit-search-clear-button {
  -webkit-appearance: none;
  appearance: none;
}

.angel-search .search-button {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translate(0,-50%);
  display: flex;
  cursor: pointer;
}

.icon-search {
  width: 20px;
  height: 20px;
  fill: #b4b9c0;
}

.number-ls {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.number-item {
  width: 33.3333%;
}

.number-con {
  display: block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  text-align: center;
  border: 1px solid #cdd0d5;
  background-color: #f8f8f8;
  border-radius: 50%;
  margin: 0 auto 10px auto;
}

.number-con:hover {
  border: 1px solid #d0b98b;
  background-color: #d0b98b;
  color: #fff;
}

.number-more {
  display: none;
}

.load-more {
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-image: linear-gradient(to right, #06162d, #064b6c);
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
  margin: 6px 0 16px 0;
  cursor: pointer;
}

.load-more:hover {
  color: #bd9956;
}

.quiz-more {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border: 1px solid #c52f66;
  border-radius: 4px;
  margin: 6px 0 16px 0;
  cursor: pointer;
}

.quiz-more span {
  font-size: 16px;
  color: #c52f66;
  font-weight: 700;
  margin-right: 6px;
}

.quiz-more:hover span {
  text-decoration: underline;
}

.quiz-more .icon-down {
  width: 14px;
  height: 16px;
  fill: #c52f66;
}

.number-p {
  margin-bottom: 16px;
}

.number-list {
  display: flex;
  flex-wrap: wrap;
}

.number-list-item {
  width: 33.3333%;
  margin-bottom: 10px;
}

.number-list-con {
  width: 96px;
  padding: 8px 0;
  text-align: center;
  border: 1px solid #cdd0d5;
  background-color: #f8f8f8;
  border-radius: 4px;
  margin: 0 auto;
  cursor: pointer;
}

.number-list-con:hover,.var-share-item:hover {
  border: 1px solid #d0b98b;
  background-color: #d0b98b;
  color: #fff;
}

.number-piccon {
  width: 100%;
  position: relative;
  padding-top: 27.5%;
  margin: 16px 0;
}

.number-pic {
  position: absolute;
  top: 0;
  width: 100%;
}

.number-result h3 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 4px solid #caac77;
  margin-bottom: 10px;
  margin-top: 16px;
}

.number-result p {
  margin-bottom: 10px;
}

.number-result b {
  background: linear-gradient(transparent 40%,#ffcecd 36%);
}

.number-sign {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #cdd0d5;
  margin: 14px 0;
}

.number-sign-left {
  width: 120px;
}

.number-sign-left img {
  width: 120px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
}

.number-sign-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 12px;
}

.number-right-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}

.number-right-button {
  background-color: #0b3250;
  color: #fff;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 3px;
}

.faq-ls {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.faq-item-header {
  color: #630cd2;
  background-color: #e4d1f5;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-faq {
  width: 24px;
  height: 24px;
  fill: #630cd2;
  transform: rotate(180deg);
  margin-left: 4px;
}

.faq-item-answer {
  padding: 20px 10px;
  border-left: 1px solid #8440dd;
  border-right: 1px solid #8440dd;
  border-bottom: 1px solid #8440dd;
  color: #39353e;
  display: none;
}

.faq-item.active .faq-item-header {
  color: #fff;
  background-color: #8440dd;
  border-bottom: none;
}

.faq-item.active .icon-faq {
  fill: #fff;
  transform: rotate(0deg);
}

.faq-item.active .faq-item-answer {
  display: block;
}

.love-com {
  position: relative;
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.love-com-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(to right, #f1c5b6, #af7eee);
  border-radius: 6px 6px 0 0;
}

.love-com-tl {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.love-com-desc {
  color: #333;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 10px;
}

.icon-love-bird {
  width: 56px;
  height: 40px;
}

.love-com-bot {
  padding: 16px 20px;
}

.love-bot-sign {
  display: flex;
  justify-content: center;
  margin-left: -12px;
  margin-bottom: 12px;
}

.love-sign-item {
  position: relative;
  width: 100%;
  margin-left: 12px;
}

.select-love {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  font-weight: 400;
  border: 1px solid #888;
  border-radius: 20px;
  padding: 6px 16px;
}

.select-love::after {
  position: relative;
  top: 4px;
  display: block;
  width: 0;
  height: 0;
  content: "";
  border: 6px solid #333;
  border-color: #333 transparent transparent transparent;
  border-radius: 3px;
}

.love-bot-match {
  font-family: 'BluuNext', sans-serif, serif;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: #1a5877;
  color: #fff;
  margin: 0 auto;
  cursor: pointer;
}

.zodiac-td {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
  background: linear-gradient(to right, #fffdee, #fde3f5);
  border-radius: 6px;
}

.zodiac-td-left {
  display: flex;
  flex-direction: column;
}

.zodiac-td-tl {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 20px;
  font-weight: 700;
}

.zodiac-td-desc {
  font-family: 'ProductSans', sans-serif, serif;
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 12px;
}

.zodiac-td-link {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: #1a5877;
  color: #fff;
}

.topic-pick {
  margin-bottom: 20px;
}

.topic-pick-item {
  margin-top: 16px;
  margin-bottom: 16px;
}

.topic-pick-con {
  position: relative;
  display: flex;
  flex-direction: column;
}

.topic-pick-con:hover .topic-pick-tl {
  text-decoration: underline;
}

.topic-pick-con:hover .topic-pick-piccon {
  transform: scale(1.1);
}

.topic-pick-pic {
  position: relative;
  padding-top: 0;
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
}

.topic-pick-piccon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all ease .3s;
}

.topic-pick-info {
  margin-top: 12px;
}

.topic-pick-tag {
  display: flex;
  align-items: center;

  font-size: 14px;
  font-weight: 700;
  color: #046aff;
}
.topic-pick-tag img {
  width: 18px;
  height: 18px;
}
.topic-pick-tag span {
  padding-left: 8px;
}

.topic-pick-tl {
  font-family: 'ProductSans', sans-serif, serif;
  font-weight: 700;
  margin-top: 4px;
}

.topic-pick-desc {
  font-family: 'ProductSans', sans-serif, serif;
  font-size: 16px;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
}

.topic-pick-desc.weight {
  font-weight: 700;
}

.swiper-container {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -16px 12px -16px;
  padding-bottom: 8px;
}

.swiper-wrapper {
  display: flex;
  overflow: hidden;
  width: calc(400% - 90px);
  /* height: 180px; */
  padding-left: 16px;
  padding-right: 4px;
}

.swiper-con {
  position: relative;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.swiper-piccon {
  position: relative;
  height: 100%;
  border-radius: 12px 12px 0 0;
  background-image: linear-gradient(to right,rgba(0,0,0,1),rgba(0,0,0,.5));
  overflow: hidden;
}

.swiper-img {
  width: 100%;
  height: 160px;
  border-radius: 12px 12px 0 0;
  object-fit: cover;
  overflow: hidden;
  transition: all ease .3s;
}

.swiper-topic {
  padding: 12px;
}

.swiper-topic-tag {
  font-size: 14px;
  font-weight: 700;
  color: #bf7545;
  margin-bottom: 10px;
}

.swiper-topic-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.swiper-info-name {
  flex: 1;
  font-size: 16px;
  line-height: 1.4;
  font-family: 'ProductSans', sans-serif, serif;
  margin-right: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swiper-info-arrow {
  position: relative;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: #1a5877;
}

.swiper-info-arrow::after {
  position: absolute;
  top: 10px;
  left: 9px;
  width: 7px;
  height: 7px;
  content: "";
  transform: rotate(45deg);
  border: 2px solid #fff;
  border-width: 2px 2px 0 0;
}

.var-share {
  display: none;
}

.var-share-ls {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  padding: 32px 16px;
}

.var-share-item {
  display: block;
  width: calc(16.6667% - 4px);
  border: 1px solid #101a28;
  padding: 4px;
  border-radius: 4px;
  text-align: center;
  margin: 2px;
}

.var-share-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #17181a;
  opacity: .45;
}

.ver-share-open {
  position: fixed;
  right: 10px;
  bottom: 50%;
  z-index: 9999;
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-name: slideInRight;
  cursor: pointer;
  height: 44px;
  width: 44px;
  background-color: #bd9956;
  background-image: url(../images/share.svg);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.35);
  text-align: center;
}

.ver-share-open:checked {
  display: none;
}

.ver-share-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #17181a;
  opacity: .45;
  display: none;
}

.ver-share-contain {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 100000;
  border-radius: 16px 16px 0 0;
}

.ver-contain-top {
  padding: 16px 20px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px 16px 0 0;
}

.ver-top-desc {
  font-size: 16px;
  font-weight: 500;
}

.icon-ver-close {
  width: 12px;
  height: 12px;
  fill: #757575;
}

.ver-contain-center {
  display: flex;
  align-items: center;
  padding: 20px 16px;
  border-bottom: 1px solid #e8e8e8;
}

.ver-center-piccon {
  width: 70px;
  height: 70px;
}

.ver-center-piccon img {
  width: 100%;
  height: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 20%;
}

.ver-center-desc {
  font-size: 16px;
  font-weight: 700;
  margin-left: 12px;
}

.ver-contain-bottom {
  display: flex;
  align-items: center;
  margin-left: -20px;
  padding: 20px 16px 30px 16px;
}

.ver-bottom-item {
  position: relative;
  width: 25%;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ver-bottom-piccon {
  position: relative;
}

.ver-bottom-piccon img {
  width: 100%;
  height: 100%;
}

.ver-bottom-desc {
  font-size: 12px;
  margin-top: 6px;
}

.special-color {
  color: red;
}

/* horoscope-fortune-page */

.horo-explore-ls {
  display: flex;
  flex-wrap: wrap;
}

.horo-explore {
  width: 100%;
  position: relative;
  margin-bottom: 16px;
}

.horo-explore-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 16px 16px 0 0;
  background-image: url(../images/horoscope/horo-bg.jpg);
  background-size: cover;
}

.love-explore {
  width: 50px;
  height: 50px;
  fill: #fff;
}

.horo-explore-tl {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 22px;
  color: #fff;
  margin-top: 4px;
}

.horo-explore-bot {
  padding: 16px 16px 24px;
  background-color: #f3f4f6;
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.horo-explore-desc {
  font-family: 'ProductSans', sans-serif, serif;
  font-size: 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  text-overflow: ellipsis;
  overflow: hidden;
}

.horo-explore-link {
  display: inline-block;
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: #1a5877;
  color: #fff;
  padding: 0 32px;
  margin-top: 16px;
  cursor: pointer;
}

/* horoscope-detail-page */
.horo-today-ls {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 22px;
  overflow: hidden;
}

.horo-today-item {
  position: relative;
  width: 25%;
  text-align: center;
  padding: 12px 0;
  background-color: #f3f4f6;
}

.horo-today-item.active {
  background-color: #4506ac;
  color: #fff;
}

.horo-today-name {
  text-align: center;
}

.horo-badges-ls {
  margin-bottom: 20px;
}

.horo-badges-item {
  display: flex;
  margin-bottom: 16px;
}

.horo-badges-emoji {
  width: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.horo-emoji-name {
  font-size: 14px;
  font-weight: 700;
  margin-left: 12px;
}

.horo-badges-item ul {
  max-width: 140px;
  margin-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.horo-badges-item li {
  background-color: #f0e8fb;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.horo-badges-item .star {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
}

.horo-badges-item .star-full {
  background: url(../images/horoscope/full-star.svg) center no-repeat;
}

.horo-badges-item .star-half {
  background: url(../images/horoscope/half-star.svg) center no-repeat;
}

.horo-badges-item .star-empty {
  background: url(../images/horoscope/empty-star.svg) center no-repeat;
}


.fortune-score-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  justify-content: space-between;
  background: #fff;
  border-radius: 16px;
  margin: 24px 0;
  gap: 30px;
}

.fortune-score-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fortune-score-label {
  display: inline-block;
  background: linear-gradient(135deg, #5ba3f5 0%, #4a90e2 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 25px;
  margin-bottom: 10px;
}

.fortune-score-number {
  font-size: 80px;
  font-weight: 700;
  color: #9b7dd4;
  line-height: 1;
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
  display: flex;
}

.fortune-score-right {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

.fortune-tube-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.fortune-tube {
  width: 28px;
  height: 100px;
  background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.fortune-tube-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 16px;
  transition: height 0.6s ease-out;
}

.fortune-tube-item:nth-child(1) .fortune-tube-fill {
  background: linear-gradient(180deg, #ffb3c1 0%, #ff8fa3 100%);
}

.fortune-tube-item:nth-child(2) .fortune-tube-fill {
  background: linear-gradient(180deg, #fff59d 0%, #ffeb3b 100%);
}

.fortune-tube-item:nth-child(3) .fortune-tube-fill {
  background: linear-gradient(180deg, #a5f5b5 0%, #81e991 100%);
}

.fortune-tube-item:nth-child(4) .fortune-tube-fill {
  background: linear-gradient(180deg, #a5d8ff 0%, #74c0fc 100%);
}

.fortune-tube-value {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.fortune-tube-label {
  display: inline-block;
  background: linear-gradient(135deg, #5ba3f5 0%, #4a90e2 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: capitalize;
}

.fortune-tips {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.fortune-tips div:first-child {
  display: flex;
  padding: 24px;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 8px;
  background: rgba(55, 185, 148, 0.05);
}
.fortune-tips div:last-child {
  display: flex;
  padding: 24px;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 8px;
  background: rgba(235, 90, 90, 0.04);
}
.fortune-tips div:first-child li,
.fortune-tips div:last-child li {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  padding-left: 36px;
}
.fortune-tips div:first-child li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 21px;
  background-image: url(../images/good.svg);
}

.fortune-tips div:last-child li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 21px;
  background-image: url(../images/bad.svg);
}

.fortune-tips h3 {
  font-size: 18px;
  font-family: 'BluuNext', sans-serif, serif;
  font-weight: 700;
}

.retake-quiz-ls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -10px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.retake-quiz,.retake-similar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  line-height: 36px;
  font-weight: 600;
  color: #fff;
  margin-left: 10px;
  box-shadow: 0 5px rgba(0,0,0,.15);
  background-color: #f23276;
  border-radius: 50px;
  padding: 8px 16px;
}

.retake-similar {
  background-color: #0082ff;
}

.icon-retake {
  width: 20px;
  height: 20px;
  fill: #fff;
  margin-right: 8px;
}

.retake-quiz:hover,.retake-similar:hover {
  text-decoration: underline;
}

.result-share {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 20px;
  left: 0;
  width: 80%;
  margin: 0 auto;
  z-index: 1001;
  padding: 11px 20px;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: rgba(0,0,0,.35) 0 5px 15px;
  color: #6300b9;
  font-weight: 600;
}

.result-share-btn {
  position: relative;
  padding: 8px;
  cursor: pointer;
  color: #6300b9;
  font-weight: 600;
}

.result-share .share-ls {
  margin-top: 0;
  margin-bottom: 0;
  flex: 1;
  justify-content: center;
}

.horo-btn-ls {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: -12px;
}

.horo-btn-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-family: 'BluuNext', sans-serif, serif;
  width: 50%;
  margin-right: 12px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #1a5877;
  color: #fff;
  border-radius: 22px;
  cursor: pointer;
}

.horo-btn-link:hover {
  text-decoration: underline;
}

.icon-again {
  width: 20px;
  height: 20px;
  fill: #fff;
  margin-right: 8px;
}

.share-social {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 14px 14px 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #eee;
  border-radius: 8px;
}

.share-tl {
  font-size: 16px;
  font-weight: 700;
}

.share-ls {
  display: flex;
  margin-left: -12px;
  margin-top: 12px;
  margin-bottom: 16px;
}

.share-item {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-left: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.share-item-facebook {
  background-color: #3e63b1;
}

.icon-facebook {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.share-item-twitter {
  background-color: #000;
}

.icon-twitter {
  width: 48px;
  height: 48px;
  fill: #fff;
}

.share-item-line {
  background-color: #05c303;
}

.icon-line {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.share-blog-ls.mt-0 {
  margin-top: 0px;
}

/* tarot-detail-page */

.tarot-card {
  position: relative;
  padding: 20px 28px;
  margin: 20px auto 20px;
  width: 100%;
  /* min-height: 400px; */
}

.tarot-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  border-left: 1px solid #d5d2d2;
  border-top: 1px solid #d5d2d2;
  border-bottom: 1px solid #d5d2d2;
}

.tarot-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  border-right: 1px solid #d5d2d2;
  border-top: 1px solid #d5d2d2;
  border-bottom: 1px solid #d5d2d2;
}

.tarot-card-info {
  font-family: 'ProductSans', sans-serif, serif;
  text-align: center;
  margin: 0 auto 20px;
  color: #4f4b4b;
}

.tarot-card-info b {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 26px;
  font-weight: 700;
  display: block;
  padding-bottom: 12px;
  color: #000;
}

.tarot-card-link {
  font-family: 'BluuNext', sans-serif, serif;
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  margin: 16px auto 0;
  cursor: pointer;
  text-align: center;
  border-radius: 22px;
  background-color: #1a5877;
  color: #fff;
}

.tarot-card .home-tarot-in-ls {
  margin-top: 36px;
}

.tarot-card .home-tarot-in-item:first-child {
  transform: rotate(-10deg) translateY(-12px);
  margin-right: 12px;
}

.tarot-card .home-tarot-in-item:nth-child(2) {
  z-index: 1;
}

.tarot-card .home-tarot-in-item:last-child {
  transform: rotate(10deg) translateY(-12px);
}

.quiz-cate-scroll {
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 16px;
}

.quiz-cate-ls {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.quiz-cate-ls::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.quiz-cate-item {
  display: block;
  border: 1px solid #2656c9;
  color: #2656c9;
  padding: 4px 16px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border-radius: 16px;
  margin-right: 6px;
  cursor: pointer;
  white-space: nowrap;
  order: 2;
}

.quiz-cate-item:hover {
  text-decoration: underline;
}

.quiz-cate-item.cate-active {
  background-color: #2656c9;
  color: #fff;
  order: 1;
}

.promo-card {
  position: relative;
  background-color: #e16d5b;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
}

.promo-card-top {
  padding: 16px;
}

.promo-top-head {
  position: relative;
  font-size: 14px;
  margin-bottom: 10px;
}

.promo-top-head span {
  position: absolute;
  right: 0;
}

.promo-top-tl {
  margin-bottom: 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.promo-top-ls {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  z-index: 4;
}

.promo-top-item {
  width: 100%;
  margin-bottom: 8px;
}

.promo-top-con {
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px 12px;
}

.promo-top-con:hover {
  background-color: rgb(234 184 184 / 43%);
  border-color: #eab8b8;
}

.promo-top-con.promo-correct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-color: #68af15;
  color: #68af15;
  background-color: #fff;
}

.promo-top-con.promo-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-color: #f26354;
  color: #f26354;
  background-color: #fff;
}

.promo-top-con.promo-correct::after {
  content: "✔︎";
  color: #68af15;
}

.promo-top-con.promo-error::after {
  content: "×";
  color: #f26354;
  font-size: 18px;
  font-weight: 700;
}

.promo-card-bot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, .2);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.promo-bot-desc {
  line-height: 1.2;
}

.promo-bot-btn {
  padding: 8px 14px;
  background-color: #fff;
  color: rgba(0, 0, 0, .8);
  font-weight: 700;
  white-space: nowrap;
  border-radius: 18px;
  margin-left: 16px;
}

.promo-bounce .promo-bot-btn {
  animation: btn-bounce .3s;
  animation-timing-function: ease-in-out;
}

@keyframes btn-bounce {
  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.right-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
}

.right-item {
  width: 50%;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 12px;
}

.right-circle {
  width: 48px;
  height: 48px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  overflow: hidden;
}

.right-icon {
  width: 22px;
  height: 22px;
  fill: #333;
}

.right-tl {
  flex: 1;
  font-size: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
}

.right-item:hover .right-icon {
  fill: #3c5def;
}

.right-item:hover .right-tl {
  color: #3c5def;
  text-decoration: underline;
}

.kids-fun {
  position: relative;
  display: flex;
  background-color: #d23168;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}

.kid-fun-pic {
  width: 50%;
  max-height: 180px;
}

.kid-fun-piccon {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  overflow: hidden;
  transition: all ease .3s;
}

.kid-fun-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fun-info-top {
  font-family: BebasNeue-Regular;
  font-size: 40px;
  line-height: 1.2;
  color: #ffbd5a;
}

.fun-info-bot {
  display: flex;
  align-items: center;
}

.fun-bot-desc {
  font-family: BebasNeue-Regular;
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
  margin-right: 10px;
}

.icon-fun-next {
  width: 32px;
  height: 32px;
  fill: #fff;
}

.kids-fun:hover .kid-fun-piccon {
  transform: scale(1.15);
}

.by-writer {
  font-size: 14px;
  text-align: right;
  margin-bottom: 16px;
  color: #9c9c9c;
}

/* topic-descript */
.topic-descript {
  margin-top: 16px;
}

.topic-descript .load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.topic-descript .load-more::after {
  position: relative;
  top: -3px;
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  rotate: 135deg;
  margin-left: 8px;
}

.topic-descript .load-more ~ li {
  display: none;
}

.topic-descript h3 {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 18px;
  line-height: 1.4;
  padding: 12px;
  background-color: #fcf2df;
  margin-top: 20px;
  margin-bottom: 16px;
}

.topic-descript > img {
  display: block;
  margin: 16px auto;
}

.topic-descript p {
  margin-top: 16px;
  margin-bottom: 16px;
}

.topic-descript p + h3 {
  margin-top: 20px;
}

.topic-descript h4 {
  display: flex;
  position: relative;
  font-family: PS-NOW-MU-90pv-RKSJ-H;
  font-size: 16px;
  line-height: 22px;
  padding-left: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.topic-descript h4::after {
  content: "";
  width: 6px;
  background-color: #f96f40;
  position: absolute;
  left: 0;
  height: 100%;
}

.topic-descript table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.topic-descript td {
  border: 1px solid #ddd;
  font-size: 14px;
  color: #333;
  padding: 6px 16px;
}

.topic-descript td:first-child {
  width: 35%;
  font-weight: 700;
}

.topic-descript > a {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  background-color: #1a5877;
  color: #fff;
  font-family: 'BluuNext', sans-serif, serif;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  margin-bottom: 16px;
}

.topic-descript a:hover {
  text-decoration: underline;
}

.topic-descript h2 {
  font-size: 18px;
  margin-top: 12px;
}

/* psych_test_start */

.psych-grade {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 14px;
}

.grade-test {
  display: flex;
  align-items: center;
}

.grade-star {
  width: 70px;
  height: 14px;
  background-image: url(../images/empty-star.png);
  background-size: 14px 14px;
  margin-right: 4px;
  margin-top: -2px;
  position: relative;
}

.grade-star-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  background-image: url(../images/full-star.png);
  background-size: 14px 14px;
  width: 20%;
}

.grade-score {
  color: #f0b031;
}

.grade-time {
  display: flex;
  align-items: center;
  margin-left: 26px;
}

.icon-time {
  width: 16px;
  height: 16px;
  fill: #4e4397;
}

.grade-mins {
  margin-left: 4px;
  color: #4e4397;
}

.psych-link {
  font-family: 'BluuNext', sans-serif, serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  line-height: 44px;
  margin-top: 16px;
  color: #fff;
  border-radius: 22px;
  background-color: #051c35;
}

.btn-breath {
  position: relative;
  animation: Breath 1.3s linear infinite;
}

@keyframes Breath {
  0% {
    transform: scale(.92);
  }

  50% {
    transform: scale(100%);
  }

  100% {
    transform: scale(.92);
  }
}

.download-bubble {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: -16px;
  background-color: #0070c9;
  color: #fff;
  padding: 6px 8px;
  border-radius: 12px 12px 12px 0;
}

.icon-down-safe {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.download-bubble span {
  font-family: sans-serif;
  font-weight: 700;
  margin-left: 2px;
  font-size: 12px;
  line-height: 1.4;
}

.psych-link-text {
  font-size: 20px;
  margin-right: 6px;
}

.icon-psych-arrow {
  width: 24px;
  height: 24px;
  fill: #fff;
  transition: all ease .3s;
}

/* .psych-link:hover {
    background-color: #2367D0;
} */

.psych-link:hover .icon-psych-arrow {
  transform: translateX(8px);
}

.psych-like-ls {
  display: flex;
  flex-wrap: wrap;
}

.psych-like-item {
  width: 100%;
  margin-bottom: 16px;
}

.psych-like-con {
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 16px;
  -webkit-font-smoothing: antialiased;
  border-radius: 10px;
}

.psych-like-pic {
  position: relative;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.psych-like-piccon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  transition: all ease .3s;
}

.psych-like-content {
  padding: 10px;
}

.psych-like-tl {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  padding: 4px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* .psych-like-desc {
    font-size: 12px;
    line-height: 20px;
    padding-top: 4px;
    color: #888;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
} */

.psych-like-design {
  display: flex;
  align-items: center;
  margin-left: -12px;
  margin-top: 8px;
}

.psych-design-item {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.icon-clock {
  width: 18px;
  height: 18px;
  fill: #4e4397;
}

.icon-input {
  width: 14px;
  height: 14px;
  fill: #4e4397;
  margin-right: 2px;
}

.psych-like-text {
  font-size: 14px;
  color: #4e4397;
  margin-left: 4px;
}

.psych-like-con:hover .psych-like-piccon {
  transform: scale(1.05);
}

.psych-like-con:hover .psych-like-tl {
  color: #4e4397;
}

/* psych_test_page */

.psych-schedule {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.psych-pro {
  flex: 1;
  position: relative;
  left: 0;
  width: 100%;
  height: 16px;
  background-color: #e9ebf3;
  border-radius: 16px;
}

.psych-pro-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  background-color: #7072eb;
  border-radius: 16px 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.psych-num {
  font-size: 13px;
  color: #747589;
  margin-left: 12px;
}

.psych-ques {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  background-color: #4e4397;
  color: #fff;
  padding: 6px 6px 6px 40px;
  margin-top: 16px;
  clear: both;
}

.psych-ques::before {
  font-size: 20px;
  font-weight: 700;
  position: absolute;
  left: -10px;
  top: -8px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  content: 'Q';
  background-color: #fff;
  color: #4e4397;
  border: 6px solid #4e4397;
}

.psych-answer-ls {
  margin-top: 10px;
}

.psych-answer-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
}

.psych-input[type='radio'] {
  display: inline-block;
}

.psych-input {
  appearance: none;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  z-index: 1000;
  transition: all 0.15s ease-out;
  background-color: #e4e4e4;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  outline: none;
  min-width: 30px;
  margin: 8px 12px 8px 0;
  cursor: pointer;
}

.psych-input:checked {
  background-color: #4e4397;
}

.psych-input:checked::before {
  width: 30px;
  height: 30px;
  position: absolute;
  content: "✔";
  display: inline-block;
  font-size: 22px;
  text-align: center;
  line-height: 30px;
}

.psych-label {
  flex: 1;
  line-height: 34px;
  cursor: pointer;
}

.psych-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f6f6f6;
  margin-top: 10px;
  border-radius: 8px;
  display: none;
}

.psych-btn-back {
  font-family: 'BluuNext', sans-serif, serif;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  border: 1px solid #4e4397;
  border-radius: 6px;
  color: #4e4397;
  padding: 0 16px;
}

.psych-btn-next {
  font-family: 'BluuNext', sans-serif, serif;
  display: flex;
  align-items: center;
  background-color: #4e4397;
  color: #fff;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
}

.psych-btn-next span {
  font-weight: 700;
  margin-right: 4px;
}

.icon-psych-next {
  width: 18px;
  height: 18px;
  fill: #fff;
  transition: all ease .3s;
}

.psych-btn-back:hover {
  text-decoration: underline;
}

.psych-btn-next:hover {
  background-color: #2367D0;
}

.psych-btn-next:hover .icon-psych-next {
  transform: translateX(2px);
}

/* psych_test_results */
.psych-result-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'BluuNext', sans-serif, serif;
}

.psych-result-tl {
  font-size: 24px;
  text-align: center;
}

.psych-outcome {
  color: #dc3f74;
  line-height: 1.6;
  text-align: center;
}

.psych-intro {
  font-size: 18px;
  margin-top: 12px;
  font-family: 'ProductSans', sans-serif, serifserif;
}

.psych-result-exp {
  position: relative;
  border: 1px solid #dedede;
  border-radius: 8px;
  margin-top: 16px;
}

.psych-exp-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.psych-exp-info {
  padding: 10px 6px 6px 6px;
}

.psych-exp-tl {
  font-family: 'BluuNext', sans-serif, serif;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

.psych-exp-desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.psych-exp-p {
  flex: 1;
  margin-right: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

.icon-exp-arrow {
  width: 34px;
  height: 34px;
  fill: #4e2c6b;
}

.psych-result-exp:hover .icon-exp-arrow {
  fill: #dc3f74;
}

.psych-outcome-ls {
  margin-bottom: 32px;
}

.psych-outcome-item {
  margin-bottom: 12px;
}

.psych-outcome-tl {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 22px;
  text-align: center;
  margin-bottom: 4px;
}

.psych-outcome-score {
  text-align: center;
  margin-bottom: 8px;
}

.psych-outcome-score .tag {
  color: #dc3f74;
}

.outcome-pro {
  height: 22px;
}

.outcome-pro .psych-pro-active {
  height: 22px;
  line-height: 22px;
}

/* blog-detail-page */



.psych-blog h3 {
  font-family: 'BluuNext', sans-serif, serif;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  background-color: #4e4397;
  color: #fff;
  padding-left: 8px;
  margin-top: 16px;
  margin-bottom: 10px;
}

.psych-blog h4 {
  font-family: 'ProductSans', sans-serif, serif;
  font-weight: 700;
  margin: 16px 0;
}

.psych-blog p {
  font-family: 'ProductSans', sans-serif, serif;
  margin: 16px 0;
}

.psych-blog ul {
  font-family: 'ProductSans', sans-serif, serif;
  margin: 16px 0;
}

.psych-blog li {
  list-style: disc;
  margin-left: 16px;
  margin-bottom: 4px;
}
.psych-blog img {
  margin-bottom: 16px;
}
.psych-blog img + h3,
.psych-blog img + p {
  margin-top: 0;
}

.psych-relate {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f2f2ff;
  padding: 32px 0;
  margin: 16px 0;
}

.psych-relate p {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 22px;
  font-weight: 700;
  color: #6962B7;
  text-align: center;
  padding-bottom: 16px;
}

.psych-relate a {
  position: relative;
  display: block;
  text-align: center;
  background-color: #6962B7;
  color: #fff;
  overflow: hidden;
  width: 90%;
  max-width: 500px;
  padding: 12px 0;
  border-radius: 30px;
  font-weight: 700;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}

.psych-relate a:hover {
  text-decoration: underline;
}

.psych-relate a::after,.question-more::after,.astro-more::after,.question-index-more::after {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 10%, white 100%, rgba(255,255,255,0) 0%);
  animation: shiny 2s ease-in-out infinite;
}

@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}

.share-blog-ls {
  display: flex;
  margin-left: -12px;
  margin-top: 12px;
  margin-bottom: 16px;
}

.share-blog-item {
  position: relative;
  width: 33.3333%;
  height: 46px;
  border-radius: 4px;
  margin-left: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.share-blog-item:hover {
  transform: translateY(-5px);
}

.blog-facebook {
  background-color: #3e63b1;
}

.icon-blog-facebook {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.blog-twitter {
  background-color: #000;
}

.icon-blog-twitter {
  width: 48px;
  height: 48px;
  fill: #fff;
}

.blog-line {
  background-color: #05c303;
}

.icon-blog-line {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.share-btn-ls {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-bottom: -12px;
}

.share-btn-item {
  width: 100%;
  margin-bottom: 12px;
}

.share-btn-item:hover {
  opacity: .9;
}

.share-btn-con {
  position: relative;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 30px;
}

.share-btn-con span {
  color: #fff;
  font-weight: 700;
}

.btn-facebook {
  background-color: #3e63b1;
}

.icon-btn-facebook {
  width: 22px;
  height: 22px;
  fill: #fff;
  margin-right: 8px;
}

.btn-twitter {
  background-color: #000;
}

.icon-btn-twitter {
  width: 48px;
  height: 48px;
  fill: #fff;
}

.progress-bar {
  position: fixed;
  bottom: 67px;
  left: 0;
  height: 8px;
  background-color: #4e4397;
  width: 0;
}

.pick-next {
  position: sticky;
  top: 24px;
  padding: 0 8px;
  border: 1px solid #eee;
  border-top: 4px solid #4285f4;
}

.pick-tl {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 18px;
  font-weight: 700;
  margin-top: 8px;
}

.pick-tl::after {
  display: block;
  width: 20px;
  height: 0;
  content: "";
  border-bottom: 1px solid #ddd;
  margin-top: 10px;
}

.pick-next .topic-pick-item {
  margin-top: 12px;
  margin-bottom: 12px;
}

.icon-bot-arrow {
  width: 24px;
  height: 24px;
}

.bot-faceook,.bot-twitter,.bot-line {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bot-faceook {
  background-color: #3e63b1;
}

.bot-twitter {
  background-color: #000;
}

.bot-line {
  background-color: #05c303;
}

.icon-bot-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.icon-bot-arrow {
  width: 12px;
  height: 12px;
  fill: #666;
  margin-right: 12px;
}

.icon-bot-facebook {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.icon-bot-twitter {
  width: 28px;
  height: 28px;
  fill: #fff;
}

.icon-bot-line {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.icon-bot-test {
  width: 30px;
  height: 30px;
}

.icon-bot-article {
  width: 26px;
  height: 26px;
}

.icon-bot-file {
  width: 24px;
  height: 24px;
}

.dialog-top {
  display: none;
}

.topic-tl {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 24px;
  margin: 16px 0;
}
.banner-topic {
  margin-top: 16px;
}


.banner-topic-info {
  margin-top: 10px;
}
.banner-topic-tag {
  font-size: 14px;
  font-weight: 700;
  color: #046aff;
}
.banner-topic-tl {
  font-family: 'ProductSans', sans-serif, serif;
  font-size: 16px;
  font-weight: 700;

}
.banner-topic-con {
  margin-bottom: 16px;
}

.banner-topic-pic {
  position: relative;
  padding-top: 0;
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
}
.banner-topic-piccon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all ease .3s;
}
.banner-topic-con:hover .banner-topic-tl {
  text-decoration: underline;
}

.banner-topic-con:hover .banner-topic-piccon {
  transform: scale(1.1);
}
.astro-tl {
  display: flex;
  align-items: center;

  font-family: 'BluuNext', sans-serif, serif;
  font-weight: 700;
  font-size: 24px;
  margin: 24px 0 20px;
}
.icon-title {
  width: 34px;
  height: 34px;
  fill: #bd9956;
}
.astro-tl span {
  padding-left: 8px;
}
.topic-cate-ls {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
}
.topic-cate-item {
  width: 50%;
  padding-left: 16px;
  margin-bottom: 16px;
}
.topic-cate-con {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #dbe8fa91;
  border-radius: 10px;
  transition: all .3s ease;
}
.topic-cate-pic {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: transparent;
  overflow: hidden;
  transition: all .3s;
}
.topic-cate-piccon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.topic-cate-text {
  font-family: 'ProductSans', sans-serif, serif;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-left: 12px;
}
.topic-cate-text span {
  flex: 1;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.icon-cate-arrow {
  width: 20px;
  height: 20px;
  fill: #1a66d7;
  transition: all 0.3s ease;
  display: none;
}
.topic-cate-con:hover .topic-cate-pic {
  transform: scale(1.1);
}
.topic-cate-con:hover .icon-cate-arrow {
  transform: translateX(5px);
}
.topic-cate-con:hover .topic-cate-text {
  color: #1a66d7;
}

.kids-fun {
  position: relative;
  display: flex;
  background-color: #d23168;
  border-radius: 16px;
  overflow: hidden;
}
.kid-fun-pic {
  width: 50%;
  max-height: 180px;
}
.kid-fun-piccon {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  overflow: hidden;
  transition: all ease .3s;
}
.kid-fun-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fun-info-top {
  font-family: BebasNeue-Regular;
  font-size: 40px;
  line-height: 1.2;
  color: #ffbd5a;
}
.fun-info-bot {
  display: flex;
  align-items: center;
}
.fun-bot-desc {
  font-family: BebasNeue-Regular;
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
  margin-right: 10px;
}
.icon-fun-next {
  width: 32px;
  height: 32px;
  fill: #fff;
}

.category-item {
  font-family: 'ProductSans', sans-serif, serif;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-align: left;
}

.category-item:first-child {
  padding-top: 0;
}

.category-name {
  flex: 1;
  font-size: 15px;
  line-height: 22px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}

.category-num {
  font-size: 14px;
  line-height: 16px;
  color: #ccc;
  margin-left: 10px;
}

.category-item:hover .category-name {
  color: #046aff;
}

.category-item:hover .category-num {
  color: #046aff;
}

/* quiz-topic-detail */
.quiz-img {
  border-radius: 8px;
}
.topic-article {
  margin-top: 16px;
}
.topic-article img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}
.topic-article p {
  margin: 16px 0;
}
.topic-article img + p {
  margin-top: 0;
}
.topic-article h2 {
  font-family: 'BluuNext', sans-serif, serif;
  position: relative;
  background-color: #321f56;
  padding: 6px 5px 6px 48px;
  font-size: 20px;
  color: #fff;
  border-radius: 15px 10px 10px 15px;
  border-bottom: 3px solid #bd9956;
  margin: 20px 0 16px 0;
}

.topic-article h2::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  border: 3px solid #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: url(../images/idea.svg) no-repeat center center;
  background-size: 80% 60%;
  /* background-color: #5f6bda; */
  background-color: #bd9956;
  transform: translateY(-50%);
}

.topic-article h3 {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  padding-left: 10px;
  border-left: 5px solid #bd9956;
  margin: 16px 0 16px;
}
.topic-article h4 {
  font-weight: 700;
  margin: 16px 0;
}
.topic-article ul {
  padding-left: 16px;
  margin: 16px 0;
}
.topic-article li {
  list-style-type: disc;
  padding-left: 4px;
  margin-bottom: 10px;
}

.topic-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -16px;
  margin-bottom: 4px;
}
.topic-detail-cate {
  padding: 6px 20px;
  border: 1px solid #000;
  border-radius: 18px;
}
.topic-detail-cate:hover {
  background-color: #5246f5;
  color: #fff;
  border-color: #5246f5;
}
.topic-share {
  display: flex;
  align-items: center;
}
.topic-share-text {
  font-size: 14px;
  color: #666;
  display: none;
}
.topic-share-ls {
  display: flex;
  margin-top: 12px;
  margin-bottom: 16px;
}
.topic-share-ls .share-item {
  width: 36px;
  height: 36px;
  margin-left: 10px;
}

.topic-recommend {
  margin-bottom: 16px;
  font-weight: 700;
}
.recommend-tag {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 16px;
  font-weight: 700;
  background-color: #f0fa81;
  border-radius: 16px;
  color: #eb5369;
  
  padding: 6px 12px;
  display: none;
}
.recommend-link {
  display: block;
  stroke: #5246f5;
  margin-top: 12px;
}
.recommend-special {
  display: inline-flex;
  align-items: center;
  color: #5246f5;
}
.icon-recommend-arrow {
  width: 16px;
  height: 16px;
}

.hot-topic {
  margin: 16px 0;

  display: flex;
  flex-direction: column;
  
  position: relative;
  
  border-radius: 8px;
  overflow: hidden;
}
.topic-article .hot-topic-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 0;
}
.topic-article table {
  margin: 16px 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  background: #fff;
}
.topic-article table td img {
  margin-bottom: 0;
}
.topic-article th {
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
  padding: 10px 9px;
  background: #f6f8fa;
}
.topic-article td {
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
  padding: 10px 9px;
}

.hot-topic-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 16px;
  background: linear-gradient(to bottom, #192655, #111a3b);
  color: #fff;
}
.hot-topic-tag {
  display: flex;
  align-items: center;
}
.icon-topic-tag {
  width: 26px;
  height: 26px;
  fill: #fff;
}
.hot-topic-tag span {
  padding-left: 2px;
}
.hot-topic-tl {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
  margin-bottom: 12px;
}
.hot-topic-bot {
  display: flex;
  align-items: center;
  text-decoration: underline;
}
.icon-topic-link {
  width: 16px;
  height: 16px;
  stroke: #fff;
  margin-left: 6px;
}

.topic-think {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  
  border: 2px solid rgba(0, 0, 0, .12);
  box-shadow: 0 1px 7px 0 rgba(0,0,0,.12);
  border-radius: 64px;
  padding: 16px 24px;
}
.topic-think li {
  font-size: 30px;
  line-height: 30px;
  cursor: pointer;
}
.topic-think li.active {
  opacity: .5;
}

/* pop-up */
.mobile-fixed {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 20px;
  left: 0;
  width: 80%;
  margin: 0 auto;
  z-index: 1001;
  padding: 11px 20px;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: rgba(0,0,0,.35) 0 5px 15px;
  color: #07a08f;
  font-weight: 700;
}
.modal-share-ls {
  margin: 0;
}
.mobile-none {
  display: none;
}

/* travel page */
.travel-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}
.travel-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.travel-ls {
  display: flex;
  margin-left: -16px;
}
.travel-item {
  width: 28.57%;
  flex-shrink: 0;
  padding-left: 16px;
  margin-bottom: 16px;
}
.travel-con {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.travel-con:hover .travel-tl {
  text-decoration: underline;
}
.trend-topic-con:hover .trend-topic-piccon,
.travel-new-con:hover .public-piccon,
.travel-read-con:hover .travel-read-piccon,
.travel-topic:hover .travel-topic-left img {
  transform: scale(1.1);
}
.travel-pic {
  position: relative;
  width: 100%;
  padding-top: 100%;
  
  border-radius: 50%;
  overflow: hidden;
}
.travel-piccon {
  width: 100%;
  transition: all ease .3s;
}
.public-piccon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all ease .3s;
}
.travel-tl {
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
}

.travel-trend {
  
}

.carousel-block {

}
.carousel-container {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.trend-carousel {
  display: flex;
  transition: transform 0.5s ease;
}
.trend-carousel-item {
  flex: 0 0 100%;
}
.trend-carousel-con {
  position: relative; 
}
.trend-carousel-pic {
  position: relative;
  width: 100%;
  padding-top: 55%;
  overflow: hidden;
}
.trend-carousel-piccon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all ease 0.3s;
}
.trend-carousel-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  padding: 0 40px;
}
.trend-carousel-tag {
  font-size: 12px;
  color: #11309c;
}
.trend-carousel-tl {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 4px;
  text-align: center;
}
.trend-carousel-con:hover .trend-carousel-tl {
  text-decoration: underline;
}
  
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #d9d9d9;
  cursor: pointer;
  transition: background-color 0.3s;
}
.carousel-dot.active {
  background-color: #000;
}

.carousel-nav {
  position: absolute;
  bottom: 50px;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  padding: 0;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
.carousel-prev {
  left: 0;
}
.carousel-next {
  right: 0;
}
.carousel-arrow {
  width: 20px;
  height: 20px;
  fill: #11309c;
}



.trend-topic {
}
.trend-topic-item {
  margin-bottom: 16px;
}
.trend-topic-con {
  position: relative;

  display: flex;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9d9d9;
}
.trend-topic-pic {
  overflow: hidden;
}
.trend-topic-piccon {
  width: 130px;
  object-fit: cover;
  transition: all ease 0.3s;
}
.trend-topic-info {
  flex: 1;
  margin-left: 16px;
}
.trend-topic-tag {
  font-size: 12px;
  color: #11309c;
}
.trend-topic-tl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 4px;
}
.trend-topic-ads {
  width: 100%;
  margin-bottom: 16px;
}

.travel-new {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-bottom: 16px;
}
.travel-new-item {
  position: relative;
  flex: 0 0 85%;
  scroll-snap-align: start;
  margin-right: 16px;
  width: auto;
}
.travel-new .travel-new-item:last-child {
  margin-right: 0;
}
.travel-new-con {
  position: relative;
  background-color: #f4f4f4;
}
.travel-new-info {
  padding: 16px;
}
.travel-new-tl {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 10px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}

.travel-new-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
  min-height: 40px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
.travel-new-tag {
  font-size: 12px;
  color: #11309c;
}
.travel-new-pic {
  position: relative;
  width: 100%;
  padding-top: 70%;
  overflow: hidden;
}

/* travel topic */
.travel-sub-tl {
  color: #666;
  margin-top: -6px;
  margin-bottom: 16px;
}
.travel-topic {
  margin: 16px 0;
}
.travel-topic {
  position: relative;
  padding: 12px;
  border: 1px solid #d9d9d9;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.travel-topic-left {
  display: flex;
  align-items: center;
}
.travel-topic-pic {
  overflow: hidden;
  flex: 0 0 130px;
}
.travel-topic-left img {
  width: 130px;
  height: 100px;
  object-fit: cover;
  transition: all ease 0.3s;
  border-radius: 0;
  margin-bottom: 0;
}
.travel-topic-info {
  margin-left: 12px;
}
.travel-topic-info span {
  font-size: 12px;
  color: #11309c;
}
.travel-topic-info h3 {
  font-family: 'Roboto', system-ui, -apple-system;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 4px;
  margin-bottom: 0;

  border-left: none;
  padding-left: 0;
}
.travel-topic:hover .travel-topic-info h3 {
  text-decoration: underline;
}
.icon-travel-right {
  display: none;
}
.writter {
  font-size: 14px;
  color: #666;
  margin: 16px 0;
  display: block;
  font-style: italic;
  text-align: right;
}

.travel-more-ls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.travel-more-item {
  display: block;
  border: 1px solid #11309c;
  padding: 6px 16px;
  
  text-align: center;
  border-radius: 32px;
}
.travel-more-item:hover {
  background-color: #11309c;
  color: #fff;
}

.travel-read-ls {
  margin-top: 20px;
}
.travel-read-item {
  margin-bottom: 16px;
}
.travel-read-con {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9d9d9;
}
.travel-read-pic {
  overflow: hidden;
}
.travel-read-piccon {
  width: 130px;
  height: 86px;
  object-fit: cover;
  transition: all ease 0.3s;
}
.travel-read-info {
  flex: 1;
  margin-left: 16px;
}
.travel-read-tag {
  font-size: 12px;
  color: #11309c;
}
.travel-read-tl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  min-height: 52px;
  margin-top: 4px;
}
.travel-right {
  display: none;
}
.right-topic-ls {
  padding: 0 16px;
  /* margin-bottom: 16px; */
}
.right-topic-ls li {
  position: relative;
  line-height: 1.6;
  padding: 6px 0;
  padding-left: 14px;
  cursor: pointer;
}
.right-topic-ls li.active:before {
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 50%;
  width: 12px;
  height: 5px;
  background: #4370f5;
  margin-top: -2px;
}
.right-topic-ls a {

}

/* new horoscope fortune */
.zodiac-for-ls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.zodiac-for-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #999;
  border-radius: 10px;
  padding: 10px;
}
.zodiac-for-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zodiac-for-img {
  height: 40px;
  transition: all ease .3s;
  border-radius: 100%;
  background-color: #f8f8f8;
}
.zodiac-for-tl {
  font-family: 'BluuNext';
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.zodiac-for-desc {
  font-family: 'ProductSans';
  font-size: 12px;
  text-align: left;
  color: #999;
  white-space: nowrap;
}
.icon-zodiac-next {
  width: 20px;
  height: 20px;
  fill: #999;
  transition: all 0.3s ease;
  display: none;
}
.zodiac-for-item:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  color: #1a66d7;
}
.zodiac-for-item:hover .icon-zodiac-next {
  fill: #1a66d7;
  transform: translateX(5px);
}
.zodiac-for-item:hover .zodiac-for-img {
  transform: scale(1.1);
}


.zodiac-ex-ls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.zodiac-ex-item {   
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  gap: 12px;
  background-color: #f0e8fb;
  border-radius: 10px;
}
.quiz-bg .zodiac-ex-item {
  background-color: #dbe8fa91;
}
.quiz-bg .icon-ex-next { 
  fill: #1a66d7;
}
.zodiac-ex-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-ex-explore {
  width: 30px;
  height: 30px;
  fill: #7731d7;
  transition: all 0.3s ease;
}
.zodiac-ex-img {
  width: 36px;
  height: 36px;
  transition: all 0.3s ease;
}
.zodiac-ex-tl {
  flex: 1;
  font-family: 'BluuNext';    
  font-size: 16px;
  font-weight: 700;
}
.icon-ex-next {
  width: 20px;
  height: 20px;
  fill: #7731d7;
  transition: all 0.3s ease;
  display: none;
}
.zodiac-ex-item:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  color: #7731d7;
}
.zodiac-ex-item:hover .icon-ex-next {
  transform: translateX(5px);
}
.zodiac-ex-item:hover .zodiac-ex-img,
.zodiac-ex-item:hover .icon-ex-explore {
  transform: scale(1.1);
}
.quiz-bg .zodiac-ex-item:hover{
  color: #1a66d7;
}



.for-right-ls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.for-right-con {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #999;
  border-radius: 8px;
  gap: 12px;
}
.for-right-pic {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-color: transparent;
  transition: all 0.3s ease;
}
.for-right-piccon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.for-right-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.for-right-tl {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 16px;
  font-family: 'BluuNext';
}
.icon-aright {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  fill: #999;
}
.for-right-item:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.for-right-item:hover .icon-aright {
  fill: #1a66d7;
  transform: translateX(5px);
}
.for-right-item:hover .for-right-pic {
  transform: scale(1.1);
}
.for-right-item:hover .for-right-tl {
  color: #1a66d7;
}

/* new quiz */
.page-desc {
  margin-top: -6px;
  margin-bottom: 16px;
  color: #4f4b4b;
}
.trending-block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  background: #dbe8fa91;
  padding-bottom: 20px;
  transition: all 0.3s ease;
  margin: 20px 0;
}
.trending-block:hover {
  background: #dbe8fa91;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.trending-pic {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.trending-piccon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}
.trending-block:hover .trending-piccon {
  transform: scale(1.05);
}
.trending-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  margin-top: 20px;
}
.trending-tag {
  color: #046aff;
  font-family: "Google Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.96px;
}
.trending-tl {
  text-align: center;
  font-family: 'BluuNext';
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  margin-top: 8px;
  transition: color 0.3s ease;
}
.trending-btn {
  display: flex;
  padding: 10px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 32px;
  background: #046aff;
  margin-top: 20px;
  color: #FFF;
  font-family: "Google Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 2.8px;
  transition: all 0.3s ease;
}
.trending-block:hover .trending-btn {
  letter-spacing: 3.3px;
}

/* tarot_detail */
.tarot-about p {
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 12px;
}
.before-section {
  margin: 20px 0;
}
.before-tl {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 700;
  text-align: center;
  color: #1a1a2e;
  margin-bottom: 16px;
}
.before-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
}
.slider-container {
  overflow: hidden;
  max-width: 700px;
  width: 100%;
}
.slider-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}
.slider-item {
  min-width: 100%;
  padding: 0px 10px;
  
  box-sizing: border-box;
  text-align: center;
}
.slider-item h3 {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.slider-item p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
}
.slider-arrow {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: all 0.3s ease;
  border-radius: 50%;
  flex-shrink: 0;
}
.slider-arrow:hover {
  color: #4b5563;
  background: rgba(0, 0, 0, 0.05);
}
.slider-arrow:active {
  transform: scale(0.95);
}
.slider-arrow svg {
  width: 22px;
  height: 22px;
}

.tarot-more {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  
  margin: 20px 0 30px;
}
.tarot-more-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.tarot-more-item:hover {
  border-color: #3a6186;
  box-shadow: 0 4px 15px rgba(58, 97, 134, 0.15);
  transform: translateY(-2px);
}
.tarot-more-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #2c5270;
  letter-spacing: 0.3px;
}
.tarot-more-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.tarot-more-item:hover .tarot-more-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.tarot-fan-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  
  height: 110px;
  margin: 25px auto 15px;
  perspective: 1000px;
}
.tarot-fan-card {
  position: absolute;
  width: 55px;
  height: 85px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transform-origin: center bottom;
  transition: all 0.3s ease;
  cursor: pointer;
  --total-cards: 8;
  --spread-angle: 60;
  --angle: calc((var(--card-index) - (var(--total-cards) - 1) / 2) * (var(--spread-angle) / (var(--total-cards) - 1)));
  transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--card-index) * -2px));
  z-index: calc(10 - abs(var(--card-index) - 3.5));
}
.tarot-fan-card:nth-child(1) { transform: translateX(-80px) rotate(-18deg) translateY(-5px); }
.tarot-fan-card:nth-child(2) { transform: translateX(-57px) rotate(-13deg) translateY(-4px); }
.tarot-fan-card:nth-child(3) { transform: translateX(-34px) rotate(-8deg) translateY(-3px); }
.tarot-fan-card:nth-child(4) { transform: translateX(-11px) rotate(-3deg) translateY(-1px); }
.tarot-fan-card:nth-child(5) { transform: translateX(11px) rotate(3deg) translateY(-1px); }
.tarot-fan-card:nth-child(6) { transform: translateX(34px) rotate(8deg) translateY(-3px); }
.tarot-fan-card:nth-child(7) { transform: translateX(57px) rotate(13deg) translateY(-4px); }
.tarot-fan-card:nth-child(8) { transform: translateX(80px) rotate(18deg) translateY(-5px); }
.tarot-fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tarot-fan-card:nth-child(1):hover { transform: translateX(-80px) rotate(-18deg) translateY(-20px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.tarot-fan-card:nth-child(2):hover { transform: translateX(-57px) rotate(-13deg) translateY(-18px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.tarot-fan-card:nth-child(3):hover { transform: translateX(-34px) rotate(-8deg) translateY(-15px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.tarot-fan-card:nth-child(4):hover { transform: translateX(-11px) rotate(-3deg) translateY(-12px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.tarot-fan-card:nth-child(5):hover { transform: translateX(11px) rotate(3deg) translateY(-12px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.tarot-fan-card:nth-child(6):hover { transform: translateX(34px) rotate(8deg) translateY(-15px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.tarot-fan-card:nth-child(7):hover { transform: translateX(57px) rotate(13deg) translateY(-18px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.tarot-fan-card:nth-child(8):hover { transform: translateX(80px) rotate(18deg) translateY(-20px) scale(1.03); z-index: 20; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}

/* tarot */
.tarot-reading-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
  margin: 20px 0;
}
.tarot-reading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}
.tarot-reading-card:hover {
  border-color: #a855f7;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
  transform: translateY(-2px);
}
.tarot-reading-ad {
  grid-column: span 2;
  grid-row: 2;
}
.tarot-reading-tl {
  font-family: 'BluuNext', serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a5877;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tarot-reading-card:hover .tarot-reading-tl {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tarot-reading-card:hover .icon-card-right {
  fill: #a855f7;
}
.tarot-reading-img {
  width: 100%;
  max-width: 140px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
}
.tarot-fan {
  perspective: 800px;
}
.tarot-fan img {
  position: absolute;
  width: 55px;
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.4s ease;
  transform-origin: bottom center;
}
.tarot-fan img:nth-child(1) {
  z-index: 1;
  transform: rotate(0deg);
}
.tarot-fan img:nth-child(2) {
  z-index: 2;
  transform: rotate(0deg);
}
.tarot-fan img:nth-child(3) {
  z-index: 3;
  transform: rotate(0deg);
}
.tarot-reading-card:hover .tarot-fan img:nth-child(1) {
  transform: rotate(-12deg) translateX(-8px);
  z-index: 1;
}
.tarot-reading-card:hover .tarot-fan img:nth-child(2) {
  transform: rotate(0deg) translateY(-3px);
  z-index: 3;
}
.tarot-reading-card:hover .tarot-fan img:nth-child(3) {
  transform: rotate(12deg) translateX(8px);
  z-index: 2;
}
.tarot-reading-desc {
  font-size: 14px;
  line-height: 20px;
  color: #666;
  text-align: center;
  min-height: 40px;
  
  display: none;
}
.tarot-reading-btn {
  font-family: 'BluuNext', sans-serif, serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 190px;
  padding: 10px 14px;
  background-color: #1a5877;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.tarot-reading-card:hover .tarot-reading-btn {
  background-color: #a855f7;
}


/* tarot_card_meanings */
.tarot-tab-ls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  margin: 20px 0;
}

.tarot-tab-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background-color: #1a5877;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 24px;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.tarot-tab-item:hover {
  background-color: #9333ea;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}
.tarot-meanings-block {
  margin-bottom: 20px;
}
.tarot-meanings-tl,
.fortune-con h2 {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 24px;
  font-weight: bold;
  color: #1a1a1a;
  padding-left: 14px;
  border-left: 5px solid #9810fa;
  margin: 20px 0 16px;
}
.tarot-meanings-desc {
  font-size: 15px;
  color: #666;
  margin-bottom: 20px;
}
.tarot-meanings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
}
.tarot-meanings-card {
  font-family: 'BluuNext', sans-serif, serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  transition: transform 0.2s ease;
}
.tarot-meanings-card:hover {
  border-color: #9810fa;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
  transform: translateY(-4px);
}
.tarot-meanings-ad { 
  grid-column: span 2;
  grid-row: 2;
}
.tarot-meanings-ad2 {
  grid-column: span 2;
  grid-row: 5;
}
.tarot-meanings-img {
  width: 100%;
  max-width: 140px;
  margin-bottom: 16px;
  perspective: 1000px;
  position: relative;
}
.tarot-meanings-img img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  transition: transform 0.6s ease, opacity 0.6s ease;
  backface-visibility: hidden;
}
.tarot-meanings-img img:first-child {
  position: relative;
  z-index: 2;
  transform: rotateY(180deg);
}
.tarot-meanings-img img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  /* transform: rotateY(180deg);
  z-index: 1; */
  transform: rotateY(0deg);
  z-index: 3;
}
/* .tarot-meanings-card:hover .tarot-meanings-img img:first-child {
  transform: rotateY(180deg);
}
.tarot-meanings-card:hover .tarot-meanings-img img:last-child {
  transform: rotateY(0deg);
  z-index: 3;
} */
.tarot-meanings-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tarot-meanings-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  line-height: 1.4;
  /* min-height: 42px; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarot-meanings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  background-color: #1a5877;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  display: none;
}
.tarot-meanings-card:hover .tarot-meanings-btn {
  background-color: #9333ea;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

/* tarot_card_meanings_detail */
.tarot-cate-box {
  font-family: 'BluuNext', sans-serif, serif;
  border: 1px solid #e8e0f0;
  background-color: #f5f0fa;
  border-radius: 20px;
  padding: 16px;
  margin: 20px 0;
}
.tarot-cate-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}
.tarot-cate-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
}
.tarot-cate-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0f0;
  text-decoration: none;
  transition: all 0.2s ease;
}
.tarot-cate-box .tarot-more {
  margin-top: 0;
  margin-bottom: 0;
}
.tarot-cate-box .tarot-more-item {
  padding: 12px 18px;
  border-color: #e8e0f0;
}
.tarot-cate-box .tarot-more-text {
  color: #a855f7;
}
.tarot-cate-box .tarot-more-item:hover {
  border-color: #a855f7;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
}
.tarot-cate-box .icon-aright {
  fill: #a855f7;
}

.tarot-topic {
  margin-top: 20px;
}
.tarot-topic h2 {
  font-family: 'BluuNext', sans-serif, serif;
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 16px;
  background-color: #f5f0fa;
  padding-left: 16px;
  border-left: 5px solid #9810fa;
  padding-top: 10px;
  padding-bottom: 8px;
}
.tarot-topic h3 {
  font-family: 'BluuNext', sans-serif, serif;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 16px;
  color: #9810fa;

}
.tarot-topic p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.tarot-topic ul {
  margin: 16px 0;
  padding-left: 0;
}
.tarot-topic ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.6;
}
.tarot-topic ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: #9810fa;
  border-radius: 50%;
}
.tarot-topic h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 20px 0 12px;
}
.tarot-topic strong {
  color: #9810fa;
  font-weight: 600;
}

.icon-btn-aright {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: #fff;
}
.icon-btn-aleft {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: #fff;
  transform: rotate(180deg);
}

ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}


@media screen and (min-width: 768px) {
  .control-none,  .hr-inner-right,  .inner-right-icon,  .number-more {
    display: block;
  }

  .control-show,  .hidden-desk,  .icon-menu,  .tarot-item:last-child,  .load-more,  .ver-share-open {
    display: none;
  }

  .banner-link-wp,  .inner-left-desc {
    display: flex;
  }

  .article-item-tl.quiz-tl {
    -webkit-line-clamp: 2;
  }

  .horo-trend-link {
    font-size: 18px;
  }

  .banner-ls {
    width: 100%;
  }

  .quiz-start-item {
    width: 50%;
  }

  .quiz-ads-item {
    width: 33.3333%;
    height: auto;
    padding-left: 16px;
  }

  .quiz-lab-ls {
    grid-template-columns: repeat(3, 1fr);
  }
  .quiz-lab-con {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 0;
    border-bottom: none;
  }
  .quiz-lab-left {
    flex: auto;
    width: 100%;
    height: 154px;
  }


  .quiz-like-pic,  .quiz-like-img {
    height: 200px;
  }

  .quiz-lab-first {
    grid-column: 1 / -1;
  }

  .icon-special {
    top: -20px;
    left: -12px;
  }

  .quiz-center-tag {
    font-size: 14px;
  }

  .quiz-icon-right {
    width: 28px;
    height: 28px;
  }

  .mbti-qs-item {
    padding-left: 16px;
  }

  .inner-left-tl {
    height: 80px;
  }

  .banner-link {
    width: 300px;
    margin: 16px 8px 0;
  }

  .test-email {
    margin-top: 0;
  }

  .quiz-block {
    padding-right: 32px;
    padding-left: 32px;
  }

  .wrapper {
    max-width: 768px;
    margin-right: auto;
    margin-left: auto;
  }

  .header .wrapper {
    position: relative;
  }

  .question-section {
    padding: 48px;
  }

  .sign-con {
    flex-direction: row;
  }

  .horopage-sign .sign-con {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .sign-item {
    width: 33.3333%;
  }

  .sign-desc {
    align-items: flex-start;
    margin-left: 12px;
  }

  .horopage-sign .sign-desc {
    align-items: center;
    margin-left: 0px;
  }

  .sign-tl {
    font-size: 20px;
  }

  .sign-text {
    font-size: 14px;
    /* padding-left: 4px; */
  }

  .explore-hr-item {
    width: 33.3333%;
  }

  .explore-hr-padding {
    display: block;
    padding: 15px 24px;
  }

  .section-pupular-compb {
    flex-wrap: nowrap;
  }

  .section-popular-test {
    width: 33.3333%;
    margin-bottom: 0;
  }

  .section-compb-test {
    flex: 1;
    margin-left: 0px;
  }

  .trend-item,  .tarot-item {
    width: 25%;
  }

  .popular-ls {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
  }

  .popular-item {
    flex: 0 0 50%;
    width: 50%;
    height: 290px;
    padding-left: 16px;
  }

  .popular-tarot,  .popular-compat,  .popular-ask,  .popular-name {
    height: 100%;
  }

  .ask-section {
    position: relative;
    display: block;
    text-align: center;
  }

  .ask-section-img {
    height: 400px;
    margin-bottom: -180px;
  }

  .ask-section .popular-link {
    position: absolute;
    right: 32px;
    bottom: 32px;
  }

  .loveitem {
    width: 50%;
  }

  .love-line {
    width: 20%;
    height: 100%;
  }

  .love-line::before {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
  }

  .us-ls {
    display: flex;
    justify-content: center;
  }

  .us-link {
    margin-right: 16px;
    margin-left: 16px;
  }

  .us-link.link-add {
    margin-right: 10px;
    margin-left: 10px;
  }

  .header-ls {
    display: flex;
    justify-content: center;
  }

  .header-link {
    width: 90px;
  }

  .name-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .name-section-con {
    width: 50%;
  }

  .name-section-pic {
    position: static;
    width: 300px;
    transform: translate(0, 0);
    opacity: 1;
  }

  .loveitem-circle {
    padding-right: 32px;
  }

  .articlebig .article-item {
    width: 25%;
  }

  .home-horo-ls {
    display: flex;
    flex-wrap: wrap;
    margin-top: -16px;
    margin-left: -16px;
  }

  .home-horo-item {
    width: 50%;
    padding-left: 16px;
  }

  .home-tarot-item {
    width: 25%;
  }

  .trend-common-link {
    position: absolute;
    right: 32px;
    bottom: 32px;
  }

  .test-tab-blue,  .test-tab-gold,  .test-tab-green,  .test-tab-orange {
    font-size: 14px;
    width: 100px;
  }

  .homepage .question-index-more {
    max-width: 450px;
  }

  .question-index-more {
    width: 400px;
  }

  .scorpio-con {
    display: flex;
    flex-wrap: wrap;
  }

  .scorpio-section {
    flex: 0 0 50%;
    width: 50%;
  }

  .scorpio-ads {
    flex: 0 0 100%;
    width: 100%;
  }

  .astro-sign-item {
    width: 16.6666%;
  }

  .rankcon {
    flex-direction: row;
    align-items: center;
  }

  .rankcon-left {
    position: relative;
    bottom: 40px;
    right: 10px;
  }

  .rankcon-center {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
  }

  .rankcon-right {
    width: 120px;
    margin-left: 30px;
  }

  .rankcon-btn {
    width: 120px;
  }

  .number-sign-right {
    align-items: flex-start;
  }

  .number-right-button {
    align-self: flex-end;
  }

  .number-item {
    width: 12.5%;
  }

  .number-list-item {
    width: 20%;
  }

  .number-list-con {
    width: 130px;
  }

  .banner-con-img {
    height: 180px;
  }

  .banner-tag {
    padding-bottom: 30px;
  }

  .banner-tag-desc {
    margin-bottom: 18px;
  }

  .quiz-cate-item {
    padding: 4px 16px;
    font-size: 16px;
    margin-right: 8px;
  }

  .promo-top-ls {
    margin-left: -8px;
  }

  .promo-top-item {
    width: 50%;
    padding-left: 8px;
  }

  .promo-card-bot {
    justify-content: center;
  }

  /* horoscope-page */

  .love-com-top {
    padding: 32px;
  }

  .love-sign-item {
    width: 200px;
  }

  .select-love {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .love-com-bot {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .love-bot-sign {
    margin-bottom: 16px;
  }

  .love-bot-match {
    width: 140px;
  }

  .zodiac-td {
    padding: 20px 24px;
  }

  .topic-pick-con {
    flex-direction: row;
    align-items: center;
  }

  .topic-pick-pic {
    width: 220px;
    height: 141px;
    flex: 0 0 220px;
  }

  .topic-pick-info {
    margin-left: 16px;
    margin-top: 0;
  }

  .topic-pick-tag {
    margin-top: 0;
  }

  .topic-pick-desc {
    font-size: 16px;
  }

  .swiper-container {
    margin-left: 0;
    margin-right: -12px;
  }

  .swiper-wrapper {
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding-right: 0;
    padding-left: 0;
  }

  /* horoscope-fortune-page */

  .horo-explore {
    display: flex;
  }

  .horo-explore-top {
    width: 35%;
    justify-content: center;
    border-radius: 16px 0 0 16px;
  }

  .horo-explore-bot {
    flex: 1;
    border-radius: 0 16px 16px 0;
  }

  .horo-explore-link {
    align-self: flex-end;
  }

  /* tarot-detail-page */

  .tarot-card-link {
    width: 80%;
  }

  .article-con .flex h4 {
    width: 25%;
  }

  /* psych_test_start */

  .psych-like-ls {
    margin-left: -16px;
  }

  .psych-like-item {
    width: 50%;
    padding-left: 16px;
  }

  /* psych_test_page */

  .psych-pro {
    height: 18px;
  }

  .psych-pro-active {
    height: 18px;
  }

  .psych-input {
    width: 34px;
    height: 34px;
    margin: 10px 12px 10px 0;
  }

  /* psych_test_results */

  .outcome-pro {
    height: 22px;
  }

  .outcome-pro .psych-pro-active {
    height: 22px;
    line-height: 22px;
  }

  /* blog_detail */

  .share-btn-ls {
    margin-left: -12px;
  }

  .share-btn-item {
    width: 50%;
    padding-left: 12px;
  }

  .gotop {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 28px;
  }

  .psych-result-exp {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .psych-exp-img {
    border-radius: 8px 0 0 8px;
    width: 40%;
    height: 150px;
    object-fit: cover;
  }

  .psych-exp-info {
    flex: 1;
    margin-left: 12px;
    margin-right: 12px;
  }

  .progress-bar {
    display: none;
  }

  .result-share {
    display: none;
  }

  .quiz-page-img {
    padding-top: 30%;
  }


  .banner-topic {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
  }
  .banner-topic-large,
  .banner-topic-ls {
    width: 50%;
    padding-left: 16px;
  }
  .banner-topic-item {
    margin-bottom: 16px;
  }
  .banner-topic-con {
    position: relative;

    display: flex;
    align-items: center;
  }
  .banner-topic-large .banner-topic-con {
    flex-direction: column;
    align-items: flex-start;
  }
  .banner-topic-pic {
    position: relative;
    width: 180px;
    height: 120px;
    flex: 0 0 180px;

    overflow: hidden;
  }
  .banner-topic-large .banner-topic-pic {
    width: 100%;
    padding-top: 58.2%;
  }
  .banner-topic-info {
    margin-left: 16px;
    margin-top: 0;
  }
  .banner-topic-large .banner-topic-info {
    margin-left: 0;
    margin-top: 10px;
  }
  .topic-cate-text {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
  .icon-cate-arrow,.icon-ex-next {
    display: block;
  }
  .pageright .fun-info-top,
  .pageright .fun-bot-desc {
      font-size: 24px;
  }
  .pageright .icon-fun-next {
      width: 20px;
      height: 20px;
  }

  .topic-share-text {
    display: block;
  }

  .topic-recommend {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }
  .recommend-link {
    margin-top: 0;
    margin-left: 10px;
    font-size: 18px;
  }
  .recommend-link:hover .recommend-special {
    text-decoration: underline;
  }

  .hot-topic {
    flex-direction: row;
  }
  .topic-article .hot-topic-img {
    width: 35%;
    height: 180px;
  }

  .topic-think {
    border: none;
    box-shadow: none;
  }
  .topic-think li {
    border: 2px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .12);
    border-radius: 64px;
    padding: 11px;
    cursor: pointer;
  }
  .topic-think li:hover {
    border-color: #5246f5;
  }
  .topic-think .active {
    opacity: .5; 
  }

  .recommend-tag {
    display: block;
  }
  /* pop-up */
  .mobile-fixed {
    display: none;
  }

  /* travel page */
  .travel-tl {
    font-size: 18px;
  }

  .travel-trend {
    display: flex;
    gap: 16px;
  }
  .carousel-block {
    width: 50%;
  }
  /* .carousel-container {
    margin-bottom: 0;
  } */
  .carousel-indicators {
    margin-top: 24px;
  }
  .trend-carousel-info {
    margin-top: 24px;
  }
  .carousel-nav {
    bottom: 20px;
    width: 36px;
    height: 36px;
  }

  .trend-topic {
    width: 50%;
  }
  .trend-topic-con {
    align-items: center;
  }
  .trend-topic-piccon {
    width: 200px;
    height: 140px;
  }
  .trend-topic-tag,.travel-new-tag {
    font-size: 14px;
  }
  .trend-topic-tl,.travel-new-tl {
    font-size: 18px;
    -webkit-line-clamp: 3;
    min-height: 86px;
  }
  .travel-item {
    width: 16.6667%;
  }
  .travel-new-item {
    flex: 0 0 40%;
  }
  .travel-new-desc {
    font-size: 15px;
    margin-bottom: 10px;
  }


  .trend-just {
    width: 100%;
  }

  /* travel topic */
  .travel-topic {
    padding: 16px;
  }
  .travel-topic-pic {
    flex: 0 0 200px;
  }
  .travel-topic-left img {
    width: 200px;
    height: 140px;
  }
  .travel-topic-info {
    margin-left: 16px;
  }
  .travel-topic-info span {
    font-size: 14px;
  }
  .travel-topic-info h3 {
    font-size: 18px;
    -webkit-line-clamp: 3;
  }
  .travel-topic-left {
    flex: 1;
  }
  .icon-travel-right {
    display: block;
    width: 34px;
    height: 34px;
    fill: #000;
  }
  .travel-read-ls {
    display: flex;
    gap: 16px;
  }
  .travel-read-item {
    width: 33.3333%;
  }
  .travel-read-con {
    flex-direction: column;
    border: 1px solid #d9d9d9;
    padding-bottom: 0;
  }
  .travel-read-piccon {
    width: 100%;
    height: 160px;
  }
  .travel-read-info {
    margin-left: 0;
    padding: 12px 12px 16px 12px;
  }

  /* new horoscope fortune */
  .zodiac-for-ls {
    grid-template-columns: repeat(3, 1fr);
  }
  .zodiac-for-item {
    padding: 12px;
  }
  .zodiac-for-left {
    gap: 12px;
  }
  .zodiac-for-img {
    height: 48px;
  }
  .zodiac-for-tl {
    font-size: 18px;
  }
  .zodiac-for-desc {
    font-size: 14px;
  }
  .icon-zodiac-next {
    display: block;
  }

  .zodiac-ex-item {
    padding: 16px;
  }
  .icon-ex-next {
    display: block;
  }
  .zodiac-ex-tl {
    font-size: 18px;
  }
  .icon-ex-explore {
    width: 36px;
    height: 36px;
    fill: #7731d7;
  }

  .for-right-pic {
    width: 44px;
    height: 44px;
  }
  .for-right-tl {
    font-size: 18px;
  }
  .icon-aright {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  .trending-block {
    flex-direction: row;
    padding-bottom: 0;
  }
  .trending-pic { 
    flex: 0 0 340px;
    height: 241px;
    border-radius: 4px 0 0 4px;
  }
  .trending-info {
    margin-top: 0;
  }
  .trending-tl {
    font-size: 24px;
    line-height: 32px;
  }
  .zodiac-ex-ls {
    grid-template-columns: repeat(3, 1fr);
  }
  .fortune-page .zodiac-ex-ls,
  .type-page .zodiac-ex-ls {
    grid-template-columns: repeat(2, 1fr);
  }

  /* tarot_detail */
  .before-tl {
    font-size: 28px;
    letter-spacing: 4px;
  }
  .slider-item {
    padding: 20px 30px;
  }
  .slider-item h3 {
    font-size: 18px;
  }
  .slider-item p {
    font-size: 16px;
  }
  .slider-arrow {
    width: 44px;
    height: 44px;
  }
  .slider-arrow svg {
    width: 28px;
    height: 28px;
  }

  .tarot-more {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .pageright .tarot-more {
    grid-template-columns: repeat(1, 1fr);
  }
  .tarot-more-item {
    padding: 16px;
  }
  .tarot-more-text {
    font-size: 16px;
  }

  .tarot-fan-container {
    height: 200px;
    margin: 40px auto 20px;
  }
  .tarot-fan-card {
    width: 120px;
    height: 180px;
    border-width: 3px;
    border-radius: 10px;
  }
  .tarot-fan-card:nth-child(1) { transform: translateX(-185px) rotate(-24deg) translateY(-8px); z-index: 1; }
  .tarot-fan-card:nth-child(2) { transform: translateX(-132px) rotate(-17deg) translateY(-6px); z-index: 2; }
  .tarot-fan-card:nth-child(3) { transform: translateX(-79px) rotate(-10deg) translateY(-4px); z-index: 3; }
  .tarot-fan-card:nth-child(4) { transform: translateX(-26px) rotate(-3deg) translateY(-2px); z-index: 4; }
  .tarot-fan-card:nth-child(5) { transform: translateX(26px) rotate(3deg) translateY(-2px); z-index: 4; }
  .tarot-fan-card:nth-child(6) { transform: translateX(79px) rotate(10deg) translateY(-4px); z-index: 3; }
  .tarot-fan-card:nth-child(7) { transform: translateX(132px) rotate(17deg) translateY(-6px); z-index: 2; }
  .tarot-fan-card:nth-child(8) { transform: translateX(185px) rotate(24deg) translateY(-8px); z-index: 1; }

  .tarot-fan-card:nth-child(1):hover { transform: translateX(-185px) rotate(-24deg) translateY(-35px) scale(1.05); }
  .tarot-fan-card:nth-child(2):hover { transform: translateX(-132px) rotate(-17deg) translateY(-30px) scale(1.05); }
  .tarot-fan-card:nth-child(3):hover { transform: translateX(-79px) rotate(-10deg) translateY(-25px) scale(1.05); }
  .tarot-fan-card:nth-child(4):hover { transform: translateX(-26px) rotate(-3deg) translateY(-22px) scale(1.05); }
  .tarot-fan-card:nth-child(5):hover { transform: translateX(26px) rotate(3deg) translateY(-22px) scale(1.05); }
  .tarot-fan-card:nth-child(6):hover { transform: translateX(79px) rotate(10deg) translateY(-25px) scale(1.05); }
  .tarot-fan-card:nth-child(7):hover { transform: translateX(132px) rotate(17deg) translateY(-30px) scale(1.05); }
  .tarot-fan-card:nth-child(8):hover { transform: translateX(185px) rotate(24deg) translateY(-35px) scale(1.05); }
  

  /* tarot_detail result */
  .tarot-review-result {
    display: flex;
    gap: 20px;
  }
  .tarot-result-img {
    flex: 0 0 264px;
    width: 264px;
    height: auto;
  }

  /* tarot */
  .tarot-reading-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .tarot-reading-card {
    padding: 20px;
    border-radius: 20px;
  }
  .tarot-reading-ad {
    grid-column: span 3;
  }
  .tarot-reading-tl {
    font-size: 20px;
    margin-bottom: 16px;
  }
  .tarot-reading-img {
    max-width: 200px;
    height: 120px;
    margin-bottom: 16px;
  }
  .tarot-fan img {
    width: 80px;
  }
  .tarot-reading-card:hover .tarot-fan img:nth-child(1) {
    transform: rotate(-15deg) translateX(-15px);
  }
  .tarot-reading-card:hover .tarot-fan img:nth-child(3) {
    transform: rotate(15deg) translateX(15px);
  }
  .tarot-reading-desc {
    font-size: 15px;
    margin-bottom: 16px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .tarot-reading-btn {
    padding: 12px 20px;
  }

  /* tarot_card_meanings */
  .tarot-tab-ls {
    gap: 16px;
  }
  .tarot-tab-item {
    padding: 8px 32px;
    font-size: 16px;
  }
  .tarot-meanings-tl,
  .fortune-con h2 {
    margin-top: 24px;
    margin-bottom: 20px;
  }
  .tarot-meanings-desc {
    font-size: 16px;
    margin-bottom: 28px;
  }
  .tarot-meanings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .tarot-meanings-card {
    padding: 20px;
    border-radius: 16px;
  }
  .tarot-meanings-img img:first-child {
    transform: rotateY(0deg);
  }
  .tarot-meanings-img img:last-child {
    transform: rotateY(180deg);
    z-index: 1;
  }
  .tarot-meanings-card:hover .tarot-meanings-img img:first-child {
    transform: rotateY(180deg);
  }
  .tarot-meanings-card:hover .tarot-meanings-img img:last-child {
    transform: rotateY(0deg);
    z-index: 3;
  }
  .tarot-meanings-ad { 
    grid-column: span 3;
  }
  .tarot-meanings-ad2 {
    grid-column: span 3;
  }
  .tarot-meanings-img {
    max-width: 180px;
    margin-bottom: 20px;
  }
  .tarot-meanings-img img {
    width: 180px;
    height: 257px;
  }
  .tarot-meanings-name {
    font-size: 18px;
    margin-bottom: 20px;
    /* min-height: 50px; */
  }
  .tarot-meanings-btn {
    display: inline-flex;
    padding: 12px 36px;
  }

  /* tarot_card_meanings_detail */
  .tarot-cate-box {
    padding: 20px;
    border-radius: 24px;
  }
  .tarot-cate-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
  .tarot-cate-link {
    padding: 16px 24px;
    border-radius: 14px;
  }
  .tarot-cate-text {
    font-size: 18px;
  }
  .tarot-cate-arrow {
    font-size: 24px;
  }
  .tarot-cate-box .tarot-more {
    gap: 12px;
  }
  .meanings-img {
    height: 250px;
  }
  .icon-btn-aleft {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  .fortune-score-panel {
    flex-direction: row;
    justify-content: center;
    gap: 80px;
  }
  .fortune-score-label {
    margin-bottom: 20px;
    padding: 8px 34px;
  }
  .fortune-tube-value {
    font-size: 20px;
  }
  .fortune-score-number {
    font-size: 140px;
  }
  .fortune-tube {
    width: 32px;
    height: 140px;
  }
  .fortune-score-right {
    gap: 20px;
  }

  .fortune-tips {
    flex-direction: row;
  }
  
}

@media screen and (min-width: 1058px) {
  .sign-item {
    width: 25%;
  }
  .mobile-none {
    display: block;
  }
  .dialog-top {
    display: block;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    font-weight: 700;
    width: 500px;
    padding: 20px 0 20px 40px;
    box-shadow: 0px 0px 24px 1px rgb(0 0 0 / 18%);
    background-color: #fff;
    border-radius: 16px;
    z-index: 2000;
  }

  .dialog-block {
    /* display: block;
        transform: translateX(-50%) translateY(0); */
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .dialog-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dialog-tl {
    font-family: 'GoogleSans-Bold';
    font-size: 24px;
    font-weight: 700;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 0px;
    color: #333;
  }

  .dialog-desc {
    font-family: 'GoogleSans-Regular';
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #666;
    margin-top: 16px;
    margin-bottom: 24px;
  }

  .dialog-btn {
    display: flex;
    align-items: center;
  }

  .dialog-allow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 40px;
    background-image: linear-gradient(90deg, 
            #6a3ac7 0%, 
            #9e28b3 100%), 
        linear-gradient(
            #8f68b7, 
            #8f68b7);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
  }

  .icon-magic {
    width: 16px;
    height: 16px;
    fill: #fff;
    margin-right: 10px;
  }

  .dialog-reject {
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color: #f0f0f0;
    border-radius: 20px;
    margin-left: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    cursor: pointer;
  }

  .dialog-pic {
    width: 164px;
  }

  .viewportpage .pageright,  .viewportpage .footer,  .relate-con {
    display: block;
  }

  .mbti-bar-con {
    display: none;
  }

  .mbti-bar-con {
    padding-right: 0;
  }

  .mbti-bar {
    position: relative;
    height: 5px;
    margin-bottom: 16px;
  }

  .common-tl.ma-16,  .horopage-line {
    margin-top: 0;
  }

  .quiz-first-pic {
    min-height: 240px;
  }

  .quiz-question-tl {
    font-size: 24px;
  }

  .home-tarot-con,  .homepage .home-tarot-in {
    border-radius: 16px;
  }

  .homepage .home-tarot-in {
    display: flex;
    align-items: center;
    padding: 30px;
  }

  .homepage .home-tarot-in-lf {
    flex: 1;
    padding-right: 6%;
    text-align: left;
  }

  .homepage .home-tarot-in-ls {
    margin: 30px 0;
  }

  .homepage .home-tarot-in .home-tarot-txt {
    margin-bottom: 32px;
  }

  .home-tarot-in-item {
    margin-left: -65px;
  }

  .article-con h3,
  .fortune-con h3 {
    font-size: 20px;
  }

  .relate-h3 {
    font-size: 24px;
  }

  .header {
    height: 72px;
  }

  .header-link {
    width: 110px;
    line-height: 72px;
  }

  .header-horo {
    top: 72px;
  }

  .pageleft .popular-con {
    padding-right: 120px;
  }

  .pageleft .popular-compat .popular-con {
    padding-right: 0;
  }

  .topmenu-box {
    top: 28px;
  }

  .login {
    display: none;
    line-height: 32px;
    position: relative;
    z-index: 1004;
    padding: 0 20px;
    color: #fff;
  }

  .navfix-wp {
    overflow: inherit;
    max-height: inherit;
    background: none;
    padding-bottom: 0;
    padding-right: 0px;
  }

  .sort-ls {
    position: absolute;
    top: 72px;
    right: -40px;
    left: 0;
    background-color: #051c35;
  }

  #sort-ls1, #sort-ls3 {
    right: -60px;
  }
  #sort-ls4 {
    right: -70px;
  }
  #sort-ls2 {
    right: -135px;
  }

  .pc-navfix-sort {
    display: flex;
  }

  .pc-navfix-sort-item {
    position: relative;
  }

  .mb-none {
    display: block;
  }

  .logo {
    margin-top: 0;
    height: 72px;
  }

  .banner-tl {
    font-size: 56px;
    max-width: 600px;
  }

  .banner-img {
    width: 350px;
  }

  .popular-con {
    padding-right: 260px;
    padding-left: 30px;
  }

  .home-horo-info {
    padding-left: 30px;
  }

  .home-tarot-in {
    margin-bottom: 20px;
    background-image: url(../images/home_tarot_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .popular-ls,  .home-tarot-ls,  .home-horo-ls,  .popular-ls {
    margin-top: -20px;
    margin-left: -20px;
  }

  .popular-item,  .home-tarot-item,  .home-horo-item {
    margin-top: 20px;
    padding-left: 20px;
  }

  .popular-ls {
    margin-bottom: 20px;
  }

  .popular-tl,  .homepage .home-tarot-tl,  .home-horo-tl {
    font-size: 32px;
    line-height: 1.1;
    margin-top: 7px;
    margin-bottom: 7px;
  }

  /* index-page */

  .index-ads {
    margin-top: 24px;
  }

  .center-h3 {
    font-size: 24px;
    margin-top: 48px;
  }

  .center-tl {
    font-size: 40px;
    margin-top: 48px;
    margin-bottom: 32px;
  }

  .center-h3 + .center-tl {
    margin-top: 0;
    margin-bottom: 32px;
  }

  .test-ads {
    margin-top: 0;
  }

  .sign-pic-img {
    height: 64px;
  }

  .home-tarot-txt,  .home-horo-txt {
    font-size: 16px;
  }

  .article-item {
    width: 25%;
  }

  .page-tl,  .love-tl {
    font-size: 30px;
    padding-top: 0;
  }

  .adspadding .page-tl {
    padding-top: 20px;
  }

  .wrapper {
    max-width: 1130px;
    margin: 0 auto;
  }

  .navfix {
    position: static;
    flex: 1;
  }

  .pc-navfix {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .section-sort-tl {
    line-height: 72px;
    height: 100%;
    margin-top: 0;
    padding-right: 20px;
    padding-left: 20px;
    cursor: pointer;
  }

  .section-sort-tl::after {
    display: none;
  }

  .topmenu-box {
    display: none;
  }

  .sort-link {
    color: #fff;
    padding-left: 12px;
  }

  .sort-item:hover {
    margin-left: -8px;
    margin-right: -16px;
    background-color: #0a4d90;
  }

  .sort-item:hover .sort-link {
    margin-left: 8px;
  }

  .adspadding {
    padding-top: 0;
  }

  .pagecontent {
    display: flex;
  }

  .pageleft {
    flex: 0 0 728px;
    width: 728px;
  }

  .pageright {
    flex: 1;
    padding-left: 62px;
  }

  .pageright .common-tl {
    /* margin-top: -4px; */
    margin-top: 16px;
    margin-bottom: 12px;
  }

  .pageright .article-ls {
    margin-top: -16px;
  }

  .emailpage .common-tl {
    margin-top: 24px;
  }

  .quiz-first-tl {
    font-size: 28px;
  }

  .quiz-index .common-tl,  .quiz-start .common-tl,  .quiz-issue .common-tl,  .quiz-detail .common-tl,  .quiz-cate .common-tl,  .cate-article {
    font-size: 34px;
    margin-top: 30px;
    margin-bottom: 24px;
  }

  .quiz-start .quiz-article,  .quiz-issue .quiz-article,  .quiz-detail .quiz-article,  .quiz-cate .quiz-article {
    font-size: 32px;
    border-width: 7px;
    margin-bottom: 16px;
  }

  .breadcrumb {
    line-height: 1.2;
    display: flex;
    overflow: hidden;
    margin-top: 18px;
    margin-bottom: 16px;
    margin-left: -8px;
    white-space: nowrap;
    color: #bbb;
  }

  .breadcrumb a:hover {
    text-decoration: underline;
  }

  .breadcrumb span {
    font-size: 12px;
    padding-right: 8px;
    padding-left: 8px;
    color: #666;
  }

  .breadcrumb li > span {
    color: #bd9956;
  }

  .pageright .article-item {
    width: 100%;
  }

  .trend-item-con:hover .trend-item-pic {
    opacity: .85;
  }

  .horo-box-link:hover {
    background-color: rgba(255, 255, 255, .2);
  }

  .horo-cate-more:hover {
    color: #fff;
    background-color: #cb9c70;
  }

  .horo-cate-con:hover .horo-cate-tl {
    text-decoration: underline;
  }

  .compat-box:hover .compat-box-link {
    background-color: #e3b488;
  }

  .tarot-item:hover {
    opacity: .85;
  }

  .more-trend-link:hover,  .horo-trend-con:hover .horo-trend-link {
    color: #bd9956;
  }

  .popular-tarot:hover .popular-link,  .popular-compat:hover .popular-link,  .popular-name:hover .popular-link,  .popular-ask:hover .popular-link,  .home-horo-con:hover .home-horo-btn,  .banner-link:hover {
    opacity: .75;
  }

  .home-tarot-con:hover .home-tarot-card-md {
    box-shadow: 0 0 16px rgba(198, 156, 111, .8);
  }

  .quiz-question-link:hover {
    color: #bd9956;
  }

  .test-answer-con:hover,  .test-tab-con:hover {
    border-color: #bd9956;
  }

  .rankitem:hover .rankcon-btn {
    opacity: .8;
  }

  .sign-con:hover .sign-pic-img {
    transform: rotate(15deg);
  }

  .scorpio-section:hover .scorpio-more {
    background-color: #224c8b;
  }

  .astro-sign-link {
    cursor: pointer;
  }

  .pc-navfix-sort-item:hover .sort-ls {
    max-height: 400px;
    padding: 8px 16px 8px 8px;
  }

  #radio0:checked ~ #sort-ls0,  #radio1:checked ~ #sort-ls1,  #radio2:checked ~ #sort-ls2,  #radio3:checked ~ #sort-ls3,  #radio4:checked ~ #sort-ls4 {
    top: 64px;
  }

  .pc-navfix-sort-item .section-sort-tl:hover {
    background-color: #0a4d90;
  }

  .mmt-16 {
    margin-top: 0;
  }

  .quiz-page-question {
    line-height: 1.4;
  }

  .quiz-page-item {
    width: 100%;
  }

  .quiz-detail .quiz-page-item {
    width: 100%;
  }

  .quiz-page-item.result-images-item {
    width: 50%;
  }

  .quiz-detail .quiz-page-con {
    padding: 0;
  }

  .quiz-images-pic.quiz-page-con {
    padding: 0;
  }

  .quiz-start-item {
    width: 100%;
  }

  .share-facebook,  .share-line,  .share-twitter {
    width: 36%;
  }

  .number-result h3 {
    border-bottom: 6px solid #caac77;
  }

  .var-share-ls {
    width: 1068px;
    left: calc((100% - 1068px)/2);
    border-radius: 4px 4px 0 0;
    padding: 48px 32px;
  }

  .var-share-item {
    width: calc(10% - 8px);
    padding: 8px;
    margin: 2px 4px;
  }

  .quiz-btn {
    display: flex;
    margin-left: -12px;
    margin-top: 2px;
  }

  .quiz-btn-item {
    margin-left: 12px;
  }

  .quiz-issue .quiz-page-question {
    font-size: 24px;
  }

  .right-item {
    width: 100%;
  }

  .banner-tag-link {
    padding: 4px 14px;
    border-radius: 14px;
  }

  /* horoscope-page */
  .pageright .topic-pick-pic {
    width: 120px;
    height: 93px;
    flex: 0 0 120px;
  }

  .pageright .topic-pick-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
  }

  .test-relate {
    display: block;
    margin-top: 16px;
  }
  
  .topic-tl {
    margin-top: 0;
  }
  
  .banner-topic {
    margin-top: 0;
  }
  
  /* travel page */
  .travel-item {
    width: 16.6667%;
  }
  .travel-new {
    margin-right: 0;
    margin-left: -16px;
  }
  .travel-new-item {
    flex: 0 0 25%;
    margin-right: 0;
    padding-left: 16px;
  }

  .travel-trend {
    gap: 20px;
  }
  .trend-carousel-tag {
    font-size: 14px;
  }
  .trend-carousel-tl {
    font-size: 18px;
  }

  .trend-just {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -16px;
  }
  .trend-just .trend-topic-item {
    width: 50%;
    padding-left: 16px;
  }
  .trend-topic-ads {
    padding-left: 16px;
  }

  /* travel topic */
  .travel-right {
    display: block;
  }
  .top-sticky {
    position: sticky;
    top: 16px;
  }

  /* tarot_card_meanings */
  .top-fixed {
    position: sticky;
    top: 20px;
  }
  


}

.right-topic-wrapper {
    position: relative;
    overflow: hidden;
}

.right-topic-ls {
    max-height: 220px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.right-topic-ls.expanded {
    max-height: none;
}

.right-topic-toggle {
    width: 100%;
    padding: 8px;
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

.right-topic-toggle:hover {
    background: #e9e9e9;
}

.right-topic-toggle.expanded {
    background: #e0e0e0;
}

.copyright
{
    padding: 20px;
}

.copyright p
{
    line-height: 24px;
    opacity: .2;
    color: #fff;
}

.new-topic-list {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 20px 0;
  overflow: hidden;
}

.new-topic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.new-topic-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.new-topic-icon {
  width: 18px;
  height: 18px;
}
.new-topic-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.new-topic-toggle.active {
  transform: rotate(180deg);
}
.new-topic-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.new-topic-content.active {
  max-height: 1000px;
}
.new-topic-item {
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 14px 20px 14px 36px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.new-topic-item::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 22px;
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 50%;
}

.new-topic-item:hover {
  padding-left: 45px;
}

.new-hot-topic {
  background-color: #dbe8fa91;
  padding: 32px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.topic-article .new-hot-tag {
  font-family: 'ProductSans', sans-serif, serif;
  margin: 0 0 8px 0;
}
.topic-article .new-hot-tl {
  font-size: 24px;
  padding-left: 0;
  border-left: none;
  margin: 0 0 16px 0;
}
.new-hot-ls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.new-hot-link {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'ProductSans', sans-serif, serif;
  font-weight: 600;
  color: #333;
  transition: all 0.3s ease;
  padding-left: 20px;
}
.new-hot-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
}
.new-hot-link span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-hot-aright {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  fill: #333;
  margin-left: 12px;
}
.new-hot-link:hover {
  color: #5246f5;
}
.new-hot-link:hover::before {
  background-color: #5246f5;
}
.new-hot-link:hover .icon-hot-aright {
  fill: #5246f5;
}