/* Css Reset */
html {color:#333; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;}
body {width: 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;}
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:12px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "STHeiti", "\5B8B\4F53", sans-serif, tahoma, arial;}
input, select, textarea {font-size:100%;}
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, li {list-style:none;}
caption, th {text-align:left;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:500;}
q:before, q:after {content:'';}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
a {color:#333;}
a:hover {color:#000; text-decoration:none;}
ins, a {text-decoration:none;}
.fn-clear:after, .clear:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.fn-clear, .clear {zoom:1; /* for IE6 IE7 */}
.fn-hide {display:none;}
.fn-left, .fn-right {display:inline;}
.fn-left {float:left;}
.fn-right {float:right;}
.vh {visibility: hidden;}
/* CSS 特效 */

/* 从下往上缓冲显示 */
@-webkit-keyframes bottomFadeIn{
    0%{opacity:0;   -webkit-transform:translateY(10px);}
    100%{opacity:1; -webkit-transform:translateY(0);}
}

@-moz-keyframes bottomFadeIn{
    0%{opacity:0;   -moz-transform:translateY(10px);}
    100%{opacity:1; -moz-transform:translateY(0);}
}

@keyframes bottomFadeIn{
    0%{opacity:0;   transform:translateY(10px);}
    100%{opacity:1; transform:translateY(0);}
}

/* 从上往下缓冲显示 */
@-webkit-keyframes topFadeIn{
    0%{opacity:0;   -webkit-transform:translateY(-10px);}
    100%{opacity:1; -webkit-transform:translateY(0);}
}

@-moz-keyframes topFadeIn{
    0%{opacity:0;   -moz-transform:translateY(-10px);}
    100%{opacity:1; -moz-transform:translateY(0);}
}

@keyframes topFadeIn{
    0%{opacity:0;   transform:translateY(-10px);}
    100%{opacity:1; transform:translateY(0);}
}

/* 从左往右缓冲显示 */
@-webkit-keyframes leftFadeIn{
    0%{opacity:0;   -webkit-transform:translateX(-10px);}
    100%{opacity:1; -webkit-transform:translateY(0);}
}

@-moz-keyframes leftFadeIn{
    0%{opacity:0;   -moz-transform:translateX(-10px);}
    100%{opacity:1; -moz-transform:translateY(0);}
}

@keyframes leftFadeIn{
    0%{opacity:0;   transform:translateX(-10px);}
    100%{opacity:1; transform:translateY(0);}
}

/* 从右往左缓冲显示 */
@-webkit-keyframes rightFadeIn{
    0%{opacity:0;   -webkit-transform:translateX(10px);}
    100%{opacity:1; -webkit-transform:translateY(0);}
}

@-moz-keyframes rightFadeIn{
    0%{opacity:0;   -moz-transform:translateX(10px);}
    100%{opacity:1; -moz-transform:translateY(0);}
}

@keyframes rightFadeIn{
    0%{opacity:0;   transform:translateX(10px);}
    100%{opacity:1; transform:translateY(0);}
}

/* 膨胀后变正常尺寸 */
@-webkit-keyframes popup{
    0%{-webkit-transform:scale(0);}
    60%{-webkit-transform:scale(1.1);}
    100%{-webkit-transform:scale(1);}
}

@-moz-keyframes popup{
    0%{-moz-transform:scale(0);}
    60%{-moz-transform:scale(1.1);}
    100%{-moz-transform:scale(1);}
}

@keyframes popup{
    0%{transform:scale(0);}
    60%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

/* X轴翻动 */
@keyframes flipInX{
    0%{transform:perspective(400px) rotateX(90deg); opacity:0}
    40%{transform:perspective(400px) rotateX(-10deg)}
    70%{transform:perspective(400px) rotateX(10deg)}
    100%{transform:perspective(400px) rotateX(0deg); opacity:1}
}
@-webkit-keyframes flipInX{
    0%{-webkit-transform:perspective(400px) rotateX(90deg); opacity:0}
    40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateX(10deg)}
    100%{-webkit-transform:perspective(400px) rotateX(0deg); opacity:1}
}
@-moz-keyframes flipInX{
    0%{-moz-transform:perspective(400px) rotateX(90deg); opacity:0}
    40%{-moz-transform:perspective(400px) rotateX(-10deg)}
    70%{-moz-transform:perspective(400px) rotateX(10deg)}
    100%{-moz-transform:perspective(400px) rotateX(0deg); opacity:1}
}

/* Y轴翻动 */
@keyframes flipInY{
    0%{transform:perspective(400px) rotateY(90deg); opacity:0}
    40%{transform:perspective(400px) rotateY(-10deg)}
    70%{transform:perspective(400px) rotateY(10deg)}
    100%{transform:perspective(400px) rotateY(0deg); opacity:1}
}
@-webkit-keyframes flipInY{
    0%{-webkit-transform:perspective(400px) rotateY(90deg); opacity:0}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateY(10deg)}
    100%{-webkit-transform:perspective(400px) rotateY(0deg); opacity:1}
}
@-moz-keyframes flipInY{
    0%{-moz-transform:perspective(400px) rotateY(90deg); opacity:0}
    40%{-moz-transform:perspective(400px) rotateY(-10deg)}
    70%{-moz-transform:perspective(400px) rotateY(10deg)}
    100%{-moz-transform:perspective(400px) rotateY(0deg); opacity:1}
}