@charset "gb2312";
/* CSS Document */
html,body{
     width: 100%;height: 100%;overflow: hidden;
}
body{font-size:12px;background: url(./../images/bg.jpg) no-repeat center top;background-size: 100% 100%;
}
ul,li{
list-style:none;
}
img{border:0; display: block;
}
.clear{
	zoom:1;
}
.clear:after{
	content:".";        
     display:block;        
     height:0;        
     clear:both;        
     visibility:hidden; 
}
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,pre, form, fieldset, table, th, td {
margin: 0; padding: 0;word-break:break-all;
}
p{ text-indent:2em; text-align:left;}
a {color:#000;text-decoration:none;
}
a:hover {color:#c00;text-decoration:underline;
}

.pos_rel{ position:relative;}
.pos_abs{ position:absolute;}

/*-----------------font--------------*/

.F14 { font-size:14px;
}
.F16 { font-size:16px;
}
.F25 { font-size:25px;
}

/*-----------------line-height--------------*/
.LH2 { line-height:2em;
}
.LH2-2 { line-height:2.2em;
}
.LH2-4 { line-height:2.4em;
}
.LH3-2 { line-height:3.2em;
}

/*-----------------border--------------*/

.border_all { border:1px solid #e9e9e9;
}
.border_b { border-bottom:1px solid #e9e9e9;
}

.w950{ width:950px;}
.w980{ width:980px;}
.w1000{ width:1000px;}

.auto{ margin:0 auto;}

.mt5{ margin-top:5px;}
.mt10{ margin-top:10px;}
.mt15{ margin-top:15px;}
.mt20{ margin-top:20px;}
.mt25{ margin-top:25px;}
.ml25{ margin-left:25px;}
.mr25{ margin-right:25px;}


