@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');

a.download-pdf {color: #000000;font-weight:bold; text-decoration: none}

a.txt:link {color: #2e75b8; text-decoration: none}
a.txt:visited {color: #2e75b8; text-decoration: none}
a.txt:hover {color: #333333; text-decoration: none}

a.txt2:link {color: #1e4972; text-decoration: none}
a.txt2:visited {color: #1e4972; text-decoration: none}
a.txt2:hover {color: #333333; text-decoration: none}

a.mem:link {text-decoration: underline; color: #2e8b9c}
a.mem:visited {text-decoration: underline; color: #2e8b9c}
a.mem:hover {text-decoration: none; color: #ff4040; font-style: normal; text-decoration: underline overline}

a.intro:link {color: #000000; text-decoration: none; transition: 0.3s; }
a.intro:visited {color: #000000; text-decoration: none}
a.intro:hover {color: #333333; text-decoration: none}

a.title:link {color: #136CB2; text-decoration: none}
a.title:visited {color: #136CB2; text-decoration: none}
a.title:hover {color: #136CB2; text-decoration: underline}

a.mclc {color: #000; text-decoration: none;transition: 0.5s;}
a.mclc:hover {color: #666;}

.txt {color: #2e75b8;}
.txt:hover {color: #333333;}

.pa,.mem {
	color: #000000;
    	cursor: pointer;
}
.pa:hover,.mem:hover {
	color: #333333;
}
.uline {
	color: #333333;
	text-decoration: none;
    	cursor: pointer;
}
.uline:hover {
	text-decoration: underline;
}

::selection {
    background-color: #b3d4fc;
    color: #000;
    text-shadow: none;
}
body, html {
	position: relative;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	padding:0;
	margin:0;
	background-color:#61666c;
	color:#333333;
	overflow-x:hidden;
	/* mobile
	overflow-y:auto;
	*/
}
body.no-scroll {
  	/*position: fixed;
	overflow:hidden; */
	overflow-y:auto;
}
table {
	border-spacing: 0;
}
table td{
    padding: 0;
}
img {
	border:none;
}
a{
   outline: 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}
ul li {
	overflow: hidden;
}
ol li {
	margin: 8px 0;
}
img.cover {
	/*border:1px solid #b8dacf;*/
    	box-shadow: 2px 2px 6px rgb(0 0 0 / 50%);
	cursor:pointer
}
img.cover:hover {
	/*border:1px solid #000000;*/
    	box-shadow: 2px 2px 6px rgb(0 0 0 / 75%);
}
.shadow {
	box-shadow: 1px 2px 6px rgb(0 0 0 / 50%);
}
.normal {
	font-weight:normal;
	font-style:normal;
}
.bold {
    	font-weight: bold;
}
#btn {
	background-color:#a5d6ff;
	cursor:pointer;
	padding: 2px 8px;
	border-radius:4px;
	font-size:16px;
}
button {
	padding: 10px 30px;
	background-color: #eaa66a;
	border-radius: 6px;
	border: none;
	letter-spacing:2px;
}
button:hover {
	background-color: #eabe6a;
}
button:active {
  	background-color: #eabe6a;
	padding: 8px 28px;
}
input, select, textarea {
	outline: 0
}
.click {
  	position: relative;
	color: #0073ec;
	text-decoration:none;
}

.click:hover, .click:active { 
	text-decoration:underline;
}

.note {
	font-size: 16px;
	font-weight: normal !important;
}
/*
.click:hover, .click:active { 
	border: none; 
	background: transparent; 
	box-shadow: none; 
	transform: scale(1); 
}
.click:before { 
	content: ""; 
	position: absolute; 
	z-index: -1; 
	left: 0; 
	right: 100%; 
	bottom: 0; 
	background: currentColor; 
	height: 1px; 
	transition: right 0.5s ease-out; 
}

.click:hover:before { 
	right: 0%; 
}
*/
.blur{
	opacity: .2; 
}
.hide {
	visibility:hidden;
}
.none {
	display:none !important;
}
.fixed {
	position:fixed;
}
.v {
	color: #d53f11;
}
.m {
	color: #edb60d;
}
select{ 
	color:#757575; 
}
.clear {
	clear: both !important;
	float: none !important;
}
.nowrap {
    	white-space: nowrap;

}

/* header */
#menu-mobile {
	display: none;
}  
#menu-mobile ul{
	height:auto;
}
#menu-mobile .menu li img:nth-of-type(1) {
	margin-right:24px;
}
#menu-mobile .menu li.label img:nth-of-type(2) {
	color:#333;
    	position: absolute;
    	right: 32px;
	width: 40px;
	transition: 0.5s;
}
#menu-mobile .menu li.label img:nth-of-type(2).down {
	transform: rotate(90deg);
}

#menu-mobile .menu {
	display: none;
	position: absolute;
	width: 100%;
	left: 0;
	top: 84px;
	-webkit-overflow-scrolling: touch;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	z-index: 5;
	background: #d5dadd !important;  
	text-align: left;
	box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.5);
}

#menu-mobile .menu li {
	display: block;
	position: relative;
	z-index: 9;
	font-size: 20px;
	margin:0;
	border-bottom: 1px solid #666;
}

#menu-mobile .menu a {
	display: flex;
	align-items: center;
	line-height: 100px;
	margin: 0;
	border: 0;
	color: #333333;
	padding-left: 32px;
	text-decoration: none;
	font-size:24px;
}

#menu-mobile .sub-menu {
	display: none;
	border-bottom: 1px solid #8a7069;
	padding: 16px 0 16px 0;
	background: #ffffff;
	max-height: 400px;
	overflow-y: auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
}  
#menu-mobile .sub-menu::-webkit-scrollbar {
	display:none;
} 
#menu-mobile .sub-menu > li {
	color: #333333;
	background: #ffffff;
	padding-left: 12vw;
	border:0;
}

#menu-mobile .sub-menu > li a {
	font-size: 32px;
	line-height: 64px;
}

#menu-mobile .sub-menu > li a {
    	padding-left: 0;
}

#menu-mobile .sub-menu li a {
	background: #ffffff;
	border-bottom: none;
}

#menu-mobile .sub-menu > li {
    	cursor: pointer;
}

  
#menu-open {
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
}
.nav-btn {
	display: block;
	position: absolute;
	top: 28px;
	left: 24px;
	z-index: 2;
	height: 32px;
	width: 48px;
	cursor: pointer;
}
.nav-btn span {
	display: block;
	height: 2px !important;
	background: #fff;
	margin-bottom: 12px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
	border-radius: 2px;
	padding: 0  !important;
}
#menu-open:checked ~ .nav-btn span:last-child {
	opacity: 0;
}
#menu-open:checked ~ .nav-btn span:first-child {
	margin-top: 11px;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#menu-open:checked ~ .nav-btn span {
	margin-top: -14px;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	 transform: rotate(45deg);
}
  
  
#phbox {
	position: absolute; 
	display:none;
	z-index:201;
}
#mtitle {
	position: absolute; 
	z-index:201;
	cursor:pointer;
	color:#d1f279;
	/*text-align:center;*/
	top:-100px;
}
#mtitle img{
	position: absolute;
	width:16px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}
#mtitle span{
	display: block; 
    	height: 14px;
    	margin-top: -3px;
}
#mtitle div{
	background-color:#333;
	height:32px;
	font-size:20px;
	line-height:32px;
	border-radius:6px;
	padding:0 18px;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
    	margin-top: -4px;
    	white-space: nowrap;
}
#mtitle div.list{
	height:auto;
	font-size:16px;
	line-height:16px;
	padding:8px;
	text-align:left;
	color:#ff9999;
}
.show {
	display:block;
}
#emoji {
	position: absolute; 
	z-index:201;
	top:-232px;
	border-radius:4px;
	visibility:hidden;
	z-index: 1001;
}
#emoji div{
    	width: 216px;
    	padding: 8px;
    	background-color: #fff;
	border-radius: 4px;
	/*box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);*/
	box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;
}
#emoji ul {
    	font-size: 28px;
    	width: 100%;
	overflow: hidden;
}
#emoji ul li{
    	float: left;
    	margin: 4px;
    	cursor: pointer;
}

#emoji span {
	position:absolute;
    	right: 30px;
    	bottom: -18px;
}
#emoji span svg {
	width:20px;
	transform: rotate(180deg);
    	filter: drop-shadow(rgb(207, 217, 222) 1px -1px 1px);
}
#emoji span svg path{
	fill:#fff;
}


#overlay {
	display: none;
	width: 100vw !important;
	height: 101vh !important;
	inset: 0px auto auto 0px !important;
	clear: none !important;
	float: none !important;
	margin: 0px !important;
	max-height: none !important;
	max-width: none !important;
	opacity: 1 !important;
	overflow: visible !important;
	padding: 0px !important;
	position: fixed !important;
	vertical-align: baseline !important;
	visibility: visible !important;
	z-index: 1001;
	background:rgba(97, 102, 108, 0.9);
}
#box {
	/*display: flex;*/
	display: none;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
#box-container {
	position:relative;
	display:none;
	background-color:#aaacaa;
	border-radius:16px 16px 4px 4px;
	box-shadow: 0px 8px 12px rgba(60, 64, 67, 0.15), 0px 4px 4px rgba(60, 64, 67, 0.3);
	min-width:640px;
	height:auto;
	padding-bottom:8px;
	color:#000;
}

#box-container .label{
	position:relative;
	background:#494e53;
	background-image: url('images/abg.png');
	color:#d1f279;
	padding:0px 8px 8px 0;
	border-radius:8px 8px 0 0;
	font-size:20px;
	font-weight:bold;
	height:16px;
}
#box-container .label img{
	float:right;
	width:24px;
	cursor:pointer;
}
#box-container #vi {
	background-color:#f8d42e;
	padding:6px;
	margin:0 16px 0 8px;
	border-bottom:1px solid #aaacaa;
    	height: 20px;
	
}
#box-container #vi .online {
	color:#fff;
}
#box-container #vi .offline {
	color:#ff0000;
	
}
#box-container #meminfo {
	position: relative;
	width: calc(100% - 40px);
	line-height:24px;
	background-color:#efefed;
	margin:0 16px 0 8px;
	padding:8px;
	border-bottom-right-radius:16px;
	border-top:1px solid #fff;
	min-height: 450px;
}
#box-container #meminfo div{
	max-width:600px;
}
#box-container #meminfo p{
	float:left;
	width:50%;
    	margin:0;
}
#box-container #meminfo p img{
	position:absolute;
	top:10px;
	right:10px;
	width:100px;
	border-radius:8px;
}
#box-container #icons {
	text-align:center;
    	height: 73px;
}
#box-container #icons img{
	width:32px;
}

#box-container #icons button{
	display:inline-block;
	position:relative;
	text-align:center;
	vertical-align:middle;
	border:1px solid #e9e9e9;
	border-radius:8px;
	width:40px;
	height:40px;
	cursor:pointer;
	padding:2px;
	margin:16px 32px;
	background-color:#5a5d5d;
	background-image: url('../images/bbg.png');
}
#box-container #icons button.active{
	background-color:#7f8385;
	background-image: url('../images/bbg2.png');
}

