@charset "utf-8";

.MY-profile{ max-width:240px; width:24%; background: #fff; box-shadow: 0 15px 20px -20px rgba(0,0,0,0.3); box-sizing: border-box; padding:45px 20px 10px 20px; position: relative; margin-bottom: 20px;}
.MY-profile .share{ position:absolute; top:12px; right:12px;}
.MY-img img{width:100%;}
.MY-name{  font-size: 20px;color:#378bd6;margin-right: 5px;font-weight: bold;}
.MY-profile .MY-name{ margin: 10px 0; line-height:1.1;}
.MY-lv{ clear:both; margin-bottom:10px; overflow: hidden; color:#000;}
.MY-lv img{ width:45px;}
.MY-lv .right{ width:70%; padding-top: 3px;}
.mlv:before{ content: '會員等級'; font-size: 12px; color:#999; display: block;}
.alv:before{ content: '作家等級'; font-size: 12px; color:#999; display: block;}
.data-date{ clear:both; text-align: center; font-size: 12px; color:#999;white-space: nowrap;}

.MY-msg{ width:75%; color:#000;padding:0 20px 0 0; box-sizing:border-box;}
.MY-msg>div{ padding: 20px 0;}
.MY-msg>div+div{ border-top:1px solid #DFE4EB;}
.MY-msg h4{ color:#999; line-height: 1.8;}

.B-more{ clear:both; display:block;width: 200px;font-size: 13px;text-align: center; margin: 10px auto 0 auto;line-height: 40px; background: #e8edf0;}
.B-more:hover { background:#fff; color:#378bd6;}

/*送禮物給他按鈕*/
.B-gift{ display: inline-block; border-radius: 20px; height: 22px; line-height: 22px;  width:110px; font-size: 14px; text-align: center;background: #f47a20; color:#fff; margin-left: 5px;}
.MY-gifts{ background:#fff; margin-bottom:20px; -webkit-box-shadow: 0 0 0 1px #e6e8ed inset; -moz-box-shadow: 0 0 0 1px #e6e8ed inset; box-shadow: 0 0 0 1px #e6e8ed inset; border-radius: 3px;}
.MY-gifts>div{ display:inline-block; width:49%; box-sizing:border-box; vertical-align:middle;}
.MY-gifts .tr-marquee-box{webkit-box-shadow:none; -moz-box-shadow:none;  box-shadow:none; background:none;}
.items-gifts{ text-align:center;}
.items-gifts .B-more{ display:inline-block; width:49px; height:49px; line-height:49px; margin:0 5px; background: #e8edf0; text-align: center; font-size: 13px;}
.MY-books{ margin-bottom:30px;}
.MY-books .box{ overflow:hidden; position:relative;}
.MY-books .left{ width:25%; box-sizing:border-box;}
.MY-books .left img{ width:100%;}
.MY-books .right{ width:73%; box-sizing:border-box;}
.MY-books dt{ float:left; width:100px; margin-bottom:10px; color:#000;}
.MY-books dd{ margin-bottom:10px; padding-left: 100px; display:block; min-height:16px;}
.MY-books .box .bname{ color:#378bd6; font-size:18px; margin-bottom:10px; width:calc(100% - 80px);}
.MY-books .other_works .box .bname{width:100%;}

.MY-books .func{ margin-bottom:15px; text-align: center;}
.MY-books .func a{ display:inline-block; box-sizing: border-box;width:50%;}
.MY-books .func a+a{ /*border-left:3px solid #f2f5f9;*/ width:49%; margin-left:-1px;}
/*作家推薦icon*/
.I-recom{ position:absolute; height:65px; width:65px; top:0; right:0; z-index:2; background:#f2f5f9 url(../images/icon-recom_default.png);}

.MY-recom{ margin-bottom:30px;}
.MY-recom .box{ overflow:hidden; margin-bottom:15px;}
.MY-recom .left{ width:25%; box-sizing:border-box;}
.MY-recom .left img{ width:100%;}
.MY-recom .right{ width:73%; box-sizing:border-box;}
.MY-recom dt{ float:left; width:100px; margin-bottom:10px; color:#000;}
.MY-recom dd{ margin-bottom:10px; padding-left: 100px;}
.MY-recom .box .bname{ color:#378bd6; font-size:18px; margin-bottom:10px;}

.MY-essay{ margin-bottom:30px; overflow:hidden;}
.MY-essay .bname{margin-bottom:5px;}
.MY-essay .desc{margin-bottom:10px;}
.MY-essay .data{ width:100%; font-size: 12px; color:#999;}
.MY-essay .data span{ display:inline-block; width:33%; white-space:nowrap;}

/*藏書*/
.B-dgray{display: block;width: 200px;font-size: 13px;text-align: center; margin:0 auto 15px auto;line-height: 40px; background: #4b5360; color:#fff;}
.B-dgray:hover{ background-color:#fff; color:#2983D3;}
.collect { margin-bottom:30px;}
.collect .box { float:left; width:29.333333%; margin:0 1%; padding:10px 1%;}
.collect .box:last-child { padding:0 1%;}
.collect ul.tabs { text-align:center; margin-bottom:15px; border-bottom:none; height: auto; overflow:hidden; padding-bottom:2px;}
.collect ul.tabs li { display:inline-block; height: 39px; line-height: 39px;}
.collect ul.tabs li a { display:inline-block; padding: 0 20px; font-size:16px;}
.collect ul.tabs li a:hover { color:#378bd6;}
.collect ul.tabs li.active { }
.collect ul.tabs li.active a { color:#378bd6;border:1px solid #e6e8ed; border-bottom:1px solid #f2f5f9; background-color:#f2f5f9; position:relative; z-index:2;}
.collect ul.tabs li.active:before{ content:''; display:block; border-bottom:1px solid #e6e8ed; width:1380px; bottom:-1px; left:-690px; position:absolute;}

.buyed{ margin-bottom:30px;}

/*POPO 魚的書櫃*/
.bookshelf{ margin-bottom:30px;}
.bookshelf .box{ overflow:hidden;}
.shelf-box{ overflow:hidden; border-bottom: 1px solid #e6e8ed; padding-bottom:10px;}
.shelf-box .right{ width:55%;}

/*藏書列表*/
.collect-list .box-list{ clear:both; text-align:center;}
.collect-list .box { display:inline-block; text-align:left; width:24%; margin:0 2px 36px 2px; padding:10px; box-sizing:border-box; position:relative;}
.collect-list ul.tabs { text-align:center; margin-bottom:15px; border-bottom:none; height: auto; overflow:hidden; padding-bottom:2px; position:relative;}
.collect-list ul.tabs li { display:inline-block; height: 45px; line-height:45px; max-width:90%;}
.collect-list ul.tabs li a { display:inline-block; padding: 0 20px; font-size:16px; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; box-sizing:border-box;}
.collect-list ul.tabs li a:hover { color:#378bd6;}
.collect-list ul.tabs li.active { }
.collect-list ul.tabs li.active a { color:#378bd6;border:1px solid #e6e8ed; border-bottom:1px solid #f2f5f9; background-color:#f2f5f9; position:relative; z-index:2; }
.collect-list ul.tabs li.active:before{ content:''; display:block; border-bottom:1px solid #e6e8ed; width:1380px; bottom:-1px; left:-690px; position:absolute;}
.collect-list ul.tabs:before{ content:''; display:block; border-bottom:1px solid #e6e8ed; width:1380px; bottom:0px; left:-690px; position:absolute;}

.collect-list .func{ text-align:right;color:#aaa;}
.collect-list .sort{margin:0 15px 20px 5px; border:1px solid #e6e8ed; padding:5px;}

.collect-list .data{ font-size:12px;}
.collect-list .data dt{ float:left;}
.collect-list .data dd{ padding-left:35px;}
.collect-list .date{ position:absolute; font-size:12px; white-space:nowrap; text-align:center; bottom:-20px; left:0; width:100%;}

.ifwithout{ line-height: 2; text-align: center; color:#b3c3d8; font-size: 2em; font-weight: bold;}
.ifwithout:before{ content:'-';}
.ifwithout:after{ content:'-';}

.collect-list [class^=bookmark]+a{ display:block; overflow:hidden; position:relative;}
.collect-list [class^=bookmark]+a img{ position:absolute;}
.collect-list [class^=bookmark]+a:after{padding-top:137.65937%; content:''; display:block;}
.collect-list .box a:nth-child(1){ display:block; overflow:hidden; position:relative;}
.collect-list .box a:nth-child(1) img{ position:absolute;}
.collect-list .box a:nth-child(1):after{padding-top:137.65937%; content:''; display:block;}

/*My PRECIOUS*/
.treasure{ overflow:hidden; margin:0 auto;}
.treasure .box{ width:126px; padding:15px; display:inline-block; margin:0 10px 10px 0;}
.gift-img{ background:url(../images/treasure/show-bg.png) no-repeat; width:126px; height:126px;text-align:center; line-height:126px;}
.gift-name{ border-radius:10px; border:2px solid #ccc; background-color:#fff; width:100px; margin:-12px auto 15px auto; color:#378bd6; text-align:center; line-height:20px; box-sizing:border-box; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/*讀者回應*/
.comment .msg{ display:-moz-box;}
@-moz-document url-prefix() {
    .comment .msg{ height:36px;}
}
.commentbybook{ overflow:hidden; padding-bottom:50px;}
.commentbybook>.left{ max-width:202px;}
.commentbybook+.commentbybook{ border-top:1px solid #e6e8ed; padding-top:50px;}
.commentbybook>.right{ width:calc( 100% - 225px);}
.commentbybook .bname{ color:#378bd6; white-space:inherit;}
.commentbybook .comment .list{ border:none; padding:0 0 15px 0;}
.commentbybook .comment .msg-box{ height:auto;}
.commentbybook .comment .msg { display:block; height:auto;}



 
@media screen and (max-width: 1000px) {
	.MY-profile{ width:240px; }
	.MY-msg{ width:70%;}
}
@media screen and (max-width: 870px) {
	.MY-msg{ width:60%;}
}
@media screen and (max-width: 700px) {
	.I-recom{ width:50px; height: 50px; background-size: 50px 50px;}
	.MY-books .func a{ margin-left:-1px;}
	.MY-books dt{ float: inherit;}
	.MY-books dd{ padding-left: 0;}
	.MY-books .box .bname{ width:calc(100% - 65px);}
	.MY-recom dt{ float: inherit;}
	.MY-recom dd{ padding-left: 0;}
	.MY-msg{ width:50%;}
}
@media screen and (max-width: 550px) {
	.MY-profile{margin:0 auto;float: inherit; width:100%; max-width: 100%;}
	.MY-msg{ width:100%; padding:0 20px;}
	.collect-list .box { width:45%; margin:0 1% 36px 1%; padding:10px;}
	
	.MY-gifts .items-gifts{ width:100%;}
	.MY-gifts .tr-marquee-box{ display:none;}
	
	 .mypoB-n{display:none;}
	 .mypoB-t{display:none;}
	 .mypoB-tags{display:none;}
	
	.MY-essay .data span{ width:27%;}
	.MY-essay .data span.date{ width:45%;}
	
	.commentbybook{ padding-bottom:30px;}
	.commentbybook>.right{ width:100%;}
	.commentbybook .comment{ display:block; margin-top:10px;}
	.commentbybook+.commentbybook{ padding-top:30px;}

	
	.commentbybook .box.left{float: inherit; margin:0 auto 20px auto; width:180px;}
	
}