body {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
html {
    scroll-behavior: smooth;

}
h1 {
    font-size: 2.875rem;
    line-height: 3.5rem;
    font-weight: 700;
    text-align: center;
    color: #333;
}
.author-info {
    font-size: 1rem;
    line-height: 1.625rem;
    text-align: center;
    color: #333;
    margin-top: 2.25rem;
}
#section1 > .container {
    position: relative;
    z-index: 1;
}
#section1 {
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #C8FFFF 0%, #FFFFFF 100%);  
    padding: 2.5rem 0 5rem 0;
}
#section1::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #C8FFFF 0%, #FFFFFF 100%);
    position: absolute;
    left: 0;
    top: 0;
}

.crumbs {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.crumbs > a:hover {
    text-decoration: underline;
    color: #7A32FD;
}
.crumbs > span {
    color: #7A32FD;
}

#section2 {
    padding-top: 3.75rem;
}
.article-progress-bar {
    height: 4px;
    width: 100%;
    background: #E4D6FF;
    border-radius: 2px;
    position: relative;
    --process: 40%
}
.article-progress-bar::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--process);
    height: 100%;
    background: #7A32FD;
    border-radius: 2px;
}
.read-time {
    display: flex;
    justify-content: center;
    padding: 1.375rem 0;
    border-bottom: 1px solid #DFDFDF;
}
#article-nav {
    font-size: 1rem;
    line-height: 1.625rem;
    margin-top: 1.25rem;
    padding: 0 1.875rem;
}
#article-nav a {
    display: block;
    position: relative;
    opacity: 0.7;
}
#article-nav a.active {
    opacity: 1;
    color: #7A32FD;
}
#article-nav a.active::before {
    content: '';
    display: block;
    width: .625rem;
    height: .625rem;
    background: #7A32FD;
    opacity: 0.2;
    border-radius: 50%;
    position: absolute;
    left: -1.25rem;
    top: .5rem;
}
#article-nav a.active::after {
    content: '';
    display: block;
    width: .375rem;
    height: .375rem;
    background: #7A32FD;
    border-radius: 50%;
    position: absolute;
    left: -1.125rem;
    top: .625rem;
}
.share-btn {
    display: flex;
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #CDCDCD;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: #333;
    margin: 0 .5rem;
    margin-top: .25rem;
}
.share-btn:hover {
    background-color: #CDCDCD;
}
.share-btn-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -10px;
    padding-top: 1rem;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
