@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans:300)
@import url(http://fonts.lug.ustc.edu.cn/css?family=Playfair+Display+SC)
  
*
  margin: 0
  padding: 0

body 
  font-size: 1.1875rem
  line-height: 1.875rem
  margin: 0 auto
  font-family: 'Open Sans', sans-serif
  background-color: rgba(246,232,206,.6)
  color: rgba(0,0,0,.8)

h1, h2
  color: rgba(0,0,0,.7)
  font-family: 'Playfair Display SC', serif
    
h1 
  font-size: 3.75rem
  line-height: 5.4375rem
  margin-top: 5.4375rem
  margin-bottom: 1.8125rem

h2 
  font-size: 3.125rem
  line-height: 3.75rem
  margin-top: 3.75rem
  margin-bottom: 1.875rem

ul li
  list-style-type: none

.container
  width: 960px
  margin: 0 auto

// Header

header
  width: 100%
  height: 45px
  line-height: 45px
  background-color: rgba(255,255,255,1)

.logo 
  float: left

header nav 
  float: right

nav ul li 
  display: inline-block
  padding-left: 1em
  font-size: .8em
  transition: .2s ease-in

nav ul li:hover 
  color: rgba(48,150,190,1)

//MAIN CONTENT

main
  margin-top: 50px
  position: relative
  padding-left: 200px
  border-top: 1px solid rgba(0,0,0,.1)
  border-right: 1px solid rgba(0,0,0,.1)
  border-bottom: 1px solid rgba(0,0,0,.1)

article
  max-width: 700px
  margin: 0 auto
  background-color: rgba(255,255,255,1)
  padding: 2em 2em 8em 2em

.main-content-nav
  position: absolute
  top: 0
  left: 0
  width: 200px
  border-left: 1px solid rgba(0,0,0,.1)
  border-right: 1px solid rgba(0,0,0,.1)
  height: 100%
  background-color: rgba(251, 251, 249, 1)

  & ul li
    display: block
    height: 45px
    line-height: 45px
    border-bottom: 1px solid rgba(0,0,0,.1)
    transition: all .4s ease-in-out
  
  & ul li:hover
    background-color: rgba(255,255,255,1)
      
  & ul li.active
    background-color: rgba(255,255,255,1)
    color: rgba(48,150,190,1)
  
  & ul li.active:after
    content: ""
    position: absolute
    display: block
    height: 45px
    width: 1px
    margin-right: -1px
    top: 0
    right: 0
    background-color: rgba(255,255,255,1)
  
footer
  margin-top: 4em
  width: 100%

section
  background-color: rgba(255,255,255,1)
  height: 100px
  line-height: 100px
  text-align: center
  font-size: 1.25em
  
  & ul li
    display: inline
    padding: 1em
    transition: .2s ease-in-out
    
    &:hover
      color: rgba(48,150,190,1)
  
footer > nav
  height: 250px
  background-color: rgba(0,0,0,.8)
  line-height: 250px
  text-align: center
  color: rgba(255,255,255,.2)

  &:hover
    color: rgba(255,255,255,1)