* {
	box-sizing: border-box;
	outline: none;
	scrollbar-width: thin;
}

html {
	height: 100%;
}

body {
	max-width: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "Microsoft Yahei Light", "Microsoft Yahei", PingFangSC-Regular, Helvetica, sans-serif, "等线";
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-image:url("../images/BG_A_Default_1.jpg");*/
	cursor: default;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

:root {
	--theme-color: #70C000;
	--w-alpha-05: rgba(255, 255, 255, .05);
	--w-alpha-10: rgba(255, 255, 255, .1);
	--w-alpha-20: rgba(255, 255, 255, .2);
	--w-alpha-30: rgba(255, 255, 255, .3);
	--w-alpha-50: rgba(255, 255, 255, .5);
	--w-alpha-60: rgba(255, 255, 255, .6);
	--w-alpha-70: rgba(255, 255, 255, .7);
	--w-alpha-80: rgba(255, 255, 255, .8);
	--w-alpha-90: rgba(255, 255, 255, .9);
	--bg-w-pure: white;
	--txt-w-pure: white;
	--txt-b-pure: black;
	--txt-b-tip: rgba(0, 0, 0, .8);
	--b-alpha-5: rgba(0, 0, 0, .05);
	--b-alpha-10: rgba(0, 0, 0, .1);
	--b-alpha-15: rgba(0, 0, 0, .15);
	--b-alpha-20: rgba(0, 0, 0, .2);
	--b-alpha-30: rgba(0, 0, 0, .3);
	--b-alpha-35: rgba(0, 0, 0, .35);
	--b-alpha-40: rgba(0, 0, 0, .4);
	--b-alpha-50: rgba(0, 0, 0, .5);
	--b-alpha-60: rgba(0, 0, 0, .6);
	--b-alpha-70: rgba(0, 0, 0, .7);
	--b-alpha-80: rgba(0, 0, 0, .8);
	--b-alpha-90: rgba(0, 0, 0, .9);
}

::selection {
	background-color: rgba(112, 192, 0, 0.35);
}

#bodyBox {
	z-index: -2;
	/*防止cover无法触发点击事件*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.25s;
}

@keyframes delayedFadeIn {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.rebound {
	animation: rebound 0.7s linear !important;
}

@keyframes rebound {
	0% {
		transform: scale(0.8);
	}

	20% {
		transform: scale(1.2);
	}

	40% {
		transform: scale(0.9);
	}

	60% {
		transform: scale(1);
	}
}

.showPop {
	animation: showPop 0.35s linear;
}

@keyframes showPop {
	0% {
		transform: rotate3d(1, 1, 0, 90deg);
	}

	50% {
		transform: rotate3d(1, 1, 0, -10deg);
	}

	100% {
		transform: rotate3d(0, 0, 0, 0deg);
	}
}

@font-face {
	font-family: 'iconfont';
	/* project id 1010028 */
	src: url('https://at.alicdn.com/t/font_1010028_mwzje6j2bqf.eot');
	src: url('https://at.alicdn.com/t/font_1010028_mwzje6j2bqf.eot?#iefix') format('embedded-opentype'),
		url('https://at.alicdn.com/t/font_1010028_mwzje6j2bqf.woff2') format('woff2'),
		url('https://at.alicdn.com/t/font_1010028_mwzje6j2bqf.woff') format('woff'),
		url('https://at.alicdn.com/t/font_1010028_mwzje6j2bqf.ttf') format('truetype'),
		url('https://at.alicdn.com/t/font_1010028_mwzje6j2bqf.svg#iconfont') format('svg');
}

@font-face {
	font-family: 'iconfont';  /* project id 2156775 */
	src: url('https://at.alicdn.com/t/font_2156775_ftpgoylmbiq.eot');
	src: url('https://at.alicdn.com/t/font_2156775_ftpgoylmbiq.eot?#iefix') format('embedded-opentype'),
	url('https://at.alicdn.com/t/font_2156775_ftpgoylmbiq.woff2') format('woff2'),
	url('https://at.alicdn.com/t/font_2156775_ftpgoylmbiq.woff') format('woff'),
	url('https://at.alicdn.com/t/font_2156775_ftpgoylmbiq.ttf') format('truetype'),
	url('https://at.alicdn.com/t/font_2156775_ftpgoylmbiq.svg#iconfont') format('svg');
  }

.iconfont {
	font-family: "iconfont" !important;
	font-size: 22px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0;
	-moz-osx-font-smoothing: grayscale;
}

.bgbox {
	display: none;
	opacity: 0;
	z-index: -3;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image:url("https://johnsonran.cn/API/bing");
	transition: opacity 1s, transform 0.25s, filter 0.25s;
}

#liveBgBox {
	display: none;
	opacity: 0;
	z-index: -2;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 1s, transform 0.25s, filter 0.25s;
}

.title {
	position: absolute;
	width: 100px;
	left: 50%;
	margin-left: -47.5px;
	top: 100px;
	text-align: center;
	transition: all 0.25s;
}

h1 {
	color: white;
	font-size: 36px;
	font-weight: inherit;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transition: all 0.25s;

	animation-name: delayedFadeIn;
	/*动画名称*/
	animation-duration: 2s;
	/*动画持续时间*/
	animation-iteration-count: 1;
	/*动画次数*/
	animation-delay: 0s;
	/*延迟时间*/
}

