.uiwrap{background-color: #0f0f1d;}
.boxhd .pic{height: 1rem;margin-bottom: .3rem;}
.boxhd .pbot{height: .1rem;margin-bottom: .4rem;}
.boxhd .pic img,
.boxhd .pbot img{
	width: auto;
	height: 100%;
	margin: 0 auto;
}
.boxhd h3{
	font-size: .26rem;
	color: #926dfb;
	text-align: center;
	line-height: .4rem;
	font-weight: bold;
	letter-spacing: .2rem;
	padding-left: .15rem;
	margin-bottom: .2rem;
}
.boxhd p{
	font-size: .24rem;
	color: rgba(255,255,255,.6);
	text-align: center;
	line-height: .42rem;
}
.mask_video .mask_con{
	width: 82%;
	height: auto!important;
}
.aBtn{
	/* position: relative;
	width: 6.9rem;
	height: 1rem;
	border: .02rem rgba(82,68,133,.51) solid;
	background-color: rgba(102,76,168,.3);
	margin: 0 auto;
	padding: .1rem 0; */
}
.aBtn i:before,
.aBtn i:after,
.aBtn em:before,
.aBtn em:after{
	position: absolute;
	left: -.02rem;
	top: -.02rem;
	width: .04rem;
	height: .04rem;
	background-color: #3adaed;
	content: "";
}
.aBtn em:before,
.aBtn em:after{left: auto;right: -.02rem;}
.aBtn i:after,
.aBtn em:after{top: .94rem;}
.aBtn a{
	position: relative;
	display: block;
	width: 4rem;
	height: .77rem;
	font-size: .24rem;
	color: #fff;
	text-align: center;
	line-height: .73rem;
	/* border: .02rem #845dec solid; */
  border-radius: 2rem;
	background-color: rgba(131,82,255,.75);
	margin: 0 auto;
}
.aBtn a b{
	font-size: .36rem;
	font-style: italic;
	font-weight: bold;
	margin: 0 .15rem;
}

.ban{height: 11rem;}
.tab_box .tablist{
	position: absolute;
	height: 1.8rem;
	/* background: url("/http/design.itheima.com/2020phone/images/uipic/uibox1bg2.jpg") no-repeat center .96rem; */
	background-size: 100%;
	margin-top: -.95rem;
	width: 6.9rem;
	left:50%;
	transform:translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	z-index: 2;
}
.tab_box .tab_top{
  background-color: #0f0f1d;
	position: absolute;
	/* left: .3rem; */
	top: 0;
	display: flex;
	justify-content: space-between;
	width: 6.9rem;
	/* height: 2rem; */
	box-shadow: none;
	/* background: url("/http/design.itheima.com/2020phone/images/uipic/uibox1bg1.png") no-repeat center top; */
	background-size: 100%;
	z-index: 3;
	padding: 0 .4rem;
}
.tab_box .tablist.cur{
	height: 1.9rem;
	overflow: hidden;
}
.tab_box .tab_top:after{
	position: absolute;
	left: .4rem;
	top: 1.32rem;
	width: 6.1rem;
	height: .02rem;
	border-left: .04rem #52527d solid;
	border-right: .04rem #52527d solid;
	background-color: rgba(42,42,68,.6);
	content: "";
}
.tab_box .tab_top>div{
	height: 1.32rem;
	font-size: .28rem;
	color: #6a728b;
	text-align: center !important;
	line-height: 1.42rem;
	margin: 0;
	padding: 0;
}
.tab_box .tab_top.fixed{
	top: -.2rem;
	width: 7.5rem;
	height: 1.3rem !important;
	box-shadow: 0 .1rem .3rem rgba(23,51,119,.6);
	background: #0f0f1d;
	padding: 0 .5rem;
}
.tab_box .tab_top.fixed>div{height: 1.06rem;}
.tab_box .tab_top>div.tab_on{
	position: relative;
	color: #99ebff;
	border: none;
}
.tab_box .tab_top>div.tab_on:after{
	position: absolute;
	left: 50%;
	bottom: -.04rem;
	width: .56rem;
	height: .07rem;
	border-radius: .04rem;
	box-shadow: 0 0 .2rem rgba(118,231,255,.7);
	background-color: #76e7ff;
	margin-left: -.28rem;
	content: "";
	z-index: 3;
}
.fontcolor{
  color: #8F66FC;
  /* font-size:.28rem; */
}
.fontweight{
  font-weight: bold;
}
.szbot{box-shadow: none;}

.uibox1 .uibox1_con{padding-bottom: .66rem;}
.uibox1 .title{
  width: 5rem;
  height: 100%;
  margin: 0 auto;
  display: block;
}
.uibox2{padding: 1.56rem 0 1.5rem;}
.uibox2 .uibox2_con{width: 6.9rem;margin: 0 auto .84rem;}
.uibox2 .uibox2_con ul li{
	position: relative;
	height: 2.27rem;
	margin-top: .95rem;
}
.uibox2 .uibox2_con ul li .pic{
	position: absolute;
	left: 0;
	top: 0;
	width: 3.6rem;
}
.uibox2 .uibox2_con ul li .con{
	position: absolute;
	left: 0;
	top: 0;
	width: 3.06rem;
}
.uibox2 .uibox2_con ul li:nth-child(even) .pic,
.uibox2 .uibox2_con ul li:nth-child(odd) .con{
	left: auto;
	right: 0;
}
/* .uibox2 .uibox2_con ul li:nth-child(even) .con{width: 512px;} */
.uibox2 .uibox2_con ul li .con h3{
	font-size: .2rem;
	color: #ff4fae;
	font-weight: bold;
	letter-spacing: .2rem;
}
.uibox2 .uibox2_con ul li .con h4{
	position: relative;
	font-size: .3rem;
	color: #fff;
	font-weight: bold;
	line-height: .4rem;
	padding: .1rem 0 .2rem;
}
.uibox2 .uibox2_con ul li .con h4:before{
	position: absolute;
	left: 0;
	bottom: -.12rem;
	width: .04rem;
	height: .04rem;
	border: .02rem #9ed6dc solid;
	border-radius: 50%;
	content: "";
}
.uibox2 .uibox2_con ul li .con h4:after{
	position: absolute;
	left: .1rem;
	bottom: -.1rem;
	width: 3rem;
	height: .02rem;
	background-color: rgba(177,245,247,.08);
	content: "";
}
.uibox2 .uibox2_con ul li .con p{
	font-size: .22rem;
	color: #bababc;
	line-height: .32rem;
	padding: .16rem 0 0;
}
/* .uibox2 .uibox2_con ul li:nth-child(even) .con h3,
.uibox2 .uibox2_con ul li:nth-child(even) .con h4,
.uibox2 .uibox2_con ul li:nth-child(even) .con p{text-align: right;}
.uibox2 .uibox2_con ul li:nth-child(even) .con h4:before{left: auto;right: 0;}
.uibox2 .uibox2_con ul li:nth-child(even) .con h4:after{left: auto;right: .1rem;} 
.uibox2 .uibox2_con ul li:nth-child(4) .con h4{padding-bottom: .6rem;}
.uibox2 .uibox2_con ul li:nth-child(4) .con p{padding-top: 0;margin-top: -.15rem;}*/
.uibox2 .uibox2_con ul li:nth-child(4) .con span{
	position: relative;
	top: -.25rem;
	display: block;
	font-size: .2rem;
	color: #48484a;
	text-align: right;
}

.uibox3 .uibox3_con{
	position: relative;
	margin: .4rem 0 .48rem;
}
.uibox3 .uibox3_con .top{
	position: absolute;
	left: .3rem;
	/* top: .64rem; */
	display: flex;
	justify-content: space-between;
	width: 6.9rem;
}
.uibox3 .uibox3_con .top h3{
	font-size: .28rem;
	color: #fff;
	font-weight: bold;
	line-height: .57rem;
}
.uibox3 .uibox3_con .top a{
	position: relative;
	width: 2.9rem;
	height: .53rem;
	font-size: .22rem;
	color: #b88eff;
	text-align: center;
	line-height: .53rem;
	font-weight: bold;
	border: .02rem #42316f solid;
	border-radius: .3rem;
	background-color: rgba(129,71,240,.3);
	padding-left: .35rem;
}
.uibox3 .uibox3_con .top a:before{
	position: absolute;
	left: .16rem;
	top: .11rem;
	width: .3rem;
	height: .3rem;
	box-shadow: 0 .08rem .18rem rgba(123,67,239,.46);
	background: url("/http/design.itheima.com/2020phone/images/uipic/pic.png") no-repeat 0 -2.63rem;
	background-size: 3rem;
	content: "";
}

.js_box3_ui{padding: 1.44rem 0 1.3rem;}
.js_box3_ui ol{
	display: flex;
	justify-content: center;
	margin: .44rem 0 .56rem;
}
.js_box3_ui ol li{
	position: relative;
	display: block;
	/* width: 1.6rem; */
	height: .51rem;
	font-size: .22rem;
	color: rgba(213,188,255,.6);
	text-align: center;
	line-height: .51rem;
	border-radius: .25rem;
	background-color: rgba(77,48,154,.9);
	margin: 0 .1rem;
	padding: 0 .3rem 0 .4rem;
}
.js_box3_ui ol li:before{
	position: absolute;
	left: .21rem;
	top: .23rem;
	width: .04rem;
	height: .04rem;
	border-radius: 50%;
	background-color: #e5d9ff;
	content: "";
}
.js_box3_ui ol li.cur{
	color: #fff;
	box-shadow: 0 .15rem .45rem rgba(139,73,195,.48);
	background: -moz-linear-gradient(to right , #7039fd, #ad3edb);
	background: linear-gradient(to right, #7039fd,#ad3edb);
}
.js_box3_ui ol li.cur:before{
	box-shadow: 0 0 0 .04rem rgba(255,255,255,.1);
	background-color: #fff;
}
.js_box3_ui ol li.cur:after{
	position: absolute;
	left: 50%;
	bottom: -.35rem;
	width: .13rem;
	height: .09rem;
	background: url("/http/design.itheima.com/2020phone/images/uipic/pic.png") no-repeat 0 0;
	background-size: 3rem;
	margin-left: -.06rem;
	content: "";
}
.js_box3_ui .btm{margin-bottom: .6rem;}
.js_box3_ui .btm li{
	width: 1000px;
	height: 2.1rem;
	overflow: hidden;
}
.js_box3_ui .btm .con{
	float: left;
	height: 2.1rem;
}
.js_box3_ui .btm img{width: auto;height: 100%;}
.sevenCourse{
  width: 6.6rem!important;
  height: 2rem!important;
}
.uibox4{
  padding-bottom: 1.3rem;
}
.uibox4  .uibox4_con  {
  margin-bottom: 1rem;
}
.uibox4  .uibox4_con dl {
  padding: 0.3rem;
  height: 2.4rem;
  display: flex;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}
.uibox4  .uibox4_con dl dt{position: relative; margin-right: 0.12rem;}
.uibox4  .uibox4_con dl img{
  width:3.9rem ;
  height: 2.4rem;
  border: 0.05rem #5e5e99 solid;
}
.uibox4  .uibox4_con  dl:first-child dd{
  padding-top: 0.55rem;
}
.uibox4  .uibox4_con  dl:first-child i{
  bottom:1.08rem;
}
.uibox4  .uibox4_con  dl:nth-child(2) i{
 width: 91%;
}
.uibox4  .uibox4_con dd{
  padding-top: 0.3rem;
  position: relative;
  z-index: 2;
}
.uibox4  .uibox4_con dl p{
  font-size: .3rem;
  color: #fff;
  font-weight: bold;
  line-height: 0.4rem;
}
.uibox4  .uibox4_con dl i{
  width: 100%;
  height: 0.2rem;
  background:#8F61FF;
  display: block;
  position: absolute;
  bottom: 0.93rem;
  z-index: -1;
  opacity: 0.6;
}
.uibox5 .uibox5_con{padding-bottom: .6rem;}
.uibox5 .uibox5_con .swiper-container{margin-left: .3rem;}
.uibox5 .uibox5_con .list{
	width: 6.36rem;
	height: 9.38rem;
	border: .02rem #262636 solid;
	border-radius: .1rem;
	box-shadow:inset 0 -1rem 2rem -1rem rgba(43,58,127,.6);
	background-color: rgba(27,27,44,.6);
	padding: .14rem 0 0;
}
.uibox5 .uibox5_con .con_top h3{
	display: flex;
	justify-content: space-between;
	width: 6.02rem;
	height: .76rem;
	font-size: .36rem;
	color: #fff;
	line-height: .76rem;
	font-weight: bold;
	background: url("/http/design.itheima.com/2020phone/images/uipic/uibox5bg1.png") no-repeat;
	background-size: 100%;
	padding: 0 .2rem;
	margin: 0 auto;
}
.uibox5 .uibox5_con .con_top h3 span{
	font-size: .15rem;
	font-style: italic;
	font-weight: normal;
}
.uibox5 .uibox5_con .con_top p{
	position: relative;
	width: 5.6rem;
	height: .84rem;
	font-size: .24rem;
	color: #5f5f76;
	line-height: .96rem;
	border-bottom: .02rem rgba(120,65,245,.2) solid;
	padding-left: .32rem;
	margin: 0 auto;
}
.uibox5 .uibox5_con .con_top p:after{
	position: absolute;
	left: 0;
	bottom: -.02rem;
	width: .2rem;
	height: .02rem;
	border-left: .02rem #c2a7ff solid;
	background-color: #7841f5;
	content: "";
}
.uibox5 .uibox5_con .con_top p b{
	color: #fff;
	font-weight: bold;
}
.uibox5 .uibox5_con .con_top p i{
	color: #fff;
	font-style: italic;
	margin: 0 .1rem;
}
.uibox5 .uibox5_con .con_top p:before{
	position: absolute;
	left: .06rem;
	top: .45rem;
	width: .06rem;
	height: .06rem;
	border-radius: 50%;
	box-shadow: 0 0 0 .05rem rgba(190,163,244,.2);
	background-color: #a27cff;
	content: "";
}
.uibox5 .uibox5_con .con_bot .autobox{
	height: 6.76rem;
	overflow: auto;
	margin-top: .28rem;
	padding: 0 .6rem 0 .76rem;
}
/* .uibox5 .uibox5_con .con_bot .autobox::-webkit-scrollbar {width: 7px;height: 1px;}
.uibox5 .uibox5_con .con_bot .autobox::-webkit-scrollbar-thumb {width: 7px;border-radius: 4px;background: #523196;}
.uibox5 .uibox5_con .con_bot .autobox::-webkit-scrollbar-track{width: 7px;height: 1px;} */
.uibox5 .uibox5_con .con_bot h3{
	position: relative;
	font-size: .24rem;
	color: #e8e8f9;
	font-weight: bold;
	/* margin-top: 3px; */
}
.uibox5 .uibox5_con .con_bot h3:before{
	position: absolute;
	background: url("/http/design.itheima.com/2020phone/images/uipic/pic.png") no-repeat 0 -.1rem;
	background-size: 3rem;
	content: "";
}
.uibox5 .uibox5_con .con_bot h3.sjsm:before{
	left: -.36rem;
	top: 0;
	width: .23rem;
	height: .36rem;
}
.uibox5 .uibox5_con .con_bot h3.zjnr:before{
	left: -.34rem;
	top: .06rem;
	width: .24rem;
	height: .25rem;
	background-position-y: -.51rem;
}
.uibox5 .uibox5_con .con_bot h3.kjj:before{
	left: -.45rem;
	top: -.1rem;
	width: .42rem;
	height: .44rem;
	background-position-y: -.78rem;
}
.uibox5 .uibox5_con .con_bot h3.kzw:before{
	left: -.36rem;
	top: .05rem;
	width: .23rem;
	height: .21rem;
	background-position-y: -1.26rem;
}
.uibox5 .uibox5_con .con_bot p{
	font-size: .22rem;
	color: #bababc;
	line-height: .36rem;
	margin: .1rem 0 .32rem;
}

.uibox6{
	width: 6.93rem;
	border: .02rem #262636 solid;
	border-radius: .1rem;
	background-color: rgba(27,27,44,.6);
	margin: 1.15rem auto .6rem;
	padding: .11rem 0 .06rem;
}
.uibox6 .boxhd img{width: 6.5rem;margin: 0 auto;}
.uibox6 ol{
	display: flex;
	height: 1.37rem;
	justify-content: center;
}
.uibox6 ol li{
	width: 2.35rem;
	height: .5rem;
	font-size: .22rem;
	color: rgba(255,255,255,.3);
	text-align: center;
	line-height: .5rem;
	border-radius: .25rem;
	background-color: #472d8e;
	margin: .5rem .19rem 0;
}
.uibox6 ol li.cur{
	color: #fff;
	font-weight: bold;
	box-shadow: 0 .15rem .45rem rgba(139,73,195,.48);
	background: -moz-linear-gradient(to right , #7039fd, #ad3edb);
	background: linear-gradient(to right, #7039fd,#ad3edb);
}
.uibox6 .uibox6_con{
	width: 6.5rem;
	height: 4.08rem;
	background: url("/http/design.itheima.com/2020phone/images/uipic/uibox6pic2.jpg") no-repeat;
	background-size: 100%;
	margin: 0 auto;
}
.uibox6 .uibox6_con ul li{
	display: none;
}
.uibox6 .uibox6_con ul li.cur{
	display: flex;
	width: 6.05rem;
	justify-content: space-between;
	margin-left: .24rem;
}
.uibox6 .uibox6_con ul li p{
	width: 2.8rem;
	font-size: .22rem;
	color: rgba(255,255,255,.75);
	text-align: center;
	line-height: .87rem;
}
.uibox6 .uibox6_con ul li p b{
	display: block;
	font-size: .24rem;
	color: #fff;
	font-weight: bold;
	line-height: .53rem;
	padding: .22rem 0 .02rem;
}

.uibox7{padding-top: 1.15rem;}
.uibox7 .uibox7_con .swiper-container{
	padding: .5rem 0 .6rem;
	margin-left: .3rem;
}
.uibox7 .uibox7_con .autobox{
	width: 6.36rem;
	height: 7.86rem;
	border: .02rem #262636 solid;
	border-radius: .1rem;
	box-shadow:inset 0 -1rem 2rem -1rem rgba(43,58,127,.6);
	background-color: rgba(27,27,44,.6);
}
.uibox7 .uibox7_con .autobox .pic{
	width: 4.64rem;
	margin: -.5rem 0 0 -.08rem;
}
.uibox7 .uibox7_con .autobox .con{
	width: 5.9rem;
	height: 6rem;
	overflow: auto;
	margin: .3rem auto 0;
}
.uibox7 .uibox7_con .autobox .con p{
	font-size: .22rem;
	color: rgba(255,255,255,.5);
	line-height: .36rem;
	margin-bottom: .4rem;
}
.uibox7 .uibox7_con .autobox .con b{
	position: relative;
	display: block;
	font-size: .24rem;
	color: #fff;
	font-weight: bold;
	margin-bottom: .16rem;
}
.uibox7 .uibox7_con .autobox .con b:after{
	position: absolute;
	right: 0;
	bottom: .08rem;
	width: 5.1rem;
	height: .02rem;
	background-color: rgba(120,65,245,.2);
	content: "";
}
.uibox7 .uibox7_con .autobox .con b:before{
	position: absolute;
	right: 4.88rem;
	bottom: .08rem;
	width: .2rem;
	height: .02rem;
	border-left: .02rem #c2a7ff solid;
	background-color: #7841f5;
	content: "";
}

.uibox8{padding: 1.34rem 0 .84rem;}
.uibox8 .uibox8_con{
	position: relative;
	background: url("/http/design.itheima.com/2020phone/images/uipic/uibox8bg1.jpg") no-repeat;
	background-size: 6.62rem;
}
.uibox8 .uibox8_con .maincon{
	width: 6.9rem;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding-top: .58rem;
}
.uibox8 .uibox8_con .maincon .pic{
	width: 2.16rem;
	height: 3.3rem;
	background: url("/http/design.itheima.com/2020phone/images/uipic/tea.png") no-repeat;
	background-size: 100%;
	padding-top: .13rem;
}
.uibox8 .uibox8_con .maincon .pic img{width: 2rem;}
.uibox8 .uibox8_con .maincon .con{
	width: 4.46rem;
}
.uibox8 .uibox8_con .maincon .con h3{
	position: relative;
	font-size: .3rem;
	color: #fff;
	line-height: .64rem;
	border-bottom: .02rem rgba(112,62,230,.2) solid;
	padding-bottom: .1rem;
}
.uibox8 .uibox8_con .maincon .con h3:before{
	position: absolute;
	left: 0;
	bottom: -.02rem;
	width: .34rem;
	height: .02rem;
	border-left: .02rem #c2a7ff solid;
	background-color: #7841f5;
	content: "";
}
.uibox8 .uibox8_con .maincon .con p{
	font-size: .22rem;
	color: rgba(255,255,255,.5);
	line-height: .36rem;
	margin-top: .24rem;
}
.uibox8 .uibox8_con .bot{
	width: 6.9rem;
	margin: .22rem auto 0;
}
.uibox8 .uibox8_con .bot h4{
	font-size: .24rem;
	color: #e8e8f9;
	font-weight: bold;
}
.uibox8 .uibox8_con .bot ol{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border: .02rem rgba(73,55,105,.6) solid;
	box-sizing: border-box;
	background-color: rgba(130,79,194,.15);
	padding: .23rem .2rem .01rem;
	margin: .16rem 0 .56rem;
}
.uibox8 .uibox8_con .bot ol li{
	position: relative;
	height: .26rem;
	font-size: .22rem;
	color: rgba(232,232,249,.8);
	line-height: .26rem;
	margin: 0 .38rem .23rem .22rem;
	padding-left: .35rem;
}
.uibox8 .uibox8_con .bot ol li:before{
	position: absolute;
	left: 0;
	top: 0;
	width: .22rem;
	height: .26rem;
	background: url("/http/design.itheima.com/2020phone/images/uipic/pic.png") no-repeat 0 -1.49rem;
	background-size: 3rem;
	content: "";
}
.uibox8 .uibox8_con .gallery-thumbs{
	width: 7.1rem;
	margin: 0 auto 1rem;
}
.uibox8 .uibox8_con .gallery-thumbs .pic{
	width: 1.56rem;
	height: 1.56rem;
	border-radius: .08rem;
	overflow: hidden;
	margin: 0 auto;
	opacity: .6;
}
.uibox8 .uibox8_con .gallery-thumbs .swiper-slide-thumb-active .pic{opacity: 1;}
.uibox8 .uibox8_con .swiper-pagination{
	bottom: -.5rem;
	width: 100%;
	font-size: 0;
}
.uibox8 .uibox8_con .swiper-pagination span{
	width: .09rem;
	height: .09rem;
	border-radius: .05rem;
	background-color: rgba(109,198,255,.3);
	opacity: 1;
	margin: 0 .03rem;
}
.uibox8 .uibox8_con .swiper-pagination span.swiper-pagination-bullet-active{
	width: .21rem;
	box-shadow: 0 0 .3rem rgba(118,231,255,.7);
	background-color: #76e7ff;
}

.uibox9{padding-bottom: 1.15rem;}
.uibox9 .uibox9_con{
	width: 6.87rem;
	margin: .4rem auto .62rem;
}
.uibox9 .uibox9_con .swiper-slide{
	background: url("/http/design.itheima.com/2020phone/images/uipic/uibox9pic2.png") no-repeat center 4.6rem;
	background-size: 7.12rem;
}
.uibox9 .uibox9_con .pic{
	position: relative;
	border: .04rem rgba(97,119,255,.42) solid;
}
.uibox9 .uibox9_con .pic:before{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.2);
	content: "";
	z-index: 2;
}
.uibox9 .uibox9_con .pic:after{
	position: absolute;
	left: .13rem;
	bottom: .13rem;
	width: 1.05rem;
	height: .4rem;
	background: url("/http/design.itheima.com/2020phone/images/uipic/pic.png") no-repeat 0 -2.21rem;
	background-size: 3rem;
	content: "";
	z-index: 2;
}
.uibox9 .uibox9_con .pic i{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.16rem;
	height: 1.16rem;
	border-radius: 50%;
	background-color: rgba(44,31,66,.8);
	transform: translate(-50%,-50%);
	z-index: 3;
}
.uibox9 .uibox9_con .pic i:before{
	position: absolute;
	left: 50%;
	top: 50%;
	width: .42rem;
	height: .42rem;
	content: "";
	background: url("/http/design.itheima.com/2020phone/images/uipic/pic.png") no-repeat 0 -1.77rem;
	background-size: 3rem;
	transform: translate(-50%,-50%);
}
.uibox9 .uibox9_con h3{
	height: .92rem;
	font-size: .28rem;
	color: rgba(255,255,255,.8);
	line-height: .46rem;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: .4rem 0 .36rem;
}
.uibox9 .uibox9_con p{
	display: flex;
	justify-content: space-between;
}
.uibox9 .uibox9_con p .span1{
	width: 1.07rem;
	height: .46rem;
	font-size: .22rem;
	color: #669cff;
	text-align: center;
	line-height: .42rem;
	border-radius: .05rem;
	border: .02rem rgba(81,113,255,.3) solid;
	background-color: rgba(70,105,255,.2);
}
.uibox9 .uibox9_con p .span2{
	position: relative;
	font-size: .24rem;
	color: rgba(255,255,255,.3);
	line-height: .46rem;
}
.uibox9 .uibox9_con p .span2:before{
	position: absolute;
	left: -.3rem;
	top: .19rem;
	width: .08rem;
	height: .08rem;
	border-radius: 50%;
	box-shadow: 0 0 0 .06rem rgba(93,177,255,.14);
	background-color: #5db1ff;
	content: "";
}
.footcon .footer p, .footcon .footer p a {color: #fff!important;}