#box-container #icons button:hover {
	background-color:#7f8385;
	background-image: url('../images/bbg2.png');
	border:1px solid #fff;
}
#box-container #icons button:active {
	background-color:#7f8385;
	background-image: url('../images/bbg2.png');
	padding: 3px;
}
#box-container #meminfo .loading, #box-container #meminfo .photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#box-container #meminfo .photo {
	display:none;
}
#box-container #meminfo h3 {
	font-size:20px;
	font-weight:400;
	text-align:center;
	margin-bottom:8px;
}
#box-container #meminfo span.error {
    	display: inline-block;
	color:red;
	font-size:18px;
	font-weight:normal !important;
    	margin-bottom: 8px;
}
#box-container #meminfo textarea {
	font-size:18px;
	width: calc(100% - 24px);
	border:none;
	border-radius:4px;
	resize:none;
    	max-height: 310px !important;
    	height: 310px !important;
    	background-color: #fff;
}
/*
#box-container #meminfo .emoji {
	position: relative;
	float:left;
	width:18%;
	font-size:24px;
	margin-top:32px;
}
#box-container #meminfo .emoji li {
    	float: left;
    	margin: 0 12px 12px 0;
    	cursor: pointer;
}
*/
#box-container #meminfo .text {
	position: relative;
    	width: 90%;
    	padding-bottom: 16px;
    	margin: 0 auto;
}
#box-container #meminfo span {
	display:inline-block;
}
#box-container #meminfo span label{
	display:inline-block;
	width:64px;
}
#box-container #meminfo .text>div {
    	position: relative;
    	border: 1px solid #aaacaa;
    	border-radius: 4px;
    	height: 324px;
    	background-color: #fff;
}
#box-container #meminfo .send button {
	position: relative;
	float: right;
	right: 4px;
	bottom: 20px;
	border: none;
	background: transparent;
	padding: 1px;
	cursor: pointer;
}
#box-container #meminfo .send button:active {
	padding:2px;
}
#box-container #meminfo .send button:disabled:active {
	padding:1px;
}
#box-container #meminfo .send input {
    	margin-bottom: 8px;
    	height: 20px;
}
#box-container #meminfo #signin {
    	padding: 0px 48px 32px 48px;
	font-size:24px;
}
#box-container  #meminfo #signin span{
	display:inline-block;
	margin-top:16px;
	width:100%;
	height:32px;
	font-weight:bold;
}
#box-container  #meminfo #signin input{
    width: 96%;
    padding: 0px 8px;
    background-color: #fff;
    height: 48px;
    font-size: 24px;
    border: 1px solid #d4d8d8;
    border-radius: 12px;
}
#box-container  #meminfo #signin input[type=checkbox] {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    height: 24px;
    width: 24px;
}
#box-container  #meminfo #signin button {
    width: 100%;
    font-size: 20px;
    margin-top:24px;
}
#box-container  #meminfo #signin i {
    font-size: 18px;
    font-style:normal;
}

#header {
	position:relative;
	width:100%;
	height:84px;
	font-size:16px;
	background-color:#61666c;
	z-index:1002;
}

#header-container {
	display: table;
	position:relative;
	width:1900px;
	height:84px;
	margin:0 auto;
}

#footer {
	position:relative;
	width:100%;
	font-size:16px;
	background-color:#61666c;
}
#footer-container {
	position:relative;
	width:1900px;
	margin:0 auto;
	color:#fff;
}
#footer-container ul{
	position:relative;
	width:100%;
}
#footer-container ul li{
	float:left;
    	width: 21%;
    	padding: 2%;
    	text-align: center;
}

#menu {
	display: table-row;
}
#logo{
	display: table-cell;
	transition: margin .2s;
	width:20%;
	min-width:20%;
}
#logo .mo{
	display:none;
}
#logo img {
	position: absolute;
	width:200px;
	top: 0;
	bottom: 0;
	margin: auto;
	padding-left:8px
}
.menu {
	display: table-cell;
	position:relative;
	color: white;
 	vertical-align:middle;
	text-align:center;
    	line-height: 16px;
  	z-index: 1000;
	height:84px;
	width:8%;
	min-width:8%;
}
.menu span{
	display: inline-block;
	padding:8px;
	cursor:pointer;
}
.menu a{
	display: inline-block;
	color:#fff;
	text-decoration:none;
}
.menu img:first-of-type{
	width:24px;
	height:24px;
    	margin-bottom:4px;
}
#members.menu img:first-of-type{
	width:26px;
}

.arrow, .green {
	display:none;
	position: absolute;
	left:50%;
	transform: translate(-50%, 0);
	width:24px;
    	bottom: 0;
	z-index: 1001;
}
.green {
	display:block;
	z-index: 1000;
	width:16px;
}
.user {
	display: table-cell;
	position:relative;
	font-size:20px;
	color: white;
 	vertical-align:middle;
	text-align:center;
	height:84px;
	width:6%;
	min-width:6%;
}
.gap {
	display: table-cell;
	position:relative;
	width:28%;
	min-width:28%;

}
#account {
	line-height: 16px;
	color:#d1f279;
	cursor:pointer;
}
#account i{
    	display: block;
	font-style:normal;
	white-space:nowrap;
	line-height: 8px;
}
#account .icon span { 
	display: inline-block;
	width: 48px;
    	height: 48px;
    	vertical-align: middle;
    	border: 1px solid #666;
    	border-radius: 50%;
    	text-align: center;
    	line-height: 48px;
    	background-color: #fff;    
	margin: 0 0 32px 0;
	padding:0;
    	margin: 0 auto;
    	margin-bottom: 4px;
}
#account .icon span b {
    font-size: 32px;
    color: #666;
    line-height: 48px;
}
#account svg{
	width: 48px;
	height: 48px;
	/* pointer-events: none; */
	vertical-align: middle;
	line-height: 1;
	fill:#ffffff;
	margin:0 0 0 50%;
}
#account img{
	width: 48px;
	height: 48px;
	border:none;
	border-radius:32px;
	margin: 0 auto;
}
.user span {
	/*display: flex;*/
	width: 100%;
	height: 32px;
	line-height: 32px;
	cursor:pointer;
}
.user span.icon {
	height: 48px;
    	display: inline-block;
}
.user span.icon .alert{  
	display: flex !important;
	position: absolute;
	width: 20px !important;
	height: 20px !important;
	top: 4px;
	background-color: red !important;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff !important;
	margin-left: 60% !important;
}

#register span{
    	padding-left: 15%;
}

#search svg {
    	width: 40px;
    	margin: 0 auto;
    	height: 36px;
}
#login svg {
	height: 44px;
    	margin: 0 auto;
}

#search svg path, #login svg path{
	fill: #fff;
}
#search svg:hover path, #login svg:hover path{
	fill: #999;
}

#menu{
	display:none;
	text-align:center;
}
#menu img{
	width:40px;
}

#ebook-nav {
	position:absolute;
	display: none;
	clear:both;
	width: 75%;
	height: 432px;
	background-color:#d5dadd;
	z-index: 999;
	box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.5);
	border-radius: 0 0 8px 8px;
	top:84px;
	left: 50%;
	transform: translate(-50%, 0);

}
#comic-nav {
	position:absolute;
	display: none;
	width: 64%;
	height: 320px;
	background-color:#d5dadd;
	z-index: 999;
	box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.5);
	border-radius: 0 0 8px 8px;
	top:84px;
	left: 50%;
	transform: translate(-50%, 0);
	background-size:32%;
	background-position: right top;
	background-repeat: no-repeat;
}
#login-nav, #register-nav, #account-nav {
	position:absolute;
	display: none;
	width: 550px;
	background-color:#ffffff;
	z-index: 999;
	box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.5);
	border-radius: 0 0 8px 8px;
	top:84px;
	right: 8px;
    	padding: 24px 2% 2% 2%;
	font-size: 24px;
}
#register-nav {
	width:950px;
    	padding: 0;
	/*min-height: 640px;*/
    	overflow: hidden;
}
#register-nav section {
	position:relative;
	top:0;
	background-color:#fff;
	border-radius: 0 0 8px 8px;
}
#register-nav section:nth-of-type(1), #register-form section:nth-of-type(1){
	display:none;
	width:100%;
	height:100%;
}
#register-nav section:nth-of-type(1) div, #register-form section:nth-of-type(1) div{
	width: 75%;
	padding: 15% 10% 15% 15%;
	font-size: 30px;
	color: #666;
}
#register-nav section:nth-of-type(1) div span, #register-form section:nth-of-type(1) div span{
	font-weight: normal;
	text-align: right;
}
#register-nav section:nth-of-type(2){
    	padding: 24px 0 40px 40px;
}
#register-nav div, #register-form div {
	float:left;
	width:50%;
}
#account-nav {
	width:20%;
	padding: 0;
}
#account-nav ul{
	margin:0;
	padding: 0;
	width:100%;
}
#account-nav ul li{
	position:relative;
	margin:0;
	padding: 16px;
	width:calc(100% - 32px);
	cursor:pointer;
}
#account-nav ul li .alert{  
	display: flex;
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: red;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	margin-left: 80%;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}
#account-nav ul li img{
	display: inline-block;
	position:relative;
	width:32px;
    	vertical-align: middle;
    	margin: -1px 16px 0 0;
}

#account-nav ul li:nth-last-child(1){
	border-radius: 0 0 8px 8px;
}
#account-nav ul li:nth-child(even){
	background-color:#f0f2f2;
}
.submit span{
	display:inline-block;
	margin-top:16px;
	width:100%;
	height:32px;
	font-weight:bold;
}
.submit .popup{
	width: auto;
	position: absolute;
	right: 48px;
	top: 8px;
	font-size: 20px;
	cursor:pointer;
}
.submit span.info{
	font-size:18px;
	font-weight:normal !important;
}
.submit span.error{
	color:red;
	font-size:18px;
	font-weight:normal !important;
}

.submit input, .submit select{
	width: 96%;
	padding: 0px 8px;
	background-color: #f0f2f2;
	height: 48px;
	font-size: 24px;
	border: 1px solid #d4d8d8;
	border-radius: 12px;

}
#register-nav input {
	width: 90%;
}
#register-nav select{
	width: 94%;
}
.submit select{
	height: 50px;
}
.submit input[type=checkbox]{
	display: inline-block;
	vertical-align: middle;
	margin-top:-2px;
	height:24px;
	width:24px;
}
.submit button{
	width: 100%;
	font-size: 20px;
	cursor:pointer;
}
.submit .bttn{
	height:64px;
    	margin-top: 32px;
}
#register-nav .bttn, #register-form .bttn{
	width: 60%;
	margin: 0 auto;
	display: block;
	clear: left;
}
#register-nav button, #register-form button{
	margin-top:32px;
}
.submit .st, .submit #province{
	display: none;
}
.submit i, .submit em{
	font-size: 18px;
	font-style: normal;
    	font-weight: normal;
}
#register-nav i{
	color: #757575;
}
.submit .forgot{
	font-size: 16px;
	margin-top: 32px;
}
#login-form, #register-form {
	position:absolute;
	width: 550px;
	font-size: 24px;
	margin:0 auto;
    	box-shadow: 2px 6px 12px rgb(0 0 0 / 50%);
    	border-radius: 0 0 8px 8px;
    	padding: 32px; 
    	left: 0;
    	right: 0;
}
#register-form {
	display:none;
	width:950px;
    	padding: 0;
}
#login-form .txt, #register-form .txt{
	    width: auto;
	    position: absolute;
	    right: 48px;
	    top: 8px;
	    font-size: 20px;
	    cursor: pointer;
}
#register-form section:nth-of-type(2) {
    	padding: 32px 8px 32px 32px;
}
#register-form div {
	float:left;
	width:50%;
}
#register-form input {
	width:92%;
}
#register-form select {
	width:96%;
}
#register-form input.province {
	display:none;
}


