section#personal {

  background-color: #f2ede3;
}
section#personal .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 100px 0;
}
section#personal .wrap h2 {
  position: absolute;
  top: 47px;
  font-size: 60px;
  left: 700px;
  z-index: 1;
}
section#personal .wrap ul.personAni {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto auto;
  /*! width: 90%; */
  row-gap: 40px;
  justify-items: center;
}
section#personal .slick-prev{
  left: 400px;
}
section#personal .slick-prev::before{
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url(../img/pre.png) no-repeat center /contain;
}
section#personal .slick-next{
  right: 500px;
}
section#personal .slick-next::before{
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url(../img/next.png) no-repeat center /contain;
}
section#personal .wrap ul.list >li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
}
section#personal .wrap ul.list >li:first-child{ 
  width: 100%;
  justify-items: center;
  align-items: center;
  width: 100;
  column-gap: 70px;
}
section#personal .wrap ul.list >li:first-child::after{ 
  content: "";
  display: inline-block;
  width: 620px;
  height: 680px;
  background: url(../img/self.png) no-repeat center /cover;
  grid-row: 1 / span 3;
  grid-column: 2;
  justify-self: start;
}
section#personal .wrap ul.list li:first-child img{
  display: none;
} 
section#personal .wrap ul.list li:first-child >span{
  align-self: start;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
section#personal .wrap ul.list li:first-child span a{
  font-size: 20px;
  padding: 10px 20px;
  background-color: #7d7162;
  border-radius: 30px;
  color: white;
  width: 30%;
  text-align: start;
  position: relative;
}
section#personal .wrap ul.list li:nth-child(1) span a::before{
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/arrow3hW.png) no-repeat center /contain;
  vertical-align: -8px;
  position: absolute;
  right: 15px;
}
section#personal .wrap ul.list li:nth-child(2){
  justify-items: center;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto;
  column-gap: 50px;
  align-items: center;
  justify-items: start;
  width: 100%;
}
section#personal .wrap ul.list li:nth-child(2) ul li:nth-child(3) a{
  justify-self: center;
  align-self: center;
  background-color: #7d7162;
  color: white;
  padding: 5px 20px;
  border-radius: 50px;
}
section#personal .wrap ul.list li:nth-child(2) ul li:nth-child(3) a::before{
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/arrow3hW.png) no-repeat center /contain;
  vertical-align: -5px;
  margin-right: 8px;
}
section#personal .wrap ul.list >li:nth-child(3){
  justify-items: center;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto;
  column-gap: 50px;
  align-items: center;
  justify-items: end;
  width: 100%;
}
/* section#personal .wrap ul.list >li:not(:first-child){
  display: none;
} */
section#personal .wrap ul.list li h3 {
  font-size: 27px;
  line-height: 2;
  color: #222;
  font-weight: 340;
  margin-bottom: 10px;
}
section#personal .wrap ul.list li:nth-child(1) h3{
  width: 600px;
  text-align: start;
}
section#personal .wrap ul.list li:nth-child(2) h3{
  grid-column: 2;
  grid-row: 1;
  writing-mode: sideways-rl;
  line-height: initial;
  font-size: 0;
  letter-spacing: 12px;
   opacity: 0.3;
  position: relative;
}
section#personal .wrap ul.list li:nth-child(2) h3::after{
  display: block;
  content: "";
  background: url(../img/eduH.png) no-repeat center /contain;
  width: 100px;
  height: 500px;
  position: absolute;
  right: -50px;
  z-index: -1;
  top: -200px;
}
section#personal .wrap ul.list li:nth-child(3) h3{
  grid-column: 2;
  grid-row: 1;
  writing-mode: sideways-rl;
  line-height: initial;
  font-size: 0;
  letter-spacing: 12px;
  opacity: 0.3;
  position: relative;
}
section#personal .wrap ul.list li:nth-child(3) h3::after{
   display: block;
  content: "";
  background: url(../img/hobbyH.png) no-repeat center /contain;
  width: 100px;
  height: 500px;
  position: absolute;
  top: -150px;
  right: -70px;
  z-index: -1;
}
/* section#personal .wrap ul.list li h3::after{
  display: block;
  content: "";
  width: 100%;
  height: 450px;
  background: no-repeat center /cover;
} */
/* section#personal .wrap ul.list li.profile h3::after{
  background-image: url(../img/self.png);
}
section#personal .wrap ul.list li.edu h3::after{
  background-image: url(../img/edu-min.jpg);
}
section#personal .wrap ul.list li.hobby h3::after{
  background-image: url(../img/barista-min.jpg);
} */
section#personal .wrap ul.list li img{
  height: 580px;
  width: 500px;
  grid-column: 1;
}
section#personal .wrap ul.list li:nth-child(3) img{
  grid-column: 3;
}
section#personal .wrap ul.list li ul {
  font-size: 22px;
  line-height: 1.8;
  margin-top: 12px;
  color: #333;
}
section#personal .wrap ul.list li:nth-child(1) p{
  align-self: start;
  width: 600px;
  font-weight: 320;
  font-size: 20px;
  color: #333;
}
section#personal .wrap ul.list li:nth-child(1) p span{
  font-weight: 530;
}
section#personal .wrap ul.list li:nth-child(2) ul{
  grid-column: 3;
}
section#personal .wrap ul.list li:nth-child(3) ul{
  grid-column: 1;
  grid-row: 1;
}
section#personal .wrap ul.list li ul li {

}
section#personal .wrap ul.list li:nth-child(2) ul li:nth-child(3){
  margin-top: 20px;
}
section#personal .wrap ul.list li ul li span{
  
  color: #999;
  font-size: 14px;
}
section#personal .wrap ul.list li p {

}