@import url('/css/pagenav.css');
@import url('/css/community.css');
@import url('/css/animate.css');

.wow {
	animation-duration: 2s;
	animation-name: fadeInUp
}

/* wrap */
.wrap {
	padding: 50px 0 0;
	background-image: url(/images/41/img-bg.jpg);
	background-size: 100%;
	background-color: #fff;
}

/* sub-banner */
#sub-banner {
	overflow: hidden;
	background: no-repeat 50% / auto 100%;
	display: block;
	position: relative;
}

#sub-banner img {
	width: 100%;
	max-width: inherit;
}

/* news,products,products-detail,memberWrap,memberCenter,infoBar */
#news,
#products,
#products-detail,
#artlsit,
#listBox {
	overflow: hidden;
	padding: 10px 10px;
}

#products ul {
	display: flex;
	flex-wrap: wrap;
}

#news ul {
	display: flex;
	flex-direction: column;
}

#news ul li {
	display: flex;
	padding-bottom: 10px;
	border-bottom: rgb(196 196 196 / 26%) 1px solid;
	margin-bottom: 10px;
}

#artlsit ul {
	display: flex;
	flex-direction: column;
}

#artlsit ul li {
	display: flex;
	padding-bottom: 10px;
	border-bottom: rgb(196 196 196 / 26%) 1px solid;
	margin-bottom: 10px;
}

#sbanner {
	display: flex;
	justify-content: flex-end;
	position: relative;
}

#sbanner:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to bottom, #0000004a, #00000000);
	z-index: 2;
	pointer-events: none;
}

#sbanner img {
	height: 390px;
}

/*products*/
#products li,
#products li:hover .mofd,
#products li .photo a {
	transition: all cubic-bezier(0.42, 0, 0, 0.97) .3s;
	-moz-transition: all cubic-bezier(0.42, 0, 0, 0.97) .3s;
	-ms-transition: all cubic-bezier(0.42, 0, 0, 0.97) .3s;
	-o-transition: all cubic-bezier(0.42, 0, 0, 0.97) .3s;
	-webkit-transition: all cubic-bezier(0.42, 0, 0, 0.97) .3s;
}

#products li.wow {
	position: relative;
	width: calc((100% / 3) - 0px);
	vertical-align: top;
	display: flex;
	padding: 0px 20px 50px;
	border-right: #cecece 1px solid;
	margin-bottom: 0;
	flex-direction: column;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#products li a.prommask {
	position: absolute;
	width: 100%;
	height: 100%;
}

#products li.wow:first-child {
	border-left: #cecece 1px solid;
}

#products li .info h3 {
	text-align: center;
	margin: 30px 0 0px;
	max-height: initial;
	overflow: hidden;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

#products li .info h3 a {
	color: #333433;
	transition: all linear 0.3s;
	font-size: max(1.2*(1vw + 1vh) / 2, 16px);
}

#products li .info p {
	text-align: center;
	font-size: max(1*(1vw + 1vh) / 2, 14px);
	color: #a4a4a4;
	text-transform: uppercase;
}

#products li .info p font {
	margin: 0 5px;
	text-decoration: line-through;
	color: #fff;
	background: #9c7556;
	font-size: 12px;
	padding: 3px;
}

/* aside */
aside {
	text-align: center
}

aside h3 {
	padding: 0px 0;
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-weight: lighter;
	font-size: 60px;
	color: #c0c0c0;
	text-transform: uppercase;
}

aside h3 a {
	padding: 0px 0;
	text-align: center;
	font-weight: lighter;
	font-size: 60px;
	color: #9c7556;
	text-transform: uppercase;
}

aside h2 {
	text-align: center
}

aside #sideMenu font {
	color: #fff;
	font-family: 'Playfair Display', serif;
	padding: 0 20px;
}

aside ul li b {
	font-weight: normal;
}

aside ul li span {
	font-size: 12px;
	vertical-align: text-bottom;
	color: #4e4d43;
}

