/*
 * @Author: clover
 * @Date: 2018-11-01
 * @Last Modified by: clover
 * @Last Modified time:
 *
 * 新官网H5页面的修改,样式部分,包括index;im,talk,video,live;game,social,education,wxapp;case-new十个页面的样式,以及公共头部尾部的样式
 */

/******************************/
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

body {
    color: #000;
    font-family: -apple-system, Source Han Sans CN, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, sans-serif;
    padding: 0;
    margin: 0;
    min-height: 100%;
    width: 100%;
    background: #fff;
    position: static;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none
}
h1, h2, h3, i, li, ul {
    margin: 0;
    padding: 0
}
select {
    outline: 0;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, a:hover {
    text-decoration: none
}
a {
    outline: 0;
    cursor: pointer;
    color: #2b93f7
}
ul {
    list-style: none
}

.header-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.58rem;
    padding: 0.16rem 0.25rem;
    box-sizing: border-box;
    z-index: 5;
}

.header-bar .logo-box {
    float: left;
    height: 0.26rem;
    width: 0.65rem;
}

.header-bar .logo-box img {
    float: left;
    height: 0.26rem;
    width: 0.65rem;
}

.header-bar .daohang {
    height: 0.16rem;
    width: 0.20rem;
    float: right;
    margin-top: 0.05rem;
}
/**************nav-box****************/
.nav-box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0,0,0,0.9);
    transform: translateX(-100%);
    overflow-y: auto;
}
@keyframes showNavBox {
    0% {transform: translateX(-100%)}
    100% {transform: translateX(0%)}
}
@-webkit-keyframes showNavBox {
    0% {transform: translateX(-100%)}
    100% {transform: translateX(0%)}
}
.nav-box-show {
    animation: showNavBox ease-in-out 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation: showNavBox ease-in-out 0.5s;
    -webkit-animation-fill-mode: forwards;
}
@keyframes hideNavBox {
    0% {transform: translateX(0%)}
    100% {transform: translateX(-100%)}
}
@-webkit-keyframes hideNavBox {
    0% {transform: translateX(0%)}
    100% {transform: translateX(-100%)}
}
.nav-box-hide {
    animation: hideNavBox ease-in-out 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation: hideNavBox ease-in-out 0.5s;
    -webkit-animation-fill-mode: forwards;
}

.nav-box .nav-top {
    width: 100%;
    height: 0.58rem;
    padding: 0.16rem 0.35rem 0.16rem 0.25rem;
    box-sizing: border-box;
}

.nav-box .nav-top .logo {
    float: left;
    height: 0.26rem;
    width: 0.65rem;
}

.nav-box .nav-top .close-btn {
    float: right;
    width: 0.26rem;
    height: 0.26rem;
    line-height: 0.26rem;
    text-align: right;
    font-size: 0.26rem;
    color: #fff;
}

.nav-box>ul {
    width: 100%;
    padding: 0 0.2rem;
    box-sizing: border-box;
}
.nav-box>ul>li {
    height: 56px;
    width: 100%;
    border-bottom: 1px solid #cccccc;
    overflow-y: hidden;
    margin-bottom: 0;
}

.nav-box>ul>li .item {
    height: 56px;
    width: 100%;
    color: #ffffff;
    font-size: 0.14rem;
    line-height: 56px;
    display: block;
    margin: 0 ;
    float: left;
}
.nav-box>ul>li .item .item-name {
    float: left;
    margin-left: 0.22rem;
}
.nav-box>ul>li .item .item-icon-circle{
    float: right;
    width: 0.04rem;
    height: 0.04rem;
    border-radius: 0.02rem;
    background: #ffffff;
    margin: 0.25rem;
}
@keyframes angleRotate {
    0% {transform: rotate(135deg);}
    100% {transform: rotate(315deg);}
}
@-webkit-keyframes angleRotate {
    0% {transform: rotate(135deg);}
    100% {transform: rotate(315deg);}
}
.nav-box>ul>li .item .item-icon-angle {
    width: 0.10rem;
    height: 0.10rem;
    float: right;
    margin: 0.22rem;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    /*transform: rotate(-45deg);*/
    animation: angleRotate linear 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation: angleRotate linear 0.5s;
    -webkit-animation-fill-mode: forwards;
}
.nav-box>ul>li .item-selected .item-name {
    color: #2b93f7;
}
.nav-box>ul>li .item-selected .item-icon-circle{
    background: #2b93f7;
}
@keyframes angleSelectedRotate {
    0% {transform: rotate(315deg);}
    100% {transform: rotate(135deg);}
}
@-webkit-keyframes angleSelectedRotate {
    0% {transform: rotate(315deg);}
    100% {transform: rotate(135deg);}
}
.nav-box>ul>li .item-selected .item-icon-angle {
    border-color: #2b93f7;
    animation: angleSelectedRotate linear 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation: angleSelectedRotate linear 0.5s;
    -webkit-animation-fill-mode: forwards;
}

