.s-loading {
    position: fixed;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background-color: white;
    transition: all 0.2s;
    z-index: 999999999999;
}
.r-loading {
    position: fixed;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;

    /* https://lh3.googleusercontent.com/d/1V_arAQCKElaLlFrwYJwyDnP_jGQ_TAD_ */
    /* background-image: url('/images/screen/2.png'); */
    /* background-image: url('/images/screen/Esia_8.webp'); */
    /* background-image: url('https://lh3.googleusercontent.com/d/1V_arAQCKElaLlFrwYJwyDnP_jGQ_TAD_'); */
    background-image: url('https://lh3.googleusercontent.com/d/16sphK6h2S53J8opBJW6Ged55wKngGjaG');
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

}
.ch-bg {
    border-radius: 50%;
    position: relative;
    width: 100px;
    height: 100px;
    /* background-image: url('/images/screen/Esia_8.webp'); */
    /* background-image: url('https://lh3.googleusercontent.com/d/1V_arAQCKElaLlFrwYJwyDnP_jGQ_TAD_'); */
    background-image: url('https://lh3.googleusercontent.com/d/16sphK6h2S53J8opBJW6Ged55wKngGjaG');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    box-shadow: 1px 2px 3px;
}

.r-loading-img {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    width : 100px;
}

.r-loading-img > .tae {
    position: relative;
    width: 100px;
    height: 100px;
}
.r-loading-img span.tae1 {
    display: inline-block;
    width: 100%;
    height: 100%;

    background: linear-gradient(#cd313a 50%, #0047a0 0);
    border-radius: 50%;
    rotate: calc(atan2(2, 3));

}

.r-loading-img span.tae1::after{
    position: absolute;
    content: "";
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: #0047a0;
    margin: 25% 50%;
}
.r-loading-img span.tae1::before{
    position: absolute;
    content: "";
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: #cd313a;
    margin: 25% 0;
}
.r-loading-img span.tae2 {
    border-radius: 15px;

    display: inline-block;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border : 2px solid #c4e36d;
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%) rotate(45deg);

    animation:taeAnime1 5s 2s infinite alternate;
    -webkit-animation:taeAnime1 5s infinite alternate;
    -moz-animation:taeAnime1 5s infinite alternate;
    -o-animation:taeAnime1 5s infinite alternate;
    -ms-animation:taeAnime1 5s infinite alternate;

    /* background-color: #b3131c; */
    z-index: -1;
}
.r-loading-img span.tae3 {
    border-radius: 15px;

    display: inline-block;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border : 2px solid #ffeb3b;
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%) rotate(45deg);

    animation:taeAnime1 5s 2s infinite alternate;
    -webkit-animation:taeAnime1 5s infinite alternate;
    -moz-animation:taeAnime1 5s infinite alternate;
    -o-animation:taeAnime1 5s infinite alternate;
    -ms-animation:taeAnime1 5s infinite alternate;
    animation-delay: .1s;

    /* background-color: #b3131c; */
    z-index: -1;
}
.r-loading-img span.tae4 {
    border-radius: 15px;

    display: inline-block;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border : 2px solid #ff9800;
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%) rotate(45deg);

    animation:taeAnime1 5s 2s infinite alternate;
    -webkit-animation:taeAnime1 5s infinite alternate;
    -moz-animation:taeAnime1 5s infinite alternate;
    -o-animation:taeAnime1 5s infinite alternate;
    -ms-animation:taeAnime1 5s infinite alternate;
    animation-delay: .2s;

    /* background-color: #b3131c; */
    z-index: -1;
}

.r-loading-img .line {
    border-bottom: .1px solid #0047a0;
    width: 200%;
    transform: translate(-25%, 0);
    margin : 30px 0;
}

.r-loading-img .loader-anime {
    position: absolute;
    left : 50%;
    bottom: -20px;
    transform: translate(-50%, 0);
    width: 150px;
    font-size: 12px;
    text-align: center;
}

.r-loading-txt2 {
    position: absolute;
    top : 0px;
    left : 0px;
    height: 100%;
    background-color: #333;
}
.r-loading-txt2 * {
    font-size: 11px;
    color: white;
    text-shadow: 1px 1px 1px black;
}

.r-loading-txt2 div {
    padding : 10px;
    font-weight: 700;
}
.r-loading-txt2 li {
    padding : 2px 10px;
}




.r-loading-txt {
    position: absolute;
    bottom : 10px;
    right : 10px;

    display: flex;
    flex-direction: column;
    width: 30%;
    min-width: 200px;
}

.r-loading-txt * {
    font-style: italic;
    font-size: 11px;
    color: #deff0e;
    text-shadow: 1px 1px 1px black;
}

.r-bolder {
    font-weight: 700;
}


@keyframes taeAnime1 {
    0% {
        transform: translate(-50%, -50%) rotate(45deg);
        filter : drop-shadow(0px 0px 0px black) blur(0px);
    }
    50% {
        transform: translate(-50%, -50%) rotate(405deg);
        filter : drop-shadow(2px 4px 6px black) blur(2px);
    }
    100% {
        transform: translate(-50%, -50%) rotate(45deg);
        filter : drop-shadow(0px 0px 0px black) blur(0px);
    }
}

@keyframes listAnime1 {
    0% {
    }
    50% {
    }
    100% {
    }
}



@media (max-width: 576px) { 

    .s-loading {
        /* border-radius: 10px; */
        width: 100%;
        height: 100%;
    }
    .r-loading {
        background-size: 130%;
    }

    .r-loading-img {
        width : 200px;
    }
    .ch-bg {
        width : 200px;
        height: 200px;
    }



    .r-loading-txt2 {
        border-radius: 10px;
        width: 100%;
        background: none;
        /* background-color: #918903; */
        /* opacity: 0.5; */
    }
    .r-loading-txt2 * {
        font-size: 13px;
        color: white;
        text-shadow: 1px 1px 1px black;
    }
    .r-loading-txt {
        bottom: -70px;
        right: 0px;
        min-width: fit-content;
    }
    .r-loading-txt * {
        padding : 5px;
    }


    .r-loading-img .loader-anime {
        font-size: 15px;
    }


}

@media (min-width: 576px) and (max-width: 768px) {
}