@charset "UTF-8";
@import url("https://www.myvideo.net.tw/static/css/RWD/color_variables.css");
body.login_body {
  background-color: var(--color-gray-175);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow-x: hidden;
}
.login_bg {
  width: 100%;
  height: 56.22vw;
  background-color: var(--color-gray-175);
  position: fixed;
  top: 0;
  right: 0;
  display: none;
}
@media screen and (min-width: 768px) {
  .login_bg {
    background-color: transparent;
    background-size: auto 56.22vw;
    background-position: right top;
    background-repeat: no-repeat;
    display: block;
  }
}
@media screen and (min-width: 768px) and (min-width: 1425px) {
  .login_bg {
    background-size: 100% auto;
  }
}
@media screen and (min-width: 768px) {
  .login_bg::after {
    content: "";
    width: 100%;
    height: 56.22vw;
    display: block;
    background-image: -webkit-gradient(linear, left top, right top, from(var(--color-gray-175)), color-stop(9.97%, rgba(var(--color-rgb-gray-175), 0.904798)), color-stop(18.12%, rgba(var(--color-rgb-gray-175), 0.82036)), color-stop(24.75%, rgba(var(--color-rgb-gray-175), 0.745143)), color-stop(30.18%, rgba(var(--color-rgb-gray-175), 0.677604)), color-stop(34.72%, rgba(var(--color-rgb-gray-175), 0.616199)), color-stop(38.68%, rgba(var(--color-rgb-gray-175), 0.559385)), color-stop(42.38%, rgba(var(--color-rgb-gray-175), 0.505618)), color-stop(46.13%, rgba(var(--color-rgb-gray-175), 0.453356)), color-stop(50.24%, rgba(var(--color-rgb-gray-175), 0.401055)), color-stop(55.03%, rgba(var(--color-rgb-gray-175), 0.347171)), color-stop(60.8%, rgba(var(--color-rgb-gray-175), 0.290162)), color-stop(67.87%, rgba(var(--color-rgb-gray-175), 0.228484)), color-stop(76.55%, rgba(var(--color-rgb-gray-175), 0.160593)), color-stop(87.16%, rgba(var(--color-rgb-gray-175), 0.0849459)), to(rgba(var(--color-rgb-gray-175), 0))), -webkit-gradient(linear, left bottom, left top, from(var(--color-gray-175)), color-stop(9.16%, rgba(var(--color-rgb-gray-175), 0.915943)), color-stop(16.83%, rgba(var(--color-rgb-gray-175), 0.840804)), color-stop(23.27%, rgba(var(--color-rgb-gray-175), 0.773099)), color-stop(28.74%, rgba(var(--color-rgb-gray-175), 0.711342)), color-stop(33.5%, rgba(var(--color-rgb-gray-175), 0.65405)), color-stop(37.81%, rgba(var(--color-rgb-gray-175), 0.599736)), color-stop(41.94%, rgba(var(--color-rgb-gray-175), 0.546917)), color-stop(46.16%, rgba(var(--color-rgb-gray-175), 0.494108)), color-stop(50.72%, rgba(var(--color-rgb-gray-175), 0.439824)), color-stop(55.88%, rgba(var(--color-rgb-gray-175), 0.38258)), color-stop(61.92%, rgba(var(--color-rgb-gray-175), 0.320892)), color-stop(69.08%, rgba(var(--color-rgb-gray-175), 0.253275)), color-stop(77.64%, rgba(var(--color-rgb-gray-175), 0.178243)), color-stop(87.86%, rgba(var(--color-rgb-gray-175), 0.0943134)), to(rgba(var(--color-rgb-gray-175), 0)));
    background-image: linear-gradient(90deg, var(--color-gray-175) 0%, rgba(var(--color-rgb-gray-175), 0.904798) 9.97%, rgba(var(--color-rgb-gray-175), 0.82036) 18.12%, rgba(var(--color-rgb-gray-175), 0.745143) 24.75%, rgba(var(--color-rgb-gray-175), 0.677604) 30.18%, rgba(var(--color-rgb-gray-175), 0.616199) 34.72%, rgba(var(--color-rgb-gray-175), 0.559385) 38.68%, rgba(var(--color-rgb-gray-175), 0.505618) 42.38%, rgba(var(--color-rgb-gray-175), 0.453356) 46.13%, rgba(var(--color-rgb-gray-175), 0.401055) 50.24%, rgba(var(--color-rgb-gray-175), 0.347171) 55.03%, rgba(var(--color-rgb-gray-175), 0.290162) 60.8%, rgba(var(--color-rgb-gray-175), 0.228484) 67.87%, rgba(var(--color-rgb-gray-175), 0.160593) 76.55%, rgba(var(--color-rgb-gray-175), 0.0849459) 87.16%, rgba(var(--color-rgb-gray-175), 0) 100%), linear-gradient(0deg, var(--color-gray-175) 0%, rgba(var(--color-rgb-gray-175), 0.915943) 9.16%, rgba(var(--color-rgb-gray-175), 0.840804) 16.83%, rgba(var(--color-rgb-gray-175), 0.773099) 23.27%, rgba(var(--color-rgb-gray-175), 0.711342) 28.74%, rgba(var(--color-rgb-gray-175), 0.65405) 33.5%, rgba(var(--color-rgb-gray-175), 0.599736) 37.81%, rgba(var(--color-rgb-gray-175), 0.546917) 41.94%, rgba(var(--color-rgb-gray-175), 0.494108) 46.16%, rgba(var(--color-rgb-gray-175), 0.439824) 50.72%, rgba(var(--color-rgb-gray-175), 0.38258) 55.88%, rgba(var(--color-rgb-gray-175), 0.320892) 61.92%, rgba(var(--color-rgb-gray-175), 0.253275) 69.08%, rgba(var(--color-rgb-gray-175), 0.178243) 77.64%, rgba(var(--color-rgb-gray-175), 0.0943134) 87.86%, rgba(var(--color-rgb-gray-175), 0) 100%);
    position: absolute;
    top: 0;
  }
}

