/*
CSS Reset
*/

/** 清除内外边距 **/
body, div, p, h1, h2, h3, h4, h5, h6, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
table, th, td /* table elements 表格元素 */
{
    margin: 0;
    padding: 0;
}

body, button, input, select, textarea {
    font: 12px/1.5 "Microsoft Yahei", arial, "宋体", sans-serif;
}

body{
    overflow:hidden;
}

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

address, cite, em, i {
    font-style: normal;
}

/* 将斜体扶正 */
small {
    font-size: 12px;
}

/* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
li {
    list-style: none;
}

/** 重置文本格式元素 **/
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/** 重置表单元素 **/
legend {
    color: #000;
}

/* for ie6 */
fieldset, img {
    border: 0;
}

/* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea {
    font-size: 100%;
    line-height: normal;
}

/* 使得表单元素在 ie 下能继承字体大小 */

/** 重置表格元素 **/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

input[type="button"], input[type="submit"], input[type="reset"] {
    cursor: pointer;
}

/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
    display: block;
}

/* 清理浮动 */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    zoom: 1; /* for IE6 IE7 */
}

.fn-hide {
    display: none;
}

body {
    height: 100%;
    margin: 0 auto; /* overflow:hidden; */
    background: #ffe185
}

.wrapper {
    height: 100%;
    width: 100%;
}

.wrapper .item {
    width: 100%;
    height: 100.06%;

    display: none;
    margin: 0 auto;
}

.cover img {
    display: block;
}

.bga {
    background: url(../images/bga.jpg) repeat left top;
    background-size: 100% 100%;
}

.bgb {
    background: url(../images/bgb.jpg) repeat left top;
    background-size: 100% 100%;
}

.bgc {
    background: url(../images/bgc.jpg) repeat center top #5acaed;
    background-size: 100% 100%;
}

div, ul, li {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none outside none;
}

.input {
    display: inline-block;
    width: 70%;
    height: 0.48rem;
    padding: 0.1rem;
    border: 1px solid #CCC;
    border-radius: 3px;
    color: #333;
    outline: none;
    font: 400 14px "Microsoft YaHei";
    box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.075) inset;
    transition: all 0.25s ease;
    padding-left: 0.2rem;
}

.zlone {
    width: 100%;
}

.ainput {
    display: inline-block;
    width: 344px;
    height: 0px;
    padding: 5px;
}

input:focus {
    border-color: rgba(0, 123, 121, 0.8);
    box-shadow: 0 1px 1px rgba(0, 123, 121, 0.075) inset, 0 0 8px rgba(0, 123, 121, 0.6);
}

::-moz-placeholder {
    opacity: 1;
    color: #b8b8b8;
}

::-webkit-input-placeholder {
    color: #b8b8b8;
}

:-ms-input-placeholder {
    color: #b8b8b8;
}

