/* Effect Fade In */
.sj-listing-tabs .ltabs-items .fadeIn .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Effect Flip In Vertical */

.sj-listing-tabs .ltabs-items .flipInY .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -webkit-backface-visibility: visible;
    -moz-animation-play-state: running;
    -moz-backface-visibility: visible;
    -o-animation-play-state: running;
    -o-backface-visibility: visible;
    animation-play-state: running;
    backface-visibility: visible;
}

@-webkit-keyframes flipInY {
    0% {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(80deg);
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    90% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateY(0deg);
    }
}

@-moz-keyframes flipInY {
    0% {
        opacity: 0;
        -moz-transform: perspective(400px) rotateY(80deg);
    }
    40% {
        -moz-transform: perspective(400px) rotateY(-20deg);
    }
    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }
    90% {
        -moz-transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        opacity: 1;
        -moz-transform: perspective(400px) rotateY(0deg);
    }
}

@-o-keyframes flipInY {
    0% {
        opacity: 0;
        -o-transform: perspective(400px) rotateY(80deg);
    }
    40% {
        -o-transform: perspective(400px) rotateY(-20deg);
    }
    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }
    90% {
        -o-transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        opacity: 1;
        -o-transform: perspective(400px) rotateY(0deg);
    }
}

@keyframes flipInY {
    0% {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(80deg);
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    90% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateY(0deg);
    }
}

/* Effect Flip In Horizontal */

.sj-listing-tabs .ltabs-items .flipInX .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -webkit-backface-visibility: visible;
    -moz-animation-play-state: running;
    -moz-backface-visibility: visible;
    -o-animation-play-state: running;
    -o-backface-visibility: visible;
    animation-play-state: running;
    backface-visibility: visible;
}

@-webkit-keyframes flipInX {
    0% {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(85deg);
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(15deg);
    }
    90% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateX(0deg);
    }
}

@-moz-keyframes flipInX {
    0% {
        opacity: 0;
        -moz-transform: perspective(400px) rotateX(85deg);
    }
    40% {
        -moz-transform: perspective(400px) rotateX(-20deg);
    }
    70% {
        -moz-transform: perspective(400px) rotateX(15deg);
    }
    90% {
        -moz-transform: perspective(400px) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        -moz-transform: perspective(400px) rotateX(0deg);
    }
}