aside ul li ul.submenu {
	margin-top: 10px;
}

aside ul li ul.submenu li {
	overflow: hidden;
	margin-right: 5px;
	height: 21px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	font-size: 16px;
}

aside ul li ul.submenu li ul.lastmenu {
	margin-left: 5px;
}

aside #adWrap .list a {
	margin: 10px 0;
	border: 1px #57abb5 solid;
}

/* content-main */
#content-main {
	width: 91%;
	margin: 0 auto;
	padding-bottom: 20px;
}

#content-main .titleBox {
	position: relative;
	margin: 30px 0 20px;
}

#content-main .titleBox h1 {
	position: relative;
	color: #313131;
	margin-bottom: 0px;
	font-weight: lighter;
	padding-bottom: 15px;
	z-index: 1;
	display: flex;
	justify-content: center;
	font-size: max(2*(1vw + 1vh) / 2, 17px);
	font-weight: 300;
	margin-bottom: 50px;
}

#content-main .titleBox h1:after {
	position: absolute;
	bottom: -50px;
	width: 1px;
	height: 50px;
	background: rgb(52 51 51 / 27%);
	content: "";
}

#content-main #article {
	overflow: hidden;
	margin: 20px 20px 20px;
}

/* sideNav Cate */
#sideNav {
	position: relative;
	padding-top: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#sideNav .ykln .ykln2 {
	margin: 0px;
}

#sideNav .mobnav {
	margin: 0 auto;
	position: relative;
	z-index: 11;
	padding-bottom: 30px;
}

#sideNav h2.sideTitle,
#category-nav>h4,
#contact-nav .sideTitle,
#contact-extra .sideTitle {
	position: relative;
	font-size: 18px;
	color: #333;
}

#sideNav h2.sideTitle i {
	position: absolute;
	display: none;
	top: calc(50% - 9px);
	right: 20px;
}


/* Book: listBox */
#listBox ul {
	overflow: hidden;
}

#listBox ul li {
	overflow: hidden;
	margin: 10px;
	float: left;
	width: calc(25% - 22px);
	background: #fff;
	border: 1px #d3d3d3 solid;
	border-radius: 5px;
	box-shadow: 0 0 5px #c1c1c1;
}

#listBox ul li a.photo img {
	width: 100%;
}

#listBox ul li .info {
	padding: 10px 20px;
}

#listBox ul li .info h3 a {
	height: 25px;
	font-size: 18px;
	color: #000;
	-webkit-line-clamp: 1;
}

#listBox ul li .info p.describe {
	height: 48px;
	color: #a2a2a2;
	-webkit-line-clamp: 2;
}

#listBox ul li .info .cate a,
#listBox ul li .info .cate b {
	color: #000;
}

#listBox ul li .info .cate a i,
#listBox ul li .info .cate b,
#listBox ul li .info .cate b i {
	margin-right: 5px;
}

#listBox ul.bookList a.photo {
	position: relative;
	transition: all linear 0.5s
}

#listBox ul.bookList a.photo:hover {
	transform: scale(1.1);
	filter: grayscale(100%)
}

#listBox ul.bookList a.photo font {
	position: absolute;
	padding: 20px;
	width: calc(100% - 40px);
	background: #79551ab5;
	display: block;
	font-size: 18px;
	color: #fff;
	left: 0;
	bottom: 0;
	transition: all linear 0.5s;
}

#listBox ul.bookList a.photo:hover font {
	background: #000000;
	padding: 30px
}


