zhongde-website/pages/about/brand.vue

<template>
    <div class="Brand-container">
        <div class="banner-img">
            <img src="http://res.training.luojigou.vip/FlpLqC_a2wOuyJqG7LiOb2tbmUZP?imageView2/0/q/50|imageslim" alt="">
              <section class="label ">
                品牌故事
            </section>
        </div>
         <div class="company-intro">
            <section class="company-intro-label wow animate__animated animate__rubberBand animate__delay-0.5s">
                公司简介
            </section>
            <div class="company-intro-text  ">
                全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，
                用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。
                是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、
                请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。
            </div>
        </div>
        <!-- 大事记 -->
        <div class="event">
            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
              <div class="label-en">
                EVENTS
              </div>
              <div class="label-zn">
                大事记
              </div>
            </div>
            <div class="event-box">
                <img  class="event-bgimg" src="http://res.training.luojigou.vip/Fhe0g5Z_6DRjLf3-lSDXKTff-A6Q?imageView2/0/q/50|imageslim" alt="">
                <div :style="{top: 139 + 240 * item.site.y + 'px'  , 
                            left: 121 + 261 * item.site.x + 'px'}" 
                    :class="['event-box-item wow animate__animated', 'animate__rubberBand' ]" v-for="item in eventData" :key="item.id">
                    <img @mouseenter="currentEventImg(item)" class="yearImgurl cp" :src="item.yearImgurl" alt="">
                    <img v-if="currentEventImgId === item.id" @mouseleave="currentEventImgId = ''" class="eventImgurl"  :src="item.eventImgurl" alt="">
                </div>
            </div>
        </div>
        <!-- 核心团队 -->
        <div class="kernel">
            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
              <div class="label-en">
                KERNEL
              </div>
              <div class="label-zn">
                核心团队
              </div>
            </div>
            <div class="kernel-box">
                <div :class="['kernel-box-item wow animate__animated' , (item.id + 1) % 3 === 0 ? 'animate__lightSpeedInLeft' : item.id % 3 === 0 ? 'animate__lightSpeedInRight' : '' ]" v-for="item in  kernelData" :key="item.id">
                    <div class="top">
                        <img class="people-img" :src="item.imgUrl" alt="" @mouseenter="currentElement(item)" >
                        <img class="overlay-img" 
                            @mouseleave="currentMouserEnter = false"
                         :style="{display:  currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}" 
                         src="http://res.training.luojigou.vip/FstkGdSgJ91jUeZFYT35-ZOdxXT2?imageView2/0/q/50|imageslim" 
                         alt="">
                         <div class="people-intro">
                             <div class="name">{{item.name}}</div>
                             <div class="position">{{item.position}}</div>
                         </div>
                         <div class="intro" :style="{display:  currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}" >
                             <div class="intro-label">简历介绍</div>
                             <div class="resume">{{item.resume}}</div>
                         </div>
                    </div>
                    <div class="bottom">
                    
                    </div>        

                </div>
            </div>
        </div>
        <!-- 文化 -->
        <div class="cultrue">
            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
              <div class="label-en">
                CULTURE OF PRACTIVE
              </div>
              <div class="label-zn">
                我们努力践行的文化 
              </div>
            </div>
            <div class="cultrue-box">
                <div class="cultrue-box-item" v-for="item in cultrueData" :key="item.id">
                    <img :src="item.imgUrl" 
                        :class="['wow animate__animated', 
                        item.id === 0 ? 'animate__lightSpeedInRight animate__delay-1s' : 
                        item.id === 3 ? 'animate__lightSpeedInLeft animate__delay-2s' :
                        item.id === 1 ? 'animate__lightSpeedInRight animate__delay-3s':
                        item.id === 2 ? 'animate__lightSpeedInLeft animate__delay-4s' : ''
                        ]" 
                        alt="">
                    <div class="cultrue-box-item-label">
                        {{ item.label }}
                    </div>
                    <div class="cultrue-box-item-text" v-html="item.text">
                    </div>
                </div>
            </div>
            <div class="cultrue-bgimg">
                <img src="http://res.training.luojigou.vip/Fj4XvDNdIw6iDP8gWQuRHKijlFwM?imageView2/0/q/50|imageslim" alt="">
            </div>
        </div>
        <!-- 理念 -->
        <div class="idea">
            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
              <div class="label-en">
                THE PHILOSPHY
              </div>
              <div class="label-zn">
                我们始终秉承的理念
              </div>
            </div>
            <div class="idea-box">
                <div class="idea-box-item wow animate__animated animate__swing" v-for="item in ideaData" :key="item.id">
                    <div class="top">
                        <img :src="item.imgUrl" alt="">
                    </div>
                    <div class="center">
                        <img :src="item.numUrl" alt="">
                        <div>{{item.label}}</div>
                    </div>
                    <div class="footer">
                        <div>{{item.resume}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
if (process.browser) {
    var {WOW} = require('wowjs')
}
const kernelData = Object.freeze([
    {
        id: 0,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
    {
        id: 1,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
    {
        id: 2,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
    {
        id: 3,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
    {
        id: 4,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
    {
        id: 5,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
    {
        id: 6,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
    {
        id: 7,
        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
        position: 'CEO',
        name: '张洁',
        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
    },
])
const cultrueData = Object.freeze([
    {
        id: 0,
        imgUrl: 'http://res.training.luojigou.vip/Fj0eXd5OYcJRX6z_yBEFbF0OW1Oy?imageView2/0/q/50|imageslim',
        label: '宗旨',
        text: '关注儿童成长</br>服务中国母亲',
    },
    {
        id: 1,
        imgUrl: 'http://res.training.luojigou.vip/FrhQqD5x8r45P0_Dod_21toOFgle?imageView2/0/q/50|imageslim',
        label: '文化',
        text: '缔造愿景，追求卓越</br>共生共荣，体现价值',
    },
    {
        id: 2,
        imgUrl: 'http://res.training.luojigou.vip/FuBgZGe-F3km2mVM4wByusZFFfAw?imageView2/0/q/50|imageslim',
        label: '愿景',
        text: '让中国的孩子</br>幸福成长',
    },
    {
        id: 3,
        imgUrl: 'http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim',
        label: '价值观',
        text: '客户第一</br>团队合力第二</br>专业专注</br>诚信公正</br>拥抱变化</br>激情快乐 ',
    },
])
const ideaData = Object.freeze([
    {
        id: 0,
        imgUrl: 'http://res.training.luojigou.vip/FgJw7WqbyCVkQJCgCBd07qipb_PI?imageView2/0/q/50|imageslim',
        numUrl: 'http://res.training.luojigou.vip/FgX-hI1Y2fjoIvturT1uYaeVjnfB?imageView2/0/q/50|imageslim',
        label: '专业技术',
        resume: '我们拥有行业专业技术实力与自身 工程开发团队，为您的商业变现及 产品需求保驾护航。'
    },
    {
        id: 1,
        imgUrl: 'http://res.training.luojigou.vip/Fl4S2hBlBWsTvfwdvYHaE3RKpLyO?imageView2/0/q/50|imageslim',
        numUrl: 'http://res.training.luojigou.vip/Fk5hTknpr4deZWFtcfmRJSHNV3_K?imageView2/0/q/50|imageslim',
        label: '贴心服务',
        resume: '我们始终坚持优质的服务理念，无 论任何时候您遇到困难，我们都会 及时提供精准有效的解决方案。'
    },
    {
        id: 2,
        imgUrl: 'http://res.training.luojigou.vip/FkRWFwiFQu4XL1BPA96jHbmK1X1D?imageView2/0/q/50|imageslim',
        numUrl: 'http://res.training.luojigou.vip/FiBasqi9NpLdJ_U9jr-95yxgvL1C?imageView2/0/q/50|imageslim',
        label: '创业伙伴',
        resume: '我们把每一位客户都当作创业伙伴，期 盼在未来成长的道路上一路相伴，携手 前行。'
    },
])

const eventData = Object.freeze([
    {
        id: 2003,
        site: {
            x: 3,
            y: 4
        },
        yearImgurl: 'http://res.training.luojigou.vip/FsTtnNKFpIsYh69tIsWqEiocc0Jr?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FrFfg21nonbZyNSUSpAWCiREn7lk?imageView2/0/q/50|imageslim'
    },
    {
        id: 2004,
        site: {
            x: 2,
            y: 4
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fhe4VjIQDeQtQzPnSVmsDc4yYYzE?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FvnL2N118R-0Cp9OcKgK9Ru8nAyp?imageView2/0/q/50|imageslim'
    },
    {
        id: 2005,
        site: {
            x: 1,
            y: 4
        },
        yearImgurl: 'http://res.training.luojigou.vip/FodjYYc3-VyZyJHnfuKJQGapkJzt?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FqNcz_3P81MubVeHzAnn_RrkMoCQ?imageView2/0/q/50|imageslim'
    },
    {
        id: 2006,
        site: {
            x: 0,
            y: 4
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fj_2tRMk_1H9NSp9rE0XK0nEcv6g?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FkvModMYKxFJcnqRrpGSULyd9Th7?imageView2/0/q/50|imageslim'
    },
    {
        id: 2007,
        site: {
            x: 0,
            y: 3
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fm4DqB0VKXcLXaa4P2suM1i-2LMZ?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/Fkp-2UvHIyIqEW9pu5tZKNpvcCov?imageView2/0/q/50|imageslim'
    },
    {
        id: 2008,
        site: {
            x: 1,
            y: 3
        },
        yearImgurl: 'http://res.training.luojigou.vip/FlEj53_PWeL59J8V6qqduokmrEif?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FpIzAvfIOeIhBEtzVEZYp74y7Wh3?imageView2/0/q/50|imageslim'
    },
    {
        id: 2009,
        site: {
            x: 2,
            y: 3
        },
        yearImgurl: 'http://res.training.luojigou.vip/FtRU3rBk7D0SBEmbTujXX1o3THTU?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/Fnmlx106pwroL9I6UNo81BTpxGyO?imageView2/0/q/50|imageslim'
    },
    {
        id: 2010,
        site: {
            x: 3,
            y: 3
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fmx2IObHIKURUiGbrvX4cpZ-u5MB?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/Fg2GfiNmRknqRjTbzvCq09ewERIH?imageView2/0/q/50|imageslim'
    },
    {
        id: 2011,
        site: {
            x: 3,
            y: 2
        },
        yearImgurl: 'http://res.training.luojigou.vip/FutAwrnX_ypeS4bUqol5xKVVqrXU?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FuPF8r4-f8-_SY_v0Tky2AnFPYeH?imageView2/0/q/50|imageslim'
    },
    {
        id: 2012,
        site: {
            x: 2,
            y: 2
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fg3Jph3aJcX-hQtbvOs5UJZCzmj7?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/Fp5DT3Tg3CBl2rvjT9sIsCBcUSWu?imageView2/0/q/50|imageslim'
    },
    {
        id: 2013,
        site: {
            x: 1,
            y: 2
        },
        yearImgurl: 'http://res.training.luojigou.vip/FjWOsyUqGM6eIaPW3_lCzDzw3h1M?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FirCgjTps0bLqGV5-TOpuX6q8SMl?imageView2/0/q/50|imageslim'
    },
    {
        id: 2014,
        site: {
            x: 0,
            y: 2
        },
        yearImgurl: 'http://res.training.luojigou.vip/FqI9b5_4iP6WmoVE_z7o9RLm7RZe?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FlyzOxQWuiW2nYmACRUPsiCLyuw7?imageView2/0/q/50|imageslim'
    },
    {
        id: 2015,
        site: {
            x: 0,
            y: 1
        },
        yearImgurl: 'http://res.training.luojigou.vip/FoeSNwPl-fQXqwwow99j9Rsd9tjB?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FmBATtftJW08bU-5KGBFuKsAQSN1?imageView2/0/q/50|imageslim'
    },
    {
        id: 2016,
        site: {
            x: 1,
            y: 1
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fl2SA1cd8DqIzQGIQqh5qrNUMmR6?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FoaOya6X8s6j3Bzc2oBNDvX-JHW2?imageView2/0/q/50|imageslim'
    },
    {
        id: 2017,
        site: {
            x: 2,
            y: 1
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fi_RKVrGct2V235xsKpwsIA51YX-?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FsALqlvULFPhf-kxcPw1YtRiZjIG?imageView2/0/q/50|imageslim'
    },
    {
        id: 2018,
        site: {
            x: 3,
            y: 1
        },
        yearImgurl: 'http://res.training.luojigou.vip/FvN4BWxIckbJmo_qrN7mlILrtQKg?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/FvQZtrIRkaNzGJ8KbF1-Cl-k5hfJ?imageView2/0/q/50|imageslim'
    },
    {
        id: 2019,
        site: {
            x: 3,
            y: 0
        },
        yearImgurl: 'http://res.training.luojigou.vip/Fgr3xXoLsgpIP2wBglovLx0e89Mb?imageView2/0/q/50|imageslim',
        eventImgurl: 'http://res.training.luojigou.vip/Flio74FIlTt_aYhyW-3scKmhSrHc?imageView2/0/q/50|imageslim'
    },
    {
        id: 2020,
        site: {
            x: 2,
            y: 0
        },
        yearImgurl: 'http://res.training.luojigou.vip/FhjVzCv4CjuHsuCjJvSWGGxruzxv?imageView2/0/q/50|imageslim'
    },
])
export default {
  name: 'BrandPage',
  components: {
  
  },
  mounted () {
    if (process.browser) { 
      new WOW({
          offset: 0,   
          live: true
      }).init()
    }
   
  },
  data () {
      return {
        kernelData,
        currentMouserEnter: false,
        currentMouserId: '',
        cultrueData,
        ideaData,
        eventData,
        currentEventImgId: ''
      }
  },
  methods: {
      currentElement (item) {
          this.currentMouserId = item.id
          this.currentMouserEnter = true
      },
      currentEventImg (item) {
          this.currentEventImgId = item.id
      }
  }
}
</script>
<style scoped lang="scss">
.Brand-container {
    .banner-img {
        position: relative;
        img {
            width: 100%;
            height: 881px;
            display: block;
        }
        .label {
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color: #ffffff;
            font-size: 80px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .company-intro {
        width: 1200px;
        height: 447px;
        border-radius:14px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        overflow: hidden;
        margin-top: -80px;
        background: url('http://res.training.luojigou.vip/FnRDWlB5l2fF-qQ8xtP6LQC1MRwq?imageView2/0/q/50|imageslim') no-repeat;
        background-size: 1200px 447px;
        .company-intro-label {
            color: #262626;
            font-size: 48px;
            letter-spacing: 1.2px;
            text-align: center;
            margin-top: 60px;
        }
        .company-intro-text {
            width: 1009px;
            height: 144px;
            margin: 32px;
            color: #999999;
            font-size: 18px;
            letter-spacing: 0.45px;
            line-height: 36px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .event {
        position: relative;
        height: 1500px;
        .label {
            position: absolute;
            // width: 600px;
            // left: 778px;
            width: 100%;

            .label-en {
            font-size:78px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(35,106,250,1);
            opacity: 0.16;
            position: absolute;
        
            left: 50%;
            transform: translateX(-50%);
            }
            .label-zn {
            font-size:58px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(38,38,38,1);
            position: absolute;
            top: 45px;
            left: 50%;
            transform: translateX(-50%);
        }
      }
      .event-box {
        width: 1297px;
        height: 1296px;

        position: absolute;
        left: 50%;
        top: 259px;
        transform: translateX(-50%);
        .event-bgimg {
            width: 1297px;
            height: 1296px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            // object-fit: cover;
        }
        .event-box-item {
            position: absolute;
            .yearImgurl {
                width: 65px;
                height: 30px;
                object-fit: cover;
            }
            .eventImgurl {
               position: absolute;
               z-index: 1;
               transform: translate(-50%, -50%);
            }
        }
      }
    }
    .kernel {
        margin: 208px;
        height: 2000px;
        position: relative;
        .label {
            position: absolute;
            width: 100%;
            text-align: center;
            .label-en {
            font-size:78px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(35,106,250,1);
            opacity: 0.16;
            }
            .label-zn {
            font-size:58px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(38,38,38,1);
            // position: absolute;
            // top: 45px;
            // left: 32px;
            margin-top: -65px;
      
        }
      }
      .kernel-box {
         
          position: absolute;
          top: 300px;
          left: 50%;
          transform: translateX(-50%);
          display: grid;
          grid-template-columns: auto auto auto;
          grid-template-rows: auto auto auto;
          .kernel-box-item {
              margin-right: 40px;
              margin-bottom: 51px;
              .top {
                width: 373px;
                height: 466px;
                position: relative;
                .people-img {
                  width: 373px;
                  height: 466px;
                  display: block;
                }
                .overlay-img {
                  width: 373px;
                  height: 466px;
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 1;
                }
                .people-intro {
                    position: absolute;
                    bottom: 12px;
                    left: 37px;
                    .name {
                        font-size:45px;
                        font-family:PingFangSC-Semibold,PingFang SC;
                        font-weight:600;
                        color:rgba(255,255,255,1);
                        letter-spacing:1px;
                    }
                    .position {
                        font-size:20px;
                        font-family:PingFangSC-Regular,PingFang SC;
                        font-weight:400;
                        color:rgba(255,255,255,1);
                        letter-spacing: 0.5px;
                    }
                }
                .intro {
                    position: absolute;
                    bottom: 160px;
                    left: 37px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                    .intro-label {
                        font-size:16px;
                        margin-bottom: 12px;
                    }
                    .resume {
                        width:280px;
                    }
                }
              }
              .bottom {
                  width: 373px;
                  height: 8px;
                  background-color: #83ABF9;
              }
              
          }
      }
    }
    .cultrue {
        position: relative;
        height: 1000px;
        overflow: hidden;
        .label {
            position: absolute;
            width: 100%;
            // left: 778px;
            .label-en {
            font-size:78px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(35,106,250,1);
            opacity: 0.16;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            }
            .label-zn {
            font-size:58px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(38,38,38,1);
            position: absolute;
            top: 45px;
            left: 50%;
            transform: translateX(-50%);
      
        }
      }
      .cultrue-box {
          display: flex;
          justify-content: center;
          margin-top: 313px;
          .cultrue-box-item {
              margin-right: 151px;
              img {
                  width: 178px;
                  height: 159px;
              }
              .cultrue-box-item-label {
                font-size:38px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(0,0,0,1);
                text-align: center;
              }
              .cultrue-box-item-text {
                    width: 178px;
                   text-align: center;
                    font-size:18px;
                    font-family:PingFangSC-Regular,PingFang SC;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                    letter-spacing: 0.5px;
                    margin-top: 31px;
              }
          }
      }
      .cultrue-bgimg {
          position: absolute;
          z-index: -1;
          right: 226px;
          bottom: 155px;
          img {
            width: 627px;
            height: 499px;
          }
      }
    }
    .idea {
        height: 800px;
      .label {
            position: absolute;
            width: 100%;
            // left: 778px;
            .label-en {
            font-size:78px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(35,106,250,1);
            opacity: 0.16;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            }
            .label-zn {
            font-size:58px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(38,38,38,1);
            position: absolute;
            top: 45px;
            left: 50%;
            transform: translateX(-50%);
      
        }
      } 
      .idea-box {
          display: flex;
          justify-content: center;
          .idea-box-item {
              margin-top: 286px;
              margin-right: 40px;
              width: 373px;
              height: 299px;
              background:rgba(255,255,255,1);
              box-shadow:0px 2px 14px 0px rgba(201,199,195,0.25);
              border-radius:6px;
              padding: 38px 32px 51px 42px;
              box-sizing: border-box;
             .top {
                 
                 img {
                    width: 67px;
                    height: 64px;
                    object-fit: cover;
                 }
             }
             .center {
                 margin-top: 20px;
                 display: flex;
                 img {
                     width: 22px;
                     height: 36px;
                     margin-right: 9px;
                     object-fit: fill;
                 }
                 div {
                    font-size:24px;
                    font-family:PingFangSC-Medium,PingFang SC;
                    font-weight:500;
                    color:rgba(0,0,0,1);
                 }
             }
             .footer {
                font-size:15px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(153,153,153,1);
           
                margin-top: 10px;
             }
          }
      }
    }
}


.cp {
    cursor: pointer;
}
</style>