/* UXUI */
#uxui
  {padding: 30px;
  position: relative;
  overflow: hidden;
  background-color: rgba(197, 182, 129, 0.29);
  }

#uxui svg.uxui
  {opacity: 1;
  position: absolute;
  bottom:-100%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  z-index: -1;
  }


#uxui .container
  {display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
  }
#uxui .container .project
  {width: 100%;
  margin-bottom: 40px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: rgb(0, 72, 88);
  position: relative;
  }
#uxui .project li
  {display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  }
#uxui .project li.activeutitle
  {display: block;
  }

#uxui .display
  {display: flex;}

#uxui .display li
  {display: none;
  
  }
#uxui .display li img
  {width: 100%;
  }

#uxui .display li.activeu img
  {display: block;
    cursor: s-resize;
  }

#uxui .display .pageview
  {display: none;}
#uxui .display .pageview.actpage
  {display: block;}
#uxui .inform .pagelink span
  {padding:5px 10px;
  }
#uxui .inform span.actlink
  {background-color: rgb(185, 0, 37);
  border-radius: 20px;
  padding:5px 10px;
  }
#uxui .inform span
  {  cursor: pointer;}
#uxui .display li.activeu
  {display: block;
  opacity: 100%;
  margin: auto;
  }

/* #uxui div
  {margin: 50px;
  } */

#uxui .inform 
  {background-color: rgba(0, 72, 88, 0.6);
  display: block;
  width: 600px;
  margin: auto;
  padding: 20px 50px;
  border-radius: 30px;
  color: #fff;
  }
#uxui .inform li
  {display: none;
  width: 550px;
  margin: auto;
  
  }
#uxui .inform li.activeuinfo
  {display: flex;
  align-items: center;
  justify-content: space-between;
  
  }
#uxui .inform li table
  {border-spacing: 10px;
  width: 40%;
  /* border: 1px solid #000; */
  }
#uxui .inform li table tr:nth-child(1)
  {width: 40%;
  
  }

#uxui .inform>li>span
  {display: block;
  width: 60%;
  margin-left: 20px;
  line-height: 150%;
  font-size: 0.9rem;
  }

  #uxui .mockup-part .pc-mockup .iframe-url img{position: absolute; top: 0; left: 0;}

/* button */
#uxui .ubtn
  {position: absolute;
  width: 100%;
  /* border: 1px solid #000; */
  top: 40%;
  left: 0;
  }
#uxui .ubtn div
  {position: absolute;
  margin: auto;
  width: 100%;
  
  }
#uxui .ubtn div:before
  {position: absolute;
  color: #999;
  font-family: 'Material Icons Outlined';
  font-size: 5rem;
  cursor: pointer;
  transition: 0.3s;
  animation: uxuibtn 3s infinite;
  }
@keyframes uxuibtn
  {30%{opacity: 0;}
  70%{color: #777;}
  }
#uxui .ubtn div:hover:before
  {color: #666;
  animation: none;
  }
#uxui .ubtn .u-left:before
  {content: '\e5e0';
  left: 15%;
  }
#uxui .ubtn .u-right:before
  {content: '\e5e1';
  right: 15%;
  }