@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    outline: 0;
    color: inherit;
    font-weight: 400;
}

@font-face {
    font-family: "Huawei Sans";
    src: url("../../commons/fonts/HuaweiSans-Regular.ttf");
}

html {
    font-size: 14px
}

body {
    font-family: "Huawei Sans", "方正兰亭黑简体";
}

button {
    font-family: "Huawei Sans", "方正兰亭黑简体";
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

input,
textarea {
    border: 0;
    background: 0 0;
}

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

@media screen and (min-width: 1441px) and (max-width: 1681px) {
    html {
        font-size: 14px !important
    }
}

@media screen and (min-width: 1367px) and (max-width: 1440px) {
    html {
        font-size: 14px !important
    }
}

@media screen and (max-width: 1366px) {
    html {
        font-size: 12px !important
    }
}

body {
    background-color: #f8f9ff;
}

body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f0f2f5
}

body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #bfc3c6
}

body::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #f0f2f5
}

.mb-0 {
    margin-bottom: 0 !important
}

.iotSection {
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 10px;
    transition: padding .3s ease-out;
}

.iotSection .section-title {
    text-align: center;
    margin-bottom: 30px;
}

.iotSection .section-title .title {
    font-weight: normal;
    font-size: 36px;
    line-height: 46px;
    color: #252b3a;
    text-align: center;
}

.product-wrapper {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.product-scene-tab {
    font-size: 0;
    text-align: center;
}

.scene-tab {
    display: inline-block;
    text-align: center;
    position: relative;
    cursor: pointer;
    vertical-align: top;
}

.product-scene-tab .scene-tab {
    display: inline-block;
    text-align: center;
    position: relative;
    cursor: pointer;
    vertical-align: top;
    width: 220px;
}

.product-application2 .prod-area.scene[data-number="3"] .scene-tab {
    width: 300px;
}

.product-scene-tab .scene-tab + .scene-tab {
    margin-left: 20px;
}

.product-scene-tab .scene-tab:hover .caption {
    color: #f66f6a;
}

.product-scene-tab .scene-tab p.caption {
    position: relative;
    display: inline-block;
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 25px;
    padding-left: 10px;
    padding-right: 10px;
}

.product-scene-tab .scene-tab .caption:after {
    background: #f66f6a;
    bottom: -25px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    width: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: width 0.25s ease;
    transition: width 0.3s ease;
}

.product-scene-tab .scene-tab.active .caption:after {
    width: 100%;
}

.scene-mb-body:before,
.scene-mb-body:after {
    content: " ";
    display: table;
    line-height: 0;
}

.scene-layer {
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    background: #fff;
    border: 1px solid #ddd;
}

.scene-content {
    display: none;
    width: 100%;
}

.scene-content.active {
    display: block;
}

/* .scene-arch {
    position: absolute;
    left: 0;
    top: 0;
    width: 780px;
    height: 484px;
    overflow: hidden;
    border: solid 40px #fff;
    background: #f7f7f7;
    cursor: zoom-in;
    border-radius: 2px;
}

.scene-arch img {
    max-width: 100%;
    max-height: 100%;
}

.scene-mb-body .scene-arch + .scene-sub-wrap {
    float: left;
    width: 398px;
    min-height: 484px;
    padding-left: 10px;
    padding-right: 20px;
    margin-left: 780px;
    margin-right: 0;
} */

.scene-sub-wrap-1 {
    padding-right: 0px;
}

.scene-sub-box {
    padding: 40px 0 0 0;
}

.scene-sub-box h3 {
    font-size: 16px;
    color: #252b3a;
    line-height: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.scene-sub-box.none-bor .caption {
    font-size: 14px;
    color: #666A75;
    line-height: 18px;
    position: relative;
    padding-left: 15px;
    margin: 8px 0 5px;
}

.scene-sub-box.none-bor .caption:after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #a0a2a8;
    position: absolute;
    top: 7px;
    left: 5px;
}

.scene-sub-box.none-bor .desc {
    font-size: 14px;
    color: #666A75;
    line-height: 18px;
    position: relative;
    margin: 8px 0 5px;
}

.scene-sub-box.none-bor .caption.specialCap {
    font-weight: normal;
    margin-top: 28px;
}

.scene-sub-box.none-bor .caption.specialCap:after {
    display: none;
}

.scene-sub-box.none-bor .caption.specialCap a {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    color: #f66f6a;
}

.scene-sub-box.none-bor .caption.specialCap a:hover {
    text-decoration: underline;
}

.scene-sub-box.none-bor .info {
    position: relative;
    font-size: 14px;
    color: #666a75;
    line-height: 14px;
    margin-bottom: 4px;
    padding-left: 35px;
}

.scene-sub-box.none-bor .scene-info:nth-child(4) .info {
    padding-left: 15px;
}

.scene-mb-body .info {
    font-size: 14px;
    color: #666a75;
}

.scene-sub-box.none-bor .info i {
    position: absolute;
    top: 3px;
    left: 15px;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: url(../images/developer-center-second/developer-center-iot/select.png) no-repeat center;
    background-size: cover;
}

.scene-sub-box .caption {
    font-size: 16px;
    color: #252b3a;
    line-height: 22px;
    position: relative;
}

.iotSection .section-item-col4 {
    display: inline-block;
    width: calc(33.3% - .83333rem) !important;
    box-sizing: border-box;
    margin: 0 20px 20px 0;
}

.iotSection .section-item-col4:last-child {
    margin-right: 0
}

.anchor-nav-block .section .section-item-col4:nth-child(3n + 0) {
    margin-right: 0;
}

.anchor-nav-block .section.developer-resource .section-challenge:nth-child(3) .section-item-col4:nth-last-child(2) {
    margin-bottom: 0;
}

.anchor-nav-block .section.developer-resource .section-challenge:nth-child(3) .section-item-col4:nth-last-child(3) {
    margin-bottom: 0;
}

.anchor-nav-block .section.developer-resource .section-challenge:nth-child(3) .section-item-col4:nth-last-child(4) {
    margin-bottom: 0;
}

.anchor-nav-block .section.developer-resource .section-item-col4:first-child {
    margin-bottom: 20px;
}

.section-wrapper.video.anchor-nav-block .section .section-item-col4:nth-child(3n + 0) {
    margin-right: 20px;
}

.viewMore {
    display: inline-block;
    width: 100%;
    margin-top: 60px;
    text-align: center;
}

.section-challenge .viewMore:nth-child(4) {
    margin-top: 40px;
}

.viewMore a {
    display: inline-block;
    width: auto;
    font-size: 16px;
    line-height: 20px;
    color: #f66f6a;
}

.viewMore a:hover {
    text-decoration: underline;
}

.section .section-item-col6 {
    display: inline-block;
    box-sizing: border-box;
}

#block3.anchor-nav-block .section-challenge .section-item-col6 {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
    border: 1px solid #ddd;
}

.section-wrapper.more .section {
    padding: 60px 10px;
}

.scene-sub-box .section-item-col6 {
    display: inline-block;
    width: calc((100% - 5px) / 2);
    margin: 0 5px 10px 0;
    padding: 3px 5px;
    font-size: 14px;
    line-height: 20px;
    color: #666a75;
    border: 1px solid #ddd;
}

.scene-sub-box .section-item-col6:nth-child(2n + 1) {
    margin-right: 0;
}

