body {
    font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    background: #2d4e5c;
    -webkit-font-smoothing: antialiased;
}

main{
    margin: 0 auto;
    background-color: #2d4e5c;
    background-image : url('https://mohanyu.github.io/Website/resume/images/background.png');
    width: 1100px;
    /*height: 800px;*/
    display: -webkit-box;
    /*display: -moz-box;*/
    display: -ms-flexbox;
    /*-webkit-box-align: center;*/
    /*-moz-box-align: center;*/
    /*-ms-flex-align:center;*/
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack:center;
}
@media (max-width: 767px) {
    main{
        width:100%;
        background: none;
        display: block;
    }

}


aside {
    position: fixed;
    top: 50%;
    right: 0;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); }

@media print {
    aside {
        display: none !important; } }
@media (max-width: 767px) {
    aside {
        position: relative;
        top: 0;
        right: auto;
        display: table;
        width: 100%;
        -ms-transform: none;
        transform: none; }
    aside ul {
        display: table-row; }
    aside li {
        display: table-cell;
        text-align: center;
        border-radius: 0 !important; }
    aside a {
        padding-right: 0;
        padding-left: 0; } }
aside li {
    margin-top: 6px;
    transition: 0.2s linear;
    border-radius: 5px 0 0 5px;
    background-color: rgba(0, 0, 0, 0.8); }
