/* 大标题 */
@font-face{
	font-family: Roboto-Bold-3;
	src: url('../font/newRoboto/Roboto-Bold-3.ttf')
}
/* 新-标题 */
@font-face{
	font-family: Roboto-Bold-title;
	src: url('../font/roboto/Roboto-Bold-3.ttf')
}
/* 新-描述细体 */
@font-face{
	font-family: Roboto-Light-whiteDesc;
	src: url('../font/newRoboto/Roboto-Light-10.ttf')
}
/* */
@font-face{
	font-family: Roboto-Medium-12;
	src: url('../font/roboto/Roboto-Medium-12.ttf')
}
/* 黑背景下 描述 使用常规字体 */
@font-face{
	font-family: Roboto-Regular-blackRule;
	src: url('../font/roboto/Roboto-Regular-blackRule.ttf')
}

h2{
    font-size: 15px;
    display: inline-block;
    margin-top: 17px;
}
.gudeMain{
	background: linear-gradient(227deg, #F0FFFF 0%, #FFFFFF 55%, #FEFEFF 60%, #F7F9FF 100%);
	min-height:810px;
	padding-bottom:35px;
}
.contentBox{
	min-height: 635px;
	background: #FFFFFF;
	box-shadow: 0px 2px 14px 11px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	overflow: hidden;
}
.guides_Title{
	padding:50px 0 25px 0;
	font-size: 39px;
	text-align: center;
	font-weight: bold;
	color: #333333;
	font-family: Roboto-Bold-3;
}
/*侧边栏*/
.listleft{
	width: 250px;
	height:701px;
	background: #F5F7FA;
	box-shadow: 0px 2px 14px 11px rgba(0, 0, 0, 0.08);
	float: left;
	/*border-radius: 16px 0 0 16px;*/
}

.main{
	width: calc(100% - 250px);
	height: 701px;
	float: right;
	background: #FFFFFF;
	/*border-radius: 0px 16px 16px 0;*/
	position: relative;
	padding: 40px 0;
}
.gudeMain .action{
	background: linear-gradient(225deg, #3FD2B4 0%, #01B28E 100%);
	box-shadow: -1px 1px 8px 0px rgba(0, 134, 106, 0.58);
	border-radius: 4px;
	color: #fff;
}
.gudeMain .action img{
	display: none;
}
.gudeMain .action:after{
	display: block;
	content: '';
	background: url(../img/guide/circle.webp);
    position: absolute;
    top: 16px;
    left: 13px;
    width: 12px;
    height: 12px;
}
.liSty,.liStyAlone{
	padding-left: 5px;
}
.liSty img,.liStyAlone img{
	position: absolute;
    left: 5px;
    top: 12px;
    width: 24px;
}
.liSty span,.liStyAlone span{
	padding-left:30px;
	font-family: Roboto-Bold-title;
}
.leftSide ul li{
	font-size: 15px;
	height: 44px;
	line-height: 44px;
	color: #2C2C2C;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	font-family: Roboto-Regular-blackRule;
}

.cont {
	overflow: hidden;
	display: none;
}
/*视频内容*/
.titleTabs{
	width: 330px;
	height: 33px;
	background: #FFFFFF;
	border-radius: 24px;
	border: 1px solid #01B28E;
	overflow: hidden;
	margin: auto;
	margin-top: 41px;
}
.titleTabs>ol{
	margin: 0px;
	font-size: 0px;
}
.titleTabs>ol li{
	display: inline-block;
	width: 110px;
	text-align: center;
	line-height: 32px;
	font-size: 13px;
	cursor: pointer;
}
#showThreeContent>.titleTabs{
	width: 220px;
}
.tabOl2{
	width:220px;
}
.borderLi{
	border-left: 1px solid #01B28E;
     border-right: 1px solid #01B28E;
}
.tabOne{
	
}
.olTabAction{
	background: #01B28E;
	color: #fff;
}
.phoneSty{
	width: 440px;
	margin: auto;
	text-align: center;
	display: none;
}
.phoneSty>img{
    width: 258px;
    height: 522px;
}

/*.baImg{
	width: 266px;
    height: 614px;
    margin: auto;
    background-image: url(../img/iphone6.webp);
    background-repeat: no-repeat;
    background-size: 264px;
}*/
#bgBall{
	width: 230px;
	height: 497.72px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50%;
	background: #1CD0B6;
	opacity: 0.53;
    box-shadow: 0px 2px 14px 11px #1cd0b6;
}
.baImgLeft{
	width: 350px;
    height: 536px;
    margin-top: 25px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    text-align: center;
}
.baImg{
    width: calc(100% - 350px);
    height: 536px;
    margin-top: 25px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    padding-right: 10px;
}
video{
	object-fit:fill;
}
.baImgLeft video{
	width: 230px;
	height: 497.72px;
	position: absolute; 
	top: 12px;
	z-index: 2;
	border-radius: 26px;
}