.scene-sub-box .section-item-col6:hover {
    cursor: pointer;
    color: #f66f6a;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}


.section-wrapper.more .linker-caption {
    display: inline-block;
    width: auto;
    max-width: 100%;
    font-size: 18px;
    line-height: 22px;
    color: #252b3a;
}

.section .section-item-col6:last-child {
    margin-right: 0
}

.section.no-bottom {
    padding-bottom: 0
}

.anchor-nav-fixed .wrapper-space {
    position: relative;
    top: 3.75rem
}

.anchor-nav-fixed .btn-text {
    right: 23rem !important
}

.anchor-nav .anchor-nav-content .selected > a {
    padding: 15px 10px 11px;
}

.anchor-nav-content {
    padding: 0 10px;
    height: 48px;
    margin: 0 auto;
    width: 100%;
    font-size: 0;
    text-align: center;
    background: #f4f6f8;
}

.anchor-nav {
    width: 100%;
    height: 49px;
    text-align: center;
    margin-top: -1px;
    border-bottom: 1px solid #ddd;
}

.anchor-nav .btn-text {
    display: inline-block;
    padding: 0 1.75rem;
    margin-left: 7.5rem;
    background: #3586ff;
    color: #fff;
    outline: 0;
    line-height: 2.5rem;
    font-size: 1.125rem;
    cursor: pointer
}

.anchor-nav .list {
    height: 100%;
    display: inline-block;
}

.anchor-nav-fixed .anchor-nav {
    border-bottom: none;
}

.anchor-nav-fixed .anchor-nav-content {
    position: fixed;
    display: block;
    top: 100px;
    left: 0;
    width: 100%;
    padding: 0 50px;
    z-index: 98;
    border-bottom: 1px solid #ddd;
}

.anchor-nav-fixed .list {
    display: inline-block;
}

.anchor-nav-content:after,
.anchor-nav-content:before {
    display: table;
    line-height: 0;
    height: 0;
}

.anchor-nav-content:after {
    clear: both
}

.anchor-nav-block .layout-left {
    height: auto
}

.anchor-nav .item {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 0;
    cursor: pointer;
    margin-right: 50px;
}

.anchor-nav .item:last-child {
    margin-right: 0;
}

.anchor-nav .item > a {
    display: inline-block;
    padding: 15px 10px;
    color: #252b3a;
    font-size: 14px;
    line-height: 18px;
}

.anchor-nav .item > a:hover {
    color: #F66f6a;
}

@media (max-width: 1441px) {
    .anchor-nav .item {
        padding: 0 20px !important
    }
}

.anchor-nav .item.selected:after {
    position: absolute;
    left: 0;
    bottom: -4px;
    content: "";
    display: inline-block;
    width: 100%;
    height: 4px;
    background-color: #f66f6a;
}

.screenImg {
    position: fixed;
    z-index: 150;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: zoom-out;
    overflow: auto;
}

.screenImg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    margin: auto;
    background-color: #fbfbfb;
}

.button {
    display: inline-block;
    height: 40px;
    padding: 0 30px;
    border: solid 1px transparent;
    border-radius: 2px;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    transition: .2s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
    margin-bottom: 10px;
}

.button.buttonIcon {
    padding: 0 3.75rem 0 1.75rem
}

.button img {
    vertical-align: middle;
    margin-left: 5px
}

.button .btn-text {
    color: #fff;
    font-size: 1rem;
    vertical-align: middle;
    font-weight: 700;
    display: inline-block;
    line-height: 1
}

.btn-banner {
    display: inline-block;
    border-color: #c7000b;
    background-color: #c7000b;
    color: #fff;
    padding: 0 30px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    outline: none;
    border: 1px solid transparent;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 10px;
}