.bgfff{ background:#fff;}

.fl{ float:left; display:inline;}
.fr{ float:right; display:inline;}

.tl{ text-align:left;}
.tr{ text-align:right;}
.tc{ text-align:center;}



.pageBox{
     width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;overflow-y: scroll;
}
.page{
     width: 100vw;height: 100vh;
     position: relative;
     display: none;
}
.page.current{
     display: block;
}

.p2_header{
     width: 89vw;
     margin-top: 7.2vw;
     background: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     padding-top: 6vw;
     position: relative;
}
.p2_header_top{
     width:80vw;
     display: flex;     
     margin-bottom: 5vw;
}
.p2_headerBox{
     width: 19vw;
     height: 19vw;
     border-radius: 10vw;
     background:rgba(105,125,239,0.33) ;overflow: hidden;
     display: flex;
     align-items: center;
}

.p2_headerImg{
     width: 17vw;
     height: 17vw;
     border-radius: 17vw;
     border:1vw solid #CED4FA;
}

.p2_nickName{
     width: 65vw;
     margin-left: 10px;
     font-size: 15px;
     height: 19vw;
     display: flex;
     align-items: center;
}

.thingsList{
     width: 77vw;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     background: #FBEFF3;
     padding: 6vw 6vw 40vw 6vw;
}
.thingsList:after {
     content: '';
     width: 22.1vw;
 }

.thingsList li{
 width: 22.1vw; 
 height: 31.8vw;     
 margin-bottom: 6vw;
}
.thingsList li.selectImgM{
     box-shadow: 0px 3px 10px #333;
     margin-left: -2px;
     margin-top: -2px;
}
.thingsList li img{
     width: calc(100% - 2px);
     height:calc(100% - 2px);
}

.p2_mask{
     width: 100vw;
     height: 100vh;
     background: rgba(0,0,0,0.7);
     position: fixed;
     left: 0;
     top: 0;
     display: none;
}

.selectImgL{
     width: 58.7vw;
     position: fixed;
     left: 50%;
     top: 50%;
     margin-left: -29.35vw;
     margin-top: -80vw;
}
.selectImgLimg{
      width: 100%;
}
.btn_done{
     width: 8.5vw;
     height: 8.5vw;
}

.selectBox{
     width: 100%;height: 37vw;
     background:#f9e1e9;
     position: fixed;
     left: 0;
     bottom: -37vw;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
}


.thingsListM{
     width: 90vw;
     height: 21.1vw; 
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     padding-top: 5vw;
     overflow: hidden;
}


.thingsListM li{
 width: 14.6vw; 
 height: 21vw;     
 margin-bottom: 1vw;
 position: relative;
 margin-left: 1.7vw;
 margin-right: 1.7vw;
}

.thingsListM li.hzero{height: 0px;background: red;}

.thingsListM li img{
     width: 100%;
     height: 100%;
}
.thingsListM li img.btn_del{
     width: 3.4vw;
     height: 3.4vw;
     position: absolute;
     right: 0;
     top: 0;
}
.btn_dongL{
     width: 17.6vw;
     height: 6.6vw;
     margin-top: 2vw;
}
.thingsNumBox{
     margin-top: 2.5vw;
     font-size: 14px;line-height: 1.3em;
}
.thingsNumBox span{
     color: #E25656;
}


.p3_header{
     width: 89vw;
     margin-top: 7.2vw;
     background: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     padding-top: 6vw;
     position: relative;
}
.p3_header_top{
     width:80vw;     
     margin-bottom: 2vw;
}
.p3_headerBox{
     width: 19vw;
     height: 19vw;
     border-radius: 10vw;
     background:rgba(105,125,239,0.33) ;overflow: hidden;
     display: flex;
     align-items: center;
}


.p3_headerImg{
     width: 17vw;
     height: 17vw;
     border-radius: 17vw;
     border:1vw solid #CED4FA;
     margin-top: -10vw;
}

.p3_nickName{
     width: 40vw;
     font-size: 15px;
     height: 12vw;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
}



.thingsListShare,.thingsListResult{
     width: 77vw;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     background: #fff;
     padding: 6vw 6vw 0vw 6vw;
}
.thingsListShare:after,.thingsListResult:after {
     content: '';
     width: 22.1vw;
 }

.thingsListShare li,.thingsListResult li{
 width: 22.1vw; 
 height: 31.8vw;     
 margin-bottom: 6vw;
}
.thingsListShare li.selectImgM,.thingsListResult li.selectImgM{
     box-shadow: 0px 3px 10px #999;
}
.thingsListShare li img,.thingsListResult li img{
     width: 100%;
     height: 100%;
}
.megBOx{
     width: 89vw;
     background: #FBEFF3;
     padding-bottom: 15vw;
     min-height: 60vw;
}
.megBOxnoImg,.megBOxnoImgResult{
     width:42.6vw;display: block;
}
.megBoxList,.megBoxListResult{
     width: 82vw;display: none;
}
.megBoxList li,.megBoxListResult li{
     margin-top: 6vw;
     width: 100%;
     display: flex;
     justify-content: space-between;
}

.megBoxList li .megHeaer,.megBoxListResult li .megHeaer{
     width: 13.3vw;
     height: 13.3vw;
     border-radius: 10vw;
}
.megCont{
     width: 65vw;
     font-size: 14px;
     color: #E25656;
}

.megCont span{ 
     padding: 0.5vw 3vw;
     border-radius: 10px;
     background: #E25656;
     color: #fff;
     margin-right: 10px;
}
.megCont label{font-size: 12px;}

.megCont div{ 
     padding: 1vw 3vw;
     border-radius: 15px;
     background: #C8CEEE;
     color: #533C3B;
     margin-top: 3vw;
}
.btn_reChoose{
     width: 11.7vw;
     margin-top: 6vw;
}
.cmqBox{
     width: 89vw;
     position: fixed;
     left: 5.5vw;
     bottom: 0;
     background: #FBEFF3;
     padding: 2.5vw 0;
     display: none;
}
.btn_cmq{
     width: 39.6vw;
}
.p3_mask{
     width: 100vw;
     height: 100vh;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 2;
     background: rgba(0,0,0,0.7);
     display: none;
}

.p4_headerImg{
     width: 17vw;
     height: 17vw;
     border-radius: 17vw;
     border:1vw solid #CED4FA;
}

.p4_nickName{
     width: 65vw;
     margin-left: 10px;
     font-size: 15px;
     height: 19vw;
     display: flex;
     align-items: center;
}


.thingsListFriend{
     width: 77vw;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     background: #FBEFF3;
     padding: 6vw 6vw 0vw 6vw;
}
.thingsListFriend:after {
     content: '';
     width: 22.1vw;
 }

.thingsListFriend li{
 width: 22.1vw; 
 height: 31.8vw;     
 margin-bottom: 6vw;
 position: relative;
}
.thingsListFriend li.selectImgM{
     box-shadow: 0px 3px 10px #333;
     margin-left: -3px;
     margin-top: -3px;
}
.thingsListFriend li img{
     width: 100%;
     height: 100%;
}
.thingsListFriend li img.btn_right,.thingsListFriend li img.btn_wrong{
     width: 10vw;
     height: 10vw;
     left: 50%;
     top: 50%;
     margin-left: -5vw;
     margin-top: -5vw;
     position: absolute;
     display: none;
     
}



.p5_header_top{
     width:75.4vw; 
     height: 17.8vw;    
     margin-bottom: 2vw;
     background: url(./../images/bg_mq.png) no-repeat center center;
     background-size: 100% 100%;
     display: flex;
     justify-content: space-between;
}
.p5_headerImgA,.p5_headerImgB{
     width: 17vw;
     height: 17vw;
     border-radius: 17vw;
     border:1vw solid #CED4FA;
}

.p5_headerImgA{
     margin-left: 0vw;
}
.p5_headerImgB{
     margin-right: 0vw;
}
.resultNum{
     color: #E25656;
     margin-top: 2.5vw;
}
.resultTxt{
     width: 78vw;
     margin-top: 6vw;
     color: #533C3B;
     font-weight: bold;
}
.btn_toMy{
     width: 31.4vw;
}