.page-p-title-name h2 span{display:block;font-size:15px;color:#505050;font-weight:normal}
.page-p-title-name h3{font-weight:normal;font-size:14px;line-height:180%;text-align:right;color:#ababab}
.page-p-title-name{margin-bottom:50px;display:flex;flex-direction:column;align-items:flex-start;width:50%}
.main-article .page-p-title-name .pagetitle{border-bottom:0;margin-bottom:0;color:#000000;font-weight:bold}
#community{margin:50px 0 0}
.page-p-title-name .ask{background:#8c4350;text-align:center;padding:0 30px}
.page-p-title-name .ask a{display:block;text-align:center;color:#fff;height:60px;line-height:60px;font-size:17px;position:relative;display:flex;align-items:center}
.page-p-title-name .ask a b{width:30px;height:30px;background:#ceb094;border-radius:50%;line-height:30px;text-align:center;font-size:12px;transition:all linear .3s;color:#fff;margin-left:10px}
.page-p-title-name .ask a:hover b{transform:scaleX(-1);background:#fff;color:#8c4350}
#describeR{margin:30px 0}
#describe .describe_top{line-height: 100%;font-size:20px;font-weight: 600;border-bottom: 2px #d87d5b solid;margin-bottom: 30px;padding: 15px 0;text-align: center;background: #ededed;}
#describe .pro-list {display: grid;grid-template-columns: repeat(4,1fr);gap: 0px;}
.photo > a {
  display: block;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.photo img { display: none; }
#describe .pro-list{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 30px;overflow: visible;row-gap: 45px;}}
#describe .pro-list >div{width:calc((100%/4) - 13px);vertical-align:top;
  width: auto !important;
  margin: 0 !important;
  display: block !important;}
#describe .pro-list .p-border{margin-bottom:0;}
#describe .pro-list .p-border .photo a,#news li .photo a,#comprehensive .bxslider a,#book .webframe ul li .photo{display:block;background-repeat:no-repeat;background-position: 50 50%;background-size:cover;background-color:rgba(222,216,224,0.41)}
#describe .pro-list .p-border .photo a img,#news li .photo a img,#comprehensive .bxslider a img,#book .webframe ul li .photo a img{width:100%}
#describe .pro-list .p-border .p-info h3{margin:14px 0 3px}
#describe .pro-list .p-border .p-info h3 a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#2e2f35;font-size: 16px;line-height:120%;display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  text-align: center; 
  line-height: 1.4; 
  height: calc(1.4em * 2);
  white-space: normal;}
#describe .pro-list .p-border .p-info .describe{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:#6a717d;height:21px;display:none}
#describe .pro-list .p-border .p-info .price{overflow:hidden;height:21px}
#describe .pro-list .p-border .p-info .price span{float:left;font-size:14px;color:#c34b4b}
#describe .pro-list .p-border .p-info .price span.old{float:right;text-decoration:line-through;color:#a2a2a2;font-size:12px}
#describe .pro-list .p-box,#describe .pro-list >div:hover .p-border .p-info h3 a,#describe .pro-list >div:hover .p-border .p-info .describe{transition:all linear .3s;-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s;-webkit-transition:all linear .3s}

#album{width:100%}
#album li{float:left;width:calc(100% / 3)}
#album .photo{overflow:hidden}
#album .photo a{position:relative;display:block;}
#album .info{position:absolute;width:100%;height:100%;color:#fff}
#album .info h3{font-size:27px;line-height:110%;margin:50px;position:relative;z-index:1;text-shadow:0 0 3px #592543}
#album .info p{line-height:110%;margin:50px;position:absolute;right:0;bottom:0;font-size:18px;z-index:1;text-shadow:0 0 2px #592543}
#album .info span{vertical-align:super;display:inline-block;width:50px;height:1px;background:#fff;margin-right:30px}
#album .photo .pic{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;transition:linear all .6s;background-repeat:no-repeat;background-position:50%}
#album-info{display:-moz-flex;display:-ms-flex;display:-o-flex;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap}
#album-info::after{content:'';flex-grow:999999999;-moz-flex-grow:999999999;-ms-flex-grow:999999999;-o-flex-grow:999999999;-webkit-flex-grow:999999999;min-width:200px;height:0}
#album-info{width:100%}
#album-info .album_box{display: flex;justify-content: center;}

#slider-nav{width:100%}
#slider-nav .album_nav_box{display: flex;flex-direction: column;align-items: center;}
.album_box img{-moz-object-fit:cover;-ms-object-fit:cover;-o-object-fit:cover;-webkit-object-fit:cover;width:430px;aspect-ratio:1/1;object-fit:contain}
.book_photo{display:flex;flex-direction:column;align-items:center;width:45%}
iframe{width:100%;height:487px}
#slider-nav img{width: 100px;aspect-ratio: 1/1;object-fit: contain;}
.topslick{position:relative;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.rightdiv{top:0;position:absolute;right:0;width:50%}

@media screen and (min-width:1025px){
	#album .info:hover:after{opacity:1}
	#album .info:after{position:absolute;width:calc(100% - 30px);height:calc(100% - 30px);left:15px;top:15px;background:rgba(96,37,70,0.73);content:'';display:block;transition:linear all .3s;opacity:0}
	#album .info:before{position:absolute;width:calc(100% - 30px);height:calc(100% - 30px);left:15px;top:15px;background:rgba(220,204,214,0.49);content:'';display:block;transition:linear all .6s;opacity:0}
	#album .info:hover:before{opacity:1;width:100%;height:100%;left:0;top:0}
	#album .photo:hover .pic{transform:scale(1.2)}
	#describe .pro-list >div:hover .p-box{transform:translateY(-5px)}
	#describe .pro-list >div:hover .p-border .p-info h3 a{color:#8c4350}
}
@media screen and (max-width:1366px){
	#album li{width:calc(100% / 3)}
}
@media screen and (max-width:1280px){
	#describe .pro-list >div{width:calc((100%/3) - 13px)}
	.page-p-title-name .ask a{height:50px;line-height:50px}
	.page-p-title-name .ask a b{top:10px}
	.main-article .page-p-title-name .pagetitle{width:100%}
	.page-p-title-name h3{width:100%;text-align:left;line-height:150%}
	#describe .pro-list {grid-template-columns: repeat(4, 1fr);gap: 30px;overflow: visible;row-gap: 45px;}
	#describe .pro-list > div {width: auto !important;margin: 0 !important;display: block !important;}
	#describe .pro-list .p-border .p-info h3 a {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;text-align: center; line-height: 1.4;height: calc(1.4em * 2);   white-space: normal;font-size:12px}
}
@media screen and (max-width:1024px){
	#album .info h3{font-size:22px;margin:40px}
	#album .info p{margin:40px;font-size:15px}
	#describe .pro-list {grid-template-columns: repeat(4, 1fr);gap: 30px;overflow: visible;row-gap: 45px;}
	#describe .pro-list > div {width: auto !important;margin: 0 !important;display: block !important;}
}
@media screen and (max-width:786px){
	.rightdiv{position:unset}
	.topslick{display: flex;flex-direction: column;}
	.book_photo,.page-p-title-name{ width: 100%;}
	.album_box img{width: 300px;}
	#describe .pro-list {grid-template-columns: repeat(2, 1fr);gap: 30px;overflow: visible;row-gap: 45px;}
	#describe .pro-list > div {width: auto !important;margin: 0 !important;display: block !important;}
}
@media screen and (max-width:640px){
}
@media screen and (max-width:480px){
	#album .info h3{font-size:20px;margin:20px}
	#album .info p{margin:20px;font-size:12px}
}
@media screen and (max-width:320px){
	.album_box{width:100%}
}