.btn-last {
    display: inline-block;
    border: solid 1px #fff;
    color: #fff;
    padding: 0 30px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    outline: none;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-last:hover {
    border-color: #f66f6a;
    background-color: #f66f6a;
    color: #fff;
}

.run-start {
    background: url(../images/developer-center-second/developer-center-lot/link-bg.dd16a08b4308184fe1c6.png) center no-repeat;
    width: 100%;
    height: 180px
}

.run-start .run-content {
    color: #fff;
    margin: 0 auto;
    width: 60%;
    height: 5rem
}

.run-start .run-content .start-text1 {
    margin-left: 5rem;
    margin-bottom: .5rem;
    font-size: 28px;
    padding-top: 3rem;
    letter-spacing: 4px
}

.run-start .run-content .start-text2 {
    font-size: 20px;
    letter-spacing: 3px;
    margin-left: 200px
}

.run-start .run-content .start-btn {
    display: inline-block;
    padding: .5rem 2rem;
    font-size: 1rem;
    float: right;
    color: #fff;
    margin-top: -3rem;
    border: 1px solid #fff;
    cursor: pointer
}

.run-start .run-content .start-btn:hover {
    background: #fff;
    color: #3586ff
}

.none {
    display: none
}

.to-top[_ngcontent-c0] {
    position: fixed;
    z-index: 98;
    bottom: 20px;
    right: 20px;
    opacity: 0
}

.topShow[_ngcontent-c0] {
    animation: .3s ease-out forwards toShow;
    -webkit-animation: .3s ease-out forwards toShow
}

@keyframes toShow {
    form {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes toShow {
    form {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.homeBanner {
    display: block;
    height: 47.5rem;
    margin-top: 3.75rem
}

.homeBanner .homeBannerwrap {
    background-position: left bottom;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
    margin-top: -1px;
    background-size: cover
}

@media (max-width: 1681px) {
    .homeBanner .homeBannerwrap {
        background-position-x: 50% !important
    }
}

@media (max-width: 1441px) {
    .homeBanner {
        margin-top: 3.5rem
    }

    .homeBanner .homeBannerwrap {
        background-position-x: 45% !important
    }
}

.homeBanner .homeBannerwrap .bannerBox {
    max-width: 1280px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto
}

.homeBanner .homeBannerwrap .bannerBox .bannercontent {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 504px);
    padding: 10px;
    font-size: 1rem;
    line-height: 1rem
}

.homeBanner .homeBannerwrap .bannerBox .bannercontent .banner-tit {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1.75rem;
    margin-top: 7.5rem;
    width: 74%;
    line-height: 2rem
}

.homeBanner .homeBannerwrap .bannerBox .bannercontent .banner-border {
    width: 80px;
    height: 2px;
    background: #3487ff
}

.homeBanner .homeBannerwrap .bannerBox .bannercontent .banner-text {
    margin-top: 1.75rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    line-height: 22px;
    color: #90949a;
    padding-right: 5rem;
    width: 74%
}

.homeBanner .homeBannerwrap .bannerBox .bannerInfo {
    height: 200px;
    padding: 50px 50px 50px 44px;
    margin-top: 69px;
    background: #1d242e;
    box-shadow: 0 40px 50px 0 rgba(0, 0, 0, .5);
    opacity: .902
}

.homeBanner .homeBannerwrap .bannerBox .bannerInfo .info-list {
    overflow: hidden;
    height: 100%
}

.homeBanner .homeBannerwrap .bannerBox .bannerInfo .info-list .infoItem {
    float: left;
    width: calc(50% - 17px);
    padding-right: 34px;
    border-right: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    height: 100%
}

.homeBanner .homeBannerwrap .bannerBox .bannerInfo .info-list .infoItem:last-child {
    margin-right: 0;
    border-right: none;
    float: right
}

.homeBanner .homeBannerwrap .bannerBox .bannerInfo .info-list .infoItem .title {
    font-size: 1.125rem;
    color: #fff
}

.homeBanner .homeBannerwrap .bannerBox .bannerInfo .info-list .infoItem .text {
    font-size: .75rem;
    color: #72767d;
    margin-top: 1rem;
    line-height: 1.4rem
}

.iot-tabs-container[_ngcontent-c6] {
    width: 100%;
    display: inline-block;
}

.iot-tabs-menu[_ngcontent-c6] {
    border-bottom: 1px solid #ddd;
    list-style-type: none;
    margin: 0;
}

.iot-tabs-menu[_ngcontent-c6] .active[_ngcontent-c6] {}

.iot-tabs-menu.NoBorder[_ngcontent-c6] {
    border-bottom: none !important
}

.products-logo[_ngcontent-c6] {
    margin: 0 auto;
    width: 5rem;
    height: 5.5rem;
    text-align: center
}

.products-logo[_ngcontent-c6] .imgBg[_ngcontent-c6] {
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-position: center
}

.iot-tabs-menu[_ngcontent-c6] .iot-tabs-list[_ngcontent-c6]:last-child {
    margin-right: 0
}

.iot-tabs-list[_ngcontent-c6] {
    display: inline-block;
    margin-right: 96px;
    font-size: 0;
    text-align: center;
    cursor: pointer;
}

.iot-tabs-list[_ngcontent-c6]:last-child {
    margin-right: 0;
}

.iot-tabs-list[_ngcontent-c6] span[_ngcontent-c6] {
    font-size: .875rem;
    cursor: pointer;
    white-space: nowrap;
}

.iot-tabs-list[_ngcontent-c6] .white[_ngcontent-c6] {
    color: #fff !important
}

.iot-tabs-list.pb-1[_ngcontent-c6] {
    padding-bottom: 1.5rem
}

li.iot-tabs-list[_ngcontent-c6]:last {
    margin-right: 0 !important
}

.iot-tabs-container.center[_ngcontent-c6] {}

.iot-tabs-container.center[_ngcontent-c6] .iot-tabs-menu[_ngcontent-c6] {
    text-align: center
}

.iot-tabs-container.center[_ngcontent-c6] .iot-tabs-menu[_ngcontent-c6] .iot-tabs-list[_ngcontent-c6] span[_ngcontent-c6] {
    position: relative;
    padding: 15px 24px 20px;
    font-size: 16px;
    display: inline-block;
    line-height: 20px;
    color: #252b3a;
}

.iot-tabs-container.center[_ngcontent-c6] .iot-tabs-menu[_ngcontent-c6] .iot-tabs-list[_ngcontent-c6]:hover span[_ngcontent-c6] {
    color: #f66f6a;
}

.iot-tabs-container.center[_ngcontent-c6] .iot-tabs-menu[_ngcontent-c6] .iot-tabs-list[_ngcontent-c6] span[_ngcontent-c6]:after {
    background: #f66f6a;
    bottom: -1px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    width: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: width 0.25s ease;
    transition: width 0.3s ease;
}

.iot-tabs-container.center[_ngcontent-c6] .iot-tabs-menu[_ngcontent-c6] .iot-tabs-list.active[_ngcontent-c6] span[_ngcontent-c6]:after {
    width: 100%;
}

.swiper-container1 {
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden
}

.swiper-wrapper1 {
    position: absolute;
    left: 8px;
    display: flex;
    width: 100%
}

.swiper-slide1 {
    margin-top: 10px;
    margin-bottom: 30px;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    width: calc(33.33% - 30px);
    flex-shrink: 0
}

.btn-group {
    margin-top: 4.75rem;
    text-align: center
}

.disabledLeftBg {
    background: url(../images/developer-center-second/developer-center-lot/arrow-left-gray.3a74baaf402c2e3dbfed.png) center center no-repeat !important;
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.disabledRightBg {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAYCAYAAAAGXva8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFOEIxRkY2RDZGN0QxMUU4Qjc3MkY0N0IwNDdBNUM2QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFOEIxRkY2RTZGN0QxMUU4Qjc3MkY0N0IwNDdBNUM2QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU4QjFGRjZCNkY3RDExRThCNzcyRjQ3QjA0N0E1QzZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU4QjFGRjZDNkY3RDExRThCNzcyRjQ3QjA0N0E1QzZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+knMb/AAAAXNJREFUeNq8lt1KAkEUgHfXRYQgIsgLC/TSV4iiqwgtK+ox6nl6jW6Msr+b8B3qMoUsiryQiorKvomzsDuMIe7MHvgQx539OO45c9Zf2tnzJow8rMI8PMFF+/DgZZyNgTd5VGEBfCjC9vLu/rRrqR5TsIl4xqX0Bp4N4i3Es66kn9CER229AA3Ec67+XiU+hgeDeANx0ckzpWIjcc9Q3euIS04KCfEXHy3oGsQ1XWytekV8Bh3tpxDqiMvRgh87HPKW/DlYgbK2/iMHyK2SVuSiguc+hnAZZCj05PRaDMSeZQyV9AreMhKq59oOpdo6Kao28Z0qDWT6VAzCc67vhjbTQJgToV65qp1OEd5FPWRLqO5Vg5JB2ELYizeuDaHq8TWD8O+IRJgYCn6KN4fEGSuDPB4fcKILbWSq+rsO+hh7hyOEfdOmMGWGDdAH9qtk2B+1MY20OkLYRDj4b6PNlhlI0QxcviNdy/z8hvtxMoziV4ABALSMcg6czkLsAAAAAElFTkSuQmCC) center center no-repeat !important;
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next1,
.swiper-button-prev1 {
    text-align: center;
    width: 2.875rem;
    height: 1.5rem;
    display: inline-block;
    position: static
}

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

.swiper-button-prev1 {
    margin-right: 5rem;
    background: url(../images/developer-center-second/developer-center-lot/arrow-left-active.de8fbe84fe87906a76bc.png) center center no-repeat
}

.swiper-button-next1 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAYCAYAAAAGXva8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFOTNBMkVBRjZGN0QxMUU4OURCNEQ0NkYyRjgyNDdCQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFOTNBMkVCMDZGN0QxMUU4OURCNEQ0NkYyRjgyNDdCQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU5M0EyRUFENkY3RDExRTg5REI0RDQ2RjJGODI0N0JDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU5M0EyRUFFNkY3RDExRTg5REI0RDQ2RjJGODI0N0JDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ThbzMgAAAYlJREFUeNq8ljEvQ1EUgF/rRTAgwWQ1GNjQTaqJBtEKIfEDOvoD/gCbH1B+AYNIy9DQCoNoDBIrFhGLSBiISPGd5Dapk9do+u7tSb6279538+X2nHfui4xv/HhNRg/sQQKuYKW87j00sjDqNR8ZmIY2iMHFxKY35FqqYxBOEQ+7lG7DdYD4HPGoK+kbxKGsxvuhiHjM1d/7CknZXYD4BHHMSU6pWBHPQElNdUMBccJJISF+52seDgPEeS22Vr1GvAQ5NdUJR4jT1YFITXPoteRvhx1IqfEv00AORLrIRdYk33V8w6pvnrc+rzUh6dySj4rX2qhETQ99apFQ8rrmm2rLhajaP0GVSiHtwkKAcJn7877NbSDsMEJduR+QRngsF75FYZc0AphSU/L8phAWqwO+JaEc6PsBQjkUkggvawd9S8KC/FRTLzCnhTakA9LiQB9jz/Iag/AmaFEYqbRNydOIGn+E2XrCsNJMHWEc4a2rNwf9GnkHk/8Jw0qzJp+fcGZ2eN/Iwl8BBgAs+WXZXP2akwAAAABJRU5ErkJggg==) center center no-repeat
}

.btn-side {
    position: absolute;
    width: 100%;
    min-width: 1366px
}

.btn-side .swiper-button-prev1 {
    margin-left: 10%;
    float: left;
    height: 27rem
}

.btn-side .swiper-button-next1 {
    margin-right: 10%;
    float: right;
    height: 25rem
}

@media (max-width: 1600px) {
    .btn-side .swiper-button-prev1 {
        margin-left: 5%
    }

    .btn-side .swiper-button-next1 {
        margin-right: 5%
    }
}

.iot-tabs-detail-wrapper .detail-content {
    padding: 2rem 1.5rem 1rem;
    color: #fff;
    max-height: 14rem;
    background-size: cover
}

.iot-tabs-detail-wrapper .iot-detail-title .big-title {
    font-size: 1.5rem;
    margin-bottom: .5rem
}

.iot-tabs-detail-wrapper .iot-detail-title .sub-title {
    font-size: 1rem;
    line-height: 1rem
}

.iot-tabs-detail-wrapper .card-normal-content-wrapper .card-normal-content-description {
    color: rgba(255, 255, 255, .5);
    font-size: .875rem;
    margin-top: 1rem;
    max-height: 8.4rem;
    overflow: hidden;
    line-height: 22px
}

.iot-tabs-detail-wrapper .iot-detail-character {
    margin-top: 1.2rem
}

.iot-tabs-detail-wrapper .iot-detail-character .character-item {
    text-align: center;
    font-size: 1rem;
    width: 5rem;
    border-right: 1px solid #0a93e6;
    display: inline-block
}

.iot-tabs-detail-wrapper .iot-detail-character .character-item p {
    font-size: .5rem
}

.iot-tabs-detail-wrapper .iot-detail-character .character-item:last-child {
    border-width: 0
}

.iot-tabs-detail-wrapper .scene-type {
    font-size: 1rem;
    color: #fff;
    background-size: cover;
    padding: .875rem 1.5rem 2rem
}

.iot-tabs-detail-wrapper .scene-type h4 {
    margin-bottom: 20px
}

.iot-tabs-detail-wrapper .scene-type .logo-list {
    width: 100%;
    overflow: hidden
}

.iot-tabs-detail-wrapper .scene-type .logo-list .list-item {
    line-height: 2rem;
    text-align: center;
    border: 1px solid #2059d2;
    width: calc(33% - .7rem);
    float: left;
    height: 2rem;
    margin-right: 1rem;
    border-radius: 2rem;
    margin-bottom: .5rem
}

.iot-tabs-detail-wrapper .scene-type .logo-list .list-item:nth-child(3n) {
    margin-right: 0 !important
}

.iot-tabs-detail-wrapper .scene-type .logo-list .list-item p {
    font-size: .75rem;
    color: #f1f1f1
}

.iot-tabs-detail-wrapper .scene-type .logo-list .logo-img {
    margin: 0 auto 5px;
    width: 2.5rem;
    height: 2.5rem
}

.iot-tabs-detail-wrapper .scene-type .logo-list .logo-img img {
    width: 100%
}

.iot-tabs-detail-wrapper .scene-type .btn-wrp {
    line-height: 3rem;
    text-align: center;
    clear: both;
    width: 9rem;
    height: 3rem;
    margin-top: 2.625rem;
    color: #fff;
    border: 1px solid #fff
}

.iot-tabs-detail-wrapper .scene-type .btn-wrp:hover {
    cursor: pointer;
    border-color: #2059d2;
    background: #2059d2
}

.iot-tabs-detail-wrapper .scene-type .btn-wrp .btn-go {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAGCAYAAAAhS6XkAAAAZklEQVQYlZ3OMQ6CQBQE0LcEC89B7WW8DYkFpYRDeAG9jb32W9CRbGGwAbL1n2SaKV4m5ZwFcsOEUo9NRMIJb1xro8U9gJ3R4YUPHni2mANYwYq09Xg2BrABX/Tbu9+ORbLigqUe/+1YEqRp0/txAAAAAElFTkSuQmCC) center/cover no-repeat;
    display: inline-block;
    margin-left: .5rem;
    width: 20px;
    height: 5px;
    vertical-align: middle
}

.solveNew {
    font-size: 1rem;
    position: relative;
    height: 22.75rem;
    overflow: hidden;
    cursor: pointer
}

.solveNew > img {
    width: 100%;
    height: 100%
}

.solveNew.small {
    height: 17.5rem !important
}

.solveNew.small .solveHover img {
    display: none
}

.solveNew.small .solveHover .title.text {
    margin-top: 3.25rem
}

.solveNew.large {
    height: 34.375rem !important
}

.solveNew.large .solveHover img {
    display: none
}

.solveNew.large .solveHover .title.text {
    margin-top: 9rem
}

.solveNew.large .solveHover .info {
    width: 70%;
    margin: 2rem auto 5rem;
    font-size: 1rem
}

.solveNew.large .solveText {
    top: 40%
}

.solveNew .solveText {
    text-align: center;
    position: absolute;
    color: #fff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3D(-50%, -50%, 0);
    transform: translate3D(-50%, -50%, 0)
}

.solveNew .solveText.none {
    display: none
}

.solveNew .solveText .text {
    font-size: 1.375rem;
    margin-top: 1.375rem;
    letter-spacing: 8px
}

.solveNew .solveHover {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(52, 135, 255, .5);
    color: #fff;
    bottom: 0;
    text-align: center
}

.solveNew .solveHover.show {
    display: block
}

.solveNew .solveHover > img {
    margin-top: 2.5rem
}

.solveNew .solveHover .text.title {
    font-size: 1.5rem;
    margin-top: 1.25rem
}

.solveNew .solveHover .info {
    font-size: .75rem;
    line-height: 1.4rem;
    margin-top: 10px;
    padding: 0 25px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    text-align: left;
    max-height: 4.2rem;
    height: 4.2rem
}

.solveNew .solveHover .btnBox .btn {
    display: inline-block;
    border: 1px solid #fff;
    font-size: .875rem;
    height: 2.25rem;
    line-height: 2.25rem;
    padding: 0 2rem;
    margin-left: .75rem;
    color: #fff;
    cursor: pointer;
    margin-top: 1.5rem
}

.solveNew .solveHover .btnBox .btn.active,
.solveNew .solveHover .btnBox .btn:hover {
    background: #fff;
    color: #3586ff
}

.solveNew .border {
    background: #fff;
    width: 45px;
    height: 1px;
    display: inline-block;
    margin-top: 1.875rem
}

.iot-card-normal-wrapper {
    padding: 3.15rem 1.875rem 2rem;
    height: 23.75rem
}

.iot-card-normal-wrapper.align-right {
    text-align: right
}

.iot-card-normal-wrapper.align-right p {
    text-align: right !important
}

.iot-card-normal-wrapper.align-center {
    text-align: center
}

.iot-card-normal-wrapper.align-left {
    text-align: left
}

.iot-card-normal-wrapper.height-normal {
    height: 12rem;
    vertical-align: top;
    padding: 2rem 1.875rem
}

.iot-card-normal-wrapper.height-normal .card-normal-content-wrapper .card-normal-content-description {
    font-size: .875rem;
    margin-top: 1rem
}

.iot-card-normal-wrapper.height-normal .card-normal-content-wrapper .card-normal-content-description p {
    line-height: 1.375rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    text-align: left
}

.iot-card-normal-wrapper.small {
    height: 19.5rem !important
}

.iot-card-normal-wrapper.height-normal-new {
    height: 17rem !important;
    vertical-align: top;
    padding: 3.125rem 1.875rem 2rem
}

.iot-card-normal-wrapper.bule .card-normal-content-wrapper .card-normal-content-title > p {
    color: #4a90e2 !important;
    font-weight: 700
}

.iot-card-normal-wrapper .card-normal-img-box {
    margin-bottom: 1.25rem
}

.iot-card-normal-wrapper .card-normal-img-box img {
    vertical-align: middle
}

.iot-card-normal-wrapper .card-normal-name {
    font-size: 1rem;
    color: #ff2626;
    vertical-align: middle;
    margin-left: 1rem
}

.iot-card-normal-wrapper .card-normal-title-box {
    margin-bottom: 1.5rem;
    text-align: center
}

.iot-card-normal-wrapper .big-title {
    font-size: 2rem;
    font-weight: 700;
    color: #3b90fd
}

.iot-card-normal-wrapper .card-normal-content-wrapper .card-normal-content-title > P {
    color: #333;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25rem;
    display: inline-block
}

.iot-card-normal-wrapper .card-normal-content-wrapper .card-normal-content-title > P.hover {
    cursor: pointer
}

.iot-card-normal-wrapper .card-normal-content-wrapper .card-normal-content-description {
    color: #666;
    font-size: .875rem;
    margin-top: 1rem;
    max-height: 8.4rem;
    height: 8.2rem;
    overflow: hidden
}

.iot-card-normal-wrapper .card-normal-content-wrapper .card-normal-content-description P {
    line-height: 1.375rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-align: left;
    max-height: 8.25rem
}

.iot-card-normal-wrapper .card-normal-content-wrapper .card-normal-content-description .card-normal-content-number {
    display: flex;
    flex-direction: row-reverse
}

.iot-card-normal-wrapper .card-normal-content-wrapper .card-normal-content-description .card-normal-content-number-num {
    font-size: 1.5rem;
    color: #000
}

.iot-card-normal-wrapper .card-normal-content-number {
    margin-top: .625rem
}

.iot-card-normal-wrapper .card-normal-content-number-item {
    margin-right: 1.5rem
}

.iot-card-normal-wrapper .card-normal-content-number-item:first-child {
    margin-right: 0
}

.iot-card-normal-wrapper .card-normal-content-number-name {
    font-size: .75rem
}

.iot-card-normal-wrapper.hover:hover {
    background: #fff;
    box-shadow: 0 10px 30px #ccc;
    cursor: pointer
}

.iot-card-tool-wrapper {
    width: 100%;
    padding: 2rem;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1)
}

.iot-card-tool-wrapper.hover:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2) !important;
    cursor: pointer
}

