@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;
}

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,.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);
}

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

.tarot-review-tl {
    margin-top: 16px;
    margin-top: 14px;
    background-image: linear-gradient(0deg, #f4e4c6 50%, transparent 50%);
}

.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 {
    font-size: 20px;
    margin: 16px 0 14px;
    background-image: linear-gradient(0deg, #f4e4c6 50%, transparent 50%);
}

.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 {
    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 {
    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 {
    padding-top: 16px ;
    padding-bottom: 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(../svg/full-star.svg) center no-repeat;
}

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

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

.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;
    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;
}


@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;
    }

    /* .tarot-review-result {
        display: flex;
        align-items: center;
    } */

    .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);
    }

}

@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 {
        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: 30px;
    }

    .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;
    }



}

.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;
}