@media screen and (min-width: 1025px) {
	#sideNav #sideMenu {
		display: none;
	}

	#sideNav .mobnav ul.Cate {
		font-size: 0;
		text-align: center;
		margin-top: 10px;
	}

	#sideNav .mobnav ul.Cate li .ykln {
		display: none;
	}

	#sideNav ul.Cate>li {
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	#sideNav ul.Cate>li:hover {
		overflow: visible
	}



	#sideNav ul.Cate>li:hover a {
		color: #0d0d0d;
	}

	#sideNav ul.Cate>li a i {
		margin-right: 8px;
		width: 10px;
		text-align: center;
	}

	#sideNav #contact-extra ul.Cate>li {
		padding: 10px 20px;
		color: #737373;
	}

	#sideNav ul.Cate li h2,
	#sideNav ul.Cate li p {
		position: relative;
	}

	#sideNav ul.Cate>li a {
		position: relative;
		transition: ease .3s;
		margin-bottom: 15px;
		text-align: center;
		font-size: max(1*(1vw + 1vh) / 2, 15px);
		display: block;
		color: #747474;
		padding: 0px 14px;
		border-bottom: #e7e7e7 1px solid;
		margin: 3px 6px;
	}

	#sideNav ul.Cate>li a:before {
		content: "";
		position: absolute;
		width: 0%;
		height: 1px;
		background: #353535;
		bottom: 0;
		left: 0;
	}

	#sideNav ul.Cate>li.action a:before {
		width: 100%;
	}

	#sideNav ul.Cate>li a:hover:before {
		width: 100%;
	}

	#sideNav ul.Cate>li:first-child a {
		border-left: none
	}

	#sideNav #contact-extra ul.Cate li a {
		padding: 0;
		display: inline-block;
	}

	#sideNav ul.Cate>li.action>h2 a,
	#sideNav ul.Cate>li.action>p a {
		color: #0d0d0d;
	}

	#sideNav ul.Cate li b[data-action="sideOpen"] {
		display: none;
		position: absolute;
		padding: 10px;
		top: 0;
		right: 0;
		color: #fff;
	}

	#sideNav ul.Cate li ul.subUL {
		opacity: 0;
		transition: ease .3s;
		position: absolute;
		left: 0;
		top: 42px;
		min-width: 200px;
		background: #535353;
	}

	#sideNav ul.Cate li ul.subUL {
		opacity: 1
	}

	#sideNav ul.Cate li ul.subUL li {
		border-left: none;
	}

	#sideNav ul.Cate li ul.subUL li a {
		padding: 10px 18px;
	}

	#sideNav ul.Cate>li ul.subUL li .subULHead {
		position: relative;
		min-width: 200px;
		border-left: none;
	}

	#sideNav ul.Cate>li ul.subUL li .subULHead a,
	#sideNav ul.Cate>li ul.subUL li ul.sub2UL a {
		color: #fff;
		border-left: none;
		margin-bottom: 0;
	}

	#sideNav ul.Cate>li ul.subUL li ul.sub2UL {
		background: #ceb59b;
	}

	#sideNav ul.Cate>li ul.subUL li.action ul.sub2UL {
		display: block;
	}
}

@media screen and (max-width: 1440px) {
	#sideNav .mobnav {
		display: block;
		padding-top: 15px;
	}
}

@media screen and (max-width: 1280px) {
	#sideNav ul.Cate>li a {
		padding: 10px 15px 15px;
	}

	#sideNav ul.Cate li ul.subUL {
		top: 67px;
	}
}

@media screen and (max-width: 1180px) {
	#content-main {
		width: 100%
	}

	#sbanner {
		margin-top: 70px
	}

	#pagenav {
		padding-left: 0
	}
}

@media screen and (max-width: 1080px) {
	#listBox ul li {
		width: calc((100% / 3) - 22px);
	}
}

