#content .framework { margin: 0 auto; width: 1366px; }
#content section { overflow: hidden; margin: 0 auto; width: 100%; }

.content-title { margin-bottom: 10px; }
.content-title ul { overflow: hidden; text-align: center; }
.content-title ul li { position:relative; margin:0 15px 10px; display:inline-block; }
.content-title ul li a { font-weight: 700; font-size: 19px; color: #000; }
.content-title ul li a:hover { color:#aa8a3a; }
.content-title ul li.action:after { position: absolute; margin-top: 3px; width: 100%; height: 1px; background: #fff; display: block; top: 100%; left: 0; content: ''; }
#products >ul >li {margin: 15px 15px;width: calc(50% - 30px);display: flex;flex-direction: column;}
#products ul{
    display: flex;
    flex-wrap: wrap;
    width: 1366px;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}
.asslink{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.asslink a{
    padding: 5px 15px;
    background: black;
    color: #fbfbfb;
    border-radius: 5px;
}
.asslink a:hover{
    background: #70321e;
}

#products li .pbox {position: relative;overflow: hidden;background: no-repeat 50% / cover;}

#products li .pbox:before{
	content:
	"";
	position:
	absolute;
	width:100%;
	height:100%;
	background: linear-gradient(to bottom, rgb(0 0 0 / 37%) 0%,rgba(0,0,0,0) 100%);
	opacity: 1;
	transition: all linear 0.3s;
}
#products li:hover .pbox:before{
    opacity: 0;
}
#products li .pbox img { width:100%; }
#products li .pbox .phover { position:absolute; opacity:0; }
#products li .pbox .phover.B2 { width: 100%; background: rgba(0, 0, 0, 0.51); bottom: 0; left: 0; top: 100%; transition: all cubic-bezier(1, 0.01, 1, 1.07) 0.3s; }
#products li:hover .pbox .phover.B2 {top: calc(100% - 100px); opacity:1;}
#products li .pbox .phover.B2 .pinfo { overflow:hidden;padding: 15px 20px;display: flex;flex-direction: column;}
#products li .pbox .phover.B2 .pinfo h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#products li .pbox .phover.B2 .pinfo h2 a {font-size: 20px;color: #fff;}
#products li .pbox .phover.B2 .pinfo ul li {display: inline-block;color: #a4a3a3;font-size: 12px;}
#products li .pbox .phover.B2 .pinfo ul li a {color: #dfdfdf;font-size: 15px;letter-spacing: 0.06em;}
#products li .pbox .phover.B2 .pinfo ul li a:hover { color:#fff; }
#products li .pbox .phover.B2 .pinfo .pinfo-search {
    justify-content: flex-end;
}
#products li .pbox .phover.B2 .pinfo .p-self-cate-search {color: #a4a3a3;display: flex;justify-content: flex-end;}
#products li .pbox .phover.B3 {width: 100%;height: 100%;/* background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); */transition: all linear 0.3s;bottom: 100%;}
#products li:hover .pbox .phover.B3 { bottom: 0; opacity:1; }
#products li .pbox .phover.B3 a { position: relative; width: 100%; height: 100%; display: block; text-align: center; }
#products li .pbox .phover.B3 a span {
        position: absolute;
        padding: 3px 15px;
        border: 1px solid #fff;
        display: inline-block;
        font-size: 6pt;
        color: #fff;
        top: calc(50% - 15px);
        left: calc(50% - 33px);
        box-shadow: 0 0 0.2em #55555540, 0 0 0.2em #55555540, 0 0 0.2em #55555540;
        text-shadow: 0 0 0.2em #5555557a, 0 0 0.2em #5555557a, 0 0 0.2em #5555557a;
        }