.iot-card-tool-wrapper .card-tool-img-box > img {
    width: 100%;
    height: 100%
}

.iot-card-tool-wrapper .card-tool-content-wrapper {
    text-align: center;
    margin-top: 1.75rem
}

.iot-card-tool-wrapper .card-tool-content-wrapper .card-tool-content-title {
    color: #333;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.875rem
}

.iot-card-tool-wrapper .card-tool-content-wrapper .card-tool-content-title > p {
    font-size: 1.125rem
}

.iot-card-tool-wrapper .card-tool-content-wrapper .card-tool-content-description {
    margin-top: .5rem;
    margin-bottom: 1.75rem
}

.iot-card-tool-wrapper .card-tool-content-wrapper .card-tool-content-description > p {
    color: #666;
    font-size: .875rem
}

.iot-card-tool-wrapper .card-tool-content-wrapper .card-btn {
    display: inline-block;
    line-height: 2.5rem;
    color: #fff;
    padding: 0 3rem;
    font-size: 1rem;
    text-align: center;
    background: #439af1;
    border: none;
    outline: 0;
    cursor: pointer
}

.iot-card-tool-wrapper .card-tool-content-wrapper .card-btn:hover {
    background: #3078e5
}

.iot-card-tool-wrapper.small {
    height: 22.5rem;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1)
}

