@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
body{
    
}
.login {
    position: absolute !important; top: 0 !important; right: 50px !important; bottom: 0 !important; align-content: center; display: block; height: 100%; font-family: "Pretendard Variable", Pretendard, sans-serif;
    & *,
    & *:before,
    & *:after{font-family: "Pretendard Variable", Pretendard, sans-serif;}

    @media (width <= 1280px){
        right: auto !important; left: 50%; transform: translateX(-50%); padding: 0  ;
    }
    @media (width <= 640px){
        padding: 0;
    }
}
.contentwrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: initial;
    gap: 0 !important;
    width: 440px !important;
    height: 90dvh;
    max-height: 830px;
    padding: clamp(40px,14vh,130px) 65px !important;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #fff 100%) !important;
    opacity: 1 !important;
    margin: 0 auto;
      

    & .logo{flex: 0 0 auto; display: block; margin: 0 auto; width: 126px; height: auto !important; aspect-ratio: 126 / 19; background: url("/tcclibs/css/login/images/logo_hs.svg") no-repeat center !important; background-size: 100% auto !important;}

    & .loginwrap {
        display: none;

        & .title {}
    }

    & .formwrap {
        flex: 1; min-height: 0; display: flex; flex-direction: column; gap: initial; margin: auto 0 0;

        & .inputwrap {
            height: auto; border: none; border-radius: 0; padding: 0; line-height: inherit; flex: 0 0 auto;

            & select {
                -webkit-appearance: none; -moz-appearance: none; appearance: none;
                height: 40px; border-radius: 5px; font-size: 15px; font-weight: 500; letter-spacing: -0.05em; color: #222; cursor: pointer; padding: 0 35px 0 13px;
                background: #fff url("/tcclibs/images/v2025/login_ico_selarr.svg") no-repeat; background-position: center right 15px; font-family: inherit;

                & option{
                    width: initial; border: none; font-size: inherit; line-height: inherit; font-weight: inherit;
                }
            }

            & select[name="sel_lang"] {
                padding: 0 35px 0 35px;
                background-color: #fff;
                background-image: url("/tcclibs/images/v2025/login_ico_lang.svg"), url("/tcclibs/images/v2025/login_ico_selarr.svg");
                background-position: center left 13px, center right 15px;
                background-repeat: no-repeat, no-repeat;
                background-size: auto, auto;
            }

            & input {
                -webkit-appearance: none; -moz-appearance: none; appearance: none;
                display: block; width: 100%; height: 40px; border-radius: 5px; font-size: 15px; font-weight: 500; letter-spacing: -0.05em; color: #222; padding: 0 13px; font-family: inherit;
                background-color: #fff; 

                &:-webkit-autofill{-webkit-box-shadow: 0 0 0 500px #fff inset !important;}
            }
            & input::placeholder{
                color: #a3a3a3;
            }
            & input[name="Username"] {
                padding-left: 35px;
                /* background: #fff url("/tcclibs/images/v2025/login_ico_id.svg") no-repeat; background-position: center left 13px; */
                background: #fff;
            }
            & input[name="Password"] {
                padding-left: 35px;
                /* background: #fff url("/tcclibs/images/v2025/login_ico_pw.svg") no-repeat; background-position: center left 13px; */
                background: #fff;
            }

            & .dwp-checkbox {

                & label {

                    & input {}

                    & span {
                        &:before {}
                        &:after {}

                    }
                }

                & label:has([data-xlang-code="comm.title.ltitle5"]) {
                    font-size: 15px; font-weight: 500; letter-spacing: -0.04em; color: #222;

                    & input {position: absolute; left: -9999px;}
                    & input + span {
                        display: inline-block; font-size: inherit; height: auto; padding: 0 0 0 42px; border-radius: 0;
                        &:before {content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 22px; border-radius: 36px; background: #484848; transition: 0.2s; border: none;}
                        &:after {content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; background: #fff; transition: 0.2s;}
                    }
                    & input:checked + span{
                        &:before {background: #d6081d;}
                        &:after {left: 16px;}
                    }
                }
            }

            & .reset_pwd_wrap{
                display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; font-weight: 500; letter-spacing: -0.04em; color: #222;

                & .reset_pwd_ico{
                    position: relative; width: 22px; height: auto; aspect-ratio: 1 / 1; border-radius: 5px; background: #fff url("/tcclibs/images/v2025/login_ico_pwreset.svg") no-repeat center; cursor: pointer;

                    & img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
                }
                & .reset_pwd{
                    cursor: pointer;
                }
            }
        }

        & .inputwrap:has([name="Username"]){
            position: relative;
            &:before{content: ""; position: absolute; top: 11px; left: 13px; width: 17px; height: auto; aspect-ratio: 17 / 18; background: url("/tcclibs/images/v2025/login_ico_id.svg") no-repeat center; background-size: 100% auto;}
        }

        & .inputwrap:has([name="Password"]){
            position: relative;
            &:before{content: ""; position: absolute; top: 11px; left: 13px; width: 17px; height: auto; aspect-ratio: 17 / 18; background: url("/tcclibs/images/v2025/login_ico_pw.svg") no-repeat center; background-size: 100% auto;}
        }

        & .inputwrap:has([data-xlang-code="comm.title.ltitle5"]){
            display: flex; flex-wrap: wrap; justify-content: space-between; margin: 46px 0 12px;
        }

        & .inputwrap.submit{
            display: block; width: 100%; height: 46px; text-align: center; align-content: center; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: #fff; border-radius: 5px;
            background: #d6081d;

            & div{}
        }

        & .inputwrap:has(.install){
            display: block; align-content: center; text-align: center; border-radius: 5px; background: #223055; margin: 15px 0 0;

            & .install{
                display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; color: #fff;
                &:before{content: ""; display: block; width: 25px; height: auto; aspect-ratio: 25 / 24; background: url("/tcclibs/images/v2025/login_ico_program.svg") no-repeat center;}
            }
        }

        & .inputwrap:has([data-xlang-code="comm.title.loginmsg"]){
            /* margin: 170px 0 0; */ margin: auto 0 0;

            & > div{
                font-size: 14px; font-weight: 500; color: #222; letter-spacing: -0.04em; text-align: center;
            }
        }

        & .inputwrap:nth-child(1){margin-top: 22px;}
        & .inputwrap:nth-child(2){margin-top: 8px;}
        & .inputwrap:nth-child(3){margin-top: 8px;}
    }

    @media (width <= 1280px){
        width: 400px !important; max-height: 640px; padding: 60px 50px !important;
    }
    @media (width <= 640px){
        width: 360px !important; padding: 50px 30px !important; max-width: 100%;
    }
}

.login-ci{
    position: absolute; left: 50px; bottom: 30px;

    @media (width <= 1280px){
        left: 50%; transform: translateX(-50%); display: none;
    }
    @media (width <= 640px){
        display: none;
    }
}

.login-slogan{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    & .login-slogan-tit{
        font-family: Poppins; font-size: clamp(60px,4.7vw,90px) ; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1;

        & strong{display: block; color: #d6081d;}
    }

    @media (width <= 1760px){
        left: calc((100vw - 490px) / 2);
    }
    @media (width <= 1280px){
        display: none;
    }
}




/* 모바일 가로모드 대응 (스마트폰이면서 가로모드인 경우만 적용 O, 태블릿 사이즈는 적용 X) */
@media (orientation: landscape) and (max-width: 940px) and (min-aspect-ratio: 16/9){
    html{height: 800px !important; overflow: initial !important;}
    body{height: 100% !important; overflow: initial !important;}

    .contentwrap{
        min-height: 560px; margin-top: 30px;
    }
}