:host {
  display: block; width: 100%; box-sizing: border-box; position: relative; z-index: 100; --banner-page-max-width: 1400px; --banner-gap: 20px; --banner-background: transparent; --banner-height: min(600px, 100vh); --banner-min-height: 400px; --banner-button-size: 60px; --banner-button-color: #fff; --banner-dot-margin: 0px 4px; --banner-dot-size: 8px; --banner-dot-background: rgba(255, 255, 255, 0.3); --banner-dot-border-radius: 100%; --banner-dot-active-background: #005f9b
}
.container {
  box-sizing: border-box; width: 100%
}
.container div.box {
  display: block; box-sizing: border-box; width: 100%; height: var(--banner-height); min-height: var(--banner-min-height); background: var(--banner-background)
}
.container div.box jtbc-swiper {
  display: block; width: 100%; height: 100%
}
.container div.box jtbc-swiper div.swiper {
  width: 100%; height: 100%
}
.container div.box jtbc-swiper div.swiper div.button {
  width: var(--banner-button-size); height: var(--banner-button-size); display: flex; align-items: center; justify-content: center; transform: translate(0, -50%); cursor: pointer; position: absolute; top: 50%; z-index: 120
}
.container div.box jtbc-swiper div.swiper div.button jtbc-svg {
  width: calc(var(--banner-button-size) / 2); height: calc(var(--banner-button-size) / 2); --fore-color: var(--banner-button-color)
}
.container div.box jtbc-swiper div.swiper div.button.hide {
  display: none !important
}
.container div.box jtbc-swiper div.swiper div.button.disabled {
  filter: grayscale(100%); cursor: default; opacity: .3
}
.container div.box jtbc-swiper div.swiper div.button.disabled jtbc-svg {
  --fore-color: #fff
}
.container div.box jtbc-swiper div.swiper div.button-prev {
  left: 0px
}
.container div.box jtbc-swiper div.swiper div.button-next {
  right: 0px
}
.container div.box jtbc-swiper div.swiper div.pagination {
  width: 100%; display: flex; align-items: center; justify-content: center; position: absolute; bottom: var(--banner-gap); left: 0px; z-index: 100
}
.container div.box jtbc-swiper div.swiper div.pagination span.dot {
  display: block; width: var(--banner-dot-size); height: var(--banner-dot-size); margin: var(--banner-dot-margin); background: var(--banner-dot-background); border-radius: var(--banner-dot-border-radius); cursor: pointer
}
.container div.box jtbc-swiper div.swiper div.pagination span.dot.active {
  background: var(--banner-dot-active-background); cursor: default
}
.container div.box jtbc-swiper div.swiper-slide {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: none center center no-repeat; background-size: cover; overflow: hidden
}
.container div.box jtbc-swiper div.swiper-slide div.mask {
  width: 100%; height: 100%; background: transparent center center no-repeat; background-size: cover; position: absolute; top: 0px; left: 0px; z-index: 50
}
.container div.box jtbc-swiper div.swiper-slide div.frontstage {
  display: none; position: absolute; bottom: 0px; left: 50%; z-index: 150
}
.container div.box jtbc-swiper div.swiper-slide div.content {
  display: none; position: relative; z-index: 100
}
.container div.box jtbc-swiper div.swiper-slide-prev div.content,
.container div.box jtbc-swiper div.swiper-slide-active div.content,
.container div.box jtbc-swiper div.swiper-slide-next div.content {
  display: flex
}
.container div.box jtbc-swiper div.swiper-slide div.content:empty {
  display: none !important
}
.container div.box[theme=default] jtbc-swiper div.swiper-slide div.content {
  width: calc(max(var(--banner-height), var(--banner-min-height)) / 2); max-width: 50%; max-height: 50%; aspect-ratio: 1/1; align-items: center; justify-content: center; border-radius: 100%; background: rgba(0, 0, 0, 0.7)
}
.container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap {
  padding: var(--banner-gap); text-align: center
}
.container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
  width: 100%; display: block; font-size: 24px; color: #fff; text-align: center; line-height: 160%; padding-bottom: calc(var(--banner-gap) / 2)
}
.container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
  width: 100%; display: block; font-size: 16px; color: #999; text-align: center; line-height: 160%
}
.container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
  display: inline-block; margin-top: var(--banner-gap); padding: 10px 20px; line-height: 100%; background: #fff; color: #000; font-size: 14px; text-decoration: none; border-radius: 5px; transition: all .3s ease
}
.container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap a.link:hover {
  background: #000; color: #fff
}
.container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content {
  width: 100%; height: 100%; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2)
}
.container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap {
  padding: var(--banner-gap); text-align: center
}
.container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
  width: 100%; display: block; font-size: 24px; color: #fff; text-align: center; line-height: 160%; padding-bottom: calc(var(--banner-gap) / 2)
}
.container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
  width: 100%; display: block; font-size: 16px; color: rgba(255, 255, 255, 0.9); text-align: center; line-height: 160%
}
.container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
  display: inline-block; width: auto; margin: auto; margin-top: var(--banner-gap); text-decoration: none; font-size: 14px; padding-bottom: 2px; border-bottom: rgba(255, 255, 255, 0.9) 1px solid; color: rgba(255, 255, 255, 0.9); transition: all .3s ease
}
.container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap a.link:hover {
  color: #fff; border-color: #fff
}
.container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content {
  align-items: center; justify-content: center; background: rgba(0, 95, 155, 0.9)
}
.container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap {
  padding: var(--banner-gap) calc(var(--banner-gap) * 2 - 4px) var(--banner-gap) calc(var(--banner-gap) * 2); text-align: center
}
.container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap span.title,
.container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
  width: 100%; display: block; font-size: 24px; color: #fff; text-align: center; line-height: 160%; letter-spacing: 4px; font-weight: lighter
}
.container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
  display: inline-block; width: auto; margin: auto; margin-top: calc(var(--banner-gap) / 2); text-decoration: none; font-size: 14px; padding-bottom: 2px; border-bottom: rgba(255, 255, 255, 0.9) 1px solid; color: rgba(255, 255, 255, 0.9); transition: all .3s ease
}
.container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap a.link:hover {
  color: #fff; border-color: #fff
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide {
  justify-content: flex-end
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide div.content {
  width: 50%; height: 100%; align-items: center; background: rgba(0, 95, 155, 0.7)
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide div.content div.wrap {
  padding: calc(var(--banner-gap) * 2)
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
  width: 100%; display: block; font-size: 24px; color: #fff; line-height: 160%; padding-bottom: calc(var(--banner-gap) / 2); font-weight: lighter
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
  width: 100%; display: block; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 160%
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
  display: inline-block; width: auto; margin: auto; margin-top: var(--banner-gap); padding-bottom: 4px; line-height: 100%; color: rgba(255, 255, 255, 0.9); font-size: 14px; text-decoration: none; border-bottom: rgba(255, 255, 255, 0.9) 1px solid; transition: all .3s ease
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide div.content div.wrap a.link:hover {
  color: rgba(255, 255, 255, 1)
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide:nth-child(even) {
  justify-content: flex-start
}
.container div.box[theme=half] jtbc-swiper div.swiper-slide:nth-child(even) div.content {
  justify-content: flex-end; text-align: right
}
.container div.box[theme=left] jtbc-swiper div.swiper-slide {
  justify-content: center
}
.container div.box[theme=left] jtbc-swiper div.swiper-slide div.content {
  width: 100%; max-width: var(--banner-page-max-width); height: 100%; align-items: center
}
.container div.box[theme=left] jtbc-swiper div.swiper-slide div.content div.wrap {
  padding: calc(var(--banner-gap) * 2)
}
.container div.box[theme=left] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
  width: 100%; display: block; font-size: 48px; color: #fff; line-height: 160%; padding-bottom: calc(var(--banner-gap) / 2); font-weight: lighter
}
.container div.box[theme=left] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
  width: 100%; display: block; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 160%
}
.container div.box[theme=left] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
  display: inline-block; width: auto; margin: auto; margin-top: var(--banner-gap); padding: calc(var(--banner-gap) / 2) var(--banner-gap); line-height: 100%; background: rgba(0, 95, 155, 0.7); color: rgba(255, 255, 255, 0.9); font-size: 14px; text-decoration: none; transition: all .3s ease
}
.container div.box[theme=left] jtbc-swiper div.swiper-slide div.content div.wrap a.link:hover {
  background: rgba(0, 95, 155, 1); color: rgba(255, 255, 255, 1)
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide {
  justify-content: center
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide div.content {
  width: 100%; max-width: var(--banner-page-max-width); height: 100%; align-items: center; justify-content: flex-end
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap {
  padding: calc(var(--banner-gap) * 2); text-align: right
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
  width: 100%; display: block; font-size: 48px; color: #fff; line-height: 160%; padding-bottom: calc(var(--banner-gap) / 2); font-weight: lighter; position: relative; z-index: 10
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap span.title::after {
  content: ''; display: block; width: 80px; height: 2px; background: #fff; position: absolute; bottom: 0px; right: 0px; z-index: 100
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
  width: 100%; margin-top: 24px; display: block; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 160%
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
  display: inline-block; width: auto; margin: auto; margin-top: var(--banner-gap); padding: calc(var(--banner-gap) / 2) var(--banner-gap); line-height: 100%; background: rgba(0, 95, 155, 0.7); color: rgba(255, 255, 255, 0.9); font-size: 14px; text-decoration: none; transition: all .3s ease
}
.container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap a.link:hover {
  background: rgba(0, 95, 155, 1); color: rgba(255, 255, 255, 1)
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide {
  justify-content: center
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content {
  width: 100%; max-width: var(--banner-page-max-width); height: 100%; align-items: center
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide:nth-child(odd) div.content {
  justify-content: flex-start
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide:nth-child(even) div.content {
  justify-content: flex-end
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap {
  padding: calc(var(--banner-gap) * 2); 
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide:nth-child(odd) div.content div.wrap {
  text-align: left
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide:nth-child(even) div.content div.wrap {
  text-align: right
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
  width: 100%; display: block; font-size: 48px; color: #fff; line-height: 160%; padding-bottom: calc(var(--banner-gap) / 2); font-weight: lighter; position: relative; z-index: 10
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap span.title::after {
  content: ''; display: block; width: 80px; height: 2px; background: #fff; position: absolute; bottom: 0px; z-index: 100
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide:nth-child(odd) div.content div.wrap span.title::after {
  left: 0px
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide:nth-child(even) div.content div.wrap span.title::after {
  right: 0px
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
  width: 100%; margin-top: 24px; display: block; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 160%
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
  display: inline-block; width: auto; margin: auto; margin-top: var(--banner-gap); padding: calc(var(--banner-gap) / 2) var(--banner-gap); line-height: 100%; background: rgba(0, 95, 155, 0.7); color: rgba(255, 255, 255, 0.9); font-size: 14px; text-decoration: none; transition: all .3s ease
}
.container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap a.link:hover {
  background: rgba(0, 95, 155, 1); color: rgba(255, 255, 255, 1)
}
.container.on {
  display: block !important
}
@media screen and (max-width: 960px) {
  :host {
    --banner-gap: 15px; --banner-height: min(400px, 100vh)
  }
  .container div.box[theme=default] jtbc-swiper div.swiper-slide div.content {
    width: calc(max(var(--banner-height), var(--banner-min-height)) / 3 * 2); max-width: 80%; max-height: 80%
  }
  .container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
    font-size: 20px
  }
  .container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
    font-size: 14px
  }
  .container div.box[theme=default] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
    font-size: 12px
  }
  .container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
    font-size: 20px
  }
  .container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
    font-size: 14px
  }
  .container div.box[theme=naive] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
    font-size: 12px
  }
  .container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap span.title,
  .container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap span.subtitle {
    font-size: 18px
  }
  .container div.box[theme=sky] jtbc-swiper div.swiper-slide div.content div.wrap a.link {
    font-size: 12px
  }
  .container div.box[theme=half] jtbc-swiper div.swiper-slide {
    align-items: flex-end; justify-content: flex-end !important
  }
  .container div.box[theme=half] jtbc-swiper div.swiper-slide div.content div.wrap {
    padding: calc(var(--banner-gap) * 3)
  }
  .container div.box[theme=half] jtbc-swiper div.swiper-slide div.content {
    width: 100%; height: auto; justify-content: flex-start !important; text-align: left !important
  }
  .container div.box[theme=left] jtbc-swiper div.swiper-slide div.content div.wrap {
    padding: calc(var(--banner-gap) * 4)
  }
  .container div.box[theme=left] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
    font-size: 32px
  }
  .container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap {
    padding: calc(var(--banner-gap) * 4)
  }
  .container div.box[theme=right] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
    font-size: 32px
  }
  .container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap {
    padding: calc(var(--banner-gap) * 4)
  }
  .container div.box[theme=couple] jtbc-swiper div.swiper-slide div.content div.wrap span.title {
    font-size: 32px
  }
}