.p-box{
    background: -webkit-gradient(linear,left top,right top,color-stop(20%,#fff),color-stop(80%,#ffffff));
    background: -webkit-linear-gradient(left,#fff 20%,#ffffff 80%);
    background: linear-gradient(180deg,#ffffff 20%,#ffffff 80%);
}
#prolay .pro-list .p-border:hover .p-info h3,{background-color: #da6da8;background: -webkit-gradient(linear,left top,right top,color-stop(20%,#da6da8),color-stop(80%,#da6da8));background: -webkit-linear-gradient(left,#da6da8 20%,#da6da8 80%);background: linear-gradient(90deg,#da6da8 20%,#fbbebd 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#product{overflow:hidden;position:relative;background-attachment: fixed;}
#prolay .pro-list ul li {
    background: rgba(255, 252, 248, 0.32);
    overflow: hidden;
    margin-right: 0px;
    display: inline-block;
    vertical-align: top;
    width: calc((100%/3) - 5px);
    margin: 5px 0px;
    visibility: visible;
    animation-name: fadeInUp;
}
#product .webframe{position:relative;z-index:3;width: 1366px;}
#product:after{width:100%;height:70%;content:'';display:block;position:absolute;top:0;left:0;z-index:1}
#product .topic .topic-title{color:#fff}
#product .topic b{color: rgba(173, 173, 173, 0.12);}
#prolay{position:relative;z-index:3}
#prolay .slick-list{padding:15px}
#prolay .pro-list .p-border{position:relative;padding: 10px;background:#fff;transition:all linear .2s;}
#prolay .pro-list h4{font-weight: bold;font-size: 10pt;padding: 8px 14px;position: absolute;top: 54%;right: 0%;/* z-index: 3; */max-width: calc(80% - 0px);color: #ffffff;background-color: #da6ea9;transition: all linear .4s;}
#prolay .pro-list .photo{margin: 0px 0 0;background-color:#f9f9f9;background-position:50% 50%;background-repeat:no-repeat;background-size: cover;}
#prolay .pro-list .photo img{width:100%}
#prolay .pro-list a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5}
#prolay .pro-list .p-info{background-color: #f5f5f5;padding: 9px 20px;}
#prolay .pro-list .p-info h2{font-size: 12px;color: #a5a5a5;margin-top: 5px;}
#prolay .pro-list .p-info h3{line-height:130%;font-size: 12pt;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#prolay .pro-list .p-info >span{background:#ff7166;display:block;width:20px;height:1px;margin:20px 0;display: none;}
#prolay .pro-list .p-info .describe{line-height:140%;font-size:11pt;overflow:hidden;height:30pt;display: none;}
#prolay .pro-list .p-info .price{overflow:hidden;margin:10px 0 0;height:22px}
#prolay .pro-list .p-info .price span{float:right;font-size:10pt;color:#565656}
#prolay .pro-list .p-info .price span.old{float:left;text-decoration:line-through}
#prolay .pro-list .p-info h5{margin:0;margin-top: 10px;text-align: right;}
#prolay .pro-list .p-info h5 b{font-size: 10pt;display:inline-block;background: #ffffff;padding: 6px 16px;border-radius:25px;color:#252525;}
#prolay .slick-prev{width:40px;height:40px;left:-50px}
#prolay .slick-next{width:40px;height:40px;right:-50px}
#prolay .slick-prev:before,#prolay .slick-next:before{font-size:40px;color:#3a3f4a}
.same-btn{text-align:center;margin-top: 30px;margin-bottom: 30px;}
.same-btn a{display:inline-block;color: #b5b5b5;font-size:11pt;font-weight:700;padding:15px 45px;border-radius:25px;transition:all linear .2s;border: 1px solid #e8e8e8;}
.same-btn a:hover{opacity:.8}
#prolay .same-btn{margin-top:40px}
#bookList ul{
	overflow:hidden;
	margin: 20px 0;
}
#bookList ul li{
	position: relative;
	float:left;
	width: 30%;
	margin: 10px 1%;
}
#bookList ul li .photo{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	border: 0px solid transparent;
	transition: all ease-in-out 0.3s;
	overflow: hidden;
}

#bookList ul li.product .photo,
#bookList ul li.product:hover .photo{
	border-radius: 0;
	border-color: #f7f7f7;
}
#bookList ul li .photo a{
    display: block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	transition:all ease-in-out 0.2s;
}
#bookList ul li .photo a img{
	display: block;
}
#bookList ul li .info{
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 0px;
	height: 58px;
	position: relative;
	background-color: #351c1b;
}
#bookList ul li .info h3{
	text-align:center;
	font-size: 19px;
	padding: 17px 2px 12px;
	letter-spacing: 2px;
}
#bookList ul li .info h3 a{
	color: #ffffff;
}

