/* 讀取中1 */
.popup_loadingbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.46);
    overflow: auto;
    z-index: 111131;
}
.popup_loading {
    position: fixed;
    width: 100%;
    left: 45%;
    top: 40%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 111121;
}
/* 讀取中2 */
.loader1 {
    position: relative;
    top: 38%;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    z-index: 111141;
}
.loader1 i {
    position:absolute;
    display: block;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.loader1 i:before, .loader1 i:after {
    content: '';
    display: block;
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
}
.loader1 i:first-child:before {
    background: #3495dd;
    -webkit-animation: rotate-top-left 1.5s linear infinite;
    -moz-animation: rotate-top-left 1.5s linear infinite;
}
.loader1 i:first-child:after {
    background:#e1492c;
    -webkit-animation: rotate-top-right 1.5s linear infinite;
    -moz-animation: rotate-top-right 1.5s linear infinite;
}
.loader1 i:last-child:before {
    background:#f9ce2b;
    -webkit-animation: rotate-bottom-left 1.5s linear infinite;
    -moz-animation: rotate-bottom-left 1.5s linear infinite;
}
.loader1 i:last-child:after {
    background:#009975;
    -webkit-animation: rotate-bottom-right 1.5s linear infinite;
    -moz-animation: rotate-bottom-right 1.5s linear infinite;
}
.loader_text {
    position: relative;
    top: 41%;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    text-shadow: #000 1px 1px 5px;
    width: 100%;
    z-index: 10030;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-180deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}
@-webkit-keyframes rotate-top-right {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-180deg);
        -webkit-transform-origin: 20% 20%;
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}
@-webkit-keyframes rotate-top-left {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        -webkit-transform-origin: 80% 20%;
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate-bottom-right {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-180deg);
        -webkit-transform-origin: 80% 80%;
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}
@-webkit-keyframes rotate-bottom-left {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        -webkit-transform-origin: 20% 80%;
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(-180deg);
    }
    100% {
        -moz-transform:rotate(-360deg);
    }
}
@-moz-keyframes rotate-top-right {
    0% {
        -moz-transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(-180deg);
        -moz-transform-origin: 20% 20%;
    }
    100% {
        -moz-transform: rotate(-360deg);
    }
}
@-moz-keyframes rotate-top-left {
    0% {
        -moz-transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(180deg);
        -moz-transform-origin: 80% 20%;
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-moz-keyframes rotate-bottom-right {
    0% {
        -moz-transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(-180deg);
        -moz-transform-origin: 80% 80%;
    }
    100% {
        -moz-transform: rotate(-360deg);
    }
}
@-moz-keyframes rotate-bottom-left {
    0% {
        -moz-transform: rotate(0deg);
    }
    50% {
        -moz-transform: rotate(180deg);
        -moz-transform-origin: 20% 80%;
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}
/*********  以下為 手機畫面_設定  *********/
/* 寬度大於 1921px*/
@media screen and (min-width: 1921px) {
    /* 讀取中2 */
    .loader1 {
        top: 22%;
    }
    .loader_text {
        top: 24%;
        font-size: 1.6em;
    }
}
/* 寬度介於 1301px - 1680px (ipad pro,舊電腦) */
@media screen and (min-width: 1301px) and (max-width: 1680px) {
    /* 讀取中2 */
    .loader1 {
        top: 30%;
    }
    .loader_text {
        top: 33%;
    }
}