﻿.cont0{
	background: url(../images/cont-0-1.jpg) no-repeat center;
	background-size: cover;
	height: 280px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
}
.cont1{
	background: url(../images/cont-1-0@2x.jpg) no-repeat center;
	background-size: cover;
	height: 633px;
	display: block;
}
.cont8{
	background: url(../images/jiaofu11.jpg) no-repeat center;
	background-size: cover;
}
.cont8{
	
}
.cont10{
	background: url(../images/cont-10-0.png) no-repeat center bottom;
	background-size: 830px 321px;
	background-color: #000000;
	height: 400px;
}
.functions2 img{
	left:calc(50% - 85px);
}
.text-cont7{
	display: flex;
	margin-right: 90px;
}
.text-cont8{
	display: flex;
	justify-content: center;
}
.text-cont8>div>div{
	display: flex;
	align-items: baseline;
	color: white;
}
.cont8 .ss-text{
	line-height: 30px;
	font-size: 14px;
	padding-left: 12px;
}
.cont8 .sb-text{
	font-size: 22px;
	line-height: 40px;
	margin-bottom: 28px;
}
.s-content9{
	margin-top: 80px;
}
.s-content9 img{
	left: calc(50% - 82px);
}
.s-content9 div{
	margin: 0px 4%;
}
.s-content9 p{
	color: white;
	text-align: center;
	line-height: 28px;
}
.cont10 .s-content{
	align-items: flex-end;
}
.cont11{
	background: url(../images/cont-11-6.jpg) no-repeat center;
	background-size: cover;
	height: 410px;
}
.text-cont13{
	display: flex;
}
.functions14{
	padding:0px 70px 0px 0px !important;
	align-items: center;
	justify-content: flex-end;
}
.functions14>div{
	width: 140px;
	flex: 0 !important;
	white-space:nowrap;
	margin: 0px 26px;
}
.cont15{
	background: url(../images/cont-15-0.jpg) no-repeat center;
	background-size: cover;
	height: 382px;
	padding-top: 50px;
}
.cont17>div{
	margin-right: 30px;
	line-height: 30px;
	color: white;
}
.cont18 .functions{
	padding: 0px 16%;
}
.cont18 .functions>div{
	margin-bottom: 40px;
}
.cont18 .function-exp{
	font-size: 18px;
}
.cont .function-title{
	line-height: 50px;
}
.cont .fuhao{
	color: #C4A47E;
	font-size: 40px;
	flex: 0 !important;
	text-align: center;
	padding-top: 68px;
}
.cont .function-exp{
	line-height: 26px;
}
.cont .text-cont p{
	line-height: 32px;
	padding-right: 0px;
}
.nss-title{
	font-size: 22px !important;
    color: white;
}
.jc{
	justify-content:center;
}
.demobox{
	display: inline-block;
	margin-right: 28px;
}
.demobox>div{
	display: flex;
	align-items: center;
	line-height: 30px;
	padding-left: 8px;
}
.bighang{
	padding-left: 0px !important;
	margin-bottom: 22px;
}
.bighang div{
	display: inline-block;
	font-size: 18px;
	margin-left: 16px;
}
.demobox span{
	color: #989898;
	font-size: 14px;
	display: inline-block;
	margin-left: 8px;
}

.smalllubo1{
	width: 528px;
    height: 300px;
    position: absolute;
    top: 34px;
    left: 33px;
}

/*/////////////鐜舰鍥�//////////////*/
.circleProgress_wrapper {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
    -webkit-transform: rotate(30deg);
} 
.circleProgress_wrapper .wrapper {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    overflow: hidden;
} 
.circleProgress_wrapper .top {
    top: 0;
}
 