@-o-keyframes flipInX {
    0% {
        opacity: 0;
        -o-transform: perspective(400px) rotateX(85deg);
    }
    40% {
        -o-transform: perspective(400px) rotateX(-20deg);
    }
    70% {
        -o-transform: perspective(400px) rotateX(15deg);
    }
    90% {
        -o-transform: perspective(400px) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        -o-transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes flipInX {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateX(85deg);
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
    }
    70% {
        transform: perspective(400px) rotateX(15deg);
    }
    90% {
        transform: perspective(400px) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

/* Effect Flip */
.sj-listing-tabs .ltabs-items .flip .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -webkit-backface-visibility: visible;
    -moz-animation-play-state: running;
    -moz-backface-visibility: visible;
    -o-animation-play-state: running;
    -o-backface-visibility: visible;
    animation-play-state: running;
    backface-visibility: visible;
}

@-webkit-keyframes flip {
    0% {
        opacity: 0;
        -webkit-transform: perspective(500px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(500px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(500px) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}

@-moz-keyframes flip {
    0% {
        opacity: 0;
        -moz-transform: perspective(500px) rotateY(0);
        -moz-animation-timing-function: ease-out;
    }
    40% {
        -moz-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -moz-animation-timing-function: ease-out;
    }
    50% {
        -moz-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        -moz-animation-timing-function: ease-in;
    }
    80% {
        -moz-transform: perspective(500px) rotateY(360deg) scale(.95);
        -moz-animation-timing-function: ease-in;
    }
    100% {
        opacity: 1;
        -moz-transform: perspective(500px) scale(1);
        -moz-animation-timing-function: ease-in;
    }
}

@-o-keyframes flip {
    0% {
        opacity: 0;
        -o-transform: perspective(500px) rotateY(0);
        -o-animation-timing-function: ease-out;
    }
    40% {
        -o-transform: perspective(500px) translateZ(150px) rotateY(170deg);
        -o-animation-timing-function: ease-out;
    }
    50% {
        -o-transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        -o-animation-timing-function: ease-in;
    }
    80% {
        -o-transform: perspective(500px) rotateY(360deg) scale(.95);
        -o-animation-timing-function: ease-in;
    }
    100% {
        opacity: 1;
        -o-transform: perspective(500px) scale(1);
        -o-animation-timing-function: ease-in;
    }
}

@keyframes flip {
    0% {
        opacity: 0;
        transform: perspective(500px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(500px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(500px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(500px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        opacity: 1;
        transform: perspective(500px) scale(1);
        animation-timing-function: ease-in;
    }
}

/* Effect Star War */
.sj-listing-tabs .ltabs-items .starwars .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-play-state: running;
    -moz-transform-origin: 50% 50%;
    -moz-animation-play-state: running;
    -o-transform-origin: 50% 50%;
    -o-animation-play-state: running;
    transform-origin: 50% 50%;
    animation-play-state: running;
}

@-webkit-keyframes starwars {
    0% {
        opacity: 0;
        -webkit-transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg);
    }
    80% {
        opacity: 1;
        -webkit-transform: perspective(200px) scale(1) rotateX(60deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(200px) scale(1) rotateX(0deg)
    }
}

@-moz-keyframes starwars {
    0% {
        opacity: 0;
        -moz-transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg);
    }
    80% {
        opacity: 1;
        -moz-transform: perspective(200px) scale(1) rotateX(60deg)
    }
    100% {
        opacity: 1;
        -moz-transform: perspective(200px) scale(1) rotateX(0deg)
    }
}

@-o-keyframes starwars {
    0% {
        opacity: 0;
        -o-transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg);
    }
    80% {
        opacity: 1;
        -o-transform: perspective(200px) scale(1) rotateX(60deg)
    }
    100% {
        opacity: 1;
        -o-transform: perspective(200px) scale(1) rotateX(0deg)
    }
}

@keyframes starwars {
    0% {
        opacity: 0;
        transform: perspective(200px) scale(3) translateY(180px) rotateX(80deg);
    }
    80% {
        opacity: 1;
        transform: perspective(200px) scale(1) rotateX(60deg)
    }
    100% {
        opacity: 1;
        transform: perspective(200px) scale(1) rotateX(0deg)
    }
}

/* Effect Slide Right */
.sj-listing-tabs .ltabs-items .slideRight .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideRight {
    0% {
        opacity: 0;
        left: 30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@-moz-keyframes slideRight {
    0% {
        opacity: 0;
        left: 30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@-o-keyframes slideRight {
    0% {
        opacity: 0;
        left: 30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        left: 30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

/* Effect Bounce In */

.sj-listing-tabs .ltabs-items .bounceIn .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    50% {
        -webkit-transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(.3);
    }
    50% {
        -moz-transform: scale(1.05);
    }
    70% {
        -moz-transform: scale(.9);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@-o-keyframes bounceIn {
    0% {
        opacity: 0;
        -o-transform: scale(.3);
    }
    50% {
        -o-transform: scale(1.05);
    }
    70% {
        -o-transform: scale(.9);
    }
    100% {
        opacity: 1;
        -o-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*Effect Zoom In */

.sj-listing-tabs .ltabs-items .zoomIn .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes zoomIn {
    0% {
        opacity: 0;
        -moz-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@-o-keyframes zoomIn {
    0% {
        opacity: 0;
        -o-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -o-transform: scale(1);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Effect Page Top*/

.sj-listing-tabs .ltabs-items .pageTop .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -webkit-transform-origin: 50% 0%;
    -moz-animation-play-state: running;
    -moz-transform-origin: 50% 0%;
    -o-animation-play-state: running;
    -o-transform-origin: 50% 0%;
    animation-play-state: running;
    transform-origin: 50% 0%;
}

@-webkit-keyframes pageTop {
    0% {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateX(0deg);
    }
}

@-moz-keyframes pageTop {
    0% {
        opacity: 0;
        -moz-transform: perspective(400px) rotateX(90deg);
    }
    100% {
        opacity: 1;
        -moz-transform: perspective(400px) rotateX(0deg);
    }
}

@-o-keyframes pageTop {
    0% {
        opacity: 0;
        -o-transform: perspective(400px) rotateX(90deg);
    }
    100% {
        opacity: 1;
        -o-transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes pageTop {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

/*Effect Zoom Out */

.sj-listing-tabs .ltabs-items .zoomOut .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -moz-animation: zoomOut 600ms ease both;
    -moz-animation-play-state: paused;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(.6);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes zoomOut {
    0% {
        opacity: 0;
        -moz-transform: scale(.6);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@-o-keyframes zoomOut {
    0% {
        opacity: 0;
        -o-transform: scale(.6);
    }
    100% {
        opacity: 1;
        -o-transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.sj-listing-tabs .ltabs-items .slideLeft .ltabs-item {
    opacity: 0;
    position: relative;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideLeft {
    0% {
        opacity: 0;
        left: -30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@-moz-keyframes slideLeft {
    0% {
        opacity: 0;
        left: -30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@-o-keyframes slideLeft {
    0% {
        opacity: 0;
        left: -30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        left: -30px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

.play .ltabs-item {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}


#preview{ float:none; margin:20px auto; text-align:center;}
.jqzoom{ width:350px; height:350px; position:relative;}

.zoomdiv{ left:859px; height:400px; width:400px;}
.list-h li{ float:left;}
#spec-n5{width:350px; height:56px; padding-top:6px; overflow:hidden;}
#spec-left{ background:url(images/left.gif) no-repeat; width:10px; height:45px; float:left; cursor:pointer; margin-top:5px;}
#spec-right{background:url(images/right.gif) no-repeat; width:10px; height:45px; float:left;cursor:pointer; margin-top:5px;}
#spec-list{ width:325px; float:left; overflow:hidden; margin-left:2px; display:inline;}
#spec-list ul li{ float:left; margin-right:0px; display:inline; width:62px;}
#spec-list ul li img{ padding:2px ; border:1px solid #ccc; width:50px; height:50px;}

/*jqzoom*/
.jqzoom{position:relative;padding:0;}
.zoomdiv{z-index:100;position:absolute;top:1px;left:0px;width:400px;height:400px;background:url(i/loading.gif) #fff no-repeat center center;border:1px solid #e4e4e4;display:none;text-align:center;overflow: hidden;}
.bigimg{width:800px;height:800px;}
.jqZoomPup{z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:50px;height:50px;border:1px solid #aaa;background:#FEDE4F 50% top no-repeat;opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(Opacity=50);cursor:move;}
#spec-list{ position:relative; width:322px; margin-right:6px;}
#spec-list div{ margin-top:0;margin-left:-30px; *margin-left:0;}