/* 共用正方體邊框流線效果 開始-------------------------*/
.box-border::before,
.box-border::after,
.box-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.box-border {
    width: 200px;
    height: 200px;
    margin: auto;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feffff+0,dddddd+51,f7dce0+100&1+0,0.77+41,1+100 */
    background: linear-gradient(135deg, rgba(254, 255, 255, 1) 0%, rgba(227, 228, 228, 0.77) 41%, rgba(221, 221, 221, 0.81) 51%, rgba(247, 220, 224, 1) 100%);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,7d7d7d+51,ededed+100&0.83+0,0.42+40,0.77+100 */
    background: linear-gradient(135deg, rgba(242, 242, 242, 0.83) 0%, rgba(150, 150, 150, 0.42) 40%, rgba(125, 125, 125, 0.38) 51%, rgba(237, 237, 237, 0.77) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: scale(1.5, 1.5);
}

.box-border_img {
    max-width: 80%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 8%, rgba(255, 255, 255, 0.1) 59%, rgba(255, 255, 255, 0) 90%);
    margin: auto;
}

.box-border::before,
.box-border::after {
    content: "";
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 1.2px;
    animation: clipMe 8s linear infinite;
    transform: scale(0.91);
    transform-origin: center center;
}

.box-border::before {
    animation-delay: -4s;
}

@keyframes clipMe {

    0%,
    100% {
        clip: rect(0px, 220px, 2px, 0px);
    }

    25% {
        clip: rect(0px, 2px, 220px, 0px);
    }

    50% {
        clip: rect(218px, 220px, 220px, 0px);
    }

    75% {
        clip: rect(0px, 220px, 220px, 218px);
    }
}

/* 共用正方體邊框流線效果 結束-------------------------*/

/* 共用尺輪效果 開始-------------------------*/
.captin_image {
    width: 182px;
    height: 182px;
    position: absolute;
    margin: -60px 0 0 -64px;
    -moz-animation: spin 5s infinite linear;
    -webkit-animation: spin 5s infinite linear;
    animation: spin 5s infinite linear;
}

.captin_image02 {
    width: 85px;
    height: 78px;
    position: absolute;
    margin: -18px 0 0 -18px;
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

.list {
    position: absolute;
}

.list_line {
    position: absolute;
}

.list_btn {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: inline-block;
    width: 60px;
    height: 60px;
}

.list_over {
    position: absolute;
    width: 100px;
    height: 100px;
}

.btn_over {
    position: absolute;
    -moz-animation: spinoff02 2.8s infinite linear;
    -webkit-animation: spinoff02 2.8s infinite linear;
    animation: spinoff02 2.8s infinite linear;
}

.btn_over02 {
    position: absolute;
    margin: 13px 0 0 13px;
    -moz-animation: spinoff 1.2s infinite linear;
    -webkit-animation: spinoff 1.2s infinite linear;
    animation: spinoff 1.2s infinite linear;
}

.btn_over03 {
    position: absolute;
    margin: 23px 0 0 24px;
    -moz-animation: spin 1.8s infinite linear;
    -webkit-animation: spin 1.8s infinite linear;
    animation: spin 1.8s infinite linear;
}

.btn_over img,
.btn_over02 img,
.btn_over03 img,
.captin_image img {
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

/*css3 animation*/
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }

    ;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);

    }

    100% {
        -webkit-transform: rotate(360deg);
    }

    ;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);

    }

    100% {
        transform: rotate(360deg);
    }

    ;
}

@-moz-keyframes spin02 {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }

    ;
}

@-webkit-keyframes spin02 {
    0% {
        -webkit-transform: rotate(0deg);

    }

    100% {
        -webkit-transform: rotate(360deg);
    }

    ;
}

@keyframes spin02 {
    0% {
        transform: rotate(0deg);

    }

    100% {
        transform: rotate(360deg);
    }

    ;
}

@-moz-keyframes spinoff {
    0% {
        -moz-transform: rotate(0deg);

    }

    100% {
        -moz-transform: rotate(-360deg);
    }

    ;
}

@-webkit-keyframes spinoff {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);

    }

    ;
}

@keyframes spinoff {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);

    }

    ;
}

@-moz-keyframes spinoff02 {
    0% {
        -moz-transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    50% {
        -moz-transform: rotate(-180deg) scale(1.3);
        opacity: 0.5;
    }

    ;
}

@-webkit-keyframes spinoff02 {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    50% {
        -webkit-transform: rotate(-360deg) scale(1.3);
        opacity: 0.2;
    }

    ;
}

@keyframes spinoff02 {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: rotate(-360deg) scale(1.3);
        opacity: 0.2;
    }

    ;
}

/* 共用尺輪效果 結束-------------------------*/