html {
  scroll-behavior: smooth;
}
body {
	font-family: "Segoe UI", Arial, sans-serif !important;
	color: #0B1013 !important;
	font-size: 16px !important;
  background-color: #FCFAF2 !important;
	word-wrap: break-word;
}
section{
  margin-top: 0px;
	padding-bottom: 120px;
  position: relative;
	z-index: 3;
}
img {
	width: 100%;
}
a {
	color: inherit !important;
	text-decoration: none !important;
}
header {
	min-height: 600px;
	position: relative;
	z-index: 1;
}
header .logo {
	width: 94px;
}
header .lang {
  background-color: #ffffffcc;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
	height: 42px;
  padding: 10px;
  font-size: 16px;
	position: relative;
  z-index: 2;
}
header .lang img {
	width: 22px;
  height: 22px;
  margin-right: 8px;
}
header .lang .border-end {
	border-right-color: #B8B4B4 !important;
}
header .lang span {
	cursor: pointer;
}
.table{
	border-color: #D5D5D5;
	color: #0B1013!important;
}
.table tr:last-child th, .table tr:last-child td {
	border-bottom-width: 0;
}
footer {
	background-color: #222;
	padding: 36px 0 50px;
	color: #fff;
	font-size: 12px;
    line-height: 18px;
	position: relative;
	z-index: 3;
}
footer .border-end {
	border-right-color: #707070 !important;
}
footer .footer_logo_1 {
	width: 40%;
	min-width: 160px;
}

.back-to-top {
	position: fixed;
  z-index: 12;
  bottom: 0;
  right: 0;
  display: inline-block;
  padding: 0.8em;
  margin: 1em 0;
  background: #E8E8E8;
  border: 2px solid #000;
  border-right-width: 0;
  border-radius: 8px 0 0 8px;
}
.back-to-top:hover {
  cursor: pointer;
	background: #d5d4d4;
}

.slide_down_icon {
	position: absolute;
	bottom: 30px;
	left: 0;
}
.slide-down {
  animation: flash 2s infinite alternate;
	font-size: 38px;
	color: #fff;
}
[data-filter] {
  display: inline-block;
  width: 100%;
  color: #707070;
  padding: 7px 5px 7px 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  border-right: 3px solid transparent;
}
[data-filter].author {


}
.active[data-filter] {
	border-color: #56ecd2;
  color: #000b00;
}
.list_body span:hover {
  border-color: #56ecd2;
}
[data-filter] + [data-filter] {
	!margin-left: 6px;
}




[data-tags]:not(.show) {
	display: none !important;
}
[data-tags] {
	width: 100%;
  max-width: 243px;
	display: inline-block !important;
}

.hero_banner {
	background: url(../img/ebookshelf_banner_mobile.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin-bottom: 120px;
	height: 100vh;
}

.header_content_body {
	height: 100vh;
}
.index_list .header_content {
	background-color: #cbcbcbb3;
	color: #0B1013;
	font-size: 14px;
	line-height: 22px;
	margin-top: 20vh;
	margin-bottom: 120px;
	border-radius: 12px;
	z-index: 2;
}
.index_list header:after {
	!background: url(../img/header_edge.png);
	background-repeat: repeat-x;
	background-size: auto;
	background-position: top;
	width: 100%;
	display: block;
	content: "";
	position: absolute;
	bottom: -76px;
	left: 0px;
	z-index: 2;
	height: 153px;
}
.index_list h2 {
  color: #000b00;
	margin-bottom: 10px;
}
.index_list section {
	min-height: 700px;
}
.index_list .left_menu. {
  width: 190px;
	background: cadetblue;
	padding: 0px
}
.index_list .left_menu_body {
	display: none;
  text-align: right;
}
.index_list .left_menu_body.scroll {
	display: block;
	position: fixed;
	z-index: 99;
  top: 25px;
	left: 15px;
	width: 16.66666667%;
  max-width: 196px;
  margin: 0 0 5px;
}
.index_list #list {
  max-width: 992px;
  margin: auto;
}
.index_list .list_img {
	width: 100%;
	!height: 160px;
	object-fit: cover;
}
.index_list h5.author {
  margin: 0;
  padding: 0;
}
.index_list .description {
  margin-top: 25px;
}
.index_list .btn {
	!background-color: #56ecd2;
	!border-color: #56ecd2;
  font-size: 18px;
	border-radius: 32px;
	padding: 10px 24px;
}
.index_list .btn:hover {
	!border-color: #7BA23F;
	!background-color: #7BA23F;
}
.index_list .btn a {
	color: #707070 !important;
	text-decoration: none;
	font-weight: bold;
}
.index_list .btn:hover a {
	color: #fff !important;
}

.detail .painting, .index_list .list_img.novel {
	border-bottom-color: #f87f0f !important;
}
.detail .sculpture, .index_list .list_img.sculpture {
	border-bottom-color: #0065b2 !important;
}
.detail .wallArt, .index_list .list_img.wallArt {
	border-bottom-color: #f48f97 !important;
}
.detail .environmentalArt, .index_list .list_img.environmentalArt {
	border-bottom-color: #1a998c !important;
}
.detail .installationArt, .index_list .list_img.installationArt {
	border-bottom-color: #EC421D !important;
}
.detail .craft, .index_list .list_img.craft {
	border-bottom-color: #7999C4 !important;
}
#img_modal .modal-dialog {
  max-width: max-content !important;
}
#img_modal .modal-body {
  display: flex;
}
#img_modal .modal-body img {
  object-fit: contain;
}

/*
@media (min-width: 576px) {

}
*/

@media (min-width: 768px) {
	.index_list .list_body {
		min-width: 510px
	}
	.index_list .left_menu_body {
		display: block;
	}
	.index_list .left_menu_body.scroll {
	  left: inherit;
		width: calc(14.66666667% - 24px);
    margin: 0 0 5px;
	}
	.index_list .header_content {
		margin-top: 12vh;
	}
}


@media (min-width: 992px) {
	[data-filter] {
		font-size: 16px;
    width: 60%;
    margin: 0 20% 3px;
	}
	body{
		font-size: 16px !important;
		line-height: 20px !important;
	}
	section{
		margin-top: 60px;
	}
	/*header {
		background: inherit;
		min-height: 300px;
		background-size: 100%;
	}
	header:after {
		background: url(../img/header_edge.png);
		background-repeat: repeat-x;
		background-size: auto;
		background-position: top;
		width: 100%;
		display: block;
		content: "";
		position: absolute;
		bottom: -76px;
		left: 0px;
		z-index: 2;
		height: 153px;
	}
	header .logo {
		width: 183px;
		height: 144px;
	}*/
	footer {
		padding: 36px 0 50px;
		font-size: 14px;
		line-height: 19px;
		z-index: 3;
		position: relative;
	}
	footer .footer_logo_1 {
		width: 191px;
		height: 36px;
	}
	footer .footer_logo_2 {
		width: 118px;
		height: 74px;
	}
	.hero_banner {
		background: url(../img/ebookshelf_banner.png);
		background-size: cover;
	}
	.index_list .header_content {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 60px;
	}
	.index_list .header_content .img-fluid {
		width: 380px;
	}
	.book-cover {
		position: relative;
		transform: rotate(0);
		transition: all 0.5s ease;
	}
	.book-cover:hover {
    transform: rotate(-1deg) translateY(-10px);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@keyframes flash {
  to {
    color: transparent;
  }
}