@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ==========================================================
  EXTEND
========================================================== */
/* ===================================================================
CSS information
 file name  :shared.css
 style info :共通のスタイル
=================================================================== */
/* ==========================================================
  BASE
========================================================== */
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1921px) {
  html {
    font-size: 0.9vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 3.4vw;
  }
}

body {
  position: relative;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  color: #363636;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  overflow-x: hidden;
}
:lang(ja) body {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
body:lang(en), body:lang(fr), body:lang(it), body:lang(de), body:lang(es), body:lang(pt-BR), .pt-br body {
  font-family: "Noto Sans", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
body:lang(zh-cmn-Hant), body.zh-cmn-Hant {
  font-family: "Noto Sans TC", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif;
}
body:lang(zh-cmn-Hans), body.zh-cmn-Hans {
  font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body:focus {
  outline: none;
}
body:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  body:before {
    background-image: url(../img/shared/bg_pc.jpg);
  }
}
@media screen and (max-width: 767px) {
  body:before {
    background-image: url(../img/shared/bg_sp.jpg);
  }
}
body #wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================
  LINK
========================================================== */
a,
a:visited,
a:hover {
  text-decoration: none;
}

/* ==========================================================
  COMMON
========================================================== */
.content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (min-width: 768px) {
  .content {
    padding: 5rem 1.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .content {
    padding: 3rem 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .content {
    padding: 3rem 1rem;
  }
}

/* ==========================================================
  HEADER
========================================================== */
header {
  background: #000;
}
header .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.8rem;
}
@media screen and (min-width: 768px) {
  header .inner {
    padding: 0 1.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  header .inner {
    padding: 0 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  header .inner {
    padding: 0 1rem;
  }
}
header .inner .logo {
  width: 10.6rem;
}
header .inner .logo img {
  vertical-align: baseline;
}
header .inner .rBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .inner .rBox .x,
header .inner .rBox .fb {
  border-right: solid 1px #565454;
  height: 1.4rem;
  padding-right: 1rem;
  margin-right: 1rem;
}
header .inner .rBox .x img,
header .inner .rBox .fb img {
  width: auto !important;
  height: 100% !important;
  vertical-align: sub;
}
header .inner .rBox .series {
  font-size: 0.8125rem;
  border-right: solid 1px #565454;
  padding-right: 1rem;
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  header .inner .rBox .series {
    display: none;
  }
}
header .inner .rBox .series a {
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  border: solid 1px #7f7f7f;
  padding: 0.2em 0.8em;
}
header .inner .rBox .langBox {
  position: relative;
  color: #fff;
  font-size: 0.875rem;
  text-align: right;
}
header .inner .rBox .langBox p {
  cursor: pointer;
  background: url(../img/shared/icn_language.svg) no-repeat center left/1.4rem;
  padding-left: 1.8rem;
}
header .inner .rBox .langBox ul {
  display: none;
  position: absolute;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  z-index: 9999;
  top: 2rem;
  right: -1rem;
}
header .inner .rBox .langBox ul li a {
  display: block;
  color: #fff;
  background: #000;
  text-align: right;
  text-decoration: none;
  padding: 0.5rem 1rem 0.8rem;
}
header .inner .rBox .langBox ul li a:hover {
  background: #4b4e56;
  color: #fff;
}
.navArea {
  position: relative;
  background: -webkit-gradient(linear, left top, right top, from(#139bef), to(#104ec6));
  background: linear-gradient(90deg, #139bef 0%, #104ec6 100%);
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) {
  .navArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.navArea .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .navArea .inner {
    height: 6rem;
    padding: 0 1.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .navArea .inner {
    padding: 0 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .navArea .inner {
    height: 5rem;
    padding: 0 1rem;
  }
}
.navArea .inner h1 {
  background: #fff;
  height: 100%;
}
.navArea .inner h1 a {
  display: block;
  padding: 0.5rem 1.4rem;
}
@media screen and (min-width: 768px) {
  .navArea .inner h1 a {
    height: 5rem;
  }
}
@media screen and (max-width: 767px) {
  .navArea .inner h1 a {
    height: 4rem;
  }
}
.navArea .inner h1 a img {
  image-rendering: auto;
  width: auto !important;
  height: 100%;
}
.navArea .inner nav {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 2rem;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 2rem 0;
    background: -webkit-gradient(linear, left top, right top, from(#139bef), to(#104ec6));
    background: linear-gradient(90deg, #139bef 0%, #104ec6 100%);
    position: fixed;
    top: 2.8rem;
    right: -100%;
    z-index: 9998;
    width: 100%;
    height: 100vh;
    padding: 4rem 2rem 0;
  }
}
.navArea .inner nav.opens {
  right: 0;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav.opens {
    width: 16rem;
  }
}
@media screen and (max-width: 767px) {
  .navArea .inner nav.opens {
    width: 46%;
  }
}
.navArea .inner nav.sc {
  top: 0;
}
.navArea .inner nav .btnClose {
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .btnClose {
    display: none;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .btnClose {
    display: block;
  }
}
.navArea .inner nav .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .nav {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 1.5rem;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .nav {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 1.5rem 0;
  }
}
.navArea .inner nav .nav > li {
  white-space: nowrap;
}
.navArea .inner nav .nav > li a {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .nav > li a {
    text-align: center;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .nav > li a {
    text-align: left;
  }
}
.navArea .inner nav .nav > li a span {
  display: block;
  color: #a9d2f8;
  font-size: 0.75rem;
}
.navArea .inner nav .nav > li a:hover {
  color: #ffe900;
}
.navArea .inner nav .nav > li a:hover span {
  color: #ffe900;
}
.navArea .inner nav .nav > li.current a {
  color: #ffe900;
}
.navArea .inner nav .nav > li.current a span {
  color: #ffe900;
}
.navArea .inner nav .nav > li.comingsoon {
  position: relative;
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .nav > li.comingsoon {
    margin-top: 1rem;
  }
}
.navArea .inner nav .nav > li.comingsoon strong {
  color: #1277dc;
  font-weight: 700;
  border-radius: 100rem;
  background: #6fafeb;
  position: absolute;
  padding: 0 0.4rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .nav > li.comingsoon strong {
    font-size: 0.6875rem;
    top: -0.8rem;
    left: calc(50% - 2.6rem);
    height: 0.8rem;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .nav > li.comingsoon strong {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .navArea .inner nav .nav > li.comingsoon strong {
    font-size: 0.75rem;
    top: -0.9rem;
    height: 0.9rem;
  }
}
.navArea .inner nav .nav > li.comingsoon a {
  color: #6fafeb;
  pointer-events: none;
}
.navArea .inner nav .nav > li.comingsoon a span {
  color: #6fafeb;
}
.navArea .inner nav .nav .debugNav {
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .nav .debugNav {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.2rem;
    width: 14.4rem;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .nav .debugNav {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 0.4rem 0;
    width: 10rem;
  }
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .nav .debugNav li {
    width: 7rem;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .nav .debugNav li {
    width: 100%;
  }
}
.navArea .inner nav .nav .debugNav li a {
  display: block;
  color: #a9d2f8;
  font-weight: 700;
  border: 1px solid #6d95d2;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .nav .debugNav li a {
    font-size: 0.625rem;
    padding: 0.2rem 0;
  }
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .nav .debugNav li a {
    font-size: 0.875rem;
    text-align: left;
    padding: 0.2rem 0.4rem;
  }
}
.navArea .inner nav .nav .debugNav li a:hover {
  color: #ffe900;
}
.navArea .inner nav .nav .debugNav li:last-of-type a {
  background: url(../img/shared/bg_blank-window.svg) no-repeat center right 0.2rem/0.8rem;
  padding-right: 0.6rem;
}
@media screen and (max-width: 1380px) {
  .navArea .inner nav .btnMyTeam {
    width: 100%;
  }
}
.navArea .inner nav .btnMyTeam a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  color: #000;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 0.5rem;
  background: #ffe900;
  -webkit-box-shadow: 0 2px 0 0 #c5b400;
          box-shadow: 0 2px 0 0 #c5b400;
  padding: 0.2rem 0 0.4rem;
  min-height: 2.6rem;
}
@media screen and (min-width: 768px) {
  .navArea .inner nav .btnMyTeam a {
    width: 9rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
  .navArea .inner nav .btnMyTeam a {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .navArea .inner nav .btnMyTeam a {
    width: 100%;
  }
}
.navArea .inner nav .btnMyTeam a span {
  display: block;
  font-size: 0.75rem;
}
.navArea .btnMenu {
  cursor: pointer;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  background: url(../img/shared/icn_menu.svg) no-repeat center left/2rem;
  padding-left: 2.4rem;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .navArea .btnMenu {
    display: none;
    top: 1.8rem;
    right: 1.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
  .navArea .btnMenu {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .navArea .btnMenu {
    display: block;
    top: 1.4rem;
    right: 1rem;
  }
}

.searchArea {
  border-top: solid 4px #d5d8dd;
  background: #ecf0f5;
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
}
.searchArea .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .searchArea .inner {
    padding: 1.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
  .searchArea .inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 1rem 0;
  }
}
@media screen and (max-width: 767px) {
  .searchArea .inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 1rem 0;
    padding: 1.5rem 1rem;
  }
}
.searchArea .inner .searchBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 1rem;
}
@media screen and (max-width: 767px) {
  .searchArea .inner .searchBox {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
  }
}
@media screen and (min-width: 768px) {
  .searchArea .inner .searchBox dt {
    height: min(2.2vw, 1.8rem);
  }
}
@media screen and (max-width: 767px) {
  .searchArea .inner .searchBox dt {
    width: 6.4rem;
  }
}
@media screen and (min-width: 768px) {
  :lang(de) .searchArea .inner .searchBox dt {
    height: min(1.6vw, 1.3rem);
  }
}
.searchArea .inner .searchBox dt img {
  vertical-align: baseline;
}
@media screen and (min-width: 768px) {
  .searchArea .inner .searchBox dt img {
    width: auto;
    height: 100%;
  }
}
.searchArea .inner .searchBox dd {
  overflow: hidden;
  border-radius: 100rem;
  border: 1px solid #485fc7;
  background: #fff;
  -webkit-box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.25);
          box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.5rem;
}
@media screen and (min-width: 768px) {
  .searchArea .inner .searchBox dd {
    width: 34rem;
  }
}
@media screen and (max-width: 767px) {
  .searchArea .inner .searchBox dd {
    width: calc(100% - 9rem);
  }
}
.searchArea .inner .searchBox dd input[type=search] {
  border: none;
  background: #fff;
  padding: 0 1em 0.1em;
  width: calc(100% - 6.2rem);
  height: 2.5rem;
}
.searchArea .inner .searchBox dd input[type=search]:focus {
  outline: 0;
}
.searchArea .inner .searchBox dd button {
  cursor: pointer;
  color: #363636;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  background: #ffe900;
  border: none;
  width: 6.2rem;
  height: 3rem;
  padding-bottom: 0.1em;
}
.searchArea .inner .searchBox .btnFilter {
  cursor: pointer;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
  border: 1px solid #dbdbdb;
  background: #fff url(../img/shared/icn_filter.svg) no-repeat center right 0.8rem/1.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.4rem;
  padding: 0 3rem 0 1rem;
}
.searchArea .inner .searchBox .btnFilter.active {
  background: #d1dde8 url(../img/shared/icn_close.svg) no-repeat center right 0.8rem/1.4rem;
}
.searchArea .inner .resultBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .searchArea .inner .resultBox {
    gap: 0 2rem;
  }
}
@media screen and (max-width: 767px) {
  .searchArea .inner .resultBox {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
}
.searchArea .inner .resultBox .result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.searchArea .inner .resultBox .result span {
  margin: 0 0.5rem;
}
.searchArea .inner .resultBox .displayCount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 0.5rem;
}
.searchArea .inner .resultBox .displayCount select {
  color: #363636;
  font-size: 0.9375rem;
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.5rem;
  border: 1px solid #dbdbdb;
  background: #fff url(../img/shared/icn_select-down.svg) no-repeat center right 0.8rem/1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.4rem;
  padding: 0 2rem 0 1rem;
}
.searchArea .filterBox {
  display: none;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2) inset;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2) inset;
  padding: 1.5rem;
}
.searchArea .filterBox .txt {
  font-size: 0.9375rem;
  text-align: left;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .searchArea .filterBox .filterSelect {
    gap: 1rem 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .searchArea .filterBox .filterSelect {
    gap: 1rem 0;
  }
}
@media screen and (min-width: 768px) {
  .searchArea .filterBox .filterSelect > li {
    width: 16rem;
  }
}
@media screen and (max-width: 767px) {
  .searchArea .filterBox .filterSelect > li {
    width: 100%;
  }
}

.filterBox .filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5rem;
}
.filterBox .filter.mb {
  margin-bottom: 1.5rem;
}
.filterBox .filter li button {
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border-radius: 100rem;
  border: 1px solid #dbdbdb;
  background: #fff url(../img/shared/icn_plus.svg) no-repeat center left 1rem/1.2rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.6rem;
  padding: 0 1rem 0.1rem 2.6rem;
}
.filterBox .filter li.active button {
  color: #fff;
  background: #23d160 url(../img/shared/icn_minus.svg) no-repeat center left 1.2rem/1rem;
}
.filterBox .filterSelect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .filterBox .filterSelect {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .filterBox .filterSelect {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.filterBox .filterSelect > li {
  display: none;
  position: relative;
  text-align: left;
  border-radius: 1rem;
  background: #d1dde8;
  padding: 0.8rem 1rem;
}
.filterBox .filterSelect > li dl dt {
  margin-bottom: 0.4rem;
}
.filterBox .filterSelect > li dl dd select {
  font-size: 0.9375rem;
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.5rem;
  border: 1px solid #dbdbdb;
  background: #fff url(../img/shared/icn_select-down.svg) no-repeat center right 0.8rem/1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 3rem;
  padding: 0 2rem 0 1rem;
}
.filterBox .filterSelect > li dl dd .select2 {
  width: 100% !important;
}
.filterBox .filterSelect > li dl dd .select2 .select2-selection--multiple {
  cursor: pointer;
  font-size: 0.9375rem;
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.5rem;
  border: 1px solid #dbdbdb;
  background: #fff url(../img/shared/icn_select-down.svg) no-repeat top 1rem right 0.8rem/1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0 2rem 0.5rem 0;
}
.filterBox .filterSelect > li dl dd .select2 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  border: none;
  border-radius: 100rem;
  white-space: pre-wrap;
  line-height: 1;
  padding: 0.2rem 1.4rem 0.5rem 0.6rem;
  margin: 0.5rem 0 0 0.5rem;
}
.filterBox .filterSelect > li dl dd .select2 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
  font-size: 0.75rem;
  padding: 0 0.2rem 0 0;
  word-break: auto-phrase;
}
.filterBox .filterSelect > li dl dd .select2 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  border: none;
  background: url(../img/shared/icn_close.svg) no-repeat center/100%;
  top: 50%;
  left: auto;
  right: 0.4rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1rem;
  aspect-ratio: 1/1;
}
.filterBox .filterSelect > li dl dd .select2 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
  display: none;
}
.filterBox .filterSelect > li dl dd .select2 .select2-selection--multiple .select2-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.filterBox .filterSelect > li dl dd .select2 .select2-selection--multiple .select2-search .select2-search__field {
  position: relative;
  top: 0.2rem;
  left: 0.8rem;
  height: 1.4rem;
  margin: 0;
}
.filterBox .filterSelect > li .close {
  content: "";
  cursor: pointer;
  display: block;
  background: url(../img/shared/icn_close.svg) no-repeat center/100%;
  position: absolute;
  top: 0.5rem;
  width: 1.8rem;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
  .filterBox .filterSelect > li .close {
    right: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .filterBox .filterSelect > li .close {
    right: 1rem;
  }
}

.select2-dropdown {
  text-align: left;
  border-radius: 0 0 0.5rem 0.5rem !important;
  border: 1px solid #dbdbdb !important;
  border-top: none !important;
  top: -0.4rem;
}
.select2-dropdown .select2-results__option {
  padding: 0.4rem 0.8rem 0.4rem 0.8rem;
}

.select2-search--dropdown {
  padding: 0 0.8rem 0.4rem !important;
}

.scroll-hint-icon {
  top: 20rem !important;
}

.pageTit {
  text-align: left;
  background: #484848;
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
  .pageTit {
    padding: 0.5rem 1.5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .pageTit {
    padding: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .pageTit {
    padding: 0.5rem 1rem;
  }
}
.pageTit span {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  border-left: solid 0.5rem #1283e2;
  padding-left: 1rem;
}

.subNav {
  background: #ecf0f5;
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  overflow: scroll;
  position: sticky !important;
  top: 0;
  z-index: 9990;
}
.subNav::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}
.subNav .simplebar-track {
  bottom: 0.2rem;
  left: 1rem !important;
}
.subNav .simplebar-track .simplebar-scrollbar:before {
  background: #104ec6;
  opacity: 0.2 !important;
}
.subNav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
}
@media screen and (min-width: 768px) {
  .subNav ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  .subNav ul li:last-of-type {
    padding-right: 1rem;
  }
}
.subNav ul li a {
  display: block;
  color: #363636;
  border-radius: 100rem;
  border: 1px solid #cedce9;
  background: #fff;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 0.4rem 1rem 0.5rem;
}
.subNav ul li a:hover {
  color: #fff;
  background: #23d160;
}
.subNav ul li.current a {
  color: #fff;
  background: #23d160;
}

.pagination {
  font-size: 0.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  .pagination {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.pagination li:first-of-type a,
.pagination li:first-of-type span {
  border-radius: 0.5rem 0 0 0.5rem;
}
.pagination li:last-of-type a,
.pagination li:last-of-type span {
  border-radius: 0 0.5rem 0.5rem 0;
}
.pagination li a,
.pagination li span {
  color: #363636;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #e5dab4;
  background: #fffbef;
}
@media screen and (min-width: 768px) {
  .pagination li a,
  .pagination li span {
    padding: 1rem 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .pagination li a,
  .pagination li span {
    padding: 0.5rem 1rem;
  }
}
.pagination li a:hover {
  color: #fff;
  background: #23d160;
}
.pagination li.active a {
  pointer-events: none;
  color: #fff;
  background: #23d160;
}
.pagination li.disabled span {
  pointer-events: none;
  color: #ccc;
}

.notFound {
  font-weight: 700;
  border: 1px solid #e5dab4;
  background: #fffbef;
  padding: 3rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .notFound {
    width: min(100%, 1280px);
  }
}
@media screen and (min-width: 1921px) {
  .notFound {
    width: 80%;
  }
}

/* ==========================================================
    FOOTER
========================================================== */
#top .updateTxt {
  color: #007cdb;
  font-weight: 900;
  line-height: 1.4;
  background: #ffe900;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  #top .updateTxt {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #top .updateTxt {
    font-size: 1.75rem;
  }
}

footer {
  text-align: center;
  background: #000;
  padding: 2.2rem 0 2.6rem;
}
footer .noteTxt {
  margin: 0 auto 2rem;
}
@media screen and (max-width: 767px) {
  footer .noteTxt {
    text-align: left;
    width: calc(100% - 2rem);
  }
}
footer .noteTxt li {
  color: #9a9a9a;
  font-size: 0.75rem;
}
@media screen and (max-width: 767px) {
  footer .noteTxt li {
    padding-left: 1em;
    text-indent: -1em;
  }
}
footer .series a {
  color: #fff;
  font-size: 0.875rem;
  border: solid 1px #fff;
  border-radius: 100rem;
  padding: 0.5rem 2rem;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  footer .series a {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  footer .series a {
    display: inline-block;
  }
}
footer .copyRight {
  color: #cdcdcd;
  font-size: 0.75rem;
}

.modalGuide {
  display: none;
  border-radius: 1rem;
  background: #ecf0f5;
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .modalGuide {
    width: 560px;
  }
}
@media screen and (min-width: 1921px) {
  .modalGuide {
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
  .modalGuide {
    width: calc(100% - 2rem);
  }
}
.modalGuide .btnClose {
  cursor: pointer;
  display: block;
  background: url(../img/shared/btn_close.svg) no-repeat center/100%;
  position: absolute;
  top: -2.5rem;
  right: 0;
  width: 2rem;
  aspect-ratio: 1/1;
}
.modalGuide .guideMain li {
  display: none;
}
.modalGuide .guideMain li.current {
  display: block;
}
.modalGuide .guideMain li .logo {
  height: 8rem;
  margin: 4rem auto 2rem;
}
.modalGuide .guideMain li .logo img {
  image-rendering: auto;
  width: auto !important;
  height: 100%;
}
.modalGuide .guideMain li .tutorial {
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  margin-bottom: 2rem;
}
.modalGuide .guideMain li dl {
  margin-bottom: 2rem;
}
.modalGuide .guideMain li dl dt {
  color: #23d160;
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.modalGuide .guideMain li dl dd {
  padding: 0 1rem;
}
.modalGuide .guideMain li .btnNext,
.modalGuide .guideMain li .btnStart {
  display: block;
  cursor: pointer;
  color: #363636;
  font-weight: 700;
  border-radius: 0.5rem;
  background: -webkit-gradient(linear, left top, right top, from(#ed6700), color-stop(100.08%, #fff100));
  background: linear-gradient(90deg, #ed6700 0%, #fff100 100.08%);
  -webkit-box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
  width: 75%;
  padding: 1rem;
  margin-inline: auto;
}
.modalGuide .guideNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 0.5rem;
  margin-top: 2rem;
}
.modalGuide .guideNav li {
  cursor: pointer;
  display: block;
  border-radius: 100rem;
  background: #ada07a;
  width: 6rem;
  height: 0.8rem;
}
.modalGuide .guideNav li.current {
  background: #ffe900;
}

.bgModalGuide {
  display: none;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9998;
}

.btnGuide {
  cursor: pointer;
  position: fixed;
  z-index: 9997;
  width: 13rem;
}
@media screen and (min-width: 768px) {
  .btnGuide {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .btnGuide {
    bottom: 0.5rem;
    right: 0.5rem;
  }
}

.pageTop {
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 1rem;
  width: 3rem;
  aspect-ratio: 1/1;
}
@media screen and (min-width: 768px) {
  .pageTop {
    right: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .pageTop {
    right: 1rem;
  }
}
#top .pageTop {
  display: none;
}