html{ height: 100%;}
body{  position: relative;  width: 100%;  height: 100%;  margin: 0px;  padding: 0px; background: rgb(10,24,71) ;  background-size: cover;background: url('https://cloudbegincn.oss-cn-shanghai.aliyuncs.com/body_bg2.png') ;}
/* */
/* 导航 */

@media screen and (min-width: 751px) {

	.layui-fluid {height:calc(100% - 110px)}
	.layui-side{ display: none;}
	.m-logo{ display: none;}

	.logo-title  { display: flex;background: url('../images/logo_title_bg.png') no-repeat center 0;background-size: contain; height: 90px; margin-bottom: 10px;}
	.logo-title  a:hover { color:#00ff99}
	.site-name { width: 600px; position: absolute;left: 50%; margin-left: -300px; font-size: 30px;color: #fff; line-height: 94px; text-align: center; font-weight: bold; text-shadow: 0 0 20px #000}
	.nav-left {  position: absolute;  left: 30px;  display: flex;  color: #99ccff}
	.nav-left div {  padding: 0 10px; font-size: 24px;line-height: 90px;}
	.nav-left div a {color: #01dadf;display: block; padding: 0 10px; }
	.nav-left div a:hover { display: block;background: linear-gradient(rgba(0,250,255,0), rgba(0,250,255,100));  }
	.nav-right {  position: absolute;  right: 30px;  display: flex;  color: #99ccff}
	.nav-right div {  padding: 0 10px; font-size: 24px;line-height: 90px;}
	.nav-right div a {color: #01dadf;display: block; padding: 0 10px; }
	.nav-right div a:hover { display: block;background:  linear-gradient(rgba(0,250,255,0), rgba(0,250,255,100));  }


	/* 站点样式 */

	.yq_title { font-size: 30px; text-align: center;color: #00faff;}
	.yq .index { font-size: 75px; color: #fff; line-height: 100px;margin: 100px auto; text-align: center;}

	.yq .index  b{ display: inline-block; text-align: center; width: 80px; height: 100px;  text-align: center;position: relative; margin: 0 5px;z-index: 1;}
	.yq .index  b span{  z-index: 9999 ; position:relative;}
	.yq .index  b:before{ top:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 45px; display: block; border-radius: 10px 10px 0 0 ;}
	.yq .index  b:after{ bottom:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 45px; display: block;border-radius: 0 0 10px 10px ;}
}

@media screen and (max-width: 750px) {
	.layui-fluid {height:100% ; padding-top: 50px;}
	  .layui-side { top:0px!important; left:-200px; }
    body{  position: relative;  width: 100%;  height: 100%;  margin: 0px;  padding: 0px; background: rgb(10,24,71) ;  background-size: cover;}
		.logo-title   { display: none;}
		.layui-side { display: block}
		.m-logo { position: fixed; width: 100%;z-index:99;background: rgb(10,24,71); display: block ; color: #fff; height: 50px; text-align: center; line-height: 50px; font-size:18px}
		.m-logo a{ color: #fff;}
		/* .layui-row { height: auto!important;} */
		.bg-purple .i1{ display: none!important;}
		.bg-purple .i2{ display: none!important;}
		.bg-purple .i3{ display: none!important;}
		.bg-purple .i4{ display: none!important;}


		/* 站点样式 */

		.yq_title { font-size: 15px; text-align: center;color: #00faff;}
		.yq .index { font-size: 32px; color: #fff; line-height: 50px;margin:50px auto; text-align: center;}

		.yq .index  b{ display: inline-block; text-align: center; width: 30px; height: 50px;  text-align: center;position: relative; margin: 0 5px;z-index: 1;}
		.yq .index  b span{  z-index: 9999 ; position:relative;}
		.yq .index  b:before{ top:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 22px; display: block; border-radius: 10px 10px 0 0 ;}
		.yq .index  b:after{ bottom:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 22px; display: block;border-radius: 0 0 10px 10px ;}

}
  .site-mobile-shade{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.8); z-index: 999; display: none;}







.title { color:#00faff;}
.title span { color:#00faff; font-size: 36px;}
.bg-purple {   position: relative; padding: 10px;  background: rgba(19,18,71,0.5); }
.bg-purple .i1 { position: absolute; width: 20px; height: 20px; display: block;left:0 ;top:0; border-top: 3px solid #00faff;border-left: 3px solid #00faff; }
.bg-purple .i2 { position: absolute; width: 20px; height: 20px; display: block;right:0 ;top:0; border-top: 3px solid #00faff;border-right: 3px solid #00faff; }
.bg-purple .i3 { position: absolute; width: 20px; height: 20px; display: block;left:0 ;bottom:0; border-bottom: 3px solid #00faff;border-left: 3px solid #00faff; }
.bg-purple .i4 { position: absolute; width: 20px; height: 20px; display: block;right:0 ;bottom:0; border-bottom: 3px solid #00faff;border-right: 3px solid #00faff; }


.site-name a { color:#fff;}
.title { color:#00faff;}
.title span { color:#00faff; font-size: 36px;}
.bg-purple {   position: relative; padding: 10px;  background: rgba(19,18,71,0.5); }
.bg-purple .i1 { position: absolute; width: 20px; height: 20px; display: block;left:0 ;top:0; border-top: 3px solid #00faff;border-left: 3px solid #00faff; }
.bg-purple .i2 { position: absolute; width: 20px; height: 20px; display: block;right:0 ;top:0; border-top: 3px solid #00faff;border-right: 3px solid #00faff; }
.bg-purple .i3 { position: absolute; width: 20px; height: 20px; display: block;left:0 ;bottom:0; border-bottom: 3px solid #00faff;border-left: 3px solid #00faff; }
.bg-purple .i4 { position: absolute; width: 20px; height: 20px; display: block;right:0 ;bottom:0; border-bottom: 3px solid #00faff;border-right: 3px solid #00faff; }



/*  */
.ny  {color: #fff;}
.ny span{ font-size: 16px;}
.ny li { margin-bottom: 20px; }
.nc li{ width: 100%; height: 60px; overflow: hidden;margin-bottom: 20px;color: #fff;}
.nc li .icon{ width: 80px; height: 60px; overflow: hidden;float: left; margin-right: 10px;}
.nc li .icon img { width:80px; height: 60px;}
.nc li .info-box{ float: left;}

.tscp { padding: 0px; margin: 0px;}
.tscp li{ width: 48%; margin: 0 1%; float: left; margin-bottom: 20px;color: #fff;}
.tscp li .icon{ width: 100%;   overflow: hidden;float: left; margin-right: 20px;}
.tscp li .icon img { width:100%;  }
.tscp li .info-box{ float: left;}

/*掃碼樣式*/
.source  { height: 30%; overflow: hidden;}
.source .tit { font-size: 30px; text-align: center;color: #00faff;}
.source .index { font-size: 75px; color: #fff; margin:20px auto;	font-size: 75px;
	text-align: center;
	line-height: 100px;}

.source .index  b{ display: inline-block; text-align: center; width: 80px; height: 100px;  text-align: center;position: relative; margin: 0 5px;z-index: 1;}
.source .index  b span{  z-index: 9999 ; position:relative;}
.source .index  b:before{ top:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 45px; display: block; border-radius: 10px 10px 0 0 ;}
.source .index  b:after{ bottom:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 45px; display: block;border-radius: 0 0 10px 10px ;}


/*物流样式*/
.logistics  { height: 20%; overflow: hidden;}
.logistics .tit { font-size: 20px; text-align: center;color: #00faff;}
.logistics .index {   color: #fff; margin:20px auto;

	font-size: 30px;
	text-align: center;
	line-height: 50px;

}
 .h4 { color: #fff; text-align: center; font-size: 30px;}

.logistics .index  b{ display: inline-block; text-align: center; width: 40px; height: 50px;  text-align: center;position: relative; margin: 0 5px;z-index: 1;}
.logistics .index  b span{  z-index: 99 ; position:relative;  }
.logistics .index  b:before{ top:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 23px; display: block; border-radius: 10px 10px 0 0 ;}
.logistics .index  b:after{ bottom:0; content: ' '; position: absolute; z-index: 0; background: #53c1ee; width: 100%; height: 23px; display: block;border-radius: 0 0 10px 10px ;}

/* 文字顏色 */
.color1{color: #ffdb5c!important }
.color2{color: #e062ae!important}
.color3{color: #ff9f7f!important}
.color4{color: #ffdb5c!important}
.color5{color: #e062ae!important}
.color6{color: #ffdb5c!important}
.color7{color: #a3498d!important}
.color8{color: #e7bcf3!important}
.color9{color:#00faff;}
.color0{color:#fff;}

.ids { display: flex; font-size: 16px;}
.ids div {  padding: 0 20px; width: 33%;}

.ids { color: #fff; text-align: center; line-height: 30px;}
.id1 span {	color: #fb7293;}

.id2 span {color: #ffdb5c;}
.id3 span{	color: #37a2da;}

.site {
	display: flex;



}

.site .box {
	width: 25%;
	text-align: center;
	color: #00faff;
}

.site .box .num {
	font-size: 28px; font-weight: bold;
}

.site .box .des {
	font-size: 16px;
}

.site .box.one .num {
	color: #e062ae;
}

.site .box.two .num {
	color: #37a2da;
}

.site .box.three .num {
	color: #ffdb5c;
}

.site .box.four .num {
	color: #ff9f7f;
}

.site .box.five .num {
	color: #9fe6b8;
}

* {
	box-sizing: border-box;
}



.flex-container.column {
	position: relative;
	height: calc(100% - 114px);
	width: 100%;
	overflow: hidden;
	margin: 0 auto 0px auto;
	box-sizing: content-box;
}



.el-row {
	height: 100%;
	margin-bottom: 20px;

	&:last-child {
		margin-bottom: 0;
	}
}

.layui-col-md2,.layui-col-md3,.layui-col-md4,.layui-col-md6,.layui-col-md8,.layui-col-md12 {
	height: 100%;
	border-radius: 4px;
}

.bg-purple-dark {}

.bg-purple {
	height: 100%
}

.bg-purple-light {}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	height: 100%
}

.row-bg {
	padding: 10px 0;

}