@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400&display=swap");
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
  display: block;
}

legend, hr {
  display: none;
}

th {
  font-style: inherit;
  font-weight: inherit;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

a {
  outline: none;
  hlbr: expression(this.onFocus=this.blur());
  text-decoration: none;
  cursor: pointer;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

* {
  box-sizing: border-box;
}

/* main.css ==============================================*/
/*Variable*/
/*Mixin*/
/*Reset*/
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  display: block;
}

.hide {
  display: none !important;
}

::selection {
  background: #ffff99;
  color: #000;
  text-decoration: none;
}

::-webkit-input-placeholder {
  color: #999;
}

::-moz-placeholder {
  color: #999;
}

*:focus {
  outline: none;
}

a {
  color: #fff;
  text-decoration: none;
  transition: color 0.4s;
}

a:hover {
  color: #c29d66;
}

*::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

html, body {
  overflow-x: hidden;
}

body {
  font-size: 20px;
  line-height: 1.7;
  color: #fff;
  font-family: 微軟正黑體, Arial;
  background: rgba(226, 131, 90, 0.8);
  text-align: center;
}
body.lock {
  overflow: hidden;
}

* {
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
  font-variant: normal;
}

/*Body*/
#g-loader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse at center, white 36%, #c6c6c6 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: 1s;
  z-index: 101;
}
#g-loader .center {
  width: 100%;
  height: 150px;
  color: #000;
}
#g-loader .center p {
  font-size: 12px;
  letter-spacing: 5px;
  margin: 15px 0;
}
#g-loader .center .bar {
  width: 100%;
  height: 5px;
  background-color: #ccc;
  position: relative;
}
#g-loader .center .bar .move {
  width: 20%;
  height: 5px;
  background-color: #e7211b;
  position: absolute;
  animation: bar-move 0.5s ease infinite;
}
@keyframes bar-move {
  0% {
    left: 0%;
    width: 0%;
  }
  50% {
    left: 40%;
    width: 20%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}
#g-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

#g-welcome {
  width: 640px;
  margin: 0 auto;
  position: relative;
}
#g-welcome #animation_container {
  margin-left: -210px;
}
#g-welcome #g-footer {
  margin-top: -50px;
}

#g-logo {
  width: 154px;
  height: 26px;
  background: url(../img/logo_hotai.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 15px;
  left: 15px;
  text-indent: -9999px;
}

.footer-nav {
  clear: both;
  position: relative;
}
.footer-nav a {
  display: block;
  margin: 20px auto;
}

.g-bt-1 {
  width: 365px;
  height: 95px;
  background: url(../img/bt.png);
  margin: 0 auto;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
  transform: scale(1);
  transition: 1s;
  font-size: 45px;
  line-height: 2;
  color: #c29d66;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
}
.g-bt-1:hover span {
  transform: scale(0.9);
}

[class^=bt-go-] {
  display: block;
}

.g-bt-2 {
  margin: 0 auto;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
  transform: scale(1);
  transition: 1s;
  text-decoration: underline;
}
.g-bt-2:hover span {
  transform: scale(0.9);
}

.g-bt-3 {
  cursor: pointer;
  position: relative;
}
.g-bt-3:before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #333;
  position: absolute;
  bottom: -4px;
}
.g-bt-3:hover {
  color: #a40000;
}

#g-bt-other {
  position: absolute;
  top: 0;
  left: 3%;
  z-index: 10;
}

#g-wrap {
  width: 640px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  background: #e2835a;
}
#g-wrap:before, #g-wrap:after {
  width: 100%;
  height: 7px;
  background-color: #8b3139;
  position: absolute;
  left: 0;
  z-index: 100;
}
#g-wrap:before {
  top: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
#g-wrap:after {
  bottom: 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}
#g-wrap img {
  max-width: 100%;
}
#g-wrap #g-footer {
  display: none;
}
#g-wrap #g-logo {
  width: 204px;
  height: 34px;
  background-image: url(../img/item.png?v4);
  text-indent: -9999px;
  background-position: 0 -704px;
  background-size: auto;
  position: absolute;
  top: 18px;
  left: 23px;
  transform: scale(0.75);
  transform-origin: 0 0;
}
#g-wrap #g-event-logo {
  width: 177px;
  height: 68px;
  background-image: url(../img/item.png?v4);
  text-indent: -9999px;
  background-position: -404px -180px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

