@charset "utf-8";
*,
*::before,
*::after {
    box-sizing: border-box;
}
body, code {
    font-family: Arial, Helvetica, "LiHei Pro", "Microsoft JhengHei", "MingLiU",sans-serif;
    background-color: #eee;
}

a {
    color: #3d7e9a;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.navi {}

.navi__ls {
    padding-left: 0;
    text-align: center;
}

.navi__item {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

.navi__item a {
    display: block;
    padding: 10px 15px;
    color: #000;
    background-color: #ddd;
    border-radius: 5px;
}

.navi__item a:hover {
    background-color: #d6d6d6;
    text-decoration: none;
}

.navi__item--active a,
.navi__item--active a:hover {
    color: #fff;
    background-color: #3d7e9a;
}

.post {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.post__title {
    font-size: 36px;
    text-align: center;
}

.post__desc {
    line-height: 1.7;
}

.tips__ls {
    display: flex;
    padding-left: 0;
    list-style-type: none;
}

.tips__item {
    padding: 15px;
    width: 33.33333%
}

.tips__item .l-gutter {
    height: 235px;
    padding: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
}

.tips__title {
    font-size: 20px;
    color: #333;
}

.tips__desc {
    line-height: 1.7;
}