.label {
    position: absolute;
    top: 14px;
    left: 15px;
    color: #C9C9C9;
    cursor: text;
    font: 700 14px "Microsoft YaHei";
    line-height: 14px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

@-webkit-keyframes loading-keyframe {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes loading-keyframe {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.wrapper {
    width: 100%;
    height: 100%;
    background: #ffe185;
}

.load {
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.load .num {
    color: #fff;
    font-size: 0.36rem;
    display: -webkit-box;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 7rem;
}

.bgha {
    position: absolute;
    top: 2rem;
    left: 0rem;
    width: 6.4rem;
}

.apica {
    width: 1.2rem;
    height: 1.2rem;
}

.apicb {
    width: 3.7rem;
    height: 3.5rem;
}

.apicc {
    width: 3.5rem;
    height: 1.8rem;
}

.apicd, .apicda {
    width: 6.4rem;
    height: 2.2rem;
}

.apice {
    width: 2rem;
    height: 1.4rem;
}

.apicf {
    width: 3.3rem;
    height: 0.32rem;
}

.fm01{
    width: 2.8rem;
    height:2.25rem;
}

.fm02{
    width: 6.4rem;
    height:3.75rem;
}

.fm02{
    width: 6.4rem;
    height:1.37rem;
}

.bpica, .bpicb {
    width: 6.4rem;
    height: 8.3rem;
}

.item { /* overflow:hidden; */
}

.bpicc {
    width: 1.5rem;
    height: 1.5rem;
}

.choosea {
    width: 100%;
    height: 0.58rem;
    padding-top: 0.1rem;
}

.choosea li {
    float: left;
    padding: 0.1rem 0.5rem;
    color: #fff;
    font-weight: bold;
    font-size: 0.26rem;
    margin-left: 0.22rem;
    -moz-border-radius: 20px; /* Firefox */
    -webkit-border-radius: 20px; /* Safari 和 Chrome */
    border-radius: 20px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}

.choosea li.ia {
    background: #0099ff;
}

.choosea li.ib {
    background: #ff9933;
}

.choosea li.ic {
    background: #339933;
}

.choosea li.id {
    background: #eb3f3f;
}

.covera {
    position: absolute;
    top: 2.2rem;
    left: 0.2rem;

    width: 96%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}

.covera img {

    width: 5.5rem;
    -moz-box-shadow: 2px 2px 5px #333333;
    -webkit-box-shadow: 2px 2px 5px #333333;
    box-shadow: 2px 2px 5px #333333;
}

.disa {
    position: absolute;
    top: 5.9rem;
    left: 0.2rem;
    width: 96%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}

.disa img.bgd {
    position: absolute;
    top: 0rem;
    left: 0.33rem;

    width: 5.5rem;
    -moz-box-shadow: 2px 2px 5px #333333;
    -webkit-box-shadow: 2px 2px 5px #333333;
    box-shadow: 2px 2px 5px #333333;
}

.disa img.stam {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;

    width: 1.3rem;

}

.disa img.fimga {
    position: absolute;
    top: 1.3rem;
    left: 0.3rem;

    width: 4.5rem;

}

.disa img.ycone {
    position: absolute;
    top: 0.10rem;
    left: 4.8rem;
    width: 1rem;

}

.cmin {
    width: 100%;
    overflow: hidden;
    height: 1.3rem;
    position: relative;
    overflow-x: scroll;
    z-index: 77;
    margin-top: 0.2rem;
}

.ccover {
    width: 60rem;
}

.ccover p {
    float: left;
    width: 1.8rem;
    text-align: center;
}

.ccover p img {
    height: 1.1rem;

}

.stampa {
    width: 60rem;
    display: none;
}

.stampa p {
    float: left;
    width: 1.6rem;
    text-align: center;
}

.stampa p img {
    height: 1rem;

}

.fonta {
    width: 60rem;
    display: none;
}

.fonta p {
    float: left;
    width: 2rem;
    text-align: center;
}

.fonta p img {
    height: 1rem;

}

.scmxp {
    width: 2.4rem;
    height: 0.7rem;
    background: #ff2727;
    text-align: center;
    font-size: 0.28rem;
    color: #fff;
    line-height: 0.7rem;
    margin: 0 auto;
    margin-top: 7.55rem;
    position: relative;
    z-index: 555;
}

.namem {
    width: 5rem;
    height: 2.4rem;
    background: rgba(1, 137, 173, 0.6);
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -2.5rem;
    z-index: 6666;
    display: none;
}

.natop {
    width: 0.8rem;
    position: absolute;
    top: -0.3rem;
    left: 50%;
    margin-left: -0.4rem;
}

.natop img {
    width: 100%;
}

.namin {
    width: 100%;
    height: 2.4rem;
    position: relative;
}

.disam {
    width: 100%;
    height: 4rem;
    position: relative;
    text-align: center;
    margin: 0 auto;
}

.array {
    position: absolute;
    z-index: 999;
    -webkit-animation: tipmove 1.5s infinite ease-in-out;
    animation: tipmove 1.5s infinite ease-in-out;
}

.inputa {
    width: 100%;
    height: 0.6rem;
    text-align: center;
    padding-top: 0.65rem;
}

.butin {
    width: 1.6rem;
    height: 0.52rem;
    text-align: center;
    background: #8d1616;
    font-size: 0.26rem;
    color: #fff;
    line-height: 0.52rem;
    margin: 0 auto;
    margin-top: 0.4rem;
}

@-webkit-keyframes tipmove {
    0% {
        bottom: 10px;
        opacity: 0
    }
    50% {
        bottom: 15px;
        opacity: 1
    }
    100% {
        bottom: 20px;
        opacity: 0
    }
}

@keyframes tipmove {
    0% {
        bottom: 10px;
        opacity: 0
    }
    50% {
        bottom: 15px;
        opacity: 1
    }
    100% {
        bottom: 20px;
        opacity: 0
    }
}

.textbox {
    width: 100%;
    height: 100%;
    font-size: 0.28rem;

    color: #959595;
    caret-color: #c3a575;
}

.textbox {
    color: #c3a575;
    -webkit-appearance: none;
}

.textbox {
    outline: none;
}

.sctpa {
    width: 5.24rem;
    height: 5.26rem;
}

.btn_start {
    opacity: 0;
    width: 1.52rem;
    height: 1.52rem;
}

.anipulse {
    -webkit-animation: pulse 2s infinite both;
    animation: pulse 2s infinite both;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.xxli {
    width: 100%;
    margin-top: 20%;
}

.cewma {
    display: none;
}

.schb {
    width: 100%;
    height: 100%;
    z-index: 99;
    position: absolute;
    left: 0px;
    top: 0px;
}

.namef {
    width: 0.7rem;
    height: 2.5rem;
}

#img {
    background: transparent;
    background-size: 100% 100%;

    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 9999
}

#img img {
    width: 100%;
}

.spica {
    width: 98%;
    text-align: center;
    margin: 0 auto;
}

.spica img {
    width: 100%;
}

.spicg {
    width: 98%;
}

.spicg img {
    width: 100%;
}

.spicb {
    width: 5.3rem;
}

.coverc {
    overflow: hidden;
}

.spicc {
    width: 1.45rem;
}

.yconea {
    width: 1rem;
}

.mfont {
    width: 2.2rem;
    height: 0.76rem;
    font-size: 0.32rem;
    position: absolute;
    top: 7.8rem;
    z-index: 555;
    left: 4.2rem;

    text-align: center;
}

.mfontb {
    width: 1.6rem;
    height: 0.76rem;
    font-size: 0.26rem;
    position: absolute;
    top: 2.3rem;
    z-index: 555;
    left: 4rem;

}

.returna {
    margin: 0 auto;
    margin-top: 0.5rem;
    width: 3.8rem;
    height: 0.8rem;
    background: #ff7800;
    font-size: 0.28rem;
    text-align: center;
    line-height: 0.8rem;
    color: #fff;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.returna a {
    color: #fff;
}

.sharea {
    margin: 0 auto;
    margin-top: 0.3rem;
    width: 3.8rem;
    height: 0.8rem;
    background: #ff7800;
    font-size: 0.28rem;
    text-align: center;
    line-height: 0.8rem;
    color: #fff;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.sharea a {
    color: #fff;
}

.shareb {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    display: none;
}

.shareb img {
    width: 100%;
}

.tipsa {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999
}

.tipsa img {
    width: 100%;
}

.tipsb {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999
}

.tipsb img {
    width: 100%;
}

.tipsc {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999
}

.tipsc img {
    width: 100%;
}

.tipsd {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999
}

.tipsd img {
    width: 100%;
}

.kiname {
    margin: 0 auto;
    width: 5.4rem;
    text-align: center;
    margin-top: 2.2rem;
    line-height: 0.42rem;
    font-size: 0.22rem;
}

.epica {
    width: 3.2rem;
    margin: 0 auto;
    margin-top: 2rem;
}

.container {
    font-size: .2rem;
    width: 100%;
}

.time-record {
    margin-top: 5%;
    text-align: center;
}

.time-record span {
    background-color: #d5d5d5;
    padding: 5px;
    color: #fff;
    /*    font-weight: bold;*/
    border-radius: 2px;
}

.invite-member {
    margin-top: 6%;
    text-align: center;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.invite-member span {
    background-color: #d5d5d5;
    padding: 5px;
    color: #fff;
    line-height: 42px;
    border-radius: 2px;
}

.listen-msg {
    /*margin-top: 5%;*/
    text-align: center;
}

.listen-msg span {
    background-color: #d5d5d5;
    padding: 5px;
    color: #fff;
    border-radius: 2px;
}

.blank-content {
    height: 4%;
}

.talk-record {
    margin-top: 5%;
    position: relative;
}

.head-portrait {
    float: left;
    width: 0.8rem;
    height: 0.8rem;;
    margin-left: 0.1rem;
}

.head-portrait img {
    width: 100%;
}

.record-msg {
    /* border: 1px solid green; */
    margin-left: 65px;
    padding-right: 40px;
    font-size: .2rem;
}

.talk-name {
    padding: 0.5%;
    color: #999;
}

.talk-msg-container {
    position: relative;
}

.hxone {
    height: 1rem;
    width: 100%;
}

.talk-msg {
    margin-top: 0.8%;
    padding: 4%;
    font-size: 0.26rem;
    border-radius: 5px;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    min-height: 0.28rem;
    line-height: 160%;
}

.talk-msg img {
    vertical-align: middle;
}

.triangle {
    position: absolute;
    left: -10px;
    top: 15px;
    z-index: 1;
}

.triangle img {
    width: 10px;
    z-index: 0;
    margin-left: 3px;
}

.talk-voice {
    margin-top: 0.8%;
    padding: 4%;
    font-size: 0.26rem;
    border: 1px solid #d1d1d1;
    background-color: #b0eb5b;
    min-height: 0.26rem;
    border-radius: 5px;
    width: 60%;
}

.talk-voice audio {
    display: none;
}

.voice-time {
    position: absolute;
    left: 72%;
    min-height: 0.26rem;
    top: 1%;
    font-size: 0.26rem;
    padding-top: 4%;
}

.red-point {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #df0b0a;
    border-radius: 4px;
    margin-left: 8px;
}

.upload-img {
    width: 70%;
    z-index: 10;
}

.upload-img img {
    width: 100%;
    border-radius: 5px;
}

.botbg {

    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 30;
    overflow: hidden;
}

.botbg img {

    width: 100%;
}

/*page1 end*/

.container {
    padding-bottom: 1.6rem;
}

.filla {
    overflow: hidden;
}

#num_txt1 {
    width: 98%;
    height: 0.75rem;
    background: #fff;
    color: #cbcbcb;
    font-size: 0.26rem;
    line-height: 0.75rem;
    padding-left: 2%;
}

#text_txt1 {
    width: 90%;
    padding: 5%;
    background: #fff;
    color: #333;
    font-size: 0.32rem;
}

.dpica {
    width: 5rem;
    padding: 0.3rem 0.4rem;
    height: 4.4rem;
    margin: 0 auto;
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari 和 Chrome */
    border-radius: 5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    background: rgba(255, 255, 255, 0.4);
    text-align: center;

    margin-top: 0.46rem;

}

.dpica img {
    width: 100%;
}

.fina {
    background: #ebebeb;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.sctp {
    width: 90%;
    height: 0.8rem;
    margin: 0 auto;

    background: url(../images/bgc.jpg) center no-repeat;

    overflow: hidden;

    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    color: #fff;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.32rem;
    z-index: 66

}

#starImg {
    width: 100%;
}

.scmxp a {
    color: #fff;
}

#audio_btn {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 200;
    display: none;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    z-index: 999;
}

