@charset "UTF-8";
/* line 6, ../sass/layout.scss */
html, body {
  font-family: "儷黑 Pro", "LiHei Pro","文泉驛正黑", "WenQuanYi Zen Hei", "微軟正黑體", "Microsoft JhengHei", "新細明體", sans-serif, Arial, Helvetica;
  background: #000;
}

/* line 12, ../sass/layout.scss */
p, .info .assignment {
  font-size: 15px;
  color: #cdbc77;
  line-height: 1.5;
}
/* line 17, ../sass/layout.scss */
p.notice, .info .notice.assignment {
  font-size: 13px;
  line-height: 1.5;
  color: #ddd;
}

/* line 24, ../sass/layout.scss */
.wrapper {
  width: 100%;
  max-width: 414px;
  min-height: 100%;
  margin: 0;
  overflow: auto;
  position: relative;
}
/* line 32, ../sass/layout.scss */
.wrapper.selfie {
  background: url("../images/bg_member.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
/* line 38, ../sass/layout.scss */
.wrapper.main {
  background: url("../images/bg_main.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
/* line 44, ../sass/layout.scss */
.wrapper.dashboard {
  background: url("../images/bg_member.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
/* line 50, ../sass/layout.scss */
.wrapper.over {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  flex-direction: column;
}
/* line 59, ../sass/layout.scss */
.wrapper.over .members {
  text-align: center;
}
/* line 62, ../sass/layout.scss */
.wrapper.over .members li {
  display: inline-block;
  width: 40%;
  float: none;
}
/* line 71, ../sass/layout.scss */
.wrapper.dual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/dual.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
  animation-name: fadeInn;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
@keyframes fadeInn {
  50% {
    -webkit-transform: scale(1.1);
    /* Saf3.1+, Chrome */
    -moz-transform: scale(1.1);
    /* FF3.5+ */
    -ms-transform: scale(1.1);
    /* IE9 */
    -o-transform: scale(1.1);
    /* Opera 10.5+ */
    transform: scale(1.1);
  }
}
/* line 114, ../sass/layout.scss */
.action_header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  padding: 0 20px;
  background: #cdbc77;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 50;
}
/* line 130, ../sass/layout.scss */
.action_header .back, .action_header .refresh {
  float: right;
  cursor: pointer;
}
/* line 134, ../sass/layout.scss */
.action_header .back::before, .action_header .refresh::before {
  content: "\f057";
  font-family: FontAwesome;
  color: #000;
  font-size: 24px;
}
/* line 142, ../sass/layout.scss */
.action_header .refresh {
  float: left;
  margin-right: 8px;
}
/* line 148, ../sass/layout.scss */
.action_header .refresh::before {
  content: "\f01e";
  color: #fff;
}

/* line 155, ../sass/layout.scss */
.members {
  width: 100%;
  height: auto;
  padding: 70px 0 30px;
  position: relative;
  z-index: 2;
}
/* line 162, ../sass/layout.scss */
.members li {
  width: 50%;
  float: left;
  padding: 8px 0;
  cursor: pointer;
}
/* line 168, ../sass/layout.scss */
.members li.empty {
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=50);
}
/* line 174, ../sass/layout.scss */
.members li.self .avatar {
  border: 3px solid #01ffdb;
}
/* line 181, ../sass/layout.scss */
.members li.murdered .avatar, .members li.murdered .name {
  opacity: 0.4;
  -moz-opacity: 0.4;
  -khtml-opacity: 0.4;
  filter: alpha(opacity=40);
}
/* line 186, ../sass/layout.scss */
.members li.murdered .member::before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 30px;
  height: 30px;
  z-index: 10;
  background: url("../images/assain.png") no-repeat center center;
  background-size: 25px 18.5px;
}
/* line 202, ../sass/layout.scss */
.members li.reported .avatar, .members li.reported .name {
  opacity: 0.4;
  -moz-opacity: 0.4;
  -khtml-opacity: 0.4;
  filter: alpha(opacity=40);
}
/* line 207, ../sass/layout.scss */
.members li.reported .member::before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 30px;
  height: 30px;
  z-index: 10;
  background: url("../images/report.png") no-repeat center center;
  background-size: 24px 24px;
}
/* line 223, ../sass/layout.scss */
.members li.spy .member::after, .members li.spy .member.pending::before {
  content: "";
  position: absolute;
  top: 12.5;
  left: 12.5;
  width: 50px;
  height: 50px;
  z-index: 5;
  background: url("../images/spy_icon.png") no-repeat center center;
  background-size: 100% 100%;
}
/* line 239, ../sass/layout.scss */
.members li.agent .member::after, .members li.agent .member.pending::before {
  content: "";
  position: absolute;
  top: 12.5;
  left: 12.5;
  width: 50px;
  height: 50px;
  z-index: 5;
  background: url("../images/agent_icon.png") no-repeat center center;
  background-size: 100% 100%;
}
/* line 254, ../sass/layout.scss */
.members .member {
  position: relative;
  text-align: center;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 263, ../sass/layout.scss */
.members .member .avatar {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  background: #cdbc77 url("../images/avatar.png") no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
  border: 1px solid #cdbc77;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 277, ../sass/layout.scss */
.members .member .avatar .foto {
  position: static;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}
/* line 285, ../sass/layout.scss */
.members .name {
  font-size: 15px;
  color: #cdbc77;
  line-height: 1.5;
  margin-top: 5px;
  text-align: center;
  font-family: "Libre Baskerville";
}
/* line 294, ../sass/layout.scss */
.members::after, .members.pending::before {
  content: '';
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  width: 100%;
}

/* line 299, ../sass/layout.scss */
.logo {
  width: 100px;
  height: 100px;
  margin: 8vh auto 20px;
  text-align: center;
  position: relative;
}
/* line 306, ../sass/layout.scss */
.logo img {
  height: 100%;
  width: auto;
}

/* line 312, ../sass/layout.scss */
.slogan {
  text-align: center;
  margin: 0 auto;
  font-size: 24px;
  line-height: 1;
  color: #cdbc77;
  font-weight: bold;
}
/* line 316, ../sass/layout.scss */
.slogan img {
  height: 24px;
  width: auto;
}

/* line 327, ../sass/layout.scss */
.intro {
  width: 80%;
  margin: 20px auto;
}

/* line 332, ../sass/layout.scss */
.bottomstuff {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 15px;
}

/* line 339, ../sass/layout.scss */
input[type=text] {
  height: 40px;
  width: 200px;
  line-height: 40px;
  font-size: 18px;
  color: #cdbc77;
  padding: 0 15px;
  border: none;
  background: none;
  margin: 15px auto;
  outline: none;
  min-width: 1px;
  text-align: center;
  border-bottom: 1px solid #cdbc77;
  font-family: "儷黑 Pro", "LiHei Pro","文泉驛正黑", "WenQuanYi Zen Hei", "微軟正黑體", "Microsoft JhengHei", "新細明體", sans-serif, Arial, Helvetica;
  letter-spacing: 0.1em;
  display: block;
}

/* line 365, ../sass/layout.scss */
#other {
  display: none;
}

/* line 369, ../sass/layout.scss */
select, option {
  display: block;
  background: #000 url("../images/dropdown.png") no-repeat center right 10px;
  background-size: 11px 7px;
  border: 1px solid #cdbc77;
  color: #cdbc77;
  width: 200px;
  outline: none;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  letter-spacing: 0;
  padding: 0 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 25px;
  margin: 15px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 391, ../sass/layout.scss */
select::-ms-expand, option::-ms-expand {
  /* for IE 11 */
  display: none;
}
/* line 396, ../sass/layout.scss */
select:focus, option:focus {
  outline: none;
  border-color: #cdbc77;
}
/* line 401, ../sass/layout.scss */
select:required, option:required {
  outline: none;
  border-color: #cdbc77;
  box-shadow: none;
}

/* line 408, ../sass/layout.scss */
.fingerprint {
  width: 100px;
  height: 175px;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  margin: 0 auto;
  background: url("../images/grid.png") no-repeat top center;
  background-size: auto 387.5px;
  animation-name: loop;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
@keyframes loop {
  100% {
    background-position: bottom center;
  }
}
/* line 433, ../sass/layout.scss */
.fingerprint.active {
  -webkit-box-shadow: 0px 0px 32px rgba(1, 255, 219, 0.4);
  -moz-box-shadow: 0px 0px 32px rgba(1, 255, 219, 0.4);
  box-shadow: 0px 0px 32px rgba(1, 255, 219, 0.4);
}
/* line 436, ../sass/layout.scss */
.fingerprint.active svg {
  stroke-dashoffset: 0;
}
/* line 440, ../sass/layout.scss */
.fingerprint.active::before {
  border: 2px solid rgba(205, 188, 119, 0.3);
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}
/* line 447, ../sass/layout.scss */
.fingerprint #mycanvas {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}
/* line 454, ../sass/layout.scss */
.fingerprint svg {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  stroke: #cdbc77;
  stroke-dashoffset: 455;
  stroke-dasharray: 456;
  transition: stroke-dashoffset 1s linear;
  stroke: #cdbc77;
  stroke-width: 2;
}
/* line 466, ../sass/layout.scss */
.fingerprint svg:hover {
  stroke-dashoffset: 0;
}
/* line 471, ../sass/layout.scss */
.fingerprint::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/fingerprint.png") no-repeat center center;
  background-size: 83.5px 109.5px;
  border: 2px solid rgba(205, 188, 119, 0.7);
  opacity: 0.7;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  filter: alpha(opacity=70);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
}

/* line 491, ../sass/layout.scss */
.foto {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  -webkit-filter: grayscale(1);
  opacity: 0.4;
  -moz-opacity: 0.4;
  -khtml-opacity: 0.4;
  filter: alpha(opacity=40);
}
/* line 510, ../sass/layout.scss */
.foto img {
  display: none;
}

/* line 515, ../sass/layout.scss */
.profile {
  width: 100%;
  height: 60%;
  min-height: 336px;
  border-bottom: 1px solid #cdbc77;
  position: relative;
  padding: 20px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 527, ../sass/layout.scss */
.profile.murdered::after, .profile.murdered.pending::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(../images/blood.png) no-repeat center center;
  background-size: cover;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-delay: 1.5s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
@keyframes fadeIn {
  100% {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1.1);
    /* Saf3.1+, Chrome */
    -moz-transform: scale(1.1);
    /* FF3.5+ */
    -ms-transform: scale(1.1);
    /* IE9 */
    -o-transform: scale(1.1);
    /* Opera 10.5+ */
    transform: scale(1.1);
  }
}
/* line 568, ../sass/layout.scss */
.profile.reported::after, .profile.reported.pending::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(../images/chain.png) no-repeat center center;
  background-size: cover;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-delay: 1.5s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
@keyframes fadeIn {
  100% {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1.1);
    /* Saf3.1+, Chrome */
    -moz-transform: scale(1.1);
    /* FF3.5+ */
    -ms-transform: scale(1.1);
    /* IE9 */
    -o-transform: scale(1.1);
    /* Opera 10.5+ */
    transform: scale(1.1);
  }
}
/* line 608, ../sass/layout.scss */
.profile.selfie {
  background-color: #000;
}
/* line 613, ../sass/layout.scss */
.profile.active .round, .profile.active .code {
  top: 0;
}
/* line 617, ../sass/layout.scss */
.profile.active .skill {
  right: 20px;
}
/* line 621, ../sass/layout.scss */
.profile.active .upload_thumb {
  left: 20px;
}
/* line 626, ../sass/layout.scss */
.profile .round {
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: #fff;
  font-family: "Libre Baskerville";
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  top: -100px;
  z-index: 6;
  cursor: pointer;
  -webkit-transition: top 0.5s;
  transition: top 0.5s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
/* line 640, ../sass/layout.scss */
.profile .round span:last-child {
  display: inline-block;
  font-size: 15px;
  color: #cdbc77;
  margin-top: 5px;
}
/* line 646, ../sass/layout.scss */
.profile .round span:last-child::before {
  content: "/";
}
/* line 653, ../sass/layout.scss */
.profile .round::after, .profile .round.pending::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px solid #cdbc77;
}
/* line 666, ../sass/layout.scss */
.profile .round::before {
  content: "回合";
  font-size: 12px;
  color: #01ffdb;
  position: absolute;
  top: -5px;
  left: -8px;
  white-space: nowrap;
  line-height: 12px;
}
/* line 678, ../sass/layout.scss */
.profile .code {
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: #cdbc77;
  height: 40px;
  line-height: 40px;
  margin-left: 15px;
  top: -100px;
  z-index: 6;
  cursor: pointer;
  -webkit-transition: top 0.5s;
  transition: top 0.5s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
/* line 693, ../sass/layout.scss */
.profile .skill {
  position: absolute;
  right: -100px;
  bottom: 30px;
  width: 40px;
  height: 40px;
  z-index: 6;
  cursor: pointer;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  pointer-events: none;
}
/* line 706, ../sass/layout.scss */
.profile .skill::after, .profile .skill.pending::before {
  content: "";
  font-size: 12px;
  color: #01ffdb;
  position: absolute;
  left: 50%;
  white-space: nowrap;
  width: 80px;
  line-height: 12px;
  text-align: center;
  margin-left: -40px;
  bottom: -20px;
}
/* line 720, ../sass/layout.scss */
.profile .skill.eye {
  background: url(../images/eye.png) no-repeat bottom center;
  background-size: contain;
  cursor: pointer;
  pointer-events: auto;
}
/* line 725, ../sass/layout.scss */
.profile .skill.eye::after, .profile .skill.eye.pending::before {
  content: "特殊技能";
}
/* line 730, ../sass/layout.scss */
.profile .skill.water {
  background: url(../images/water.png) no-repeat bottom center;
  background-size: contain;
  pointer-events: auto;
}
/* line 734, ../sass/layout.scss */
.profile .skill.water::after, .profile .skill.water.pending::before {
  content: "特殊技能";
}
/* line 739, ../sass/layout.scss */
.profile .skill.justice {
  background: url(../images/justice.png) no-repeat bottom center;
  background-size: contain;
  pointer-events: auto;
}
/* line 743, ../sass/layout.scss */
.profile .skill.justice::after, .profile .skill.justice.pending::before {
  content: "特殊技能";
}
/* line 749, ../sass/layout.scss */
.profile .upload_thumb {
  position: absolute;
  left: -100px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  z-index: 6;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  background: #01ffdb;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=50);
}
/* line 769, ../sass/layout.scss */
.profile .upload_thumb input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
/* line 779, ../sass/layout.scss */
.profile .upload_thumb::before {
  color: #000;
  content: "\f030";
  font-family: FontAwesome;
  font-size: 20px;
}
/* line 787, ../sass/layout.scss */
.profile .team {
  width: 240px;
  height: 240px;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  margin-top: -120px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  flex-direction: column;
}
/* line 804, ../sass/layout.scss */
.profile .team.agent {
  background: url(../images/agent_id.png) no-repeat center center;
  background-size: contain;
}
/* line 809, ../sass/layout.scss */
.profile .team.spy {
  background: url(../images/spy_id.png) no-repeat center center;
  background-size: contain;
}
/* line 814, ../sass/layout.scss */
.profile .team > div:first-child {
  font-size: 15px;
  color: #cdbc77;
  letter-spacing: 0.2em;
  line-height: 1.8;
  text-align: center;
}
/* line 822, ../sass/layout.scss */
.profile .team > div:last-child {
  font-size: 24px;
  color: #cdbc77;
  line-height: 1.5;
  text-align: center;
  font-family: "Libre Baskerville";
}

/* line 832, ../sass/layout.scss */
.status_btn {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  margin-left: -25px;
  background: #000 url(../images/member.png) no-repeat center center;
  background-size: 50px 50px;
  cursor: pointer;
  z-index: 10;
  border: 1px solid #cdbc77;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 848, ../sass/layout.scss */
.status_btn::after, .status_btn.pending::before {
  content: "檢視所有玩家";
  position: absolute;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #01ffdb;
  width: 100px;
  top: 15px;
  left: 52px;
  padding: 3px;
  background: #000;
}
/* line 865, ../sass/layout.scss */
.status_btn.alert::after, .status_btn.alert.pending::before {
  content: "點擊執行行動";
}
/* line 869, ../sass/layout.scss */
.status_btn.alert::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 1;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -webkit-box-shadow: 0px 0px 8px rgba(1, 255, 219, 0.8);
  -moz-box-shadow: 0px 0px 8px rgba(1, 255, 219, 0.8);
  box-shadow: 0px 0px 8px rgba(1, 255, 219, 0.8);
  background: #01ffdb;
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes blink {
  50% {
    -webkit-transform: scale(0.7);
    /* Saf3.1+, Chrome */
    -moz-transform: scale(0.7);
    /* FF3.5+ */
    -ms-transform: scale(0.7);
    /* IE9 */
    -o-transform: scale(0.7);
    /* Opera 10.5+ */
    transform: scale(0.7);
  }
}
/* line 908, ../sass/layout.scss */
.info {
  width: 100%;
  margin-top: 5px;
  height: calc(40% - 5px);
  min-height: 219px;
  border-top: 1px solid #cdbc77;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
/* line 920, ../sass/layout.scss */
.info::before {
  content: "";
  width: 60px;
  height: 70px;
  position: absolute;
  top: 10px;
  left: 20px;
  background: url("../images/gipai.png") no-repeat center center;
  background-size: auto 100%;
}
/* line 931, ../sass/layout.scss */
.info .content {
  padding-left: 70px;
  height: 100%;
  overflow: auto;
}
/* line 937, ../sass/layout.scss */
.info .assignment {
  margin-bottom: 15px;
}
/* line 942, ../sass/layout.scss */
.info .assignment span {
  color: #fff;
}
/* line 946, ../sass/layout.scss */
.info .assignment #countdown {
  font-size: 24px;
  color: #fff;
  font-family: "Libre Baskerville";
}
/* line 954, ../sass/layout.scss */
.info .log p, .info .log .assignment {
  margin-bottom: 5px;
}
/* line 957, ../sass/layout.scss */
.info .log p.spy, .info .log .spy.assignment {
  display: none;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=50);
}
/* line 965, ../sass/layout.scss */
.info .log p span, .info .log .assignment span {
  display: block;
  font-size: 12px;
}
/* line 969, ../sass/layout.scss */
.info .log p span::before, .info .log .assignment span::before {
  content: "[ ";
}
/* line 973, ../sass/layout.scss */
.info .log p span::after, .info .log .assignment span::after, .info .log p span.pending::before, .info .log .assignment span.pending::before {
  content: " ]";
}

/* line 980, ../sass/layout.scss */
.progress {
  font-size: 24px;
  color: #fff;
  line-height: 1.5;
  text-align: center;
  font-family: "Libre Baskerville";
}

/* line 988, ../sass/layout.scss */
.btn {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  position: relative;
  background: #cdbc77 url(../images/reflect.png) no-repeat center top;
  background-size: 100% 40px;
  margin: 0 auto;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
}

/* line 1003, ../sass/layout.scss */
.msg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 414px;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 998;
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
}
/* line 1019, ../sass/layout.scss */
.msg.murder .frame {
  background: #000 url(../images/bg_murder.jpg) no-repeat center center;
  background-size: contain;
}
/* line 1026, ../sass/layout.scss */
.msg.report .frame {
  background: #000 url(../images/bg_report.jpg) no-repeat center center;
  background-size: contain;
}
/* line 1033, ../sass/layout.scss */
.msg.eye .frame {
  background: #000 url(../images/bg_member.jpg) no-repeat center center;
  background-size: cover;
}
/* line 1037, ../sass/layout.scss */
.msg.eye .frame .logo {
  width: 60px;
  height: 60px;
}
/* line 1045, ../sass/layout.scss */
.msg.valid #execute_btn, .msg.valid #dropdown {
  display: block;
}
/* line 1049, ../sass/layout.scss */
.msg.valid #msg_btn {
  display: none;
}
/* line 1053, ../sass/layout.scss */
.msg.valid .justiceSelect {
  display: none !important;
}
/* line 1056, ../sass/layout.scss */
.msg.valid .justiceSelect.active {
  display: block !important;
}
/* line 1062, ../sass/layout.scss */
.msg #execute_btn, .msg #dropdown {
  display: none;
}
/* line 1066, ../sass/layout.scss */
.msg .justiceSelect {
  display: none !important;
}
/* line 1069, ../sass/layout.scss */
.msg .justiceSelect.active {
  display: none !important;
}
/* line 1074, ../sass/layout.scss */
.msg #cancel {
  position: absolute;
  z-index: 500;
  width: 40px;
  height: 40px;
  top: 0px;
  right: 0px;
  text-align: center;
  line-height: 40px;
}
/* line 1084, ../sass/layout.scss */
.msg #cancel::before {
  content: "\f00d";
  font-family: FontAwesome;
  color: #fff;
  font-size: 24px;
}
/* line 1092, ../sass/layout.scss */
.msg .btn {
  bottom: -25px;
}
/* line 1096, ../sass/layout.scss */
.msg .frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  background: #000;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border: 2px solid #cdbc77;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 1112, ../sass/layout.scss */
.msg p, .msg .info .assignment, .info .msg .assignment {
  text-align: center;
}
/* line 1115, ../sass/layout.scss */
.msg p span, .msg .info .assignment span, .info .msg .assignment span {
  color: #fff;
}