#step-0 {
  width: 640px;
  transition: 1s;
  position: absolute;
  top: 0;
  left: -100%;
}
#step-0.active {
  left: 0;
}

#step-nav {
  position: absolute;
  top: 280px;
  left: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
#step-nav li {
  display: inline-block;
  width: 130px;
  height: 40px;
  margin: 0 25px;
  background-color: #a3182b;
  border-radius: 50px;
  color: #cc4c5d;
  font-weight: bold;
  font-size: 27px;
  line-height: 1.3;
  transition: 1s;
  position: relative;
}
#step-nav li:before {
  content: attr(data-title);
  width: 130px;
  height: 40px;
  background-color: #fff;
  border-radius: 50px;
  color: #a40000;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: 1s;
  opacity: 0;
  visibility: hidden;
}
#step-nav li.active {
  color: #a3182b;
}
#step-nav li.active:before {
  top: -10px;
  left: -10px;
  opacity: 1;
  visibility: visible;
}
#step-nav.active {
  opacity: 1;
  visibility: visible;
}

#stage-bg {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  pointer-events: none;
}
#stage-bg > div {
  background-image: url(../img/stage_bg.png);
  position: absolute;
}
#stage-bg .title {
  width: 568px;
  height: 280px;
  top: 50px;
  left: 35px;
}
#stage-bg p {
  font-size: 56px;
  font-weight: bold;
  color: #f4c357;
  margin-top: 82px;
}
#stage-bg .ball-1 {
  width: 74px;
  height: 135px;
  background-position: 0px -280px;
  top: 20px;
  left: 10px;
  animation: ball-ani 1.5s infinite alternate;
}
@keyframes ball-ani {
  0% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0px);
  }
}
#stage-bg .ball-2 {
  width: 82px;
  height: 110px;
  background-position: -74px -280px;
  top: 70px;
  animation: ball-ani 1.4s infinite alternate;
}
#stage-bg .ball-3 {
  width: 58px;
  height: 84px;
  background-position: -156px -280px;
  top: 265px;
  right: 5px;
  animation: ball-ani 1.3s infinite alternate;
}
#stage-bg .ball-4 {
  width: 107px;
  height: 194px;
  background-position: -214px -280px;
  top: 45px;
  right: 35px;
  animation: ball-ani 1.1s infinite alternate;
}
#stage-bg .ball-5 {
  width: 79px;
  height: 143px;
  background-position: -321px -280px;
  top: 600px;
  left: 2px;
  animation: ball-ani 1.2s infinite alternate;
}
#stage-bg.active {
  opacity: 1;
  visibility: visible;
}

#game-stage {
  width: 2560px;
  transition: 1s;
  position: absolute;
  top: 0;
  left: 100%;
}
#game-stage.active {
  left: 0;
}
#game-stage.step-2 {
  left: -100%;
}
#game-stage.step-2 #preview_wrap {
  left: 27.3%;
}
#game-stage.step-3 {
  left: -200%;
}
#game-stage.step-3 #preview_wrap {
  left: 6.3%;
}
#game-stage.step-3 #preview_wrap:before {
  height: 505px;
}
#game-stage.step-3 #preview_bind {
  height: 700px;
}

#step-1, #step-2, #step-3 {
  width: 640px;
  min-height: 1200px;
  float: left;
  padding-top: 340px;
  position: relative;
}
#step-1 header h2, #step-2 header h2, #step-3 header h2 {
  margin: 0 auto;
  font-size: 25px;
}

#step-1 .g-bt-1 {
  margin-top: 20px;
}

#step-2 {
  padding-top: 340px;
}
#step-2 header {
  margin-bottom: 575px;
}
.cropper-move {
  background-size: 100%;
  opacity: 1;
}

.cropper-face {
  background-color: transparent;
}

#crop_wrap {
  clear: both;
  position: relative;
}

#crop_stage_wrap {
  width: 520px;
  height: 520px;
  margin: 15px 0 40px 60px;
  box-shadow: 15px 15px 0 #9e5b3f;
}

#crop_choose_file {
  height: 0;
  overflow: hidden;
  border: 0;
  position: absolute;
}

