#content.productsstyle{ padding:0; margin: auto 20px; }

#pimg { text-align: center; }
#pimg img { max-width: 100%; }

#products{ overflow: hidden; width: 70%; margin: 0 auto; }
#products .photoItem{ background-repeat: no-repeat; float: left; width: calc((100% / 3) - 10px); position: relative; background-position: 50% 30%; background-size: cover; margin-bottom: 26px; margin-right: 7px; display: inline-block; vertical-align: top; }
#products .photoItem .photo{ display: block; }
#products.book1 .photoItem, #products.book3 .photoItem, #products.book4 .photoItem, #products.book5 .photoItem { float: right; }
#products.book1 .photoItem h4, #products.book1 .photoItem p { text-align: left; margin-top: 25px; }
#products .photoItem h4{ width: 100%; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.51); top: 100%; text-align: center; }
#products:hover photoItem h4{ top: calc(100% - 79px); opacity:1; }
#products .photoItem p{ position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; line-height: 170%; background: rgba(0, 0, 0, 0.51); bottom: 0; left: 0; opacity:0; height: 0; }
#products .photoItem:hover h4, #products .photoItem:hover p{ height: 100px; opacity:1; }
#products .photoItem h4 a{ color: #fff; font-size: 18px; }

#products-detail{ text-align: center; }
#products-detail >h4, #products-detail >p{ text-align:center; color:#292826; font-size:20px; font-weight: normal; display:inline-block; margin:0 10px; }
#products-detail >h4 span{ display:block; width:69px; margin:0 auto; height:1px; background:#292826; margin-top: 20px; }
#products-detail .bookdetail{ width:50%; margin:50px auto; }
#products-detail .bookdetail p{ color:#292826; font-size:16px; line-height: 140%; text-align: center; }

