@charset "UTF-8";
/* 模様１ */
/* 模様２ */
/* 模様３ */
/* 模様４ */
/* ゴミ？ */
/* ゴミ？ */
/* 指定した行以降省略 */
/** video用パターン **/
/* タイトル用 */
/* エリア用 */
/* 日付タイトル用 */
/**************************************************************************************************/
/** 外枠のサイズ調整 **/
/**************************************************************************************************/
@media screen and (min-width: 0px) and (max-width: 300px) {
  :root {
    --border-size: 1vw;
  }
}
@media screen and (min-width: 300px) and (max-width: 500px) {
  :root {
    --border-size: 0.9vw;
  }
}
@media screen and (min-width: 500px) and (max-width: 700px) {
  :root {
    --border-size: 0.9vw;
  }
}
@media screen and (min-width: 700px) and (max-width: 900px) {
  :root {
    --border-size: 0.8vw;
  }
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
  :root {
    --border-size: 0.8vw;
  }
}
@media screen and (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --border-size: 0.7vw;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1500px) {
  :root {
    --border-size: 0.7vw;
  }
}
@media screen and (min-width: 1500px) and (max-width: 1700px) {
  :root {
    --border-size: 0.6vw;
  }
}
@media screen and (min-width: 1700px) and (max-width: 9999px) {
  :root {
    --border-size: 0.6vw;
  }
}