h2 {
    font-size: 1.875rem;
    line-height: 2.5rem;
    margin-top: 3.75rem;
}
h2, h3, h4, p {
    margin-bottom: 1.25rem;
}
p {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
h3 {
    font-size: 1.5rem;
    line-height: 2.125rem;
}
h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.style-1 {
    --content: 'step1';
    display: flex;
}
.style-1::before {
    content: var(--content);
    display: block;
    width: 4.875rem;
    height: 2rem;
    background-image: url('/wp-content/themes/fliflik/assets/img/article/step-bg.svg');
    background-size: cover;
    font-size: 1.125rem;
    line-height: 2rem;
    color: #FFFFFF;
    font-weight: 700;
    padding-left: .5rem;
    position: relative;
    top: .25rem;
    margin-right: .625rem;
    background-size: cover;
    flex-shrink: 0;
}
.style-2 {
    --content: 'step1';
}
.style-2::before {
    content: var(--content);
    color: #7A32FD;
    text-decoration: underline;
    margin-right: 4px;
}
.style-3 {
    --content: 'step1';
    background: #F9F7FF;
    border-radius: 10px;
    padding: 1.875rem .5rem 1.875rem 3.75rem;
    position: relative;
}
.style-3::before {
    content: var(--content);
    color: #7A32FD;
    text-decoration: underline;
    margin-right: 4px;
}
.style-3::after{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/fliflik/assets/img/article/circle-two.svg');
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    top: 2.8rem;
    left: 1.5rem;
}
.win-mac-btn-box {
    display: grid;
    grid-template-columns: repeat(2,minmax(auto,15.75rem));
    gap: 1.875rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.win-mac-btn-box  a {
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #7A32FD;
    background-color: #7A32FD;
    border-radius: 999px;
    padding: 0.5625rem 0;
}
.win-mac-btn-box  a:hover {
    background-color: transparent;
    color: #7A32FD;
}
.win-mac-btn-box .luckydog-icon {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
}
.win-mac-btn-box .secure-download {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.375rem;
}
.win-mac-btn-box .secure-download span {
    color: #999999;   
    font-size: 1rem;
    line-height: 1.625rem;
}
.win-mac-btn-box .secure-download > img {
    margin-right: 0.25rem;
}
.itl-main figure {
    text-align: center;
}
.itl-main figcaption {
    margin-bottom: 2.5rem;
    margin-top: 1.25rem;
}

/* 无需列表样式 default */
ul.default, ul.primary, ul.sure-primary, ul.sure-green, ul.no {
    margin-bottom: 1.25rem;
}
ul.default {
    list-style: disc;
    padding-left: 1.25rem;
}
ul.default>:not([hidden])~:not([hidden]), ul.primary>:not([hidden])~:not([hidden]), ul.sure-primary>:not([hidden])~:not([hidden]), ul.sure-green>:not([hidden])~:not([hidden]), ul.no>:not([hidden])~:not([hidden]), ol.default>:not([hidden])~:not([hidden]), ol.primary>:not([hidden])~:not([hidden])  {
    margin-top: .625rem;
}

/* 无需列表样式 primary */
ul.primary > li {
    position: relative;
    padding-left: 1.25rem;
}
ul.primary > li::before {
    content: '';
    display: block;
    width: .625rem;
    height: .625rem;
    background: rgba(122,50,253,0.2);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .625rem;
}
ul.primary > li::after {
    content: '';
    display: block;
    width: .375rem;
    height: .375rem;
    background: rgba(122,50,253,1);
    border-radius: 50%;
    position: absolute;
    left: .125rem;
    top: .75rem ;
}

/* 无需列表样式 sure-primary */
ul.sure-primary > li {
    position: relative;
    padding-left: 1.625rem;
}
ul.sure-primary > li::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url('/wp-content/themes/fliflik/assets/img/article/sure.svg');
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .375rem;
}

/* 无序列表 sure-green */
ul.sure-green > li {
    position: relative;
    padding-left: 1.625rem;
}
ul.sure-green > li::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url('/wp-content/themes/fliflik/assets/img/article/sure-green.svg');
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .375rem;
}

/* 无序列表 no */
ul.no > li {
    position: relative;
    padding-left: 1.625rem;
}
ul.no > li::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url('/wp-content/themes/fliflik/assets/img/article/no.svg');
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .375rem;
}

/* 有序列表 default */
ol.default {
    list-style: decimal;
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}

/* 有序列表 primary */
ol.primary {
    margin-bottom: 1.25rem;
}
ol.primary > li {
    position: relative;
    padding-left: 1.875rem;
    --content: '1';
}
ol.primary > li::before {
    content: var(--content);
    color: #fff;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: #8F51FF;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: center;
}

.note-box {
    padding: 1.375rem 2.5rem;
    border-radius: 0.625rem;
    background-color: #F9F7FF;
    margin-bottom: 2.5rem;
}
.note-box > div {
    display: flex;
    align-items: center;
    margin-bottom: .75rem;
}
.note-box > div > img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.625rem;
}
.note-box > div > strong {
    position: relative;
}
.note-box > div > strong::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background: #7A32FD;
    position: absolute;
    bottom: 0;
    left: 0;
}
.note-box p {
    margin-bottom: 0;
}
.quote-box {
    padding: 1.25rem 2.5rem;
    background: #FFF0E5;
    border-radius: 10px;
    margin-bottom: 2.5rem;
}
.quote-box p {
    margin-top: .625rem;
}
cite {
    font-style: normal;
}

