


/* 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:auto;
		overflow-x:hidden
	}
	.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 .navigationPages, .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 .navigationPages, .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: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
	}
	/* Footer */
	.fotIn >*, .fotIn >*:first-child {
		width:calc(50% - 30px)
	}

}
@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 body: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 body.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,
	.tocI:checked ~ .tocL .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 + footer {
		padding-bottom:calc(55px + 20px)
	}
	.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)
	}
}
@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 .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 .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 .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::before {
		width:100%
	}
	.pShc .wa::after, .pShc .tw::after {
		display:none
	}
	/* Widget */
	.prfI:checked ~ .mainWrp .wPrf {
		top:auto;
		bottom:0;
		-webkit-transform:none;
		transform:none
	}
	.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));
		-webkit-transform:none;
		transform:none;
		-webkit-transform-origin:center;
		transform-origin:center;
		transition:var(--trans-1);
		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%
	}
	/* Footer */
	.fotIn >*, .fotIn >*:first-child {
		width:calc(100% - 30px)
	}

}
/* Keyframes Animation */
@keyframes shimmer {
	100% {
		transform:translateX(100%)
	}

}
@keyframes slidein {
	0% {
		opacity:0
	}
	10% {
		opacity:1;
		bottom:24px
	}
	50% {
		opacity:1;
		bottom:24px
	}
	90% {
		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
	}

}
@keyframes opaCity {
	0% {
		opacity:0
	}
	100% {
		opacity:1
	}

}
@-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
	}
	10% {
		opacity:1;
		bottom:24px
	}
	50% {
		opacity:1;
		bottom:24px
	}
	90% {
		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)
	}

}
@-webkit-keyframes opaCity {
	0% {
		opacity:0
	}
	100% {
		opacity:1
	}

}
/* 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:'';
	display:block;
	width:16px;
	height:16px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999'/%3E%3C/svg%3E") center/16px 16px no-repeat
}
.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
}


