@charset "utf-8"; 

    #login .contents{    width:43rem;max-width:100%;margin:0 auto}
    #login .login__sns p{    font-size:2rem;font-weight:var(--txt-medium);color:var(--color-gray-900)}
    #login .login__sns .sns__btns{    padding:3rem;gap:1rem}
    #login .login__sns .sns__btns button{    width:6rem;height:6rem;border-radius:50em;font-size:3rem}
    #login .login__sns .sns__btns button.naver_btn{    color:#fff;background-color:#23c411}
    #login .login__sns .sns__btns button.kakao_btn{    color:#2a2323;background-color:#ffeb00}
    #login .login__sns .sns__btns button i{    position:relative;top:2px}
    #login .login__sep{    position:relative;font-size:1.8rem;color:var(--color-gray-500);z-index:1}
    #login .login__sep::before{    content:"";position:absolute;top:50%;left:0;right:0;display:block;width:100%;height:1px;background-color:var(--color-gray-300);z-index:-1}
    #login .login__sep span{    position:static;display:block;width:3em;margin:0 auto;background:#fff;z-index:2}
    
    #login .login__form{    padding:3em 1.5em ;      border-style: solid;
        margin-bottom: 20px;
        margin-top: 20px; border-radius:5px;
        border-color: var(--color-gray-500);
        border-width: 1px;
    }
    
    #login .login__form .form__input{    margin-bottom:1rem}
    #login .login__form .form__input{    position:relative}
    
    #login .login__form .form__input .input_cst::placeholder{ font-size: 1em;}
    #login .login__form .form__input label{    position:absolute;left:3em;top:40%;margin-top:-.6em;color:var(--color-main);font-size:1em}
    #login .login__form .form__input .input_cst{  font-size: 1em;;  padding:1em 1em 1em 8em;background:var(--color-gray-100)}
    #login .login__form .form__input .input_phone{    padding:1em 1em 1em 3em;background:var(--color-gray-100)}
    #login .login__form .form__input .input_half{    padding:1em 1em 1em 3em;background:var(--color-gray-100)}
    .g-recaptcha div{    margin:0 auto}


    .desc { font-family: 'Noto Sans KR'; font-size: 0.9em;   width: 90%;     text-align: ledt; font-weight: normal;  margin-left: 5em; margin-bottom: 5em;}



    #login .login__tail{    margin-top:1.5em}
    #login .login__tail a{    font-size:1.5em;font-weight:var(--txt-medium);color:var(--color-gray-900)}
    .text-danger-custom,.field-validation-error{    font-size:1.5em;color:red;top:5px;position:relative}
    #login .login__tail a.color_main{    color:var(--color-main)}
    #login .login__tail a:hover{ color:var(--hana_color)}


    #register ::placeholder{font-size: 0.9em;}

 

    #register .contents{    width:80%;max-width:100%;margin:0 auto}
    #register article{    padding-bottom:3em;margin-bottom:3em;border-bottom:1px solid var(--color-gray-300)}
    #register article:last-of-type{    margin-bottom:0;border-bottom:none}

    #register .regist__step02 input {  text-align: center;        vertical-align: middle;}
    #register .regist__step02 dl { height: 4em;        text-align: left;        vertical-align: middle;}

    #register .regist__step02 .step__input dt {width: 40%;}
    #register .regist__step02 .step__input dt label {font-size:  1em;} 
    #register .regist__step02 .step__input dd .input_cst::placeholder {font-size:  0.9em;} 

    #register .regist__step02 .step__input dt .check_cst input[type=checkbox]:checked+label{    color:var(--color-point);border:1px solid var(--color-point)}
    #register .regist__step02 .step__input dt .check_cst input[type=checkbox].on+label{    color:var(--color-point);border:1px solid var(--color-point)}



    #register  dd{    height:90%;margin-top:.5em;padding:0 1em;overflow-y:overlay; width: 90%;}
    #register  dd::-webkit-scrollbar{    width:5px;background-color:transparent}
    #register  dd::-webkit-scrollbar-thumb{    width:3px;border-radius:5em;background-color:#dbe0e9}
    #register  dd::-webkit-scrollbar-track{    width:3px;background-color:transparent}

   #register .regist__step02 .input_half {    width: 50%; height: 90%; border-radius: 5px; border-style: solid; border-width: 1px;}
   #register .regist__step02 .input_email {    width: 65%; height: 90%; border-radius: 5px; border-style: solid; border-width: 1px; border-color: var(--color-gray-900); padding: 0;}
   #register .regist__step02 .input_cst {    width: 100%; height: 90%; border-radius: 5px; border-style: solid; border-width: 1px; border-color: var(--color-gray-900); padding: 0;}
   #register .regist__step02 .input_phone {    width: 5em; height: 90%; border-radius: 5px; border-style: solid; border-width: 1px; border-color: var(--color-gray-900); padding: 0;}
   #register .regist__step02 .input_auth {    width: 10em};


    #register  .input_ref{ margin-top:0ex;font-size:0.9em;color:var(--color-gray-900) ; width: 100%; text-align: right;}

        
    #register .regist__step02 button { height: 90%; margin: 0; width: 50%; }

    .div_center {font-size: 1em; height: 5em; margin-bottom: 1em;  line-height: 1em;  text-align: center;font-weight: bold}
    .btn_center {font-size: 1em; height: 50px; margin-bottom: 1em;  line-height: 1em; width:30%; text-align: center;font-weight: bold}

    
    #register .step__chk dl{  margin-bottom:.8em;padding:1em;font-size:1.0em;text-align:left;background:var(--color-gray-100);border-radius:5px; border-style: solid; border-width: 1px;}

    #register .step__chk input{  opacity: 0;}
        
    

    #register .step__chk .check_cst input[type=checkbox]+label{    position:relative;width:100%;padding:1em;border-radius:5px;color:var(--color-gray-500)
        ;font-size:1.25em;background:#fff;border:1px solid transparent;cursor:pointer;  z-index: 1;}

    #register .step__chk dt .check_cst input[type=checkbox]:checked+label{    color:var(--color-point);border:1px solid var(--color-point)}
    #register .step__chk dt .check_cst input[type=checkbox].on+label{    color:var(--color-point);border:1px solid var(--color-point)}

    #register .regist__step01 dd{    height:13em;margin-top:.5em;padding:0 1em;overflow-y:overlay}
    #register .regist__step01 dd::-webkit-scrollbar{    width:5px;background-color:transparent}
    #register .regist__step01 dd::-webkit-scrollbar-thumb{    width:3px;border-radius:5em;background-color:#dbe0e9}
    #register .regist__step01 dd::-webkit-scrollbar-track{    width:3px;background-color:transparent}

    #register .regist__step02 .input_cst,#register .regist__step03 .input_cst{   }

    #register .regist__step02 .input_phone,#register .regist__step03 .input_phone{    }

    #register .regist__step02 .input_half,#register .regist__step03 .input_phone{    background-color:var(--color-gray-100)}
    #register .regist__step03 .whiteBox{    padding:1em 1.5em!important}
    
    #register .regist__step02 dl{ display: flex;overflow-y: unset}
    #register .regist__step02 dt{margin-right: 1em; overflow-y: unset;}
    #register .regist__step02 dd{  overflow-y: unset;  }

    
    

    #register .button { padding: 0;}
    #register .button--aylen::after {
        background: #abb3e1;
    }

    #register .pass_reset { font-size: 1em;}
    #register .pass_reset p { font-size: 0.9em;}
    #register .pass_reset label{ font-size: 1em;}
    #register .pass_reset   dl{ display: flex;overflow-y: auto}
    #register .pass_reset   dt{ width: 50%; height: 3em;  overflow: auto;}
    #register .pass_reset   dd{  overflow-y: auto;  }
    #register .pass_reset   .input_half{ width: 40%; }
    #register .pass_reset   .input_email{ width: 100%; }
    #register .pass_reset   .right_pos{ display: block; position: fixed; right: 0;   width: 40%;  float:left; width:150px; height:200px;
        display:flex;
        justify-content:center;
        align-items:center; }
    #register .pass_reset  input { position:relative;width:100%;padding:1em;border-radius:5px;color:var(--color-gray-500)
        ;font-size:1.0em;background:#fff;border:1px solid var(--color-gray-500) ;cursor:pointer;  z-index: 1;}




    .modal{    
        display:none;position:fixed;top:10%;left:30%;right:30%;width:50%;height:100vh;height:calc(var(--vh,1vh) * 20);margin:0 auto;background:rgb(245 247 249 / 0%););z-index:999999}
    .modal_inner{    position:relative;width:calc(100% - 4rem);margin:0 auto;padding:0;text-align:center;background:#fff;border-radius:1rem;overflow:hidden}
    .modal_inner>.btn_modalClose{    position:absolute;top:1.5rem;right:1.5rem;font-size:2.4rem;color:#fff}
    .modal_hd{    padding:1.5ex;color:#fff;font-size:3rem;background-color:var(--color-main)}
    .modal_hd img{    margin-bottom:1rem}
    .modal_hd h2{    font-size:3rem;font-weight:var(--txt-semibold)}
    .modal_main{    padding:2em 3em;font-size:2rem;    background-color: var(--color-gray-300);}
    .modal_main p{    line-height:1.6;font-size:2rem;font-weight:var(--txt-regular)}
    .main_btns{    gap:1rem}

    #modal__loading{    font-size:2.6rem;color:red}
    #modal__loading .loading_spinner{    margin:0 auto 1ex;padding:1ex;width:14rem;height:14rem;border-radius:50em;border:1rem solid red;-webkit-animation:xi-spin 2s infinite linear;animation:xi-spin 2s infinite linear}
    #modal__loading .loading_spinner span{    display:inline-block;height:5rem;width:1rem;background:var(--color-main);border-radius:50em}
    .modal__msg .modal_inner{    width:50rem;max-width:90vw}
    .modal__msg .modal_inner>.btn_modalClose{    color:var(--color-gray-500)}
    .modal__msg .modal_main i{    width:2em;height:2em;font-size:3rem;color:var(--color-main);background:var(--color-main-light-100);border-radius:50em}
    .modal__msg .modal_main h2{    margin:1em 0 1ex;font-size:1.8rem}
    .modal__msg .modal_main .main_cont{    margin:0 0 1.5em;font-size:2rem;line-height:1.6}
    .modal__msg.warning .modal_main i.xi-error-o{    color:var(--color-red);background:rgba(248,52,70,.1)}
    




    #mypage .contents{    width:87.2rem;max-width:100%;margin:0 auto}
    #mypage .mypage__password .input_cst{    background-color:var(--color-gray-100)}
    #mypage .mypage__password .input_phone{    background-color:var(--color-gray-100)}
    #mypage .mypage__password .input_half{    background-color:var(--color-gray-100)}
    #mypage .mypage__sns button{    width:49%;padding:1em 1.5em;text-align:left;font-size:2rem;background-color:var(--color-gray-100);border:1px solid transparent;border-radius:.5rem}
    #mypage .mypage__sns button:hover{    border-color:var(--color-main);box-shadow:0 0 1em 0 rgba(0,0,0,.2)}
    #mypage .mypage__sns button i{    font-size:2em;vertical-align:middle;transform:translateY(-1px)}
    #mypage .mypage__sns button i.xi-kakaotalk{    color:#fac000}
    #mypage .mypage__sns button i.xi-naver{    color:#23c411}

    @media screen and (max-width:767px){
        #login .login__form{ margin-left: 3em ; margin-right: 3em;}
        #register .regist__step02 button { width: 100%; }
        #register .regist__step02 .input_auth {    padding-left: 42%;
            width: 112%; }
        #register .regist__step02 .input_email { width: 100%;}
        #register .regist__step02 .input_phone { width: 30%; }
        .pad_left { width: 100%;}   


        #register .pass_reset { font-size: 1em;}
        #register .pass_reset p { font-size: 0.9em;}
        #register .pass_reset label{ font-size: 1em;}
        
    }