h1::after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 20px;
	background: var(--theme-color);
	transition: all 0.25s;
	transform: scale3d(0, 1, 1);
	transform-origin: 50% 0;
}

#title:hover>h1::after {
	transform: scale3d(1, 1, 1);
}

#title:active>h1::after {
	opacity: 0.6;
}

#title:active>h1 {
	color: rgba(255, 255, 255, 0.6);
}

.cover {
	z-index: -1;
	opacity: 0;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/*background-color: rgba(0,0,0,0.3);*/
	background-image: radial-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
	transition: all 0.25s;
}

.btn_search {
	display: none;
}

.input {
	position: absolute;
	top: 200px;
	left: calc(50% - 115px);
	width: 230px;
	outline: none;
	/*border: 1px solid rgba(255,255,255,0.3);*/
	border: none;
	padding: 13px 15px;
	border-radius: 30px;
	color: rgba(255, 255, 255, 0.8);
	font-size: small;
	font-weight: normal;
	font-family: "Microsoft Yahei", sans-serif;
	text-align: center;

	background-color: rgba(255, 255, 255, .25);
	box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	transition: color 0.25s, background-color 0.25s, box-shadow 0.25s, left 0.25s, opacity 0.25s, top 0.25s, width 0.25s;
}

.input:hover {
	color: var(--txt-b-pure);
	background-color: rgba(255, 255, 255, .6);
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
	left: calc(50% - 265px);
	width: 530px;
}

.input.focus {
	color: black;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
	left: calc(50% - 265px);
	width: 530px;
}

.input::placeholder {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transition: all 0.25s;
}

.input:hover::placeholder {
	color: rgba(100, 100, 100, 1);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0);
}

.input.focus::placeholder {
	color: transparent;
	text-shadow: none;
}

#searchOptBox {
	display: none;
	opacity: 0;
	position: absolute;
	top: 220px;
	/*270px*/
	left: 50%;
	margin-left: -210px;
	width: 260px;
	text-align: center;
	transition: all 0.25s;
}

.searchOpt {
	position: relative;
	padding: 5px 30px;
	margin-left: 5px;
	margin-right: 5px;
	background-color: var(--w-alpha-10);
	border-radius: 20px;
	transition: all 0.25s;
	cursor: pointer;
}

.searchOpt:hover {
	background-color: var(--w-alpha-20);
}

.searchOpt:active {
	background-color: var(--theme-color);
}

.searchOpt.selected {
	background-color: var(--w-alpha-30);
	cursor: default;
}

#contentSearchEng .pTitleS {
	margin-top: 5px;
	font-size: 11px;
}

.searchEngList {
	margin-top: 10px;
	margin-bottom: 20px;
}

.searchEngListItem {
	position: relative;
	width: 100%;
	padding: 10px 30px;
	border-bottom: solid 1px var(--b-alpha-10);
	cursor: pointer;
	transition: all .25s;
}

.searchEngListItem {
	padding: 10px 20px;
}

.searchEngListItem:hover {
	background-color: var(--b-alpha-5);
}

.searchEngListItem:active {
	background-color: var(--b-alpha-10);
}

.searchEngUrl {
	position: absolute;
	left: 100px;
	color: var(--b-alpha-50);
}

.searchEngUrl {
	left: 85px;
	width: calc(100% - 105px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

input[type="radio"] {
	display: none;
	position: absolute;
}

input[type="radio"] + div {
	color: var(--txt-b-pure);
	position: relative;
}

input[type="radio"] + div:after {
	position: absolute;
	opacity: 0;
	content: '';
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: 8px;
	height: 15px;
	transform: rotate(45deg);
	border-width: 2px;
	border-style: solid;
	border-color: var(--theme-color);
	border-top: 0;
	border-left: 0;
	transition: all .25s;
}

input[type="radio"]:checked + div:after {
	opacity: 1;
}

#inputCusSearchEngUrl {
	position: absolute;
	left: 100px;
	width: calc(100% - 130px);
	color: var(--b-alpha-50);
	background-color: transparent;
	border: none;
	transition: all .25s;
}

#inputCusSearchEngUrl::placeholder {
	transition: all .25s;
}

#inputCusSearchEngUrl:hover::placeholder {
	color: var(--b-alpha-60);
}

#inputCusSearchEngUrl:focus {
	color: var(--txt-b-pure);
}

#inputCusSearchEngUrl:focus::placeholder {
	color: transparent;
}

#iconBaidu,
#iconBing,
#iconDuckduckgo,
#iconYandex,
#iconGoogle {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

#iconBing {
	font-size: 15px;
}

.navbox {
	animation: fadeIn 0.25s linear;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	display: none;
	transition: all 0.25s;
}

.navbox0 {
	position: absolute;
	margin-top: 200px;
	left: calc(50% - 330px);
	width: 660px;
	height: 250px;
	overflow: hidden;
}

.navboxes {
	position: absolute;
	width: 100%;
	overflow: hidden;
	transition: all 0.25s;
}

#navboxCus {
	left: -100%;
	height: 200px;
}

#navbox1 {
	left: 0;
	height: 200px;
}

.navboxSwitch,
.navboxTmp {
	position: absolute;
	left: 50%;
	width: 650px;
	margin-left: -325px;
	text-align: center;
}

.navboxSwitch {
	z-index: 50;
	top: 450px;
	transition: all .25s;
}

.navboxTmp {
	bottom: 200px;
}

