html {
font-size: 10px;
text-decoration: none;
}
body {

  line-height: 1.5;

}



/* 默认情况下，显示.footer_con元素 */  

a,a:hover,a:active,a:visited,a:link,a:focus{


  text-decoration: none;
}
ul,
li {
  list-style: none;
}
h2,
h3,
h4 {
  font-size: 100%;
  font-variant: normal;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}




/*页脚*/
.wrap_footer{ width:100%; height: 480px; background: #fbfbfb; position: relative; z-index: 1;}
.footer_con{ width:1200px; margin: 0px auto; height: 480px; position: relative;}
.footer_con .tit{ display:block; font-size: 20px; color: #5f6464; font-weight: normal; }
.footer_con ul li a{  font-size: 16px; color: #5f6464; font-weight: normal; margin-bottom: 3px;}


.focus_us{ display: block; height: 55px; width: 100%; border-bottom: 1px solid #f2f3f5; padding-top: 33px; margin-bottom: 40px; box-sizing: content-box; }
.focus_us .tit{ float: left; margin-right: 33px; }
.focus_us .focus_list li{ display:inline-block; float: left; margin-right: 28px;}
.focus_us .focus_list li a{ display:block; height: 28px; width: 20px;}
.focus_us .focus_list li a .icon{ display:block; height: 28px; width: 28px; background:url(https://img.cuteapi.com/images/2021/09/10/wechat.png) no-repeat center; background-size: 100% 100%;position: relative; transition: background 0.2s ease-in-out;}
.focus_us .focus_list li a .i_cnb{background:url(/static/img/cnb.png) no-repeat center; background-size: 100% 100%;}
.focus_us .focus_list li a .i_github{background:url(https://img.cuteapi.com/images/2021/09/10/github.png) no-repeat center; background-size: 100% 100%;}
.focus_us .focus_list li a .i_qq{background:url(https://img.cuteapi.com/images/2021/09/10/qq.png) no-repeat center; background-size: 100% 100%;}
.focus_us .focus_list li a .i_wecom{background:url(/static/img/favicon_wecom.png) no-repeat center; background-size: 100% 100%;}

.focus_us .focus_list li a .i_tg{background:url(https://img.cuteapi.com/images/2021/09/10/tg.png) no-repeat center; background-size: 100% 100%;}
.focus_us .focus_list li a .i_bilibili{background:url(https://img.cuteapi.com/images/2021/09/10/bilibili.png) no-repeat center; background-size: 100% 100%;}

.footer_con .tit_area {  
  position: relative; /* 添加相对定位 */  
}  
/* 默认情况下，显示图标 */  
.footer_con .tit_area .icon {  
  display: block;  
  height: 12px;  
  width: 12px;  
  background: url(/static/img/icon_arrow_d.png) no-repeat 0 0;  
  background-size: contain;  
  position: absolute;  
  right: 28px;  
  top: 20px;  
  transition: transform 0.2s ease-out;  
}    
  
/* 当屏幕宽度大于821px时（一般用于桌面端），隐藏图标 */  
@media (min-width: 821px) {  
  .footer_con .tit_area .icon {  
    display: none;  
  }  
}

.focus_us .focus_list li a:hover .icon{
  background:url(https://img.cuteapi.com/images/2021/09/10/wechat.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_cnb{
  background:url(/static/img/cnb.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_github{
  background:url(https://img.cuteapi.com/images/2021/09/10/github.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_qq{
  background:url(https://img.cuteapi.com/images/2021/09/10/qq.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_tg{
  background:url(https://img.cuteapi.com/images/2021/09/10/tg.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_bilibili{
  background:url(https://img.cuteapi.com/images/2021/09/10/bilibili.png) no-repeat center; background-size: 100% 100%;
}
.focus_us .focus_list li a:hover .i_wecom{
  background:url(/static/img/favicon_wecom.png) no-repeat center; background-size: 100% 100%;
}

.wechat-code, .qq-code, .wecom-code, .tg-code {
  width: 176px;
  position: absolute;
  left: 0;
  top: -186px;
  z-index: 2;
  display: none;
  opacity: 0;
  transition: opacity 0.2s linear;
  pointer-events: none;
}

.focus_us .focus_list li a:hover .wechat-code,
.focus_us .focus_list li a:hover .qq-code,
.focus_us .focus_list li a:hover .wecom-code,
.focus_us .focus_list li a:hover .tg-code {
  display: block;
  opacity: 1;
}

.join_us,.contact_us{ float: left; width: 216px;}
.contact_us{ }

.logo_ayao{ display: block; height: 28px; width: 212px; position: absolute; right: 75px; top: 28%; margin-top: -21px;}
.logo_ayao img{
  width: 100%;
}
.footer_area{ display:block; width: 100%; position: absolute; bottom: 51px; left: 0px;}
.footer_area .links li{ display:inline-block; float: left; margin-right: 20px;}
.footer_area .links li a{ font-size: 14px; color: #5f6464; margin-bottom: 0px;}
.footer_area .copyright{ font-size: 14px; color: #5f6464; float: left; width: 100%; margin-top: -13px;}
.footer_area .copyright .flag_num{ display:none;}

/*页脚移动端元素*/
.footer_area .flag_m{ display: none;}










/* 响应式 */

/*移动端响应式兼容*/

@media screen and (max-width: 1250px) {
  .footer_con{
	  width: 96%;
  }
  .join_us, .contact_us{
	width: 20%;
  }
  .footer_area .links{
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px;
  }
  .footer_area .copyright{
	width: 100%;
	overflow: hidden;
  }

}


/* 增加选择器的优先级 */
.contact_us .contact_list,
.contact_us .join_us {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.contact_us .contact_list li,
.contact_us .join_us li {
    margin-bottom: 1px !important;
}



.contact_us .contact_list a:hover,
.contact_us .join_us a:hover {
    color: #007bff !important;
}
@media screen and (max-width: 820px) {


	/*页脚*/
	.wrap_footer{/* background:url(../img/mobile/bg_2.png) no-repeat 0 0; background-size: contain; height: 376px;*/ height: auto;}
	.footer_con{ width:100%; height: auto;}
	.footer_con .tit{ font-size: 16px; margin-left: 30px; margin-right: 21px; margin-bottom: 0px;}
	.footer_con .tit_area{ display: block;  height: 40px; line-height: 25px; position: relative;}
	.footer_con .join_list,.footer_con .contact_list{ display:block; height: 0; transition: height 0.3s ease-out;}
	.footer_con .join_list li a,.footer_con .contact_list li a{ margin-bottom: 5px; margin-left: 30px; font-size: 15px;}
	.footer_area .links{ display:none;}
	.footer_con .focus_list{ display:block;}
	.footer_con .focus_us .focus_list li a{ margin-bottom: 0px;}
/* 新添加的类，控制字体大小 */
	.footer_con .logo_ayao{ display:none;}
.focus_us{ display: block; height: 55px; width: 100%; border-bottom: 1px solid #f2f3f5; padding-top: 33px; margin-bottom: 40px; box-sizing: content-box; }
.focus_us .tit{ float: left; margin-right: 5px; }
.focus_us .focus_list li{ display:inline-block; float: left; margin-right: 28px;}
.focus_us .focus_list li a{ display:block; height: 28px; width: 28px;}

	.join_us, .contact_us{ width:100%; float: none; overflow: hidden;}

	.focus_us{ padding-top:41px; border-bottom: none; height: 22px; margin-bottom: 18px;}
	.focus_us .focus_list li{ margin-right: 10px;}
	.focus_us .focus_list li a{ display:block; height: 22px; width: 22px;}
	.focus_us .focus_list li a .icon{ display:block; height: 20px; width: 20px;}

.footer_con .sublist_show ul{ height:100px;}
.footer_con .contact_us.sublist_show ul {
    height: auto !important;
    padding-bottom: 20px !important; /* 向下增加20px的内边距 */
}
	.footer_con .sublist_show .tit_area .icon{ transform:rotate(180deg);}

	.footer_area{ position: static; padding-bottom: 29px;}

	
	.footer_area .flag_m{ display:block;}
	.footer_area .copyright .flag_num{ display: inline-block; color: #929797;display: block;}
.footer_area .copyright { color: #929797;  font-size: 10px;display: block;text-align: center;float: none;line-height: 1.8;  }

}

@font-face {
    font-family: Quotes;
    src: local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");
    unicode-range: U+2018,U+2019,U+201C,U+201D
}

@media screen and (max-width: 374px) {


	/*页脚*/
	.wrap_footer{width: 375px;}

}