@charset "utf-8";

/*基本*/
* {
    padding: 0;
    margin: 0;
    font-size: 0.24rem;
}

body {
    color: #666;
    padding: 0;
    margin: 0 auto;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: Arial, Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;
    max-width: 750px;
    /* text-transform: capitalize; */
}

body:before,
body:after {
    content: "";
    width: 100%;
    display: block;
}

body:before,
body:before {
    height: 0;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    color: #666;
}

img {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: 100%;
}

p {
    margin: 0;
}

b,
strong {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    /* Remove most spacing between table cells.*/
}

li {
    list-style: none outside none;
}

/*链接*/
a {
    text-decoration: none;
    color: #333;
    background: transparent;
    outline: none;
}

a:focus {
    outline: none;
}

a:hover,
a:active {
    color: #333;
    outline: none;
}

/*清除浮动*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/*表单*/
form {
    margin: 0;
}

button,
input,
select,
textarea {
    font-size: 100%;
    /* Correct font size not being inherited in all browsers. */
    margin: 0;
    /* Address margins set differently in IE 6/7, Firefox 3+, Safari 5,and Chrome */
    vertical-align: baseline;
    /* Improve appearance and consistency in all browsers */
    *vertical-align: middle;
    /* Improve appearance and consistency in all browsers */
}

button,
select {
    text-transform: none;
}

/*其它*/
blockquote {
    margin: 1em 40px;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

code,
kbd,
pre,
samp {
    font-size: 1em;
}

pre {
    margin: 1em 0;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    /* Prevent `sub` and `sup` affecting `line-height` in all browsers.*/
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

dl {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 0px;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

a:hover {
    color: #DB261D;
}

a:visited,
a:link,
a:active {
    color: #333;
}

/*----------@@HTML默认 结束@@----------*/
/*----------@@通用 开始@@----------*/
/*清除浮动*/
.clear {
    display: block;
    clear: both;
}

.fl {
    float: left
}

.fr {
    float: right
}

.left {
    float: left
}

.right {
    float: right;
}

.animated {
    -webkit-animation: 1s ease;
    -moz-animation: 1s ease;
    -ms-animation: 1s ease;
    -o-animation: 1s ease;
    animation: 1s ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-ms-keyframes fadeInUp {
    0% {
        opacity: 0;
        -ms-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.route1,
.route2,
.route3,
.route4,
.route5,
.route6 {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

.route1 {
    -webkit-transition: -webkit-transform 0.3s ease-out 0s;
    -moz-transition: -moz-transform 0.3s ease-out 0s;
    -o-transition: -o-transform 0.3s ease-out 0s;
    -ms-transition: -ms-transform 0.3s ease-out 0s;
    transition: transform 0.3s ease-out 0s;
}

.route2 {
    -webkit-transition: -webkit-transform 0.3s ease-out 0.3s;
    -moz-transition: -moz-transform 0.3s ease-out 0.3s;
    -o-transition: -o-transform 0.3s ease-out 0.3s;
    -ms-transition: -ms-transform 0.3s ease-out 0.3s;
    transition: transform 0.3s ease-out 0.3s;
}

.route3 {
    -webkit-transition: -webkit-transform 0.3s ease-out 0.6s;
    -moz-transition: -moz-transform 0.3s ease-out 0.6s;
    -o-transition: -o-transform 0.3s ease-out 0.6s;
    -ms-transition: -ms-transform 0.3s ease-out 0.6s;
    transition: transform 0.3s ease-out 0.6s;
}

.route4 {
    -webkit-transition: -webkit-transform 0.3s ease-out 0.9s;
    -moz-transition: -moz-transform 0.3s ease-out 0.9s;
    -o-transition: -o-transform 0.3s ease-out 0.9s;
    -ms-transition: -ms-transform 0.3s ease-out 0.9s;
    transition: transform 0.3s ease-out 0.9s;
}

.route5 {
    -webkit-transition: -webkit-transform 0.3s ease-out 1.2s;
    -moz-transition: -moz-transform 0.3s ease-out 1.2s;
    -o-transition: -o-transform 0.3s ease-out 1.2s;
    -ms-transition: -ms-transform 0.3s ease-out 1.2s;
    transition: transform 0.3s ease-out 1.2s;
}

.route6 {
    -webkit-transition: -webkit-transform 0.3s ease-out 1.5s;
    -moz-transition: -moz-transform 0.3s ease-out 1.5s;
    -o-transition: -o-transform 0.3s ease-out 1.5s;
    -ms-transition: -ms-transform 0.3s ease-out 1.5s;
    transition: transform 0.3s ease-out 1.5s;
}

.route {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.ico {
    background: url("../images/icon.png") no-repeat;
    background-size: 5rem auto;
    vertical-align: middle;
    display: block;
}

.icobef:before,
.icobef:after {
    content: "\20";
    display: inline-block;
}

.icobef:before {
    background: url(../images/icon.png) no-repeat;
    background-size: 5rem auto;
    vertical-align: middle;
}


/*****通用*****/
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes mousemove {
    0% {
        transform: translateY(-5px);
    }

    25% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(5px);
    }

    75% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-5px);
    }
}

@media only screen and (min-width: 751px) {
    html {
        font-size: 100px;
    }
}

@media only screen and (max-width: 750px) {
    html {
        font-size: 100px;
    }
}

@media only screen and (max-width: 640px) {
    html {
        font-size: 85.3333px;
    }
}

@media only screen and (max-width: 540px) {
    html {
        font-size: 72px;
    }
}

@media only screen and (max-width: 480px) {
    html {
        font-size: 64px;
    }
}

@media only screen and (max-width: 414px) {
    html {
        font-size: 55.2px;
    }
}

@media only screen and (max-width: 400px) {
    html {
        font-size: 53.3333px;
    }
}

@media only screen and (max-width: 375px) {
    html {
        font-size: 50px;
    }
}

@media only screen and (max-width: 360px) {
    html {
        font-size: 48px;
    }
}

@media only screen and (max-width: 320px) {
    html {
        font-size: 42.6666px;
    }
}

/*# sourceMappingURL=style.css.map */