.about-author-box {
    padding: 1.875rem;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #B59FCC;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}
.about-author-box::before {
    content: '';
    display: block;
    height: .625rem;
    width: 100%;
    background: #C58EFF;
    position: absolute;
    left: 0;
    top: 0;
}
.about-author-box .author-content p {
    margin-top: .625rem;
    margin-bottom: .625rem;
    padding-right: 8px;
}
.about-author-box .author-content {
    display: flex;
    align-items: start;
}
.about-author-box .author-content img {
    flex-shrink: 0;
    margin-top: 20px;
}
.about-author-box .author-info-title {
    font-weight: 700;
    display: block;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.about-author-box a:hover {
    color: #7A32FD;
}

.comment-notes, [for="author"], [for="email"], .comment-form-url, [for="comment"], .comment-form-cookies-consent {
    display: none;
}
.comment-form-author #author, .comment-form-email #email {
    background-color: transparent;
    height: 3.125rem;
    border-radius: 5px;
    border: 1px solid #DEDEDE;  
    padding: 0 .75rem;
    width: 100%;
    outline: none;
}
.comment-form-author #author:focus, .comment-form-email #email:focus, .comment-form-comment #comment:focus {
    border-color: #7A32FD;
}
.comment-form-comment #comment {
    padding: 12px;
    width: 100%;
    height: 19.625rem;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid #DEDEDE;  
    outline: none;
    font-size: 18px;
    font-family: initial;
}
.comment-form-comment #comment::placeholder {
    color: #999999;
}
.form-submit > .submit {
    font-size: 1rem;
    line-height: 1.625rem;
    color: #fff;
    background-color: #7A32FD;
    padding: .375rem 2rem;
    border-radius: .625rem;
    cursor: pointer;
}
.form-submit > .submit:hover {
    background-color: #672cd4;
}
.form-submit {
    text-align: center;
}
.btn-copy {
    position: relative;
}
.tooltip {
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%, -100%);
    font-size: 16px;
    line-height: 26px;
    font-weight: normal;
    color: #ffffff;
    background-color: #000000;
    padding: 5px 20px;
    border-radius: 50px;
}
.tooltip::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    bottom: 0;
    background-color: #000000;
    transform: translate(-50%, 50%) rotate(45deg);
}

.table-container {
    overflow-x: auto;
}
.table-container a{
    color: #1695f7;
}
.table-container a:hover {
    text-decoration: underline;
}
.recommend-button div,
.recommend-box div{
    margin: 0;
}
.recommend-button a,
.recommend-box a,
.recommend-button a p,
.recommend-box a p,
.recommend-box img,
.recommend-button img
{
    margin: 0;
}
.recommend-box div > p {
    margin-bottom: .75rem;
}
.recommend-button a p,
.recommend-box a p,
.recommend-button a p span,
.recommend-box a p span {
    color: #ffffff;
}
.recommend-button p a,
.recommend-box p a {
    color: #555a5d;
}


.recommend-box .active-win,
.recommend-box .active-mac {
    margin-top: .5rem;
}

table {
    border-collapse: collapse;
    margin-bottom: 20px;
}

table td,
table th {
    border: 1px solid #ddd;
    padding: 8px;
}

table tr:nth-child(even) {
    background-color: #f2f2f2;
}

table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #484e4e;
    color: white;
}

table td {
    color: #555a5d;
}

@media (min-width: 1279.98px) {
    #article-nav a:hover {
        opacity: 1;
        color: #7A32FD;
    }
}

@media (max-width: 767.98px) {
    .win-mac-btn-box {
        grid-template-columns: repeat(1,minmax(auto,15.75rem));
    }
    .about-author-box .author-content img {
        display: none;
    }
}