/ * -------------------------------- 

主要风格

-------------------------------- * /


/ * -------------------------------- 

模块 - 我们设计的可重复使用部分

-------------------------------- * /
.cd-container {
  宽度：90％;
  最大宽度：768px;
  高度：3000px;
  保证金：2em auto;
  显示：块
}
.cd-container :: after {
  / * clearfix * /
  内容：'';
  显示：表;
  明确：两者;
}

/ * -------------------------------- 

主要成分 

-------------------------------- * /
标头{
  背景：＃5c4751;
  身高：100px;
  text-align：center;
}
标题h1 {
  font-size：20px;
  font-size：1.25rem;
  font-weight：bold;
  font-family：“Open Sans”，sans-serif;
  text-transform：大写;
  font-weight：bold;
  padding-top：1.6em;
  margin-bottom：.2em;
}
标题p {
  font-size：13px;
  font-size：0.8125rem;
  颜色：＃957484;
}
@media only screen and（min-width：1024px）{
  标头{
    身高：200px;
  }
  标题h1 {
    font-size：30px;
    font-size：1.875rem;
    padding-top：2.6em;
  }
}

主要的{
  font-size：14px;
  font-size：1rem;
  line-height：22px;
}
@media only screen and（min-width：1024px）{
  主要的{
    font-size：14px;
    font-size：1rem;
  }
}

.cd-top {
  display：inline-block;
  身高：40px;
  宽度：40px;
  位置：固定;
  底部：40px;
  右：10px;
  box-shadow：0 0 10px rgba（0,0,0,0.05）;
  / *图像替换属性* /
  溢出：隐藏;
  text-indent：100％;
  白色空间：nowrap;
  背景：rgba（232,98,86,0.8）url（./cd-top-arrow.svg）无重复中心50％;
  能见度：隐藏;
  不透明度：0;
  -webkit-transition：全部0.3s;
  -moz-transition：全0.3秒;
  过渡：全部0.3s;
}
.cd-top.cd-is-visible {
  / *按钮变得可见* /
  能见度：可见;
  不透明度：1;
}
.cd-top.cd-fade-out {
  不透明度：.5;
}
.no-touch .cd-top：悬停{
  background-color：＃e86256;
  不透明度：1;
}
@media only screen and（min-width：768px）{
  .cd-top {
    右：20px;
    底部：20px;
  }
}
@media only screen and（min-width：1024px）{
  .cd-top {
    身高：60px;
    宽度：60px;
    右：170px;
    底部：30px;
  }
}