#crop_choose_file_label {
  cursor: pointer;
  width: 121px;
  height: 121px;
  background: url(../img/bt_upload.png);
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -60px 0 0 -60px;
  z-index: 100;
  text-indent: -9999px;
  animation: jump-ani 0.5s infinite alternate;
}
@keyframes jump-ani {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

#crop_result {
  max-width: 600px;
  width: 100%;
  display: none;
  margin: 0 auto;
  border: 1px solid #fff;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}

.theme_wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#theme_nav {
  width: 82%;
  margin: 0 auto;
  display: flex;
}
#theme_nav li {
  width: 50%;
  border: 1px solid transparent;
  position: relative;
}
#theme_nav li a {
  display: block;
  border-bottom: 8px solid #969696;
}
#theme_nav li a span {
  background-image: url(../img/item.png?v4);
  text-indent: -9999px;
  width: 88px;
  height: 30px;
  display: inline-block;
  transition: 0.5s;
}
#theme_nav li a:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7.5px 0 7.5px;
  border-color: #c29d66 transparent transparent transparent;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -7px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
#theme_nav li:nth-child(1) a span {
  background-position: -129px -167px;
}
#theme_nav li:nth-child(2) a span {
  background-position: -223px -167px;
}
#theme_nav li.active:nth-child(1) a span {
  background-position: -129px -131px;
}
#theme_nav li.active:nth-child(2) a span {
  background-position: -223px -131px;
}
#theme_nav li.active a {
  border-bottom: 15px solid #c29d66;
}
#theme_nav li.active a:before {
  bottom: -7px;
  opacity: 1;
  visibility: visible;
}

