/* 最大那個 */
.bg__donut__content {
    /*background-color: #CCCCCC;*/
    display: block;
    position: absolute;
    width: 100%;
    height: 4000px;
    overflow: hidden;
}

/* 各個區塊使用 */
/*.bg__donut__content__s {
    display: block;
    position: absolute;
    width: 100%;
    overflow: hidden;
}*/

.bg__donut__animate {
    position: absolute;
    margin: 0 auto;
    opacity: 0.6;
    display: none;
}

.bg__donut__content .bg__donut__animate {
    /*transform: scale( 2.5 );*/
    /*transform-origin: center;*/
    top: 2600px;
    right: -webkit-calc( (100vw - 630px)/2 - 800px );
    right: -moz-calc( (100vw - 630px)/2 - 800px );
    right: calc( (100vw - 630px)/2 - 800px );
    opacity: 0.3;
    width: 800px;
    height: 800px;
}

.donut-ring {
    stroke: #ebebeb;
}

/*animation: donut1 1s linear 0.5 infinite alternate both running;*/
/*animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;*/
.donut-segment-1 {
    stroke: #e6e6e6;
    /*animation: donut_reverse 1.5s ease-in-out 0.8s infinite alternate-reverse both;*/
}

.donut-segment-2 {
    stroke: #e6e6e6;
    /*animation: donut 1.2s ease-in-out 0.4s infinite alternate-reverse both;*/
}

.donut-segment-3 {
    stroke: #e6e6e6;
    /*animation: donut 1.2s ease-in-out 1s infinite alternate-reverse both;*/
}

.donut-segment-4 {
    stroke: #e6e6e6;
    /*animation: donut 1s ease-in-out 0.5s infinite alternate-reverse both;*/
}

@keyframes donut {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 100, 0;
    }
}

/* 之後再測試 逆時鐘*/
@keyframes donut_reverse {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 100, 0;
    }
}

.leader_content .bg__donut__animate {
    left: -webkit-calc( (100vw - 630px)/2 - 420px );
    left: -moz-calc( (100vw - 630px)/2 - 420px );
    left: calc( (100vw - 630px)/2 - 420px );
    top: -65px;
    opacity: 0.4;
}

.product_content .bg__donut__animate {
    left: -webkit-calc( (100vw - 630px)/2 - 420px );
    left: -moz-calc( (100vw - 630px)/2 - 420px );
    left: calc( (100vw - 630px)/2 - 420px );
    top:  -65px;
    opacity: 0.4;
}

.popular_content .bg__donut__animate {
    left: -webkit-calc( (100vw - 630px)/2 - 420px );
    left: -moz-calc( (100vw - 630px)/2 - 420px );
    left: calc( (100vw - 630px)/2 - 420px );
    top: -65px;
    opacity: 0.4;
}

.info_content .bg__donut__animate {
    left: -webkit-calc( (100vw - 630px)/2 - 420px );
    left: -moz-calc( (100vw - 630px)/2 - 420px );
    left: calc( (100vw - 630px)/2 - 420px );
    top: -65px;
    opacity: 0.4;
}

@media only screen and (min-width:360px) {
    .bg__donut__animate {
        display: none;
    }

}

@media only screen and (min-width:1025px) {
    .bg__donut__animate {
        display: block;
    }

    .leader_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 330px );
        left: -moz-calc( (100vw - 630px)/2 - 330px );
        left: calc( (100vw - 630px)/2 - 330px );

    }
    .product_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 280px );
        left: -moz-calc( (100vw - 630px)/2 - 280px );
        left: calc( (100vw - 630px)/2 - 280px );
    }

    .popular_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 330px );
        left: -moz-calc( (100vw - 630px)/2 - 330px );
        left: calc( (100vw - 630px)/2 - 330px );
    }

    .info_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 330px );
        left: -moz-calc( (100vw - 630px)/2 - 330px );
        left: calc( (100vw - 630px)/2 - 330px );
    }
}



@media only screen and (min-width:1200px) {

    .leader_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 420px );
        left: -moz-calc( (100vw - 630px)/2 - 420px );
        left: calc( (100vw - 630px)/2 - 420px );

    }
    .product_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 420px );
        left: -moz-calc( (100vw - 630px)/2 - 420px );
        left: calc( (100vw - 630px)/2 - 420px );
    }

    .popular_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 420px );
        left: -moz-calc( (100vw - 630px)/2 - 420px );
        left: calc( (100vw - 630px)/2 - 420px );
    }

    .info_content .bg__donut__animate {
        left: -webkit-calc( (100vw - 630px)/2 - 420px );
        left: -moz-calc( (100vw - 630px)/2 - 420px );
        left: calc( (100vw - 630px)/2 - 420px );
    }
}