/* 软文广告展示模块 */
.article-ad {padding-bottom: 100px;}
.article-ad .tabs li {color: #999; font-size: 16px; padding: 20px 15px 5px 15px; margin-right: -4px; border-bottom: 2px solid #eee; margin-bottom: 40px; cursor: pointer;}
.article-ad .tabs .cur {color: #4eb6ff!important; background: #f7f7f7; border-bottom: 2px solid #4eb6ff!important;}
.article-ad .list .article-show1 {position: relative; height: 600px; background: url("/front/public/images/index/static/article-ad1.png") no-repeat center center;}
.article-ad .list .article-show2 {position: relative; display: none; height: 600px; background: url("/front/public/images/index/static/article-ad2.png") no-repeat center center;}
.article-ad .list .article-show1 > div,
.article-ad .list .article-show2 > div {position: absolute; font-size: 18px; color: #333;}
.article-ad .list .tanchu {display: none; position: absolute; background: #83ccff; color: #fff; padding: 5px; font-size: 14px; text-align: left; border-radius: 5px;}
.article-ad .list .tanchu span {position: absolute; width: 0; height: 0;}
.article-ad .list .article-show1 .text1 .text1-angle {border-bottom: 8px solid #83ccff; border-right: 15px solid transparent; top: -8px; left: 15px;}
.article-ad .list .article-show1 .text2 .text2-angle {border-bottom: 8px solid #83ccff; border-left: 15px solid transparent; top: -8px; right: 15px;}
.article-ad .list .article-show2 .text1 .text1-angle {border-top: 8px solid #83ccff; border-left: 15px solid transparent; top: 48px; right: 15px;}
.article-ad .list .article-show2 .text2 .text2-angle {border-bottom: 8px solid #83ccff; border-left: 15px solid transparent; top: -8px; right: 15px;}
.article-ad .list .article-show2 .text3 .text3-angle {border-bottom: 8px solid #83ccff; border-left: 15px solid transparent; top: -8px; right: 15px;}
.article-ad .list .article-show2 .text4 .text4-angle {border-top: 8px solid #83ccff; border-right: 15px solid transparent; top: 48px; left: 15px;}
.article-ad .list .article-show2 .text5 .text5-angle {border-top: 8px solid #83ccff; border-right: 15px solid transparent; top: 67px; left: 15px;}
.article-ad .list .article-show2 .text6 .text6-angle {border-top: 8px solid #83ccff; border-right: 15px solid transparent; top: 85px; left: 15px;}
.article-ad .list .article-show1 .text1 {top: 97px; left: 720px; cursor: pointer;}
.article-ad .list .article-show1 .text1 .tanchu {top: 30px; right: -150px;}
.article-ad .list .article-show1 .text1:hover {color: #83ccff;}
.article-ad .list .article-show1 .text1:hover > .tanchu {display: block;}
.article-ad .list .article-show1 .text2 {top: 406px; left: 281px; cursor: pointer;}
.article-ad .list .article-show1 .text2 .tanchu {top: 30px; left: -120px;}
.article-ad .list .article-show1 .text2:hover {color: #83ccff;}
.article-ad .list .article-show1 .text2:hover > .tanchu {display: block;}
.article-ad .list .article-show2 .text1 {top: 47px; left: 117px; cursor: pointer;}
.article-ad .list .article-show2 .text1 .tanchu {top: -55px; left: -90px;}
.article-ad .list .article-show2 .text1:hover {color: #83ccff;}
.article-ad .list .article-show2 .text1:hover > .tanchu {display: block;}
.article-ad .list .article-show2 .text2 {top: 103px; left: 153px; cursor: pointer;}
.article-ad .list .article-show2 .text2:hover {color: #83ccff;}
.article-ad .list .article-show2 .text2:hover > .tanchu {display: block;}
.article-ad .list .article-show2 .text2 .tanchu {top: 30px; left: -120px;}
.article-ad .list .article-show2 .text3 {top: 300px; left: 181px; cursor: pointer;}
.article-ad .list .article-show2 .text3:hover {color: #83ccff;}
.article-ad .list .article-show2 .text3:hover > .tanchu {display: block;}
.article-ad .list .article-show2 .text3 .tanchu {top: 30px; left: -152px;}
.article-ad .list .article-show2 .text4 {top: 51px; left: 979px; cursor: pointer;}
.article-ad .list .article-show2 .text4:hover {color: #83ccff;}
.article-ad .list .article-show2 .text4:hover > .tanchu {display: block;}
.article-ad .list .article-show2 .text4 .tanchu {top: -55px; right: -130px;}
.article-ad .list .article-show2 .text5 {top: 191px; left: 978px; cursor: pointer;}
.article-ad .list .article-show2 .text5:hover {color: #83ccff; }
.article-ad .list .article-show2 .text5:hover > .tanchu {display: block;}
.article-ad .list .article-show2 .text5 .tanchu {top: -75px; right: -130px;}
.article-ad .list .article-show2 .text6 {top: 376px; left: 979px; cursor: pointer;}
.article-ad .list .article-show2 .text6:hover {color: #83ccff;}
.article-ad .list .article-show2 .text6:hover > .tanchu {display: block;}
.article-ad .list .article-show2 .text6 .tanchu {top: -93px; right: -130px;}

/* y.z.m.c.r */
/* 软文投放效果分析模块 */
.article-analysis {padding-bottom: 80px;}
.article-analysis .analysis {margin-top: 80px; margin-bottom: 50px; position: relative; height: 500px; background: url("/front/public/images/index/static/article-analysis-bg.jpg") no-repeat center center;}
.article-analysis .analysis .analysis-desc {position: absolute; width: 300px; text-align: left;}
.article-analysis .analysis .analysis-desc span {display: block; padding-bottom: 10px; color: #333; font-size: 18px;}
.article-analysis .analysis .analysis-desc p {color: #999; font-size: 16px;}
.article-analysis .analysis .analysis-left, .analysis .analysis-right {position: relative;}
.article-analysis .analysis .analysis-left .analysis-top {top: 50px; left: 60px;}
.article-analysis .analysis .analysis-left .analysis-bottom {top: 250px; left: 60px;}
.article-analysis .analysis .analysis-right .analysis-top {top: 50px; left: 838px;}
.article-analysis .analysis .analysis-right .analysis-bottom {top: 250px; left: 838px;}
.article-analysis .analysis-info > div {display: inline-block; vertical-align: middle; margin: 0 30px; font-size: 18px; color: #333; background: #f7f7f7; height: 120px; width: 120px; border-radius: 40px;}
.article-analysis .analysis-info > div > div:first-child {margin: 25px 0;}

/* 软文投放策略分析模块 */
.article-tactics {position: relative; padding-bottom: 100px;}
.article-tactics .arrow1,
.article-tactics .arrow2,
.article-tactics .arrow3 {position: absolute;}
.article-tactics .arrow1 {top: 250px; left: 315px;}
.article-tactics .arrow2 {top: 250px; left: 560px;}
.article-tactics .arrow3 {top: 250px; left: 803px;}
.article-tactics ul {padding-top: 60px; padding-bottom: 60px;}
.article-tactics ul li {position: relative; margin: 0 70px; width: 100px; height: 100px; background: #77c4f9; border-radius: 50%; font-size: 18px; color: #fff;}
.article-tactics ul li span:first-child {position: absolute; top: 30px; left: 15px;}
.article-tactics ul li .num {display: block; height: 20px; width: 20px; font-size: 16px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 60px; left: 40px;}
.article-tactics .tactics > div {position: relative; display: inline-block; vertical-align: top; margin: 0 20px; color: #999; width: 210px; height: 250px; border-radius: 20px; background: #fff; cursor: pointer;}
.article-tactics .tactics > div > div {margin: 0 auto; margin-top: 20px; width: 120px; text-align: left;}
.article-tactics .tactics > div span {display: inline-block; vertical-align: middle; margin-right: 10px;}
.article-tactics .tactics .tactics-desc {display: none; position: absolute; width: 180px; height: 180px; padding-top: 70px; padding-left: 20px; padding-right: 10px; text-align: left; background: #000; border-radius: 20px; font-size: 14px; color: #fff; opacity: 0.5; filter:alpha(opacity=80); top: -20px; left: 0;}
.tactics > div:hover > .tactics-desc {display: block;}

/* 软文类型分析模块 */
.article-type .type {margin-top: 50px; margin-bottom: 40px; position: relative; height: 400px;}
.article-type .type > div {position: absolute; width: 220px; height: 200px; color: #fff; cursor: pointer;}
.article-type .type .title {position: absolute; width: 120px; text-align: center; top: 30px; font-size: 18px;}
.article-type .type .type1 {top: 50px; left: 100px;}
.article-type .type .type2 {top: 170px; left: 280px;}
.article-type .type .type3 {top: 50px; left: 460px;}
.article-type .type .type4 {top: 170px; left: 640px;}
.article-type .type .type5 {top: 50px; left: 820px;}
.article-type .type .type1 .text1 {position: absolute; top: 80px; left: 12px;}
.article-type .type .type1 .text2 {position: absolute; top: -90px; left: 12px;}
.article-type .type .type1 .text3 {position: absolute; top: -60px; left: 13px;}
.article-type .type .type2 .text1 {position: absolute; top: 63px; left: 33px;}
.article-type .type .type2 .text2 {position: absolute; top: -110px; left: 33px;}
.article-type .type .type2 .text3 {position: absolute; top: -83px; left: 33px;}
.article-type .type .type2 .text4 {position: absolute; top: -56px; left: 33px;}
.article-type .type .type3 .text1 {position: absolute; top: 78px; left: 33px;}
.article-type .type .type3 .text2 {position: absolute; top: -96px; left: 33px;}
.article-type .type .type4 .text1 {position: absolute; top: 65px; left: 33px;}
.article-type .type .type4 .text2 {position: absolute; top: -109px; left: 33px;}
.article-type .type .type4 .text3 {position: absolute; top: -82px; left: 33px;}
.article-type .type .type5 .text1 {position: absolute; top: 65px; left: 33px;}
.article-type .type .type5 .text2 {position: absolute; top: -109px; left: 33px;}
.article-type .type .type5 .text3 {position: absolute; top: -82px; left: 33px;}
.article-type .type .hexagon-top {position: absolute; width: 120px; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; left: 0px; top: 0px;}
.article-type .type .hexagon-bottom {position: absolute; width: 120px; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; left: 0px; top: 100px;}
.article-type .type .hexagon-color1 {border-bottom: 100px solid #86bbf3;}
.article-type .type .hexagon-color11 {border-top: 100px solid #86bbf3;}
.article-type .type .hexagon-color2 {border-bottom: 100px solid #a8c4f9;}
.article-type .type .hexagon-color22 {border-top: 100px solid #a8c4f9;}
.article-type .type .hexagon-color3 {border-bottom: 100px solid #7bbde2;}
.article-type .type .hexagon-color33 {border-top: 100px solid #7bbde2;}
.article-type .type .hexagon-color4 {border-bottom: 100px solid #ffaa56;}
.article-type .type .hexagon-color44 {border-top: 100px solid #ffaa56;}
.article-type .type .hexagon-color5 {border-bottom: 100px solid #ff7c7c;}
.article-type .type .hexagon-color55 {border-top: 100px solid #ff7c7c;}
.article-type .type > div:hover > .zhezao {display: block;}
.article-type .type .zhezao {display: none; position: absolute; font-size: 18px; color: #fff; width: 220px; height: 200px; top: 0; left: 0;}
.article-type .type .zhezao .text {position: absolute; width: 180px; text-align: left; left: -20px; top: 70px; z-index: 100;}
.article-type .type .type5 .zhezao .text {left: 10px;}
.article-type .type .zhezao a {position: absolute; border: 1px solid #fff; color: #fff; padding: 5px; border-radius: 10px; left: 16px; top: -70px; z-index: 100;}
.article-type .type .zhezao a:hover {color: #4eb6ff;}
.article-type .type .zhezao-color1 {border-bottom: 100px solid ; border-bottom-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.6);}
.article-type .type .zhezao-color11 {border-top: 100px solid; border-top-color: rgb(0, 0, 0); border-top-color: rgba(0, 0, 0, 0.6);}