aside li a {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    color: #fff; }
aside li:hover {
    background-color: rgba(55, 55, 55, 0.8); }

header {
    overflow: hidden;
    padding: 30px 45px;
    color: #fff;
    background-color: #051c1b;

/*header{*/
    /*width: 900px;*/
    /*height: 250px;*/
/*}*/

}
@media (max-width: 767px) {
    header {
        padding: 30px 10px; } }
@media print {
    header {
        padding: 20px 40px; } }

.qrcode {
    float: left;
    margin: 0; 
}
.resume {
    float: right;
    /* 打印：  -120px*/
    /* margin: -120px 0 0 0;    */
    margin: -147px 0 0 0;   
}

@media (max-width: 1024px) {
    .qrcode {
        display: none; 
    } 
    /* 打印：时需要注释掉 .resume A4纸打印 缩小比例为 87*/
    /* .resume {
        display: none; 
    }  */
}
@media print {
    .qrcode {
        display: block;
        margin-top: 5px; 
    } 
}
.qrcode img {
                                                                        /*120*/
    width: 180px;
                                                                        /*120*/
                                                                        /*仅设置width*/
    /*height: 160px;*/
}
.resume img {
                                                                        /*120*/
    width: 140px;
                                                                        /*120*/
                                                                        /*仅设置width*/
    /*height: 160px;*/
}

.title {
    float: right;
    text-align: right; }
@media (max-width: 767px) {
    .title {
        float: none;
        text-align: center; }
    .title h2 {
        padding: 0 6px; } }

@media print {
    .title {
        float: right;
        text-align: right; } }
.title h1 {
    font-size: 72px;
    line-height: 1;
    margin: 5px 0;
    padding: 5px 0; }
.title h2 {
    font-size: 20.8px;
    font-weight: 400;
    margin: 5px 0;
    padding: 5px 6px; }

address {
    overflow-y: hidden; }

.phone {
    display: inline-block; }
@media print {
    .phone {
        display: block; } 
    }

@media print {
    .wechat {
        display: none; }
     }

.contacts {
    font-size: 18px;
    float: left;
    padding-left: 16px; }
@media (max-width: 1024px) {
    .contacts {
        margin-top: 5px; }
    .contacts li {
        line-height: 1.6; } }
@media print {
    .contacts {
        line-height: 1.4;
        margin-top: 0; } }
.contacts li {
    font-style: initial;
    line-height: 1.5; }
.contacts a {
    transition: 0.3s ease-out;
    text-decoration: none;
    color: #fff; }
.contacts a:hover {
    color: #a3d3d1; }

section {
    margin-bottom: 6px; }
@media print {
    section {
        margin-bottom: 8px; } }

@media print {
    dl {
        margin: 10px 0; }
    dd {
        line-height: 1.2;
        font-size: 14px; } }

dd {
    line-height: 1.42; }

@media (min-width: 1024px) {
    .column-6 {
        float: left;
        width: 50%; } }

@media (max-width: 1023px) {
    .column-6 {
        width: 100%;
        padding-left: 0 !important; } }

@media print {
    .column-6 {
        float: left;
        width: 50%; } }

.column {
    padding-left: 15px; }

.content {
    overflow: hidden;
    padding: 15px 15px;
    background: #fff; }
@media (max-width: 414px) {
    .content {
        padding: 15px 10px; } }
@media print {
    .content {
        padding: 15px 15px !important; } }

.sec-title-wrapper {
    overflow-y: hidden; }
.sec-title-wrapper .sec-title {
    float: left;
    margin: 0 0 0 10px;
    padding: 0; }
.sec-title-wrapper .sec-zh {
    font-size: 20px;
    font-weight: 700;
    float: left; }
.sec-title-wrapper .sec-en {
    font-size: 16px;
    font-weight: 700;
    font-variant: small-caps;
    float: left;
    clear: left;
    color: teal; }

.sec-content {
    margin-bottom: 22px;
    margin-left: 20px; }

.timeline-wrapper {
    margin-top: -28px; }
.timeline-wrapper ul {
    padding-top: 28px;
    border-left: 5px solid #333; }
.timeline-wrapper .timeline-title {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.33;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 2px 0 2px 20px;
    color: #fff;
    border-radius: 5px;
    background: #333; }
.timeline-wrapper .timeline-title span:hover{
    transition: all 0.5s;
    /* color: #ff1064; */
    color: rgb(5, 235, 235); 
}
.timeline-wrapper .timeline-title a:hover{
    transition: all 0.5s;
    color: #ff1064;
}
/*a, .iconfont:hover{*/
    /*transition: all 0.5s;*/
    /*color: red;*/
/*}*/


.timeline-wrapper::after {
    float: left;
    width: 0;
    height: 0;
    margin-top: -23px;
    margin-left: 15px;
    content: "";
    border: 8px solid #333;
    border-radius: 100%; }

.education .education-content {
    margin: 0; }

.education .education-name {
    font-size: 32px;
    margin: 6px 0 5px 26px; }

.education dd {
    margin-left: 27px; }

.language .language-cert-type {
    font-size: 20px;
    font-weight: 700;
    float: left;
    padding-bottom: 3px; }

.language .language-cert-wrapper {
    display: -ms-flexbox;
    display: flex;
    overflow-y: hidden;
    -ms-flex-align: center;
    align-items: center; }

.language .progress {
    float: left;
    width: 78%;
    height: 25px;
    margin-top: 1.8px;
    margin-bottom: 5px;
    margin-left: 26px;
    border-radius: 4px;
    background: #333; }
@media (max-width: 414px) {
    .language .progress {
        width: 75%;
        margin-left: 10px; } }
@media print {
    .language .progress {
        width: 75%;
        margin-left: 10px; } }
.language .progress .progress-bar {
    height: 100%;
    border-radius: 4px;
    background: teal; }
.language .progress .progress-bar .progress-label {
    font-size: 19px;
    float: right;
    margin-right: 10px;
    color: #fff; }

.language .language-skills li {
    line-height: 1.4; }
@media print {
    .language .language-skills li {
        line-height: 1.2; } }

.experience {
    overflow-y: hidden; }
.experience .experience-content {
    margin: 0; }
.experience .experience-position {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 5px 26px; }
.experience .experience-task {
    font-size: 15px;
    margin-left: 27px; }
@media print {
    .experience .experience-task {
        font-size: 14px; }

}
.experience .experience-link {
    line-height: 1.4;
    font-size: 15px;
    float: right;
    margin-right: 10px;
    border-radius: 6px;
    background: teal;
    padding: 0 5px 0 3px;
    color: white;
}
.experience .experience-link a{
    color: white;
    text-decoration: none;

}

@media print {
    .experience .experience-link {
        /* font-size: 14px;  */
       display: none;
    }

}


@media print {
    .skills .skill-content {
        margin: 0; } }

.skills {
    padding-top: 10px;
}

.skills .skill-name {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 5px 26px;
    color: #2d4e5c;
}





.skills .skill-description {
    font-size: 15px;
    margin-left: 23px; }

footer {
    margin: 15px 6px; }
/*@media print {*/
    /*footer {*/
        /*display: none; } }*/
footer a {
    font-weight: 700;
    text-decoration: none;
    color: teal; }
footer p {
    text-align: center; }

* {
    box-sizing: border-box; }

ul {
    margin: 0;
    padding: 0;
    list-style-type: none; }

h3 {
    font-size: 20px; }

a,
strong {
    color: teal; }

strong {
    font-weight: 700; }

.container {
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 2px 2px 5px; }
@media (min-width: 1024px) {
    .container {
        width: 970px; } }
@media (max-width: 767px) {
   .resume {
    display: none;
   }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 750px; } }
@media (max-width: 414px) {
    .container {
        margin-top: 0;
        padding: 5px 0;
        box-shadow: 0 0 0; } }
@media print {
    .container {
        margin-top: 0;
        box-shadow: 0 0 0; } }
@media (min-width: 414px) {
    .container {
        margin-top: 0;
        padding: 5px 0;
        box-shadow: 0 0 0; } }