.friend-view .view-content {background: #fff; }
/* 朋友圈广告展示模块 */
.friend-ad .tabs li {color: #999; font-size: 16px; padding: 60px 15px 5px 15px; margin-right: -4px; border-bottom: 2px solid #eee; margin-bottom: 60px; cursor: pointer;}
.friend-ad .tabs .cur {color: #4eb6ff!important; background: #fff; border-bottom: 2px solid #4eb6ff!important;}
.friend-ad .list .ad-show1 {position: relative; background: url("/front/public/images/index/static/friend-ad1.jpg") no-repeat center center; height: 600px;}
.friend-ad .list .ad-show2 {display: none; position: relative; background: url("/front/public/images/index/static/friend-ad2.jpg") no-repeat center center; height: 600px;}
.friend-ad .list .ad-show1 > div, .friend-ad .ad-show2 > div {position: absolute; font-size: 18px; color: #333;}
.friend-ad .list .tanchu {display: none; position: absolute; background: #83ccff; color: #fff; padding: 5px; font-size: 14px; border-radius: 5px; text-align: left;}
.friend-ad .list .tanchu span {position: absolute; width: 0; height: 0;}
.friend-ad .list .ad-show1 .text1 {top: 103px; left: 206px; cursor: pointer;}
.friend-ad .list .ad-show1 .text1 .text1-angle {border-top: 8px solid #83ccff; border-left: 15px solid transparent; top: 27px; right: 15px;}
.friend-ad .list .ad-show1 .text1:hover {color: #4eb6ff;}
.friend-ad .list .ad-show1 .text1:hover > .tanchu {display: block;}
.friend-ad .list .ad-show1 .text1 .tanchu {top: -35px; left: -70px;}
.friend-ad .list .ad-show1 .text2 {top: 173px; left: 224px; cursor: pointer;}
.friend-ad .list .ad-show1 .text2 .text2-angle {border-top: 8px solid #83ccff; border-left: 15px solid transparent; top: 27px; right: 15px;}
.friend-ad .list .ad-show1 .text2:hover {color: #4eb6ff;}
.friend-ad .list .ad-show1 .text2:hover > .tanchu {display: block;}
.friend-ad .list .ad-show1 .text2 .tanchu {top: -35px; left: -90px;}
.friend-ad .list .ad-show1 .text3 {top: 269px; left: 297px; cursor: pointer;}
.friend-ad .list .ad-show1 .text3 .text3-angle {border-top: 8px solid #83ccff; border-left: 15px solid transparent; top: 27px; right: 15px;}
.friend-ad .list .ad-show1 .text3:hover {color: #4eb6ff;}
.friend-ad .list .ad-show1 .text3:hover > .tanchu {display: block;}
.friend-ad .list .ad-show1 .text3 .tanchu {top: -35px; left: -255px;}
.friend-ad .list .ad-show1 .text4 {top: 440px; left: 245px; cursor: pointer;}
.friend-ad .list .ad-show1 .text4 .text4-angle {border-top: 8px solid #83ccff; border-left: 15px solid transparent; top: 27px; right: 15px;}
.friend-ad .list .ad-show1 .text4 .tanchu {top: -35px; left: -245px;}
.friend-ad .list .ad-show1 .text4:hover {color: #4eb6ff;}
.friend-ad .list .ad-show1 .text4:hover > .tanchu {display: block;}
.friend-ad .list .ad-show2 .text1 {top: 193px; left: 818px; cursor: pointer;}
.friend-ad .list .ad-show2 .text1 .text1-angle {border-top: 8px solid #83ccff; border-right: 15px solid transparent; top: 27px; left: 15px;}
.friend-ad .list .ad-show2 .text1:hover {color: #4eb6ff;}
.friend-ad .list .ad-show2 .text1:hover > .tanchu {display: block;}
.friend-ad .list .ad-show2 .text1 .tanchu {top: -35px; right: -170px;}
.friend-ad .list .ad-show2 .text2 {top: 312px; left: 818px;}
.friend-ad .list .ad-show2 .text3 {top: 455px; left: 818px;}

/* .cr@yzm. */
/* 朋友圈熟人营销模块 */
.friend-marketing .marketing {padding-top: 20px; padding-bottom: 100px;}
.friend-marketing .marketing li {display: inline-block; vertical-align: middle; width: 180px; padding: 0 45px;}
.friend-marketing .marketing li div.icon {margin: 0 auto; margin-bottom: 10px; height: 90px; width: 90px; line-height: 90px; background: #fff; border: 1px solid #eee; border-radius: 50%;}
.friend-marketing .marketing li div.title {color: #333; font-size: 16px; margin-bottom: 10px;}
.friend-marketing .marketing li p {text-align: left; color: #999;}
.friend-marketing .filter {padding-top: 50px;}
.friend-marketing .filter > div {display: inline-block; vertical-align: top; background: #fff; margin: 15px 10px; padding: 40px 20px; width: 232px; height: 110px; border: 1px solid #eee; border-radius: 10px;}
.friend-marketing .filter div.title {margin: 0 auto; color: #fff; font-size: 18px; width: 150px; padding: 3px 0; border-radius: 15px; margin-bottom: 30px;}
.friend-marketing .filter div.title span {display: inline-block; vertical-align: middle; margin-right: 5px;}
.friend-marketing .filter .title1 {background: #ffaa56;}
.friend-marketing .filter .title2 {background: #ff7c7c;}
.friend-marketing .filter .title3 {background: #7ebe44;}
.friend-marketing .filter .title4 {background: #77c4f9;}
.friend-marketing .filter .title5 {background: #a8c4f9;}
.friend-marketing .filter .title6 {background: #b993e3;}
.friend-marketing .filter .title7 {background: #7979ae;}
.friend-marketing .filter p {padding: 0 20px; text-align: left; color: #999;}
.friend-marketing .filter p.friend-num {padding-left: 30px;}

/* 朋友圈人群定向模块 */
.friend-oriented {padding-bottom: 100px;}
.friend-oriented .tabs {position: relative;}
.friend-oriented .tabs li {position: relative; padding: 0 15px; margin: 30px 100px 50px 100px; width: 80px; height: 110px; border-radius: 50%; background: #b9c6d6; color: #fff; font-size: 18px; cursor: pointer;}
.friend-oriented li .text {display: block; padding-top: 20px; padding-bottom: 10px;}
.friend-oriented li .num {display: block; text-align: center; font-size: 16px; width: 20px; height: 20px; margin: 0 auto; border-radius: 50%; border: 1px solid #fff;}
.friend-oriented li .arrow-angel {position: absolute; width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid #b9c7d6; border-bottom: 10px solid transparent; top: 44px; right: -18px}
.friend-oriented li:hover > .arrow-angel {border-left: 20px solid #4eb6ff;}
.friend-oriented .arrow-hover {border-left: 20px solid #4eb6ff!important;}
.friend-oriented .line1,
.friend-oriented .line2 {position: absolute;}
.friend-oriented .line1 {top: 79px; left: 400px;}
.friend-oriented .line2 {top: 79px; left: 713px;}
.friend-oriented .oriented-show1 {height: 400px; background: url('/front/public/images/index/static/oriented1.jpg') no-repeat center center;}
.friend-oriented .oriented-show2 {height: 400px; background: url('/front/public/images/index/static/oriented2.jpg') no-repeat center center;}
.friend-oriented .oriented-show3 {height: 400px; background: url('/front/public/images/index/static/oriented3.jpg') no-repeat center center;}