#search-nav {
	position:fixed;
	display: none;
	height: 75px;
	background-color:#d5dadd;
	z-index: 999;
	box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.5);
	top:0;
	left:0;
	padding: 1.5% 1% 1% 1%;
    	border-radius: 0 0 8px 8px;
    	width: calc(98%);
    	z-index: 1001;
}
#search-nav img{
	position:absolute;
	width: 32px;
	cursor:pointer;
}
#search-nav img.search{
	right: 32px; 
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
#search-nav img.close{
	left: 32px;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}

#search-nav input {
	font-size: 24px;
	font-weight: 100;
	padding:0 0 0 64px;
	background-color: #f0f2f2;
	border: 1px solid #d4d8d8;
	border-radius: 16px;
	height: 70px;
    	width: calc(100% - 64px);
}

#ebook-nav ul, #comic-nav ul {
	float: left;
	margin: 16px 8px 0 24px;
	padding: 16px 0 0 32px;
	font-size: 24px;
    	border-left: 1px solid #8f8d8d;
}
#header ul:first-of-type {
	border: none;
}
#header li {
	margin-bottom: 18px;
    	min-width: 132px;
}
#header li a{
	color: #333333;
	text-decoration:none;
}
#header li a:hover{
	color: #000000;
}

/* end header */

/*content */
#content {
	position:relative;
	width:1900px;
	margin:0 auto;
}

#container {
	position:relative;
	display: table;
	float: left;
	background-color: #ccc;
	width: 80%;
	margin:0;
	font-size:16px;
  	table-layout: fixed;
}
#container .top{
	position:relative;
	height:16px;
	background-color:#909790;
	/*border-bottom:1px solid #fff;*/
}
#container .top div{
	position:absolute;
	width:100%;
	height:8px;
	background-color:#fff;
	border-top-left-radius:8px;
	top:9px;
}
#container .top div.lgray{
    	background-color: #ebedeb;
}
#container .pa {
	float:right;
	font-weight:bold;
	margin:8px 0;
}
#container #left{
	position:relative;
	display: table-cell;
	vertical-align: top;
	width:25%;
	background-color:#b8dacf;
}
#container #left #memlist{
	position:relative;
	width:100%;
	text-align:center;
	margin-top:4px;
	padding-top: 133%;
}
#container #left #memlist div{ /* height 133% of parent */
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
}

#container #left #memlist img.cover {
	width:31%;
	border-radius:4px;
	cursor:pointer;
}
#container #left #memlist img.loading {
	margin-top:100px;
}
#container #left .ribbon{
	position: relative;
	clear:right;
	background-color:#909790;
	text-align:center;
	vertical-align:middle;
	border-bottom:1px solid #fff;
	padding: 0 0 0 24px;
}
#container #left .ribbon img{
	position:absolute;
	top:-2px;
	left:4px;
	transform: rotate(-4deg);
}
#container #left .ribbon span{
	display:inline-block;
	margin:8px 0;
	color:white;
	font-size:16px;
}
#container #left #bookintro{
	padding:18px;
	font-size:18px;
}
#container #left #bookintro div{
	margin-bottom:64px;
}
#container #left #bookintro p{
	text-align:center;
}
#container #left #bookintro img{
	width:80%;
}
#container #left #bookintro .pa {
	display: none;
}

#container #main {
	position:relative;
	display: table-cell;
	vertical-align: top;
	background-color:#fff;
	width:75%
}
#container #main #newbooks{
	position:relative;
	padding:0 24px;
	text-align:justify;
	font-size: 20px;
}
#container #main #newbooks .date{
	position:absolute;
	height:92px;
	width:92px;
	border:1px solid #d6d6d6;
	border-radius:46px; 
    	margin-top: -2px;
	left: 16px;
}
#container #main #newbooks .date > span{
	display:inline-block;
	height:80px;
	width:80px;
	background-color:#fdbd5c;
	border-radius:40px;
	text-align:center;
	margin:6px 6px;
}
#container #main #newbooks .date > span span{
	font-size:18px;
	line-height:70px;
	color:#540600;
	font-weight:bold;
}
#container #main #newbooks div div{
	 clear:right;
	 position:relative;
	 text-align:center;
	 margin:-8px 0 32px 0;
}
#container #main #newbooks div div span{
    	display: inline-block;
	 text-align:justify;
}

#container #main #newbooks .cover{
    	width: 14%;
    	height: calc(14vw * .8);
	font-size:12px;
	margin:12px .80%;
	border-radius:1px;
}
#container #main #online, #container #main #newmem{ 
	display:table;
	color:#61666C;
	font-size:20px;
	line-height:32px;
	width:96%;
	margin:0 auto; 
	border: 1px solid gray;
	border-left: none;
	border-radius:0 10px 0 0;
}
#container #main #online div, #container #main #newmem div{ 
	display:table-cell;
}
#container #main .list{ 
	padding:16px 16px 16px 2px;
}
#container #main .label{  
	background-color:#bab8b8;
	width:24px;
	border-radius:0 10px 0 0;
	color:white;
	text-align:center;
	font-size: 16px;
	line-height: 20px;
	padding-bottom: 16px;
}
#container #main .list span, #container #main .credit span {  
	color: #2e8b9c;
	text-decoration: underline;
	white-space: nowrap;
	cursor:pointer;
}
#container #main .list span:hover, #container #main .credit span:hover{  
	color: #ff4040; 
	text-decoration: underline overline;
}

#comments, #messages {
	width:96%;
	margin:0 auto;
}
#main h1{
	display:flex;
	font-family: "Montserrat", sans-serif;
	color: #333333;
	float:right;
	margin-right:8px;
	font-weight: 400;
}
#main h1 .box{
	/*background: #eaeb95;*/
	margin: 20px;
        filter: invert(98%) sepia(15%) saturate(6733%) hue-rotate(306deg) brightness(135%) contrast(84%);
}

#main h1 .box img{
	width: 74px;
}
#main h1 .heading{
	position: relative;
	display: inline-block;
	margin-top: 32px;
	margin-left: -80px;
}
#main #books.comics h1 .box{
	/*background: #f2cb2c;*/
	filter: invert(96%) sepia(66%) saturate(7492%) hue-rotate(332deg) brightness(100%) contrast(90%);
}
#main #books h1 .box{
	/*background: #b0d4e0;*/
	filter: invert(100%) sepia(20%) saturate(4713%) hue-rotate(170deg) brightness(93%) contrast(88%);
}
#main #member h1 .box{
	/*background: #f4bec8;*/
	filter: invert(90%) sepia(4%) saturate(4566%) hue-rotate(295deg) brightness(98%) contrast(95%);
}
#main #vmboards h1 .box{
	/*background: #f0f0ec;*/
	filter: invert(99%) sepia(4%) saturate(2251%) hue-rotate(46deg) brightness(120%) contrast(88%);
}
#main #vmboards h1 .heading{
    	margin-left: -90px;
}
#main h6{
    	float: right;
    	font-family: "Montserrat", sans-serif;
    	margin: 0 32px 4px 0;
   	font-size: 16px;
    	font-weight: 400;
    	color: #000;
}
#main .post {
	clear:both;
	position:relative;
	border-top-right-radius:8px;
	border-top-left-radius:8px;
	border:1px solid #cfcfcf;
	border-bottom:none;
	margin-bottom:24px;
    	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
#main .post div{
	position:relative;
}

#main .post .reply-to{ 
    	border-top: 1px solid #cfcfcf;
    	border-bottom: 1px solid #cfcfcf;
	padding:16px 0 0 32px;
	margin-top:16px;
}
#main .post .reply-to span{ 
	margin-bottom:18px;
	cursor:pointer;
}
#main .post .reply-to span:hover{ 
	color:#000;
}

#main .post .header{
	border-radius:8px 8px 0 0;
	background-color: rgba(0,0,0,0.06);
	padding: 2%;
	margin-bottom: 8px;
}
#comments .post .header p{ 
	padding:0;
	margin: 8px 0;
	font-size:20px;
}
#comments .post .header ul{
	position: absolute;
	bottom: 32px;
	right: 4px;
}
/*
#comments .post .header ul li{
	float:left;
	margin-right:16px;
}
*/

#main ul.add li {
	float:left;
}
#main ul.add li span {
	display: inline-block;
	position: relative;
	text-align: center;
	background-color: #4387b7;
	border-radius: 20px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin: 0 16px 8px 0;
	box-shadow: 3px 2px 3px 0 rgba(34,34,34,0.15);
}
#main ul.add li img, #main ul.add li svg {
	position: absolute;
	max-height: 50%;
	max-width: 50%;
	width: auto;
	height: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#main ul.add li.download-cbr img {
	margin-bottom: 30%;
}
#main ul.add li svg path{
	fill:#fff;
}
#main ul.add li.add-favorite.added svg path{
	fill:#fabbfb;
}
#main ul.add li.add-library.added svg path{
	fill:#b5effd;
}
#main li.add-favorite span{
	background-color:#e8306d !important;
	
}
#main li.download-epub span{
	background-color:#5ca477 !important;
	
}
#main li.download-pdf span{
	background-color:#d05050 !important;
	
}
#main li.add-library span {
	background-color:#4e6c90 !important;
}
#main li.post-review span {
	background-color:#8a5b8b !important;
}
#main li.read-ebook span {
	background-color:#d27701 !important;
}
#main li.delete-epub span {
	background-color:#bc3030 !important;
}

#comments .post .header ul li svg path{
	fill:#fff;
}
#comments .post .header ul li.add-favorite.added svg path{
	fill:#fabbfb;
}
#comments .post .header ul li.add-library.added svg path{
	fill:#b5effd;
}
#comments .post h2{
	float:left;
	font-size:28px;
	line-height:32px;
	margin: 16px 0 0 16px;
}
#comments .post h2 span{
	font-size:20px;
	font-weight:200;
}
#comments .post h2 span a:first-of-type{
	font-size:24px;
}
#main .post .comment .icon img{
	width: 64px;
	height: 64px;
	vertical-align: middle;
	border:none;
	border-radius:32px;
    	box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 10%);
	cursor:pointer;
}
#main .post .comment .icon span{
	width: 62px;
	height: 62px;
	vertical-align: middle;
	border:1px solid #666;
	border-radius:40px;
	text-align: center;
	line-height: 84px;
	background-color:#fff;
	margin:0;
    	box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 10%);
}

#reply {
    	position: relative;
	display:none;
	float:none !important;
	padding:0 16px 16px 0;
}
#post textarea, #reply textarea {
    	min-height: 100px !important;;
}
#post img.ava, #reply img.ava{
	width: 24px;
	height: 24px;
	vertical-align: middle;
	border: none;
	border-radius: 50%;
    	box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 10%);
}

#post span, #reply span {
	margin: 0 !important;
}

#post .icon span {
	width: 22px;
	height: 22px;
	vertical-align: middle;
	border:1px solid #666;
	border-radius:12px;
	text-align: center;
	line-height: 24px;
	background-color:#fff;
	margin:0;
}
#post div, #reply div{
    	position: relative;
	float:none !important;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	margin-top:4px;
}
#post .icon img, #reply .icon img{
	width: 24px;
	height: 24px;
	vertical-align: middle;
	border:none;
	border-radius:50%;
}
#post div button, #reply div button{ 
	/*position: absolute;*/ 
    	position: relative;
	float:right;
	right: 4px;
	bottom: 20px;
	border: none;
	background: transparent;
	padding:1px;
	font-size:14px;
	cursor: pointer;
}
#post div button:active, #reply div button:active {
	padding:2px;
}
#post div button:disabled:active, #reply div button:disabled:active {
	padding:1px;
}
#post textarea, #reply textarea{
	position: relative;
	font-size:18px;
    	width: calc(100% - 20px);
	border:none;
	outline: none;
	resize:none;
	min-height:50px;
}

