| * { | 
|     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: 90px; | 
|     position: fixed; | 
|     top: 50%; | 
|     transform: translateY(-50%); | 
| } | 
| /* Effect 1: Brackets */ | 
| .cl-effect-1 a::before, | 
| .cl-effect-1 a::after { | 
|     display: inline-block; | 
|     opacity: 0; | 
|     -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; | 
|     -moz-transition: -moz-transform 0.3s, opacity 0.2s; | 
|     transition: transform 0.3s, opacity 0.2s; | 
| } | 
|   | 
| .cl-effect-1 a::before { | 
|     margin-right: 10px; | 
|     content: '['; | 
|     -webkit-transform: translateX(20px); | 
|     -moz-transform: translateX(20px); | 
|     transform: translateX(20px); | 
| } | 
|   | 
| .cl-effect-1 a::after { | 
|     margin-left: 10px; | 
|     content: ']'; | 
|     -webkit-transform: translateX(-20px); | 
|     -moz-transform: translateX(-20px); | 
|     transform: translateX(-20px); | 
| } | 
|   | 
| .cl-effect-1 a:hover::before, | 
| .cl-effect-1 a:hover::after, | 
| .cl-effect-1 a:focus::before, | 
| .cl-effect-1 a:focus::after { | 
|     opacity: 1; | 
|     -webkit-transform: translateX(0px); | 
|     -moz-transform: translateX(0px); | 
|     transform: translateX(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: rgb(255, 148, 111); | 
| } | 
|   | 
|   | 
|   | 
|   | 
| /* 主体 */ | 
| 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; | 
| } |