html, body {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    zoom: 1;
    font-size: 24px;
}

body {
    font-family: PingFang Light;
    color: #000;
}

* {
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.overflow {
    overflow: hidden;
}

/*公用代码*/
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a:link {
    text-decoration: none;
    color: #ffffff;
}

a:visited {
    color: #ffffff;
}

a:hover {
    color: #ffffff;
    opacity: 1;
}

a:active {
    color: #ffffff;
}

.float-l {
    float: left;
}

.float-r {
    float: right;
}

.none {
    display: none;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/*公用代码结束*/

#play-video {
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #000000;
}

#play-video .video-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 35%;
}

#play-video .close-btn {
    background-image: url("https://static.sistalk.cn/mp-web/close.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    float: left;
    width: 5%;
    height: 5%;
    margin-top: .5rem;
    margin-left: .3rem;
}

.video-box video {
    width: 100%;
    height: auto;
}

/* header */
#navbar {
    height: .9rem;
    width: 100%;
    background: #000000;
    position: fixed;
    top: 0;
    z-index: 9999;
    border-bottom: 0.02rem solid #ff7eb3;
    border-image: -webkit-linear-gradient(#ff7eb3, #ff758c) 30 30;
}

/* 左上角 两道杠*/
#navbar .menu-btn {
    height: 100%;
    width: 15%;
    float: left;
}

#navbar .btn {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: initial;
}

.cur, .hover {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: .01rem;
    width: .3rem;
    top: .46rem;
    left: -0.16rem
}

.cur:before, .cur:after, .hover:before, .hover:after {
    position: absolute;
    content: "";
    background-color: #fff;
    height: 100%;
    width: 100%;
}

.cur:before {
    transform: translateY(-600%);
    -webkit-transform: translateY(-600%);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.cur:after {
    transform: translateY(600%);
    -webkit-transform: translateY(600%);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.hover {
    background-color: transparent;
}

.hover:before {
    transform: translateY(0) rotate(45deg); /*点击之后，Y轴恢复到原点坐标，然后顺时针旋转45°角*/
    -webkit-transform: translateY(0) rotate(45deg);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.hover:after {
    transform: translateY(0) rotate(-45deg); /*点击之后，Y轴恢复到原点坐标，然后逆时针旋转-45°角*/
    -webkit-transform: translateY(0) rotate(-45deg);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* 中间 logo */
#navbar .logo {
    width: 70%;
    height: auto;
    background-image: url("https://static.sistalk.cn/mp-web/logo-h5.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    padding-bottom: 10%;
    float: left;
    margin: 0 auto;
    line-height: .5rem;
    margin-top: .1rem;
}

.banner {
    margin-top: .9rem;
}

/* banner */
.banner-first {
    width: 100%;
    height: 100%;
    background-image: url("https://static.sistalk.cn/mp-web/2019-festival-h5.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    padding-bottom: 100%;
}

.banner-two {
    width: 100%;
    height: 100%;
    background-image: url("https://static.sistalk.cn/mp-web/autumn-conference-h5-1.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    padding-bottom: 100%;
}

/* banner 视频按钮 */
#banner-first .btn-box {
    width: 18%;
    height: auto;
    position: absolute;
    top: 33%;
    left: 10%;
}

/* 视频按钮 */
#banner-first .banner-video-img {
    width: 40%;
    height: auto;
    float: left;
}

#banner-first .banner-video-img .video-btn {
    width: 100%;
    height: 100%;
    background-image: url("https://static.sistalk.cn/mp-web/video-icon-3.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 100%;
    display: block;
    float: left;
}

#banner-first .banner-video-img .video-text {
    text-align: center;
    color: #ffffff;
    font-weight: 200;
    font-family: "Source Han Sans";
    font-size: .24rem;
    margin-top: .59rem;
}

/* 更多按钮 */
#banner-first .banner-text-btn {
    width: 40%;
    height: auto;
    float: left;
    margin-left: .27rem;
}

#banner-first .banner-text-btn .more-btn {
    width: 100%;
    height: 100%;
    background-image: url("https://static.sistalk.cn/mp-web/more-icon-3.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 100%;
    display: block;
    float: right;
}

#banner-first .banner-text-btn .more-text {
    width: 100%;
    color: #ffffff;
    font-weight: 200;
    font-family: "Source Han Sans";
    font-size: .24rem;
    text-align: center;
    margin-top: .59rem;
}

/* banner 视频按钮 */
#banner-two .btn-box {
    width: 18%;
    height: auto;
    position: absolute;
    top: 20%;
    left: 10%;
}

