<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>普信文化</title>
  <meta http-equiv="keywords" content="普信,普信文化,普信传媒,动漫,应用,动画片,少儿,幼教,童趣漫游,童学优漫,动画,孩童,少儿动漫,发行,亲子,正版">
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
  <link rel="stylesheet" href="./css/Istyle.css">
  <style>
    body {
      width: 100%;
      height: 100%;
      font-size: 16px;
      color: #000000;
      background: #ffed75;
    }

    .pageobj {
      text-align: center;
      position: absolute;
      background-image: url('image/index_bg.jpg');
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 1280px 3375px;
      width: 100%;
      height: 3375px;
    }

    .top-wrapper {
      position: relative;
      background-size: 100% auto;
      background-repeat: no-repeat;
      width: 100%;
    }

    .bottom-wrapper {
      position: relative;
      background-size: 100% auto;
      background-repeat: no-repeat;
      width: 100%;
    }

    .advert>div,
    .advert1>div {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #000000;
      position: absolute;
      bottom: 0px;
      display: inline-block;
      -webkit-transition-duration: 0.7s;
      transition-duration: 0.7s;
      cursor: pointer;
    }

    .advert>div::before {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      bottom: -10px;
      right: -10px;
    }

    .advert>div:nth-of-type(1),
    .advert1>div:nth-of-type(1) {
      margin-left: 5px;
    }

    .advert>div:nth-of-type(2),
    .advert1>div:nth-of-type(2) {
      margin-left: 20px;
    }

    .advert>div:nth-of-type(3),
    .advert1>div:nth-of-type(3) {
      margin-left: 35px;
    }

    .advert>div:nth-of-type(4),
    .advert1>div:nth-of-type(4) {
      margin-left: 50px;
    }

    .advert>div:nth-of-type(5),
    .advert1>div:nth-of-type(5) {
      margin-left: 65px;
    }

    .advert>div:nth-of-type(6) {
      margin-left: 80px;
    }

    .advert>div:nth-of-type(7) {
      margin-left: 95px;
    }

    .advert .cur {
      background: #53c1ec;
    }

    /*.advert .content span,.sfont-1{*/

    /*font-family: 'sfont-1';*/

    /*}*/

    .container {
      box-sizing: border-box;
      position: relative;
      padding: 18px 0px;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .area-box-0 {
      position: relative;
      margin-bottom: 100px;
      width: 900px;
      height: 420px;
      margin-top: 100px;
      margin-right: auto;
      margin-left: auto;
    }

    .area-box-1 {
      position: relative;
      width: 700px;
      height: 420px;
      color: #000000;
      margin: 0 auto;
      margin-bottom: 118px;

    }

    .area-box-1 .tital {
      display: block;
      margin-left: 110px;
    }

    .tital>h2 {
      font-size: 40px;
      line-height: 40px;
    }

    .tital>span {
      font-size: 15px;
      line-height: 36px;
    }

    .area-box-1 .describe {
      color: #5bdbbd;
      font-size: 42px;
      line-height: 42px;
      margin: 20px 0px;
    }

    .describe span {
      color: #5bdbbd;
    }

    .area-box-2 {
      position: relative;
      width: 100%;
    }

    .bgimg {
      position: relative;
      width: 950px;
      height: 420px;
      margin: 0 auto;
      margin-bottom: 120px;
    }

    .area-box-2 .tital {
      text-align: right;
      margin-right: 190px;
    }

    .area-box-2 .items {
      position: relative;
      margin-top: 30px;
      vertical-align: top;
      background-image: url("image/index_pattern.png");
      background-repeat: no-repeat;
      background-size: 250px 250px;
      display: inline-block;
      width: 250px;
      height: 250px;
    }

    .area-box-2 .items:nth-of-type(3) {
      margin-left: 70px;
      margin-right: 70px;

    }

    .area-box-2 .items>div:nth-of-type(1) {
      position: absolute;
      top: 30px;
      left: 90px;
      display: block;
      /*background: #5bdbbd;*/
      /*margin: 0px auto;*/
    }

    .area-box-2 .items .items-txt {
      margin-top: 100px;
      width: 250px;
      text-align: center;
      font-size: 26px;
    }

    .area-box-2 .items .items-txt span {
      display: block;
      font-size: 16px;
      font-weight: 300;
      opacity: 0.9;
    }

    .area-box-3 {
      position: relative;
      /*background: rgba(0,0,0,0.2);*/
      width: 950px;
      height: 660px;
      margin: 0 auto;
      margin-bottom: 150px;
    }

    .area-box-3 .tital {
      margin-left: 300px;
      color: #ffffff;
    }

    .area-box-3 .describe {
      color: #d7574b;
      font-size: 42px;
      line-height: 42px;
      margin: 26px 0px;
    }

    .area-box-3 .programs {
      position: relative;
      width: 900px;
      height: 600px;
      margin: 0 auto;
    }

    .area-box-3 .items {
      position: absolute;
      width: 500px;
      height: 81px;
      background-color: #ffc7a8;
      line-height: 0px;
    }

    .area-box-3 .it-right .icons {
      position: absolute;
      top: -2px;
      left: -40px;
      width: 67px;
      height: 67px;
      border-radius: 50%;
      background: #fff7f7;
    }

    .area-box-3 .items .txt-box {
      font-size: 14px;
      line-height: 16px;
      margin-left: 60px;
      margin-top: 4px;
      padding-right: 80px;
      color: #ffffff;
    }

    .area-box-3 .items .txt-box>p {
      text-align: left;
      line-height: 36px;
      font-size: 24px;
      font-weight: 600;
    }

    .area-box-3 .items .txt-box>span {
      font-weight: 400;
    }

    .area-box-4 {
      position: relative;
      margin: 0 auto;
      width: 1100px;
      height: 700px;
    }

    .area-box-4 .tital {
      text-align: right;
      margin-right: 220px;
    }

    .area-box-4 #area-ul .items {
      width: 80px;
      height: 30px;
      text-align: center;
    }

    .area-box-4 #area-ul .curitem {
      border-bottom: 3px #f27e5c solid;
      transition: 0.7s;
    }

    .area-box-4 #area-ul .items:hover {
      cursor: pointer;
    }

    .advert1 ul li>.item {
      position: absolute;
    }

    .advert1 ul li>.item>img {
      width: 290px;
      height: 198px;
    }



    @media screen and (max-width: 1024px) {

      .container {
        width: 1024px;
      }

      .top-wrapper .top-nav,
      .carton,
      .area-box-4 {
        width: 1000px;
      }
      .top-nav{
        left: 440px;
      }
      #mark{
        display: none;
      }


    }

    @media screen and (min-width: 1280px) {
      .pageobj {
        position: absolute;
        background-image: url('image/index_bg.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1920px 3375px;
        width: 100%;
        height: 3375px;
      }
    }

    .cvs_div{
      z-index: 5;
    }




  </style>
</head>

<body>



<div id="wrapper">

  <div class="screen" style="height: 3305px;">

    <!--背景-->
    <div class="pageobj" style=""></div>
    <!--顶部logo 导航栏-->
    <div class="top-wrapper" style="position: absolute;top: 0px;left: 0px">
      <div class="logo-wrapper" style="left: 0px">
        <img src="image/LOGO-puxin.png" alt="">
      </div>

      <ul class="top-nav box-mynavstyle" id="box-mynavstyle" style="">
        <li class="item current"><a onclick="turnPage(this.href)" href="index.html">首页</a></li>
        <li class="item"><a onclick="turnPage(this.href)" href="product.html">产品</a></li>
        <li class="item"><a onclick="turnPage(this.href)" href="operations.html">运营</a></li>
        <li class="item"><a onclick="turnPage(this.href)" href="apply.html">应用</a></li>
        <li class="item"><a onclick="turnPage(this.href)" href="case.html">案例</a></li>
        <li class="item"><a onclick="turnPage(this.href)" href="us.html">关于我们</a></li>
      </ul>
    </div>
    <div class="container">
      <div class="area-box-0">
        <div id="arrnext" style="z-index:5;background: url('image/index-img2.png') no-repeat;background-size: 117px 117px;width: 117px;height: 117px;position: absolute;right: -50px;top: 250px;"></div>
        <div id="arrup" style="z-index:5;background: url('image/index-img1.png') no-repeat;background-size: 117px 117px;width: 117px;height: 117px;position: absolute;left: -50px;top: 250px;"></div>

        <div class="advert" style="width: 800px;height: 300px;position: absolute;top: 0;left: 80px;z-index: 0">
          <ul style="position: absolute;top: 0px;left: 0;font-size: 0">
            <!--新片首发-->
            <li style="position: absolute;top: 0;left: 0;z-index: 0;">
              <div style="background: url('image/index-img0-210224.png') no-repeat;background-size:344px 340px;width: 344px;height:340px;position: absolute;right: -370px;top: 0px"></div>
              <div class="content" style="position:relative;width:400px;font-size: 16px;margin-top: 50px">
                <span style="font-size: 34px;font-weight: 500;">飞狗MOCO之家有小短腿</span>
                <p class="sfont-2" style="font-size: 22px;font-weight: 300;letter-spacing: 5px;line-height: 28px;margin: 10px">网红小柯基的全新故事，温暖升级，欢乐翻倍。</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 超人气萌宠IP，极具治愈力</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 各大平台热播榜首常驻嘉宾</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 轻松幽默短视频，每一秒都好看</p>
              </div>

            </li>

            <li style="position: absolute;top: 0;left: 0;z-index: 0;display: none; ">
              <div style="background: url('image/index-img7-210224.png') no-repeat;background-size:438px 394px;width: 438px;height: 394px;position: absolute;right: -380px;top: 0px"></div>
              <div class="content" style="position:relative;width:450px;font-size: 16px;margin-top: 50px">
                <span style="font-size: 44px;font-weight: 500;">猪屁登</span>
                <p class="sfont-2" style="font-size: 24px;font-weight: 300;letter-spacing: 5px;line-height: 28px;margin: 10px">丑萌猪猪宣战不文明，传递社会正能量。</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 国产原创，冉冉升起的正能量新星</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 老少皆宜，幽默搞笑神转折</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 短小精悍，赋有社会教育意义</p>
              </div>

            </li>
            <li style="position: absolute;top: 0;left: 0;z-index: 0;display: none ">
              <div style="background: url('image/index-img8-210224.png') no-repeat;background-size:547px 493px;width: 547px;height: 493px;position: absolute;right: -490px;top: -50px"></div>
              <div class="content" style="position:relative;width:500px;font-size: 16px;margin-top: 50px">
                <span style="font-size: 42px;font-weight: 500;">熊出没之怪兽计划</span>
                <p class="sfont-2" style="font-size: 22px;font-weight: 300;letter-spacing: 5px;line-height: 28px;margin: 10px">冒险升级，“熊强”联手，守护家园！<br></p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 华强方特主推IP，热播系列续集</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 内容制作全新升级，融入创新趣味的科技元素</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 传达及倡导探险与成长、热爱自然、保护动物等正能量精神</p>
              </div>

            </li>


            <!--<li style="position: absolute;top: 0;left: 0;z-index: 0;display: none; ">-->
            <!--<div style="background: url('image/index-img5.png') no-repeat;background-size:304px 300px;width: 304px;height:300px;position: absolute;right: -370px;top: 0px"></div>-->
            <!--<div class="content" style="position:relative;width:400px;font-size: 16px;margin-top: 50px">-->
            <!--<span style="font-size: 52px;font-weight: 500;">百变马丁第一季</span>-->
            <!--<div style="background: url('image/index-img4-1.png') no-repeat;background-size:66px 30px;width: 66px;height:30px;position: absolute;right: -50px;top: 16px"></div>-->
            <!--<p class="sfont-2" style="font-size: 28px;font-weight: 300;letter-spacing: 5px;line-height: 28px;margin-bottom: 10px">央视动画频道黄金时段热播 蛰伏十年，重磅回归！</p>-->
            <!--<p class="sfont-1" style="text-indent: 0.3em;">☆ 你还记得10年前那个马丁吗？他又回来了！</p>-->
            <!--<p class="sfont-1" style="text-indent: 0.3em;">☆ 马丁就是那个给孩子无尽期待和无穷想象的角色！</p>-->
            <!--<p class="sfont-1" style="text-indent: 0.3em;">☆ 让孩子不知不觉就沉浸在快乐中，学会勇敢！</p>-->
            <!--</div>-->

            <!--</li>-->

            <!--全网热播-->
            <li style="position: absolute;top: 0;left: 0;z-index: 0;display: none; ">
              <div style="background: url('image/index-img9-210224.png') no-repeat;background-size:547px 493px;width: 547px;height: 493px;position: absolute;right: -500px;top: -60px"></div>
              <div class="content" style="position:relative;width:450px;font-size: 16px;margin-top: 50px">
                <span style="font-size: 52px;font-weight: 500;">奇迹少女</span>
                <p class="sfont-2" style="font-size: 30px;font-weight: 300;letter-spacing: 5px;line-height: 34px;margin: 2px 0 4px 10px">后浪来袭，新时代超英少女偶像的养成。</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 长期占据国际知名主流媒体平台热播榜</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 多国联合大制作，屡获佳绩</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 奇幻与现实完美融合，极具共鸣</p>

              </div>

            </li>
            <li style="position: absolute;top: 0;left: 0;z-index: 0;display: none; ">
              <div style="background: url('image/index-img10-210224.png') no-repeat;background-size:547px 493px;width: 547px;height: 493px;position: absolute;left: 360px;top: -40px"></div>
              <div class="content" style="position:relative;width:450px;font-size: 16px;margin-top: 50px">
                <span style="font-size: 42px;font-weight: 500;">钢铁飞龙3山海神兽录</span>
                <p class="sfont-2" style="font-size: 28px;font-weight: 300;letter-spacing: 5px;line-height: 28px;margin: 10px">当东方神话遇上科幻机甲，冒险旅途再次开启</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 超人气机甲类IP，各大平台热播</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 业界高度评价，电影版已投入日本市场</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 已成功开拓线下衍生玩具市场</p>
              </div>

            <li style="position: absolute;top: 0;left: 0;z-index: 0;display: none; ">
              <div style="background: url('image/index-img6-210224.png') no-repeat;background-size:437px 394px;width: 437px;height: 394px;position: absolute;left: 400px;top: 0px"></div>
              <div class="content" style="position:relative;width:450px;font-size: 16px;margin-top: 50px">
                <span style="font-size: 48px;font-weight: 500;">汤姆猫英雄小队</span>
                <p class="sfont-2" style="font-size: 24px;font-weight: 300;letter-spacing: 5px;line-height: 28px;margin: 10px">以友爱、团队合作与友谊作为武器来拯救世界的萌猫小队！</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 风靡全球的人气IP汤姆猫</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 内容极具童趣，深受小朋友喜爱</p>
                <p class="sfont-1" style="text-indent: 0.3em;">☆ 系列手游联动，突破次元壁软萌上线</p>
              </div>

            </li>

            </li>
          </ul>
          <div class="cur"></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <!--<div></div>-->
        </div>


      </div>
      <div class="area-box-1">
        <span style="position: absolute;top: 0px; color: #5bdbbd;font-size: 80px;line-height: 70px;margin-left: 20px">01</span>
        <div class="tital">
          <h2>关于普信</h2>
          <span>ABOUT US</span>
          <p class="describe"><span>“</span>领先的少儿动漫节目</p>
          <p class="describe" style="text-indent: 2em">发行与运营服务商<span>”</span></p>

        </div>
        <p style="font-size: 1em;line-height: 26px;margin-left: 30px;text-indent: 2em;text-align: justify;">
          公司以亲子动漫娱乐和幼教视频作为细分市场和需求导向，构建基于亲子互动的童趣家庭娱乐生态。目前公司拥有国内丰富的亲子动漫正版视频节目库及“童趣漫游”、“童学优漫”两大自主研发的应用产品。目前普信文化已与各大视频网站及全国20余个省的广电网络、运营商、IPTV二级播控平台实现深度合作，建立了内容合作、专区运营及承包运营多种合作模式，为内容方实现快速“单点接入、全网发行"，为实现品牌宣发及内容变现提供专业化服务。</p>
        <div class="carton" style="position: absolute;top: 177px;left: -218px">
          <img width=351 height=378 src="image/bg_cartoon0.png" alt="">
        </div>
      </div>
      <div class="area-box-2">
        <div class="bgimg">
          <div class="tital">
            <h2 style="color: #000000">产品内容</h2>
            <span>PRODUCT</span>
          </div>
          <span style="position: absolute;top: 0px;right: 80px; color: #5bdbbd;font-size: 80px;line-height: 70px;margin-left: 20px">02</span>
          <div class="items">
            <div style="width: 70px;height: 58px;">
              <div style="position: absolute;top: 7px;left:7px;">
                <img style="" src="image/icon/index2_0.png" alt="" width=53 hidden=53></div>
            </div>
            <div class="items-txt">
              <p>内容</p>
              <span>1500+部少儿动漫正版节目</span>
              <span>知名IP拥有率达30%</span>
              <span>月月有更新，季季有独播</span>
              </span>
            </div>
          </div>
          <div class="items">
            <div style="width: 72px;height: 58px;">
              <div style="position: absolute;top: 7px;left:7px;">
                <img style="" src="image/icon/index2_1.png" alt="" width=53 hidden=53></div>
            </div>
            <div class="items-txt">
              <p>运营服务</p>
              <span>提供IPTV/OTT端</span>
              <span>少儿专区建设、运营服务</span>
              <span>"中央厨房"</span>
              <span>智慧内容运营体系</span>


            </div>
          </div>
          <div class="items">
            <div style="width: 67px;height: 61px;">
              <div style="position: absolute;top: 7px;left:7px;">
                <img style="" src="image/icon/index2_2.png" alt="" width=53 hidden=53></div>
            </div>
            <div class="items-txt">
              <p>应用</p>
              <span>童趣漫游 - 少儿版</span>
              <span>童学优漫</span>
              <span>首款视频互动问答<br>教育动画应用</span>
            </div>


          </div>
        </div>


      </div>
      <div class="area-box-3">
        <span style="position: absolute;top: 0px;left: 180px; color: #d7574b;font-size: 80px;line-height: 70px;margin-left: 20px">03</span>
        <div class="tital">
          <h2 style="color: #ffffff">运营服务</h2>
          <span>OPERATIONS</span>
          <p class="describe">“我们的运营观”</p>
        </div>
        <p style="font-size: 1em;line-height: 26px;margin-left: 70px;color: #ffffff;text-indent: 2em;text-align: justify;">
          智能化电视市场发展迅猛，但大部分运营者并未具备相匹配的运营能力，甚至连基本的内容运营都达不到，仅仅做了内容的堆砌，对"体验"、"营销、"数据"等运营核心工作完全不熟悉，更谈不上品牌经营和用户运营，导致用户付费意愿低，黏性差，转化率低，忠诚度更是谈不上。因此有没有精细化运营，体现在用户量和收入上，更是量级之差。</p>
        <div class="programs" style="
    position: relative;
    width: 900px;
    height: 600px;
    margin: 0 auto;">
          <div class="items it-right" style="left: 290px;top: 65px;background: #f5af9b">
            <div class="icons" style="border: 8px #ef7f5e solid;background-image: url('image/operations/icon0.png');background-size: 35px 30px;background-repeat: no-repeat;background-position: center"></div>
            <div class="txt-box">
              <p>4、情感运营</p>
              <span style="">有爱有温度，做懂用户的产品，实现品牌输出，形成强<br>黏性。 </span>
            </div>
          </div>
          <div class="items it-right" style="left: 235px;top: 150px;background: #ffc584">
            <div class="icons" style="border: 8px #ffb053 solid;background-image: url('image/operations/icon1.png');background-size: 35px 37px;background-repeat: no-repeat;background-position: center"></div>
            <div class="txt-box">
              <p>3、用户运营</p>
              <span>了解用户画像、用户行为及点播数据，实现“观众”-“用户”-“粉丝”的转变。</span>
            </div>
          </div>
          <div class="items it-right" style="left: 190px;top: 235px;background: #66cbd8">

            <div class="icons" style="border: 8px #2abacc solid;background-image: url('image/operations/icon2.png');background-size: 37px 37px;background-repeat: no-repeat;background-position: center"></div>
            <div class="txt-box">
              <p>2、产品运营</p>
              <span>持续改进产品体验，迭代功能，完善产品使用流程。</span>
            </div>
          </div>
          <div class="items it-right" style="left: 145px;top: 320px;background: #a09ca5">
            <div class="icons" style="border: 8px #646371 solid;background-image: url('image/operations/icon3.png');background-size: 35px 35px;background-repeat: no-repeat;background-position: center"></div>
            <div class="txt-box">
              <p>1、内容运营</p>
              <span>内容品质、节目推荐，细致到一张海报的处理。 </span>
            </div>
          </div>
          <div style="position: absolute;top: 60px;right: 10px;width: 348px;height:402px;background: url('image/index-img3.png') no-repeat center;background-size:348px 402px "></div>
        </div>

        <div class="carton" style="position: absolute;top: -184px;right: -96px">
          <img width=304 height=308 src="image/bg_cartoon1.png" alt="">
        </div>
      </div>
      <div class="area-box-4">
        <div class="carton" style="position: absolute;top: -110px;left: 12px">
          <img width=252 height=218 src="image/bg_cartoon2.png" alt="">
        </div>
        <div class="tital">
          <h2 style="color: #000000">精彩案例</h2>
          <span>CASE</span>
        </div>
        <span style="position: absolute;top: 0px;right: 120px; color: #d7574b;font-size: 80px;line-height: 70px;margin-left: 20px">04</span>
        <div id="area-ul" style="width:540px;position: absolute;top: 90px;left: 50%;margin-left:-280px;font-size: 17px;">
          <div class="items curitem" style="position: absolute;top: 0px;left: 130px">EPG首页</div>
          <div class="items" style="position: absolute;top: 0px;left: 230px;margin: 0 10px">专题策划</div>
          <div class="items" style="position: absolute;top: 0px;left: 330px;margin: 0 10px">活动展示</div>
        </div>
        <div class="line" style="margin: 40px auto;width: 400px;height: 6px;background: black;border-radius: 2px"></div>

        <div class="advert1" style="width: 920px;height: 425px;position: absolute;top:150px;left: 50%;margin-left: -460px;z-index: 0;">
          <ul style="position: absolute;top: 0px;left: 0;font-size: 0">
            <li style="position: absolute;top: 0;left: 0;width: 920px;height: 425px;">
              <div class="item" style="top: 0;left: 0px"><img src="image/index/epg/img0.png" alt=""></div>
              <div class="item" style="top: 0;left: 50%;margin-left: -145px;"><img src="image/index/epg/img1.png" alt=""></div>
              <div class="item" style="top: 0;right: 0;"><img src="image/index/epg/img2.png" alt=""></div>

              <div class="item" style="bottom: 0;left: 0px"><img src="image/index/epg/img3.png" alt=""></div>
              <div class="item" style="bottom: 0;left: 50%;margin-left: -145px;"><img src="image/index/epg/img4.png" alt=""></div>
              <div class="item" style="bottom: 0;right: 0;"><img src="image/index/epg/img5.png" alt=""></div>

            </li>
            <li style="position: absolute;top: 0;left: 0;width: 920px;height: 425px;z-index: -1">
              <div class="item" style="top: 0;left: 0px"><img src="image/index/case/img0.png" alt=""></div>
              <div class="item" style="top: 0;left: 50%;margin-left: -145px;"><img src="image/index/case/img1.png" alt=""></div>
              <div class="item" style="top: 0;right: 0;"><img src="image/index/case/img2.png" alt=""></div>

              <div class="item" style="bottom: 0;left: 0px"><img src="image/index/case/img3.png" alt=""></div>
              <div class="item" style="bottom: 0;left: 50%;margin-left: -145px;"><img src="image/index/case/img4.png" alt=""></div>
              <div class="item" style="bottom: 0;right: 0;"><img src="image/index/case/img5.png" alt=""></div>

            </li>
            <li style="position: absolute;top: 0;left: 0;width: 920px;height: 425px;z-index: -2">
              <div class="item" style="top: 0;left: 0px"><img src="image/index/action/img0.png" alt=""></div>
              <div class="item" style="top: 0;left: 50%;margin-left: -145px;"><img src="image/index/action/img1.png" alt=""></div>
              <div class="item" style="top: 0;right: 0;"><img src="image/index/action/img2.png" alt=""></div>

              <div class="item" style="bottom: 0;left: 0px"><img src="image/index/action/img3.png" alt=""></div>
              <div class="item" style="bottom: 0;left: 50%;margin-left: -145px;"><img src="image/index/action/img4.png" alt=""></div>
              <div class="item" style="bottom: 0;right: 0;"><img src="image/index/action/img5.png" alt=""></div>

            </li>
          </ul>
        </div>
      </div>

    </div>

    <style>
      #weixinbox:hover #showwx {
        display: block;
      }

      #showwx {
        position: absolute;
        display: none;
        top: -185px;
        right: 75px;
        width: 150px;
        height: 150px;
        padding-top: 5px;
        background-color: #ffffff;
        line-height: 50px;
      }

      #showwx::before {
        /*三角内容为空*/
        content: '';
        width: 0px;
        height: 0px;
        border-top: 15px #ffffff solid;
        border-left: 15px transparent solid;
        border-right: 15px transparent solid;
        border-bottom: 15px transparent solid;
        position: absolute;
        right: 30px;
        bottom: -30px;
      }
    </style>
    <div class="bottom-wrapper" style="
    vertical-align: top;
    font-size: 0;">
      <div style="
        position: absolute;
        bottom: 30%;left: 50%;margin-bottom: -50px;margin-left: -400px;
        width: 850px;">
        <div class="logo-img" style="
            display: inline-block;
            width: 185px;height: 64px;
            background: url(image/icon/px-logo.png) no-repeat center;
            background-size: 185px 70px;"></div>
        <div style="
            vertical-align: top;
            padding: 10px 20px;
            font-size: 16px;
            display: inline-block;
        ;">
          <p>Copyright © 2018 PROSEE.CN 普信文化传媒 版权所有</p>
          <p>经营许可证编号：京B2-20170351号</p>
          <p>ICP备案信息：<a href="http://beian.miit.gov.cn">京ICP备17001327号</a></p>
        </div>
        <div id="weixinbox" style="
            display: inline-block;
            width: 64px;height: 64px;
            background: url(image/icon/weixin.png) no-repeat center;
            background-size: 64px 64px;">
          <div id="showwx" style=""><img width=150 height=150 src="image/weixin.jpg" alt=""></div>

        </div>
        <div id="emailbox" style="
            display: inline-block;
            width: 64px;height: 64px;margin-left: 10px;
            background: url(image/icon/emil.png) no-repeat;
            background-size: 64px 64px;">
        </div>
        <div id="emailshow" style="display: none;position:absolute;right: 0px;top: -120px;width: 280px;height: 100px;font-size: 12px;background: #555555;border-radius: 15px">
          <span id="emailback" style="position: absolute;right: 10px;top: 1px;color: #ffffff;font-size: 32px;line-height: 20px">-</span>
          <p style="width: 150px;margin: 20px auto;color: #ffffff;font-size: 16px">邮箱：hr@prosee.cn</p>

        </div>
      </div>
    </div>


  </div>