.iconAddNav {
	position: absolute;
	color: rgba(255, 255, 255, .3);
	top: 50%;
	left: 50%;
	margin-left: -11px;
	margin-top: -12px;
	transition: all 0.35s;
}

.popCaptionS {
	position: relative;
	left: 10%;
	top: 15px;
	color: var(--txt-b-pure);
	font-size: small;
	font-family: "Pingfang SC";
}

.inputCustom,
.inputLogin {
	position: relative;
	margin-top: 10px;
	padding: 0 15px;
	left: 10%;
	width: 80%;
	height: 25px;
	border: none;
	outline: none;
	border-radius: 20px;
	color: var(--txt-b-pure);
	background-color: var(--b-alpha-5);
	transition: all 0.25s;
}

#inputCustomUrl {
	margin-top: 25px;
}

.inputCustom:hover,
.inputLogin:hover {
	background-color: var(--b-alpha-10);
}

.inputCustom:focus,
.inputLogin:focus {
	background-color: var(--b-alpha-15);
}

.inputCustom::placeholder,
.inputLogin::placeholder {
	color: var(--b-alpha-50);
	transition: all 0.25s;
}

.inputCustom:focus::placeholder,
.inputLogin:focus::placeholder {
	color: transparent;
}

.btnCustom {
	position: absolute;
	margin-top: 10px;
	right: 10%;
	padding: 5px 20px;
	font-size: 11px;
	border-radius: 20px;
	color: white;
	font-weight: bold;
	font-family: "Pingfang SC";
	background-color: var(--theme-color);
	transition: all 0.25s;
	cursor: pointer;
}

.btnCustom:hover,
#btnLogin:hover,
#btnCompleteReg:hover,
.btnRectangle:hover {
	background-color: #61A600;
}

.btnCustom:active,
#btnLogin:active,
#btnCompleteReg:active,
.btnRectangle:active {
	background-color: #528C00;
}

#iconAdd {
	font-size: small;
}

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

textarea::-webkit-input-placeholder {
	color: var(--b-alpha-50);
	transition: all .25s;
}

textarea::-moz-placeholder {
	color: var(--b-alpha-60);
	transition: all .25s;
}

textarea:hover::-webkit-input-placeholder {
	color: var(--b-alpha-70);
}

textarea:hover:-moz-placeholder {
	color: var(--b-alpha-80);
}

textarea:hover::-moz-placeholder {
	color: var(--b-alpha-80);
}

textarea:hover::-ms-input-placeholder {
	color: var(--b-alpha-70);
}

.toolBarTip {
	display: inline-block;
	position: relative;
	margin-left: 5px;
	color: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: all 0.25s;
}

.navLinkBox {
	position: absolute;
	width: 100%;
	border-radius: 15px;
	font-size: 0;
	background-color: var(--w-alpha-05);
	overflow: hidden;
	transition: all .25s;
}

.navLinkBox.blurEf {
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	background-color: var(--w-alpha-30);
}

.navLinkBoxItem {
	display: inline-block;
	width: 20%;
	word-break: keep-all;
}

.iconfont.iconNavLinks {
	margin-right: 5px;
	font-size: small;
	color: rgba(255, 255, 255, .5);
	transition: all .25s;
}

.nav_links {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 12px;
	background-color: transparent;
	color: white;
	font-size: small;
	text-align: left;
	text-indent: 25%;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.25s;
}

#newNavLink {
	opacity: 1;
}


a.nav_links:link {
	color: rgba(255, 255, 255, 1);
	background-color: transparent;
}

a.nav_links:hover {
	color: var(--theme-color);
	background-color: var(--w-alpha-10);
}

a.nav_links:active {
	color: var(--theme-color);
	background-color: var(--w-alpha-20);
}

a.nav_links:hover>.iconfont.iconNavLinks {
	color: var(--theme-color);
}

.navLinkBox.blurEf a {
	color: var(--txt-b-pure);
}

.navLinkBox.blurEf a:hover {
	color: white;
	background-color: var(--b-alpha-10);
}

.navLinkBox.blurEf a:active {
	color: white;
	background-color: var(--b-alpha-20);
}

.navLinkBox.blurEf i {
	color: var(--b-alpha-50);
}

.quotebox {
	position: absolute;
	top: 100%;
	margin-top: -200px;
	width: 100%;
	font-size: small;
	text-align: center;
	cursor: default;
	transition: all 0.5s;
	padding: 0 20px;

	animation-name: delayedFadeIn;
	/*动画名称*/
	animation-duration: 3s;
	/*动画持续时间*/
	animation-iteration-count: 1;
	/*动画次数*/
	animation-delay: 0s;
	/*延迟时间*/
}

.quote-bg {
	z-index: -1;
	opacity: 0;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	background-image: linear-gradient(130deg, var(--w-alpha-90), var(--w-alpha-90), rgba(255, 255, 255, 0));
	transition: all 0.5s;
}

.quote-content {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	transition: all 0.25s;
}

.quote-author {
	opacity: 0;
	color: var(--b-alpha-90);
	transition: all 0.25s;
}

.quotebox:hover {
	/*background-color: rgba(255,255,255,0.9);*/
	color: var(--b-alpha-90);
}

.quotebox:hover .quote-bg {
	opacity: 1;
}

.quotebox:hover .quote-content {
	color: var(--b-alpha-90);
	text-shadow: 0 0 20px rgba(0, 0, 0, 0);
}

.quotebox:hover .quote-author {
	opacity: 1;
}

.links {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: all 0.25s;
}