/* 视频按钮 */
#banner-two .banner-video-img {
    width: 40%;
    height: auto;
    float: left;
}

#banner-two .banner-video-img .video-btn {
    width: 100%;
    height: 100%;
    background-image: url("https://static.sistalk.cn/mp-web/video-icon2.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 100%;
    display: block;
    float: left;
}

#banner-two .banner-video-img .video-text {
    text-align: center;
    font-weight: 200;
    font-family: "Source Han Sans";
    font-size: .24rem;
}

/* 更多按钮 */
#banner-two .banner-text-btn {
    width: 40%;
    height: auto;
    float: left;
    margin-left: .27rem;
}

#banner-two .banner-text-btn .more-btn {
    width: 100%;
    height: 100%;
    background-image: url("https://static.sistalk.cn/mp-web/more-icon2.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 100%;
    display: block;
    float: right;
}

#banner-two .banner-text-btn .more-text {
    width: 100%;
    color: #ffffff;
    font-weight: 200;
    font-family: "Source Han Sans";
    font-size: .24rem;
    text-align: center;
}

#banner-two .banner-video-img .video-text a, #banner-two .banner-text-btn .more-text a {
    color: #000000;
}

.swiper-pagination-bullet {
    background: #fff;
}

/* 身子部分 */
#monster-love {
    width: 50%;
    height: auto;
    margin: 0 auto;
}

#monster-love .love-box {
    width: 100%;
    height: 2rem;
}

/* 小心心 */
#monster-love .love {
    width: 100%;
    height: 100%;
    background-image: url("https://static.sistalk.cn/mp-web/love.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40% 40%;
    line-height: 4rem;
}

/* Loving you so much!  盒子 */
#monster-love .love-text {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    margin-top: -.3rem;
}

/* Loving you so much! 文字 */
#monster-love .love-text span {
    font-size: .3rem;
    z-index: 1;
    font-weight: 200;
    font-family: "Source Han Sans";
    text-indent: -.2rem;
    display: block;
}

/* 怪兽列表 */
#monster-lists {
    width: 80%;
    height: auto;
    margin: 0 auto;
    margin-top: 1rem;
}

#monster-lists li {
    width: 100%;
    height: auto;
    float: left;
    margin: .3%;
    position: relative;
}

/* 背景图 */

#monster-lists li .video {
    width: 100%;
    height: 99%;
    max-height: 15.8px;
}

/* 背景图 */
#monster-lists li video {
    width: 100%;
    height: auto;
}

#monster-lists .btn-box {
    width: 9%;
    height: auto;
    position: absolute;
    right: .5rem;
    bottom: .5rem;
}

/* 视频icon盒子 */
#monster-lists .monster-video-img {
    width: 100%;
    height: 100%;
}

/* 视频icon */
#monster-lists .monster-video-btn {
    background-image: url("https://static.sistalk.cn/mp-web/video-icon-3.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 100%;
    display: block;
    float: left;
    width: 100%;
}

/* 视频文字 */
#monster-lists .monster-video-text {
    width: 100%;
    height: auto;
    text-align: center;
    color: #ffffff;
    font-weight: 200;
    font-family: "Source Han Sans";
    font-size: .24rem;
    float: left;
}

