html {
    color: #252b3a;
}

.wotu-banner {
    box-shadow: 0 1px 4px 0 rgba(128, 132, 145, 0.20);
    background-image: url(../images/quickstartBGI.jpg);
}

.wotu_content {
    margin-bottom: 64px;
}

@media screen and (max-width:1920px) {
    html {
        font-size: 18px;
    }
}

@media screen and (max-width:1680px) {
    html {
        font-size: 16px;
    }
}

@media screen and (max-width:1440px) {
    html {
        font-size: 14px;
    }
}

@media screen and (max-width:1280px) {
    html {
        font-size: 12px;
    }
}

/* 选择模块 */
.changeStep {
    text-align: center;
    border-bottom: 1px solid #dfe1e6;
}

.changeStep ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.changeStep li {
    display: inline-block;
    padding-top: 24px;
    width: 12.5%;
}

.changeStep li:first-child {
    margin-left: 0;
}

.changeStep li:last-child {
    margin-right: 0;
}


.changeStep li .steps {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 4rem;
    position: relative;
}

.changeStep li:not(:last-child) .steps::after {
    content: '';
    position: absolute;
    top: 1.93rem;
    left: 5.8rem;
    display: inline-block;
    width: 5rem;
    height: .43rem;
    background: url(../images/dash-dot.png) no-repeat center;
    background-size: cover;
}

.changeStep li .stepTitle span {
    display: inline-block;
    height: 40px;
    font-size: 16px;
    margin-top: 12px;
    border-bottom: 3px solid transparent;
    transition: all .5s;
}

.changeStep li.active .stepTitle span {
    font-weight: bold;
    border-bottom-color: #c7000b;
}

/* 主体内容样式 */
.stepContainer {
    margin: 48px;
    text-align: left;
}

.contentDes {
    display: inline-block;
    background-color: rgba(233, 237, 250, 0.43);
    padding: 8px 24px;
    border-radius: 30px;
    color: #575d6c;
    line-height: 22px;
    margin-bottom: 24px;
    font-size: 14px;
}

.contentDes a {
    color: #526ecc;
}

.stepContent {
    display: flex;
}

.stepContent+.stepContent {
    margin-top: 48px;
}

/* 左侧样式 */
.leftContent {
    width: 301px;
}

.contentTitle {
    font-size: 20px;
    font-weight: bold;
}

.contentSubDes {
    width: 278px;
    margin-top: 12px;
    margin-bottom: 17px;
    font-size: 14px;
}

.contentCards {
    display: flex;
    flex-flow: wrap;
}

.subCards {
    display: inline-block;
    width: 144px;
    height: 52px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.10);
    border-radius: 2px;
    padding: 14px;
    margin-bottom: 12px;
    margin-right: 12px;
}

.subCards:nth-child(n+2) {
    margin-bottom: 0;
}

.subCards:nth-child(2n) {
    margin-right: 0;
}

.cardsTitle {
    display: inline-block;
    font-size: 16px;
}

.subCards:hover .cardsTitle {
    color: #c7000b;
}

.cardsGoto {
    float: right;
    width: 15.4px;
    height: 10.6px;
    background: url(../images/icon-goto.svg) no-repeat center;
    background-size: contain;
    margin-top: 3px;
}

.subCards:hover .cardsGoto {
    background-image: url(../images/icon-goto_hover.svg);
}

.subCards:last-child .cardsGoto {
    width: 18.8px;
    height: 18px;
    background-image: url(../images/download.svg);
}

.subCards:last-child:hover .cardsGoto {
    background-image: url(../images/download_hover.svg);
}

.contentBrief {
    width: 100%;
    padding: 8px 16px;
    background-color: rgba(233, 237, 250, 0.43);
    border-radius: 6px;
    margin-top: 16px;
}

.contentBrief>div {
    display: flex;
}

.contentBrief>div+div {
    margin-top: 8px;
}

.contentBrief span {
    font-size: 14px;
    color: #575d6c;
}

.contentBrief>div>span:first-child {
    white-space: nowrap;
}

.contentBrief a {
    color: #526ecc;
}

.contentOpt {
    margin-top: 48px;
}

.contentStep {
    margin-top: 19px;
}

.contentStep ul {
    margin-left: 7px;
}

.contentStep ul li {
    position: relative;
    border-left: 1px dashed #526ecc;
    padding-bottom: 24px;
}

.contentStep ul li:last-child {
    border: none;
}