a.links:link {
	color: rgba(255, 255, 255, 0.6);
}

a.links:hover {
	color: rgba(255, 255, 255, 1.0);
}

a.links:active {
	color: rgba(255, 255, 255, 0.6);
}

footer {
	position: absolute;
	bottom: 10px;
	left: calc(50% - 100px);
	width: 200px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

#footerBox {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 6px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.cover1 {
	z-index: 99;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.35);
	display: none;
	opacity: 0;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: all 0.25s;
	perspective: 1000px;
}

.popUp {
	position: absolute;
	z-index: 100;
	width: 600px;
	height: 500px;
	top: calc(50% - 250px);
	left: calc(50% - 300px);
	background-color: var(--bg-w-pure);
	font-size: small;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px;
	transform: rotate3d(1, 1, 0, 90deg);
	transition: all 0.25s;
}

#popBg,
#popAbout,
#popWelcome,
#popDonate,
#popGeneralSettings,
#popFeedback,
#popSearchEng,
#popLegal {
	display: none;
	opacity: 0;
}

.btnClose {
	z-index: 99;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}

.btnCloseInner {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 20px;
	right: 20px;
	transition: all 0.25s;
}

.btnCloseInner::before,
.btnCloseInner::after {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -1px;
	background-color: rgb(180, 180, 180);
	transition: all 0.25s;
}

.btnCloseInner::before {
	transform: rotate(45deg);
}

.btnCloseInner::after {
	transform: rotate(-45deg);
}

.btnClose:hover>.btnCloseInner::before,
.btnClose:hover>.btnCloseInner::after {
	background-color: var(--theme-color);
}

.btnClose:active>.btnCloseInner::before,
.btnClose:active>.btnCloseInner::after {
	opacity: 0.5;
}

.btnCloseS {
	z-index: 99;
	position: absolute;
	width: 12px;
	height: 12px;
	top: 12px;
	right: 12px;
	cursor: pointer;
	opacity: 0;
	transition: all 0.25s;
}

.btnCloseS::before,
.btnCloseS::after {
	content: '';
	position: absolute;
	height: 1px;
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -1px;
	background-color: rgb(160, 160, 160);
	transition: all 0.25s;
}

.btnCloseS::before {
	transform: rotate(45deg);
}

.btnCloseS::after {
	transform: rotate(-45deg);
}

.btnCloseS:hover::before,
.btnCloseS:hover::after {
	background-color: rgb(214, 0, 42);
}

.btnCloseS:active::before,
.btnCloseS:active::after {
	background-color: rgba(214, 0, 42, 0.5);
}

.aboutLogo {
	position: relative;
	top: 60px;
	left: calc(50% - 117.5px);
	width: 235px;
	height: 55px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-image: url("../assets/images/favicon.ico");
}

.pTitle {
	position: relative;
	left: 70px;
	top: 40px;
	color: var(--txt-b-pure);
	font-size: 25px;
	font-family: "Microsoft Yahei Bold", "Microsoft Yahei", Helvetica, sans-serif, "等线";
}

.pTitle.centerAligned {
	width: 100%;
	left: 0;
	top: 70px;
	text-align: center;
}

.pTitleU {
	z-index: -1;
	position: absolute;
	margin-top: -5px;
	width: 35px;
	height: 5px;
	background-color: var(--theme-color);
}

.pTitleU.centerAligned {
	left: 50%;
	margin-left: -25px;
}

.pContent {
	position: relative;
	left: 70px;
	top: 60px;
	width: 460px;
	scrollbar-color: var(--b-alpha-10) white;
}

.pContent.centerAligned {
	width: 80%;
	left: 10%;
	top: 65px;
	text-align: center;
}

#pVersion {
	font-size: 11px;
	color: var(--b-alpha-50);
}

.pAbout {
	font-size: 12px;
	color: var(--b-alpha-80);
	margin-top: -5px;
}

#changeLog {
	border-top: solid 1px rgba(112, 192, 0, 0.6);
	margin: 0 5%;
}

#changeLog>iframe {
	height: 220px;
	width: 100%;
}

.pContent::-webkit-scrollbar-thumb {
	background-color: var(--b-alpha-10);
	border-radius: 3px;
}

.pContent::-webkit-scrollbar-thumb:hover {
	background-color: var(--b-alpha-20);
}

.links1 {
	text-decoration: none;
	color: var(--theme-color) !important;
	cursor: pointer;
	transition: all 0.25s;
}


.links1:link {
	color: var(--theme-color) !important;
}

.links1:hover {
	color: rgba(80, 140, 0, 1.0) !important;
}

.links1:active {
	color: rgba(55, 100, 0, 1.0) !important;
}

#btnSettings,
#btnWarn {
	animation: fadeIn 0.25s linear;
	display: none;
	position: absolute;
	top: 30px;
	background-color: transparent;
	color: rgba(255, 255, 255, 0.35);
	font-size: 22px;
	cursor: pointer;
	transition: all 0.25s;
}

#btnSettings {
	right: 50px;
}

#btnWarn {
	right: 132px;
}

#btnWarn i {
	font-size: 20.5px !important;
}

#btnSettings:hover {
	color: rgba(255, 255, 255, 0.65);
	transform: rotate(60deg);
}

#btnWarn:hover {
	color: rgba(255, 255, 255, 0.65);
}

#btnSettings:active,
#btnWarn:active {
	color: rgba(255, 255, 255, 0.8);
}

