* {
    margin: 0;
    outline: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article,
aside,
dialog,
footer,
header,
section,
footer,
nav,
figure,
menu {
    display: block
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);
}

html {
    touch-action:none;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust:none;
}

body {
    background-color: #000;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-weight: 300;
    font-family: 'Microsoft Yahei', Tahoma, Helvetica, Arial, sans-serif;
    font-size: 62.5%;
    line-height: 1.231;
    -webkit-touch-callout: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    position: relative;
    -webkit-text-size-adjust:none;
}

img {
    /*-ms-interpolation-mode: bicubic; vertical-align: middle; border: 0 none;max-width: 100%;height: auto;width: auto\9;*/
    /* ie8 */
}

img:not([src*="/"]) {
    display: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th,
td,
caption {
    vertical-align: middle;
}

textarea {
    resize: none;
    border: 0;
    padding: 8px 0;
    border-radius: 0;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.clr:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clr {
    *zoom: 1;
}

.telphone {
    display: block;
    position: fixed;
    right: 2%;
    bottom: 15%;
    z-index: 100;
    cursor: pointer;
}

.telphone img {
    width: 44px;
    height: 44px;
}


/*音樂圖標*/

#audio_btn {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 200;
    display: none;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    /*background-repeat: no-repeat;*/
    /*background-size: 100% 100%;*/
    /*background-position: 0px 0px;*/
}

.loading_background {
    /*background-image: url(../css/images/music_loading.gif);*/
    background-size: 30px 30px;
    opacity: 0.5;
    background-position: center center;
}

.loading_yinfu {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    /*background-image: url(../css/images/yinfu.png);*/
    background-repeat: no-repeat;
    background-position: center center;
}

.play_yinfu {
    background-image: url(../css/images/music.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px 60px;
}

.rotate {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-image: url(../css/images/music_off.png);
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-moz-keyframes rotating {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}


/*#audio_btn.off{background-position: 0px -30px;}*/

.off {
    background-image: url(../css/images/music_off.png);
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center center;
}

.gesture {
    background-image: url(../css/images/gesture.png);
    left: 50%;
    margin-left: -50px;
    bottom: 100px;
    position: absolute;
    width: 117px;
    height: 117px;
    z-index: 1000;
    display: none;
    -webkit-animation: start 1.5s infinite ease-in-out;
    -moz-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}

@-webkit-keyframes start {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -8px);
    }
}

@-moz-keyframes start {
    0%,
    30% {
        opacity: 0;
        -moz-transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -moz-transform: translate(0, -8px);
    }
}

@keyframes start {
    0%,
    30% {
        opacity: 0;
        transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, -8px);
    }
}


/*頁面loading*/

.loading {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    top: 0px;
}

.loadbox {
    /*display: block;
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: 60%;
    margin-left: 145px;*/
    position: absolute; left: 50%; top: 50%; margin:-16px 0 0 -16px;
}

.loadbg {
    display: block;
    position: absolute;
    z-index: 1000;
    width: 32px;
    height: 32px;
    background: url(../css/images/loadbg.gif?v0322) no-repeat;
    background-size: 100%;
}


/*手機端樣式*/

img {
    -webkit-user-select: ​ none
}

.main {
    width: 100%;
    height: 100%;
    min-width: 300px;
    /*max-width: 640px;*/
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    overflow: hidden;
}


/*上下滾動開始*/

.m-page {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0%;
    height: 100%;
    width: 100%;
    background: #fff;
}

.m-page.show {
    z-index: 10;
    display: block;
}

.m-page.hide {
    z-index: 5;
    display: none;
}

.m-page.active {
    z-index: 15;
    display: block;
}

.m-img {
    width: 100%;
    height: 100%;
}


/*.m-img img{width:100%; height:100%;}*/

