html {
	width:100%;
	font-family: Microsoft YaHei;
	overflow-x:hidden;
}

body {
	margin: 0;
	width:100%;
	height:100%;
	background:url("../images/c_main_bg.png") no-repeat;
	background-size: 100%;
}
.box {
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.btn{
	cursor:pointer;
}
.header {
    width: 99%;
    height: 10%;
}

.header div {
    margin-top: 1%;
    width: 19%;
    display: inline-block;
    vertical-align: middle;
}

.content {
    width: 99%;
    height:89%;
	/**height:830px;**/
	display: inline-block;
    margin-top: 1%;
    background: url("../images/c_content_bg.png") no-repeat;
    background-size: 94%;
    font-size: 20px;
}

.content > div {
    float: left;
    height: 89%;
    margin-top: 3%;
}
.header div img {
    width: 84%;
}
.left {
    width: 18%;
    text-align: center;
    margin-top:27px;
}

.left > div {
    width: 90%;
   /**height: 1%;
   height: 37px;**/
    margin: 0 auto;
}
@media screen and (max-width: 1280px) {
	.left > div {
		height:5%;
	}
}
.left >div>p {
    width: 60%;
}


.left > div > span {
    display: inline-block;
    vertical-align: middle;
}

.span_l {
    color: #fd697d;
    width: 45%;
    text-align: right;
}

.span_r {
    width: 55%;
    text-align: left;
    color: mediumpurple;
}

.right {
    width: 76%;
}

.red_star {
    width: 25%;
}

.star_num{
	width:11%;
}

#line {
    height: 0px;
    width: 80%;
    border: 1px solid #d3d3d3;
    margin-left: 14%;
}
#userCenter {
    /**margin: 30px 0 0 24px;**/
    margin: 11% 0 0 9%;
    width: 80%;
}
#out {
    position: relative;
    bottom: 13%;
    margin-top: 3%;
    margin-left: 9%;
    width: 80%;
}
#ReturnToLP{
	margin:5% 0 0 9%;
	width:80%;
    visibility: hidden;
}
.right div.bookslist {
    width: 18%;
    height: 50%;
    display: inline-block;
    /* float: left; */
    text-align: center;
    margin-left: 5.5%;
    position: relative;
}
.nselogo {
    width: 18%;
    height: 50%;
    /* float: left; */
    text-align: center;
    display: inline-block;
    margin-left: 5.5%;
}
.logo {
    margin: 100% 0px 0 -18%;
    width: 130%;
}

.shadow {
    position: absolute;
    margin-top: -296px;
    margin-left:4px;
    display:flex;
}

.tabs {
    width: 90%;
    height: 8%;
    margin-left: 8%;
    display: inline-block;
}
.tabs>img{
    vertical-align: middle;
}
#blacklist {
    margin-left: 6%;
    width: 24.5%;
}
.friends_list {
    width: 81%;
    height: 77%;
    margin: 5% auto 0 auto;
    overflow-y:auto;
}
img#myf {
    width: 24.5%;
}
.friends {
    width: 50%;
    height: 12%;
    float: left;
    padding: 10px 0 0 0;
}

.f_icon {
    width: 15.3%;
    height: 100%;
    float: left;
}

.f_icon_s {
    width: 10.3%;
    height: 100%;
    float: left;
    margin-top: 1%;
}

.friends img {
    vertical-align: middle;
}
img.btn.sendm {
    width: 18%;
    margin-left: 3%;
}
img.btn#backf {
    width: 22%;
}
.f_name {
    width: 50%;
    display: inline-block;
    text-align: left;
    overflow: hidden;
}
.addblacklist {
    margin-left: 4.3%;
    width: 26%;
}
.act_code {
    border-radius: 17px;
    height: 7%;
    width: 92%;
    position: absolute;
    top: 49%;
    left: 4%;
}
.right div.bookslist>img {
    width: 106%;
    margin-top: 2%;
}
.right div.bookslist>img.activation {
    width: 46%;
}
.activation {
    position: absolute;
    top: 65%;
    left: 28%;
    visibility: hidden;
}
.grade {
    position: relative;
    top: 0%;
}
.friendsbox {
    background-repeat: no-repeat;
    background-size: 93%;
    height: 100%;
    background-position-x: 42%;
    background-position-y: 37%;
    background-position: 42% 37%;
}
.sdetails {
    margin-left: 7%;
    height: 92%;
    /* padding: 1.5% 0; */
    border: 1px solid #f29424;
    width: 23.5%;
    font-size: 25px;
    position: relative;
    vertical-align: middle;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}
#searchf {
    margin-left: -1%;
    height: 99%;
}
.search{
	height:12%;
	padding: 1% 0 0 0;
}
.search img {
    vertical-align: middle;
}

#leave {
    position: relative;
    bottom: 13%;
    margin-top: 55%;
    margin-left: 9%;
    width: 80%;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#leave {
    	margin-top: 40%;
	}
}
.openResult,.result{
	cursor:pointer;
}
.answerbox{
	text-align: right;
}
.iconbox {
    display: inline-block;
}
.iconbox img {
    width: 100%;
}
img.gradens {
    margin-top: 7px;
}


.left > div {

}
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .content {
	    font-size: 15px;
	}
	.sdetails {
    	font-size: 18px;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .content {
	    font-size: 14px;
	}
	.sdetails {
    	font-size: 14px;
	}
	.f_name {
    	font-size: 15px;
	}
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
	.content {
	    font-size: 12px;
	}
	.sdetails {
    	font-size: 12px;
	}
	.f_name {
    	font-size: 12px;
	}
}
@media screen and (min-width: 401px) and (max-width: 800px) {
	.content {
	    font-size: 8px;
	}
	.sdetails {
    	font-size: 10px;
	}
	.f_name {
    	font-size: 8px;
	}
	#searchf {
	    height: 107%;
	}
}
@media screen and (min-width: 201px) and (max-width: 400px) {
	.content {
	    font-size: 6px;
	}
	.sdetails {
    	font-size: 8px;
	}
	.f_name {
    	font-size: 8px;
	}
}
@media screen and (min-width: 1px) and (max-width: 200px) {
	.content {
	    font-size: 4px;
	}
	.sdetails {
    	font-size: 4px;
	}
	.f_name {
    	font-size: 4px;
	}
}
img.openResult {
    width: 15%;
}
.star_num{
	width:11%;
}