css FMG附加内容图标导航栏

Posted 2021-05-13

#additional {
  background: #FAFAFA;
}
#additional .wrapper {
  padding: 0;
}
#additional nav {
  background: #1A5841;
  text-align: center;
  margin: 0 0 30px;
  border-bottom: 3px solid #053C28;
}
#additional nav ul {
  display: inline-block;
  width: 100%;
  padding:0;
  margin: 0;
  font-size: 0;
}
#additional nav li {
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
  padding: 0;
  border: none;
}
#additional nav a {
  display: block;
  text-align: center;
  padding: 10px;
  border-left: 1px solid #053C28;
  color: #B0A804;
  font-family: 'Quattrocento-Bold', 'Times New Roman';
}
#additional nav a:hover {
  background: #333;
}
#additional nav a.selected:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(26, 88, 65, 0);
  border-top-color: #053C28;
  border-width: 10px;
  margin-left: -10px;
}
#additional nav a:before{
  font-family: FontAwesome;
  display: block;
  padding: 0px 0 7px;
}
#additional nav .tab1 {
  border: none;
}
#additional nav .tab1:before{
  content: "\f1ea";
}
#additional nav .tab2:before{
  content: "\f1ec";
}
#additional nav .tab3:before{
  content: "\f080";
}
#additional nav .tab4:before{
  content: "\f03d";
}
#additional nav .selected {
  color: #fff;
  background: #053C28;
}
#additional nav .selected:hover {
  color: #fff;
  background: #053C28;
}
#additional .matterContent {
  overflow: hidden;
}
#additional .content {
  box-sizing: border-box;
  width: 50%;
  margin: 0;
  padding: 10px 20px;
}
#additional .viewAll {
  margin: 0 0 20px 20px;
}
#additional .viewAll a + a{
  display: none;
}