.sub-pro-img{
	margin-top:30px;
}

.sub-pro-img{
	width: 42%;
}
.sub-pro-img,
.sub-pro-img div,
.sub-pro-img p,
.sub-pro-img a,
.sub-pro-img img{/* outline:none; */}
.sub-pro-img p{
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
}
.sub-pro-img p img{
	width: 100%;
}
.sub-pro-img .slick-prev{left: 25px;
    z-index: 5;}
.sub-pro-img .slick-next{right: 25px;
    z-index: 5;}
.sub-pro-img .slick-prev:before, 
.sub-pro-img  .slick-next:before{font-size: 30px;text-shadow: 0 0 2px #000;}
#gallery{
	margin:0 auto;
}
#content .content-main .case-example-text{
    padding: 10px 35px;
    line-height: 160%;
}

#products-detail .pInfo h3{
	font-size: 28px;
	font-weight: normal;
	margin: 10px 0;
}
#products-detail .pInfo h2 {
    font-size: 16px;
    font-weight: normal;
    color: #8e8e8e;
}
#products-detail .pInfo article{
	margin: 15px 0;
	line-height: 170%;
}
#products-detail .pInfo .payBox{
	overflow: hidden;
	position: relative;
	padding: 20px;
	border: 1px #3496ae solid;
}
#products-detail .pInfo .payBox p{
	margin: 10px 0;
	font-size: 16px;
}
#products-detail .pInfo .payBox p.price{
	font-size: 18px;
	font-weight: bold;
	color: #de1212;
}
#products-detail .pInfo .payBox p input{
	padding: 5px;
	width: 60px;
	border: 1px #8da6ab solid;
	vertical-align: initial;
	text-align: center;
}
#products-detail .pInfo .payBox img{
	position: absolute;
	right: -50px;
	bottom: -50px;
}
#products-detail .pInfo:hover .payBox img{
	right: 0;
	bottom: 0;
}
#products-detail p.contus a,
#products-detail .pInfo p.buy a{
	padding: 10px;
	width: 144px;
	background: rgb(68, 68, 68);
	display: block;
	font-size: 14px;
	color: #fff;
}

#products-detail{
    float: right;
    width: 50%;
}

