.bg-col-button {
background-color: var(--color_button);
}
.bg-primary {
background-color: var(--color_button)!important;
}
.accordion.accordion-more-info a.bg-col-button {
color: var(--putih);
background-color: var(--color_button) !important;
font-weight: bolder;
}
.accordion.accordion-more-info a.bg-col-button:hover{
color: var(--putih)!important;
}
.btn-primary {
color: var(--putih);
background-color: var(--color_button);
border-color: var(--color_button);
}
.btn-primary:hover {
color: var(--putih);
background-color: var(--color_button_hover);
border-color:var(--color_button_hover);
}
.progress-bar.bg-primary {
background-color: var(--color_button) !important;
}
p.copyright {
color: #212529;
}
p.copyright a {
color: var(--color_link_footers) !important;
}
.bg-header {
background-color: var(--color_background_hd);
}
.editor-container-baru {
display: flex;
overflow-x: scroll;
scrollbar-gutter: always;
-webkit-overflow-scrolling: touch;
-ms-scroll-snap-points-x: repeat(350px);
scroll-snap-points-x: repeat(350px);
-ms-scroll-snap-type: mandatory;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: mandatory;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-type: x mandatory;
}
@media (max-width:576px) {
.editor-container-baru {
margin: 0 -15px;
padding-left: 15px;
scroll-padding: 15px;
}
}
.editor-item-baru {
margin-right: 1rem;
scroll-snap-align: start;
}
.app-preview-baru,.editor-item-baru a {
width: var(--editor-img-width);
}
.app-preview-baru {
padding-top: 1rem;
}
.app-preview-baru-link {
display: flex;
justify-content: space-between;
}
.app-preview-baru img {
border-radius: 6px;
max-width: var(--editor-img-width);
height: var(--editor-img-height);
}
.app-preview-baru p {
margin: .5rem 0;
font-size: 12px;
font-weight: 350;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-container-baru {
display: grid;
grid-template-rows: 64px;
grid-template-columns: 64px auto 72px;
gap: .5rem;
}
.app-logo-baru {
border-radius: 14px;
}
.app-title-baru {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
white-space: normal;
color: var(--color_link);
margin-bottom: 4px;
}
.app-info-baru {
align-self: center;
}
.app-desc-baru {
font-size: 12px;
}
.app-get-baru {
align-self: center;
text-align: center;
display: flex;
flex-direction: column;
}
.app-get-baru .get-button-baru {
width: 75px;
background: var(--color_rgb);
color: var(--color_link);
font-size: 12px;
font-weight: 700;
border-radius: 10px;
padding: 3px 0;
margin-bottom: 6px;
}
.app-container-baru:hover .app-get-baru .get-button-baru {
background: var(--color_button);
color: var(--putih);
}
.app-get-baru .app-version-baru {
font-size: 10px;
line-height: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.app-get-baru .app-version-baru svg {
vertical-align: -.125em;
}
.cate-title-baru {
color: var(--color_text);
font-size: 1.3em;
line-height: 28px;
padding-top: .5rem;
margin: 1rem 0 .5rem;
}
.cate-title {
color: var(--color_heading);
font-size: 1.3em;
line-height: 28px;
padding-top: .5rem;
margin: 1rem 0 .5rem;
}
.clamp-1-baru,.clamp-2-baru {
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
white-space: normal;
}
.clamp-2-baru {
-webkit-line-clamp: 2;
}
.app-container {
display: grid;
grid-template-rows: 64px;
grid-template-columns: 64px auto 72px;
gap: .5rem;
}
.app-logo {
border-radius: 14px;
}
.app-title {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px!important;
font-weight: 600;
line-height: 1.4;
white-space: normal;
color: var(--color_link);
margin-bottom: 4px;
}
a.aside-cat span{
color: var(--color_link)!important;
}
.app-info {
align-self: center;
}
.app-desc {
font-size: 12px;
}
.app-get {
align-self: center;
text-align: center;
display: flex;
flex-direction: column;
}
.app-get .get-button {
width: 72px;
background: var(--color_rgb);
color: var(--color_link);
font-size: 12px;
font-weight: 700;
border-radius: 10px;
padding: 3px 0;
margin-bottom: 6px;
}
.app-container:hover .app-get .get-button {
background: var(--color_button);
color: var(--putih);
}
.app-get .app-version {
font-size: 10px;
line-height: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.app-get .app-version svg {
vertical-align: -.125em;
}
.clamp-1,.clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
white-space: normal;
}
.clamp-2 {
-webkit-line-clamp: 2;
}
footer {
font-size: 97%;
line-height: 1.8em;
padding: 30px 0;
border-top: 0px solid #e6e6e6;
color: #08102b;
background: var(--color_background_ft);
}
footer .LinkList a, footer .sL li >* {
display: inline-block;
color: inherit;
line-height: 20px;
}
footer .LinkList a:hover {
text-decoration: underline;
}
a:hover {
text-decoration: unset;
color: var(--color_link)!important;
}
ul.mnMn li a.nav-link{
color: var(--color_header_link);
}
ul.mnMn li.actived a.nav-link{
color: var(--color_logo_header);
}
footer .LinkList ul:not(.sL) li::before {
content: '\2014';
opacity: .5;
padding-right: 5px;
color: var(--color_link_footers);
}
footer .sL {
display: flex;
flex-wrap: wrap;
align-items: baseline;
font-size: 13px;
opacity: .8;
}
footer .sL li {
display: inline-flex;
align-items: baseline;
}
footer .sL li:not(:first-child)::before {
content: '/';
margin: 0 5px;
}
footer .sL li >*::before {
content: attr(data-text);
}
.fotIn ul {
list-style: none;
margin: 0;
padding: 0;
}
.fotIn {
display: flex;
flex-wrap: wrap;
position: relative;
width: calc(100% + 30px);
left: -15px;
right: -15px;
}
.fotIn >* {
width: calc(21.666% - 30px);
margin: 0 15px;
}
.fotIn >*:first-child {
width: calc(35% - 30px);
}
.fotIn .widget {
margin-bottom: 30px;
}
.fotIn .widget .title {
color: inherit;
margin-bottom: 12px;
font-weight: 700;
font-size: 14px;
}
.abtU {
max-width: calc(100% - 25px);
}
.abtU::before {
content: attr(data-text);
font-size: 13px;
opacity: .6;
display: block;
margin-bottom: 3px;
}
.abtT .tl {
color: inherit;
font-size: 1.3rem;
}
.abtD {
line-height: 1.6em;
margin: 20px 0 0;
}
.cdtIn {
display: flex;
align-items: baseline;
justify-content: space-between;
position: relative;
width: calc(100% + 20px);
left: -10px;
right: -10px;
}
.cdtIn >* {
margin: 0 10px;
}
.cdtIn .HTML {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fotCd {
display: inline-flex;
}
.fotCd .creator {
opacity: 0;
}
.tTop svg {
width: 20px;
height: 20px;
stroke: var(--color_text);
}
.toTop {
display: flex;
align-items: center;
white-space: nowrap;
}
.toTop::before {
content: attr(data-text);
opacity: .7;
margin: 0 5px;
}
.toTopF {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--color_text);
position: fixed;
bottom: 20px;
right: 20px;
}
.toTopF svg {
stroke: var(--color_text);
stroke-width: 2;
}
.blogCont {
flex-grow: 1;
padding: 20px 0 0;
position: relative;
transition: all .1s ease;
}
.blogCont .section:not(.no-items), .blogCont .widget:not(:first-child) {
margin-top: 40px;
}
.blogCont .section:first-child, .blogCont footer .widget:not(:first-child) {
margin-top: 0;
}
.secIn {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
max-width: 1200px;
}
div.headIn.secIn {
margin: 0 auto;
padding-left: unset!important;
padding-right: unset!important;
max-width: 1200px;
}
.ntfC .secIn {
width: 100%;
position: relative;
}
@media screen and (max-width:896px) {
.headIn, .navI .secIn {
padding: 0;
}
}
@media screen and (max-width:640px) {
.fotIn >*, .fotIn >*:first-child {
width: calc(50% - 30px);
}
}
@media screen and (max-width:500px) {
.fotIn >*, .fotIn >*:first-child {
width: calc(100% - 30px);
}
}
.navI {
background-color: var(--navB);
overflow-y: hidden;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
display: flex;
padding: 0;
}
.navI ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.navI li {
margin: 0 15px;
padding: 10px 0;
position: relative;
scroll-snap-align: start;
}
.navI li:first-child {
margin-left: auto;
}
.navI li:last-child {
margin-right: auto;
}
.navI .l {
display: block;
color: inherit;
padding: 8px 0;
}
.navI .l::before {
content: attr(data-text);
}
.navI .l::after {
content: '';
height: 1px;
border-radius: 2px 2px 0 0;
background: var(--color_text);
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
.navI span.l {
opacity: .7;
}
.navI a.l:hover, .navI .l.a {
color: var(--color_text);
}
.ntfC {
display: flex;
align-items: center;
position: relative;
min-height: 60px;
background: var(--color_border1);
color: var(--color_text);
padding: 10px 15px;
font-size: 13px;
transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
overflow: hidden;
margin-bottom: 20px;
}
.ntfC::before {
content: '';
width: 60px;
height: 60px;
background: rgba(0,0,0,.15);
display: block;
border-radius: 50%;
position: absolute;
top: -12px;
left: -12px;
opacity: .1;
}
.Rtl .ntfC::before {
left: unset;
right: -12px;
}
.ntfC .secIn {
width: 100%;
position: relative;
}
.ntfC .c {
display: flex;
align-items: center;
}
.ntfT {
width: 100%;
padding-right: 15px;
text-align: center;
}
.ntfT a {
color: #482dff;
font-weight: 700;
}
.ntfI:checked ~ .ntfC {
height: 0;
min-height: 0;
margin: 0;
padding: 0;
opacity: 0;
visibility: hidden;
}
.ntfA {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: initial;
}
.ntfA >a {
flex-shrink: 0;
white-space: nowrap;
display: inline-block;
margin-left: 10px;
padding: 8px 12px;
border-radius: 50px;
background: #fffdfc;
color: var(--color_text);
font-size: 12px;
font-weight: 400;
box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
text-decoration: none;
}
.drK .ntfA >a {
background: #41B375;
color: #fffdfc;
}
.widget .title::after, h2.h5::after, h3.h5.title::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 30px;
margin: 0 10px;
border-bottom: 1px solid var(--color_border);
opacity: .5;
}
h2#download_url_links.h5::after {
border-bottom: unset!important;
}
::selection {
color: var(--putih);
background: #204ecf;
}
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 700!important;
font-family: var(--fonts);
color: var(--color_heading);
}
a {
color: var(--color_link);
text-decoration: none;
}
a:hover {
opacity: .9;
transition: opacity .1s;
}
table {
border-spacing: 0;
}
iframe {
max-width: 100%;
border: 0;
margin-left: auto;
margin-right: auto;
}
input, button, select, textarea {
font: inherit;
font-size: 100%;
color: inherit;
line-height: normal;
}
input::placeholder {
color: rgba(0,0,0,.5);
}
img {
display: block;
position: relative;
max-width: 100%;
height: auto;
}
svg {
}
svg.line, svg .line {
fill: none!important;
stroke: var(--color_svg);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1;
}
svg.c-1 {
fill: #08102b;
}
svg.c-2 {
fill: #767676;
opacity: .4;
}
.hidden {
display: none;
}
.invisible {
visibility: hidden;
}
.clear {
width: 100%;
display: block;
margin: 0;
padding: 0;
float: none;
clear: both;
}
.fCls {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transition: all .1s ease;
background: transparent;
opacity: 0;
visibility: hidden;
height: 100%;
}
.free::after, .new::after {
display: inline-block;
content: 'Free!';
color: var(--color_link);
font-size: 12px;
font-weight: 400;
margin: 0 5px;
}
.new::after {
content: 'New!';
}
.fixL {
display: flex;
align-items: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin-bottom: -100%;
z-index: 20;
transition: all .1s ease;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.fixLi, .fixL .cmBri {
width: 100%;
max-width: 680px;
max-height: calc(100% - 60px);
border-radius: 12px;
transition: inherit;
z-index: 3;
display: flex;
overflow: hidden;
position: relative;
margin: 0 auto;
box-shadow: 0 5px 30px 0 rgba(0,0,0,.05);
}
.fixLs {
padding: 60px 20px 20px;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
background: #fffdfc;
}
.fixH, .mnH, .srhB .BlogSearch {
display: flex;
background: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0 10px;
z-index: 2;
}
.fixH .cl, .srhB .c {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
flex-shrink: 0;
min-width: 40px;
}
.fixH .c::after, .ntfC .c::after, .mnH .c::before, .srhB .c::after {
content: '\2715';
line-height: 18px;
font-size: 14px;
color: var(--color_svg);
}
.fixT::before {
content: attr(data-text);
flex-grow: 1;
padding: 16px 10px;
font-size: 90%;
opacity: .7;
}
.fixT .c::before, .mnH .c::after {
content: attr(aria-label);
font-size: 11px;
margin: 0 8px;
opacity: .6;
}
.fixi:checked ~ .fixL, #comment:target .fixL {
margin-bottom: 0;
opacity: 1;
visibility: visible;
}
.fixi:checked ~ .fixL .fCls, #comment:target .fixL .fCls {
opacity: 1;
visibility: visible;
background: rgba(0,0,0,.2);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
}
.shBri, .tmBr {
max-width: 520px;
}
.fnBr {
max-width: 480px;
}
.bIc {
display: flex;
align-items: center;
}
header {
width: 100%;
z-index: 10;
position: -webkit-sticky;
position: sticky;
top: 0;
}
header a {
color: inherit;
}
header svg {
width: 20px;
height: 20px;
fill: var(--color_svg);
opacity: .8;
}
header svg.line {
fill: none;
stroke: var(--color_svg);
}
.headCn {
position: relative;
height: 72px;
color: #08102b;
background: #fffdfc;
}
.headIn {
display: flex;
justify-content: space-between;
height: 100%;
}
.headL {
display: flex;
align-items: center;
min-width: 200px;
max-width: 300px;
;
}
.headL .headIc {
flex: 0 0 35px;
padding-right: 5px;
}
.headI .headP {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
height: 100%;
}
.headI {
height: 100%;
position: relative;
width: calc(100% + 15px);
left: -7.5px;
right: -7.5px;
}
.headI >* {
margin: 0 7.5px;
}
.headIc {
font-size: 11px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.headIc >* {
position: relative;
}
.headIc svg {
z-index: 1;
}
ul.headIc {
position: relative;
width: calc(100% + 14px);
left: -7px;
right: -7px;
justify-content: flex-end;
}
ul.headIc li {
margin: 0 2px;
}
.Header {
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.Header img {
max-width: 160px;
max-height: 45px;
}
@media screen and (max-width:640px) {
.Header .headH {
}
}
.Header .headH {
display: block;
color: var(--color_logo_header);
font-size: 23px;
font-weight: 700;
}
.Header .headH.hasSub {
display: flex;
align-items: baseline;
}
.Header .headTtl {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.Header .headSub {
margin: 0 5px;
font: 700 15px var(--fonts);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 60px;
opacity: .6;
}
.Header .headSub::before {
content: attr(data-text);
color: var(--color_header_link);
}
@media screen and (max-width:500px) {
.Header .headH.hasSub, .headInnr {
display: flex;
justify-content: center;
align-items: center;
width: 275px;
}
}
.tIc {
width: 30px;
height: 30px;
justify-content: center;
}
.tIc::after {
content: '';
background: var(--color_rgb3);
border-radius: 5px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all .1s ease;
opacity: 0;
visibility: hidden;
}
.tIc:hover::after {
opacity: 1;
visibility: visible;
transform: scale(1.3,1.3);
}
.tDL .d2, .drK .tDL .d1, .grD .tGr .s3 {
display: none;
}
.navI {
background-color: #fffdfc;
overflow-y: hidden;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
display: flex;
padding: 0;
}
.navI ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.navI li {
margin: 0 15px;
padding: 10px 0;
position: relative;
scroll-snap-align: start;
}
.navI li:first-child {
margin-left: auto;
}
.navI li:last-child {
margin-right: auto;
}
.navI .l {
display: block;
color: inherit;
padding: 8px 0;
}
.navI .l::before {
content: attr(data-text);
}
.navI .l::after {
content: '';
height: 1px;
border-radius: 2px 2px 0 0;
background: var(--color_link);
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
.navI span.l {
opacity: .7;
}
.navI a.l:hover, .navI .l.a {
color: var(--color_link);
}
.mnBr ul {
list-style: none;
margin: 0;
padding: 0;
}
.mnMn svg {
flex-shrink: 0;
}
.mnMn svg.d {
width: 14px;
height: 14px;
}
.actived {
content: '';
border-bottom: 1px solid var(--color_border);
}
.blogCont {
flex-grow: 1;
padding: 20px 0 0;
position: relative;
transition: all .1s ease;
}
.blogCont .section:not(.no-items), .blogCont .widget:not(:first-child) {
margin-top: 40px;
}
.blogCont .section:first-child, .blogCont footer .widget:not(:first-child) {
margin-top: 0;
}
.blogAd .section:not(.no-items) {
margin-bottom: 40px;
}
.blogM {
flex-wrap: wrap;
justify-content: center;
padding-bottom: 40px;
}
.sidebar {
max-width: 500px;
margin: 50px auto 0;
}
.sideSticky {
position: -webkit-sticky;
position: sticky;
top: calc(72px + 10px);
}
.onPs .mainbar, .onHm .mainbar {
max-width: 780px;
}
.onPg .mainbar, .onMl:not(.grD) .mainbar {
max-width: 780px;
}
.onMl.grD .mainbar {
max-width: 100%;
}
.widget .imgThm {
display: block;
position: absolute;
top: 50%;
left: 50%;
max-width: none;
max-height: 108%;
font-size: 12px;
text-align: center;
transform: translate(-50%, -50%);
}
.widget .title {
margin: 0 0 25px;
font-size: 15px;
font-weight: 400;
position: relative;
}
.widget .title::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 25px;
margin: 0 10px;
border-bottom: 1px solid var(--color_border);
opacity: .5;
}
.widget input[type=text], .widget input[type=email], .widget textarea {
display: block;
width: 100%;
outline: 0;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.25);
border-radius: 4px 4px 0 0;
background: #f3f3f4;
padding: 25px 16px 8px 16px;
line-height: 1.6em;
transition: all .1s ease;
}
.widget input[type=text]:hover, .widget input[type=email]:hover, .widget textarea:hover {
border-color: rgba(0,0,0,.42);
background: #ececec;
}
.widget input[type=text]:focus, .widget input[type=email]:focus, .widget textarea:focus, .widget input[data-text=fl], .widget textarea[data-text=fl] {
border-color: #204ecf;
background: #ececec;
}
.widget input[type=button], .widget input[type=submit] {
display: inline-flex;
align-items: center;
padding: 12px 30px;
outline: 0;
border: 0;
border-radius: 4px;
color: #fffdfc;
background: #204ecf;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.widget input[type=button]:hover, .widget input[type=submit]:hover {
opacity: .7;
}
.srhB .c {
border-left: 1px solid #e6e6e6;
padding: 0 20px;
}
.srhB .BlogSearch {
padding: 0;
}
.srhB .BlogSearch:last-child {
border: 0;
}
.srhB .Label {
padding: 20px 0;
}
.srhBs {
padding-bottom: 0;
}
.BlogSearch {
border-bottom: 1px solid #e6e6e6;
}
.BlogSearch form {
position: relative;
flex-grow: 1;
}
.BlogSearch input {
position: relative;
display: block;
background: #fffdfc;
border: 0;
outline: 0;
padding: 10px 55px;
width: 100%;
height: 60px;
transition: all .1s ease;
z-index: 2;
}
.BlogSearch input[type=search]::-ms-clear,.BlogSearch input[type=search]::-ms-reveal {
display: none;
appearance: none;
width: 0;
height: 0;
}
.BlogSearch input[type=search]::-webkit-search-decoration, .BlogSearch input[type=search]::-webkit-search-cancel-button, .BlogSearch input[type=search]::-webkit-search-results-button, .BlogSearch input[type=search]::-webkit-search-results-decoration {
display: none;
-webkit-appearance: none;
appearance: none;
}
.BlogSearch input:focus ~ button.sb {
opacity: .7;
}
.BlogSearch .sb {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
padding: 0 20px;
z-index: 3;
opacity: .7;
height: 100%;
background: transparent;
border: 0;
outline: 0;
}
.BlogSearch .sb svg {
width: 18px;
height: 18px;
stroke: var(--color_svg);
}
.BlogSearch button.sb {
left: auto;
right: 0;
opacity: 0;
font-size: 12px;
padding: 0 15px;
}
.BlogSearch button.sb::before {
content: attr(data-text);
}
.wPrf.sl {
position: relative;
width: calc(100% + 16px);
left: -8px;
right: -8px;
display: flex;
}
.wPrf.sl .sIm {
margin: 0 8px;
flex-shrink: 0;
}
.wPrf.sl .im {
width: 58px;
height: 58px;
border-radius: 26px;
margin: 0 auto;
}
.wPrf.tm {
display: flex;
position: relative;
width: calc(100% + 4px);
left: -2px;
right: -2px;
}
.wPrf.tm .sIm {
padding: 2px;
background: #fffdfc;
position: relative;
border-radius: 50%;
}
.wPrf.tm .sIm:not(:first-child) {
margin-left: -10px;
}
.wPrf.tm .sIm .im, .wPrf.tm .am {
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 50%;
}
.wPrf.tm .sIm::after {
content: attr(data-text);
position: absolute;
bottom: -23px;
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 120px;
background: #696969;
color: #ebeced;
font-size: 12px;
padding: 3px 10px;
border-radius: 3px;
opacity: 0;
visibility: hidden;
}
.wPrf.tm .sIm:hover::after {
opacity: .9;
visibility: visible;
}
.wPrf.tm .mIm {
display: flex;
padding: 2px 0;
}
.wPrf.tm .mIm::before {
content: '';
border-left: 1px solid #e6e6e6;
margin: 5px 10px;
flex-shrink: 0;
}
.wPrf.tm .am {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.05);
}
.wPrf.tm .am::before {
content: attr(data-text);
font-size: 12px;
opacity: .8;
}
.tmC {
display: flex;
}
.prfL {
border-radius: 8px;
padding: 8px;
transition: all .1s ease;
text-align: center;
}
.prfL::after {
content: attr(data-text);
font-size: 13px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100px;
display: block;
}
.prfL .im {
width: 55px;
height: 55px;
border-radius: 50%;
margin: 0 auto 5px;
}
.sInf {
margin: 0 8px;
flex-grow: 1;
}
.sInf .sDt .l {
display: inline-flex;
align-items: center;
color: inherit;
}
.sInf .sTxt {
margin: 5px auto 0;
max-width: 320px;
font-size: 93%;
opacity: .9;
line-height: 1.5em;
}
.sInf .sTxt a {
text-decoration: underline;
}
.sInf .lc {
display: flex;
margin: 10px 0 0;
opacity: .8;
font-size: 90%;
}
.sInf .lc svg {
width: 16px;
height: 16px;
}
.sInf .lc::after {
content: attr(data-text);
margin: 0 4px;
}
.wL ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: calc(100% + 30px);
left: -15px;
right: -15px;
font-size: 13px;
}
.wL li {
width: calc(50% - 10px);
margin: 0 5px;
}
.wL li >* {
display: flex;
align-items: baseline;
justify-content: space-between;
color: inherit;
width: 100%;
padding: 8px 10px;
border-radius: 4px;
line-height: 20px;
}
.wL li >* svg {
width: 18px;
height: 18px;
opacity: .8;
}
.wL li >*:hover svg, .wL li >div svg {
stroke: var(--color_svg);
}
.wL li >*:hover .lbC, .wL li >div .lbC {
color: var(--color_link);
}
.wL .lbR {
display: inline-flex;
align-items: center;
}
.wL .lbR .lbC {
margin: 0 5px;
}
.wL .lbAl {
max-height: 0;
overflow: hidden;
transition: all .4s ease;
}
.wL .lbM {
display: inline-block;
margin-top: 10px;
line-height: 20px;
color: #204ecf;
}
.wL .lbM::before {
content: attr(data-show);
}
.wL .lbM::after, .wL .lbC::after {
content: attr(data-text);
}
.wL .lbM::after {
margin: 0 8px;
}
.wL .lbT {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: .7;
}
.wL .lbC, .wL .lbM::after {
flex-shrink: 0;
font-size: 12px;
opacity: .7;
}
.lbIn:checked ~ .lbAl {
max-height: 1000vh;
}
.lbIn:checked ~ .lbM::before {
content: attr(data-hide);
}
.lbIn:checked ~ .lbM::after {
visibility: hidden;
}
.wL.bg ul {
width: calc(100% + 10px);
left: -5px;
right: -5px;
}
.wL.bg li {
margin-bottom: 10px;
}
.wL.bg li >* {
background: #f6f6f6;
}
.wL.cl {
display: flex;
flex-wrap: wrap;
}
.wL.cl >*, .wL.cl .lbAl >* {
display: block;
max-width: 100%;
}
.wL.cl .lbAl {
display: flex;
flex-wrap: wrap;
}
.wL.cl .lbC::before {
content: '';
margin: 0 4px;
flex: 0 0;
}
.wL.cl .lbN {
display: flex;
justify-content: space-between;
margin: 0 0 8px;
padding: 9px 13px;
border: 1px solid #e6e6e6;
border-radius: 3px;
color: inherit;
line-height: 20px;
}
.wL.cl .lbN:hover .lbC, .wL.cl div.lbN .lbC {
color: var(--color_link);
opacity: 1;
}
.wL.cl .lbN:not(div):hover, .wL.cl div.lbN {
border-color: var(--color_border1);
}
.wL.cl .lbSz {
display: flex;
}
.wL.cl .lbSz::after {
content: '';
margin: 0 4px;
flex: 0 0;
}
@media screen and (min-width:897px) {
.headL .headN {
width: 100%;
}
.headL, .headR {
z-index: 1;
}
.headM .HTML + .PageList, .headL .headIc {
display: none;
}
.headM {
display: flex;
align-items: center;
justify-content: center;
max-width: calc(100% - 350px);
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.mainIn, .blogM {
display: flex;
}
.blogCont {
padding-top: 30px;
padding-bottom: 30px;
}
.mainbar {
flex: 1 0 calc(100% - 300px - 50px);
width: calc(100% - 300px - 50px);
transition: all .2s ease;
}
.sidebar {
display: flex;
flex: 0 0 calc(300px + 50px);
width: calc(300px + 50px);
margin: 0;
}
.sidebar::before {
content: '';
flex: 0 0 50px;
}
.sidebar .sideIn {
width: calc(100% - 50px);
}
.mnH {
display: none;
}
.mnMob, .mnMn svg:not(.d) {
display: none;
}
.mnMn {
display: block;
position: relative;
width: calc(100% + 25px);
left: -12.5px;
right: -12.5px;
}
.mnMn >li {
display: inline-flex;
align-items: center;
margin: 0 12.5px;
position: relative;
white-space: nowrap;
height: 72px;
}
.mnMn >li:hover ul {
max-height: 100vh;
opacity: 1;
visibility: visible;
}
.mnMn >li:last-child ul {
left: auto;
border-radius: 16px 5px 16px 16px;
}
.mnMn ul {
display: block;
position: absolute;
top: calc(72px - 15px);
left: -15px;
right: -15px;
min-width: 180px;
max-height: 0vh;
background: #fffdfc;
box-shadow: 0 10px 20px -10px rgba(0,0,0,.1);
border-radius: 5px 16px 16px 16px;
transition: all .1s ease;
opacity: 0;
visibility: hidden;
z-index: 1;
overflow: hidden;
}
.mnMn ul li >* {
display: block;
padding: 10px 15px;
}
.mnMn ul li >*:hover {
background: var(--color_rgb3);
}
.mnMn .a {
display: inline-flex;
align-items: center;
}
.mnMn .a:hover {
color: var(--color_link);
}
.mnMn .a:hover::after {
opacity: 1;
}
.mnMn .a::after {
content: '';
border-bottom: 1px solid var(--color_border);
position: absolute;
bottom: -1px;
left: 0;
right: 0;
opacity: 0;
}
.mnMn .drp .n::after {
content: '';
padding: 0 3px;
flex: 0 0;
}
}
@media screen and (min-width:768px) {
::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.15);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,.35);
}
::-webkit-scrollbar-thumb:active {
background: rgba(0,0,0,.35);
}
}
@media screen and (max-width:1100px) and (min-width: 897px) {
.mainbar {
flex: 1 0 calc(100% - 300px - 25px);
width: calc(100% - 300px - 25px);
}
.sidebar {
flex: 0 0 calc(300px + 25px);
width: calc(300px + 25px);
}
.sidebar::before {
content: '';
flex: 0 0 25px;
}
.sidebar .sideIn {
width: calc(100% - 25px);
}
}
@media screen and (max-width:896px) {
.mainbar {
margin: 0 auto;
}
.ntfC {
padding-left: 20px;
padding-right: 20px;
}
.headIn, .navI .secIn {
padding: 0;
}
.headL {
padding: 0 0 0 15px;
flex-grow: 1;
width: 50%;
max-width: none;
}
.headR {
padding: 0 20px 0 0;
flex-grow: 0;
}
.headIc .isSrh {
display: block;
}
.headL .headN {
width: calc(100% - 40px);
}
.navI li {
margin: 0;
padding: 8px 0;
display: flex;
}
.navI li::before {
content: '';
padding: 10px;
}
.navI ul::after {
content: '';
display: block;
padding: 10px;
scroll-snap-align: start;
}
.navI .l {
position: relative;
}
.navI .l::after {
bottom: -8px;
}
.navI a.l:hover::after, .navI .l.a::after {
opacity: 1;
}
.headM {
display: flex;
justify-content: flex-start;
position: fixed;
left: 0;
top: 0;
bottom: 0;
margin-left: -100%;
z-index: 20;
transition: all .1s ease;
width: 100%;
height: 100%;
}
.mnBr {
width: 85%;
max-width: 480px;
height: 100%;
border-radius: 0 12px 12px 0;
transition: inherit;
z-index: 3;
overflow: hidden;
position: relative;
box-shadow: 0 5px 30px 0 rgba(0,0,0,.05);
}
.mnBrs {
padding: 60px 0 0;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100%;
background: #fffdfc;
}
.mnH {
padding: 0 15px;
}
.mnH label {
padding: 15px 10px;
}
.mnH .c::after {
margin: 0 13px;
}
.navi:checked ~ .mainWrp .headM {
margin-left: 0;
}
.navi:checked ~ .mainWrp .headM .fCls {
opacity: 1;
visibility: visible;
background: rgba(0,0,0,.2);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
}
.mnMob {
align-self: flex-end;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: inherit;
padding: 15px 20px 20px;
z-index: 1;
}
.mnMob .mSoc {
display: flex;
position: relative;
width: calc(100% + 14px);
left: -7px;
right: -7px;
margin-top: 5px;
}
.mnMob:not(.no-items) + .mnMen {
padding-bottom: 100px;
}
.mnBr .mMenu {
margin-bottom: 5px;
}
.mnMen {
padding: 0 15px 20px;
}
.mMenu >* {
display: inline;
}
.mMenu >*:not(:last-child)::after {
content: '\00B7';
font-size: 90%;
opacity: .6;
}
.mMenu a:hover {
text-decoration: underline;
}
.mSoc >* {
position: relative;
}
.mSoc svg {
z-index: 1;
}
.mSoc svg, .mnMn svg {
width: 20px;
height: 20px;
opacity: .8;
}
.mSoc span, .mMenu span {
opacity: .7;
}
.mnMn >li {
position: relative;
}
.mnMn >li.br::after {
content: '';
display: block;
border-bottom: 1px solid var(--color_border1);
margin: 12px 5px;
}
.mnMn li:not(.mr) .a:hover, .mnMn ul li >*:hover {
background: var(--color_border1);
}
.mnMn li:not(.mr) .a:hover, .mnMn ul li a:hover {
color: var(--color_link);
}
.mnMn li:not(.mr) ul {
padding-left: 30px;
}
.mnMn li ul {
display: none;
opacity: 0;
visibility: hidden;
}
.mnMn ul li >*, .mnMn .a {
display: flex;
align-items: center;
padding: 10px 5px;
position: relative;
width: calc(100% + 10px);
left: -5px;
right: -5px;
border-radius: 8px;
transition: all .1s ease;
}
.mnMn ul li >* {
padding: 10px;
}
.mnMn .a >* {
margin: 0 5px;
}
.mnMn .a:hover svg:not(.d) {
fill: var(--color_svg);
}
.mnMn .a:hover svg.line:not(.d) {
fill: none;
stroke: var(--color_svg);
}
.actived {
content: '';
border-bottom: unset!important;
}
.mnMn .n, .mnMn ul li >* {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 0 calc(100% - 64px);
}
.mnMn .drp.mr .a {
font-size: 13px;
padding-bottom: 0;
opacity: .7;
}
.mnMn .drp.mr svg.d {
display: none;
}
.mnMn .drpI:checked ~ .a svg.d {
transform: rotate(180deg);
}
.mnMn .drpI:checked ~ ul {
display: block;
opacity: 1;
visibility: visible;
}
.pTtl {
font-size: 1.1rem;
}
}
@media screen and (max-width:640px) {
.headCn {
height: 60px;
}
.fixL {
align-items: flex-end;
}
.fixL .fixLi, .fixL .cmBri {
border-radius: 12px 12px 0 0;
max-width: 680px;
}
.fixL .cmBri:not(.mty) {
border-radius: 0;
height: 100%;
max-height: 100%;
}
.onId:not(.grD) .ntry, .itemFt .itm {
align-items: flex-start;
}
.onId:not(.grD) .ntry >*, .itemFt .itm >* {
flex: 0 0 calc(40% - 22px);
width: calc(40% - 22px);
}
.onId .ntry .pInf, .itemFt .itm .pInf {
margin-top: 10px;
}
.ntry .iFxd .spnr {
display: none;
}
.ntry .iFxd {
padding: 8px 3px;
}
.ntry .iFxd .cmnt {
padding: 3px;
}
.ntry .iFxd >* svg {
padding: 1px;
}
.fotIn >*, .fotIn >*:first-child {
width: calc(50% - 30px);
}
}
@media screen and (max-width:500px) {
.iFxd, .crdtIn, .pInf.ps .pDr {
font-size: 12px;
}
.brdCmb, .navI {
font-size: 13px;
}
.pDesc {
font-size: 14px;
}
.pEnt {
font-size: 15px;
}
.pTtl.itm {
font-size: 28px;
}
.pShc a::after {
display: none;
}
.onId:not(.grD) .ntry {
width: calc(100% + 15px);
left: -7.5px;
right: -7.5px;
flex-direction: row-reverse;
}
.onId:not(.grD) .ntry >* {
flex: 0 0 calc(40% - 7.5px);
width: calc(40% - 7.5px);
margin-left: 7.5px;
margin-right: 7.5px;
}
.onId:not(.grD) .ntry .pThmb {
flex: 0 0 100px;
}
.onId:not(.grD) .ntry .thmb {
padding-top: 100%;
}
.onId .ntry .pTtl {
font-size: 1rem;
}
.onId .ntry .pInf {
margin-top: 12px;
}
.ntry .pSnpt {
font-size: 13px;
}
.ntry .pSml {
font-size: 12px;
}
.pInf.ps .pTtmp::after {
content: attr(data-time);
}
.grD.oGrd .ntry {
width: calc(100% - 15px);
padding-bottom: 0;
}
.grD.oGrd .ntry .pInf {
position: relative;
margin-top: 15px;
}
.grD.oGrd .ntry .pSnpt {
font-size: 14px;
}
.grD.oGrd .ntry .pSml {
font-size: 93%;
}
.grD.oGrd .ntry .pTtl {
font-size: 1.1rem;
}
.grD.oGrd .ntry .iFxd .spnr {
display: flex;
}
.grD.oGrd .ntry .iFxd {
padding: 10px 6px;
}
.grD.oGrd .ntry .iFxd .cmnt {
padding: 5px;
}
.grD.oGrd .ntry .iFxd >* svg {
padding: 0;
}
.itemFt .itm .iThmb {
flex: 0 0 calc(100% - 25px);
margin-bottom: 20px;
}
.itemFt .itm .iCtnt {
padding-bottom: 30px;
border-bottom: 1px solid var(--color_border);
}
.itemFt .itm .pInf {
margin-top: 15px;
}
.fotIn >*, .fotIn >*:first-child {
width: calc(100% - 30px);
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
@keyframes fadein {
50% {
opacity: 1;
}
80% {
opacity: 1;
padding-top: 5px;
height: 22px;
}
100% {
opacity: 0;
padding-top: 0;
height: 0;
}
}
@keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
@keyframes tonext {
75% {
left: 0;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0;
}
}
@keyframes tostart {
75% {
left: 0;
}
95% {
left: -300%;
}
98% {
left: -300%;
}
99% {
left: 0;
}
}
@keyframes tonext-rev {
75% {
right: 0;
}
95% {
right: 100%;
}
98% {
right: 100%;
}
99% {
right: 0;
}
}
@keyframes tostart-rev {
75% {
right: 0;
}
95% {
right: -300%;
}
98% {
right: -300%;
}
99% {
right: 0;
}
}
@keyframes snap {
96% {
scroll-snap-align: center;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: center;
}
}
@-webkit-keyframes fadein {
50% {
opacity: 1;
}
80% {
opacity: 1;
padding-top: 5px;
height: 22px;
}
100% {
opacity: 0;
padding-top: 0;
height: 0;
}
}
@-webkit-keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes tonext {
75% {
left: 0;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0;
}
}
@-webkit-keyframes tostart {
75% {
left: 0;
}
95% {
left: -300%;
}
98% {
left: -300%;
}
99% {
left: 0;
}
}
@-webkit-keyframes tonext-rev {
75% {
right: 0;
}
95% {
right: 100%;
}
98% {
right: 100%;
}
99% {
right: 0;
}
}
@-webkit-keyframes tostart-rev {
75% {
right: 0;
}
95% {
right: -300%;
}
98% {
right: -300%;
}
99% {
right: 0;
}
}
@-webkit-keyframes snap {
96% {
scroll-snap-align: center;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: center;
}
}
.admPs {
display: flex;
max-width: 480px;
margin: 30px 0;
padding: 12px 12px 15px;
background: #fffdfc;
border-radius: 8px;
box-shadow: 0 10px 25px -3px rgba(0,0,0,.1);
}
.admIm {
flex-shrink: 0;
padding: 5px 0 0;
}
.admIm .im {
width: 34px;
height: 34px;
}
.admI {
flex-grow: 1;
width: calc(100% - 34px);
padding: 0 12px;
}
.admN::before {
content: attr(data-write) ' ';
opacity: .7;
font-size: 90%;
}
.admN::after {
content: attr(data-text);
}
.admA {
margin: 5px 0 0;
font-size: 90%;
opacity: .9;
line-height: 1.5em;
}
.pSh {
margin: 15px 0;
padding: 18px 0;
border: 1px solid rgba(0,0,0,.05);
border-left: 0;
border-right: 0;
}
.pShc {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
width: calc(100% + 18px);
left: -9px;
right: -9px;
font-size: 13px;
opacity: .8;
}
.pShc::before {
content: attr(data-text);
margin: 0 9px;
flex-shrink: 0;
}
.pShc >* {
margin: 0 5px;
display: flex;
align-items: center;
color: inherit;
}
.pShc a::after {
content: attr(data-text);
margin: 0 3px;
}
.pShc svg, .cpL svg {
width: 18px;
height: 18px;
margin: 0 3px;
}
.shL {
position: relative;
width: calc(100% + 20px);
left: -10px;
right: -10px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.shL >* {
margin: 0 10px 20px;
text-align: center;
}
.shL >*::after {
content: attr(data-text);
font-size: 90%;
opacity: .7;
display: block;
}
.shL a {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 65px;
height: 65px;
color: inherit;
margin: 0 auto 5px;
padding: 8px;
border-radius: 26px;
background: #f1f1f0;
}
.shL svg {
opacity: .8;
}
.cpL {
padding-bottom: 15px;
}
.cpL::before {
content: attr(data-text);
display: block;
margin: 0 0 15px;
opacity: .8;
}
.cpL svg {
margin: 0 4px;
opacity: .7;
}
.cpL input {
border: 0;
outline: 0;
background: transparent;
color: rgba(8,16,43,.4);
padding: 18px 8px;
flex-grow: 1;
}
.cpL label {
color: var(--color_link);
display: flex;
align-items: center;
align-self: stretch;
flex-shrink: 0;
padding: 0 8px;
}
.cpLb {
display: flex;
align-items: center;
position: relative;
background: #f1f1f0;
border-radius: 4px 4px 0 0;
border-bottom: 1px solid rgba(0,0,0,.25);
padding: 0 8px;
}
.cpLb:hover {
border-color: rgba(0,0,0,.42);
background: #ececec;
}
.cpLn span {
display: block;
padding: 5px 14px 0;
font-size: 90%;
color: #2e7b32;
transition: all .1s ease;
animation: fadein 2s ease forwards;
opacity: 0;
height: 22px;
}
.fnIn:checked ~ .fnB .fCls {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.fnC {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.fnC li {
flex: 0 0 33.33%;
display: flex;
justify-content: center;
align-items: baseline;
padding-bottom: 17px;
position: relative;
}
.fnC li:nth-child(1) label::before {
font-size: 25px;
line-height: 38px;
}
.fnC li:nth-child(1) label::after {
content: 'Small';
}
.fnC li:nth-child(3) label::before {
font-size: 40px;
line-height: 27px;
}
.fnC li:nth-child(3) label::after {
content: 'Large';
}
.fnC label {
display: inline-flex;
flex-direction: column;
align-items: center;
opacity: .6;
}
.fnC label:hover {
opacity: 1;
}
.fnC label::before {
content: 'A';
font-size: 32px;
font-weight: 700;
line-height: 34px;
}
.fnC label::after {
content: 'Default';
font-size: 12px;
position: absolute;
bottom: 0;
}
.fontS1:checked ~ .fnB .fnt1, .fontS2:checked ~ .fnB .fnt2, .fontS3:checked ~ .fnB .fnt3 {
opacity: 1;
}
.fontS1:checked ~ .pInr .pEnt {
font-size: 15px;
}
.fontS3:checked ~ .pInr .pEnt {
font-size: 17px;
}
@media screen and (max-width:500px) {
.fontS1:checked ~ .pInr .pEnt {
font-size: 14px;
}
.fontS3:checked ~ .pInr .pEnt {
font-size: 16px;
}
}
.bMenu {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 25px 15px 20px;
z-index: 2;
background-image: linear-gradient(0deg, rgba(255,255,255,.9) 25%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.35) 75%, rgba(255,255,255,.01) 95%);
}
.bMenu >* {
position: relative;
margin: 0 5px;
border-radius: 10px;
box-shadow: 0 10px 20px -10px rgba(0,0,0,.25);
}
.bMenu >*:not(.bCmt) {
width: 42px;
height: 42px;
justify-content: center;
background: #fffdfc;
}
.bMenu .bCmt {
justify-content: center;
padding: 0 10px;
height: 42px;
flex-grow: 1;
background: #204ecf;
color: #fffdfc;
}
@media screen and (min-width:501px) {
.bMenu {
display: none;
}
}
.pCmnts {
}
.cmDis {
text-align: center;
margin-top: 20px;
opacity: .7;
}
.cmMs {
margin-bottom: 20px;
}
.cm iframe {
width: 100%;
}
.cm:not(.cmBr) .cmBrs {
background: transparent;
position: relative;
padding: 60px 20px 0;
width: calc(100% + 40px);
left: -20px;
right: -20px;
}
.cmH h3.title {
margin: 0;
flex-grow: 1;
padding: 16px 10px;
}
.cmH .s {
margin: 0 14px;
}
.cmH .s::before {
content: attr(data-text);
margin: 0 6px;
opacity: .7;
font-size: 90%;
}
.cmH .s::after {
content: '\296E';
line-height: 18px;
font-size: 17px;
}
.cmAv {
flex-shrink: 0;
padding: 0 6px;
width: 47px;
}
.cmAv .im {
width: 35px;
height: 35px;
border-radius: 50%;
position: relative;
}
.cmIn {
flex-grow: 1;
padding: 0 6px;
width: calc(100% - 47px);
position: relative;
}
.cmBd.del .cmCo {
font-style: italic;
font-size: 90%;
line-height: normal;
border: 1px dashed rgba(0,0,0,.2);
border-radius: 3px;
margin: .5em 0;
padding: 15px;
opacity: .7;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cmHr {
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cmHr .d {
font-size: 90%;
opacity: .7;
}
.cmHr .d::before {
content: '\00B7';
margin: 0 4px;
}
.cmHr.a .n {
display: inline-flex;
align-items: center;
}
.cmHr.a .n::after {
content: '\2714';
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
font-size: 8px;
background: #519bd6;
color: #fefefe;
border-radius: 50%;
margin-left: 3px;
}
.cmCo {
line-height: 1.6em;
opacity: .9;
}
.cmC i[rel=image] {
font-size: 90%;
display: block;
position: relative;
min-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 1em auto;
}
.cmC i[rel=image]::before {
content: 'This feature isn\0027t available!';
border: 1px dashed rgba(0,0,0,.2);
border-radius: 3px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fffdfc;
}
.cmC i[rel=pre], .cmC i[rel=quote] {
margin-top: 1em;
margin-bottom: 1em;
font-style: normal;
line-height: inherit;
padding: 20px;
}
.cmC i[rel=pre]::before {
display: block;
width: auto;
}
.cmC i[rel=pre] {
text-align: left;
}
.cmC i[rel=quote] {
display: block;
font-style: italic;
font-size: inherit;
padding: 5px 15px;
}
.cmCo img {
margin-top: 1em;
margin-bottom: 1em;
}
.cmAc {
margin-top: 10px;
}
.cmAc a {
font-size: 90%;
color: inherit;
opacity: .7;
display: inline-flex;
}
.cmAc a::before {
content: '\2934';
line-height: 18px;
font-size: 16px;
transform: rotate(90deg);
}
.cmAc a::after {
content: attr(data-text);
margin: 0 6px;
}
.cmR {
margin: 10px 0 0;
}
.cmRp ~ .cmAc, .cmBd.del ~ .cmAc, .onIt:not(.Rtl) .cmHr .date {
display: none;
}
.cmRi:checked ~ .cmRp .thTg {
margin-bottom: 0;
}
.cmRi:checked ~ .cmRp .thTg::before {
content: attr(aria-label);
}
.cmRi:checked ~ .cmRp .thCh, .cmRi:checked ~ .cmRp .cmR {
display: none;
}
.cmAl:checked ~ .cm .cmH .s::before {
content: attr(data-new);
}
.cmAl:checked ~ .cm .cmCn >ol {
flex-direction: column-reverse;
}
.thTg {
display: inline-flex;
align-items: center;
margin: 15px 0 18px;
font-size: 90%;
}
.thTg::after {
content: '';
width: 20px;
border-bottom: 1px solid var(--color_border);
opacity: .5;
margin: 0 10px;
}
.thTg::before {
content: attr(data-text);
opacity: .7;
}
.cmCn ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.cmCn li {
display: flex;
flex-wrap: wrap;
padding-bottom: 20px;
position: relative;
width: calc(100% + 12px);
left: -6px;
right: -6px;
}
.cmCn li .cmRbox {
margin-top: 20px;
padding: 0 6px;
flex-grow: 1;
}
.cmCn li li {
padding-bottom: 15px;
display: block;
width: 100%;
left: 0;
right: 0;
}
.cmCn li li:last-child {
padding-bottom: 0;
}
.cmCn li li .cmAv {
width: 20px;
margin: 2px 0;
padding: 0;
position: absolute;
}
.cmCn li li .cmAv .im {
/* width: 20px;
height: 20px; */
}
.cmCn li li .cmIn {
width: 100%;
padding: 0;
}
.cmCn li li .cmHr {
padding: 0 0 0 26px;
}
.cmHl >li >.cmIn::before {
content: '';
border-left: 1px solid var(--color_border);
position: absolute;
left: -24px;
top: 40px;
height: calc(100% - 25px);
}
#comment:target {
margin: 0;
padding-top: 60px;
}
.cmSh:checked ~ .cmShw, .cmShw ~ .cm:not(.cmBr), #comment:target .cmShw, #comment:target .cmSh:checked ~ .cm:not(.cmBr) {
display: none;
}
.cmSh:checked ~ .cm:not(.cmBr), #comment:target .cm:not(.cmBr), #comment:target .cmSh:checked ~ .cmShw {
display: block;
}
.cmBtn {
display: block;
padding: 20px;
text-align: center;
max-width: 100%;
}
.cmBtn.ln:hover {
color: #204ecf;
}
#comment:target .cmSh:checked ~ .cm.cmBr {
bottom: -100%;
opacity: 0;
visibility: hidden;
}
#comment:target .cmSh:checked ~ .cm.cmBr .fCls {
opacity: 0;
visibility: hidden;
}
.widget .imgThm {
display: block;
position: absolute;
top: 50%;
left: 50%;
max-width: none;
max-height: 108%;
font-size: 12px;
text-align: center;
transform: translate(-50%, -50%);
}
.widget .title {
margin: 0 0 25px;
font-size: 15px;
font-weight: 400;
position: relative;
}
.widget .title::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 25px;
margin: 0 10px;
border-bottom: 1px solid var(--color_border);
opacity: .5;
}
.widget input[type=text], .widget input[type=email], .widget textarea {
display: block;
width: 100%;
outline: 0;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.25);
border-radius: 4px 4px 0 0;
background: #f3f3f4;
padding: 25px 16px 8px 16px;
line-height: 1.6em;
transition: all .1s ease;
}
.widget input[type=text]:hover, .widget input[type=email]:hover, .widget textarea:hover {
border-color: rgba(0,0,0,.42);
background: #ececec;
}
.widget input[type=text]:focus, .widget input[type=email]:focus, .widget textarea:focus, .widget input[data-text=fl], .widget textarea[data-text=fl] {
border-color: var(--color_border);
background: #ececec;
}
.widget input[type=button], .widget input[type=submit] {
display: inline-flex;
align-items: center;
padding: 12px 30px;
outline: 0;
border: 0;
border-radius: 4px;
color: #fffdfc;
background: #204ecf;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.widget input[type=button]:hover, .widget input[type=submit]:hover {
opacity: .7;
}
#comment:target {
margin: 0;
padding-top: 60px;
}
.cmSh:checked ~ .cmShw, .cmShw ~ .cm:not(.cmBr), #comment:target .cmShw, #comment:target .cmSh:checked ~ .cm:not(.cmBr) {
display: none;
}
.cmSh:checked ~ .cm:not(.cmBr), #comment:target .cm:not(.cmBr), #comment:target .cmSh:checked ~ .cmShw {
display: block;
}
.cmBtn {
display: block;
padding: 20px;
text-align: center;
max-width: 100%;
text-transform: uppercase;
}
.cmBtn.ln:hover {
color: var(--color_link);
}
#comment:target .cmSh:checked ~ .cm.cmBr {
bottom: -100%;
opacity: 0;
visibility: hidden;
}
#comment:target .cmSh:checked ~ .cm.cmBr .fCls {
opacity: 0;
visibility: hidden;
}
.widget .imgThm {
display: block;
position: absolute;
top: 50%;
left: 50%;
max-width: none;
max-height: 108%;
font-size: 12px;
text-align: center;
transform: translate(-50%, -50%);
}
.widget .title {
margin: 0 0 25px;
font-size: 15px;
font-weight: 400;
position: relative;
}
.widget .title::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 25px;
margin: 0 10px;
border-bottom: 1px solid var(--color_border);
opacity: .5;
}
.widget input[type=text], .widget input[type=email], .widget textarea {
display: block;
width: 100%;
outline: 0;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.25);
border-radius: 4px 4px 0 0;
background: #f3f3f4;
padding: 25px 16px 8px 16px;
line-height: 1.6em;
transition: all .1s ease;
}
.widget input[type=text]:hover, .widget input[type=email]:hover, .widget textarea:hover {
border-color: rgba(0,0,0,.42);
background: #ececec;
}
.widget input[type=text]:focus, .widget input[type=email]:focus, .widget textarea:focus, .widget input[data-text=fl], .widget textarea[data-text=fl] {
border-color: var(--color_border);
background: #ececec;
}
.widget input[type=button], .widget input[type=submit] {
display: inline-flex;
align-items: center;
padding: 12px 30px;
outline: 0;
border: 0;
border-radius: 4px;
color: #fffdfc;
background: #204ecf;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.widget input[type=button]:hover, .widget input[type=submit]:hover {
opacity: .7;
}
.im {
width: 35px;
height: 35px;
border-radius: 16px;
background-color: rgba(0,0,0,.05);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.im svg {
width: 18px;
height: 18px;
opacity: .4;
}
.nm::after {
content: attr(data-text);
}
.pTtl {
font-size: 1.2rem;
line-height: 1.5em;
}
.pTtl.itm {
font-size: 36px;
font-family: 'Noto Sans', sans-serif;
font-weight: 900;
line-height: 1.3em;
}
.pTtl.itm.nSpr {
margin-bottom: 30px;
}
.aTtl a:hover {
color: var(--color_link);
}
.aTtl a, .pSnpt {
color: inherit;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pEnt {
margin-top: 40px;
font-size: 16px;
font-family: 'Noto Sans', sans-serif;
line-height: 1.8em;
}
.pHdr.nHdr {
margin: 0;
}
.pHdr {
width: calc(100% + 8px);
position: relative;
left: -4px;
right: -4px;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.pHdr .aIm {
flex-shrink: 0;
margin: 0 4px;
}
.pHdr .aIm .im {
width: 18px;
height: 18px;
}
.pHdr .aNm {
flex-grow: 1;
opacity: .8;
margin: 0 2px;
display: inline-flex;
flex-wrap: wrap;
max-width: calc(100% - 30px);
}
.pHdr .nm, .pHdr .pLbls {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 2px;
}
.pHdr .pLbls {
opacity: .8;
}
.pSml {
font-size: 93%;
}
.pSnpt {
-webkit-line-clamp: 2;
margin: 12px 0 0;
font-family: 'Noto Sans', sans-serif;
font-size: 14px;
line-height: 1.5em;
opacity: .8;
}
.pSnpt.nTag {
color: var(--color_link);
opacity: 1;
}
.pDesc {
font-size: 16px;
line-height: 1.5em;
margin: 8px 0 25px;
opacity: .7;
}
.pInf {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 15px;
}
.pInf.nTm {
margin: 0;
}
.pInf.nSpr .pJmp {
opacity: 1;
}
.pInf.nSpr .pJmp::before {
content: attr(aria-label);
}
.pInf.ps {
justify-content: flex-start;
align-items: center;
margin-top: 25px;
position: relative;
left: -4px;
right: -4px;
width: calc(100% + 8px);
}
.pInf.ps .pTtmp {
opacity: 1;
}
.pInf.ps .pTtmp::before {
content: attr(data-date) ' ';
}
.pInf.ps .pTtmp::after {
display: inline;
}
.pInf.ps.nul {
display: none;
}
.pInf .pIm {
flex-shrink: 0;
margin: 0 4px;
}
.pInf .pNm {
flex-grow: 1;
width: calc(100% - 108px);
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
}
.pInf .pNm.l {
display: none;
}
.pInf .pCm {
flex-shrink: 0;
max-width: 24px;
margin: 0 2px;
}
.pInf .pCm.l {
max-width: 58px;
}
.pInf .pIc {
display: inline-flex;
justify-content: flex-end;
position: relative;
width: calc(100% + 10px);
left: -5px;
right: -5px;
}
.pInf .pIc >* {
display: flex;
align-items: center;
position: relative;
margin: 0 2px;
color: inherit;
}
.pInf .pIc svg {
width: 20px;
height: 20px;
opacity: .8;
z-index: 1;
}
.pInf .pIc .cmnt::before {
content: attr(data-text);
font-size: 11px;
line-height: 18px;
padding: 0 5px;
border-radius: 10px;
background: #e6e6e6;
color: var(--bodyC);
position: absolute;
top: -5px;
right: 0;
z-index: 2;
}
.pInf .pIc .cmnt svg {
height: 18px;
}
.pInf .pDr {
opacity: .7;
display: inline-block;
margin: 0 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
}
.pInf .pDr >*:not(:first-child)::before {
content: '\00B7';
margin: 0 5px;
}
.pInf .pIn {
display: inline;
}
.pInf .nm {
margin: 0 4px;
}
.pInf .n .nm::before, .pHdr .n .nm::before {
content: attr(data-write) ' ';
opacity: .7;
}
.pInf .im {
width: 28px;
height: 28px;
}
.aTtmp {
opacity: .8;
}
.aTtmp, .pJmp {
overflow: hidden;
}
.pTtmp::after, .pJmp::before, .iTtmp::before {
content: attr(data-text);
display: block;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.pJmp {
display: inline-flex;
align-items: center;
opacity: 0;
transition: all .2s ease;
}
.pJmp::before {
content: attr(aria-label);
}
.pJmp svg {
height: 18px;
width: 18px;
stroke: var(--color_link);
flex-shrink: 0;
}
.ntry:hover .pJmp, .itm:hover .pJmp {
opacity: 1;
}
.blogPg {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 90%;
font-family: 'Noto Sans', sans-serif;
line-height: 20px;
color: #fffdfc;
margin: 30px 0 50px;
max-width: 100%;
}
.blogPg >* {
display: flex;
align-items: center;
padding: 10px 13px;
margin-bottom: 10px;
color: inherit;
background: #204ecf;
border-radius: 3px;
}
.blogPg >* svg {
width: 18px;
height: 18px;
stroke: #fffdfc;
stroke-width: 1.5;
}
.blogPg >*::before {
content: attr(data-text);
}
.blogPg .jsLd {
margin-left: auto;
margin-right: auto;
}
.blogPg .nwLnk::before, .blogPg .jsLd::before {
display: none;
}
.blogPg .nwLnk::after, .blogPg .jsLd::after {
content: attr(data-text);
margin: 0 8px;
}
.blogPg .olLnk::before {
margin: 0 8px;
}
.blogPg .nPst, .blogPg .current {
background: #e6e6e6;
color: #767676;
}
.blogPg .nPst.jsLd svg {
fill: #989b9f;
stroke: #989b9f;
}
.blogPg .nPst svg.line {
stroke: #989b9f;
}
.brdCmb {
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brdCmb a {
color: inherit;
}
.brdCmb >*:not(:last-child)::after {
content: '/';
margin: 0 4px;
font-size: 90%;
opacity: .6;
}
.brdCmb >* {
display: inline;
}
.brdCmb .tl::before {
content: attr(data-text);
}
.brdCmb .hm a {
font-size: 90%;
opacity: .7;
}
.pS h1, .pS h2, .pS h3, .pS h4, .pS h5, .pS h6 {
margin: 1.5em 0 18px;
font-family: var(--fontBa);
font-weight: 900;
line-height: 1.5em;
}
.pS h1:target, .pS h2:target, .pS h3:target, .pS h4:target, .pS h5:target, .pS h6:target {
padding-top: var(--headerH);
margin-top: 0;
}
.pS p {
margin: 1.7em 0;
}
.pIndent {
text-indent: 2.5rem;
}
.onIt:not(.Rtl) .dropCap {
float: left;
margin: 4px 8px 0 0;
font-size: 55px;
line-height: 45px;
opacity: .8;
}
.pS hr {
margin: 3em 0;
border: 0;
}
.pS hr::before {
content: '\2027 \2027 \2027';
display: block;
text-align: center;
font-size: 24px;
letter-spacing: 0.6em;
text-indent: 0.6em;
opacity: .8;
clear: both;
}
.pRef {
display: block;
font-size: 14px;
line-height: 1.5em;
opacity: .7;
word-break: break-word;
}
.pS img {
display: inline-block;
border-radius: 3px;
height: auto !important;
}
.pS img.full {
display: block !important;
margin-bottom: 10px;
position: relative;
width: 100%;
max-width: none;
}
.pS .widget, .ps .pAd >* {
margin: 40px 0;
}
.note {
position: relative;
padding: 16px 20px 16px 50px;
background: #e1f5fe;
color: #3c4043;
font-size: .85rem;
font-family: var(--fontB);
line-height: 1.6em;
border-radius: 10px;
overflow: hidden;
}
.note::before {
content: '';
width: 60px;
height: 60px;
background: #81b4dc;
display: block;
border-radius: 50%;
position: absolute;
top: -12px;
left: -12px;
opacity: .1;
}
.note::after {
content: '\002A';
position: absolute;
left: 18px;
top: 16px;
font-size: 20px;
min-width: 15px;
text-align: center;
}
.note.wr {
background: #ffdfdf;
color: #48525c;
}
.note.wr::before {
background: #e65151;
}
.note.wr::after {
content: '\0021';
}
.extL::after {
content: '';
width: 14px;
height: 14px;
display: inline-block;
margin: 0 5px;
background: url("data:image/svg+xml,") center / 14px no-repeat;
}
.psImg {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
margin: 2em 0;
position: relative;
left: -7px;
right: -7px;
width: calc(100% + 14px);
}
.psImg >* {
width: calc(50% - 14px);
margin: 0 7px 14px;
position: relative;
}
.psImg img {
display: block;
}
.scImg >* {
margin: 0 7px;
}
.btImg label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.6);
transition: var(--trans-1);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
color: var(--darkT);
font-size: 13px;
font-family: var(--fontB);
}
.hdImg .shImg {
width: 100%;
margin: 0;
left: 0;
right: 0;
transition: var(--trans-1);
max-height: 0;
opacity: 0;
visibility: hidden;
}
.inImg:checked ~ .hdImg .shImg {
max-height: 1000vh;
opacity: 1;
visibility: visible;
}
.inImg:checked ~ .hdImg .btImg label {
opacity: 0;
visibility: hidden;
}
.pRelate {
margin: 40px 0;
padding: 20px 0;
border: 1px solid #989b9f;
border-left: 0;
border-right: 0;
font-size: 14px;
line-height: 1.8em;
}
.pRelate b {
font-weight: 400;
margin: 0;
opacity: .8;
}
.pRelate ul, .pRelate ol {
margin: 8px 0 0;
padding: 0 20px;
}
blockquote, .cmC i[rel=quote] {
position: relative;
font-size: .97rem;
opacity: .8;
line-height: 1.6em;
margin-left: 0;
margin-right: 0;
padding: 5px 20px;
border-left: 2px solid var(--contentL);
}
blockquote.s-1, details.sp {
font-size: .93rem;
padding: 25px 25px 25px 45px;
border: 1px solid #989b9f;
border-left: 0;
border-right: 0;
line-height: 1.7em;
}
blockquote.s-1::before {
content: '\201D';
position: absolute;
top: 10px;
left: 0;
font-size: 60px;
line-height: normal;
opacity: .5;
}
.ps table {
margin: 0 auto;
font-size: 14px;
font-family: var(--fontB);
}
.ps table:not(.tr-caption-container) {
min-width: 90%;
border: 1px solid var(--contentL);
border-radius: 3px;
overflow: hidden;
}
.ps table:not(.tr-caption-container) td {
padding: 16px;
}
.ps table:not(.tr-caption-container) tr:not(:last-child) td {
border-bottom: 1px solid var(--contentL);
}
.ps table:not(.tr-caption-container) tr:nth-child(2n+1) td {
background: rgba(0,0,0,.01);
}
.ps table th {
padding: 16px;
text-align: inherit;
border-bottom: 1px solid var(--contentL);
}
.ps .table {
display: block;
overflow-y: hidden;
overflow-x: auto;
scroll-behavior: smooth;
}
figure {
margin-left: 0;
margin-right: 0;
}
.ps .tr-caption, .psCaption, figcaption {
display: block;
font-size: 14px;
line-height: 1.6em;
font-family: var(--fontB);
opacity: .7;
}
.pre {
background: var(--synxBg);
color: var(--synxC);
direction: ltr;
}
.pre:not(.tb) {
position: relative;
border-radius: 3px;
overflow: hidden;
margin: 1.7em auto;
font-family: var(--fontC);
}
.pre pre {
margin: 0;
color: inherit;
background: inherit;
}
.pre:not(.tb)::before, .cmC i[rel=pre]::before {
content: '';
display: flex;
justify-content: flex-end;
position: absolute;
right: 0;
top: 0;
width: 100%;
background: inherit;
color: var(--synxGray);
font-size: 10px;
padding: 0 10px;
z-index: 2;
line-height: 30px;
}
.pre:not(.tb).html::before {
content: '.html';
}
.pre:not(.tb).css::before {
content: '.css';
}
.pre:not(.tb).js::before {
content: '.js';
}
pre, .cmC i[rel=pre] {
display: block;
position: relative;
font-family: var(--fontC);
font-size: 13px;
line-height: 1.6em;
border-radius: 3px;
background: var(--synxBg);
color: var(--synxC);
padding: 30px 20px 20px;
margin: 1.7em auto;
-moz-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
overflow: auto;
direction: ltr;
white-space: pre;
}
pre i {
color: var(--synxBlue);
font-style: normal;
}
pre i.block {
color: #fff;
background: var(--synxBlue);
}
pre i.green {
color: var(--synxGreen);
}
pre i.gray {
color: var(--synxGray);
}
pre i.red {
color: var(--synxOrange);
}
pre i.blue {
color: var(--synxBlue);
}
code {
display: inline;
padding: 5px;
font-size: 14px;
border-radius: 3px;
line-height: inherit;
color: var(--synxC);
background: #f2f3f5;
font-family: var(--fontC);
}
.pre.tb {
border-radius: 5px;
}
.pre.tb pre {
margin: 0;
background: inherit;
}
.pre.tb .preH {
font-size: 13px;
border-color: rgba(0,0,0,.05);
margin: 0;
}
.pre.tb .preH >* {
padding: 13px 20px;
}
.pre.tb .preH::after {
content: '';
font-size: 10px;
font-family: var(--fontC);
color: var(--synxGray);
padding: 15px;
margin-left: auto;
}
.pre.tb >:not(.preH) {
display: none;
}
.pS input[id*="1"]:checked ~ div[class*="C-1"], .pS input[id*="2"]:checked ~ div[class*="C-2"], .pS input[id*="3"]:checked ~ div[class*="C-3"], .pS input[id*="4"]:checked ~ div[class*="C-4"] {
display: block;
}
.pS details summary {
list-style: none;
outline: none;
}
.pS details summary::-webkit-details-marker {
display: none;
}
details.sp {
padding: 20px 15px;
}
details.sp summary {
display: flex;
justify-content: space-between;
align-items: baseline;
}
details.sp summary::after {
content: attr(data-show);
font-size: 12px;
opacity: .7;
cursor: pointer;
}
details.sp[open] summary::after {
content: attr(data-hide);
}
details.toc a:hover {
text-decoration: underline;
}
details.toc a {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: inherit;
}
details.toc ol {
list-style: none;
padding: 0;
margin: 0;
line-height: 1.6em;
counter-reset: toc-count;
}
details.toc ol ol ol ol {
display: none;
}
details.toc ol ol, .tocIn li:not(:last-child) {
margin-bottom: 5px;
}
details.toc li li:first-child {
margin-top: 5px;
}
details.toc li {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
details.toc li::before {
flex: 0 0 23px;
content: counters(toc-count,'.')'. ';
counter-increment: toc-count;
}
details.toc li a {
flex: 1 0 calc(100% - 23px);
}
details.toc li li::before {
flex: 0 0 28px;
content: counters(toc-count,'.');
}
details.toc li li a {
flex: 1 0 calc(100% - 28px);
}
details.toc li li li::before {
flex: 0 0 45px;
}
details.toc li li li a {
flex: 1 0 calc(100% - 45px);
}
details.toc .toC >ol {
margin-top: 1em;
}
details.toc .toC >ol >li >ol {
flex: 0 0 calc(100% - 23px);
}
details.toc .toC >ol >li >ol ol {
flex: 0 0 calc(100% - 28px);
}
details.toc .toC >ol >li >ol ol ol {
flex: 0 0 calc(100% - 45px);
}
.showH {
margin: 1.7em 0;
font-size: .93rem;
font-family: var(--fontB);
line-height: 1.7em;
}
details.ac {
padding: 18px 0;
border-bottom: 1px solid var(--contentL);
}
details.ac:first-child {
border-top: 1px solid var(--contentL);
}
details.ac summary {
font-weight: 700;
cursor: default;
display: flex;
align-items: baseline;
transition: var(--trans-1);
}
details.ac summary::before {
content: '\203A';
flex: 0 0 25px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 5px;
font-weight: 400;
font-size: 1.33rem;
color: inherit;
}
details.ac[open] summary {
color: var(--linkC);
}
details.ac:not(.alt)[open] summary::before {
transform: rotate(90deg);
padding: 0 0 0 5px;
justify-content: center;
}
details.ac.alt summary::before {
content: '\002B';
padding: 0 2px;
}
details.ac.alt[open] summary::before {
content: '\2212';
}
details.ac .aC {
padding: 0 25px;
opacity: .9;
}
.tbHd {
display: flex;
border-bottom: 1px solid var(--contentL);
margin-bottom: 30px;
font-size: 14px;
font-family: var(--fontB);
line-height: 1.6em;
overflow-x: scroll;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.tbHd >* {
padding: 12px 15px;
border-bottom: 1px solid transparent;
transition: var(--trans-1);
opacity: .6;
white-space: nowrap;
scroll-snap-align: start;
}
.tbHd >*::before {
content: attr(data-text);
}
.tbCn >* {
display: none;
width: 100%;
}
.tbCn >* p:first-child {
margin-top: 0;
}
.pS input[id*="1"]:checked ~ .tbHd label[for*="1"], .pS input[id*="2"]:checked ~ .tbHd label[for*="2"], .pS input[id*="3"]:checked ~ .tbHd label[for*="3"], .pS input[id*="4"]:checked ~ .tbHd label[for*="4"] {
border-color: var(--linkB);
opacity: 1;
}
.pS input[id*="1"]:checked ~ .tbCn div[class*="Text-1"], .pS input[id*="2"]:checked ~ .tbCn div[class*="Text-2"], .pS input[id*="3"]:checked ~ .tbCn div[class*="Text-3"], .pS input[id*="4"]:checked ~ .tbCn div[class*="Text-4"] {
display: block;
}
.tbHd.stick {
position: -webkit-sticky;
position: sticky;
top: var(--headerH);
background: var(--bodyB);
}
.ps .blogPg {
font-size: 13px;
justify-content: center;
position: relative;
width: calc(100% + 8px);
left: -4px;
right: -4px;
}
.ps .blogPg >* {
padding: 8px 15px;
margin: 0 4px 8px;
}
.videoYt {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
border-radius: 5px;
}
.videoYt iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
}
.lazyYt {
background: var(--synxBg);
position: relative;
overflow: hidden;
padding-top: 56.25%;
border-radius: 5px;
}
.lazyYt img {
width: 100%;
top: -16.84%;
left: 0;
opacity: .95;
}
.lazyYt img, .lazyYt iframe, .lazyYt .play {
position: absolute;
}
.lazyYt iframe {
width: 100%;
height: 100%;
bottom: 0;
right: 0;
}
.lazyYt .play {
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
transition: all .5s ease;
display: block;
width: 70px;
height: 70px;
z-index: 1;
}
.lazyYt .play svg {
width: inherit;
height: inherit;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
stroke-width: 8;
}
.lazyYt .play .c {
stroke: rgba(255,255,255,.85);
stroke-dasharray: 650;
stroke-dashoffset: 650;
transition: all .4s ease-in-out;
opacity: .3;
}
.lazyYt .play .t {
stroke: rgba(255,255,255,.75);
stroke-dasharray: 240;
stroke-dashoffset: 480;
transition: all .6s ease-in-out;
transform: translateY(0);
}
.lazyYt .play:hover .t {
animation: nudge .6s ease-in-out;
-webkit-animation: nudge .6s ease-in-out;
}
.lazyYt .play:hover .t, .lazyYt .play:hover .c {
stroke-dashoffset: 0;
opacity: .7;
stroke: #FF0000;
}
.nAmp .lazyYt {
display: none;
}
.button {
display: inline-flex;
align-items: center;
margin: 10px 0;
padding: 12px 15px;
outline: 0;
border: 0;
border-radius: 3px;
line-height: 20px;
color: #fffdfc;
background: var(--color_rgb3);
font-size: 14px;
font-family: var(--fonts);
white-space: nowrap;
overflow: hidden;
max-width: 320px;
}
.button.ln {
color: inherit;
background: transparent;
}
.button.ln:hover {
border-color: var(--color_border1);
box-shadow: 0 0 0 1px var(--color_border) inset;
}
.btnF {
display: flex;
justify-content: center;
margin: 10px 0;
width: calc(100% + 12px);
left: -6px;
right: -6px;
position: relative;
}
.btnF >* {
margin: 0 6px;
}
.dlBox {
max-width: 500px;
background: #f1f1f0;
border-radius: 10px;
padding: 12px;
margin: 1.7em 0;
display: flex;
align-items: center;
font-size: 14px;
}
.dlBox .fT {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
padding: 10px;
background: rgba(0,0,0,.1);
border-radius: 5px;
}
.dlBox .fT::before {
content: attr(data-text);
opacity: .7;
}
.dlBox a {
flex-shrink: 0;
margin: 0;
padding: 10px 12px;
border-radius: 5px;
font-size: 13px;
}
.dlBox a::after {
content: attr(aria-label);
}
.dlBox .fN {
flex-grow: 1;
width: calc(100% - 200px);
padding: 0 15px;
}
.dlBox .fN >* {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dlBox .fS {
line-height: 16px;
font-size: 12px;
opacity: .8;
}
.icon {
flex-shrink: 0;
display: inline-flex;
}
.icon::before {
content: '';
width: 18px;
height: 18px;
background-size: 18px;
background-repeat: no-repeat;
background-position: center;
}
.icon::after {
content: '';
padding: 0 6px;
}
.icon.dl::before, .drK .button.ln .icon.dl::before {
background-image: url("data:image/svg+xml,");
}
.icon.demo::before {
background-image: url("data:image/svg+xml,");
}
.button.ln .icon.dl::before {
background-image: url("data:image/svg+xml,");
}
.zmImg.s {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
margin: 0;
background: rgba(0,0,0,.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
-webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px);
height: 100%;
}
.zmImg.s img {
display: block;
max-width: 92%;
max-height: 92%;
width: auto;
margin: auto;
border-radius: 10px;
box-shadow: 0 5px 30px 0 rgba(0,0,0,.05);
}
.zmImg.s img.full {
left: auto;
right: auto;
border-radius: 10px;
width: auto;
}
.zmImg::after {
content: '\2715';
line-height: 16px;
font-size: 14px;
color: #fffdfc;
background: var(--linkB);
position: fixed;
bottom: -20px;
right: -20px;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
transition: var(--trans-1);
opacity: 0;
visibility: hidden;
}
.zmImg.s::after {
bottom: 20px;
right: 20px;
opacity: 1;
visibility: visible;
cursor: pointer;
}
@media screen and (max-width: 640px) {
.pS img.full {
width: calc(100% + 40px);
left: -20px;
right: -20px;
border-radius: 0;
}
.note {
font-size: 13px;
}
.scImg {
flex-wrap: nowrap;
justify-content: flex-start;
position: relative;
width: calc(100% + 40px);
left: -20px;
right: -20px;
padding: 0 13px;
overflow-y: hidden;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.scImg >* {
flex: 0 0 80%;
scroll-snap-align: center;
}
.ps .table {
position: relative;
width: calc(100% + 40px);
left: -20px;
right: -20px;
padding: 0 20px;
display: flex;
}
}
@media screen and (max-width:500px) {
.hdImg {
width: 100%;
left: 0;
right: 0;
}
.hdImg >*, .shImg >* {
width: 100%;
margin: 0 0 16px;
}
.ps .tr-caption, .psCaption, figcaption {
font-size: 13px;
}
.btnF >* {
flex-grow: 1;
justify-content: center;
}
.btnF >*:first-child {
flex: 0 0 auto;
}
.dlBox a {
width: 42px;
height: 42px;
justify-content: center;
}
.dlBox a::after, .dlBox .icon::after {
display: none;
}
.pS .separator a {
display: block!important;
margin: 0!important;
}
}
.update-today {
border: 1px solid var(--color_border1);
padding: 53px 30px 23px 30px;
border-radius: 22px;
position: relative;
}
.update-today__header {
position: absolute;
background: var(--putih);
right: 86px;
right: 19px;
display: flex;
align-items: center;
justify-content: space-between;
top: -10px;
padding: 0 11px 0 21px;
}
.update-today__header h2 {
color: #acacac;
font-size: 17px;
font-weight: 700;
margin-bottom: 0;
font-family: bakh;
}
.update-today__header span {
color: #bcbcbc;
font-size: 13px;
font-weight: 500;
}
.update-today__content .swiper-container {
height: 246px;
padding-top: 5px;
margin-top: -5px;
}
.update-today__content .swiper-slide {
height: 40px !important;
margin-bottom: 10px;
}
.update-today__content .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide .update-today__item {
border-bottom-color: var(--putih);
}
.update-today__content .update-today__item {
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--color_border1);
padding-bottom: 11px;
transition: .3s;
}
.update-today__content .update-today__item .update-today__info {
display: flex;
align-items: center;
}
.update-today__content .update-today__item .update-today__info .update-today__img {
margin-right: 17px;
}
.update-today__content .update-today__item .update-today__info .update-today__img figure {
margin-bottom: 0;
}
.update-today__content .update-today__item .update-today__info .update-today__img figure img {
border-radius: 3px;
}
.update-today__content .update-today__item .update-today__info h2 {
color: var(--color_link);
font-size: 14px;
font-weight: 700;
margin-bottom: 0;
max-width: 288px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.update-today__content .update-today__item .update-today__meta {
display: flex;
align-items: center;
}
.update-today__content .update-today__item .update-today__meta .update-today__version {
color: #828282;
font-size: 13px;
font-weight: 500;
margin-right: 20px;
}
.update-today__content .update-today__item .update-today__meta .update-today__rate {
display: flex;
align-items: center;
}
.update-today__content .update-today__item .update-today__meta .update-today__rate i {
font-size: 10px;
color: #b7b7b7;
margin-right: 3px;
cursor: pointer;
}
.update-today__content .update-today__item .update-today__meta .update-today__rate i:last-child {
margin-right: 0;
}
.update-today__content .update-today__item .update-today__meta .update-today__rate i.active {
color: var(--color_button);
}
.update-today__content .update-today__item .update-today__meta .update-today__rate i.active ~ i {
color: var(--color_button);
}
.update-today__navigation {
display: flex;
align-items: center;
margin-top: 8px;
}
.update-today__navigation .update-today__next {
border-radius: 60px;
height: 39px;
background-color: var(--color_border3);
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
margin-right: 14px;
cursor: pointer;
}
.update-today__navigation .update-today__next.swiper-button-disabled i {
color: darkgray;
cursor: not-allowed;
}
.update-today__navigation .update-today__next i {
font-size: 16px;
color: var(--color_svg);
display: inline-block;
transform: rotate(270deg);
transition: .3s;
}
.update-today__navigation .update-today__prev {
border-radius: 60px;
height: 39px;
background-color: var(--color_border3);
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
cursor: pointer;
}
.update-today__navigation .update-today__prev.swiper-button-disabled i {
color: darkgray;
cursor: not-allowed;
}
.update-today__navigation .update-today__prev i {
font-size: 16px;
color: var(--color_svg);
transform: rotate(90deg);
transition: .3s;
}
.update-today .rmp-results-widget__visual-rating {
margin-right: 0 !important;
}
.update-today .rmp-results-widget .js-rmp-results-icon {
font-size: 11px !important;
}
.update-today .rmp-results-widget .js-rmp-results-icon:nth-child(1) {
margin-right: 0 !important;
}
@media (max-width: 1200px) {
.update-today__content .update-today__item .update-today__info h2 {
max-width: 198px;
}
}
@media (max-width: 992px) {
.update-today__content .update-today__item .update-today__info h2 {
max-width: 330px;
}
}
@media (max-width: 576px) {
.update-today {
padding: 28px 10px 15px 10px;
}
.update-today__content .update-today__item .update-today__info h2 {
max-width: 170px;
}
.update-today__navigation {
margin-top: 0;
}
}
@media (max-width: 450px) {
.update-today {
padding: 28px 10px 15px 10px;
}
.update-today__content .update-today__item .update-today__info .update-today__img {
margin-right: 10px;
}
.update-today__content .update-today__item .update-today__meta .update-today__version {
margin-right: 10px;
}
}
@media (max-width: 390px) {
.update-today__content .update-today__item .update-today__info h2 {
max-width: 140px;
}
}
@media (max-width: 350px) {
.update-today__content .update-today__item .update-today__info h2 {
max-width: 100px;
}
}
header.update-today__info {
border-bottom: unset!important;
}
.swiper-container {
margin-right: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-container-3d {
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
:root {
--swiper-navigation-size: 44px;
}
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
width: calc(44px / 44 * 27);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: 44px;
height: var(--swiper-navigation-size);
margin-top: calc(-1 * 44px / 2);
margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-theme-color);
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-disabled {
cursor: not-allowed !important;
}
.swiper-button-prev:after, .swiper-button-next:after {
font-family: swiper-icons;
font-size: 44px;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-feature-settings: normal,;
font-variant: normal;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
right: 10px;
right: auto;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
content: 'prev';
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: 10px;
right: auto;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: 'next';
}
.swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white {
--swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black {
--swiper-navigation-color: #000000;
}
.swiper-button-lock {
display: none;
}
:root {
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
right: 0;
width: 100%;
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: var(--swiper-theme-color);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
right: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-theme-color);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: right top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
right: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
right: 0;
top: 0;
}
.swiper-pagination-white {
--swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
--swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
display: none;
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
right: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
right: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
:root {
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
right: 50%;
top: 50%;
margin-right: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s infinite linear;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid var(--swiper-theme-color);
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: var(--putih);
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@-webkit-keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
.swiper-container .swiper-notification {
position: absolute;
right: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
right: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
.swiper-container-flip {
overflow: visible;
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slider {
position: relative;
}
.slider:before {
content: '';
position: absolute;
top: 120px;
bottom: 0;
right: 0;
left: 0;
box-shadow: 0 6px 31px -20px rgba(0, 0, 0, 0.34);
border-radius: 0 0 20px 20px;
z-index: 90;
}
.slider__paginate {
position: absolute;
top: 5px;
right: -20px;
display: flex;
flex-direction: column;
}
.slider__paginate .swiper-pagination-bullet {
width: 7px;
height: 7px;
background-color: #dbdbdb !important;
transition: .3s;
border-radius: 60px;
margin-bottom: 5px;
opacity: 1 !important;
}
.slider__paginate .swiper-pagination-bullet.swiper-pagination-bullet-active {
height: 21px;
background-color: var(--color_button) !important;
}
.slider__container {
position: relative;
border-radius: 0 0 20px 20px;
z-index: 100;
}
.slider__container .swiper-slide {
background: var(--putih);
}
.slider__item {
padding: 0 14px 23px 13px;
}
.slider__item .slider__img {
position: relative;
}
.slider__item .slider__img img {
border-radius: 15px;
}
.slider__item .slider__img > a {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.slider__item .slider__img .corner {
position: absolute;
bottom: 0;
right: 0;
width: 38px;
height: 38px;
background-color: #ffffff;
border-radius: 0 12px 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.slider__item .slider__img .corner i {
font-size: 16px;
color: var(--color_button);
}
.slider__item .slider__img .corner:after {
content: '';
background-image: url("./img/corner.svg");
background-repeat: no-repeat;
position: absolute;
right: 0;
top: -19px;
width: 35px;
height: 22px;
}
.slider__item .slider__img .corner:before {
content: '';
background-image: url("./img/corner.svg");
background-repeat: no-repeat;
position: absolute;
right: -35px;
bottom: -3px;
width: 35px;
height: 22px;
}
.slider__item .slider__img .corner--no-wifi i {
color: #dadada;
}
.slider__item .slider__img .slider__img-sm {
position: absolute;
right: 20px;
transform: translate(0, 50%);
bottom: -3px;
}
.slider__item .slider__img .slider__img-sm img {
position: relative;
z-index: 100;
border-radius: 15px;
}
.slider__item .slider__img .slider__img-sm .shadow {
position: absolute;
left: 13px;
right: 13px;
top: 22px;
bottom: -1px;
-webkit-filter: blur(10px);
filter: blur(10px);
z-index: 90;
overflow: hidden;
}
.slider__item .slider__img .slider__company {
position: absolute;
text-shadow: 0 4px 5px rgba(0, 0, 0, 0.75);
color: #ffffff !important;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
right: 154px;
bottom: 10px;
left: auto;
left: initial;
top: auto;
top: initial;
}
.slider__item .slider__title {
text-align: right;
display: flex;
flex-direction: column;
padding-right: 134px;
margin-top: 15px;
border-bottom: 1px solid var(--color_border);
margin-right: 20px;
margin-left: 20px;
padding-bottom: 19px;
}
.slider__item .slider__title .fa {
color: #666666;
font-size: 12px;
font-weight: 700;
margin-bottom: 6px;
display: inline-block;
}
.slider__item .slider__title .en {
color: #555555;
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
}
.slider__item .slider__footer {
margin-right: 20px;
padding-left: 16px;
display: flex;
align-items: center;
padding-top: 20px;
}
.slider__item .slider__footer .item {
color: #828282;
font-size: 13px;
font-weight: 500;
}
.slider__item .slider__footer .item--rate {
display: flex;
align-items: baseline;
margin-right: 29px;
}
.slider__item .slider__footer .item--rate .rmp-results-widget__visual-rating {
margin-right: 9px;
top: 1.4px;
}
.slider__item .slider__footer .item--rate .rmp-results-widget .js-rmp-results-icon {
font-size: 14px !important;
margin-right: 2px;
}
.slider__item .slider__footer .item--rate .rmp-results-widget .js-rmp-results-icon:nth-last-of-type(1) {
margin-right: 0;
}
.slider__item .slider__footer .item--rate .star {
display: flex;
align-items: center;
margin-right: 9px;
}
.slider__item .slider__footer .item--rate .star i {
font-size: 13px;
color: #b7b7b7;
cursor: pointer;
transition: .3s;
margin-right: 2px;
}
.slider__item .slider__footer .item--rate .star i:nth-child(1) {
margin-right: 0;
}
.slider__item .slider__footer .item--rate .star i:hover {
color: var(--color_button);
}
.slider__item .slider__footer .item--rate .star i:hover ~ i {
color: var(--color_button);
}
.slider__item .slider__footer .item--rate .star i.active {
color: var(--color_button);
}
.slider__item .slider__footer .item--rate .star i.active ~ i {
color: var(--color_button);
}
.slider__item .slider__footer .item--rate .text {
display: flex;
align-items: center;
}
.slider__item .slider__footer .item--rate .text__rate {
color: #a8a8a8;
font-size: 12px;
font-weight: 700;
}
.slider__item .slider__footer .item--rate .text__seprate {
color: #c2c2c2;
font-size: 12px;
font-weight: 400;
margin-left: 1px;
margin-right: 3px;
}
.slider__item .slider__footer .item--rate .text__full {
color: #666666;
font-size: 14px;
font-weight: 700;
}
.slider__item .slider__footer .item--int {
margin-right: 44px;
}
.slider__item .slider__footer .item--type {
margin-right: 36px;
}
.slider__item .slider__footer .item--os {
margin-right: 55px;
}
.single-content__info .single-content__info-versions .single-content__info-item .rmp-results-widget .js-rmp-results-icon {
font-size: 14px !important;
font-size: 14px !important;
margin-right: 0;
margin-left: 2px;
}
.single-content__info .single-content__info-versions .single-content__info-item .rmp-results-widget .js-rmp-results-icon:nth-last-of-type(1) {
margin-right: 0;
}
.rmp-results-widget .js-rmp-results-icon {
font-size: 15px !important;
}
.rmp-results-widget .rmp-icon--full-highlight {
color: var(--color_rate) !important;
}
.rmp-results-widget .rmp-icon--half-highlight {
background: linear-gradient(to right, var(--color_rate) 50%, #ccc 50%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.rmp-rating-widget .rmp-icon--full-highlight {
color: var(--color_rate) !important;
}
.rmp-rating-widget .rmp-icon--half-highlight {
background: linear-gradient(to right, var(--color_rate) 50%, #ccc 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.rmp-icon--hovered {
color: var(--color_rate) !important;
}
.rmp-icon--hovered.js-rmp-remove-half-star {
background: linear-gradient(to right, var(--color_rate) 50%, var(--color_rate) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.js-rmp-rating-item i {
transition: .3s;
}
.update-today__rate .rmp-results-widget__avg-rating, .update-today__rate .rmp-results-widget__vote-count {
display: none;
}
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container {
text-align: left;
color: var(--color_texts);
margin: 10px 0 20px 0;
}
.rmp-results-widget__avg-rating, .rmp-results-widget__vote-count {
font-size: 10px;
color: #aaaaaa;
}
.dlpro-votecount {
font-size: 13px;
line-height: 13px;
}
.rmp-rating-widget {
border: 1px solid var(--color_rgb3);
background-color: var(--color_rgb3);
padding: 20px;
margin: 0 auto;
font-size: 12px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.rmp-rating-widget .rmp-icon--ratings {
font-size: 1.8rem;
}
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container .rmp-heading.rmp-heading--title {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 700;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container .rmp-heading.rmp-heading--title .small-text {
font-size: 13px;
color: #333333;
}
#left-rating {
border-right: 4px solid var(--color_border1);
}
@media (max-width: 992px) {
#left-rating {
border-right: 0px;
border-bottom: 4px solid var(--color_border1);
margin-bottom: 20px;
padding-bottom: 20px;
}
}
.dlpro-averagerating {
font-size: 38px;
line-height: 38px;
font-weight: 700;
}
.dlpro-postratings-results {
font-size: 10px;
color: #aaaaaa;
margin-top: 5px;
}
.row-rmp-rating-widget {
margin-left: -10px;
margin-right: -10px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .grid-container .gmr-infeed-banner {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
width: 100%;
}
@media (min-width: 1200px) {
.col-md-12 {
flex: 0 0 auto;
width: 100%;
}
.col-md-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.col-md-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
.col-md-9 {
flex: 0 0 auto;
width: 75%;
}
.col-md-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.col-md-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-md-6 {
flex: 0 0 auto;
width: 50%;
}
.col-md-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-md-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-md-8 .grid-container .gmr-infeed-banner, .col-md-3 {
flex: 0 0 auto;
width: 25%;
}
.col-md-12 .grid-container .gmr-infeed-banner, .col-md-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
.col-md-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
}
.text-center {
text-align: center;
}
li.rmp-rating-widget__icons-list__icon.js-rmp-rating-item {
list-style-type: none!important;
padding: 0;
margin: 0;
}
.border-top {
border-top: 1px solid var(--color_border1) !important;
}
.star-ratings {
unicode-bidi: bidi-override;
color: #b7b7b7;
font-size: 20px;
position: relative;
margin: 0;
padding: 0;
}
.star-ratings .fill-ratings {
color: var(--color_rate);
padding: 0;
position: absolute;
z-index: 1;
display: block;
top: 0;
left: 0;
overflow: hidden;
}
.star-ratings .fill-ratings span {
display: inline-block;
}
.star-ratings .empty-ratings {
padding: 0;
display: block;
z-index: 0;
}
.Stars {
--percent: calc(var(--rating) / 10 * 100%);
display: inline-block;
font-size: 22px;
cursor: pointer;
opacity: .8;
}
.Stars::before {
content: "★★★★★";
background: linear-gradient(90deg, var(--color_rate) var(--percent), #b7b7b7 var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container_scroll {
display: flex;
overflow: auto;
}
.container_scroll > * {
flex-shrink: 0;
}
.container_scroll .zmImg img {
height: 350px !important;
}
.sldO {
position: relative;
display: flex;
overflow-y: hidden;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
list-style: none;
margin: 0;
padding: 0;
-ms-overflow-style: none;
}
.sldO.no-items {
display: none;
}
.sldO.no-items + .section {
margin-top: 0;
}
.sldO .widget:not(:first-child) {
margin-top: 0;
}
.sldO .widget {
position: relative;
flex: 0 0 100%;
width: 100%;
background: transparent;
outline: 0;
border: 0;
}
.sldC {
position: relative;
}
.sldS {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
z-index: -1;
}
.sldIm {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: var(--transB);
display: block;
padding-top: 40%;
border-radius: 3px;
color: #fffdfc;
font-size: 13px;
}
.sldT {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
padding: 20px;
background: linear-gradient(0deg, rgba(30,30,30,.1) 0%, rgba(30,30,30,.05) 60%, rgba(30,30,30,0) 100%);
border-radius: 0 0 3px 3px;
}
.sldS {
animation-name: tonext, snap;
animation-timing-function: ease;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.sldO .widget:last-child .sldS {
animation-name: tostart, snap;
}
.Rtl .sldS {
animation-name: tonext-rev, snap;
}
.Rtl .sldO .widget:last-child .sldS {
animation-name: tostart-rev, snap;
}
.sldO:hover .widget .sldS, .Rtl .sldO:hover .widget .sldS, .sldO:focus-within .widget .sldS, .Rtl .sldO:focus-within .widget .sldS {
animation-name: none;
}
@media (prefers-reduced-motion:reduce) {
.sldS, .Rtl .sldS {
animation-name: none;
}
}
@media screen and (max-width:640px) {
.sldO {
width: calc(100% + 40px);
left: -20px;
right: -20px;
padding: 0 12.5px 10px;
}
.sldO .widget {
flex: 0 0 90%;
width: 90%;
margin: 0 7.5px;
box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
}
.sldT {
padding: 10px 15px;
}
.sldIm {
font-size: 12px;
}
}
.site-footer, p.copyright {
color: var(--color_link_footers) !important;
}
.detail_banner {
position: relative;
margin: 0px 24px;
color: #999;
text-align: center;
}
.detail_banner .review_icon,.detail_banner .star_icon {
height: 20px;
line-height: 20px;
font-size: 14px;
margin-right: 10px;
}
.detail_banner .review_icon:before,.detail_banner .star_icon:before {
top: 5px;
}
.detail_banner .icon {
margin-bottom: 12px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
width: 120px;
height: 120px;
}
.detail_banner .icon.loading {
background: 0 0;
}
.detail_banner h1 {
font-size: 1.6rem;
line-height: 2rem;
color: var(--color_texts);
padding-bottom: 6px;
}
.detail_banner p {
}
.detail_banner .version {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail_banner a {
color: var(--color_link);
}
.detail_banner a:hover {
color: var(--color_link);
}
.detail_banner .button_box {
text-align: center;
padding-top: 10px;
}
@media (min-width:960px) {
.detail_banner {
padding-left: 100px;
padding-right: 240px;
text-align: left;
}
.detail_banner .icon {
position: absolute;
left: 0;
top: 0;
margin: 0;
width: 90px;
height: 90px;
}
.detail_banner p:last-of-type {
padding-bottom: 0;
}
.detail_banner .button_box {
position: absolute;
right: 0;
bottom: 0;
text-align: center;
}
.button_box .down_btn {
margin: 0 auto;
}
.button_box .gp_text_btn.fab {
max-width: 240px;
}
}
.button_box .gp_text_btn {
display: block;
font-size: 12px;
color: #888;
text-decoration: none;
margin-top: 10px;
}
.button_box .gp_text_btn.fab {
text-align: center;
}
.button_box .down_btn {
cursor: pointer;
margin: 0 auto;
display: block;
width: 100%;
max-width: 260px;
background: var(--color_button);
text-align: left;
color: var(--putih);
font-size: 12px;
border-radius: 8px;
padding: 12px 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
background-image: linear-gradient(90deg,var(--color_button),var(--color_button));
}
.button_box .down_btn.fab {
padding: 16px 16px 16px 46px;
text-align: center;
}
.button_box .down_btn:hover {
color: var(--putih);
text-decoration: none;
box-shadow: var(--color_link) 0 0 9px 0;
}
.review_app_box {
width: 100%;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
margin: 8px auto;
overflow: hidden;
background: var(--putih);
-webkit-box-shadow: 0 2px 15px 0 rgba(0,0,0,.08);
box-shadow: 0 2px 15px 0 rgba(0,0,0,.08);
position: relative;
text-align: left;
padding: 12px 16px;
}
.review_app_box .icon {
position: absolute;
top: 12px;
left: 16px;
height: 72px;
width: 72px;
-moz-border-radius: 20%;
-webkit-border-radius: 20%;
border-radius: 20%;
overflow: hidden;
}
.review_app_box .text {
padding: 0 0 0 80px;
margin-bottom: 10px;
min-height: 96px;
}
.review_app_box .title {
display: block;
font-size: 1.2rem;
line-height: 1.6rem;
max-height: 3.2rem;
margin-bottom: 8px;
color: #222;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.review_app_box p {
font-size: .85rem;
line-height: 1.2rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10px;
}
.review_app_box a.title:hover {
color: var(--color_link);
}
.review_app_box .other a.alternatives,.review_app_box .other span {
display: inline-block;
position: relative;
padding-left: 16px;
color: #9f9f9f;
height: 20px;
line-height: 20px;
margin-right: 6px;
font-size: .85rem;
}
.review_app_box .other a.alternatives:before,.review_app_box .other span:before {
content: '';
position: absolute;
top: 0;
width: 12px;
height: 20px;
left: 0;
display: inline-block;
background-repeat: no-repeat;
background-position: left 3px;
}
.review_app_box .other a.alternatives {
color: var(--color_link);
margin: 0;
}
.review_app_box .other a.alternatives:before {
background-color: var(--color_link);
-webkit-mask: var(--app_alternatives_icon) no-repeat center;
mask: var(--app_alternatives_icon) no-repeat center;
-webkit-mask-size: 10px;
mask-size: 10px;
}
.review_app_box .button {
display: inline-table;
background: var(--color_button);
color: var(--putih);
font-size: .85rem;
line-height: 1.6rem;
padding: 8px 24px;
border-radius: 4px;
min-width: 100px;
width: 100%;
text-align: center;
}
.review_app_box .button:hover {
text-decoration: none;
}
.review_app_box .google_play_btn,.review_app_box .pre_register_btn {
width: 176px;
height: 55px;
margin: 0;
margin-left: 100px;
}
@media (min-width:560px) {
.review_app_box {
text-align: left;
}
.review_app_box .text {
padding: 0 166px 0 120px;
}
.review_app_box .icon {
position: absolute;
top: 12px;
left: 16px;
height: 100px;
width: 100px;
-moz-border-radius: 20%;
-webkit-border-radius: 20%;
border-radius: 20%;
overflow: hidden;
}
.review_app_box .button {
position: absolute;
right: 16px;
top: 50px;
width: auto;
}
.review_app_box .gp_btn {
width: 176px;
height: 55px;
position: absolute;
right: 4px;
top: 50px;
}
}
.review_icon, .star_icon {
position: relative;
display: inline-block;
font-size: 12px;
padding-left: 14px;
}
.star_icon {
color: #fa8b15;
}
.review_icon {
color: #919191;
}
.review_icon:before, .star_icon:before {
content: '';
width: 12px;
height: 10px;
position: absolute;
left: 0;
top: 2px;
}
.star_icon:before {
background-color: #fa8b15;
-webkit-mask: var(--star_icon) no-repeat center;
mask: var(--star_icon) no-repeat center;
-webkit-mask-size: 12px;
mask-size: 12px;
}
.review_icon:before {
background-color: #919191;
-webkit-mask: var(--review_icon) no-repeat center;
mask: var(--review_icon) no-repeat center;
-webkit-mask-size: 10px;
mask-size: 10px;
}
.review_banner {
background: #f1f2f3;
display: block;
width: 100%;
height: 0;
padding-top: 48.88%;
position: relative;
overflow: hidden;
text-align: center;
border-radius: 8px 8px 0 0;
box-shadow: 0 0 12px 0 rgba(189,189,189,.3);
}
.review_banner img.img {
min-height: 100%;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.site-footer .menu {
margin-left: 2.25rem;
}
.site-footer .menu li {
margin-right: 1.5rem;
}
.site-footer .menu li a {
color: var(--color_background_ft);
}
.site-footer .menu li a:hover {
color: var(--color_link) !important;
}
.site-footer .socials a {
color: inherit;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
}
.site-footer .socials a:hover {
background-color: var(--color_rgb_background);
}
.site-footer .socials a svg {
fill: var(--color_link_footers);
transition: all 0.3s ease 0s;
}
.site-footer .socials a:hover svg {
fill: var(--color_svg)!important;
}
.site-footer .socials a a {
margin-left: 0.5rem;
}
.border-secondary {
border-color: var(--color_border) !important;
}
.btn-secondary {
color: #fff;
background-color: var(--color_button_hover) !important;
border-color:var(--color_button_hover) !important;
}
.btn-secondary:hover {
color: #fff !important;
background-color: var(--color_button) !important;
border-color:var(--color_button) !important;
}
a.btn.btn-secondary svg {
fill: white!important;
}
#accordion-downloads a span {
color: var(--color_link);
}
span.align-middle.whites {
color: white;
}
#accordion-faqs a {
color: var(--putih);
}
.accordion .toggler {
color: var(--putih);
background-color: var(--color_button);
}
.accordion .toggler.collapsed {
color: var(--putih);
background-color: var(--color_button);
font-weight: bolder;
}
.accordion .toggler:after {
content: "-";
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
display: inline-block;
line-height: 1;
margin-left: auto;
transition: all 0.3s ease 0s;
}
.accordion .toggler.collapsed:after {
content: " ";
color: var(--putih);
}
.accordion-more-info .toggler {
color: var(--putih);
background-color: #f0f2f5;
font-weight: bolder;
}
.rmp-results-widget .js-rmp-results-icon {
font-size: 15px !important;
}
.rmp-results-widget .rmp-icon--full-highlight {
color: var(--color_rate) !important;
}
.rmp-results-widget .rmp-icon--half-highlight {
background: linear-gradient(to right, var(--color_rate) 50%, #ccc 50%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.rmp-rating-widget .rmp-icon--full-highlight {
color: var(--color_rate) !important;
}
.rmp-rating-widget .rmp-icon--half-highlight {
background: linear-gradient(to right, var(--color_rate) 50%, #ccc 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.rmp-icon--hovered {
color: var(--color_rate) !important;
}
.rmp-icon--hovered.js-rmp-remove-half-star {
background: linear-gradient(to right, var(--color_rate) 50%, var(--color_rate) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.js-rmp-rating-item i {
transition: .3s;
}
.update-today__rate .rmp-results-widget__avg-rating, .update-today__rate .rmp-results-widget__vote-count {
display: none;
}
/* Rating Plugin https://wordpress.org/plugins/rate-my-post/ */
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container {
text-align: left;
color: var(--color_texts);
margin: 10px 0 20px 0;
}
.rmp-results-widget__avg-rating,
.rmp-results-widget__vote-count {
font-size: 10px;
color: #aaaaaa;
}
.dlpro-votecount {
font-size: 13px;
line-height: 13px;
}
.rmp-rating-widget {
border: 1px solid var(--color_rgb_nav);
background-color: var(--color_rgb2);
padding: 20px;
margin: 0 auto;
font-size: 12px;
-webkit-border-radius:8px;
border-radius:8px;
}
.rmp-rating-widget .rmp-icon--ratings {
font-size: 1.8rem;
}
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container .rmp-heading.rmp-heading--title {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 700;
-webkit-border-radius:8px;
border-radius:8px;
}
.rmp-widgets-container.rmp-wp-plugin.rmp-main-container .rmp-heading.rmp-heading--title .small-text {
font-size: 13px;
color: #333333;
}
#left-rating {border-right: 4px solid var(--color_rgb_nav);}
@media (max-width: 992px) {
#left-rating {border-right: 0px; border-bottom: 4px solid var(--color_rgb_nav);margin-bottom: 20px;padding-bottom: 20px;}
}
.dlpro-averagerating {
font-size: 38px;
line-height: 38px;
font-weight: 700;
}
/* Rating Plugin https://id.wordpress.org/plugins/wp-postratings/ */
.dlpro-postratings-results {
font-size: 10px;
color: #aaaaaa;
margin-top: 5px;
}
.row-rmp-rating-widget {
margin-left: -10px;
margin-right: -10px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.faq-section .mb-0 > a {
display: block;
position: relative;
}
.faq-section .mb-0 > a:after {
content: "\f067";
font-family: "Font Awesome 5 Free";
position: absolute;
right: 0;
font-weight: 600;
}
.faq-section .mb-0 > a[aria-expanded="true"]:after {
content: "\f068";
font-family: "Font Awesome 5 Free";
font-weight: 600;
}
.accordion-button {
color: white;
font: 20px Roboto, sans-serif;
}
.accordion-button:after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")!important;
}
.accordion-button:not(.collapsed):after{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")!important;
}
.accordion-button:hover {
font: 21px Roboto, sans-serif;
}
.accordion-button:not(.collapsed) {
color: white;
}
.accordion-item {
font: 16px Roboto, sans-serif;
}
h2.accordion-header button.accordion-button{
background: var(--color_button);
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-radius: 3px;
position: relative;
z-index: 99;
transition: all 0.3s ease;
color: white;
}
.svg-5 {
width: 1.25rem;
height: 1.25rem;
}
h4.accordion-title {
background-color: var(--color_button)!important;
color: #fff !important;
font-size: 1rem;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-bottom: .5rem !important;
padding-top: .5rem !important;
border-radius: .25rem !important;
margin-bottom: 10px;
}
.breadcrumb {
background-color: var(--color_background_body)!important;
}
.pagination {
justify-content: center;
margin-bottom: 1.5rem;
}
.pagination .page-link {
font-size: 1rem;
font-weight: 600;
color: #212529;
background: var(--color_rgb_nav);
border-color: var(--color_rgb_nav);
border-radius: 0.5rem !important;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
text-align: center;
padding: 0;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.pagination .page-link:hover, .pagination .page-link:focus {
color: var(--color_nav)!important;
background-color: var(--color_nav_bg);
border-color: var(--color_nav_bg);
}
.pagination .page-item.active .page-link {
color: var(--color_nav);
background-color: var(--color_nav_bg);
border-color: var(--color_nav_bg);
}
.svg-6 {
width: 1rem;
height: 1rem;
}