<template>
  <div class="about">
    <div class>
      <img src="../assets/image/about/aboutbanner.jpg" width="100%" />
    </div>

    <div class="contanier st">
      <div class="row" style="margin-left:0;margin-right:0">
        <div class="">
          <div class="sssss">
            <p class="text-left">
              南京福予文化传媒有限公司成立于2018年6月，是一家崇尚服务与品质的广告创意公司，拥有多元化的团队体系及全案服务能
              力。从品牌策略到营销策划、广告创意、设计成型、落地执行、一站式解决客户所需。
            </p>
            <br />
            <div class="">
              <div class="abc">
                <img src="../assets/image/about/FOYO.jpg" style="width:100%" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row about-1"  style="margin-left:0;margin-right:0">
        <div class="col-xs-6 col-md-3">
          <img src="../assets/image/about/Advantage1.png" class="about-1-img" alt="..." />
          <div class="caption">
            <h2>多元化服务</h2>
            <p class="p1">
              团队能力多元化
              <br />服务体系立体化
              <br />我们懂得多，
              <br />您就更省心！
            </p>
          </div>
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="../assets/image/about/Advantage2.png" class="about-1-img" alt="..." />
          <div class="caption">
            <h2>注重创意</h2>
            <p class="p1">
              不流于形式，
              <br />至始至终将服务放于首位！
              <br />用更好的创意，
              <br />助力客户创造品牌价值！
              <br />
            </p>
          </div>
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="../assets/image/about/Advantage3.png" class="about-1-img" alt="..." />
          <div class="caption">
            <h2>不违初心的服务</h2>
            <p class="p1">
              态度+热情+能力
              <br />=FOYO
              <br />用心,才能心动
              <br />合作有保障！
            </p>
          </div>
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="../assets/image/about/Advantage4.png" class="about-1-img" alt="..." />
          <div class="caption">
            <h2>更舒心的价格</h2>
            <p class="p1">
              部分服务支持先出预案
              <br />满意再付定金。
              <br />承诺比市面上同档次广告公司
              <br />的服务价位低20%以上！
            </p>
          </div>
        </div>
      </div>

      <div class="row"  style="margin-left:0;margin-right:0">
        <h1 class="h1">我们的团队</h1>
      </div>

      <div class="row about-2" style="margin-left:0;margin-right:0">
        <div class="col-xs-12 col-md-6" >
          <div style="float：left;">
            <img src="../assets/image/about/Photo_sfg.jpg" class="about-ph1" alt="..." />
          </div>
          <div class style="padding: 0;float：right;">
            <div class="text-left" style>
              <h1 class="teamh1">孙福高</h1>
              <p class="teamp1">创始人兼艺术总监</p>
              <p class="teamp2">
                10多年视觉设计经验；
                <br />8余年项目管理经验；
                <br />擅长将多种媒体技术与新兴技术结合；
                <br />带队服务于丰盛集团、中国船舶重工集团、银城地产等上市公司及国企。
              </p>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-md-6">
          <div class>
            <img src="../assets/image/about/Photo_ly.jpg" class="about-ph1" alt="..." />
          </div>
          <div class style="padding: 0">
            <div class="text-left">
              <h1 class="teamh1">李阳</h1>
              <p class="teamp1">创意总监兼合伙人</p>
              <p class="teamp2">
                职业广告人；
                <br />丰富的产品推广及活动策划经验；
                <br />江苏省省级政府项目主策划；
                <br />带领团队服务于华为，渣打（中国总部），德勤（中国）等重要项目。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="row about-3"  style="margin-left:0;margin-right:0">
        <div class="col-xs-2 col-md-2">
          <img src="../assets/image/about/Photo_1.jpg" alt="..." class="ph5" />
        </div>
        <div class="col-xs-2 col-md-2">
          <img src="../assets/image/about/Photo_2.jpg" alt="..." class="ph5" />
        </div>
        <div class="col-xs-2 col-md-2">
          <img src="../assets/image/about/Photo_3.jpg" alt="..." class="ph5" />
        </div>
        <div class="col-xs-2 col-md-2">
          <img src="../assets/image/about/Photo_4.jpg" alt="..." class="ph5" />
        </div>
        <div class="col-xs-2 col-md-2">
          <img src="../assets/image/about/Photo_5.jpg" alt="..." class="ph5" />
        </div>
        <div class="col-xs-2 col-md-2">
          <img src="../assets/image/about/Photo_6.jpg" alt="..." class="ph5" />
        </div>
      </div>
    </div>
  </div>