#products-detail .pInfo .payBox.priceStyle p span{
    font-size: 18px;
    color: #c82c2c;
}
#products-detail .pInfo .payBox.priceStyle p span b{
    font-size: 30px;
    margin-left: 10px;
}
#products-detail .pInfo .payBox.priceStyle p span.money-sale{
    font-size: 14px;
    color: #727272;
    text-decoration: line-through;
}
#products-detail .pInfo .payBox .aday{
}
#products-detail .pInfo .payBox .aday p{display: inline-block;margin-right: 10px;}
#products-detail .pInfo .payBox .aday p b{
}
#products-detail .pInfo .payBox .aday.add p input{background: #cb3939;color: #fff;display: inline-block;padding: 5px 10px;width: 100px;border-radius: 25px;}
#products-detail .pInfo .payBox .aday.add{margin-top: 10px;}
#products-detail .pInfo .payBox p input{
	padding: 5px;
	width: 60px;
	border: 1px #8da6ab solid;
	vertical-align: initial;
	text-align: center;
}
#products-detail .pInfo .payBox img{
	position: absolute;
	right: 0;
	bottom: 0;
}
#products-detail p.contus a,
#products-detail .pInfo p.buy a{
	padding: 10px;
	width: 144px;
	background: rgb(84, 84, 84);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4baac1', endColorstr='#b0d46b',GradientType=1 );
	display: block;
	font-size: 14px;
	color: #fff;
}
#products-detail p.contus a i,
#products-detail .pInfo p.buy a i{
	margin-left: 50px;
}
#products-detail p.contus a:hover i,
#products-detail .pInfo p.buy a:hover i{
	animation: animatedIcon .5s;
	-webkit-animation: animatedIcon .5s;
	-moz-animation: animatedIcon .5s;
	-ms-animation: animatedIcon .5s;
	-o-animation: animatedIcon .5s;
}
@keyframes animatedIcon{
	0%{ margin-left: 50px;}
	25%{ margin-left: 45px; }
	50%{ margin-left: 50px; }
	75%{ margin-left: 45px; }
	100%{ margin-left: 50px; }
}
@-o-keyframes animatedIcon{
	0%{ margin-left: 50px;}
	25%{ margin-left: 45px; }
	50%{ margin-left: 50px; }
	75%{ margin-left: 45px; }
	100%{ margin-left: 50px; }
}
@-webkit-keyframes animatedIcon{
	0%{ margin-left: 50px;}
	25%{ margin-left: 45px; }
	50%{ margin-left: 50px; }
	75%{ margin-left: 45px; }
	100%{ margin-left: 50px; }
}
@-moz-keyframes animatedIcon{
	0%{ margin-left: 50px;}
	25%{ margin-left: 45px; }
	50%{ margin-left: 50px; }
	75%{ margin-left: 45px; }
	100%{ margin-left: 50px; }
}
@-ms-keyframes animatedIcon{
	0%{ margin-left: 50px;}
	25%{ margin-left: 45px; }
	50%{ margin-left: 50px; }
	75%{ margin-left: 45px; }
	100%{ margin-left: 50px; }
}
.imgshow{
	margin: 20px 0;
}
.prod-art .tabs{
	text-align: center;
}
.prod-art .tabs li{
	padding: 12px 10px;
	border-radius: 5px 5px 0 0;
	border: 1px solid #E0E0E0;
	border-bottom: 0;
	display: inline-block;
}
.prod-art .tabs li a{
	color: #666;
}
.prod-art .tabs li:hover,
.prod-art .tabs li.active{
    background: #1d9686;
	border-color: #7dbe97;
	letter-spacing: 3px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.prod-art .tabs li:hover a,
.prod-art .tabs li.active a{
	color: #fff;
}
.prod-art .tab_container{
	padding: 20px;
}
.otherTit{
	margin: 35px 0 20px;
}
.imgshow{
	overflow:hidden;
	width:47%;
}
.imgshow .slider-for{
	border: 1px solid #eaeaea;
	margin-bottom: 20px;
}
.imgshow .slider li{
	outline:none;
}
.imgshow .slider p{
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size: contain;
	outline:none;
    position: relative;
	background-color: #fff;
}
.imgshow .slider p img{
	width:100%;
	outline:none;
}
.imgshow .slider p img.fixedimg{
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
}
.imgshow .slider-nav p{
	margin:0 5px;
}

@import url('/css/pagenav.css');
@import url('/css/community.css');
#wrap .workframe {overflow: hidden;padding: 20px 0;}
#wrap .workframe #content {float: right;width: calc(100% - 324px);}

/* sub-banner */
#sub-banner { max-height: 20%; }
#sub-banner img { width: 100%; }

/* sideNav */
#sideNav {
	margin-right: 50px;
	width: 265px;
}
#sideNav > div {
	margin-bottom: 25px;
}
#sideNav h2.sideTitle {
	margin-bottom: 15px;
	font-size: 25px;
	color: #909090;
}
#sideNav ul , #faqlist * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#sideNav ul li {
	/* margin: 0 10px; */
	border-bottom: 1px #e9e9e9 solid;
	position: relative;
	margin-bottom: 7px;
	background-color: rgba(237, 237, 237, 0.3);
}
#sideNav ul li ul.subUL li , #sideNav ul li:last-child {border-bottom: 0;background-color: rgb(255, 255, 255);}
#sideNav ul li h3 , #sideNav ul li .subULHead {
	position: relative;
	padding: 0px 0px;
}
#sideNav ul li .subULHead p{
	    font-size: 13px;
	    color: #000;
}

#sideNav ul li a {
	display: block;
	font-size: 15px;
	padding: 10px 13px;
	color: #4d4d4d;
	font-weight: 600;
}
#sideNav ul li:hover >h3  >a{
    background: #ee4388;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#contact-nav ul li a{
		background-color: #fbfbfb;
		padding: 7px 7px;
		color: #37414e;
		display: block;
		width: 100%;
}