pb02-area {
  display: block;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
pb02-area pb02-titleArea {
  border-radius: 5px;
  font-family: "DotGothic16", sans-serif;
  box-sizing: border-box;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 0px) and (max-width: 300px) {
  pb02-area pb02-titleArea {
    width: 70vw;
    height: 14vw;
    font-size: 5.3846153846vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 300px) and (max-width: 500px) {
  pb02-area pb02-titleArea {
    width: 65vw;
    height: 13vw;
    font-size: 5vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 500px) and (max-width: 700px) {
  pb02-area pb02-titleArea {
    width: 60vw;
    height: 12vw;
    font-size: 4.6153846154vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 700px) and (max-width: 900px) {
  pb02-area pb02-titleArea {
    width: 55vw;
    height: 11vw;
    font-size: 4.2307692308vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
  pb02-area pb02-titleArea {
    width: 50vw;
    height: 10vw;
    font-size: 3.8461538462vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 1100px) and (max-width: 1300px) {
  pb02-area pb02-titleArea {
    width: 45vw;
    height: 9vw;
    font-size: 3.4615384615vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1500px) {
  pb02-area pb02-titleArea {
    width: 40vw;
    height: 8vw;
    font-size: 3.0769230769vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 1500px) and (max-width: 1700px) {
  pb02-area pb02-titleArea {
    width: 35vw;
    height: 7vw;
    font-size: 2.6923076923vw;
    border: 2vw solid skyblue;
  }
}
@media screen and (min-width: 1700px) and (max-width: 9999px) {
  pb02-area pb02-titleArea {
    width: 30vw;
    height: 6vw;
    font-size: 2.3076923077vw;
    border: 2vw solid skyblue;
  }
}

@media screen and (min-width: 0px) and (max-width: 300px) {
  :root {
    --title-width: 125vw;
    --title-font-size: 11vw;
    --title-height: 17vw;
    --title-stroke: 0px;
    --title-bg-size: 0.5;
  }
}
@media screen and (min-width: 300px) and (max-width: 500px) {
  :root {
    --title-width: 120vw;
    --title-font-size: 10vw;
    --title-height: 16vw;
    --title-stroke: 1px;
    --title-bg-size: 0.6;
  }
}
@media screen and (min-width: 500px) and (max-width: 700px) {
  :root {
    --title-width: 115vw;
    --title-font-size: 9vw;
    --title-height: 15vw;
    --title-stroke: 2px;
    --title-bg-size: 0.7;
  }
}
@media screen and (min-width: 700px) and (max-width: 900px) {
  :root {
    --title-width: 110vw;
    --title-font-size: 8vw;
    --title-height: 14vw;
    --title-stroke: 3px;
    --title-bg-size: 0.8;
  }
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
  :root {
    --title-width: 105vw;
    --title-font-size: 7vw;
    --title-height: 13vw;
    --title-stroke: 4px;
    --title-bg-size: 0.9;
  }
}
@media screen and (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --title-width: 105vw;
    --title-font-size: 7vw;
    --title-height: 12vw;
    --title-stroke: 4px;
    --title-bg-size: 0.9;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1500px) {
  :root {
    --title-width: 100vw;
    --title-font-size: 6vw;
    --title-height: 11vw;
    --title-stroke: 5px;
    --title-bg-size: 1;
  }
}
@media screen and (min-width: 1500px) and (max-width: 1700px) {
  :root {
    --title-width: 100vw;
    --title-font-size: 6vw;
    --title-height: 10vw;
    --title-stroke: 5px;
    --title-bg-size: 1;
  }
}
@media screen and (min-width: 1700px) and (max-width: 9999px) {
  :root {
    --title-width: 100vw;
    --title-font-size: 5vw;
    --title-height: 10vw;
    --title-stroke: 5px;
    --title-bg-size: 1;
  }
}

/* beforeとafterの共通処理 */
.videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 10vw;
  border-radius: 10px;
}
.videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
  position: relative;
  font-family: "DotGothic16", sans-serif;
  z-index: 2;
  color: #313277;
  -webkit-text-stroke: 4px #313277;
}

.videosPattern::after,
.newsPattern::after,
.goodsPattern::after,
.memberPattern::after {
  z-index: 0;
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 50%;
  opacity: 0.5;
}

.videosPattern::after {
  background-image: url(/date:/すやすやわふちゃん);
  background-position: 0 center;
}

.newsPattern::after {
  background-image: url(/img/2.png);
  background-position: 91% 40%;
  background-size: 150%;
}

.goodsPattern::after {
  background-image: url(/img/wahu2_Cut.png);
  background-position: 91% 40%;
  background-size: 120%;
}

.videosPattern::before,
.newsPattern::before,
.goodsPattern::before,
.memberPattern::before {
  z-index: 1;
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  opacity: 0.4;
}

@media screen and (min-width: 0px) and (max-width: 300px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 70vw;
    height: 14vw;
    font-size: 5.3846153846vw;
    border: 1.5vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 1.5vw solid skyblue;
  }
  .newsPattern {
    border: 1.5vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 1.5vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 1.5vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 300px) and (max-width: 500px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 65vw;
    height: 13vw;
    font-size: 5vw;
    border: 1.3vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 1.3vw solid skyblue;
  }
  .newsPattern {
    border: 1.3vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 1.3vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 1.3vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 500px) and (max-width: 700px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 60vw;
    height: 12vw;
    font-size: 4.6153846154vw;
    border: 1vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 1vw solid skyblue;
  }
  .newsPattern {
    border: 1vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 1vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 1vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 700px) and (max-width: 900px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 55vw;
    height: 11vw;
    font-size: 4.2307692308vw;
    border: 1vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 1vw solid skyblue;
  }
  .newsPattern {
    border: 1vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 1vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 1vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 900px) and (max-width: 1100px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 50vw;
    height: 10vw;
    font-size: 3.8461538462vw;
    border: 0.9vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 0.9vw solid skyblue;
  }
  .newsPattern {
    border: 0.9vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 0.9vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 0.9vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 1100px) and (max-width: 1300px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 45vw;
    height: 9vw;
    font-size: 3.4615384615vw;
    border: 0.8vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 0.8vw solid skyblue;
  }
  .newsPattern {
    border: 0.8vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 0.8vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 0.8vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 1300px) and (max-width: 1500px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 40vw;
    height: 8vw;
    font-size: 3.0769230769vw;
    border: 0.7vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 0.7vw solid skyblue;
  }
  .newsPattern {
    border: 0.7vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 0.7vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 0.7vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 1500px) and (max-width: 1700px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 35vw;
    height: 7vw;
    font-size: 2.6923076923vw;
    border: 0.6vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 0.6vw solid skyblue;
  }
  .newsPattern {
    border: 0.6vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 0.6vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 0.6vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}
@media screen and (min-width: 1700px) and (max-width: 9999px) {
  .videosPattern,
.newsPattern,
.goodsPattern,
.memberPattern {
    width: 30vw;
    height: 6vw;
    font-size: 2.3076923077vw;
    border: 0.5vw solid skyblue;
  }
  .videosPattern pb02-title,
.newsPattern pb02-title,
.goodsPattern pb02-title,
.memberPattern pb02-title {
    -webkit-text-stroke: 1px #313277;
  }
  .videosPattern {
    border: 0.5vw solid skyblue;
  }
  .newsPattern {
    border: 0.5vw solid rgb(42, 151, 151);
  }
  .goodsPattern {
    border: 0.5vw solid rgb(151, 119, 106);
  }
  .memberPattern {
    border: 0.5vw solid rgb(93, 94, 158);
  }
  .videosPattern::before {
    background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(pink calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, skyblue calc(var(--title-bg-size) * 4px), white calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .newsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(202, 230, 229) 20%, rgb(202, 230, 229) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(gray calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, gray calc(var(--title-bg-size) * 4px), rgb(202, 230, 229) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .goodsPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(254, 232, 222) 20%, rgb(254, 232, 222) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(0, 255, 8) calc(var(--title-bg-size) * 4px), rgb(254, 232, 222) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
  .memberPattern::before {
    background: radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, transparent 80%, transparent) calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), linear-gradient(rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), transparent calc(var(--title-bg-size) * 4px)) 0 calc(var(--title-bg-size) * -2px), linear-gradient(90deg, rgb(93, 94, 158) calc(var(--title-bg-size) * 4px), rgb(255, 255, 255) calc(var(--title-bg-size) * 4px)) calc(var(--title-bg-size) * -2px) 0;
    background-size: calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 100px) calc(var(--title-bg-size) * 100px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px), calc(var(--title-bg-size) * 50px) calc(var(--title-bg-size) * 50px);
  }
}

/*# sourceMappingURL=PB02_titleBar.css.map */