@charset "utf-8";

.none-scroll{overflow-y: hidden;}

.ytgraybox {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;z-index: 999999;background-color: transparent;background-color: rgba(0,0,0,.3);}
.ytgarylittlebox{width: 16.666rem;height: 8.333rem;background-color: rgba(0,0,0,.7);display: flex;justify-content: center;align-items: center;border-radius: 5%;}
.sword {position: relative;width: 3rem;height: 3rem;border-radius: 50%;margin-right: 0.833rem; background: url(../img/demo4/icon.png) no-repeat center center;background-size: 0.833rem 0.833rem;}
.swords {position: relative;width: 3rem;height: 3rem;border-radius: 50%;margin-right: 0.833rem; background: url(../img/demo4/logo.png) no-repeat center center;background-size: 0.833rem 0.833rem;}
.sword span {position: absolute;box-sizing: border-box;width: 100%;height: 100%;border-radius: 50%;}
.sword :first-child {left: 0%;top: 0%;border-bottom: 3px solid #EFEFFA;}
.sword :first-child {animation: sword-one 1s linear infinite;}
.sword :nth-child(2) {right: 0%;top: 0%;animation: sword-two 1s linear infinite;border-right: 3px solid #EFEFFA;}
.sword :last-child {right: 0%;bottom: 0%;animation: sword-three 1s linear infinite;border-top: 3px solid #EFEFFA;}

@keyframes sword-one {0% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}100% {transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}}
@keyframes sword-two {0% {transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}100% {transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}}
@keyframes sword-three {0% {transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}100% {transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}}
.ytloading_words{width: 8.333rem;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.ytloading_words p {font-size: 1.083rem;color: whitesmoke;text-align: center;margin-bottom: 0.416rem;}