@charset "utf-8";

/* reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    -webkit-user-select: none;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* to preserve line-height and selector appearance */
sup {
    vertical-align:text-top;
}
sub {
    vertical-align:text-bottom;
}
input,
button,
textarea,
select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    *font-size:100%; /*to enable resizing for IE*/
    width:auto;
    overflow:visible;
}
/*because legend doesn't inherit in IE */
legend {
    color:#000;
}
h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}
/* end reset css */
html,
body {
    height:100%;
}
a,a:active{
    color:#333;
    text-decoration:none;
    outline:none;
}
a,button,input[type=button],input[type=input]{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
/*float clear*/
.clear {
    zoom: 1;
}
.clear:after {
    content: "\200c";
    display :block;
    height: 0;
    font-size: 0;
    clear: both;
}
.none{
    display:none;
    overflow:hidden;
}

/* -------------- */

body{color:#333; background:#4e97e9; font-family:"Microsoft YaHei", Arial, Verdana, serif; font-size:14px; line-height:1.4;}

.title{position:relative; height:60px;}
.title:after{position:absolute; top:15px; left:50%; display:block; content:''; width:218px; height:29px; margin-left:-109px; background:url(bg.png) no-repeat; background-size:275px 275px;}

.upload{position:relative; width:100px; height:100px; margin:25px auto; border:5px solid #fff; background:#8BB9EC; box-shadow:1px 5px 5px #367ECE; overflow:hidden;}
.upload input{position:absolute; top:0; left:0; background:#f00; width:100px; height:100px; z-index:2; opacity:0;}
.upload img{display:block; width:200px; height:200px;}
.upload i{position:absolute; top:10px; left:10px; display:block; width:84px; padding-top:70px; color:#4a7fba; font-size:14px; text-align:center; background:url(bg.png) no-repeat 5px -45px; background-size:275px 275px; overflow:hidden;}
.upload canvas{position:relative; z-index:1;width:100%;height:100%;}

.img-list{width:285px; border:1px solid #ddd; border-radius:5px; margin:0 auto; overflow:hidden; background:#fff;}
.img-list ul li{float:left; width:70px; height:65px; border-right:1px solid #ddd;}
.img-list ul li:last-child{border:0;}
.img-list ul li img{display:block; width:70px; height:65px;}

.selects{width:283px; margin:0 auto; padding:10px 0 5px 0; color:#fff;}
.selects select{width:80px; border:0; text-align:center; border-radius:3px;}

.hongbao{position:fixed; bottom:0; left:0; width:100%; z-index:103;}
.hongbao img{display:block; width:100%;}

.share{position:absolute; top:50%; left:50%; width:320px; height:271px; padding-top:60px; margin:-180px -160px; background:url(share.gif) no-repeat #EFCB4E; background-size:320px 271px; z-index:102;}
.share .new-pic{position:absolute; top:63px; left:50%; margin-left:-77px; width:140px; height:140px; border:3px solid #fff;}
.share p{position:absolute; bottom:0; left:0; width:320px; height:60px; text-align:center;}
.share p .share-link,
.share p .reset-link{display:inline-block; width:111px; height:38px; margin:5px 20px; background:url(bg.png) no-repeat 0 -230px; background-size:275px 275px; overflow:hidden;}
.share p .reset-link{background-position:-111px -230px;}

.bingo{position:relative; display:block; width:287px; height:45px; line-height:45px; font-size:24px; font-weight:bold; color:#7F1324; margin:18px auto 0; border-radius:5px; background:#FFFB69; text-align:center;}
/*.bingo:after{position:absolute; top:10px; left:50%; display:block; content:''; width:97px; height:24px; margin-left:-48px; background:url(bg.png) no-repeat 0 -142px; background-size:275px 275px;}*/
.bingo:active { opacity:.7;color:#7F1324;}

.mask1{position:fixed; top:0; left:0; right:0; bottom:0; background:#4e97e9; display:none; width:100%; height:100%; z-index:101;}
.mask2{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,.5); display:none; width:100%; height:100%; z-index:104;}
.mask2:after{display:block; content:''; position:absolute; top:10px; right:20px; width:116px; height:34px; background:url(bg.png) no-repeat 0 -177px; background-size:275px 275px; overflow:hidden;}

.toast_tip{position:absolute; top:20%; left:50%; height:35px; width:240px; margin-left:-120px; text-align:center; line-height:35px; background:rgba(0,0,0,.7); color:#fff; border-radius:5px; font-size:12px; z-index:103}

@media screen and (max-height:450px){
	.upload { margin:5px auto;}
	.hongbao{position:relative; margin-top:20px;}
}