.theme_list {
  width: 350px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
.theme_list.active {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.list_sel_cover {
  max-width: 600px;
  margin: 0 auto;
}
.list_sel_cover li {
  width: 132px;
  height: 132px;
  display: inline-block;
  margin: 15px;
  position: relative;
}
.list_sel_cover li label {
  background: url(../img/theme_list.jpg);
  width: 132px;
  height: 132px;
  cursor: pointer;
}
.list_sel_cover li label[for=theme_2] {
  background-position: -137px 0;
}

.hook {
  display: none;
  width: 152px;
  height: 152px;
  position: absolute;
  top: -10px;
  left: -10px;
  box-sizing: border-box;
  border: 10px solid #a40000;
}
.hook:before {
  content: "";
  background-image: url(../img/item.png?v4);
  text-indent: -9999px;
  width: 57px;
  height: 57px;
  background-position: -521px 0;
  display: block;
  position: absolute;
  bottom: -10px;
  right: -10px;
}

.list_sel_cover li input[type=radio] {
  display: none;
}

input[type=radio]:checked + label .hook {
  display: block;
}

.list_sel_cover li label {
  display: block;
  border: 1px solid #ddd;
}

#preview_wrap {
  width: 520px;
  height: 520px;
  position: absolute;
  top: 400px;
  left: 76.3%;
  box-shadow: 15px 15px 0 #9e5b3f;
}

#preview_bind {
  width: 700px;
  height: 700px;
  transform-origin: 0 0;
  transform: scale(0.745);
  position: relative;
  overflow: hidden;
  background: #fff;
}
#preview_bind.origin {
  transform: scale(1);
}
#preview_bind.origin [id^=pre_cut_] {
  animation: none;
}
#preview_bind.origin [id^=pre_cut_] .txt {
  top: -1.8%;
}
#preview_bind img {
  width: 100%;
}
#preview_bind .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}
#preview_bind.theme_2 .txt {
  color: #000;
  font-family: "Noto Sans TC", 微軟正黑體, serif;
  letter-spacing: 0px;
  text-align: left;
  opacity: 1;
  visibility: visible;
}
#preview_bind.theme_2 .txt .txt-1 {
  top: 545px;
  left: 50%;
  letter-spacing: 0;
  width: 50%;
  color: #575757;
  text-align: center;
  font-size: 26px;
  line-height: 1.2;
}
#preview_bind.theme_2 .txt .txt-2 {
  top: 585px;
  left: 50%;
  width: 50%;
  font-size: 32px;
  text-align: center;
  line-height: 1.2;
}
#preview_bind.theme_2 .txt .txt-2 span {
  font-size: 29px;
}
#preview_bind.theme_2 .txt .txt-2.is-reduce {
  font-size: 27px;
}
#preview_bind.theme_2 .txt .txt-2.is-reduce span {
  font-size: 20px;
}
#preview_bind.theme_2 .txt .txt-3 {
  display: none;
}
#preview_bind.theme_2 .txt .txt-4 {
  top: 215px;
  left: 48.5%;
  width: 40%;
  text-align: center;
  line-height: 1.2;
  font-size: 39px;
  color: #e1004f;
  transform: rotate(12deg);
}
#preview_bind.theme_2 .txt .txt-5 {
  top: 260px;
  left: 47.3%;
  width: 40%;
  text-align: center;
  line-height: 1.2;
  font-size: 39px;
  color: #e1004f;
  transform: rotate(12deg);
}
#preview_bind.theme_2 .txt .txt-6 {
  display: none;
}
#preview_bind.theme_2 .txt .txt-7 {
  top: 130px;
  left: 3.2%;
  font-size: 40px;
  font-weight: bold;
}
#preview_bind.theme_2 .txt .txt-7 span {
  font-size: 30px;
}
#preview_bind.theme_2 .txt .txt-7.is-reduce {
  font-size: 30px;
}
#preview_bind.theme_2 .txt .txt-7.is-reduce span {
  font-size: 20px;
}
#preview_bind.theme_2 .txt .txt-8 {
  display: none;
}
#preview_bind.theme_2 .txt .txt-9 {
  top: 645px;
  left: 67.5%;
  width: 30%;
  font-size: 30px;
  text-align: center;
  line-height: 1.2;
}
#preview_bind.theme_2 .crop_result_people {
  width: 100%;
  margin: 0;
  top: 0;
  left: 0;
  z-index: 1;
}
#preview_bind.theme_2 #pre_cut_1 .bg {
  background-image: url(../img/temp.jpg);
}
#preview_bind.theme_1 .txt {
  color: #000;
  font-family: "Noto Sans TC", 微軟正黑體, serif;
  letter-spacing: 0px;
  text-align: left;
  opacity: 1;
  visibility: visible;
}
#preview_bind.theme_1 .txt .txt-11 {
  width: 100%;
  bottom: 12px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-family: "Noto Sans TC", 微軟正黑體, serif;
}
#preview_bind.theme_1 .txt .txt-1 {
  position: relative;
  letter-spacing: 0;
  color: #fff;
  text-align: left;
  font-size: 25px;
  line-height: 1.2;
}
#preview_bind.theme_1 .txt .txt-1 small {
  opacity: 0;
}
#preview_bind.theme_1 .txt .txt-2 {
  position: static;
  color: #fff;
  text-align: right;
  line-height: 1.2;
  margin-left: 10px;
  display: flex;
  align-items: flex-end;
}
#preview_bind.theme_1 .txt .txt-2 b {
  font-size: 25px;
  display: inline-block;
  font-weight: normal;
}
#preview_bind.theme_1 .txt .txt-2 i {
  display: inline-block;
  vertical-align: middle;
  padding: 0 4px;
  font-style: normal;
  position: relative;
  top: -3px;
}
#preview_bind.theme_1 .txt .txt-2 small {
  font-size: 25px;
  margin-right: 10px;
}
#preview_bind.theme_1 .txt .txt-2 span {
  font-size: 25px;
  color: #fff;
}
#preview_bind.theme_1 .txt .txt-3 {
  top: 503px;
  left: 53.5%;
  width: 30%;
  letter-spacing: 0;
  text-align: center;
  font-size: 50px;
  color: #fff;
  line-height: 1.2;
}
#preview_bind.theme_1 .txt .txt-3.is-only1 {
  left: 55%;
}
#preview_bind.theme_1 .txt .txt-3.is-only2 {
  top: 515px;
  left: 55%;
  font-size: 30px;
}
#preview_bind.theme_1 .txt .txt-3.is-reduce {
  left: 66.5%;
  top: 508px;
  width: 1px;
  line-height: 1;
  font-size: 25px;
  line-height: 1;
}
#preview_bind.theme_1 .txt .txt-4, #preview_bind.theme_1 .txt .txt-5 {
  left: 0%;
  line-height: 1;
  font-size: 48px;
  letter-spacing: 0;
  width: 100%;
  white-space: nowrap;
  color: #dd3340;
  font-weight: bold;
  text-align: center;
  text-shadow: 3px 0 0 #fff, 3px 3px 0 #fff, 0 3px 0 #fff, -3px 3px 0 #fff, -3px 0 0 #fff, -3px -3px 0 #fff, -3px 0 0 #fff, 3px -3px 0 #fff, 0 -3px 0 #fff;
  font-family: "Noto Sans TC", 微軟正黑體, serif;
}
#preview_bind.theme_1 .txt .txt-4 span, #preview_bind.theme_1 .txt .txt-5 span {
  display: block;
}
#preview_bind.theme_1 .txt .txt-4 {
  top: 365px;
  text-indent: -40px;
}
#preview_bind.theme_1 .txt .txt-5 {
  top: 427px;
  text-indent: 40px;
}
#preview_bind.theme_1 .txt .txt-6 {
  top: 508px;
  left: 70.5%;
  width: 1px;
  font-size: 25px;
  color: #fff;
  line-height: 1;
}
#preview_bind.theme_1 .txt .txt-7 {
  display: none;
}
#preview_bind.theme_1 .txt .txt-8 {
  width: 40px;
  top: 5%;
  right: 7%;
  font-size: 25px;
  line-height: 1;
  color: #515917;
  text-shadow: 1px 0 0 #515917;
  text-align: right;
}
#preview_bind.theme_1 .txt .txt-8 span {
  color: #515917;
  font-size: 40px;
  position: relative;
  left: 6px;
  margin: 10px 0;
  display: block;
  text-shadow: 1px 0 0 #515917;
}
#preview_bind.theme_1 .txt .txt-9 {
  top: 645px;
  left: 67.5%;
  color: #fff;
  width: 30%;
  font-size: 30px;
  text-align: center;
  line-height: 1.2;
}
#preview_bind.theme_1 #pre_cut_1 .bg {
  background-image: url(../img/theme_1_1.jpg);
}
#preview_bind.theme_1 #pre_cut_1 .txt {
  z-index: 2;
}
[id^=pre_cut_] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
}
@keyframes pre_cut_show {
  0%, 100% {
    top: 100%;
  }
  50% {
    top: 0;
  }
}
[id^=pre_cut_] .bg {
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}
[id^=pre_cut_] .crop_result_people {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
[id^=pre_cut_] .txt {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
[id^=pre_cut_] .txt [class^=txt-] {
  position: absolute;
  font-variant: normal;
}
#pre_cut_1 {
  top: 0;
}

#bt-dl-sign {
  font-size: 30px;
  font-weight: bold;
  position: relative;
  margin-top: 30px;
}
#bt-dl-sign img {
  position: absolute;
  top: -100px;
  left: 100px;
  width: 100px;
}

