a:hover {
    text-decoration:none !important;
}
body {
    /*font-family: Arial;*/
}

li {
    list-style-type: none;
}



.jumbotron {
    background-image: url(/Images/Share/Banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 25.5rem;
}

.xkitnavwrapper {
    /*margin-top: 64px;*/
    min-height: 60px;
    background: #224558;
}
.fixed {
    z-index: 1;
    width: 100%;
    position: fixed;
    top: 60px;
    left:0;
    right:0;
}
.mrtop {
    margin-top: 64px;
}
.xkitnavbox {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    
}

    .xkitnavbox > p {
        margin-bottom: 0;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 19px;
        color: #FFFFFF;
    }

.xkitnav {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

    .xkitnav li {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: #FFFFFF;
        cursor: pointer;
    }

        .xkitnav li + li {
            margin-left: 2rem;
        }

.xkitnavbox2 {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    /*flex-wrap: wrap;*/
        overflow: hidden;
    max-width: 100vw;
}


.linktobuy {
    display: inline-block;
    width: 130px;
    height: 40px;
    background: #32A0E6;
    border-radius: 8px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    line-height: 40px;
    color: #FFFFFF;
    text-align: center;
}

    .linktobuy:hover {
        color: #fff;
    }

@media(min-width:576px) {
    .jumbotron {
        padding-top: 6.125rem;
    }
}

.containers {
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/*.jumbotron {
    padding: 7.8rem 2rem;
    margin-bottom: 0 !important;
    background: url("/Images/Index/X-KIT.png");
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    border-radius: 0 !important
}*/

.jumbotronafter {
    width: 0px;
    height: 0px;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(57,87,105,0.8);
    z-index: -1;
}



.Hometitle {
    color: rgba(255,255,255,1);
    line-height: 45px;
    font-size: 32px;
}

.Hometitle2 {
    color: rgba(255,255,255,1);
    line-height: 34px;
    font-size: 24px;
}

/*p {
    margin-bottom: 0;
}*/

.lead {
    max-width: 45rem;
    color: rgba(255,255,255,1);
    margin-bottom: 0 !important;
    font-size: 18px;
    text-align: center;
}

.Homebtn {
    margin-top: 2rem;
    margin-bottom: 0 !important;
}

    .Homebtn a {
        text-align: center;
        display: inline-block;
        width: 10rem;
        height: 3rem;
        background-color: #FC8B1A;
        border-color: #32A0E6 !important;
        line-height: 3rem;
        font-size: 1.25rem;
        box-shadow: 0px 10px 20px rgba(19, 78, 130, 0.1);
        border-radius: 42px;
        color: #fff;
        text-decoration: none;
    }

        .Homebtn a:hover {
            background-color: #2C8FCE !important;
        }

.avideo {
    background-image: url("/Images/Share/play.png");
    background-repeat: no-repeat;
    background-position: 32px center;
    padding-left: 2.5rem;
    width: 12.5rem !important;
    margin-right: 1.1875rem;
}

@media screen and (max-width: 576px) {
    .Homebtn a:first-child {
        margin-right: 0;
    }

    .Homebtn {
        text-align: center;
    }

    .containers {
        text-align: center;
    }

    .carousel-control-next, .carousel-control-prev {
        width: 20% !important;
    }
}

@media screen and (max-width: 752px) {
    .courserow > div {
        margin-top: 20px;
    }
}


.imgul {
    padding: 0;
    margin: 0;
}

    .imgul > li {
        cursor: pointer;
        display: inline-block;
        width: 120px;
        margin: 0 33px;
    }

        .imgul > li:hover p {
            color: #32A0E6;
        }

        .imgul > li:nth-last-child(-n+3):hover p {
            /*color: rgba(51,51,51,1);*/
            color: rgba(153, 153, 153, 1);
        }

        .imgul > li div.afterBox, .themediv div.afterBox {
            overflow: hidden;
            border-radius: 50%;
            position: relative;
        }

        .imgul > li:hover .after {
            display: block;
            width: 120px;
            height: 120px;
        }

.themediv {
    margin: 0 15px;
    display: inline-block;
    cursor: pointer;
}

    .themediv:nth-child(1) {
        margin-left: 10px;
    }

    .themediv:last-child {
        margin-right: 0;
    }

    .themediv:nth-child(1):hover p {
        color: #32A0E6;
    }

    .themediv:hover .after {
        display: block;
        width: 168px;
        height: 168px;
    }

.after {
    width: 0px;
    height: 0px;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(50,160,230,0.72);
}



.nopushbox {
    overflow: hidden;
    position: relative;
}

.nopush {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.48);
    width: 100%;
    height: 100%;
}

    .nopush img {
        margin-top: 6.6rem;
    }

    .nopush p {
        font-size: 12px;
        font-family: ArialMT;
        color: rgba(255,255,255,1);
        line-height: 14px;
        margin-top: 1rem;
        margin-bottom: 0;
    }

.imgul {
    padding: 30px 0px;
}

.list-inline-item:not(:last-child) {
    margin-right: 66px !important;
}

@media screen and (max-width: 576px) {
    /*.jumbotron {
        padding: 7.8rem 2rem !important;
        margin-bottom: 0 !important;
        background-position: center;
        -webkit-background-size: cover;
        background-size: cover;
        border-radius: 0 !important;
        text-align: center;
    }*/
    .jumbotron {
        padding: 6.25rem 0 !important;
    }

    .themediv {
        margin: 0px 18px !important;
        width: 76px !important;
    }

    #imgrow {
    }

    .imgul > li {
        margin: 0 16px !important;
        width: 50px;
    }

        .imgul > li:nth-child(2n) {
            /*margin-right: 0rem !important;*/
        }
}

.imgul li p {
    font-size: 0.875rem;
    color: rgba(51,51,51,1);
    line-height: 1rem;
    margin-top: 0.9375rem;
}

.imgul li:nth-last-child(-n+3) p {
    color: rgba(153, 153, 153, 1);
}

.models {
    /*min-height: 30rem;*/
    background: rgba(245,245,245,1);
    padding: 60px 0;
}

.models-title {
    font-size: 24px;
    color: rgba(51,77,94,1);
    line-height: 28px;
}

.models-text {
    font-size: 1rem;
    color: rgba(51,51,51,1);
    line-height: 16px;
}

.models-p {
    font-size: 14px;
    color: rgba(51,51,51,1);
    line-height: 16px;
    margin-top: 1rem;
}

.software-title {
    font-size: 24px;
    color: rgba(51,77,94,1);
    line-height: 30px;
    padding-top: 3.68rem;
}

.software-text {
    font-size: 16px;
    color: rgba(51,51,51,1);
    line-height: 18px;
    margin-top: 12px;
}

.softp {
    font-size: 14px;
    color: rgba(51,51,51,1);
    line-height: 16px;
    margin-top: 1.6rem;
    text-align: center;
}

    .softp > span {
        font-size: 20px;
        color: rgba(51,77,94,1);
        line-height: 23px;
        margin-left: 20px;
        margin-right: 7px;
    }

.softimg {
    margin-top: 69px;
}



.rowboder > div {
    background: rgba(255,255,255,1);
    border-radius: 12px;
    border: 1px solid rgba(238,238,238,1);
    width: 380px;
    height: 280px;
    margin: 6px;
}

.rowboder {
    margin-bottom: 3.625rem;
    margin-top: 22px;
}

@media screen and (max-width: 576px) {
    .rowboder {
        justify-content: center;
    }

        .rowboder > div {
            margin-left: 1rem;
            margin-right: 1rem;
            width: 110px !important;
            height: 110px !important;
            margin: 0 3px;
        }

    .softimg {
        max-width: 69px;
        width: 32px;
    }


    .nopush img {
        margin-top: 24px;
    }

    .rowboder > div:first-child {
        margin-left: 0;
    }

    .rowboder > div:last-child {
        margin-right: 0;
    }

    .softp > span {
        display: block;
        line-height: 30px !important;
    }

    .softimg {
        margin-top: 24px !important;
    }

    .card-p {
        margin-top: 16px !important;
        font-size: 14px !important;
    }
}
/*.rowboder > div:nth-child(2) {
        margin-left: 1rem;
        margin-right:1rem;
    }*/
.card-p {
    font-size: 20px;
    color: rgba(51,51,51,1);
    line-height: 18px;
    margin-top: 43px;
    /*margin-bottom: 69px;*/
}

.downloadlink {
    color: #32A0E6 !important;
    font-size: 1rem;
    color: rgba(50,160,230,1);
    line-height: 18px;
}

.scanp {
    font-size: 1rem;
    font-family: Arial;
    color: rgba(102,102,102,1);
    line-height: 18px;
}

.anzhuocode {
    width: 8.25rem;
    height: 8.25rem;
    margin-top: 36px !important;
}

.anzhuop {
    margin-top: 11px !important;
}

@media screen and (max-width:576px) {
    .winp {
        /*margin-bottom:0 !important;
        margin-top:5px !important;*/
    }

    .downloadlink {
        display: none;
    }

    .anzhuocode {
        max-height: 60px;
        max-width: 60px;
        margin-top: 10px !important;
    }

    .anzhuop {
        margin-top: 3px !important;
    }

    .scanp {
        display: none;
    }
}

.downloadlink:hover {
    color: #2C8FCD !important;
}

.card-deck .card {
    margin-right: 0 !important;
    margin-top: 2.3rem;
    margin-bottom: 3.625rem;
}

.contentDo-detail {
    text-align: center;
    background: #DCE6ED;
    margin-bottom: 0;
}

.contentDo-txt {
    display: inline-block;
    color: rgba(51,77,94,1);
    padding: 1.75rem 1.3rem;
    margin-bottom: 0;
}

.contentDo-btn {
    display: inline-block;
    width: 8.25rem;
    height: 3rem;
    background: rgba(50,160,230,1);
    border-radius: 24px;
    line-height: 3rem;
    color: rgba(255,255,255,1);
}

.apptips {
    font-size: 14px;
    color: rgba(51,77,94,1);
    line-height: 16px;
    background: rgba(224,233,239,1);
    border-radius: 4px;
    display: inline-block;
    padding: 12px 26px;
    margin-top: 1.5rem;
    margin-bottom: 0 !important;
}

.introduction {
    /*min-height: 42.5rem;*/
    background: #F2F6FF;
    padding: 6.375rem 0;
}

.introbox {
    max-width: 53.8125rem;
    display: inline-block;
    margin-top: 3.0625rem;
}

    .introbox > p {
        text-align: left;
        font-size: 1rem;
        color: rgba(51,51,51,1);
        line-height: 1.5rem;
    }

        .introbox > p > span {
            font-size: 1.5rem;
            color: rgba(51,77,94,1);
            line-height: 1.5rem;
        }

    .introbox > img {
        text-align: center;
        margin-top: 0.5rem;
    }

@media screen and (max-width:576px) {
    /*.introduction {
        display: none;
    }*/
}

.bannerdetail-title {
    font-size: 2.25rem;
    font-family: Arial;
    font-weight: bold;
    line-height: 1.5rem;
    color: #666666;
}

.bannerdetail-text {
    font-size: 1.25rem;
    color: #999999;
    margin-top: 1rem;
    padding-left: 0;
    font-family: Arial;
    font-weight: 400;
    line-height: 1.75rem;
    max-width: 30rem;
}



.playtitle {
    text-align: center;
    font-size: 2rem;
    font-family: Arial;
    font-weight: bold;
    line-height: 1.5rem;
    color: #666666;
    padding-top: 5rem;
    /*padding-bottom: 2rem;*/
    padding-bottom: 1.125rem;
    margin: 0 !important;
}

    .playtitle.parth {
        margin-bottom: 39px !important;
    }

.playrow {
    border-bottom: 2px solid #CCCCCC;
}

.choseitem {
    cursor: pointer;
    position: relative;
}

    .choseitem:hover .chosep {
        font-weight: bold;
        color: #FC8B1A;
    }

.chosep {
    font-size: 1.25rem;
    font-family: Arial;
    font-weight: 400;
    line-height: 0.875rem;
    color: #666666;
    margin-bottom: 2.5rem;
    white-space: nowrap;
    text-align: center;
}

    .chosep.on {
        font-weight: bold !important;
        color: #FC8B1A !important;
    }

.threaddiv {
    width: 100%;
    position: relative;
}

.thread {
    width: 100%;
    border-top: 2px solid #CCCCCC;
}

.triimg {
    width: 2rem;
    position: absolute;
    bottom: -3.1px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: #fff;
}

    .triimg.on {
        display: block;
    }

.bigpic {
    display: none;
}

    .bigpic.on {
        display: block;
    }

.howtoplay, .howtocreat {
}

.howtoplay {
    padding-bottom: 5rem;
}

.howtocreat {
    background: #F7F9FA;
    padding-bottom: 7.5rem;
}

.creartitle {
    font-size: 2rem;
    font-family: Arial;
    font-weight: bold;
    line-height: 2.5rem;
    color: #666666;
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 3.3125rem;
    margin: 0 !important;
}

.playbtn {
    padding-bottom: 5rem;
}

.imgbox {
    position: relative;
}

.textWrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 5rem;
    background: gray;
    width: 66.25rem;
    background: #F2F6FF;
    border-radius: 0px 0px 0.75rem 0.75rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-wrap: nowrap;
}

    .textWrapper span:first-child {
        font-size: 1.5rem;
        font-family: Arial;
        font-weight: bold;
        color: #2680EB;
        margin-left: 1.1875rem;
        white-space: nowrap;
    }

    .textWrapper span:nth-child(2) {
        font-size: 1.0625rem;
        font-family: Arial;
        font-weight: 400;
        color: #666666;
        margin-left: 1.1875rem;
        white-space: nowrap;
        flex-grow: 1;
        text-align: left;
    }

    .textWrapper > p {
    }

