.hub-list-page-box {
  padding-top: clamp(106.66667px, 8.33333vw, 160px);
  background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(rgba(255, 255, 255, 0.0001)));
  background: linear-gradient(180deg, #EEEEEE 0%, rgba(255, 255, 255, 0.0001) 100%);
}
.hub-list-page-box .crumb {
  background: rgba(255, 255, 255, 0.4);
}
.hub-list-page-box .crumb a, .hub-list-page-box .crumb i {
  color: #4F4F4F;
}
.hub-list-page-box .crumb h1 {
  color: #0C0F4D;
}
.hub-list-page-box .crumb .home i {
  color: #0C0F4D;
}
.hub-list-page-box .hub-list-content {
  padding: clamp(66.66667px, 5.20833vw, 100px) 0;
  overflow: hidden;
}
.hub-list-page-box .hub-list-content .hlc-box {
  max-width: clamp(893.33333px, 69.79167vw, 1340px);
  margin: 0 auto;
}
.hub-list-page-box .hub-list-content .hlc-box ul li {
  margin-bottom: clamp(40px, 3.125vw, 60px);
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 {
  position: relative;
  padding-left: 33%;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .pic, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .pic {
  border-radius: clamp(13.33333px, 1.04167vw, 20px);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .pic .meidia-box, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .pic .meidia-box {
  padding-bottom: 45%;
  overflow: hidden;
  position: relative;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .pic .meidia-box img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .pic .meidia-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .pic .meidia-box video, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .pic .meidia-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .pic a, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .pic a {
  display: block;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .pic img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .pic img {
  border-radius: clamp(13.33333px, 1.04167vw, 20px);
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .text, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .text {
  border-radius: clamp(13.33333px, 1.04167vw, 20px);
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1608);
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1608);
  width: 41.5%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 5;
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: clamp(26.66667px, 2.08333vw, 40px);
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02.tpl-02, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01.tpl-02 {
  padding-left: 0;
  padding-right: 33%;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02.tpl-02 .text, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01.tpl-02 .text {
  left: auto;
  right: 0;
  text-align: right;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02.tpl-02 .text .btn, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01.tpl-02 .text .btn {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .tit {
  display: block;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .tit h2 {
  font-weight: 700;
  font-size: clamp(20px, 1.5625vw, 30px);
  color: #0C0F4D;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .des {
  margin-top: clamp(3.33333px, 0.26042vw, 5px);
  font-weight: 400;
  font-size: clamp(10.66667px, 0.83333vw, 16px);
  color: rgba(12, 15, 77, 0.8);
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .btn {
  margin-top: clamp(10px, 0.78125vw, 15px);
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .btn a {
  border-color: #0C0F4D;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .btn a span {
  color: #0C0F4D;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .btn a i {
  background-color: #0C0F4D;
  color: #fff;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .btn a:hover {
  background-color: #0C0F4D;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .btn a:hover span {
  color: #fff;
}
.hub-list-page-box .hub-list-content .hlc-box ul li .text .btn a:hover i {
  background-color: #fff;
  color: #0C0F4D;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 {
  background: #fff;
  overflow: hidden;
  border-radius: clamp(13.33333px, 1.04167vw, 20px);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic {
  width: 61%;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic .meidia-box, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic .meidia-box {
  padding-bottom: 50%;
  overflow: hidden;
  position: relative;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic .meidia-box img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic .meidia-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic .meidia-box video, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic .meidia-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic a, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic a {
  display: block;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic img {
  border-radius: 0 0 clamp(13.33333px, 1.04167vw, 20px) clamp(13.33333px, 1.04167vw, 20px);
  -webkit-clip-path: polygon(0 0, 100% 0%, 85% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0%, 85% 100%, 0 100%);
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .text, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .text {
  width: 39%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: clamp(26.66667px, 2.08333vw, 40px);
  background: #fff;
  border-radius: 0 clamp(13.33333px, 1.04167vw, 20px) clamp(13.33333px, 1.04167vw, 20px) 0;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03.tpl-04, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04.tpl-04 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03.tpl-04 .pic img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04.tpl-04 .pic img {
  border-radius: 0 clamp(13.33333px, 1.04167vw, 20px) clamp(13.33333px, 1.04167vw, 20px) 0;
  -webkit-clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0 100%);
          clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0 100%);
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 {
  position: relative;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .pic {
  width: 100%;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .pic .meidia-box {
  padding-bottom: 35%;
  overflow: hidden;
  position: relative;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .pic .meidia-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .pic .meidia-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .pic a {
  display: block;
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .pic img {
  border-radius: clamp(13.33333px, 1.04167vw, 20px);
}
.hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .text {
  width: 42%;
  position: absolute;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 3;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: clamp(26.66667px, 2.08333vw, 40px);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 1023px) {
  .hub-list-page-box {
    padding-top: 87px;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 {
    padding-left: 0;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02.tpl-02, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01.tpl-02 {
    padding-right: 0;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .text, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .text {
    position: relative;
    top: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    width: 100%;
    border-radius: 0 0 clamp(13.33333px, 1.04167vw, 20px) clamp(13.33333px, 1.04167vw, 20px);
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02 .pic .meidia-box img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01 .pic .meidia-box img {
    border-radius: clamp(13.33333px, 1.04167vw, 20px) clamp(13.33333px, 1.04167vw, 20px) 0 0;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-02.tpl-02 .text, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-01.tpl-02 .text {
    text-align: left;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic {
    width: 100%;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .pic img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .pic img {
    -webkit-clip-path: none;
            clip-path: none;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03 .text, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04 .text {
    width: 100%;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-03.tpl-04 .pic img, .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-04.tpl-04 .pic img {
    -webkit-clip-path: none;
            clip-path: none;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .pic img {
    border-radius: clamp(13.33333px, 1.04167vw, 20px) clamp(13.33333px, 1.04167vw, 20px) 0 0;
  }
  .hub-list-page-box .hub-list-content .hlc-box ul li.tpl-05 .text {
    position: relative;
    width: 100%;
    background: #fff;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}