html {
    scroll-behavior: smooth;
    /*scroll-margin-top: 60px;*/
    scroll-padding-top: 60px;
}
.article-page a {
    text-decoration-line: none;
}
.article-page > p a {
    color: #008E93 !important;

}

.article-page>div,
.article-page>li,
.article-page>input,
.article-page>textarea {
    box-sizing: border-box;
}

.article-page .article-top {
    opacity: 0;
    position: fixed;
    top: -70px;
    left: 0;
    width: 100%;
    height: 82px;
    background-color: #fff;
    box-shadow: rgba(83, 108, 128, 0.2) 1px 4px 4px;
    z-index: 1000;
    transition: 0.1s;
}

.article-page .article-top .container {
    width: 1080px;
    margin: 0 auto;
}

.article-page .article-top .left {
    width: 60%;
    float: left;
    margin: 15px 0;
}

.article-page .article-top .left .to-t {
    float: right;
    font-size: 18px;
    color: #666666;
    margin: 20px 0;
}

.article-page .article-top .left .to-t span {
    font-size: 18px;
    color: #008E93;
}

.article-page .article-top .to-p {
    display: inline-block;
    margin: 15px 0;
}

.article-page .article-top .to-p img {
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 35px;
    margin-right: 10px;
}

.article-page .article-top .to-p span {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    color: #333333;
}

.article-page .article-top .to-p:hover span {
    color: #4596e5;
}

.article-page .article-top .right {
    float: right;
    margin: 15px 0;
    display: flex;
}

.article-page .article-top .right .button {
    /*width: 128px;*/
    height: 32px;
    line-height: 35px;
    display: flex;
    text-align: center;
    border-radius: 4px;
    margin-right: 10px;
    padding: 10px 12px;
    font-size: 18px;
}

.article-page .article-top.ja-top .right .button {
    padding: 0px 18px;
}

.article-page .article-top .right .button.win_down {
    color: #ffffff;
    background: #008E93;
    border: 1px solid #008E93;
}

.article-page .article-top .right .button.win_down::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background: url(../img/single/win-logo.svg) no-repeat;
    background-size: 100% 100%;
    margin: 8px;
}

.article-page .article-top .right .button.mac_down {
    /*border-color: #1e96ec !important;*/
    margin-right: 10px;
    border: 1px solid #008E93;
    color: #008E93;
}

.article-page .article-top .right .button.mac_down::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url(../img/single/icon-mac-green.svg) no-repeat;
    background-size: 100% 100%;
    margin: 7px;
}

.article-page .article-top.on {
    opacity: 1;
    top: 0;
}

@media screen and (max-width: 1200px) {
    .article-page .article-top {
        display: none;
    }
}

.article-page .banner-first {
    width: 100%;
    background: #03294D;
}

.article-page .banner-first .content-box {
    padding: 58px 0;
}

.article-page .banner-first .content-box .title {
    width: 75%;
    font: bold 42px/59px 'Rubik';
    color: #FFFFFF;
}

.article-page .banner-second {
    width: 100%;
    background: #03294D;
}

.article-page .banner-second .content-box {
    display: flex;
    align-items: flex-start;
    padding: 18px 0 5px 0;
}

.article-page .banner-second .content-box .left {
    flex: 75% 0;
}

.article-page .banner-second .content-box .left .title {
    font: bold 32px/45px 'Rubik';
    color: #FFFFFF;
}

.article-page .banner-second .content-box .left ul {
    margin: 30px 0;
}

.article-page .banner-second .content-box .left ul li {
    display: flex;
    font: lighter 16px/25px 'Rubik';
    color: #FFFFFF;
    margin: 15px 0;
}

.article-page .banner-second .content-box .left ul li::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url('../img/single/icon-right.svg') no-repeat;
    background-size: 100% 100%;
    margin: 5px 10px 0 0;
}

.article-page .banner-second .content-box .left>.download-btn {
    display: flex;
    margin: 20px 0;
}

.article-page .banner-second .content-box .left>.download-btn .btn {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 30px;
    font: normal 20px/20px 'Rubik';
    transition: all 0.5s;
}

.article-page .banner-second .content-box .left>.download-btn .btn::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    margin-right: 10px;
}

.article-page .banner-second .content-box .left>.download-btn .btn:hover {
    transform: translateY(-10px);
}

.article-page .banner-second .content-box .left>.download-btn .win-btn {
    background: #008E93;
    border-radius: 4px;
    color: #FFFFFF;
}

.article-page .banner-second .content-box .left>.download-btn .win-btn::before {
    background: url('../img/win-logo.svg') no-repeat;
    background-size: 100% 100%;
}

.article-page .banner-second .content-box .left>.download-btn .mac-btn {
    border: 2px solid #008E93;
    border-radius: 4px;
    color: #008E93;
    background: #FFFFFF;
}

.article-page .banner-second .content-box .left>.download-btn .mac-btn::before {
    width: 34px;
    height: 34px;
    background: url('../img/single/icon-mac-green.svg') no-repeat;
    background-size: 100% 100%;
    margin: 0px 5px 0 0;
}

.article-page .banner-second .content-box .right {
    flex: 25% 0;
    padding-top: 25px;
}

.article-page .banner-second .content-box .right img {
    margin-right: -100px;
}

.article-page>.article-title {
    box-sizing: border-box;
    width: 1080px;
    margin: 25px auto;
    font: bold 36px/39px 'Rubik';
    color: #000000;
    padding-left: 12px;
}

.article-page main {
    width: 1080px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 50px auto 0;
}

.article-page main article {
    width: 70%;
    margin: 0 15px;
    word-break: break-word;
}

.article-page main article p a {
    color: #ed6751 !important;
    font-weight: 400;
}

.article-page main article .basic-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
}


.article-page main article .basic-info p {
    font: normal 18px/18px 'Rubik';
    color: #032950;
    margin-right: 20px;
}

.article-page main article>p {
    font: lighter 18px/31px 'Rubik';
    color: #3E3E3E;
    margin: 20px 0;
}

.article-page main article .catalog {
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    background: #FAFAFC;
    border-radius: 12px;
    margin: 30px 0;
}

.article-page main article .catalog a {
    font: normal 18px/30px 'Rubik';
    color: #0D0D0D;
}

.article-page main article .catalog ul li a {
    font: normal 16px/30px 'Rubik';
}