.m-img .video_mask {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.m-img .close_mask {
    background-image: url(../css/images/close_white.png);
    display: block;
    position: absolute;
    right: 1px;/*上線豎視頻更改的 edit by zyy 20180327*/
    top: 70px;
    width: 20px;
    height: 20px;
    z-index: 1001;
    background-repeat: no-repeat;
}

.m-img .video_mask .video_player {
    position: absolute;
    top: 15%;
    width: 100%;
    height: 50%;
}


/*新增代碼*/

.main-page {
    border: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: cover;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 0;
    display: none;
    -webkit-transform-origin: center center;
    background: #fff;
}

.page-content {
    height: 100%;
    -webkit-box-flex: 100;
    color: #fff;
    font-size: 50px;
}

.main-page.z-current {
    z-index: 1;
    display: inline-block;
}

.z-current {
    opacity: 1
}

.main-page.z-active {
    z-index: 2;
    display: inline-block
}

.u-arrow-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 150;
    width: 24px;
    height: 14px;
    margin-left: -7px;
}

.u-arrow-bottom img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -14px;
    width: 24px;
    height: 14px;
    background-position: 0 -82px;
    -webkit-animation: start 1.5s infinite ease-in-out;
    -moz-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}

@-webkit-keyframes start {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -8px);
    }
}

@-moz-keyframes start {
    0%,
    30% {
        opacity: 0;
        -moz-transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -moz-transform: translate(0, -8px);
    }
}

@keyframes start {
    0%,
    30% {
        opacity: 0;
        transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, -8px);
    }
}

.u-arrow-right {
    position: absolute;
    width: 14px;
    height: 24px;
    z-index: 150;
    top: 50%;
    margin-top: -10px;
    right: 5px;
}

.u-arrow-right img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -14px;
    width: 14px;
    height: 24px;
    background-position: 0 -82px;
    -webkit-animation: rightflip 1.5s infinite ease-in-out;
    -moz-animation: rightflip 1.5s infinite ease-in-out;
    animation: rightflip 1.5s infinite ease-in-out;
}

@-webkit-keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translate(10, 0px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-8px, 0);
    }
}

@-moz-keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        -moz-transform: translate(10, 0px);
    }
    60% {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -moz-transform: translate(-8px, 0);
    }
}

@keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        transform: translate(10, 0px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-8px, 0);
    }
}


/*上下滾動結束*/


/*左右滾動開始*/

.sl-slider-wrapper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.sl-slider {
    position: absolute;
    top: 0;
    left: 0;
}

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.sl-slide {
    z-index: 1;
}

.sl-content-slice {
    overflow: hidden;
    position: absolute;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
}

.sl-slide-horizontal .sl-content-slice {
    width: 100%;
    height: 50%;
    left: -200px;
    -webkit-transform: translateY(0%) scale(1);
    -moz-transform: translateY(0%) scale(1);
    -o-transform: translateY(0%) scale(1);
    -ms-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
    top: -200px;
    padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
    top: 50%;
    padding: 0px 200px 200px 200px;
}

.sl-slide-vertical .sl-content-slice {
    width: 50%;
    height: 100%;
    top: -200px;
    -webkit-transform: translateX(0%) scale(1);
    -moz-transform: translateX(0%) scale(1);
    -o-transform: translateX(0%) scale(1);
    -ms-transform: translateX(0%) scale(1);
    transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
    left: -200px;
    padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
    left: 50%;
    padding: 200px 200px 200px 0px;
}

.sl-content-wrapper {
    position: absolute;
}

.sl-content {
    width: 100%;
    height: 100%;
    background: #fff;
}

.sl-slide-horizontal .sl-slide-inner {
    background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
    background: #ccc;
}

.main .sl-slider-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.main .bg-img {
    display: block;
    padding: 0px 0px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;
}

.jt_left {
    position: absolute;
    top: 50%;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    z-index: 100;
    right: 8px;
    -webkit-animation: move 2s infinite;
}

.jt_left img {
    width: 30px;
    height: 30px;
}

@-webkit-keyframes move {
    from {
        right: 8px;
    }
    to {
        right: 50px;
    }
}


/*左右滾動開始*/


/*畫布效果*/

.cas {
    position: absolute;
    z-index: 669;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -moz-transition: opacity .5s;
}

.money {
    z-index: 1000;
    width: 100%;
    height: 100%;
    position: absolute;
}

.money_mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001
}

.money_modal {
    width: 260px;
    height: 260px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -130px;
    margin-top: -130px;
    background-color: #e30016;
    z-index: 1002;
    color: #fff714;
}

