<template>
  <div class="join-us-page">
    <div class="join-us-banner">
      <img src="~@/assets/join/01.jpg" />
      <div class="join-text">JOIN US</div>
    </div>
    <div class="joshine-value">
      <div class="joshine-join-wrapper">
        <div class="value-title">晶闪福利</div>
        <div class="value-content">
          <div class="value-pic" v-for="(item, index) in welfares" :key="index">
            <img :src="item.imgage" />
            <div class="value-pic-text cover-parent">
              <div class="value-pic-title">{{ item.title }}</div>
              <div class="value-pic-content">{{ item.msg }}</div>
            </div>
          </div>
        </div>
        <div class="job-wrapper">
          <div class="job-header">招聘信息</div>
          <!-- <div class="search-wrapper">
            <div class="input-wrapper">
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNTU0ZTY3My1iYjg3LTQ2OTctOWZlNy1lZDU2M2M4MWUwODQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTY3NTM1NjZGMjU2MTFFOTlCMTk4NDhEQTM1NEE5OTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTY3NTM1NjVGMjU2MTFFOTlCMTk4NDhEQTM1NEE5OTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphY2Y0ODkxMi05ODMyLTQ2YjEtYjNlZC1lY2JmMTNiZjZhZWQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzU1NGU2NzMtYmI4Ny00Njk3LTlmZTctZWQ1NjNjODFlMDg0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZAzfCAAAAv5JREFUeNq0l01IVFEYhu9MalJTaYETIWY1aE2JQUFEZVSSmbhooVErFwWtpF2bVgVRQbhqEegu6IekoKIfEhoKskD6gaS07AensnBKLSvLub0fvBcO0/05M3PvCw/3zPWcw3vO8X7n+0KmaRoemgdqwC5QDSrBIjADjIMhcg/cBsNGLhIjDoTBfnDL1NcQOA6WusxrS8hhR1aCo9wFS72gBwyCSZAGRSAKNoAdIMK+z0EH6MpnR7aCt8oqr4MWEHVZ0SywFhwB3zhuGpwChTo7kvliizJRCrSDoiy3WQwllIWcyNZIJRjm4BFQl+05Z+zQBcXMAV0jsurzHDQB6vMwYREBNzjnd7BGx8hOMMlB7T6YsCgHA5z3mpeRCDuJekGxj0aEg5x7DGxzM1LF4xA1+GxCmMv4IupifPqvXxhfcB2//yRjhChk+CeJvufYjoFSu05ipJnthBKeTcNfPeZzMVjoZGQV2/1gyghGr/msYCS2NVLCdtIITh/ADx55iZMR6/8hHaARU5k/7GRknO1ogEbKlAtxzMnIS7aXg4KAjMS483JEn5yM3GF7Y4C7soLPd25GJMf4A6qYffktyVla2JZMLuVk5BV4wN+HfA5mot1gNZgA3WDaLTHaq1zZe3wM72Wgj/MmnMK7evsWK1f2RxD3wYSkoWeUJKtBNzHaxLxB9BTE8jBRwMzMVHKcHtABanVSxTbwi4NfgOYcTEimd9Yl00+CJi8jQisYVTKr017ZFVnAlPCZRtmRylykUzmxHnSCOH/LPfEQXAF9vJf+sviKs5RoZOEl+spnqcvXNAr2cU7XAms+OAkGbVYkpcKUzXvZyaugBnRq7MyIdUwhjZJzGdgO6llyyu05mzHoN++q9+ARuAnuctxhFmk6N3OjjhFLhaAczAEzGfgkIv8En20iplwXl3h1eOl+NkZy0RJwGdR69EuHjWD1BrQy+3NV0EZEAyzmn7j06Q/6aFRJvnoRrMt4L6GhyQigjnGjAhxjSPgCusFm+ds/AQYAbz/ZoLUt0ocAAAAASUVORK5CYII="
                class="searchImg"
              /><input
                type="text"
                class="search-text"
                placeholder="请输入职位关键词"
                value=""
              />
            </div>
          </div> -->
          <!-- <div class="job-site">
            职位类型：<span
              class="recruitment"
              @click="onChangeRecruit('social')"
              :class="{ 'recruitment-active': activeType === 'social' }"
              >社招</span
            ><span class="sepline">|</span
            ><span
              class="recruitment"
              @click="onChangeRecruit('school')"
              :class="{ 'recruitment-active': activeType === 'school' }"
              >校招</span
            >
          </div> -->
          <!-- <div class="job-site">
            工作地点：<span
              class="city"
              @click="onChangeCity('gz')"
              :class="{ 'city-active': activeCity === 'gz' }"
              >广州</span
            ><span class="sepline">|</span
            ><span
              class="city"
              @click="onChangeCity('xa')"
              :class="{ 'city-active': activeCity === 'xa' }"
              >西安</span
            >
          </div> -->
          <div class="new-jobs">
            <div class="new-title">最新职位</div>
            <div class="specific-job">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item v-for="(j, index) in jobs" :key="index">
                  <template slot="title">
                    <div class="job-special-header">
                      <div class="job-name">
                        <div class="job-title">
                          <span>{{ j.name }}</span>
                        </div>
                        <div class="job-time">
                          <span>{{ j.time }}</span>
                        </div>
                      </div>
                      <div class="job-address">
                        <span>{{ j.address }}</span>
                      </div>
                    </div>
                  </template>
                  <div class="job-content">
                    <div class="skill-content">
                      <div class="skill-title">
                        <span>{{ j.skillcontents.title }}</span>
                      </div>
                      <div
                        class="skills-wrap"
                        v-for="(s, index) in j.skillcontents.skills"
                        :key="index"
                      >
                        <div class="wrap">
                          <span>{{ index + 1 }}、</span>
                          <span>{{ s }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="require-content">
                      <div class="require-title">
                        <span>{{ j.requireContents.title }}</span>
                      </div>
                      <div
                        class="require-wrap"
                        v-for="(s, index) in j.requireContents.requires"
                        :key="index"
                      >
                        <div class="wrap">
                          <span>{{ index + 1 }}、</span>
                          <span>{{ s }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="job-company-info">
                      <div class="company-address">
                        <span>办公地址：{{ j.officeAddress }}</span>
                      </div>
                      <div class="company-email">
                        <span>邮箱：{{ j.email }}</span>
                      </div>
                      <div class="company-contacy-way">
                        <span>联系人：{{ j.contactPerson }}</span>
                      </div>
                    </div>
                    <div class="join-btn">
                      <!-- <button @click="onJoinUs">加入我们</button> -->
                      <a href="mailto:lxc@joshine.cn">加入我们</a>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-dialog :visible.sync="joinVisible" width="800px">
      <el-form
        :model="joinForm"
        ref="joinForm"
        label-position="left"
        label-width="80px"
      >
        <el-form-item
          label="姓名"
          prop="name"
          :rules="[{ required: true, message: '请输入姓名' }]"
        >
          <el-input v-model="joinForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item
          label="电话"
          prop="phone"
          :rules="[{ required: true, message: '请输入电话' }]"
        >
          <el-input v-model="joinForm.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
          :rules="[{ required: true, message: '请输入邮箱' }]"
        >
          <el-input v-model="joinForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item
          label="内部推荐"
          prop="isRecommend"
          required
          class="is-recommend"
        >
          <el-radio v-model="joinForm.isRecommend" :label="false">否</el-radio>
          <el-radio v-model="joinForm.isRecommend" :label="true">是</el-radio>
        </el-form-item>
        <el-form-item
          label="推荐人"
          v-if="joinForm.isRecommend"
          prop="recommendUser"
          :rules="[{ required: true, message: '请输入推荐人' }]"
        >
          <el-input
            v-model="joinForm.recommendUser"
            placeholder="请输入推荐人"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <div class="upload-files">
            <input
              type="file"
              ref="file"
              style="display: none"
              @change="onFileChanged"
            />
            <div class="text-img" @click="$refs.file.click()">
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAAXNSR0IArs4c6QAABB5JREFUSA29ll1om1UYx5s3rU1XV9Auc20ptjIU9MLSNo1t6SiLE4SBDtaJWqXCvHJ4M8YYIhQ3GNMbwV0o3nQVvFjVCxlK8YPKbKTpB2NeCNsilqatm1Ompa7N8uHvf3Le9E3WWMeKB06er//z/N/znPOeN/6yOxyDg4MOKdUDAwOpsbGx7J2k+zYCh8PhB1KpVD+43dlsNoQMKsfn86WwE8gY8suqqqpPx8fHlxQrNUqShUKhHZlM5iSJ/RQrL1XA478B8Wnsk9PT0397/Hl1XTKInoPoQ0i2WmQSOUqxKL6fkcvM+9F3Mp8k9gRT7dW4QqwfwomcufZ7G1lbW9ubFHhLEJJuMt92HOe9WCz2+1paodbZ2blzdXX1GN5Xcmkmb//U1NQXXmQBWWtr62sE1QqN2YqKij0TExOXc+bGv+Tv5uHO8rC1yFvIyMzMzHk3M09G60K07gcAfoKX/X5/ZHJycs4F/ldJZ8Jgv6XOFggXKysrW6LR6DXlmz739fX50+m09sgPIAHRrlJE7e3tz7OCS5LrPYD2ihr7mTqtdSsrK8ddnFZRVl1dvY/A69LZn5fo9bT04gHJi+A+wr+N+WxdXV18cXHxx2LcwsLClYaGhgDYHkhbmpqaPk4kEn+YldG+QzYBnqnPi5Nli4jEM6gmh0Lqwhn518PTnVPE/xQumUy+LIzT3d2t471LBsEPJIuHLTiMXzfGNzYumS1FyMH6C6LPLPaApANrt9hlsJlfSXpHT09PkIJDzAxT+3TOxs9ZW4RDwnnzpLMl5uhT/xEtyqGFD1nQDU7NbHFCJBLR+/UuCXtp8SfeuGz5Fbc4b1h6fj85KI/qGqq1iOtWFggu3gyOIwVOj8F7NIo5yin0eHMqK7vOYoyBfq82+5YsWnGP8W7iD9tiDpMt6XMg+c0a2/W+bSJXGVfYg249Tue8yC7KQe8D8Xi8xQ1uhuSiaFcdOFKNjY1xhxduBsN8h5DPbAaJp8Y+6Szku5GRkaTDTxr7rAW82tvbG7D6XQmu2scg2aMiLMKcYrOBnBRz0xPcsbS09MZdsdhkWviOeJi6hIflNmRcuhdgH5KDcZQbwyw/Zxb+8mCXwKYlCyNrFjf/Yayn5QF7wv1y5z8xALaxsgvEGwCkkC8AGlFC8QC7xS3gjZHvI3Ycn9udr8E9RT3zxyhPpqSOjo7HWf55krbq6XEdAvy+YhsN7TVbMExun8X+FAgEet1vmXwF79X8/PxVPg26YPeSVCNZX1+/zGckKrBGV1fX9mAwONDc3Dw7Nze3nPNyDdXWniLnoLUv8l7pK3/VjUt633Dj576LlZeXd7Cy7+VA3mcC9oeL+xjqaSu9oV8wVhWrqakJcw5+9Qb/VecpfbT1YUkvkCPdxb6MSnr90ouxxfH/1f4Ha4m+UTBEeRoAAAAASUVORK5CYII="
                class="uploadImg"
              /><span class="upload-text">上传简历&amp;作品</span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <div class="join-btn" style="margin-top: 0">
          <button>提交</button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>
<script>
export default {
  name: 'JoinUsPage',
  data() {
    return {
      welfares: [
        {
          title: '基本保障',
          msg: '五险一金、工作日餐补、全勤奖励等完善的基本保障',
          imgage: require('../../assets/join/02.jpg'),
        },
        {
          title: '日常作息',
          msg: '弹性打卡，避开拥挤的上班人潮，完美错开早晚高峰',
          imgage: require('../../assets/join/03.png'),
        },
        {
          title: '节假日福利',
          msg: '传统节日有惊喜，西方节日不无趣',
          imgage: require('../../assets/join/04.png'),
        },
        {
          title: '带薪假期',
          msg: '病假、年假、产假、婚假等各式带薪假期等你来解锁',
          imgage: require('../../assets/join/05.png'),
        },
        {
          title: '晋升通道',
          msg: '优先内部选拔提升，升职加薪 ，指日可待',
          imgage: require('../../assets/join/06.png'),
        },
        {
          title: '团队活动',
          msg: '月度活动经费，用于部门伙伴聚餐、唱K等团建活动，每年不定期还会举行多次员工集体活动',
          imgage: require('../../assets/join/08.png'),
        },
      ],
      activeType: 'social',
      activeCity: 'gz',
      activeName: '1',
      jobs: [
        {
          name: '亚马逊运营',
          time: '2022-12-10',
          address: '西安',
          skillcontents: {
            title: '岗位要求',
            skills: [
              '独立操作管理亚马逊账户的销售，负责产品上传、下架、优化、爆款打造等',
              '保持亚马逊店铺的好评率和良好的信用度；根据后台数据分析销量变化的原因',
              '定期统计销售数据，根据市场变化以及平台规则及时调整销售策略',
            ],
          },
          requireContents: {
            title: '任职要求',
            requires: [
              '全日制本科及以上学历',
              '对跨境电商或外贸行业感兴趣，对待互联网营销工作充满热情',
              '有良好的逻辑分析能力，数据分析能力，具有高度的责任心',
              '接受有相关经验的优秀应届生（无需经验，有培训，有专门导师带新人），有经验者可以放宽学历及其他要求（薪资可面议）',
            ],
          },
          officeAddress: '西安雁塔区金石·柏朗2101',
          email: 'lxc@joshine.cn',
          contactPerson: '人事部',
        },
        {
          name: '速卖通运营专员',
          time: '2022-12-10',
          address: '西安',
          skillcontents: {
            title: '岗位要求',
            skills: [
              '负责速卖通店铺的经营与销售，全盘操作速卖通的销售和管理',
              '制作和审查产品的图片、编辑商品的中英文描述、分类、价格、服务条款等，完善各产品的上架工作',
              '进行店铺和产品的优化，提高店铺曝光度，提升转化率',
            ],
          },
          requireContents: {
            title: '任职要求',
            requires: [
              '全日制本科及以上学历',
              '对跨境电商或外贸行业感兴趣，对待互联网营销工作充满热情',
              '有良好的逻辑分析能力，数据分析能力，具有高度的责任心',
              '接受有相关经验的优秀应届生（无需经验，有培训，有专门导师带新人），有经验者可以放宽学历及其他要求（薪资可面议）',
              '渴望付出与回报成正比的岗位',
            ],
          },
          officeAddress: '西安雁塔区金石·柏朗2101',
          email: 'lxc@joshine.cn',
          contactPerson: '人事部',
        },
        {
          name: 'FB广告投放（白名单不挂站）',
          time: '2022-12-10',
          address: '西安',
          skillcontents: {
            title: '岗位要求',
            skills: [
              '负责产品的FB广告平台投放，及针对不同产品制定营销策略，提升品牌影响力和用户关注度',
              '执行广告投放计划，实时负责监控广告后台数据及广告投放效果，分析并整理广告数据，分析潜在客户喜好，优化广告投放策略',
              '运用创新思维不断尝试新的目标群体和广告形式，寻找、测试和推广新的广告投放形式',
            ],
          },
          requireContents: {
            title: '任职要求',
            requires: [
              '全日制本科及以上学历',
              '对跨境电商或外贸行业感兴趣，对待互联网营销工作充满热情',
              '有良好的逻辑分析能力，数据分析能力，具有高度的责任心',
              '接受有相关经验的优秀应届生（无需经验，有培训，有专门导师带新人），有经验者可以放宽学历及其他要求（薪资可面议）',
              '渴望付出与回报成正比的岗位',
            ],
          },
          officeAddress: '西安雁塔区金石·柏朗2101',
          email: 'lxc@joshine.cn',
          contactPerson: '人事部',
        },
        {
          name: '晶闪科技招聘仓储',
          time: '2022-12-10',
          address: '广州',
          skillcontents: {
            title: '岗位要求',
            skills: [
              '认真，仔细，负责，服从管理',
              '能吃苦耐劳，学习接受能力强，有团队意识和责任心强，能承受一定的工作压力',
            ],
          },
          requireContents: {
            title: '任职职责',
            requires: [
              '检测产品，包装产品以及打包发货',
              '负责订单核对整理',
              '进出仓管理',
              '要求懂一定的电脑操作',
            ],
          },
          officeAddress:
            '广州番禺区晶闪科技广州市番禺区南村镇顺意坊大道东25-2号',
          email: 'lxc@joshine.cn',
          contactPerson: '人事部',
        },
      ],
      joinVisible: false,
      joinForm: {
        name: '',
        phone: '',
        email: '',
        isRecommend: false,
        recommendUser: '',
        resume: '',
      },
    }
  },
  methods: {
    onChangeRecruit(key) {
      this.activeType = key
    },
    onChangeCity(key) {
      this.activeCity = key
    },
    onJoinUs() {
      this.joinVisible = true
    },
    onFileChanged() {},
  },
}
</script>
<style lang="scss" scoped>
.join-us-page {
  &::v-deep {
    .el-form-item__content {
      display: flex;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
}

.is-recommend {
  display: flex;
  align-items: center;

  &::v-deep {
    .el-form-item__content {
      margin: 0 !important;
    }
  }
}

.upload-files {
  cursor: pointer;
}

.join-us-banner {
  height: 30vw;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.join-text {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  letter-spacing: 8px;
  font-size: 28px;
  transform: translate(-50%);
  width: 100%;
  text-align: center;
}

.joshine-value {
  background-color: #fcfcfc;
}

.joshine-join-wrapper {
  width: 70%;
  margin: 0 auto;
  padding-top: 48px;
  padding-bottom: 64px;
}

.value-title {
  font-size: 36px;
  font-weight: 500;
  position: relative;
  color: #111;

  &::after {
    width: 56px;
    height: 2.4px;
    content: '';
    display: block;
    background: var(--primary-color);
    position: absolute;
    bottom: -24px;
  }
}

.value-content {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.value-pic {
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
  }
}

.value-pic-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.value-pic-title {
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  transition: all 0.8s;
  text-align: center;
}

.value-pic-content {
  text-align: center;
  width: 100%;
  opacity: 0;
  padding: 0 45px;
  font-size: 15.2px;
  line-height: 36px;
  font-weight: 200;
  color: #fff;
  transition: all 0.8s;
  transform: translateY(36px);
}

.value-pic:hover .value-pic-content {
  opacity: 1;
  transform: translateY(0);
}

.job-header {
  font-size: 38px;
  font-weight: 500;
  text-align: center;
  color: #323232;
}

.search-wrapper {
  text-align: center;
}

.input-wrapper {
  width: 560px;
  height: 64px;
  margin: 24px auto 0;
  position: relative;

  .searchImg {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .search-text {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    background: #f08917;
    padding-left: 32px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    outline: 0;
    border: none;
  }
}

.job-wrapper {
  padding: 48px;
}
input::placeholder {
  color: #fff;
}

.job-site {
  text-align: center;
  margin-top: 16px;
  font-weight: 500;
  color: #323232;
}

.recruitment-active {
  color: var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
}
.recruitment,
.city {
  cursor: pointer;
}

.sepline {
  width: 1.6px;
  height: 16px;
  margin: 0px 20px;
}

.city-active {
  border-bottom: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.new-title {
  font-size: 32px;
  margin: 20px 0px;
}

.job-special-header {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-address {
  margin-right: 20px;
  color: #777;
}

.job-title {
  height: 20px !important;
  color: #5f91c5;
  font-size: 16px;
}

.job-time {
  color: #777;
  font-size: 14px;
}

.specific-job {
  &::v-deep {
    .el-collapse-item__wrap {
      margin-top: 20px;
    }
    .el-collapse-item__content {
      font-size: 16px !important;
    }
  }
}

.skill-content {
  margin-bottom: 20px;
}

.require-content {
  margin-bottom: 20px;
}

.join-btn {
  margin: 0 auto;
  margin-top: 20px;

  button,
  a {
    background-color: var(--primary-color);
    border: none;
    outline: none;
    color: #fff;
    padding: 12px 50px;
    cursor: pointer;
    box-shadow: 4px 4px 12px var(--primary-color);
    text-decoration: none;
  }
}

.text-img {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1000px) {
  .joshine-join-wrapper {
    padding: 3.66vw 7.01vw 0;
    width: 100%;
  }

  .value-title {
    font-size: 6.51vw;
    margin-top: 7.01vw;

    &::after {
      width: 26.58vw;
      bottom: -2.92vw;
    }
  }
  .value-content {
    margin-top: 10.66vw;
    grid-template-columns: repeat(1, 1fr);
  }

  .value-pic-title {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .value-pic-content {
    opacity: 1;
    line-height: 18px;
    font-size: 14px;
    padding: 0 20px;
    transform: translateY(0);
  }

  .value-pic:hover .value-pic-content {
    top: 70px;
  }
  .value-pic:hover .value-pic-title {
    top: 50px;
  }

  .job-wrapper {
    padding: 0;
    margin-top: 30px;
  }
  .job-header {
    font-size: 6.51vw;
    text-align: left;
  }

  .new-title {
    font-size: 16px;
    font-weight: 100;
    margin: 10px 0;
  }

  .job-title,
  .job-time {
    font-size: 12px;
  }

  .job-address {
    margin-right: 10px;
    font-size: 12px;
  }

  .specific-job {
    margin-bottom: 20px;
  }

  .join-text {
    font-size: 18px;
  }
}
</style>