@media screen and (max-width: 768px) {
    .textWrapper span:first-child {
        margin-top: 0.5rem;
    }

    .textWrapper {
        position: relative;
        /*height: 10rem;*/
        height: 7rem;
        background: gray;
        width: 66.25rem;
        background: #F2F6FF;
        border-radius: 0 0 0.75rem 0.75rem;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
    }

        .textWrapper span:nth-child(2) {
            white-space: normal;
            margin-left: 0;
            padding: 0 15px;
            flex-grow: 0;
            height: 4rem;
            text-align: center;
        }

    .imgbox > img {
        background-color: #fff;
        /*border-radius: 0.75rem 0.75rem 0 0;*/
    }

    .bannerdetail-title {
        text-align: center;
    }

    .bannerdetail-text {
        text-align: center;
    }
}

.carousel-control-next {
    right: -98px;
}

.carousel-control-prev {
    left: -98px;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 4rem;
    height: 4rem;
    /*background-color: rgba(43, 86, 183, 0.4);*/
    background-color: rgba(59, 141, 254, 0.2);
    border-radius: 50%;
    background-size: 50%;
}

.carousel-inner {
    margin: 0 auto !important;
    max-width: 66.25rem;
    border-radius: 0.75rem !important;
    box-shadow: 0px 20px 40px rgba(19, 78, 130, 0.2);
}