#product-info { color:#696969; }
#product-info .product-info-title { overflow: hidden; margin: 0 5px 30px; }
#product-info .product-info-title h2 , #products.other >h2 { float: left; font-weight: normal; font-size: 22px; }
#product-info .product-info-title h2 img , #products.other >h2 img { margin-right:10px; vertical-align: bottom; }
#product-info .product-info-title h2 a { color: #696969; }
#product-info .product-info-title .back { float: right; }
#product-info .product-info-title .back a { color: #696969; display: inline-block; border: 1px solid #969696; border-radius: 5px; padding: 3px 15px; font-size: 12px; }
#product-info .product-info-title .back a i{ margin-right:5px; }
#product-info #p-album .service-pic{ margin:0 5px; }
#product-info #p-album .service-txt { overflow: hidden; }
#product-info #p-album .service-txt .slider-nav { margin-top: 20px; }
#product-info #p-album #shereBox .slider-nav { width: 100%; }
#product-info #p-album .service-pic .ser-box,
#product-info #p-album .service-txt .ser-box{ background:no-repeat 50% / cover; outline:none; }
#product-info #p-album .service-pic img,
#product-info #p-album .service-txt img{ width:69%; outline:none; }
#product-info #p-album .service-txt .ser-box{ margin:0 5px; }
#product-info #p-album .service-txt .shere { float: left; width: 105px; }
#product-info #p-album .service-txt .shere a{ display:block; color:#616161; text-align:center; margin-top: 35px; }
#product-info #p-album .service-txt .shere a b{ display:block; text-align:center; margin-top: 10px; }
#product-info #p-album .service-txt .shere a img{ width: 35px; animation-name:tada; animation-iteration-count:infinite; animation-duration:1s; }
#product-info #p-info{ overflow:hidden; position:relative;padding: 78px;background: #fafafa;display: flex;margin: 0 7px;margin-bottom: 15px;}
#product-info #p-info .p-detail-part{  width:60%;display: flex;}
#product-info .p-detail{
    width: 90%;
}
#product-info #p-info .p-other-des-part{  width:35%;display: flex;flex-direction: column;justify-content: space-between;}
#product-info #p-info .p-detail li{ border-bottom:1px solid #e0e0e0; overflow:hidden; padding: 15px 0; font-size: 15px; }
#product-info #p-info .p-detail li p{ float:left; color: #838384; width: calc(100% - 120px); }
#product-info #p-info .p-detail li p.p-detail-item{ width:120px; color:#616161; }
#p-album .ganre{
    display: flex;
    position: relative;
    width: 100%;
}
#p-album .ganre ul{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
#p-album .ganre ul li{
	width: calc(50% - 14px);
	display: flex;
	flex-direction: column;
	margin: 7px 7px;
}
#p-album .ganre ul li .ser-box{
    background-size: cover;
    background-position: 50% 50%;
}
.p-other-des-key{ margin-bottom:25px;display: flex;justify-content: flex-end;}
.p-other-des-share{
    display: flex;
    justify-content: flex-end;
    flex: 1;
}
.p-other-des-key li{ display:inline-block; margin-right: 10px; }
.p-other-des-key li a{ display: block; color: #616161; border: 2px solid #d2d2d2; font-size: 16px; padding: 5px 15px; }
.p-other-des-key li a:hover, .p-other-des-contact a:hover{ border: 2px solid #aa8a3a; color: #aa8a3a;	 }
.p-other-des-share a{ display: inline-block; color: #616161; font-size: 17px; margin-right: 10px; }
.p-other-des-share a:hover{ color: #aa8a3a; }
.p-other-des-contact{/* position: absolute; */bottom: 0;right: 0;margin-top: 10px;display: flex;justify-content: flex-end;}
.p-other-des-contact a{ color: #616161; border: 2px solid #d2d2d2; display: inline-block; border-radius: 20px; padding: 10px; width: 250px; text-align: center; line-height: 0; }
.p-other-des-contact a i{ margin-left: 5px; font-size: 19px; vertical-align: middle; }

#p-page{ margin-top: 25px; }
#p-page >ul >li{ float: left; width: calc(48% - 50px); background: #fff; color: #fff; overflow: hidden; padding: 15px 25px; }
#p-page >ul >li:hover{ background: #f3f3f3; }
#p-page >ul >li:last-child{ float:right; text-align:right; }
#p-page >ul >li >p{ display:inline-block; margin-right:-4px; vertical-align: top; }
#p-page >ul >li >p >i{ color: #949494; }
#p-page >ul >li .prenext-p{ display: inline-block; margin-left: 20px; width: calc(100% - 50px); }
#p-page >ul >li:last-child .prenext-p{ margin-left: 0; margin-right: 20px; }
#p-page >ul >li .prenext-p h2 a{ color:#6d6d6d; font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#p-page >ul >li .prenext-p h2 a:hover{ text-decoration:underline; }
#p-page li .prenext-p .p-page-search li{ display:inline-block; color:#c6c6c6; font-size: 12px; }
#p-page >ul >li:last-child .prenext-p h2, #p-page >ul >li:last-child ul{ text-align:right; }

/* products */
#products.other{ margin-top:50px; border-top:1px solid #e0e0e0; padding-top:35px; overflow:hidden; }
#products.other >h2{ float:none; color:#616161; margin-bottom: 20px; }
#products.other li .pbox{ margin:0 5px; outline:none; }
#products.other li,
#products.other li .pbox a{ outline:none; }
#products.other .slick-slider{ margin:0; padding-bottom:30px; }
#products.other .slick-slider .slick-dots{ bottom: 0; }
#products.other .slick-dots li button:before{ color:#616161; }
#p-album .slick-next{ right: 25px; transform: scale(1.5,1.5); z-index: 5; }
#p-album .slick-prev{ left: 25px; transform: scale(1.5,1.5); z-index: 5; }

/* form2 */
#form2 { margin-bottom: 50px; text-align: center; }
#form2 font { margin: 0 10px; display: inline-block; vertical-align: middle; }
#form2 input[type="text"] , #form2 select { padding: 5px; background: rgba(234, 234, 234, .8); border: none; border-radius: 0; display: inline-block; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 16px; color: #000; vertical-align: middle; }
#form2 select { padding: 5px 35px 5px 5px; background: url(/images/35/selectbutton.png) rgba(255, 255, 255, .8) no-repeat 97% 50% / 7px; background-position-x: calc(100% - 10px); }
#form2 a { color: #000; }

@media screen and (min-width: 1280px){
	#products li:hover .pbox{
    -webkit-filter: unset;
}
#products li .pbox {
    -webkit-filter: grayscale(0.6);
}
}
@media screen and (max-width: 1680px) and (min-width: 1025px){
	#product-info #p-album .service-pic img, #product-info #p-album .service-txt img{width: 70%;}
}
@media screen and (max-width: 1440px) and (min-width: 1025px){
	#product-info #p-album .service-pic img{width: 55%;}
}
@media screen and (max-width: 1024px){
	#product-info #p-album .service-pic img{width: 90%;}
} 	
@media screen and (max-width: 1280px) {
	#products li:hover .pbox .phover.B3{ opacity:0; }
	#products li .pbox .phover.B2{top: auto;opacity:1;}
	#content .framework{ width: 90%; }
	#product-info #p-info { margin: 10px; }
}
@media screen and (max-width: 1024px) {
	#products >ul >li, #products >ul >li:nth-child(3n){width: 49%;/* margin-right: 2%; */margin-bottom: 20px;/* margin: 3px; */}
	#products >ul >li:nth-child(2n){margin-right:0;}
	#products >ul >li{margin: 0;padding: 0;vertical-align: top;width: calc(50% - 20px)!important;padding: 10px;}
	.p-other-des-contact a{ width:200px; }
}
@media screen and (max-width: 980px) {
	#product-info #p-info{
	    display: flex;
	    flex-direction: column;
	    padding: 20px;
	    margin: 5px 0;
	}
	#product-info #p-info .p-detail-part{
	    width: 100%;
	}
	#product-info .p-detail{
    width: 100%;
}
	#product-info #p-info .p-other-des-part{
    width: 100%;
    margin-top: 20px;
}
}
@media screen and (max-width: 768px) {
	#product-info #p-info .p-detail-part, #product-info #p-info .p-other-des-part{ width:100%; }
	#product-info #p-info .p-other-des-part{margin: 13px 0;}
	.p-other-des-contact{ position:inherit; text-align:right; }
	#p-page >ul >li{ width: calc(100% - 50px); margin-bottom: 2px; }
	#product-info .product-info-title h2{ float:none; }
	#product-info .product-info-title h2 img, #products.other >h2 img{ vertical-align: baseline; width: 15px; }
	#product-info #p-album .service-txt .shere a img{ width: 25px; }
	#product-info #p-album .service-txt .shere a{ margin-top:24px; }
	.content-title ul li { float: left; width: 33%; margin: 10px auto; }
	#products {/* float: left; */width: 100%;margin-top: 30px;}
	#pagenav { overflow: hidden; margin-top: 54px; text-align: center; float: left; width: 100%; }
	.content-title { margin-bottom: 0px; }
}