/*响应时候，展开收起图标*/
.storageBox{
	width: 100%;
	padding: 18px 16px;
	background: #fff;
	box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.05);
}
.listIcon{
	width: 26px;
}
.imgright{
	float: right;
	width: 20px;
	cursor: pointer;
}
.hideboxs{
	cursor: pointer;
	font-weight: bold;
	display: none;
}
#showOneContent,#showTwoContent,#showThreeContent,#showFourContent{
	display: block;
}
#h5Guide{
	display: none;
}
#pcGuide{
	display: block;
}

/* 后改的内容 */
.tableTitleText{
	font-size: 19px;
	color: #333;
	text-align: center;
	font-weight: bold;
	font-family: Roboto-Bold-3;
}
.destText{
	font-size: 13px;
	list-style: square;
	padding-left:20px;
	line-height: 17px;
	margin-top: 50px;
	font-family: Roboto-Light-whiteDesc;
}
.destText li{
	margin: 16px 0;
}
.unfold{
	font-size: 12px !important;
	padding-left: 30px;
}
.drawerSty{
	display: none;
	margin: 6px;
}
.drawerShow{
	display: block;
}
.listRight:before{
    display: block;
    content: '';
    background: url(../img/showRight.webp) no-repeat;
    background-size: 14px;
    position: absolute;
    top: 17px;
	right: 4px;
    width: 20px;
    height: 20px;
}
.listBottom:before{
    display: block;
    content: '';
    background: url(../img/showMoreBlack.webp) no-repeat;
    background-size: 14px;
    position: absolute;
    top: 17px;
	right: 4px;
    width: 20px;
    height: 20px;
}
/*响应式*/
@media (min-width: 980px){}
@media (min-width: 1024px){
	.baImgLeft{
		/*width: 100%;*/
	}
	.baImgLeft video{
		
	}
}
@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 767px) {
	/*H5*/ 
	#h5Guide{
		display: block;
	}
	#pcGuide{
		display: none;
	}
	.twoUlPad{
		padding-right:70px;
	} 
	.twoHeader ul{
		float:none;
		text-align: center;
	}
	.topBananer{
		height: 500px;
	}
	.bananer_title{
		padding-top: 144PX;
	}
	
	/*侧边栏*/
	.listleft{
		display:none;
	}
	
	/*内容*/
	.main{
		width: 100%;	
	}
	
	.titleTabs{
		width: 313px;
		height: 32px;
	}
	.titleTabs>ol li{
		width: 104px;
		font-size: 12px;
	}
	#showThreeContent>.titleTabs{
		width: 210px;
	}
	.tabOl2{
		width:208px;
	}
	.storageBox{
		border-bottom:1px solid #ccc;
	}
	.hideboxs{
		display: block;
	}
	#showOneContent,#showTwoContent,#showThreeContent,#showFourContent{
		display: none;
	}
	#showFourContent{
		padding-top:0px !important;
	}
	.storageBox #showOneContent{
		display: block;
	}
	
	
	
	.cont{
		display: block;
	}

}
@media (max-width: 600px) {
	.twoUlPad{
		padding-right: 45px;
	} 
	.twoHeader ul{
		float:none;
		text-align: center;
	}
	
	.topBananer{
		height: 500px;
	}
	.bananer_title{
		padding-top: 144PX;
	}
	
	
}
@media only screen and (max-width: 480px){
	.twoUlPad{
		padding-right: 20px;
	}
	.topBananer{
		height: 400px;
	}
	.bananer_title{
		padding-top: 86px;
	}
	
	.twoHeader ul{
		float:none;
		text-align: center;
	}
	.baImg{
		display: none;
	}
	
}