* {
  margin: 0;
  padding: 0;
}

header {
  height: 19rem;

  background-image: url('./photo-components/headerWithoutRoof.JPG');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

@media screen and (max-width: 640px) {
  .header {
    height: 12rem;
  }
}

nav {
  height: 5rem;
  padding-left: 3.6%;

  background-image: url('./photo-components/顶部弹窗定位.JPG');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;

  /*固定在屏幕顶端*/
  position: sticky;
  top: 0;
  left: 0;

  /*滑动消失*/
  opacity: 1;
  transition: opacity 0.7s ease;
}

nav.disappear {
  opacity: 0;
}
nav.appear {
  opacity: 1;
}

nav ul {
  list-style: none;
}
nav ul li {
  height: 5rem;
  width: 14%;
  margin-right: 1.9%;
  padding-right: 3%;
  padding-left: 1%;
  /* background-color: rgba(244, 247, 244, 0.521); */
  float: left;
  text-align: center;
  line-height: 5rem;

  position: relative;
}
.li2 {
  margin-right: 1.4%;
}
.li3 {
  margin-right: 1.7%;
}
.li4 {
  margin-right: 1.5%;
}
nav ul li a {
  display: block;
  height: 100%;
  width: 100%;
  color: transparent;
  text-decoration: none;

  position: absolute;
  top: 1rem;
}
.a1,
.a2,
.a3,
.a4,
.a5:hover {
  background-repeat: no-repeat;
  /*宽、高*/
  background-size: 170% 140%;
  background-position: center center;
}
.a1:hover {
  background-image: url('./photo-components/1HomePage.PNG');
}
.a2:hover {
  background-image: url('./photo-components/2CommercialWork.PNG');
}
.a3:hover {
  background-image: url('./photo-components/3PersonalWork.PNG');
}
.a4:hover {
  background-image: url('./photo-components/4Introduce.PNG');
}
.a5:hover {
  background-image: url('./photo-components/5Contact.PNG');
}

section {
  height: 100vh;
  width: 100%;

  /*scroll once a page*/
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
article {
  height: 100vh;
  width: 100%;

  /*scroll once a page*/
  scroll-snap-align: start;
}

.main {
  background-image: url('./photo-introduction/个人介绍背景.JPG');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;

  position: relative;
}

div {
  height: 100vh;
  width: 100vw;

  /*same thing about background*/
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}
.div1 {
  background-image: url('./photo-introduction/introduction.PNG');
}
.div2 {
  background-image: url('./photo-introduction/client.PNG');
}
.div3 {
  background-image: url('./photo-introduction/awards.PNG');
}
.div4 {
  background-image: url('./photo-introduction/review.PNG');
}
.div5 {
  background-image: url('./photo-introduction/contact.PNG');
}
.div6 {
  background-image: url('./photo-introduction/小猫咪，鼠标放在上面会咪咪叫.PNG');
}

ul {
  list-style: none;
  height: 100%;
  width: 100%;
}

div ul li {
  text-align: center;
  /* border: 1px solid #000; */

  /*same thing about background*/
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;

  /*same thing about position*/
  position: absolute;
}
div ul li a {
  display: block;

  text-decoration: none;
  color: transparent;
}

.awards {
  height: 43%;
  width: 33%;
}
#awards {
  top: 0;
  left: 0;
}
#awards a {
  height: 100%;
  width: 100%;
}

.client {
  height: 33%;
  width: 30%;
}
#client {
  top: 43%;
  left: 0;
}
#client a {
  height: 100%;
  width: 100%;
}

.review {
  height: 21%;
  width: 50%;
}
#review {
  bottom: 0;
  left: 0;
}
#review a {
  height: 100%;
  width: 100%;
}

.introduction {
  height: 78%;
  width: 38%;
}
#introduction {
  top: 0;
  left: 33%;
}
#introduction a {
  height: 100%;
  width: 100%;
}

.contact {
  height: 45%;
  width: 28%;
}
#contact {
  right: 0;
  bottom: 0;
}
#contact a {
  height: 100%;
  width: 100%;
}

article img {
  display: block;
  height: 100%;
  width: 100%;
}
/* div {
  height: 100vh;
  width: 100vw;

  background-image: url('./photo-introduction/个人介绍背景.JPG');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;

  position: relative;
}
div ul {
  list-style: none;
  height: 100%;
  width: 100%;
}

div ul li {
  text-align: center;
  border: 1px solid #000;

  //same thing about background
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;

  //same thing about position
  position: absolute;
}
div ul li a {
  display: block;
  text-decoration: none;
}

.introduction {
  height: 80vh;
  width: 40vw;
}
#introduction {
  background-image: url('./photo-introduction/introduction.PNG');

  top: 5rem;
  left: 15rem;
}
#introduction a {
  line-height: 80vh;
}

.client {
  height: 40vh;
  width: 20vw;
}
#client {
  background-image: url('./photo-introduction/client.PNG');

  top: 15rem;
  left: 5rem;
}
#client a {
  line-height: 40vh;
}

.awards {
  height: 40vh;
  width: 20vw;
}
#awards {
  background-image: url('./photo-introduction/awards.PNG');

  top: 5rem;
  left: 10rem;
}
#awards a {
  line-height: 40vh;
}

.review {
  height: 20vh;
  width: 40vw;
}
#review {
  background-image: url('./photo-introduction/review.PNG');

  bottom: 0rem;
  left: 10rem;
}
#review a {
  line-height: 20vh;
}

.contact {
  height: 40vh;
  width: 20vw;
}
#contact {
  background-image: url('./photo-introduction/contact.PNG');

  right: 5rem;
  bottom: 5rem;
}
#contact a {
  line-height: 40vh;
} */