@charset "UTF-8";
.transform {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
  opacity: 1 !important; }

.slide-top {
  -webkit-animation: slide-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

.slide-right {
  -webkit-animation: slide-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

/*--------主視覺 Cover--------*/
/*-----上下浮動-----*/
/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px); } }

@keyframes slide-top {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px); } }

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slide-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes loading_3 {
  0%, 25% {
    left: 0rem;
    -webkit-transform: scale(0);
    transform: scale(0); }
  50% {
    left: 1rem;
    -webkit-transform: scale(1);
    transform: scale(1); }
  75% {
    left: 2rem; }
  100% {
    left: 3rem;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@-webkit-keyframes loading_3 {
  0%, 25% {
    left: 0rem;
    -webkit-transform: scale(0);
    transform: scale(0); }
  50% {
    left: 1rem;
    -webkit-transform: scale(1);
    transform: scale(1); }
  75% {
    left: 2rem; }
  100% {
    left: 3rem;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes loading {
  0% {
    left: 0rem;
    -webkit-transform: scale(0);
    transform: scale(0); }
  25% {
    left: 1rem;
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    left: 2rem; }
  75% {
    left: 3rem;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    left: 4rem;
    -webkit-transform: scale(0);
    transform: scale(0); } }

@-webkit-keyframes loading {
  0% {
    left: 0rem;
    -webkit-transform: scale(0);
    transform: scale(0); }
  25% {
    left: 1rem;
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    left: 2rem; }
  75% {
    left: 3rem;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    left: 4rem;
    -webkit-transform: scale(0);
    transform: scale(0); } }

.btn_loading {
  position: absolute;
  left: 50%;
  width: 3.5em;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }
  .btn_loading > div {
    position: absolute;
    top: 50%;
    height: .4em;
    width: .4em;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    .btn_loading > div > div {
      width: .4em;
      height: .4em;
      border-radius: 50%;
      background: #FFF;
      position: absolute;
      -webkit-animation: loading 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
      animation: loading 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards; }
  .btn_loading div:nth-child(2) div {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    background: #FFF; }
  .btn_loading div:nth-child(3) div {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    background: #FFF; }
  .btn_loading div:nth-child(4) div {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    background: #FFF; }
  .btn_loading div:nth-child(5) div {
    -webkit-animation: loading_3 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
    animation: loading_3 2s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
    background: #FFF; }

ul {
  margin-bottom: 0; }

.register_success {
  display: none;
  min-height: calc( 100% -  5rem);
  margin-top: 5rem;
  position: relative;
  text-align: center;
  width: 100%; }
  .register_success .contents_view {
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    .register_success .contents_view .img_logo {
      width: 13em; }
    .register_success .contents_view .title {
      display: block;
      color: #157EFA;
      font-weight: 400;
      letter-spacing: 2px;
      padding-top: .6em;
      font-size: 24px;
      font-size: 1.5rem; }
      .register_success .contents_view .title.en_us {
        letter-spacing: 0; }
    .register_success .contents_view .wording {
      display: block;
      line-height: 1.5;
      margin: 3em auto 2em;
      width: 85%; }
      .register_success .contents_view .wording span {
        font-weight: 400; }
  @media only screen and (min-width: 769px) {
    .register_success {
      min-height: calc( 100% -  6.25rem);
      margin-top: 6.25rem; }
      .register_success .contents_view .img_logo {
        width: 12em;
        vertical-align: text-bottom; }
      .register_success .contents_view .title {
        display: inline-block;
        padding-left: .6em;
        font-size: 28px;
        font-size: 1.75rem; }
      .register_success .contents_view .wording {
        wording: 1.67; } }

.register {
  min-height: calc(100vh - 5rem);
  position: relative;
  padding-top: 5rem;
  text-align: center;
  overflow: hidden;
  width: 100%; }
  .register button:disabled {
    background: #157EFA; }
  .register .main_view {
    background: #FFF;
    line-height: 1.5;
    padding: 15% 10% 0 10%; }
    .register .main_view p {
      font-weight: 600;
      color: #157EFA;
      font-size: 28px;
      font-size: 1.75rem; }
    .register .main_view ul.description {
      line-height: 1.2;
      font-size: 16px;
      font-size: 1rem; }
      .register .main_view ul.description li {
        color: #000; }
        .register .main_view ul.description li:before {
          content: "\2022";
          color: #157EFA;
          display: inline-block;
          font-weight: bold;
          vertical-align: middle;
          width: .6em;
          font-size: 26px;
          font-size: 1.625rem; }
    .register .main_view img {
      margin: 1em 0 1.5em;
      width: 100%; }
      .register .main_view img.second_step_img {
        margin-bottom: 3.1em; }
  .register .form_view {
    background-color: #f8f8f8;
    box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    padding: 2em 2.6em;
    width: 80%; }
    .register .form_view ul li {
      text-align: left;
      margin-bottom: 2.8em;
      width: 100%; }
      .register .form_view ul li > div {
        width: 100%; }
        .register .form_view ul li > div input {
          display: block; }
          .register .form_view ul li > div input::placeholder {
            color: #dddddd; }
      .register .form_view ul li select {
        background-color: #f8f8f8;
        border: 0;
        margin: 0;
        color: #000;
        font-weight: 600;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        font-size: 16px;
        font-size: 1rem; }
      .register .form_view ul li label {
        color: #4a4a4a;
        padding-bottom: 1em;
        font-size: 16px;
        font-size: 1rem; }
        .register .form_view ul li label i.i_warning_4 {
          display: none;
          margin-left: 0.4rem;
          color: #157EFA;
          font-size: 16px;
          font-size: 1rem; }
      .register .form_view ul li.country {
        display: inline-block;
        border-bottom: 1px solid #9b9b9b; }
        .register .form_view ul li.country .country_drop_down {
          position: relative;
          overflow: hidden;
          height: 2.125rem;
          width: 100%; }
          .register .form_view ul li.country .country_drop_down select {
            width: 20em;
            padding-left: 10px;
            line-height: 2; }
          .register .form_view ul li.country .country_drop_down:after {
            content: "";
            border: solid #9b9b9b;
            border-width: 0 1px 1px 0;
            display: inline-block;
            position: absolute;
            top: calc( 50% - 8px);
            right: 3px;
            padding: .2rem;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg); }
      .register .form_view ul li.channel_sales_code {
        display: none; }
      .register .form_view ul li.customer_name div.customer_name {
        width: 80%;
        display: inline-block;
        vertical-align: bottom; }
      .register .form_view ul li.customer_name .gender {
        display: inline-block;
        position: relative;
        vertical-align: bottom;
        width: calc( 100% - 80% - .7em);
        overflow: hidden;
        border-bottom: 1px solid #9b9b9b;
        margin-left: .7em; }
        .register .form_view ul li.customer_name .gender select {
          width: 100px;
          padding-bottom: 5px; }
        .register .form_view ul li.customer_name .gender:after {
          content: "";
          border: solid #9b9b9b;
          border-width: 0 1px 1px 0;
          display: inline-block;
          position: absolute;
          top: calc( 50% - 8px);
          right: 3px;
          padding: .2rem;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg); }
      .register .form_view ul li.input-error label, .register .form_view ul li.input-error .field_remark {
        color: #157EFA; }
        .register .form_view ul li.input-error label i.i_warning_4, .register .form_view ul li.input-error .field_remark i.i_warning_4 {
          display: inline-block; }
    .register .form_view .recaptcha {
      display: none; }
    .register .form_view .notes {
      display: block;
      color: #4a4a4a;
      margin: 0 auto .7em;
      letter-spacing: 0.45px;
      line-height: 1.5;
      text-align: center;
      width: 80%;
      font-size: 16px;
      font-size: 1rem; }
      .register .form_view .notes .i_apply_check {
        display: inline-block;
        margin-right: .3em;
        height: 1.3em;
        width: 1.3em;
        vertical-align: middle; }
      .register .form_view .notes .wording {
        vertical-align: middle; }
        .register .form_view .notes .wording a {
          color: #157EFA;
          text-decoration: underline; }
    .register .form_view #submit_block {
      height: auto;
      margin: 0;
      width: 100%; }
      .register .form_view #submit_block .btn_submit {
        height: calc( 1rem + .85em + .85em);
        width: calc( 1rem + 6em + 6em); }
    .register .form_view .button_style {
      border: none;
      display: block;
      margin: 2em auto 0;
      text-align: center; }
    .register .form_view#first_step_form #submit_block .btn_submit {
      width: calc( 1rem + 4em + 4em); }
  .register .first_step_wrapper {
    position: relative; }
    .register .first_step_wrapper.move_out {
      -webkit-animation: move-out .5s ease-in both;
      animation: move-out .5s ease-in both;
      position: absolute; }

@-webkit-keyframes move-out {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@keyframes move-out {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }
  .register .second_step_wrapper {
    position: relative;
    left: -100%;
    display: none; }
    .register .second_step_wrapper.move_in {
      -webkit-animation: move-in .5s ease-in both;
      animation: move-in .5s ease-in both;
      display: inline-block; }

@-webkit-keyframes move-in {
  0% {
    left: 100%; }
  100% {
    left: 0; } }

@keyframes move-in {
  0% {
    left: 100%; }
  100% {
    left: 0; } }
  @media only screen and (min-width: 769px) {
    .register {
      padding-top: 6.25rem;
      padding-bottom: 10em;
      min-height: auto; }
      .register .first_step_wrapper.move_out {
        -webkit-animation: move-out 1s ease-in both;
        animation: move-out 1s ease-in both; }
      .register .second_step_wrapper.move_in {
        -webkit-animation: move-in 1s ease-in both;
        animation: move-in 1s ease-in both; }
      .register .main_view {
        display: inline-block;
        min-height: 28em;
        width: 26em;
        margin-right: 3em;
        margin-top: 4em;
        padding: 0;
        text-align: left;
        vertical-align: middle; }
        .register .main_view.second_step_view ul.description {
          text-align: center; }
        .register .main_view.second_step_view img {
          width: 21em; }
        .register .main_view p {
          font-size: 36px;
          font-size: 2.25rem; }
        .register .main_view img {
          margin: 1.5em 0 2em;
          width: 25em; }
      .register .form_view {
        display: inline-block;
        margin-top: 1em;
        min-width: 20em;
        max-width: 20em;
        position: relative;
        vertical-align: middle; }
        .register .form_view ul li {
          display: inline-block;
          margin-right: 3em;
          margin-bottom: 2.3em;
          overflow: hidden;
          vertical-align: top; }
          .register .form_view ul li:nth-child(2n) {
            margin-right: 0; }
          .register .form_view ul li.customer_name div.customer_name {
            vertical-align: middle; }
        .register .form_view .button_style {
          margin: 1.5em auto 0; } }
  @media (max-width: 1024px) {
    .register {
      padding-top: 5rem;
      padding-bottom: 5em; } }

/*# sourceMappingURL=maps/register.css.map */