<template>
  <div class="home">
    <div class="top_nav">
      <div class="top_nav_cont">
        <a class="logo_a">
          <img src="@/assets/images/logo.png" />
        </a>
        <div class="tool_bar">
          <ul>
            <li>
              <a href="https://www.facebook.com/mymymoba" target="_blank">
                <img src="@/assets/images/t-icon1.png" />
              </a>
            </li>
            <li>
              <a href="https://t.me/+Wrdk1D5ay9dhZjM1" target="_blank">
                <img src="@/assets/images/t-icon2.png" />
              </a>
            </li>
            <li>
              <a href="https://twitter.com/MyMyMoba" target="_blank">
                <img src="@/assets/images/t-icon3.png" />
              </a>
            </li>
            <li>
              <a target="_blank" href="https://discord.gg/Ha3j4qFCrR">
                <img src="@/assets/images/t-icon4.png" />
              </a>
            </li>
            <li>
              <a href="https://www.reddit.com/user/MyMyMoba11/" target="_blank">
                <img src="@/assets/images/t-icon5.png" />
              </a>
            </li>
            <li>
              <a href="https://medium.com/@mymymoba11" target="_blank">
                <img src="@/assets/images/t-icon6.png" />
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="first_part">
      <div class="words_cont">
        <div class="phone_logo">
          <img src="@/assets/images/logo.png" />
        </div>
        <h1><span class="smallsize">A NFT METAVERSE</span> BLOCKCHAIN GAME</h1>
        <h2>
          <p>INTEGRATING A GAMIFIED DEFI</p>
          <p>AND PROFESSIONAL MOBA</p>
        </h2>
      </div>
    </div>
    <div class="sec_part">
      <div class="every_part_cont">
        <h3 class="every_part_title">Token</h3>
      </div>
      <div class="every_part_cont flex">
        <div class="token_main tleft">
          <img src="@/assets/images/token-icon.png" class="token_img" />
          <span class="font60 copfont">MMB</span>- the predominant value token
          as well as the governance token in our project, can bring blockchain
          players and game players together. MMB holders will be the leading
          voices as project develops and evolves.
        </div>
      </div>
    </div>
    <div class="three_part">
      <div class="every_part_cont">
        <h3 class="every_part_title">Game Features</h3>
        <div class="features_list">
          <ul class="clearfix">
            <li v-for="(item, index) in features_data" :key="index">
              <div class="border_div">
                <div class="features_img"><img :src="item.imgsrc" /></div>
                <div class="features_words">
                  <p class="features_name">{{ item.name }}</p>
                  <p class="features_intro">{{ item.intro }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="four_part">
      <div class="every_part_cont">
        <h3 class="every_part_title tleft">roadmap</h3>
        <div class="map_cont">
          <!-- 1 -->
          <div class="every_map_box first_box">
            <img src="@/assets/images/home/map/map-line.png" class="map_line" />
            <div class="map_top">
              <div class="map_top_line"></div>
              <div class="map_top_words">
                <p>Q4</p>
                <p>2021</p>
              </div>
            </div>
            <div class="map_middle">
              <img src="@/assets/images/home/map/map-img1.png" />
            </div>
            <div class="map_bottom">
              <ul>
                <li>
                  <span class="dot_span"></span><span>Organize team</span>
                </li>
                <li>
                  <span class="dot_span"></span><span>Brand & Strategy</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 2 -->
          <div class="every_map_box sec_box">
            <img src="@/assets/images/home/map/map-line.png" class="map_line" />
            <div class="map_top">
              <div class="map_top_line"></div>
              <div class="map_top_words">
                <p>Q1</p>
                <p>2022</p>
              </div>
            </div>
            <div class="map_middle">
              <img src="@/assets/images/home/map/map-img2.png" />
            </div>
            <div class="map_bottom">
              <ul>
                <li>
                  <span class="dot_span"></span
                  ><span>Online official website</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Release social media</span>
                </li>
                <li><span class="dot_span"></span><span>Community</span></li>
                <li>
                  <span class="dot_span"></span><span>Release white pages</span>
                </li>
                <li>
                  <span class="dot_span"></span><span>Publish MMB Token</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Air drop in MMB Community</span>
                </li>
                <li>
                  <span class="dot_span"></span><span>Private sales</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Smart contract audit</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Decentralized NFT trading market</span>
                </li>
                <li>
                  <span class="dot_span"></span><span>Release Hero-NFT</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 3 -->
          <div class="every_map_box three_box">
            <img src="@/assets/images/home/map/map-line.png" class="map_line" />
            <div class="map_top">
              <div class="map_top_line"></div>
              <div class="map_top_words">
                <p>Q2</p>
                <p>2022</p>
              </div>
            </div>
            <div class="map_middle">
              <img src="@/assets/images/home/map/map-img3.png" />
            </div>
            <div class="map_bottom">
              <ul>
                <li>
                  <span class="dot_span"></span
                  ><span>Bank MMB mortagage investment</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Hero Farm Hero-NFT MMB mining</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Decentralized exchange</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Hero-NFT development</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 4 -->
          <div class="every_map_box four_box">
            <img src="@/assets/images/home/map/map-line.png" class="map_line" />
            <div class="map_top">
              <div class="map_top_line"></div>
              <div class="map_top_words">
                <p>Q3</p>
                <p>2022</p>
              </div>
            </div>
            <div class="map_middle">
              <img src="@/assets/images/home/map/map-img4.png" />
            </div>
            <div class="map_bottom">
              <ul>
                <li>
                  <span class="dot_span"></span
                  ><span>Officially release MOBA game </span>
                </li>
                <li><span class="dot_span"></span><span>Land auction</span></li>
                <li>
                  <span class="dot_span"></span
                  ><span>Open Hero skin system</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- 5 -->
          <div class="every_map_box">
            <div class="map_top">
              <div class="map_top_line"></div>
              <div class="map_top_words">
                <p>Q4</p>
                <p>2022</p>
              </div>
            </div>
            <div class="map_middle">
              <img src="@/assets/images/home/map/map-img5.png" />
            </div>
            <div class="map_bottom">
              <ul>
                <li>
                  <span class="dot_span"></span
                  ><span>Open MOBA tournaments</span>
                </li>
                <li>
                  <span class="dot_span"></span
                  ><span>Hero-NFT fighting for supremacy</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="five_part">
      <div class="every_part_cont">
        <h3 class="every_part_title">Core team</h3>
        <div class="swiper-box">
          <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide
              class="swiper-slide"
              v-for="(item, index) in cat_tab_team"
              :key="index"
            >
              <div class="cat_tab_team" :class="item.clicked ? 'clicked' : ''">
                <div class="team_people">
                  <img :src="item.imgsrc" />
                  <div class="team_words">
                    <p class="font26 special-font">XX</p>
                    <p class="font16 intro">xxxxxxxxx</p>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="pagination"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
    <div class="foot_part">
      <div class="foot_part_cont">
        <!-- <h3 class="every_part_title">Follow us!</h3> -->
        <div class="foot_logo">
          <img src="@/assets/images/logo.png" />
        </div>
        <div class="Subscribe_part">
          <p class="special-font font16 colorf tleft padL10">Subscribe to our Newsletter</p>
          <div class="email_part">
            <div class="email_border">
              <input
                type="email"
                class="email_input"
                placeholder="Enter Email address"
                :value="emailVal"
              />
              <button class="submit_btn btn">SUBSCRIBE</button>
            </div>
          </div>
        </div>
        <div class="foot_tool_part">
          <div class="tool_bar foot_tool">
            <ul>
              <li>
                <a target="_blank" href="https://www.facebook.com/mymymoba">
                  <img src="@/assets/images/f-nav-icon1.png" />
                </a>
              </li>
              <li>
                <a target="_blank" href="https://t.me/+Wrdk1D5ay9dhZjM1">
                  <img src="@/assets/images/f-nav-icon2.png" />
                </a>
              </li>
              <li>
                <a target="_blank" href="https://twitter.com/MyMyMoba">
                  <img src="@/assets/images/f-nav-icon3.png" />
                </a>
              </li>
              <li>
                <a target="_blank" href="https://discord.gg/Ha3j4qFCrR">
                  <img src="@/assets/images/f-nav-icon4.png" />
                </a>
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.reddit.com/user/MyMyMoba11/"
                >
                  <img src="@/assets/images/f-nav-icon5.png" />
                </a>
              </li>
              <li>
                <a target="_blank" href="https://medium.com/@mymymoba11">
                  <img src="@/assets/images/f-nav-icon6.png" />
                </a>
              </li>
            </ul>
          </div>
          <div class="f_b_part">
            <span>© 2022 by MyMyMoba</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /srcf-nav-icon1
export default {
  name: "Home",
  components: {},
  data() {
    return {
      features_data: [
        {
          name: "Gamified Defi",
          intro: "A variety of gamified Defi gameplay",
          imgsrc: require("../assets/images/home/features/1.png"),
        },
        {
          name: "Socialization",
          intro: "A Moba game, fairly competing with friends around the world",
          imgsrc: require("../assets/images/home/features/2.png"),
        },
        {
          name: "Leasing",
          imgsrc: require("../assets/images/home/features/3.png"),
          intro:
            "Providing hero leasing services based on smart contract agreements. Moba players can play and win games without any threshold, and investors can easily enjoy asset appreciation",
        },
        {
          name: "VR",
          imgsrc: require("../assets/images/home/features/4.png"),
          intro:
            "Supporting VR, Android, IOS multiple platforms and devices, and striving to create an immersive experience of the Moba Metaverse",
        },
        {
          name: "Hero",
          imgsrc: require("../assets/images/home/features/5.png"),
          intro:
            "Out-of-game hero development and battle gameplay based on Moba hero development",
        },
        {
          name: "Win-Win",
          imgsrc: require("../assets/images/home/features/6.png"),
          intro:
            "All hero skins are herokin-nft mined by players, not for sell",
        },
        {
          name: "Earning",
          imgsrc: require("../assets/images/home/features/7.png"),
          intro:
            "Not only having Play to Earn but also innovative Participate to Earn, allowing more people to share development dividends",
        },
        {
          name: "DAO",
          imgsrc: require("../assets/images/home/features/8.png"),
          intro:
            "DAO more community participation in content creation and community-driven game development",
        },
      ],
      cat_tab_team: [
        {
          id: "1",
          imgsrc: require("../assets/images/home/team/1.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
        {
          id: "2",
          imgsrc: require("../assets/images/home/team/2.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
        {
          id: "3",
          imgsrc: require("../assets/images/home/team/3.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
        {
          id: "4",
          imgsrc: require("../assets/images/home/team/4.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
        {
          id: "5",
          imgsrc: require("../assets/images/home/team/5.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
        {
          id: "6",
          imgsrc: require("../assets/images/home/team/6.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
        {
          id: "7",
          imgsrc: require("../assets/images/home/team/7.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
        {
          id: "8",
          imgsrc: require("../assets/images/home/team/8.png"),
          name: "XX",
          intro: `xxxxxxxxx`,
          clicked: true,
        },
      ],
      swiperOption: {
        observe: true,
        observeParents: true,
        initialSlide: 0,
        slidesPerGroup: 1,
        slidesPerView: 2,
        paginationClickable: true,
        slideToClickedSlide: true,
        centeredSlides: true,
        speed: 1500,
        //显示分页
        pagination: ".pagination",
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        paginationClickable: true,
        autoResize: true,
        autoplay: 0,
        //开启无限循环模式
        loop: false,
        autoplayDisableOnInteraction: false,
        onAfterResize: function (swiper) {
          if (document.documentElement.clientWidth <= 950) {
            swiper.params.slidesPerView = 2;
            swiper.params.slidesPerGroup = 1;
            swiper.params.loop = false;
            swiper.params.centeredSlides = true;
            swiper.params.autoplay = 0;
          } else {
            swiper.params.slidesPerView = 4;
            swiper.params.slidesPerGroup = 4;
            swiper.params.loop = true;
            swiper.params.centeredSlides = false;
            swiper.params.autoplay = 3000;
          }
          swiper.init();
        },
        onInit: function (swiper) {
          //Swiper初始化了
          if (document.documentElement.clientWidth <= 950) {
            swiper.params.slidesPerView = 2;
            swiper.params.slidesPerGroup = 1;
            swiper.params.loop = false;
            swiper.params.centeredSlides = true;
            swiper.params.autoplay = 0;
          } else {
            swiper.params.slidesPerView = 4;
            swiper.params.slidesPerGroup = 4;
            swiper.params.loop = true;
            swiper.params.centeredSlides = false;
            swiper.params.autoplay = 3000;
          }
        },
      },
      emailVal:'',
    };
  },
  methods: {
    toggleBodyClass() {
      let e = document.querySelector("body");
      let e1 = document.querySelector("#app");
      e1.scrollTop > 0
        ? e.classList.add("scrolladd")
        : e.classList.remove("scrolladd");
    },
  },
  beforeDestroy() {
    let e = document.querySelector("#app");
    e.removeEventListener("scroll", this.toggleBodyClass);
  },
  mounted() {
    let $this = this;
    let e = document.querySelector("#app");
    console.log(e);
    e.addEventListener("scroll", this.toggleBodyClass);
  },
};
</script>
<style lang="less">
.home {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.top_nav {
  width: 100vw;
  height: 6vw;
  min-height: 60px;
  max-height: 98px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  transition: transform 0.5s;
  z-index: 2;
}
.top_nav_cont {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  height: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.logo_a {
  cursor: pointer;
  height: 100%;
}
.logo_a img {
  max-width: 278px;
  height: 100%;
}

.tool_bar ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.tool_bar ul li {
  padding: 0 15px;
}
.tool_bar ul li a {
  cursor: pointer;
  display: block;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool_bar ul li a img {
  width: 26px;
  opacity: 0.8;
}
.tool_bar ul li a:hover img {
  width: 28px;
  opacity: 1;
}
/* top header */
.scrolladd .top_nav {
  transform: translateY(-5px);
  background: #000;
}
.scrolladd .top_nav .logo_a,
.scrolladd .top_nav .tool_bar {
  margin-top: 5px;
}
.first_part,
.sec_part,
.three_part,
.four_part,
.five_part {
  width: 100%;
  min-height: 100vh;
}
.first_part {
  background: url(../assets/images/bg.jpg) no-repeat center top;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.phone_logo{display: none;position: absolute;top: 50px;left: 50%;max-width: 278px;margin-left: -139px;}
.words_cont {
  letter-spacing: 4px;
  width: 100%;
  max-width: 1480px;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
}
.words_cont h1 {
  font-size: 60px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2em;
  background: linear-gradient(134deg, #eaba99 0%, #ddc8b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.words_cont h2 {
  color: #fff;
  font-size: 30px;
  line-height: 1.5em;
  margin-top: 40px;
}

.sec_part {
  background: url(../assets/images/bg2.jpg) no-repeat center top;
  background-size: cover;
}
.three_part {
  background: url(../assets/images/bg3.png) no-repeat center top;
  background-size: cover;
}
.four_part {
  background: url(../assets/images/bg4.png) no-repeat center top;
  background-size: cover;
}
.five_part {
  background: url(../assets/images/bg1.png) no-repeat center top;
  background-size: cover;
}
.foot_part {
  background: #000;
  width: 100%;
  padding: 6.25vw 0;
}
.foot_part_cont {
  display: flex;
  max-width: 1480px;
  padding: 0 20px;
  margin: 0 auto;
  align-items: flex-start;
  justify-content: space-between;
}
.every_part_cont {
  width: 100%;
  max-width: 1480px;
  padding: 6.25vw 20px;
  margin: 0 auto;
  box-sizing: border-box;
}
.every_part_cont.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
h3.every_part_title {
  font-size: 48px;
  font-family: "ColusRegular";
  font-weight: bold;
  color: #eaba99;
  line-height: 1em;
  letter-spacing: 2px;
}

// sec
.token_main {
  width: calc(57.8vw + 100px);
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  line-height: 2.5em;
  letter-spacing: 2px;
  padding: 60px 8vw 60px 14vw;
  background: linear-gradient(
      -45deg,
      transparent 6%,
      rgba(234, 186, 153, 0.5) 0
    )
    bottom right;
  background-repeat: no-repeat;
  position: relative;
  margin-left: 8.8vw;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  font-weight: 400;
}
.token_img {
  position: absolute;
  width: 38vw;
  left: -16vw;
  top: -16vw;
}
.copfont {
  font-family: "ColusRegular";
}
// three7778
.features_list {
  margin: 40px auto 0;
}
.features_list ul li {
  width: calc(25% - 40px);
  height: 380px;
  position: relative;
  float: left;
  margin: 40px 20px 0;
  color: #fff;
  background: url(../assets/images/home/features/features-bg.png) no-repeat
    center bottom;
  background-size: 100% 100%;
}
.features_img {
  width: 100%;
  height: 55%;
  display: flex;
  height: 50%;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.features_words {
  margin-top: 10px;
}
.features_list ul li img {
  max-width: 100%;
  max-height: 100%;
}
.features_list ul li .border_div {
  width: calc(100% - 20px);
  height: 380px;
  position: absolute;
  top: -10px;
  left: 10px;
  background: url(../assets/images/home/features/features-border.png) no-repeat
    center top;
  background-size: 100% 100%;
}
.features_name {
  font-family: "ColusRegular";
  color: #eaba99;
  font-size: 24px;
  padding: 0 14px;
  word-break: break-all;
}
.features_intro {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5em;
}
// four
.map_cont {
  margin: 0 auto;
  display: flex;
}
.every_map_box {
  position: relative;
  width: 20%;
  padding-top: 107px;
}
.first_box {
  margin-top: 304px;
}
.sec_box {
  margin-top: 230px;
}
.three_box {
  margin-top: 154px;
}
.four_box {
  margin-top: 76px;
}
.map_top {
  display: flex;
  align-items: flex-start;
  position: absolute;
  left: 42px;
  top: 0;
}
.map_top_line {
  width: 3px;
  height: 107px;
  background: #eaba99;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.map_top_words {
  font-size: 30px;
  text-align: left;
  font-family: "ColusRegular";
  margin-left: 4px;
  line-height: 1em;
}
.map_top_words p:first-child {
  margin-bottom: 10px;
}
.map_middle {
  width: 84px;
  height: 100px;
  background: url(../assets/images/home/map/map-circle.png) no-repeat center top;
  position: relative;
  padding: 6px;
  box-sizing: border-box;
  background-size: 100% auto;
}
.map_middle img {
  width: 100%;
}
.map_line {
  position: absolute;
  width: calc(100% - 80px);
  height: 70px;
  top: 50px;
  right: 2px;
}
.map_bottom {
  margin-left: 42px;
  margin-top: 18px;
}
.map_bottom ul li {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 8px 0;
}
.dot_span {
  display: block;
  width: 4px;
  height: 4px;
  background: #eaba99;
  border-radius: 50%;
}
.map_bottom ul li span:not(.dot_span) {
  margin-left: 5px;
  width: calc(100% - 9px);
  color: #ffffff;
  text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
// five
.swiper-box {
  width: 100%;
  height: 60vh;
  margin: 50px auto 30px;
  position: relative;
  padding: 0 40px;
}

.swiper-box .swiper-container {
  width: 100%;
  height: 100%;
  position: static;
}

.swiper-box .swiper-slide {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-box .swiper-button-next,
.swiper-box .swiper-container-rtl .swiper-button-prev {
  background: url(../assets/images/arrow-img.png) no-repeat center;
  width: 30px;
  height: 60px;
  background-size: 100% auto;
  transform: rotate(180deg);
}
.swiper-box .swiper-button-next:hover,
.swiper-box .swiper-container-rtl .swiper-button-prev:hover {
  background: url(../assets/images/arrow-img-s.png) no-repeat center;
  width: 30px;
  height: 60px;
  background-size: 100% auto;
  transform: rotate(0deg);
}
.swiper-box .swiper-button-prev,
.swiper-box .swiper-container-rtl .swiper-button-next {
  background: url(../assets/images/arrow-img.png) no-repeat center;
  width: 30px;
  height: 60px;
  background-size: 100% auto;
}
.swiper-box .swiper-button-prev:hover,
.swiper-box .swiper-container-rtl .swiper-button-next:hover {
  background: url(../assets/images/arrow-img-s.png) no-repeat center;
  width: 30px;
  height: 60px;
  background-size: 100% auto;
  transform: rotate(180deg);
}
.pagination {
  .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    background: url(../assets/images/dot.png) no-repeat center;
    background-size: 100% auto;
    border-radius: 0;
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    background: url(../assets/images/dot-s.png) no-repeat center;
    background-size: 100% auto;
  }
}
.cat_tab_team img {
  max-width: 100%;
}

.swiper-box .swiper-button-prev.swiper-button-disabled,
.swiper-box .swiper-button-next.swiper-button-disabled {
  opacity: 0.2;
}

.swiper-box .swiper-container {
  .swiper-wrapper {
    align-items: center;
  }
}
.team_people {
  width: 200px;
}
.team_words {
  padding: 25px 10px 10px;
  background: url(../assets/images/team-bg.png);
  background-size: 100% 100%;
  margin-top: -6px;
  height: 179px;
}
.team_words .special-font {
  color: #eaba99;
}
.team_words .intro {
  margin-top: 10px;
}
// foot
.foot_logo,.Subscribe_part,.foot_tool_part{width: calc(33.3% - 20px);margin: 0 10px;}
.foot_tool_part{display: flex;align-items: flex-end;flex-direction: column;}
.foot_logo img{max-width: 278px;width: 100%;}
.tool_bar.foot_tool{width: 100%;margin-bottom: 30px;max-width: 340px;}
.tool_bar.foot_tool ul{
  justify-content: space-between;
}
.tool_bar.foot_tool ul li {
  height: 28px;
}
.tool_bar.foot_tool ul li:last-child {padding-right: 0;}
.f_b_part {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  width: 100%;text-align: right;
}

.Subscribe_part{text-align: left;}
.email_part{margin-top: 20px;}
.email_border{
max-width: 360px;width: 100%;
height: 48px;
border-radius: 34px;
border: 1px solid #EABA99;padding:5px;display: flex;box-sizing: border-box;
}
.email_input{width: calc(100% - 118px);padding-left: 10px;background: none;color: #fff;}
.submit_btn {
  color: #000;
  width: 118px;
  height: 36px;line-height: 36px;
  background: linear-gradient(134deg, #eaba99 0%, #ddc8b7 100%);
  border-radius: 36px;
  text-align: center;
}
.submit_btn:hover{ background: linear-gradient(234deg, #eaba99 0%, #ddc8b7 100%);}
@media screen and (max-width: 1340px) {
  .features_list ul li {
    width: calc(25% - 30px);
    margin: 40px 15px 0;
  }
}
@media screen and (max-width: 1280px) {
  .features_list {
    max-width: 1160px;
    margin: 0 auto;
  }
  .features_list ul li {
    width: calc(33.3% - 40px);
    margin: 40px 20px 0;
  }
}
@media screen and (max-width: 1180px) {
  .map_line {
    height: 58px;
    top: 60px;
  }
  .four_box {
    margin-top: 65px;
  }
  .three_box {
    margin-top: 133px;
  }
  .sec_box {
    margin-top: 198px;
  }
  .first_box {
    margin-top: 264px;
  }

  .team_people {
    width: 180px;
  }
  .team_words {
    padding: 20px 10px 10px;
    margin-top: -6px;
    height: 160px;
  }
  .team_words .font26 {
    font-size: 22px;
  }
}
@media screen and (max-width: 1024px) {
  .features_list ul li {
    width: calc(33.3% - 30px);
    margin: 35px 15px 0;
  }
  .features_words {
    margin-top: 5px;
  }

  // foot 
  .foot_part_cont{flex-direction: column;justify-content: center;align-items: center;}
  .Subscribe_part{margin: 30px 0 40px;}
  .email_part{margin-top: 10px;}
  .email_border{height: 42px;margin: 0 auto;}
  .submit_btn{height: 30px;width: 100px;line-height: 30px;}
  .email_input {
    width: calc(100% - 100px);
  }
  .Subscribe_part .special-font{padding: 0;text-align: center;}
  .f_b_part{text-align: center;}
  .tool_bar.foot_tool ul li,.tool_bar.foot_tool ul li:last-child{padding: 0 10px;}
  .tool_bar.foot_tool{margin:0 auto 15px;}
}
@media screen and (max-width: 950px) {
  .top_nav{display: none;}
  .phone_logo{display: block;}
  h3.every_part_title {
    font-size: 38px;
  }
  .features_list {
    max-width: 720px;
    margin: 0 auto;
  }
  .features_list ul li {
    width: calc(50% - 30px);
  }
  .features_name {
    font-size: 22px;
  }
  // ------------------roadmap----------start-------
  .map_cont{flex-direction: column;}
  .map_top {
    left: 32px;
  }
  .map_top_line {
    height: 55px;
    width: 2px;
  }
  .every_map_box {
    padding-top: 55px;
  }
  .map_top_words {
    font-size: 22px;
  }
  .map_line {
    height: 45px;
    top: 24px;
    width: calc(100% - 64px);
    right: 1px;
  }
  .map_middle {
    width: 64px;
    height: 77px;
    padding: 4px;
  }
  .map_bottom {
    margin-left: 32px;
    margin-top: 0px;
  }
  .four_box {
    margin-top: 45px;
  }
  .three_box {
    margin-top: 91px;
  }
  .sec_box {
    margin-top: 136px;
  }
  .first_box {
    margin-top: 184px;
  }
  // ------------------roadmap------end-----------
  // 1
  .words_cont h1 {
    font-size: 46px;
  }
  .smallsize {
    font-size: 24px;
    display: block;
  }
  .words_cont h2 {
    font-size: 20px;
    font-weight: normal;
  }
  // 2
  .sec_part .every_part_cont.flex {
    height: calc(100vh - 40vw);
  }
  .token_main .font60 {
    font-size: 34px;
  }
  .token_main {
    margin-left: 0;
    margin-top: 18vw;
    padding: 8vw 28px 24px 34px;
  }
  .token_img {
    left: 7%;
    width: 86%;
    max-width: 720px;
    top: -38vw;
  }
  // 第5
  .five_part {
    .every_part_cont {
      padding: 6.25vw 0;
    }
    .swiper-box {
      padding: 0;
      .team_people {
        cursor: pointer;
      }
      .swiper-button-prev,
      .swiper-button-next {
        display: none;
      }
      .team_people {
        width: 70%;
        margin: 0 auto;
      }
      .swiper-slide.swiper-slide-active {
        .team_people {
          width: 80%;
        }
        .team_words {
          height: 179px;
        }
      }
    }
  }
  .foot_logo, .Subscribe_part, .foot_tool_part{width: 100%;}
}
@media screen and (max-width: 700px) {
  .five_part {
    .swiper-box {
      .team_people {
        width: 80%;
        margin: 0 auto;
      }
      .swiper-slide.swiper-slide-active {
        .team_people {
          width: 90%;
        }
        .team_words {
          height: 170px;
        }
      }
    }
  }
}
@media screen and (max-width: 650px) {
  .tool_bar ul li {
    padding: 0 10px;
  }
  .token_img {
    top: -41vw;
  }
  .token_main {
    line-height: 2em;
  }
}
@media screen and (max-width: 400px) {
  .words_cont h1 {
    word-break: break-all;
  }
  .token_img {
    top: -46vw;
  }
  .five_part {
    .swiper-box {
      .team_people {
        width: calc(100% - 10px);
      }
      .team_words {
        height: 140px;
      }
      .swiper-slide.swiper-slide-active {
        .team_people {
          width: calc(100% - 10px);
        }
        .team_words {
          height: 160px;
        }
      }
    }
  }
  .tool_bar.foot_tool ul li:first-child{padding-left: 0;}
  .tool_bar.foot_tool ul li:last-child{padding-right: 0;}
}
</style>
