@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400&display=swap');
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
}
img {
	image-rendering:-moz-crisp-edges;
	image-rendering:-o-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode:nearest-neighbor;
}

div, label, a, li, span, button{
	-webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar{
	width: 5px;
	transition: .25s;
}
::-webkit-scrollbar-thumb{
	width: 5px;
	height: 14%;
	border-radius: 2.5px;
	background-color: rgb(52,52,52);
}
::-webkit-scrollbar-thumb:hover{
	background-color: rgb(63,63,63);
}
::-webkit-scrollbar-thumb:active{
	background-color: rgb(255,75,104);
}
.cover{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: opacity .4s;
	transition: opacity .4s;
}
.popup{
	position: absolute;
	z-index: 100;
	width: 600px;
	height: 500px;
	top: 110%;
	right: 10%;
	background-color: rgba(30, 30, 30, 0.98);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: rgba(0,0,0,0.05) 0 10px 20px;
	transition: .6s;
	transform: rotate(45deg) translateX(500px);
}
input#donation:checked ~ div#donation, input#about:checked ~ div#about, input#work:checked ~ div#work, input#connect:checked ~ div#connect{
	visibility: visible;
	opacity: 1;
}
input#donation:checked ~ div#donation .popup, input#about:checked ~ div#about .popup, input#work:checked ~ div#work .popup, input#connect:checked ~ div#connect .popup{
	top: calc(50% - 250px);
	right: calc(50% - 300px);
	transition:right .9s linear, transform .9s cubic-bezier(.19,.51,.39,1.33), top .9s cubic-bezier(.19,.51,.39,1.33) ;
	transform: none;
}
h1.popup_title{
	position: relative;
	left: 0;
	top: 40px;
	padding-left: 70px;
	color: white;
	font-size: 30px;
	font-family: 'Montserrat', sans-serif;
	cursor: default;
	transition: .6s;
}
h3.popup_title{
	color: white;
	font-family: 'Montserrat', sans-serif;
	cursor: default;
}
.popup_text{
	position: relative;
	margin-left: 70px;
	left: 0;
	top: 40px;
	width: 460px;
	height: 365px;
	overflow: hidden;
	transition: .6s;
}
.popup_text > p {
	font-size: 15px;
	color: rgb(191,191,191);
	font-family: 'Noto Sans SC', sans-serif;
	cursor: default;
}
.RQRC {
	position: absolute;
	border-radius: 15px;
	width: 45%;
	height: auto;
	transition: .3s;
	-webkit-transition: .3s;
}
#Wechat{
	left: 0;
}
#Alipay{
	right: 0;
}
.close {
	z-index: 99;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}
