html,
body
{
    margin: 0 auto;
    padding: 0;
    width: 980px;
    height: 1386px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    font-family: "Arial", "Microsoft YaHei UI", sans-serif;
}
body > header,
body > main,
body > footer,
.row
{
    width: 892px;
}

/* 顶部 */
body > header {
    position: relative;
    border-bottom: 2px solid #938e8c;
    margin-bottom: 30px;
    font-size: 12px;
    font-family: "Microsoft JhengHei", sans-serif;
}
body > header > div {
    position: relative;
    height: 61px;
    width: 110px;
    background-color: #d45d5c;
    color: #fff;
}
.site-name {
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.site-date {
    position: absolute;
    bottom: 5px;
    right: 0;
    color: #d45d5c;
}

/* 大图及关于 */
.banner{
    position: relative;
    width: 641px;
    height: 301px;
}
/* 两个半透明遮罩 */
.cover-1 {
    position: absolute;
    height: 301px;
    width: 191px;
    left: 0;
    background-color: #f00;
    opacity: 0.2;
}
.cover-2 {
    position: absolute;
    height: 301px;
    width: 191px;
    top: 0;
    right: 0;
    background-color: #0f0;
    opacity: 0.2;
}

/* 图片右侧关于信息 */
.about {
    float: right;
    width: 203px;
    height: 301px;
    padding: 5px 0;
    border-top: 2px solid #cc8091;
}
.line-1 {
    display: inline-block;
    font-size: 20px;
    border-bottom: 2px solid #999;
}
.line-1:first-letter {
    font-size: 24px;
}
.line-2 {
    font-family: "楷体", sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #676767;
}
.line-3 {
    margin-left: -20px;
    font: italic 116px "Microsoft YaHei UI", sans-serif;
    color: #75b86b;
}
.line-4 {
    font: 55px "Microsoft YaHei UI", sans-serif;
    color: #cc8091;
}
.line-5 {
    position: relative;
    top: -14px;
    font: 21px "Microsoft YaHei UI", sans-serif;
    color: #cc8091;
}
.line-6 {
    position: relative;
    left: -40px;
    font: 12px "Microsoft YaHei UI", sans-serif;
    color: #cc8091;
}

/* 三栏文字 */
.col-3 article {
    float: left;
    width: 213px;
    height: 213px;
    padding: 10px;
    margin: 20px 0;
}
.row {
    clear: both;
}
.title-when,
.title-what,
.title-how
{
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px solid #d2994f;
    color: #d2994f;
}
.title-what {
    border-bottom: 2px solid #76ae7f;
    color: #76ae7f;
}
.title-how {
    border-bottom: 2px solid #cc7680;
    color: #cc7680;
}
.col-3 p {
    line-height: 16px;
    font: 12px "Microsoft YaHei UI";
    color: #231815;
}
.col-3 span {
    font-style: italic;
    color: #cc7680;
}

/* 下方文章及目录 */
/* 标题 */
.main-article {
    float: left;
    width: 415px;
}
.main-article header {
    padding-bottom: 10px;
    border-bottom: 2px solid #11456b;
    font: bold 38px "Microsoft JhengHei UI";
    color: #11456b;
    line-height: 35px;
}
.main-article header p{
    display: inline;
    font: bold 33px "Microsoft JhengHei UI";
    color: #11456b;
}
.main-article span {
    font: italic bold 72px "Microsoft JhengHei UI";
    color: #f5e327;
}
/* 正文 */
.main-article div {
    margin-top: 30px;
    font: 12px/16px "宋体", serif;
    color: #767777;
}
.main-article div:first-letter {
    float: left;
    margin: 0;
    padding: 0 10px;
    font-family: "Microsoft YaHei UI", sans-serif;
    line-height: 70px;
    font-size: 70px;
    color: #f5e327;
}
.main-article img {
    float: right;
    display: inline-block;
    margin: 5px 10px;
    top: 50px;
    left: 100px;
}

/* 右侧目录 */
.content-index {
    position: relative;
    float: right;
    width: 458px;
    height: 275px;

}
.content-index img {
    width: 458px;
    height: 275px;
}
.cover,
.description
{
    position: absolute;
    bottom: 0;
    width: 458px;
    height: 61px;
}
.cover {
    background-color: #000;
    opacity: 0.3;
}
.desc-title {
    display: inline-block;
    height: 44px;
    padding-left: 10px;
    margin-left: 40px;
    margin-top: 10px;
    border-left: 3px solid #72b16a;
    font: 26px/44px "Microsoft YaHei UI";
    color: #fff;
}
.desc-detail {
    font: italic 12px "Microsoft YaHei UI";
    color: #72b16a;
}

.page-index {
    float: right;
    position: relative;
    width: 458px;
    height: 360px;
    margin-top: 20px;
    background-color: #eeeed6;
}
.page {
    padding-top: 20px;
    font: 16px/20px "宋体", serif;
    color: #5d5d5d;
}
.page-index li {
    margin: 15px;
    list-style: url(../img/arrow.png);
}
.fancy-layout {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 10px;
    width: 230px;
    height: 160px;
    background-color: #d45d5c;
    color: #fff;
}
.fancy-1 {
    float: left;
    margin-top: 20px;
    font-size: 110px;
}
.fancy-2 {
    height: 80px;
    padding: 7px;
    margin-top: 33px;
    margin-left: 62px;
    border-left: 3px solid #fff;
    line-height: 20px;
}
.fancy-2 p {
    display: inline;
}
blockquote {
    width: 180px;
    position: absolute;
    bottom: 30px;
    right: -25px;
    line-height: 20px;
}
.left-quote {
    vertical-align: baseline;
}
.right-quote {
    vertical-align: top;
}

/* 底部 */
body > footer {
    clear: both;
    margin-top: 20px;
    padding-top: 40px;
    text-align: right;
}
body > footer div {
    height: 60px;
    border-top: 1px solid #938e8c;
    color: #d45d5c;
}