/*reset*/
html, body, div, img, span, a, i, ul, li, span, table, tr, td, header, section, footer, p {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    background-color: white;
    margin: 0 auto;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    /*color:#666666*/
}

li {
    list-style-type: none
}

i, em {
    font-style: normal
}

body {
    font-family: "Microsoft Yahei";
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}
#outer{
    width:100%;
    height:900px;
    background:#ecf2f7;
}
#wapper {
    position:relative;
    width:1200px;
    height:900px;
    margin: -50px auto;
    background-color: #eef6fd;
    overflow:hidden;
    box-shadow:0 0 10px #dae3eb;
}
#logo{
    display: block;
    height:65px;
    position: absolute;
    left:100px;
    top:132px;
    z-index: 99;
    opacity:0;
}
.b_l{
    display:block;
    width:1200px;
    height:900px;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    transform: translate(-100%,100%);
    -webkit-transform: translate(-100%,100%);
    -moz-transform: translate(-100%,100%);
}
.b_r{
    display:block;
    width:1200px;
    height:900px;
    position:absolute;
    right:0;
    top:0;
    z-index:1;
    transform: translate(100%,-100%);
    -webkit-transform: translate(100%,-100%);
    -moz-transform: translate(100%,-100%);
}
.leftTo{
    animation:myleft 1s linear forwards;
    -webkit-animation:myleft 1s linear forwards;
    -moz-animation:myleft 1s linear forwards;
}
@-webkit-keyframes myleft{
    from {-webkit-transform: translate(-100%,100%)}
    to {-webkit-transform: translate(0,0)}
}
@-moz-keyframes myleft{
    from {-moz-transform: translate(-100%,100%)}
    to {-moz-transform: translate(0,0)}
}
.rightTo{
    animation: myright 1s linear forwards;
    -webkit-animation: myright 1s linear forwards;
    -moz-animation: myright 1s linear forwards;
}
@-webkit-keyframes myright{
    from {-webkit-transform: translate(100%,-100%)}
    to {-webkit-transform: translate(0,0)}
}
@-moz-keyframes myright{
    from {-moz-transform: translate(100%,-100%)}
    to {-moz-transform: translate(0,0)}
}
section{
    display: block;
    width: 350px;
    height: 300px;
    position: absolute;
    right: 43px;
    top: 257px;
    z-index: 99;
    opacity:0;
}
.welcome{
    display:block;
    width:300px;
    height:85px;
    position:absolute;
    left:0;
    top:0;
}
.fadeIn{
    animation: myfade 1s linear forwards 0.3s;
    -webkit-animation: myfade 1s linear forwards 0.3s;
    -moz-animation: myfade 1s linear forwards 0.3s;
}
@-webkit-keyframes myfade{
    from {opacity:0}
    to {opacity:1}
}
@-moz-keyframes myfade{
    from {opacity:0}
    to {opacity:1}
}
#conten {
    width: 356px;
    position: absolute;
    top: 25%;
    right: 10%;
}
.write_in {
    width: 260px;
    height: 35px;
    margin: 0 auto 20px;
    display: table;
}
.icon {
    display: block;
    float: left;
    width: 33px;
    height: 33px;
    margin-top: 40px;
}
.icon1 {
    padding: 0px 3px;
    width: 26px;
    height: 27px;
    margin-top: 43px;
}
.oInput {
    display: block;
    width: 260px;
    height: 35px;
    margin: 0 auto 20px;
    border-radius:20px;
    text-indent:10px;
    color:#FFFFFF;
    background-color:#559bd9;
    border: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: #FFFFFF;
    font-size: 15px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #FFFFFF;
    font-size: 15px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #FFFFFF;
    font-size: 15px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #FFFFFF;
    font-size: 15px;
}
#validateCode{
    display: inline-block;
    width: 120px;
    margin: 0 0 20px 48px;
}
.three input {
    width: 100px;
}
.inden_code {
    display: inline-block;
    width: 92px;
    height: 42px;
    background-color: #A7B1C2;
    margin-left: 10px;
    vertical-align: middle;
}
.tips {
    width: 305px;
    height: 14px;
    margin: 10px auto 20px;
    color: red;
    font-size: 14px;
    text-indent:20px;
}

.choice_in {
    width: 250px;
    height: 30px;
    margin: 20px auto 0;
    font-size: 13px;
    color: #FFFFFF;
}
.r_span {
    float: right;
}
.login_wenhao{
    display: inline-block;
    width: 15px;
    vertical-align: middle;
}
#login_btn {
    width: 250px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    font-size: 19px;
    border-radius:25px;
    margin: 25px auto 10px;
    background: -webkit-linear-gradient(left, #39c3d7 , #7ed8b9); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #39c3d7, #7ed8b9); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #39c3d7, #7ed8b9); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,#39c3d7 , #7ed8b9); /* 标准的语法 */
}
#login_btn:hover {
    cursor: pointer;
}
#rem_input {
    margin: 0;
    float: left;
    width: 15px;
    height: 15px;
    background: #a7b1c2;
    margin-top: 2px;
    margin-right: 5px;
    float: left;
}
/* .wrong {
    border-bottom: 1px solid red;
} */
input:focus {
    outline: none;
}