.carousel-indicators {
    bottom: -3.8125rem !important;
}

    .carousel-indicators li {
        width: 2rem !important;
        height: 0.5rem !important;
        /*background: #FFFFFF;*/
        background: rgba(209, 227, 251, 1);
        /*opacity: 0.2;*/
        border-radius: 1rem;
        border: none !important;
        margin: 0 0.5rem !important;
    }

    .carousel-indicators .active {
        background: rgba(252, 139, 26, 1) !important;
    }

.applicationWrapper {
    padding: 5.25rem 0;
}

.linkwrapper {
    background: #F2F6FF;
    padding: 2.25rem 0;
}

.linkbtn {
    white-space: nowrap;
    width: 10rem;
    height: 3rem;
    background: #FC8B1A;
    box-shadow: 0px 10px 20px rgba(19, 78, 130, 0.1);
    line-height: 3rem;
    border-radius: 2.625rem;
    display: inline-block;
    text-align: center;
    font-size: 1.25rem;
    font-family: Arial;
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: none;
}

    .linkbtn:hover {
        color: #FFFFFF;
        background-color: #228FEF;
        text-decoration: none;
    }


@media screen and (max-width: 576px) {
    /*.honesty {
        padding: 2.875rem 0 !important;
    }*/

    .carousel-control-next-icon, .carousel-control-prev-icon {
        background-size: 40%;
        width: 3rem;
        height: 3rem;
    }

    .chosep {
        font-size: 0.75rem;
    }

    #linkus {
        margin-top: 1rem;
    }

    .linkspan {
        display: inline-block;
        font-size: 1rem;
        line-height: 2rem;
    }

    .linkspandiv {
        margin-top: 1rem !important;
    }
}