.emoji, .photo, .pm, .pr, .p{
    	display: inline-block;
    	position: relative;
    	float: right;
    	bottom: 31px;
    	cursor: pointer;
    	line-height: 12px;
    	padding: 8px;
}
.pm{
    	width: 145px;
    	bottom: 28px;
    	right: 0;
}
.pr{
    	width: 120px;
    	bottom: 28px;
    	right: 0;
}
.p{
    	width: 50px;
    	bottom: 28px;
    	right: 0;
}
.pm button, .pr button, .p button{
    	bottom: 0 !important;;
}
.photo{
    	bottom: 29px;
    	right: 0;
}
    
.emoji svg{
	width:20px;

}
.photo svg{
	width:17px;

}
.emoji svg path, .emoji svg circle, .photo svg path{
	fill:#333;
}
.emoji svg:hover path, .emoji svg:hover circle, .photo svg:hover path{
	fill:#bbb;
}
.emoji.disabled svg path, .emoji.disabled svg circle, .photo.disabled svg path{
	fill:#bbb;
}

#main .post>ul{
	margin: 0 16px 0 0;
}

#comments .header .icon, #comments .header .iconh{
	width: 128px;
	height: 128px;
	vertical-align: middle;
	border:none;
	border-radius:8px;
	box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
	overflow:hidden;
}
#comments .header .icon img{
	position:absolute;
	width: 128px;
	top:-16px;
}
#comments .header .iconh img{
	position:absolute;
	height: 128px;
	left:-32px;
}

#main .reply .icon img {
	width: 48px;
	height: 48px;
	vertical-align: middle;
	border:none;
	border-radius:50%;
    	box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 10%);
}

#main .reply .icon span{
	width: 46px;
	height: 46px;
	vertical-align: middle;
	border:1px solid #666;
	border-radius:50%;
	text-align: center;
	line-height: 60px;
	background-color:#fff;
	margin:0;
    	box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 10%);
}

#main .comment .icon span b{
	font-size:40px;
	color:#666;
    	line-height: 52px;
}
#main .reply .icon span b{
	font-size:30px;
	color:#666;
    	line-height: 42px;
}

#main .post li{
	display:table;
	padding-top: 16px;
}
#main .post .header li, #main .post li.comment {
	padding-top: 0;
}
#main .post li:nth-of-type(2) {
	padding-top: 0;
}
#main .post li:first-of-type div.react{
	padding:0 0 32px 0;
}
#main .post li:last-of-type div.react{
	padding:0;
}
#main .post li>div{
	display:table-cell;
}
#main .post li>div:nth-of-type(2){
	width:100%;
}
#comments .post div>div{
	float:left;
}
#main .comment div{
	padding:16px 0 0 16px;
} 
#main .comment div.pic, #main .reply div.pic{
	text-align:center;
} 
#main .comment div.pic img, #main .reply div.pic img{
	max-width:100%;
} 
#main .comment div.pic .youtube, #main .reply div.pic .youtube{
	max-width:100%;
} 
#main .reply{
	border-left:1px solid #cfcfcf;
	margin-left:98px;
}
#main .reply div{
	padding:0 0 0 16px;
} 

#main .post span{
	display:inline-block;
	position:relative;
}

#main .post p{
	font-size:20px;
	word-break: break-word;
    	width: calc(100% - 16px);
}
#main div.react {
	font-size:16px;
	clear:both;
	padding:0 0 16px 0;
}
#main div.react .heart{
	font-size: 14px;
	bottom: 3px;
}
#main div.react button{
	padding: 0;
	background-color: transparent;
}

#main .react svg{
	width:16px;
	cursor:pointer;
}
#main .react svg path{
	fill: #d05050;
}
#main .react svg:hover path{
	fill: red;
}
#main .post .memid b{
	font-size:18px;
}
#main .post .memid i{
	font-size:14px;
}
#main .comment .memid{
	margin-top:8px;
}
#comments .post .reply .memid{
	margin-top:8px;
}

#main .post p em, #main .post p i {
	font-style:normal;
}

.limit .part2,.limit .less {
	display: none !important;
}

.all .more {
	display: none !important;
}

.more,.less {
	margin-left: 8px;
	cursor: pointer;
    	font-size:16px;
}

#sidebar {
	position: absolute;
	top:0;
	margin-left: 80%;
	width: calc(20% - 16px) !important; 
	padding: 0 8px 0 8px;
}
#sidebar > div {
	position:relative;
	margin:0 auto;
}
#sidebar #donate button{
    	display: inline-block;
    	background-color: #a5d6ff;
    	height: 40px;
    	margin: 8px 0;
    	font-size: 18px;
	cursor: pointer;
    	padding: 10px 15%;
}
#sidebar #donate div:nth-of-type(1){
	text-align:center;
	background-color:#ff6581;
	font-weight:400;
	padding:8px;
	font-size:24px;
	margin-bottom:16px;
	border-radius:8px;
	line-height:32px;

}
#sidebar .label{
	position:relative;
	background:#494e53;
	background-image: url('../images/abg.png');
	color:white;
	padding:8px;
	border-radius:8px 8px 0 0;
	margin-top:16px;
}
#sidebar > div div:nth-of-type(2){
	position:relative;
	text-align:center;
	background-color:#fff;
	font-weight:600;
	padding:16px;
	font-size:20px;
	/*margin-bottom:16px;*/
}
#sidebar #mem-lookup input {
	height: 26px;
	border-radius: 2px;
	border: 1px solid #333;
	width: calc(100% - 64px);
}
#sidebar #mem-lookup button {
    	padding: 8px;
}
#sidebar #donate-book span {
	cursor:pointer;
}
#sidebar #donate-book span:hover {
	text-decoration:underline;
}
#sidebar #donate-book div:nth-of-type(2){
	padding:24px;
	font-size:22px;
	line-height:32px;
	margin-bottom:16px;
	background-image: url('images/insignia.jpg');
	background-size: 200%;
	background-position: -180px -160px;
	font-weight:normal;
}
#sidebar #coming-soon img, #sidebar  #mem-photo img{
	width:80%;
}
#sidebar #coming-soon{
	background-color:#fff;
	border-radius:12px 12px 0 0;
}
#sidebar #coming-soon .book{
	/*min-height: 500px;*/
}
#sidebar #mem-photo .member{
	/*min-height: 360px;*/
}
#results {
    	padding: 24px;
    	font-size: 24px;
}
#results span{
    	font-family: "Montserrat", sans-serif;
    	font-size: 28px;
}


/* footer */
#footer li span{
	cursor:pointer;
}
#footer li span:hover {
	color: #e2fafa;
}
#totop, #se {
	display: none;
	position: fixed;
	width: 50px;
	height: 50px;
	right: 8px;
	align-items: center;
	justify-content: center;
	background-color: #000;
	opacity: 0.5;
	border-radius: 12px;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}
#totop{
	bottom: 8px;
}
#se {
	top: 8px;
}
#se img{
	max-height: 60%;
	max-width: 60%;
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#totop img{
	transform: rotate(90deg);
}
#totop:hover, #se:hover {
	opacity: .9;
}

/* books */


#container .top.gray div{
	background-color: #b1b6b7;
}

#books {
    	position: relative;
	/*min-height: 880px;*/
}
#books h1 {  
    	margin: 8px 32px 16px 0;
	font-size: 32px;
}
#books > li:first-of-type {
	border-top:none;
}
#books > li {
    	display: table;
    	position: relative;
    	width: 100%;
	border-top:1px solid #fff;
	border-bottom:1px solid #e1dfdf;
}
#books > li:nth-child(odd) {
    	background-color: #f8f8f8;
} 
#books > li div{
	display:table-cell;
    	position: relative;
    	padding: 1.5vw 1vw 1vw 1vw;
	vertical-align: top;
}
#books > li div:first-of-type{
	width:220px;
}

#books > li div:first-of-type img{
    	position: relative;
	width:100%;
}

#books div h2 {
    	font-size: 28px;
   	margin: 0 0 16px 0;
}
#books div  h2 span a:first-of-type {
    	font-size: 24px;
}
#books div h2 span {
    	font-size: 20px;
    	font-weight: 200;
}
#books div span.chap {
	display: inline-block;
	border: 1px solid #666;
	background-color: #fff;
	min-width: 16px;
	text-align: center;
	color:#666;
	font-size: 14px;
	line-height: 20px;
    	vertical-align: middle;
    	padding: 1px 4px;
	margin-right: 12px;
	margin-top: -4px;
	border-radius: 2px;
}
#books div h2 span a{
    	font-size: 24px;
}
#books ul {  
    	margin: 24px 0 4px 0;
    	overflow: hidden;
}
#main p small {
	font-size: 20px;
}
#main p ins {
	font-size: 16px;
    	text-decoration: none;
}
	
#main #books p {
    	font-size: 20px;
   	word-break: break-word;
}
#main #books p.view{
    	font-size: 16px;
	margin-top:0;
}
#main #books .cat {
    	display: inline-block;
	border-radius: 8px;
	transition: .3s;
    	background-color: rgba(0,0,0,0.6);
    	margin: 6px 12px 6px 0;
    	padding: 7px 20px 5px 20px;
	transition: .3s;
	cursor:pointer;
}
#main #books .cat:hover {
    	background-color: #777;
}
#main #books .cat a{
	color:#fff;
   	font-size: 20px;
	text-decoration: none;
	white-space: nowrap;
}
#main .pagenav, #main .credit {  
	position:relative;
  	background-color: #dcdedc;
	text-align: center;
	width: calc(100% - 64px);
	border-top:1px solid #e8eae8;
	border-bottom:1px solid #ccc;
	padding: 8px 32px 8px 32px;
}
#main .pagenav.top {  
  	background-color: transparent;
	border:none;
	z-index:1;
	height: 40px;
}
#main .pagenav.bottom {  
  	background-color: transparent;
	border:none;
	z-index:1;
	padding-bottom:16px;
	overflow:hidden;
}

#main .pagenav.top #contents{
	top:0;
    	margin-top: -16px;
    	text-align: left;
   	border-radius: 0;
   	background-color: #fff;
    	height: 0;	
    	width: 100%;
    	margin-left: -22px;
}
#main .pagenav.top #contents #ml{ 
	display:block !important;
    	max-width: 50%;
	height:804px;
	top:0;
    	font-size: 24px;
	padding:0 32px 0 80px;
	overflow-y: auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
	-webkit-box-shadow:  6px 0 4px 0 rgba(34,34,34,0.15);
   	-moz-box-shadow:  6px 0 4px 0 rgba(34,34,34,0.15);
        box-shadow: 6px 0 4px 0 rgba(34,34,34,0.15);
   	margin-left: -100%;
	transition: 1s;
}  
#main .pagenav.top #contents #ml.open{ 
   	margin-left:0;  
	transition: .5s;
}  
#main .pagenav.top #contents #ml::-webkit-scrollbar {
	display:none;
}    
#main #ml ul{
	padding-bottom: 64px;
}     
#main #ml ul li{
	margin: 0 0 8px 0;
}          
#main #ml ul li.group{
	margin: 16px 0 8px 0px;
}    
#main #ml ul li.opt{
	margin: 0 0 8px 32px;
}
#main .pagenav.comic {
	height: 0;
	padding: 0 32px;
	z-index: 3;
}  
#main .pagenav.comic #contents {
	margin-top: 82px;
	margin-left: -44px;
}
#main .pagenav.comic .contents {
	margin: 28px 0 0 24px;
}
#main .pagenav.comic #contents a{
	cursor: pointer;
}   

