@charset "UTF-8";
.util-wrap {
  box-sizing: border-box;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  font-size: 14px;
  overflow: hidden; }
  .util-wrap > li {
    box-sizing: border-box;
    float: left;
    padding: 10px;
    width: 25%;
    height: 256px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd; }
    .util-wrap > li p {
      line-height: 2; }
  .util-wrap .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal; }
  .util-wrap .ellipsis2 {
    height: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  .util-wrap .nowrap {
    width: 50%;
    background-color: #444;
    padding: 10px;
    white-space: nowrap; }
  .util-wrap .triangle-wrap {
    position: relative;
    height: 160px; }
    .util-wrap .triangle-wrap i {
      position: absolute;
      border-style: solid; }
    .util-wrap .triangle-wrap .t1 {
      top: 0;
      left: 0;
      border-width: 20px;
      border-color: transparent transparent transparent #FFF; }
    .util-wrap .triangle-wrap .t2 {
      top: 0;
      right: 0;
      border-width: 20px;
      border-color: transparent transparent #FFF #FFF; }
    .util-wrap .triangle-wrap .t3 {
      left: 40px;
      bottom: 0;
      border-width: 30px 20px 60px 110px;
      border-color: #666 #FFF #ccc #999; }
    .util-wrap .triangle-wrap .t4 {
      left: 40px;
      top: 0;
      border-width: 20px 0 20px 20px;
      border-color: #FFF transparent #FFF; }
  .util-wrap .moon {
    margin: 40px auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 15px 15px 0 yellow; }
  .util-wrap .auto-fill, .util-wrap .auto-fill:-webkit-autofill {
    -webkit-box-shadow: 0 1000px 0 #1EEDFF inset; }
  .util-wrap .justify {
    text-align: justify;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/ }
  .util-wrap .filter-gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
    filter: gray; }
  .util-wrap .scroll-wrap {
    border: 2px solid #ccc;
    height: 180px;
    overflow: auto; }
    .util-wrap .scroll-wrap::-webkit-scrollbar {
      width: 4px; }
    .util-wrap .scroll-wrap::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background: #1EEDFF; }
    .util-wrap .scroll-wrap .scroll-content {
      height: 120px;
      background: rgba(153, 153, 153, 0.5); }
  .util-wrap .css-square {
    overflow: hidden;
    border: 1px solid #1EEDFF;
    background: #ccc; }
  .util-wrap .css-square2:after {
    content: '';
    display: block;
    padding-bottom: 100%; }
  .util-wrap .css-square3:after {
    content: '';
    display: block;
    margin-bottom: 100%; }
  .util-wrap #custom-cursor {
    height: 180px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" style="font-size:14px"><text y="16">😉</text></svg>'), auto; }