.topics{ padding:25px 0px 40px 156px;position:relative;font-size:30px; }
.topics .list{ margin:30px 0px 0px -20px;font-size:1px; }
.topics .list>div{ display:inline-block;padding:0px 5px 25px 0px; }
.topics a{ font-size:17px;color:#333333;font-family:Mm;padding:10px 20px;border-radius:20px;transition:background .2s linear;text-decoration:none;white-space:nowrap; }
.topics a:hover{ background:#f1f1f1; }
.topics>div{ margin-bottom:10px; }

.paging{ padding:0px 0px 120px 156px;position:relative;margin-top:-10px;font-size:1px; }
.paging>div{ display:inline-block;padding:0px 5px 30px 0px; }
.paging a{ color:#333333;font-size:20px;font-family:Mm;padding:10px 18px;border-radius:6px;transition:background .2s linear;text-decoration:none;margin-right:5px;background:#f5f5f5; }
.paging a:hover{ background:#dddddd; }
.paging a.sel,.topics a.sel{ background:#7b736a;color:#ffffff; }

.aList{ display:flex;flex-wrap:wrap;background:#ffffff;padding:0px 70px; }
.articles.aList .i{ width:33.333%;max-width:33.333%;flex:0 0 33.333%; }
.articles.aList .i>div{ margin-right:44px;margin-left:44px;margin-bottom:70px;font-family:Mr; }
.articles.aList .i>div>div{ background:rgba(238,238,238,.9);border-radius:12px;position:relative;z-index:1;margin:0px -25px 0px 25px;padding:18px 24px;font-size:15px; }
.articles.aList .i .img{ margin-bottom:-35px; }
.articles.aList .i .t{ font-size:24px;margin-bottom:8px; }
.articles.aList .i .n{ margin-top:6px;text-align:right;font-family:Mm; }
.articles.aList .i .n a{ padding-right:10px; }
.articles.aList .i .n a:after{ position:absolute;font-family:CustomIcons;content:"\203A";margin:2px 0px 0px 3px; }
.articles.wBG{ padding-top:60px;padding-bottom:80px; }

@media screen and (max-width:1700px) {
    .paging a{ font-size:18px; }
}
@media screen and (max-width:1300px) {
    .paging a{ font-size:16px; }
}
@media screen and (max-width:1600px) {
    .topics,.paging{ padding-left:60px; }
    .topics{ padding-top:0px; }
    .aList{ padding:0px 20px; }
    .articles.aList .i>div{ margin-right:30px;margin-left:30px;margin-bottom:60px; }
    .paging{ padding-top:20px; }
}
@media screen and (max-width:1300px) {
    .articles.aList .i .t{ font-size:20px;margin-bottom:6px; }
    .articles.aList .i>div>div{ padding:16px 18px 12px 18px; }
}
@media screen and (max-width:1200px) {
    .articles.aList .i{ width:33.33%;max-width:33.33%;flex:0 0 33.33%; }
}
@media screen and (max-width:1000px) {
    .articles.aList .i{ width:50%;max-width:50%;flex:0 0 50%; }
}
@media screen and (max-width:900px) {
    .topics{ font-size:26px; }
    .topics a{ font-size:16px;padding:6px 12px; }
    .topics .list{ margin-left:-12px; }
    .paging a{ font-size:15px; }
    .paging a{ padding:8px 16px; }
    .topics .list>div{ padding-bottom:20px; }
    .paging>div{ padding-bottom:25px; }
    .paging{ padding-bottom:80px; }
}
@media screen and (max-width:600px) {
    .articles.aList .i{ width:100%;max-width:100%;flex:0 0 100%;margin-left:0px; }
    .articles.aList .i>div{ margin-right:20px;margin-left:20px;margin-bottom:40px; }
    .articles.aList .i>div>div{ margin:0px -25px; }
}
@media screen and (max-width:440px) {
    .topics,.paging{ padding-left:30px; }
    .articles.aList{ padding-left:0px; }
    .articles.aList .i>div>div{ border-top-left-radius:0px;border-bottom-left-radius:0px;margin:0px -25px 0px -20px; }
    .topics a{ font-size:14px; }
}

.article{ padding:25px 0px 40px 156px;position:relative;display:flex; }
.article .body{ flex:0 0 70%;padding-bottom:30px; }
.article .subh{ flex:0 0 30%;display:flex;justify-content:center;align-items:flex-start;position:relative; }

.article .body .h{ border-bottom:1px solid #aaaaaa;position:relative;padding-bottom:5px; }
.article .body .h .date{ padding-left:30px; }
.article .body .h .date::before{ position:absolute;content:"\E800";margin:-3px 0px 0px -30px;font-family:CustomIcons2;font-size:22px;color:#666666; }
.article .body .h .date u{ text-decoration:none; }
.article .body .h .date i{ display:none; }
.article .body .h .view{ padding-left:60px; }
.article .body .h .view::before{ position:absolute;content:"\E802";margin-left:-30px;font-family:CustomIcons2;font-size:16px;color:#666666; }
.article .body .h .share{ position:absolute;right:0px; }
.article .body .h .share>:first-child{ padding-bottom:6px; }
.article .body .h .share .m{ color:#333333; }
.article .body .h .share .m::before{ position:absolute;content:"\E801";margin:-3px 0px 0px -30px;font-family:CustomIcons2;font-size:22px;color:#666666;transition:color .2s linear; }
.article .body .h .share .l{ position:absolute;z-index:2;background:#ffffff;padding:12px 20px;border:solid 1px #eeeeee;border-radius:10px;font-size:15px;border-top-right-radius:0px;right:0px;white-space:nowrap;box-shadow:0 10px 25px -10px rgba(0,0,0,.3);visibility:hidden;opacity:0;transform:translateY(10px);transition:all .3s ease-out; }
.article .body .h .share .l a{ color:#333333;padding:10px 0px 10px 40px; }
.article .body .h .share .l>div{ padding:12px 0px; }
.article .body .h .share .l a::before{ position:absolute;font-family:CustomIcons2;color:#ffffff;border-radius:50px;margin:-5px 0px 0px -42px;width:32px;height:32px;box-sizing:border-box; }
.article .body .h .share .l a.wa::before{ content:"\F232";background:#1B8755;font-size:27px;padding:2px 0px 0px 4px; }
.article .body .h .share .l a.tel::before{ content:"\E807";background:#1188C3;font-size:16px;padding:8px 0px 0px 4px; }
.article .body .h .share .l a.vk::before{ content:"\F189";background:#0077FF;font-size:19px;padding:5px 0px 0px 5px; }
.article .body .h .share .l a.ok::before{ content:"\F30C";background:#FF7700;font-size:20px;padding:5px 0px 0px 10px; }
.article .body .h .share .l a.copy::before{ content:"\E808";background:#7b736a;font-size:17px;padding:7px 0px 0px 7px; }
.article .body .h .share .m:hover,.article .body .h .share .m:hover::before,.article .body .h .share .l a:hover{ color:#5c135e; }
.article .body .h .share:hover .l{ opacity:1;transform:translateY(0px);visibility:visible; }
.article .body .h .share.hide .l{ opacity:0;transform:translateY(10px);visibility:hidden; }
.article .body .text{ padding-top:30px;position:relative; }
.article .body .text p,.article .body .text ul,.article .body .text ol,.article .body .text li{ padding-bottom:10px;line-height:28px; }
.article .body .text h2{ padding-bottom:10px;padding-top:30px; }
.article .body .text h3{ padding-bottom:10px;padding-top:15px; }
.article .body .text b,.article .body .text a,.article .body .faq .l .a b{ font-family:Mm; }
.article .body .text a{ color:#8902bf;text-decoration:none;position:relative; }
.article .body .text a::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:currentColor;transform-origin:center;opacity:1;transition:transform .3s ease,opacity .3s ease; }
.article .body .text a:hover::after{ transform:scaleX(0) translateY(3px);opacity:0; }
.article .body .text ol,.article .body .text ul{ margin-left:34px;list-style:none;counter-reset:item; }
.article .body .faq ul{ margin-left:34px; }
.article .body .text ol>li,.article .body .text ul>li{ counter-increment:item; }
.article .body .text ul>li:before{ margin:0px 8px 0px -34px;content:'\F06D';font-size:20px;color:#8f58a5;font-family:CustomIcons2;position:absolute;transition:transform linear .2s; }
.article .body .text ol>li:before{ margin:0px 8px 0px -34px;content:counter(item);background:#928774;color:white;width:25px;text-align:center;font-family:Mm;border-radius:2px;position:absolute;transition:background linear .2s; }
.article .body .text ol>li>ul{ margin-top:10px;padding-bottom:0px; }
.article .body .text ul>li ul>li:before{ content:'\E805';color:#9f9f9f; }
.article .body .text img{ max-width:100%;margin-bottom:10px;border-radius:16px; }
.article .body .text table{ margin-bottom:16px; }
.article .body .text table th{ padding:10px;margin:0px;background:#e5e5e5;font-weight:normal;font-family:Mm;border:1px solid #ffffff; }
.article .body .text table td{ padding:10px;margin:0px;border:1px solid #bbbbbb;border-style:dashed; }
.article .body .makeApp{ padding:65px 0px 35px 0px; }
.article .body .makeApp u{ text-decoration:none; }
.article .body .makeApp i{ display:none; }
.article .body .proc .l>div{ display:flex;align-items:center;width:75%;background:#f5f5f5;border:solid 1px #f1f1f1;font-size:18px;margin-bottom:10px;padding:30px 20px 30px 30px;box-sizing:border-box;border-radius:10px;transition:background .2s linear;cursor:default;position:relative; }
.article .body .proc .l>div:hover{ background:#ffffff; }
.article .body .proc .l>div>div{ flex:0 0 auto;box-sizing:border-box; }
.article .body .proc .l>div>:first-child{ flex:1 1 auto;padding-right:16px; }
.article .body .proc .l>div>:last-child{ padding:10px 0px; }
.article .body .proc .l .price u{ padding-left:2px;text-decoration:none; }
.article .body .proc .l .price{ padding-right:16px; }
.article .body .proc .l .price .old{ position:relative;color:#666666;display:inline-block;margin-right:6px; }
.article .body .proc .l .price .old:before{ content:"";background:#8902bf;position:absolute;width:100%;height:1px;border-radius:2px;transform:rotate(-16deg);top:10px;left:-3px; }
.article .body .proc .l>div>:first-child>div{ font-size:14px;font-family:Mm;margin-top:2px; }
.article .body .proc .l .promo::before{ content:"PROMO";font-family:Msb;position:absolute;color:#8902bf;font-size:12px;top:8px;left:12px; }
.article .body .faq .l>div{ width:75%;background:#f5f5f5;border:solid 1px #f1f1f1;margin-bottom:10px;border-radius:10px;position:relative;transition:all .2s linear; }
.article .body .faq .l>div:before{ content:"\203A";font-family:CustomIcons;color:#666666;position:absolute;font-size:21px;transform:rotate(90deg);border-radius:100px;border:solid 1px #666666;width:30px;height:30px;box-sizing:border-box;padding:2px 0px 0px 4px;top:24px;right:12px;cursor:pointer;transition:all .2s linear; }
.article .body .faq .l .q{ background:#f5f5f5;font-family:Mm;font-size:18px;padding:30px 50px 30px 30px;cursor:pointer;border-radius:10px; }
.article .body .faq .l .a{ overflow:hidden;max-height:0px;opacity:0;padding:0px 50px 0px 30px;line-height:24px;transition:all .3s ease-out;color:#333333; }
.article .body .faq .l .show{ background:#ffffff; }
.article .body .faq .l .show .a{ max-height:130px;opacity:1;padding-bottom:20px;padding-top:20px; }
.article .body .faq .l .show,.article .body .faq .l>div:hover{ color:#8902bf;border-color:#c7b1cf; }
.article .body .faq .l>div:hover::before{ color:#8902bf;border-color:#8902bf; }
.article .body .faq .l .show::before{ transform:rotate(270deg); }
.article .body .faq h2,.article .body .proc h2{ padding-top:40px; }
.article .body .tbl{ max-width:calc(100vw - 60px);overflow-x:auto; }

.article .subh>div{ flex:0 0 70%;position:sticky;top:90px;box-shadow:0 10px 20px -10px rgba(0,0,0,.2);overflow:hidden;border-radius:16px; }
.article .subh .t{ background:#f5f5f5;padding:16px 20px;font-family:Mm;margin-bottom:2px; }
.article .subh .l{ background:#f5f5f5;padding:16px 20px 6px 20px; }
.article .subh .l ol{ padding-left:20px; }
.article .subh .l ol li{ padding-bottom:10px; }
.article .subh .l ol li a{ color:#333333;line-height:24px; }
.article .subh .l ol li a:hover{ color:#5c135e; }
.article .subh .sel{ font-family:Mm; }

@media screen and (max-width:1600px) {
    .article{ padding-left:60px; }
    .article .body .proc .l>div,.article .body .faq .l>div{ width:100%; }
}
@media screen and (max-width:1300px) {
    .article .subh{ justify-content:end; }
    .article .subh>div{ flex:0 0 90%;border-top-right-radius:0px;border-bottom-right-radius:0px; }
}
@media screen and (max-width:1000px) {
    .article .body .proc .l .price .old{ display:block;margin-bottom:3px;width:fit-content; }
    .article{ padding-top:10px; }
}
@media screen and (max-width:850px) {
    .article .subh{ display:none; }
    .article .body{ flex: 0 0 100%; }
    .article{ padding-right:60px; }
}
@media screen and (max-width:700px) {
    .article .body .proc .l>div{ flex-wrap:wrap; }
    .article .body .proc .l>div>div{ flex:0 0 35%; }
    .article .body .proc .l>div>:first-child{ padding-bottom:10px; }
    .article .body .proc .l>div>:last-child{ text-align:right;flex:0 0 65%; }
    .article .body .proc .l>div{ padding:20px; }
    .article .body .proc .l .promo::before{ top:-8px;left:auto; }
}
@media screen and (max-width:600px) {
    .article .body .faq .l .q{ font-size:16px;padding:20px 40px 20px 20px; }
    .article .body .faq .l .a{ padding:0px 30px 0px 20px; }
    .article .body .faq .l .show .a{ padding-bottom:10px;padding-top:10px; }
    .article .body .faq .l>div:before{ font-size:19px;width:26px;height:26px;padding:1px 0px 0px 3px;top:16px;right:10px; }
    .article .body .proc .l>div{ padding:15px 10px 10px 20px;font-size:16px; }
    .article .body .proc .l>div>:first-child{ font-family:Mm; }
    .article .body .h{ font-size:14px; }
    .article .body .h .view{ padding-left:42px; }
    .article .body .h .date{ padding-left:25px; }
    .article .body .h .date::before{ font-size:20px;margin-left:-25px; }
    .article .body .h .view::before{ font-size:14px;margin-left:-28px;margin-top:1px; }
    .article .body .h .share .m::before{ margin:-2px 0px 0px -26px;font-size:20px; }

}
@media screen and (max-width:500px) {
    .article .body .h .date u{ display:none; }
    .article .body .h .date i{ display:inline-block; }
}
@media screen and (max-width:440px) {
    .article{ padding-left:30px;padding-right:30px; }
    .article .body .text p,.article .body .text ul,.article .body .text ol,.article .body .text li,.article .body .text table{ font-size:15px;line-height:25px; }
    .article .body .text ul{ margin-left:25px; }
    .article .body .text ul>li:before{ margin-left:-25px; }
    .article .body .faq .l .q,.article .body .faq .l .a{ font-size:15px; }
    .article .body .faq .l .q{ padding:12px 35px 12px 16px; }
    .article .body .faq .l>div:before{ top:9px; }
    .article .body h2,.articles h2{ font-size:24px; }
    .article .body .proc .l>div{ padding:12px 10px 10px 16px;font-size:15px; }
    .article .body .proc .l>div>:first-child>div{ font-size:12px; }
    .article .body .text img{ border-radius:12px; }
}
@media screen and (max-width:360px) {
    .article .body .makeApp u{ display:none; }
    .article .body .makeApp i{ display:inline-block; }
}