.article-page main article .catalog a:hover {
    text-decoration-line: underline;
    color: #008E93;
}


.catalog>a {
    display: block;
    padding-left: 25px;
    text-decoration: none;
    color: #003366;
    font-weight: bold;
    position: relative;
    margin-bottom: 8px;
}

.catalog>a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: #003366;
    clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}

.catalog ul li a {
    display: block;
    text-decoration: none;
    color: #005599;
    font-weight: normal;
    position: relative;
    margin-bottom: 6px;
}


.catalog ul li a::before {
    content: none;
}

.article-page main article .catalog ul {
    margin-left: 50px;
    list-style-type: disc;
    font-size: 20px;
}

.article-page main article .catalog ul li {
    list-style-type: disc;
    font-size: 20px;
}

.article-page main article .first-level-title {
    font: bold 24px/41px 'Rubik';
    color: #008E93;
    margin: 20px 0;
}


/* .article-page main article .first-level-title::before {
    content: '';
    display: block;
    width: 8px;
    background: #00bfc0;
    height: 100%;
    float: left;
    position: absolute;
    top: 0px;
    left: 0;
  } */

.article-page main article .second-level-title {
    font: bold 20px/34px 'Rubik';
    color: #032950;
    margin: 20px 0;
}

.article-page main article .third-level-title {
    font: bold 20px/34px 'Rubik';
    color: #032950;
}

.article-page main article .product-desc {
    display: flex;
    margin: 30px 0;
}

.article-page main article .product-desc .product {
    flex: 50% 0;
    padding: 30px;
    background: rgba(255, 146, 84, 0.17);
    border-radius: 14px 0px 0px 14px;
}

.article-page main article .product-desc .product .name {
    font: bold 20px/35px 'Rubik';
    color: #0D0D0D;
}

.article-page main article .product-desc .product .desc {
    font: lighter 12px/19px 'Rubik';
    color: #3E3E3E;
}

.article-page main article .product-desc .product .download-btn {
    display: flex;
    margin: 20px 0 0;
}

.article-page main article .product-desc .product .download-btn .btn {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 5px;
    margin-right: 30px;
    transition: all 0.5s;
}

.article-page main article .product-desc .product .download-btn .btn::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.article-page main article .product-desc .product .download-btn .btn:hover {
    transform: translateY(-10px);
}

.article-page main article .product-desc .product .download-btn .win-btn {
    background: #F96666;
    color: #FFFFFF;
    font: normal 12px/15px 'Rubik';
}

.article-page main article .product-desc .product .download-btn .win-btn::before {
    background: url('../img/single/win-logo.svg') no-repeat;
    background-size: 100% 100%;
}

.article-page main article .product-desc .product .download-btn .mac-btn {
    background: #FFFFFF;
    color: #F96666;
    border: 1px solid #F96666;
}

.article-page main article .product-desc .product .download-btn .mac-btn::before {
    width: 20px;
    height: 20px;
    background: url('../img/single/icon-mac-orange.svg') no-repeat;
    background-size: 100% 100%;
    margin: 0px 5px 0 0;
}

.article-page main article .product-desc .features {
    flex: 50% 0;
    padding: 30px;
    background: rgba(255, 146, 84, 0.07);
    border-radius: 0 14px 14px 0;
}

.article-page main article .product-desc .features .name {
    font: bold 20px/35px 'Rubik';
    color: #0D0D0D;
}

.article-page main article .product-desc .features ul li {
    display: flex;
    font: lighter 12px/20px 'Rubik';
    color: #3E3E3E;
}

.article-page main article .product-desc .features ul li::before {
    content: '路';
    display: block;
    margin-right: 10px;
}

.article-page main article .step {
    display: flex;
    margin: 20px 0;
}

.article-page main article .step .num {
    background: #008E93;
    border-radius: 6px 0px 0px 6px;
    padding: 6px 10px;
    font: normal 18px/21px 'Rubik';
    color: #FFFFFF;
}

.article-page main article .step .text {
    padding: 6px 20px;
    background: #F9F9FB;
    font: normal 18px/21px 'Rubik';
    color: #212A33;
}

.article-page main article img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}

.article-page main article>.download-btn {
    display: flex;
    margin: 20px 0;
}

.article-page main article>.download-btn .btn {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    margin-right: 30px;
    font: normal 18px/21px 'Rubik';
    transition: all 0.5s;
}

.article-page main article>.download-btn .btn::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.article-page main article>.download-btn .btn:hover {
    transform: translateY(-10px);
}

.article-page main article>.download-btn .win-btn {
    background: #008E93;
    border-radius: 4px;
    color: #FFFFFF;
}

.article-page main article>.download-btn .win-btn::before {
    background: url('../img/single/win-logo.svg') no-repeat;
    background-size: 100% 100%;
}

.article-page main article>.download-btn .mac-btn {
    border: 1px solid #008E93;
    border-radius: 4px;
    color: #008E93;
}

.article-page main article>.download-btn .mac-btn::before {
    width: 30px;
    height: 30px;
    background: url('../img/single/icon-mac-green.svg') no-repeat;
    background-size: 100% 100%;
    margin: -5px 5px 0 0;
}
.article-page main .advertise-box {
    flex: 0 0 210px;
    margin-top: 55px;
}

.article-page main .advertise-box .recommend-products {
    width: 100%;
}

.article-page main .advertise-box .recommend-products img {
    width: 100%;
    height: auto;
}

.article-page main .advertise-box .related-article {
    max-width: 100%;
    width: 210px;
    box-sizing: border-box;
    border: 1px solid #DBDDE8;
    border-radius: 10px;
    padding: 15px 10px;
    margin: 20px 0;
}

.article-page main .advertise-box .related-article>.title {
    font-weight: bolder;
    font-size: 18px;
    line-height: 146.68%;
    color: #000000;
}

.article-page main .advertise-box .related-article .articles .article-item {
    display: flex;
    margin-top: 20px;
}

.article-page main .advertise-box .related-article .articles .article-item .item-img {
    width: 67px;
    height: 40px;
    background-color: teal;
}

