@charset "utf-8";
 *{
    box-sizing:border-box;
    padding:0px;
    margin:0px;
}
 html,body{
     height:100%;
     width:100%;
     overflow:hidden;
     font-family:'Times New Roman','Microsoft Yahei',Arial,Serif;
     font-size:100%;
}
 .clearfix{
     position:absolute;
     top:0rpx;
     left:0rpx;
     width:100%;
     height:100%;
     z-index:-3;
     background-color: rgb(0,0,0);
}
 .clearfix::after{
     content:"";
     visibility:hidden;
     height:0px;
     font-size:0em;
     display:block;
     clear:both;
}
 .frostedglass::before{
     content: '';
     position:fixed;
     top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
     z-index:-2;
     background: url("../Images/th.png") 0/cover;
}
/* Change styles for span and cancel button on extra small screens */
 @media screen and (orientation:portrait) {
     .clearfix{
         width:100vh;
         height:100vw;
         transform-origin:top left;
         -moz-transform-origin:top left;
         -webkit-transform-origin:top left;
         transform:rotate(90deg) translate(0vh,-100vw);
         -moz-transform:rotate(90deg) translate(0vh,-100vw);
         -webkit-transform:rotate(90deg) translate(0vh,-100vw);
    }
}
 @media screen and (orientation:landscape){
     .clearfix{
         width:100vw;
         height:100vh;
    }
}
/* The Modal (background) */
 .modal {
     position: fixed;
     top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
     background-color:rgba(0,0,0,.1);
     scrollbar-width:none;
     -ms-overflow-style:none;
     overflow-x:hidden;
     overflow-y:auto;
     z-index: 0;
}
 .modal::-webkit-scrollbar{
     display:none;
}
 .usageContent {
     position:relative;
     transform:translate(-50%,-50%);
     left:50%;
     top:48%;
     display:none;
     padding: 20px;
     border: 0px;
     width: 80%;
     background: white;
     overflow-y: auto;
     color:black;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.22), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     z-index:2;
}
 @-moz-document url-prefix{
     .modal{
        overflow:hidden;
    }
}
/* Modal Content/Box */
 .modalContent {
     position:relative;
     margin: 10% auto 15% auto;
     border: 1px solid #888;
     width: 36%;
     max-width:420px;
     background-color: rgba(0,0,0,.3);
     z-index:1;
}
 .modalRegister {
     position:relative;
     background-color: rgba(0,0,0,.3);
     margin: 10% auto 15% auto;
     border: 1px solid #888;
     width: 36%;
     max-width:420px;
     z-index:1;
}
 @media screen and (-webkit-min-device-pixel-ratio: 2) {
     .modalContent{
        min-width:36%;
    }
     .modalRegister{
        max-width:40%;
    }
}
 .imgcontainer {
     text-align: center;
     padding-top:50px;
     position: relative;
     display:inline-block;
}
 img{
     max-width:100%;
}
 img.avatar {
     width: 40%;
     border-radius: 50%;
}
/* Add Zoom Animation */
 .animate {
     -webkit-animation: animatezoom 0.6s;
     animation: animatezoom 0.6s 
}

 textarea {
     width:100%;
     height:4.4em;
     font-size:1.1em;
     border: 1px solid #4b4b4b;
     background:rgba(255,255,255,.2);
}
 input[type='text'], input[type='password'] {
     width: 100%;
     padding: 12px 20px;
     margin: 8px 0px;
     display: inline-block;
     border: 1px solid #4b4b4b;
     box-sizing: border-box;
     font-size:1.1em;
     background:rgba(255,255,255,.2);
}
 input[type='password']:hover, input[type="text"]:hover, textarea:hover {
     border:1px solid #f59942;
}
 input[type='password']:focus, input[type="text"]:focus, textarea:focus{
     -webkit-box-shadow: none;
     box-shadow: none;
     color: #000;
     border-color: #fff;
     background-color: rgba(255,255,255,.6);
     outline: none;
}
 input::-moz-placeholder, textarea::-moz-placeholder{
     color: #6a6f77;
     opacity:.8;
     font-size:1em;
     line-height:1em;
}
 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
     color: #6a6f77;
     opacity:.8;
     font-size:1em;
     line-height:1em;
}
 input:-ms-input-placeholder, textarea:-ms-input-placeholder{
     color: #6a6f77;
     opacity:.8;
     font-size:1em;
     line-height:1em;
}
 input::placeholder, textarea::placeholder{
     color: #6a6f77;
     opacity:.8;
     font-size:1em;
     line-height:1em;
}
 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
     box-shadow:0px 0px 0px 60px #eee inset;
     opacity:0.2 ;
     -webkit-text-fill-color: #000;
}
 textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus {
     box-shadow:0px 0px 0px 60px #eee inset;
     opacity:0.2 ;
     -webkit-text-fill-color: #000;
}
 button {
     display: inline-block;
     zoom: 1;
     display: inline;
     vertical-align: -webkit-baseline-middle;
     appearance: none;
     border: none;
     margin: 0px;
     outline: none;
     cursor: pointer;
     opacity: 0.7;
     height:100%;
     width:100%;
     text-align: center;
     text-decoration: none;
     font-size: 1.2em;
     padding: 12px 18px;
     margin: 8px 0px;
     text-shadow: 0px 1px 1px rgba(0,0,0,.3);
     -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
     border-radius:0px;
     -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.2);
     -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.2);
     box-shadow: 0px 1px 2px rgba(0,0,0,.2);
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-transition-property: all;
     transition-property: all;
     -webkit-transition-duration: .3s;
     transition-duration: .3s;
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(243,243,243,.6)), to(rgba(240,240,240,.6)));
     background: -moz-linear-gradient(top, rgba(243,243,243,.6), rgba(240,240,240,.6));
}
 button:hover {
     opacity: 1;
}
 .textAcontainer {
     position:relative;
     padding: 12px 16px 65px;
     z-index:1;
}
 .textBcontainer {
     position:relative;
     padding:16px;
     z-index:1;
}
 .textCcontainer {
     position:relative;
     padding:4px 16px 0px;
     z-index:1;
}
 .resetBtn {
     position:relative;
     float:left;
     background-color: rgba(245,153,66,.8);
     width:32%;
}
 .loginBtn{
     position:relative;
     float:right;
     background-color: rgba(76,175,80,.8);
     width:68%;
}
 .registerBtn{
     position:relative;
     float:center;
     background-color: rgba(76,175,80,.8);
     width:100%;
}
/* Extra styles for the cancel button */
 .usagebtn {
     width: auto;
     font-size:1em;
     color:#000;
     padding: 8px 16px;
     background-color: rgba(213,213,213,.7);
}
/* Center the image and position the close button */
 span.regjump {
     float: right;
     padding-top: 16px;
     margin-right:10px;
}
/* 关闭按钮 */
 .closeUsage {
     color: red;
     float: right;
     font-size: 2.2em;
     font-weight: bold;
}
 .closeUsage:hover, .closeUsage:focus {
     color: green;
     text-decoration: none;
     cursor: pointer;
}
 div>p,b{
     font-family: inherit;
     font-size:1em;
   	 color:black;
     margin:5px;
}
.shareImg{
    position:relative;
    display:none;
    background-color: #fefefe;
    margin: auto 40%;
    padding: 0px;
    width: 210px;
    height:210px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.22),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    z-index:4;
}
.alert-shield{
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:rgba(106,111,109,0.2);
	z-index:1000;
}
.alert-fram{
	position:absolute;
	left:50%;
	top:48%;
	min-width:356px;
	transform:translate(-50%,-50%);
	background:white;
	opacity:1;
	vertical-align:middle;
	padding:5px;
	color:black;
	overflow:hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.22), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index:1001;
}
 .fixed-bottom {
     position:fixed;
     bottom: 0px;
     height: 20px;
     line-height:20px;
     margin:0px;
     width:100%;
     background-color:rgba(211,211,211,.4);
     font-size:.9em;
     color:#000;
     z-index:0;
}
 a:link{
     color:#000;
}
 a:link,a:visited,a:hover,a:active {
     text-decoration:none;
}
 @-webkit-keyframes animatezoom {
     from {
        -webkit-transform: scale(0)
    }
     to {
        -webkit-transform: scale(1)
    }
}
 @keyframes animatezoom {
     from {
        transform: scale(0)
    }
     to {
        transform: scale(1)
    }
}