* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input,
textarea,
button {
    outline: none;
    background-color: transparent;
    border: 0;
}

body {
        font-family: 'ZCOOL KuaiLe', cursive;
        display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
           -webkit-box-pack: center;
           -ms-flex-pack: center;
             justify-content: center;

        }
.cntr {
            display: table;
            width: 100%;
            height: 100%;
        }

.cntr .cntr-innr {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }    
        
        
h1 {
            text-align: center;
            margin-bottom: 10px;
        }

p {
            margin-top: 10px;
        }
       
i {
            margin-top: 10px;
            color:#F08080;
        }
        
        
.page {
    min-height: 100vh;
    width: 95%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: lighter;
}

.login-input-pink { /* 杈规缇庡寲 */
	width: 220px; /* 瀹藉害 */
	height: 20px; /* 楂樺害 */
	border-width: 1px; /* 杈规瀹藉害 */
	border-radius: 3px; /* 杈规鍗婂緞 */
    border-style:solid;
    border-color:rgb(192, 199, 255);
	background:white ; /* 鑳屾櫙棰滆壊 */
	
	outline: none; /* 涓嶆樉绀鸿疆寤撶嚎 */
	font-family: Microsoft YaHei; /* 璁剧疆瀛椾綋 */
	color: #000000; /* 瀛椾綋棰滆壊 */
	font-size: 14px; /* 瀛椾綋澶у皬 */
}
.login-input-pink:hover { /* 榧犳爣绉诲叆鎸夐挳鑼冨洿鏃舵敼鍙橀鑹� */
	background: white;
    border-color:#0255ef;
} 

.login-button { /* 鎸夐挳缇庡寲 */
	width: 160px; /* 瀹藉害 */
	height: 20px; /* 楂樺害 */
	border-width: 0px; /* 杈规瀹藉害 */
	border-radius: 3px; /* 杈规鍗婂緞 */
	background: #333dff; /* 鑳屾櫙棰滆壊 */
	border-radius: 10px;
	cursor: pointer; /* 榧犳爣绉诲叆鎸夐挳鑼冨洿鏃跺嚭鐜版墜鍔� */
	outline: none; /* 涓嶆樉绀鸿疆寤撶嚎 */
	/* font-family: Microsoft YaHei; /* 璁剧疆瀛椾綋 */
	color: white; /* 瀛椾綋棰滆壊 */
	font-size: 14px; /* 瀛椾綋澶у皬 */
}
.login-button:hover { /* 榧犳爣绉诲叆鎸夐挳鑼冨洿鏃舵敼鍙橀鑹� */
	background: #002aff;
}

.login-buttongm { /* 鎸夐挳缇庡寲 */
	width: 80px; /* 瀹藉害 */
	height: 20px; /* 楂樺害 */
	border-width: 0px; /* 杈规瀹藉害 */
	border-radius: 3px; /* 杈规鍗婂緞 */
	background: #ff3399; /* 鑳屾櫙棰滆壊 */
	border-radius: 10px;
	cursor: pointer; /* 榧犳爣绉诲叆鎸夐挳鑼冨洿鏃跺嚭鐜版墜鍔� */
	outline: none; /* 涓嶆樉绀鸿疆寤撶嚎 */
	/* font-family: Microsoft YaHei; /* 璁剧疆瀛椾綋 */
	color: white; /* 瀛椾綋棰滆壊 */
	font-size: 14px; /* 瀛椾綋澶у皬 */
}
.login-buttongm:hover { /* 榧犳爣绉诲叆鎸夐挳鑼冨洿鏃舵敼鍙橀鑹� */
	background: #ff0097;
}


.login-input-pink1 { /* 杈规缇庡寲 */
	width: 160px; /* 瀹藉害 */
	height: 20px; /* 楂樺害 */
	border-width: 1px; /* 杈规瀹藉害 */
	border-radius: 3px; /* 杈规鍗婂緞 */
    border-style:solid;
    border-color:pink;
	background:white ; /* 鑳屾櫙棰滆壊 */
	
	outline: none; /* 涓嶆樉绀鸿疆寤撶嚎 */
	font-family: Microsoft YaHei; /* 璁剧疆瀛椾綋 */
	color: #000000; /* 瀛椾綋棰滆壊 */
	font-size: 14px; /* 瀛椾綋澶у皬 */
}
.login-input-pink1:hover { /* 榧犳爣绉诲叆鎸夐挳鑼冨洿鏃舵敼鍙橀鑹� */
	background: white;
    border-color:#ef027d;
} 

.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../pic/1351575.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.container {
    position: relative;
    max-width: 800px;
    width: 95%;
    padding: 45px 65px;
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
}

.container.result {
    background: rgba(120, 129, 147, 0.3);
    box-shadow: 0 0 10px 0px #333;
    backdrop-filter: blur(10px);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

h1.title {
    text-align: center;
    margin-bottom: 30px;
}

.search-form {
    text-align: center;
    font-size: 16px;
}

.search-form input {
    border: #e1e1e1 solid 1px;
    border-radius: 50px;
    width: 100%;
    line-height: 1;
    font-size: 16px;
    padding: 15px 30px;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}

.search-form input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #f5f5f5;
}

.search-form input::-moz-placeholder {
    /* Firefox 19+ */
    color: #f5f5f5;
}

.search-form input:-ms-input-placeholder {
    /* IE 10+ */
    color: #f5f5f5;
}

.search-form input:-moz-placeholder {
    /* Firefox 18- */
    color: #f5f5f5;
}

