@charset "UTF-8";

/* common */
.txt_hide {
    text-indent: -9999px;
    overflow: hidden;
    height: 0;
    width: 0;
    font-size: 0;
    display: block;    
    line-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body form{
    height: 100%;
}
#container{
    width: 100%;
    height: 100%;
}

.login_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    height: 100%;
    align-items: stretch;
}

/* lgn_left */
.login_wrap .left{
    width: 40%;
    box-sizing: border-box;
    background: #303843;
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
}
.login_wrap .left .left_inner{
    background: #F4F5F5;
    border-top-left-radius: 2.34375vw;
    border-bottom-left-radius: 2.34375vw;
    border: 0.3125vw solid #fff;
    border-right: none;
    box-sizing: border-box;
    width: 71.5%;
    height: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_wrap .left .left_inner .left_ct{
    height: 100%;
    display: flex;
    justify-content: space-between;
    gap: 5%;
    flex-wrap: wrap;
    width: 75%;
    height: 80%;
}
.login_wrap .left .left_inner .left_ct .logo{
    width: 34%;
    height: 5.5%; 
}
.login_wrap .left .left_inner .left_ct .logo a{
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img_2024/logo_header.png) no-repeat 0 0;
    background-size: contain;
}
.login_wrap .left .left_inner .left_ct .bottom{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: calc(100% - 5.5%);
}
.login_wrap .left .left_inner .left_ct .bottom .txt{
    display: flex;
    flex-direction: column;
    gap: 1.0416666666666665vw;
}
.login_wrap .left .left_inner .left_ct .bottom .txt p{
    font-size: 1.5625vw;
    font-weight: 400;
    color: #333;
    line-height: 1.7em;
    width: 65%;
}
.login_wrap .left .left_inner .left_ct .bottom .txt p > span{    
    font-weight: 800;
    color: #111;    
}
.login_wrap .left .left_inner .left_ct .bottom .txt > span{
    display: block;
    color: #798897;
    font-size: 1.09375vw;
    font-weight: 300;
    line-height: 1.6em;
    width: 85%;
    letter-spacing: 0;
}
.login_wrap .left .left_inner .left_ct .bottom .img{
    position: relative;
    /* width: 155px;
    height: 188px; */
    width: 8.072916666666668vw; 
    height: 9.791666666666666vw;
    margin-bottom: 1.0416666666666665vw;
    animation: opacity 3s linear 0s;
}
    