.login_wrap {
  width: 100%;
  z-index: 1;
  position: relative;
  background-color: var(--color-gray-175);
}
@media screen and (min-width: 768px) {
  .login_wrap {
    background-color: transparent;
  }
}
.login_wrap * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.login_wrap .logo {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 11px 24px 7px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  .login_wrap .logo {
    padding: 18px 30px 16px;
  }
}
.login_wrap .logo img {
  width: 88px;
  height: 22px;
  color: var(--color-logo-orange);
}
@media screen and (min-width: 768px) {
  .login_wrap .logo img {
    width: 110px;
    height: 28px;
  }
}
.login_wrap .login_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 1200px) {
  .login_wrap .login_group {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-width: 1200px;
  }
}
@media screen and (min-width: 1200px) {
  .login_wrap .login_group.center {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.login_wrap .login_group .login_form {
  width: 100%;
  max-width: 460px;
  padding: 20px 24px;
  margin-top: 46px;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form {
    background-color: rgba(18, 18, 18, 0.7);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 46px;
    margin-top: 58px;
    margin-bottom: 58px;
  }
}
@media screen and (min-width: 1200px) {
  .login_wrap .login_group .login_form {
    margin-bottom: 0;
  }
}
.login_wrap .login_group .login_form .login_form_head {
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: 20px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form .login_form_head {
    height: 48px;
    margin-bottom: 24px;
  }
}
.login_wrap .login_group .login_form .login_form_head h1 {
  font-size: 28px;
  line-height: 41px;
  color: var(--color-gray-9);
  font-weight: bold;
  position: absolute;
  left: 0;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form .login_form_head h1 {
    font-size: 34px;
    line-height: 49px;
  }
}
.login_wrap .login_group .login_form .login_form_head .register {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login_wrap .login_group .login_form .login_form_head .register a.register_btn {
  height: 40px;
  font-size: 15px;
  line-height: 22px;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  border-radius: 50px;
  padding: 0px 20px;
  margin-left: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.login_wrap .login_group .login_form .login_form_head .register a.register_btn:hover {
  background-color: var(--color-white);
  color: var(--color-gray-1);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.login_wrap .login_group .login_form .login_dialog {
  color: var(--color-gray-7);
  font-size: 12px;
  line-height: 18px;
  margin: -8px auto 20px;
}
.login_wrap .login_group .login_form form .error_group {
  width: 100%;
  height: auto;
  background: rgba(183, 32, 32, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: block;
  margin-bottom: 12px;
  font-size: 0;
  display: none;
}
.login_wrap .login_group .login_form form .error_group .error_icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: middle;
  display: inline-block;
  font-size: 0;
}
.login_wrap .login_group .login_form form .error_group .error_msg {
  color: var(--color-white);
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}
.login_wrap .login_group .login_form form .error_group .error_msg p {
  display: block;
  font-size: 14px;
  line-height: 21px;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .error_group .error_msg p {
    font-size: 15px;
    line-height: 23px;
  }
}
.login_wrap .login_group .login_form form .error_group .error_msg p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login_wrap .login_group .login_form form .input_group {
  margin-bottom: 12px;
}
.login_wrap .login_group .login_form form .input_group .cus_input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 23px;
  color: var(--color-white);
  border: 1px solid var(--color-gray-3);
  background-color: var(--color-gray-3);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 50px;
  padding: 0px 16px;
  -webkit-appearance: none;
  -webkit-transition: border 0.2s;
  transition: border 0.2s;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .input_group .cus_input {
    height: 46px;
    padding: 0px 24px;
    font-size: 15px;
    line-height: 22px;
  }
}
.login_wrap .login_group .login_form form .input_group .cus_input::-webkit-input-placeholder {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-6);
}
.login_wrap .login_group .login_form form .input_group .cus_input::-moz-placeholder {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-6);
}
.login_wrap .login_group .login_form form .input_group .cus_input:-ms-input-placeholder {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-6);
}
.login_wrap .login_group .login_form form .input_group .cus_input::-ms-input-placeholder {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-6);
}
.login_wrap .login_group .login_form form .input_group .cus_input::placeholder {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-6);
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .input_group .cus_input::-webkit-input-placeholder {
    font-size: 15px;
    line-height: 22px;
  }
  .login_wrap .login_group .login_form form .input_group .cus_input::-moz-placeholder {
    font-size: 15px;
    line-height: 22px;
  }
  .login_wrap .login_group .login_form form .input_group .cus_input:-ms-input-placeholder {
    font-size: 15px;
    line-height: 22px;
  }
  .login_wrap .login_group .login_form form .input_group .cus_input::-ms-input-placeholder {
    font-size: 15px;
    line-height: 22px;
  }
  .login_wrap .login_group .login_form form .input_group .cus_input::placeholder {
    font-size: 15px;
    line-height: 22px;
  }
}
.login_wrap .login_group .login_form form .input_group .cus_input.error {
  border: 1px solid var(--color-warning);
}
.login_wrap .login_group .login_form form .input_group .cus_input:focus {
  border: 1px solid var(--color-gray-4);
}
.login_wrap .login_group .login_form form .input_group .cus_input:-webkit-autofill, .login_wrap .login_group .login_form form .input_group .cus_input:-webkit-autofill:hover, .login_wrap .login_group .login_form form .input_group .cus_input:-webkit-autofill:focus, .login_wrap .login_group .login_form form .input_group .cus_input:-webkit-autofill:active {
  background-color: var(--color-gray-3) !important;
  -webkit-box-shadow: 0 0 0 100px var(--color-gray-3) inset !important;
          box-shadow: 0 0 0 100px var(--color-gray-3) inset !important;
  -webkit-text-fill-color: var(--color-white) !important;
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap .clear_btn, .login_wrap .login_group .login_form form .input_group .input_wrap .clear_btn, .login_wrap .login_group .login_form form .input_group .password_input_wrap .password_eye, .login_wrap .login_group .login_form form .input_group .input_wrap .password_eye {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 16px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .input_group .password_input_wrap .clear_btn, .login_wrap .login_group .login_form form .input_group .input_wrap .clear_btn, .login_wrap .login_group .login_form form .input_group .password_input_wrap .password_eye, .login_wrap .login_group .login_form form .input_group .input_wrap .password_eye {
    top: 13px;
    right: 24px;
  }
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap, .login_wrap .login_group .login_form form .input_group .input_wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap .password_eye, .login_wrap .login_group .login_form form .input_group .input_wrap .password_eye {
  background-image: url(../../images/RWD/login/show_password_normal.svg);
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap .password_eye.active, .login_wrap .login_group .login_form form .input_group .input_wrap .password_eye.active {
  background-image: url(../../images/RWD/login/show_password_selected.svg);
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap .clear_btn, .login_wrap .login_group .login_form form .input_group .input_wrap .clear_btn {
  background-image: url(../../images/RWD/login/clear_btn.svg);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  display: none;
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap input.cus_input:not(:-moz-placeholder-shown) ~ .clear_btn, .login_wrap .login_group .login_form form .input_group .input_wrap input.cus_input:not(:-moz-placeholder-shown) ~ .clear_btn {
  display: block;
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap input.cus_input:not(:-ms-input-placeholder) ~ .clear_btn, .login_wrap .login_group .login_form form .input_group .input_wrap input.cus_input:not(:-ms-input-placeholder) ~ .clear_btn {
  display: block;
}
.login_wrap .login_group .login_form form .input_group .password_input_wrap input.cus_input:not(:placeholder-shown) ~ .clear_btn, .login_wrap .login_group .login_form form .input_group .input_wrap input.cus_input:not(:placeholder-shown) ~ .clear_btn {
  display: block;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group {
  margin-top: 24px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .cus_input {
  height: 46px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .cus_input::-webkit-input-placeholder {
  font-size: 15px;
  line-height: 22px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .cus_input::-moz-placeholder {
  font-size: 15px;
  line-height: 22px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .cus_input:-ms-input-placeholder {
  font-size: 15px;
  line-height: 22px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .cus_input::-ms-input-placeholder {
  font-size: 15px;
  line-height: 22px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .cus_input::placeholder {
  font-size: 15px;
  line-height: 22px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .validate {
  position: relative;
  margin-left: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  cursor: pointer;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .validate:hover span {
  opacity: 1;
  visibility: visible;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .validate i {
  width: 20px;
  height: 20px;
  background: rgba(var(--color-rgb-gray-2), 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .validate i svg {
  width: 12px;
  height: 12px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .validate img {
  height: 42px;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .validate span {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-white);
  background: var(--color-gray-3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  z-index: 10;
  position: absolute;
  top: -40px;
  -webkit-animation: opacity 0.2s, visibility 0.1s 0.21s;
          animation: opacity 0.2s, visibility 0.1s 0.21s;
}
.login_wrap .login_group .login_form form .input_group.input_validate_group .validate span::after {
  content: "";
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  background: var(--color-gray-3);
  position: absolute;
  bottom: -4px;
}
.login_wrap .login_group .login_form form .button_wrap {
  margin-top: 24px;
}
.login_wrap .login_group .login_form form .button_wrap button {
  width: 100%;
  font-size: 15px;
  line-height: 22px;
  height: 40px;
  color: var(--color-white);
  border: 1px solid var(--color-orange-1);
  background-color: var(--color-orange-1);
  border-radius: 50px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .button_wrap button {
    height: 46px;
  }
}
.login_wrap .login_group .login_form form .button_wrap button:hover {
  border: 1px solid var(--color-orange-2);
  background-color: var(--color-orange-2);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.login_wrap .login_group .login_form form .countdown {
  text-align: center;
  margin: 24px auto 0;
}
.login_wrap .login_group .login_form form .countdown * {
  display: inline;
  font-size: 14px;
  line-height: 20px;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .countdown * {
    font-size: 15px;
    line-height: 22px;
  }
}
.login_wrap .login_group .login_form form .countdown p {
  color: var(--color-white);
}
.login_wrap .login_group .login_form form .countdown .counting {
  margin-left: 4px;
}
.login_wrap .login_group .login_form form .countdown span {
  color: var(--color-gray-6);
  cursor: default;
}
.login_wrap .login_group .login_form form .countdown a {
  color: var(--color-orange-1);
  cursor: pointer;
}
.login_wrap .login_group .login_form form .countdown a:hover {
  color: var(--color-orange-2);
}
.login_wrap .login_group .login_form form .option_wrap {
  border-bottom: 1px solid var(--color-gray-3);
  padding-bottom: 20px;
  position: relative;
}
.login_wrap .login_group .login_form form .option_wrap.border_none {
  border-bottom: 0;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .option_wrap {
    padding-bottom: 24px;
  }
}
.login_wrap .login_group .login_form form .option_wrap .option_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 8px;
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .checkbox_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .checkbox_group #checkbox_login {
  margin: 0;
  display: none;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .checkbox_group #checkbox_login:checked + .checkbox_label::before {
  content: "";
  border: 1px solid var(--color-orange-1);
  background-color: var(--color-orange-1);
  background-image: url(../../images/RWD/login/checkbox_check.svg);
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .checkbox_group .checkbox_label {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .checkbox_group .checkbox_label {
    font-size: 15px;
    line-height: 22px;
  }
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .checkbox_group .checkbox_label::before {
  content: "";
  width: 16px;
  height: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--color-gray-6);
  background-color: transparent;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 8px;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .checkbox_group .checkbox_label a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .qmark {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  cursor: pointer;
  padding: 2px 4px;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .checkbox_wrap .qmark img {
  width: 16px;
  height: 16px;
}
.login_wrap .login_group .login_form form .option_wrap .option_group .option_action_btn {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-orange-1);
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .option_wrap .option_group .option_action_btn {
    font-size: 15px;
    line-height: 22px;
  }
}
.login_wrap .login_group .login_form form .option_wrap .option_group .option_action_btn:hover {
  color: var(--color-orange-2);
}
.login_wrap .login_group .login_form form .option_wrap .hover_qmark {
  display: none;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .option_wrap .hover_qmark {
    width: 16px;
    height: 24px;
    background-color: transparent;
    display: block;
    position: absolute;
    left: 90px;
    top: 0px;
    visibility: visible;
    right: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
  .login_wrap .login_group .login_form form .option_wrap .hover_qmark:hover ~ .hide_info {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}
.login_wrap .login_group .login_form form .option_wrap .hide_info {
  width: 100%;
  max-width: 387px;
  border-radius: 0px 12px 12px 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 18px;
  background: var(--color-gray-3);
  color: var(--color-white);
  -webkit-box-shadow: 0px 0px 8px rgba(var(--color-rgb-black), 0.1);
          box-shadow: 0px 0px 8px rgba(var(--color-rgb-black), 0.1);
  z-index: 5;
  margin-top: 8px;
  display: none;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .option_wrap .hide_info {
    width: 243px;
    height: auto;
    position: absolute;
    top: 24px;
    left: 88px;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: block;
  }
  .login_wrap .login_group .login_form form .option_wrap .hide_info:hover {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group {
  padding-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group {
    padding-top: 24px;
  }
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_login {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gray-7);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_login {
    font-size: 15px;
    line-height: 22px;
  }
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  outline: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  background-color: transparent;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  margin-right: 4px;
}
@media screen and (min-width: 375px) {
  .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn {
    margin-right: 12px;
  }
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn {
    margin-right: 16px;
  }
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn svg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-rgb-white), 0.1);
  background-color: rgba(var(--color-rgb-white), 0.2);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn svg .icon_fg {
  fill: rgba(var(--color-rgb-white), 0.8);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn:hover {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn:hover svg {
  border: 1px solid transparent;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_google:hover svg {
  background-color: var(--color-white);
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_google:hover svg .icon_fg_1 {
  fill: #4285F4;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_google:hover svg .icon_fg_2 {
  fill: #34A853;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_google:hover svg .icon_fg_3 {
  fill: #FBBC05;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_google:hover svg .icon_fg_4 {
  fill: #EA4335;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_apple:hover svg {
  background-color: var(--color-white);
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_apple:hover svg .icon_fg {
  fill: var(--color-black);
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_fb {
  margin-right: 0px;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_fb:hover svg {
  background-color: #1877F2;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_fb:hover svg .icon_fg {
  fill: var(--color-white);
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_bandott {
  margin-right: 0px;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_bandott:hover svg {
  background-color: #0B318F;
}
.login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap .direct_openid .cus_btn.btn_bandott:hover svg .icon_fg {
  fill: var(--color-white);
}
.login_wrap .login_group .login_form form .others_wrap {
  border-radius: 12px;
  background-color: var(--color-gray-25);
  padding: 16px;
  margin: 20px auto 0;
}
@media screen and (min-width: 768px) {
  .login_wrap .login_group .login_form form .others_wrap {
    margin: 24px auto 0;
  }
}
.login_wrap .login_group .login_form form .others_wrap p {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray-5);
}
.login_wrap .login_group .login_form form .others_wrap ol.notes {
  list-style: decimal;
  margin-left: 18px;
}
.login_wrap .login_group .login_form form .others_wrap ol.notes li {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray-5);
  list-style: decimal;
}
.login_wrap .login_group .login_form form .login_dialog {
  margin: 0;
  padding: 0 24px;
}
.login_wrap .login_group .login_movieIntro {
  width: 579px;
  display: none;
}
@media screen and (min-width: 1200px) {
  .login_wrap .login_group .login_movieIntro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    margin-bottom: 46px;
  }
}
.login_wrap .login_group .login_movieIntro .login_movieIntro_title {
  font-size: 34px;
  line-height: 49px;
  color: var(--color-white);
  font-weight: bold;
}
.login_wrap .login_group .login_movieIntro .login_movieIntro_list {
  color: var(--color-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  margin: 12px 0;
  font-size: 15px;
  line-height: 22px;
}
.login_wrap .login_group .login_movieIntro .login_movieIntro_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap .login_group .login_movieIntro .login_movieIntro_list li::after {
  content: "・";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap .login_group .login_movieIntro .login_movieIntro_list li:last-child::after {
  content: "";
  display: none;
}
.login_wrap .login_group .login_movieIntro .login_movieIntro_description {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap .login_group .login_movieIntro .login_movieIntro_description p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-white);
  text-align: justify;
}
.login_wrap.signup_wrap .login_group .login_form form .option_wrap {
  border-bottom: none;
  padding-bottom: 0;
}
.login_wrap.signup_wrap .login_group .login_form form .option_wrap .option_group {
  margin-top: 24px;
}
.login_wrap.signup_wrap .login_group .login_movieIntro {
  width: 579px;
  display: none;
}
@media screen and (min-width: 1200px) {
  .login_wrap.signup_wrap .login_group .login_movieIntro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    margin-bottom: 46px;
  }
}
.login_wrap.signup_wrap .login_group .login_movieIntro .login_movieIntro_title {
  font-size: 34px;
  line-height: 49px;
  color: var(--color-white);
  font-weight: bold;
}
.login_wrap.signup_wrap .login_group .login_movieIntro .login_movieIntro_list {
  color: var(--color-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  margin: 12px 0;
  font-size: 15px;
  line-height: 22px;
}
.login_wrap.signup_wrap .login_group .login_movieIntro .login_movieIntro_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap.signup_wrap .login_group .login_movieIntro .login_movieIntro_list li::after {
  content: "・";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap.signup_wrap .login_group .login_movieIntro .login_movieIntro_list li:last-child::after {
  content: "";
  display: none;
}
.login_wrap.signup_wrap .login_group .login_movieIntro .login_movieIntro_description {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login_wrap.signup_wrap .login_group .login_movieIntro .login_movieIntro_description p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-white);
  text-align: justify;
}

.login_footer {
  display: none;
  margin: 32px auto 26px;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0;
  background-color: transparent;
}
@media screen and (min-width: 1200px) {
  .login_footer {
    display: block;
  }
}
.login_footer p {
  font-size: 13px;
  line-height: 19px;
  color: var(--color-gray-5);
}

.login_popUp {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1030;
  display: none;
}
.login_popUp .login_backdrop {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(var(--color-rgb-black), 0.7);
  opacity: 1;
  z-index: 2001;
}
.login_popUp .popUp_box {
  width: 100%;
  position: relative;
  z-index: 2002;
}
@media screen and (min-width: 768px) {
  .login_popUp .popUp_box {
    max-width: 460px;
    margin: auto;
    background-color: transparent;
    top: 50%;
    left: 50%;
    position: fixed;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
.login_popUp .popUp_box .close_btn {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 22px;
  right: 22px;
  cursor: pointer;
  z-index: 2002;
}
.login_popUp .popUp_box .close_btn img {
  width: 100%;
}
.login_popUp .popUp_box .login_wrap {
  border-radius: 12px 12px 0 0;
  background-color: var(--color-gray-15);
}
@media screen and (min-width: 768px) {
  .login_popUp .popUp_box .login_wrap {
    border-radius: 12px;
  }
  .login_popUp .popUp_box .login_wrap::-webkit-scrollbar {
    width: 4px;
  }
  .login_popUp .popUp_box .login_wrap::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-4);
    border-radius: 4px;
  }
  .login_popUp .popUp_box .login_wrap::-webkit-scrollbar-track {
    background: transparent;
  }
}
@media screen and (min-width: 1200px) {
  .login_popUp .popUp_box .login_wrap .login_group {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 460px;
  }
}
.login_popUp .popUp_box .login_wrap .login_group .login_form {
  margin-top: 56px;
  margin-bottom: 46px;
  padding: 0 24px;
}
@media screen and (min-width: 768px) {
  .login_popUp .popUp_box .login_wrap .login_group .login_form {
    background-color: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-radius: 12px;
    padding: 0 46px;
    margin-top: 46px;
    margin-bottom: 46px;
  }
}
.login_popUp .popUp_box .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_login {
  height: 36px;
  cursor: default;
}
.login_popUp .popUp_box .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_login:hover {
  color: var(--color-gray-7);
}
.login_popUp .popUp_box .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_login:hover svg path {
  stroke: var(--color-gray-7);
}
.login_popUp .popUp_box .login_wrap .login_group .login_form form .direct_login_wrap .direct_login_group .direct_openid_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
          transform: translateX(0px);
}

.popUp.base .popUpBox {
  width: calc(100% - 64px);
}
@media screen and (min-width: 768px) {
  .popUp.base .popUpBox {
    max-width: 614px;
  }
}
@media screen and (min-width: 1200px) {
  .popUp.base .popUpBox {
    max-width: 760px;
  }
}

.popUp .popUpBox .popUpBoxContent {
  margin-bottom: 24px;
}

.popUp .popUpBox .btn {
  height: 40px;
  line-height: 40px;
}
@media screen and (min-width: 768px) {
  .popUp .popUpBox .btn {
    height: 45px;
    line-height: 45px;
  }
}
@media screen and (min-width: 1200px) {
  .popUp .popUpBox .btn {
    height: 50px;
    line-height: 50px;
  }
}