@import './common.css';

/* showcase */
#showcase {
  background: url(../image/showcase_bg.jpeg) no-repeat;
  background-position: center center;
  background-size: cover;
  height: 500px;
}
#showcase .showcase-content {
  color: #fff;
  text-align: center;
  padding-top: 100px;
}
#showcase .showcase-content h2 {
  font-size: 60px;
  line-height: 1.2em;
}
#showcase .showcase-content p {
  font-size: 20px;
  line-height: 1.7em;
  padding-bottom: 25px;
}

/* about-info */
#about-info .info-left {
  float: left;
  width: 50%;
  height: 100%;
}
#about-info .info-right {
  float: right;
  width: 50%;
  height: 100%;
}
#about-info .info-left p {
  text-indent: 2em;
}
#about-info .info-right img {
  display: block;
  width: 80%;
  margin: 0 auto;
  border-radius: 50%;
}
/* introdction */
#introdction {
  /* height: 700px;  */
  background: url(../image/introduction_bg.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 100px;
}
#introdction h2 {
  color: #333;
  text-align: center;
  padding-bottom: 40px;
}
#introdction .introduce {
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 5px;
}
#introdction .introduce:nth-child(2) {
  transform: translateX(-1200px);
  animation: introduce 1.5s ease-in forwards;
}
#introdction .introduce:nth-child(3) {
  transform: translateX(1200px);
  animation: introduce 1.5s ease-in forwards;
}
#introdction .introduce:nth-child(4) {
  transform: translateX(-1200px);
  animation: introduce 1.5s ease-in forwards;
}

#introdction .introduce:hover {
  box-shadow: 4px 4px 3px 3px rgba(220, 221, 137, 0.7);
}
#introdction .introduce img {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

/* home-info */
#home-info {
  height: 400px;
}
#home-info .info-img {
  float: left;
  width: 50%;
  background: url(../image/home-info_bg.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
}
#home-info .info-content {
  float: right;
  width: 50%;
  text-align: center;
  height: 100%;
  padding: 50px 30px;
  overflow: hidden;
}
#home-info .info-content p {
  padding-bottom: 30px;
}