@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,.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: .5em;
    opacity: .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 .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:-.166667em;margin-inline-end:1em;border: .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: .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 .3s,box-shadow .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(../../image/tigo-login.webp);
    background-size: calc(var(--tigoo-w) * 4) auto;
    background-repeat: no-repeat
}

#login_form_wrp::before {
    height: calc(var(--tigoo-w) * var(--h,.65));
    background-position: calc(var(--tigoo-w) * var(--offsetX,1) * -1) top;
    transition: height .3s
}

#login_form_wrp::after {
    height: calc(var(--tigoo-w) * .2);
    margin-block-end:calc(var(--tigoo-w) * -.1);background-position: 0 bottom;
    opacity: var(--op,1)
}

#login_form_wrp.focus_username {
    --h: .75;
    --offsetX: 2
}

#login_form_wrp.focus_password {
    --h: .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(.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 .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 .3s
}

#login_form .input>label#login_psw {
    padding-inline-end:.5em}

#login_form .input>label>span {
    display: block;
    width: 2em;
    height: 2em;
    overflow: hidden;
    transition: color .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 .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: .5
}

#login_form_sns .sns_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

#login_form_sns .sns_list a {
    box-shadow: unset
}

#login_form_sns .sns_list a:not(:hover,:focus) {
    background: 0 0;
    color: inherit
}

#login_form_sns .sns_list .more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5em;
    cursor: pointer;
    color: var(--body-text-color-a50,rgba(0 0 0/50%))
}

#login_form_sns .sns_list .more::before {
    content: attr(icon);
    display: block;
    font-size: 2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden
}

#login_form_sns .sns_list:not(.expand) a:nth-of-type(5)~a {
    display: none
}

#login_form_sns .sns_list.expand .more {
    display: none
}

#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 h3 {
    font-size: 1.5em;
    font-weight: 800;
    text-transform: uppercase
}

#login_reg_wrp p {
    font-size: 1.166667em;
    margin: 0;
    opacity: .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 h3 {
        font-size: 1.166667em
    }

    #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}
}