.bts {
  margin: 50px 0;
}
.bts li {
  padding: 6px;
}
.frame_s1_preview {
  animation: frame_s1_preview 4s infinite steps(1, end);
}

@keyframes frame_s1_preview {
  0% {
    background-image: url("../img/frame_s1_1.png?v1");
  }
  12.5% {
    background-image: url("../img/frame_s1_2.png?v1");
  }
  25% {
    background-image: url("../img/frame_s1_3.png?v1");
  }
  37.5% {
    background-image: url("../img/frame_s1_1.png?v1");
  }
  50% {
    background-image: url("../img/frame_s1_2.png?v1");
  }
  62.5% {
    background-image: url("../img/frame_s1_3.png?v1");
  }
  75% {
    background-image: url("../img/frame_s1_1.png?v1");
  }
  87.5% {
    background-image: url("../img/frame_s1_2.png?v1");
  }
  100% {
    background-image: url("../img/frame_s1_3.png?v1");
  }
}
.frame_s2_preview {
  animation: frame_s2_preview 4s infinite steps(1, end);
}

@keyframes frame_s2_preview {
  0% {
    background-image: url("../img/frame_s2_1.png?v1");
  }
  12.5% {
    background-image: url("../img/frame_s2_2.png?v1");
  }
  25% {
    background-image: url("../img/frame_s2_2.png?v1");
  }
  37.5% {
    background-image: url("../img/frame_s2_3.png?v1");
  }
  50% {
    background-image: url("../img/frame_s2_4.png?v1");
  }
  62.5% {
    background-image: url("../img/frame_s2_4.png?v1");
  }
  75% {
    background-image: url("../img/frame_s2_3.png?v1");
  }
  87.5% {
    background-image: url("../img/frame_s2_2.png?v1");
  }
  100% {
    background-image: url("../img/frame_s2_1.png?v1");
  }
}
#text_result {
  width: 600px;
  height: 600px;
}

