* {
  margin: 0px;
  padding: 0px;
}
@font-face {
  font-family: JHZmini;
  src: url('../vendor/JHZmini.ttf') format("truetype");
  font-style: normal;
  font-weight: lighter;
}
body {
  font-family: PingFangSC-Regular, PingFangSC-Thin, JHZmini, 
    KaitiSC-Regular, STKaiti, KaiTi, sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  background-color: #fdf4f4;
}

h1 {
  font-size: 2.5em;
  margin: 0 0 0.5em 0;
  margin-top: 0
}
h2 {
  font-size: 2em;
  margin: 0 0 0.2em 0;
  margin-top: 0em;
  font-weight: 100;
}
h3 {
  font-size: 1.75em;
  margin: 0 0 0.1em 0;
  margin-top: 0;
  font-weight: 100;
}
h4 {
  font-size: 1.25em;
  margin: 0 0 0.1em 0;
  margin-top: 0;
  font-weight: 100;
}
h5 {
  font-size: 1.2em;
  margin: 0 0 0.1em 0;
  margin-top: 0
}
h6 {
  font-size: 1.1em;
  margin: 0 0 0.1em 0;
  margin-top: 0
}
p {
  font-size: 1.1em;
  margin: 0.5em 0
}
ul {
  font-size: 1.1em
}
a {
  color: #008a75;
  text-decoration: none;
  transition: 0.5s
}
a:hover {
  color: #9f3
}
a.highlight {
  color: #9f3
}
a.highlight:hover {
  color: #008a75
}
p {
  color: #7e7e7e;
  font-family: PingFangSC-Thin;
}

h1 {
  /*text-shadow: rgb(245, 158, 156) 3px 3px 3px;*/
  /*text-align: center*/
}
h1+h2, h1+p {
  margin-top: -0.5em
}
h2+h1 {
  margin-top: 0.8em
}
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  color: #008a75;
  font-style: normal
}
ul {
  color: #aee2d9
}

/*img {
  margin-top: 1em;
}*/

img#logo {
  width: 35%;
  margin-top: 30%;
}

.title {
  margin-top: 10%;
}
#badge {
  width: 70%;
  margin-top: 10%;
}

.guide-msg {
  font-family: KaitiSC-Regular, STKaiti, KaiTi;
  font-size: 1em;
  color: #e73434;
  margin: 5% 0;
}

.content {
  max-width: 800px;
  margin: 0 auto
}

.section {
  color: #d61f3b;
  transition: 0.5s;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  min-height: 636px;
}

.center {
  text-align: center
}
.clearboth {
  clear: both
}
#avatar {
  width: 150px;
  height: 150px;
  margin-top: 8%;
  /*border: 10px solid #faebd7;*/
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%
}
#award {
  background-image: url('../img/award_bg_ia002.jpg');
  background-size: contain;
  background-position: center; 
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  margin: 5px;
}
#award_detail {
  background-image: url('../img/award_detail_bg.jpg');
  max-height: 5340px;
  background-size: contain;
  background-repeat: round;
}
#award_detail .section {
  color: #000;
}

#stuName {
  /*font-size: 21px;*/
  font-family: PingFangSC-Regular;
  font-weight: 600;
  color: #000;
}

#courseName {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #383838;
  font-weight: normal; /*500;
  line-height: 25px; */
}
#paraContent {
    font-family: PingFangSC-Regular;
    margin: 0px 0;
    font-size: 19px;
    word-wrap: break-word;
    font-weight: 500;
    color: #383838;
    line-height: 25px;
}
#courseDuration {
  font-size: 14px;
  color: #000;
  font-weight: normal;
}
.award_data {
  font-size: 1.1em;
  color: #CD5C5C;
  font-family: PingFangSC-Regular;
}

.row {
  position: relative;
  margin: 12% 0 0;
}
.row p {
  line-height: 45px;
}
.row:after {
  clear: both
}

input[type=text] {
    border: 1px dashed #d61f3b;
    border-radius: 5px;
    padding: 5px 10px;
    background: transparent;
    margin: 0 0 15% 0;
    font-size: 18px;
    text-indent: 5px;
}

input:focus {
  outline: none;
}

::-webkit-input-placeholder {
   color: #a8a7a7;
   font-size: 1em;
   opacity: 0.5;
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   color: #a8a7a7;
   font-size: 1em;
   opacity: 0.5;
   text-align: center;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #a8a7a7;
   font-size: 1em;
   opacity: 0.5;
   text-align: center;
}

:-ms-input-placeholder {
   color: #f27572;
   font-size: 1em;
   opacity: 0.5;
   text-align: center;
}


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

}

.mobile * {
  text-shadow: none !important
}
.mobile #avatar {
  width: 128px;
  height: 128px;
  border: 0
}
.mobile .circle-img {
  margin: 20px 10px
}
.mobile h2 {
  text-align: center
}
.mobile h1 {
  font-size: 2.625em;
  margin: 0 0 0.5em 0;
  margin-top: 0
}
.mobile h2 {
  font-size: 1.5em;
  margin: 0 0 0.2em 0;
  margin-top: 0
}
.mobile h3 {
  font-size: 1.125em;
  margin: 0 0 0.1em 0;
  margin-top: 0
}
.mobile h4 {
  font-size: 0.9375em;
  margin: 0 0 0.1em 0;
  margin-top: 0
}
.mobile h5 {
  font-size: 0.9em;
  margin: 0 0 0.1em 0;
  margin-top: 0
}
.mobile h6 {
  font-size: 0.825em;
  margin: 0 0 0.1em 0;
  margin-top: 0
}
.mobile p {
  font-size: 0.88em
}
.mobile ul {
  font-size: 0.88em
}
.mobile .section {
  padding: 50px 10px
}
.mobile #profession.section.center {
  text-align: left
}
.mobile #project.section {
  text-align: center
}