.circleProgress_wrapper .bottom {
    top: 100px;
}
.circleProgress_wrapper .circleProgressbottom {
    width: 180px;
    height: 180px;
    border: 10px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: -100px;
    -webkit-transform: rotate(45deg);
}
.circleProgress_wrapper .circleProgresstop {
    width: 180px;
    height: 180px;
    border: 10px solid transparent;
    border-radius: 50%;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(334deg);
}
.circleProgress_wrapper .topcircle{
    border-top:10px solid green;
    border-left: 10px solid green;
    -webkit-animation: circleProgressLoad_topa 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper .bottomcircle{
    border-bottom:10px solid green;
    border-right:10px solid green;
    -webkit-animation: circleProgressLoad_bottoma 1s linear;
    animation-play-state: paused;
}
@-webkit-keyframes circleProgressLoad_bottoma {
   0%{
        -webkit-transform: rotate(225deg);
    }
    50%,100%{
        -webkit-transform: rotate(405deg);
    }
}
@-webkit-keyframes circleProgressLoad_topa {
    0%,50%{
        -webkit-transform: rotate(224deg);
    }
    100%{
        -webkit-transform: rotate(334deg);
    }
}
.topcirclecolor1{
	border-top:10px solid #018CD7 !important;
    border-left: 10px solid #018CD7 !important;
}
.bottomcirclecolor1{
	border-bottom:10px solid #018CD7 !important;
    border-right: 10px solid #018CD7 !important;
}
.topcirclecolor2{
	border-top:10px solid #F7BD64 !important;
    border-left: 10px solid #F7BD64 !important;
}
.bottomcirclecolor2{
	border-bottom:10px solid #F7BD64 !important;
    border-right: 10px solid #F7BD64 !important;
}
.topcirclecolor3{
	border-top:10px solid #01B770 !important;
    border-left: 10px solid #01B770 !important;
}
.bottomcirclecolor3{
	border-bottom:10px solid #01B770 !important;
    border-right: 10px solid #01B770 !important;
}
.topcirclecolor4{
	border-top:10px solid #E53D46 !important;
    border-left: 10px solid #E53D46 !important;
}
.bottomcirclecolor4{
	border-bottom:10px solid #E53D46 !important;
    border-right: 10px solid #E53D46 !important;
}
.circle-cont{
	position: absolute;
    z-index: 10;
    top: 104px;
    left: calc(50% - 40px);
}
.circle-cont1{
	position: absolute;
    z-index: 10;
    top: 104px;
    left: calc(50% - 53px);
}

/*绗簩涓幆褰㈠浘*/
.circleProgress_wrapper2 {
    width: 170px;
    height: 170px;
    margin: 20px auto;
    position: relative;
    -webkit-transform: rotate(0deg);
} 
.circleProgress_wrapper2 .wrapper {
    width: 170px;
    height: 85px;
    position: absolute;
    left: 0;
    overflow: hidden;
} 
.circleProgress_wrapper2 .top {
    top: 0;
}
 
.circleProgress_wrapper2 .bottom {
    top: 85px;
}
.circleProgress_wrapper2 .circleProgressbottom {
    width: 146px;
    height: 146px;
    border: 12px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    top: -85px;
    -webkit-transform: rotate(225deg);
}
.circleProgress_wrapper2 .circleProgresstop {
    width: 146px;
    height: 146px;
    border: 12px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(45deg);
}
.circleProgress_wrapper2 .topcircle18-1{
    border-top:12px solid #0098E1;
    border-left: 12px solid #0098E1;
    -webkit-animation: circleProgressLoad_top18_1 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper2 .bottomcircle18-1{
    border-bottom:12px solid #0098E1;
    border-right:12px solid #0098E1;
    animation-play-state: paused;
    /*-webkit-animation: circleProgressLoad_bottomb18_1 1s linear;*/
}
 
@-webkit-keyframes circleProgressLoad_bottomb18_1 {
   0%{
        -webkit-transform: rotate(225deg);
    }
    50%,100%{
        -webkit-transform: rotate(405deg);
    }
}
@-webkit-keyframes circleProgressLoad_top18_1 {
    0%{
        -webkit-transform: rotate(225deg);
    }
    100%{
        -webkit-transform: rotate(405deg);
    }
}

.circleProgress_wrapper2 .circleProgressbottom18-2 {
    width: 146px;
    height: 146px;
    border: 12px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    top: -85px;
    -webkit-transform: rotate(261deg);
}
.circleProgress_wrapper2 .circleProgresstop18-2 {
    width: 146px;
    height: 146px;
    border: 12px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(45deg);
}
.circleProgress_wrapper2 .topcircle18-2{
    border-top:12px solid #E43D47;
    border-left: 12px solid #E43D47;
    -webkit-animation: circleProgressLoad_top18_2 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper2 .bottomcircle18-2{
    border-bottom:12px solid #E43D47;
    border-right:12px solid #E43D47;	
    -webkit-animation: circleProgressLoad_bottomb18_2 1s linear;
    animation-play-state: paused;
}
 
@-webkit-keyframes circleProgressLoad_bottomb18_2 {
    0%,50%{
        -webkit-transform: rotate(225deg);
    }
    100%{
        -webkit-transform: rotate(261deg);
    }
}
@-webkit-keyframes circleProgressLoad_top18_2 {
    0%{
        -webkit-transform: rotate(225deg);
    }
    100%,50%{
        -webkit-transform: rotate(405deg);
    }
}

.circleProgress_wrapper2 .circleProgressbottom18-3 {
    width: 146px;
    height: 146px;
    border: 12px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    top: -85px;
    -webkit-transform: rotate(225deg);
}
.circleProgress_wrapper2 .circleProgresstop18-3 {
    width: 146px;
    height: 146px;
    border: 12px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(335deg);
}
.circleProgress_wrapper2 .topcircle18-3{
    border-top:12px solid #00B76F;
    border-left: 12px solid #00B76F;
    -webkit-animation: circleProgressLoad_top18_3 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper2 .bottomcircle18-3{
    border-bottom:12px solid #00B76F;
    border-right:12px solid #00B76F;
    /*-webkit-animation: circleProgressLoad_bottomb18_3 1s linear;*/
    animation-play-state: paused;
}
 
@-webkit-keyframes circleProgressLoad_bottomb18_3 {
    0%,50%{
        -webkit-transform: rotate(225deg);
    }
    100%{
        -webkit-transform: rotate(243deg);
    }
}
@-webkit-keyframes circleProgressLoad_top18_3 {
    0%{
        -webkit-transform: rotate(225deg);
    }
    100%{
        -webkit-transform: rotate(335deg);
    }
}

/*绗笁绉嶇幆褰㈠浘*/
.circleProgress_wrapper3 {
    width: 124px;
    height: 124px;
    margin: 20px auto;
    position: relative;
    -webkit-transform: rotate(0deg);
} 
.circleProgress_wrapper3 .wrapper {
    width: 124px;
    height: 62px;
    position: absolute;
    left: 0;
    overflow: hidden;
} 
.circleProgress_wrapper3 .top {
    top: 0;
}
 
.circleProgress_wrapper3 .bottom {
    top: 62px;
}
.circleProgress_wrapper3 .circleProgressbottom {
    width: 104px;
    height: 104px;
    border: 10px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    top: -62px;
    -webkit-transform: rotate(380deg);
}
.circleProgress_wrapper3 .circleProgresstop {
    width: 104px;
    height: 104px;
    border: 10px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(45deg);
}
.circleProgress_wrapper3 .topcircle18-4{
    border-top:10px solid #37C4D5;
    border-left: 10px solid #37C4D5;
    -webkit-animation: circleProgressLoad_top18_4 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper3 .bottomcircle18-4{
    border-bottom:10px solid #37C4D5;
    border-right:10px solid #37C4D5;
    -webkit-animation: circleProgressLoad_bottomb18_4 1s linear;
    animation-play-state: paused;
}
@-webkit-keyframes circleProgressLoad_bottomb18_4 {
    0%,50%{
        -webkit-transform: rotate(225deg);
    }
    100%{
        -webkit-transform: rotate(380deg);
    }
}
@-webkit-keyframes circleProgressLoad_top18_4 {
    0%{
        -webkit-transform: rotate(225deg);
    }
    50%,100%{
        -webkit-transform: rotate(405deg);
    }
}

.circleProgress_wrapper3 .circleProgressbottom18-5 {
    width: 104px;
    height: 104px;
    border: 10px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    top: -62px;
    -webkit-transform: rotate(400deg);
}
.circleProgress_wrapper3 .circleProgresstop18-5 {
    width: 104px;
    height: 104px;
    border: 10px solid #F1C17B;
    border-radius: 50%;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(45deg);
}
.circleProgress_wrapper3 .topcircle18-5{
    border-top:10px solid #3BA1DB;
    border-left: 10px solid #3BA1DB;
    -webkit-animation: circleProgressLoad_top18_5 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper3 .bottomcircle18-5{
    border-bottom:10px solid #3BA1DB;
    border-right:10px solid #3BA1DB;
    -webkit-animation: circleProgressLoad_bottomb18_5 1s linear;
    animation-play-state: paused;
}
@-webkit-keyframes circleProgressLoad_bottomb18_5 {
    0%,50%{
        -webkit-transform: rotate(225deg);
    }
    100%{
        -webkit-transform: rotate(400deg);
    }
}
@-webkit-keyframes circleProgressLoad_top18_5 {
    0%{
        -webkit-transform: rotate(225deg);
    }
    50%,100%{
        -webkit-transform: rotate(405deg);
    }
}

.circleProgress_wrapper3 .topcircle18-6{
    border-top:10px solid #4E81E3;
    border-left: 10px solid #4E81E3;
    -webkit-animation: circleProgressLoad_top18_5 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper3 .bottomcircle18-6{
    border-bottom:10px solid #4E81E3;
    border-right:10px solid #4E81E3;
    -webkit-animation: circleProgressLoad_bottomb18_5 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper3 .topcircle18-7{
    border-top:10px solid #8A6EE8;
    border-left: 10px solid #8A6EE8;
    -webkit-animation: circleProgressLoad_top18_5 1s linear;
    animation-play-state: paused;
}
.circleProgress_wrapper3 .bottomcircle18-7{
    border-bottom:10px solid #8A6EE8;
    border-right:10px solid #8A6EE8;
    -webkit-animation: circleProgressLoad_bottomb18_5 1s linear;
    animation-play-state: paused;
}

.circle-cont18-1{
	color: #0192DA;
	top: 77px;
    left: calc(50% - 59px);
    font-size: 40px;
}
.circle-cont18-2{
	color: #E43D46;
	top: 77px;
    left: calc(50% - 59px);
    font-size: 40px;
}
.circle-cont18-3{
	color: #01B76E;
	top: 77px;
    left: calc(50% - 59px);
    font-size: 40px;
}
.circle-cont18-4{
	color: #36C5D5;
    top: 62px;
    left: calc(50% - 42px);
    font-size: 28px;
}
.circle-cont18-5{
	color: #3AA0DD;
    top: 62px;
    left: calc(50% - 46px);
    font-size: 28px;
}
.circle-cont18-6{
	color: #4F81E3;
    top: 62px;
    left: calc(50% - 46px);
    font-size: 28px;
}
.circle-cont18-7{
	color: #896EE8;
    top: 62px;
    left: calc(50% - 46px);
    font-size: 28px;
}

.view-bg-s-1{
	background:#1FB3D9;
}
.viewbox-s-1:hover {
    background:#1FB3D9;
}


.view-bg-s-2{
	background:#26CACC;
}
.viewbox-s-2:hover {
    background:#26CACC;
}

.view-bg-s-3{
	background:#27CB98;
}
.viewbox-s-3:hover {
    background:#27CB98;
}

.view-bg-s-4{
	background:#26CA67;
}
.viewbox-s-4:hover {
    background:#26CA67;
}

.view-bg-s-5{
	background:#4F81E2;
}
.viewbox-s-5:hover {
    background:#4F81E2;
}

.view-bg-s-6{
	background:#6C6EE7;
}
.viewbox-s-6:hover {
    background:#6C6EE7;
}

.view-bg-s-7{
	background:#976BE7;
}
.viewbox-s-7:hover {
    background:#976BE7;
}

.view-bg-s-8{
	background:#B76BE7;
}
.viewbox-s-8:hover {
    background:#B76BE7;
}

/* 智慧贸易 */
.prote1{
	display: flex;
    background: #DFE0E2;
    justify-content: center;
}
.prote2{
	display: flex;
    background: white;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.proAdv3{
	background: url(../images/adv3.jpg) no-repeat center;
	background-size: cover;
	height: 457px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}
.nowtry{
	border: 1px solid white;
    background: none;
}
.nowtry:hover{
	border: none;
    background: #0292D9;
}
.viewbox2{
	width:300px;
	height:360px;
}
.viewbox2 a{
	width:300px;
}
.viewbox2:hover a{
	width:300px;
}


.view-bg-p-1{
	background:#37C4D6;
}
.viewbox-p-1:hover {
    background:#37C4D6;
}


.view-bg-p-2{
	background:#ABD215;
}
.viewbox-p-2:hover {
    background:#ABD215;
}

.view-bg-p-3{
	background:#D2B414;
}
.viewbox-p-3:hover {
    background:#D2B414;
}

.view-bg-p-4{
	background:#E6920E;
}
.viewbox-p-4:hover {
    background:#E6920E;
}

.view-bg-p-5{
	background:#E6920E;
}
.viewbox-p-5:hover {
    background:#E6920E;
}

.view-bg-p-6{
	background:#FF9000;
}
.viewbox-p-6:hover {
    background:#FF9000;
}

.view-bg-p-7{
	background:#FF7200;
}
.viewbox-p-7:hover {
    background:#FF7200;
}

.view-bg-p-8{
	background:#CC8AF6;
}
.viewbox-p-8:hover {
    background:#CC8AF6;
}

/* 智慧品牌 */
.probr1{
	display: flex;
    background: white;
    justify-content: center;
}
.pbrand2{
	background: url(../images/pbrand2.png) no-repeat center;
	background-size: cover;
	height: 516px;
}
.pbrand3{
	background: url(../images/pbrand3.png) no-repeat center;
	background-size: cover;
	height: 767px;
}
.pbrand6{
	background: url(../images/pbrand6.png) no-repeat center;
	background-size: cover;
	height: 827px;
}
.btn1{
	position: absolute;
    bottom: 28px;
    left: 667px;
}
.btn5{
	position: absolute;
    bottom: 78px;
    left: 14px;
}
.btn8{
	position: absolute;
    bottom: 12px;
    left: 48px;
}
.btn10{
	position: absolute;
    bottom: -39px;
    left: 545px;
}
.btn11{
	position: absolute;
    bottom: -3px;
    left: 505px;
}
.btn10{
	position: absolute;
    bottom: -49px;
    left: 545px;
}
.btn14{
	position: absolute;
    bottom: 26px;
    left: 507px;
}
/* 智能硬件 */
.goodsBox{
	background:#E2E5EC;
	width: 1100px;
	margin:auto;
	text-align: center;
}
.goodsImgDiv{
	width: 214px;
	height:214px;
    background: white;
    border-radius: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.goodsList{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.goodsList>div{
	margin-left:50px;
    font-size: 15px;
    color: #333;
    line-height: 50px;
    margin-bottom:50px;
    overflow: hidden;
    position: relative;
}
.goodsList img{
	width:200px;
	height:200px;
	display:block;
}
.goodsList img[name="qrCode"]{
	position:absolute;
	left: 7px;
    top: -200px;
    transition:top .4s cubic-bezier(0.4,0,0.2,1) 0s;
	-moz-transition:top .4s cubic-bezier(0.4,0,0.2,1) 0s; /* Firefox 4 */
	-webkit-transition:top .4s cubic-bezier(0.4,0,0.2,1) 0s; /* Safari and Chrome */
	-o-transition:top .4s cubic-bezier(0.4,0,0.2,1) 0s; /* Opera */    
}
.goodsImgDiv:hover img[name="qrCode"]{
	top:7px;
}	