@charset "utf-8";
/* --------------------------------------------------
  Resetting default margin and padding
-------------------------------------------------- */
/* !HTML5 elements
---------------------------------------------------------- */
header, footer, nav, section, aside, article {
  display: block;
}
/* !Resetin
---------------------------------------------------------- */
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, input, a, textarea, select, span, nav, section, header, figure, button {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}
label {
  cursor: pointer;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}
fieldset, img {
  border: 0;
}
img {
  vertical-align: top;
  max-width: 100%;
}
address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal;
}
ol, ul {
  list-style: none;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
q:after, q:before {
  content: '';
}
abbr, acronym {
  border: 0;
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
input, textarea {
  -webkit-appearance: none;
  appearance: none;
}
/* !Layout
---------------------------------------------------------- */
html {
  overflow-x: hidden;
}
html.scroll-lock, html.scroll-lock body {
  overflow: hidden;
}
body {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: #000;
  -webkit-text-size-adjust: none;
}
/* link
------------------------------------------------ */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  -webkit-transition: all 0.3s !important;
  /* Chrome&Safari */
  -moz-transition: all 0.3s !important;
  /* Firefox */
  transition: all 0.3s !important;
}
/* !fs
------------------------------------------------ */
.pc {
  display: block;
}
.sp {
  display: none;
}
@media (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* !fc
------------------------------------------------ */
.ff-zenkaku {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-style: normal;
}
/* wrapper
----------------------------------------------- */
/* header
----------------------------------------------- */
#header {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
}
.headerlogo {
  width: 284px;
  background-color: #fff;
  border-radius: 0 0 20px 0;
}
.headerlogo a {
  display: block;
  padding: 20px 16px;
}
.headerlogo a img {
  display: block;
}
@media (max-width: 1024px) {
  .headerlogo {
    width: 214px;
    border-radius: 0 0 15px 0;
  }
  .headerlogo a {
    padding: 15px 12px;
  }
}
@media (max-width: 767px) {
  .headerlogo {
    width: 41.02564103vw;
    border-radius: 0 0 5.12820513vw 0;
  }
  .headerlogo a {
    padding: 3.23076923vw 3.84615385vw;
  }
}
/* footer
----------------------------------------------- */
#footer {
  position: relative;
  padding: 40px 0 30px;
  background-color: #15686A;
}
#footer .inner {
  max-width: 800px;
}
.footercon {
  display: flex;
  justify-content: space-between;
}
.footerlogo {
  display: block;
  width: 214px;
}
.footeraddr {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.footermenu {
  display: flex;
  column-gap: 30px;
}
.footermenu li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}
.footermenu li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}
.footermenu a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}
.footermess {
  margin-top: 30px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
}
.footerlink {
  display: flex;
  column-gap: 16px;
}
.footerlink a {
  width: 40px;
}
.copyright {
  font-size: 12px;
  font-weight: 400;
  line-height: 2;
  color: #fff;
}
@media (max-width: 767px) {
  #footer {
    padding: 60px 0 40px;
  }
  .footercon {
    display: block;
  }
  .footerlogo {
    max-width: 100%;
    margin: 0 auto;
  }
  .footeraddr {
    text-align: center;
  }
  .footermenu {
    margin-top: 40px;
    justify-content: center;
  }
  .footermenu li {
    padding-left: 15px;
    margin-bottom: 10px;
  }
  .footermenu a {
    font-size: 12px;
  }
  .footermess {
    margin-top: 40px;
    display: block;
  }
  .footerlink {
    justify-content: center;
  }
  .footerlink a {
    width: 40px;
  }
  .copyright {
    margin-top: 40px;
  }
}
/* public
----------------------------------------------- */
.inner {
  max-width: max(58.56515373vw, 800px);
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .inner {
    margin: 0 40px;
  }
}
@media (max-width: 767px) {
  .inner {
    margin: 0 5.12820513vw;
  }
}
/* top
----------------------------------------------- */
.topwrap {
  position: relative;
  overflow: hidden;
}
.topwrap::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top/mutuai_C_bg.jpg) center no-repeat;
  background-size: cover;
}
.mvwrap2 {
  background: url(../img/top/mutuai_C_bg.jpg) center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.mvslick {
  position: relative;
  padding: 1.46412884vw 0;
  display: flex;
  overflow: hidden;
}
.mvslick .mvslick-list {
  display: flex;
  align-items: center;
  column-gap: 2.92825769vw;
  padding: 0 0 0 2.92825769vw;
}
.mvslick.movetr {
  justify-content: flex-end;
}
.mvcard {
  position: relative;
  perspective: 5000px;
}
.mvcard .pica {
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.3s;
}
.mvcard .pica img {
  width: 100%;
  object-fit: contain;
  border-radius: 1.46412884vw;
}
.mvcard .picb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.3s;
}
.mvcard .picb img {
  width: 100%;
  object-fit: contain;
  border-radius: 1.46412884vw;
}
.mvcard.active .pica {
  transform: rotateY(0deg);
}
.mvcard.active .picb {
  transform: rotateY(-180deg);
}
.mvcard.w01 {
  width: 12.88433382vw;
}
.mvcard.w02 {
  width: 27.01317716vw;
}
.mvcard.w03 {
  width: 18.08199122vw;
}
.mvcon {
  position: relative;
  padding: 4.39238653vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.mvcon .sub {
  width: 22.69399707vw;
}
.mvcon .tit {
  margin: 2.19619327vw 0;
  width: 66.47144949vw;
}
.mvcon .txt {
  font-size: max(18px, 1.31771596vw);
  font-weight: 700;
  line-height: 1.66666667;
  color: #30665A;
  text-align: center;
}
.mvcon img {
  width: 100%;
}
.mvcon .ico {
  position: absolute;
}
.mvcon .ico.tree01 {
  left: 75.84187408vw;
  top: -7.32064422vw;
  width: 6.29575403vw;
}
.mvcon .ico.tree02 {
  left: 4.02635432vw;
  top: 15.37335286vw;
  width: 10.54172767vw;
}
.mvcon .ico.tree03 {
  left: 86.67642753vw;
  top: 21.96193265vw;
  width: 6.5885798vw;
}
.walkpic01 {
  position: relative;
  padding: 3.2942899vw 0 0;
  background-color: #FAF1E1;
}
.walkpic01 .walkpicbox {
  position: relative;
  width: 24.59736457vw;
}
.walkpic01 .walkpicbox .footprint {
  width: 100%;
  display: block;
}
.walkpic01 .walkpicbox .footprint g {
  opacity: 0;
  transition: opacity 1s linear;
}
.walkpic01 .walkpicbox .footprint g.fadein {
  opacity: 1;
}
.walkpic01 .walkpicbox .peoplepic {
  position: absolute;
  left: 0;
  top: 15.8045977%;
  width: 63.98809524%;
}
@media (max-width: 767px) {
  .mvslick {
    position: relative;
    padding: 7.69230769vw 0;
  }
  .mvslick .mvslick-list {
    column-gap: 6.41025641vw;
    padding: 0 0 0 6.41025641vw;
  }
  .mvcard .pica img {
    border-radius: 2.56410256vw;
  }
  .mvcard .picb img {
    border-radius: 2.56410256vw;
  }
  .mvcard.w01 {
    width: 28.71794872vw;
  }
  .mvcard.w02 {
    width: 61.02564103vw;
  }
  .mvcard.w03 {
    width: 40.51282051vw;
  }
  .mvcon {
    padding: 10.25641026vw 0 6.15384615vw;
  }
  .mvcon .sub {
    width: 66.66666667vw;
  }
  .mvcon .tit {
    margin: 5.12820513vw 0 7.69230769vw;
    width: 82.05128205vw;
  }
  .mvcon .txt {
    font-size: 3.58974359vw;
    line-height: 1.5;
  }
  .mvcon .ico.tree01 {
    left: 86.15384615vw;
    top: -13.84615385vw;
    width: 8.71794872vw;
  }
  .mvcon .ico.tree02 {
    left: 3.33333333vw;
    top: 4.1025641vw;
    width: 11.53846154vw;
  }
  .mvcon .ico.tree03 {
    left: 85.64102564vw;
    top: 68.71794872vw;
    width: 9.23076923vw;
  }
  .walkpic01 {
    padding: 0 0 53.84615385vw;
  }
  .walkpic01 .walkpicbox {
    width: 51.28205128vw;
  }
  .walkpic01 .walkpicbox .peoplepic {
    left: -5.12820513vw;
    top: auto;
    bottom: 0;
    width: 77.5%;
  }
}
.topabout {
  position: relative;
  z-index: 1;
  padding: 0 0 6.44216691vw;
  margin: -4.39238653vw 0 0;
  background: url(../img/top/img_bg_top.svg) center top no-repeat, url(../img/top/img_bg_bottom.svg) center bottom no-repeat;
  background-size: 100% auto, 100% auto;
  background-color: #FAF1E1;
}
.topabout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14.64128843vw;
  bottom: 14.64128843vw;
  display: block;
  width: 100%;
  background: #fff;
}
.topabout .bird {
  position: absolute;
  right: 8.63836018vw;
  bottom: 1.75695461vw;
  width: 16.54465593vw;
}
.topabout01 {
  position: relative;
  padding: 10.98096633vw 0 0;
}
.topabout01 .picbox {
  position: absolute;
  top: -12.81112738vw;
  left: 55.78330893vw;
  width: 59.15080527vw;
  height: 42.31332357vw;
}
.topabout01 .picbox .tree01 {
  position: absolute;
  left: 39.6039604%;
  top: -14.53287197%;
  width: 8.93118594vw;
}
.topabout01 .picbox .tree01 img {
  width: 100%;
}
.topabout01 .secbox {
  width: 450px;
  min-height: 26.50073206vw;
}
.topabout01 .secbox .tit {
  margin: 0 0 35px;
  text-align: center;
}
.topabout01 .secbox .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: #224B42;
}
.topabout01 .secbox .link {
  margin: 60px 0 0;
}
.topabout01 .secbox .link .btnlink {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  width: 400px;
  max-width: 100%;
  height: 100px;
  font-size: 20px;
  font-weight: 700;
  color: #13686A;
  background-color: #F5E35B;
  text-align: center;
  border-radius: 50px;
}
.topabout01 .secbox .link .btnlink::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  display: block;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border: 2px dashed #15686A;
  border-radius: 40px;
  opacity: 0.5;
  pointer-events: none;
}
.walkpic02 {
  margin: 0 0 5.49048316vw;
}
.walkpic02 .walkpicbox {
  position: relative;
  margin-left: auto;
  width: 24.59736457vw;
}
.walkpic02 .walkpicbox .footprint {
  width: 100%;
  transform: rotateY(180deg);
}
.walkpic02 .walkpicbox .footprint g {
  opacity: 0;
  transition: opacity 1s linear;
}
.walkpic02 .walkpicbox .footprint g.fadein {
  opacity: 1;
}
.walkpic02 .walkpicbox .peoplepic {
  position: absolute;
  left: -23.80952381%;
  top: 47.4137931%;
  width: 72.91666667%;
}
.walkpic02 .walkpicbox .dogpic {
  position: absolute;
  left: 23.80952381%;
  top: 9.1954023%;
  width: 44.64285714%;
}
.walkpic02 .walkpicbox .ico {
  position: absolute;
}
.walkpic02 .walkpicbox .ico.tree01 {
  left: 70.23809524%;
  top: -20.68965517%;
  width: 20.83333333%;
}
.walkpic02 .walkpicbox .ico.tree02 {
  right: -47.02380952%;
  top: 7.18390805%;
  width: 32.14285714%;
}
.topabout02 {
  position: relative;
}
.topabout02 .picbox {
  position: absolute;
  top: -24.81698389vw;
  left: -12.29868228vw;
  width: 55.78330893vw;
  height: 41.80087848vw;
}
.topabout02 .picbox .tree01 {
  position: absolute;
  left: 32.80839895%;
  bottom: -20.66549912%;
  width: 5.19765739vw;
}
.topabout02 .picbox .tree01 img {
  width: 100%;
}
.topabout02 .picbox .tree02 {
  position: absolute;
  left: 41.99475066%;
  bottom: -3.85288967%;
  width: 9.51683748vw;
}
.topabout02 .picbox .tree02 img {
  width: 100%;
}
.topabout02 .secbox {
  margin-left: auto;
  width: 450px;
  min-height: 25.91508053vw;
}
.topabout02 .secbox .tit {
  margin: 0 0 35px;
  text-align: right;
}
.topabout02 .secbox .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: #224B42;
}
.topabout02 .secbox .link {
  margin: 60px 0 0;
  text-align: right;
}
.topabout02 .secbox .link .btnlink {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  width: 400px;
  max-width: 100%;
  height: 100px;
  font-size: 20px;
  font-weight: 700;
  color: #13686A;
  background-color: #F5A25B;
  text-align: center;
  border-radius: 50px;
}
.topabout02 .secbox .link .btnlink::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  display: block;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border: 2px dashed #15686A;
  border-radius: 40px;
  opacity: 0.5;
  pointer-events: none;
}
.walkpic03 .walkpicbox {
  position: relative;
  margin-left: auto;
  margin-right: 50%;
  width: 24.59736457vw;
}
.walkpic03 .walkpicbox .footprint {
  width: 100%;
}
.walkpic03 .walkpicbox .footprint g {
  opacity: 0;
  transition: opacity 1s linear;
}
.walkpic03 .walkpicbox .footprint g.fadein {
  opacity: 1;
}
.walkpic03 .walkpicbox .peoplepic01 {
  position: absolute;
  left: -19.04761905%;
  top: -10.34482759%;
  width: 62.79761905%;
}
.walkpic03 .walkpicbox .peoplepic02 {
  position: absolute;
  right: 0;
  top: 14.36781609%;
  width: 68.75%;
}
@media screen and (min-width: 1025px) {
  .topabout01 .secbox .link .btnlink:hover,
  .topabout02 .secbox .link .btnlink:hover {
    transform: scale(1.1);
  }
}
@media (max-width: 1024px) {
  .topabout01 .secbox,
  .topabout02 .secbox {
    width: 380px;
  }
  .topabout01 .secbox .tit,
  .topabout02 .secbox .tit {
    margin: 0 0 30px;
  }
  .topabout01 .secbox .link,
  .topabout02 .secbox .link {
    margin: 45px 0 0;
  }
  .walkpic02 .walkpicbox {
    margin-left: 60%;
  }
}
@media (max-width: 767px) {
  .topabout {
    padding: 0 0 28.20512821vw;
    margin: 0 0 0;
  }
  .topabout::before {
    top: 51.28205128vw;
    bottom: 51.28205128vw;
  }
  .topabout .bird {
    right: 0;
    left: 0;
    bottom: -21.53846154vw;
    width: 52.05128205vw;
    margin: 0 auto;
  }
  .topabout01 {
    padding: 69.74358974vw 0 0;
  }
  .topabout01 .picbox {
    top: -46.15384615vw;
    left: 18.46153846vw;
    width: 143.58974359vw;
    height: 103.07692308vw;
  }
  .topabout01 .picbox .tree01 {
    left: 39.64285714%;
    top: -9.95024876%;
    width: 19.48717949vw;
  }
  .topabout01 .secbox {
    width: 100%;
    min-height: 0;
  }
  .topabout01 .secbox .tit {
    margin: 0 0 7.69230769vw 2.56410256vw;
    text-align: left;
  }
  .topabout01 .secbox .tit img {
    width: 78.20512821vw;
  }
  .topabout01 .secbox .txt {
    font-size: max(3.58974359vw, 14px);
  }
  .topabout01 .secbox .link {
    margin: 15.38461538vw 0 0;
  }
  .topabout01 .secbox .link .btnlink {
    width: 100%;
    height: 20.51282051vw;
    font-size: 4.61538462vw;
    border-radius: 10.25641026vw;
  }
  .topabout01 .secbox .link .btnlink::before {
    left: 2.56410256vw;
    top: 2.56410256vw;
    right: 2.56410256vw;
    bottom: 2.56410256vw;
    width: auto;
    height: auto;
    border-radius: 10.25641026vw;
  }
  .walkpic02 {
    margin: 16.66666667vw 0 25.12820513vw;
  }
  .walkpic02 .walkpicbox {
    margin-left: auto;
    width: 51.28205128vw;
  }
  .walkpic02 .walkpicbox .peoplepic {
    left: auto;
    right: 100%;
    top: 64.90384615%;
    width: 85%;
  }
  .walkpic02 .walkpicbox .dogpic {
    left: -7%;
    top: 19.23076923%;
    width: 47%;
  }
  .walkpic02 .walkpicbox .ico.tree01 {
    left: 40%;
    top: -23.55769231%;
    width: 23.5%;
  }
  .walkpic02 .walkpicbox .ico.tree02 {
    right: 0;
    top: 93.75%;
    width: 36.5%;
  }
  .topabout02 {
    padding: 114.87179487vw 0 0;
  }
  .topabout02 .picbox {
    top: 0;
    left: -49.23076923vw;
    width: 135.38461538vw;
    height: 101.53846154vw;
  }
  .topabout02 .picbox .tree01 {
    left: 40.15151515%;
    bottom: -3.03030303%;
    width: 10.25641026vw;
  }
  .topabout02 .picbox .tree02 {
    left: 59.65909091%;
    bottom: 3.78787879%;
    width: 18.46153846vw;
  }
  .topabout02 .secbox {
    width: 100%;
    min-height: 0;
  }
  .topabout02 .secbox .tit {
    margin: 0 0 7.69230769vw;
  }
  .topabout02 .secbox .tit img {
    width: 78.20512821vw;
  }
  .topabout02 .secbox .txt {
    font-size: max(3.58974359vw, 14px);
  }
  .topabout02 .secbox .link {
    margin: 15.38461538vw 0 0;
  }
  .topabout02 .secbox .link .btnlink {
    width: 100%;
    height: 20.51282051vw;
    font-size: 4.61538462vw;
    border-radius: 10.25641026vw;
  }
  .topabout02 .secbox .link .btnlink::before {
    left: 2.56410256vw;
    top: 2.56410256vw;
    right: 2.56410256vw;
    bottom: 2.56410256vw;
    width: auto;
    height: auto;
    border-radius: 10.25641026vw;
  }
  .walkpic03 {
    margin: 29.74358974vw 0 0;
  }
  .walkpic03 .walkpicbox {
    margin-left: 0;
    margin-right: auto;
    width: 51.28205128vw;
  }
  .walkpic03 .walkpicbox .peoplepic01 {
    left: 0;
    top: -35.57692308%;
    width: 75%;
  }
  .walkpic03 .walkpicbox .peoplepic02 {
    right: auto;
    left: 86%;
    top: 20.19230769%;
    width: 89%;
  }
}
.topsciences {
  position: relative;
  padding: 0.87847731vw 0 18.30161054vw;
  background-color: #FAF1E1;
}
.topsciences .cover {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 56.22254758vw;
  background: url(../img/top/img_sciences_bg.png) center bottom / 100% auto no-repeat;
}
.topsciences .cover .ico {
  position: absolute;
}
.topsciences .cover .ico.tree01 {
  left: -2.92825769vw;
  bottom: 26.35431918vw;
  width: 16.10541728vw;
  transform: rotate(-7deg);
}
.topsciences .cover .ico.tree02 {
  right: -10.68814056vw;
  bottom: 8.05270864vw;
  width: 36.23718887vw;
}
.topsciences .cover .ico img {
  width: 100%;
}
.topscienceshd {
  text-align: center;
}
.topscienceshd .tit {
  margin: 0 auto;
  width: 48.46266471vw;
}
.topscienceshd .txt {
  margin: min(5.12445095vw, 70px) 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: #224B42;
}
.topscienceslist {
  position: relative;
  z-index: 1;
  margin: 3.66032211vw auto 0;
  width: max(64.42166911vw, 880px);
}
.topscienceslist ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 5%;
  row-gap: 5.85651537vw;
}
.topscienceslist ul li {
  width: 21.25%;
}
.topscienceslist ul li:nth-child(2),
.topscienceslist ul li:nth-child(4) {
  margin-top: 3.40909091%;
}
.topscienceslist ul li:nth-child(10) {
  margin-top: 4.31818182%;
}
.topscienceslist ul li img {
  display: block;
  width: 100%;
}
.topscienceslist ul li a {
  display: block;
}
@media screen and (min-width: 1025px) {
  .topscienceslist ul li a:hover {
    transform: translateY(-8px);
  }
}
@media (max-width: 1024px) {
  .topscienceslist {
    padding: 0 40px;
    width: min(100%, 880px);
  }
}
@media (max-width: 767px) {
  .topsciences {
    padding: 43.07692308vw 0 60.51282051vw;
  }
  .topsciences .cover {
    height: 78.20512821vw;
    background: url(../img/top/img_sciences_bg_sp.png) center bottom / 100% auto no-repeat;
  }
  .topsciences .cover .ico.tree01 {
    left: -5.64102564vw;
    bottom: 48.71794872vw;
    width: 28.20512821vw;
  }
  .topsciences .cover .ico.tree02 {
    right: -14.35897436vw;
    bottom: 0;
    width: 63.07692308vw;
  }
  .topscienceshd .tit {
    width: 80vw;
  }
  .topscienceshd .txt {
    margin: 11.79487179vw 0 0;
    font-size: max(3.58974359vw, 14px);
    line-height: 1.5;
  }
  .topscienceslist {
    margin: 16.41025641vw auto 0;
    padding: 0;
    width: 89.74358974vw;
  }
  .topscienceslist ul {
    column-gap: 7.69230769vw;
    row-gap: 10.25641026vw;
    align-items: center;
    justify-content: space-around;
  }
  .topscienceslist ul li {
    width: 41.02564103vw;
  }
  .topscienceslist ul li:nth-child(2) {
    margin-top: 0;
    align-self: flex-end;
  }
  .topscienceslist ul li:nth-child(4),
  .topscienceslist ul li:nth-child(10) {
    margin-top: 0;
  }
}
/* map 
----------------------------------------------- */
#map {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.mapwrap {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  overflow: scroll;
  scrollbar-width: none;
}
.mapwrap:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.mapcon {
  position: relative;
  width: 1600px;
  height: 1600px;
  transform-origin: 0px 0px;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mapcon .bubbles01 {
  position: absolute;
  left: 76.5%;
  top: 49.625%;
  width: 12.5%;
  animation-delay: -1s;
}
.mapcon .bubbles02 {
  position: absolute;
  left: 66.5%;
  top: 62.875%;
  width: 13.125%;
}
.mapcon .bubbles03 {
  position: absolute;
  left: 73.3125%;
  top: 31.875%;
  width: 12.5%;
}
.mapcon .bubbles04 {
  position: absolute;
  left: 60.375%;
  top: 51.375%;
  width: 12.5%;
  animation-delay: -1s;
}
.mapcon .bubbles05 {
  position: absolute;
  left: 11.625%;
  top: 63.75%;
  width: 12.1875%;
  animation-delay: -2s;
}
.mapcon .bubbles06 {
  position: absolute;
  left: 6.1875%;
  top: 9.6875%;
  width: 13.8125%;
}
.mapcon .bubbles07 {
  position: absolute;
  left: 25.875%;
  top: 35.875%;
  width: 14.0625%;
  animation-delay: -2s;
}
.mapcon .marks .mark {
  position: absolute;
  width: 130px;
  height: 144px;
  margin-left: -65px;
  margin-top: -47px;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mapcon .marks .mark a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: 700;
  line-height: 78px;
  color: #231816;
  text-align: center;
  background: url(../img/map/ico_point.svg) center top / 60% auto no-repeat;
}
.mapcon .marks .mark.point01 {
  left: 17.125%;
  top: 69.1875%;
}
.mapcon .marks .mark.point02 {
  left: 88.625%;
  top: 12.625%;
}
.mapcon .marks .mark.point03 {
  left: 86.1875%;
  top: 30%;
}
.mapcon .marks .mark.point04 {
  left: 65.1875%;
  top: 24.75%;
}
.mapcon .marks .mark.point05 {
  left: 38.3125%;
  top: 64.125%;
}
.mapcon .marks .mark.point06 {
  left: 18.125%;
  top: 48.5%;
}
.mapcon .marks .mark.point07 {
  left: 43.1875%;
  top: 48.5%;
}
.mapcon .marks .mark.point08 {
  left: 50%;
  top: 35.875%;
}
.mapcon .marks .mark.point09 {
  left: 40.75%;
  top: 23.75%;
}
.mapcon .marks .mark.point10 {
  left: 23.375%;
  top: 41.5625%;
}
.mapcon .marks .mark.point11 {
  left: 76.25%;
  top: 75.25%;
}
.mapcon .marks .mark.point12 {
  left: 55.9375%;
  top: 70.125%;
}
.mapcon .marks .mark.point13 {
  left: 43.1875%;
  top: 54.3125%;
}
.mapcon .marks .mark.point14 {
  left: 16.25%;
  top: 15.9375%;
}
.maptool {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1;
}
.maptool .current {
  width: 42px;
  font-size: 14px;
  font-weight: 700;
  line-height: 34px;
  color: #fff;
  text-align: center;
  background-color: #390000;
  border-radius: 10px;
  white-space: nowrap;
}
.maptool .scale {
  position: relative;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  height: 100px;
  background-color: #390000;
  border-radius: 10px;
}
.maptool .scale::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  display: block;
  width: 30px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transform: translateY(-50%);
}
.maptool .scale li {
  flex: 1;
}
.maptool .scale li.minus button::after {
  display: none;
}
.maptool .scale button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  background: 0 0;
  border: none;
  border-radius: 0;
  outline: 0;
  font-size: 0;
  box-sizing: border-box;
  cursor: pointer;
}
.maptool .scale button::before,
.maptool .scale button::after {
  content: '';
  display: block;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
.maptool .scale button::before {
  width: 18px;
  height: 2px;
}
.maptool .scale button::after {
  width: 2px;
  height: 18px;
}
@media screen and (min-width: 1025px) {
  .mapcon .marks .mark a:hover {
    transform: scale(1.1);
  }
}
@media (max-width: 1024px) {
  .mapcon .marks .mark {
    width: 62px;
    height: 76px;
    margin-left: -31px;
    margin-top: -38px;
  }
  .mapcon .marks .mark a {
    font-size: 20px;
    line-height: 62px;
    background-size: 100% 100%;
  }
}
@media (max-width: 767px) {
  .mapcon {
    width: 1000px;
    height: 1000px;
  }
  .mapcon .marks .mark {
    width: 50px;
    height: 60px;
    margin-left: -25px;
    margin-top: -30px;
  }
  .mapcon .marks .mark a {
    font-size: 14px;
    line-height: 50px;
    background-size: 100% auto;
  }
  .maptool {
    right: 10px;
    bottom: 30px;
  }
  .maptool .current {
    width: 32px;
    font-size: 10px;
    line-height: 26px;
    border-radius: 5px;
  }
  .maptool .scale {
    height: 80px;
    border-radius: 5px;
  }
  .maptool .scale::before {
    left: 4px;
    width: 24px;
    transform: scaleY(0.5) translateY(-50%);
  }
  .maptool .scale button::before {
    width: 16px;
    height: 2px;
  }
  .maptool .scale button::after {
    width: 2px;
    height: 16px;
  }
}
@media (orientation: landscape) {
  .mapcon {
    width: 100vw;
    height: 100vw;
  }
}
@media (orientation: portrait) {
  .mapcon {
    width: 125vh;
    height: 125vh;
  }
}
.model {
  display: none !important;
}
.pop-modal .fancybox-skin {
  background: #F5A15B;
  border-radius: 40px;
}
.pop-modal .fancybox-inner::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}
.pop-modal .fancybox-inner::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.2);
}
.pop-modal .fancybox-nav {
  width: 90px;
  height: 90px;
  top: calc(50% - 45px);
}
.pop-modal .fancybox-nav span {
  display: none;
}
.pop-modal .fancybox-nav.fancybox-prev {
  left: -90px;
  background: url(../img/map/ico_modal_prev.svg) left center no-repeat;
}
.pop-modal .fancybox-nav.fancybox-next {
  right: -90px;
  background: url(../img/map/ico_modal_next.svg) right center no-repeat;
}
.pop-modal .fancybox-close {
  top: calc(100% + 20px);
  right: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background: url(../img/map/ico_modal_close.svg) center / contain no-repeat;
}
.modelwrap {
  width: min(100vw - 200px, 960px);
  max-width: 100%;
  min-height: 560px;
}
.modelwrap .modelcon {
  padding: 0 40px 40px;
}
.modelwrap .modelhd {
  height: 136px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 30px;
}
.modelwrap .modelhd .num {
  font-size: 30px;
  color: #390000;
}
.modelwrap .modelbd {
  width: 100%;
  display: flex;
  column-gap: 40px;
}
.modelwrap .modelddl {
  width: 435px;
  width: calc((100% - 40px) * 0.517857);
}
.modelwrap .modelddl .modeltxt {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #390000;
}
.modelwrap .modelddr {
  width: 405px;
  width: calc((100% - 40px) * 0.482143);
}
.modelwrap .modelfigure {
  position: relative;
}
.modelwrap .modelfigcaption {
  position: absolute;
  left: 0;
  top: -26px;
  z-index: 1;
  padding: 6px 15px;
  font-size: 20px;
  color: #390000;
  background: url(../img/map/ico_tbg.svg) 0 0 no-repeat;
  background-size: 100% 100%;
}
.modelwrap .modelslick {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.modelwrap .modelslick:not(.slick-initialized) {
  display: flex;
}
.modelwrap .modelslick:not(.slick-initialized) > div {
  flex: none;
  width: 100%;
}
.modelwrap .modelslick:not(.slick-initialized) > div img {
  width: 100%;
  border-radius: 20px;
}
.modelwrap .modelslick .slick-list {
  border-radius: 20px;
  overflow: hidden;
}
.modelwrap .modelslick .slick-dots {
  margin-top: 18px;
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}
.modelwrap .modelslick .slick-dots li {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.5;
  transition: all 0.3s;
  cursor: pointer;
}
.modelwrap .modelslick .slick-dots li.slick-active {
  width: 10px;
  height: 10px;
  opacity: 1;
}
.modelwrap .modelslick .slick-dots li button {
  display: none;
}
.modelwrap .modelsec {
  position: relative;
  margin-top: 30px;
  padding: 0 20px 10px;
  background-color: #FDFD50;
  border-radius: 20px;
}
.modelwrap .modelsec .modelsechd {
  display: flex;
  align-items: center;
  column-gap: 10px;
  transform: translateY(-50%);
}
.modelwrap .modelsec .modelsechd .avatar {
  width: 100px;
}
.modelwrap .modelsec .modelsechd .avatar img {
  display: block;
  border-radius: 50%;
}
.modelwrap .modelsec .modelsechd .slogan img {
  display: block;
  width: 216px;
}
.modelwrap .modelsec .modelsecbd {
  margin-top: -10%;
}
.modelwrap .modelsec .modeltxt {
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: #390000;
}
.modelwrap .modelsec .modelsign {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 10px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #390000;
}
@media (max-width: 1024px) {
  .pop-modal .fancybox-inner {
    scrollbar-width: none;
  }
  .pop-modal .fancybox-inner::-webkit-scrollbar {
    display: none;
  }
  .pop-modal .fancybox-nav {
    width: 80px;
    height: 80px;
    top: calc(100% + 20px);
  }
  .pop-modal .fancybox-nav span {
    display: none;
  }
  .pop-modal .fancybox-nav.fancybox-prev {
    left: 40px;
    background-position: center;
    background-size: contain;
  }
  .pop-modal .fancybox-nav.fancybox-next {
    right: 40px;
    background-position: center;
    background-size: contain;
  }
  .modelwrap {
    width: calc(100vw - 64px);
  }
  .modelwrap .modelcon {
    padding: 0 30px 40px;
  }
  .modelwrap .modelbd {
    column-gap: 30px;
  }
}
@media (max-width: 767px) {
  .pop-modal .fancybox-skin {
    border-radius: 0;
  }
  .pop-modal .fancybox-nav {
    width: 13.84615385vw;
    height: 13.84615385vw;
  }
  .pop-modal .fancybox-nav.fancybox-prev {
    left: 14.1025641vw;
  }
  .pop-modal .fancybox-nav.fancybox-next {
    right: 14.1025641vw;
  }
  .pop-modal .fancybox-close {
    right: calc(50% - 0.25641026vw*30);
    width: 13.84615385vw;
    height: 13.84615385vw;
  }
  .modelwrap {
    width: 100vw;
  }
  .modelwrap .modelcon {
    padding: 0 6.15384615vw 6.15384615vw;
  }
  .modelwrap .modelhd {
    height: 20.51282051vw;
    column-gap: 5.12820513vw;
    margin-bottom: 4.61538462vw;
  }
  .modelwrap .modelhd .num {
    font-size: 5.64102564vw;
  }
  .modelwrap .modelhd .tth img {
    height: 6.66666667vw;
  }
  .modelwrap .modelbd {
    flex-direction: column;
    row-gap: 5.12820513vw;
  }
  .modelwrap .modelddl {
    width: 100%;
  }
  .modelwrap .modelddl .modelfigure {
    margin: 0 2.56410256vw;
  }
  .modelwrap .modelddl .modeltxt {
    margin-top: 5.12820513vw;
    font-size: 3.58974359vw;
  }
  .modelwrap .modelddr {
    width: 100%;
  }
  .modelwrap .modelfigcaption {
    top: -4.61538462vw;
    padding: 1.79487179vw 2.56410256vw;
    font-size: 4.1025641vw;
  }
  .modelwrap .modelslick:not(.slick-initialized) > div img {
    border-radius: 5.12820513vw;
  }
  .modelwrap .modelslick .slick-list {
    border-radius: 5.12820513vw;
  }
  .modelwrap .modelslick .slick-dots {
    margin-top: 15px;
    height: 10px;
    column-gap: 8px;
  }
  .modelwrap .modelsec {
    margin-top: 10.25641026vw;
    padding: 0 3.07692308vw 3.84615385vw;
    border-radius: 5.12820513vw;
  }
  .modelwrap .modelsec .modelsechd {
    column-gap: 8px;
  }
  .modelwrap .modelsec .modelsechd .avatar {
    width: 20.51282051vw;
  }
  .modelwrap .modelsec .modelsechd .slogan img {
    display: block;
    height: 6.15384615vw;
  }
  .modelwrap .modelsec .modeltxt {
    font-size: 3.58974359vw;
    line-height: 1.78571429;
  }
  .modelwrap .modelsec .modelsign {
    margin-top: 0;
    font-size: 3.58974359vw;
  }
  .modelwrap .modelsec .modelsign img {
    height: 4.61538462vw;
  }
}
.btnmenu {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background-color: #390000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.btnmenu .txt {
  position: relative;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
}
.btnmenu .txt span {
  display: block;
  width: 100%;
  transition: opacity 0.3s linear;
}
.btnmenu .txt .after {
  position: absolute;
  top: 0;
  opacity: 0;
}
.btnmenu .line {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px 0 0;
  width: 42px;
  height: 18px;
}
.btnmenu .line span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
  transition: all 0.3s;
}
.show-nav .btnmenu .txt .before {
  opacity: 0;
}
.show-nav .btnmenu .txt .after {
  opacity: 1;
}
.show-nav .btnmenu .line span:nth-child(1) {
  transform: translateY(8px) rotate(30deg);
}
.show-nav .btnmenu .line span:nth-child(2) {
  opacity: 0;
}
.show-nav .btnmenu .line span:nth-child(3) {
  transform: translateY(-8px) rotate(-30deg);
}
.aside-cover {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  display: none;
}
.show-nav .aside-cover {
  display: block;
}
.asidewrap {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 8;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}
.show-nav .asidewrap {
  visibility: visible;
  opacity: 1;
}
.asidewrap .asidecon {
  width: 100%;
  height: 100%;
  padding: max(130px, 20vh) 0;
  overflow: hidden;
  overflow-y: auto;
}
.asidenav {
  max-width: 400px;
  margin: 0 auto;
}
.asidenav .menulist {
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
}
.asidenav .menulist li {
  width: 100%;
  border-bottom: 2px dashed #fff;
}
.asidenav .menulist a {
  position: relative;
  padding: 10px 40px 10px 0;
  display: flex;
  align-items: center;
  column-gap: 20px;
}
.asidenav .menulist a::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 32px;
  height: 32px;
  background: url(../img/common/ico_arrow.svg) center / contain no-repeat;
  transform: translateY(-50%);
}
.asidenav .menulist a .pic {
  width: 60px;
  height: 60px;
}
.asidenav .menulist a .txt {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
@media (max-width: 1024px) {
  .asidewrap {
    width: 100%;
    height: auto;
    min-height: 50%;
  }
}
@media (max-width: 767px) {
  .btnmenu {
    top: 2.56410256vw;
    right: 2.56410256vw;
    width: 15.38461538vw;
    height: 15.38461538vw;
  }
  .btnmenu .txt {
    font-size: 2.56410256vw;
  }
  .btnmenu .line {
    margin-top: 1.28205128vw;
    width: 7.69230769vw;
    height: 3.58974359vw;
  }
  .show-nav .btnmenu .line span:nth-child(1) {
    transform: translateY(calc(1.79487179vw - 1px)) rotate(30deg);
  }
  .show-nav .btnmenu .line span:nth-child(3) {
    transform: translateY(calc(1px - 1.79487179vw)) rotate(-30deg);
  }
  .asidewrap .asidecon {
    padding: 20.51282051vw 0 11.53846154vw;
  }
  .asidenav {
    max-width: 100%;
    width: 76.92307692vw;
  }
  .asidenav .menulist {
    row-gap: 0;
  }
  .asidenav .menulist a {
    padding: 5.12820513vw 7.69230769vw 5.12820513vw 0;
    column-gap: 2.56410256vw;
  }
  .asidenav .menulist a::after {
    width: 5.12820513vw;
    height: 5.12820513vw;
  }
  .asidenav .menulist a .pic {
    width: 10.25641026vw;
    height: 10.25641026vw;
  }
  .asidenav .menulist a .txt {
    font-size: 3.84615385vw;
  }
}
.mapindication {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.mapindication .con {
  width: 300px;
  height: 300px;
}
/* animation 
----------------------------------------------- */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}
@keyframes fadeInUpLit {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInUpLit {
  animation-name: fadeInUpLit;
  animation-delay: 0.1s;
}
@keyframes zoomInLit {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}
.zoomInLit {
  animation-name: zoomInLit;
  animation-delay: 0.1s;
}
@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-3deg);
  }
  50% {
    transform: translate(0, -6px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(3deg);
  }
}
.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
}