w#bookmark,
.bookmark-title,
.bookmark-card,
.bookmark-list{
	/*border: 1px solid #333;*/
}
#bookmark{
	position: fixed;
	box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5);
	transition: 0.3s;
	width: 20%;
	height: 55%;
	/*正常用*/
	bottom: -55%;
	/*測試用*/
	/*bottom: -51.3%;*/
}
.bookmark-title{
	height: 7%;
	background-color: #9D5C2B;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
.bookmark-title:hover{
	background-color: #c87637;
}
.bookmark-title div{
	color: #fff;
	width: 85%;
	padding: 0 2%;
}
.bookmark-title img{
	width: 5%;
	transform: rotate(45deg);
}
.bookmark-title div,
.bookmark-title img{
	display: inline-block;
	vertical-align: middle;
}
.bookmark-blur{
	height: 93%;
	width: 100%;
 	/*filter:blur(5px);*/
 	background-color: #fff;
 	opacity: 0.9;
 	backdrop-filter: saturate(180%) blur(20px);
}
.bookmark-cont{
	height: 93%;
	width: 100%;
	position: absolute;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.bookmark-date{
	background-color: #ccc;
}
.bookmark-date{
	padding: 2% 5%;
}
.bookmark-box-card{
	padding: 5% 5%;
}
.bookmark-box-card img:nth-child(1){
	width: 40%;
	border-radius: 10px;
}
.bookmark-box-card img:nth-child(3){
	width: 8%;
}
.bookmark-box-card img,
.bookmark-box-cont{
	display: inline-block;
	vertical-align: middle;
}
.bookmark-box-cont{
	width: 46%;
	margin-left: 2%;
}
.bookmark-box-cont div:hover{
	/*隱藏字顯示*/
	/*overflow: visible;
	text-overflow: clip;
	white-space: normal;*/
}

.bookmark .select-icon{
	width: 6%;
}
.bookmark-list{
	/*display: none;*/
	position: fixed;
	z-index: 30;
	background-color: #fff;
	box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2);
	opacity: 1;
	border-radius: 20px;
	overflow: hidden;
	transition: 0.3s;
}
.bookmark-list-cont{
	width: 100%;
	height: 90%;
	overflow-y: auto;
	overflow-x: hidden;
	transition: 0.3s;
}
.bookmark-list-cont:nth-child(2){
	height: 0;
	overflow: hidden;
}
.bookmark-list-title{
	text-align: center;
	border-bottom: 1px solid #333;
	padding-bottom: 2%;
}
.bookmark-list-name,
.bookmark-list-date{
	border: 2px solid #9D5C2B;
	border-radius: 5px;
	padding: 2%;
}
.bookmark-list-title,
.bookmark-list-name,
.bookmark-list-button,
.select-button{
	margin: 5% 10%;
	/*margin-bottom: 10%;*/
}
.bookmark-list-date{
	margin: 0 10%;
	margin-bottom: 5%;
	height: 20px;
}
.bookmark-list-text,
.bookmark-list-error{
	text-align: center;
	margin-bottom: 5%;
}
.bookmark-list-error{
	color: red;
	display: none;
}
.bookmark-list-button div{
	width: 40%;
	padding: 2%;
	/*margin: 0 10%;*/
	display: inline-block;
	text-align: center;
}
.bookmark-list-button div:last-child{
	margin-left: 9%;
	background-color: #9D5C2B;
	border-radius: 5px;
	color: #fff;
}
.bookmark-add{
	position: absolute;
	bottom: 2%;
	left: 45%;
	width: 10%;
	padding-top: 10%;
	background-color: #9D5C2B;
	border-radius: 999em;
}
.bookmark-add-img{
	width: 40%;
	top: 32%;
	left: 30%;
	color: #fff;
	text-align: center;
	transform: rotate(0deg);
	position: absolute;
	transition: 0.5s;
}
.bookmark-add-img-click{
	transform: rotate(225deg);
}
@media screen and (min-width: 1301px) {
	#bookmark{
		width: 20%;
		right: 9%;
	}
	.bookmark-list{
		width: 30%;
		height: 0;
		top: 10%;
		right: 35%;
	}
	.bookmark-list-click{
		height: 80%;
	}
	.bookmark .select-icon{
		padding: 0 2%;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1300.9px) {
	#bookmark{
		width: 22%;
		right: 10%;
	}
	.bookmark-list{
		width: 40%;
		height: 0;
		top: 10%;
		right: 30%;
	}
	.bookmark-list-click{
		height: 80%;
	}
	.bookmark .select-icon{
		padding: 0 2%;
	}
}
@media screen and (min-width: 721px) and (max-width: 1023.9px) {
	#bookmark{
		width: 30%;
		right: 13%;
	}
	.bookmark-list{
		width: 50%;
		height: 0;
		top: 20%;
		right: 30%;
	}
	.bookmark-list-click{
		height: 60%;
	}
	.bookmark .select-icon{
		padding: 0 3.8%;
	}
}
@media screen and (min-width: 721px) {
	#bookmark{
		/*right: 9%;*/
	}
}
@media screen and (max-width: 720.9px) {
	#bookmark{
		width: 68%;
		right: 16%;
	}
	.bookmark-list{
		width: 60%;
		height: 0;
		top: 20%;
		right: 20%;
	}
	.bookmark-list-click{
		height: 60%;
	}
}
@media screen and (min-width: 500px) and (max-width: 720.9px) {
	#bookmark{
		width: 68%;
		right: 16%;
	}
	.bookmark .select-icon{
		padding: 0 3.7%;
	}
}
@media screen and (max-width: 499.9px) {
	#bookmark{
		width: 58%;
		right: 21%;
	}
	.bookmark .select-icon{
		padding: 0 3.2%;
	}
}