#web_bg{
      position:fixed;
      top: 0;
      left: 0;
      width:100%;
      height:100%;
      min-width: 1000px;
      z-index:-10;
      zoom: 1;
      filter: blur(3px);
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-position: center 0;
}
.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
}
.my-fa{
    margin-right: 5px;
}

.my-marktop{
    right:10px;
}

.my-card:hover{
    -moz-box-shadow:3px 4px 16px #332E0D;
    -webkit-box-shadow:3px 4px 16px #332E0D;
    box-shadow:3px 4px 16px #332E0D;
}

img {
    max-width: 100%; /* 图片宽度最大为100% */
    height: auto; /* 高度自适应 */
}


.my-img:hover{
    cursor: pointer;
    transform: scale(1.1);
    transition: all .5s;
}


a:hover {
    text-decoration: none;
    color: #ea6f5a;
}

pre {
    background-color: #f5f5f5;
    border: solid 1px;
    border-radius: 4px;
    padding: 8px;
}

span.highlighted {
    color: red;
}

.h1, h1 {
    font-size: 1.4em;
}
.h2, h2 {
    font-size: 1.3em;
}
.h3, h3 {
    font-size: 1.2em;
}
.h4, h4 {
    font-size: 1.1em;
}
.h5, h5 {
    font-size: 1.05em;
}
.h6, h6 {
    font-size: 1em;
}
.f-17 {
    font-size:13px;
}
.f-16 {
    font-size:12px;
}
.f-15 {
    font-size:11px;
}
.f-14 {
    font-size:10px;
}
.f-13 {
    font-size:9px;
}
.f-12 {
    font-size:8px;
}


/* account-------------------------------------------------*/
.avatar {
    width:100px;
    padding: .25rem;
    background-color: #fff;
}

/* top navbar-------------------------------------------------*/
.avatar_nav {
    width: 30px;
    margin: 0 5px;
    background-color: #fff;

    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.avatar_nav:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

/* timeline-------------------------------------------------*/
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

/* footer -------------------------------------------------*/
.my-footer{
    margin-top:40px;
    z-index: 1;
    background-color: #fff;
}

/* comment--------------------------------------------*/
.comment-avatar{
    max-width: 36px;
}


/* Small devices (landscape phones, 576px and up) */
/* X-iPhone6 AND plus */
@media (min-width: 576px) {
.container {
    max-width: none;
    padding-right: 10px;
    padding-left: 10px;
}
.f-17 {
    font-size:14px;
}
.f-16 {
    font-size:13px;
}
.f-15 {
    font-size:12px;
}
.f-14 {
    font-size:11px;
}
.f-13 {
    font-size:10px;
}
.f-12 {
    font-size:9px;
}
}

/* Medium devices (tablets, 768px and up) */
/* Y-iPad mini */
@media (min-width: 768px) {
.container {
    max-width: 750px;
    padding-right: 12px;
    padding-left: 12px;
}
.f-17 {
    font-size:16px;
}
.f-16 {
    font-size:15px;
}
.f-15 {
    font-size:14px;
}
.f-14 {
    font-size:13px;
}
.f-13 {
    font-size:12px;
}
.f-12 {
    font-size:11px;
}

}

/* Large devices (desktops, 992px and up) */
/* X-iPad Y-iPad Pro*/
@media (min-width: 992px) {
.container {
    max-width: 970px;
    padding-right: 15px;
    padding-left: 15px;
}
}

/* Extra large devices (large desktops, 1200px and up) */
/* PC X-iPad Pro*/
@media (min-width: 1200px) {
.container {
    max-width: 1140px;
}
.f-17 {
    font-size:17px;
}
.f-16 {
    font-size:16px;
}
.f-15 {
    font-size:15px;
}
.f-14 {
    font-size:14px;
}
.f-13 {
    font-size:13px;
}
.f-12 {
    font-size:12px;
}
}