.search-form .search-submit {
    padding: 15px 60px;
    border: 0;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.3s;
    background: -webkit-gradient( linear, left top, right top, from(#9c51ff), to(#816bff));
    background: -webkit-linear-gradient(90deg, #9c51ff, #816bff);
    background: linear-gradient(90deg, #9c51ff, #816bff);
}

.info {
    border: #e1e1e1 solid 1px;
    border-radius: 10px;
}

.info .info-item {
    padding: 0px;
    display: flex;
    /* line-height: 46px; */
}

.info .info-item~.info-item {
    border-top: #e1e1e1 solid 1px;
}

.info .info-item .lable {
    border-right: #e1e1e1 solid 1px;
    width: 120px;
    padding: 12px 20px;
    text-align-last: justify;
}

.info .info-item .value {
    flex: 1;
    padding: 12px 20px;
    
}
.div_foot {
             position: fixed;
             bottom:20px;
             left:0px;
             text-align: center;  
             width: 100%;
             font-size: 16px;
             letter-spacing: 1px;
        }
@media (max-width: 820px) {
    .container {
        padding: 20px;
    }
}
.demo_con{
margin:10px auto 0;
position: fixed;
left:0px;
text-align: center;  
width: 100%;
letter-spacing: 1px;
}
.button{
width: 50px;
line-height: 20px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 5px 5px 0;
position: relative;
overflow: hidden;
}
.button:nth-child(6n){
margin-right: 0;
}
.button.gray{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
.button.black{
border:1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top,#656565,#4c4c4c);
background: -moz-linear-gradient(top,#656565,#4a4a4a);
background: linear-gradient(top,#656565,#4a4a4a);
}
.button.red{
border:1px solid #b42323;
box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
background: -webkit-linear-gradient(top,#d53939,#b92929);
background: -moz-linear-gradient(top,#d53939,#b92929);
background: linear-gradient(top,#d53939,#b92929);
}
.button.yellow{
border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
}
.button.green{
border:1px solid #64c878;
box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(top,#90dfa2,#84d494);
}
.button.blue{
border:1px solid #1e7db9;
box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
background: linear-gradient(top,#42a4e0,#2e88c0);
}
.black:hover{
background: -webkit-linear-gradient(top,#818181,#575757);
background: -moz-linear-gradient(top,#818181,#575757);
background: linear-gradient(top,#818181,#575757);
}
.red:hover{
background: -webkit-linear-gradient(top,#eb6f6f,#c83c3c);
background: -moz-linear-gradient(top,#eb6f6f,#c83c3c);
background: linear-gradient(top,#eb6f6f,#c83c3c);
}
.yellow:hover{
background: -webkit-linear-gradient(top,#ffd859,#e3bb38);
background: -moz-linear-gradient(top,#ffd859,#e3bb38);
background: linear-gradient(top,#ffd859,#e3bb38);
}
.green:hover{
background: -webkit-linear-gradient(top,#aaebb9,#82d392);
background: -moz-linear-gradient(top,#aaebb9,#82d392);
background: linear-gradient(top,#aaebb9,#82d392);
}
.blue:hover{
background: -webkit-linear-gradient(top,#70bfef,#4097ce);
background: -moz-linear-gradient(top,#70bfef,#4097ce);
background: linear-gradient(top,#70bfef,#4097ce);
}
.gray:active{
top:1px;
background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
background: linear-gradient(top,#e4e8ec,#e4e8ec);
}
.black:active{
top:1px;
background: -webkit-linear-gradient(top,#424242,#575757);
background: -moz-linear-gradient(top,#424242,#575757);
background: linear-gradient(top,#424242,#575757);
}
.red:active{
top:1px;
background: -webkit-linear-gradient(top,#b11a1a,#bf2626);
background: -moz-linear-gradient(top,#b11a1a,#bf2626);
background: linear-gradient(top,#b11a1a,#bf2626);
}
.yellow:active{
top:1px;
background: -webkit-linear-gradient(top,#d3a203,#dba907);
background: -moz-linear-gradient(top,#d3a203,#dba907);
background: linear-gradient(top,#d3a203,#dba907);
}
.green:active{
top:1px;
background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
background: -moz-linear-gradient(top,#5eac6e,#72b37e);
background: linear-gradient(top,#5eac6e,#72b37e);
}
.blue:active{
top:1px;
background: -webkit-linear-gradient(top,#1a71a8,#1976b1);
background: -moz-linear-gradient(top,#1a71a8,#1976b1);
background: linear-gradient(top,#1a71a8,#1976b1);
}
.moe-tag {
    border: 1px solid var(--text-color);
    border-radius: 3px;
    color: var(--text-color);
    margin-left: 4px;
    margin-right: 4px;
    padding: 0 3px
}

.moe-tag.role-admin {
    background-color: #2ea44f;
    border: 1px solid #2ea44f;
    color: #fafafa
}

.moe-tag.role-dev {
    background: linear-gradient(45deg, #ef00ff, #001fff);
    border: 1px solid #920f9b;
    color: #fafafa
}

.moe-tag.role-creater {
    background-color: #222;
    border: 1px solid #222;
    color: #fafafa
}

.moe-tag.role-provider {
    background-color: #fbd38d;
    border: 1px solid #fbd38d;
    color: #c05621
}

.moe-tag.role-partner,
.moe-tag.role-agency {
    background-color: #FD6EA3;
    border: 1px solid #bb551d;
    color: #fff
}

.moe-tag.role-blog-owner,
.moe-tag.role-channel-owner {
    background-color: #00a7ff;
    border: 1px solid #FF3399;
    color: #fff
}

.moe-tag.role-moe {
    border: 1px solid #2eb6ff;
    color: #5277ff
}