/* 更多icon盒子 */
#monster-lists .monster-more-img {
    width: 100%;
    height: 100%;
    margin-top: .3rem;
    margin-bottom: -.2rem
}

/* 更多icon */
#monster-lists .monster-more-btn {
    background-image: url("https://static.sistalk.cn/mp-web/more-icon-3.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 100%;
    display: block;
    float: left;
    width: 100%;
    cursor: pointer;
}

/* 更多文字 */
#monster-lists .monster-more-text {
    width: 100%;
    height: auto;
    text-align: center;
    color: #ffffff;
    font-weight: 200;
    font-family: "Source Han Sans";
    font-size: .24rem;
    float: left;
}

/* 底部印章文字 */
#monster-seal-text {
    height: auto;
    margin: 0 auto;
    text-align: center;
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-size: .4rem;
    font-weight: 200;
    font-family: "Source Han Sans";
}

/* 底部印章图片盒子 */
#monster-seal-text .seals {
    width: 60%;
    height: auto;
    margin: 0 auto;
    background-image: url("https://static.sistalk.cn/mp-web/bg-text.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 40%;
    margin-top: -.5rem;
}

/* 底部 */
#footer {
    width: 100%;
    height: auto;
    background-color: #f2f2f2;
}

#footer .sistalk {
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #e6e6e6;
}

#footer .sistalk:after {
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    content: "";
}

#footer .summary {
    width: 100%;
    float: left;
    padding-top: .1rem;
    padding-bottom: .1rem;
}

#footer .summary p {
    font-size: .2rem;
    padding-top: .1rem;
    color: #323333;
    /*opacity: 0.7;*/
}

#footer .summary p:first-child {
    font-size: .4rem;
}

#footer .pictures {
    width: 100%;
    height: auto;
    float: left;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#footer .design {
    background-image: url("https://static.sistalk.cn/mp-web/design.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 20%;
    float: left;
    width: 20%;
}

#footer .reddot {
    background-image: url("https://static.sistalk.cn/mp-web/reddot.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 20%;
    float: left;
    width: 30%;
}

#footer .border {
    height: 1rem;
    width: .1rem;
    background: #323333;
    float: left;
    margin-left: .5rem;
    margin-right: .5rem;
    opacity: .5;
    position: relative;
    bottom: -1.7rem;
}

#footer .copyright {
    color: #323333;
    opacity: .5;
    text-align: center;
    margin-top: .3rem;
    padding-bottom: .2rem;
}

#footer .copyright p {
    margin-top: .01rem;
    font-size: .2rem;
}

#footer .copyright a {
    color: #323333;
}

#navbar-list {
    width: 100%;
    height: 100%;
    padding-bottom: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000;
    z-index: 3;
    margin-top: .9rem;
    opacity: 0;
}

#navbar-list .navbar-box {
    width: 80%;
    margin: 0 auto;

}

#navbar-list .navbar-box li {
    border-bottom: 1px solid rgb(255, 255, 255, .3);
    color: #fff;
    font-size: .4rem;
    margin-top: .5rem;
    padding-bottom: .2rem;
}

/* apps */
#apps {
    width: 100%;
    margin-top: .5rem;
}

#apps li {
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 96%;
    height: 1.3rem;
    margin: 0 auto;
    text-align: center;
    line-height: 1.3rem;
    margin-bottom: .2rem;
}

#apps li img {
    padding-right: .2rem;
}

#apps li a {
    vertical-align: middle;
    color: #337ab7;
    font-size: .4rem;
}

#apps .down-bg {
    background-image: url("../img/index/web_app_pic.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 50%;
}

#apps .down-bg-android {
    background-image: url("../img/index/mobile_android_app_pic.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding-bottom: 100%;
}

/* joinus */
#joinus {
    margin-top: .2rem;
}

#joinus .bg {
    background-image: url("../img/about/aboutus.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-bottom: 50%;
}

