@charset "utf-8";
body {
    overflow-x: hidden;
}
.sssd-bjani {text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 194px;
    height: 194px;}
.sssd-bjani::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width:194px;
    height: 194px;
    background-color: #bfd1e0;
    background: url(s6-itembg.png) no-repeat;
    background-size: 100% 100%;
	margin: 13px auto auto 0px;
}
.animated .s6-zp {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 194px;
    height: 194px;
    margin-top: -1px;
}
.animated .s6-zpl {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    transform-origin: right center;
    overflow: hidden;
	margin: 13px auto auto 0px;
}
.animated .s6-zpl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(s6-itembg2.png) no-repeat;
    background-position: left center;
    background-size: auto 100%;
    transform: rotateY(180deg);
    transform-origin: right center;
	
}

.animated .s6-zp.smar_20 .s6-zpl {
    animation: _zpl_20 2s linear 1 forwards;
}
.animated .s6-zp.smar_20 .s6-zpl::before {
    animation: _zpl_b20 2s linear 1 forwards;
}
.animated .s6-zp.smar_40 .s6-zpl {
    animation: _zpl_40 2s linear 1 forwards;
}
.animated .s6-zp.smar_40 .s6-zpl::before {
    animation: _zpl_b40 2s linear 1 forwards;
}
.animated .s6-zp.smar_60 .s6-zpl {
    animation: _zpl_60 2s linear 1 forwards;
}
.animated .s6-zp.smar_60 .s6-zpl::before {
    animation: _zpl_b60 2s linear 1 forwards;
}
.animated .s6-zp.smar_80 .s6-zpl {
    animation: _zpl_80 2s linear 1 forwards;
}
.animated .s6-zp.smar_80 .s6-zpl::before {
    animation: _zpl_b80 2s linear 1 forwards;
}
.animated .s6-zp.smar_100 .s6-zpl {
    animation: _zpl_100 2s linear 1 forwards;
}
.animated .s6-zp.smar_100 .s6-zpl::before {
    animation: _zpl_b100 2s linear 1 forwards;
}
.animated .s6-zp.smar_120 .s6-zpl {
    animation: _zpl_120 2s linear 1 forwards;
}
.animated .s6-zp.smar_120 .s6-zpl::before {
    animation: _zpl_b120 2s linear 1 forwards;
}
.animated .s6-zp.smar_140 .s6-zpl {
    animation: _zpl_140 2s linear 1 forwards;
}
.animated .s6-zp.smar_140 .s6-zpl::before {
    animation: _zpl_b140 2s linear 1 forwards;
}
.animated .s6-zp.smar_160 .s6-zpl {
    animation: _zpl_160 2s linear 1 forwards;
}
.animated .s6-zp.smar_160 .s6-zpl::before {
    animation: _zpl_b160 2s linear 1 forwards;
}
.animated .s6-zp.smar_180 .s6-zpl {
    animation: _zpl_180 2s linear 1 forwards;
}
.animated .s6-zp.smar_180 .s6-zpl::before {
    animation: _zpl_b180 2s linear 1 forwards;
}
.animated .s6-zp.bigr .s6-zpl {
    animation: _zpl 2s linear 1 forwards;
}
.animated .s6-zp.bigr .s6-zpl::before {
    animation: _zpl_b 2s linear 1 forwards;
}

/* 小于半圈 */
@keyframes _zpl_20 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(20deg);
}
} /*左边div  数值*/
@keyframes _zpl_b20 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(160deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_40 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(40deg);
}
} /*左边div  数值*/
@keyframes _zpl_b40 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(140deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_60 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(60deg);
}
} /*左边div  数值*/
@keyframes _zpl_b60 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(120deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_80 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(80deg);
}
} /*左边div  数值*/
@keyframes _zpl_b80 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(100deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_100 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(100deg);
}
} /*左边div  数值*/
@keyframes _zpl_b100 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(80deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_120 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(120deg);
}
} /*左边div  数值*/
@keyframes _zpl_b120 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(60deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_140 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(140deg);
}
} /*左边div  数值*/
@keyframes _zpl_b140 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(40deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_160 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(160deg);
}
} /*左边div  数值*/
@keyframes _zpl_b160 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(20deg);
}
}/*左边div的before  180 - 数值*/
@keyframes _zpl_180 {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(180deg);
}
} /*左边div  数值*/
@keyframes _zpl_b180 {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(0deg);
}
}/*左边div的before  180 - 数值*/

/* 大于半圈 */ 
    /* _zpl 和 _zpl_b 上述是公用 */
    @keyframes _zpl {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(180deg);
}
} /*左边div*/
 @keyframes _zpl_b {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(0deg);
}
}/*左边div的before*/
    /* _zpl 和 _zpl_b 上述是公用 */