.iot-card-tool-wrapper.small .card-tool-img-box {
    margin: -2rem -2rem 0;
    height: 11rem
}

.iot-card-tool-wrapper.small .card-tool-content-wrapper {
    margin-top: 1.25rem;
    text-align: left !important
}

.iot-card-tool-wrapper.small.middle {
    height: 27rem
}

.iot-card-tool-wrapper.small.middle .card-tool-content-description {
    height: 7rem;
    line-height: 1.45rem;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-align: left
}

.iot-card-tool-wrapper.small.middle .imgbox .img-list:last-child {
    float: right;
    width: 45%
}

.iot-card-tool-wrapper.small.middle .imgbox .img-list:first-child {
    float: left;
    position: relative;
    width: 45%
}

.iot-card-tool-wrapper.small.middle .imgbox .img-list.hasTool:after {
    content: "";
    height: 1.5rem;
    background: #ccc;
    display: inline-block;
    width: 1px;
    right: -15%;
    position: absolute;
    top: .875rem
}

.iot-card-tool-wrapper.small.middle .imgbox .img-list img {
    width: 100%;
    height: 2.5rem
}

.develop-container .banner .banner-wrap .banner-content {
    max-width: 1280px;
    margin: 75px auto 0;
    font-size: 0;
    text-align: center;
}

.develop-container .section-item-col6 {
    vertical-align: top !important;
}

.develop-container .section-wrapper.video {
    background: #f5f5f5
}

.develop-container .section-wrapper.summary2 .iot-card-normal-wrapper {
    height: 17rem
}

.develop-container .section-wrapper .section-challenge {
    margin-top: 20px;
    display: none;
}

.develop-container .section-wrapper .section-challenge.show {
    display: block;
    font-size: 0;
}

.develop-container .section-wrapper .section-challenge .section-item-col6:nth-child(2n) {
    margin-right: 0 !important
}

.develop-container .section-wrapper .section-challenge .section-item-col6:hover {
    box-shadow: 0 10px 30px #ccc
}

.develop-container .section-wrapper .section-item-col4 {
    width: calc((100% - 40px) / 3) !important;
}

.develop-container .section-wrapper.developer-tool {
    background: #f5f5f5
}

.develop-container .section-wrapper.more {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    height: auto;
    background: url(../images/developer-center-second/developer-center-iot/sectionWrapperMore_BG.png) center/cover no-repeat;
}

.develop-container .section-wrapper.bg-new {
    background: #313440
}

.develop-container .section-wrapper.bg-new .title {
    color: #fff !important
}

.develop-container .section-wrapper.bg-new .sub-title {
    color: #666
}

.develop-container .section-wrapper.bg-new2 {
    background: #f5f5f5
}

.develop-container .section-wrapper.bg-new2 .sub-title {
    color: #666 !important;
    font-size: 1rem;
    line-height: 1.5
}

.develop-container .iot-but {
    display: inline-block;
    line-height: 2.5rem;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    background: #439af1;
    border: none;
    outline: 0;
    cursor: pointer;
    vertical-align: middle;
    float: right;
    margin-top: .75rem
}

.develop-container .iot-but:hover {
    background: #3078e5
}

body {
    margin: 0 !important;
    background-color: #fff;
}

.banner {
    display: inline-block;
    width: 100%;
    height: 350px;
    background: url(../images/developer-center-second/developer-center-iot/Banner.png) no-repeat center;
    background-size: cover;
}

.banner .banner-wrap {}

.banner .banner-wrap .banner-content {}

.banner .banner-wrap .banner-content .tit-mid-show {
    color: #fff
}