.pop_check{
	z-index: -1000;
	position: fixed;
	left: 0;
	top: 0;
	opacity: 0;
	pointer-events: none;
}
#work .popup_text, #about .popup_text{
	overflow-y: scroll;
}
.work_box_container{
	position: relative;
	text-align: center;
}
.work_box{
	position: relative;
	display: inline-block;
	overflow: hidden;
	background-color: rgb(40, 40, 40);
	text-align: left;
	width: 48%;
	height: 110px;
	margin: 0 0.5% 4px;
	border-radius: 5px;
	transition: .25s;
	box-shadow: rgba(0, 0, 0, 0.5) 0 5px 10px;
}
.img_work_box{
	position: absolute;
	height: 100%;
	width: auto;
	top: 0;
	left: 50%;
	cursor: pointer;
	transform: translateX(-50%);
	transition: .7s;
}
.work_box > p{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 5px;
	margin: 0;
	transition: .6s;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	opacity: 0.8;
}
.work_box:hover{
	box-shadow: rgba(0, 0, 0, 0.4) 0 10px 30px;
}
.work_box:hover > .img_work_box{
	filter: blur(2px);
	transform: translateX(-50%) scale(1.1);
}
.work_box:hover > p{
	font-size: 15px;
	opacity: 1;
}
.closeinner{
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	transition: .25s;
	-webkit-transition: .25s;
}
.closeinner::before, .closeinner::after {
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -1px;
	background-color: rgb(180,180,180);
	transition: .25s;
}
.closeinner::before {
	transform: rotate(45deg);
}
.closeinner::after {
	transform: rotate(-45deg);
}
.close:hover > .closeinner::before, .close:hover > .closeinner::after {
	background-color: rgb(255,75,104);
}
.close:hover > .closeinner{
	transform: translate(50%, -50%) rotate(90deg);
}
.close:active > .closeinner::before, .close:active > .closeinner::after {
	opacity: 0.5;
}
.popup_text a{
	cursor: default;
	text-decoration:none;
	display: inline-block;
}
.popup_btn{
	width: 95px;
	height: 35px;
	position: relative;
	background-color:rgb(58, 58, 58);
	border:2px solid rgba(30, 30, 30, 0.98);
	border-radius: 8px;
	transition: .4s;
	-webkit-transition: .4s;
	overflow: hidden;
}
.popup_btn p{
	color:white;
	position: absolute;
	text-align: center;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	left: 0;
	top: 50%;
	transition: .4s;
	margin: 0;
	width: 100%;
    transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
}
.popup_btn img{
	left: 0;
	top: 0;
	width: auto;
	height: 45px;
	position: absolute;
	transform: rotate(15deg) translateX(-5px) translateY(5px);
}
#keep_cry img{
	transform: none;
	width: 100%;
	height: auto;
	top: -35px;
}
#tiktok img{
	height: 35px;
	transform: rotate(15deg) translateX(-3px) translateY(5px);
}
.popup_text > ul {
	padding-left: 5px;
	margin: 0;
	cursor: default;
}
#bilibili:hover{
	border: 2px solid rgb(1,176,255);
}
#bilibili:active{
	border: 2px solid rgba(1, 175, 255, 0.55);	
}
#bilibili:hover p{
	color: rgb(1, 238, 255);
}
#bilibili:active p{
	color: rgba(1, 238, 255,.55);
}
#youtube:hover{
	border: 2px solid rgb(255,0,0);
}
#youtube:active {
	border: 2px solid rgba(255,0,0,0.55);
}
#youtube:hover p{
	color: rgb(253,164,58);
}
#youtube:active p{
	color: rgba(253,164,58,.55);
}
#tiktok:hover{
	border: 2px solid rgb(240,0,68);
}
#tiktok:active {
	border: 2px solid rgba(240,0,68,0.55);
}
#tiktok:hover p{
	color: rgb(8,255,249);
}
#tiktok:active p{
	color: rgba(8,255,249,.55);
}
#blog:hover{
	border: 2px solid rgb(142,68,179);
}
#blog:active {
	border: 2px solid rgba(142,68,179,0.55);
}
#blog:hover p{
	color: rgb(208, 113, 255);
}
#blog:active p{
	color: rgba(208, 113, 255,.55);
}

#keep_cry:hover{
	border: 2px solid rgb(93,105,180);
}
#keep_cry:active {
	border: 2px solid rgba(93,105,180,0.55);
}
#keep_cry:hover p{
	color: rgb(125,160,212);
}
#keep_cry:active p{
	color: rgba(125,160,212,.55);
}
#telegram img{
	transform: none;
	left: -5px;
}
#telegram:hover{
	border: 2px solid rgb(63,167,226);
}
#telegram:active {
	border: 2px solid rgba(63,167,226,.5);
}
#telegram:hover p{
	color: rgb(107,207,247);
}
#telegram:active p{
	color: rgba(107,207,247,.5);
}
#qq:hover{
	border: 2px solid rgb(0,133,248);
}
#qq:active{
	border: 2px solid rgba(0,133,248,.5);
}
#qq:hover p{
	color: rgb(41, 155, 255);
}
#qq:active p{
	color: rgba(41, 155, 255,.5);
}
#covid-19:hover{
	border: 2px solid rgb(130, 130, 130);
}
#covid-19:active{
	border: 2px solid rgba(130, 130, 130,.5);
}
#covid-19:hover p{
	color: rgb(180, 180, 180);
}
#covid-19:active p{
	color: rgba(180, 180, 180,.5);
}
@media screen and (max-width: 666.66px){
	h1.popup_title{
		padding-left: 10%;
	}
	.popup{
		width: 90% !important;
		top: calc(50% - 250px);
		left: 5% !important;
	}
	.popup_text{
		margin-left: 10%;
		width: 80%;
	}
	.close{
		right: 15px;
		top: 15px;
	}
	.RQRC{
		width: 48%;
	}
}
@media screen and (max-width: 458px){
	.RQRC{
		border-radius: 8px;
	}
}
@media screen and (max-width: 330px){
	.work_box{
		width: 90%;
		height: 90px;
		margin: 0 0 4px;
	}
}