body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #1b2431;
    overflow: hidden;
}


.cbox{
    background-color: #00000033;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
}

.frame{
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 7;
    justify-content: center;
    align-items: center;
    position: absolute;
}

h1{
    z-index: 2;
    position: absolute;
    color: white;
    margin-top: -238px;
    font-size: 17px;
    font-weight: 500;
}

.backframe{
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 6;
    justify-content: center;
    align-items: center;
    position: absolute;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
}

.loginbtn{
    display: flex;
    z-index: 56;
    position: absolute;
    height: 130px;
    margin-top: -5px;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.logo{
    position: absolute;
    margin-top: -473px;
}

.faqbtn{
    z-index: 1;
    position: absolute;
    margin-top: 225px;
    margin-left: 74px;
}




/*백그라운드 라이팅*/

html{
    height: 100%;
    width: 100%;
}



.container{
    width: 20vw;
    /* background-color: #1b2431; */
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2rem;
    color: white;
    font-family: roboto;
    font-weight: bold;
    position: relative;
    position: absolute
}

.container::before, .container::after{
    position: absolute;
    content : "";
    top: -5%;
    left: -5%;
    height:110%;
    width:110%;
    border-radius:50%;
    opacity:0.5;
    filter: blur(60px);
}


.container::after
{
  background-color:#3ca7ffcd;
 z-index: -1;
animation : backglow2 15s ease infinite;
}

.container::before
{
  background-color:#ff0073af;
 z-index: -2;
animation : backglow1 15s ease infinite;
}




@keyframes backglow1{
    0%
    {
    transform: translate(10%, 10%) scale(1);
    opacity:0.5;
    }

    25%{
    transform: translate(-10%, 10%) scale(0.8);
    opacity:0.5;
    }

    50%{
    transform: translate(-10%, -10%) scale(1.2);
    opacity:0.8;
    }

    75%{
    transform: translate(10%, -10%) scale(1.1);
    opacity:0.2;
    }

    100%{
    transform: translate(10%, 10%) scale(1);
    opacity:0.5;
    }
}



@keyframes backglow2{
    0%
    {
    transform: translate(-10%, -10%) scale(1);
    opacity:0.5;
    }

    25%
    {
    transform: translate(10%, -10%) scale(0.8);
    opacity:0.5;
    }

    50%
    {
    transform: translate(10%, 10%) scale(1.2);
    opacity:0.8;
    }

    75%
    {
    transform: translate(-10%, 10%) scale(1.1);
    opacity:0.2;
    }

    100%
    {
    transform: translate(-10%, -10%) scale(1);
    opacity:0.5;
    }
}




a{
    position: relative;
    display: inline-block;
}
a:hover{
    position: relative;
    box-shadow: 
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
                border-radius: 27px;
    z-index: 7;
}

a.faqbtn2{
    box-shadow: none;
}

a span{
    position: absolute;
    display: block;
}

@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}