#sideNav ul li h3 a span {
    margin-right: 8px;
    color: #351c1b7a;
    font-size: 20px;
    vertical-align: bottom;
}
#sideNav ul li h3 b , #sideNav ul li .subULHead b {
	color: #c2c2c2;
	font-weight: bold;
	font-size: 18px;
	position: absolute;
	right: 17px;
	top: calc(50% - 13px);
	cursor: pointer;
}
#sideNav ul li .subULHead b {
	color: #9e9999;
	font-size: 16px;
}
#sideNav ul li ul {
	/* margin-bottom: 15px; */
	display: none;
}
#sideNav ul li.action >ul {
	display: block;
}
#sideNav ul li ul.subUL li a {
	padding: 8px 18px;
	font-size: 14px;
	color: #5d5d5d;
}
#sideNav ul li ul.subUL li:hover >div >p >a{
    color: #ee4388;
}
#sideNav ul li ul.subUL li ul.sub2UL {


	margin-bottom: 15px;
	padding: 5px;
	background: #f4f4f4;
}
#sideNav #contact-nav ul li a i {
	margin-right: 10px;
}
#sideNav #g-map iframe , #sideNav #youtube iframe { width: 100%; }

/* content */
#content .waylink ol li {


	display: inline-block;
}
#content .waylink ol li a {
	color: #ffffff;
}
#content .waylink ol li:last-child a {
	color: #fde0d8;
}
#content .waylink ol li:last-child:after {
	/* content: ""; */
}
#content h2.pagetitle {
	margin: 10px 0 30px;
	font-size: 36px;
	text-align: center;
	color: #686868;
}
#content ul.articleList , #content #describe , #content .article-info ul , #formBox form p {
	overflow: hidden;
}
#content ul.articleList li {
	position: relative;
	margin: 20px;
	padding: 5px;
	float: left;
	width: calc((100% / 3) - 50px);
}
#content ul.articleList li:before , #content ul.articleList li:after {
	position: absolute;
	width: 30%;
	height: 20%;
	background: #2b7de2;
	content: "";
	z-index: 1;
	left: 0;
	top: 0;
}
#content ul.articleList li:after { left: auto; top: auto; right: 0; bottom: 0; }
#content ul.articleList li > div {
	position: relative;
	padding: 20px;
	background: #fff;
	text-align: right;
	z-index: 2;
}
#content ul.articleList li > div p.cate {
	text-align: right;
}
#content ul.articleList li > div p.cate b {
	margin-right: 5px;
    color: #cc9d0f;
}
#content ul.articleList li > div p.cate b.ncat {
	margin-left: 10px;
}
#content ul.articleList li > div p.cate a {
	color: #848484;
}
#content ul.articleList li > div h3 {
    margin: 10px 0;
    height: 30px;
	text-align: center;
	-webkit-line-clamp: 1;
}
#content ul.articleList li > div h3 a {
	font-size: 18px;
	color: #656565;
}
#content ul.articleList li > div .describe {
	margin-bottom: 15px;
	height: 43px;
    font-size: 12px;
    color: #b3b3b3;
    -webkit-line-clamp: 2;
}
#content ul.articleList li > div a.more {
	margin: 0 25px 10px 0;
}
#content ul.articleList li > div a.more span {
	line-height: 33px;
}
#content ul.articleList li > div a.more i {
	top: 6px;
}
#content .article-info {
	margin-bottom: 20px;
	padding: 20px;
	background: #e8e6e6;
}
#content .article-info ul li {
	float: left;
	width: calc(100% / 3);
	font-size: 16px;
	color: #494747;
}
#content .article-info ul li a {
	font-size: 16px;
	color: #3278ce;
}

/* formBox */
#formBox article , #formBox form p {
	margin: 15px 0;
}
#formBox form p:last-child {
	padding-right: 30px;
	text-align: right;
}
#formBox form p label {
	float: left;
	width: 150px;
	font-size: 16px;
	text-align: right;
}
#formBox form p input , #formBox form p textarea {
	margin-left: 30px;
	padding: 5px 10px;
	width: calc(100% - 200px);
	background: #e7e7e7;
}
#formBox form p input#Checknum {
	width: 100px;
}
#formBox form p label i {
	margin-right: 10px;
    display: inline-block;
    font-size: 18px;
    color: #f00;
}
#order .button {
	text-align: right;
}
#order .button a {
	padding: 5px 20px;
	display: inline-block;
	background: #4a4949;
	color: #fff;
	font-size: 16px;
}
#order .button a.backP {
	margin-left: 20px;
	background: #3e5c9c;

}