.article-page main .advertise-box .related-article .articles .article-item .item-info {
    flex: 1 0;
}
.article-page main .advertise-box .related-article .articles .article-item .item-info .info-title {
    margin: 0;
    padding: 0;
}
.article-page main .advertise-box .related-article .articles .article-item .item-info .info-title a {
    font-weight: lighter;
    font-size: 16px;
    line-height: 146.68%;
    color: #000000 !important;
    transition: all 0.2s;
    word-break: break-word;
}

.article-page main .advertise-box .related-article .articles .article-item .item-info .info-title a:hover {
    color: #008E93 !important;
    text-decoration: underline;
}

.article-page main .advertise-box .related-article .articles .article-item .item-info .info-class {
    font-weight: lighter;
    font-size: 16px;
    line-height: 146.68%;
    color: #9497A4;
}

.article-page main .star-box {
    box-sizing: border-box;
    padding: 30px 0;
    border-top: 1px solid #DBDDE8;
}

.article-page main .star-box .title {
    font-weight: 500;
    font-size: 36px;
    line-height: 140.18%;
    color: #000000;
}

.article-page main .star-box .star-content {
    display: flex;
    margin: 30px 0 10px;
}

.article-page main .star-box .star-score {
    font-size: 18px;
    padding: 10px 4px 0;
    color: #232323;
    font-weight: 400;
}

.article-page main .star-box .star-content .item {
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 30px;
    transition: all 0.5s;
    cursor: pointer;
}

.article-page main .star-box .star-content .item:nth-child(1) {
    background-image: url('../img/single/icon-star-1.svg');
}

.article-page main .star-box .star-content .item:nth-child(2) {
    background-image: url('../img/single/icon-star-2.svg');
}

.article-page main .star-box .star-content .item:nth-child(3) {
    background-image: url('../img/single/icon-star-3.svg');
}

.article-page main .star-box .star-content .item:hover {
    transform: translateY(-10px);
}

.article-page main .toggle-article {
    box-sizing: border-box;
    padding: 30px 0;
    border-top: 1px solid #DBDDE8;
    display: flex;
    justify-content: space-between;
}

.article-page main .toggle-article a {
    flex: 40% 0;
    display: flex;
    flex-flow: column nowrap;
}

.article-page main .toggle-article a:nth-child(1) span {
    text-align: left;
}

.article-page main .toggle-article a:nth-child(2) span {
    text-align: right;
}

.article-page main .toggle-article a span:nth-child(1) {
    font-size: 18px;
    line-height: 146.68%;
    color: #5C5C5C;
}

.article-page main .toggle-article a span:nth-child(2) {
    font-weight: 500;
    font-size: 20px;
    line-height: 146.68%;
    color: #000000;
    transition: all 0.2s;
}

.article-page main .toggle-article a:hover span:nth-child(2) {
    color: #008E93;
}

.article-page .comment {
    width: 1080px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px 15px 40px;
    background: #FAFAFA;
    border-radius: 8px;
    margin: 50px auto 0;
}

.article-page .comment .author-info {
    display: flex;
    align-items: center;
}

.article-page .comment .author-info .avatar {
    width: 106px;
    height: 106px;
    border-radius: 50%;
}

.article-page .comment .author-info .info {
    margin-left: 25px;
}

.article-page .comment .author-info .info .name {
    font: bold 20px/24px 'Rubik';
    color: #131313;
}

.article-page .comment .author-info .info .job-title {
    font: lighter 16px/19px 'Rubik';
    color: #131313;
    margin: 10px 0;
}

.article-page .comment .author-info .info .connect {
    display: flex;
    margin: 10px 0;
}

.article-page .comment .author-info .info .connect span {
    margin-right: 20px;
    display: block;
}

