html,
body,
div,
span,
h1,
h2,
h3,
a,
em,
img,
small,
strong,
dl,
dt,
dd,
ol,
ul,
li,
time {
    margin: 0;
    padding: 0;
    border: 0
}

html {
    font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

ul {
    list-style: none
}

a {
    text-decoration: none;
    color: inherit
}

#fullpage {
    opacity: 0;
    transition: opacity 0.5s ease-out
}

.section {
    background-color: #F4F7F9;
    text-align: center
}

h1 {
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: bold;
    color: #14213D
}

@media screen and (max-width: 480px) {
    html {
        font-size: 16px
    }

    #fp-nav {
        display: none
    }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    html {
        font-size: 20px
    }

    #fp-nav {
        display: none
    }

    .wechat {
        display: none
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 24px
    }
}

@font-face {
    font-family: 'iconfont-resume';
    src: url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.eot");
    src: url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.woff") format("woff"), url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.ttf") format("truetype"), url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.svg#iconfont-resume") format("svg")
}

.iconfont-resume {
    font-family: "iconfont-resume" !important;
    font-size: 1rem;
    font-weight: normal !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-wechat::before {
    content: "\e61d"
}

.icon-email::before {
    content: "\e64b"
}

.icon-github::before {
    content: "\e719"
}

.icon-juejin::before {
    content: "\e601"
}

.icon-tele::before {
    content: "\e614"
}

.info .avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    box-shadow: 0 2px 0.2rem 0rem rgba(0, 0, 0, 0.3);
    margin: 1.5rem auto;
    background: url("../assets/avatar.jpg") center;
    background-size: cover
}

.info .name {
    font-size: 2.5rem;
    font-weight: bold;
    color: #14213D
}

.info .title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2E3338
}

.info .title a {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
    color: #727582
}

.info .contacts {
    color: #727582;
    font-size: 1rem;
    margin-top: 1rem
}

.info .contacts .contact {
    display: inline-block;
    position: relative
}

@media screen and (max-width: 480px) {
    .info .contacts .contact {
        margin-right: 0.5rem
    }
}

.info .contacts .icon-email .email {
    position: absolute;
    display: block;
    font-size: 0.7rem;
    opacity: 0;
    color: #fff;
    pointer-events: none;
    transform: translate(-50%, -90%);
    transition-property: opacity, transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    cursor: pointer;
    border: 0.1rem solid #333;
    background-color: #333;
    border-radius: 4px;
    font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    left: 50%;
    top: -0.5rem;
    padding: 0 0.5rem
}

.info .contacts .icon-email:hover .email {
    opacity: 1;
    transform: translate(-50%, -100%);
    height: auto
}

.info .contacts .icon-tele .tele {
    position: absolute;
    display: block;
    font-size: 0.7rem;
    opacity: 0;
    color: #fff;
    pointer-events: none;
    transform: translate(-50%, -90%);
    transition-property: opacity, transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    cursor: pointer;
    border: 0.1rem solid #333;
    background-color: #333;
    border-radius: 4px;
    font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    left: 50%;
    top: -0.5rem;
    padding: 0 1rem
}

.info .contacts .icon-tele:hover .tele {
    opacity: 1;
    transform: translate(-50%, -100%);
    height: auto
}

.info .contacts .icon-wechat .wechat {
    position: absolute;
    display: block;
    font-size: 0.7rem;
    opacity: 0;
    color: #fff;
    pointer-events: none;
    transform: translate(-50%, -90%);
    transition-property: opacity, transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    cursor: pointer;
    border: 0.1rem solid #333;
    background-color: #333;
    border-radius: 4px;
    font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    left: 50%;
    top: -0.5rem;
    width: 4.5rem;
    height: 4.5rem
}

.info .contacts .icon-wechat:hover .wechat {
    opacity: 1;
    transform: translate(-50%, -100%);
    height: auto
}

.info .pdf {
    display: inline-block;
    margin-top: 4rem;
    font-size: .6rem;
    color: #14213D;
    text-decoration: underline
}

.education li {
    margin-top: 1.87rem
}

.education time {
    font-size: .75rem;
    color: #2E3338
}

.education .school {
    font-size: .95rem;
    color: #727582
}

.education .major {
    font-size: .85rem;
    color: #14213D
}

.experiences,
.opensource {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.experiences .works,
.opensource .works {
    display: inline-block;
    padding-left: .83rem;
    text-align: left;
    word-break: break-all;
}

.recommend .comments {
    display: inline-block;
    padding-left: .83rem;
    text-align: left;
    word-break: break-all;
}
.recommend .comments .comment {
    list-style: initial;
    margin-top: .4rem;
    padding-left: 1rem;
    font-size: .9rem;
    line-height: 1.5rem;
    color: #333
}

.experiences .work,
.opensource .work {
    position: relative;
    border-left: solid #14213D 0.25rem;
    padding-left: 1.67rem;
    padding-right: 1rem;
    padding-bottom: .5rem
}

.experiences .work .target-border,
.opensource .work .target-border {
    position: absolute;
    top: -.25rem;
    left: -1.21rem;
    width: 1.67rem;
    height: 1.67rem;
    border: 0.25rem solid #F4F7F9;
    border-radius: 50%;
    background-color: #14213D
}

.experiences .work .target-border .target-dot,
.opensource .work .target-border .target-dot {
    width: .25rem;
    height: .25rem;
    border: 0.46rem solid #F4F7F9;
    border-radius: 50%;
    margin: .25rem
}

.experiences .work .company,
.opensource .work .company {
    font-size: 1rem;
    font-weight: bold;
    color: #4C5C68;
    min-height: 1.67rem;
    line-height: 1.67rem
}

.experiences .work .title,
.opensource .work .title {
    font-size: .67rem;
    line-height: normal;
    color: #727582
}

.experiences .work time,
.experiences .work .abstract,
.opensource .work time,
.opensource .work .abstract {
    display: block;
    font-size: .5rem;
    color: #2E3338
}

.experiences .work .tech-stack,
.opensource .work .tech-stack {
    margin-top: .2rem;
    font-size: .6rem;
    color: #888
}

.experiences .work .description,
.opensource .work .description {
    list-style: initial;
    margin-top: .4rem;
    padding-left: 1rem;
    font-size: .6rem;
    line-height: .8rem;
    color: #333
}

.experiences .work .iconfont-resume,
.opensource .work .iconfont-resume {
    font-size: 1.2rem
}

@media screen and (max-width: 480px) {

    .experiences .work,
    .opensource .work {
        position: relative;
        border-left: none;
        padding-left: 0
    }

    .experiences .work .target-border,
    .opensource .work .target-border {
        display: none
    }

    .experiences .work .company::before,
    .opensource .work .company::before {
        position: absolute;
        left: -1.2rem;
        content: '-'
    }

    .experiences .work .title,
    .opensource .work .title {
        display: block
    }
}

@media screen and (min-width: 768px) {

    .experiences h1,
    .opensource h1 {
        margin-bottom: 1rem
    }
}

.skills .skill-container {
    display: inline-block;
    max-width: 80%;
    text-align: left
}

.skills span {
    display: inline-block;
    margin: .125rem;
    padding: .375rem;
    font-weight: bold;
    color: #fff;
    border-radius: .25rem;
    background-color: #727582
}