.banner .banner-wrap .banner-content .tit-mid-show .midtit {
    font-weight: 700;
    font-size: 1rem;
    margin-top: .5rem;
    line-height: 1.687rem;
    letter-spacing: .25rem
}

.banner .banner-wrap .banner-content .tit-mid-show .midtext {
    font-size: .875rem
}

.banner .banner-wrap .banner-content .banner-tit {
    font-size: 48px;
    color: #ffffff;
    line-height: 60px;
    margin-bottom: 20px;
}

.banner .banner-wrap .banner-content .banner-tit.maxWidth {
    width: 150% !important
}

.banner .banner-wrap .banner-content .banner-text {
    font-size: 18px;
    color: #ffffff;
    line-height: 28px;
    margin-bottom: 20px;
}

.banner .banner-wrap .banner-content .banner-btn-box {
    display: inline-block;
    font-size: 0;
}

@media (max-width: 1681px) {
    .banner {}

    .banner-wrap {
        background-position-x: 50% !important
    }
}

@media (max-width: 1440px) {
    .banner-wrap {
        background-position: 45% !important
    }
}

.mt-1 {
    margin-top: 1rem !important
}

.letter-mid {
    letter-spacing: .4rem !important
}

.iot-but {
    display: inline-block;
    line-height: 2.5rem;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    background: #439af1;
    border: none;
    outline: 0;
    cursor: pointer;
    vertical-align: middle;
    float: right;
    margin-top: .75rem
}

.iot-but:hover {
    background: #3078e5
}

.ioc-card-more-wrapper {
    text-align: center
}

.ioc-card-more-wrapper .title {
    color: #fff;
    font-size: 1.75rem
}

.ioc-card-more-wrapper .description {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem
}

.ioc-card-more-wrapper .btnBox .btn {
    display: inline-block;
    border: 1px solid #fff;
    font-size: .875rem;
    height: 2.25rem;
    line-height: 2.25rem;
    padding: 0 2rem;
    margin-left: .75rem;
    color: #fff;
    cursor: pointer
}

.ioc-card-more-wrapper .btnBox .btn.mt-1 {
    margin-top: 1.5rem
}

.ioc-card-more-wrapper .btnBox .btn.active,
.ioc-card-more-wrapper .btnBox .btn:hover {
    background: #fff;
    color: #3586ff
}

.card-video[_ngcontent-c16] {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: 2px;
    height: 296px;
}

.card-video[_ngcontent-c16]:hover {
    /*box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.20);*/
}

.card-video[_ngcontent-c16]:hover .img-box img {
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
}

.card-video[_ngcontent-c16]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 196px;
    background-color: rgba(0, 0, 0, .5);
    z-index: 4;
}

.card-video[_ngcontent-c16].test:before {
    display: none;
}

.card-video[_ngcontent-c16]:after {
    content: '';
    position: absolute;
    top: 85px;
    left: calc(50% - 20px);
    display: inline-block;
    width: 40px;
    height: 30px;
    background: url(../images/developer-center-second/developer-center-iot/IoT-play-icon.png) no-repeat center;
    background-size: cover;
    z-index: 4;
}

.card-video[_ngcontent-c16]:hover::after {
    background: url(../images/developer-center-second/developer-center-iot/IoT-play-icon-hover.png) no-repeat center;
    background-size: cover;
    z-index: 5;
}

.section.developer-resource .section-challenge:nth-child(5) .card-video[_ngcontent-c16]:after {
    display: none;
}

.card-video[_ngcontent-c16] .img-box {
    position: relative;
    display: inline-block;
    font-size: 0;
    width: 100%;
    height: 195px;
    overflow: hidden;
}

.anchor-nav-block .section-challenge:nth-child(5) .section-item-col4 .card-video[_ngcontent-c16] .img-box:after {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-block;
    width: 96px;
    height: 38px;
    content: '';
}

.anchor-nav-block .section-challenge:nth-child(5) .section-item-col4:nth-child(1) .card-video[_ngcontent-c16] .img-box:after {
    background: url(../images/developer-center-second/developer-center-iot/developer-resources-test1-1.png) no-repeat center;
    background-size: cover;
}

.anchor-nav-block .section-challenge:nth-child(5) .section-item-col4:nth-child(2) .card-video[_ngcontent-c16] .img-box:after {
    background: url(../images/developer-center-second/developer-center-iot/developer-resources-test2-2.png) no-repeat center;
    background-size: cover;
}

.anchor-nav-block .section-challenge:nth-child(5) .section-item-col4:last-child .card-video[_ngcontent-c16] .img-box:after {
    background: url(../images/developer-center-second/developer-center-iot/developer-resources-test3-3.png) no-repeat center;
    background-size: cover;
}

.card-video[_ngcontent-c16] img[_ngcontent-c16] {
    width: 100%;
    height: 195px;
    border: none;
    transition: all .3s;
}

.card-video[_ngcontent-c16] div[_ngcontent-c16] {
    width: 100%;
    font-size: 16px;
    height: 25px;
    line-height: 25px;
    font-weight: bold;
}

.card-video[_ngcontent-c16] div[_ngcontent-c16].text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anchor-nav-block .section-challenge:nth-child(5) .card-video[_ngcontent-c16] div[_ngcontent-c16].text {
    padding-bottom: 10px;
}

