body { background: #f3f0e7; min-width: 320px; position: relative; }
.content-wrap { padding-top: 45px; width: 320px; margin: 0 auto; }
.content-wrap .container { padding: 0 25px; }
.form-group { text-align: center; }
.form-text { border: none; box-shadow: 1px 1px 0 rgba(0,0,0,0.1),1px 1px 0 rgba(0,0,0,0.1) inset; height: 40px; width: 100%; padding: 0 10px; box-sizing: border-box; border-radius: 3px; font-size: 16px; line-height: 40px; }
.pdt20 { padding-top: 20px; }
.btn { border: none; background: url(../images/btn_bg.png) no-repeat; width: 267px; height: 40px; font-size: 14px; color: #fff; display: inline-block; background-size: contain; }
.quick_qq, .quick_weibo { line-height: 20px; color: #808080; display: inline-block; position: relative; padding-left: 25px; margin-top: 20px; }
.quick_qq:before, .quick_weibo:before { background: url(../images/oauth_bg.png) no-repeat; width: 22px; height: 20px; display: inline-block; background-size: cover; content: " "; position: absolute; left: 0; top: 0; }
.quick_weibo:before { background-position: 0 -21px; }
.quick_qq { margin-right: 10px; }

.others { padding: 30px 0; }
.others a { font-size: 13px; color: #808080; margin-left: 25px; }
.others a i { display: inline-block; }
.others a:first-child { margin-left: 0; }

.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-danger { background-color: #f2dede; border-color: #ebccd1; color: #a94442; }

@media screen and (min-width: 480px) {
    .content-wrap { padding-top: 65px; width: 480px; }
    .content-wrap .container { padding: 0 40px; }
    .form-text { height: 58px; padding: 0 20px; font-size: 16px; }
    .btn { width: 400px; height: 59px; font-size: 22px; background-size: contain; }
    .pdt20 { padding-top: 40px; }
    .others { padding: 45px 0; }
    .others a { font-size: 20px; }

    .quick_qq, .quick_weibo { width: 64px; height: 61px; top: 170px; }
    .quick_weibo { background-position: 0 -61px; top: 231px; }
}