</div>


<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
    var p;
    //轮播控制
    var index = 0;
    var imgnum = $('.advert ul li').length;

    $(document).ready(function () {
        init();
    })

    $('#arrup').click(function() {
        if (index == 0) {
            index = 5;
            $('.advert ul li').eq(5).fadeIn().siblings().fadeOut();
            $('.advert>div').eq(5).addClass('cur').siblings().removeClass('cur');
        } else {
            index--;
            $('.advert ul li').eq(index).fadeIn().siblings().fadeOut();
            $('.advert>div').eq(index).addClass('cur').siblings().removeClass('cur');
        }
    });
    $('#arrnext').click(function() {
        if (index == 5) {
            index = 0;
            $('.advert ul li').eq(0).fadeIn().siblings().fadeOut();
            $('.advert>div').eq(0).addClass('cur').siblings().removeClass('cur');
        } else {
            index++;
            $('.advert ul li').eq(index).fadeIn().siblings().fadeOut();
            $('.advert>div').eq(index).addClass('cur').siblings().removeClass('cur');
        }
    });
    $('.advert>div').click(function() {
        var index = $(this).index();
        $('.advert ul li').eq(index - 1).fadeIn().siblings().fadeOut();
        $('.advert>div').eq(index - 1).addClass('cur').siblings().removeClass('cur');
    });
    $('#area-ul .items').click(function() {
        var index1 = $(this).index();
        $('.advert1 ul li').eq(index1).fadeIn().siblings().fadeOut();
        $('#area-ul .items').eq(index1).addClass('curitem').siblings().removeClass('curitem');
    });
    $('#emailbox').click(function() {
        $('#emailshow').fadeIn();
    })
    $('#emailback').click(function() {
        $('#emailshow').fadeOut();
    })


    $('.advert').hover(function() {
        clearTimeout(p);
        p = null;
    }, function() {
        pic();
    });
    $('#arrup').hover(function() {
        clearTimeout(p);
        p = null;
    }, function() {
        pic();
    });
    $('#arrnext').hover(function() {
        clearTimeout(p);
        p = null;
    }, function() {
        pic();
    });

    function pic() {
        p = setTimeout(function() {
            index++;
            if (index >= imgnum) {
                index = 0;
            }
            selectimg(index);
          pic()
        }, 5000);
    }
    function selectimg(index) {
        $('.advert ul li').eq(index).fadeIn().siblings().fadeOut();
        $('.advert>div').eq(index).addClass('cur').siblings().removeClass('cur');
    };

    function turnPage(href) {
        var Href = href;
        window.location.href = Href;
    }

    function init(){
        pic();
    }


</script>


</body>

</html>
