* { 
 | 
    margin: 0; 
 | 
    overflow: hidden; 
 | 
} 
 | 
html,body { 
 | 
    height: 100%; 
 | 
} 
 | 
  
 | 
.sidebar { 
 | 
    width: 8%; 
 | 
    height: 40%; 
 | 
    line-height: 5.625em; 
 | 
    position: fixed; 
 | 
    top: 50%; 
 | 
    transform: translateY(-50%); 
 | 
} 
 | 
.nav ul { 
 | 
    font-size: 1.25em; 
 | 
    font-weight: 500; 
 | 
    padding-left: 5%; 
 | 
} 
 | 
.nav a { 
 | 
    position: relative; 
 | 
    text-decoration: none; 
 | 
    margin-left: 0.625em; 
 | 
    font-weight: 500; 
 | 
} 
 | 
.nav a:hover { 
 | 
    color:  #fff; 
 | 
} 
 | 
/* Effect 4: bottom border enlarge */ 
 | 
.cl-effect-4 a { 
 | 
    padding: 0 0 0.625em; 
 | 
} 
 | 
  
 | 
.cl-effect-4 a::after { 
 | 
    position: absolute; 
 | 
    top: 100%; 
 | 
    left: 0; 
 | 
    width: 100%; 
 | 
    height: 0.0625em; 
 | 
    background: #fff; 
 | 
    content: ''; 
 | 
    opacity: 0; 
 | 
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; 
 | 
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; 
 | 
    transition: height 0.3s, opacity 0.3s, transform 0.3s; 
 | 
    -webkit-transform: translateY(-0.625em); 
 | 
    -moz-transform: translateY(-0.625em); 
 | 
    transform: translateY(-0.625em); 
 | 
} 
 | 
  
 | 
.cl-effect-4 a:hover::after, 
 | 
.cl-effect-4 a:focus::after { 
 | 
    height: 0.3125em; 
 | 
    opacity: 1; 
 | 
    -webkit-transform: translateY(0px); 
 | 
    -moz-transform: translateY(0px); 
 | 
    transform: translateY(0px); 
 | 
} 
 | 
/* Effect 4: bottom border enlarge */ 
 | 
/* .sidebar ul { 
 | 
    font-size: 20px; 
 | 
    font-weight: 500; 
 | 
    padding-left: 5%; 
 | 
  
 | 
} 
 | 
.sidebar a { 
 | 
    text-decoration: none; 
 | 
} 
 | 
  
 | 
.sidebar a:hover { 
 | 
    color: rgb(255, 148, 111); 
 | 
} */ 
 | 
  
 | 
  
 | 
  
 | 
.nav-unselect { 
 | 
    color: #FFFFFF; 
 | 
} 
 | 
.nav-select { 
 | 
    font-weight: 900; 
 | 
    color:  #fff; 
 | 
} 
 | 
  
 | 
  
 | 
  
 | 
  
 | 
/* 涓讳綋 */ 
 | 
iframe { 
 | 
    width: 100%; 
 | 
    height: 100%; 
 | 
    border-width: 0; 
 | 
} 
 | 
/* 搴曢儴 */ 
 | 
footer { 
 | 
    /* border-top: 1px solid #e3e3e3; */ 
 | 
    position: fixed; 
 | 
    bottom: 0; 
 | 
    right: 0; 
 | 
    left: 0; 
 | 
    text-align: center; 
 | 
    font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif; 
 | 
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.0); 
 | 
    box-sizing: border-box; 
 | 
    background-color: rgb(108,167,168); 
 | 
    z-index: 999; 
 | 
    height: 20px; 
 | 
    font-size: 13px; 
 | 
    line-height: 20px; 
 | 
    background-color: #f1f1f1; 
 | 
    opacity: .7; 
 | 
} 
 | 
footer a { 
 | 
    color: #3573ab; 
 | 
    font-weight: bold; 
 | 
    text-decoration: none; 
 | 
    cursor: pointer; 
 | 
} 
 |