#btnLike {
	animation: fadeIn 0.25s linear;
	display: none;
	position: absolute;
	right: 50px;
	bottom: 30px;
	background-color: transparent;
	color: rgba(255, 255, 255, 0.35);
	font-size: 22px;
	cursor: pointer;
	transition: all 0.25s;
}

#btnLike:hover {
	color: rgba(255, 255, 255, 0.65);
}

#btnLike:hover>#numLiked {
	color: rgba(255, 255, 255, 0.8);
}

#btnLike:active {
	color: var(--theme-color);
}

#btnLike:active>#numLiked {
	color: rgba(255, 255, 255, 1.0);
}

#numLiked {
	font-size: small;
	color: rgba(255, 255, 255, 0.5);
	transition: all 0.25s;
}

#wallpaperInfo {
	display: none;
	opacity: 0;
	transform: scale(0.5);
	position: absolute;
	right: 50px;
	bottom: 65px;
	padding: 12px 20px;
	color: var(--txt-b-pure);
	font-size: 11px;
	transition: all 0.25s;
	background-color: var(--w-alpha-80);
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.1) 0 3px 10px;
	transform-origin: 95% 50%;
	overflow: hidden;
}

#tp-weather-widget {
	position: absolute;
	left: 50px;
	bottom: 30px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.25s;
}

#tp-weather-widget:hover {
	opacity: 1 !important;
}

#pinnedBox {
	display: none;
	position: absolute;
	width: 320px;
	height: auto;
	perspective-origin: 185px 67.5px;
	perspective: 500px;
	transition: all 0.25s;
}

#contentBg,
#contentFeedback,
#contentLegal,
#contentSearchEng,
#contentGSet {
	height: 350px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.bgPreviewBox {
	position: relative;
	display: inline-block;
	margin-top: 10px;
	margin-right: 6px;
	left: 0;
	width: 135px;
	height: 90px;
	background-color: var(--b-alpha-5);
	border-radius: 6px;
	overflow: hidden;
}

.bgPreBoxMask,
.bgPreBoxInner {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: all 0.25s;
	background-position: center;
	background-size: cover;
}

.bgPreBoxInner:hover {
	transform: scale(1.1);
}

.bgPreBoxInner:hover>.bgPreBoxMask {
	background-color: rgba(0, 0, 0, 0.2);
}

.bgPreBoxInner:active>.bgPreBoxMask {
	background-color: rgba(0, 0, 0, 0.4);
}

.bgPreBoxInner.selected>.bgPreBoxMask,
.bgPreBoxInner.selected:hover>.bgPreBoxMask,
.bgPreBoxInner.selected:active>.bgPreBoxMask {
	background-color: rgba(0, 0, 0, 0.5);
}

.bgPreBoxInner.unset:hover>.bgPreBoxMask,
.bgPreBoxInner.unset:active>.bgPreBoxMask {
	background-color: transparent;
}

.bgPreBoxInner.selected,
.bgPreBoxInner.selected:hover,
.bgPreBoxInner.selected:active,
.bgPreBoxInner.unset:hover {
	transform: scale(1);
}

#bgPreBoxIn1 {
	background-image: url("../assets/images/BG_A_Default_1.jpg");
}

#bgPreBoxIn2 {
	background-image: url("../assets/images/BG_A_Default_2.jpg");
}

#bgPreBoxIn3 {
	background-image: url("../assets/images/BG_A_Default_3.jpg");
}

#bgPreBoxIn4 {
	background-image: url("../assets/images/BG_A_Default_4.jpg");
}

#bgPreBoxIn5 {
	background-image: url("../assets/images/BG_A_Default_5.jpg");
}

#bgPreBoxIn6 {
	background-image: url("../assets/images/BG_A_Default_6.jpg");
}

#bgPreBoxInBing {
	background-image: url("https://johnsonran.cn/API/bing");
}

#bgPreBoxInLive {
	background-image: url("../assets/images/BG_A_Live_1.jpg");
}

.iconCheck,
.iconImg {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -18px;
	margin-top: -18px;
	font-size: 36px !important;
	color: white;
}

.iconImg {
	margin-left: -15px;
	margin-top: -15px;
	font-size: 30px !important;
	color: var(--b-alpha-50);
}

.bgPreBoxInner.selected>.iconCheck {
	display: block;
}

.bgPreBoxInner.unset>.iconImg {
	display: block;
}

.pTitleS {
	position: relative;
	color: var(--b-alpha-50);
	margin-top: 10px;
}

.pTitleS span {
	position: absolute;
	float: left;
	color: var(--txt-b-pure);
}

.pTip {
	position: relative;
	color: var(--txt-b-tip);
	margin-top: 10px;
	font-family: "Microsoft Yahei Light", "Microsoft Yahei", PingFangSC-Thin;
}

#menuUser,
#menuSettings,
#menuSearch,
#tipBoxLogin,
#tipBoxBrowser {
	display: none;
	opacity: 0;
	transform: scale(0.5);
	position: absolute;
	width: 160px;
	background-color: var(--bg-w-pure);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px;
	transition: all 0.25s;
	overflow: hidden;
}

#menuUser,
#menuSettings,
#tipBoxLogin,
#tipBoxBrowser {
	transform-origin: 95% 10%;
}

#tipBoxBrowser {
	right: 132px;
	top: 65px;
	width: 300px !important;
}

#tipBoxBrowser .pTip {
	text-align: left !important;
}