.sub-pro-img ul{ text-align:center; margin-top: 20px; }
.sub-pro-img li{ display: inline-block; position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; margin-bottom: 15px; }
.sub-pro-img li .fancyboxs{ border: 1px solid #000; display:block; }
.sub-pro-img li .more{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(25,25,25,0.5); text-align: center;	 opacity: 0; }
.sub-pro-img li:hover .more{ opacity: 1; }
.sub-pro-img li .more .fancybox-button{ display: block; background-repeat:no-repeat; background-image:url(/images/35/index-book-show-more.png); background-position:50% 50%; width: 100%; height: 100%; }

#indexshow{ background:#f8f8f8; padding:72px 0; }
#indexshow h2{ text-align:center; color:#2d2d2d; font-size:14px; }
#indexshow h2 b{ text-align:center; display:block; font-weight:normal; font-size: 30px; margin-top: 20px; }
#indexshow span{ text-align: center; display: block; font-weight: normal; font-size: 18px; margin-top: 35px; color: #8e8e8e; letter-spacing: 0.15em; }

#products{ margin-top: 40px; }
#products{ overflow: hidden; width: 70%; margin: 0 auto; max-width: 100%; }
#products ul.momoJ{ display: flex; flex-wrap: wrap; }
#products >ul >li{ position: relative; width: calc((100% / 4) - 14px); vertical-align: top; float: left; margin-right: 1%; margin-bottom: 30px; display: flex; flex-direction: column; }
#products >ul >li:hover .info{ background: #000000a8; }
#products >ul >li:nth-child(1){ width: 100%!important; }
#products li a { background-position: 50%; background-repeat: no-repeat; background-size: cover; display: block; }
#products li:nth-child(5) a,#products li:nth-child(6) a{ background-position: 50%; background-repeat: no-repeat; background-size: cover; display: block; }
#products li:nth-child(7) a,#products li:nth-child(8) a { background-position: 50% 0%; background-repeat: no-repeat; background-size: cover; display: block; }
#products li .info { position: absolute; width: calc(100% - 40px); padding: 15px 20px; background: rgb(0 0 0 / 24%); color: #fff; left: 0; bottom: 0; }
#products li .info h4 { padding-bottom: 10px; font-size: 20px; text-align: center; }
#products li .info p { overflow: hidden; height: 0; font-size: 14px; text-align: center; }
#products li:hover .info p { padding-top: 10px; height: auto; }

#product-info{ color:#fff; }
#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:#fff; }
#product-info .product-info-title .back{ float:right; }
#product-info .product-info-title .back a{ color: #fff; 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-products .service-pic{ margin:0 5px; }
#product-info #p-products .service-txt { overflow: hidden; }
#product-info #p-products .service-txt .slider-nav { float: left; width: calc(100% - 115px); }
#product-info #p-products #shereBox .slider-nav { width: 100%; }
#product-info #p-products .service-pic .ser-box, #product-info #p-products .service-txt .ser-box{ background-repeat:no-repeat; background-position:50% 50%; background-size:cover; outline:none; }
#product-info #p-products .service-pic img, #product-info #p-products .service-txt img{ width:100%; outline:none; }
#product-info #p-products .service-txt .ser-box{ margin:0 5px; }
#product-info #p-products .service-txt .shere { float: left; width: 105px; }
#product-info #p-products .service-txt .shere a{ display:block; color:#fff; text-align:center; margin-top: 10px; }
#product-info #p-products .service-txt .shere a b{ display:block; text-align:center; margin-top: 10px; }
#product-info #p-products .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; }
#product-info #p-info .p-detail-part{ float:left; width:60%; }
#product-info #p-info .p-other-des-part{ float:right; width:35%; }
#product-info #p-info .p-detail li{ border-bottom:1px solid #2d313e; 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:#fff; }

#product .more{ background: #aa8a3a; width: 120px; border-radius: 5px; padding: 8px 5px; margin: 50px auto 0; }
#product .more a{ color:#fff; display:block; text-align: center; }

#indexshow .more, .contactinfo .more{ background: #aa8a3a; width: 120px; border-radius: 5px; padding: 8px 5px; margin: 100px auto 0; }
#indexshow .more a, .contactinfo .more a{ color:#fff; display:block; text-align: center; }
.content-main h3 { font-size: 26px; font-weight: normal; text-align: center; margin-bottom: 25px; margin-top: 25px; }
.infoDecActive{ height: 0px; }

@media screen and (max-width: 1440px) {
	#products .photoItem h4{ line-height:50px; }
	#products .photoItem:hover h4{ height: 50px; }
	#products >ul >li:nth-child(7n-1), #products >ul >li:nth-child(7n), #products >ul >li:nth-child(7n+8) { width: 33.3%; }
	#products >ul >li:nth-child(41) , #products >ul >li:nth-child(42) , #products >ul >li:nth-child(43){ width: 25%; }
	#products >ul >li{ width: calc((100% / 4) - 0px); margin: 0; margin-bottom: 10px; }
	#products{ width: 1100px; }
}
@media screen and (max-width: 1140px) {
	#products{ overflow: hidden; width: 90%; margin: 0 auto; }
}
@media screen and (max-width: 980px) {
	#products li:hover .info p { padding-top: 0px; height: 0px; }
	#products li.toggleInfo .info p{ padding-top: 10px; height: auto; }
	#products .photoItem{ width: 33.33%; }
	#products-detail .bookdetail{ width:70%; }
	#products li:nth-child(1) a { background-size: auto 100%; }
}
@media screen and (max-width: 780px) {
	#product li, #product li:nth-child(2){ width:100%; margin:0; }
}
@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:25px 0; }
	#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-products .service-txt .shere a img{ width: 25px }
	#product-info #p-products .service-txt .shere a{ margin-top:5px; }
}
@media screen and (min-width: 641px) {
	.pcshow{display: block; margin: auto;}
	.mbshow{display: none;}
}
@media screen and (max-width: 640px) {
	#products .photoItem{ width: 50%; }
	#products-detail .bookdetail{ width:90%; }
	.pcshow{display: none;}
	.mbshow{display: block;}
	#products >ul >li{ width: calc((100% / 2) - 0px); }
	#products >ul >li:nth-child(41), #products >ul >li:nth-child(42), #products >ul >li:nth-child(43){ width: 50%; }
}
@media screen and (max-width: 480px) {
	#products .photoItem{ width: 100%; }
	#products-detail .bookdetail{ width:100%; }
	#products-detail .bookdetail p{ font-size:14px; }
	#products >ul >li,#products >ul >li:nth-child(5), #products >ul >li:nth-child(6), #products >ul >li:nth-child(7), #products >ul >li:nth-child(8){ width: 50%!important; margin-right:0; margin-bottom: 10px; }
	#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); }
	#products.other >h2{ font-size: 12pt; line-height: 110%; }
	#pimg img { max-width: 100%; background-image: url(https://www.mb-design.com.tw/images/35/mobile_ab04.jpg); }
	#products >ul >li:nth-child(5), #products >ul >li:nth-child(6) { margin: 0px 0px 10px; }
}
@media screen and (max-width: 370px) {
	#products { width: calc(100% - 35px); margin: 69px auto; }
}