.colorList {overflow:hidden;margin-top:30px;}
.colorList ul {display:flex;flex-wrap:wrap;padding:2px;}
.colorList ul li {width:100px;position:relative;margin:5px 0 0 5px;height:26px;display:block}
.colorList ul li>span {width:100px;display:block;text-align:left;padding:5px 0;line-height:16px;text-indent:22px;transition:all .3s;font-size:14px;font-weight:bold;}
.colorList ul li>span.txt {color:#333;transition:all .3s;position:relative;z-index:2;}
.colorList ul li>span.bgspan {position:absolute;display:block;left:0;top:50%;margin-top:-8px;width:16px;height:6px;overflow:hidden;z-index:0;transition:all .3s;}
.colorList ul li.hover>span {text-align:center;text-indent:0px;}
.colorList ul li.hover>span.bgspan {top:0;height:26px;width:100px;margin-top:0px;padding:0;}
.colorList .checkedColor {position:relative;display:none;width:100px;height:36px;padding:0;text-align:center;line-height:36px;font-size:14px;}

.mst-menu {padding:10px 0;height:20px;line-height:20px;display:none;position:absolute;z-index:-1000;}
.mst-menu .auto-box {text-align:center;}
.mst-menu span {margin:0 15px;}

.mst-bigTitle {padding:25px 0;background:#f7f8f9;}
.mst-bigTitle .auto-box {text-align:center;}
.mst-bigTitle h2 {font-size:26px;padding-bottom:10px;}

.mst-firstLevel {padding:25px 0;}
.mst-firstLevel ul {overflow:hidden;padding-bottom:1px;}
.mst-firstLevel ul li {width:13%;margin-left:1.5%;float:left;display:inline;padding-bottom:15px;min-width:100px;}
.mst-firstLevel ul li:nth-child(7n+1) {margin-left:0;}
.mst-firstLevel ul li a {text-align:center;display:block;padding:15px 0;line-height:16px;position:relative;}
.mst-firstLevel ul li a:before {content:'';position:absolute;display:block;border:1px solid #fff;border-width:1px 0 0 1px;top:0;bottom:100%;left:0;right:100%;transition:all .3s;}
.mst-firstLevel ul li a:after {content:'';position:absolute;display:block;border:1px solid #666;border-width:0 1px 1px 0;top:100%;bottom:0;left:0;right:0;right:0;transition:all .3s;}
.mst-firstLevel ul li a:hover:before {bottom:0;right:0;border-color:#666;}
.mst-firstLevel ul li a:hover:after {top:0%;}

.mst-firstLevel ul li a.hover:before {bottom:0;right:0;border-color:#666;}
.mst-firstLevel ul li a.hover:after {top:0%;}


.ajax-content {padding-bottom:3%;}
.ajax-content .scroll-box {padding-top:50px;}
.ajax-content .scroll-box .title {font-size:24px;line-height:42px;margin-top:-42px;}
.swiper-container {width:100%;}
.swiper-slide {text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.swiper-button-next, .swiper-button-prev {position:unset;top:0;margin-top:0;}
.swiper-container .buttons {clear:both;overflow:hidden;margin-top:2%;}
.swiper-container .buttons>* {float:right;font-size:26px;width:30px;height:30px;margin-left:20px;}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {color:#999;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {color:#999;}

.swiper-button-prev:hover {color:#000;}
.swiper-button-next:hover {color:#000;}

.searchTitle {padding:3% 0;font-size:20px;line-height:24px;font-weight:bold;}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {display:none;}

.swiper-container .swiper-slide>div {position:relative;transition:all .3s;margin: 2px;}
.swiper-container .swiper-slide .img {width:100%;}
.swiper-container .swiper-slide .img img {display:block;width:100%;filter:brightness(0.95);}
.swiper-container .swiper-slide .txt {/*position:absolute;width:100%;bottom:-40px;*/text-indent:0px;height:40px;line-height:40px;background:#666;color:#fff;transition:all .3s;}

.swiper-container .swiper-slide>div:hover {box-shadow:0 0 1px 2px #F67524;}
.swiper-container .swiper-slide>div.hover {box-shadow:0 0 1px 2px #F67524;}

.swiper-container .swiper-slide>div:hover .txt {/*bottom:0px;*/background:#000;}
.swiper-container .swiper-slide>div.hover .txt {/*bottom:0px;*/background:#000;}

.swiper-container .swiper-slide>div:hover .img img {filter:brightness(1);}
.swiper-container .swiper-slide>div.hover .img img {filter:brightness(1);}

.mst-info  {overflow:hidden;margin-top:0%;position:relative;padding-bottom:3%;}
.mst-info .title {font-size: 22px;font-weight: bold;padding:1% 0;}
.mst-info .close {position:absolute;right:0;width:30px;height:30px;background:rgba(0,0,0,0.4);color:#fff;line-height:30px;text-align:center;}
.mst-info .img {float:left;width:55%;}
.mst-info .img img {display:block;width:100%;}
.mst-info .img>div {position:relative;width:100%;min-height:100px;overflow:hidden;}
.mst-info .img>div>.but {position:absolute;display:block;right:-120px;top:10px;cursor:pointer;width:85px;height:22px;line-height:22px;text-align:center;border-radius:3px;background:#333;color:#eee;transition:all .3s;}
.mst-info .img>div>.but:hover {background:#000;color:#fff;} 
.mst-info .img>div:hover>.but {right:10px;}

.mst-info .txt {float:right;width:40%;padding-bottom:130px;}
.mst-info .txt h3 {font-size:28px;line-height:32px;padding-bottom:10px;}

.mst-info .txt .mainInfoPart {font-size:14px;line-height:28px;margin:20px 0;position:relative;}
.mst-info .txt .mainInfoPart .fav-but {z-index:3;cursor:pointer;width:85px;height:22px;line-height:22px;text-align:center;border-radius:3px;position:absolute;right:8px;top:8px;background:#333;color:#eee;transition:all .3s;}
.mst-info .txt .mainInfoPart .fav-but:hover {background:#000;color:#fff;} 

.mst-info .txt .mainInfoPart>p {overflow:hidden;}
.mst-info .txt .mainInfoPart>p>a {display:inline-block;display:none;border:1px solid #ccc;width:14px;height:14px;line-height:14px;padding:2px;text-align:center;border-radius:100%;margin-left:20px;font-size:12px;margin-top:-3px;}

.mst-info .txt .mainInfoPart>p .price {color:#fe2929;font-weight:bold;}

.mst-info .txt table tr td {padding:3px 0;vertical-align:text-bottom;}
.mst-info .txt table tr td:first-child {font-weight:bold;}
.mst-info .txt table tr td:first-child strong {font-size:1.2em;display:inline-block;line-height:1.8em;margin-top:10px;}
.mst-info .txt img {max-width:100%;width:auto !important;height:auto !important;}

.mst-info .txt>.buts {margin-top:15px;}
.mst-info .txt>.buts>.fav-but {cursor:pointer;width:85px;height:22px;line-height:22px;text-align:center;border-radius:3px;background:#333;color:#eee;transition:all .3s;}
.mst-info .txt>.buts>.fav-but:hover {background:#000;color:#fff;} 


.mst-info .qrCodeBox {position:absolute;top:-75px;right:0;}

.sameCollection {margin-top:20px;}
.sameCollection>.title {font-weight:bold;font-size:18px;line-height:30px;padding-bottom:10px;border-bottom:1px solid #ccc;}
.sameCollection>.list {overflow:hidden;margin-top:15px;}
.sameCollection>.list ul {overflow:hidden;display:flex;flex-wrap:wrap;}
.sameCollection>.list ul li {width:23.5%;margin-left:2%;margin-top:10px;}
.sameCollection>.list ul li:nth-child(4n+1) {margin-left:0;}
.sameCollection>.list ul li a {display:block;position:relative;overflow:hidden;}
.sameCollection>.list ul li img {display:block;width:100%;}
.sameCollection>.list ul li a>span {display:block;position:absolute;bottom:-26px;line-height:20px;overflow:hidden;left:0;right:0;padding:3px;background:rgba(0,0,0,0.4);color:#fff;transition:all .3s;}
.sameCollection>.list ul li a:hover>span {bottom:0;}

.mst-product {margin-top:2%;padding-bottom:2%;}
.mst-product .auto-box .product-box>.title {font-size:22px;font-weight:bold;border-bottom:1px solid #ccc;line-height:50px;}

.materialListTitle {font-size:24px;line-height:42px;}
.materialList {padding-bottom:2%;padding:2px;overflow:hidden;}
.materialList .item {width:23.5%;margin-left:2%;float:left;display:inline;padding-bottom:15px;position:relative;overflow:hidden;}
.materialList .item .fav-but {z-index:3;cursor:pointer;margin-top:-30px;width:78px;height:22px;line-height:22px;text-align:center;border-radius:3px;position:absolute;right:8px;top:8px;background:#333;color:#eee;transition:all .3s;}
.materialList .item .fav-but:hover {background:#000;color:#fff;} 
.materialList .item:hover .fav-but {margin-top:0;}

.materialList .item:nth-child(4n+1) {margin-left:0;}
.materialList .item>a {position:relative;overflow:hidden;display:block;transition:all .3s;}
.materialList .item .img {width:100%;position:relative;}
.materialList .item .img .coverImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;opacity:0;transition:all .3s;z-index:1;}
.materialList .item .img img {display:block;width:100%;filter:brightness(0.95);min-width:160px;min-height:100px;}
.materialList .item .txt {/*position:absolute;width:100%;bottom:-40px;*/padding:5px 8px;height:40px;line-height:20px;background:#666;color:#fff;transition:all .3s;position:relative;}
.materialList .item .txt .price {position:absolute;display:block;right:10px;height:20px;line-height:20px;top:50%;margin-top:-20px;/*background:#666;*/transition:all .3s;color:#ffff00;}
.materialList .item .txt .common-price {margin-top:0;}
.materialList .item>a:hover {box-shadow:0 0 1px 2px #F67524;}
.materialList .item>a.hover {box-shadow:0 0 1px 2px #F67524;}

.materialList .item>a:hover .txt {background:#000;}
.materialList .item>a.hover .txt {background:#000;}

/*.materialList .item>a:hover .txt .price {background:#000;color:#ff0000;}
.materialList .item>a.hover .txt .price {background:#000;color:#ff0000;}*/
.materialList .item:hover .img .coverImg {opacity:1;}

.materialList .item>a:hover .img img {filter:brightness(1);}
.materialList .item>a.hover .img img {filter:brightness(1);}

.priceAndStock {padding:10px 0;margin:15px 0;border-style:solid;border-color:#eee;border-width:1px 0;font-size:14px;line-height:28px;}
.priceAndStock strong {display:inline-block;width:100px;}
.priceAndStock .priceInfo .nums {color:#ff0000;font-weight:bold;}

.needLoginBox {text-align:center;padding:150px 15px;line-height:40px;font-size:28px;color:#666;min-height:calc(100vh - 617px);}
.needLoginBox .links {font-size:14px;margin-top:5%;}
.needLoginBox .links a {display:inline-block;padding:0px 18px;background:#F67524;color:#fff;border-radius:3px;transition:all .3s;}
.needLoginBox .links a:hover {background:#fe2929;}

@media only screen and (max-width:560px)
{
	.mst-firstLevel ul li {width:32%;margin-left:1%;}
	.mst-firstLevel ul li:nth-child(7n+1) {margin-left:1%;}
	.mst-firstLevel ul li:nth-child(3n+1) {margin-left:0;}

	.mst-info .img {float:none;width:100%;}
	.mst-info .txt {float:none;width:100%;margin-top:20px;padding-bottom:10px;}
	.ajax-content .scroll-box .title {font-size:18px;line-height:32px;}
	.mst-info .title {font-size:20px;font-weight:normal;}
	.mst-info .txt h3 {font-size:20px;font-weight:normal;}

	.materialListTitle {font-size:18px;line-height:32px;}

/*	.swiper-container .swiper-slide .txt {position:unset;}
*/

	.mst-info .sameCollection>.list ul li {width:47%;}
	.mst-info .sameCollection>.list ul li:nth-child(2n+1) {margin-left:0;}

	.ajax-content .mst-product {margin-top:6%;}
	.mst-info .scrollTxt {padding-bottom:200px;}
	.mst-info .qrCodeBox {bottom:20px;left:100px;top:unset;right:unset;}
	/*.mst-info .qrCodeBox img {display:block;margin:0 auto;}*/
	.mst-info .qrCodeBox:before {content:'扫码查看此材质';display:block;line-height:28px;font-weight:bold;font-size:14px;}

	.ajax-content .mst-product .auto-box .product-box .title {font-size:14px;}

	.swiper-container .swiper-slide .txt {font-size:14px;}

	.colorList {position:relative;height:36px;overflow:visible;z-index:1;}
	.colorList .checkedColor {display:block;overflow:hidden;position:relative;width:100px;height:36px;padding:0;text-align:center;line-height:36px;font-size:14px;}
	.colorList ul {display:none;padding:5px;background:#fff;border:1px solid #ccc;}
	.colorList ul li {margin:5px 2% 5px 0 !important;width:32%;}
	.colorList ul li:nth-child(3n) {margin-right:0 !important;}
	.colorList ul li>span {text-align:center;text-indent:0px;padding:0 !important;}
	.colorList ul li>span.bgspan {top:0;height:26px;width:100% !important;margin-top:0px !important;}
	.colorList ul li>span.txt {color:inherit;width:100%;text-align:center;line-height:26px;}
	.colorList.hover .checkedColor {overflow:visible;}
	.colorList.hover ul {display:flex;}
}