.step2-h3-1 span, .step2-h3-2 span {
  display: block;
  margin: 0 auto;
}

.step2-h3-2 {
  display: none;
}
.crop_result_people {
  position: absolute;
}

.cover_text_tp {
  width: 70%;
  margin: 0 auto;
}
.cover_text_tp ol li {
  position: relative;
  margin: 10px 0;
  padding-left: 100px;
  text-align: left;
}
.cover_text_tp ol li.w100 {
  padding-left: 0;
}
.cover_text_tp ol li hr {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  display: block;
}
.cover_text_tp label {
  position: absolute;
  left: 0;
}
.cover_text_tp input, .cover_text_tp textarea, .cover_text_tp select, .cover_text_tp #qa_selected {
  font-size: 27px;
  width: 100%;
  font-family: 微軟正黑體;
  padding: 10px 10px;
  text-align: left;
  border: 1px solid #c29d66;
  box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.cover_text_tp .radios {
  margin-left: 30px;
}
.cover_text_tp #qa_selected {
  padding: 0 10px;
  height: 50px;
  white-space: nowrap;
  color: #000;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.cover_text_tp #qa_selected br {
  display: none;
}
.cover_text_tp #qa_selected:after {
  content: "";
  width: 20%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
  position: absolute;
  top: 0;
  right: 0;
}
.cover_text_tp #qa_selected:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #000 transparent transparent transparent;
  position: absolute;
  top: 50%;
  right: 5%;
  z-index: 1;
}
.cover_text_tp input[type=radio] {
  display: none;
}
.cover_text_tp input[type=radio] + label {
  padding-left: 35px;
  width: auto;
  font-size: 25px;
  font-weight: 300;
  line-height: 21px;
  position: relative;
  display: inline-block;
  text-align: left;
  cursor: pointer;
}
.cover_text_tp input[type=radio] + label:before, .cover_text_tp input[type=radio] + label:after {
  content: "";
  width: 22px;
  height: 22px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #DFDFDF;
  border-radius: 2px;
  font-size: 15px;
  border-radius: 50%;
}
.cover_text_tp input[type=radio] + label:before {
  content: "";
  background-color: #fff;
}
.cover_text_tp input[type=radio] + label:after {
  opacity: 0;
  visibility: hidden;
  width: 18px;
  height: 18px;
  border: 0;
  background-color: #EDAD1D;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}
.cover_text_tp input[type=radio] + label:active:before, .cover_text_tp input[type=radio]:checked + label:before {
  border-color: #EDAD1D;
}
.cover_text_tp input[type=radio] + label:active:after, .cover_text_tp input[type=radio]:checked + label:after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.cover_text_tp #t-countie {
  width: 45%;
}
.cover_text_tp #t-district {
  width: 53%;
}

#cover_text_tp_1, #cover_text_tp_2 {
  display: none;
}
#cover_text_tp_1.active, #cover_text_tp_2.active {
  display: block;
}

#preview_result {
  width: 520px;
  height: 520px;
  position: relative;
  background: url(../img/loader.gif) no-repeat center #fff;
  margin: 20px auto;
  box-shadow: 15px 15px 0 #9e5b3f;
}

#crop_result_done {
  width: 100%;
}

#sponsor {
  width: 69%;
  margin: 0 auto;
}
#sponsor li {
  width: 100%;
  padding: 10px 10px;
  border-radius: 20px;
  border: 1px solid #c29d66;
  box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  margin: 15px 0;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
#sponsor li:before {
  content: "";
  width: 21px;
  height: 16px;
  background-image: url(../img/item.png?v4);
  text-indent: -9999px;
  background-position: -316px -180px;
  position: absolute;
  top: 20px;
  right: 30px;
}
#sponsor li span {
  background-image: url(../img/item.png?v4);
  text-indent: -9999px;
  display: inline-block;
  vertical-align: middle;
  transform: scale(0.75);
}
#sponsor li:hover {
  background-color: rgba(194, 157, 102, 0.1);
  transition: 0s;
}
#sponsor li:nth-child(1) span {
  width: 180px;
  height: 38px;
  background-position: 0 -661px;
}
#sponsor li:nth-child(1):before {
  display: none;
}
#sponsor li:nth-child(2) span {
  width: 98px;
  height: 24px;
  background-position: -316px -152px;
}
#sponsor li:nth-child(3) span {
  width: 74px;
  height: 24px;
  background-position: -419px -152px;
}

