/*==================
       复写样式
  ==================*/
*{ border:0; padding:0; margin:0; }
html{ font-size:625%; } 	
/*1rem等于10px，若ul和li的间隔被裁断罚，可改成625%，1rem=100px，但此时勿用第三方轮播图插件*/
ul{ margin:0; padding:0; }
li{ list-style:none; }
img{ display:inline-block; }
a{ text-decoration:none;}

/*==================
       工具样式
  ==================*/
/*从此不要在样式里重复写对齐这种常用东西*/

.center-block{ display:block; margin-right:auto; margin-left:auto; }
.pull-right{ float:right !important; } /*!important确定优先级最高不被干扰*/
.pull-left{ float:left !important; }

.text-right{ text-align:right !important; }
.text-left{ text-align:left !important; }
.text-center{ text-align:center !important; }

.hide{ display:none !important; }
.show{ display:block !important; }
.invisible{ visibility:hidden; }/*占位也被剥夺*/
.text-hide{  }/*图片代替链接，但依然需要链接供SEO查询*/

.clearfix:before, .clearfix:after{ content:" "; display:table; }
.clearfix:after{ clear:both; }/*Thanks to Nicholas C. Zakas*/


/*==================
       外调文字
  ==================*/
  
@font-face{ src:url(../font/Oswald/Oswald-Light.ttf); font-family:tt-light; }/*标题链接细体*/
@font-face{ src:url(../font/Oswald/Oswald-Medium.ttf); font-family:tt-medium; }/*标题粗体*/
@font-face{ src:url(../font/OpenSans-Regular.ttf); font-family:text-light; }/*副标题和文本内容*/
	
/*h1{ font-family:tt-1; }
p.title-ex{ font-family:con-1;}*/

/*==================
    颜色和背景贴图
  ==================*/
  
.tabbar{ background:#FF00EF; } /*带这个骚颜色表示没用过*/
  
header nav.top{ background:black; }
header nav.top a.menu-home{ background:url(../img/icon/logo-frame.svg) center no-repeat; }
header nav.top a.menu-home:hover{ background:url(../img/icon/logo-frame-unable.svg) center no-repeat; }
header nav.top a{ color:white;  }
header nav.top a:hover{ color:#FFD500; }





footer { background:black; }
footer nav.bottom a{ color:white; }
footer nav.bottom a:hover{ color:#FFD500; }

nav a.sel{ color:#FFD500!important; }

/*==================
    尺寸和布局
  ==================*/

.tabbar{ display:none;   }
@media (max-width:480px){ 
	header, footer{ display:none; } 
	.tabbar{ display:block; position:fixed; z-index:5; bottom:0; left:0; width:100%; height:0.5rem; }
	
}  

  
header nav.top{ font-size:0; width:100%;  text-align:center; } 
header nav.top a{ 
	display:inline-block; height:0.5rem;  
	line-height:0.5rem; text-align:center; vertical-align:top!important; /*这句不加有字和没字的块元素就算同高也会错位*/
	} 
header nav.top a.menu-home{ width:0.3rem; height:0.3rem; margin:0.1rem 0.5rem 0 0.5rem; }



footer nav.bottom{ margin:0 auto;  font-size:0; height:0.7rem; /*适当拉高，防止MAC状态弹出遮挡文字*/ } 
footer nav.bottom div.web-id{ float:left;  text-align:left; width:auto; margin-left:0.12rem; }
footer nav.bottom div.web-menu{ float:right;  text-align:right; width:auto; margin-right:0.12rem;  }

footer nav.bottom div.web-id img{ display:inline-block; width:0.15rem; height:0.15rem; margin-top:0.16rem; }
footer nav.bottom div.web-id p{ display:inline-block; vertical-align:top!important; line-height:0.5rem; margin-left:0.1rem; }
footer nav.bottom div.web-menu a{ 
	display:inline-block; vertical-align:top!important; height:0.5rem; 
	line-height:0.5rem; margin-left:0.5rem;
}

/*左右极端，浮动方便，不用inlineblock，也没必要font-size归零*/
/*但这个宽度要响应式判断了*/
@media (min-width:1441px){ footer nav.bottom{ width:14.4rem; } }
@media (max-width:1441px){ footer nav.bottom{ width:12rem; } }
@media (max-width:1200px){ footer nav.bottom{ width:9.6rem; } }
@media (max-width:960px){ footer nav.bottom{ width:7.2rem; }
	footer nav.bottom div.web-id{ float:none; text-align:center; width:100%; margin:0;  }
	footer nav.bottom div.web-id p{ margin-left:0rem; } /*当初宽屏的留空要去掉，否则对不齐*/
	footer nav.bottom div.web-menu{ float:none; text-align:center; width:100%; margin:0;  }
	footer nav.bottom div.web-menu a{ margin-left:0.2rem; }
	footer nav.bottom div.web-menu a.menu-home{ margin-left:0; }
	
	footer nav.bottom{ position:relative; }
	
	footer nav.bottom div.web-id{ position:absolute; display:block; font-size:0;top:0.4rem;  }
	footer nav.bottom div.web-menu a{  line-height:0.5rem;  } 
	footer nav.bottom div.web-id p{ line-height:0.12rem;  }
	
	/*menu负责撑起高度，id是浮空的，所以id的下移加高度不能超过menu的高度，否则底部就会空出来*/
	
	
 }
@media (max-width:720px){ 
	footer nav.bottom{ width:4.8rem; } 
	}
@media (max-width:480px){ footer nav.bottom{ width:100%;  } }

/*==================
    文本样式（font-size清0归到布局上）
  ==================*/
  
a.menu-work, a.menu-home, a.menu-about{ font-family:tt-light; font-size:0.14rem; line-height:0.2rem; text-transform:uppercase; }

footer nav.bottom a.menu-work, 
footer nav.bottom a.menu-home, 
footer nav.bottom a.menu-about{ font-family:tt-light; font-size:0.14rem;  }

footer nav.bottom div.web-id{color:white; }
footer nav.bottom p{font-size:0.12rem; font-family:text-light; } /*这个中文用也不错啊，默认的文字间留白少，且粗细微有点不等*/

@media (max-width:960px){ 
	
	footer nav.bottom div.web-id img{ display:none; }
	footer nav.bottom div.web-id {color:gray;}
	footer nav.bottom div.web-id p:before{ content:' ~ '; }
	footer nav.bottom div.web-id p:after{ content:' ~ ';  }
	}