#menuUser,
#tipBoxLogin {
	right: 90px;
	top: 65px;
}

#menuSettings {
	right: 50px;
	top: 65px;
}

#menuSearch {
	z-index: 99;
	background-color: var(--bg-w-pure);
}

#offlineMark {
	position: absolute;
	top: 20px;
	right: 0;
	width: 5px;
	height: 5px;
	border-radius: 3px;
	background-color: #FFA769;
	transition: all .25s;
	pointer-events: none;
}

#tipBoxLogin,
#tipBoxBrowser {
	padding: 20px 30px;
	width: auto;
	font-size: 12px;
	text-align: right;
}

#tipBoxLogin .titleBold {
	display: inline-block;
}

#iconOffline {
	position: relative;
	top: 2px;
	right: 5px;
	color: var(--b-alpha-50);
	font-size: 20px;
}

.userMenuItem,
.searchMenuItem {
	padding-left: 20px;
	padding-top: 12px;
	padding-bottom: 12px;
	color: var(--txt-b-pure);
	font-size: 11px;
	transition: all 0.25s;
}

.userMenuItem:hover {
	background-color: var(--b-alpha-10);
}

.userMenuItem:active {
	background-color: var(--b-alpha-20);
}

.searchMenuItem:hover {
	background-color: var(--b-alpha-10);
}

.searchMenuItem:active {
	background-color: var(--b-alpha-20);
}

.searchMenuItem.disabled {
	color: var(--b-alpha-50);
	pointer-events: none;
}

#iconCopy,
#iconPaste,
#iconDel,
#iconEdit2 {
	position: relative;
	top: 1px;
	padding-right: 15px;
	font-size: 14px;
}

#menuTextUsername {
	display: block;
	font-size: 16px;
}

iframe {
	border: none;
}

#frmLogin {
	position: absolute;
	width: 100%;
	height: calc(100% - 30px);
	top: 30px;
	border: none;
}

.bodyLogin {
	background-image: none !important;
	background-color: var(--bg-w-pure) !important;
}

#pTitleLogin {
	margin-top: 5px;
}

#pTitleCompleteReg {
	margin-top: 20px;
}

#loginTip,
#loginTip2,
.loginTip3,
#welcomeTip {
	position: relative;
	width: 100%;
	text-align: center;
	font-size: small;
	transition: all 0.25s;
}

#loginTip {
	margin-top: 100px;
	color: var(--b-alpha-80);
}

#loginTip2 {
	font-size: 10px;
	color: var(--b-alpha-50);
}

.loginTip3 {
	font-size: 11px;
	color: var(--b-alpha-50);
}

#welcomeTip {
	margin-top: 80px;
	color: var(--txt-b-pure);
	font-size: 11px;
}

.inputLogin {
	position: absolute;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	height: 30px;
	text-align: center;
}

#inputEmail {
	margin-top: 35px;
}

#inputPsw {
	margin-top: 80px;
}

#inputBirthday {
	font-family: "Microsoft Yahei Light";
}

.btnLogin {
	position: absolute;
	top: 315px;
	left: 50%;
	width: 145px;
	height: 32px;
	font-size: small;
	border-radius: 20px;
	border: none;
	outline: none;
	color: white;
	background-color: var(--theme-color);
	transition: all 0.25s;
	cursor: pointer;
}

#btnLogin {
	margin-left: -150px;
}

#btnReg {
	margin-left: 5px;
	color: var(--theme-color);
	background-color: transparent;
	border: 1px solid var(--theme-color);
}

#btnReg:hover {
	color: white;
	background-color: #61A600;
	border-color: transparent;
}

#btnReg:active {
	background-color: #528C00;
}

#btnCompleteReg {
	margin-top: 45px;
	margin-left: -72.5px;
}

#greetingBox {
	display: none;
	position: absolute;
	top: 50px;
	left: calc(50% - 200px);
	width: 400px;
	text-align: center;
}

#greeting {
	position: relative;
	top: -100px;
	opacity: 0;
	padding: 15px 50px;
	border-radius: 30px;
	background-color: var(--bg-w-pure);
	color: var(--txt-b-pure);
	font-size: small;
	transition: all 0.5s;
	box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px;
}

#wip {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #333;
}

.wipTip {
	position: relative;
	width: 100%;
	text-align: center;
	color: white;
	font-family: "Pingfang SC";
}

#welcomeTip {
	margin-bottom: 30px;
}

.updateListBox {
	position: relative;
	margin-top: 15px;
	width: 60%;
	left: calc(20% - 23px);
}

.updateListIcon {
	position: absolute;
	float: left;
	top: calc(50% - 15px);
}

.iconUpdateList {
	color: var(--theme-color);
	font-size: 30px;
}

.updateListTitle {
	display: inline-block;
	position: relative;
	margin-left: 46px;
	width: 100%;
	color: var(--txt-b-pure);
	font-weight: bold;
}

.updateListDetail {
	position: relative;
	left: 46px;
	top: 3px;
	font-size: 12px;
	color: var(--b-alpha-60);
}

.btnRectangle {
	position: relative;
	top: 35px;
	left: 25%;
	width: 50%;
	height: 35px;
	border: none;
	outline: none;
	border-radius: 5px;
	background-color: var(--theme-color);
	color: var(--txt-w-pure);
	font-size: small;
	transition: all 0.25s;
	font-family: "Microsoft Yahei Light";
	cursor: pointer;
}

