﻿
body,html{
    height: 100%;
    overflow: auto;
}
body{
    background: url("../img/bg3.png?002") center top no-repeat; background-size: 100% auto; 
}
section{    padding-top: 10.2rem;}
#headimg{
    width: 9.6rem;
    height: 12rem;
    border-radius:100% ;
    margin: auto;
    background-size:100% 100% !important;
    background-repeat:no-repeat;
    background-position: center center;
}
.btn{
    position: relative;
    z-index: 10;
    padding: 0.5rem;
    height: 1.6rem;
    line-height: 1.6rem;
    margin: auto;
    font-size: 0.8rem;
    color: #fd1142!important;
    border:1px solid  #fd1142;
    border-radius:0.2rem ;
}
.btn img{
    display: inline-block;
    width: 0.75rem;
    margin-left: 0.1rem;
}


/*截图上传页面*/
.clipbg{
    position: fixed;
    background: black;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    left: 0;
}
.loading{
    position: absolute;
    top: 40%;
    width: 38%;
    left: 31%;
    height: 1.6rem;
    line-height: 1.6rem;
    z-index: 99999;
    text-align: center;
    color: #ffffff;
    border-radius:0.2rem ;
    background: #9f9f9f;
}
.clipbg #clipArea{
    width: 100%;
    height: 80%;
    margin: auto;

}
.clipbg .footer{
    width: 90%;
    position: fixed;
    left: 5%;
    bottom: 0px;
    text-align: center;
}
.clipbg dl{
    background: #ffffff;
    border-radius: 0.4rem;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.clipbg dd{
    position: relative;
    height: 2.25rem;
    line-height: 2.25rem;
    border-bottom:1px solid #999999 ;
}
.clipbg .back{
    height: 2.25rem;
    line-height:2.25rem;
    border-radius: 0.4rem;
    margin-bottom: 0.4rem;
    background: #ffffff;
}
.clipbg dd input{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    filter:alpha(opacity=0);  
  -moz-opacity:0;  
  -khtml-opacity: 0;  
  opacity: 0; 
}
#headimg img{
    border-radius: 3px;
}

.main{width: 100%;height: auoto;background: url("../img/bg4.png") center top no-repeat;background-size: 100% auto;margin-top:8.5rem;}

.main>img{ width:100% !important; border-radius:1rem; position:absolute; top:9.65rem;pointer-events:none;}

.main>select{ background:rgba(0,0,0,0); width:6rem; position:absolute; left:1.5rem; height:2.1rem; top:.18rem; 
line-height:2.1rem; font-size:.8rem!important; color:#5EE0FB !important; font-weight:bold; z-index:11;}
.main>.sub_name{ background:rgba(0,0,0,0)!important; width:8rem !important; position:absolute; left:10rem; 
height:2.1rem !important; top:.18rem;line-height:2.1rem; font-size:.8rem!important; color:#fff !important; 
font-weight:bold; z-index:11;}
.main>textarea{ background:rgba(0,0,0,0); width:16.5rem; position:absolute; left:1.4rem; height:5rem; line-height:1.4rem; 
top:3.1rem; font-size:.8rem; color:#fff !important; font-weight:bold; z-index:11;}
.main>.sumbit{ width:100%; position:absolute; top:23rem; z-index:11;}
.main>.sub_name::placeholder{color:#fff;}
.main>textarea::placeholder{color:#fff; text-align:center; line-height:4.5rem;}

.tel_zan{width:25%; top:5.5rem; right:1rem; position:absolute;}
.tel_zan img{ width:100%;}

.list_box{ width:100vw; height:100vh; overflow-y:auto;}
.zan_tit{ width:100%; margin:2.8rem 0 .2rem 0;}
.zan_tit img{ width:100%;}
.zan_list{ width:90%; margin:0 5%; float:left;}
.zan_list dl{ width:47%; float:left; height:4.1rem;}
.zan_list dl:nth-of-type(2n){ margin-left:5.5%;}
.zan_list dl dt{ width:100%; padding:7% 10%; box-sizing:border-box; background:rgba(0,0,0,0.5);}
.zan_list dl dt img{ width:100%; border-radius:8%; display:block;}
.zan_list dl dd{ width:100%; padding:2% 3%; box-sizing:border-box; background:rgba(0,0,0,0.7); position:relative; height:1.3rem;}
.zan_list dl dd>span{ width:80%; display:block; color:#fff;}
.zan_list dl dd>span:nth-of-type(1){ font-size:.24rem !important; font-weight:bold; line-height:180%;
text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.zan_list dl dd>span:nth-of-type(2){ font-size:.22rem !important; line-height:120%; width:100%; overflow:hidden; transform:scale(0.8) translate(-12%,-12%);
text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.zan_list dl dd div{ width:.5rem; height:.5rem; background:rgba(255,255,255,0); position:absolute; top:-.3rem; right:.55rem; padding:8%; box-sizing:border-box;}
.zan_list dl dd div img{ width:80%; position:absolute; display:none; top:.5rem; left:.5rem;}
.zan_list dl dd div img.on{display:block;}
.zan_list dl dd em{display:block; width:.5rem; text-align:center; height:.5rem; line-height:.5rem; background:rgba(255,255,255,0); position:absolute; top:.8rem; right:1.5rem; font-size:.3rem; color:#fff; 
                   transform:scale(0.7) translate(2rem,-.4rem);}