.nav-box>ul>li.item-array {
    height: 0rem;
    padding-left: 0.37rem;
    width: 100%;
    box-sizing: border-box;
}
@keyframes showItemArray {
    0% {height: 0rem}
    100% {height: 224px}
}
@-webkit-keyframes showItemArray {
    0% {height: 0px}
    100% {height: 224px}
}
.nav-box>ul>li.item-array-selected {
    animation: showItemArray 0.5s ease-in-out;
    animation-fill-mode: forwards;
    -webkit-animation: showItemArray 0.5s ease-in-out;
    -webkit-animation-fill-mode: forwards;
}
@keyframes hideItemArray {
    0% {height: 224px}
    100% {height: 0}
}
@-webkit-keyframes hideItemArray {
    0% {height: 224px}
    100% {height: 0}
}
.nav-box>ul>li.item-array-unselected {
    animation: hideItemArray 0.5s ease-in-out;
    animation-fill-mode: forwards;
    -webkit-animation: hideItemArray 0.5s ease-in-out;
    -webkit-animation-fill-mode: forwards;
}
/****************back-to-top***************/
.back-to-top {
    height: 0.34rem;
    width: 0.34rem;
    border-radius: 0.17rem;
    display: none;
    position: fixed;
    background: #2b93f7;
    line-height: 0.34rem;
    font-size: 0.16rem;
    text-align: center;
    right: 0.1rem;
    bottom: 0.35rem;
    color: #ffffff;
    z-index: 10;
}
.back-to-top-show {
    display: block;
}
.phone-btn {
    height: 0.34rem;
    width: 0.34rem;
    border-radius: 0.17rem;
    display: block;
    position: fixed;
    right: 0.1rem;
    bottom: 0.8rem;
    background-color: #2b93f7;
    background-image: url("../images-new/index/phone@3x.png");
    background-size: 100% 100%;
    z-index: 10;
}
.qq-btn {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 0.17rem;
    display: block;
    position: fixed;
    right: 0.1rem;
    bottom: 1.25rem;
    background-color: #2b93f7;
    background-image: url("../images-new/index/qq@3x.png");
    background-size: 100% 100%;
    z-index: 10;
}

/*************footer-box*****************/
.footer-box {
    width: 100%;
    height: auto;
}

