* {
  box-sizing: border-box;
  font-family: "Yu Mincho";
  color: #212529;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  font-size: calc(1 / 1920 * 100vw);
}

body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

.flex {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.col {
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.a-c {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.j-c {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.j-b {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.j-a {
  -webkit-box-pack: distribute;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.j-e {
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.container {
  width: 100%;
  padding-inline: 358rem;
}

.sentence-space {
  display: inline-block;
  width: 20px;
  /* Adjust the sentence spacing here */
}

a {
  text-decoration: none;
}

/* ======== Header =========== */
/* Open Menu Button */
#openMenu {
  position: fixed;
  top: 40rem;
  right: 40rem;
  z-index: 1001;
  background-color: rgba(190, 190, 190, 0.8);
  filter: grayscale(20%) brightness(1.1);
  border: 1px solid rgba(255, 254, 254, 0);
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  transition: 0.3s ease;
  gap: 10px;
}

.line {
  background-color: #fff;
  width: 40px;
  height: 3px;
  border-radius: 2px;
}

/* Hide the button when menu is active */
#openMenu.hide {
  display: none;
}

/* Side Menu */
.menu {
  position: fixed;
  top: 0;
  right: -250px;
  /* hide it outside screen (from right) */
  width: 250px;
  height: 100%;
  background-color: rgba(51, 128, 193, 0.8);
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.4s ease;
  z-index: 1000;
}

/* When menu is active */
.menu.active {
  right: 0;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  background: none;
  border: none;
  font-size: 24px;
  color: white;
  cursor: pointer;
}

/* Menu links */
.menu nav ul {
  list-style: none;
  padding: 0;
}

.menu nav ul li {
  margin: 20px 0;
}

.menu nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  display: block;
  padding: 10px 20px;
}

/* ====main==== */
/* ---first view ---- */
main .first_view {
  background: url("../img/appraisal/first_view.png") no-repeat center;
  width: 100%;
  height: 500px;
  margin-bottom: 133rem;
}

main .first_view p:nth-of-type(1) {
  font-size: 96rem;
  color: #ffffff;
}

main .first_view p:nth-of-type(2) {
  font-size: 32rem;
  color: #ffffff;
}

/* ---sort --- */
main .sort p {
  color: #0a4f88;
}

main .sort .title {
  width: 50%;
  text-align: center;
  font-size: 53rem;
  margin-bottom: 62rem;
  color: #0a4f88;
}

main .sort .card_group {
  flex-wrap: wrap;
  margin-bottom: 176rem;
  align-items: center;
}

main .sort .card_group .card {
  width: 384rem;
  height: 224rem;
  margin-bottom: 30rem;
  position: relative;
  background: url("../img/appraisal/sort_card.png") no-repeat center / contain;
}

main .sort .card_group .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a4f88;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

main .sort .card_group .card:hover::before {
  opacity: 0.8;
}

main .sort .card_group .text p {
  font-size: 26rem;
}

main .sort .card_group .card:hover .text p {
  color: #d7b97b;
}

main .sort .card img {
  width: 50rem;
  height: 50rem;
}

main .sort .one img {
  width: 47rem;
  height: 60rem;
}

main .sort .two img,
main .sort .three img {
  width: 37rem;
  height: 46rem;
}

main .sort .two .img_group {
  gap: 12rem;
}

main .sort .three .img_group {
  gap: 14rem;
}

main .sort .two .text p:nth-last-of-type(1) {
  font-size: 21rem;
  color: #212529;
}

main .sort .three .text p:nth-last-of-type(1) {
  font-size: 21rem;
  color: #212529;
}

/* ---- biography --------- */
main .bio .title {
  width: 100%;
  text-align: center;
  font-size: 53rem;
  margin-bottom: 71rem;
  color: #0a4f88;
}

main .bio .content {
  gap: 25rem;
  padding-bottom: 70rem;
}

main .bio .content .img_gp {
  position: relative;
}

main .bio .content .photo img:nth-of-type(1) {
  width: 560rem;
  height: 870rem;
}

main .bio .content img:nth-of-type(2) {
  position: absolute;
  width: 321rem;
  height: auto;
  top: 480rem;
  left: -210rem;
  z-index: -1;
}

main .bio .intro p {
  font-size: 21rem;
  margin-bottom: 40rem;
}

main .bio .intro {
  position: relative;
}

main .bio .intro img {
  position: absolute;
  top: -20rem;
  left: 436rem;
  z-index: -1;
}

main .bio .intro p:nth-of-type(1) {
  font-size: 48rem;
  margin-bottom: 50rem;
}

main .bio .intro p:nth-of-type(1) span {
  font-size: 21rem;
  color: #0a4f88;
}

main .bio .content .addition p {
  font-size: 18rem;
  margin-bottom: 30rem;
}

.addition p{
  color: #858585;
}

main .career {
  background: url("../img/appraisal/career_bg.png") no-repeat center;
  /* background-size: calc(100% - 640px) auto; */
  background-size: calc(100% - 600rem) calc(100% - 10rem);
  width: 100%;
  height: 100%;
  padding-top: 60rem;
  padding-bottom: 100rem;
  padding-inline: 358rem;
  position: relative;
}

main .career img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

main .career .text,
main .career .career_title {
  width: 100%;
  text-align: center;
  font-size: 40rem;
  margin-bottom: 30rem;
}

main .year_info {
  padding-block: 24rem;
  border-bottom: 1px solid #e2e2e2;
  justify-content: space-between;
}

main .year_info p:nth-of-type(1) {
  font-size: 20rem;
  color: #0a4f88;
  width: 80rem;
}

main .year_info p:nth-of-type(2) {
  font-size: 20rem;
  width: 90%;
  padding-left: 5px;
}

/* --- gallery ---- */
main .gallery .title {
  width: 100%;
  text-align: center;
  font-size: 53rem;
  margin-bottom: 71rem;
  color: #0a4f88;
}

main .gallery {
  background: url("../img/appraisal/26258361.png") no-repeat center / cover;
  margin-top: 170rem;
  width: 100%;
  padding-block: 117rem;
}

main .gallery .img_slide img {
  width: 584rem;
  height: 404rem;
}

main .viewBlog a {
  font-size: 32rem;
  padding-block: 29rem;
  padding-inline: 40rem;
  border: 1px solid #d1d1d1;
}

main .viewBlog a p {
  color: #858585;
}

main .viewBlog a img {
  width: 25rem;
  height: 8rem;
}

main .viewBlog .viewBtn {
  margin-top: 53rem;
  margin-bottom: 250rem;
  gap: 65rem;
}

/* ==== footer ======== */
footer {
  width: 100%;
  height: 135rem;
  /* padding-inline: 367rem; */
  border-top: 1px solid rgba(160, 160, 160, 0.8);
}

footer .container {
  width: 100%;
  font-size: 18rem;
}

/* --------------------------- 1440Px ----------------------------------- */
@media (max-width: 1440px) {
  html {
    font-size: calc(1 / 1440 * 100vw);
  }

  .container {
    padding-inline: 100rem;
  }

  main .bio .content .photo img:nth-of-type(1) {
    width: 400rem;
    height: 621rem;
  }

  main .bio .intro p:nth-of-type(1) {
    margin-bottom: 40rem;
  }

  main .bio .intro p {
    margin-bottom: 30rem;
  }


  main .bio .content {
    gap: 70rem;
  }

  main .bio .content img:nth-of-type(2) {
    top: 240rem;
    left: -190rem;
  }

  main .bio .intro img {
    top: -15rem;
    left: 450rem;
  }

  main .career {
    background-size: calc(85%) calc(100% - 10rem);
    padding-inline: 150rem;
  }

  main .gallery .img_slide img {
    width: 420rem;
    height: auto;
  }
}

/* --------------------------- 1024Px ----------------------------------- */
@media (max-width: 1024px) {
  html {
    font-size: calc(1 / 1024 * 100vw);
  }

  .container {
    padding-inline: 110rem;
  }

  main .bio .content {
    display: block;
  }

  main .bio .content .img_gp {
    position: relative;
    text-align: center;
  }

  main .bio .content .text {
    margin-top: 100rem;
  }

  main .bio .intro img {
    top: -55rem;
    left: 390rem;
  }

  main .bio .content img:nth-of-type(2) {
    top: 240rem;
    left: 35rem;
  }

  main .gallery .img_slide {
    flex-direction: column;
    gap: 30rem;
  }

  main .career {
    background-size: calc(95%) calc(100% - 10rem);
    padding-inline: 70rem;
  }

  main .gallery .img_slide img {
    width: 584rem;
    height: auto;
  }
}

/* --------------------------- 768Px ----------------------------------- */
@media (max-width: 768px) {

  html {
    font-size: calc(1 / 768 * 100vw);
  }

  .container {
    padding-inline: 110rem;
  }

  main .first_view {
    margin-bottom: 70rem;
  }

  main .sort .title {
    width: 75%;
  }

  main .sort .card_group {
    margin-bottom: 70rem;
  }

  main .sort .card_group {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  main .bio .content {
    flex-direction: column;
    align-items: center;
  }

  main .bio .text {
    margin-top: 40rem;
  }

  main .bio .intro img {
    top: -10rem;
    left: 436rem;
  }

  main .bio .content .photo img:nth-of-type(1) {
    width: 550rem;
    height: auto;
  }

  main .bio .addition {
    margin-left: 0rem;
  }

  main .bio .content img:nth-of-type(2) {
    width: 390rem;
    top: 450rem;
  }

  main .career {
    background: url("../img/appraisal/sp_career.png") no-repeat center;
    background-size: calc(95%) calc(100% - 10rem);
    padding-inline: 110rem;
  }

  main .sort .title {
    font-size: 43rem;
  }

  main .sort .title img {
    width: 40rem;
  }
}

/* --------------------------- 500Px ----------------------------------- */
@media (max-width: 500px) {
  html {
    font-size: calc(1 / 500 * 100vw);
  }

  .container {
    padding-inline: 40rem;
  }

  main .bio .content .photo img:nth-of-type(1) {
    width: 420rem;
  }

  main .bio .content img:nth-of-type(2) {
    width: 350rem;
    top: 330rem;
    left: -35rem;
  }

  main .gallery .img_slide img {
    width: 430rem;
  }

  main .bio .intro img {
    top: -30rem;
    left: 300rem;
  }

  main .viewBlog .viewBtn {
    gap: 30rem;
  }

  main .viewBlog a {
    padding-block: 15rem;
    padding-inline: 17rem 17px;
  }

  main .sort .title {
    width: 90%;
  }

  main .career {
    padding-inline: 50rem;
  }
}