<template>
  <div class="section section1" data-anchor="section1">
    <div class="logo" />
    <div class="title1">
      <span>南京博物院90周年院庆系列特展</span>
    </div>
    <div class="section1-box">
      <img src="/img/section1/section1-ww.webp" />
      <div class="section1-title"></div>
    </div>
    <div class="txt">
      <p class="txt1">中国玉器的万年史诗图卷</p>
      <p class="entxt txt2">An Epic of Chinese Jade for 10,000 Years</p>
      <p class="entxt txt3">
        Diversity and Unity,Inheritance and Innovation,Inclusiveness and
        Gentleness
      </p>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
@import "/src/assets/style/index.css";
.section {
  position: relative;
}
.section1 {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background: url(/img/section1/bg.webp) no-repeat center/cover;
  position: relative;
}
.section1 {
  .logo {
    z-index: 1;
    width: 6rem;
    height: 6.375rem;
    margin-bottom: 1.5rem;
    display: block;
    background: url(/img/section1/logo.webp) no-repeat center/cover;
  }
  .title1 {
    z-index: 1;
    font-size: 0.8rem;
    color: #997946;
    letter-spacing: 0.5rem;
    transform: translate3d(0, -3%, 0);
  }
  .section1-box {
    position: relative;
    height: min(44rem, 70vh);
    margin: -4rem 0 -6rem;
    text-align: center;
    transform: translate3d(0, -3%, 0);
    img {
      z-index: 1;
      position: relative;
      max-width: 100%;
      max-height: 100%;
    }
  }
  .section1-title {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/img/section1/section1-title.webp) no-repeat center/contain;
  }
  .txt {
    text-align: center;
    .txt1 {
      font-size: 2rem;
      color: #ebeae3;
      margin-bottom: 1rem;
      letter-spacing: 0.2rem;
    }
    .txt2 {
      font-size: 1.5rem;
      color: #d09d68;
    }
    .txt3 {
      font-size: 0.75rem;
      color: #d09d68;
      letter-spacing: 0.015rem;
    }
  }
}
</style>
