body{
    padding: 0;
    margin: 0;
    font-family: segoe ui;
    line-height: 1em;
    min-width: 1024px;
    max-width: 1920px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff url(../images/bg.jpg) no-repeat top left;
    background-size: 100%;
    overflow-x:hidden;
}

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.085);
}


/*reset animation*/
[data-animate]{
	opacity:0;
}

.animated{
	opacity:1 !important;
}

.container{
    width: 972px;
    margin: 0 auto;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}