html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

@font-face { font-family: "awesome"; src: url('../../../font/awesome.ttf') format("truetype"); font-weight: normal; font-style: normal; }

.icon { font-family: 'awesome'; }

.demo .container { margin-left: auto; margin-right: auto; width: 600px; height: 400px; position: relative; }
.demo .container ul { list-style: none; }
.demo .container li img { width: 600px; height: 400px; vertical-align: middle; }
.demo .container > .next, .demo .container > .prev { color: rgba(255, 255, 255, 0.3); text-decoration: none; background-color: rgba(0, 0, 0, 0.2); width: 40px; height: 80px; text-align: center; border-radius: 5px; margin-top: -40px; line-height: 80px; position: absolute; top: 50%; font-size: 40px; -webkit-transform: scale3d(0.8, 0.8, 0.8); -moz-transform: scale3d(0.8, 0.8, 0.8); -ms-transform: scale3d(0.8, 0.8, 0.8); -o-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); -webkit-transition: all ease; -webkit-transition-delay: 400ms; -moz-transition: all ease 400ms; -o-transition: all ease 400ms; transition: all ease 400ms; }
.demo .container > .next:hover, .demo .container > .prev:hover { background-color: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.6); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.demo .container > .prev { left: 10px; }
.demo .container > .next { right: 10px; }

.pic-index { position: absolute; right: 10px; bottom: 10px; cursor: pointer; }
.pic-index li { width: 20px; height: 20px; margin-right: 10px; display: inline-block; background-color: rgba(255, 255, 255, 0.4); border-radius: 100%; -webkit-transform: scale3d(0.8, 0.8, 0.8); -moz-transform: scale3d(0.8, 0.8, 0.8); -ms-transform: scale3d(0.8, 0.8, 0.8); -o-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); -webkit-transition: all ease; -webkit-transition-delay: 400ms; -moz-transition: all ease 400ms; -o-transition: all ease 400ms; transition: all ease 400ms; }
.pic-index li.cur, .pic-index li:hover { background-color: rgba(255, 255, 255, 0.8); -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

.container { position: relative; overflow: hidden; }

@-webkit-keyframes slideLeft { 100% { -webkit-transform: translateX(600px); } }

@-webkit-keyframes slideRight { 100% { -webkit-transform: translateX(-600px); } }

@-webkit-keyframes slideTop { 100% { -webkit-transform: translateY(400px); } }

@-webkit-keyframes slideDown { 100% { -webkit-transform: translateY(-400px); } }

.x_list { position: relative; }
.x_list.prev_h { -webkit-animation: 400ms ease slideLeft; }
.x_list.next_h { -webkit-animation: 400ms ease slideRight; }
.x_list.prev_v { -webkit-animation: 400ms ease slideTop; }
.x_list.next_v { -webkit-animation: 400ms ease slideDown; }
.x_list li { position: absolute; display: none; }
.x_list li.cur, .x_list li.prev, .x_list li.next { display: block; }
.x_list li.cur { -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); -moz-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); -o-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); left: 0; top: 0; }
.x_list li.prev_h { display: block; left: -600px; }
.x_list li.next_h { display: block; left: 600px; }
.x_list li.prev_v { display: block; top: -400px; }
.x_list li.next_v { display: block; top: 400px; }

.container { -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; }

.cube-list { -webkit-transition: 400ms; -moz-transition: 400ms; -o-transition: 400ms; transition: 400ms; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-300px) rotateX(0) rotateY(0); -moz-transform: translateZ(-300px) rotateX(0) rotateY(0); -ms-transform: translateZ(-300px) rotateX(0) rotateY(0); -o-transform: translateZ(-300px) rotateX(0) rotateY(0); transform: translateZ(-300px) rotateX(0) rotateY(0); overflow: visible !important; }
.cube-list.next1 { -webkit-transform: translateZ(-300px) rotateX(0) rotateY(-90deg); -moz-transform: translateZ(-300px) rotateX(0) rotateY(-90deg); -ms-transform: translateZ(-300px) rotateX(0) rotateY(-90deg); -o-transform: translateZ(-300px) rotateX(0) rotateY(-90deg); transform: translateZ(-300px) rotateX(0) rotateY(-90deg); }
.cube-list.next2 { -webkit-transform: translateZ(-300px) rotateX(0) rotateY(-180deg); -moz-transform: translateZ(-300px) rotateX(0) rotateY(-180deg); -ms-transform: translateZ(-300px) rotateX(0) rotateY(-180deg); -o-transform: translateZ(-300px) rotateX(0) rotateY(-180deg); transform: translateZ(-300px) rotateX(0) rotateY(-180deg); }
.cube-list.next3 { -webkit-transform: translateZ(-300px) rotateX(0) rotateY(-270deg); -moz-transform: translateZ(-300px) rotateX(0) rotateY(-270deg); -ms-transform: translateZ(-300px) rotateX(0) rotateY(-270deg); -o-transform: translateZ(-300px) rotateX(0) rotateY(-270deg); transform: translateZ(-300px) rotateX(0) rotateY(-270deg); }
.cube-list li { display: block; left: 0 !important; }
.cube-list li:nth-child(1) { -webkit-transform: translateZ(300px); -moz-transform: translateZ(300px); -ms-transform: translateZ(300px); -o-transform: translateZ(300px); transform: translateZ(300px); }
.cube-list li:nth-child(2) { -webkit-transform: rotateY(90deg) translateZ(300px); -moz-transform: rotateY(90deg) translateZ(300px); -ms-transform: rotateY(90deg) translateZ(300px); -o-transform: rotateY(90deg) translateZ(300px); transform: rotateY(90deg) translateZ(300px); }
.cube-list li:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(300px); -moz-transform: rotateY(180deg) translateZ(300px); -ms-transform: rotateY(180deg) translateZ(300px); -o-transform: rotateY(180deg) translateZ(300px); transform: rotateY(180deg) translateZ(300px); }
.cube-list li:nth-child(4) { -webkit-transform: rotateY(-90deg) translateZ(300px); -moz-transform: rotateY(-90deg) translateZ(300px); -ms-transform: rotateY(-90deg) translateZ(300px); -o-transform: rotateY(-90deg) translateZ(300px); transform: rotateY(-90deg) translateZ(300px); }