#contentDonate {
	width: 80%;
}

.imgQRC {
	position: absolute;
	width: 45%;
	height: auto;
}

#imgWC {
	left: 50%;
}

.btnRectangle2 {
	display: inline-block;
	position: relative;
	top: 40px;
	padding: 10px 30px;
	margin-right: 10px;
	border: solid 1px var(--b-alpha-10);
	border-radius: 5px;
	transition: all 0.25s;
	cursor: pointer;
}

.btnRectangle2:hover {
	background-color: var(--b-alpha-5);
}

.btnRectangle2:active {
	background-color: var(--b-alpha-10);
}

.inputEditUserInfo {
	display: none;
	position: absolute;
	width: 130px;
	outline: none;
	border: none;
	border-bottom: solid 1px var(--b-alpha-20);
	color: var(--txt-b-pure);
	background-color: rgb(242, 242, 242);
	transition: all 0.25s;
}

.inputEditUserInfo:hover {
	border-bottom: solid 1px var(--b-alpha-40);
}

.inputEditUserInfo:focus {
	border-bottom: solid 1px var(--theme-color);
}

.iconEdit {
	position: absolute;
	margin-left: 150px;
	font-size: small;
	transition: all 0.25s;
	cursor: pointer;
}

.iconEdit:hover {
	color: var(--theme-color);
}

.iconEdit:active {
	opacity: 0.6;
}

.btnUpdateUserInfo {
	display: none;
	margin-left: 150px;
}

/*.snow {
	display: none;
	opacity: 0;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 3s;
	pointer-events: none;
}*/
#contentGSet {
	width: calc(100% - 140px);
	top: 65px !important;
}

.switch {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 60px;
	height: 34px;
	transform: scale(0.6);
}

.switch input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 34px;
	background-color: #ccc;
	-webkit-transition: .25s;
	transition: .25s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	border-radius: 50%;
	background-color: white;
	-webkit-transition: .25s;
	transition: .25s;
}

input:active+.slider {
	background-color: #bbb;
}

input:checked+.slider {
	background-color: var(--theme-color);
	/*#2196F3;*/
}

input:checked:active+.slider {
	/*box-shadow: 0 0 1px #2196F3;*/
	background-color: #61A600;
}

input:checked+.slider:before {
	transform: translateX(26px);
}

.titleBold.setGroupCaption {
	margin-left: 10px;
	padding-bottom: 5px;
}

.setGroup {
	position: relative;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 3px;
	padding-left: 20px;
	padding-right: 5px;
	margin-bottom: 15px;
	background-color: var(--b-alpha-5);
	border-radius: 5px;
}

.setOptBox {
	position: relative;
	padding-bottom: 25px;
}

.setOptBox.individual .setOptCaption, .setOptBox.individual .setOptComment {
	margin-left: 10px;
}

.setOptBox.withButton .setOptComment {
	display: inline-block;
	width: calc(100% - 120px);
}

.setOptCaption {
	position: relative;
	top: 8px;
	color: var(--txt-b-pure);
	font-size: small;
}

.setOptComment {
	position: relative;
	display: block;
	top: 10px;
	color: var(--b-alpha-50);
	font-size: 11px;
}

.contentBlock {
	display: inline-block;
	position: relative;
	vertical-align: top;
	margin-right: 5px;
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: var(--b-alpha-5);
}

.contentBlock.legal {
	width: calc(50% - 10px);
	padding: 20px 30px;
}

#cBlockAccInfo {
	width: 275px;
	padding-top: 10px;
	padding-left: 30px;
	padding-bottom: 20px;
}

#cBlockAdvAcc {
	width: 170px;
	height: 142px;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 10px;
}

.titleBold {
	color: var(--txt-b-pure);
	font-family: "Microsoft Yahei", sans-serif;
	font-size: 15px;
	font-weight: bold;
}

.topNotificationBar {
	display: none;
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
	height: 50px;
	color: white;
	transition: all 0.25s;
}

.topNotificationBar.class0 {
	background-color: #FF173E;
}

.topNotificationBar.class1 {
	background-color: #1681C7;
}

.topNotificationBar.class2 {
	background-color: transparent;
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
}

#btnClosetopNBar {
	opacity: 1;
	top: calc(50% - 5px);
	right: 19px;
}

#btnClosetopNBar::before,
#btnClosetopNBar::after {
	background-color: rgba(255, 255, 255, 0.6);
}

#btnClosetopNBar:hover::before,
#btnClosetopNBar:hover::after {
	background-color: rgb(255, 255, 255);
}

#btnClosetopNBar:active::before,
#btnClosetopNBar:active::after {
	background-color: rgba(255, 255, 255, 0.5);
}

.bgCusBoxR {
	position: absolute;
	display: inline-block;
	margin-left: 20px;
	margin-top: 8px;
}

#pCusBgSuggestion {
	line-height: 8px;
}

#btnBrowse {
	position: unset;
}

#contentFeedback p {
	margin-top: 0;
}

.feedbackItem {
	position: relative;
	top: 5px;
	margin-top: 15px;
}

.feedbackItem div {
	margin-top: 7px;
	color: var(--b-alpha-70)
}

@keyframes move_wave {
	0% {
		transform: translateX(0) translateZ(0) scaleY(1)
	}

	50% {
		transform: translateX(-25%) translateZ(0) scaleY(0.55)
	}

	100% {
		transform: translateX(-50%) translateZ(0) scaleY(1)
	}
}