.article-page .comment .author-info .info .connect .facebook {
    width: 27px;
    height: 27px;
    background: url('../img/single/icon-facebook.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .comment .author-info .info .connect .facebook:hover {
    background: url('../img/single/icon-facebook-hover.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .comment .author-info .info .connect .twitter {
    display: block;
    width: 31px;
    height: 25px;
    background: url('../img/single/icon-twitter.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .comment .author-info .info .connect .twitter:hover {
    background: url('../img/single/icon-twitter-hover.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .comment .author-info .info .connect .mail {
    display: block;
    width: 31px;
    height: 25px;
    background: url('../img/single/icon-mail.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .comment .author-info .info .connect .mail:hover {
    background: url('../img/single/icon-mail-hover.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .comment .comment-info .rating {
    text-align: right;
}

.article-page .comment .comment-info .click,
.article-page .comment .comment-info .votes {
    font: lighter 14px/17px 'Rubik';
    text-align: right;
    color: #3A3A3A;
    margin: 10px 0;
}


/* 11.18 ------------------------------ */
.article-page .author-info {
    display: flex;
    align-items: center;
}

.article-page .author-info .avatar {
    width: 106px;
    height: 106px;
    border-radius: 50%;
}

.article-page .author-info .info {
    margin-left: 25px;
}

.article-page .author-info .info .name {
    font: bold 20px/24px 'Rubik';
    color: #131313;
}

.article-page .author-info .info .job-title {
    font: lighter 16px/19px 'Rubik';
    color: #131313;
    margin: 10px 0;
}

.article-page .author-info .info .connect {
    display: flex;
    margin: 10px 0;
}

.article-page .author-info .info .connect span {
    margin-right: 20px;
    display: block;
}

.article-page .author-info .info .connect .facebook {
    width: 27px;
    height: 27px;
    background: url('../img/single/icon-facebook.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .author-info .info .connect .facebook:hover {
    background: url('../img/single/icon-facebook-hover.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .author-info .info .connect .twitter {
    display: block;
    width: 31px;
    height: 25px;
    background: url('../img/single/icon-twitter.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .author-info .info .connect .twitter:hover {
    background: url('../img/single/icon-twitter-hover.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .author-info .info .connect .mail {
    display: block;
    width: 31px;
    height: 25px;
    background: url('../img/single/icon-mail.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .author-info .info .connect .mail:hover {
    background: url('../img/single/icon-mail-hover.png') no-repeat;
    background-size: 100% 100%;
}

.article-page .author-area .rating-info .rating {
    text-align: right;
}

.article-page .author-area .rating-info .click,
.article-page .author-area .rating-info .votes {
    font: lighter 14px/17px 'Rubik';
    text-align: right;
    color: #3A3A3A;
    margin: 10px 0;
}

.article-page .comment-info .rating {
    text-align: right;
}

.article-page .comment-info .click,
.article-page .comment-info .votes {
    font: lighter 14px/17px 'Rubik';
    text-align: right;
    color: #3A3A3A;
    margin: 10px 0;
}



/* -----------------end----------------- */
.article-page .related-articles {
    width: 1080px;
    margin: 50px auto 30px;
    padding: 20px;
    background-color: #FFFFFF;
    border: 6px solid #FAFAFA;
    border-radius: 8px;
}

.article-page .related-articles .title {
    font: bold 24px/41px 'Rubik';
    color: #032950;
}

.article-page .related-articles .content {
    display: flex;
}

.article-page .related-articles .content .item {
    box-sizing: border-box;
    flex: 50% 0;
    overflow: hidden;
}

.article-page .related-articles .content .item li {
    margin: 15px 0;
}

.article-page .related-articles .content .item li a {
    font: lighter 16px/27px 'Rubik';
    color: #032950;
}

.article-page .related-articles .content .item li a:hover {
    text-decoration: underline;
}

.article-page .related-articles .content .item:nth-child(1) {
    border-right: 1px solid #FAFAFA;
}

.article-page .related-articles .content .item:nth-child(2) {
    padding-left: 70px;
}

.article-page .bread-crumbs {
    width: 100%;
    background: #03294D;
    padding: 10px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 40px;
}

.article-page .bread-crumbs .bread-crumbs-box {
    width: 1080px;
    margin: 5px auto;
    margin-bottom: 10px;
}

.article-page .bread-crumbs .bread-crumbs-box .icon-home {
    width: 30px;
    height: 30px;
    background: url('../img/single/icon-home.svg') no-repeat;
    background-size: 100% 100%;
    margin-right: 12px;
}

.article-page .bread-crumbs .bread-crumbs-box a {
    font: lighter 18px/18px 'Rubik';
    color: #ffffff;
    margin-right: 8px;
}

.article-page .bread-crumbs .bread-crumbs-box a:hover {
    text-decoration: underline;
}

.article-page .bread-crumbs .bread-crumbs-box .home::after {
    content: '>>';
    display: inline-block;
    margin-left: 8px;
}

.article-page .bread-crumbs .bread-crumbs-box .category::after {
    content: '>>';
    display: inline-block;
    margin-left: 8px;
}

.catalog-box .shrink {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #008E93;
    border-radius: 10px 10px 0 0;
    transition: all 0.5s;
    border: 1px solid #DBDDE8;
    border-bottom: none;
}

.catalog-box .shrink-hide {
    width: 80px;
    border-radius: 40px;
    border: none;
}

.catalog-box .title-hide {
    display: none;
}

.catalog-box .shrink .eassiy-logo img {
    width: 30px;
    height: auto;
    opacity: 1;
    transition: opacity 500ms;
    border-radius: 50%;
}

.article-page .catalog-box .shrink .title {
    padding: 10px 20px;
    font-weight: bolder;
    font-size: 18px;
    line-height: 146.68%;
    color: #FFFFFF;
    white-space: nowrap;
    text-wrap: nowrap;
}

.catalog-box .shrink-hide .shrink-node {
    transform: rotate(180deg);
}

.catalog-box .shrink .shrink-node {
    font-size: 24px;
    font-weight: lighter;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.5s;
}

.article-page .catalog-box {
    position: sticky;
    top: 20%;
    /*transform: translateY(-50%);*/
    left: 5px;
    /* width: 220px; */
    flex: 1 0 188px;
    border-radius: 8px;
    overflow: hidden;
    transition: all 1s;
    z-index: 100;
    /* border: 1px solid #DBDDE8; */
}

.article-page .catalog-box .catelog-panel {
    width: 100%;
    border: 1px solid #DBDDE8;
    margin-top: -2px;
}

.article-page .catalog-box .catelog-panel .page-content {
    box-sizing: border-box;
    padding: 10px 0 0;
    border-radius: 0 0 10px 10px;
    background: #FFFFFF;
}

.article-page .catalog-box .catelog-panel .page-content .title {
    padding: 10px 20px;
    font-weight: bolder;
    font-size: 18px;
    line-height: 146.68%;
    color: #000000;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box {
    width: 100%;
    height: auto;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .activity-line {
    width: 5px;
    height: 15px;
    background: #008E93;
    transition: all 0.5s;
    transform: translateY(20px);
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list {
    box-sizing: border-box;
    /* margin-left: 20px; */
    padding: 0 5px 0 20px;
    display: flex;
    flex-flow: column nowrap;
    max-height: 50vh;
    overflow-y: scroll;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list::-webkit-scrollbar {
    width: 0;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list::-webkit-scrollbar-track {
    background: rgba(179, 177, 177, .3);
    border-radius: 10px;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list::-webkit-scrollbar-thumb {
    background: rgba(136, 136, 136, .4);
    border-radius: 10px;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, .6);
    border-radius: 10px;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list::-webkit-scrollbar-thumb:active {
    background: rgba(100, 100, 100, .6);
    border-radius: 10px;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list a {
    font-weight: lighter;
    font-size: 16px;
    line-height: 146.68%;
    color: #9497A4;
    margin-bottom: 10px;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list a:hover {
    color: #008E93;
}

.article-page .catalog-box .catelog-panel .page-content .catalog-list-box .catalog-list .a-highlight {
    color: #008E93;
    word-break: break-word;
}

.article-page .catalog-box-scroll {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 770px) {
    .article-page .banner-first {
        background: #03294D;
    }

    .article-page .banner-first .content-box {
        padding: 30rem 0;
    }

    .article-page .banner-first .content-box .title {
        width: 100%;
        font: bold 36rem/51rem 'Rubik';
        color: #FFFFFF;
    }

    .article-page .banner-second .content-box {
        flex-direction: column;
        align-items: unset;
        padding: 10rem 0 5rem;
    }

    .article-page .banner-second .content-box .left {
        flex: 1 0;
    }

    .article-page .banner-second .content-box .left .title {
        font: bold 32rem/45rem 'Rubik';
    }

    .article-page .banner-second .content-box .left ul {
        margin: 30rem 0;
    }

    .article-page .banner-second .content-box .left ul li {
        font: lighter 14rem/20rem 'Rubik';
        margin: 15rem 0;
    }

    .article-page .banner-second .content-box .left ul li::before {
        width: 16rem;
        height: 16rem;
        margin: 3rem 10rem 0 0;
        flex-shrink: 0;
    }

    .article-page .banner-second .content-box .left>.download-btn {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 20rem 0;
    }

    .article-page .banner-second .content-box .left>.download-btn .btn {
        width: fit-content;
        height: 25rem;
        padding: 16rem 40rem;
        font: normal 20rem/20rem 'Rubik';
        border-radius: 4px;
        margin: 0 0 20rem 0;
    }

    .article-page .banner-second .content-box .left>.download-btn .btn::before {
        width: 28rem;
        height: 28rem;
        margin-right: 10rem;
    }

    .article-page .banner-second .content-box .left>.download-btn .mac-btn {
        padding: 16rem 39rem;
        border: 1rem solid #008E93;
    }

    .article-page .banner-second .content-box .left>.download-btn .mac-btn::before {
        width: 34rem;
        height: 34rem;
        margin: 0rem 5rem 0 0;
    }

    .article-page .banner-second .content-box .right {
        flex: 1 0;
        display: none;
    }

    .article-page>.article-title {
        width: 345rem;
        margin: 25rem auto;
        font: bold 36rem/34rem 'Rubik';
        color: #000000;
        padding: 0;
    }

    .article-page main {
        width: 345rem;
        flex-direction: column;
        align-items: unset;
        margin: 50rem auto 0;
    }

    .article-page main article {
        flex: unset;
        width: 100%;
        margin: 0 auto;
    }

    .article-page main article .basic-info {
        justify-content: space-between;
        padding-bottom: 15rem;
        border-bottom: 1rem solid rgba(0, 0, 0, 0.12);
        margin-bottom: 20rem;
        flex-flow: row wrap;
    }

    .article-page main article .basic-info p {
        font: normal 14rem/24rem 'Rubik';
        padding-right: 5rem;
    }

    .article-page main article>p {
        font: lighter 14rem/24rem 'Rubik';
        margin: 20rem 0;
    }

    .article-page main article .catalog {
        padding: 15rem 20rem;
        border-radius: 12rem;
        margin: 30rem 0;
    }

    .article-page main article .catalog a {
        font: normal 14rem/23rem 'Rubik';
        margin: 5rem 0;
    }

    .article-page main article .first-level-title {
        font: bold 18rem/28rem 'Rubik';
        margin: 20rem 0;
    }

    .article-page main article .second-level-title {
        font: bold 16rem/27rem 'Rubik';
        margin: 20rem 0;
    }

    .article-page main article .third-level-title {
        font: bold 16rem/27rem 'Rubik';
        color: #032950;
    }

    .article-page main article .product-desc {
        flex-direction: column;
        margin: 30rem 0;
    }

    .article-page main article .product-desc .product {
        flex: 1 0;
        padding: 20rem;
        border-radius: 14rem 14rem 0 0;
    }

    .article-page main article .product-desc .product .name {
        font: bold 20rem/34rem 'Rubik';
    }

    .article-page main article .product-desc .product .desc {
        font: lighter 12rem/19rem 'Rubik';
    }

    .article-page main article .product-desc .product .download-btn {
        margin: 15rem 0 0;
    }

    .article-page main article .product-desc .product .download-btn .btn {
        padding: 8rem 16rem;
        border-radius: 5rem;
        margin-right: 20rem;
    }

    .article-page main article .product-desc .product .download-btn .btn::before {
        content: '';
        display: block;
        width: 20rem;
        height: 20rem;
        margin-right: 8rem;
    }

    .article-page main article .product-desc .product .download-btn .win-btn {
        font: normal 12rem/15rem 'Rubik';
    }

    .article-page main article .product-desc .product .download-btn .mac-btn {
        border: 1rem solid #F96666;
    }

    .article-page main article .product-desc .product .download-btn .mac-btn::before {
        width: 20rem;
        height: 20rem;
        margin: 0rem 5rem 0 0;
    }

    .article-page main article .product-desc .features {
        flex: 1 0;
        padding: 20rem;
        border-radius: 0 0 14rem 14rem;
    }

    .article-page main article .product-desc .features .name {
        font: bold 20rem/35rem 'Rubik';
    }

    .article-page main article .product-desc .features ul li {
        font: lighter 12rem/20rem 'Rubik';
        margin: 4rem 0;
    }

    .article-page main article .product-desc .features ul li::before {
        margin-right: 5rem;
    }

    .article-page main article .step {
        display: flex;
        flex-direction: column;
        margin: 20px 0;
    }

    .article-page main article .step .num {
        width: fit-content;
        border-radius: 6rem 6rem 0 0;
        padding: 6rem 15rem;
        font: normal 16rem/19rem 'Rubik';
    }

    .article-page main article .step .text {
        padding: 6px 10rem;
        font: normal 14rem/22rem 'Rubik';
    }

    .article-page main article img {
        width: 100%;
        height: auto;
        margin: 10rem 0;
    }

    .article-page main article>.download-btn {
        flex-direction: column;
        margin: 20rem 0;
    }

    .article-page main article>.download-btn .btn {
        box-sizing: border-box;
        width: fit-content;
        padding: 20rem 20rem;
        height: 45rem;
        font: normal 14rem/17rem 'Rubik';
        border-radius: 4px;
        margin: 0 0 20rem 0;
    }

    .article-page main article>.download-btn .btn::before {
        width: 20rem;
        height: 20rem;
        margin-right: 10rem;
    }

    .article-page main article>.download-btn .mac-btn {
        padding: 16rem 19rem;
        border: 1rem solid #008E93;
    }

    .article-page main article>.download-btn .mac-btn::before {
        width: 25rem;
        height: 25rem;
        margin: 0 5rem 0 0;
    }

    /*.article-page main aside {*/
    /*  padding: 20rem 20rem 10rem;*/
    /*  flex: 1 0;*/
    /*  border: 1rem solid rgba(0, 0, 0, 0.12);*/
    /*  border-radius: 8rem;*/
    /*  width: 100%;*/
    /*}*/

    /*.article-page main aside .title {*/
    /*  font: bold 18rem/31rem 'Rubik';*/
    /*  padding-bottom: 10rem;*/
    /*  border-bottom: 1rem solid #FAFAFA;*/
    /*  margin-bottom: 10rem;*/
    /*}*/

    /*.article-page main aside .title::before {*/
    /*  left: -20rem;*/
    /*  width: 3rem;*/
    /*  height: 24rem;*/
    /*}*/

    /*.article-page main aside .article-title {*/
    /*  font: lighter 14rem/22rem 'Rubik';*/
    /*}*/

    /*.article-page main aside .article-title::before {*/
    /*  width: 10rem;*/
    /*  height: 10rem;*/
    /*  margin: 6rem 8rem 0 0;*/
    /*}*/

    /*.article-page main aside .article-title-active::before {*/
    /*  width: 10rem;*/
    /*  height: 10rem;*/
    /*  margin: 6rem 8rem 0 0;*/
    /*}*/

    /*.article-page main aside .article-step {*/
    /*  padding-left: 18rem;*/
    /*  margin-bottom: 10rem;*/
    /*}*/

    /*.article-page main aside .article-step li a {*/
    /*  font: lighter 14rem/38rem 'Rubik';*/
    /*}*/

    .article-page main .advertise-box {
        flex: unset;
        width: 100%;
        margin-left: 0;
    }

    .article-page main .advertise-box .related-article {
        width: 100%;
    }

    .article-page main .star-box .title {
        font-size: 24rem;
    }

    .article-page main .toggle-article a {
        flex: 45% 0;
        display: flex;
        flex-flow: column nowrap;
    }

    .article-page main .toggle-article a span:nth-child(1) {
        font-size: 16rem;
    }

    .article-page main .toggle-article a span:nth-child(2) {
        font-size: 18rem;
    }

    .article-page .comment {
        width: 345rem;
        align-items: flex-end;
        padding: 20rem 45rem 20rem 0;
        border-radius: 8rem;
        margin: 0 auto;
    }

    .article-page .comment .author-info {
        flex-direction: column;
        align-items: unset;
    }

    .article-page .comment .author-info .avatar {
        width: 62rem;
        height: 62rem;
        border-radius: 50%;
        margin-left: 25rem;
    }

    .article-page .comment .author-info .info {
        margin: 20rem 0 0 25rem;
    }

    .article-page .comment .author-info .info .name {
        font: bold 13rem/16rem 'Rubik';
    }

    .article-page .comment .author-info .info .job-title {
        font: lighter 10rem/13rem 'Rubik';
        margin: 10rem 0;
    }

    .article-page .comment .author-info .info .connect {
        display: flex;
        margin: 10rem 0;
    }

    .article-page .comment .author-info .info .connect span {
        margin-right: 10rem;
        display: block;
    }

    .article-page .comment .author-info .info .connect .facebook {
        width: 13rem;
        height: 13rem;
    }

    .article-page .comment .author-info .info .connect .twitter {
        width: 14rem;
        height: 12rem;
    }

    .article-page .comment .author-info .info .connect .mail {
        width: 14rem;
        height: 12rem;
    }

    .article-page .comment .comment-info .click,
    .article-page .comment .comment-info .votes {
        font: lighter 9rem/11rem 'Rubik';
        text-align: left;
        margin: 10rem 0;
    }

    .article-page .related-articles {
        width: 345rem;
        margin: 50rem auto 30rem;
        padding: 20rem;
        border: 6rem solid #FAFAFA;
        border-radius: 8rem;
    }

    .article-page .related-articles .title {
        font: bold 20rem/34rem 'Rubik';
    }

    .article-page .related-articles .content {
        flex-direction: column;
    }

    .article-page .related-articles .content .item {
        flex: 1 0;
    }

    .article-page .related-articles .content .item li {
        margin: 15rem 0;
    }

    .article-page .related-articles .content .item li a {
        font: lighter 14rem/24rem 'Rubik';
    }

    .article-page .related-articles .content .item:nth-child(1) {
        border-right: none;
        border-bottom: 1px solid #FAFAFA;
    }

    .article-page .related-articles .content .item:nth-child(2) {
        padding-left: 0;
    }

    .article-page .bread-crumbs .bread-crumbs-box {
        width: 345rem;
    }

    .article-page .bread-crumbs .bread-crumbs-box .icon-home {
        flex-shrink: 0;
        width: 30rem;
        height: 30rem;
        margin-right: 12rem;
    }

    .article-page .bread-crumbs .bread-crumbs-box a {
        font: lighter 14rem/18rem 'Rubik';
        margin-right: 8rem;
    }

    .article-page .bread-crumbs .bread-crumbs-box .home::after {
        margin-left: 8rem;
    }

    .article-page .bread-crumbs .bread-crumbs-box .category::after {
        margin-left: 8rem;
    }

    .article-page .catalog-box {
        display: none;
    }
}

article>ul {
    margin-left: 30px;
}

article>ul li {
    margin-top: 8px;
    font-size: 18px;
    list-style: disc;
    line-height: 170%;
    font: lighter 18px/31px 'Rubik';
    color: #3E3E3E;
}

article>ol {
    margin-left: 30px;
}

article>ol li {
    margin-top: 8px;
    font-size: 18px;
    list-style: circle;
    line-height: 170%;
    font: lighter 18px/31px 'Rubik';
    color: #3E3E3E;
}

article>ol li a:hover,
article>ul li a:hover {
    color: #005599;
    text-decoration: underline;
}

@media screen and (max-width: 770px) {
    article>ul {
        margin-left: 30rem;
    }

    article>ul li {
        margin-top: 8rem;
        list-style: disc;
        line-height: 170%;
        font-size: 14rem;
    }

    article>ol {
        margin-left: 30rem;
    }

    article>ol li {
        margin-top: 8rem;
        list-style: circle;
        line-height: 170%;
        font-size: 14rem;
    }
}

.article-page .table-box2 {
    max-width: 800px;
    overflow: auto;
    margin-top: 58px;
    font-weight: 400;
    font-size: 14px;
    line-height: 149%;
    text-align: center;
    color: #5A5A5A;
    border-radius: 15.7021px;
    border: 1.04681px solid #EEEEEE;
}

.article-page .table-box2 table {
    border-radius: 15.7021px;
    border: 1.04681px solid #EEEEEE;
    overflow: hidden;
    text-align: center;
}

.article-page .table-box2 a {
    color: #ed6751 !important;
    font-weight: 400;
}

.article-page .table-box2 thead {
    background: #2AC0C1;
}

.article-page .table-box2 thead th {
    border: none;
    padding: 12px 6px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
}

.article-page .table-box2 tbody tr:nth-child(1) {
    border-top: #EEEEEE 1px solid;
    border-bottom: 2px solid #EEEEEE;
}

.article-page .table-box2 tbody tr:nth-child(2n) {
    background: #f5f5f7;
    border-color: #e4e4e6;
}

.article-page .table-box2 tbody tr td {
    min-width: 125px;
    padding: 10px 6px;
}

.article-page .table-box2 tbody tr td .table-star {
    width: 20px;
    height: 20px;
}

.article-page .table-box2 tbody tr td:nth-child(1) {
    max-width: 170px;
}

.article-page .table-box2::-webkit-scrollbar {
    height: 7px;
}

.article-page .table-box2::-webkit-scrollbar-thumb {
    background-color: #2AC0C1;
    border-radius: 31px;
}

.article-page .table-box2::-webkit-scrollbar-track {
    background-color: #E0F2EB;
    border-radius: 31px;
}

@media screen and (max-width: 770px) {
    .article-page .table-box2 {
        width: 100%;
        border-radius: 15.7021rem;
        font-size: 11.0698rem;
        margin-top: 56rem;
    }

    .article-page .table-box2 table {
        border-radius: 15.7021rem;
    }

    .article-page .table-box2 thead th {
        padding: 9rem 6rem;
        font-size: 12.6512rem;
    }

    .article-page .table-box2 tbody tr td {
        font-size: 11.0698rem;
        min-width: 125rem;
        padding: 10rem 6rem;
    }

    .article-page .table-box2 tbody tr td .table-star {
        width: 20rem;
        height: 20rem;
    }

    .article-page .table-box2 tbody tr td:nth-child(1) {
        max-width: 135rem;
    }

    .article-page .table-box2::-webkit-scrollbar {
        height: 9rem;
    }

    .article-page .table-box2::-webkit-scrollbar-thumb {
        background-color: #2AC0C1;
        border-radius: 31rem;
    }

    .article-page .table-box2::-webkit-scrollbar-track {
        background-color: #E0F2EB;
        border-radius: 31rem;
    }
}


/* table-box3 */
.table-box3 {
    width: 100%;
    overflow-x: auto;
}

.table-box3 table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    max-width: 810px;
}

.table-box3 th,
.table-box3 td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.table-box3 th:first-child {
    background-color: #00bfc0;
    color: white;
}

.table-box3 td:first-child {
    background-color: #00bfc0;
    color: white;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .table-box3 table {
        font-size: 14px;
    }

    .table-box3 th,
    .table-box3 td {
        padding: 6px;
    }
}

@media screen and (max-width: 480px) {
    .table-box3 table {
        font-size: 12px;
    }

    .table-box3 th,
    .table-box3 td {
        padding: 4px;
    }
}


.table-box table {
    caption-side: bottom;
    border-collapse: collapse;
    border-color: #dee2e6;
    text-indent: initial;
    border-spacing: 2px;
    text-align: center;
    font-size: 13px;
    max-width: 810px;
}

.table-box table a {
    color: #ed6751 !important;
    font-weight: 400;
}

.table-box table tbody {
    width: 100%;
}

.table-box table tbody tr td {
    border-color: inherit;
    border-style: solid;
    border-width: 0 1px;
    padding: 0 5px;
    word-wrap: break-word !important;
    white-space: normal !important;
}

.table-box table tbody tr td p {
    margin: revert;
    width: 100%;
}

.table-box table tbody tr:nth-child(1) {
    border-top: #dee2e6 1px solid;
    border-bottom: 2px solid #000;
}

.table-box table tbody tr:nth-child(2n) {
    background: #e2e3e5;
    border-color: #cbccce;
}

.table-box table tbody tr:last-child {
    border-bottom: #dee2e6 1px solid;
}

@media screen and (max-width: 770px) {
    .table-box {
        width: 98%;
        overflow-x: auto;
    }

    .table-box table {
        width: 100%;
        border-spacing: 2rem;
        font-size: 14rem;
    }

    .table-box table tbody tr {
        width: 100%;
    }

    .table-box table tbody tr td {
        width: 25%;
    }

    .table-box table tbody tr td p {
        margin: revert;
    }

    .table-box table tbody tr:nth-child(1) {
        border-top: #dee2e6 1rem solid;
        border-bottom: 2rem solid #000;
    }

    .table-box table tbody tr:last-child {
        border-bottom: #dee2e6 1rem solid;
    }
}

table {
    caption-side: bottom;
    border-collapse: collapse;
    border-color: #dee2e6;
    text-indent: initial;
    border-spacing: 2px;
    text-align: center;
    font-size: 13px;
    max-width: 810px;
}

table tbody {
    width: 100%;
}

table tbody tr td {
    border-color: inherit;
    border-style: solid;
    border-width: 0 1px;
    padding: 0 5px;
    word-wrap: break-word !important;
    white-space: normal !important;
}

table tbody tr td p {
    margin: revert;
    width: 100%;
}

table tbody tr:nth-child(1) {
    border-top: #dee2e6 1px solid;
    /* border-bottom: 2px solid #000; */
}

table tbody tr:nth-child(2n) {
    background: #e2e3e5;
    border-color: #cbccce;
}

table tbody tr:last-child {
    border-bottom: #dee2e6 1px solid;
}

@media screen and (max-width: 770px) {
    table {
        width: 98%;
        border-spacing: 2rem;
        font-size: 14rem;
    }

    table tbody tr {
        width: 100%;
    }

    table tbody tr td {
        width: 25%;
    }

    table tbody tr td p {
        margin: revert;
    }

    table tbody tr:nth-child(1) {
        border-top: #dee2e6 1rem solid;
        /* border-bottom: 2rem solid #000; */
    }

    table tbody tr:last-child {
        border-bottom: #dee2e6 1rem solid;
    }
}

article>h1 {
    font-size: 32px !important;
    margin: 0.67em 0 !important;
}

article>h2 {
    position: relative;
    font-size: 24px !important;
    margin: 0.75em 0 !important;
    padding: 10px 23px;
    background: linear-gradient(90deg, rgba(101, 185, 215, 0.08) 0%, rgba(241, 250, 255, 0) 100%);
}

article>h2::before {
    content: '';
    display: block;
    width: 8px;
    background: #00bfc0;
    height: 100%;
    float: left;
    position: absolute;
    top: 0px;
    left: 0;
}

article>h3 {
    font-size: 20px !important;
    margin: 1.5em 0 !important;
    position: relative;
}

article>h3::after {
    content: '';
    display: block;
    width: 100px;
    background: linear-gradient(to right, #00a4a0, #ffffff);
    ;
    height: 6px;
    bottom: -10px;
    float: left;
    position: absolute;
}

article>h4 {
    font-size: 20px !important;
    margin: 1em 0 !important;
    position: relative;
    padding-left: 10px;
}

article>h4::before {
    content: '';
    display: block;
    width: 4px;
    background: #00bfc0;
    height: 100%;
    float: left;
    position: absolute;
    top: 0px;
    left: 0;
}

article>h5 {
    font-size: 14px !important;
    margin: 1.5em 0 !important;
}

article>h6 {
    font-size: 13px !important;
    margin: 1.67em 0 !important;
}

.green {
    color: #008E93;
}

@media screen and (max-width: 770px) {
    article>h1 {
        font-size: 32rem !important;
        margin: 0.67em 0 !important;
    }

    article>h2 {
        font-size: 24rem !important;
        margin: 0.75em 0 !important;
    }

    article>h3 {
        font-size: 19rem !important;
        margin: 0.83em 0 !important;
    }

    article>h4 {
        font-size: 16rem !important;
        margin: 1em 0 !important;
    }

    article>h5 {
        font-size: 14rem !important;
        margin: 1.5em 0 !important;
    }

    article>h6 {
        font-size: 13rem !important;
        margin: 1.67em 0 !important;
    }
}

.article-page .author-area {
    width: 1080px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px 15px 40px;
    background: #FAFAFA;
    border-radius: 8px;
    margin: 50px auto;
}

.article-page .author-area .author-info {
    display: flex;
    align-items: center;
}

.article-page .author-area .author-info .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.article-page .author-area .author-info .info {
    margin-left: 25px;
}

.article-page .author-area .author-info .info .name {
    font: bold 20px/24px 'Rubik';
    color: #131313;
}

.article-page .author-area .author-info .info .job-title {
    font: lighter 16px/19px 'Rubik';
    color: #131313;
    margin: 10px 0;
}

.article-page .author-area .author-info .info .connect {
    display: flex;
    margin: 10px 0;
}

@media screen and (max-width: 770px) {
    .article-page .author-area {
        width: 345rem;
        align-items: flex-end;
        padding: 20rem 45rem 20rem 0;
        border-radius: 8rem;
        margin: 35rem auto;
    }

    .article-page .author-area .author-info {
        flex-direction: column;
        align-items: unset;
    }

    .article-page .author-area .author-info .avatar {
        width: 62rem;
        height: 62rem;
        border-radius: 50%;
        margin-left: 25rem;
    }

    .article-page .author-area .author-info .info {
        margin: 20rem 0 0 25rem;
    }

    .article-page .author-area .author-info .info .name {
        font: bold 13rem/16rem 'Rubik';
    }

    .article-page .author-area .author-info .info .job-title {
        font: lighter 10rem/13rem 'Rubik';
        margin: 10rem 0;
    }

    .article-page .author-area .author-info .info .connect {
        display: flex;
        margin: 10rem 0;
    }

    .article-page .author-area .author-info .info .connect span {
        margin-right: 10rem;
        display: block;
    }

    .article-page .author-area .author-info .info .connect .facebook {
        width: 13rem;
        height: 13rem;
    }

    .article-page .author-area .author-info .info .connect .twitter {
        width: 14rem;
        height: 12rem;
    }

    .article-page .author-area .author-info .info .connect .mail {
        width: 14rem;
        height: 12rem;
    }

    .article-page .author-area .rating-info .click,
    .article-page .author-area .rating-info .votes {
        font: lighter 9rem/11rem 'Rubik';
        margin: 10rem 0;
    }
}

article>.article-tips {
    background-color: #008E93;
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 10px;
    font-size: 18px;
    line-height: 30px;
    color: white;
}

article>.article-tips p {
    color: white;
    margin: 20px 0;
}

article>.article-tips .tips-title {
    margin-left: 5px;
}

article>.article-tips ul li {
    font-weight: 900;
    list-style-type: inherit;
    color: #FFB047;
}

article>.article-tips ul {
    padding-left: 20px;
}

article>.article-tips ul li a {
    color: #FFB047;
    text-decoration: underline;
}

article>.article-tips ul li a:hover {
    color: #FFB047;
    text-decoration: underline;
}

article>.pros-box {
    background: #FAFAFA;
    border-radius: 8px;
    display: flex;
}

article>.pros-box .pros-item {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #181818;
    flex: 0 0 50%;
    padding: 20px 25px 20px 25px;
}

article>.pros-box .cons {
    flex: 0 0 50%;
    position: relative;
    padding: 20px 25px 20px 25px;
}

article>.pros-box .cons:before {
    content: '';
    width: 2px;
    height: 70%;
    position: absolute;
    border-left: 1.13162px solid #EDEDED;
    left: -10px;
    top: 15%;
}

article>.pros-box .pros-item p {
    padding: 0;
    list-style-type: none;
}

article>.pros-box .pros-item .list {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #000000;
    position: relative;
    margin: 10px 0 0 25px;
}

article>.pros-box .pros-item .list:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    left: -25px;
    top: 5px;
    background: url('../img/tick.svg') no-repeat;
    background-size: 100% 100%;
}

article>.pros-box .cons .list:before {
    background: url('../img/fork.svg') no-repeat;
    background-size: 100% 100%;
}

@media (max-width: 770px) {
    .pros-box {
        border-radius: 8rem;
        flex-direction: column;
    }

    .pros-item,
    .pros-box .cons {
        font-weight: 600;
        font-size: 16rem;
        line-height: 19rem;
        padding: 20rem 13rem 16rem;
        flex: 0;
    }
}

@media (max-width: 770px) {
    html {
      font-size: 0.2666667vw;
    }
    .content-box {
      width: 345rem;
    }
    .mobile-style {
      display: block;
    }
    .pc-style {
      display: none;
    }
  }