@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: 400px;height: 200px;background-color: rgba(0,0,0,.7);display: flex;flex-direction: row;justify-content: center;align-items: center;border-radius: 5%;}
.sword {position: relative;width: 64px;height: 64px;border-radius: 50%;margin-right: 20px; background: url(../img/demo4/icon.png) no-repeat center center;background-size: 20px 20px;}
.swords {position: relative;width: 64px;height: 64px;border-radius: 50%;margin-right: 20px; background: url(../img/demo4/logo.png) no-repeat center center;background-size: 20px 20px;}
.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: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.ytloading_words p {font-size: 26px;color: whitesmoke;text-align: center;margin-bottom: 10px;}