@charset "utf-8";

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

input,
select,
textarea {
    font-size: 100%
}

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

fieldset,
img {
    border: 0
}

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

li,
ol,
ul {
    list-style: none
}

em,
i {
    font-style: normal
}

img {
    border: 0;
    max-width: 100%
}

img,
input {
    vertical-align: middle
}

a:focus,
input:focus {
    outline: 0
}

a {
    color: #353d44;
    text-decoration: none
}

a:active {
    opacity: .7
}

* {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: none;
    overflow-y: scroll;
    display: block;
    overflow: hidden;
    height: 100%;
    background: url(../images/mt-sample-background.jpg) center center no-repeat;
    background-size: cover;
}

body {
    min-width: 320px;
    line-height: 1.5;
    color: #353535;
    font-family: "microsoft yahei", "黑体", "宋体", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    max-width: 680px;
    overflow: hidden;
    margin: 0px auto;
}

.content {
    display: block;
    overflow: hidden;
    width: 95%;
    height: 1rem;
    color: #ecf0f1;
    font-size: .5rem;
    line-height: 1rem;
    margin: 8px auto;
}

.visible {
    position: relative;
    overflow: hidden;
    padding-right: .5rem;
    padding-left: .5rem;
    height: 1rem;
    line-height: 1rem;
}

.visible:before {
    left: 0;
    content: '[';
    line-height: 1rem;
    position: absolute;
}

.visible:after {
    position: absolute;
    right: 0;
    content: ']';
    line-height: 1rem;
}

.visible:after,
.visible:before {
    position: absolute;
    top: 0;
    color: #FFF;
    font-size: .5rem;
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: opacity;
    animation-name: opacity;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.visible ul {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
    text-align: left;
    animation: change 12s infinite;
    -webkit-animation: change 12s infinite;
    -moz-animation: change 12s infinite;
    -o-animation: change 12s infinite;
}

.visible ul li {
    margin: 0;
    font-size: .45rem;
    line-height: 1rem;
    text-align: center;
}

.hit-the-floor {
    margin-top: 40%;
    color: #fff;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
}

.txt {
    margin: 15px auto 7px;
    display: block;
    padding: .5em 0 .5em;
    text-align: center;
    text-shadow: 0 0 80px rgba(255, 255, 255, .5);
    letter-spacing: 0;
    font-weight: 700;
    font-size: .5rem;
    background: url("images/animated_text_fill.png") repeat-y;
    -webkit-animation: aitf 80s linear infinite;
    -webkit-backface-visibility: hidden;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
}

@keyframes aitf {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@-webkit-keyframes aitf {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@-moz-keyframes aitf {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@-o-keyframes aitf {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.info {
    color: #ff0;
    text-align: center;
}

.test {
    text-align: center;
    color: #fff;
    font-size: .4rem;
    margin-top: 20px;
}

.test a {
    display: block;
    margin-top: 10px;
}

.test a:link,
.test a:visited,
.test a:hover {
    color: #fff;
}


@-webkit-keyframes opacity {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes opacity {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes change {

    0%,
    100%,
    12% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    17%,
    29% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    34%,
    46% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    51%,
    63% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%);
    }

    68%,
    80% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    85%,
    97% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }
}

@-webkit-keyframes change {

    0%,
    100%,
    12% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    17%,
    29% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    34%,
    46% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    51%,
    63% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%);
    }

    68%,
    80% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    85%,
    97% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }
}

@-moz-keyframes change {

    0%,
    100%,
    12% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    17%,
    29% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    34%,
    46% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    51%,
    63% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%);
    }

    68%,
    80% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    85%,
    97% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }
}

@-o-keyframes change {

    0%,
    100%,
    12% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    17%,
    29% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    34%,
    46% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    51%,
    63% {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%);
    }

    68%,
    80% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    85%,
    97% {
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }
}



html {
    font-size: 50px
}

body {
    font-size: 24px
}

@media screen and (min-width:320px) {

    html,
    body {
        font-size: 26px
    }
}

@media screen and (min-width:360px) {

    html,
    body {
        font-size: 26px
    }
}

@media screen and (min-width:375px) {

    html,
    body {
        font-size: 30px
    }
}

@media screen and (min-width:384px) {

    html,
    body {
        font-size: 30px
    }
}

@media screen and (min-width:400px) {

    html,
    body {
        font-size: 30px
    }
}

@media screen and (min-width:414px) {

    html,
    body {
        font-size: 30px
    }
}

@media screen and (min-width:424px) {

    html,
    body {
        font-size: 30px
    }
}

@media screen and (min-width:480px) {

    html,
    body {
        font-size: 30px
    }
}

@media screen and (min-width:540px) {

    html,
    body {
        font-size: 30px
    }
}

@media screen and (min-width:720px) {

    html,
    body {
        font-size: 48px
    }
}

@media screen and (min-width:750px) {

    html,
    body {
        font-size: 50px
    }
}
.letter{
    max-width: 800px;
    padding: 0 20px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 16px;
}
.letter h3{
    color: #fff;
    font-size: 16px;
    padding-bottom: 10px;
    font-weight: normal;
}
.letter p{padding: 6px 0;text-indent: 2em;color: #fff;}
.sign{padding: 6px 0;text-align: right;}
.hitlogo{margin: 0 auto;text-align: center;padding: 20px 0;box-sizing: border-box;}
.hitlogo h1{font-size: 32px;color: #fff;font-weight: 300;}
.hitconter{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 100%;}
.hitconter h2{font-size: 45px;color: #fff;font-weight: 500;line-height: 45px;}
.hitconter p{font-size: 14px;color: #fff;font-weight: 200;margin-top: 20px;}
.hitbut{position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);}
.hitbut p{font-size: 16px;color: #fff;text-align: center;}
.hitbut p a{color: #fff;}
@media screen and (max-width: 1024px) {
    .hitconter h2{font-size: 32px;}
}
@media screen and (max-width: 568px) {
    .hitconter h2{font-size: 24px;line-height: 24px;}
}