#main #books.title .pagenav.top {
   	position: sticky;
	height: 40px;
	width: calc(100% - 8px);
	padding: 0;
	top: 16px;
	z-index:3;
    	margin-top: 16px;
    	margin-left: 4px;
    	margin-bottom: 600px;
}
#main #books.canvas .pagenav.top {
    	position: absolute;
	height: 40px;
	width: calc(100% - 16px);
	padding: 0;
	top: 64px;
	z-index:3;
    	margin-left: 4px;
}

#main .pagenav button{   
	display: flex;
	float: right;
	padding: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
  	background-color: transparent;
	/*
	box-shadow: 0 0.25rem 0.5rem 0 rgba(34,34,34,0.15);
	background-color: #fff;
	border-radius: 50%;*/
	cursor: pointer;
}
#main .pagenav button.inactive img{
	opacity:.3;
}
#main .pagenav button img{    
	width: 32px;
  	height: 32px;
}
#main .pagenav button.next:active {
	padding-left: 4px;
}
#main .pagenav button.prev:active {
	padding-right: 4px;
}
#main .pagenav button.inactive:active{
	padding:0 !important;
}
#main .pagenav button.contents:active {
	padding-top: 2px;
}
#main .pagenav .next img{ 
	margin-left:4px;
	z-index:1;
}
#main .pagenav .prev img{ 
	transform: rotate(180deg);
	margin-right:4px;
}
#main .pagenav .next{    
	float:right;
}
#main .pagenav .prev{    
	float:left;
}
#main .pagenav .contents{  
	float:none;
    	margin: 100px 0 0 24px;
	transform: rotate(-180deg);
}
#main .pagenav select{    
	color: #333;
    	border-radius: 4px;
    	border: 1px solid #ccc;
    	font-size: 24px;
    	padding: 4px;
}
#main .pagenav span{    
	display:inline-block;
	/*margin-top:8px;*/
}

#main .pagenav #sort{
    	/*float:left;*/
}

#main .credit {  
	text-align: left;
	font-size:24px;
    	min-height: 24px;
}
#books #list{
	position: relative;
	width: 100%;
	margin: 24px 0;

}
#books #list li{
	float:left;
    	position: relative;
    	width: calc(25% - 64px);
	padding: 2px 0 8px 64px;
}
#books #list li a{
    	white-space: nowrap;
}
#books #list li a i{
    	font-style: normal;
}
#books #list li span{
	display: flex;
	position: absolute;
	top: -1px;
	left: 16px;
	background-color: #ffc843;
	border-radius: 4px;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	font-weight:bold;
	cursor: pointer;
}
#books #alpha{
	display: flex;
	float:none;
	width: auto;
	padding: 0;
    	overflow: hidden;
}
#books #alpha>div{
    	width: auto;
    	padding: 0;
    	margin: 0 auto;
}
#books #alpha span{
	display: flex;
	float: left;
	width: 32px;
	height: 32px;
    	background-color: rgba(0,0,0,0.3);
	color: #fff;
	font-weight: bold;
	align-items: center;
	justify-content: center;
    	margin-right: 0.5vw;
	border-radius: 4px;
	transition: .3s;
	cursor: pointer;
}
#books #alpha span:hover{
    	background-color: #777;
}
#books #alpha div:nth-of-type(2){
	display:none;
}
#books #alpha div:nth-of-type(2) span{
	width: 64px;
}
#books #alpha span:hover{
    	background-color: #777;
}
#main .book-title{
	background-color: #b1b6b7;
    	padding: 4px 8px 4px 12px;
    	font-size: 20px;
    	width: calc(100% - 20px);
	color:#fff;
	border-bottom:1px solid #adb2b3;
}
#main .book-title a {
	color: #ffffff; 
	text-decoration: none;
	transition: .3s;
}
#main .book-title a:hover  {
	color: #e2fafa; 
}
#main .book-title span{
	display:none;
    	float: right;
    	font-size: 16px;
    	margin-top: 4px;
}

#books .icons {
	background-color: #dcdedc;
	height:48px;
    	overflow: hidden;
	border-top:1px solid #e8eae8;
	border-bottom:1px solid #ccc;
    	padding: 0 0 0 8px;
}
#books .icons .add{
	float: right;
    	margin: 4px;
}
#book-container #book-page {
	padding:64px 128px;
} 
#book-content, #book-empty, #member-login {
	padding:64px 128px;
    	margin-top: 48px;
	min-height:800px;
}
#book-content{
    	margin-top: -600px;
}
#book-content.single{
    	margin-top: 0;
}
#book-content .cover, #book-container .cover{
    	max-width:100%;
}
#comments.title #post {
	clear:right;
	display:block;
    	padding: 0 0 32px 0;
}
#comments.title #reply {
	/*display:block;*/
    	padding: 0 16px 16px 80px;
}
#comments.title #post .icon img, #comments.title #reply .icon img {
	width: 48px;
    	height: 48px;
    	margin: 8px;
	border-radius:50%;
}
#comments.title #post .icon span, #comments.title #reply .icon span {
   	display: inline-block;
   	width: 48px;
    	height: 48px;
    	vertical-align: middle;
    	border: 1px solid #666;
   	border-radius: 50%;
   	text-align: center;
    	line-height: 48px;
    	background-color: #fff;
    	font-size: 24px;
    	padding: 0;
    	margin: 8px !important
}
#comments.title #post textarea, #comments.title #reply textarea{
    	min-height: 100px;
}

#book-content, #book-content p, #book-page p, #book-content ul, #book-content blockquote  {
	font-size:28px !important;
}
#book-page p i{
	font-style:italic !important;
}
#book-page h1{
	float:none;
	margin:0;
	text-align:center;
}

#book-page table {
    	font-size:22px;
}
#book-page img {
    	max-width:100%;
}

#book-page .t1 {
    	text-align: justify; 
	margin-top: 12px; 
	margin-bottom: 12px;
}

#book-page .t2 {
	text-align: justify;
	text-indent: 64px; 
	margin-top: 24px; 
	margin-bottom: 24px;
}

#book-page .t3, #book-content .t3 {
	text-align: center; 
	margin-top: 24px; 
	margin-bottom: 24px;
}

#book-page .t4 {
	text-align: right; 
	margin-top: 24px; 
	margin-bottom: 24px;
}

#book-page .t5 {
	display: block;
    	margin-left: 64px; 
	margin-top: 24px; 
	margin-bottom: 24px;
}

#book-page .t6 {
    	margin-left: 128px; 
	margin-top: 24px; 
	margin-bottom: 24px;
	text-align: justify;
}
#book-page .t7 {
	text-transform: capitalize;
}
#book-page .t8 {
	text-transform: uppercase;
}
#book-page .s1 {
	font-style: italic;
}
#book-page .s2 {
	font-weight: bold;
}
#book-page .s3 {
	text-decoration: underline;
}

#book-page h1, #book-content h1 {
    	display:block;
	font-size:54px;
	margin-bottom: 80px !important;
    	font-weight: bold;
	float:none;
}
#book-page h2, #book-content h2 {
	font-size:48px !important;
	margin-bottom: 72px !important;
}
#book-page h3, #book-content h3 {
	font-size:40px;
	margin-bottom: 64px !important;
    	line-height: 64px;
}
#book-page h3 span, #book-content h3 span{
	font-size:32px;
	font-weight: normal;
}
#book-page h4, #book-content h4 {
	font-size:32px;
	margin-bottom: 50px !important;
}
#book-page h5{
	font-size:30px;
	margin-bottom: 48px !important;
}
#book-page h6{
	font-size:28px;
	margin-bottom: 48px !important;
}
#book-page a{
	text-decoration:none;
	color:#333;
}
#book-page a:hover{
	color:#000;
}
#book-page a sup font::before{
	 content: "[";
}
#book-page a sup font::after{
	 content: "]";
}
#book-page table.bfont td:first-of-type a::before{ 
	 content: "[";
}
#book-page table.bfont td:first-of-type a::after{
	 content: "]";
}

#book-page #book-page{
	margin-top:128px;
}   
#book-page table td {
	padding: 8px
} 
       
#book-container { 
	position:relative;
	width:100%;
	height:800px;
	overflow:hidden;
}   
#book-container #bubble{ 
	display: none;
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	width: 240px;
	background-color: #fff;
	font-size: 24px;
	padding: 16px;
	border-radius: 16px;
	line-height: 36px;
  	filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));
}   
#book-container #bubble span{
    	display: block;
    	text-align: center;
}     
#book-container #bubble i{
	font-style:normal;
}   
#book-container #bubble span img{
    	width:50px;
}  
#book-container #bubble::before {  
	border: 12.5px solid transparent;
	border-top-color: transparent;
	border-top-style: solid;
	border-top-width: 12.5px;
	border-bottom-color: transparent;
	border-bottom-style: solid;
	border-bottom-width: 12.5px;
	border-top: 12.5px solid #fff;
	border-top-width: 12.5px;
	border-bottom: 0;
	height: 0;
	width: 0;
	border-top-width: 25px;
	content: "";
	display: block;
	position: absolute;
	left: 64px;
	bottom: -25px;
	transform-origin: center;
	transform: rotate(90deg) skew(-25deg) translateY(16.6666666667px);
}
#book-container #canvas { 
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:800px;
	background-color:#f8f8f8;
	overflow:auto;
}   

#book-container #canvas.no-scroll { 
	overflow:hidden;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
#book-container #canvas {
	scrollbar-width: auto;
	scrollbar-color: #333 #ffffff;
}
/* Chrome, Edge, and Safari */
#book-container #canvas::-webkit-scrollbar {
	width: 12px;
	height: 24px;
}

#book-container #canvas::-webkit-scrollbar-track {
	background: #ffffff;
}

#book-container #canvas::-webkit-scrollbar-thumb {
	background-color: #333;
	border-radius: 3px;
	border: 1px solid #ffffff;
}
#book-container #canvas #pages{ 
	position:relative;
	/*width:1024px;*/
	background-color:#f8f8f8;
	margin:0 auto;
	overflow:hidden;
} 

#book-container #canvas #pages #cover { 
	width:100%;
	padding-top:64px;
	text-align:center;
	margin-bottom:16px;
	min-height:900px;
}
#book-container .lazy { 
	position:relative;
	width:100%;
	height:auto;
	background:#fff;
	overflow:hidden;
	margin-top:8px;	
	z-index:2;				 
} 
#book-container .lazy canvas {
  	position: absolute;
	width:100%;
  	top: 0 !important;
  	z-index: 1;
}
#book-container .slide {
	position: absolute;
	z-index: 2;
	width: 50px;
	background-color: #fff;
	padding: 8px;
	border-radius: 8px;
	top: 8px;
	left: calc(25% - 29px);
    	opacity: .8;
	filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));
}
#book-container .lazy .ui-draggable {
  	cursor: ew-resize;
}
#book-container .lazy .loading { 
	margin-top: 100px;
	z-index:2;
	width:100%;
}
#book-container .lazy .wm { 
	position:absolute;
	width:1024px;
	height:192px;
	z-index:3;
}
#book-container .lazy .wm div { 
	position:absolute;
	background-color:#fff;
	width:192px;
	height:192px;
	border:1px solid #dcdedc;
	border-radius:50%;
	visibility:hidden;
	overflow:hidden;
}
#book-container .lazy .wm div canvas#text{
	position:absolute;
	width:1024px;
	height:192px;
}
#book-container .double { 
	width:200%;			 
} 
#book-container .skip { 
	height:0 !important;
	margin-top:0;		
} 
#book-container #canvas .text { 
	text-align: justify; 
	font-size: 22px;
	margin-bottom:16px;
	width:calc(100% - 16px);
	padding: 8px;
	background-color:#fff;
}
#books #bio p{
	font-size:24px;
    	margin: 8px;
    	margin: 20px;
}
#books #bio img{
	width:auto;
}
#books #bio table{
    	padding: 12px;
	font-size:20px;
    	line-height: 32px;
}
#books #bio table td{
    	padding: 8px;
}
#books #bio table .sfont{
	font-size:16px;
}
#books .break {
	padding-top: 3em;
}