@media screen and (max-width: 768px) {


    .carousel-control-next {
        right: 0;
    }

    .carousel-control-prev {
        left: 0;
    }
}

@media screen and (max-width: 768px) {
    .introduction {
        padding: 3.5rem 0;
    }
}

.videoWrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #232526;
    z-index: 11000;
    /*padding:56% 0 0;*/
}

#videoplayer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    width: 100%;
    /*height: 100%;*/
    background: #232526;
    /*transform:translate(-50%,-50%);
   -webkit-transform:translate(-50%,-50%);*/
}

#closevideo {
    position: fixed;
    /*top:50%;
   left:50%;*/
    top: 35px;
    right: 35px;
    cursor: pointer;
    z-index: 11099;
}

@media screen and (min-width: 992px) {
    #videoplayer {
        /*width: 80%;
        height: 60%;*/
        width: 960px;
        object-fit: fill;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        background: #000;
    }
}

.carousel-control-next-icon {
    background-image: url(/Images/Share/right.svg) !important;
}

.carousel-control-prev-icon {
    background-image: url(/Images/Share/left.svg) !important;
}

@media screen and (max-width: 768px) {
    .jumbotron {
        /*padding: 6.25rem 0 !important;*/
        padding: 2rem 0 8rem !important;
    }
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-size: 40%;
}

