/*---------------------------*/
/*index.css*/
/*----------------------------*/
header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 30px; }
  header .h_wrap img {
    width: 220px;
    height: auto;
    margin-bottom: 15px;
    -webkit-filter: drop-shadow(0px 0px 9px #fff);
            filter: drop-shadow(0px 0px 9px #fff); }
  header .h_wrap p {
    font-size: 15px;
    font-weight: bold;
    color: #fff; }

.mv_wrap {
  margin-bottom: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  flex-wrap: wrap; }
  .mv_wrap span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    height: 110px;
    width: 110px;
    border-radius: 100px;
    -webkit-filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.6));
            filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.6));
    animetion-timing-funciton: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    animation-name: anim_v1; }
    .mv_wrap span img {
      width: 85px;
      height: auto; }
    .mv_wrap span:nth-child(2n) {
      animetion-timing-funciton: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-duration: 1.5s;
      animation-name: anim_v2; }

.top_main {
  min-height: 100vh;
  width: 100%;
  margin: auto;
  background-color: #dbf1ff;
  padding-bottom: 30px; }
  .top_main svg {
    margin-bottom: -5vw;
    margin-top: -14vw;
    position: relative;
    z-index: -1; }
  .top_main div.contents {
    padding: 10px;
    width: calc(100%);
    max-width: 1000px;
    margin: auto; }
    .top_main div.contents div.sec1 {
      margin-bottom: 30px; }
      .top_main div.contents div.sec1 .ttl {
        color: #000;
        font-size: 24px;
        border-left: 4px solid #2e80f2;
        padding: 5px 10px;
        margin-bottom: 20px;
        font-weight: bold; }
      .top_main div.contents div.sec1 .menu nav {
        margin-bottom: 20px; }
        .top_main div.contents div.sec1 .menu nav > p {
          color: #fff;
          font-size: 16px;
          padding: 5px 10px;
          font-weight: bold;
          background-color: #2e80f2;
          margin-bottom: 5px;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); }
        .top_main div.contents div.sec1 .menu nav ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start; }
          .top_main div.contents div.sec1 .menu nav ul li {
            width: calc(100% / 4 - 10px);
            margin: 5px;
            -webkit-filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.3));
                    filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.3)); }
            .top_main div.contents div.sec1 .menu nav ul li a {
              text-align: center;
              transition: .3s;
              display: flex;
              justify-content: flex-end;
              height: 100%; }
              .top_main div.contents div.sec1 .menu nav ul li a:hover {
                opacity: .8; }
              .top_main div.contents div.sec1 .menu nav ul li a img {
                max-width: 70px;
                max-height: 70px;
                width: 100%;
                height: auto;
                display: block;
                margin: auto;
                margin-left: auto;
                margin-right: auto;
                padding: 10px; }
              .top_main div.contents div.sec1 .menu nav ul li a div {
                background-color: #fff;
                padding: 10px;
                text-align: left;
                width: 80%; }
                .top_main div.contents div.sec1 .menu nav ul li a div p {
                  font-size: 15px; }
                  .top_main div.contents div.sec1 .menu nav ul li a div p:nth-child(1) {
                    margin-bottom: 5px; }
                  .top_main div.contents div.sec1 .menu nav ul li a div p:nth-child(2) {
                    color: #7d7d7d;
                    font-size: 11px;
                    letter-spacing: 1.5px; }
        .top_main div.contents div.sec1 .menu nav:nth-child(6n + 1) ul li a {
          background-color: #579fef; }
        .top_main div.contents div.sec1 .menu nav:nth-child(6n + 2) ul li a {
          background-color: #1dc855; }
        .top_main div.contents div.sec1 .menu nav:nth-child(6n + 3) ul li a {
          background-color: #e1c83d; }
        .top_main div.contents div.sec1 .menu nav:nth-child(6n + 4) ul li a {
          background-color: #f64c4c; }
        .top_main div.contents div.sec1 .menu nav:nth-child(6n + 5) ul li a {
          background-color: #cd48e1; }
        .top_main div.contents div.sec1 .menu nav:nth-child(6n + 6) ul li a {
          background-color: #e19148; }
    .top_main div.contents div.sec2 .ttl {
      color: #000;
      font-size: 24px;
      border-left: 4px solid #2e80f2;
      padding: 5px 10px;
      margin-bottom: 20px;
      font-weight: bold; }
    .top_main div.contents div.sec2 ul li {
      padding: 10px;
      font-size: 14px;
      background-color: #fff;
      margin-bottom: 8px; }
      .top_main div.contents div.sec2 ul li span:nth-child(1) {
        margin-right: 5px;
        font-size: 12px; }
      .top_main div.contents div.sec2 ul li span:nth-child(2) {
        margin-right: 5px;
        font-size: 11px;
        padding: 3px;
        color: #fff;
        display: inline-block;
        width: 55px;
        text-align: center; }
      .top_main div.contents div.sec2 ul li span:nth-child(3) {
        margin-right: 5px;
        font-size: 11px;
        padding: 3px 5px;
        border-radius: 20px;
        display: inline-block;
        text-align: center;
        background-color: #00099a;
        color: #fff; }
      .top_main div.contents div.sec2 ul li .cmn {
        background-color: #579fef; }
      .top_main div.contents div.sec2 ul li .sls {
        background-color: #1dc855; }
      .top_main div.contents div.sec2 ul li .gnl {
        background-color: #e1c83d; }
      .top_main div.contents div.sec2 ul li .rct {
        background-color: #f64c4c; }
      .top_main div.contents div.sec2 ul li .act {
        background-color: #cd48e1; }
      .top_main div.contents div.sec2 ul li .ext {
        background-color: #e19148; }

@media screen and (max-width: 1024px) {
  .top_main {
    display: block; }
    .top_main div.contents {
      width: 94%;
      margin-left: auto;
      margin-right: auto; }
      .top_main div.contents div.sec1 .menu nav ul li {
        width: calc(100% / 3 - 10px); } }

@media screen and (max-width: 768px) {
  header {
    margin-bottom: 10px; }
  div.mv_wrap span {
    width: 40px;
    height: 40px; }
    div.mv_wrap span:nth-child(2n) {
      margin-top: -40px; }
    div.mv_wrap span img {
      width: 30px; }
  .top_main div.contents ul li {
    display: flex;
    flex-wrap: wrap; }
    .top_main div.contents ul li span {
      display: inline-block;
      margin: 5px; }
  .top_main div.contents div.sec1 .menu nav ul li {
    width: calc(100% / 2 - 10px); }
    .top_main div.contents div.sec1 .menu nav ul li a {
      width: 100%; }
    .top_main div.contents div.sec1 .menu nav ul li div {
      width: 70%; } }

@media screen and (max-width: 480px) {
  header {
    justify-content: center; }
    header .h_wrap {
      text-align: center; }
  .top_main div.contents div.sec1 .menu nav ul li a {
    flex-direction: column;
    justify-content: flex-start; }
    .top_main div.contents div.sec1 .menu nav ul li a img {
      margin-top: 10px;
      margin-bottom: 10px; }
    .top_main div.contents div.sec1 .menu nav ul li a div {
      width: 100%;
      height: 100%; } }

@keyframes anim_v1 {
  0% {
    transform: translate(0, 5px); }
  100% {
    transform: translate(0, -5px); } }

@keyframes anim_v2 {
  0% {
    transform: translate(0, -5px); }
  100% {
    transform: translate(0, 5px); } }