/*  phone   */



.menuphone {
    font-family: 'Raleway', Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
  }
  .menuphone * {
    box-sizing: border-box;
    -webkit-transition: all 0.35s linear;
    transition: all 0.35s linear;
  }
  .menuphone li {
    display: inline-block;
    list-style: outside none none;
    margin: 0.5em 1em;
    overflow: hidden;
  }
  .menuphone a {
    padding: 0.3em 0.8em;
    backface-visibility: hidden;
    color: #bfbfbf;
    display: block;
    line-height: 2em;
    padding: 0 1em;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .menuphone a:after {
    -webkit-transition: all 0.35s linear;
    transition: all 0.35s linear;
    background-color: #303030;
    color: transparent;
    content: attr(data-hover);
    top: 0;
    line-height: 2em;
    position: absolute;
    right: 100%;
    width: 100%;
    opacity: 0.4;
  }
  .menuphone li:hover a,
  .menuphone li.current a {
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    color: transparent;
  }
  .menuphone li:hover a:after,
  .menuphone li.current a:after {
    opacity: 1;
    color: #ffffff;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  
  /* Demo purposes only 此按鈕meunpc放在首頁中的排版設定，以後按此處理 */
  
  
  
  
  @media only screen and (min-width: 481px) {
  
   
    .meunpc {
      font-family: 'Raleway', Arial, sans-serif;
      text-align: center;
      text-transform: uppercase;
      font-weight: 500;
    }
     
    .meunpc * {
      box-sizing: border-box;
      -webkit-transition: all 0.35s linear;
      transition: all 0.35s linear;
    }
   
    .meunpc li {
      display: inline-block;
      list-style: outside none none;
      margin: 0.5em 0.2em;
      overflow: hidden;
    }
    .meunpc a {
      padding: 0.3em 0.5em;
      backface-visibility: hidden;
      color: #ffffff;
      display: block;
      line-height: 2em;
      padding: 0 1em;
      position: relative;
      text-align: center;
      text-decoration: none;
      -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
      transform-origin: 50% 0;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    
    .meunpc a:after {
      -webkit-transition: all 0.35s linear;
      transition: all 0.35s linear;
      background-color: #ffee00;
      color: transparent;
      content: attr(data-hover);
      top: 0;
      line-height: 2em;
      position: absolute;
      right: 100%;/*灰色圖樣，原為100%設定*/
      width: 100%;
      opacity: 0.1;
    }
    /*
    .meunpc li:hover a,
    .meunpc li.current a {
      -webkit-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
      color: transparent;
    }
    .meunpc li:hover a:after,
    .meunpc li.current a:after {
      opacity: 1;
      color: #272727;
      -webkit-transform: rotateY(90deg);
      transform: rotateY(90deg);
    }
     */
  }