.howtoplay input, .honesty input {
    display: none;
}

article {
    /*width: 0;
    height: 145px;*/
    /*width: 200px;*/
    height: 0;
    overflow: hidden;
    -webkit-transition: height .25s linear, opacity .2s linear;
    transition: height .25s linear, opacity .3s linear;
    position: relative;
    top: 5px;
    margin-bottom: 0;
    padding: 0;
    margin-right: 10px;
    opacity: 0;
    /*float: left;*/
}

input:checked + label, label:hover {
    /*background: #4D90FE;*/
    /*background: -webkit-linear-gradient(top,#4D90FE,#4787ED);
    border: solid 1px rgba(0,0,0,.15);*/
    /*color: white;*/
    /*box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);*/
    font-size: 24px;
    font-family: Arial;
    font-weight: bold;
    line-height: 28px;
    color: #FC8B1A;
}

.honesty form > div:nth-child(1) input:checked + label {
    color: #29d272 !important;
}

.honesty form > div:nth-child(2) input:checked + label {
    color: #3b8dfe !important;
}

.honesty form > div:nth-child(3) input:checked + label {
    color: #ff6b3d !important;
}

.honesty form > div:nth-child(4) input:checked + label {
    color: #fe9b06 !important;
}

.honesty {
    padding: 5rem 0;
    background: #F7F9FA;
}

    .honesty label {
        font-size: 24px;
        font-family: Arial;
        font-weight: bold;
        line-height: 28px;
        color: #666666;
        cursor: pointer;
        /*margin-bottom:15px;*/
    }

article p {
    font-size: 16px;
    font-family: Arial;
    font-weight: 400;
    line-height: 28px;
    color: #999999;
    max-width: 468px;
}

/*  js中动态计算高度，不能在这CSS固定死了
    div > input:checked ~ article {
    height:138px;
    opacity: 1;
}*/


.honesty form {
    /*border-left: 4px solid #F3F3F3;*/
    min-height: 336px;
}

    .honesty form > div {
        padding: 0 15px;
        padding-bottom: 20px;
    }