/* vmembers */
#member {
    	position: relative;
	min-height: 1000px;
}
#member h1 {
    	margin: 8px 32px 16px 0;

}
#member #mem-photo>div {
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
	margin-bottom: 24px;
	padding:32px 32px 64px 32px ;
}
#member #mem-photo, #member #mem-info {
    	padding:0 32px;
	font-size:24px;;
}
#member #mem-photo {
	text-align:center
}
#member #mem-photo p{
	text-align:left;
    	margin: 0;
}
#member #mem-photo p.error{
	color:red;
	min-height:32px;
}
#member #account-info {
	line-height:32px;
}
#member #account-info span, #member #account-info i {
    	display: inline-block;
    	height: 32px;
}
#member #account-info span {  
  	margin-top: 16px;
  	width: 100%;
  	height: 32px;
    	font-weight: bold;
}
#member #account-info i {
	font-style:normal;
	font-size:20px;
}
#member #account-info sup {
	color:red;
}
#member #account-info input, #member #account-info select {
    	display: block;
   	padding: 0px 8px;
   	background-color: #f0f2f2;
    	height: 48px;
    	font-size: 24px;
    	border: 1px solid #d4d8d8;
    	border-radius: 12px;
}
#member #account-info input {
    	width: 95%;
}
#member #account-info textarea {
    	resize: none;
}
#member #account-info .state, #member #account-info #province {
    	/*display: none;*/
	margin-bottom:30px;
}
#member #account-info #province.field {
    	display: block;
}
#member #account-info input[type=checkbox] {
    	display: inline-block;
    	vertical-align: middle;
    	margin-top: -2px;
    	height: 24px;
    	width: 24px;
}
#member #account-info li {
	float:left;
	width:25%;
}
#member #account-info #fav input, #member #account-info #info input {
	width: calc(100% - 16px);
}
#member #account-info .confirm {
    	display: flex;
	align-items: center;
	min-height:48px;
	color:#2c6eac;
}
#member #account-info #update-profile, #member #account-info #change-password {
	min-height:48px;
    	text-align: center;
}
#member #account-info .confirm.error {
	color:red;
}
#member #account-info .label {
    	color: #fff;
    	background-color: #81919f;
    	border-top-right-radius: 8px;
    	border-top-left-radius: 8px;
	padding:8px 16px !important;
	width:calc(100% - 32px) ;
	
}
#member #account-info #profile {
	position:relative;
    	border-top-right-radius: 8px;
   	border-top-left-radius: 8px;
   	border: 1px solid #cfcfcf;
    	border-bottom: none;
    	margin-bottom: 24px;
    	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
	margin-top:32px;
}
#member #account-info #profile>div {
	padding:0 32px;
}
#member #account-info h2 {
	font-weight:normal;
	margin:0;
	font-size:24px;
}
#member #account-info #info {
	position:relative;
	display:table;
    	width: 100%;
    	table-layout: fixed;
}
#member #account-info #info>div {
	display:table-cell;
	width:45%;
    	border-radius: 8px;
   	border: 1px solid #cfcfcf;
    	margin-bottom: 24px;
    	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
#member #account-info div>div>div {
	padding:0 32px;
}

#member #account-info #info>div:nth-of-type(2) {
	border:none;
    	box-shadow: none; 
    	padding: 4px;
	width:1%;
}
#member #account-info #info i {
  	font-size: 18px;
  	font-style: normal;
  	font-weight: normal;  
	color: #757575;
}
#member #account-info .profile{
	float:left;
	width:49%;
}
#member #account-info .profile:nth-of-type(3) {
	padding-left:2%;
}
#member #account-info .profile select {
	width:98%;
}
#member #inbox-container {
    	padding: 0 32px;
    	font-size: 24px;
} 
#member #inbox {
	position: relative;
	display: table;
	width: 100%;
	table-layout: fixed;
   	border-radius: 8px;
   	border: 1px solid #cfcfcf;
   	margin-bottom: 24px;
   	box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
#member #inbox>div {
	display: table-cell;
}
#member #inbox #senders>div {
	padding:16px 8px;
	cursor:pointer;
}
#member #inbox #senders>div:hover {
	background-color:#f0f2f2;
}
#member #inbox #senders>div.active {
	background-color:#e3f9f9;
}
#member #inbox #senders>div.active:hover {
	background-color:#e3f9f9;
}
#member #inbox #messages {
	padding:16px 8px;
}
#member #inbox>div:nth-of-type(1) {
   	border-right: 1px solid #cfcfcf;
	width:128px;
	text-align:center;
}
#member #inbox div span{
   	display: inline-block;
    	position: relative;
    	line-height: 12px;
}
#member #inbox .icon img{
	width: 64px;
	height: 64px;
	vertical-align: middle;
	border: none;
	border-radius: 50%;
    	box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 10%);
}
#member #inbox .icon span {
    	display: flex;
    	align-items: center;
    	justify-content: center;
	width: 62px;
	height: 62px;
	vertical-align: middle;
	border: 1px solid #666;
	border-radius: 40px;
	background-color: #fff;
	margin: 0;
    	box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 10%);
}
#member #inbox .icon span b {
    	font-size: 36px;
    	color: #666;
}
#member #inbox .memid b {
    	font-size: 16px;
    	word-break: break-word;
}
#member #inbox #messages {
	padding:16px 16px 16px 8px;
}
#member #inbox #messages li{
    	display: table;
}
#member #inbox #messages li>div{
    	display: table-cell;
    	padding: 0 0 0 16px;
}
#member #inbox #messages li>div i{
    	font-size:14px
}
#member #inbox #messages li>div p{
    	margin: 16px 0 32px -64px;
    	border-radius: 24px;
    	padding: 24px;
    	background-color: #f2fad8;
    	word-break: break-word;
}
#member #inbox #messages li>div p.inbox{
    	background-color: #f0f2f2;
}

#member #inbox #messages li .icon img{
	width: 40px;
	height: 40px;
	cursor: pointer;
}
#member #inbox #messages li .icon span {
    	display: flex;
	width: 38px;
	height: 38px;
	cursor: pointer;
}
#member #inbox #messages li .icon span b {
    	font-size: 20px;
}
#member #inbox #messages #post {
    	display:block;
}
/* vmboards */
#vmboards {
    	padding:0 8px;
}
#vmboards #messages {
	width:98%;
}
#main #vmboards #messages .pagenav {
    	background-color: #fff;
	border:none;
}
#main #vmboards #messages #post {
    	display:block;
    	padding: 0 0 16px 0;
}
#main #vmboards #messages #post .error, #main #vmboards #messages #reply .error{
    	margin-left: 16px !important;
    	color: red;
}
#vmboards .preview {
    	/*display:none;*/
	border:none;
}
#vmboards .preview li{
    	display: none;
    	position: relative;
    	margin-right: 18px;
    	padding: 6px 8px !important;
    	float: left;
}
#vmboards .preview li.active{
    	display: list-item;
}
#vmboards .preview li>div{
    	display: flex;
   	align-items: center;
    	justify-content: center;
    	margin: 0;
    	width: 64px;
    	height: 64px;
    	border-radius: 8px;
    	border: 1px solid #cfcfcf;
    	overflow: hidden;
}
#vmboards .preview li img{
    	width: 100%;
    	height: auto;
    	border-radius: 0;
}
#vmboards .preview li img.landscape{
    	height: 100%;
    	width: auto;
}
#vmboards .preview li span.remove{
    	position: absolute;
    	border-radius: 50%;
    	background-color: #fff;
    	width: 16px;
    	height: 16px;
    	padding: 4px;
    	top: 2px;
    	left: 54px;
    	box-shadow: 1px -1px 3px 0 rgb(0 0 0 / 20%);
	cursor:pointer; 
}
#vmboards form .upload {
	display:none;
}
#vmboards .attach {
	cursor:pointer;
}

/* calendar */

#calendar-container  {
  	position: relative;
	width:100%;
    	background-color: #ebedeb;
    	padding: 1px 0 16px 0;
}
#calendar-container p{
	padding:0 32px;
	font-size:22px;
}
#calendar-container p br{
    	content: "A" !important;
	margin-bottom: 10px !important;
    	display: block !important;
}

#calendar-container h1 {
	float:none;
	display:table;
	width: 90%;
	margin: 0 auto 16px auto;
	font-size: 28px !important;
	font-weight: bold  !important;
}
#calendar-container h1 span{
	display:table-cell;
}
#calendar-container h1 span:nth-of-type(2){
	text-align:center;
}
#calendar-container h1 span:nth-of-type(3){
	text-align:right;
}

