@font-face {
	font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;
    src: url('/fonts/HarmonyOS_Sans/HarmonyOS_Sans_SC_Medium.subset.woff2') format('woff2');
}

* {
	font-family: HarmonyOS_Sans_SC_Medium;
}
::selection{background:#212121;color:#fff}
::-webkit-scrollbar{width:5px;height:100%;background-color:#fff}
::-webkit-scrollbar-track{background:linear-gradient(135deg,#fff 0,#fff 100%)}
::-webkit-scrollbar-thumb{border-radius:20px;-webkit-box-shadow:inset 0 0 6px rgba(255,255,255,.3);background-color:#212121}
::-webkit-scrollbar-thumb:hover{border-radius:20px;-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,.2);background:#212121}

body {
	font-family: 'HarmonyOS_Sans_SC_Medium';
    font-size: 15px;
	background-color: #f7f7f7;
    -webkit-font-smoothing: antialiased;
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
	color: rgba(34,47,62,1);
	margin: 0 auto;
	padding: 0;
	width: 100%;
	line-height: 1.8;
}

* {
	margin: 0;
	padding: 0;
	list-style: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

p {
	margin: 0;
	font-variant-ligatures: common-ligatures discretionary-ligatures;
}

a {
	text-decoration: none;
}

a:link,a:visited {
	color: rgba(34,47,62,0.7);
	opacity: 1;
	-webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    -ms-transition: all 0.15s linear;
    transition: all 0.15s linear;
}

a:hover,a:active {
	color: #000;
}

h1,h2,h3,h4,h5,h6 {
	text-rendering: optimizeLegibility;
}

.main {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 50rem;
    border-radius: 10px;
    margin-top: 60px;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 30px 0 rgb(43 86 112 / 10%);
}

.content {
	margin: 0 auto;
	width: 720px;
	height: auto;
    margin-bottom: 1rem;
}

.list_with_title .container {
	margin: 0 auto;
	width: 720px;
}

.header {
	margin: 0 auto;
	padding: 50px 0px 20px 0px;
	max-width: 720px;
	background-size: cover;
	flex-wrap: wrap;
	-webkit-background-size: cover;
}

.header .me-tx {
    text-align: end;
}

.header .me-tx img {
	width: 60px;
	height: 60px;
	border-radius: 10px;
	box-shadow: 0 2px 4px -2px rgb(0 0 0 / 50%);
}

.header .description{
    margin-top: -4rem;
}
.header .description h1{
	color: rgba(0, 0, 0, 0.918);
    font-size: 3rem;
}
.header .description p{
	color: rgba(34,47,62,0.4);
	font-size: 14px;
}

.header .description .sub_title {
	float: none !important;
	list-style: none;
	font-weight: normal !important;
	flex: 3;
	justify-content: end;
}
.link_a{padding-right:5px!important;padding-left:5px!important}
.links-list-item{margin: 1rem;-webkit-transition:.3s;-webkit-transition:.3s;transition:.3s;-moz-transition:.3s;border-radius:10px;transition-timing-function:ease-in-out;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.links-list-item a{display:flex;border:none;align-items:center}
.links-list-item:hover .links-avatar{transform:scale(2)}
.links-list-item:hover .links-item-info span{transform:translateX(20%) translateY(0)}
.links-avatar{margin:10px 20px 10px 10px;border-radius: 10px;-webkit-transition:.3s;-webkit-transition:.3s;transition:.3s;-moz-transition:.3s;background:#f5f5f5;max-width:60px;max-height:60px}
.links-item-name{text-align:left;font-size:18px;color:#000;display:block;font-weight:700;align-items:center;-webkit-transition:.3s;-webkit-transition:.3s;transition:.3s;-moz-transition:.3s}
.links-item-desc{white-space:normal;color:#000;text-align:left;text-overflow:ellipsis;opacity:.7;font-weight:700;display:block;font-size:14px;-webkit-transition:.3s;-webkit-transition:.3s;transition:.3s;-moz-transition:.3s}


.flexbox{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -20px;
    margin-left: -20px;
}
.flex-50{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.dynamic-item{
    padding: 25px;
    height: 7rem;
    background-color: #FCFCFE;
    position: relative;
    border-radius: 10px;
    margin-bottom: 40px;
    overflow: hidden;
    box-shadow: 0 2px 4px -2px rgb(0 0 0 / 50%);
    margin: 1rem;
}
.dynamic-item img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.dynamic-item:hover img {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.dynamic-info{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    border-radius: 0 0 10px 10px;
    z-index: 1;
}
.dynamic-info h4{
    color: #fff;
}
.dynamic-item-fgc{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.557)));
    z-index: 0;
}
.footer {
    clear: both;
    margin: 0 auto;
    padding: 25px 0px;
    max-width: 800px;
    text-align: center;
    font-size: 12px;
}
.footer .powered_by {
    margin: 0;
    color: rgba(34,47,62,0.2);
    font-size: 11px;
}
.footer .powered_by a {
    margin: 0px 2px;
    color: rgba(34,47,62,0.2);
}
.footer .powered_by a:hover {
    color: #000;
}

@media screen and (max-width: 800px){
    .main {
    margin-top: 0px;
    width: 100%;
    border: 0;
    }
    .content {
        width: auto;
    }
    .header,.index_element{
        margin: 1rem;
    }
    .flex-50{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}