.leftborder {
    padding-bottom: 0px !important;
}

    .leftborder + .leftbod {
        padding-top: 20px;
    }

.honesty form > div:last-child {
    padding-bottom: 5px;
}

.leftborder {
    border-left: 4px solid #FC8B1A;
}

.leftbod {
    border-left: 4px solid #F3F3F3;
}

.honesty form > div:first-child.leftborder {
    border-left: 4px solid #29D272 !important;
}

.honesty form > div:nth-child(2).leftborder {
    border-left: 4px solid #3B8DFE !important;
}

.honesty form > div:nth-child(3).leftborder {
    border-left: 4px solid #FF6B3D !important;
}

.honesty form > div:nth-child(4).leftborder {
    border-left: 4px solid #FE9B06 !important;
}



.workstext {
    font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    line-height: 28px;
    color: #999999;
    margin: 0rem auto !important;
    
}

#worksvideo {
    /*width: 100%;*/
    width: 960px;
    border-radius: 8px;
    /*margin-bottom: 5rem;*/
}

.howtoworks {
    background-image: url(/Images/Share/2222222.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 5rem;
}

.playtext {
    font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    line-height: 28px;
    color: #999999;
    margin: 0 auto;
    margin-bottom: 2.75rem !important;
    max-width: 1177px;
}
.playtext1 {
    font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    line-height: 28px;
    color: #999999;
    margin: 0 auto;
    margin-bottom: 2.75rem !important;
    max-width: 1155px;
}
.playtext2{
    font-size: 18px;
font-family: Arial;
font-weight: 400;
line-height: 28px;
color: #999999;
 margin: 0 auto;
    margin-bottom: 2.75rem !important;
    max-width: 975px;
}
.playtext3{
    font-size: 18px;
font-family: Arial;
font-weight: 400;
line-height: 28px;
color: #999999;
 margin: 0 auto;
    margin-bottom: 2.75rem !important;
    max-width: 1007px;
}

.thehub {
    background-image: url(/Images/Share/33333.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 5rem;
}

    .thehub.partlist {
        background: #fff !important;
    }

#honestyvideobox {
    pointer-events: none;
}

    #honestyvideobox video {
        display: none;
    }

@media screen and (min-width:1200px) {
    #honestyvideobox video {
        object-fit: fill;
        width: 672px;
        height: 380px;
        border-radius: 8px;
    }
}

@media screen and (max-width:1199px) {
    #honestyvideobox video {
        object-fit: contain;
        width: 100%;
        /*min-height: 315px;*/
        border-radius: 8px;
    }
}

@media screen and (max-width:767) {
    #honestyvideobox {
        margin-top: 1rem;
    }
}

.swipwrapper {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-grow: 1;
    position: relative;
    border-bottom: solid 4px #f3f3f3;
}

.swipbox {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    cursor: pointer;
    /*flex:1 1 auto;*/
}

    .swipbox label {
        font-size: 20px;
        font-family: Arial;
        font-weight: 400;
        line-height: 14px;
        color: #666666;
        white-space: nowrap;
        cursor:pointer;
    }

    .swipbox input {
        display: none;
    }

    .swipbox.on {
        border-bottom:2px solid  #FC8B1A;
    }

        .swipbox.on label {
            font-size: 20px;
            font-family: Arial;
            font-weight: 400;
            line-height: 14px;
            color: #FC8B1A;
        }

.swipthred {
    /*position: absolute;
    width: 100%;*/
    height: 4px;
    background: #F3F3F3;
    opacity: 1;
    border-radius: 8px;
    bottom: -10px;
   
}
.swipwrapper2 {
    border-bottom-style:inset;
    border-bottom-color:#F3F3F3;
    border-bottom-width:2px;
}

.swipthredspan {
    width: 190px;
    height: 4px;
    background: #FC8B1A;
    border-radius: 8px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
}

.martop {
    margin-top: 3.75rem;
}

#video7, #video8,#video9, #video10{
    display: none;
}