.contentStep .contentIcon {
    position: absolute;
    top: 0;
    left: -9px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #526ecc;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.contentStep .contentName {
    font-size: 14px;
    font-weight: bold;
    margin-left: 14px;
    margin-bottom: 8px;
    line-height: 17px;
}

.contentStep .contentStepDes {
    margin-left: 14px;
    line-height: 22px;
    font-size: 14px;
}

.contentStep .contentStepDes a {
    color: #526ecc;
}

.preBtn,
.nextBtn {
    display: inline-block;
    width: 76px;
    height: 28px;
    border: 1px solid #adb0b8;
    border-radius: 2px;
    padding: 5px 0;
    font-size: 12px;
    text-align: center;
}

.preBtn {
    margin-right: 8px;
}

.preBtn:hover {
    border-color: #c7000b;
    color: #c7000b;
}

.nextBtn {
    border-color: #c7000b;
    color: #c7000b;
}

.nextBtn:hover {
    color: #fff;
    background-color: #c7000b;
}

.content_goto {
    margin-top: 56px;
}

.content_goto a {
    color: #526ecc;
    font-size: 20px;
    line-height: 28px;
}

.content_goto p {
    line-height: 22px;
    margin-top: 7px;
    font-size: 14px;
}

/* 右侧样式 */
.rightContent {
    width: calc(100% - 349px);
    margin-left: 48px;
}

/* 播放器样式 */
.vjs-control-bar * {
    color: #fff;
    text-align: center;
}

.vjs-default-skin .vjs-control:before {
    font-size: 1em;
    line-height: 2.5;
}

.vjs-default-skin .vjs-big-play-button {
    width: 3em;
    height: 3em;
    border: none;
    border-radius: 50%;
}

.vjs-default-skin .vjs-big-play-button:before {
    line-height: 3;
    color: #fff;
}

.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level {
    background-color: rgba(255, 255, 255, 0.7);
}

.vjs-default-skin .vjs-slider-handle:before {
    content: '';
}


/* 弹窗 */
.swal-content .msg {
    text-align: left;
}