#calendar {
	position: relative;
	width:calc(100% - 60px);
	margin:0 auto;
}
#calendar ul {
	position: relative;
	width: calc(100% - 24px);
	overflow: hidden;
	padding: 0 12px 32px 12px;
}
#calendar ul li {
	position: relative;
	float:left;
	font-size: 1.1vw;
	background-color: #fff;
	color: #3e4e63;
	width: calc(14.2% - 16px);
	margin:8px;
	text-align:center;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
	/*aspect-ratio: 9/21;*/
	padding-top:31%;
	box-shadow: 0 20px 30px 0 rgb(0 0 0 / 32%);
    	border: none;
}
#calendar ul li div{
	position: absolute;
    	background-color: #fff;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#calendar ul li > div > span {
	display:block;
	padding: 0 2px;
}
#calendar ul li > div > span a {
	font-weight: bold  !important;
}
#calendar ul li > div > span i {
	font-size: .9vw;
	font-style:normal;
}
#calendar ul li > div > span i a {
	font-weight: normal !important;
}
#calendar ul li > div > span:nth-of-type(1) {
	margin-top:6px;
}
#calendar ul li > div > span:nth-of-type(2) {
	position: absolute;
	width: 100%;
	bottom: 0;
	background-color: #333;
	color: #fff;
}
#calendar ul li div img {
    	width: 100%;
    	aspect-ratio: 9/13;
}
@media screen and (min-width: 1901px) { 
	#sidebar {
		margin-left:1520px;
		width: 364px !important;
	}
}
@media screen and (max-width: 1900px) { 
	#header-container, #content, #footer-container {
		width:100%;
	}
	
}
@media screen and (max-width: 1536px) {
	#ebook-nav, #comic-nav  {
		width:100%;
	}
	#ebook-nav ul, #comic-nav ul {
		font-size: 1.7vw;
    		margin: 16px 2px 0 8px;
    		padding: 16px 2px 0 16px;
    	}
	#book-content, #book-empty, #member-login, #book-container #book-page {
    		padding: 64px 100px;
	}
	
}
@media screen and (max-width: 1366px) {
	.gap {
		width: 24%;
		min-width: 24%;
	}
	.user{
		width: 8%;
		min-width: 8%;
	}
	#account-nav  {
		width:33%;
	}
	#sidebar #donate div:nth-of-type(1){
		/*
    		font-size: 2.2vw !important;
		line-height: 2.8vw !important;
		*/
	}
	#sidebar>div div:nth-of-type(2) {
		/*
    		font-size: 2.2vw !important;
		line-height: 2.4vw !important;
		padding: 1vw !important;
		*/
    		font-size: 20px !important;
    		padding: 8px !important;
	}
	#comments .post h2 {
	    	margin: 4px 0 0 16px;
	}
	#comments .post .header ul {
	    	bottom: -4px;
	}
	#sidebar .label {
	    	padding: 4px;
	    	font-size: 15px;
	}
	#book-content, #book-empty, #member-login, #book-container #book-page {
    		padding: 64px 80px;
	}
	#books #alpha div:nth-of-type(1){
		display:none;
	}
	#books #alpha div:nth-of-type(2){
		display:block;
	}
	#books #list li{
	    	width: calc(33% - 54px);
		padding: 2px 0 8px 54px;
	}

}
@media screen and (max-width: 1280px) {
	#book-container #canvas #pages {
		width:100% !important;
	}
	#books .icons .tag{
		display:none !important;
	}
	#book-content .cover, #book-container .cover{
	    	max-width:80%;
	}
	#register-form {
		width: 100%;
		box-shadow: none;
	}
	#calendar ul li {
		width: calc(20% - 16px);
		font-size: 1.5vw;
		padding-top: 42%;
	}
	#calendar ul li > div > span i {
		font-size: 1.3vw;
	}
}
@media screen and (max-width: 1180px) {
	.gap {
		width: 20%;
		min-width: 20%;
	}
	.user{
		width: 10%;
		min-width: 10%;
	}
	#logo img {
		width:160px;
	}
	#container #main #newbooks .cover {
    		margin: 12px .50%;
	}
	#container #left #memlist img.cover {
		width:30%;
	}
	#member #account-info li {
	    	width: 50%;
	}
}
@media screen and (max-width: 1024px) {
	#header {
		font-size:14px;
	}
	#logo img {
    		width: 140px;
	}
	.gap {
		width: 15%;
		min-width: 15%;
	}
	.menu{
		width: 9%;
		min-width: 9%;
	}
	#login span{
	    	padding-right: 10%;
	}
	#register span{
	    	padding-left: 10%;
	}
	#register-nav  {
		width:98%;
	}
	#search img {
	    margin-left:0;
	}
	#book-content, #book-empty, #member-login, #book-container #book-page {
    		padding: 64px;
	}
	#main .pagenav.top #contents #ml {
    		max-width: calc(100% - 110px);
    		margin-left: -110%;
	}
	#member #account-info #info>div {
	    	display: block;
	   	width: 100%;
	}
	#member #account-info #info span {
	    	display: inline;
	}
	#books #list li{
	    	width: calc(50% - 54px);
	}
	#calendar-container h1 {
		font-size: 22px !important;
	}
	#calendar-container p{
		padding:0 16px;
		font-size:18px;
	}
	#calendar-container p br{
	    	content: "A" !important;
		margin-bottom: 8px !important;
	    	display: block !important;
	}
	#calendar {
	    	width: calc(100% - 24px);
	}
	#calendar ul li {
    		border-top-left-radius: 6px;
    		border-top-right-radius: 6px;
	}
}
@media screen and (max-width: 912px) { /* no left */
	#left {
   		width: 0 !important;
		display:none !important;
	}
	#container {	
    		width: 75% !important;
	}
	#main {
   		 width: 100% !important;
	}
	#sidebar {
    		width: calc(25% - 16px)!important;
    		margin-left: 75% !important; 
	}
	#container #main #newbooks .cover {
    		height: calc(14vw * .95);
    	}
}
@media screen and (max-width: 820px) {  /* hamburger*/
	#menu-mobile {
  		display: block;
	}
	.gap {
		width: 2%;
		min-width: 2%;
	}
	.user{
		width: 11%;
		min-width: 11%;
	}
	.menu span {
    		display: none;
	}
	#menu {
    		display: table-cell;
	}
	#newbooks p a:nth-of-type(n+4) {
		display:none;
	}
	#container #main #newbooks .cover {
    		width: 28%;
    		height: calc(28vw * .95);
	}
	#sidebar #donate div:nth-of-type(1) {
		font-size: 20px;
	}
	body.books #container, body.vmembers #container {	
    		width: 100% !important;
	}
	body.books #sidebar, body.vmembers #sidebar {
		display:none !important;
	}
	#member #account-info li {
	    	width: 100%;
	}
	#member #account-info .profile {
		padding: 0 !important;;
	    	width: 100%;
	}
	#books h1 {
    		font-size: 24px !important;
	}
	#calendar ul li {
		width: calc(33.3% - 16px);
		font-size: 2.2vw;
		padding-top: 67%;
	}
	#calendar ul li > div > span i {
		font-size: 2vw;
	}
	#calendar-container h1 {
    		font-size: 20px !important;
	}
}
@media screen and (max-width: 768px) {
	#menu-mobile .menu a {
		line-height: 64px;
    		font-size: 20px;
	}
	#menu-mobile .menu li.label img:nth-of-type(2) {
    		right: 24px;
    		width: 16px;
    	}
	#menu-mobile .sub-menu > li a {
	    	font-size: 24px;
	    	line-height: 48px;
	}
	#account-nav {
    		width: 50%;
	}
	#books > li div {
		display:block;
		text-align:center;
	}
	#books > li div:first-of-type{
		width:100%;
	}
	#books > li div:first-of-type img {
	    	width: 80%;
		max-width: 275px;
    		margin-top: 16px;
	}
	#books > li div p.limit, #books > li div p.all {
		text-align:left;
		padding:0 12px
	}
	#books #bio {
		text-align: left;
	}
	#main ul.add li {
    		display: inline-block;
	    	float:none;
	}
}
@media screen and (max-width: 658px) { /* main only - top 64px*/
	.nav-btn {	
    		top: 18px;
    		left: 18px;
	}
	.user {
    		width: 16%;
    		min-width: 16%;
	}
	.menu {
   		width: 6%;
    		min-width: 6%;
	}
	#menu-mobile .menu, #header .nav {
		top: 64px;
	}
	#header, #header-container, .menu, .user  {
		height:64px;
	}
	#logo img {
    		width: 120px;
	}
	.user span {
		padding:0;
	}
	.user span.icon {
    		height: 40px;
	}
	#account {
  		line-height: 8px;
		font-size:14px;
	}
	#account img {
    		width: 40px;
    		height: 40px;
	}
	#login-nav .popup, #register-nav .popup {
    		right: 32px;
	}
	#login-nav {
    		width: 92%;
	    	right: 0;
    		padding: 24px 4% 2% 4%;
	}
	#register-nav {
    		width: 100%;
    		right: 0;
	}
	#register-nav div {
		float: none;
		width: 100%;
	}
	#register-nav select {
    		width: 93%;
	}
	#login-form {
	    	width: calc(100% - 64px);
	    	box-shadow: none;
	}
	#register-form {
	    	width: 100%;
	    	box-shadow: none;
	}
	#register-form div {
		float: none;
		width: 100%;
	}
	#register-nav .bttn, #register-form .bttn {
		width:96%;
		margin:0;
	}
	#book-content, #book-empty, #member-login {
		margin-top: 0;
		min-height: 1200px;
	}
	
	#search-nav {
    		height: 60px;
	}
	#search-nav input {
    		height: 58px;
    		width: calc(100% - 50px);
    		padding: 0 0 0 48px;
		
	}
	#search-nav img.search {
    		right: 16px;
	}
	#search-nav img.close {
    		left: 16px;
	}
	.arrow, .green {
    		width: 18px;
	}
	
	#box-container {
    		min-width: 100%;
	}
	#box-container #meminfo p {
		float: none; 
    		width: 100%;
	}
	#box-container #meminfo h3 {
    		margin-top: 0;
	}
	#online, #newmem, #sidebar, h6 {
		display:none !important;
	}
	#container {
		width:100% !important;
	}
	#newbooks >div:nth-of-type(2) {
		display:none;
	}
	#newbooks p a:nth-of-type(n+3) {
		display:none;
	}
	#container #main #newbooks .cover {
    		width: 45%;
    		height: calc(45vw * 1.25);
	}
	#comments .post .header{
		height:150px;
	}
	#comments .post .header div:first-of-type {
		display:none;
	}
	#main .post>ul {
	    	margin: 0 8px 0 0;
	}
	#main .post li>div {
		display: block;
	}
	#main .comment div {
    		padding: 16px 0 0 16px;
	}
	#main .reply {
		margin-left: 48px;
	}
	#post.replyto {
    		padding: 0 16px 16px 16px;
	}
	#reply.replyto {
    		padding: 0 16px 16px 0;
	}
	#book-content, #book-empty, #member-login, #book-container #book-page {
    		padding: 48px;
	}
	#main #books.title .pagenav.top {
		width: calc(100% - 4px);
		margin-left: 0;
		margin-bottom: 500px;
	}
	#main .pagenav button img {
	    	width: 24px;
	    	height: 24px;
	}
	#main #books.canvas .pagenav.top {
		width: 100%;
		margin-left: 0;
	} 
	.user span {
    		line-height: 16px;
	}
	#books #list li{
	    	font-size:12px;
	}
	#books #list li span {
    		width: 24px;
    		height: 24px;
	}
	#calendar ul li {
		width: calc(50% - 24px);
		margin: 12px;
		font-size: 4vw;
	}
	#calendar ul li > div > span i {
		font-size: 3.8vw;
	}
}
@media screen and (max-width: 480px) { 
	#logo img {
    		width: 24px;
	}
	#logo .mo {
		display:block;
	}
	#logo .pc {
		display:none;
	}
	.nav-btn {	
    		left: 16px;
		width: 8%;
	}
	.nav-btn span {
    		margin-bottom: 9px;
	}
	#menu-open:checked ~ .nav-btn span {
   		 margin-top: -11px;
	}
	#register-nav section:nth-of-type(2) {
  		padding: 24px 0 40px 24px;
	}
	#register-nav .bttn {
    		width: 94%; 
   		margin: 0;
	}
	#account-nav {
    		width: 100%;
    		right: 0;
	}
	#box-container #meminfo h3 {
    		font-size: 18px;
	}
	#box-container #meminfo #signin {
    		padding: 0px 12px 32px 12px;
	}
	#comments .post h2 {
		font-size: 24px;
		line-height: 24px;
	}
	#comments .post h2 span {
	    	font-size: 16px;
	}
	#comments .post h2 span a:first-of-type {
    		font-size: 20px;
	}
	#comments .post .header {
		height: 120px;
	}
	#comments .post .header li span {
		width: 32px;
		height: 32px;
	}
	#comments .post .header ul li {
	    	margin-right: 8px;
	}
	
	#footer-container ul li{
	    	width: 46%;
	}
	#footer-container ul li.contact{
	    	clear:left;
	}
	#totop, #se {
		width: 40px;
		height:40px;
	}
	#main h1 {
	    font-size: 24px;
	}
	#main .post .reply-to {
		padding: 16px 0 0 8px;
	}
	#post textarea, #reply textarea {
    		width: calc(100% - 24px);
	}
	#reply {
    		padding: 0 8px 16px 0;
	}
	#calendar-container h1 {
    		font-size: 18px !important;
	}
}
@media screen and (max-width: 360px) { 
	#box-container #icons button {
    		margin: 16px 16px;
	}
	#menu-mobile .menu, #header .nav {
		top: 48px;
	}
	#header, #header-container, .menu, .user  {
		height:48px;
	}
	.nav-btn {	
		top: 12px;
    		left: 18px;
	}
	#logo {
		width: 13%;
    		min-width: 13%;
	}
	.menu {
		width: 5%;
    		min-width: 5%;
	}
	.user {
    		width: 20%;
    		min-width: 20%;
	}
	#logo img {
	}
	#login svg {
    		width: 32px;
	}
	.user span.icon {
    		height: 32px;
	}
	#search svg {
    		width: 26px;
	}
	#account img {
		width: 32px;
    		height: 32px;
	}
	#register-nav section:nth-of-type(1) div, #register-form section:nth-of-type(1) div{
		font-size:20px;
	}
	#register-nav section:nth-of-type(2) {
    		padding: 24px 0 40px 8px;
	}
	#register-nav select {
	    	width: 96%;
	}
	#register-nav .bttn {
    		width: 97%;
	}
	#login-nav {
    		width: 96%;	
    		padding: 24px 2% 2% 2%;
	}
	login-nav input {
    		width: 93%;
	}
	#login-nav .popup, #register-nav .popup {
    		right: 16px;
	}
	#login-nav .forgot {
    		text-align: center;
	}	
	.click {
    		display: inline-block;
	}
	#register-nav section:nth-of-type(2) i{
    		display: none;
	}
	#search-nav img {
    		width: 24px;
	}
	#search-nav img.search {
    		right: 8px;
	}
	#search-nav img.close {
    		left: 8px;
	}
	#search-nav input {
    		width: calc(100% - 34px);
    		padding: 0 0 0 32px;
    		border-radius: 12px;
	}
	#comments .post .header ul {
    		/*display: none;*/
	}
	#comments .post .header {
	    	height: 100px;
	}
	#main h1 {
    		font-size: 28px;
	}
	#main .post .reply-to {
		margin-top: 16px;
	}
	#post.replyto {
    		padding: 0 8px 16px 0;
	}
	#main .post #post textarea {
    		width: 98%;
    		min-height: 54px;
	}
	#footer {
		font-size: 12px;
	}
	#book-page, #book-page p, #book-page ul, #book-page blockquote, #main .credit {
    		font-size: 20px !important;
	}
	#main #books.title .pagenav.top {
    		width: 100%;
 		margin-left: -2px;
	}
	#main .pagenav button img {
    		width: 20px;
    		height: 20px;
	}
	#main .pagenav button.contents img {
    		width: 16px;
    		height: 16px;
	}
	#main .pagenav .contents {
    		margin: 64px 0 0 24px;
	}
	#book-content, #book-empty, #member-login, #book-container #book-page {
    		padding: 36px;
	}
	#book-page .t2 {
	    	text-indent:32px;
	    	margin-top: 8px;
	    	margin-bottom: 8px;
	}
	#main #books .cat {
    		padding: 7px 10px 5px 10px;
    		transition: .3s;
    		cursor: pointer;
    		font-size: 8px;
	}
	#main #books .cat a {
    		font-size: 16px;
	}
	#books .icons .add {
	    	display:none;
	}
	#main .pagenav.top #contents #ml {
    		max-width: 80%;
    		padding: 0 16px 0 60px;
    		margin-left: -120%;
    		font-size: 20px;
	}
	#books #alpha div:nth-of-type(2) span {
    		width: 40px;
	}
	#books #list li{
	    	width: calc(100% - 64px);
		padding: 2px 0 8px 64px;
		font-size:16px;
	}
	#books #list li span{
    		padding-top: 2px;
	}
	#calendar-container h1 {
    		display:none;
	}
}
@media screen and (max-width: 240px) { 
	button {
    		padding: 8px 12px;
	}
	#menu-mobile .menu, #header .nav {
		top: 36px;
	}
	#header, #header-container, .menu, .user  {
		height:36px;
	}
	.nav-btn {
    		top: 8px;
    		left: 16px;
	}
	.nav-btn span {
    		margin-bottom: 5px;
	}
	#menu-open:checked ~ .nav-btn span {
    		margin-top: -7px;
	}
	#menu-open:checked ~ .nav-btn span:first-child {
    		margin-top: 8px;
    	}
	#menu-mobile .menu li img:nth-of-type(1) {
    		display:none;
	}
	#menu-mobile .menu a {
	    	/*line-height: 32px;*/
	    	font-size: 16px;
    		padding-left: 16px;
	}
	#menu-mobile .sub-menu {
    		padding: 8px 0 8px 0;
	}
	#menu-mobile .sub-menu > li {
    		padding-left: 12vw;
	}
	#menu-mobile .sub-menu > li a {
	    	font-size: 16px;
	    	line-height: 28px;
	}
	#logo img {
    		width: 20px;
	}
	.user span{
    		line-height: 24px;
	}
	.user span.icon {
    		height: 44px;
	}
	.arrow, .green {
    		width: 12px;
	}
	#login svg {
    		width: 28px;
    		height: 28px;
	}
	#login-nav {
    		padding: 12px 2% 2% 2%;
	}
	#login-nav input {
    		width: 92%;
    	}
	#login-nav .popup, #register-nav .popup {
    		right: 4px;
	}
	#register-nav section:nth-of-type(2) {
    		padding: 12px 0 40px 8px;
	}
	#login-nav span, #register-nav span {
    		margin-top: 4px;
	}
	#login-nav input, #register-nav input, #register-nav select {
    		height: 32px;
	}
	#login-nav input[type="checkbox"] {
		width:24px;
	}
	#login-nav button, #register-nav button {
    		font-size: 18px;
	}
	#account img {
	    	width: 24px;
	    	height: 24px;
    		margin-top: 4px;
	}
	#account i {
		display:none;
	}
	#account-nav  {
		font-size: 20px;
	}
	#account-nav ul li img {
    		width: 24px;	
    		margin: -1px 4px 0 0;
	}
	#search svg {
		width: 24px;
		height: 24px;
	}
	#search-nav {
    		height: 32px;
	}
	#search-nav input {
	   	height: 30px;
    		border-radius: 8px;
	}
	#search-nav img {
    		top: 9px;
	}
	#container #main #newbooks {
	    	padding: 0 10px;
	    	font-size: 16px;
	}
	#main h1 {
    		font-size:24px;
	}
	#main .reply {
		margin-left: 32px;
	}
	#main .post .reply-to {
    		padding: 16px 0 0 8px;
	}
	#main .post #post textarea {
    		font-size: 16px;
	}
	#comments .post .header ul {
		display: none; 
	}
	#totop, #se {
		width: 32px;
		height:32px;
    		border-radius: 6px;
	}
	#book-page, #book-page p, #book-page ul, #book-page blockquote {
    		font-size: 16px !important;
	}
	#book-content, #book-empty, #member-login, #book-container #book-page {
    		padding: 24px;
	}
	#main .pagenav button img {
    		width: 16px;
    		height: 16px;
	}
	#main #books.title .pagenav.top, #main #books.canvas .pagenav.top  {
    		width: 100%;
		margin-left: -8px;
	}
	#main .pagenav .next img {
    		margin-right: -28px;
	}
	#logo .mo {
   		top: -8px;
	}
	#books #alpha div:nth-of-type(2) span {
	    	width: 32px;
	    	font-size: 14px;
	}
	#books #list li{
	    	width: calc(100% - 32px);
		padding: 2px 0 8px 32px;
		font-size:12px;
	}
	#books #list li span {
    		width: 16px;
    		height: 16px;
    		padding-top: 2px;
	}
}