/* line 1121, ../sass/layout.scss */
#start {
  display: block;
  background: #000 url("../images/bg_main.jpg") no-repeat center center !important;
  background-size: cover !important;
}
/* line 1126, ../sass/layout.scss */
#start .logo {
  margin: 8vh auto 30px !important;
}

/* line 1131, ../sass/layout.scss */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 414px;
  min-height: 100%;
  z-index: 999;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
}
/* line 1148, ../sass/layout.scss */
.loading .logo {
  margin: 0 auto 30px !important;
}
/* line 1152, ../sass/layout.scss */
.loading .story {
  width: 80%;
  margin: 40px auto;
}
/* line 1156, ../sass/layout.scss */
.loading .story p, .loading .story .info .assignment, .info .loading .story .assignment {
  line-height: 1.8;
}

/* line 1162, ../sass/layout.scss */
.pending {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 414px;
  min-height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}
/* line 1173, ../sass/layout.scss */
.pending::after, .pending::before {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 1191, ../sass/layout.scss */
.pending::before {
  border-color: #cdbc77 transparent;
  z-index: 2;
  border-width: 2px;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@keyframes spin {
  100% {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* line 1211, ../sass/layout.scss */
.ending_btns {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  padding: 0px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50;
}
/* line 1227, ../sass/layout.scss */
.ending_btns > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  float: left;
  text-align: center;
  color: #01ffdb;
  border-top: 1px solid #cdbc77;
}
/* line 1235, ../sass/layout.scss */
.ending_btns > div:last-child {
  border-left: 1px solid #cdbc77;
  color: #cdbc77;
  font-weight: bold;
}

/* line 1243, ../sass/layout.scss */
.preloader {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: -2000px;
  z-index: 0;
  pointer-events: none;
}

/* line 1259, ../sass/layout.scss */
.btns_holder {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  text-align: center;
  padding-bottom: 5%;
}
/* line 1268, ../sass/layout.scss */
.btns_holder .file_container {
  display: inline-block;
  margin: 5px;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  background: #cdbc77;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
/* line 1282, ../sass/layout.scss */
.btns_holder .file_container input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0.01;
  -moz-opacity: 0.01;
  -khtml-opacity: 0.01;
  filter: alpha(opacity=1);
}
/* line 1292, ../sass/layout.scss */
.btns_holder .file_container::before {
  color: #000;
  content: "\f030";
  font-family: FontAwesome;
  font-size: 30px;
}
/* line 1300, ../sass/layout.scss */
.btns_holder .clipBtn {
  display: inline-block;
  margin: 5px;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #cdbc77;
  background: rgba(0, 0, 0, 0.5);
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: -1000px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
/* line 1320, ../sass/layout.scss */
.btns_holder .clipBtn.active {
  position: static;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}
/* line 1325, ../sass/layout.scss */
.btns_holder .clipBtn::before {
  color: #cdbc77;
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 30px;
}

/* line 1334, ../sass/layout.scss */
.svg-filters {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* line 1341, ../sass/layout.scss */
.glitch {
  outline: 90px solid transparent !important;
  filter: url(#filter);
}

@media screen and (max-height: 560px) {
  /* line 1349, ../sass/layout.scss */
  .wrapper {
    min-height: 560px;
  }
}