/* by Far */

/*初始化*/
*{
	margin: 0;
	padding: 0;

	font-family: arial;
	text-decoration: none;
}
/*横向滑条都隐藏*/
html,body 
{
  overflow-x: hidden;
}
body
{
	height: 5000px;
}
/*************************bg相关******************************/
#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 5%;
  left: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /*切换 bg的时候渐变不要 一下切换*/
  transition: background 1s ease-in-out;
}



/*************************topNav相关******************************/
.header
{
	/*background-color: white;*/
	background: rgba(222,200, 222,0.8);
	width: 100%;
	height: 5%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
#title
{
	/*background-color: white;*/
	width: 60%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
/*icon*/
#leftTopIcon img
{
	position: fixed;
	width: 5%;
	left: 0px;
	bottom: 0px;
}
#rightTopIcon img
{
	position: fixed;
	width: 5%;
	right:0px;
	bottom: 0px;
}
/*farinacg标题*/
.farinacg {
  position: fixed;
  width: 20%;
  height: 5%;
  top: 0;
  left: 0;
  font-size: 22px;
  color: black;
  /*background-color: pink;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) { /*PC端视图下的样式*/
  .farinacg {
    font-size: 40px;
    width: 20%;
  	height: 5%;
  }
}
/*privacy 隐私政策 关于我 */
.privacyAndAboutMe 
{
	position: absolute;
	
	color: black; 
	/*background-color: pink; */
  	justify-content: center;
    display: flex;
    align-items: center;
    height: 100%;
    top: 0px;
    right: 0px;
}
.privacyAndAboutMe ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.privacyAndAboutMe li {
    margin-right: 20px;
    display: flex;
    align-items: center;
}
.privacyAndAboutMe a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    height: 100%;
}


/*************************leftNav相关******************************/
.leftNav
{
	background: rgba(222,200, 222,0.8);
	width: 20%;
	height: 55%;
	left: 0%;
	top: 5%;
	position: fixed;
	z-index: 1000;
	/*div增加滑条*/
	overflow-y:auto; 
	/*隐藏滑条*/
	-ms-overflow-style: none; /* IE 和 Edge 浏览器 */
    scrollbar-width: none; /* Firefox 浏览器 */
}

/*树状图-学习*/
#treeLearn ul {
  list-style: none;
  padding-left: 0;
}
#treeLearn .expand {
  cursor: pointer;
}
#treeLearn li ul {
  display: none;
  padding-left: 1em;
}
#treeLearn li.active > ul {
  display: block;
}
/*左侧树状图导航-学习*/
.leftNav #treeLearn
{
	margin-left: 2%;
	margin-top: 2%;
	color: #555666;
	font-size: 20px;
}
/*左侧树状图导航-学习 按钮*/
.leftNav #treeLearn button 
{
  border: none;
  background-color: rgba(255,255,255,0.5);
  font-size: 18px;
  margin: 2px;
  color: #424242;
}
/*左侧树状图 按钮聚效效果*/
.leftNav #treeLearn button:hover 
{
  color: red;
  text-decoration: underline;
  cursor: pointer;
}
/*************************rightNav相关******************************/
.rightNav
{
	background: rgba(222,200, 222,0.8);
	width: 20%;
	height: 15%;
	right: 0%;
	top: 46%;
	position: fixed;
	z-index: 1000;
}
.friendlayLink
{
	position: absolute;
	width: 100%;
	height: 50%;
	margin-left: 1%;
	margin-top: 1%;
}
.friendlayLink a
{
	display: inline-block; 
  	padding: 5px 2px; 
}


/*************************footer相关******************************/
.footer
{
	background: rgba(200,200, 200,0.8);
	width: 60%;
	height: 5%;
	left: 20%;
	bottom: 0px;
	position: fixed;
	z-index: 0;

	  display: flex;
  justify-content: center;
  align-items: center;

  /*height: 30px;*/
  /*background-color: #efefef;*/
  font-size: 14px;
  /*color: #666;*/
}
/*底部文字*/
.foot-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
}

/*************************bodyMid相关******************************/
#bodyMid
{
	background: rgba(200,200, 200,0.8);
	width: 60%;
	height: 90%;
	left: 20%;
	top: 5%;
	position: fixed;
	z-index: 98;
}

#bodyMid p
{
	margin-left: 100px;
	margin-top: 50px;
}
/*************************Ad相关******************************/
.Ad
{
	/*background: rgba(1,0, 0,1);*/
	width: 20%;
	left: 0%;
	bottom:0%;
	position: absolute;
	z-index: 100;
}
.Ad2
{
	/*background: rgba(0,1, 0,1);*/
	width: 20%;
	right: 0%;
	top:5%;
	position: absolute;
	z-index: 100;
}
.Ad3
{
	/*background: rgba(1,1, 1,1);*/
	width: 20%;
	right:0%;
	bottom: 0%;
	position: absolute;
	z-index: 100;
}