.login_wrap .left .left_inner .left_ct .bottom .img > div.wing01{
    /* width: 48px;
    height: 25px; */
    width: 2.5vw;
    height: 1.3020833333333335vw;
    background: url(../img_2024/img_mobee_wing_01.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    /* left: 106px;
    top: 103px;   */
    left: 5.520833333333333vw;
    top: 5.364583333333333vw;  
    animation: wing01 1s linear 0s infinite alternate;
}
.login_wrap .left .left_inner .left_ct .bottom .img > div.wing02{
    /* width: 41px;
    height: 26px; */
    width: 2.1354166666666665vw;
    height: 1.3541666666666667vw;
    background: url(../img_2024/img_mobee_wing_02.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    /* left: 106px;
    top: 126px;  */
    left: 5.520833333333333vw;
    top: 6.5625vw; 
    animation: wing02 1s linear 0s infinite alternate; 
}
.login_wrap .left .left_inner .left_ct .bottom .img > div.arm_left{
    /* width: 28px;
    height: 24px; */
    width: 1.4583333333333333vw;
    height: 1.25vw;
    background: url(../img_2024/img_mobee_arm_01.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    /* left: 25px;
    top: 137px;   */
    left: 1.3020833333333335vw;
    top: 7.135416666666666vw; 
    animation: arm01 1s linear 0s infinite alternate;
}
.login_wrap .left .left_inner .left_ct .bottom .img > div.arm_right{
    /* width: 36px;
    height: 34px; */
    width: 1.875vw;
    height: 1.7708333333333333vw;  
    background: url(../img_2024/img_mobee_arm_02.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    /* left: 101px;
    top: 126px;  */
    left: 5.260416666666667vw;
    top: 6.5625vw; 
    animation: arm02 1s linear 0s infinite alternate; 
}


.login_wrap .left .left_inner .left_ct .bottom .img > div.eye_left{
    /* width: 10px;
    height: 10px; */
    width: 0.5208333333333333vw;
    height: 0.5208333333333333vw;  
    background: #27201E;
    border-radius: 50%;
    position: absolute;
    /* left: 18px;
    top: 67px;  */
    left: 0.9375vw;
    top: 3.4895833333333335vw; 
    animation: eyeRight 1s linear 0s infinite alternate; 
}
.login_wrap .left .left_inner .left_ct .bottom .img > div.eye_right{
    /* width: 10px;
    height: 10px; */
    width: 0.5208333333333333vw;
    height: 0.5208333333333333vw;  
    background: #27201E;
    border-radius: 50%;
    position: absolute;
    /* left: 62px;
    top: 67px;  */
    left: 3.229166666666667vw;
    top: 3.4895833333333335vw;
    animation: eyeRight 1s linear 0s infinite alternate;
}


.login_wrap .left .left_inner .left_ct .bottom .img > div.blusher01{
    /* width: 19px;
    height: 11px; */
    width: 0.9895833333333333vw;
    height: 0.5729166666666666vw;
    background: url(../img_2024/img_mobee_blusher01.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    /* left: 12px;
    top: 82px;  */
    left: 0.625vw;
    top: 4.270833333333333vw;
    animation: blusher01 1s linear 0s infinite alternate;
}

.login_wrap .left .left_inner .left_ct .bottom .img > div.blusher02{
    /* width: 25px;
    height: 12px; */
    width: 1.3020833333333335vw;
    height: 0.625vw;
    background: url(../img_2024/img_mobee_blusher02.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    /* left: 60px;
    top: 81px;  */
    left: 3.125vw;
    top: 4.21875vw; 
    animation: blusher02 1s linear 0s infinite alternate;
}


.login_wrap .left .left_inner .left_ct .bottom .img > div.mobee{
    /* width: 155px;
    height: 198px; */
    width: 8.072916666666668vw; 
    height: 10.3125vw;
    background: url(../img_2024/img_mobee.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
    animation: mobee 1s linear 0s infinite alternate; 
}
.login_wrap .left .left_inner .left_ct .bottom .img > div.mobee_shadow{
    /* width: 58px;
    height: 6px; */
    width: 3.0208333333333335vw;
    height: 0.3125vw;
    background: url(../img_2024/img_mobee_shadow.png) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    /* left: 52px;
    top: 105%; */
    left: 2.7083333333333335vw;
    top: 105%;
    animation: mobee_shadow 1s linear 0s infinite alternate; 
}
/* .login_wrap .left .left_inner .left_ct .bottom .img > div.mouth{
    width: 22px;
    height: 23px;
    background: url(../img_2024/img_mobee_mouth.png) no-repeat 0 0;
    background-size: contain;
    border-radius: 50%;
    position: absolute;
    left: 34px;
    top: 83px; 
    animation: mobee 1s linear 0s infinite alternate;
} */

@keyframes opacity{
    0% {
        opacity: 0;
    }  
    50% {
        opacity: 1;
    }
}
@keyframes wing01{
    0% {
        margin-top: 0;
    }  
    100% {
        margin-top: 0.5208333333333333vw;
        transform: rotate(-30deg);
    }
}
@keyframes wing02{
    0% {
        margin-top: 0;
    }  
    100% {
        margin-top: 0.5208333333333333vw;
        transform: rotate(30deg);
    }
}
@keyframes arm01{
    0% {
        margin-top: 0;
    }  
    100% {
        margin-top: 0.5208333333333333vw;
        transform: rotate(40deg);
    }
    
}
@keyframes arm02{
    0% {
        margin-top: 0;
    }  
    100% {
        margin-top: 0.5208333333333333vw;
        transform: rotate(-50deg);
    }    
}

@keyframes eyeLeft{
    0% {
        margin-top: 0;
    }      
    100%{
        margin-top: 0.5208333333333333vw;
    }
}
@keyframes eyeRight{
    0% {
        margin-top: 0;
    }  
    50%{
        transform:scale(1, 0.1);
    }
    100%{
        margin-top: 0.5208333333333333vw;
        transform:scale(1, 0.1);
    }
} 


@keyframes blusher01{
    0% {
        margin-top: 0;
    }  
    100%{
        margin-top: 0.5208333333333333vw;
        transform:scale(1.2);
    }
} 
@keyframes blusher02{
    0% {
        margin-top: 0;
    }  
    100%{
        margin-top: 0.5208333333333333vw;
        transform:scale(1.2);
    }
} 


@keyframes mobee {
    0% {
        margin-top: 0;
    }  
    100% {
        margin-top: 0.5208333333333333vw;
    }
}
@keyframes mobee_shadow {
    0% {
        margin-top: 0;
    }  
    100% {
        margin-top: 0.5208333333333333vw;
        transform:scale(1, 0.1);
    }
}


@keyframes mouth{
    0% {
        margin-top: 0;
    }  
    25%, 50%{height:0.3125vw;}
    100% {
        margin-top: 0.5208333333333333vw;
    }
}

/* lgn_right */
.login_wrap .right{
    width: 60%;
    box-sizing: border-box; 
    background: rgba(48, 56, 67, .05);
    display: flex;
    align-items: center;
    justify-content: start;
    height: 100%;
}
.login_wrap .right .right_inner{
    background: #fff;
    border-top-right-radius: 2.34375vw;
    border-bottom-right-radius: 2.34375vw;
    border: 0.3125vw solid #fff;
    border-left: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2.083333333333333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0.20833333333333334vw 0.20833333333333334vw 1.0416666666666665vw 0 rgba(0, 0, 0, .05);
    padding: 2.7083333333333335vw 4.010416666666667vw;
    width: 80.9%;
    height: 78%;
}
.login_wrap .right .right_inner .right_ct{
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2.083333333333333vw;
    width: 16.041666666666668vw;
    min-width: 16vw;
    justify-content: space-between;
}
.login_wrap .right .right_inner .right_ct .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login_wrap .right .right_inner .right_ct .top h2{
    color: #000;
    font-size: 1.3020833333333335vw;
    font-weight: 800;
}
.login_wrap .right .right_inner .right_ct .bottom{
    
}


.login_wrap .right .right_inner .right_ct .bottom .login{

}
.login_wrap .right .right_inner .right_ct .bottom .login .input_wrap{
    display: flex;
    flex-direction: column;    
    justify-content: space-between;
    gap: 0.78125vw;
}
.login_wrap .right .right_inner .right_ct .bottom .login .input_wrap input{
    display: block;
    height: 2.7083333333333335vw;
    width: 100%;
    padding: 0.9375vw;
    box-sizing: border-box;
    background: #F5F5F5;
    border-radius: 0.20833333333333334vw;
}
.login_wrap .right .right_inner .right_ct .bottom .login .input_wrap input::placeholder{
    font-size: 0.8333333333333334vw;
    font-weight: 400;
    color: #666;
}


.login_wrap .right .right_inner .right_ct .bottom .login .check_box{
    margin-top: 1.7708333333333333vw;
}

/* 라디오박스 */
.radio_box {
   display: flex;
   align-items: center;
   gap: 0.5208333333333333vw;
}
.radio_box input[type=radio]{
    display: none;
}
.radio_box input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    height: 1.5625vw;
    width: 3.6979166666666665vw; 
    line-height: 1.5625vw;
    border: 0.052083333333333336vw solid #111;
    border-radius: 2.604166666666667vw;
    text-align: center;
    font-weight: 400;
    font-size: 0.7291666666666666vw;
}
.radio_box input[type=radio]+label{
    background: #fff;
    color: #111;
    transition: all ease-in-out 0.3s;
}
.radio_box input[type=radio]:checked+label{
    background: #111;
    color: #fff;
}
.radio_box input[type=radio]+label:hover{
    background: #111;
    color: #fff;
}


/* 체크박스 */
.check_box{
    display: flex;
    align-items: center;
    gap: 1.0416666666666665vw;
    font-size: 0.8333333333333334vw;
    cursor: pointer;
}
.check_box label {
    display: flex;
    align-items: center;
    gap: 0.4166666666666667vw;
    font-size: 0.8333333333333334vw;
    cursor: pointer;
    flex-wrap: wrap;
}
.check_box input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    border: 0.10416666666666667vw solid #111;
    background-color: #fff;
    border-radius: 0.15625vw;
    width: 1.0416666666666665vw;
    height: 1.0416666666666665vw;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
}

.check_box input[type="checkbox"]::before {
    content: "";
    width: 0.5208333333333333vw;
    height: 0.26041666666666663vw;
    border: 0.10416666666666667vw solid #fff;
    border-top: none;
    border-right: none;
    position: absolute;
    top: 0.15625vw;
    left: 0.10416666666666667vw;
    transform: rotate(-45deg);
    opacity: 0;
    transition: .2s;
}

.check_box input[type="checkbox"]:checked {
    background-color: #000 !important;
    border-color: #000;
}

.check_box input[type="checkbox"]:checked::before {
    opacity: 1;
}

.check_box label span{
    font-size: 0.78125vw;
    font-weight: 500;
}

.login_wrap .right .right_inner .right_ct .bottom .btn{
    width: 100%;
    text-align: center;
    height: 2.96875vw;
    line-height: 2.96875vw;   
    margin-top: 1.7708333333333333vw;
}
.login_wrap .right .right_inner .right_ct .bottom .btn a{
    display: block;
    width: 100%;
    background: #000;
    border: 0.10416666666666667vw solid #000;
    color: #fff;
    font-size: 0.8854166666666666vw;
    font-weight: 400;
    padding: 0 1.0416666666666665vw;
    box-sizing: border-box;
    border-radius: 0.20833333333333334vw;
    transition: all ease-in-out 0.3s;
    
}
.login_wrap .right .right_inner .right_ct .bottom .btn a:hover{
    background: #fff;
    color: #111;
    border: 0.10416666666666667vw solid #111;
}

/* 카피라이트 */
.copyright{
    text-align: center;
}
.copyright p{
    font-size: 0.6770833333333334vw;
    font-weight: 300;
    color: #aaa;
    letter-spacing: 0;
}