@charset "UTF-8";
.idxHero { opacity: 0; transition: opacity 0.5s; }
.idxHero:before, .idxHero:after { content: " "; display: table; }
.idxHero:after { clear: both; }
.idxHero.is-show { opacity: 1; }

.idxBanner { margin-top: 68px; margin-bottom: 100px; line-height: 1em; }
@media (max-width: 1440px) { .idxBanner { margin-top: 4.7222222222vw; margin-bottom: 6.9444444444vw; } }

@media (max-width: 1440px) { .idxHotpro { padding-bottom: 0.8680555556vw; margin-bottom: 2.0833333333vw; } }

/* version: 1.0.0 */
.hr0201 {  --kdl-hr0201-arrow-offset: 0; --kdl-hr0201-pages-display: none; --kdl-hr0201-pages-normal: #666666; --kdl-hr0201-pages-active: #ffffff; --kdl-hr0201-pages-padding: 0.25rem 0.5rem; --kdl-hr0201-pages-radius: 0.5rem; }

/* KDL hr0201 主要樣式 */
.hr0201__container { width: 100%; margin: 0 auto; position: relative; box-shadow: 0; border-radius: 0; }

.hr0201__container a { text-decoration: none; }

@media (min-width: 1024px) { .hr0201__container a:hover { opacity: 1; } }
.hr0201__container img { max-width: 100%; height: auto; }

.hr0201.is-limited .hr0201__container { max-width: 1140px; }

.hr0201__arrow { width: 80px; height: 80px; font-size: 0; line-height: 0; display: block; color: #fff; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); transition: all .5s; outline: 0; }

.hr0201__arrow:active { margin-top: 1px; }

.hr0201__arrow--prev { left: 0; background: url(../images/index/arrow_l.svg) 0 0 no-repeat; -webkit-background-size: cover; background-size: cover; }

.hr0201__arrow--prev:hover { background: url(../images/index/arrow_l_h.svg) 0 0 no-repeat; -webkit-background-size: cover; background-size: cover; }

.hr0201__arrow--next { right: 0; background: url(../images/index/arrow_r.svg) 0 0 no-repeat; -webkit-background-size: cover; background-size: cover; }

.hr0201__arrow--next:hover { background: url(../images/index/arrow_r_h.svg) 0 0 no-repeat; -webkit-background-size: cover; background-size: cover; }

@media (min-width: 1024px) { .hr0201__arrow--prev:hover { background: url(../images/index/arrow_l_h.svg) 0 0 no-repeat; -webkit-background-size: cover; background-size: cover; }
  .hr0201__arrow--next:hover { background: url(../images/index/arrow_r_h.svg) 0 0 no-repeat; -webkit-background-size: cover; background-size: cover; } }
.hr0201__imgsWrap { overflow: hidden; border-radius: 0; background-color: #FFF; }

.hr0201__imgsWrap picture, .hr0201__imgsWrap img { outline: none; display: block; }

.hr0201__imgsWrap img { width: 100%; }

.hr0201__imgs.slickJs .slick-slide { outline: none; }

.hr0201__imgs.slickJs .slick-list.draggable { cursor: -webkit-grab; }

.hr0201__imgs.slickJs .slick-list.draggable:active { cursor: -webkit-grabbing; }

.hr0201__imgs.slickJs .slick-slide img { pointer-events: none; }

.hr0201__imgs.slickJs.slick-dotted.slick-slider { margin-bottom: 0; }

.hr0201__imgs { --slider-total: 0; }

/* .hr0201__imgs:not(.slickJs) { display: flex; align-items: center; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }

.hr0201__imgs:not(.slickJs) a, .hr0201__imgs:not(.slickJs) picture, .hr0201__imgs:not(.slickJs) img { flex: 1 0 100%; }

.hr0201__imgs:not(.slickJs) { --nowOffset: calc(var(--slider-total) * -100%); transform: translateX(var(--nowOffset)); } */

.hr0201__slot--pages { width: 100%; position: absolute; bottom: 15px; }

/* heroPages */
.heroPages { width: 100%; margin: 0 auto; text-align: center; display: none !important; }

.heroPages li { margin: 0 2px; display: inline-block; vertical-align: middle; }

.heroPages li button { display: block; border-radius: 0; border: none; outline: none; font-size: 0; line-height: 0; cursor: pointer; background-color: #666; padding: 0.25rem 0.5rem; }

.heroPages li.slick-active button, .heroPages li.is-active button { background-color: #fff; }

@media (max-width: 1440px) { .hr0201__arrow { width: 5.8vw; height: 5.8vw; } }
@media (min-width: 1200px) { .hr0201__arrow--prev { transform: translate(-100%, -50%); }
  .hr0201__arrow--next { transform: translate(100%, -50%); }
  .hr0201__container:hover .hr0201__arrow--prev, .hr0201__container:hover .hr0201__arrow--next { transform: translate(0%, -50%); } }
@media (max-width: 640px) { .hr0201__arrow { width: 9vw; height: 9vw; } }