.waveWrapper {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	margin: auto;
	pointer-events: none;
}

.waveWrapperInner {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100%;
	bottom: -1px;
}

.wave {
	position: absolute;
	left: 0;
	width: 640%;
	height: 100%;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
}

.waveAnimation .waveTop {
	animation: move-wave 3s;
	animation-delay: 1s;
}

.waveAnimation .waveMiddle {
	animation: move_wave 10s linear infinite;
}

.waveAnimation .waveBottom {
	animation: move_wave 15s linear infinite;
}

input[type=file] {
	display: none;
}

@media screen and (max-width: 600px) {

	.bgbox,
	body {
		background-size: auto;
	}

	h1 {
		font-size: 27px;
	}

	.input {
		top: 170px;
		font-size: small;
		padding: 9px 15px;
		width: 180px;
		left: calc(50% - 90px);
	}

	.input.focus {
		left: 10%;
		top: 100px;
		width: 80%;
	}

	/*.input:hover,.input:focus {margin-left: -44%;width: 80%;}*/
	h1::after {
		width: 80%;
		bottom: 15px;
		left: 10%;
	}

	#searchOptBox {
		top: 110px;
	}

	.navbox0 {
		width: 100%;
		left: 0;
		margin-left: 0;
		margin-top: 170px;
	}

	.navLinkBox {
		left: 5%;
		width: 90%;
	}

	.iconfont.iconNavLinks {
		font-size: 11px;
	}

	.nav_links {
		text-indent: 15%;
		font-size: 11px;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.navboxSwitch {
		top: unset;
		bottom: 100px;
	}

	.quotebox {
		top: 550px;
		font-size: 0.7em;
		width: 80%;
		left: 50%;
		margin-left: -40%;
	}

	#btnSettings {
		right: 20px;
		top: 10px;
	}

	#menuUser {
		right: 60px;
		top: 45px;
	}

	#menuSettings {
		right: 20px;
		top: 45px;
	}

	.popUp {
		width: 90% !important;
		left: 5% !important;
	}

	.btnClose {
		top: 10px;
		right: 10px;
	}

	.pTitle,
	.pContent {
		left: 10%;
		width: 80%;
	}

	#btnLike {
		z-index: 98;
		right: 20px;
		bottom: 10px;
	}

	#contentGSet {
		width: 80%;
	}

	.setOptCaption,
	.setOptComment {
		display: inline-block;
		width: calc(100% - 70px);
	}

	#contentFeedback .titleBold {
		font-size: 13px;
	}

	#popAbout .pContent {
		left: 5%;
		width: 90%;
	}

	.aboutLogo {
		left: calc(50% - 100px);
		width: 200px;
		height: 47px;
	}

	#changeLog iframe {
		height: 230px;
	}

	#bgPreBoxLive,
	#bgTitleDynamic {
		display: none;
	}

	#popWelcome {
		overflow-y: scroll;
	}

	.btnRectangle {
		margin-bottom: 100px;
	}

	.contentBlock {
		width: 100% !important;
	}

	#tp-weather-widget {
		bottom: auto;
		left: 20px;
		top: 10px;
	}

	#pCusBgSuggestion,
	#pWallpaperInfo {
		display: none;
	}

	#btnBrowse {
		margin-top: 15px;
	}

	footer {
		font-size: 0.7em;
	}

	#pinnedBox {
		display: none !important;
	}

	.wave {
		width: 1000%;
	}
}

@media screen and (min-width: 600px) and (max-width: 700px) {
	.navLinkBox {
		left: calc(50% - 275px);
		width: 550px;
	}

	.nav_links {
		text-indent: 20%;
	}
}

@media screen and (min-width: 600px) and (max-width: 900px) {

	.bgbox,
	body {
		background-size: auto;
		background-position: center;
		background-attachment: fixed;
	}

}

@media screen and (max-width: 1300px) {
	#pinnedBox {
		overflow-y: auto;
		height: 200px;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 95%);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 95%);
		-webkit-mask-size: 100%;
		mask-size: 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: left top, right bottom;
		mask-position: left top, right bottom;
	}

	#pinnedBox::-webkit-scrollbar-thumb {
		background-color: var(--w-alpha-10);
		border-radius: 3px;
	}

	#pinnedBox::-webkit-scrollbar-thumb:hover {
		background-color: var(--w-alpha-30);
	}
}

@media screen and (max-height: 700px) {
	.navboxSwitch {
		top: unset;
		bottom: 100px;
	}
}

@media screen and (min-width: 600px) and (max-height: 550px) {
	.quotebox {
		display: none;
	}

	.navboxSwitch {
		top: unset;
		bottom: 150px;
	}

}

@media screen and (max-height: 500px) {

	.navboxSwitch {
		top: unset;
		bottom: 60px;
	}
}

@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
	#menuSearch {
		background-color: var(--w-alpha-60);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.quote-bg {
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		background-image: none !important;
	}

	.quotebox:hover {
		color: rgba(255, 255, 255, 0.9);
	}

	.quotebox:hover .quote-content {
		color: rgba(255, 255, 255, 0.9);
	}

	.quotebox:hover .quote-author {
		color: rgba(255, 255, 255, 0.9);
	}

	.searchMenuItem:hover {
		background-color: rgba(255, 255, 255, 0.25);
	}

	.searchMenuItem:active {
		background-color: rgba(255, 255, 255, 0.5);
	}
}