@media screen and (max-width: 1024px) {
	#sub-banner img {
		width: 130%;
	}

	.wrap {
		padding: 0px 0 10px;
	}

	.wrap .workframe {
		overflow: hidden;
		margin: 0 auto;
		width: 90%;
		padding: 35px 0;
	}

	#sub-banner {
		margin-top: 60px;
	}

	#sideNav #sideMenu {
		display: block;
		padding: 10px 15px;
		background: #26923a;
		color: #fff;
		font-size: 16px;
	}

	#sideNav #sideMenu #arrowdown {
		float: right;
		transition: ease .3s;
	}

	#sideNav #sideMenu #arrowdown.active {
		transform: rotate(180deg) translateY(2px);
		margin-top: 5px;
	}

	#sideNav #sideMenu #arrowdown i {
		font-size: 24px;
	}

	#sideNav .mobnav ul.Cate {
		display: none;
	}

	#sideNav ul.Cate>li a i {
		margin-right: 8px;
		width: 10px;
		text-align: center;
	}

	#sideNav #contact-extra ul.Cate>li {
		padding: 10px 20px;
		color: #fff;
	}

	#sideNav ul.Cate li h2,
	#sideNav ul.Cate li p {
		position: relative;
	}

	#sideNav ul.Cate li a {
		padding: 10px 0 10px 20px;
		display: block;
		color: #737373;
	}

	#sideNav #contact-extra ul.Cate li a {
		padding: 0;
		display: inline-block;
	}

	#sideNav ul.Cate li b[data-action="sideOpen"] {
		position: absolute;
		padding: 10px;
		top: 0;
		right: 0;
		color: #9c7556;
		padding-right: 15px;
	}

	#sideNav ul.Cate li ul.subUL {
		padding-left: 10px;
		display: none;
		transition: none;
	}

	#sideNav ul.Cate>li.action ul.subUL {
		display: block;
	}

	#sideNav ul.Cate>li ul.subUL li .subULHead {
		position: relative;
	}

	#sideNav ul.Cate>li ul.subUL li ul.sub2UL {
		padding-left: 10px;
		display: none;
		transition: none;
	}

	#sideNav ul.Cate>li ul.subUL li.action ul.sub2UL {
		display: block;
	}

	#sideNav {
		float: none;
		padding-bottom: 0;
		width: 100%;
		height: auto;
		left: 0;
	}

	#sideNav:before {
		display: none;
	}

	#sideNav h2.sideTitle i {
		display: block;
		transition: all linear 0.3s;
	}

	#sideNav h2.current i {
		-moz-transform: rotate(3.14159rad);
		-webkit-transform: rotate(3.14159rad);
		-o-transform: rotate(3.14159rad);
		-ms-transform: rotate(3.14159rad);
		transform: rotate(3.14159rad);
	}

	#sideNav .mobnav {
		overflow: hidden;
		transition: none;
	}
}

@media screen and (max-width: 880px) {
	#products li.wow {
		width: 44%;
	}
}

@media screen and (max-width: 768px) {
	#sub-banner img {
		width: 150%;
	}

	aside,
	#content-main {
		margin-left: 0;
		width: 100%;
		margin: 30px 0 5px;
	}

	#content-main {
		margin-top: 15px;
	}

	aside #adWrap {
		overflow: hidden;
	}

	aside #adWrap .list {
		float: left;
		margin-right: 1%;
		width: 24%;
	}

	aside #adWrap .list:last-child {
		margin-right: 0;
	}

	aside ul li {
		font-size: 16px;
	}

	aside ul {
		margin: 10px 10px 20px;
		text-align: center;
	}
}

@media screen and (max-width: 680px) {
	#content-main .titleBox .waylink {
		bottom: -63px
	}

	#products li.wow {
		width: 90%;
	}

	#listBox ul li {
		width: calc(50% - 22px);
	}

	#news ul li {
		display: flex;
		flex-direction: column;
	}

	#artlsit ul li {
		display: flex;
		flex-direction: column;
	}
}

@media screen and (max-width: 480px) {
	aside h3 {
		font-size: 40px
	}

	#content-main .titleBox h1 {
		padding: 10px;
	}

	#content-main .titleBox .waylink {}

	#content-main .titleBox .waylink a {
		font-size: 14px;
	}

	#content-main .titleBox .waylink strong {
		font-size: 14px;
	}

	aside #adWrap {
		display: none;
	}

	#listBox ul li {
		margin: 15px auto;
		float: none;
		width: calc(80% - 22px);
	}
}