.card-video[_ngcontent-c16] div[_ngcontent-c16].des {
    font-size: 14px;
    line-height: 20px;
    color: rgb(37, 43, 58);
    height: 40px;
    font-weight: normal;
    margin-top: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.card-video[_ngcontent-c16] div[_ngcontent-c16] .series-name {
    color: #f66f6a;
}

.card-video[_ngcontent-c16] a[_ngcontent-c16] {
    background: #c3c5c6;
    font-size: .8rem;
    margin-left: 1.25rem;
    vertical-align: text-top;
    color: #fff;
    padding: 0 7px;
    line-height: 2;
    margin-bottom: 1.25rem;
    display: inline-block
}

/*@media screen and (min-width: 1601px) {
    html {
        font-size: 14px !important;
    }

    .card-video[_ngcontent-c16] {
        position: relative;
        width: 100%;
        cursor: pointer;
        border-radius: 2px;
    }

    .card-video[_ngcontent-c16] img[_ngcontent-c16] {
        width: 100%;
        border: none;
        transition: all .3s;
    }
}

@media screen and (min-width: 1367px) and (max-width: 1600px) {
    html {
        font-size: 14px !important
    }
}

@media screen and (max-width: 1366px) {
    .card-video[_ngcontent-c16] {
        position: relative;
        width: 100%;
        cursor: pointer;
        border-radius: 2px;
        height: 222px;
    }

    .card-video[_ngcontent-c16] img[_ngcontent-c16] {
        width: 100%;
        height: 158px;
        border: none;
        transition: all .3s;
    }
}*/

.card-challenge-wrapper[_ngcontent-c15] {
    background: #fff;
    padding: 1.56rem;
    height: 12.5rem;
    border-left: 2px solid #3586ff
}

.card-challenge-wrapper.nomal[_ngcontent-c15] {
    border-left: 2px solid transparent
}

.card-challenge-wrapper.nomal[_ngcontent-c15]:hover {
    border-left: 2px solid #3586ff;
    box-shadow: 0 10px 30px #ccc
}

.card-challenge-wrapper[_ngcontent-c15] .title[_ngcontent-c15] {
    font-size: 1.375rem
}

.card-challenge-wrapper[_ngcontent-c15] .title[_ngcontent-c15] .flag[_ngcontent-c15] {
    background: #c3c5c6;
    font-size: .8rem;
    margin-left: .5rem;
    vertical-align: text-top;
    color: #fff;
    padding: 0 7px;
    line-height: 2
}

.card-challenge-wrapper[_ngcontent-c15] .text[_ngcontent-c15] {
    color: #666;
    margin-top: 1rem;
    line-height: 1.375rem;
    font-size: .875rem;
    height: 2.7rem
}

.card-challenge-wrapper[_ngcontent-c15] .link[_ngcontent-c15] {
    display: inline-block;
    font-size: .8rem;
    margin-top: 1rem;
    color: #277ce8;
    cursor: pointer
}

.card-challenge-wrapper[_ngcontent-c15] .link.mr-1[_ngcontent-c15] {
    margin-right: 10px
}

.card-challenge-wrapper[_ngcontent-c15] .link.disabled[_ngcontent-c15] {
    cursor: not-allowed
}

.card-challenge-wrapper[_ngcontent-c15] .link.block[_ngcontent-c15] {
    display: block;
}

.card-challenge-wrapper[_ngcontent-c15] .icon-read[_ngcontent-c15] {
    vertical-align: top;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .3rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEjSURBVDhPY/hPJiBfo9eER/9JxdP2v4doXHri4//Dt74RhTMWP0dovPTkB9QBhEHFmlfYNZ66//1/5dpX/yNnPf1ftPIlGG+//AUqi0Pj5guf/3tPfPy/b9fb/7uufvk/+9B7MPaf8vj/1H3vwGowNH749vd/4JQn/9ef+wxWgAzOPPgONvDG85+YGk/c+/7fd9Lj/z///IMqRwWpC5//X3X6Ezggd175gtB49M43ghoXH/8I5UHjEaTx3de///0nP8bpVJC6i48RgYgSOCCngPzSjyVwAoD4+cc/YHUgQB2NILD/xtf/OUtf/PcDOjtu7jMwXnzs4/9coFg8kA3TDNaILcl9BEYPMvj84y+KZrBGbBjZFTAA0ly++tX/my9+/gcABpIOFrnSdwwAAAAASUVORK5CYII=) center center no-repeat
}

.card-challenge-wrapper[_ngcontent-c15] .icon-apply[_ngcontent-c15] {
    vertical-align: top;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .3rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAcNJREFUWAntVT1OwzAUtl1mTtBuHAIuAFJTRhAzQ4UqhAoTN2CDNgiEGJgRKwIJLgCHYKI5AXv88OdikZg4dt0hDKnUxvH7/vzqOIy1n4Y7wGP9t9NsXUo6AV8Ifv541H2P0RIxJHCkZD1itIMvxrE60QFiDW1eG6DtgLMDeMwG09mZvWkWvYcGtFy8ygAg5CRfJNFpks4uXWTfPLjQgJYrRGWAojBJOkym2RURBR9awGqO4ha1qsaVAXCqdbjYYpx9gUQkR2o11yEhtLnGypE2VBrQcp2UlQFAtEMwYgeDNLupC4EaMMCGmAPjDICiHUIZDJM0u60Kgbmf2hBcdK9u5RqjYWZUczWbUq1sFTDO+R0X4lXm+T3uRaezR1JuqhD7uA81n0M1w//zJwTjH+pFtDYX+R0vYr5QAIDtEJgrfQLbXuSUHq3+JDvmjDYAeBr3dotAM3aG8Jgnk9kDNIjxt+dx98LolTYhzM073gDsq70xdd1jDozRNQs0uqUAZtJ3LYUIMK/TiwoAQRMi5FGrC7BSV/TVEMKH8dWjO+ATDq03HsD5F/QnnxS6imVw/6sDOCRKJ9MyS3Nw4eEotdPNdOAbw7rwv5vZ1akAAAAASUVORK5CYII=) center center/cover no-repeat
}

.card-challenge-wrapper[_ngcontent-c15] .icon-developer[_ngcontent-c15] {
    vertical-align: top;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .3rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQpJREFUOBFjZEADXlNfSTD+/mWLJozB3VogsxokyIIsEzrnsdC3Lz/2/Gdg0EYWx8FmBInDDYhd9IL73bvf24CauVmYOaU35Yo+w6bRe8KT0P8M/1bB5OAGvH3/az0DI6MSEwOjNS7NME3INNwAhv8MroyMjAlb8mVuIysgxGZCUfCf4RsKnwgOqgFEaEBXgvACkozXhCeFjAz/LZGEgD5kPL6tQKYfWQzEpo0LoDZh2IZuO4iP1QveEx6v+s/wPxRZAyMD4+qtBbJhyGI4DWBiYuz7948RnFRhGpiYGB7D2Mg0VhdszpM5AVQEwgQBdQMRlMa9JjzCaytQDYo83AuMDEwYAYSiEgcHAIQWRC3/F0xiAAAAAElFTkSuQmCC) center center/cover no-repeat
}

.card-challenge-wrapper[_ngcontent-c7] {
    position: relative;
    background: url(../images/developer-center-second/developer-center-iot/doc_bg.png) no-repeat left top;
    background-size: cover;
    height: auto;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}

.bg-new2.anchor-nav-block .section-challenge:nth-child(4) .card-challenge-wrapper[_ngcontent-c7] {
    height: 220px;
}

.section-challenge:nth-child(4) .card-challenge-wrapper[_ngcontent-c7] {
    height: 220px;
}

.card-challenge-caption {
    padding: 32px;
    position: relative;
    font-size: 0;
    cursor: pointer;
}

.section-challenge:nth-child(4) .card-challenge-wrapper[_ngcontent-c7] .card-challenge-caption {
    border-bottom: 1px solid #ddd;
    cursor: default;
}

.section-item-col4 .card-challenge-caption:after {
    content: '';
    position: absolute;
    top: 35px;
    right: 23px;
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../images/developer-center-second/developer-center-iot/doc_icon.png) no-repeat center;
    background-size: cover;
}

.card-challenge-des {
    display: inline-block;
    width: 100%;
    font-size: 0;
    padding: 20px 20px 0;
}

.card-challenge-des .challenge-des-info {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding-left: 15px;
    font-size: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card-challenge-des .challenge-des-info a {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
}

.card-challenge-des .challenge-des-info a:hover {
    cursor: pointer;
    color: #f66f6a;
}

.card-challenge-des .challenge-des-info:first-child {
    margin-top: 0;
}

.card-challenge-des .challenge-des-info:after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #a0a2a8;
    position: absolute;
    top: 8px;
    left: 5px;
}

.card-challenge-des .challenge-des-info:hover::after {
    background-color: #f66f6a;
}

.card-challenge-wrapper.nomal[_ngcontent-c7] {
    border-left: 2px solid transparent
}

.card-challenge-wrapper.nomal[_ngcontent-c7]:hover {
    border-left: 2px solid #3586ff;
    box-shadow: 0 10px 30px #ccc
}

.card-challenge-wrapper[_ngcontent-c7] .title[_ngcontent-c7] {
    font-size: 18px;
    line-height: 22px;
    color: #252b3a;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 320px;
    text-align: center;
}

.card-challenge-wrapper[_ngcontent-c7] .title[_ngcontent-c7] .flag[_ngcontent-c7] {
    background: #c3c5c6;
    font-size: .8rem;
    margin-left: .5rem;
    vertical-align: text-top;
    color: #fff;
    padding: 0 7px;
    line-height: 2
}