#audio_btn_1{
    width: 33px;
    position: absolute;
    right: 3px;
    top: 2px;
    z-index: 1000;
}

.off {
    background-image: url(../images/icons.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@-moz-keyframes rotating {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg)
    }
}

.zjxak {
    opacity: 100;
    -webkit-animation: 1.5s infinite ease-out backwards;
    -moz-animation: 1.5s infinite ease-out backwards;
    -ms-animation: 1.5s infinite ease-out backwards;
    animation: 1.5s infinite ease-out backwards;

    -webkit-animation-name: startada;
    -moz-animation-name: startada;
    -ms-animation-name: startada;
    animation-name: startada;

}

@-webkit-keyframes startada {
    0%, 30% {
        opacity: 0;
        -webkit-transform: translate(10px, 0px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-8px, 0px);
    }
}

@-moz-keyframes startada {
    0%, 30% {
        opacity: 0;
        -moz-transform: translate(10px, 0px);
    }
    60% {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -moz-transform: translate(-8px, 0px);
    }
}

@keyframes startada {
    0%, 30% {
        opacity: 0;
        transform: translate(10px, 0px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-8px, 0px);
    }
}

.sctpa {
    width: 5.24rem;
    height: 5.26rem;
}

.anipulse {
    -webkit-animation: pulse 2s infinite both;
    animation: pulse 2s infinite both;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pointing {
    width: 0.04rem;
    height: 0.46rem;
    background: url(../images/spritesheet.png) no-repeat 50% 0;
    position: absolute;
    top: 90%;
    left: 50%;
    -webkit-animation: steps 2s steps(44) infinite both;
    animation: steps 2s steps(44) infinite both;
}

@-webkit-keyframes steps {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

@keyframes steps {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

#main {
    opacity: 0
}