/* 播放設定 */
.play-png {
    -webkit-animation-name: play-png;
    animation-name: play-png;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png2 {
    -webkit-animation-name: play-png2;
    animation-name: play-png2;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png3 {
    -webkit-animation-name: play-png3;
    animation-name: play-png3;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png4 {
    -webkit-animation-name: play-png3;
    animation-name: play-png3;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png5 {
    -webkit-animation-name: play-png5;
    animation-name: play-png5;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png6 {
    -webkit-animation-name: play-png5;
    animation-name: play-png5;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png7 {
    -webkit-animation-name: play-png3;
    animation-name: play-png3;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png8 {
    -webkit-animation-name: play-png3;
    animation-name: play-png3;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png9 {
    -webkit-animation-name: play-png2;
    animation-name: play-png2;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.play-png10 {
    -webkit-animation-name: play-png5;
    animation-name: play-png5;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
/* 變臉速度調整 */
.twinkle {
    width: 300px;
    height: 331px;
    background: url(../images/flash_01.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    top:0;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle.winner01 {
    background: url(../images/winner/flash_01.png);
    border-right:1px solid #74eac4;
    margin-left:-9px;
}
.twinkle2 {
    width: 473px;
    height: 331px;
    background: url(../images/flash_02.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    top:0;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle2.winner02 {
    background: url(../images/winner/flash_02.png);
    top:1px;
    border-right:1px solid #74eac4;
    margin-left:-3px;
}
.twinkle3 {
    width: 155px;
    height: 165.5px;
    background: url(../images/flash_03.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    background-size: cover;
    top:0px;
    left:-3px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
    border-bottom:1px solid #429075;
}
.twinkle3.winner03 {
    background: url(../images/winner/flash_03.png);
    background-size: cover;
    border-right:1px solid #74eac4;
    border-bottom:1px solid #74eac4;
}
.twinkle4 {
    width: 155px;
    height: 165.5px;
    background: url(../images/flash_04.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    background-size: cover;
    top:0px;
    left:-3px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle4.winner04 {
    background: url(../images/winner/flash_04.png);
    background-size: cover;
    border-right:1px solid #74eac4;
}
.twinkle5 {
    width: 336px;
    height: 331px;
    background: url(../images/flash_05.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    background-size: cover;
    top:0px;
    left:-3px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle5.winner05 {
    background: url(../images/winner/flash_05.png);
    border-right:1px solid #74eac4;
    margin-left:-3px;
}
.twinkle6 {
    width: 336px;
    height: 331px;
    background: url(../images/flash_06.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    background-size: cover;
    top:0px;
    left:-6px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle6.winner06 {
    background: url(../images/winner/flash_06.png);
    border-right:1px solid #74eac4;
}
.twinkle7 {
    width: 155px;
    height: 165.5px;
    background: url(../images/flash_07.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    background-size: cover;
    top:0px;
    left:-9px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
    border-bottom:1px solid #429075;
}
.twinkle7.winner07 {
    background: url(../images/winner/flash_07.png);
    background-size: cover;
    border-right:1px solid #74eac4;
}
.twinkle8 {
    width: 155px;
    height: 165.5px;
    background: url(../images/flash_08.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    background-size: cover;
    top:0px;
    left:-9px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle8.winner08 {
    background: url(../images/winner/flash_08.png);
    background-size: cover;
    border-right:1px solid #74eac4;
}
.twinkle9 {
    width: 473px;
    height: 331px;
    background: url(../images/flash_09.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    top:0;
    left:-12px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle9.winner09 {
    background: url(../images/winner/flash_09.png);
    top:1px;
    border-right:1px solid #74eac4;
}
.twinkle10 {
    width: 336px;
    height: 331px;
    background: url(../images/flash_10.png);
    -webkit-animation-timing-function: steps(2);
    animation-timing-function: steps(2);
    background-size: cover;
    top:0px;
    left:-15px;
    position: relative;
    margin:0 auto;
    border-right:1px solid #429075;
}
.twinkle10.winner10 {
    background: url(../images/winner/flash_10.png);
    border-right:1px solid #74eac4;
}
.str_move div{
    display: inline-block;
}
.str_wrap_row2 div{
    display: block;
}
.str_wrap_row1 div span,
.str_wrap_row2 div span{
    position: absolute;
    font-weight: 100;
    top:13px;
    opacity: 0.25;
    -webkit-transform : scale(0.85);
    -o-transform : scale(0.85); 
    transform : scale(0.85); 
}
.str_wrap_row1 div span.light_green,
.str_wrap_row2 div span.light_green{
    opacity: 1;
}
.str_wrap_row1 div span.num_left,
.str_wrap_row2 div span.num_left{
    left:23px;
}
.str_wrap_row1 div span.num_right,
.str_wrap_row2 div span.num_right{
    right:23px;
}
.str_wrap_row1 div span.num_right2,
.str_wrap_row2 div span.num_right2{
    right:16px;
}
.str_wrap_row1 div span.num_left2,
.str_wrap_row2 div span.num_left2{
    left:16px;
}
/* 變臉動畫 */
@-webkit-keyframes play-png {
    to {
        background-position: -600px;
    }
}
@keyframes play-png {
    to {
        background-position: -600px;
    }
}
@-webkit-keyframes play-png2 {
    to {
        background-position: -946px;
    }
}
@keyframes play-png2 {
    to {
        background-position: -946px;
    }
}
@-webkit-keyframes play-png3 {
    to {
        background-position: -330px;
    }
}
@keyframes play-png3 {
    to {
        background-position: -330px;
    }
}
@-webkit-keyframes play-png5 {
    to {
        background-position: -672px;
    }
}
@keyframes play-png5 {
    to {
        background-position: -672px;
    }
}

/* 訊號 */
.beacon-wrapper {
/*     width: 58px;
    height: 58px; */
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.signal {
    position: absolute;
    display: block;
    border-radius: 50%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.beacon--epicentre {
    top: calc(50% - 1px);
    left: calc(50% - 1px);
    width: 28px;
    height: 28px;
    background-color: #7d0000;
    z-index: 100;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

.signal--wave {
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    width: 38px;
    height: 38px;
    border: 1px solid rgba(125, 0, 0, 0.45);
    opacity: 0;
    background-color: rgba(125, 0, 0, 0.5);
    -webkit-animation-name: none;
    animation-name: none;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 80;
}
.case_part1:hover span.case_cont_dots1 abbr .signal--wave,
.case_part2:hover span.case_cont_dots2 abbr .signal--wave,
.case_part3:hover span.case_cont_dots3 abbr .signal--wave,
.case_part4:hover span.case_cont_dots4 abbr .signal--wave{
    -webkit-animation-name: signal;
    animation-name: signal;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    width: 38px;
    height: 38px;
}

.signal--delay {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    z-index: 90;
}
.beacon-roll{
    width: 43px;
    height: 43px;
    display: block;
    background-color: #7d0000;
    opacity: 0.4;
    border-radius: 50%;
    position: absolute;
    z-index: 0;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    -webkit-box-shadow: 0px 0px 16px 6px rgba(255,255,255,0.6);
    -moz-box-shadow: 0px 0px 16px 6px rgba(255,255,255,0.6);
    box-shadow: 0px 0px 16px 6px rgba(255,255,255,0.6);
}
.case_part1:hover span.case_cont_dots1 abbr .beacon-roll,
.case_part2:hover span.case_cont_dots2 abbr .beacon-roll,
.case_part3:hover span.case_cont_dots3 abbr .beacon-roll,
.case_part4:hover span.case_cont_dots4 abbr .beacon-roll{
    background-color: #7d0000;
    opacity: 0.5;
    -webkit-box-shadow: 0px 0px 16px 6px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 16px 6px rgba(255,255,255,1);
    box-shadow: 0px 0px 16px 6px rgba(255,255,255,1);
}

@-webkit-keyframes signal {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes signal {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}