| * { | 
|     margin: 0; | 
|     overflow: hidden; | 
| } | 
| html,body { | 
|     height: 100%; | 
| } | 
| /*.nav {*/ | 
| /*    width: 100%;*/ | 
| /*    height: 90px;*/ | 
| /*    line-height: 90px;*/ | 
| /*    list-style: none;*/ | 
| /*    color: #fff;*/ | 
| /*    position: fixed;*/ | 
| /*    text-align: center;*/ | 
| /*    letter-spacing:3px;*/ | 
|   | 
| /*}*/ | 
| .right { | 
|     float: right; | 
|     margin-right: 1%; | 
|     margin-top: 1%; | 
|   | 
| } | 
| #about { | 
|     width: 47px; | 
|     height: 47px; | 
|     display: inline-block; | 
|     background-image: url(../images/cancellation.png); | 
| } | 
|   | 
| .sidebar { | 
|     width: 8%; | 
|     height: 40%; | 
|     line-height: 40px; | 
|     position: fixed; | 
|     top: 50%; | 
|     transform: translateY(-50%); | 
| } | 
| .nav ul { | 
|     font-size: 0.75em; | 
|     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 1: Brackets */ | 
| .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 1: Brackets 👆*/ | 
| /*.sidebar ul {*/ | 
| /*    font-size: 20px;*/ | 
| /*    font-weight: 500;*/ | 
| /*    padding-left: 5%;*/ | 
|   | 
| /*}*/ | 
| /*.sidebar a {*/ | 
| /*    text-decoration: none;*/ | 
| /*    !*color: #cbcbcb;*!*/ | 
| /*}*/ | 
|   | 
| /*.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: rgba(255,255,255,.05); | 
|     z-index: 999; | 
|     height: 20px; | 
|     font-size: 13px; | 
|     line-height: 20px; | 
| } | 
| footer a { | 
|     color: #3573ab; | 
|     font-weight: bold; | 
|     text-decoration: none; | 
|     cursor: pointer; | 
| } |