@charset "utf-8";

/* 
 *@Project: 样式重设及公共样式表
 */

html {
    color: #7a7a7a;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
}

div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
textarea {
    table-layout: fixed;
    word-break: break-all;
}

i {
    font-style: normal;
}

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

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

body,
button,
input,
select,
textarea {
    font: 14px/1.5 Microsoft Yahei, tahoma, arial, sans-serif;
}

    body a {
        color: #ababab;
        outline: none;
        blr: expression(this.onFocus=this.blur())\9;
    }

input,
select,
textarea,
button {
    font-size: 100%;
    outline: none;
}

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

th {
    text-align: inherit;
}

fieldset,
img {
    border: 0;
}

iframe {
    display: block;
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

del {
    text-decoration: line-through;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: 500;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    line-height: 0
}

a:hover {
    text-decoration: none;
}

ins,
a {
    text-decoration: none;
}

body {
    width: 100%;
    height: 100%;
    /*min-width: 1200px;*/
    background-color: #FFFFFF;
}

html,
body {
    min-width: 1200px;
    margin: 0 auto;
}

.water {
    min-width: 1200px;
}

.bgs {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(../img/index.jpg) no-repeat center center;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    z-index: -1;
    display: none;
    min-width: 1200px;
}

.water ul li {
    width: 100%;
    height: auto;
    position: fixed;
    min-width: 1200px;
}

    .water ul li img {
        display: block;
        margin: 0 auto;
    }

.log ul li:nth-child(8) {
    bottom: 340px;
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    text-align: center;
    color: #91471b;
}

.log ul li:nth-child(7) {
    bottom: 398px;
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    text-align: center;
    color: #91471b;
}

.log ul li:nth-child(8) a {
    font-size: 16px;
    border-radius: 30px;
    color: #ff0000;
    width: 114px;
    height: 36px;
    margin: 0px 10px;
    display: inline-block;
    text-align: center;
    line-height: 36px;
}

    .log ul li:nth-child(8) a.active,
    .log ul li:nth-child(8) a:hover {
        background: rgba(255, 0, 0, 0.8);
        color: #ffffff;
    }

.log ul li:nth-child(6) {
    bottom: 490px;
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.log ul li:nth-child(5) {
    bottom: 530px;
    z-index: 99;
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.log ul li:nth-child(4) {
    bottom: 575px;
    z-index: 99;
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.log ul li:nth-child(3) {
    bottom: 645px;
    left: -8px;
    z-index: 99;
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.log ul li:nth-child(2) {
    bottom: 650px;
    z-index: 99;
    left: -4px;
    opacity: 0;
}

.left_top {
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.right_top {
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.log ul li:nth-child(1) {
    bottom: 750px;
    z-index: 99;
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

    .log ul li:nth-child(1) img {
        position: relative;
        left: 75px
    }

.log ul li:last-child div {
    width: 250px;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    margin: 0 auto;
    transform: scale(1.1);
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.btn ul li a {
    display: inline-block;
    width: 170px;
    height: 45px;
    border-radius: 25px;
    margin: 0 auto;
    text-align: center;
    line-height: 45px;
    text-decoration: none;
    color: #FFFFFF;
}

.btn ul li {
    bottom: 280px;
}

    .btn ul li div {
        width: 400px;
        margin: 0 auto;
    }

    .btn ul li a:first-child {
        background-color: #e62129;
    }

    .btn ul li a:last-child {
        background-color: #f6831c;
        margin-left: 55px;
    }

.btn ul li {
    opacity: 0;
    -webkit-animation: Fadeio 1.1s ease-out;
    -moz-animation: Fadeio 1.1s ease-out;
    -o-animation: Fadeio 1.1s ease-out;
    animation: Fadeio 1.1s ease-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}


/*.bot ul li {
	-webkit-animation: Appear 2s ease-out;
	-moz-animation: Appear 2s ease-out;
	-o-animation: Appear 2s ease-out;
	animation: Appear 2s ease-out;
	animation-delay: 10s;
	-webkit-animation-delay: 10s;
	-moz-animation-delay: 10s;
	-o-animation-delay: 10s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-0-animation-fill-mode: forwards;
}*/

.bot ul li:first-child img {
    opacity: 0;
    -webkit-animation: left_show1 1.1s ease-out;
    -moz-animation: left_show1 1.1s ease-out;
    -o-animation: left_show1 1.1s ease-out;
    animation: left_show1 1.1s ease-out;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.bot ul li:last-child img {
    opacity: 0;
    -webkit-animation: left_show1 1.1s ease-out;
    -moz-animation: left_show1 1.1s ease-out;
    -o-animation: left_show1 1.1s ease-out;
    animation: left_show1 1.1s ease-out;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.bot ul li:first-child {
    top: 70px;
    /*opacity: 0;*/
}

    .bot ul li:first-child img {
        margin-right: 50px;
        /*opacity: 0;*/
    }

.bot ul li:last-child {
    top: 70px;
    /*opacity: 0;*/
}

    .bot ul li:last-child img {
        margin-right: 100px;
        /* opacity: 0;*/
    }


/*按钮动画*/


/*left-top*/


/*
@keyframes left_top {
    from {
        transform: translate(-50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}

@-moz-keyframes left_top {
    from {
        transform: translate(-50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}

@-ms-keyframes left_top {
    from {
        transform: translate(-50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}

@-webkit-keyframes left_top {
    from {
        transform: translate(-50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}*/


/*right_top*/


/*
@keyframes right_top {
    from {
        transform: translate(50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}

@-moz-keyframes right_top {
    from {
        transform: translate(50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}

@-ms-keyframes right_top {
    from {
        transform: translate(50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}

@-webkit-keyframes right_top {
    from {
        transform: translate(50px,50px);
        opacity: 0;
    }

    to {
        transform: translate(0px,0px);
        opacity: 1;
    }
}

*/


/*淡入淡出*/

@keyframes Fadeio {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes Fadeio {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-ms-keyframes Fadeio {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes Fadeio {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes Fadeio {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/*下落动画*/


/*
@keyframes imgdown {
    0% {
        opacity: 0;
        transform: translate3d(0px, -500px, 0px);
    }

    60%, 80% {
        transform: translate3d(0px, 0px, 0px)
    }

    70%, 90% {
        transform: translate3d(0px, 5px, 0px)
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px)
    }
}

@-moz-keyframes imgdown {
    0% {
        opacity: 0;
        transform: translate3d(0px, -500px, 0px);
    }

    60%, 80% {
        transform: translate3d(0px, 0px, 0px)
    }

    70%, 90% {
        transform: translate3d(0px, 5px, 0px)
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px)
    }
}

@-ms-keyframes imgdown {
    0% {
        opacity: 0;
        transform: translate3d(0px, -500px, 0px);
    }

    60%, 80% {
        transform: translate3d(0px, 0px, 0px)
    }

    70%, 90% {
        transform: translate3d(0px, 5px, 0px)
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px)
    }
}

@-webkit-keyframes imgdown {
    0% {
        opacity: 0;
        transform: translate3d(0px, -500px, 0px);
    }

    60%, 80% {
        transform: translate3d(0px, 0px, 0px)
    }

    70%, 90% {
        transform: translate3d(0px, 5px, 0px)
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px)
    }
}

@-moz-keyframes imgdown {
    0% {
        opacity: 0;
        transform: translate3d(0px, -500px, 0px);
    }

    60%, 80% {
        transform: translate3d(0px, 0px, 0px)
    }

    70%, 90% {
        transform: translate3d(0px, 5px, 0px)
    }

    100% {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px)
    }
}*/


/*上浮动画1*/


/*
@keyframes imgup {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
    }
}

@-moz-keyframes imgup {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
    }
}

@-ms-keyframes imgup {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
    }
}

@-webkit-keyframes imgup {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
    }
}

@-o-keyframes imgup {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
    }
}
*/


/*上浮动画2*/


/*
@keyframes imgup1 {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(5px);
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -o-transform: translateY(5px);
    }
}

@-moz-keyframes name {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(5px);
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -o-transform: translateY(5px);
    }
}

@-ms-keyframes name {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(5px);
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -o-transform: translateY(5px);
    }
}

@-webkit-keyframes name {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(5px);
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -o-transform: translateY(5px);
    }
}

@-o-keyframes name {
    from {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(5px);
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -o-transform: translateY(5px);
    }
}
*/


/*底部动画效果*/


/*
@keyframes Appear {
    0% {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    100% {
        opacity: 1;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }
}

@-moz-keyframes Appear {
    0% {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    100% {
        opacity: 1;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }
}

@-ms-keyframes Appear {
    0% {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    100% {
        opacity: 1;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }
}

@-webkit-keyframes Appear {
    0% {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    100% {
        opacity: 1;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }
}

@-o-keyframes Appear {
    0% {
        opacity: 0;
        transform: translateY(25px);
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -o-transform: translateY(25px);
    }

    100% {
        opacity: 1;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -o-transform: translateY(-5px);
    }
}*/


/*缩小*/


/*
@keyframes mini {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(0.95);
    }
}

@-moz-keyframes mini {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(0.95);
    }
}

@-webkit-keyframes mini {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(0.95);
    }
}

@-ms-keyframes mini {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(0.95);
    }
}

@-o-keyframes mini {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        transform: scale(0.95);
    }
}
*/


/*媒体查询*/

@media screen and (min-width: 0px) and (max-width:1460px) {
    .log ul li:nth-child(1) {
        bottom: 445px;
    }

    .log ul li:nth-child(2) {
        bottom: 430px;
    }

    .log ul li:nth-child(3) {
        bottom: 426px;
    }

    .log ul li:nth-child(4) {
        bottom: 355px;
        left: -10px;
    }

    .log ul li:nth-child(5) {
        bottom: 314px;
    }

    .log ul li:nth-child(6) {
        bottom: 270px;
    }

    .log ul li:nth-child(7) {
        bottom: 170px;
    }

    .log ul li:nth-child(8) {
        bottom: 120px;
    }

    .bot ul li:first-child {
        top: 15px;
    }

        .bot ul li:first-child img {
            margin-right: 30px;
        }
}

@keyframes left_show1 {
    from {
        opacity: 0;
        transform: translateX(530px);
        -webkit-transform: translateX(530px);
        -moz-transform: translateX(530px);
        -ms-transform: translateX(530px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
        -ms-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
    }
}

@keyframes left_show2 {
    from {
        opacity: 0;
        transform: translateX(360px);
        -webkit-transform: translateX(360px);
        -moz-transform: translateX(360px);
        -ms-transform: translateX(360px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
        -ms-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
    }
}

.brand2 {
    width: auto;
    position: fixed;
    bottom: 5%;
    right: 2%;
    -webkit-animation: left_show1 2s ease-out;
    -moz-animation: left_show1 2s ease-out;
    -o-animation: left_show1 2s ease-out;
    animation: left_show1 2s ease-out;
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    opacity: 0;
}

    .brand2 > img {
        position: absolute;
        right: -16px;
        top: 32px;
    }