</template>



<style scoped>

@media (min-width: 768px) {
 
}

@media (max-width: 768px) {
  .about {
    padding-top: 58px;
  }
  .about-1-img {
    width: 60px;
    height: 60px;
  }
  .sssss {
    font-size: 1.2rem;
color: #3e3a39;
    padding: 20px 20px;
  }
  .about-1 {
    border-top: 2px solid #e5e5e5;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e5e5e5;
  }

  .teamh1 {
    margin-top: 0;
    /* font-size: 2rem; */
  }
  
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {
  .st {
    width: 80%;
    padding: 97px 20px 63px 20px;
    margin-top: -120px;

    background-color: #fff;
    border: 2px solid #dcdcdc;
    display: inline-block;
    border-radius: 0; /*去圆角 */
  }
  .about {
    padding-top: 116px;
  }

  .st div div .sssss {
    padding: 0px 20px 40px;
color: #3e3a39;
    font-size: 2.4rem;
  }
  .h1 {
    padding-top: 32px;
    font-size: 4.8rem;
    font-weight: bold;
  }

  h2 {
    padding-bottom: 30px;
    font-weight: bold;
  }
  .about-1-img {
    width: 175px;
    height: 175px;
  }

  .abc {
    border-bottom: 2px solid #e5e5e5;
  }
  .about-1 {
    margin: 0 79px;
    padding: 78px 0 84px 0;
    border-bottom: 2px solid #e5e5e5;
  }

  .ph5 {
    width: 100%;
    padding: 0px;
  }
  .teamh1 {
    margin-top: 0;
    font-size: 1.9vw;
    font-weight: bold;
  }
  .teamp1 {
    font-size: 1.1vw;
    color: #595757;
    margin-bottom: 20px;
    
  }
  .teamp2 {
    font-size: 1.1vw;
  }
}


/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
}
</style>

<style lang="less" scoped>

@media (min-width: 992) and (max-width: 1200) { 
  
 }

@media (min-width: 992px) {
  .p1{
  color: #000;
  font-size: 2.0rem;
}
  .about-2 {
    padding-top: 60px;
    div {
      .about-ph1 {
        float: left;
        width: 50%;
     
        padding: 0 40px ;
      }
    }
  }
  .about-3 {
    margin: 0;
    padding-top: 100px;
    padding-left: 40px;
    padding-right: 40px;
    div {
      margin: 0;
      padding: 0;
      img {
        width: 100%;
      }
    }
  }
}

@media (max-width: 992px) {
  .about-1 {
    padding: 20px 0px;
    div {
      // .about-1-img {
      // }
      .caption {
        h2 {
          font-size: 1.2rem;
          font-weight: bold;
        }
        .p1 {
          font-size: 0.8rem;
        }
      }
    }
  }
  .h1{
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 0px;
  }
  .about-2 {
     
    div {margin-top: 20px;
      div {
        .about-ph1 {
          margin-left: 10px;
          margin-right: 10px;
          float: left;
          width: 120px;
         
        }
      }
      div {
        div {
          h1 {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 6px
          }
          .teamp1{
            font-size: 1.2rem;
            margin: 2px;
          }
          .teamp2{
            font-size: 1.2rem;
          }
        }
      }
    }
  }
  .about-3 {
    margin-top: 28px;

    div {
      margin: 0;
      padding: 0;
      img {
        width: 100%;
      }
    }
  }
}
</style>

