@charset "UTF-8";
body {
  justify-content: center;
  background: var(--body-background-color, hsl(0 0% 100%));
}
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjUwMCIgeDI9IjUwMCIgeTE9IjUwMCIgeTI9IjEwMDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9ImhzbCgwIDEwMCUgNTAlLzE1JSkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImhzbCgwIDEwMCUgNTAlLzAlKSIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTEwMDAgMTAwMEgwVjUwMGM1MDAtMjUwIDUwMCAyNTAgMTAwMCAwdjUwMHoiLz48L3N2Zz4=);
  background-repeat: repeat-x;
  background-position-y: center;
  background-size: var(--bgw) var(--bgh, 100%);
  --bgw: clamp(80em, var(--VWidth), 1920px);
  animation: hue 30s linear infinite, wave 30s linear infinite;
  opacity: var(--brightness-filter, 0.5);
}
.bg::after,
.bg::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: inherit;
  background-repeat: inherit;
  background-position-y: inherit;
  background-size: var(--bgw) var(--bgh);
  animation: wave var(--dr) var(--dl) linear infinite reverse;
}
.bg::before {
  --bgh: 70%;
  --dl: -5s;
  --dr: 20s;
}
.bg::after {
  --bgh: 50%;
  --dl: -5s;
  --dr: 10s;
}
@keyframes hue {
  0%,
  100%,
  50% {
    filter: hue-rotate(210deg);
  }
  25% {
    filter: hue-rotate(240deg);
  }
  75% {
    filter: hue-rotate(180deg);
  }
}
@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: var(--bgw);
  }
}
#login_header {
  width: 100%;
  max-width: 90em;
  margin-inline: auto;
}
#login_header > .inner {
  height: 6em;
  padding-inline: 2em;
  display: flex;
  align-items: center;
}
#login_header #logo {
  margin-inline: 2em;
}
#login_header #logo h1 {
  font-size: 1em;
  display: block;
  height: 2em;
  aspect-ratio: 183/61;
  background: url(../images/seagm_member_logo_2020_text_black-2ad8c54e98.svg)
    no-repeat center/contain;
  filter: invert(var(--brightness-filter, -1));
  color: transparent;
}
#login_footer {
  width: 100%;
  max-width: 90em;
  margin-inline: auto;
}
#login_footer > .inner {
  padding: 2em;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 2em;
}
#login_footer .copyright {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5em;
  opacity: 0.5;
}
#login_footer .copyright::before {
  content: attr(icon);
  display: block;
  font-size: 1.5em;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}
