@import "reset.css";

.introSection {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: row wrap;
  position: relative;
}
.introSection .introContent {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.introSection .introLeft {
  display: flex;
  width: 50%;
  display: flex;
  flex-flow: column nowrap;
}
.introLeft p {
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 180%;
  color: var(--sub-color);
}
.introLeft p span {
  color: var(--main-color);
  font-weight: 500;
  font-size: 2.1rem;
}
.introLeft p .bigName {
  font-size: 3.4rem;
}
.introFlowerPicture {
  width: 400px;
  height: 400px;
  background: url(../img/flower_vase.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: -200px;
}
.smallText {
  font-size: 230%;
  font-family: "Nanum Brush Script", cursive;
  font-weight: bold;
  color: var(--black-color);
  letter-spacing: 0rem;
  position: absolute;
  bottom: 200px;
  left: 0;
}
.introRight {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
}
.introRight .introPictureOne {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation: picRotateTwo 4s infinite;
  position: relative;
  cursor: pointer;
}
.babyPicture {
  background: url(../img/babyPicture.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.introRight .introPictureOne:hover .babyPicture {
  transform: scale(1.2);
}
.introRight .introPictureTwo {
  width: 400px;
  height: 800px;
  background-size: contain;
  animation: picRotate 5s infinite;
  perspective: 1000px;
  cursor: pointer;
}
.introPictureTwo:hover .pictureInner {
  transform: rotateY(180deg);
}
.pictureInner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.pictureFront, .pictureBack {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.pictureFront {
    background-image: url('../img/jisuhwanPicture2.png');
    z-index: 2;
}
.pictureBack {
    background-image: url('../img/jisuhwanPicture2_2.png');
    transform: rotateY(180deg);
}