@media screen and (max-width: 640px){
	#products >ul >li, #products >ul >li:nth-child(3n), #products >ul >li:nth-child(2n){
		width: 100%!important;
		padding: 5px 0px;
		margin-bottom: 0;
	}
	#mentalBox{
    padding: 5px 5px 5px 5px!important;
    margin:15px!important;
}
    #products li .pbox .phover.B2{
    top: auto;
}
#products >ul >li a.one-clickk{
	    height: 100%;
	    position: absolute;
	    width: 100%;
	    z-index: 98;
	}
	#p-album .ganre ul li{
    width: 100%;
    margin: 6px 0;
}
}
@media screen and (max-width: 480px) {
	#products >ul >li, #products >ul >li:nth-child(3n), #products >ul >li:nth-child(2n){width: 100%!important;margin-right:0;margin-bottom: 10px;margin: 0px;}
	#products li .pbox .phover.B2 .pinfo h2 a{ font-size:12pt; }
	#products li .pbox .phover.B2 .pinfo{padding: 10px 15px;}
	#products li .pbox .phover.B2, #products li:hover .pbox .phover.B2{ top: calc(100% - 69px); }
	#product-info #p-info .p-detail li p{ width: calc(100% - 100px); }
	#product-info #p-info .p-detail li p.p-detail-item{ width: 100px; }
	.p-other-des-contact{ text-align:left; margin-top:20px; }
	.p-other-des-key li a{ font-size: 14px; padding: 3px 15px; }
	#p-page >ul >li .prenext-p h2 a,
	#products.other >h2{ font-size: 12pt; line-height: 110%; }
	#p-page li .prenext-p .p-page-search li{ font-size: 7pt; line-height: 110%; }
	#p-page >ul >li .prenext-p{ width: calc(100% - 44px); }
	#product-info .product-info-title .back a{ padding: 1px 15px; font-size: 9pt; }
	#p-album .slick-next, #p-album .slick-prev{ transform: scale(1,1); }
	#product-info #p-album .service-txt .shere a{ margin-top:36px; }
	#content { font-size: 16px; color: #0a0a0b; padding: 28px 0; }
	#form2 { margin: 20px 5%; text-align: left; }
	#form2 font { margin: 10px; display: block; }
}
@media screen and (max-width: 350px) {
	#product-info #p-album .service-txt .shere a{ margin-top:5px; }
	#product-info #p-album .service-txt .shere a b{ margin-top:2px; font-size:6pt; }
}