.apptext7, .apptext8,.apptext9 {
    display: none;
}
.morecl {
    padding: 6px;
    text-align: center;
    /*margin: auto;*/
    width: 152px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 42px;
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #32A0E6;
    border: 1px solid #3B8DFE;
    /*box-shadow: 0px 10px 20px rgb(19 78 130 / 10%);*/
    margin-top:8px;
}
    .morecl:hover {
        background-color:#32A0E6;
        color:#fff;
    }
.apptext span {
    color: rgba(252, 139, 26, 1);
    font-weight: bold;
}

.howtoplay video {
    width: 100%;
    border-radius: 8px;
}

.apptext {
    font-size: 16px;
    font-family: Arial;
    font-weight: 400;
    line-height: 28px;
    color: #999999;
    /*margin-right: -30px;*/
}

.swippar {
    padding-left: 1rem;
    padding-right: 1rem;
    /*position:relative;*/
}

@media screen and (max-width:767px) {
    .swippar {
        display: none !important;
    }

    .swipperBox {
        display: block !important;
    }
}

.swipperBox {
    display: none;
}


.swiper-container {
    width: 100%;
    height: 100%;
}

.swipwrapper2 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 80%;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/*.swiper-slide:nth-child(2n) {
      width: 60%;
    }

    .swiper-slide:nth-child(3n) {
      width: 40%;
    }*/
.swipwrapper2 .swiper-slide {
    width: 60%;
}

    .swipwrapper2 .swiper-slide > div {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: flex-start;
    }

        .swipwrapper2 .swiper-slide > div label {
            font-size: 20px;
            font-family: Arial;
            font-weight: 400;
            line-height: 14px;
            color: #666666;
            white-space: nowrap;
        }

            .swipwrapper2 .swiper-slide > div label.on {
                font-weight: 400;
                color: #FC8B1A !important;
            }

.bottomscroller {
    /*width: 100vw;*/
    margin: 0 auto;
    height: 4px;
    background: #F3F3F3;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    width: calc(100% - 30px);
}

.scrollerSpan {
    display: inline-block;
    width: 160px;
    height: 4px;
    background: #FC8B1A;
    border-radius: 8px;
    position: absolute;
    top: 0;
    /*left: 10px;*/
    left: 0;
    transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
}

.swipperwrappers {
    width: 100%;
    overflow: hidden;
}

.ullist {
    display: flex;
    display: -webkit-flex;
    margin: 0 !important;
    padding: 0 !important;
    /*position: relative;*/
    overflow: hidden;
    height: 64px;
}

    .ullist li {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        /*position: absolute;*/
    }

        .ullist li span {
            white-space: nowrap;
        }

        .ullist li.on {
            /*border-bottom:2px solid #FC8B1A;*/
        }

            .ullist li.on span {
                color: #FC8B1A !important;
            }

        .ullist li:first-child {
            left: 5px;
            margin-left:5px;
        }

    .ullist li {
        /*margin-right: 64px;*/
        margin-right:15px;
        transition: all 0.25s linear;
        -webkit-transition: all 0.25s linear;
    }

        .ullist li:nth-child(2) {
            left: 270px;
        }

        .ullist li:nth-child(3) {
            left: 480px;
        }
         .ullist li:nth-child(4) {
            left: 690px;
        }

        .ullist li:nth-child(5) {
            left: 800px;
        }

