* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	-webkit-tap-highlight-color: transparent
}

*,
:after,
:before {
	outline: 0 !important;
}

::-webkit-scrollbar {
	width: 4.5px;
	height: 5px;
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--seat)
}

::-webkit-scrollbar-track {
	background: transparent
}

::-moz-selection {
	color: #fff;
	background: var(--theme)
}

::selection {
	color: #fff;
	background: var(--theme)
}

body {
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	overflow-x: hidden;
	line-height: 1.42857143;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -520;
	pointer-events: none;
	background: var(--body-bg-color);
	background-blend-mode: multiply;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: cover;
}

input[type='text'] {
	-webkit-appearance: none;
	border-radius: 0;
	font-size: 13px;
	font-weight: 500
}

iframe {
	display: block;
	border: none;
	margin: 0 auto;
	vertical-align: middle
}

textarea {
	font-size: 14px;
	resize: none;
	-webkit-appearance: none
}

li {
	list-style: none
}

a {
	text-decoration: none;
	transition: 0.25s;
	color: var(--theme);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500
}

img {
	border: 0;
	vertical-align: middle
}

img[src=''],
img:not([src]) {
	border: 0;
	opacity: 0
}

svg,
canvas {
	vertical-align: middle
}

button {
	cursor: pointer;
	-webkit-appearance: none;
	font-size: 13px;
	line-height: unset;
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

.joe_main {
	min-width: 0;
	flex: 1;
	padding: 15px 0
}

.joe_container {
	display: flex;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px
}

.text-center {
	text-align: center;
}

.em2x {
	font-size: 2em;
}

.em12 {
	font-size: 1.2em;
}

.svg:not(:root) {
	overflow: hidden;
}

.svg {
	width: 1em;
	height: 1em;
	vertical-align: -.15em;
	fill: currentColor;
	overflow: hidden;
}

.mt10 {
	margin-top: 10px;
}

.padding-w10 {
	padding-left: 10px;
	padding-right: 10px;
}

.title-theme {
	position: relative;
	padding-left: 1.2em;
	font-size: 15px;
	color: var(--main-color);
}

.title-theme small {
	font-size: 80%;
	opacity: .7
}

.title-theme:before {
	position: absolute;
	content: '';
	width: 4px;
	background: var(--theme);
	top: 10%;
	left: 2px;
	bottom: 10%;
	border-radius: 5px;
	box-shadow: 1px 1px 3px -1px var(--theme)
}

.splitters-this-l,
.splitters-this-r,
.splitters>li+li {
	position: relative
}

.splitters-this-l,
.splitters-this-r:before,
.splitters>li+li:before {
	content: '';
	width: 1px;
	height: 1.1em;
	position: absolute;
	display: inline-block;
	background: var(--main-color);
	left: -1px;
	top: 50%;
	opacity: .2 !important;
	transform: translateY(-50%)
}

.splitters-this-r:before {
	left: auto;
	right: 0
}

.swiper-slide {
	transform: translate3d(0, 0, 0);
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition-property: transform;
}

.swiper-scroll .swiper-slide {
	width: unset;
	margin-right: 10px;
}

.hover-zoom-img:hover img,
.hover-zoom:hover,
.social_loginbar .social-login-item:hover,
.social_loginbar .xh-social-item:hover {
	transform: scale(1.05);
}

.relates-thumb .swiper-slide {
	width: 220px
}

.relates-thumb .graphic {
	margin-bottom: 0
}

.graphic,
.page-cover {
	text-shadow: 0 0 5px rgba(0, 0, 0, .2);
	--main-color: #fff;
	color: #fff;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 10px var(--main-shadow);
	padding: 0;
	padding-bottom: 70%;
	border-radius: var(--main-radius);
}

.graphic>.fit-cover {
	position: absolute;
	width: 100%;
	height: 100%;
}

.avatar,
.fit-cover,
.radius-cover {
	width: 100%;
	height: 100%;
	transition: all .2s;
	overflow: hidden;
	-o-object-fit: cover;
	object-fit: cover;
}

.abs-center.conter-bottom,
.abs-center.left-bottom,
.abs-center.right-bottom {
	top: auto;
	transform: unset;
	bottom: 0;
}

.style-3 .graphic-text {
	background: rgba(0, 0, 0, .2);
}

.abs-center {
	left: 0;
	width: 100%;
}

.abs-center,
.abs-left,
.abs-right,
.form-select::before,
.line-form-label,
.payvip-icon:before,
.toggle-radius .fa,
.toggle-radius .icon {
	position: absolute;
	top: 50%;
	right: .7em;
	transform: translateY(-50%);
	z-index: 1;
}

.graphic-text {
	padding: 5px 10px;
	transition: .3s;
}

.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.style-3 .graphic-text+.graphic-text {
	opacity: 0;
	transform: translateY(100%);
	white-space: normal;
	word-break: break-all;
}

.graphic.style-3:hover .graphic-text {
	opacity: 0;
	transform: translateY(100%)
}

.graphic.style-3:hover .graphic-text+.graphic-text {
	opacity: 1;
	transform: unset
}

.opacity8 {
	opacity: .8;
}

.em09 {
	font-size: .9em;
}

.mt6 {
	margin-top: 6px;
}

.opacity8 {
	opacity: .8;
}

.px12 {
	font-size: 12px;
}

.pull-right {
	float: right;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	font-size: 15px;
	color: #fff;
}

.swiper-scroll .swiper-button-next,
.swiper-scroll .swiper-button-prev,
.swiper-thumbsbox .swiper-button-next,
.swiper-thumbsbox .swiper-button-prev {
	background-color: rgba(0, 0, 0, .5);
	width: 26px;
	opacity: 0;
	transition: .4s;
	text-shadow: 0 0 6px #444;
}

.swiper-button-next {
	right: -15px;
	/* left: auto; */
}

.swiper-button-prev {
	left: -15px;
	/* right: auto; */
}

.swiper-initialized:hover .swiper-button-next:not(.swiper-button-disabled) {
	right: 0;
	opacity: .8;
}

.swiper-initialized:hover .swiper-button-prev:not(.swiper-button-disabled) {
	left: 0;
	opacity: .8;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity: 0;
}

.mb6 {
	margin-bottom: 6px;
}

.scroll-x,
.scroll-y {
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
	overflow-x: auto;
}

.enlighter,
.mini-scrollbar,
.no-scrollbar {
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
	scrollbar-width: thin;
}

.no-scrollbar {
	overflow: -moz-scrollbars-none;
	/* Firefox */
	scrollbar-width: none;
	/* IE 10+ */
	-ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
	/* Chrome Safari */
	display: none;
}

.scroll-x {
	white-space: nowrap;
}

.badg,
.but,
.post-page-numbers {
	border-radius: 4px;
	display: inline-block;
	border-radius: 4px;
	transition: .15s;
	border: 1px solid var(--this-border);
	vertical-align: middle;
	padding: .3em .6em;
	text-align: center;
	font-weight: 400;
	box-shadow: var(--this-shadow);
	background: var(--this-bg);
	color: var(--this-color);
	--main-color: var(--this-color);
	--this-bg: rgba(136, 136, 136, 0.1);
	--this-border: transparent;
	--this-shadow: none;
	--this-color: #888;
	text-shadow: 0 0 0;
	line-height: 1.44;
}

.but:focus,
.but:hover,
.navbar-nav>li:before,
.progress {
	transition: .3s;
}

.but:focus,
.but:hover {
	opacity: .8;
	color: var(--this-color);
}

.c-blue,
.c-blue-2,
.c-cyan,
.c-gray,
.c-green,
.c-green-2,
.c-purple,
.c-purple-2,
.c-red,
.c-red-2,
.c-theme,
.c-white,
.c-yellow,
.c-yellow-2 {
	color: var(--this-color);
}

.but .icon,
.but>.fa {
	margin-right: .25em;
}

.c-theme {
	--this-color: var(--focus-color);
	--this-bg: var(--focus-color-opacity1)
}

.c-gray {
	--this-color: #888;
	--this-bg: rgba(136, 136, 136, 0.1)
}

.c-white {
	--this-color: #fff;
	--this-bg: rgba(255, 255, 255, 0.1)
}

.c-red {
	--this-color: #ff5473;
	--this-bg: rgba(255, 84, 115, 0.1)
}

.c-red-2 {
	--this-color: #d6064c;
	--this-bg: rgba(194, 41, 46, 0.1)
}

.c-yellow {
	--this-color: #ff6f06;
	--this-bg: rgba(255, 111, 6, 0.1)
}

.c-yellow-2 {
	--this-color: #c58516;
	--this-bg: rgba(179, 103, 8, 0.1)
}

.c-blue {
	--this-color: #2997f7;
	--this-bg: rgba(41, 151, 247, 0.1)
}

.c-blue-2 {
	--this-color: #5c7cff;
	--this-bg: rgba(77, 130, 249, 0.1)
}

.c-cyan {
	--this-color: #04b9b6;
	--this-bg: rgba(8, 196, 193, 0.1)
}

.c-green {
	--this-color: #18a52a;
	--this-bg: rgba(18, 185, 40, 0.1)
}

.c-green-2 {
	--this-color: #6a933e;
	--this-bg: rgba(72, 135, 24, 0.1)
}

.c-purple {
	--this-color: #e434e1;
	--this-bg: rgba(213, 72, 245, 0.1)
}

.c-purple-2 {
	--this-color: #8e4aff;
	--this-bg: rgba(154, 72, 245, 0.1)
}

.muted-2-color {
	color: var(--muted-2-color);
}

.flex {
	display: flex;
}

.flex.ac,
.inflex.ac {
	align-items: center;
}

.flex.jsb,
.inflex.jsb {
	justify-content: space-between;
}

.avatar-img,
.avatar-lg,
.avatar-mini,
.square-box {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	--this-size: 38px;
	width: var(--this-size);
	height: var(--this-size);
}

.avatar-mini {
	--this-size: 20px;
}

.avatar,
.fit-cover,
.radius-cover {
	width: 100%;
	height: 100%;
	transition: all .2s;
	overflow: hidden;
	-o-object-fit: cover;
	object-fit: cover;
}

.avatar,
.radius-cover {
	border-radius: 100px;
	display: inline-block;
}

.ml6 {
	margin-left: 6px;
}

.document-nav>.panel-group>.cat-load::before,
.icon-circle::before,
.mobile-menus>li>a::before {
	content: '';
	width: .3em;
	height: .3em;
	border: .1em solid var(--theme);
	border-radius: 1em;
	margin: 0 .5em;
	vertical-align: .1em;
	display: inline-block;
}

.author-tag a .fa,
.author-tag a .icon,
.author-tag>span .fa,
.author-tag>span .icon,
.item-meta item .icon {
	margin-right: 2px;
}

.breadcrumb>li+li:before {
	color: #ccc;
	content: "/\00a0";
	padding: 0 0 0 6px;
	opacity: .6;
}

@media (min-width: 576px) {
	.joe_container {
		max-width: 540px
	}
}

@media (min-width: 768px) {
	.joe_container {
		max-width: 720px
	}
}

@media (min-width: 992px) {
	.joe_container {
		max-width: 960px
	}
}

@media (min-width: 1200px) {
	.joe_container {
		max-width: 1140px
	}

	html .joe_header__above>.joe_container {
		max-width: 1140px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 1400px) {
	.joe_container {
		max-width: 1200px
	}

	html .joe_header__above>.joe_container {
		max-width: 100%;
		padding-left: 100px;
		padding-right: 100px;
	}
}