@media (max-width: 768px) {
    .mb_container {
        padding-bottom: 20px;
    }

    .mb_bannerBgi {
        background-image: url(../images/quickstartBGI_mb.png);
    }

    .mb_content {
        padding: 10px 15px 0;
    }

    .mb_content ul li {
        width: 100%;
        background-color: #fff;
    }

    .mb_content ul .mb_stepContainer+.mb_stepContainer {
        margin-top: 4px;
    }

    .stepBox {
        height: 50px;
        line-height: 50px;
        vertical-align: middle;
        position: relative;
        padding: 0 20px;
    }

    .stepBox.active {
        box-shadow: inset 0 -1px 0 0 #eee;
    }

    .stepBox span {
        display: inline-block;
        vertical-align: middle;
    }

    .stepBox .mb_icon {
        width: 36px;
        height: 37px;
        background: url(../images/online_01.png) no-repeat center;
        background-size: contain;
        margin-right: 15px;
    }

    .mb_content .step2-box .mb_icon {
        background-image: url(../images/online_02.png);
    }

    .mb_content .step3-box .mb_icon {
        background-image: url(../images/online_03.png);
    }

    .mb_content .step4-box .mb_icon {
        background-image: url(../images/online_04.png);
    }

    .mb_content .step5-box .mb_icon {
        background-image: url(../images/online_05.png);
    }

    .mb_content .step6-box .mb_icon {
        background-image: url(../images/online_06.png);
    }

    .mb_content .step7-box .mb_icon {
        background-image: url(../images/online_07.png);
    }

    .mb_content .step8-box .mb_icon {
        background-image: url(../images/online_08.png);
    }

    .mb_content .stepBox .mb_subsite {
        font-size: 16px;
        font-weight: 600;
    }

    .mb_arrowdown {
        width: 6px;
        height: 4px;
        background: url(../images/arrowdown_mb.svg) no-repeat center;
        background-size: cover;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
    }

    .mb_arrowdown.mb_arrowup {
        background-image: url(../images/arrowup_mb.svg);
    }

    .stepBoxDropdown {
        padding: 15px;
        display: none;
    }

    .mb_stepContainer:first-child .stepBoxDropdown {
        display: block;
    }

    .mb_contentNote {
        padding: 12px;
        background-color: rgba(233, 237, 250, 0.43);
        border-radius: 6px;
        margin-top: 8px;
        margin-bottom: 4px;
    }

    .mb_contentNote div {
        display: flex;
    }

    .mb_contentNote span {
        color: #575d6c;
        line-height: 18px;
    }

    .mb_contentNote>div>span:first-child {
        white-space: nowrap;
    }

    .mb_contentNote span a {
        font-size: 12px;
        color: #526ecc;
    }

    .mb_contentDes {
        margin: 0;
        margin-bottom: 8px;
        line-height: 18px;
    }

    .mb_contentBrief {
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .subCards {
        width: calc((100% - 5px) / 2);
        height: 42px;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 12px;
        border: 1px solid #EEF0F5;
        box-shadow: none;
    }

    .cardsTitle {
        font-size: 14px;
    }

    .cardsGoto {
        width: 10px;
        height: 7px;
        background-size: cover;
    }

    .subCards:last-child .cardsGoto {
        background-image: none;
    }

    .contentStep {
        margin: 0;
    }

    .contentStep ul li:not(:last-child) {
        border-left-style: solid;
        padding-bottom: 15px;
    }

    .contentStep ul li:last-child {
        padding: 0;
        margin-bottom: 8px;
    }

    .contentStep .contentIcon {
        background: url(../images/online-icon-hexagon.svg) no-repeat center;
        background-size: cover;
        background-color: transparent;
    }

    .contentStep .contentName {
        margin-bottom: 4px;
        line-height: 20px;
    }

    .contentStep .contentStepDes {
        line-height: 20px;
    }

    .stepSubBox+.stepSubBox {
        margin-top: 20px;
    }

    .stepSubTitle {
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
    }

    .setpSubDes {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 8px;
        color: #575d6c;
    }

    .stepSubTitle+.setpSubDes {
        margin-top: 4px;
    }

    .stepSubTitle+.contentStep {
        margin-top: 15px;
    }

    .mb_contentVideo {
        width: 100%;
        height: 144px;
        position: relative;
        background: url(../../images/quickstart/quickstart_01.png) no-repeat center;
        background-size: cover;
        border-radius: 2px;
    }

    .mb_video2 {
        background-image: url(../../images/quickstart/quickstart_02.png);
    }

    .mb_video3 {
        background-image: url(../../images/quickstart/quickstart_03.png);
    }

    .mb_video4 {
        background-image: url(../../images/quickstart/quickstart_04.png);
    }

    .mb_video5 {
        background-image: url(../../images/quickstart/quickstart_05.png);
    }

    .mb_video6 {
        background-image: url(../../images/quickstart/quickstart_06.png);
    }

    .mb_video7_01 {
        background-image: url(../../images/quickstart/quickstart_07-1.png);
    }

    .mb_video7_02 {
        background-image: url(../../images/quickstart/quickstart_07-2.png);
    }

    .mb_video7_03 {
        background-image: url(../../images/quickstart/quickstart_07-3.png);
    }

    .mb_video7_04 {
        background-image: url(../../images/quickstart/quickstart_07-4.png);
    }

    .mb_video7_05 {
        background-image: url(../../images/quickstart/quickstart_07-5.png);
    }

    .mb_video8 {
        background-image: url(../../images/quickstart/quickstart_08.png);
    }

    .mb_videoMask {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .playBtn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: url(../images/icon-trackplay.svg) no-repeat center;
    }

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

    .video-play-mask {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .video-show {
        position: relative;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
    }

    .icon.close-bigger {
        position: absolute;
        width: 44px;
        height: 44px;
        background: url(../images/close-bigger.png) no-repeat center;
        cursor: pointer;
        top: -44px;
        right: 2px;
        opacity: 0.8;
        display: none;
    }

    .mb_bottom {
        padding-top: 10px;
        display: none;
    }

    .bottomBox {
        display: block;
        width: 100%;
        height: 120px;
        background: url(../images/quickstart-cardBanner.png) no-repeat center;
        background-size: cover;
        position: relative;
    }

    .bottomContent {
        position: absolute;
        top: 50%;
        left: 15px;
        right: 100px;
        transform: translateY(-50%);
    }

    .bottomTitle span {
        font-size: 16px;
        line-height: 22px;
        font-weight: bold;
        vertical-align: middle;
    }

    .bottomTitle .bottom_line {
        display: inline-block;
        width: 4px;
        height: 16px;
        background-color: #c7000b;
        border-radius: 1px;
        margin-right: 2px;
    }

    .bottomDes {
        margin-top: 7px;
        margin-left: 10px;
    }
}