.metiabox {
    /*padding-top: 6rem;
    padding-bottom: 6rem;*/
    background-image: url(/Images/Share/metaback.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    .metiabox video {
        border-radius: 8px;
    }

.metiap {
    max-width: 293px;
    font-size: 16px;
    font-family: Arial;
    font-weight: 400;
    line-height: 28px;
    color: #666666;
}

.metiawrapper {
    width: 100%;
    position: relative;
}

    .metiawrapper video {
        width: 960px;
    }

@media screen and (max-width:992px) {
    .metiawrapper video {
        width: 100%;
    }

    #worksvideo {
        width: 100% !important;
        /*width:calc(100% - 30px );*/
    }
}

.grayback {
    width: 100%;
    height: 22.5rem;
    background: #F7F9FA;
    border-radius: 8px;
    position: absolute;
    bottom: -6rem;
    left: 0;
    right: 0;
    z-index: -1;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-grow: 1;
}

.productsetWrapper {
    background: rgba(247, 249, 250, 1);
    width: 100%;
    padding-bottom: 40px;
}

.productsetrow {
    margin-top: 40px;
}

@media screen and (max-width:1200px) {
    .grayback {
        bottom: -11rem !important;
    }
}

@media screen and (max-width:576px) {
    .grayback img {
        width: 90px !important;
    }

    .metiabox video {
        width: 100%;
    }
}
/*.grayback > div {
        min-height: 22.5rem;
    }*/

/*.grayback > img {
        width: auto !important;
    }*/

.grayback > p {
    max-width: 659px;
    font-size: 16px;
    font-family: Arial;
    font-weight: bold;
    line-height: 28px;
    color: #666666;
    text-align: left;
}

.videback {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

    .videback img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

.metiabox iframe {
    border-radius: 8px;
}

@media screen and (min-width:1200px) {
    #youtuvideo {
        width: 680px;
        height: 353px;
    }
}

@media screen and (max-width:1199px) {
    #youtuvideo {
        width: inherit;
        height: 353px;
    }
}

@media screen and (max-width:767px) {
    .metiadiv {
        text-align: center;
    }

    .metiap {
        max-width: 100% !important;
        margin-top: 1rem;
    }
}

.linkbox {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:767px) {
    .videorow {
        margin: 0 !important;
    }

    .linkbox {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .linkspan1 {
        margin-left: 0rem !important;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .linkspan2 {
        margin-left: 0rem !important;
    }
}
/*.linkspan {
    font-size: 1.25rem;
    font-family: ArialMT;
    color: #666666;
    padding-left: 3rem;
}*/

.linkspan1 {
    white-space: nowrap;
    margin-left: 3rem;
    padding-left: 2.5rem;
    background-image: url(/Images/Share/phone.png);
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    font-size: 1.25rem;
    font-family: ArialMT;
    color: #666666;
}

.linkspan2 {
    padding-left: 2.5rem;
    margin-left: 3rem;
    background-image: url(/Images/Share/email.png);
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    font-size: 1.25rem;
    font-family: ArialMT;
    color: #666666;
}

.imgxiba {
    margin: 3.125rem 0 3.5rem 0;
}

.workimglist {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
    padding: 0 !important;
}

    .workimglist li {
        flex-grow: 1;
    }

        .workimglist li p {
            font-size: 16px;
            font-weight: 400;
            line-height: 18px;
            color: #5DA0FE;
        }

.worksrow {
}

.videodiv {
    margin: 0 auto;
}

    .videodiv iframe {
        border-radius: 8px;
    }

@media screen and (min-width:1024px) {
    .videodiv {
        width: 960px;
        height: 540px;
    }
}

@media screen and (max-width:1023px) {
    .videodiv {
        width: 100% !important;
    }
}

.vp-controls {
    display: none !important;
}

.swipwrapper1{
    width: 100%;
    height: 100%;
    max-width:100%;
    margin-left:180px;
}

.swipwrapper1 .swiper-wrapper {
    /*justify-content: center;*/
    /*max-width:545px;*/
}


.swipwrapper1 .swiper-slide {
    width:80px;
     cursor: pointer;
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-left:20px;
}

    .swipwrapper1 .swiper-slide > a {
        line-height: 60px;
        text-decoration: none;
        white-space: nowrap;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #FFFFFF;
    }
@media screen and (max-width:768px) {
    .xkitnavboxp {
        display:none;
    }
    .linktobuy {
        display:none;
    }
    .swipwrapper1{
        margin-left:0px;
    }
    .swipwrapper1 .swiper-slide{
        margin-left:0px;
    }
    /*.xkitnavwrapper {
        margin-top:49px;
    }*/
}
.trandom {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.5s linear, opacity 0.5s linear;
    transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
}
.trandom.hide {
    transform: translateY(200px) !important;
    opacity: 0 !important;
}
.swiper-notification{
    display:none;
}