#g-footer {
  clear: both;
  font-size: 15px;
  font-weight: 200;
  letter-spacing: 2px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 50px;
}

#unsupport-mobile-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  color: #fff;
  font-size: 20px;
  line-height: 2;
}
#unsupport-mobile-warning.active {
  opacity: 1;
  visibility: visible;
}
#unsupport-mobile-warning .tip-arrow {
  background: url(../img/umw_tip_arrow.png);
  width: 100px;
  height: 110px;
  background-size: cover;
  position: fixed;
  right: 0;
}
#unsupport-mobile-warning.is-top .tip-arrow {
  top: 0;
}
#unsupport-mobile-warning.is-bottom .tip-arrow {
  bottom: 150px;
  transform: scaleY(-1);
}
#unsupport-mobile-warning .tip-txt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 5%;
  font-size: 35px;
}
#unsupport-mobile-warning .tip-triple {
  display: inline-block;
  position: relative;
  top: -5px;
}
#unsupport-mobile-warning.is-ios.is-line .tip-triple {
  top: 0;
  background: url(../img/umw_tip_icon_ios.png) no-repeat;
  background-size: 100%;
  text-indent: -9999px;
  width: 40px;
  height: 60px;
  margin: 0 10px;
}

#umw-note {
  font-size: 12px;
}

.msg-box {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  z-index: 101;
  transform: scale(1);
  perspective: 700px;
}
.msg-box.is-active {
  opacity: 1;
  visibility: visible;
}
.msg-box.is-active .bg-sparkle {
  transform: scale(1) translateY(0px);
}
.msg-box .bg-sparkle {
  width: 100%;
  height: 100%;
  background-size: 50%;
  background-repeat: repeat-x;
  background-position: 80% 10%;
  transform: scale(0.8) translateY(-150px);
  transition: 3s;
  position: absolute;
}
.msg-box .msg-wrap {
  background: #fff;
  width: 90%;
  height: 90%;
  max-width: 850px;
  max-height: 800px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  box-shadow: 0 100px 100px rgba(0, 0, 0, 0.3);
  padding: 20px;
  transform: rotateY(90deg) translate3d(0, 150px, 0);
  transform-style: preserve-3d;
  transition-delay: 0.5s;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
}
.msg-box .msg-wrap > .close {
  cursor: pointer;
  position: absolute;
  top: -65px;
  right: -15px;
  width: 60px;
  height: 60px;
  transition: 0.2s;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.05, 0.32, 0.48, 1.31);
}
.msg-box .msg-wrap > .close:before, .msg-box .msg-wrap > .close:after {
  content: "";
  width: 3px;
  height: 35px;
  background: #fff;
  transform: rotate(45deg) translate3d(0, 0, 0);
  position: absolute;
  top: 10px;
  left: 27px;
}
.msg-box .msg-wrap > .close:before {
  transform: rotate(45deg) translate3d(0, 0, 0);
}
.msg-box .msg-wrap > .close:after {
  transform: rotate(-45deg) translate3d(0, 0, 0);
}
.msg-box.is-active .msg-wrap {
  transform: rotateY(0deg) translate3d(0, -50%, 0);
  opacity: 1;
  visibility: visible;
}
.msg-box.is-active .msg-wrap > .close {
  transform: scale(1);
  opacity: 1;
}
.msg-box.is-active .msg-wrap > .close:hover {
  transform: rotate(90deg);
}
.msg-box .msg-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
.msg-box .msg-content header {
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  line-height: 1.5;
}
.msg-box .msg-content p {
  line-height: 2;
  margin: 10px 0;
}
.msg-box .msg-content img {
  max-width: 100%;
}
.msg-box .msg-content .bt {
  width: 70%;
  display: block;
  margin: 10px auto;
  cursor: pointer;
  position: relative;
  background: linear-gradient(to bottom, #ffa702 0%, #ffa702 45%, #fa8403 52%, #cd6f08 100%);
  border-radius: 5px;
  color: #fff;
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 10px #000;
  box-shadow: 0 2px 5px #000;
  line-height: 2.6;
}
.msg-box .msg-content .bt:hover {
  transform: scale(1.05);
  transition: 0.2s;
}
.msg-box .msg-content.msg-content-pd {
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.msg-box .msg-content.msg-content-pd .img {
  width: 40%;
}
.msg-box .msg-content.msg-content-pd .img img {
  margin: 0 auto;
}
.msg-box .msg-content.msg-content-pd .txt {
  width: 60%;
}
.msg-box .msg-content.msg-content-pd .special {
  color: #88bd25;
  font-size: 30px;
}
.msg-box .msg-content.msg-content-pd h3 {
  font-size: 40px;
  font-weight: bold;
}
.msg-box .msg-content.msg-content-pd p {
  line-height: 1.5;
  font-size: 28px;
}

#msg-s-partner .msg-wrap, #msg-s-dealer .msg-wrap {
  width: 360px;
  max-height: 680px;
}
#msg-s-partner .msg-wrap .msg-content, #msg-s-dealer .msg-wrap .msg-content {
  width: 100%;
}