.money_modal .money_text {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

.money_modal .level_text {
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
}

.money_modal .button {
    display: inline-block;
    width: 112px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 16px;
    /*border: 1px solid #ccc;*/
    border-radius: 5px;
    bottom: 30px;
    position: absolute;
    background-color: #fff714;
    color: #e30016;
}

.money_modal .tryOnce {
    float: left;
    margin-left: 10px;
    margin-right: 14px;
}

.money_modal .enterScene {
    float: right;
    margin-left: 138px;
}

.money_modal .money_img {
    width: 100%;
    margin: 0 auto;
    background-image: url(../css/images/yuanbao.png);
    background-position: center;
    background-size: 100%;
    margin-top: 0px;
    height: 100px;
    margin-top: -26px;
    background-repeat: no-repeat;
}

.noOp {
    opacity: 0 !important;
}


/*上下撕裂*/

.jt_up {
    position: absolute;
    bottom: 5px;
    display: block;
    width: 30px;
    height: 30px;
    z-index: 100;
    left: 50%;
    margin-left: -15px;
    -webkit-animation: move2 2s infinite;
}

.jt_up img {
    width: 30px;
    height: 30px;
}

@-webkit-keyframes move2 {
    from {
        bottom: 5px;
    }
    to {
        bottom: 15px;
    }
}

.ctrl_panel {
    float: left;
    padding-top: 110px;
}

.pre_btn {
    display: block;
    margin-bottom: 40px;
}

.next_btn {
    display: block;
}

.btn {
    cursor: pointer;
    width: 20px;
    height: 70px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    left: 50%;
    background: #2096f9;
    top: 47px;
    font-size: 12px;
    color: #fff;
    padding: 20px 8px 0px 8px;
    text-align: center;
    border: 1px solid #2096f9;
}


/*.btn {
    text-align: center;
    font-size: 14px;
    line-height: 15px;
    color: #fff;
    height: 90px;
    cursor:pointer;
    text-align:center;
    line-height:90px;
    width: 90px;
    border-radius:45px;
    border:1px solid #fff;
    display:inline-block;
    margin:0 20px;
}*/

.ctrl_panel a:hover {
    border: 1px solid #08a1ef;
    color: #08a1ef;
    background-color: #FFF;
}

.tip {
    z-index: 10000;
    font-size: 24px;
    position: absolute;
    width: 180px;
    top: 320px;
    text-align: center;
    background-color: #000;
    opacity: 0.8;
    color: #fff;
    line-height: 50px;
    border-radius: 10px;
    filter: alpha(opacity=80);
    left: 50%;
    margin-left: -90px;
}

.finger_div {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
    z-index: 1000;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    /*border: 1px solid #ff0000;*/
    /*position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    top: 50%;
    margin-top: -100px;
    z-index: 1000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    border: 1px solid #ff0000;*/
}

.finger_background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    /*background-image: url('http://makaevent.qiniudn.com/linlio_192obrvbk14tc2nqp4155r178r7?imageMogr2/thumbnail/!200p/crop/!640x1008a0a50');*/
}

.finger_kuang {
    width: 180px;
    position: absolute;
    left: 70px;
    top: 160px;
}