.bg-new2 .card-challenge-caption:hover .title[_ngcontent-c7] {
    color: #f66f6a;
}

.card-challenge-wrapper[_ngcontent-c7] .text[_ngcontent-c7] {
    color: #a0a2a8;
    margin-top: 24px;
    line-height: 18px;
    font-size: 14px;
    max-width: 320px;
}

.section-challenge .link[_ngcontent-c7] {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.section-challenge .card-challenge-wrapper[_ngcontent-c7] .link[_ngcontent-c7] {
    position: absolute;
    left: 20px;
    bottom: 25px;
    display: inline-block;
    width: auto;
    cursor: pointer;
    text-align: left;
}

.card-challenge-wrapper[_ngcontent-c7] .link[_ngcontent-c7] span {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    color: #f66f6a;
}

.card-challenge-wrapper[_ngcontent-c7] .link[_ngcontent-c7]:hover span {
    text-decoration: underline;
}

.card-challenge-wrapper[_ngcontent-c7] .link[_ngcontent-c7]:first-child {
    margin-right: 4px;
}

.section-challenge .link[_ngcontent-c7] span {
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    line-height: 20px;
    color: #f66f6a;
}

.section-challenge .link[_ngcontent-c7] span:hover {
    text-decoration: underline;
}

.card-challenge-wrapper[_ngcontent-c7] .link.mr-1[_ngcontent-c7] {
    margin-right: 10px
}

.card-challenge-wrapper[_ngcontent-c7] .link.disabled[_ngcontent-c7] {
    cursor: not-allowed
}

.card-challenge-wrapper[_ngcontent-c7] .icon-read[_ngcontent-c7] {
    vertical-align: top;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .3rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEjSURBVDhPY/hPJiBfo9eER/9JxdP2v4doXHri4//Dt74RhTMWP0dovPTkB9QBhEHFmlfYNZ66//1/5dpX/yNnPf1ftPIlGG+//AUqi0Pj5guf/3tPfPy/b9fb/7uufvk/+9B7MPaf8vj/1H3vwGowNH749vd/4JQn/9ef+wxWgAzOPPgONvDG85+YGk/c+/7fd9Lj/z///IMqRwWpC5//X3X6Ezggd175gtB49M43ghoXH/8I5UHjEaTx3de///0nP8bpVJC6i48RgYgSOCCngPzSjyVwAoD4+cc/YHUgQB2NILD/xtf/OUtf/PcDOjtu7jMwXnzs4/9coFg8kA3TDNaILcl9BEYPMvj84y+KZrBGbBjZFTAA0ly++tX/my9+/gcABpIOFrnSdwwAAAAASUVORK5CYII=) center center no-repeat
}

.card-challenge-wrapper[_ngcontent-c7] .icon-apply[_ngcontent-c7] {
    vertical-align: top;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .3rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAcNJREFUWAntVT1OwzAUtl1mTtBuHAIuAFJTRhAzQ4UqhAoTN2CDNgiEGJgRKwIJLgCHYKI5AXv88OdikZg4dt0hDKnUxvH7/vzqOIy1n4Y7wGP9t9NsXUo6AV8Ifv541H2P0RIxJHCkZD1itIMvxrE60QFiDW1eG6DtgLMDeMwG09mZvWkWvYcGtFy8ygAg5CRfJNFpks4uXWTfPLjQgJYrRGWAojBJOkym2RURBR9awGqO4ha1qsaVAXCqdbjYYpx9gUQkR2o11yEhtLnGypE2VBrQcp2UlQFAtEMwYgeDNLupC4EaMMCGmAPjDICiHUIZDJM0u60Kgbmf2hBcdK9u5RqjYWZUczWbUq1sFTDO+R0X4lXm+T3uRaezR1JuqhD7uA81n0M1w//zJwTjH+pFtDYX+R0vYr5QAIDtEJgrfQLbXuSUHq3+JDvmjDYAeBr3dotAM3aG8Jgnk9kDNIjxt+dx98LolTYhzM073gDsq70xdd1jDozRNQs0uqUAZtJ3LYUIMK/TiwoAQRMi5FGrC7BSV/TVEMKH8dWjO+ATDq03HsD5F/QnnxS6imVw/6sDOCRKJ9MyS3Nw4eEotdPNdOAbw7rwv5vZ1akAAAAASUVORK5CYII=) center center/cover no-repeat
}

.card-challenge-wrapper[_ngcontent-c7] .icon-developer[_ngcontent-c7] {
    vertical-align: top;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .3rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAQpJREFUOBFjZEADXlNfSTD+/mWLJozB3VogsxokyIIsEzrnsdC3Lz/2/Gdg0EYWx8FmBInDDYhd9IL73bvf24CauVmYOaU35Yo+w6bRe8KT0P8M/1bB5OAGvH3/az0DI6MSEwOjNS7NME3INNwAhv8MroyMjAlb8mVuIysgxGZCUfCf4RsKnwgOqgFEaEBXgvACkozXhCeFjAz/LZGEgD5kPL6tQKYfWQzEpo0LoDZh2IZuO4iP1QveEx6v+s/wPxRZAyMD4+qtBbJhyGI4DWBiYuz7948RnFRhGpiYGB7D2Mg0VhdszpM5AVQEwgQBdQMRlMa9JjzCaytQDYo83AuMDEwYAYSiEgcHAIQWRC3/F0xiAAAAAElFTkSuQmCC) center center/cover no-repeat
}

.video .tile {
    position: relative;
    font-size: 0;
    background: #FFFFFF;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.10);
    border-radius: 2px;
}

.video .tile img {
    width: 100%;
}

.video .tile .title {
    position: relative;
    padding: 16px 30px;
    font-size: 16px;
    color: #252B3A;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.video .tile .title:before {
    content: '';
    vertical-align: middle;
    margin-right: 10px;
    width: 44px;
    height: 44px;
    display: inline-block;
    background-size: cover;
}

.video .tile .title.iot:before {
    background: url(../images/developer-center-second/developer-center-iot/iot.png) no-repeat center;
}

.video .tile .title.nbiot:before {
    background: url(../images/developer-center-second/developer-center-iot/nbiot.png) no-repeat center;
}

.video .tile .title.liteos:before {
    background: url(../images/developer-center-second/developer-center-iot/liteos.png) no-repeat center;
}

.video .tile:hover .title {
    cursor: pointer;
    color: #F66F6A;
}

.video .layer-text {
    margin-top: 10px;
    padding: 10px 30px 10px 16px;
}

.layer-text a {
    position: relative;
    display: inline-block;
    max-width: 100%;
    font-size: 14px;
    color: #252B3A;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 8px;
}

.layer-text a:hover {
    color: #F66F6A;
}

.layer-text a span {
    margin-left: 14px;
}

.layer-text a:before {
    content: "";
    position: absolute;
    border: 2px solid #a0a2a8;
    border-radius: 50%;
    top: 8px;
    left: 0px;
}

.layer-text a:hover::before {
    border-color: #F66F6A;
}


.section-wrapper {
    max-width: 1280px;
    clear: both;
    margin: 0 auto;
    padding: 50px 10px;
    transition: padding .3s ease-out;
}

@media (min-width: 1024px) {
    .col-sm-3 {
        width: 25%;
        float: left;
    }
}

@media (min-width: 768px) {
    .col-pd-6 {
        width: 50%;
        float: left;
    }
}

.col-mb-12 {
    width: 100%;
}

.col-mb-12 {
    float: left;
}

.col-mb-12,
.col-pd-6,
.col-sm-3 {
    position: relative;
}