/* landscape */

@media screen and (max-height: 480px) and (orientation : landscape){ 
	#totop, #se {
		width: 40px;
		height:40px;
	}
}


@media screen and (max-width: 915px) and (max-height: 480px) and (orientation : landscape){ 
	#menu-mobile .menu, #header .nav {
		top: 64px;
	}
	#header, #header-container, .menu, .user  {
		height:64px;
	}
	.menu span {
	    	padding: 4px;
	}
	.user {
    		font-size: 16px;
	}
	.user span.icon {
    		height: 32px;
	}
	#account img {
		width: 32px;
		height: 32px;
	}
	#logo img {
	}
	.arrow, .green {
    		width: 20px;
	}
}
@media screen and (max-width: 820px) and (max-height: 480px) and (orientation : landscape){ 
	.nav-btn {
    		top: 18px;
    		width: 38px;
	}
	
}
@media screen and (min-width: 740px) and (max-height: 360px) and (orientation : landscape){ 
	#menu-mobile .menu, #header .nav {
		top:48px;
	}
	#header, #header-container, .menu, .user  {
		height:48px;
	}
	.nav-btn {
	    	top: 12px;
	}
	.nav-btn span {
    		margin-bottom: 10px;
	}
	#logo img {
    		width: 110px;
	}
	#login svg {
    		width: 38px;
	}
	#search svg {
    		width: 32px;
	}
	.arrow, .green {
    		width: 16px;
	}
	#account {
    		line-height: 4px;
	}
	#account img {
    		width: 28px;
    		height: 28px;
	}
	.user span {
    		/*padding: 2px 0;*/
    		line-height: 16px;
	}
	
	
}
@media screen and (max-width: 740px) and (max-height: 320px) and (orientation : landscape){ 

}
@media screen and (max-height: 240px) and (orientation : landscape){ 
	button {
    		padding: 8px 12px;
	}
	#menu-mobile .menu, #header .nav {
		top: 36px;
	}
	#header, #header-container, .menu, .user  {
		height:36px;
	}
	.nav-btn {
    		top: 8px;
    		left: 16px;
	}
	.nav-btn span {
    		margin-bottom: 5px;
	}
	#menu-open:checked ~ .nav-btn span {
    		margin-top: -7px;
	}
	#menu-open:checked ~ .nav-btn span:first-child {
    		margin-top: 8px;
    	}
	#menu-mobile .menu li img:nth-of-type(1) {
    		display:none;
	}
	#menu-mobile .menu a {
	    	/*line-height: 32px;*/
	    	font-size: 16px;
    		padding-left: 16px;
	}
	#menu-mobile .sub-menu {
    		padding: 8px 0 8px 0;
	}
	#menu-mobile .sub-menu > li {
    		padding-left: 12vw;
	}
	#menu-mobile .sub-menu > li a {
	    	font-size: 16px;
	    	line-height: 28px;
	}
	#logo img {
    		width: 20px;
	}
	.user span {
    		line-height: 12px;
	}
	.arrow, .green {
    		width: 12px;
	}
	#login svg {
    		width: 28px;
		height: 28px;
	}
	#login-nav {
    		padding: 12px 2% 2% 2%;
	}
	#login-nav input {
    		width: 92%;
    	}
	#login-nav .popup, #register-nav .popup {
    		right: 4px;
	}
	#register-nav section:nth-of-type(2) {
    		padding: 12px 0 40px 8px;
	}
	#login-nav span, #register-nav span {
    		margin-top: 4px;
	}
	#login-nav input, #register-nav input, #register-nav select {
    		height: 32px;
	}
	#login-nav button, #register-nav button {
    		font-size: 18px;
	}
	#account img {
	    	width: 24px;
	    	height: 24px;
    		margin-top: 2px;
	}
	#account i {
		display:none;
	}
	#account-nav  {
		font-size: 20px;
	}
	#account-nav ul li img {
    		width: 24px;	
    		margin: -1px 4px 0 0;
	}
	#search svg {
		width: 24px;
		height: 24px;
	}
	#search-nav {
    		height: 32px;
	}
	#search-nav input {
	   	height: 30px;
    		border-radius: 8px;
	}
	#search-nav img {
    		top: 9px;
	}
	#container #main #newbooks {
	    	padding: 0 10px;
	    	font-size: 16px;
	}
	#main h1 {
    		font-size:24px;
	}
	#main .reply {
		margin-left: 32px;
	}
	#main .post .reply-to {
    		padding: 16px 0 0 8px;
	}
	#main .post #post textarea {
    		font-size: 16px;
	}
	#totop, #se {
		width: 32px;
		height:32px;
    		border-radius: 6px;
	}
	
}