#login_footer .nav ul {
  display: flex;
  gap: 1em;
}
#login_footer .nav a {
  color: currentColor;
}
#login_footer .language .lang {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
  background: var(--body-text-color-a5, #fff);
  border-radius: 3em;
  height: 3em;
  padding-inline: 1em 0;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
#login_footer .language .lang::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  margin-block-start: -0.166667em;
  margin-inline-end: 1em;
  border: 0.333334em transparent solid;
  border-top-color: var(--body-text-color-a25, rgba(0 0 0/25%));
  pointer-events: none;
}
#login_footer .language .lang > span::before {
  content: attr(icon);
  display: block;
  font-size: 1.5em;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  opacity: 0.5;
}
#login_footer .language .lang > select {
  all: unset;
  height: 3em;
  line-height: 3;
  padding-inline-end: 2.5em;
}
#login_footer .language .lang > select option {
  color: var(--body-text-color);
  background: var(--background-color-L1);
}
#login_content {
  width: 100%;
  max-width: 90em;
  margin-inline: auto;
}
#login_content > .inner {
  padding-inline: 2em;
}
#login_box {
  border-radius: 2em;
  background-color: var(--body-text-color-a5, rgba(255 255 255/25%));
  background-image: linear-gradient(
    to var(--inline-end, right),
    rgba(0 0 0/0%),
    rgba(0 0 0/2%) 50%
  );
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  box-shadow: rgba(0 0 0/5%) 0 1em 4em;
}
#login_box > .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 35em;
}
#login_form_wrp {
  padding: 5em;
  display: flex;
  flex-direction: column;
  border-radius: 2em;
  background-color: var(--background-color-L3, #fff);
  background-image: radial-gradient(
      circle at center top,
      rgba(255 255 255/10%) 0%,
      rgba(255 255 255/0) 100%
    ),
    radial-gradient(
      circle at center bottom,
      rgba(255 255 255/5%) 0%,
      rgba(255 255 255/0) 50%
    );
  box-shadow: rgba(255 255 255/10%) 0 1px 0 0 inset;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  --tigoo-w: 7em;
}
#login_reg_wrp {
  order: -1;
  padding: 5em;
}
#login_form_wrp::after,
#login_form_wrp::before {
  content: "";
  display: block;
  width: var(--tigoo-w);
  position: absolute;
  inset-block-end: 100%;
  inset-inline-end: 2em;
  z-index: 1;
  background-image: url(https://seagm-media.seagmcdn.com/member/v5/art/tigoo.png?x-oss-process=image/resize,w_672);
  background-size: calc(var(--tigoo-w) * 4) auto;
  background-repeat: no-repeat;
}
#login_form_wrp::before {
  height: calc(var(--tigoo-w) * var(--h, 0.65));
  background-position: calc(var(--tigoo-w) * var(--offsetX, 1) * -1) top;
  transition: height 0.3s;
}
#login_form_wrp::after {
  height: calc(var(--tigoo-w) * 0.2);
  margin-block-end: calc(var(--tigoo-w) * -0.1);
  background-position: 0 bottom;
  opacity: var(--op, 1);
}
#login_form_wrp.focus_username {
  --h: 0.75;
  --offsetX: 2;
}
#login_form_wrp.focus_password {
  --h: 0.75;
  --offsetX: 3;
  --op: 0;
}
[lang*="ar"] #login_form_wrp::after,
[lang*="ar"] #login_form_wrp::before {
  transform: scaleX(-1);
}
#login_form_wrp:focus-within {
  transform: scale(1.046511627906977);
  box-shadow: rgb(0 0 0/5%) 0 1em 4em;
}
#login_form_wrp:focus-within > .inner {
  transform: scale(0.955555555555555);
}
#login_form_wrp > .inner {
  width: 100%;
  max-width: 30em;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2em;
  flex: auto;
  justify-content: space-between;
  transition: transform 0.3s;
}
#login_form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
#login_form h2 {
  font-size: 2em;
  font-weight: 800;
  text-transform: uppercase;
}
#login_form .input > label {
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding-inline: 1.5em;
  height: 4em;
  border-radius: 4em;
  background: var(--background-color-L3, rgba(0 0 0/5%));
  transition: box-shadow 0.3s;
}
#login_form .input > label#login_psw {
  padding-inline-end: 0.5em;
}
#login_form .input > label > span {
  display: block;
  width: 2em;
  height: 2em;
  overflow: hidden;
  transition: color 0.3s;
}
#login_form .input > label > span::before {
  content: attr(icon);
  display: block;
  font-size: 2em;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
}
#login_form .input > label > input {
  all: unset;
  flex: auto;
  height: 3em;
  color: currentColor;
  font-weight: 800;
  transition: background-color 999999s;
}
#login_form .input > label > input::-webkit-input-placeholder {
  font-weight: 600;
  color: var(--body-text-color-a50, rgba(0 0 0/50%));
}
#login_form .input > label:focus-within {
  box-shadow: var(--SiteTHM-A75) 0 0 0 0.25em,
    var(--SiteTHM-A10) 0 0 0 99em inset;
}
#login_form .input > label:focus-within > span[icon] {
  color: var(--SiteTHM);
}
#login_form .tips_wrp {
  margin-inline: 1.5em;
}
#login_form .tips_wrp > div {
  display: none;
  margin-block-start: 1em;
}
#login_form .tips_wrp > div.show {
  display: block;
}
#login_form .tips_wrp .success {
  color: var(--text-color-complete);
  font-weight: 800;
}
#login_form .tips_wrp .alert {
  color: var(--text-color-alert);
  font-weight: 800;
}
#login_form .g-recaptcha {
  text-align: center;
  color: var(--body-text-color-a50, rgba(0 0 0/50%));
}
#login_form .pw_reset {
  text-align: center;
}
#login_form_sns {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#login_form_sns h3 {
  font-size: 1em;
  text-align: center;
  opacity: 0.5;
}
#login_form_sns .sns_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#login_form_sns .sns_list a {
  box-shadow: unset;
}
#login_form_sns .sns_list a:not(:hover, :focus) {
  background: 0 0;
  color: currentColor;
}
#login_reg_wrp > .inner {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
#login_reg_wrp h2 {
  font-size: 2em;
  font-weight: 800;
  text-transform: uppercase;
}
#login_reg_wrp p {
  font-size: 1.166667em;
  margin: 0;
  opacity: 0.7;
}
#login_reg_wrp .btw {
  width: fit-content;
  font-size: 1.166667em;
  text-transform: uppercase;
}
@media only screen and (max-width: 1000px) {
  #login_header > .inner {
    max-width: 40em;
    margin-inline: auto;
    box-sizing: border-box;
  }
  #login_header #logo {
    margin-inline: 0;
  }
  #login_footer > .inner {
    max-width: 40em;
    margin-inline: auto;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    row-gap: 1.5em;
    align-items: start;
  }
  #login_footer .copyright {
    width: fit-content;
    margin-inline: auto;
  }
  #login_footer .nav {
    order: -1;
  }
  #login_footer .nav ul {
    justify-content: center;
    flex-wrap: wrap;
  }
  #login_footer .language .lang {
    width: fit-content;
    margin-inline: auto;
    box-shadow: var(--body-text-color-a5, rgba(0 0 0/5%)) 0 0 0 1px inset;
  }
  #login_box {
    max-width: 40em;
    margin-inline: auto;
  }
  #login_box > .inner {
    grid-template-columns: 1fr;
  }
  #login_form_wrp {
    padding: 4em;
    --tigoo-w: 6em;
  }
  #login_form h2 {
    font-size: 1.666667em;
  }
  #login_form_sns {
    padding-block-start: 2em;
    background-image: linear-gradient(
        90deg,
        transparent,
        rgba(0 0 0/5%),
        transparent
      ),
      linear-gradient(90deg, transparent, rgba(255 255 255/5%), transparent);
    background-repeat: no-repeat;
    background-position: center 0, center 1px;
    background-size: 100% 1px;
  }
  #login_reg_wrp {
    padding: 4em;
    order: 9;
  }
  #login_reg_wrp > .inner {
    width: 100%;
    max-width: 30em;
    margin-inline: auto;
    gap: 1em;
  }
  #login_reg_wrp h2 {
    font-size: 1.333334em;
  }
  #login_reg_wrp .btw,
  #login_reg_wrp p {
    font-size: 1em;
  }
}
@media only screen and (max-width: 480px) {
  #login_content > .inner,
  #login_footer > .inner,
  #login_header > .inner {
    padding-inline: 1.5em;
  }
  #login_header #logo h1 {
    height: 1.75em;
  }
  #login_footer > .inner {
    padding-block-start: 2em;
    background: linear-gradient(
        90deg,
        transparent,
        var(--body-text-color-a5, rgba(0 0 0/5%)),
        transparent
      )
      no-repeat center 0/100% 1px;
  }
  #login_box {
    background: unset;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
    box-shadow: unset;
  }
  #login_form_wrp {
    padding: 2em;
    border-radius: 1em;
    box-shadow: rgb(0 0 0/10%) 0 0 4em;
    transform: none !important;
  }
  #login_form_wrp > .inner {
    transform: none !important;
  }
  #login_form h2 {
    font-size: 1.333334em;
  }
  #login_reg_wrp {
    padding: 2em;
  }
  #login_reg_wrp > .inner {
    text-align: center;
  }
  #login_reg_wrp h2 {
    font-size: 1.166667em;
  }
  #login_reg_wrp .btw {
    margin-inline: auto;
  }
}