.content {
    padding:4em 20em 0 20em;
    line-height: 2em;
}
.firstName{
    text-align: center;
    line-height: 1.5em;
    font-size: 3.5em;
}
.introduce{
    font-size: 2.5em;
}
.title1{
    font-size: 1.2em;
}
.title2{
    font-size: 1.8em;
}
.title3{
    font-size: 1.5em;
    font-weight: bold;
}

.title4{
    font-size: 1.5em;
}
.borderTable{
    width: 100%;
    border: 2px solid #000;
    border-collapse: collapse;
    text-align: center;
}
.borderTable tr td{
    border: 2px solid #000;

}
.noborderTable{
    width: 50%;
    text-align: center;
    font-weight: bold;
}
.qrCode{
    max-width: 30%;
}
@media (max-width:768px) {
    .content {
        padding:4em 1em 0 1em;
        line-height: 2em;
    }
    .firstName{
        text-align: center;
        line-height: 1.5em;
        font-size: 2.2em;
    }

    .qrCode{
        max-width: 50%;
    }
    .introduce{
        font-size: 1.8em;
    }
}
@media (min-width: 768px) and (max-width:992px) {
    .content {
        padding:4em 2em 0 2em;
        line-height: 2em;
    }
    .firstName{
        text-align: center;
        line-height: 1.5em;
        font-size: 2.2em;
    }

    .qrCode{
        max-width: 35%;
    }
    .introduce{
        font-size: 1.8em;
    }
}
@media (min-width: 992px) and (max-width:1200px) {
    .content {
        padding:4em 5em 0 5em;
        line-height: 2em;
    }
    .firstName{
        text-align: center;
        line-height: 1.5em;
        font-size: 3em;
    }

    .qrCode{
        max-width: 25%;
    }
    .introduce{
        font-size: 1.8em;
    }

}
@media (min-width: 1200px) {
    .content {
        padding:4em 10em 0 10em;
        line-height: 2em;
    }
    .firstName{
        text-align: center;
        line-height: 1.5em;
        font-size: 3em;
    }

    .qrCode{
        max-width: 25%;
    }
    .introduce{
        font-size: 1.8em;
    }


}