#head
{
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, #564071 100%);
	margin-bottom:85px;
	.main-menu
	{
		ul
		{
			li
			{
				a
				{
					color:$main-color;
				}
			}
		}
	}
	#socil-menu
	{
		li
		{
			a
			{
				color:$main-color;
			}
		}
	}
}

header
{
  width:660px;
  height:660px;
  padding:10px;
  margin:0 auto 100px auto;
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  &::after
  {
    width: 640px;
    height: 640px;
    border-radius: 100%;
    border:2px solid $main-color;
    content: ' ';
    display: block;
    position: absolute;
    top:10px;
    left:10px;
  }
  >div
  {
    width: 100%;
    text-align: center;
    h1
    {
      position: relative;
      z-index: 1;
      background-color: #fff;
      font-size:40px;
      line-height:58px;
      letter-spacing: 8.4px;
      margin-bottom:40px;
      color:$main-color;
      font-weight: 800;
    }
    p
    {
      font-size:20px;
      line-height:36px;
      letter-spacing: 4.2px;
      color:$main-color;
    }
  }
  @media(max-width:660px)
  {
    width:100%;
    height:calc(100vw - 33px);
    padding:33px;
    >div
    {
      
      background-color: #fff;
      width:100%;
      position: relative;
      z-index:1;
      h1
      {
        font-size:pxvw(20,375);
        line-height:pxvw(24,375);
        letter-spacing: pxvw(4.2,375);
      }
        
    }
    &::after
    {
      top:33px;
      left:33px;
      width:calc(100vw - 66px);
      height:calc(100vw - 66px);
 
    }
  }
}

#about-list
{
  @media(min-width:980px)
  {
    padding-left:pxvw(100);
    padding-right:pxvw(100);
    .article
    {
      margin-bottom:110px;
      display: flex;
      .info
      {
        position: relative;
        background-color: $main-color;
        border-radius: 50px;
        padding-top:pxvw(92);
        width: pxvw(621);
        h2
        {
          color:#fff;
          font-size:pxvw(64);
          line-height:pxvw(93);
          letter-spacing: pxvw(13.44);
          font-weight: 800;
          margin-bottom: pxvw(19);
        }
        ul
        {
          display: flex;
          flex-wrap: wrap;
          li
          {
            margin-bottom:30px;
            width:50%;
            font-size:16px;
            letter-spacing: 3.36px;
            line-height: 32px;
            color:#fff;
          }
        }
        .description
        {
          padding-right:pxvw(67);
          p
          {
            color:#fff;
            font-size:16px;
            line-height:32px;
            letter-spacing: 3.36px;
            margin-bottom:30px;
            padding-left:18px;
            border-left:1px solid #fff;
          }
        }
        &::after
        {
          width: pxvw(400);
          background-color: $main-color;
          border-radius: 50px;
          height:100%;
          top:0px;
          position: absolute;
          content:' ';
        }
      }
      picture
      {
        position: relative;
        padding-top:pxvw(74);
        padding-bottom:pxvw(74);
        overflow: hidden;
        z-index:1;
        flex:1;
        
        img
        {
          display: block;
          width: 100%;
        }
      }
      
      &:nth-child(2n + 1)
      {
        .info
        {
          border-radius: 50px 0 0 50px;
          &::after
          {
            border-radius: 0 50px 50px 0;
            left:100%;
          }
          padding-left:pxvw(85);
        }
      }
      &:nth-child(2n)
      {
        .info
        {
          order:1;
          border-radius: 0 50px 50px 0;
          padding-left:50px;
          &::after
          {
            border-radius: 50px 0 0 50px;
            right:100%;
          }
        }
        picture
        {
          order:0;
        }
      }
    }
  }
  @media(max-width:979px)
  {
    .article
    {
      padding: 0 20px;
      margin-bottom:50px;
      .info
      {
        background-color: $main-color;
        padding:pxvw(20,365) pxvw(20,365);
        border-radius: 50px;
        h2
        {
          font-size:pxvw(24,365);
          color:#fff;
          line-height: pxvw(35,365);
          letter-spacing: pxvw(4,365);
          font-weight: 800;
          margin-bottom:pxvw(20,365);
        }
        ul
        {
          display: flex;
          flex-wrap: wrap;
          margin-bottom:pxvw(20,365);
          li
          {
            svg
            {
              width:15px;
            }
            width: 50%;
            color:#fff;
            line-height:pxvw(30,365);
            font-size:pxvw(13,365);
            letter-spacing: pxvw(2,365);
            
          }
        }
        .description
        {
          padding:pxvw(20);
          p
          {
            color:#fff;
            line-height:pxvw(18,365);
            font-size:pxvw(12,365);
            letter-spacing: pxvw(2,365);
            margin-bottom:pxvw(20,365);
          }
        }
      }
      picture
      {
        display: block;
        img
        {
          display: block;
          width: 100%;
        }
      }
    }
    
  }
}