#msg-s-dealer .msg-wrap {
  max-height: 610px;
}

#msg-alert .msg-wrap {
  width: 500px;
  height: auto;
  background-color: #e2835a;
}
#msg-alert .msg-content {
  width: 100%;
  min-height: 200px;
}
#msg-alert .msg-content header {
  font-size: 25px;
  padding: 5% 0;
}
#msg-alert .msg-content .bt {
  background: none;
  box-shadow: none;
  text-shadow: none;
  background: url(../img/bt.png);
  background-size: 100% 100%;
  color: #c29d66;
}

#msg-s-qa .msg-wrap {
  width: 500px;
  max-height: 680px;
}
#msg-s-qa .msg-wrap .msg-content {
  width: 100%;
  color: #000;
  text-align: left;
}
#msg-s-qa .msg-wrap .msg-content header {
  color: #000;
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
}
#msg-s-qa .msg-wrap .msg-content input[type=radio] {
  display: none;
}
#msg-s-qa .msg-wrap .msg-content label {
  width: 100%;
  clear: both;
  display: block;
  border-top: 1px solid #c29d66;
  padding: 10px 0;
  cursor: pointer;
}
#msg-s-qa .msg-wrap .msg-content label:hover {
  background-color: rgba(255, 255, 153, 0.2);
}

.sponsor-list li {
  font-size: 20px;
  width: 100%;
  font-family: 微軟正黑體;
  padding: 10px 10px;
  text-align: center;
  border-radius: 50px;
  border: 1px solid #c29d66;
  box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 15px;
  cursor: pointer;
}
.sponsor-list li:hover {
  background-color: rgba(194, 157, 102, 0.1);
}

#msg-s-partner .sponsor-list li span {
  background-image: url(../img/item.png?v4);
  text-indent: -9999px;
  height: 34px;
  display: inline-block;
}
#msg-s-partner .sponsor-list li:nth-child(1) span {
  width: 138px;
  background-position: -209px -704px;
}
#msg-s-partner .sponsor-list li:nth-child(2) span {
  width: 154px;
  background-position: -352px -704px;
}
#msg-s-partner .sponsor-list li:nth-child(3) span {
  width: 139px;
  background-position: 0 -743px;
}
#msg-s-partner .sponsor-list li:nth-child(4) span {
  width: 116px;
  background-position: -144px -743px;
}
#msg-s-partner .sponsor-list li:nth-child(5) span {
  width: 150px;
  background-position: -265px -743px;
}
#msg-s-partner .sponsor-list li:nth-child(6) span {
  width: 136px;
  background-position: 0 -782px;
}
#msg-s-partner .sponsor-list li:nth-child(7) span {
  width: 143px;
  background-position: -141px -782px;
}
#msg-s-partner .sponsor-list li:nth-child(8) span {
  width: 139px;
  background-position: -289px -782px;
}
#msg-s-partner .sponsor-list li:nth-child(9) span {
  width: 128px;
  background-position: -432px -782px;
}

#share_page {
  margin-top: 105px;
}
#share_page .g-bt-1 {
  margin-top: 50px;
}