#product ul {
	overflow: hidden;
}
#product ul.productList li {
	margin: 10px;
	float: left;
	width: calc(25% - 40px);
}
#product ul.productList li h3 {
	text-align: center;
	-webkit-line-clamp: 1;
	bottom: 0;
	left: 0;
	padding-bottom: 0px;
	height: 27px;
	position: relative;
	background-color: #f1f1f1;
	padding: 7px;
}
#product ul.productList li h3 a {
	font-size: 15px;
	color: #525252;
}
#product ul.productList li p {
	display: block;
	text-align: center;
}
#product ul.productList li p.price {
	height: 30px;
    color: #3f3f3f;
    font-size: 18px;
}
#product ul.productList li p.price span.old {
	margin-right: 10px;
    font-size: 15px;
    text-decoration: line-through;
    color: #858585;
}
#product ul.productList li p.price b {
    font-size: 20px;
    margin: 0 2px 0 10px;
    color: #e42d2d;
}
#product ul.productList li p.price span.old b {
    font-size: 15px;
    font-weight: normal;
    margin: 0;
    color: #858585;
}
a.photo {
    overflow: hidden;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
}
#product .webframe {
    width: 80%;
}
@media screen and (min-width: 1281px) {
	#bookList ul li:hover .photo a{
	}
	#bookList ul li:hover .info p.more{
		display: block;
		margin-top: 30%;
	}
#prolay .pro-list ul li {
    width: calc((100%/4) - 5px);
}
}
@media screen and (min-width: 1280px) {
	#prolay .slick-list{padding:0}
#prolay{width: calc(100% - 0px);margin:0 auto;}
#product .webframe{
    width: 80%;
}
#product {
    overflow: hidden;
    position: relative;
    background-attachment: inherit;
    background-position: 12% 0%;
}
}
@media screen and (min-width: 1025px) {
#prolay .pro-list .p-border:hover{transform:translate(-15px,-15px)}
}
@media screen and (max-width: 1024px) {
	#content ul.articleList li {
		width: calc(50% - 50px);
	}
	#product ul.productList li {
		width: calc(50% - 40px);
	}
#product .webframe {
    position: initial;
}
#prolay {
    position: initial;
}
}
@media screen and (max-width: 980px) {
	#wrap .workframe #content{
		float: none;
		width: 100%;
	}
	#bookList ul li{
		width: 31%;
	}
#products-detail {
    float: none;
    width: 100%;
}
	.sub-pro-img {
    width: 100%;
}
	.wrap .workframe > div {
		float: none;
		width: 100%;
	}
	#sideNav {

		margin-top: 15px;
		margin-right: 0;
		width: 100%;
	}
	#formBox form p label {
		width: 100%;
		text-align: left;
	}
	#formBox form p input , #formBox form p textarea {
		margin-left: 0;
		width: calc(100% - 20px);
	}
#prolay .pro-list ul li {
    width: calc((100%/2) - 5px);
}
}
@media screen and (max-width: 768px) {
	#bookList ul li{
		width: 48%;
	}
	#products-detail .pInfo .payBox.priceStyle{
    width: 100%;
	}
	#products-detail .pInfo .payBox{
    width: calc(100% - 42px);
    margin: 10px 0 0;
	}
	#content .content-wrap{padding-top: 0;}
	.imgshow,
	#product-detail .buyside{
		width:100%;
	}
	.imgshow .slick-prev{
		left: 15px;
		z-index: 2;
		text-shadow: 0 0 2px #505050;
	}
	.imgshow .slick-next{
		right: 15px;
		z-index: 2;
		text-shadow: 0 0 2px #505050;
	}
}
@media screen and (max-width: 480px) {
	#content ul.articleList li {
		width: calc(100% - 50px);
	}
	#content h2.pagetitle {
		font-size: 25px;
	}
	#product ul.productList li {
		width: calc(100% - 40px);
	}
#prolay .pro-list .p-border{padding: 10px;}
#prolay .pro-list ul li {
    width: calc((100%/1) - 5px);
}
}
@media screen and (max-width: 450px) {
	#bookList ul li{
		width: 48%;
	}
#bookList ul li .info {
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 0px;
    height: 47px;
    position: relative;
    background-color: #37414e;
}
}
@media screen and (max-width: 380px){
	#prolay .pro-list ul li {
    width: calc((100%/1) - 5px);
    margin-bottom: -20px;
}
}