.footer-box .free-box {
    height: 1.89rem;
    width: 100%;
    background: linear-gradient(to right, #29d4ff, #2b93f7);
    background: -webkit-linear-gradient(left, #29d4ff, #2b93f7);
    background: -o-linear-gradient(left, #29d4ff, #2b93f7);
    background: -moz-linear-gradient(left, #29d4ff, #2b93f7);
}

.free-box .title {
    height: 0.52rem;
    line-height: 0.22rem;
    padding-top: 0.30rem;
    text-align: center;
    color: #fff;
    font-size: 0.22rem;
    box-sizing: border-box;
}

.free-box .desc {
    height: 0.15rem;
    line-height: 0.15rem;
    text-align: center;
    color: #fff;
    font-size: 0.15rem;
    margin: 0.18rem 0 0.30rem 0;
}

.free-box .free-btn {
    display: block;
    width: 2.10rem;
    height: 0.47rem;
    background: #fff;
    color: #2B93F7;
    font-size: 0.17rem;
    line-height: 0.47rem;
    text-align: center;
    margin: 0 auto;
    border-radius: 0.02rem;
}

.footer-box .link-box {
    width: 100%;
    height: 7.33rem;
    padding-top: 0.16rem;
    box-sizing: border-box;
    background: #2A3344;
}

.link-box .link-array {
    height: auto;
    width: 100%;
    padding: 0 0.25rem;
    box-sizing: border-box;
}

.link-box .link-array .link-title {
    width: 100%;
    height: 0.36rem;
    line-height: 0.18rem;
    margin-top: 0.2rem;
    font-size: 0.18rem;
    text-align: center;
    color: #FEFEFE;
}
.link-box .link-array .link-items {
    width: 100%;
    line-height: 0;
    font-size: 0;
    overflow: auto;
    overflow-y: hidden;
    text-align: justify;
}

.link-box .link-array .link-items:after{
    content:"";
    display:inline-block;
    width:100%;
}

.link-box .link-array .link-items .link-item {
    height: 0.34rem;
    width: 0.8rem;
    display: inline-block;
    font-size: 0.14rem;
    line-height: 0.34rem;
    color: #B7B7B7;
}
.link-box .link-array .link-items .link-item-left {
    text-align: left;
}
.link-box .link-array .link-items .link-item-center {
    text-align: center;
}
.link-box .link-array .link-items .link-item-right {
    text-align: right;
}

.footer-box .footer-line {
    width: 3.12rem;
    height: 0.01rem;
    min-height: 1px;
    background: #454E5D;
    margin: 0 auto;
    margin-top: 0.25rem;
}

.footer-box .info-box {
    width: 100%;
    height: 1.81rem;
    text-align: center;
}

.footer-box .info-box .title{
    padding-top: 0.28rem;
    height: 0.18rem;
    line-height: 0.18rem;
    font-size: 0.18rem;
    box-sizing: content-box;
    color: #FEFEFE;
}
.footer-box .info-box .phone{
    padding-top: 0.35rem;
    height: 0.18rem;
    line-height: 0.18rem;
    font-size: 0.18rem;
    box-sizing: content-box;
    color: #8A8A8A;
    font-weight: bold;
}
.footer-box .info-box .email{
    padding-top: 0.18rem;
    height: 0.18rem;
    line-height: 0.18rem;
    font-size: 0.16rem;
    box-sizing: content-box;
    color: #8A8A8A;
}

.footer-box .copyright-box {
    width: 100%;
    margin-top: 0.1rem;
}

.footer-box .copyright-box .item {
    width: 100%;
    text-align: center;
    color: #8A8A8A;
    font-size: 0.12rem;
    line-height: 0.12rem;
    padding-top: 0.2rem;
    height: 0.12rem;
    box-sizing: content-box;
}

.background-gray {
    background: #F5F7FC;
}
/************index***************/
.index-banner {
    width: 100%;
    height: 3.01rem;
    background: grey;
    position: relative;
    color: #ffffff;
}
.index-banner .swiper-index-banner {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.index-banner .swiper-index-banner .index-slider {
     width: 3.75rem;
     height: 3.01rem;
     background-size: 100% 100%;
 }
.index-banner .swiper-index-banner .index-slider1 {
    background-image: url("../images-new/index/banner-1.png");
}
.index-banner .swiper-index-banner .index-slider2 {
    background-image: url("../images-new/index/banner-2.png");
}
.index-banner .title {
    padding-top: 0.82rem;
    text-align: center;
    font-weight: bold;
    font-size: 0.35rem;
    line-height: 0.35rem;
}
.index-banner .desc {
    padding-top: 0.2rem;
    text-align: center;
    font-size: 0.15rem;
    line-height: 0.18rem;
    height: 0.36rem;
    box-sizing: content-box;
}
.index-banner .free-btn {
    width: 1.73rem;
    height: 0.47rem;
    text-align: center;
    line-height: 0.47rem;
    color: #ffffff;
    font-size: 0.19rem;
    border: 0.01rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.20rem;
    background: #2B93F7;
}
.index-banner .swiper-pagination {
    height: 0.03rem;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0.19rem;
    line-height: 0;
    font-size: 0;
}
.index-banner .swiper-pagination .swiper-item {
    width: 0.34rem;
    height: 0.03rem;
    margin: 0 0.09rem;
    background: #FFFFFF;
    display: inline-block;
    vertical-align: top;
}
.index-banner .swiper-pagination .swiper-item-selected {
    background: #2B93F7;
}
.index-advantage {
    width: 100%;
    height: 2.03rem;
    text-align: center;
    padding-top: 0.2rem;
    box-sizing: border-box;
    color: #000000;
}
.index-advantage .img-box {
    width: 1.23rem;
    height: 0.64rem;
    margin: 0 auto;
}
.index-advantage .img-box img {
    width: 100%;
    height: 100%;
    float: left;
}
.index-advantage .title {
    width: 100%;
    height: 0.2rem;
    line-height: 0.2rem;
    font-size: 0.19rem;
    font-weight: lighter;
    margin: 0.16rem 0 0.08rem;
}
.index-advantage .desc {
    width: 100%;
    line-height: 0.24rem;
    font-size: 0.15rem;
    font-weight: lighter;
    padding-top: 0.01rem;
}

.index-scene {
    width: 100%;
    height: auto;
}
.index-scene .index-scene-title {
    width: 100%;
    height: 1.33rem;
    line-height: 1.33rem;
    text-align: center;
    font-size: 0.2rem;
    background: #F5F7FC;
}
.index-scene .index-scene-item {
    width: 100%;
    height: 5.64rem;
    overflow-y: hidden;
}
@keyframes indexSceneItemHide {
    0% {height: 5.64rem}
    100% {height: 0.64rem}
}
@-webkit-keyframes indexSceneItemHide {
    0% {height: 5.64rem}
    100% {height: 0.64rem}
}
.index-scene .index-scene-item-hide {
    animation: indexSceneItemHide 0.5s ease-in;
    animation-fill-mode: forwards;
    -webkit-animation: indexSceneItemHide 0.5s ease-in;
    -webkit-animation-fill-mode: forwards;
}
@keyframes indexSceneItemShow {
    0% {height: 0.64rem}
    100% {height: 5.64rem}
}
@-webkit-keyframes indexSceneItemShow {
    0% {height: 0.64rem}
    100% {height: 5.64rem}
}
.index-scene .index-scene-item-show {
    animation: indexSceneItemShow 0.5s ease-in;
    animation-fill-mode: forwards;
    -webkit-animation: indexSceneItemShow 0.5s ease-in;
    -webkit-animation-fill-mode: forwards;
}
.index-scene .index-scene-item .title {
    width: 100%;
    height: 0.64rem;
    background-image: url("../images-new/index/zhankai.png");
    background-size: 100% 100%;
    color: #2B93F7;
    font-size: 0.19rem;
    text-align: center;
    line-height: 0.64rem;
    font-weight: lighter;
}
.index-scene .index-scene-item-hide .title {
    background-image: url("../images-new/index/shouqi.png");
}

.index-scene .index-scene-item .content {
    width: 100%;
    height: 5.00rem;
    background: #F5F7FC;
    overflow-y: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}
.index-scene .index-scene-item .content .desc {
    width: 2.50rem;
    height: auto;
    padding-top: 0.5rem;
    line-height: 0.24rem;
    font-size: 0.15rem;
    font-weight: lighter;
    text-align: left;
    margin: 0 auto;
    text-align: justify;
}
.index-scene .index-scene-item .content>img {
    position: absolute;
    z-index: 0;
    height: 4.25rem;
}
.index-scene .index-scene-item .content .img1 {
    bottom: -0.75rem;
    left: 0.6rem;
}
.index-scene .index-scene-item .content .img2 {
    bottom: -0.51rem;
    left: 0.6rem;
}
.index-scene .index-scene-item .content .img3 {
    bottom: -0.51rem;
    left: 0.6rem;
}
.index-scene .index-scene-item .content .img4 {
    bottom: -0.51rem;
    left: 0.6rem;
}
.index-advantage2 {
    width: 100%;
    height: 6.11rem;
    position: relative;
}
.index-advantage2 .title {
    height: 0.2rem;
    line-height: 0.2rem;
    padding-top: 0.57rem;
    text-align: center;
    box-sizing: content-box;
    font-size: 0.2rem;
}
.index-advantage2>img {
    height: 2.48rem;
    width: 3.08rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
}
.index-advantage2 .line {
    width: 0.24rem;
    height: 0.10rem;
    border-bottom: 1px solid #2D94F7;
    position: absolute;
    top: 1.17rem;
    left: 2rem;
}
.index-advantage2 .hours {
    height: 0.1rem;
    line-height: 0.14rem;
    font-size: 0.09rem;
    position: absolute;
    top: 1.22rem;
    left: 2.30rem;
    color: #2B93F7;
}
.index-advantage2 .item {
    width: 100%;
    padding: 0.1rem 0.65rem 0 0.9rem;
    box-sizing: border-box;
    line-height: 0.24rem;
    font-size: 0.15rem;
    font-weight: lighter;
    background-image: url("../images-new/index/gou.png");
    background-repeat: no-repeat;
    background-size: 0.14rem 0.14rem;
    background-position: 0.65rem 0.15rem;
}
.index-company {
    width: 100%;
    height: 4.41rem;
    background-image: url("../images-new/index/kehuanli.png");
    background-size: 100% 100%;
    position: relative;
}
.index-company .title {
    height: 0.20rem;
    font-size: 0.20rem;
    text-align: center;
    line-height: 0.2rem;
    padding-top: 0.57rem;
    box-sizing: content-box;
}
.index-company .desc {
    line-height: 0.24rem;
    font-size: 0.15rem;
    padding-top: 0.3rem;
    padding-left: 0.65rem;
    text-align: left;
    font-weight: lighter;
}
.index-company .more-btn {
    position: absolute;
    font-size: 0.13rem;
    bottom: 0.46rem;
    right: 0.25rem;
    color: #2B93F7;
}

/************product  common**************************/
.product-top .title {
    padding-top: 0.82rem;
    text-align: center;
    font-weight: bold;
    font-size: 0.35rem;
    line-height: 0.35rem;
}
.product-top .desc {
    padding-top: 0.1rem;
    text-align: center;
    font-size: 0.15rem;
    line-height: 0.18rem;
}
.product-top .free-btn {
    width: 1.73rem;
    height: 0.47rem;
    text-align: center;
    line-height: 0.47rem;
    color: #ffffff;
    font-size: 0.19rem;
    border: 0.01rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.27rem;
    background: #2B93F7;
}
.product-content .title {
    line-height: 0.2rem;
    font-size: 0.2rem;
    text-align: center;
    padding: 0.57rem 0 0.2rem 0;
}
.product-content .desc {
    line-height: 0.24rem;
    font-size: 0.15rem;
    text-align: justify;
    padding: 0.1rem 0.64rem 0.05rem 0.64rem;
    width: 100%;
    box-sizing: border-box;
    font-weight: lighter;
}
.product-content .item {
    line-height: 0.24rem;
    font-size: 0.15rem;
    font-weight: lighter;
    text-align: left;
    padding: 0.1rem 0.64rem 0 0.88rem;
    width: 100%;
    box-sizing: border-box;
    background: url("../images-new/index/gou.png") no-repeat;
    background-size: 0.14rem 0.14rem;
    background-position: 0.65rem 0.15rem;
}

/******************im*************************/
.im-banner {
    width: 100%;
    height: 7.44rem;
    overflow: hidden;
}
.im-banner .swiper-im-banner {
    margin-top: 0.3rem;
    width: 3.75rem;
    height: 4.25rem;
    margin-bottom: 0.26rem;
    position: relative;
    overflow: visible!important;
}
.im-banner .swiper-im-banner .swiper-wrapper .swiper-slide{
    width: 2.55rem;
    border-radius: 0.1rem;
}
.im-banner .swiper-im-banner .swiper-wrapper .swiper-slide img{
    width: 100%;
    height: 4.25rem;
    border-radius: 0.1rem;
}
.im-banner .swiper-im-banner .swiper-wrapper .swiper-slide-prev{
    height: 4.25rem!important;
}
.im-banner .swiper-im-banner .swiper-wrapper .swiper-slide-prev img{
    height: 4.25rem!important;
}
.im-banner .swiper-im-banner .swiper-wrapper .swiper-slide-next{
    height: 4.25rem!important;
}
.im-banner .swiper-im-banner .swiper-wrapper .swiper-slide-next img{
    height: 4.25rem!important;
}
.im-banner .swiper-im-banner .swiper-wrapper .swiper-slide-active{
    width: 2.55rem;
}
.im-banner .swiper-pagination{
    bottom: -0.6rem!important;
}
/*.im-banner .swiper-pagination .swiper-pagination-bullet{*/
    /*width: 0.10rem;*/
    /*height: 0.10rem;*/
    /*background: #ffffff;*/
    /*border:0.01rem solid #2B93F7;*/
    /*border-radius: 0.05rem;*/
/*}*/
/*.im-banner .swiper-pagination .swiper-pagination-bullet-active{*/
    /*background: #2B93F7;*/
/*}*/
.im-message {
    width: 100%;
    background: #F5F7FC;
    padding-bottom: 0.26rem;
}
.im-message>img {
    width: 2.83rem;
    height: 2.51rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.2rem;
}
.im-scene {
    width: 100%;
    height: 5.81rem;
}
.im-scene .swiper-im-scene {
    width: 100%;
    height: 2.83rem;
    position: relative;
    margin-top: 0.1rem;
    overflow: hidden;
}
.im-scene .swiper-im-scene .im-scene-img-box {
    width: 3.75rem;
    height: 2.53rem;
}
.im-scene .swiper-im-scene .im-scene-img1 {
    display: block;
    margin: 0 auto;
    width: 2.73rem;
    height: 2.47rem;
}
.im-scene .swiper-im-scene .im-scene-img2 {
    display: block;
    margin: 0 auto;
    width: 2.84rem;
    height: 2.53rem;
}
.im-scene .swiper-im-scene-pagination {
    text-align: center;
    position: absolute;
}
.im-platform {
    width: 100%;
    background: #F5F7FC;
    padding-bottom: 0.34rem;
}
.im-platform>img {
    width: 2.74rem;
    height: 1.69rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.1rem;
}
/******************talk*************************/
.talk-banner {
    width: 100%;
    height: 7.46rem;
    background: url("../images-new/talk/yangji.png") no-repeat;
    background-size: 3.08rem 3.98rem;
    background-position: 0.3rem 3rem;
}
.talk-free-mode {
    width: 100%;
    height: 7.27rem;
    background: #F5F7FC;
}
.talk-free-mode .swiper-talk-free {
    width: 100%;
    height: 4.65rem;
    position: relative;
    margin-top: 0.1rem;
    overflow: hidden;
}
.talk-free-mode .swiper-talk-free .im-scene-img-box {
    width: 3.75rem;
    height: 4.25rem;
}
.talk-free-mode .swiper-talk-free .talk-free-img1 {
    display: block;
    margin: 0 auto;
    width: 2.55rem;
    height: 4.25rem;
}
.talk-free-mode .swiper-talk-free .talk-free-img2 {
    display: block;
    margin: 0 auto;
    width: 2.82rem;
    height: 2.38rem;
    margin-top: 0.9rem;
}
.talk-free-mode .swiper-talk-free .swiper-talk-free-pagination {
    position: absolute;
    text-align: center;
}
.talk-anchor-mode {
    width: 100%;
    height: 5.55rem;
}
.talk-anchor-mode>img {
    width: 2.83rem;
    height: 2.35rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.1rem;
}
.talk-order-mode {
    width: 100%;
    height: 4.41rem;
    background: #F5F7FC;
}
.talk-order-mode>img {
    width: 2.20rem;
    height: 2.00rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.1rem;
}
/******************video*************************/
.video-banner {
    width: 100%;
    height: 7.46rem;
    background: url("../images-new/video/3mobile.png") no-repeat;
    background-size: 3.53rem 3.59rem;
    background-position: 0.11rem 3.2rem;
}
.video-multi-user {
    width: 100%;
    height: 6.66rem;
    background: #F5F7FC;
}
.video-multi-user .swiper-video-multi-user {
    width: 100%;
    height: 4.75rem;
    position: relative;
    overflow: hidden;
    margin-top: 0.1rem;
}
.video-multi-user .swiper-video-multi-user .video-multi-user-img-box {
    width: 3.75rem;
    height: 4.25rem;
}
.video-multi-user .swiper-video-multi-user .video-multi-user-img {
    display: block;
    margin: 0 auto;
    width: 2.55rem;
    height: 4.25rem;
}
.video-multi-user .swiper-video-multi-user .swiper-video-multi-user-pagination {
    position: absolute;
    text-align: center;
}
.video-multi-fun {
    width: 100%;
    position: relative;
    padding-bottom: 0.57rem;
}
.video-multi-fun .swiper-video-multi-fun {
    width: 100%;
    height: 2.38rem;
    position: relative;
    margin-top: 0.1rem;
    overflow: hidden;
}
.video-multi-fun .swiper-video-multi-fun .video-multi-fun-img-box {
    width: 3.75rem;
    height: 2.38rem;
}
.video-multi-fun .swiper-video-multi-fun .video-multi-fun-img {
    display: block;
    margin: 0 auto;
    width: 2.84rem;
    height: 2.38rem;
}
.video-multi-fun .video-multi-fun-pagination {
    height: 0.75rem;
    width: 100%;
    text-align: center;
    line-height: 0;
}
.video-multi-fun .video-multi-fun-pagination .video-multi-fun-pagination {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.3rem;
    box-shadow: 0rem 0rem 0.15rem 0rem rgba(0, 0, 0, 0.19);;
    display: inline-block;
    margin: 0.15rem 0.15rem 0 0.15rem;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.11rem;
    color: #DA4A4B;
}
.video-multi-fun .video-multi-fun-pagination .video-multi-fun-pagination-selected {
    box-shadow: 0rem 0rem 0.15rem 0rem rgba(0, 0, 0, 0.19);
    color: #ffffff;
    background: #CB4546;

}
.video-self-fit {
    width: 100%;
    height: 7.41rem;
    background: #F5F7FC;
}
.video-self-fit>img {
    width: 2.47rem;
    height: 2.18rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.2rem;
}
/******************live*************************/
.live-banner {
    width: 100%;
    height: 7.46rem;
    background: url("../images-new/live/live-yangji.png") no-repeat;
    background-size: 3.19rem 3.79rem;
    background-position: 0.25rem 3.1rem;
}
.live-sdk {
    width: 100%;
    background: #F5F7FC;
    padding-bottom: 0.33rem;
}
.live-sdk .push-img{
    width: 2.55rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.05rem;
    margin-bottom: -0.19rem;
}
.live-sdk .play-img{
    width: 2.83rem;
    height: 1.75rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.1rem;
}
.live-function {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0 0 1rem 0;
    box-sizing: border-box;
}
.live-function .function-box {
    width: 3.25rem;
    height: 3.45rem;
    margin: 0 auto;
    overflow: hidden;
}
@keyframes functionBoxHide {
    0% {height: 9.20rem}
    100% {height: 3.45rem}
}
@-webkit-keyframes functionBoxHide {
    0% {height: 9.20rem}
    100% {height: 3.45rem}
}
.live-function .function-box-hide {
    animation: functionBoxHide 1s linear;
    animation-fill-mode: forwards;
    -webkit-animation: functionBoxHide 1s linear;
    -webkit-animation-fill-mode: forwards;
}
@keyframes functionBoxShow {
    0% {height: 3.45rem}
    100% {height: 9.20rem}
}
@-webkit-keyframes functionBoxShow {
    0% {height: 3.45rem}
    100% {height: 9.20rem}
}
.live-function .function-box-show {
    animation: functionBoxShow 1s linear;
    animation-fill-mode: forwards;
    -webkit-animation: functionBoxShow 1s linear;
    -webkit-animation-fill-mode: forwards;
}
.live-function .function-box .function-item {
    height: 1.05rem;
    width: 3.25rem;
    padding-top: 0.1rem;
    box-sizing: content-box;
}
.live-function .function-box .function-item .function {
    padding-left: 1.15rem;
    width: 100%;
    height: 100%;
    background: #F5F7FC;
    box-sizing: border-box;
    position: relative;
}
.live-function .function-box .function-item .function .fun-title {
    line-height: 0.16rem;
    font-size: 0.15rem;
    padding: 0.22rem 0 0.12rem 0;
}
.live-function .function-box .function-item .function .fun-item {
    line-height: 0.18rem;
    font-size: 0.13rem;
    font-weight: lighter;
}
.live-function .function-box .function-item .fun-img {
    height: 0.78rem;
    width: 0.78rem;
    /*background: #C17373;*/
    position: absolute;
    left: 0.16rem;
    top: 0.1rem;
}
.live-function .function-box .function-item .fun-img img {
    height: 0.78rem;
    width: 0.78rem;
    float: left;
}
.live-function .live-function-how-hide {
    width: 100%;
    height: 0.35rem;
    text-align: center;
    font-size: 0.13rem;
    color: #2B93F7;
    line-height: 0.35rem;
    position: absolute;
    left: 0;
    bottom: 0.45rem;
}
@keyframes liveFunctionHowHideAngle {
    0% {transform: rotate(135deg);}
    100% {transform: rotate(-45deg);}
}
@-webkit-keyframes liveFunctionHowHideAngle {
    0% {transform: rotate(135deg);}
    100% {transform: rotate(-45deg);}
}
.live-function .live-function-how-hide-angle {
    width: 0.08rem;
    height: 0.08rem;
    border: none;
    border-right: 0.01rem solid #2B93F7;
    border-top: 0.01rem solid #2B93F7;
    position: absolute;
    left: 2.15rem;
    bottom: 0.57rem;
    box-sizing: border-box;
    transform-origin: 0.06rem 0.02rem;
    animation: liveFunctionHowHideAngle linear 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation: liveFunctionHowHideAngle linear 0.5s;
    -webkit-animation-fill-mode: forwards;
}
@keyframes liveFunctionHowHideAngleSelected {
    0% {transform: rotate(135deg);}
    100% {transform: rotate(-45deg);}
}
@-webkit-keyframes liveFunctionHowHideAngleSelected {
    0% {transform: rotate(-45deg);}
    100% {transform: rotate(135deg);}
}
.live-function .live-function-how-hide-angle-selected {
    animation: liveFunctionHowHideAngleSelected linear 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation: liveFunctionHowHideAngleSelected linear 0.5s;
    -webkit-animation-fill-mode: forwards;
}


/****************solution common**************************/
.solution-top {
    width: 100%;
    height: 3.01rem;
    color: #ffffff;
    position: relative;
}
.solution-top .banner-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 0;
}
.solution-top .title {
    padding-top: 1.09rem;
    text-align: center;
    font-weight: bold;
    font-size: 0.35rem;
    line-height: 0.35rem;
    position: relative;
    z-index: 1;
}
.solution-top .desc {
    padding-top: 0.1rem;
    text-align: center;
    font-size: 0.15rem;
    line-height: 0.18rem;
    position: relative;
    z-index: 1;
}
.solution-content .title {
    line-height: 0.2rem;
    font-size: 0.2rem;
    text-align: center;
    padding: 0.57rem 0 0.2rem 0;
}
.solution-content .desc {
    line-height: 0.24rem;
    font-size: 0.15rem;
    text-align: justify;
    padding: 0.1rem 0.64rem 0.05rem 0.64rem;
    width: 100%;
    box-sizing: border-box;
    font-weight: lighter;
}
.solution-function {
    width: 100%;
}
.solution-function .function-groups {
    width: 100%;
    padding: 0.1rem 0.25rem 0.5rem 0.25rem;
    overflow: auto;
    box-sizing: border-box;
}
.solution-function .function-groups img {
    width: 100%;
    float: left;
}
/*.solution-function .function-groups .function-item {*/
    /*width: 25%;*/
    /*height: 1.11rem;*/
    /*float: left;*/
/*}*/
/*.solution-function .function-groups .function-item>img {*/
    /*height: 0.57rem;*/
    /*width: 0.57rem;*/
    /*display: block;*/
    /*margin: 0 auto;*/
/*}*/
/*.solution-function .function-groups .function-item .text {*/
    /*height: 0.1rem;*/
    /*padding: 0.19rem 0 0.25rem 0;*/
    /*line-height: 0.1rem;*/
    /*font-size: 0.1rem;*/
    /*color: #333333;*/
    /*white-space: nowrap;*/
    /*text-align: center;*/
    /*box-sizing: content-box;*/
/*}*/
/***************game*************************/
.game-banner {
    background: url("../images-new/game/banner.png") no-repeat;
    background-size: 100% 100%;
}
.game-company {
    width: 100%;
    height: 1.62rem;
    background: url("../images-new/game/company.png") no-repeat;
    background-size: 100% 100%;
}
.game-channel {
    width: 100%;
    height: 4.34rem;
    background: #F5F7FC;
}
.game-channel .swiper-game-channel {
    width: 100%;
    height: 2.05rem;
    position: relative;
    margin-top: 0.1rem;
    overflow: hidden;
}
.game-channel .swiper-game-channel .game-channel-img-box {
    width: 3.75rem;
    height: 1.45rem;
}
.game-channel .swiper-game-channel .game-channel-img1 {
    display: block;
    margin: 0 auto;
    width: 2.66rem;
    height: 1.45rem;
}
.game-channel .swiper-game-channel .game-channel-img2 {
    display: block;
    margin: 0 auto;
    width: 2.57rem;
    height: 1.45rem;
}
.game-channel .swiper-game-channel .swiper-game-channel-pagination {
    text-align: center;
    position: absolute;
}
.game-communication {
    width: 100%;
    height: 4.09rem;
}
.game-communication>img {
    width: 2.59rem;
    height: 1.50rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.1rem;
}
.game-live {
    width: 100%;
    height: 4.24rem;
    background: #F5F7FC;
}
.game-live>img {
    width: 2.70rem;
    height: 1.63rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.1rem;
}
/***************social*************************/
.social-banner {
    background: url("../images-new/social/banner.png") no-repeat;
    background-size: 100% 100%;
}
.social-company {
    width: 100%;
    height: 1.62rem;
    background: url("../images-new/social/company.png") no-repeat;
    background-size: 100% 100%;
}
.social-anchor {
    width: 100%;
    height: 6.06rem;
    background: #F5F7FC;
}
.social-anchor>img {
    width: 2.6rem;
    height: 3.23rem;
    margin: 0 auto;
    margin-top: 0.1rem;
    display: block;
}
.social-multi-video {
    width: 100%;
    height: 7.12rem;
}
.social-multi-video .swiper-social-multi-video {
    width: 100%;
    height: 4.85rem;
    position: relative;
    margin-top: 0.1rem;
    overflow: hidden;
}
.social-multi-video .swiper-social-multi-video .social-multi-video-img-box {
    width: 3.75rem;
    height: 4.25rem;
}
.social-multi-video .swiper-social-multi-video .social-multi-video-img {
    display: block;
    margin: 0 auto;
    width: 2.55rem;
    height: 4.25rem;
}
.social-multi-video .swiper-social-multi-video .swiper-social-multi-video-pagination {
    text-align: center;
    position: absolute;
}
.social-live {
    width: 100%;
    height: 5.96rem;
    background: #F5F7FC;
}
.social-live .swiper-social-live {
    width: 100%;
    height: 3.83rem;
    position: relative;
    margin-top: 0.1rem;
    overflow: hidden;
}
.social-live .swiper-social-live .social-live-img-box {
    width: 3.75rem;
    height: 3.23rem;
}
.social-live .swiper-social-live .social-live-img1 {
    display: block;
    margin: 0 auto;
    width: 2.60rem;
    height: 3.23rem;
}
.social-live .swiper-social-live .social-live-img2 {
    display: block;
    margin: 0 auto;
    width: 2.62rem;
    height: 3.18rem;
}
.social-live .swiper-social-live .swiper-social-live-pagination {
    text-align: center;
    position: absolute;
}
.social-group {
    width: 100%;
    height: 6.71rem;
}
.social-group>img {
    width: 2.55rem;
    height: 4.25rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    display: block;
}
/***************education*************************/
.education-banner {
    background: url("../images-new/education/banner.png") no-repeat;
    background-size: 100% 100%;
}
.education-company {
    width: 100%;
    height: 1.62rem;
    background: url("../images-new/education/company.png") no-repeat;
    background-size: 100% 100%;
}
.education-open-class {
    width: 100%;
    background: #F5F7FC;
    padding-bottom: 0.45rem;
}
.education-open-class>img {
    width: 3.14rem;
    height: 2.25rem;
    margin: 0 auto;
    margin-top: 0.08rem;
    display: block;
}
.education-mini-class {
    width: 100%;
    padding-bottom: 0.45rem;
}
.education-mini-class>img {
    width: 3.13rem;
    height: 2.32rem;
    margin: 0 auto;
    margin-top: 0.08rem;
    display: block;
}
.education-private {
    width: 100%;
    background: #F5F7FC;
    padding-bottom: 0.42rem;
}
.education-private>img {
    width: 3.13rem;
    height: 2.33rem;
    margin: 0 auto;
    margin-top: 0.08rem;
    display: block;
}
.education-demand {
    width: 100%;
    padding-bottom: 0.37rem;
}
.education-demand>img {
    width: 2.55rem;
    height: 4.25rem;
    margin: 0 auto;
    margin-top: 0.08rem;
    display: block;
}
/***************wxapp*************************/
.wxapp-banner {
    background: url("../images-new/wxapp/banner.png") no-repeat;
    background-size: 100% 100%;
}
.wxapp-company {
    width: 100%;
    height: 1.62rem;
    background: url("../images-new/wxapp/company.png") no-repeat;
    background-size: 100% 100%;
}
.wxapp-scene {
    width: 100%;
    height: 6.89rem;
    background: #F5F7FC;
}
.wxapp-scene .swiper-wxapp-scene {
    width: 100%;
    height: 4.85rem;
    position: relative;
    margin-top: 0.1rem;
    overflow: hidden;
}
.wxapp-scene .swiper-wxapp-scene .wxapp-scene-img-box {
    width: 3.75rem;
    height: 4.25rem;
}
.wxapp-scene .swiper-wxapp-scene .wxapp-scene-img {
    display: block;
    margin: 0 auto;
    width: 2.55rem;
    height: 4.25rem;
}
.wxapp-scene .swiper-wxapp-scene .swiper-wxapp-scene-pagination {
    text-align: center;
    position: absolute;
}
/***************case-new*************************/
.case-new-banner {
    background: url("../images-new/case-new/banner.png") no-repeat;
    background-size: 100% 100%;
}

.case-new-company {
    width: 100%;
    height: 8.78rem;
    background: url("../images-new/case-new/tubiao.png") no-repeat;
    background-size: 100% 100%;
}