:root,
:root .lgT:not(.drK),
:root .theme0:not(.drK) {
/* Theme */
--themeC: #482dff;
/* Body */
--headC: #08102b;
--bodyC: #08102b;
--bodyCa: #989b9f;
--bodyB: #FFFFFF;
/* Link */
--linkC: #482dff;
--linkB: #482dff;
/* Wave */
--waveB: #C6DAFC;
/* Icon */
--iconC: #08102b;
--iconCa: #08102b;
--iconCs: #767676;
/* Header */
--headerC: #48525c;
--headerT: 16px;
--headerW: 400;
/* write 400(normal) or 700(bold) */
--headerB: #fffdfc;
--headerL: 1px;
--headerI: #262d3d;
--headerH: 60px;
--headerHi: -60px;
--headerHm: 60px;
--headerR: 30px;
/* Notif */
--notifH: 60px;
--notifU: #e8f0fe;
--notifC: #01579b;
/* Content */
--contentB: #fffdfc;
--contentL: #eceff1;
--contentW: 1280px;
--sideW: 300px;
--transB: rgba(0, 0, 0, .05);
/* Page */
--pageW: 780px;
--pageW: 780px;
--postT: 36px;
--postF: 16px;
--postTm: 28px;
--postFm: 15px;
/* Widget */
--widgetT: 15px;
--widgetTw: 400;
/* write 400(normal) or 700(bold) */
--widgetTa: 25px;
/* Nav */
--navW: 230px;
--navT: #08102b;
--navI: #08102b;
--navB: #fffdfc;
--navL: 1px;
/* Search */
--srchI: #48525c;
--srchB: #FFFFFF;
/* Mob Men */
--mobT: #08102b;
--mobHv: #f1f1f0;
--mobB: #EEEEEE;
--mobL: 2px;
--mobBr: 33px;
/* Footer */
--fotT: #08102b;
--fotB: #fffdfc;
--fotL: 2px;
/* Font family */
--fontH: Google Sans Text, Arial, Helvetica, sans-serif;
--fontB: Google Sans Text, Arial, Helvetica, sans-serif;
--fontBa: Google Sans Text, Arial, Helvetica, sans-serif;
--fontC: Google Sans Mono, monospace;
/* Trans */
--trans-1: all .1s ease;
--trans-2: all .2s ease;
--trans-3: all .3s ease;
--trans-4: all .4s ease;
/* Synx */
--synxBg: #f6f6f6;
--synxC: #2f3337;
--synxOrange: #b75501;
--synxBlue: #015692;
--synxGreen: #54790d;
--synxRed: #f15a5a;
--synxGray: #656e77;
/* Border Radius */
--buttonR: 50px;
--greetR: 25px;
--iconHr: 15px;
--thumbEr: 15px;
--srchMr: 20px;
--srchDr: 20px;
/* Dark */
--darkT: #fffdfc;
--darkTa: #989b9f;
--darkU: #41B375;
--darkW: #343435;
--darkB: #1e1e1e;
--darkBa: #2d2d30;
--darkBs: #252526;
}
/* Dark Mode */
:root .drK {
/* Theme */
--themeC: #1e1e1e;
}
/* Theme 1 - Red */
:root .theme1:not(.drK) {
/* Theme */
--themeC: #D32F2F;
/* Body */
--bodyB: #FFFCFD;
/* Link */
--linkC: #F44336;
--linkB: #F44336;
/* Header */
--headerB: #FFEBEE;
/* Notif */
--notifU: #FFEBEE;
--notifC: #B71C1C;
/* Search */
--srchB: #FFEBEE;
/* MobMn */
--mobB: #FFEBEE;
/* Wave */
--waveB: #FFEBEE;
}
/* Theme 2 - Green */
:root .theme2:not(.drK) {
/* Theme */
--themeC: #00796B;
/* Body */
--bodyB: #FCFFFC;
/* Link */
--linkC: #009688;
--linkB: #009688;
/* Header */
--headerB: #E0F2F1;
/* Notif */
--notifU: #E0F2F1;
--notifC: #00796B;
/* Search */
--srchB: #E0F2F1;
/* MobMn */
--mobB: #E0F2F1;
/* Wave */
--waveB: #E0F2F1;
}
/* Theme 3 - Blue */
:root .theme3:not(.drK) {
/* Theme */
--themeC: #1565C0;
/* Body */
--bodyB: #FBFEFF;
/* Link */
--linkC: #1976D2;
--linkB: #1976D2;
/* Header */
--headerB: #E3F2FD;
/* Notif */
--notifU: #E3F2FD;
--notifC: #1565C0;
/* Search */
--srchB: #E3F2FD;
/* MobMn */
--mobB: #E3F2FD;
/* Wave */
--waveB: #E3F2FD;
}
/* Theme 4 - Yellow */
:root .theme4:not(.drK) {
/* Theme */
--themeC: #FFC107;
/* Body */
--bodyB: #FFFEFA;
/* Link */
--linkC: #FF8F00;
--linkB: #FF8F00;
/* Header */
--headerB: #FFF8E1;
/* Notif */
--notifU: #FFF8E1;
--notifC: #FF8F00;
/* Search */
--srchB: #FFF8E1;
/* MobMn */
--mobB: #FFF8E1;
/* Wave */
--waveB: #FFF8E1;
}
/* Theme 5 - Pink */
:root .theme5:not(.drK) {
/* Theme */
--themeC: #C2185B;
/* Body */
--bodyB: #FFFCFD;
/* Link */
--linkC: #D81B60;
--linkB: #D81B60;
/* Header */
--headerB: #FCE4EC;
/* Notif */
--notifU: #FCE4EC;
--notifC: #C2185B;
/* Search */
--srchB: #FCE4EC;
/* MobMn */
--mobB: #FCE4EC;
/* Wave */
--waveB: #FCE4EC;
}
/* Theme 6 - Orange */
:root .theme6:not(.drK) {
/* Theme */
--themeC: #E64A19;
/* Body */
--bodyB: #FBFEFF;
/* Link */
--linkC: #F4511E;
--linkB: #F4511E;
/* Header */
--headerB: #FBE9E7;
/* Notif */
--notifU: #FBE9E7;
--notifC: #E64A19;
/* Search */
--srchB: #FBE9E7;
/* MobMn */
--mobB: #FBE9E7;
/* Wave */
--waveB: #FBE9E7;
}
/* Theme 7 - Blue Grey */
:root .theme7:not(.drK) {
/* Theme */
--themeC: #455A64;
/* Body */
--bodyB: #FBFEFF;
/* Link */
--linkC: #546E7A;
--linkB: #546E7A;
/* Header */
--headerB: #ECEFF1;
/* Notif */
--notifU: #ECEFF1;
--notifC: #455A64;
/* Search */
--srchB: #ECEFF1;
/* MobMn */
--mobB: #ECEFF1;
/* Wave */
--waveB: #ECEFF1;
}
/* Theme 8 - Brown */
:root .theme8:not(.drK) {
/* Theme */
--themeC: #5D4037;
/* Body */
--bodyB: #FBFEFF;
/* Link */
--linkC: #5D4037;
--linkB: #5D4037;
/* Header */
--headerB: #EFEBE9;
/* Notif */
--notifU: #EFEBE9;
--notifC: #5D4037;
/* Search */
--srchB: #EFEBE9;
/* MobMn */
--mobB: #EFEBE9;
/* Wave */
--waveB: #EFEBE9;
}
/* Theme 9 - Purple */
:root .theme9:not(.drK) {
/* Theme */
--themeC: #7B1FA2;
/* Body */
--bodyB: #FBFEFF;
/* Link */
--linkC: #8E24AA;
--linkB: #8E24AA;
/* Header */
--headerB: #F3E5F5;
/* Notif */
--notifU: #F3E5F5;
--notifC: #7B1FA2;
/* Search */
--srchB: #F3E5F5;
/* MobMn */
--mobB: #F3E5F5;
/* Wave */
--waveB: #F3E5F5;
}
/* Theme 10 - Indigo */
:root .theme10:not(.drK) {
/* Theme */
--themeC: #283593;
/* Body */
--bodyB: #FBFEFF;
/* Link */
--linkC: #3949AB;
--linkB: #3949AB;
/* Header */
--headerB: #E8EAF6;
/* Notif */
--notifU: #E8EAF6;
--notifC: #283593;
/* Search */
--srchB: #E8EAF6;
/* MobMn */
--mobB: #E8EAF6;
/* Wave */
--waveB: #E8EAF6;
}
.acdn {
position: relative;
list-style: none;
margin: 30px 0;
padding: 0;
font-size: 14px;
line-height: 1.7em;
font-family: inherit
}
.acdn .ac {
width: 100%;
padding: 20px 0 20px 15px;
margin: 10px 0;
background: #f0f0ff;
border-radius: 10px;
border-left: 4px solid #8a8aff;
box-shadow: 0 5px 10px rgba(51, 51, 51, .1)
}
.acdn .ac:nth-child(4n + 1) {
background: #f0f0ff;
border-left-color: #8a8aff
}
.acdn .ac:nth-child(4n + 2) {
background: #fff0f3;
border-left-color: #ff8aa1
}
.acdn .ac:nth-child(4n + 3) {
background: #f0faff;
border-left-color: #8ad8ff
}
.acdn .ac:nth-child(4n + 4) {
background: #fff7f0;
border-left-color: #ffc08a
}
.acdn .cont {
margin: 0;
padding-left: 27px;
padding-right: 27px;
position: relative;
overflow: hidden;
max-height: 0;
transition: all .3s ease;
color: #08102b
}
.acdn .cont ul,
.acdn .cont ol {
padding-left: 13px
}
.acdn .cont li {
padding: 0
}
.acdn .cont a {
text-decoration: none;
color: #08102b
}
.acdn p:first-child {
margin-top: 0
}
.acdn p:last-child {
margin-bottom: 0
}
.acTtl {
display: flex;
align-items: center;
font-weight: 700;
color: #08102b
}
.acTtl span {
display: flex;
flex-grow: 1
}
.acTtl span:before {
content: '';
padding-left: 15px
}
.acIcn {
flex-shrink: 0;
display: flex;
align-items: center;
width: 12px;
height: 12px;
position: relative
}
.acIcn:before,
.acIcn:after {
content: '';
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: #08102b
}
.acIcn:after {
position: absolute;
transform: rotate(90deg)
}
.acMn {
display: none
}
.acMn:checked~.acTtl .acIcn:after {
visibility: hidden;
opacity: 0
}
.acMn:checked~.cont {
max-height: 100vh;
padding-top: 15px;
padding-bottom: 8px
}
.darkMode .acdn .ac {
background: #252526;
border-left-color: #4c4c4e
}
.darkMode .acdn .cont,
.darkMode .acdn .cont a,
.darkMode .acTtl,
.darkMode .acMn:checked~.acTtl {
color: #fefefe
}
.darkMode .acTtl .acIcn:before,
.darkMode .acTtl .acIcn:after,
.darkMode .acMn:checked~.acTtl .acIcn:before,
.darkMode .acMn:checked~.acTtl .acIcn:after {
background: #fefefe
}
/* Widget Script for img click/ */
.Blog .post-entry img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none
}
.progress {
position: relative;
height: 2px;
display: block;
z-index: 9999;
width: 100%;
background-color: transparent;
/* Set the background color to transparent */
border-radius: 2px;
background-clip: padding-box;
overflow: hidden;
}
.progress .indeterminate {
background-color: purple;
}
.progress .indeterminate:before {
content: '';
position: absolute;
background-color: #9303FA;
top: 0;
left: -100%;
/* Start the bar from outside the progress bar */
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 5s linear infinite;
/* Change animation duration to 5 seconds */
animation: indeterminate 5s linear infinite;
/* Change animation duration to 5 seconds */
}
@-webkit-keyframes indeterminate {
0% {
left: -100%;
/* Move the bar from outside the progress bar */
right: 100%;
}
100% {
left: 100%;
/* Fill the progress bar completely */
right: -100%;
}
}
@keyframes indeterminate {
0% {
left: -100%;
/* Move the bar from outside the progress bar */
right: 100%;
}
100% {
left: 100%;
/* Fill the progress bar completely */
right: -100%;
}
}
/**/
/*svg .d,
.isBkm,
.cBkPs,
.ckW,
.tocL,
.headR .headM .themeBtn,
.cusW {
display: none
}
/* Unfilled Ads */
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important
}
/* Main Element */
html {
scroll-behavior: smooth;
overflow-x: hidden
}
body {
-webkit-font-smoothing: antialiased;
position: relative;
top: 0 !important;
margin: 0;
padding: 0 !important;
width: 100%;
font-family: var(--fontB);
font-size: 14px;
color: var(--bodyC);
background: var(--bodyB);
-webkit-font-smoothing: antialiased
}
.secIn {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
max-width: var(--contentW)
}
/* Notif Section */
.ntfC {
display: flex;
align-items: center;
position: relative;
min-height: var(--notifH);
background: var(--notifU);
color: var(--notifC);
padding: 10px 15px;
font-size: 13px;
transition: var(--trans-1);
overflow: hidden;
border-radius: 10px;
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: var(--linkC);
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: var(--buttonR);
background: #fffdfc;
color: var(--notifC);
font-size: 12px;
font-weight: 400;
box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
text-decoration: none
}
.drK .ntfA>a {
background: var(--darkU);
color: #fffdfc
}
/* Fixed/Pop-up Element */
.fixL {
display: flex;
align-items: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin-bottom: -100%;
z-index: 20;
transition: var(--trans-1);
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: var(--contentB)
}
.fixH,
.mnH {
display: flex;
background: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 0 10px;
z-index: 2
}
.fixH .cl {
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 {
content: '\2715';
line-height: 18px;
font-size: 14px
}
.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,
.BlogSearch input:focus~.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 {
max-width: 520px
}
/* display:flex */
.headI,
.bIc {
display: flex;
align-items: center
}
/* Header Section */
header {
width: 100%;
z-index: 10;
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, .07)
}
header a {
display: block;
color: var(--bodyC)
}
header svg {
width: 20px;
height: 20px;
fill: var(--headerI);
opacity: .8
}
header svg.line {
fill: none;
stroke: var(--headerI)
}
.headIc .tNav svg>* {
opacity: 0;
transition: var(--trans-1)
}
.hdMn .navI:not(:checked)~.mainWrp .headIc .tNav .h1,
.hdMn .navI:checked~.mainWrp .headIc .tNav .h2,
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .headIc .tNav .h3,
.bD:not(.hdMn) .navI:checked~.mainWrp .headIc .tNav .h1 {
opacity: 1
}
.headCn {
position: relative;
height: var(--headerH);
color: var(--headerC);
background: var(--headerB);
display: flex
}
.headL {
display: flex;
align-items: center;
width: var(--navW);
/* change var(--navW) to increase header title width */
padding: 0 0 0 20px;
transition: var(--trans-1)
}
.headL .headIc {
flex: 0 0 30px
}
.headL .headN {
width: calc(100% - 30px);
padding: 0 0 0 5px
}
.headR {
padding: 0 25px;
flex-grow: 1;
transition: var(--trans-1)
}
.headI .headP {
display: flex;
justify-content: flex-end;
position: relative
}
html {
scroll-behavior: smooth;
}
.headI {
height: 100%;
justify-content: space-between;
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
}
.headIc .tNav .l {
stroke: var(--linkC)
}
.drK .headIc .tNav .l {
stroke: var(--darkU)
}
.headIc .isSrh {
display: none
}
ul.headIc {
position: relative;
width: calc(100% + 14px);
left: -7px;
right: -7px;
justify-content: flex-end
}
ul.headIc li {
margin: 0 2px
}
ul.headIc li>* {
cursor: pointer
}
.Header {
background-repeat: no-repeat;
background-size: 100%;
background-position: center
}
.Header img {
max-width: 160px;
max-height: 45px
}
.Header .headH {
display: block;
color: inherit;
font-size: var(--headerT);
font-weight: var(--headerW)
}
.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: 400 11px var(--fontB);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 60px;
opacity: .6
}
.Header .headSub::before {
content: attr(data-text)
}
/* Icon */
.tIc {
width: 30px;
height: 30px;
justify-content: center
}
.tIc::after {
content: '';
background: var(--transB);
border-radius: var(--iconHr);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: var(--trans-1);
opacity: 0;
visibility: hidden
}
.tIc:hover::after {
opacity: 1;
visibility: visible;
transform: scale(1.3, 1.3)
}
.tDL .d2,
.drK .tDL .d1 {
display: none
}
/* mainIn Section */
.mainWrp:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
width: 170px;
height: 170px;
border-radius: 0 0 0 200px;
background: rgba(0, 0, 0, .02);
z-index: -1
}
.drK .mainWrp:after {
background: rgba(0, 0, 0, .10)
}
.blogCont {
flex-grow: 1;
padding: 20px 0 0;
position: relative;
transition: var(--trans-1)
}
.blogCont .section:not(.no-items),
.blogCont .widget:not(:first-child) {
margin-top: 40px
}
.blogCont .section:first-child,
.blogCont footer .widget:not(:first-child),
.blogCont .section.mobMn {
margin-top: 0
}
.blogAd .section:not(.no-items) {
margin-bottom: 40px
}
#notif-widget .widget:not(:first-child) {
margin-top: 20px
}
.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(var(--headerH) + 10px)
}
.onPs .blogM .mainbar {
max-width: var(--pageW)
}
.onPg .blogM .mainbar {
max-width: var(--pageW)
}
/* mainNav */
.mnBrs {
background: var(--contentB)
}
.mnBr a {
color: inherit
}
.mnBr ul {
list-style: none;
margin: 0;
padding: 0
}
.mnMob {
align-self: flex-end;
background: inherit;
border-top: 1px solid var(--contentL);
bottom: 0;
left: 0;
padding: 15px 20px 20px;
position: absolute;
right: 0;
text-align: center;
z-index: 1
}
.mnMob .mSoc {
display: flex;
justify-content: center;
left: -7px;
margin-top: 5px;
position: relative;
right: -7px;
width: calc(100% + 14px)
}
.mnMob:not(.no-items)+.mnMen {
padding-bottom: 100px
}
.mnMen {
padding: 20px 15px
}
.mMenu {
margin-bottom: 10px
}
.mMenu>* {
display: inline
}
.mMenu>*:not(:last-child)::after {
content: '\00B7';
font-size: 90%;
opacity: .6
}
.mSoc>* {
position: relative
}
.mSoc svg {
z-index: 1
}
.mSoc svg,
.mnMn svg {
width: 20px;
height: 20px;
opacity: .8
}
.mSoc span,
.mMenu span {
opacity: .7
}
.mNav {
display: none;
position: relative;
max-width: 30px
}
.mNav svg {
height: 18px;
opacity: .7;
z-index: 1
}
.mnMn>li {
position: relative
}
.mnMn>li.br::after {
content: '';
display: block;
border-bottom: 1px solid var(--contentL);
margin: 12px 5px
}
.mnMn li:not(.mr) .a:hover,
.mnMn ul li>*:hover {
background: var(--transB)
}
.mnMn li:not(.mr) .a:hover,
.mnMn ul li a:hover {
color: var(--linkC)
}
.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: var(--trans-1)
}
.mnMn ul li>* {
padding: 10px
}
.mnMn li li a>* {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: flex;
line-height: 20px;
overflow: hidden
}
.mnMn li li a>* svg {
margin-right: 5px
}
.mnMn .a>* {
margin: 0 5px
}
.mnMn .a:hover svg:not(.d) {
fill: var(--linkC)
}
.mnMn .a:hover svg.line:not(.d) {
fill: none;
stroke: var(--linkC)
}
.mnMn .n,
.mnMn ul li>* {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 0 calc(100% - 64px)
}
.mnMn svg {
flex-shrink: 0
}
.mnMn svg.d {
width: 14px;
height: 14px
}
.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;
position: relative;
opacity: 1;
visibility: visible
}
@media screen and (min-width:897px) {
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn :not(.mr) ul li>*,
.hdMn .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
margin-left: 5px;
overflow: visible;
width: calc(100% + 5px)
}
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul::before,
.hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul::before {
border-left: 1px solid;
content: '';
display: block;
height: calc(100% - 20px);
left: 15px;
opacity: .2;
position: absolute;
width: 1px
}
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul li a::before,
.hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul li a::before {
border-bottom: 1px solid;
content: '';
display: block;
height: 1px;
left: -15px;
opacity: .2;
position: absolute;
top: 17.5px;
width: 13px
}
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul.s li a::before,
.hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul.s li a::before {
top: 20px
}
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul:not(.s)::before,
.hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul:not(.s)::before {
height: calc(100% - 18.5px)
}
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg,
.hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
fill: var(--linkC)
}
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg.line,
.hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
fill: none;
stroke: var(--linkC)
}
.drK:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg,
.drK.hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
fill: var(--darkU)
}
.drK:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg.line,
.drK.hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
fill: none;
stroke: var(--darkU)
}
.Rtl:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp ul:before,
.Rtl.hdMn .navI:checked~.mainWrp .blogMn .drp ul:before {
left: unset;
right: 15px
}
.Rtl:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn :not(.mr) ul li>*,
.Rtl.hdMn .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
margin-left: 0;
margin-right: 5px
}
.Rtl:not(.hdMn) .navI:not(checked)~.mainWrp .blogMn .drp ul li a:before,
.Rtl.hdMn .navI:checked~.mainWrp .blogMn .drp ul li a:before {
left: unset;
right: -15px
}
}
@media screen and (max-width:896px) {
.bD .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
margin-left: 5px;
overflow: visible;
width: calc(100% + 5px)
}
.bD .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul::before {
border-left: 1px solid;
content: '';
display: block;
height: calc(100% - 20px);
left: 15px;
opacity: .2;
position: absolute;
width: 1px
}
.bD .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul li a::before {
border-bottom: 1px solid;
content: '';
display: block;
height: 1px;
left: -15px;
opacity: .2;
position: absolute;
top: 17.5px;
width: 13px
}
.bD .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul.s li a::before {
top: 20px
}
.bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
fill: var(--linkC)
}
.bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
fill: none;
stroke: var(--linkC)
}
.drK.bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
fill: var(--darkU)
}
.drK.bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
fill: none;
stroke: var(--darkU)
}
.Rtl .navI:checked~.mainWrp .blogMn .drp ul:before {
left: unset;
right: 15px
}
.Rtl .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
margin-left: 0;
margin-right: 5px
}
.Rtl .navI:checked~.mainWrp .blogMn .drp ul li a:before {
left: unset;
right: -15px
}
}
/* Mobile Menu */
.mobMn {
position: fixed;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid var(--mobL);
border-radius: var(--mobBr) var(--mobBr) 0 0;
background: var(--mobB);
color: var(--mobT);
padding: 0 20px;
box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, .1);
z-index: 2;
font-size: 12px
}
.mobMn svg.line {
stroke: var(--mobT);
opacity: .8
}
.mobMn ul {
height: 55px;
display: flex;
align-items: center;
justify-content: center;
list-style: none;
margin: 0;
padding: 0
}
.mobMn li {
display: flex;
justify-content: center;
flex: 1 0 20%
}
.mobMn li>* {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 35px;
height: 35px;
border-radius: 20px;
padding: 0 8px;
transition: var(--trans-1);
color: inherit
}
.mobMn li svg {
margin: 0 3px;
flex-shrink: 0
}
.mobMn li>*::after {
content: attr(data-text);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 0;
margin: 0;
transition: inherit;
opacity: .7
}
.mobMn li>*:hover::after {
max-width: 70px;
margin: 0 3px
}
.mobMn .nmH {
opacity: .7
}
.mobMn li>*:hover {
background: var(--mobHv)
}
.mobMn li>*:hover svg.line {
fill: var(--mobT) !important;
opacity: .5
}
.mobMn li>*:hover svg.line .svgC {
fill: var(--linkB) !important;
stroke: var(--linkB)
}
/* Style 2 */
.MN-2 .mobMn {
font-size: 10px
}
.mobS .mobMn li>* {
flex-direction: column;
position: relative
}
.mobS .mobMn li>*:hover {
background: transparent
}
.MN-2 .mobMn li>*::after {
max-width: none
}
/* Style 3 */
.MN-3 .mobMn li>*::after,
.MN-4 .mobMn li>*::after {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
position: absolute;
bottom: -2px;
opacity: 0
}
.MN-3 .mobMn li>*:hover::after,
.MN-4 .mobMn li>*:hover::after {
background: var(--linkB);
opacity: .7
}
.MN-3 .mobMn li>*:hover svg.line,
.MN-4 .mobMn li>*:hover svg.line {
stroke: var(--linkB);
fill: var(--linkB) !important;
opacity: .7
}
/* Style 4 */
.MN-4 .mobMn {
left: 15px;
right: 15px;
bottom: 15px;
padding: 0 10px;
border-radius: var(--headerR);
box-shadow: 0 5px 35px rgba(0, 0, 0, .1);
transition: bottom 1.2s ease;
-webkit-transition: bottom 1.2s ease
}
.MN-4 .mobMn.slide {
bottom: -150px;
transition: bottom 1.5s ease;
-webkit-transition: bottom 1.5s ease
}
/* Back to Top */
.toTopB {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 20px;
bottom: 20px;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
visibility: hidden;
opacity: 0;
z-index: 5;
transform: scale(0);
transition: transform .3s ease, opacity .3s ease, visibility .3s ease, margin-bottom 1s ease
}
.toTopB.vsbl {
visibility: visible;
opacity: 1;
transform: scale(1)
}
.MN-4 .toTopB {
bottom: 20px
}
.toTopB:hover {
opacity: .8
}
.toTopB svg {
height: 100%;
width: 100%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
stroke-width: 1.5;
cursor: pointer
}
.toTopB svg .b {
fill: #fff;
stroke: #e6e6e6;
opacity: .9
}
.toTopB svg .c {
fill: none;
stroke: var(--linkC);
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
stroke-linecap: round
}
.toTopB svg .d {
fill: none;
stroke: var(--iconC)
}
.drK .toTopB svg .b {
fill: var(--darkBa);
stroke: #404045
}
.drK .toTopB svg .c {
stroke: var(--darkU)
}
.drK .toTopB svg .d {
stroke: var(--darkT)
}
/* Footer */
footer {
padding: 40px 0 0;
border-radius: 50px;
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
backdrop-filter: blur(10.1px);
-webkit-backdrop-filter: blur(10.1px);
color: var(--fotT);
font-size: 95%;
line-height: 1.8em;
box-shadow: 0 0 15px rgb(0 0 0 / 7%);
border-radius: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px
}
footer .widget {
margin-bottom: 35px
}
footer .widget ul {
list-style: none;
margin: 0;
padding: 0
}
footer .footerContent {
display: flex;
flex-wrap: wrap;
padding: 0 25px
}
footer .footerContent>:first-child {
width: 25%;
margin-right: auto
}
footer .footerContent>:last-child {
width: 30%;
margin-left: auto
}
footer .footerContent>* {
width: 18%
}
footer .footerContent .title {
color: inherit;
margin-bottom: 12px;
font-size: 16px;
font-weight: 600
}
footer .footerContent .title:after {
display: none
}
footer .LinkList a {
display: inline-flex;
align-items: center;
color: inherit;
line-height: 24px
}
footer .LinkList a svg.line {
width: 15px;
height: 15px;
margin-right: 15px
}
footer .aboutUs {
margin-right: 25px
}
footer .aboutUs .titleText:before {
content: attr(data-text);
font-size: 13px;
opacity: .6;
display: block;
margin-bottom: 5px
}
footer .aboutUs .aboutDesc {
margin: 20px 0 0;
line-height: 1.5em
}
footer .aboutLinks {
display: flex;
align-items: flex-start
}
footer .aboutLinks li:not(:last-child) {
margin-right: 5px
}
footer .LinkList .aboutLinks a svg.line {
width: 20px;
height: 22px;
margin-right: 0;
stroke: var(--iconCa);
stroke-width: 1.5
}
.drK footer .LinkList .aboutLinks a svg.line {
stroke: var(--darkT)
}
footer .LinkList .aboutLinks a {
display: flex
}
footer .creditInner {
padding: 28px 25px
}
footer .creditInner {
display: flex;
justify-content: space-between
}
footer .creditInner p {
margin: 0;
padding-right: 20px;
overflow: hidden;
white-space: nowrap
}
footer .creditInner .creator {
opacity: 0
}
footer .toTop {
display: flex;
align-items: center;
opacity: .6;
white-space: nowrap
}
footer .toTop:before {
content: 'To top'
}
footer .toTop svg {
stroke: #262d3d;
margin-left: 5px;
width: 22px;
height: 22px
}
@media screen and (max-width:896px) {
footer {
padding: 40px 0 3rem;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px
}
}
@media screen and (max-width:640px) {
footer .footerContent>*,
footer .footerContent>:first-child,
footer .footerContent>:last-child {
width: 50%
}
}
@media screen and (max-width:480px) {
footer .creditInner {
font-size: 12px
}
footer .footerContent>*,
footer .footerContent>:first-child,
footer .footerContent>:last-child {
width: 100%
}
footer .footerContent>:nth-child(1) {
order: 1
}
footer .footerContent>:nth-child(2) {
order: 2
}
footer .footerContent>:nth-child(3) {
order: 3
}
footer .footerContent>:nth-child(4) {
order: 4
}
footer .toTop:before {
content: 'Top'
}
}
/* Wave Animation */
.wvC {
position: absolute;
bottom: 0;
width: 100%;
z-index: -1
}
.wvS {
position: relative
}
.wvS .waves {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
min-height: 100px;
max-height: 150px
}
.wvH {
position: relative;
height: 60px;
background: var(--waveB)
}
.plx>use {
fill: var(--waveB);
animation: waveMove 25s cubic-bezier(.55, .5, .45, .5) infinite
}
.plx>use:nth-child(1) {
opacity: .7;
animation-delay: -2s;
animation-duration: 7s
}
.plx>use:nth-child(2) {
opacity: .5;
animation-delay: -3s;
animation-duration: 10s
}
.plx>use:nth-child(3) {
opacity: .3;
animation-delay: -4s;
animation-duration: 13s
}
.plx>use:nth-child(4) {
opacity: 1;
animation-delay: -5s;
animation-duration: 20s
}
@media (max-width: 768px) {
.wvS .waves {
height: 40px;
min-height: 50px;
}
.wvC .wvH {
height: 100px
}
}
@keyframes waveMove {
0% {
transform: translate3d(-90px, 0, 0)
}
100% {
transform: translate3d(85px, 0, 0)
}
}
.drK .wvH {
background: var(--darkW)
}
.drK .plx>use {
fill: var(--darkW)
}
/* Article Section */
.onIndx .blogPts,
.itemFt .itm {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
width: calc(100% + 20px);
left: -10px;
right: -10px
}
.onIndx .blogPts>*,
.itemFt .itm>* {
flex: 0 0 calc(50% - 20px);
width: calc(50% - 20px);
margin-bottom: 0;
margin-left: 10px;
margin-right: 10px
}
.onIndx .blogPts>* {
background: var(--contentB);
box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
border-radius: 10px;
margin-bottom: 20px;
padding: 10px 10px 45px;
position: relative
}
.onIndx .blogPts .pTag {
padding-bottom: 0
}
.onIndx .pTag .pInf {
display: none
}
.onIndx .blogPts .pInf {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px
}
.onIndx .blogPts {
align-items: stretch
}
.onIndx .blogPts.mty {
display: block;
width: 100%;
left: 0;
right: 0
}
.onIndx .blogPts.mty .noPosts {
width: 100%;
margin: 0
}
.onIndx .blogPts div.ntry {
padding-bottom: 0;
flex: 0 0 calc(100% - 20px)
}
.blogPts .ntry.noAd .widget
/*, .Blog ~ .HTML*/
{
display: none
}
.cPst .pLbls>* {
padding: 16px 3px
}
.cPst .pLbls>*:not(:last-child) {
padding-right: 0
}
.cPst .pLbls>*:not(:last-child)::after {
padding-left: 3px
}
.ctgry article {
animation: ctgryFade 1.5s;
-webkit-animation: ctgryFade 1.5s
}
@keyframes ctgryFade {
from {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes ctgryFade {
from {
opacity: 0
}
to {
opacity: 1
}
}
/* Blog title */
.blogTtl {
font-size: 14px;
margin: 0 0 30px;
width: calc(100% + 16px);
display: flex;
justify-content: space-between;
position: relative;
left: -8px;
right: -8px
}
.blogTtl .t,
.blogTtl.hm .title {
margin: 0 8px;
flex-grow: 1
}
.blogTtl .t span {
font-weight: 400;
font-size: 90%;
opacity: .7
}
.blogTtl .t span::before {
content: attr(data-text)
}
.blogTtl .t span::after {
content: '';
margin: 0 4px
}
.blogTtl .t span.hm::after {
content: '/';
margin: 0 8px
}
/* No Post */
.blogPts .noPosts {
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px
}
/* Thumbnail */
.pThmb {
flex: 0 0 calc(50% - 12.5px);
overflow: hidden;
position: relative;
border-radius: 5px;
margin-bottom: 20px;
background: var(--transB)
}
.pThmb .thmb {
display: block;
position: relative;
padding-top: 52.335%;
color: inherit;
transition: var(--trans-4);
-webkit-transition: var(--trans-4)
}
article:hover .thmb {
transform: scale(1.0);
-webkit-transform: scale(1.03)
}
.pThmb .thmb amp-img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
max-height: 108%;
text-align: center;
transform: translate(-50%, -50%)
}
.pThmb div.thmb span::before {
content: attr(data-text);
opacity: .7;
white-space: nowrap
}
.pThmb:not(.nul)::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0));
animation: shimmer 2s infinite;
content: ''
}
.pThmb.iyt:not(.nul) .thmb::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .4) url("data:image/svg+xml,") center / 35px no-repeat;
opacity: 0;
transition: var(--trans-1)
}
.pThmb.iyt:not(.nul):hover .thmb::after {
opacity: 1
}
/* Sponsored */
.iFxd {
display: flex;
justify-content: flex-end;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 10px 6px;
font-size: 13px;
line-height: 16px
}
.iFxd.l {
right: auto
}
.Rtl .iFxd.l {
right: 0;
left: auto
}
.iFxd>* {
display: flex;
align-items: center;
margin: 0 5px;
padding: 5px 2.5px;
border-radius: var(--thumbEr);
background: var(--contentB);
color: inherit;
box-shadow: 0 8px 25px 0 rgba(0, 0, 0, .1)
}
.iFxd>* svg {
width: 25px;
height: 25px;
stroke-width: 1.5;
margin: 0 2.5px;
opacity: .7
}
.iFxd .cmnt,
.iFxd .pV {
padding: 5px;
color: var(--bodyC)
}
.iFxd .bM {
cursor: pointer
}
.iFxd .bM:hover {
opacity: .8
}
.iFxd .pV.hidden {
display: none
}
.iFxd .cmnt::after,
.iFxd .pV::after {
content: attr(data-text);
margin: 0 2.5px;
opacity: .8
}
.drK .iFxd>* svg.line {
stroke: var(--iconC)
}
/* Label */
.pLbls::before,
.pLbls>*::before {
content: attr(data-text)
}
.pLbls::before {
opacity: .7
}
.pLbls>* {
color: inherit;
display: inline;
padding: 16px 0
}
.pLbls>*:not(:last-child)::after {
content: '/'
}
/* Profile Images and Name */
.im {
width: 35px;
height: 35px;
border-radius: 16px;
background-color: var(--transB);
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)
}
/* Title and Entry */
.pTtl {
font-size: 1.1rem;
line-height: 1.5em
}
.pTtl.sml {
font-size: 1rem
}
.pTtl.itm {
font-size: var(--postT);
font-family: var(--fontBa);
font-weight: 700;
line-height: 1.3em
}
.pTtl.itm.nSpr {
margin-bottom: 30px
}
.aTtl a:hover {
color: var(--linkC)
}
.aTtl a,
.pSnpt {
color: inherit;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden
}
.pEnt {
margin-top: 40px;
font-size: var(--postF);
font-family: var(--fontBa);
line-height: 1.8em
}
/* Snippet, Description, Headers and Info */
.onIndx .pCntn {
padding: 0 5px
}
.pHdr {
margin-bottom: 8px
}
.pHdr .pLbls {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: .8
}
.pSml {
font-size: 93%
}
.pSnpt {
-webkit-line-clamp: 2;
margin: 12px 0 0;
font-family: var(--fontB);
font-size: 14px;
line-height: 1.5em;
opacity: .8
}
.pSnpt.nTag {
color: var(--linkC);
opacity: 1;
margin-bottom: 10px
}
.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 {
background: var(--contentB);
box-shadow: 0 0 25px rgba(0, 0, 0, .07);
padding: 15px;
border-radius: 10px;
justify-content: flex-start;
align-items: center;
margin-top: 25px;
position: relative;
width: 100%
}
.drK .pInf.ps {
background: var(--darkBa)
}
.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-right: 8px
}
.Rtl .pInf .pIm {
margin-right: 0;
margin-left: 8px
}
.pInf .pNm {
flex-grow: 1;
width: calc(100% - 160px);
display: inline-flex;
flex-wrap: wrap;
align-items: baseline
}
.pInf .pNm.l {
display: none
}
.pInf .pCm {
flex-shrink: 0;
max-width: 58px;
margin: 0 2px
}
.pInf .pCm.l {
max-width: 95px
}
.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;
justify-content: center;
width: 30px;
height: 30px;
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 .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 a.nm {
color: var(--bodyC)
}
.drK .pInf a.nm {
color: var(--darkT)
}
.pInf .pIn {
display: inline
}
.pInf .nm {
margin: 0 4px
}
/*.pInf .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: var(--trans-2)
}
.pJmp::before {
content: attr(aria-label)
}
.pJmp svg {
height: 18px;
width: 18px;
stroke: var(--linkC);
flex-shrink: 0
}
.ntry:hover .pJmp,
.itm:hover .pJmp {
opacity: 1
}
.ntry:not(.noAd) .pJmp,
.itemFt .itm .pJmp {
animation: indicator 2s 1s infinite
}
.ntry:not(.noAd):hover .pJmp,
.itemFt:hover .itm .pJmp {
animation: none
}
/* Product view */
.pTag .pPad {
padding: 10px 0
}
.pTag .pPric {
font-size: 20px;
color: var(--linkC);
padding-top: 20px
}
.pTag .pPric::before,
.pTag .pInfo small {
content: attr(data-text);
font-size: small;
opacity: .8;
display: block;
line-height: 1.5em;
color: var(--bodyC)
}
.pTag .pInfo {
font-size: 14px;
line-height: 1.6em
}
.pTag .pInfo:not(.o) {
position: relative;
width: calc(100% + 20px);
left: -10px;
right: -10px;
display: flex
}
.pTag .pInfo:not(.o)>* {
width: 50%;
padding: 0 10px
}
.pTag .pMart {
margin: 10px 0 12px;
display: flex;
flex-wrap: wrap;
line-height: 1.6em;
position: relative;
width: calc(100% + 8px);
left: -4px;
right: -4px
}
.pTag .pMart>* {
margin: 0 4px
}
.pTag .pMart small {
width: calc(100% - 8px);
margin-bottom: 10px
}
.pTag .pMart a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--contentL);
border-radius: 12px;
margin-bottom: 8px
}
.pTag .pMart img {
width: 20px;
display: block
}
/* Blog pager */
.blogPg {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 90%;
font-family: var(--fontB);
line-height: 20px;
color: #fffdfc;
margin: 25px 0 50px;
max-width: 100%
}
.blogPg>* {
display: flex;
justify-content: center;
align-items: center;
min-width: 40px;
padding: 10px 13px;
margin: 5px;
color: inherit;
background: var(--linkB);
border-radius: var(--buttonR);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
}
.blogPg>* svg {
width: 18px;
height: 18px;
stroke: var(--darkT);
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: flex;
}
.blogPg .nwLnk::after,
.blogPg .jsLd::after {
content: attr(data-text);
margin: 0 8px
}
.blogPg .olLnk::before {
margin: 0 8px
}
.blogPg .nPst,
.blogPg .current {
background: var(--contentL);
color: var(--bodyCa)
}
.blogPg .nPst.jsLd svg {
fill: var(--darkTa);
stroke: var(--darkTa)
}
.blogPg .nPst svg.line {
stroke: var(--darkTa)
}
/* Breadcrumb */
.brdCmb {
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.brdCmb a {
color: var(--bodyC)
}
.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
}
/* Article Style */
.pS h1,
.pS h2,
.pS h3,
.pS h4,
.pS h5,
.pS h6 {
margin: 1.5em 0 18px;
font-family: var(--fontBa);
font-weight: 700;
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
}
/* Paragraph */
.pS p {
margin: 1.7em 0
}
.pIndent {
text-indent: 2.5rem
}
.onItm: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
}
/* Img and Ad */
.pS img {
display: inline-block;
border-radius: 5px;
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 */
.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'
}
/* Ext link */
.extL {
display: inline-flex;
align-items: center
}
.extL::after {
content: '';
width: 14px;
height: 14px;
display: inline-block;
margin: 0 5px;
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.extL.alt::after {
background-image: url("data:image/svg+xml,")
}
/* Scroll img */
.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>* {
width: calc(33.3% - 14px);
margin: 0 7px
}
.btImg label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
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
}
/* Post related */
.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 a,
.drK .pRelate a {
color: inherit
}
.pRelate b {
font-weight: 400;
margin: 0;
opacity: .8
}
.pRelate ul,
.pRelate ol {
margin: 8px 0 0;
padding: 0 20px
}
/* Blockquote */
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
}
/* Table */
.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
}
/* Img caption */
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
}
/* Syntax */
.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:not(.tb):hover::before {
content: 'Double click to copy | '
}
.pre:not(.tb).html:hover::before {
content: 'Double click to copy | .html'
}
.pre:not(.tb).css:hover::before {
content: 'Double click to copy | .css'
}
.pre:not(.tb).js:hover::before {
content: 'Double click to copy | .js'
}
.pre[data-text]:not([data-text='']):not(.tb)::before {
content: attr(data-text)
}
.pre[data-text]:not([data-text='']):not(.tb):hover::before {
content: 'Double Click to Copy | ' attr(data-text)
}
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 {
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)
}
/* Multi syntax */
.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
}
/* ToC */
.pS details summary {
list-style: none;
outline: none
}
.pS details summary::-webkit-details-marker {
display: none
}
details.sp {
padding: 16px 20px;
background: var(--contentB);
box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
border: 0;
border-radius: 10px;
}
details.sp summary {
display: flex;
justify-content: space-between;
align-items: baseline
}
details.sp summary::after {
content: attr(data-show);
padding: 4px 10px;
background: var(--linkB);
color: #fffdfc;
font-size: 12px;
border-radius: var(--buttonR);
cursor: pointer
}
details.sp[open] summary::after {
content: attr(data-hide)
}
details.toc a {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: inherit
}
details.toc ol,
details.toc ul {
padding: 0 20px;
list-style-type: decimal
}
details.toc li ol,
details.toc li ul {
margin: 5px 0 10px;
list-style-type: lower-alpha
}
/* Accordion */
.showH {
margin: 1.7em 0;
font-size: .93rem;
font-family: var(--fontB);
line-height: 1.7em
}
details.ac {
padding: 18px 15px;
background: var(--contentB);
box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
margin: 20px 0;
border-radius: 10px
}
details.ac summary {
font-weight: 700;
cursor: default;
display: flex;
align-items: baseline;
transition: var(--trans-1);
cursor: pointer
}
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 15px;
opacity: .9
}
.drK details.sp,
.drK details.ac {
background: var(--darkBs)
}
.drK details.sp summary::after {
background: var(--darkU)
}
/* Tabs */
.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)
}
/* Split */
.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
}
/* Button */
.button {
display: inline-flex;
align-items: center;
margin: 10px 0;
padding: 12px 15px;
outline: 0;
border: 0;
border-radius: var(--buttonR);
line-height: 20px;
color: #fffdfc;
background: var(--linkB);
font-size: 14px;
font-family: var(--fontB);
white-space: nowrap;
overflow: hidden;
max-width: 320px
}
.button.ln {
color: inherit;
background: transparent;
border: 1px solid var(--bodyCa)
}
.button.ln:hover {
border-color: var(--linkB);
box-shadow: 0 0 0 1px var(--linkB) inset
}
.btnF {
display: flex;
justify-content: center;
margin: 10px 0;
width: calc(100% + 12px);
left: -6px;
right: -6px;
position: relative
}
.btnF>* {
margin: 0 6px
}
/* Download btn */
.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: var(--buttonR)
}
.dlBox .fT::before {
content: attr(data-text);
opacity: .7
}
.dlBox .fT.lazy {
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.dlBox .fT.lazy::before {
display: none
}
.dlBox a {
flex-shrink: 0;
margin: 0;
padding: 10px 12px;
border-radius: var(--buttonR);
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
}
.dldCo {
display: flex;
align-items: center;
justify-content: center;
max-width: 480px;
background: rgba(0, 0, 0, .03);
border-radius: 10px;
margin: 30px 0;
transition: margin .6s ease;
-webkit-transition: margin .6s ease
}
.dldCo::before {
content: 'Generating Download Link...';
position: absolute;
z-index: 1;
font-size: 13px;
font-family: var(--fontB);
opacity: .8
}
.dldBx {
visibility: hidden;
opacity: 0;
transition: opacity .3s ease;
-webkit-transition: opacity .3s ease
}
.dldSl {
visibility: hidden;
opacity: 0;
transition: opacity .3s ease, bottom .6s ease;
-webkit-transition: opacity .3s ease, bottom .6s ease
}
.drK .dldCo {
background: var(--darkBa)
}
/* Icon btn */
.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,")
}
/* Article Style Responsive */
@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
}
}
/* Author profile */
.admAbt {
padding-top: 30px
}
.admPs {
display: flex;
max-width: 480px;
margin: 30px 0;
padding: 12px 12px 15px;
background: var(--contentB);
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;
/*display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden*/
}
/* Share btn */
.pSh {
margin: 15px 0;
padding: 18px 0;
border-bottom: 1px solid rgba(0, 0, 0, .05)
}
.pShc {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
width: calc(100% + 18px);
left: -9px;
right: -9px;
font-size: 13px
}
.pShc::before {
content: attr(data-text);
margin: 0 9px;
flex-shrink: 0
}
.pShc>* {
margin: 0 5px;
display: flex;
align-items: center;
color: inherit;
padding: 12px;
border-radius: var(--buttonR);
background: #f1f1f0
}
.pShc .c {
color: #fffdfc
}
.pShc .c svg {
fill: #fffdfc
}
.pShc .c::after {
content: attr(aria-label)
}
.pShc .fb {
background: #1778F2
}
.pShc .wa {
background: #128C7E
}
.pShc .tw {
background: #1DA1F2
}
.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(--linkC);
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: var(--trans-1);
animation: fadein 2s ease forwards;
opacity: 0;
height: 22px
}
/* Label Hashtags */
.lbsHs {
display: block;
direction: ltr;
text-align: left;
margin-bottom: 25px
}
.lbsHs>a {
color: var(--bodyC)
}
.drK .lbsHs>a {
color: var(--darkT)
}
.lbHs {
padding: 9px 12px;
background: var(--contentB);
font-family: var(--fontVa);
font-size: 13px;
border-radius: var(--greetR);
box-shadow: 3px 6px 15px rgba(0, 0, 0, .07);
margin-right: 5px
}
.lbHs::before {
content: attr(data-text);
opacity: .8
}
.drK .lbHs {
background: var(--darkBa)
}
.Rtl .lbsHs {
text-align: right
}
.Rtl .lbHs {
margin-right: 0;
margin-left: 5px
}
/* Widget Style */
.widget .imgThm {
display: block;
position: absolute;
top: 50%;
left: 50%;
max-width: none;
max-height: 100%;
font-size: 12px;
text-align: center;
transform: translate(-50%, -50%)
}
.widget .title {
margin: 0 0 25px;
font-size: var(--widgetT);
font-weight: var(--widgetTw);
position: relative
}
.widget .title.dt::before {
position: absolute;
top: 0;
right: 0;
content: '';
width: 20px;
height: 20px;
display: inline-block;
opacity: .3;
background: url("data:image/svg+xml,") center / 20px no-repeat
}
.Rtl .widget .title::before {
right: auto;
left: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg)
}
.widget .title::after {
content: '';
display: inline-block;
vertical-align: middle;
width: var(--widgetTa);
margin: 0 10px;
border-bottom: 1px solid var(--widgetTac);
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: var(--trans-1)
}
.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(--linkB);
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: var(--linkB);
font-size: 14px;
white-space: nowrap;
overflow: hidden;
max-width: 100%
}
.widget input[type=button]:hover,
.widget input[type=submit]:hover {
opacity: .7
}
/* Widget BlogSearch */
.BlogSearch {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 12
}
.BlogSearch form {
position: relative;
min-width: 320px
}
.BlogSearch input {
position: relative;
display: block;
background: var(--srchB);
border: 0;
outline: 0;
margin-top: -100%;
padding: 10px 55px;
width: 100%;
height: 72px;
transition: var(--trans-1);
z-index: 2;
border-radius: 0 0 var(--srchMr) var(--srchMr)
}
.BlogSearch input:focus {
margin-top: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}
.BlogSearch input:focus~button.sb {
opacity: .9
}
.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(--srchI)
}
.BlogSearch button.sb {
left: auto;
right: 0;
opacity: 0;
font-size: 13px
}
.BlogSearch button.sb::before {
content: '\2715'
}
@media screen and (min-width:897px) {
header .BlogSearch {
position: static;
z-index: 1
}
header .BlogSearch input {
margin-top: 0;
padding: 12px 42px;
height: auto;
font-size: 13px;
border-radius: var(--srchDr);
background: rgba(0, 0, 0, .03);
width: calc(100% + 26px);
left: -13px;
right: -13px;
transition: var(--trans-2)
}
header .BlogSearch input:hover {
background: var(--transB)
}
header .BlogSearch input:focus {
box-shadow: none;
margin-top: 0;
background: var(--transB)
}
header .BlogSearch .sb {
padding: 0
}
header .BlogSearch .fCls {
display: none
}
}
/* Widget Profile */
.prfI:checked~.mainWrp .wPrf {
top: 0;
opacity: 1;
visibility: visible
}
.prfI:checked~.mainWrp .wPrf~.fCls {
z-index: 3;
opacity: 1;
visibility: visible
}
.wPrf {
display: flex;
position: absolute;
top: -5px;
right: 0;
background: var(--contentB);
border-radius: 16px 5px 16px 16px;
width: 260px;
max-height: 400px;
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, .1);
transition: var(--trans-1);
z-index: 4;
opacity: 0;
visibility: hidden;
overflow: hidden
}
.wPrf .prfS {
background: inherit
}
.wPrf.tm .im {
width: 39px;
height: 39px;
flex-shrink: 0
}
.wPrf.sl .im {
width: 60px;
height: 60px;
border-radius: 26px;
margin: 0 auto
}
.wPrf.sl .prfC {
text-align: center
}
.prfH .c {
display: none
}
.prfL {
display: flex;
align-items: center;
position: relative;
width: calc(100% + 16px);
left: -8px;
right: -8px;
border-radius: 8px;
padding: 8px 0;
transition: var(--trans-1)
}
.prfL::after {
content: attr(data-text);
margin: 0 2px
}
.prfL>* {
margin: 0 8px;
flex-shrink: 0
}
a.prfL:hover {
background: var(--transB)
}
.sInf {
margin-bottom: 0
}
.sInf .sDt .l {
display: inline-flex;
align-items: center
}
.sInf .sTxt {
margin: 5px auto 0;
max-width: 320px;
font-size: 93%;
opacity: .9;
line-height: 1.5em
}
.sInf .lc {
display: flex;
justify-content: center;
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
}
/* Widget Scroll Menu */
.navS {
background: 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;
border-radius: 10px
}
.navS ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap
}
.navS li {
margin: 0 15px;
padding: 10px 0;
position: relative;
scroll-snap-align: start
}
.navS li:first-child {
margin-left: auto
}
.navS li:last-child {
margin-right: auto
}
.navS .l {
display: block;
color: var(--bodyC);
padding: 8px 0
}
.navS .l::before {
content: attr(data-text)
}
.navS .l::after {
content: '';
height: 1px;
border-radius: 2px 2px 0 0;
background: var(--linkC);
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0
}
.navS span.l {
opacity: .7
}
.navS a.l:hover,
.navS .l.a {
color: var(--linkC)
}
@media screen and (max-width:896px) {
.navS .secIn {
padding: 0
}
.navS li {
margin: 0;
padding: 8px 0;
display: flex
}
.navS li::before {
content: '';
padding: 10px
}
.navS ul::after {
content: '';
display: block;
padding: 10px;
scroll-snap-align: start
}
.navS .l {
position: relative
}
.navS .l::after {
bottom: -8px
}
.navS a.l:hover::after,
.navS .l.a::after {
opacity: 1
}
}
@media screen and (max-width:500px) {
.navS {
font-size: 13px
}
}
.drK .navS {
background: var(--darkBs)
}
.drK .navS .l {
color: var(--darkC)
}
.drK .navS a.l:hover,
.drK .navS .l.a {
color: var(--darkU)
}
.drK .navS .l::after {
background: var(--darkU)
}
/* Widget FeaturedPost */
@media screen and (min-width:501px) {
.FeaturedPost .itemFt {
position: relative;
overflow: hidden;
padding: 10px;
background: var(--contentB);
box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
border-radius: 10px
}
.drK .FeaturedPost .itemFt {
background: var(--darkBa)
}
.FeaturedPost .itemFt::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 15px;
background: var(--linkB);
border-radius: 0 0 0 20px;
opacity: .2
}
}
.itemFt .itm>* {
flex: 0 0 310px;
width: 310px
}
.itemFt .itm>*:last-child {
flex: 1 0 calc(100% - 310px - 40px);
width: calc(100% - 310px - 40px)
}
/* Widget PopularPosts */
.PopularPosts {
padding: 20px 20px 30px;
background: var(--contentB);
box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
border-radius: 10px
}
.itemPp {
counter-reset: p-cnt
}
.itemPp .iCtnt {
display: flex
}
.itemPp>*:not(:last-child) {
margin-bottom: 25px
}
.itemPp .iCtnt::before {
flex-shrink: 0;
content: '0' counter(p-cnt);
counter-increment: p-cnt;
width: 25px;
opacity: .6;
font-size: 85%;
line-height: 1.8em
}
.iInr {
flex: 1 0;
width: calc(100% - 25px)
}
.iTtl {
font-size: .95rem;
font-weight: 700;
line-height: 1.5em
}
.iTtmp {
display: inline-flex
}
.iTtmp::after {
content: '\2014';
margin: 0 5px;
color: var(--widgetTac);
opacity: .7
}
.iInf {
margin: 0 25px 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.iInf .pLbls {
display: inline;
opacity: .8
}
/* Widget Label */
/* List Label */
.Label {
padding: 20px;
background: var(--contentB);
box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
border-radius: 10px
}
.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: var(--bodyC);
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 {
/*fill:var(--linkC) !important;*/
stroke: var(--linkC)
}
.wL li>*:hover .lbC,
.wL li>div .lbC {
color: var(--linkC)
}
.wL .lbR {
display: inline-flex;
align-items: center
}
.wL .lbR .lbC {
margin: 0 5px
}
.wL .lbAl {
max-height: 0;
overflow: hidden;
transition: var(--trans-4)
}
.wL .lbM {
display: inline-block;
margin-top: 10px;
line-height: 20px;
color: var(--linkC);
cursor: pointer
}
.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
}
/* Cloud Label */
.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 var(--contentL);
border-radius: 3px;
color: inherit;
line-height: 20px
}
.wL.cl .lbN:hover .lbC,
.wL.cl div.lbN .lbC {
color: var(--linkB);
opacity: 1
}
.wL.cl .lbN:not(div):hover,
.wL.cl div.lbN {
border-color: var(--linkB)
}
.wL.cl .lbSz {
display: flex
}
.wL.cl .lbSz::after {
content: '';
margin: 0 4px;
flex: 0 0
}
/* Widget ContactForm */
.ContactForm {
max-width: 500px;
font-family: var(--fontB);
font-size: 14px
}
.cArea:not(:last-child) {
margin-bottom: 25px
}
.cArea label {
display: block;
position: relative
}
.cArea label .n {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
color: rgba(8, 16, 43, .4);
line-height: 1.6em;
padding: 15px 16px 0;
border-radius: 4px 4px 0 0;
transition: var(--trans-1)
}
.cArea label .n.req::after {
content: '*';
font-size: 85%
}
.cArea textarea {
height: 100px
}
.cArea textarea:focus,
.cArea textarea[data-text=fl] {
height: 200px
}
.cArea input:focus~.n,
.cArea textarea:focus~.n,
.cArea input[data-text=fl]~.n,
.cArea textarea[data-text=fl]~.n {
padding-top: 5px;
color: rgba(8, 16, 43, .7);
font-size: 90%;
background: #ececec
}
.cArea .h {
display: block;
font-size: 90%;
padding: 5px 16px 0;
opacity: .7;
line-height: normal
}
.nArea .contact-form-error-message-with-border {
color: #d32f2f
}
.nArea .contact-form-success-message-with-border {
color: #2e7b32
}
.tNtf img.contact-form-cross {
display: none
}
/* Widget Sliders */
.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;
border-radius: 5px;
-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: 5px;
color: #fffdfc;
font-size: 13px
}
.sldT {
position: absolute;
bottom: 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;
border-radius: 0
}
.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
}
}
/* Google Transalte */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-simple img,
img.goog-te-gadget-icon,
.goog-te-menu-value span,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-logo-link,
.goog-te-balloon-frame {
display: none !important
}
.goog-text-highlight {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important
}
.goog-te-menu-frame {
box-shadow: none !important
}
.goog-te-gadget-simple {
background-color: transparent !important;
border: none !important;
outline: 0 !important;
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important
}
#google_translate_element {
position: absolute !important;
z-index: 2 !important;
overflow: hidden !important
}
#google_translate_element,
.skiptranslate.goog-te-gadget,
.goog-te-gadget-simple {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important
}
/* Widget Music Player */
#musicPlayer {
position: relative;
direction: ltr;
width: 100%;
min-height: 200px;
max-width: 480px;
margin: 20px 0;
background: rgba(0, 0, 0, .03);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center
}
#musicPlayer::before {
content: 'Loading Tracks...';
position: absolute;
color: inherit;
font-size: 13px;
font-family: var(--fontB);
opacity: .8
}
.drK #musicPlayer {
background: var(--darkBs)
}
/* Pop-up */
.fxPu {
position: fixed;
top: -50%;
bottom: -50%;
top: -50%;
left: -50%;
right: -50%;
z-index: 70;
background: rgba(0, 0, 0, .4);
visibility: hidden;
opacity: 0;
transition: all .6s ease;
-webkit-transition: all .6s ease
}
.fxPu.visible {
visibility: visible;
opacity: 1
}
.fxPuW {
position: fixed;
top: 0;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 71;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.fxPuC {
position: relative;
background: #fffdfc;
width: 100%;
max-width: 500px;
padding: 20px 25px 25px;
border-radius: 20px
}
.fxPuCl::after {
content: '\2715';
line-height: 16px;
font-size: 12px;
color: #fffdfc;
position: absolute;
top: -15px;
right: 15px;
background: var(--linkC);
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
transition: var(--trans-1);
-webkit-transition: var(--trans-1);
cursor: pointer
}
.fxPuCl:hover::after {
transform: scale(1.03);
-webkit-transform: scale(1.03)
}
.fxPuS {
display: block;
text-align: center;
margin-bottom: 5px
}
.fxPuS svg.line {
stroke-width: 1;
width: 50px;
height: 50px
}
.fxPuH {
font-size: 1.2rem;
font-weight: 700;
font-family: var(--fontBa);
margin-bottom: 10px;
text-align: center
}
.fxPuD {
line-height: 1.7em;
font-size: 15px
}
.fxPuB {
text-align: center;
margin-top: 20px
}
.fxPuB .btn {
width: 45px;
height: 45px;
outline: none;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--linkC);
border-radius: 50%
}
.fxPuB .btn:hover {
opacity: .8
}
.fxPuB .btn svg {
stroke: #fffdfc
}
.drK .fxPuC {
background: var(--darkBs)
}
.drK .fxPuCl::after,
.drK .fxPuB .btn {
background: var(--darkU)
}
/* Toast Notif */
.tNtf span {
position: fixed;
left: 24px;
bottom: -70px;
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
z-index: 997;
background: #323232;
color: rgba(255, 255, 255, .8);
font-size: 14px;
font-family: var(--fontB);
border-radius: 3px;
padding: 13px 24px;
box-shadow: 0 5px 35px rgba(149, 157, 165, .3);
opacity: 0;
transition: var(--trans-1);
animation: slidein 2.3s ease forwards;
-webkit-animation: slidein 2.3s ease forwards
}
.tNtf span i {
content: '';
width: 14px;
height: 14px;
display: inline-block;
margin: 0 5px;
opacity: .8
}
.tNtf span i.check {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.tNtf span i.warn {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.tNtf span i.copy {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.tNtf span i.clipboard {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.tNtf span i.onCloud {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.tNtf span i.offCloud {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.tNtf span i.onWifi {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.tNtf span i.offWifi {
background: url("data:image/svg+xml,") center / 14px no-repeat
}
.Rtl .tNtf span {
left: auto;
right: 24px
}
@media screen and (max-width:896px) {
.tNtf span {
margin-bottom: 50px
}
}
@media screen and (max-width:500px) {
.tNtf span {
left: 20px;
right: 20px;
font-size: 13px
}
.Rtl .tNtf span {
left: 20px;
right: 20px
}
}
.drK .tNtf span {
box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}
.MN-4 .tNtf span {
margin-bottom: 0;
animation-duration: 2s;
-webkit-animation-duration: 2s
}
/* Neon Lighting */
.nLght::before,
.nLght::after {
content: '';
position: fixed;
width: 100%;
bottom: 0;
left: 0;
right: 0;
height: 3px;
z-index: 55;
background: linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132, #4086F4, #31A952, #FBBE01, #EB4132);
background-size: 200%;
-webkit-animation: animeNeon 5s linear infinite;
animation: animeNeon 5s linear infinite;
visibility: none;
opacity: 0;
transition: all 1s ease
}
.nLght::after {
height: 10px;
filter: blur(10px)
}
.nLght.vsbl::before,
.nLght.vsbl::after {
visibility: visible;
opacity: .7
}
@-webkit-keyframes animeNeon {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes animeNeon {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
/* Maintenance Mode */
.mtm {
position: fixed;
left: 0;
right: 0;
top: -35%;
bottom: -35%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bodyB);
transition: all .5s ease;
-webkit-transition: all .5s ease;
visibility: visible;
opacity: 1;
z-index: 499
}
.mtm.hdn {
visibility: hidden;
opacity: 0
}
.mtmC {
max-width: 450px;
padding: 20px;
text-align: center
}
.mtmH {
font-weight: 700;
font-size: 1.5rem;
font-family: var(--fontBa);
margin-bottom: 10px
}
.mtmD {
margin-bottom: 10px
}
.mtm .clock {
width: 100%;
font-size: 25px;
text-align: center;
font-family: var(--fontBa);
font-weight: 400;
position: relative;
left: 0;
right: 0
}
.mtm .tBox {
width: 65px;
height: 65px;
margin: 3px;
padding-top: 8px;
background-color: #f4efff;
border-radius: 20px;
display: inline-block
}
.mtm .unit {
display: block;
font-size: 10px;
margin: auto;
font-family: var(--fontB);
opacity: 0.8
}
.drK .mtm {
background: var(--darkB)
}
.drK .mtm .tBox {
background: var(--darkBa)
}
/* Sticky Ad */
.ancrA {
position: fixed;
bottom: 0;
left: 0;
right: 0;
min-height: 70px;
max-height: 200px;
padding: 5px;
box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);
transition: var(--trans-1);
display: flex;
align-items: center;
justify-content: center;
background: #fffdfc;
z-index: 50;
border-top: 1px solid var(--contentL)
}
.ancrC {
width: 40px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px 0 0;
border: 1px solid var(--contentL);
border-bottom: 0;
border-right: 0;
position: absolute;
right: 0;
top: -30px;
background: inherit
}
.ancrC svg {
width: 18px;
height: 18px;
fill: none !important;
stroke: var(--iconC);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.4
}
.ancrCn {
flex-grow: 1;
overflow: hidden;
display: block;
position: relative
}
.ancrI:checked~.ancrA {
padding: 0;
min-height: 0
}
.ancrI:checked~.ancrA .ancrCn {
display: none
}
.ancrI:checked~.ancrA .ancrC svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
/* Error Page */
.erroP {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
padding: 0
}
.erroC {
width: calc(100% - 40px);
max-width: 450px;
margin: auto;
font-family: var(--fontBa)
}
.erroC h3 {
font-size: 1.414rem;
font-family: inherit
}
.erroC h3 span:not(.e) {
position: relative
}
.erroC h3 span.e {
display: block;
font-size: 140px;
line-height: .8;
margin-bottom: -1rem;
color: #ebebf0
}
.erroC h3 span.e {
animation: glitch 1s linear infinite
}
.erroC h3 span.e::before,
.erroC h3 span.e::after {
content: attr(title);
position: absolute;
left: 0;
right: 0
}
.erroC h3 span.e::before {
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%)
}
.erroC h3 span.e::after {
animation: glitchBotom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%)
}
.erroC p {
margin: 30px 5%;
line-height: 1.6em;
opacity: .7
}
.erroC .button {
margin: 0;
padding-left: 2em;
padding-right: 2em;
font-size: 14px
}
/* Responsive */
@media screen and (min-width:897px) {
/* mainIn */
.mainIn,
.blogM {
display: flex
}
.blogMn {
width: var(--navW);
flex-shrink: 0;
position: relative;
transition: var(--trans-1);
z-index: 1
}
.blogCont {
padding-top: 30px
}
.blogCont::before {
content: '';
position: absolute;
top: var(--headerHi);
left: 0;
height: calc(100% + var(--headerH))
}
.blogCont {
width: calc(100% - var(--navW))
}
.mnBrs {
box-shadow: 0 0 15px rgba(0, 0, 0, .07)
}
.blogCont .secIn {
padding-left: 25px;
padding-right: 25px
}
.mainbar {
flex: 1 0 calc(100% - var(--sideW) - 25px);
width: calc(100% - var(--sideW) - 25px)
}
.sidebar {
display: flex;
flex: 0 0 calc(var(--sideW) + 25px);
width: calc(var(--sideW) + 25px);
margin: 0
}
.sidebar::before {
content: '';
flex: 0 0 25px
}
.sidebar .sideIn {
width: calc(100% - 25px)
}
/* mainNav */
.mnBr {
position: sticky;
position: -webkit-sticky;
top: var(--headerH)
}
.mnBrs {
display: flex;
height: calc(100vh - var(--headerH));
font-size: 13px;
position: relative
}
.mnBrs>*:not(.mnMob) {
width: 100%
}
.mnMen {
padding: 20px;
overflow-y: hidden;
overflow-x: hidden
}
a:hover {
text-decoration: none !important;
}
.mnMen:hover {
overflow-y: scroll
}
.mnMob {
position: fixed;
width: var(--navW)
}
.mnH,
.mobMn {
display: none
}
.bD:not(.hdMn) .navI:checked~.mainWrp .blogMn,
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMob,
.hdMn .navI:not(:checked)~.mainWrp .blogMn,
.hdMn .navI:not(:checked)~.mainWrp .mnMob {
width: 75px
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn a:hover,
.hdMn .navI:not(:checked)~.mainWrp .mnMn a:hover {
opacity: 1;
color: inherit
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .a,
.hdMn .navI:not(:checked)~.mainWrp .mnMn .a {
max-width: 40px;
border-radius: 15px
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .drp.mr,
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn svg.d,
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMob .PageList,
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMob .mSoc,
.hdMn .navI:not(:checked)~.mainWrp .mnMn .drp.mr,
.hdMn .navI:not(:checked)~.mainWrp .mnMn svg.d,
.hdMn .navI:not(:checked)~.mainWrp .mnMob .PageList,
.hdMn .navI:not(:checked)~.mainWrp .mnMob .mSoc {
display: none
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMob .mNav,
.hdMn .navI:not(:checked)~.mainWrp .mnMob .mNav {
display: flex
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn>li.br::after,
.hdMn .navI:not(:checked)~.mainWrp .mnMn>li.br::after {
max-width: 20px
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMen,
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMen:hover,
.hdMn .navI:not(:checked)~.mainWrp .mnMen,
.hdMn .navI:not(:checked)~.mainWrp .mnMen:hover {
overflow-y: visible;
overflow-x: visible
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .n,
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
.hdMn .navI:not(:checked)~.mainWrp .mnMn .n,
.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
position: absolute;
left: 35px;
top: 3px;
margin: 0 5px;
padding: 8px 10px;
border-radius: 5px 16px 16px 16px;
max-width: 160px;
background: var(--contentB);
color: var(--bodyC);
opacity: 0;
visibility: hidden;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
z-index: 1
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
padding: 0 5px;
margin: 0;
overflow: hidden;
display: block
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr):last-child ul,
.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr):last-child ul {
top: auto;
bottom: 3px;
border-radius: 16px 16px 16px 5px
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.drp) .a:hover .n,
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr):hover ul,
.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.drp) .a:hover .n,
.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr):hover ul {
opacity: 1;
visibility: visible
}
.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn ul li>*,
.hdMn .navI:not(:checked)~.mainWrp .mnMn ul li>* {
border-radius: 0
}
/* Article */
.onIndx.onHm .blogPts>* {
flex: 0 0 calc(33.33% - 20px);
width: calc(33.33% - 20px)
}
.onIndx.onMlt .blogPts>* {
flex: 0 0 calc(25% - 20px);
width: calc(25% - 20px)
}
}
@media screen and (min-width:768px) {
::-webkit-scrollbar {
-webkit-appearance: none;
width: 8px;
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:1600px) {
/* Quick Edit */
.nBtm.qEdit .qeBtn {
margin-bottom: 85px
}
/* Back to Top */
.nBtm.toTopB {
margin-bottom: 80px
}
}
@media screen and (max-width:1100px) {
/* Article */
.onIndx.onHm .blogPts>* {
flex: 0 0 calc(50% - 20px);
width: calc(50% - 20px)
}
.onIndx.onMlt .blogPts>* {
flex: 0 0 calc(33.33% - 20px);
width: calc(33.33% - 20px)
}
/* Widget */
.itemFt .itm>*,
.itemFt .itm>*:last-child {
flex: 0 0 calc(50% - 20px);
width: calc(50% - 20px)
}
.itemFt .itm>*:last-child {
flex-grow: 1
}
.itemFt .pSnpt {
display: none
}
}
@media screen and (max-width:896px) {
/* Header */
.ntfC {
padding-left: 20px;
padding-right: 20px
}
header,
.drK header {
box-shadow: none;
border: none
}
header.stick {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .07)
}
.drK:not(.HD-2) header.stick {
border-bottom: 1px solid rgba(255, 255, 255, .15);
box-shadow: none
}
.HD-2 header {
position: relative;
padding: 15px 15px 0
}
.HD-2 header.stick {
box-shadow: none
}
.HD-2 .headCn {
border-radius: var(--headerR);
box-shadow: 0 5px 15px rgba(0, 0, 0, .07)
}
.drK.HD-2 .headCn {
background: var(--darkBa)
}
.headL {
padding: 0 0 0 15px;
flex-grow: 1;
width: 50%
}
.headR {
padding: 0 20px 0 0;
flex-grow: 0
}
.headIc .isSrh {
display: block
}
.headI .headS {
margin: 0
}
/* mainNav */
.blogMn {
display: flex;
justify-content: flex-start;
position: fixed;
left: 0;
top: 0;
bottom: 0;
margin-left: -100%;
z-index: 20;
transition: var(--trans-1);
width: 100%;
height: 100%
}
.flT .blogMn {
left: 15px;
top: 15px;
bottom: 15px;
height: auto
}
.flT .mnBr {
border-radius: 20px;
width: 80%
}
.Rtl.flT .blogMn {
left: auto;
right: 15px
}
.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%
}
.mnH {
padding: 0 15px
}
.mnH label {
padding: 15px 10px
}
.mnH .c::after {
margin: 0 13px
}
.mnMen {
padding-top: 0
}
.navI:checked~.mainWrp .blogMn {
margin-left: 0
}
.navI:checked~.mainWrp .blogMn .fCls {
opacity: 1;
visibility: visible;
background: rgba(0, 0, 0, .2);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px)
}
/* Article */
.onIndx.onHm .blogPts>* {
flex: 0 0 calc(33.33% - 20px);
width: calc(33.33% - 20px)
}
/* Widget */
.itemFt .pSnpt {
display: -webkit-box
}
.bD:not(.MN-4) .mobMn:not(.no-items)+footer {
padding-bottom: calc(55px + 30px)
}
.bD:not(.MN-4) .wvH {
height: calc(100px + 60px)
}
/* Widget Scroll Menu */
.HD-2 .navS {
box-shadow: 0 0 25px rgba(0, 0, 0, .07)
}
/* Back To Top */
.bD:not(.MN-4) .toTopB {
margin-bottom: 45px
}
.bD:not(.MN-4) .nBtm.toTopB {
margin-bottom: 145px
}
.MN-4 .nBtm.toTopB {
margin-bottom: 80px
}
}
@media screen and (max-width:768px) {
/* Article */
.onIndx.onHm .blogPts>*,
.onIndx.onMlt .blogPts>* {
flex: 0 0 calc(50% - 20px);
width: calc(50% - 20px)
}
}
@media screen and (max-width:640px) {
/* Header */
.headCn {
height: var(--headerHm)
}
/* Pop-up */
.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%
}
/* Footer */
footer {
padding-top: 30px
}
}
@media screen and (max-width:500px) {
/* Font and Blog */
.iFxd,
.crdtIn {
font-size: 12px
}
.brdCmb {
font-size: 13px
}
.pDesc {
font-size: 14px
}
.pEnt {
font-size: var(--postFm)
}
.pTtl.itm {
font-size: var(--postTm)
}
.pInf.ps .pTtmp::after {
content: attr(data-time)
}
.pInf.ps .pDr {
font-size: 12px
}
.pInf .pNm,
.pInf .pDr {
display: flex;
flex-direction: column
}
.pInf .pDr>*:not(:first-child)::before {
display: none
}
/* Article */
.onIndx:not(.oneGrd) .blogPts {
width: calc(100% + 10px);
left: -5px;
right: -5px
}
.onIndx:not(.oneGrd) .blogPts>* {
padding: 8px 8px 40px;
flex: 0 0 calc(50% - 10px);
width: calc(50% - 10px);
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px
}
.onIndx:not(.oneGrd) .blogPts .pTag {
padding-bottom: 5px
}
.onIndx:not(.oneGrd) .blogPts div.ntry {
flex: 0 0 calc(100% - 10px)
}
.onIndx:not(.oneGrd) .pCntn {
padding: 0
}
.onIndx:not(.oneGrd) .ntry .pSml {
font-size: 12px
}
.onIndx:not(.oneGrd) .blogPts .pInf {
bottom: 10px;
left: 8px;
right: 8px
}
.onIndx:not(.oneGrd) .ntry .iFxd {
font-size: 10px
}
.onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* {
margin-left: 0
}
.Rtl.onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* {
margin-left: 5px;
margin-right: 0
}
.onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* svg {
width: 14px;
height: 14px;
stroke-width: 1.7
}
.onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* svg {
margin: 0 1.5px
}
.onIndx:not(.oneGrd) .ntry .iFxd.l .edit {
padding: 5px
}
.onIndx:not(.oneGrd) .ntry .iFxd.l>* svg {
margin: 0px
}
.onIndx:not(.oneGrd) .ntry .pTtl {
font-size: .8rem;
font-weight: 600
}
.onIndx:not(.oneGrd) .ntry:not(.pTag) .pSnpt,
.onIndx:not(.oneGrd) .ntry .pInf:not(.nSpr) .pJmp,
.onIndx:not(.oneGrd) .ntry .iFxd .spnr,
.onIndx:not(.oneGrd) .iFxd .bM {
display: none
}
.onIndx:not(.oneGrd) .ntry .iFxd {
padding: 8px 3px
}
.onIndx:not(.oneGrd) .ntry .iFxd.l {
top: auto;
bottom: 0;
right: 0
}
.Rtl.onIndx:not(.oneGrd) .ntry .iFxd.l {
right: auto;
left: 0
}
.onIndx:not(.oneGrd) .ntry .iFxd .cmnt,
.onIndx:not(.oneGrd) .ntry .iFxd .pV {
padding: 3.5px
}
.onIndx:not(.oneGrd) .ntry .iFxd>* svg {
padding: 1px
}
.onIndx.oneGrd .blogPts>* {
flex: 0 0 calc(100% - 20px);
width: calc(100% - 20px)
}
/* Share */
.pShc {
width: calc(100% + 10px);
left: -5px;
right: -5px
}
.pShc::before {
width: calc(100% - 10px);
margin: 0 5px 12px
}
.pShc .wa::after,
.pShc .tw::after {
display: none
}
/* Widget */
.prfI:checked~.mainWrp .wPrf {
top: auto;
bottom: 0
}
.prfI:checked~.mainWrp .Profile .fCls {
background: rgba(0, 0, 0, .2);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px)
}
.prfH .c {
display: flex
}
.wPrf {
position: fixed;
top: auto;
left: 0;
right: 0;
bottom: -100%;
width: 100%;
max-height: calc(100% - var(--headerH));
border-radius: 12px 12px 0 0
}
.itemFt .itm {
padding-bottom: 80px
}
.itemFt .itm>* {
flex: 0 0 calc(100% - 20px);
width: calc(100% - 20px)
}
.itemFt .itm .iCtnt {
flex: 0 0 calc(100% - 42px);
width: calc(100% - 42px);
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 13px;
background: rgba(255, 253, 252, .92);
border-radius: 10px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .1);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px)
}
.itemFt .pTtl {
font-size: 1rem
}
.itemFt .pSnpt {
font-size: 93%
}
}
/* Keyframes Animation */
@keyframes shimmer {
100% {
transform: translateX(100%)
}
}
@keyframes slidein {
0% {
opacity: 0
}
20% {
opacity: 1;
bottom: 24px
}
50% {
opacity: 1;
bottom: 24px
}
80% {
opacity: 1;
bottom: 24px
}
100% {
opacity: 0;
bottom: -70px;
visibility: hidden
}
}
@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
}
}
@keyframes indicator {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadein {
50% {
opacity: 1
}
80% {
opacity: 1;
padding-top: 5px;
height: 22px
}
100% {
opacity: 0;
padding-top: 0;
height: 0
}
}
@-webkit-keyframes slidein {
0% {
opacity: 0
}
20% {
opacity: 1;
bottom: 24px
}
50% {
opacity: 1;
bottom: 24px
}
80% {
opacity: 1;
bottom: 24px
}
100% {
opacity: 0;
bottom: -70px;
visibility: hidden
}
}
@-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
}
}
@-webkit-keyframes indicator {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@-moz-keyframes indicator {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes glitch {
2%,
64% {
transform: translate(2px, 0) skew(0deg)
}
4%,
60% {
transform: translate(-2px, 0) skew(0deg)
}
62% {
transform: translate(0, 0) skew(5deg)
}
}
@keyframes glitchTop {
2%,
64% {
transform: translate(2px, -2px)
}
4%,
60% {
transform: translate(-2px, 2px)
}
62% {
transform: translate(13px, -1px) skew(-13deg)
}
}
@keyframes glitchBotom {
2%,
64% {
transform: translate(-2px, 0)
}
4%,
60% {
transform: translate(-2px, 0)
}
62% {
transform: translate(-22px, 5px) skew(21deg)
}
}
/* Noscript Option */
.lazy:not([lazied]) {
display: none
}
.bD .pS img.lazy:not([lazied]) {
display: none !important
}
.noJs {
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
top: 20px;
left: 20px;
right: 20px;
z-index: 99;
max-width: 640px;
border-radius: 12px;
margin: auto;
padding: 10px 5px;
background: #ffdfdf;
font-size: 13px;
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .1);
color: #48525c
}
.noJs::before {
content: attr(data-text);
padding: 0 10px;
flex-grow: 1
}
.noJs label {
flex-shrink: 0;
padding: 10px
}
.noJs label::after {
content: '\2715';
line-height: 18px;
font-size: 14px
}
.nJs:checked~.noJs {
display: none
}
/* Hide Scroll */
.scrlH::-webkit-scrollbar {
width: 0;
height: 0
}
.scrlH::-webkit-scrollbar-track {
background: transparent
}
.scrlH::-webkit-scrollbar-thumb {
background: transparent;
border: none
}
/* --- Remove to reduce CSS size or if you aren't using RTL --- */
.adB {
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--darkTa);
border: 1px solid var(--contentL);
border-radius: 3px
}
.adB.h240 {
min-height: 240px
}
.adB.h360 {
min-height: 360px
}
.adB.h480 {
min-height: 480px
}
.h240,
.h360,
.h480 {
border-radius: 5px 15px 5px 5px
}
.adB::before {
content: attr(data-text)
}
/* Article Style RTL */
.Rtl .note {
padding: 20px 50px 20px 20px
}
.Rtl .note::before {
left: auto;
right: -12px
}
.Rtl .note::after {
left: auto;
right: 18px
}
.Rtl .pS hr::before {
text-indent: -0.6em
}
.Rtl .dropCap {
margin: 0;
line-height: inherit;
font-size: inherit;
float: none
}
.Rtl blockquote,
.Rtl .cmC i[rel=quote] {
border-left: 0;
border-right: 2px solid var(--contentL)
}
.Rtl blockquote.s-1 {
padding: 25px 45px 25px 25px;
border-right: 0
}
.Rtl blockquote.s-1::before {
left: auto;
right: 0
}
/* RTL Mode */
.Rtl .mnMn li li a>* svg {
margin-right: 0;
margin-left: 5px
}
.Rtl .ntfT {
padding: 0 0 0 15px
}
.Rtl .headL {
padding: 0 20px 0 0
}
.Rtl .headL .headN {
padding: 0 5px 0 0
}
.Rtl .BlogSearch .sb {
left: auto;
right: 0
}
.Rtl .BlogSearch button.sb {
left: 0;
right: auto
}
.Rtl .wPrf {
right: auto;
left: 0;
border-radius: 5px 16px 16px 16px
}
.Rtl .toTopF {
right: auto;
left: 18px
}
.Rtl .cmAc a::before {
content: '\2935'
}
.Rtl .cmHl>li {
padding: 0 17.5px 0 0
}
.Rtl .cmHl>li>.cmAv {
left: auto;
right: 0
}
.Rtl .cmHl>li>.cmIn {
padding: 12px 28px 12px 15px
}
.Rtl .mnMn li:not(.mr) ul {
padding-left: 0;
padding-right: 30px
}
.Rtl .tocL {
right: auto;
left: -280px
}
.Rtl .tocLi {
border-radius: 0 12px 12px 0
}
.Rtl .tocLi::before {
left: auto;
right: 0
}
.Rtl .tocC {
left: auto;
right: -45px
}
.Rtl .tocC span {
border-radius: 0 20px 20px 0
}
.Rtl .tocL svg.rad {
right: auto;
left: -2px;
transform: rotate(176deg)
}
.Rtl .tocL svg.rad.in {
transform: rotate(-86deg)
}
.Rtl .tocI:checked~.tocL {
right: auto;
left: 0
}
.Rtl .mainWrp:after {
right: unset;
left: 0;
border-radius: 0 0 200px 0
}
@media screen and (min-width:897px) {
.Rtl .blogCont::before {
left: auto;
right: 0
}
.Rtl:not(.hdMn) .navI:checked~.mainWrp .mnMn .n,
.Rtl:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
.Rtl.hdMn .navI:not(:checked)~.mainWrp .mnMn .n,
.Rtl.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
left: auto;
right: 35px;
border-radius: 16px 5px 16px 16px
}
.Rtl:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr):last-child ul,
.Rtl.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr):last-child ul {
border-radius: 16px 16px 5px 16px
}
}
@media screen and (max-width:896px) {
.Rtl .headR {
padding: 0 0 0 20px
}
.Rtl .headL {
padding: 0 15px 0 0
}
.Rtl .blogMn {
left: auto;
right: 0;
margin-right: -100%
}
.Rtl .mnBr {
border-radius: 12px 0 0 12px
}
.Rtl.flT .mnBr {
border-radius: 20px
}
.Rtl .navI:checked~.mainWrp .blogMn {
margin-left: auto;
margin-right: 0
}
}
@media screen and (max-width:500px) {
.Rtl .wPrf {
right: 0;
border-radius: 12px 12px 0 0
}
.Rtl .ftMn {
right: auto;
left: -4px;
border-radius: 16px 16px 16px 5px
}
.Rtl .cdtIn .PageList {
margin-left: 9px;
margin-right: auto
}
}
/* Basic Layout */
@media screen and (min-width:897px) {
.LS-2 header,
.LS-2 .tocLi::before,
.LS-3 header {
border: 0
}
.LS-2,
.LS-2 .headCn,
.LS-2 .mnBrs,
.LS-3 .mnBrs,
.LS-3 .headL {
background: #fafafc
}
.LS-2 .blogCont::before {
border: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
background: var(--contentB);
border-radius: 15px 0 0 0
}
.LS-3 .headCn {
background: transparent
}
.LS-3 .headR {
background: var(--headerB)
}
.LS-3 .blogCont::before {
z-index: 10
}
.LS-3 .blogMn {
z-index: 11
}
.LS-3 .tocL {
top: var(--headerHi);
z-index: 10
}
.LS-3 .tocI:checked~.tocL {
z-index: 10
}
.LS-3:not(.hdMn) .navI:checked~.mainWrp .headN,
.LS-3.hdMn .navI:not(:checked)~.mainWrp .headN {
display: none
}
.LS-3:not(.hdMn) .navI:checked~.mainWrp .headL,
.LS-3 .navI:not(:checked)~.mainWrp .headL {
width: 75px
}
}
/* --- Your Custom CSS goes here --- */
/*]]>*/
/** {
display: block;
padding: 9px 15px;
width: 100%;
cursor: pointer
}
.headR .headM>*:before {
content: attr(aria-label);
opacity: .9
}
.headR .headM>*:hover {
background: rgba(0, 0, 0, .05)
}
.navM:checked~.mainWrp .headM {
visibility: visible;
opacity: 1
}
.navM:checked~.mainWrp .headM+.fCls {
visibility: visible;
opacity: 1;
z-index: 17
}
.headR .headM .sydB {
display: none
}
.bD:not(.drK):not(.syD) .headR .headM .lgtB {
background-color: rgba(0, 0, 0, .1)
}
.drK:not(.syD) .headR .headM .drkB {
background-color: rgba(0, 0, 0, .1)
}
.syD .headR .headM .sydB {
background-color: rgba(0, 0, 0, .1)
}
.drK .headR .headM {
background: var(--darkBs)
}
.Rtl .headR .headM {
right: auto;
left: 0;
border-radius: 5px 10px 10px 10px
}
/* Author No Image */
.aFl {
position: relative;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden
}
.admPs .aFl {
width: 34px;
height: 34px
}
.aFl::before {
content: '';
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--linkB);
opacity: .8
}
.aFl>span {
position: absolute;
z-index: 1;
font-size: 0;
color: transparent;
padding-top: 1.5px;
}
.admPs .aFl>span {
padding-top: 2px
}
.aFl>span:first-letter {
color: #fffdfc;
font-size: 13px
}
.admPs .aFl>span:first-letter {
font-size: 16px
}
.drK .aFl::before {
background: var(--darkU);
opacity: 1
}
/* Dark Mode */
.drK.onIndx .blogPts>*,
.drK .rPst,
.drK .PopularPosts,
.drK .Label {
background: var(--darkBa)
}
.drK .tDL .d2 {
display: block
}
.drK .tDL::after {
content: attr(data-light)
}
.drK .tDL svg .f {
stroke: none;
fill: var(--darkT)
}
.drK .pThmb:not(.nul)::before {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .07) 20%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, 0))
}
.drK input::placeholder,
.drK .cpL input,
.drK .cArea label .n {
color: rgba(255, 255, 255, .25)
}
.drK .nArea .contact-form-error-message-with-border {
color: #f94f4f
}
.drK .cmC i[rel=image]::before,
.drK .widget input[type=text],
.drK .widget input[type=email],
.drK .widget textarea {
background: var(--darkBs);
border-color: rgba(255, 255, 255, .15)
}
.drK .erroC h3 span {
color: rgba(255, 255, 255, .1)
}
.drK svg,
.drK svg.c-1 {
fill: var(--darkT)
}
.drK svg.line,
.drK .ancrC svg {
fill: none;
stroke: var(--darkT)
}
.drK svg.c-2 {
fill: var(--darkTa);
opacity: .4
}
.drK,
.drK .headCn,
.drK .mnBrs {
background: var(--darkB);
color: var(--darkT)
}
.drK .ntfC,
.drK .mobMn {
background: var(--darkBa);
color: var(--darkTa)
}
.drK .ntfC {
color: rgba(255, 255, 255, .9)
}
.drK header,
.drK .mnMn>li.br::after,
.drK .blogCont::before,
.drK .tbHd,
.drK .cmHl>li>.cmIn,
.drK .pTag .pMart a,
.drK .pRelate,
.drK blockquote,
.drK .cmC i[rel=quote],
.drK blockquote.s-1,
.drK details.sp,
.drK .ps table:not(.tr-caption-container),
.drK .ps table th,
.drK .ps table:not(.tr-caption-container) tr:not(:last-child) td,
.drK .pre.tb .preH,
.drK details.ac,
.drK .ancrA,
.drK .ancrC,
.drK .mnMob {
border-color: rgba(255, 255, 255, .15)
}
.drK .pre {
background: var(--darkBs);
color: var(--darkT)
}
.drK .footer {
background: var(--darkBs)
}
.drK .mnMn li:not(.mr) .a:hover,
.drK .mnMn ul li>*:hover,
.drK .wL.bg li>*,
.drK .mobMn li>*:hover,
.drK .shL a,
.drK .cpLb {
background: rgba(0, 0, 0, .15)
}
.drK .tIc::after {
background: var(--darkBs)
}
.drK .wPrf {
background: var(--darkBa);
box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}
.drK header a,
.drK h1,
.drK h2,
.drK h3,
.drK h4,
.drK h5,
.drK h6,
.drK footer,
.drK .button {
color: var(--darkT)
}
.drK .dlBox,
.drK .fixLs,
.drK .cArea input:focus~.n,
.drK .cArea textarea:focus~.n,
.drK .cArea input[data-text=fl]~.n,
.drK .cArea textarea[data-text=fl]~.n {
background: var(--darkBs)
}
.drK .tocLi {
background: var(--darkB)
}
.drK .admPs,
.drK .tocC span,
.drK .pShc>*:not(.c),
.drK .ancrA,
.drK .BlogSearch input,
.drK .cmHl>li>.cmIn {
background: var(--darkBa)
}
.drK .tocC span::before {
background: var(--darkBa)
}
.drK .tocC span::after {
background: var(--darkU)
}
.drK .tocL svg.rad {
fill: var(--darkBa)
}
.drK .mobMn li>*:hover svg.line {
fill: var(--darkT) !important
}
.drK .mobMn li>*:hover svg.line .svgC {
fill: var(--darkU) !important;
stroke: var(--darkU)
}
.drK.mobS .mobMn li>*:hover,
.drK .button.ln {
background: transparent
}
.drK .pTag .pPric::before,
.drK .pTag .pInfo small {
color: var(--darkTa)
}
.drK::selection,
.drK a,
.drK .free::after,
.drK .new::after,
.drK .mnMn li:not(.mr) .a:hover,
.drK .mnMn ul li a:hover,
.drK .aTtl a:hover,
.drK .pSnpt.nTag,
.drK .pTag .pPric,
.drK details.ac[open] summary,
.drK .cpL label,
.drK .wL li>*:hover .lbC,
.drK .wL li>div .lbC,
.drK .wL .lbM,
.drK .cmBtn.ln:hover,
.drK .wL.cl .lbN:hover .lbC,
.drK .wL.cl div.lbN .lbC {
color: var(--darkU)
}
.drK .mnMn .a:hover svg:not(.d) {
fill: var(--darkU)
}
.drK .mnMn .a:hover svg.line:not(.d),
.drK .pJmp svg {
fill: none;
stroke: var(--darkU)
}
.drK .wL li>*:hover svg,
.drK .wL li>div svg {
stroke: var(--darkU)
}
.drK.MN-3 .mobMn li>*:hover::after,
.drK.MN-4 .mobMn li>*:hover::after,
.drK .toTopF,
.drK .blogPg>*,
.drK .button,
.drK .zmImg::after,
.drK .widget input[type=button],
.drK .widget input[type=submit] {
background: var(--darkU)
}
.drK.MN-3 .mobMn li>*:hover svg.line,
.drK.MN-4 .mobMn li>*:hover svg.line {
stroke: var(--darkU);
fill: var(--darkU) !important
}
.drK.MN-3 .mobMn li>*:hover svg .f,
.drK.MN-4 .mobMn li>*:hover svg .f {
fill: var(--darkU)
}
.drK .pS input[id*="1"]:checked~.tbHd label[for*="1"],
.drK .pS input[id*="2"]:checked~.tbHd label[for*="2"],
.drK .pS input[id*="3"]:checked~.tbHd label[for*="3"],
.drK .pS input[id*="4"]:checked~.tbHd label[for*="4"],
.drK .widget input[type=text]:focus,
.drK .widget input[type=email]:focus,
.drK .widget textarea:focus,
.drK .widget input[data-text=fl],
.drK .widget textarea[data-text=fl],
.drK .wL.cl .lbN:not(div):hover,
.drK .wL.cl div.lbN {
border-color: var(--darkU)
}
.drK .button.ln:hover {
border-color: var(--darkU);
box-shadow: 0 0 0 1px var(--darkU) inset
}
.drK .mnBr a,
.drK .pLbls>*,
.drK .aTtl a,
.drK .blogPg>*,
.drK .brdCmb a,
.drK .wL li>*,
.drK .mobMn li>*,
.drK .cmAc a {
color: var(--darkT)
}
.drK .blogPg .nPst,
.drK .blogPg .current {
background: var(--contentL);
color: var(--bodyCa)
}
.drK .FeaturedPost .itemFt::after {
background: var(--darkTa)
}
@media screen and (min-width:897px) {
.drK header .BlogSearch input {
background: var(--darkBs)
}
.drK header .BlogSearch input:focus,
.drK header .BlogSearch input:hover {
background: var(--darkBa)
}
.drK.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .n,
.drK.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
.drK.hdMn .navI:not(:checked)~.mainWrp .mnMn .n,
.drK.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
background: var(--darkBa);
box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
color: var(--darkTa)
}
.drK.LS-2 .blogCont::before {
background: var(--darkBs)
}
.drK.LS-3 .headCn {
background: transparent
}
.drK.LS-3 .headL,
.drK.LS-3 .mnBrs {
background: var(--darkBs)
}
.drK.LS-3 .headR {
background: var(--darkB)
}
.drK .tocLi::before {
border-color: rgba(255, 255, 255, .15)
}
}
@media screen and (min-width:897px) {
.drK header {
border-bottom: var(--headerL) solid rgba(255, 255, 255, .15);
box-shadow: none
}
.drK .blogCont::before {
border-right: 1px solid rgba(255, 255, 255, .15)
}
.drK .mnBrs {
box-shadow: none
}
}
@media screen and (min-width:641px) {
.drK .ftMn a:hover {
color: var(--darkU)
}
}
@media screen and (max-width:640px) {
.drK .ftMn {
background: var(--darkBa)
}
}
@media screen and (max-width:500px) {
.drK .itemFt .itm .iCtnt {
background: var(--darkBa)
}
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin-top: 30px !important;
padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px) !important;
max-width: none !important;
border-radius: 6px !important;
box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25) !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview,
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview * {
box-sizing: border-box !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading {
width: 100% !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading h5 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field {
margin-top: 20px !important;
width: 100% !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input {
width: 100% !important;
height: 40px !important;
border-radius: 6px !important;
border: 2px solid #e9e8e8 !important;
background-color: #fff !important;
outline: none !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input {
color: #000000 !important;
font-family: "Montserrat" !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
text-align: center !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::placeholder {
color: #000000 !important;
opacity: 1 !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input:-ms-input-placeholder {
color: #000000 !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::-ms-input-placeholder {
color: #000000 !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button {
margin-top: 10px !important;
width: 100% !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button {
width: 100% !important;
height: 40px !important;
border: 0 !important;
border-radius: 6px !important;
line-height: 0px !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button:hover {
cursor: pointer !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line {
color: #231f20 !important;
font-family: "Montserrat" !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 25px !important;
text-align: center !important;
text-decoration: none !important;
display: flex !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
margin-top: 10px !important;
}
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line img {
margin-left: 10px !important;
height: 1.13em !important;
max-height: 1.13em !important;
}
/* For PC */
@media only screen and (min-width: 768px) {
#footer-widget-4 {
width: 25%;
margin-left: 0px !important;
}
}
/* For mobile */
@media only screen and (max-width: 767px) {
#footer-widget-2 {
width: none;
margin-left: auto !important;
margin-top: 10px;
}
}
@media only screen and (max-width: 767px) {
#footer-widget-3 {
width: none;
margin-left: auto !important;
margin-top: -10px;
}
}
@media only screen and (max-width: 767px) {
#footer-widget-4 {
width: none;
margin-left: auto !important;
margin-top: -20px;
}
}