.finger_zw {
    width: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -70px;
    margin-top: -70px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

.finger_line {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    display: none;
    width: 180px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -90px;
    margin-top: 70px;
}

.finger_info {
    color: white;
    position: absolute;
    top: 130px;
    left: 0;
    width: 320px;
    text-align: center;
    font-size: 14px;
}

body > a {
    display: none;
}

article {
    height: 100% !important;
}
.nr b,.nr strong{font-weight:700;}
.nr .edit_wrapper {
    height: 100%;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
}

.nr .edit_area {
    position: absolute;
    top: 0;
    text-align: left;
    width: 320px;
    height: 486px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nr .edit_area > li {
    color: #676767;
    line-height: 1;
    background: none;
    position: absolute;
    list-style: none !important;
    margin: 0 !important;
    padding: 0;
    -webkit-transition: padding 0.5s;
    -moz-transition: padding 0.5s;
    transition: padding 0.5s;
    min-height: 24px;
    min-width: 50px;
    width: 100%;
    -webkit-user-select: none;
}

.nr .edit_area > li * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.nr .edit_area > li .element-box {
    overflow: hidden;
}

.nr .edit_area .element {
    min-width: 50px;
    /*min-height: 24px;*/
    color: inherit;
}
.nr .edit_area .editable-text{/*20250514 更改*/
    text-align: justify;
} 
.nr .wsite-button .element-box {
    text-align: center;
    color: #676767;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f9f9f9;
}

.nr .wsite-input .element-box {
    color: #676767;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f9f9f9;
}

.nr .wsite-video .element-box {
    width: 48px;
    height: 48px;
}

.nr .wsite-video .element-box .video_area {
    background-image: url(../css/images/create/play.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 48px;
    height: 48px;
    display: block;
}

.nr .wsite-video .element-box .yinpin_area {
    background-image: url(../css/images/create/yinpin.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 48px;
    height: 48px;
    display: block;
}

.nr input,
textarea {
    resize: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-radius: 0;
    line-height: 120%;
    display: inline-block !important;
}

.nr .comp_title {
    background-color: #fff;
    color: #000;
    font-size: 14px;
    text-align: center;
    word-break: break-all;
    line-height: 50px;
}

.label_content {
    opacity: 0.8;
    font-size: 18px;
    height: 50px;
    top: 0px;
    color: #ccc;
    border: 1px solid #ccc;
}

.nr .wsite-image {}

.nr .comp_image {
    width: 100%;
    height: 100%;
}

.nr .wsite-text {
    width: 222px;
    height: 36px;
}

.nr .comp_paragraph {
    font-size: 24px;
    color: #404449;
    line-height: inherit;
    padding: 0.3em 15px;
    margin: 0;
    width: 100%;
    height: 100%;
    word-wrap: break-word;
}

.nr .comp_input_wrapper {
    margin: 15px auto 0;
    font-size: 16px;
    width: 80%;
    color: #aaa;
    text-align: left;
}

.nr .comp_input_wrapper .comp_input_label {
    padding: 4px 0;
}

.nr .comp_input {
    width: 240px;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 8px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

.nr .comp_button {
    width: 240px;
    height: 32px;
    min-width: 50px;
    white-space: nowrap;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: #999;
}

.nr a {
    display: inline-block;
    text-algn: center;
    color: inherit;
}

.nr .btn1 {
    width: 90px;
    background: #ff0000;
    height: 30px;
    border: 1px solid #ccc;
    line-height: 30px;
    color: white;
    -webkit-border-radius: 5px;
    text-algn: center;
}

.nr .btn2 {
    width: 80px;
    background: #FDAF07;
    height: 35px;
    border: 1px solid #ccc;
    line-height: 35px;
    -webkit-border-radius: 40px;
}

.nr .btn3 {
    width: 100px;
    background: #3FB816;
    height: 30px;
    border: 1px solid #ccc;
    line-height: 30px;
    color: white;
    -webkit-border-radius: 5px;
}

.nr .btn4 {
    width: 100px;
    height: 30px;
    border: 1px solid #3FB816;
    line-height: 30px;
    color: black;
    -webkit-border-radius: 5px;
}

.nr .comp_anchor {
    width: 240px;
    height: 32px;
    display: block;
    text-align: center;
    white-space: nowrap;
    line-height: 32px;
    font-size: 16px;
}

body * {
    text-shadow: none !important;
}

.anchorBL {
    display: none !important
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes rotateIn {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(359deg)
    }
}

@-o-keyframes rotateIn {
    from {
        -o-transform: rotate(0deg)
    }
    to {
        -o-transform: rotate(359deg)
    }
}

@keyframes rotateIn {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

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

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

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

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

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

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -25px, 0);
        transform: translate3d(0, -25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.heartbeat {
    -webkit-animation-name: heartbeat;
    animation-name: heartbeat;
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}


/**{
    margin: 0;
    padding: 0;
    */


/* 防止點擊閃爍 */


/*
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    */


/* 縮放網頁，文字大小不變 */


/*
    -webkit-text-size-adjust:none;
}
h1{
    font-size: 16px;
}
h2{
    font-size: 14px;
}*/

.slide {
    position: relative;
    /*max-width: 320px;*/
    overflow: hidden;
    /*margin: 10px auto;*/
    width: 100%;
    height: 100%;
    text-align: center;
}

.slide:after {
    content: '';
    display: block;
    width: 100%;
    padding-top: 50%;
}

.slide ul {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.slide li {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 160px;
}

.slide li img {
    /*position: absolute;*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.slide .dot {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 0;
    /*margin-top: -30px;*/
}

.slide .dot span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 3px;
    /*border: 1px solid #fff;*/
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
    /*box-shadow: 0 0 2px 1px;*/
}

.slide .dot .cur {
    /*background-color: #fff;*/
    opacity: 0.999;
}


/*提示豎屏*/

.layertip {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000;
    z-index: 9999;
}

.layercontent {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center;
}

.layertip i {
    width: 73px;
    height: 128px;
    background: url(http://p2.img.cctvpic.com/photoAlbum/templet/common/DEPA1424933607444705/bgiphone.png) left center no-repeat scroll;
    background-size: 100% auto;
    display: inline-block;
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.layertip .txttip {
    margin-top: 20px;
    font-size: 15px;
    color: #1daae8;
}

@-webkit-keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }
    60% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

@keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }
    60% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}


/**
 * 左右擺動 20160225 zyy
 */

@-webkit-keyframes skewDong {
    0% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
    33% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    67% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    100% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotateZ(0, 0, 1, 0deg)
    }
}

@keyframes skewDong {
    0% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
    33% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    67% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    100% {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotateZ(0, 0, 1, 0deg)
    }
}

.skewDong {
    -webkit-animation-name: skewDong;
    animation-name: skewDong;
}


/**
 * 移入效果 20160225 zyy
 */


/*移入對角線效果開始*/


/*從左上往右下移動*/

@-webkit-keyframes fadeInRightBottom {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRightBottom {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRightBottom {
    -webkit-animation-name: fadeInRightBottom;
    animation-name: fadeInRightBottom
}


/*從右上往左下移動*/

@-webkit-keyframes fadeInLeftBottom {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, -0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeftBottom {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, -0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeftBottom {
    -webkit-animation-name: fadeInLeftBottom;
    animation-name: fadeInLeftBottom
}


/*從右下往左上移動*/

@-webkit-keyframes fadeInLeftTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, -0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeftTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, -0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeftTop {
    -webkit-animation-name: fadeInLeftTop;
    animation-name: fadeInLeftTop
}


/*從左下往右上移動*/

@-webkit-keyframes fadeInRightTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, -0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRightTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, -0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRightTop {
    -webkit-animation-name: fadeInRightTop;
    animation-name: fadeInRightTop
}


/*移入對角線效果結束*/


/*彈入對角線效果開始*/


/*從左上到右下*/

@-webkit-keyframes bounceInRightBottom {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, -3000px, 0);
        transform: translate3d(-3000px, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 25px, 0);
        transform: translate3d(25px, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, -10px, 0);
        transform: translate3d(-10px, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 5px, 0);
        transform: translate3d(5px, 5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInRightBottom {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, -3000px, 0);
        transform: translate3d(-3000px, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 25px, 0);
        transform: translate3d(25px, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, -10px, 0);
        transform: translate3d(-10px, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 5px, 0);
        transform: translate3d(5px, 5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInRightBottom {
    -webkit-animation-name: bounceInRightBottom;
    animation-name: bounceInRightBottom
}


/*從右上到左下*/

@-webkit-keyframes bounceInLeftBottom {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, -3000px, 0);
        transform: translate3d(3000px, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 25px, 0);
        transform: translate3d(-25px, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, -10px, 0);
        transform: translate3d(10px, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 5px, 0);
        transform: translate3d(-5px, 5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeftBottom {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, -3000px, 0);
        transform: translate3d(3000px, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 25px, 0);
        transform: translate3d(-25px, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, -10px, 0);
        transform: translate3d(10px, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 5px, 0);
        transform: translate3d(-5px, 5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInLeftBottom {
    -webkit-animation-name: bounceInLeftBottom;
    animation-name: bounceInLeftBottom
}


/*從右下到左上*/

@-webkit-keyframes bounceInLeftTop {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 3000px, 0);
        transform: translate3d(3000px, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, -25px, 0);
        transform: translate3d(-25px, -25px, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 10px, 0);
        transform: translate3d(10px, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, -5px, 0);
        transform: translate3d(-5px, -5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeftTop {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 3000px, 0);
        transform: translate3d(3000px, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, -25px, 0);
        transform: translate3d(-25px, -25px, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 10px, 0);
        transform: translate3d(10px, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, -5px, 0);
        transform: translate3d(-5px, -5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInLeftTop {
    -webkit-animation-name: bounceInLeftTop;
    animation-name: bounceInLeftTop
}


/*從左下到右上*/

@-webkit-keyframes bounceInRightTop {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 3000px, 0);
        transform: translate3d(-3000px, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, -25px, 0);
        transform: translate3d(25px, -25px, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 10px, 0);
        transform: translate3d(-10px, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, -5px, 0);
        transform: translate3d(5px, -5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInRightTop {
    0%,
    60%,
    75%,
    90%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
        transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 3000px, 0);
        transform: translate3d(-3000px, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, -25px, 0);
        transform: translate3d(25px, -25px, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 10px, 0);
        transform: translate3d(-10px, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, -5px, 0);
        transform: translate3d(5px, -5px, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInRightTop {
    -webkit-animation-name: bounceInRightTop;
    animation-name: bounceInRightTop
}

/*彈入對角線 end*/

/*video start 2016-3-17*/
.nr .wsite-shipin{width:222px;height:220px}
.btn-main{padding:10px 20px;text-align:center;font-size:12px;line-height:15px;color:#fff;height:35px;cursor:pointer;width:100px;display:inline-block;background-color:#08a1ef}.btn-main:hover{color:#fff}.btn-main:hover{background-color:#82c924}
.nr .edit_area>li .editable-shipin{padding: 0px 5%}.nr .edit_area>li .editable-shipin h6{color:#f6f6f6;font-size: 12px;line-height: 200%;}.nr .edit_area>li .editable-shipin .inputYi{border:1px solid #ccc;width: 100%;height:30px;border-radius: 3px;background:#f9f9f9;color:#404449;font-family: "Microsoft YaHei";font-size: 12px;}.nr .edit_area>li .editable-shipin textarea{border:1px solid #ccc;width: 100%;height:60px;padding:4px 0px;background:#f9f9f9;border-radius: 3px;color:#404449;font-family: "Microsoft YaHei";font-size: 12px;}.nr .edit_area>li .editable-shipin #upload_btn1,#upload_btn2{border:none;margin-top: 10px;position: relative;overflow: hidden;cursor: pointer;width:100%;border-radius: 3px;}.nr .edit_area>li .editable-shipin  #upload_btn1 input{cursor: pointer;width:100%;height: 100%;opacity: 0;position: absolute;left: 0;top: 0;}.nr .edit_area>li .editable-shipin  #upload_btn2 input{cursor: pointer;width:100%;height: 100%;opacity: 0;position: absolute;left: 0;top: 0;}.nr .edit_area>li .editable-shipin button{width:100%;margin-top: 10px;}
/*video end 2016-3-17*/

/*愛西柚上傳後 滾動等待的動畫 edit by zyy 20180329*/
.allSceneGray{width:100%;height:100%;position:absolute;left:0;top:0;z-index: 999;background: rgba(0,0,0,0.35);}
.spinner{position:absolute;top:50%;left:50%;display:block;margin-left:-20px;margin-top: -20px;width:1px;height:1px;border:20px solid rgba(8,161,239,1);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}
/* 之前的 .allSceneGray{width:100%;height:100%;position:absolute;left:0;top:0;z-index: 999;background: rgba(0,0,0,0.35);}
.spinner{position:absolute;top:43%;left:45%;display:block;width:1px;height:1px;border:20px solid rgba(8,161,239,1);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite} */
@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg)scale(1)}50%{-webkit-transform:rotate(720deg)scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg)scale(1)}50%{-moz-transform:rotate(720deg)scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg)scale(1)}50%{-o-transform:rotate(720deg)scale(0.6)}}
@keyframes spin{0%,100%{transform:rotate(0deg)scale(1)}50%{transform:rotate(720deg)scale(0.6)};}
.closeBtn{width: 30px;height:30px;background:url(/css/images/bg_07.png) no-repeat  center center;display: block;position: absolute;background-size: cover;right:10%;bottom: 5%;}