section#about{
   padding-left: 50px;
   padding-right: 50px;
   padding-top: 80px;
   position: relative;
   height: 900px;
}section#about .wrap{
   
   display: flex;
   flex-wrap: wrap;
}
section#about .wrap h3{
   transition: 1s;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
}
section#about .wrap .infor {
   /*! width: 50%; */
   border-radius: 50px;
   padding: 50px 50px;
   /*! transform: rotate(-5deg); */
   margin-left: 34px;
   background: linear-gradient(180deg,#f9f3ec 0%,rgb(193, 216, 230) 100%);
}
section#about .wrap .infor ul{
   
}
section#about .wrap .infor ul li{
   
   line-height: 3.5;
   letter-spacing: 2px;
}
section#about .educate{
  
   width: 50%;
   padding: 50px 50px;
   height: 50%;
   background-color: #cfdce4;
   border-radius: 50px;
   margin-left: 200px;
   /*! transform: rotate(-8deg); */
   background: linear-gradient(180deg,#f9f3ec 0%,rgb(193, 218, 230) 100%);
   margin-top: 60px;
}
section#about small{
   font-size: 22px;
   color: #e7aaa8;
   font-weight: 600;
}
section#about .educate ul{

   margin-top: 15px;
}
section#about .educate ul li{
   line-height: 5;
   border-top: 1px solid #fffbfb;
}
section#about .educate ul li:nth-child(3){
   
   border-bottom: 1px solid #fff;
}
section#about .educate ul li span{
   
   margin: 0 31px;
}
section#about article div ul.list li:nth-child(1)::before{
   content: "";
   display: block;
   background-image: url(../img/html_1.png);
   width: 48px;
   height: 48px;
   background-size: cover;
   background-position: left center;
}
section#about article div ul.list li:nth-child(2)::before{
    content: "";
   display: block;
   background-image: url(../img/css_1.png);
   width: 48px;
   height: 48px;
   background-size: cover;
}
section#about article div ul.list li:nth-child(3)::before{
   content: "";
   display: block;
   background-image: url(../img/java.png);
   width: 48px;
   height: 48px;
   background-size: cover;
}
section#about article div ul.list li:nth-child(4)::before{
   content: "";
   display: block;
   background-image: url(../img/github.png);
   width: 48px;
   height: 48px;
   background-size: cover;
}
section#about article div ul.list li:nth-child(5)::before{
   content: "";
   display: block;
   background-image: url(../img/photoshop.png);
   width: 48px;
   height: 48px;
   background-size: cover;
}
section#about article div ul.list li:nth-child(6)::before{
   content: "";
   display: block;
   background-image: url(../img/adobeillust.png);
   width: 48px;
   height: 48px;
   background-size: cover;
}
section#about .circle{
   height: 100%;
   display: block;
   position: absolute;
   background-color: rgba(242, 245, 255, 0.8);
   border-radius: 50%;
   top: 0;
   width:  50%;
   box-shadow: 2px 8px 22px 3px rgba(255, 255, 255, 0.3);
   z-index: 1;
   right: -288px;
   box-sizing: border-box;
   overflow: hidden;
}
section#about .wrap .intro{
   
   width: 30%;
   padding: 50px 45px;
   border-radius: 50px;
   transform: translateX(145%) translateY(-179%);
   background: linear-gradient(180deg,#f9f3ec 0%,rgb(193, 214, 230) 100%);
}
section#about .wrap .intro img{
   
   width: 312px;
   height: 420px;
   border-radius: 25px;
}
section#about .wrap .intro span{
   
   display: inline-block;
   background-image: url(../img/flower.svg);
   width: 50px;
   height: 50px;
}
.slidingM{
   transform: translateX(-10px);
   opacity: 1;
}