/*********************************品牌三级页面开始*******************************/

/*左边*/
.w880 .brand-nav { margin-bottom: -1px; position: relative; z-index: 1; }
.w880 .brand-nav::after { content: ""; display: block; width: 100%; height: 0; clear: both; }
.w880 .brand-nav a { display: block; width: 124.8px; padding: 15px 0; text-align: center; background: #ddd; line-height: 16px; position: relative; float: left; border-right: 1px solid #fff; font-size: 15px; transition: all .2s; }
.w880 .brand-nav a:last-child { border: none; }
.w880 .brand-nav a:after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 7px; border-color: #ddd transparent transparent transparent; position: absolute; left: 61px; top: 39px; transition: all .2s; }
.w880 .brand-nav a:hover { text-decoration: none; background: #fecc01; }
.w880 .brand-nav a:hover:after { top: 46px; border-color: #fecc01 transparent transparent transparent; }
.w880 .brand-nav a.on { background: #fecc01; }
.w880 .brand-nav a.on:after { border-color: #fecc01 transparent transparent transparent; top: 46px; }
.w880 .brand-left { border: 1px solid #ddd; padding: 20px; font-size: 16px; line-height: 36px; }

/*加盟细则*/
.brand-left .jiameng { border-collapse: collapse; color: #2c2b2b; border-top: 1px solid #eeeeee; width: 100%; font: 15px/25px "Microsoft Yahei"; background: #fcfcfc; margin-bottom: 30px; border-bottom: 1px solid #eeeeee; display: inline-flex; flex-wrap: wrap; }
.brand-left .jiameng li { float: left; width: 50%; padding: 12px 0; background: #f5f5f5; border-bottom: 1px solid #eee; }
.brand-left .jiameng i { color: #e71b00; width: 7em; text-align: right; display: inline-block; }

/*产品展示*/
.brand-left .product-list:after { content: ""; display: block; width: 100%; height: 0; clear: both; }
.brand-left .product-list li { width: 200px; float: left; position: relative; margin-bottom: 15px; margin-right: 12px; }
.brand-left .product-list li:nth-child(4n) { margin-right: 0px; }
.brand-left .product-list li .pic { width: 200px; height: 267px; overflow: hidden; }
.brand-left .product-list li .pic img { width: 100%; transition: all .2s; }
.brand-left .product-list li:hover .pic img { transform: scale(1.05); }
.brand-left .product-list li p { position: absolute; width: 100%; bottom: 0; padding: 0px 15px; background: linear-gradient(0deg, #333, transparent); transition: all .2s; line-height: 50px; height: 50px; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block; color: #fff; box-sizing: border-box; }
.brand-left .product-list li p a { color: #fff; }

/*店铺展示*/
.brand-left .shop-list:after { content: ""; display: block; width: 100%; height: 0; clear: both; }
.brand-left .shop-list li { width: 200px; float: left; position: relative; margin-bottom: 15px; margin-right: 12px; }
.brand-left .shop-list li:nth-child(4n) { margin-right: 0px; }
.brand-left .shop-list li .pic { width: 200px; height: 133px; overflow: hidden; }
.brand-left .shop-list li .pic img { width: 100%; transition: all .2s; }
.brand-left .shop-list li:hover .pic img { transform: scale(1.05); }
.brand-left .shop-list li p { position: absolute; width: 100%; bottom: 0; padding: 0px 15px; background: linear-gradient(0deg, #333, transparent); transition: all .2s; line-height: 50px; height: 50px; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block; color: #fff; box-sizing: border-box; }
.brand-left .shop-list li p a { color: #fff; }

/*品牌资讯*/
.brand-left .news-list li:first-child { margin-top: 0px; }
.brand-left .news-list li { overflow: hidden; margin-top: 20px; border-bottom: 1px solid #ddd; }
.brand-left .news-list li .img-out { float: left; width: 240px; height: 275px; overflow: hidden; margin-right: 30px; }
.brand-left .news-list li .img-out img { width: 100%; transition: all 0.2s; }
.brand-left .news-list li:hover img { transform: scale(1.1); }
.brand-left .news-list li .text { padding: 30px; }
.brand-left .news-list li .text h2 { font-size: 20px; line-height: 30px; height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.brand-left .news-list li .text h2 font { display: inline-block; border-radius: 5px; background: #dd001a; color: #ffffff; font-size: 15px; padding: 0px 5px; line-height: 22px; margin-right: 10px; transform: translateY(-1px); }
.brand-left .news-list li .text h2 a:hover { color: #dd001a; }
.brand-left .news-list li .text p { background: #f7f7f7; padding: 15px; font-size: 14px; display: flex; margin: 20px 0; border-radius: 5px; transition: all 0.2s; }
.brand-left .news-list li .text p a { line-height: 24px; height: 48px; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.brand-left .news-list li .img-out + .text { padding: 30px; }
.brand-left .news-list li .img-out + .text p { margin: 32px 0; }
.brand-left .news-list li .img-out + .text p a { height: 72px; -webkit-line-clamp: 3; }
.brand-left .news-list li .text p:hover { background: #f1f1f1; }
.brand-left .news-list li .text p:hover a { color: #333; }
.brand-left .news-list li .keys a { color: #999; margin-right: 15px; }
.brand-left .news-list li .keys a:hover { color: #dd001a; }
.brand-left .news-list li .keys a font { display: inline-block; background: rgba(221, 0, 26, 0.2); width: 16px; height: 16px; line-height: 16px; border-radius: 8px; text-align: center; color: #dd001a; font-size: 16px; font-weight: bold; margin-right: 5px; }
.brand-left .news-list li .keys span { color: #cccccc; float: right; }
.brand-left .news-list li .pic { width: 100%; height: 259px; box-sizing: border-box; border: 1px solid #f2f2f2; overflow: hidden; }
.brand-left .news-list li .pic img { width: 100%; transition: all 0.2s; }
.brand-left .news-list li .pic + p { position: absolute; width: 100%; bottom: 0; box-sizing: border-box; padding: 30px 10px 15px 10px; text-align: center; font-size: 18px; font-weight: bold; color: #fff; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); transition: all 0.2s; }
.brand-left .news-list li .pic + p + span { position: absolute; right: left; top: 30px; background-color: #dd001a; font-size: 15px; color: #fff; padding: 4px 8px; border-radius: 0 5px 5px 0; }

/*联系方式*/
.brand-left .contact { border-collapse: collapse; color: #2c2b2b; border-top: 1px solid #eeeeee; width: 100%; font: 15px/25px "Microsoft Yahei"; background: #fcfcfc; border-bottom: 1px solid #eeeeee; display: inline-flex; flex-wrap: wrap; }
.brand-left .contact li { float: left; width: 100%; padding: 12px 0; background: #f5f5f5; border-bottom: 1px solid #eee; }
.brand-left .contact li span { color: #e71b00; width: 7em; text-align: right; display: inline-block; }
.brand-left .contact li i { font-style: normal; }

/*右边*/
.w300 .msg-btn { height: 60px; width: 300px; text-align: center; background: #eee;border: 1px solid #ddd;    border-bottom: none; }
.w300 .msg-btn a { margin: 10px 0px 0px 81px; width: 150px; background: #d00000; color: #fff; border-radius: .2em; font: 22px/40px "Microsoft Yahei"; float: left; }
.w300 .brand { border: 1px solid #ddd; width: 100%; }
.w300 .brand-logo { margin: 30px auto 15px auto; text-align: center; border-bottom: 1px dotted #ddd; }
.w300 .brand-logo h1 { font: 18px/40px "Microsoft Yahei"; padding-bottom: 10px; }
.w300 .brand-logo img { width: 150px; height: 75px; border-width: 0px; margin: 0 auto; }
.w300 .brand-title { font: 18px / 18px "Microsoft Yahei"; }
.w300 .brand-title h1 { font: 18px/18px "Microsoft Yahei"; border-left: 6px solid #007edc; padding-left: 8px; }
.w300 .brand-title h1 span { color: #e71b00; }
.w300 .brand-info { font: 13px / 26px "Microsoft Yahei"; color: #666; padding: 10px; }
.w300 .brand-info a { color: #025fa4; }
.w300 .brand-info a:hover { color: #e70026; }

/*********************************品牌三级页面结束*******************************/