@charset "UTF-8";
html, body {
  font-family: Arial, "微軟正黑體";
  width: 100%;
  height: 100%;
  color: #FDFAE3;
  background-color: #000; }

img {
  width: 100%;
  height: auto;
  vertical-align: top; }

.btn {
  cursor: pointer; }

.template {
  display: none; }

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  min-height: 780px;
  overflow: hidden;
  background-image: url("../images/bg.jpg");
  background-position: top center; }
  .wrapper .view {
    position: absolute;
    width: 990px;
    height: 780px;
    left: 50%;
    top: 50%;
    margin-left: -495px;
    margin-top: -430px; }
    .wrapper .view > * {
      position: absolute; }
    .wrapper .view .step {
      width: 100%;
      height: 100%;
      display: none; }
      .wrapper .view .step > * {
        position: absolute; }
    .wrapper .view > .title {
      width: 472px;
      left: 290px;
      top: -500px;
      overflow: hidden; }
    .wrapper .view > .title-ani-w {
      width: 547px;
      height: 214px;
      left: 226px;
      top: 259px; }
      .wrapper .view > .title-ani-w > * {
        position: absolute; }
      .wrapper .view > .title-ani-w .title-ani {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0; }
    .wrapper .view .step0 .start-btn {
      left: 50%;
      margin-left: -140px;
      top: 533px; }
    .wrapper .view .step0 .start-btn-ani {
      width: 433px;
      height: 115px;
      top: 509px;
      left: 284px; }
    .wrapper .view .step1 .title {
      width: 211px;
      left: 201px;
      top: 212px; }
    .wrapper .view .step1 .selected {
      text-align: right;
      top: 250px;
      right: 195px; }
    .wrapper .view .step1 .prev-page-btn,
    .wrapper .view .step1 .next-page-btn {
      width: 40px;
      height: 73px;
      left: 791px;
      background-image: url("../images/alpha_00.png");
      background-repeat: repeat; }
      .wrapper .view .step1 .prev-page-btn > img,
      .wrapper .view .step1 .next-page-btn > img {
        width: 8px;
        margin-left: 16px; }
    .wrapper .view .step1 .prev-page-btn {
      top: 314px; }
    .wrapper .view .step1 .next-page-btn {
      top: 548px; }
    .wrapper .view .step1 .next-btn {
      width: 78px;
      left: 423px;
      top: 642px; }
    .wrapper .view .fb-friends-w {
      left: 210px;
      top: 321px;
      width: 560px;
      height: 320px;
      overflow: hidden; }
    .wrapper .view .fb-friends {
      position: absolute;
      left: 0;
      top: 0; }
      .wrapper .view .fb-friends .fb-friend {
        position: relative;
        float: left;
        margin-right: 3px;
        width: 90px;
        height: 110px; }
        .wrapper .view .fb-friends .fb-friend .photo {
          position: relative;
          width: 60px;
          height: 60px;
          margin-left: 15px;
          margin-top: 2px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          overflow: hidden; }
        .wrapper .view .fb-friends .fb-friend .name {
          position: absolute;
          width: 100%;
          top: 65px;
          font-size: 12px;
          text-align: center; }
      .wrapper .view .fb-friends .fb-friend-sel .photo {
        border: 4px solid #FFF5A8;
        width: 56px;
        height: 56px;
        margin-left: 13px;
        margin-top: 0; }
    .wrapper .view .step2 .title {
      top: 211px;
      left: 199px;
      width: 114px; }
    .wrapper .view .step2 .tab-w {
      left: 227px;
      top: 311px;
      overflow: hidden;
      width: 660px; }
      .wrapper .view .step2 .tab-w .tab {
        float: left;
        width: 128px;
        padding: 7px 7px;
        height: 78px;
        margin-right: -7px;
        background-image: url(../images/step2_frame.png);
        background-repeat: no-repeat;
        background-position: top center; }
    .wrapper .view .step2 .word-w {
      left: 227px;
      top: 395px;
      width: 547px;
      height: 181px;
      background-image: url(../images/step2_word_frame.png);
      background-repeat: no-repeat;
      background-position: top center; }
      .wrapper .view .step2 .word-w .word {
        position: absolute; }
      .wrapper .view .step2 .word-w .word-image {
        left: 7px;
        top: 7px;
        width: 533px;
        height: 167px; }
      .wrapper .view .step2 .word-w .word-textarea {
        font-family: Arial, "微軟正黑體";
        left: 6px;
        top: 6px;
        width: 473px;
        height: 137px;
        padding: 15px 30px;
        border: 0;
        font-size: 45px;
        line-height: 1.5em;
        text-align: center;
        color: #FDFAE3;
        background: transparent;
        overflow: hidden;
        outline: none; }
    .wrapper .view .step2 .send-btn {
      width: 86px;
      top: 642px;
      left: 423px; }
    .wrapper .view .step3 .title {
      width: 528px;
      top: 353px;
      left: 220px; }
    .wrapper .view .step3 .open-btn,
    .wrapper .view .step3 .again-btn {
      width: 210px;
      left: 378px; }
    .wrapper .view .step3 .open-btn {
      top: 439px; }
    .wrapper .view .step3 .again-btn {
      top: 512px; }
    .wrapper .view .trees {
      position: absolute;
      width: 1920px;
      height: 1080px;
      top: 592px;
      left: -442px; }
    .wrapper .view .tree {
      position: absolute;
      width: 776px; }
      .wrapper .view .tree > * {
        position: absolute; }
      .wrapper .view .tree .tree-body {
        width: 100%;
        top: 0; }
      .wrapper .view .tree .tree-star {
        width: 50%;
        left: 28%;
        top: -220px; }
    .wrapper .view .tree1 {
      left: 520px;
      top: -200px; }
      .wrapper .view .tree1 .tree-star {
        top: -498px;
        width: 84%;
        left: 12%; }
      .wrapper .view .tree1 .tree-body {
        filter: alpha(opacity=30);
        opacity: 0.3; }
    .wrapper .view .tree2 {
      width: 320px;
      left: -200px;
      top: 200px; }
      .wrapper .view .tree2 .tree-star {
        top: -90.72165px; }
    .wrapper .view .tree3 {
      width: 320px;
      left: -100px;
      top: 400px; }
      .wrapper .view .tree3 .tree-star {
        top: -85px; }

.footer {
  position: absolute;
  height: 32px;
  width: 100%;
  bottom: 0;
  background-color: #000; }
  .footer > * {
    position: absolute; }
  .footer .logo {
    width: 95px;
    left: 17px;
    top: 7px; }
  .footer .cp {
    line-height: 32px;
    color: #63614d;
    top: 0;
    right: 17px;
    font-size: 11px; }

.preloading-w {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../images/alpha_000000_50.png");
  background-repeat: repeat; }
  .preloading-w .preloading {
    position: absolute;
    width: 93px;
    height: 83px;
    left: 50%;
    top: 50%;
    margin-left: -47px;
    margin-top: -41px; }