* {
    margin: 0;
    padding: 0;
    list-style: none;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
body {
    font-size: .32rem;
    font-family: PingFang-SC-Bold;
    color: #242424;
    overflow-x: hidden
}
a {
    background-color: transparent;
    text-decoration: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}
a:active, a:hover {
    outline: 0
}
input {
    font-family: 'PingFang SC';
    outline: 0
}
input::-ms-clear {
    display: none
}
.clearfix:after, .clearfix:before {
    display: table;
    content: " "
}
.clearfix:after {
    clear: both
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.text-center {
    text-align: center
}
.text-left {
    text-align: left
}
.text-right {
    text-align: right
}
.fl {
    float: left
}
.fr {
    float: right
}
.pt20 {
    padding-top: .26666667rem
}
.hot-line {
    text-align: center;
    font-size: .29333333rem
}
.btn-com {
    display: inline-block;
    width: 4.74666667rem;
    line-height: .93333333rem;
    margin-bottom: .29333333rem;
    background: linear-gradient(to right, #711dd4, #4d27ff);
    color: #fff;
    font-size: .37333333rem;
    text-align: center;
    border: 0;
    border-radius: .46666667rem;
    box-shadow: 0 0 .26666667rem rgba(255, 255, 255, .4) inset, 0 0 .26666667rem rgba(148, 50, 230, .4)
}
.banner {
    height: 7.30666667rem
}
.banner img {
    width: 100%
}
.bg-grid {
    padding: .53333333rem .30666667rem;
    background: url(../img/grid.png) no-repeat center top;
    background-size: 10.06666667rem 100%
}
.bg-grid .vs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 2.89333333rem;
    margin-top: -1.4rem;
    padding-top: 1.81333333rem;
    background: url(../img/exbt.png) no-repeat center top;
    background-size: 2.77333333rem 2.89333333rem;
    position: relative;
    z-index: 10
}
.bg-grid .vs .img {
    width: 3.57333333rem;
    height: .72rem;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative
}
.bg-grid .vs .img1 {
    background-image: url(../img/exbtl.png);
    background-position: center
}
.bg-grid .vs .img2 {
    background-image: url(../img/exbtr.png);
    background-position: center right;
    right: -.2rem
}
.bg-white {
    padding: .66666667rem .33333333rem .42666667rem;
    background: #fff
}
.bg-white.pd1 {
    padding-left: .01333333rem;
    padding-right: .01333333rem
}
.bg-gray {
    padding: .66666667rem .33333333rem .42666667rem;
    background: #F5F4FF
}
.title {
    margin: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%
}
.title.item1 {
    width: 8.76rem;
    height: 1.04rem;
    background-image: url(../img/title1.png)
}
.title.item2 {
    width: 8.69333333rem;
    height: .45333333rem;
    line-height: .45333333rem;
    background-image: url(../img/title2.png);
    font-size: .48rem;
    font-weight: 700;
    color: #05011f;
    text-align: center
}
.title.item3 {
    width: 9.22666667rem;
    height: 1.02666667rem;
    background-image: url(../img/title3.png)
}
.title.item4 {
    width: 8.85333333rem;
    height: .97333333rem;
    background-image: url(../img/title4.png)
}
.title.item5 {
    width: 6.68rem;
    height: .97333333rem;
    background-image: url(../img/title5.png)
}
.title.item6 {
    width: 9.25333333rem;
    height: .97333333rem;
    margin-bottom: .4rem;
    background-image: url(../img/title6.png)
}
.title.item7 {
    width: 7.64rem;
    height: .45333333rem;
    background-image: url(../img/title7.png)
}
.title.item8 {
    width: 7.69333333rem;
    height: 1.04rem;
    background-image: url(../img/title8.jpg)
}
.title.item9 {
    width: 9.02666667rem;
    height: 1rem;
    background-image: url(../img/title9.png)
}
.title.item10 {
    width: 6.48rem;
    height: .97333333rem;
    background-image: url(../img/title10.png)
}
.example-list {
    padding-top: .53333333rem;
    position: relative
}
.example-list:after {
    content: '';
    width: 1.82666667rem;
    height: 1.24rem;
    background: url(../img/vs.png) no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 3.86666667rem;
    left: 3.54666667rem
}
.example-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2rem;
    padding: 0 .2rem 0 .30666667rem
}
.example-list li:nth-child(2n+1) {
    background: #F0E4FF
}
.example-list li:nth-child(2n+2) {
    background: #fff
}
.example-list li:first-child {
    border-radius: .18666667rem .18666667rem 0 0
}
.example-list li:last-child {
    border-radius: 0 0 .18666667rem .18666667rem
}
.example-list img {
    max-height: .4rem
}
.example-list p {
    width: 3.68rem;
    line-height: .4rem;
    font-size: .29333333rem
}
.layui-form {
    width: 7.2rem;
    margin: .77333333rem auto 0
}
.layui-form .layui-input-block {
    margin-left: 0;
    margin-bottom: .42666667rem;
    position: relative
}
.layui-form .icon {
    width: .48rem;
    height: .48rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: .30666667rem;
    left: .22666667rem
}
.layui-form .icon.icon-name {
    background-image: url(../img/user.png)
}
.layui-form .icon.icon-tel {
    background-image: url(../img/tel.png)
}
.layui-form .icon.icon-col {
    background-image: url(../img/col.png)
}
.layui-form .layui-input {
    height: 1.06666667rem;
    line-height: 1.06666667rem;
    padding-left: .86666667rem;
    border-radius: .53333333rem
}
.layui-form .btn-com {
    width: 100%;
    line-height: 1.06666667rem;
    margin-top: .24rem;
    border-radius: .53333333rem
}
.reason {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 9.36rem;
    height: 7.08rem;
    margin: .66666667rem auto .46666667rem;
    background: url(../img/rsbg.png) no-repeat center center;
    background-size: 100% 100%
}
.reason li {
    width: 4.13333333rem;
    line-height: .38666667rem;
    margin-bottom: .4rem;
    padding-left: .37333333rem;
    padding-right: .26666667rem;
    font-size: .29333333rem;
    color: #fff;
    letter-spacing: .01333333rem
}
.reason li:nth-child(1), .reason li:nth-child(2) {
    padding-top: 1.06666667rem
}
.reason li:nth-child(3), .reason li:nth-child(4) {
    padding-top: 1.2rem
}
.fight {
    display: flex;
    justify-content: space-between
}
.fight li {
    width: 2.90666667rem;
    height: 5rem;
    margin: .33333333rem -.33333333rem
}
.fight li img {
    width: 100%
}
.btn-group.layui-tab .layui-tab-title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto;
    padding: .26666667rem 0 .50666667rem;
    text-align: center;
    border: 0
}
.btn-group.layui-tab .layui-btn {
    width: 2.90666667rem;
    height: .72rem;
    margin: .26666667rem 0 0;
    padding: 0;
    line-height: .72rem;
    font-size: .29333333rem;
    border-radius: .36rem
}
.btn-group.layui-tab .layui-btn-primary {
    color: #242424
}
.btn-group.layui-tab .layui-btn-primary.layui-this {
    color: #fff;
    background: #5C39FF;
    border-color: #5C39FF;
    opacity: 1
}
.btn-group.layui-tab .layui-btn-primary.layui-this:after {
    display: none
}
.btn-group.layui-tab .layui-tab-content {
    padding: 0
}
.camp {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}
.camp img {
    width: 4.58666667rem;
    height: 2.37333333rem;
    margin-bottom: .14666667rem
}
.problem {
    width: 9.97333333rem;
    height: 9.70666667rem;
    padding: .30666667rem;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%
}
.problem.it1 {
    background-image: url(../img/pm1.png)
}
.problem.it1 .layui-btn {
    color: #3F69FF
}
.problem.it1 .bot li span:after {
    background: rgba(63, 104, 255, .2)
}
.problem.it2 {
    background-image: url(../img/pm2.png)
}
.problem.it2 .layui-btn {
    color: #FB8431
}
.problem.it2 .bot li span:after {
    background: rgba(253, 127, 52, .2)
}
.problem .top {
    height: 4.10666667rem;
    padding: .53333333rem 2.13333333rem 0 .4rem;
    color: #fff
}
.problem .top .tit {
    font-size: .42666667rem;
    font-weight: 700
}
.problem .top p {
    line-height: .4rem;
    margin: .33333333rem 0 .46666667rem;
    font-size: .29333333rem
}
.problem .top .layui-btn {
    height: .90666667rem;
    line-height: .90666667rem;
    padding: 0 .46666667rem;
    font-size: .36rem;
    border-radius: .45333333rem;
    background: #fff;
    border: 0
}
.problem .bot {
    padding: 0 .4rem
}
.problem .bot li {
    margin-top: .86666667rem;
    padding-left: .66666667rem;
    font-size: .37333333rem;
    position: relative
}
.problem .bot li:before {
    content: '\e623';
    font-family: layui-icon!important;
    font-size: .46666667rem;
    color: #DDDCDD;
    position: absolute;
    left: 0
}
.problem .bot li span {
    position: relative
}
.problem .bot li span:after {
    content: '';
    height: .30666667rem;
    position: absolute;
    left: -.06666667rem;
    right: -.13333333rem;
    bottom: -.04rem
}
.time {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .24rem 0 .33333333rem;
    position: relative
}
.time:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #EBE9F2;
    position: absolute;
    top: 3.09333333rem;
    left: 0
}
.time li {
    width: 25%;
    padding: .4rem .13333333rem;
    position: relative
}
.time li img {
    width: 2.05333333rem;
    height: 2.05333333rem
}
.time li:after {
    content: '';
    width: 1px;
    height: 2.05333333rem;
    background: #EBE9F2;
    position: absolute;
    right: 0;
    top: .4rem
}
.time li:nth-child(4n+4):after {
    display: none
}
.table-wrap {
    width: 9.33333333rem;
    margin-top: .48rem;
    padding: .10666667rem;
    border-radius: .18666667rem;
    box-shadow: 0 0 .26666667rem rgba(168, 151, 182, .3)
}
.table-wrap .layui-tab {
    margin: 0
}
.table-wrap .layui-tab-title {
    display: flex;
    justify-content: space-between;
    height: 1.10666667rem
}
.table-wrap .layui-tab-title li {
    flex: 1;
    height: 1.10666667rem;
    line-height: 1.10666667rem;
    min-width: auto;
    padding: 0;
    font-size: .32rem;
    position: relative
}
.table-wrap .layui-tab-title .layui-this {
    color: #6443FF
}
.table-wrap .layui-tab-title .layui-this:after {
    content: '';
    height: .12rem;
    background: url(../img/tab.png) no-repeat center bottom;
    background-size: 100% 100%;
    border: 0;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0
}
.table-wrap .layui-tab-content {
    margin-bottom: .37333333rem;
    padding: 0
}
.table-wrap .layui-tab-content img {
    width: 100%
}
.tab-bg {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0
}
.tab-bg a {
    display: block;
    width: 4.45333333rem;
    height: 1.76rem
}
.tab-bg img {
    width: 100%;
    height: 100%
}
.case {
    padding: .61333333rem 0 .72rem
}
.case li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 2.44rem;
    margin-top: .89333333rem
}
.case li:first-child {
    margin-top: 0
}
.case li img {
    width: 3.2rem
}
.case .text {
    width: 5.76rem
}
.case .text .tit {
    margin-bottom: .13333333rem;
    padding-bottom: .17333333rem;
    font-size: .37333333rem;
    color: #05011f;
    border-bottom: 1px solid #DEDEDE;
    position: relative
}
.case .text .tit:after {
    content: '';
    width: 1.12rem;
    height: .04rem;
    background: #8368FF;
    position: absolute;
    left: 0;
    bottom: -.02rem
}
.case .text .tit.text-right:after {
    left: auto;
    right: 0
}
.case .text p {
    line-height: .48rem;
    color: #A7A7AE
}
.question {
    height: 6.58666667rem;
    margin: .82666667rem 0;
    background: url(../img/ques_bg.png) no-repeat center center;
    background-size: contain;
    position: relative
}
.question a {
    width: 4.41333333rem;
    height: 1.88rem;
    position: absolute
}
.question img {
    width: 100%;
    height: 100%
}
.question .img1 {
    left: 0;
    top: 0
}
.question .img2 {
    right: 0;
    top: 0
}
.question .img3 {
    margin-top: -.93333333rem;
    margin-left: -2.2rem;
    top: 50%;
    left: 50%
}
.question .img4 {
    left: 0;
    bottom: 0
}
.question .img5 {
    right: 0;
    bottom: 0
}
.footer {
    padding-bottom: .93333333rem;
    background: #131422;
    color: #fff
}
.footer .tit {
    padding: .8rem 0 .53333333rem;
    font-size: .48rem;
    font-weight: 700;
    text-align: center
}
.footer .text-center {
    padding-bottom: .37333333rem
}
.footer .text-center .layui-btn {
    height: .48rem;
    line-height: .45333333rem;
    margin: 0 .16rem .21333333rem;
    padding: 0 .50666667rem;
    font-size: .28rem;
    border-radius: .24rem;
    background: 0 0
}
.footer .text-center .layui-btn-primary {
    color: #fff;
    border-color: #fff
}
.footer .layui-form {
    margin-top: 0
}
.footer .layui-form .layui-input-block {
    margin-bottom: .36rem
}
.footer .layui-form .layui-input {
    padding: 0 .26666667rem;
    border-radius: .06666667rem
}
.footer .layui-form .layui-btn-danger {
    width: 100%;
    height: 1.06666667rem;
    line-height: 1.06666667rem;
    background: #CD0014;
    font-size: .37333333rem;
    border-radius: .06666667rem;
    letter-spacing: .02666667rem
}