header {
  position: relative;
  
}

.teamReadDiv {
  padding: 0 0 20em 0;
}

.teamReadDiv > .title {
  position: relative;
  height: 200px;
}

.teamReadDiv > .title h2 {
  margin: 0;
  color: #813e54;
  font-weight: 700;
  font-family: 'elmessiri';
  font-size: 2em;
  letter-spacing: 2px;
}

.teamReadDiv > .title h1 {
  margin: 0;
  color: #813e54;
  font-weight: 700;
  font-family: 'elmessiri';
  font-size: 4em;
  letter-spacing: 2px;
  position: absolute;
  left: 6%;
  top: 15%;
}

.teamReadDiv > .title span {
  margin: 0;
  width: 150px;
  border-bottom: 1px solid #813e54;
  position: absolute;
  bottom: 55%;
  left: 14%;
}

.teamReadDiv > .title p {
  margin: 0;
  color: #595757;
  font-weight: 500;
  position: absolute;
  left: 28%;
  top: 39%;
  letter-spacing: 2px;
  font-size: 1.2em;
}

.teamReadBottom {
  display: flex;
  align-items: flex-end;
}

.teamReadBottom .teamReadImg {
  height: 600px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
}

.teamReadInfo {
  background: #fff;
  opacity: 0.8;
  width: calc(70% - 8em);
  top: 23em;
  left: 20em;
  position: absolute;
  padding: 4em 8em;
  border-top-left-radius: 70px;
  box-shadow: 0 5px 15px -10px #999999;
}

.teamItem01 {
  position: absolute;
  top: 20em;
  left: 13em;
  width: 80%;
  z-index: 1;
}

.teamReadInfo .title {
  width: 28%;
}

.teamReadInfo .title span {
  font-size: .7em;
  font-weight: 700;
  margin-left: .5em;
}

.teamReadInfo .title h3 {
  padding: 0;
  margin: 0;
  color: #813e54;
  letter-spacing: 6px;
  font-weight: 700;
  border-bottom: 1px solid #813e54;
  line-height: 1.5em;
  font-size: 1.5em;
}

.teamReadInfo .title p {
  padding: 0;
  margin: 0;
  color: #813e54;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.5em;
  font-family: lora;
  text-align: right;
}

.teamReadInfo .experience h4 {
  font-size: 1.5em;
  color: #813e54;
  font-weight: 500;
  letter-spacing: 2px;
  margin: .5em 0;
}

.teamReadInfo .experience .experienceInfo img {
  width: 15px;
  margin-right: .5em;
}

.experience .experienceInfo {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}

.experience .experienceInfo > div {
  display: flex;
  align-items: flex-start;
  padding: .5em 0;
}

.experience .experienceInfo > div .sub {
  display: flex;
  flex-direction: column;
}

.experience .experienceInfo > div span {
  color: #000;
  letter-spacing: 1px;
}

.experience .experienceInfo > div .sub span:last-child {
  color: #595757;
}

@media screen and (max-width: 1280px) {
  .teamReadInfo {
    width: calc(65% - 8em);
  }
  .teamItem01 {
    position: absolute;
    top: 20em;
    left: 4em;
    width: 90%;
  }
}

@media screen and (max-width: 1024px) {
  .teamReadBottom .teamReadImg {
    height: 428px;
  }
  .teamReadBottom {
    align-items: flex-start;
  }
  .teamItem01 {
    top: 13em;
  }
  .teamReadInfo {
    width: 63%;
    top: 17em;
    left: 16em;
    position: absolute;
    padding: 4em;
  }
  .teamReadInfo .title h3, .teamReadInfo .experience h4 {
    font-size: 1.2em;
  }
  .teamReadInfo .title p {
    font-size: 1em;
  }
  .experience .experienceInfo > div span {
    font-size: .8em;
  }
}

@media screen and (max-width: 820px) {
  .teamReadInfo .title {
    width: 50%;
  }
  .teamReadBottom .teamReadImg {
    height: 400px;
  }
  .teamItem01 {
    display: none;
  }
  .teamReadInfo {
    width: 53%;
    top: 8em;
  }
}

@media screen and (max-width: 428px) {
  .teamReadInfo {
    position: relative;
    top: 0;
    left: 0;
  }
  .teamReadBottom {
    flex-direction: column;
  }
  .teamReadInfo {
    margin-left: 2em;
    width: 62%;
    padding: 3em;
    margin-top: 2em;
  }
  .teamReadInfo .title {
    width: 100%;
  }
  .experience .experienceInfo > div .sub span:last-child, .experience .experienceInfo > div span {
    word-break: break-all;
  }
  .experience .experienceInfo > div {
    width: 80%;
  }
  .teamReadBottom .teamReadImg {
    height: 520px;
    margin-top: 2em;
    width: 100%;
  }
  .teamReadDiv {
    padding: 0 0 4em 0;
  }
}

@media screen and (max-width: 414px) {
  .teamReadInfo {
    margin-left: 1.5em;
    width: 65%;
  }  
  
}

@media screen and (max-width: 375px) {
  .teamReadBottom .teamReadImg {
    height: 480px; 
  }  
  .teamReadInfo {
    width: 62%;
  }
}