@CHARSET "UTF-8";
/*======================
 首页 
======================*/
/* 轮播图 */
main.index > .kook-banner{
    position: relative;
    overflow: hidden;
    width: 100%;
}
main.index > .kook-banner > .list{
    position: absolute;
    z-index: 1;
}
main.index > .kook-banner > .list img{
    display: inline-block;
    vertical-align: top;
    object-fit: cover;
    width: 100vw;
}
main.index > .kook-banner > .btns{
    position: absolute;
    bottom: 40px;
    z-index: 2;
    height: 25px;
    width: 100%;
    text-align: center;
}
main.index > .kook-banner > .btns span{
    margin-right: 5px;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}
main.index > .kook-banner > .btns .on{
    background: orangered;
}
main.index > .kook-banner > .arrow{
    position: absolute;
    top: 0;
    bottom: 60px;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 2;
    display: none;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    font-size: 36px;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    color: #FFFFFF;
    background-color: RGBA(255,255,255,.3);
    cursor: pointer;
    font-family: iconfont;
    text-decoration: none;
}
main.index > .kook-banner > .arrow:hover{
    background-color: RGBA(255,255,255,.7);
}
main.index > .kook-banner:hover .arrow{
    display: block;
}
main.index > .kook-banner > .prev{
    left: 30px;
}
main.index > .kook-banner > .next{
    right: 30px;
}
/* 口号 */
main.index > .slogan{
	width: calc(100% - 20px);
	text-align: center;
	padding: 0 10px;
}
main.index > .slogan > .title > div{
	margin-bottom: 15px;
}
main.index > .slogan > p{
	position: relative;
	width: 100%;
}
/* 服务 */
main.index > .service{
	width: 100%;
	text-align: center;
	padding-top: 50px;
	position: relative;
}
main.index > .service > .btnbar{
	white-space: nowrap;
	height: 252px;
	overflow: hidden;
	overflow-x: auto;
	user-select: none;
	padding-bottom: 0;
}
main.index > .service > .btnbar > .arrow{
	position: absolute;
	width: 100px;
	height: 100px;
	line-height: 100px;
	top: 116px;
	z-index: 10;
	font-family: iconfont;
	font-size: 60px;
	border-radius: 5px;
	background-color: #DE544822;
	color: #FFFFFF;
	cursor: pointer;
}
main.index > .service > .btnbar > .arrow:hover{
	color: #DE5448;
}
main.index > .service > .btnbar > .arrow.left{
	left: calc(50% - 590px - 50px);
}
main.index > .service > .btnbar > .arrow.left::before{
	content: "\e7ca";
}
main.index > .service > .btnbar > .arrow.right{
	right: calc(50% - 590px - 50px);
}
main.index > .service > .btnbar > .arrow.right::before{
	content: "\e609";
}
main.index > .service > .btnbar > .btns > div{
	display: inline-block;
	vertical-align: top;
	padding: 16px;
	margin: 16px;
	position: relative;
	border-radius: 8px;
    box-shadow: rgb(0 0 0 / 20%) 0px 1px 8px 0px, rgb(0 0 0 / 12%) 0px 3px 3px -2px, rgb(0 0 0 / 14%) 0px 3px 4px 0px;
    cursor: pointer;
    width: calc(25% - 64px);
}
main.index > .service > .btnbar > .btns > div > .head{
	top: 0px;
    right: 0px;
    left: 0px;
    width: auto;
    height: 93px;
    position: absolute;
    inset: 0px;
    z-index: 1;
    border-radius: 6px 6px 0 0;
}
main.index > .service > .btnbar > .btns > div > i{
	display: inline-block;
	max-width: 112px;
	height: 112px;
	border-radius: 100%;
	width: 100%;
	z-index: 3;
	position: relative;
	font-size: 70px;
	font-family: iconfont;
	text-align: center;
	line-height: 112px;
	font-style: normal;
	color: #FFFFFF;
	margin-top: 16px;
}
main.index > .service > .btnbar > .btns > div > span{
	display: block;
	height: 40px;
	line-height: 40px;
}
main.index > .service > .btnbar > .btns > div > .arrow{
	display: none;
	width: 0; 
    height: 0;
	border-width: 25px;
    border-style: solid;
	margin-top: 55px;
	transform: rotate(90deg);
	position: absolute;
	top: 131px;
	margin-left: -25px;
	z-index: 99;
}
main.index > .service > .btnbar > .btns > div > .arrow > div{
    width: 0; 
    height: 0;
    border-width: 17px;
    border-style: solid;
    border-color: transparent rgba(255,255,255,1) transparent transparent;
    margin-left: -9px;
    margin-top: -17px;
}
main.index > .service > .img{
	top: -25px;
	padding-bottom: 0;
	border: 5px solid #FFFFFF;
	margin-top: 15px;
	background-color: #FFFFFF;
	border-radius: 10px;
	position: relative;
	z-index: 1;
	box-shadow: rgb(225 225 225/20%) 0px 1px 8px 0px,rgb(255 255 255/12%) 0px 3px 3px -2px,rgb(225 225 225/14%) 0px 3px 4px 0px;
}
main.index > .service > .img > div{
    color: #FFFFFF;
    position: absolute;
    width: calc(100% - 100px);
    left: 50px;
    top: calc(50% - 100px);
    display: none;
}
main.index > .service > .img > div.open{
	display: inline-block;
}
main.index > .service > .img > img{
	display: block;
	border-radius: 5px;
	margin: 10px;
	max-width: 980px;
	width: calc(100% - 20px);
}
main.index > .service > .btnbar > .btns > div.cloud > .head,
main.index > .service > .btnbar > .btns > div.cloud > i{
	background-color: rgb(176, 81, 170);
}
main.index > .service > .btnbar > .btns > div.cloud > .arrow{
	border-color: transparent rgb(176, 81, 170) transparent transparent;
}
main.index > .service > .btnbar > .btns > div.cloud.open > i,
main.index > .service-mobi > .title.cloud{
	color: rgb(176, 81, 170);
}
main.index > .service > .img.cloud{
	border-color: rgb(176, 81, 170);
}
main.index > .service > .btnbar > .btns > div.bigdata > .head,
main.index > .service > .btnbar > .btns > div.bigdata > i{
	background-color: rgb(0, 120, 140);
}
main.index > .service > .btnbar > .btns > div.bigdata > .arrow{
	border-color: transparent rgb(0, 120, 140) transparent transparent;
}
main.index > .service > .btnbar > .btns > div.bigdata.open > i,
main.index > .service-mobi > .title.bigdata{
	color: rgb(0, 120, 140);
}
main.index > .service > .img.bigdata{
	border-color: rgb(0, 120, 140);
}
main.index > .service > .btnbar > .btns > div.iot > .head,
main.index > .service > .btnbar > .btns > div.iot > i{
	background-color: rgb(130, 210, 150);
}
main.index > .service > .btnbar > .btns > div.iot > .arrow{
	border-color: transparent rgb(130, 210, 150) transparent transparent;
}
main.index > .service > .btnbar > .btns > div.iot.open > i,
main.index > .service-mobi > .title.iot{
	color: rgb(130, 210, 150);
}
main.index > .service > .img.iot{
	border-color: rgb(130, 210, 150);
}
main.index > .service > .btnbar > .btns > div.ai > .head,
main.index > .service > .btnbar > .btns > div.ai > i{
	background-color: rgb(242, 177, 39);
}
main.index > .service > .btnbar > .btns > div.ai > .arrow{
	border-color: transparent rgb(242, 177, 39) transparent transparent;
}
main.index > .service > .btnbar > .btns > div.ai.open > i,
main.index > .service-mobi > .title.ai{
	color: rgb(242, 177, 39);
}
main.index > .service > .img.ai{
	border-color: rgb(242, 177, 39);
}
main.index > .service > .btnbar > .btns > div.digitization > .head,
main.index > .service > .btnbar > .btns > div.digitization > i{
	background-color: rgb(0, 0, 0);
}
main.index > .service > .btnbar > .btns > div.digitization > .arrow{
	border-color: transparent rgb(0, 0, 0) transparent transparent;
}
main.index > .service > .btnbar > .btns > div.digitization.open > i,
main.index > .service-mobi > .title.digitization{
	color: rgb(0, 0, 0);
}
main.index > .service > .img.digitization{
	border-color: rgb(0, 0, 0);
}
main.index > .service > .btnbar > .btns > div.open,
main.index > .service > .btnbar > .btns > div.open > i{
	background-color: #FFFFFF;
}
main.index > .service > .btnbar > .btns > div.open > .arrow{
	display: inline-block;
}
main.index > .service-mobi{
	display: none;
}
main.index > .service-mobi > img{
	width: calc(100% - 20px);
	margin: 10px;
	border-radius: 10px;
}
/* 数据统计 */
main.index > .countarup{
	background-color: #DE544822;
	margin-top: 50px;
}
main.index > .countarup > .body > div{
	padding: 30px 0;
}
main.index > .countarup > .body > .items > div{
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 1px);
    border-right: 1px solid #DE5448;
}
main.index > .countarup > .body > .items > div:nth-last-child(1){
	border-right: 0;
}
main.index > .countarup > .body > .items > div h2,
main.index > .countarup > .body > .items > div h5{
	display: inline-block;
	color: #DE5448;
}
/* 自定义属性 --step */
@property --step{
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}
main.index > .countarup > .body > .items > div b,
main.index > .countarup > .body > .more > div b{
	color: #DE5448;
	--step: 0;
    counter-reset: count var(--step); /* 引用自定义的属性 */
    z-index: var(--step);
    transition: --step 1s;
    -webkit-transition: --step 1s;
    -moz-transition: --step 1s;
    -o-transition: --step 1s;
    font-weight: normal;
    margin-right: 5px;
}
main.index > .countarup > .body > .items > div b::before,
main.index > .countarup > .body > .more > div b::before{
    content: counter(count);
    font-weight: bold;
}
/*
main.index > .countarup.view > .body > .items > div b{
    --step: 10;
}
*/
main.index > .countarup > .body > .items > div p{
    display: block;
    color: #DE544855;
    padding-top: 5px;
}
main.index > .countarup > .body > .more > div{
	display: inline-block;
	vertical-align: top;
	width: 33.33%;
	color: #DE544855;
}
main.index > .countarup > .body > .more > div b::after{
	content: "+";
}
main.index > .countarup > .body > .map{
	position: relative;
}
main.index > .countarup > .body > .map > .bg > img{
	width: 100%;
}
main.index > .countarup > .body > .map > .pins{
	position: absolute;
	top: 30px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
}
main.index > .countarup > .body > .map > .pins > div{
	position: absolute;
}
main.index > .countarup > .body > .map > .pins > div > img{
	width: 30px;
}
/* pins 辅助定位
main.index > .countarup > .body > .map > .bg{
	background-repeat: no-repeat;
	background-image: url(/assets/index/img/home/map_1.jpg);
	background-size: 116% 140%;
	background-position: 100% 70%;
}
main.index > .countarup > .body > .map > .mapcn{
	position: absolute;
	top: 30px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    z-index: 1;
}
main.index > .countarup > .body > .map > .mapcn img{
	position: absolute;
	width: 19%;
	height: 30%;
	top: 19%;
	left: 67%;
}
*/