#joinus .introduce {
    font-size: .2rem;
    text-align: center;
}

#joinus .job-box {
    width: 90%;
    margin: 0 auto;
    margin-top: 1rem;
}

#joinus .job-box h2 {
    font-size: .6rem;
    text-align: center;
}

#joinus .job-box .row {
    text-align: center;
}

#joinus .job-box li {

}

#joinus button {
    padding: .2rem;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    display: block;
    margin: 0 auto;
    margin-top: .3rem;
    border-radius: .1rem;
}

#section1, #section2, #section3, #section4, #section5 {
    width: 80%;
    margin: 0 auto;
    margin-top: 1rem;
    font-size: .2rem;
}

#section5 {
    margin-bottom: 2rem;
}

#section1 h3, #section2 h3, #section3 h3, #section4 h3, #section5 h3 {
    font-size: .4rem;
    padding-bottom: .2rem;
}

#section1 dt, #section2 dt, #section3 dt, #section4 dt, #section5 dt {
    padding-top: .1rem;
    padding-bottom: .1rem;
    font-size: .3rem;
}

#section1 li, #section2 li, #section3 li, #section4 li, #section5 li {
    list-style: list-item;
    text-align: left;
}



/* verify */

.verify-box {
    margin-top: 3rem;
    margin-bottom: .5rem;
}

.verify-box p {
    text-align: center;
    font-size: .5rem;
    color: #aaaaaa;
}

.verify-box p:first-child {
    font-size: .6rem;
    color: #E94967;
    padding-bottom: .5rem;
}

.main {
    width: 80%;
    margin: 0 auto;

}

.clearfix-mobile {
    width: 80%;
    margin: 0 auto;
}

.inp-code {
    float: left;
    height: 1rem;
    width: 93%;
    margin: 0 auto;
    border: 1px solid #aaa;
    border-radius: .2rem;
    position: relative;
    font-size: .4rem;
    padding-left: 0.3rem;
    font-family: monospace;
}

.span-del {
    /*position: relative;
    right: 26%;*/
    width: 0.8rem;
    height: .8rem;
    margin-top: .1rem;
    margin-left: -.9rem;
    position: relative;
    float: left;
}

#btnVerify {
    float: left;
    background: #F64467;
    padding: .2rem;
    padding-left: .5rem;
    padding-right: .5rem;
    border-radius: .2rem;
    font-size: .5rem;
    width: 3.8rem;
    height: .8rem;
    text-align: center;
    line-height: .8rem;
    margin-left: 0rem;
    margin-top: .5rem;
}

.auth {
    margin-top: 5rem;
}

.auth h4 {
    margin-bottom: 40px;
    font-size: .7rem;
    color: #aaa;
}

.auth h4 span {
    font-size: 1rem;
    color: #000;
    padding-right: .5rem;
}

.area {
    width: 49%;
    margin-top: 2px;
    margin-right: 2px;
    padding-top: 30px;
    padding-bottom: 30px;
    min-height: 182px;
    line-height: 40px;
    background: #FFF;
    float: left;
    font-size: .7rem;
    vertical-align: middle;
}

.area p a, .area .code {
    color: #337ab7;
}

.area h5 {
    font-size: .9rem;
    padding-bottom: .5rem;
}

.area_simply {
    width: 49%;
    margin-top: 2px;
    margin-right: 2px;
    padding-top: 30px;
    min-height: 162px;
    line-height: 40px;
    background: #FFF;
    float: left;
    font-size: .7rem;
    vertical-align: middle;
}

.area_simply p a, .area_simply .code {
    color: #337ab7;
}

.area_simply h5 {
    font-size: .9rem;
    padding-bottom: .5rem;
}

.tip {
    width: 80%;
    margin: 0 auto;
}

#verifyInfo {
    margin-top: .5rem;
    font-size: .3rem;
}