@charset "UTF-8";
/*
 * Ghvzon
 * 共用元件 js_link-v4.0
 *******************************************************************
 *  --2021.01.12--改用vue(v4.0)
 *******************************************************************
 */
/* --------------------------------------
 * uiLayout 共用區塊、共用元件、共用動畫
 * -------------------------------------- */
/* --------------------------------------
 * 共用區塊
 * -------------------------------------- */
/*手機假天*/
/*共用--for平台開關*/
.for_phone {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .for_pc {
    display: none !important;
  }
  .for_phone {
    display: inherit !important;
  }
}
/*@media screen and (max-width:767px){*/
.page_phone .for_pc {
  display: none !important;
}

.page_phone .for_phone {
  display: inherit !important;
}

/*}*/
/*基本*/
html, body {
  margin: 0;
  padding: 0;
}

img {
  border: 0px;
  vertical-align: top;
}

a {
  text-decoration: none;
}

/*共用--區塊_all*/
.Area {
  z-index: 1;
  position: relative;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  text-align: center;
}

.Area a {
  position: relative;
  display: block;
}

.Area .go_bt {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.Area .go_bt:hover {
  -webkit-transform: none;
  transform: none;
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}

@media screen and (min-width: 768px) {
  .Area .go_bt:hover {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
/*寬度,間距*/
.Area1220 {
  margin: 0 auto;
  width: 100%;
}

.Area960 {
  margin: 0 auto;
  width: 100%;
}

.Areabottom {
  margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
  .Area1220 {
    width: 1220px;
  }
  .Area960 {
    width: 960px;
  }
  .Areabottom {
    margin-bottom: 80px;
  }
}
@media screen and (max-width: 767px) {
  .m_Area96p {
    width: 97%;
  }
}
/*@media screen and (max-width:767px){*/
.page_phone .Area1220 {
  width: 100%;
}

.page_phone .Area960 {
  width: 100%;
}

.page_phone .Areabottom {
  margin-bottom: 24px;
}

/*}*/
/*共用--區塊_切割*/
.Area_grid {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.Area_grid:after {
  content: "";
  display: block;
  clear: both;
}

.Area_grid .grid-slide {
  float: left;
  display: block;
  padding: 0;
  list-style: none;
}

/*共用--區塊_切割PC*/
@media screen and (min-width: 768px) {
  .Area_grid_1bn_PC .grid-slide {
    margin: 0 0 2% 0;
    width: 100%;
  }
  .Area_grid_2bn_PC .grid-slide {
    margin: 0 1% 2%;
    width: 48%;
  }
  .Area_grid_3bn_PC .grid-slide {
    margin: 0 1% 2%;
    width: 31.3%;
  }
  .Area_grid_4bn_PC .grid-slide {
    margin: 0 0.5% 2%;
    width: 24%;
  }
  .Area_grid_1bn_nopadding_PC .grid-slide {
    width: 100%;
  }
  .Area_grid_2bn_nopadding_PC .grid-slide {
    width: 50%;
  }
  .Area_grid_3bn_nopadding_PC .grid-slide {
    width: 33.3%;
  }
  .Area_grid_4bn_nopadding_PC .grid-slide {
    width: 25%;
  }
  .Area_grid_5bn_nopadding_PC .grid-slide {
    width: 20%;
  }
  .Area_grid_6bn_nopadding_PC .grid-slide {
    width: 16.6%;
  }
}
/*共用--區塊_切割Phone*/
@media screen and (max-width: 767px) {
  .Area_grid_1bn_Phone .grid-slide {
    margin: 0 0 2% 0;
    width: 100%;
  }
  .Area_grid_2bn_Phone .grid-slide {
    margin: 0 1% 2%;
    width: 48%;
  }
  .Area_grid_3bn_Phone .grid-slide {
    margin: 0 1% 2%;
    width: 31.3%;
  }
  .Area_grid_4bn_Phone .grid-slide {
    margin: 0 0.5% 2%;
    width: 24%;
  }
  .Area_grid_1bn_nopadding_Phone .grid-slide {
    width: 100%;
  }
  .Area_grid_2bn_nopadding_Phone .grid-slide {
    width: 50%;
  }
  .Area_grid_3bn_nopadding_Phone .grid-slide {
    width: 33.3%;
  }
  .Area_grid_4bn_nopadding_Phone .grid-slide {
    width: 25%;
  }
  .Area_grid_5bn_nopadding_Phone .grid-slide {
    width: 20%;
  }
  .Area_grid_6bn_nopadding_Phone .grid-slide {
    width: 16.6%;
  }
}
/*共用--輪播基本設定*/
.Area_swiper {
  position: relative;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.Area_swiper_box {
  z-index: 1;
  padding-bottom: 25px;
}

.Area_swiper_box.Area_swiper_box_relative {
  position: relative;
}

.Area_swiper_box.Area_swiper_box_absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.Area_swiper_box .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.Area_swiper_box .swiper-wrapper:after {
  content: "";
  display: block;
  clear: both;
}

.Area_swiper_box .swiper-slide {
  margin: 0;
  padding: 0;
}

.Area_swiper_box .pagination {
  bottom: 0px !important;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.Area_swiper_box .pagination.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  -webkit-transform: translateX(-50%) scale(0.7);
          transform: translateX(-50%) scale(0.7);
}

@media screen and (max-width: 767px) {
  .Area .Area_swiper_box {
    padding-bottom: 3vw;
  }
}
/*按忸*/
.button.swiper-button-next,
.button.swiper-button-prev {
  outline: none;
}

@media screen and (max-width: 767px) {
  .button.swiper-button-next,
  .button.swiper-button-prev {
    display: none !important;
  }
}
/*輪播套公版時修正*/
.Area_swiper_box .PD_layout {
  position: static;
}

/* --------------------------------------
 * 共用元件--功能
 * -------------------------------------- */
/*延載預設圖
.articleList img.lazy_off {background-image:url(data:image/gif;base64,R0lGODlhTAFMAcQSAO/v7/T09P7+/vHx8fPz8/X19fz8/Pf39/////Dw8P39/fn5+fr6+vv7+/Ly8vb29vj4+O7u7v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkU4RDM1NjdDM0NEQkU4MTE5QzMzODE4NkNGQjI5ODY1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVCMzg2RDEwRjFFNjExRTg4MDFDQjVCRDU3QkQ4NjQ3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVCMzg2RDBGRjFFNjExRTg4MDFDQjVCRDU3QkQ4NjQ3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkI4OUE4MkFFNUYxRTgxMTk4ODc4QkI4QzVDMjFEQjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RThEMzU2N0MzQ0RCRTgxMTlDMzM4MTg2Q0ZCMjk4NjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAASACwAAAAATAFMAQAF/6AkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4vH7P7/v/gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMnKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8AAwocSLCgwYMIEypcyLChw4cQIwoUsKCAgwAQDCCQ6EZAgwcDIogcGQEAgQMNNv9yLKMAAgEAJGPGBBBggYCVXwwccCCzp88IDiAowInFAMifSH8OODCUKBQFB0ImnYo06E2nSQRA4Em169QADFRiDYKAQQCvaLsmOHB1LA+jCdLOPFlAqlyRAAoYcIuDIte7QFGKlSCAwVHADhYM5uvCKMy7NG2yULAgwOO0CSC0ZZyiLAHACQqElVG2wGWvazdzHiHgQFy5oRvkKGs5LQC2q0UoeHC6a96UPvxihrDYqYECd8EW97G7d9IEirE2+Jx2qWoiCBb8pTpA9koG26n+ftLgrFcCTR+Cr655igLTvnEzXI82gHcrAnirZaCwQfikADyQXhatOedTANcB5B//WgNE90V+BsoEwAIDKWBeVwTwR8Z7GCaID4ReBbAXGgZQB6CG+iAAQYQ9idgGA3YhVYCH8cDoVQEDsoHAASyONMCI9Chg4lc5viHkVBPOo2KPJLl4BwOvybhcOg3EiBQBQOIhwIU/OUAjOQIgR5UD9+Ew5RZQPpflOWlOBV0PBxwwhgBD9gRAmWBy+dNtZ9YQEgRkQDAVheW0mRSOPxgwUkYMQPAAoV0YEKVPgIqDwAPc4cmDmDN9iV+dMskJjgFW2kkcEEv2BCkYByT1wDcLMBkBepPNoNWkTZbBQI+iaoMApz8lgOIKBdD6ggK4xrRmGA0kS1Kv1yjwn0wIvsAT/wDDotAWh5SeoUCpJFVqTQNMYhvDZTOaQFEBCeRIak8EoCEAuCNlG80CUxHgqQkKxPSjCDr9FcAJmPa0LxcCTIvXss4UvKe4MDAAb7IMtxpBAg0o0MACBzAsRsLBHkwMAnrK9O8MDiflAAqC6gsHyD450GcxdCZVLQ2g+mSvCAs8MPMZ8/70ajMw/wTtDM6a3FkdyP6kqTFB77lzxF1BzIcBESYgMi9R+zRAkTBsqdbPdUh8YDJdw7v1Cc2eN4jFPU39CwIKi1QA2dqm3NXTfOR88dq1IOC3SEfH8K5cKwsiQNKF/wKsTFbHAPddq/5htoRg8yLoT5HHoFXdz+FdR//JdgvTAFKd0wAVvagPIoCBAGSOy+JGJ6o3gIDLsblMQ/syeO8/gAtAAgM4QEAABRTwgMd7IOAsALmzsju1QzwewQDR64FvT6nXokCEXg6xvY/Z6+F8T4nv4ne7RPQ7EvuPTE6S7LKMPxPfPjwG/yOvc6/L+RJqHBA+AwDmKYJ08crF9EYCAJkdgUf4W4T9GCi6VPRPQgb0QQMiuAgB+ISDrZDfSIDXi2l1zxUA7FQwbheBAtzicjERoC4mKJIE1iJn0DNdTwZgiwvGhIS+8KCEbEFDkdAvF0KUiS2sB5Ri+KSCpXDWCXfxRFokMSZHzAUCfFKL08kkAThwwADGSMb/MpqxQSz41RnXyEafpaAubFwjEE8AgTjacYw3U52darHAGuJAVs9aQdEA47ITgI56KvgVYHyUxRR40V+1YOEcz4UWGUpAUoskydcMWR8VDHKRd6JBH2dVC9JNsQWAHIkMd5XJ+5ngkDEZGAow2UqSVM4FTJxkK3ImtxekknAsq6X/SADLXJ2AlcIkiRthMK1bvoKXf6ykCRSZTN6JpZgjkWUJRpnMQrbAhyTJoCqmBUIW/DICR/tkNUdSSGyKRJsioOY6/dVICcRKQlAkBTmj6RVo0XKeJhuKOyMAT3UCtCTltExv4CkLaN6AAQuIqAhDRYKkHZSHG4voPZECz8Ed/9RTrwOASC/jzGfG7S1TgdY5W8nDEjCpowf9iadiNdLL1BMVTDwlDBSVFJU+JwBADapQh2pRkbSUBC8lgUdLMtSmCpV1I/GUA2oqUlLaYqK6nAFPkeLTK71gqUcdQVJHsFQwuoCFMflSsxJA1QiU9BVFtGEOtlo7sSZFrisAqwnGKoKyvgCtJPlSABJA2Jpq7RaPJAkAUNpTpN71q0kJqwj4KgG/nnUqNKrSAAjLVpFm1RVXDOcO6OqTrv4EryrQq0ttptTn/BWzKCCZGDdb2NjlAlyWNFxKHetVF6iWtz+BKVLM2gLARhUFDCCAA2bLWRfmgomorQFpe2Jan0QXBf+/tStHWzvc1yYlQVsigHKZu78X+uSmK5guRbV7WsgiRbISoKxliwtbE0CgAAEQ73LH+FlYgFOVOlBvDJUq3gIbWLz9JWtk98raETzgwBBmqAqMK5LrfCR5+R2vA9DLipwlIJ8nEHAgf5DdyTbYBxSOgGq0coAHYFi/OoVFEZOEAxEDWINFvR6Dt8scqFaYBGWBQJxcjF8C3K0X/xXpAEBcAhsDkweX4s6Og+uDjX6XBBkVcosxLM5Z6G2kb32Bk9H5FmzCl7J9IZ1P2mIABkB0AUJ+gIvDbIvvKVbJ5QPYbnWwIq+c+cQ4aJtXrqKxBrg5olo+FTCAVdMEq2DMuXX/Qc3Q4lzgns1MKY6JAwVggE5v8M0QaE8w7FwSqpYzBZDGgaHE40w0a9XHodqIABSggE4bwNBv5rCXqTpS7El3zzQIU1qMNeVL16DPfh4RAmZNa1t/usuz6yxVExAAJqeaBofzzQldfaylyiRdEli2AJhd61s3ANq5oKlhCRvpWQIbBjuqTga53QJk7mcE4h43uW3NZFoodKScfZMMrg0DaaVlmSqgtyeZeKW2IODh+h43rWndb1oga92E7c7A390CK1MFYy5QOAoE7ZtVPfzk+WZ2xWuxK4AHXOM75bgn1RzcrYm8BPFGy4anifKIC2DlV3V5xot3aj03tgUkZzUl/3k8mYGiczkoT/kzSCbSlxcvQ2KW+TQzTZKdL53KLPD4VGB+gqifPBoJs/rVCUDnERB8lrCOIYhvLjZKf8nsQN+FtDg7xuUeDyP7ert9z3myGYh81W7qZTyjXo29k9F4fy8AU9KrdcJ4+4d5pnd+hi2ys0drtn4HavIe0LFHax3xzyl6CridbfHE2BtCWrvoSX8ACDTAQ4IXdn3yzF5jj4BHOtc1N7YEeeQpr/YQWAADwPb21iOp7b4E9JHQgvB2tOZ4o49T8t18btW8/Zxe14F80QLyeVRGeaRPvvLPbQAF/Nzt7/7lAfJu6RZxlyrgpodR0r/9DXaa1uO2Ed/HHf/oBgPjhySK5w4UUXsRxQD+N3H6hgADeCi8t3qA5m3Elg8G0IAO+H/uF4ET6BPCIgQH6BMA8HrwUBgOeG4QGIASGH8xtUPFZn8KFoMyUYHMoDEeGHEPF4I2aFQziEh99YNpVQ4IUGsA6IIveHQmRoRAuFpMV1lOeFzmsGwf+HM9CINT+GdReHnVhIPQkG8n54M/yIVgN4RTqGLrIG5ZyITxlYZm6HtemExgOA1jqIVOGIc0iIZTWIfVQIY2qIdCKIVp6IfUAIgxKIixdH9OaIjT8B7JE4mSmDzDMomWeImYmImTWDiamDwQc1+dGIqiGImOmBumeIqomIqquIqs2Ir/rviKsBiLsjiLtFiLKrAbTpWLuihU8kECrbGLwNhUDkICxxGMxhhUikaMD3CMwSga3IA1AHVYI9A068RQRVRLDjQC5DJP7eYMcZccjFhNkPJf1dQrKbROBZgM7nNQixVPMaVNMDRP6TNmIuEAxZJjN3YN9LhIrBFTNnSNwnRUidUTqUECq+Mq2bCPgNGPB/WPiaiNSFF9QCZ2ypSQNsiQMcR+traRHHlrJeOQMSWQIihOBtcTjrYM0+UAbraSDGA9D8CSbpYsGDkSlfYCCGAlIEkSogGT/6F8MKk0IjCQIlFenjQtJ6kM0yVhInRLpTKTIoGCNchOI0BDhQMqRQKU/xIglBFQgLTzQxa5iCWwlCbQlCIQWhEAlXzoRzyzXuEYAVcJSUHJOzLQR0eZDElpAmJZAmRJGJAzA3WSk/kYlSPxlpoEkVhEGrhSl8hwl2EpE0ypRGXZlzLwl1PJloJpRCaAlQMJX7jkldjAmCSQlySwl2aJloQolWs5YCVglZkJl1kJlnPpmfo4iCIgmiNAmpIZA5SZmiPWloTpI4aZTTQwQYp5DKD5e445lpDJlzFhmrtpT5aZlphZApqpaaIkm9ZwnLWZnHq5nKXplzEBmE/mm61ZmHGpWJuxbC2gJ8VpDNopAbYpAripmjEQHuJJZqspE7/5hK/ZnPjGdmnUG//tWQzvGZ8SMJ8kkQDpSEP3WZX6WZ7AeZ6K1RT4UpPBhJ1/SJvwyZ2j6Z0myGsgOlLwUpn0eZluCaH8qZXhIyYRtI0YeogaaqAIOk8NagKsSZ2uqZVAsRt4kYz4RpERMKDEUKAcepse2pAk2psmup86JqESwiU0AQGHxi5C85XGFJpFKp/LeaAH1StUaaMPiqPmSRgr1RUJ2AxEGhOPGRMkEI/CJI3QWaLSeaJiGqHbKY/09wtpakvKyaZt+o1IEgAD8qX5eZh1yp8iAAH4qBb5Z4uO+qiQGqmSOqmUWqmWeqmYmqmauqmc2qme+qmgGqqiOqqkWqqmeqqomqqquqpXrNqqrvqqsBqrsjqrtFqrtnqruJqrurqrvNqrvvqrwBqswjqsxFqsxnqsyJqsyrqszNqszvqs0Bqt0jqt1Fqt1nqt2Jqt2rqt3Nqt3vqt4Bqu4jquDxECADs=);}
*/
/*版頭動畫控制*/
.an_paused.an_paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.an_running.an_running {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

/*tag錨點定位問題*/
.tag {
  position: absolute !important;
  display: block !important;
  width: 0;
  height: 0;
}

@media screen and (max-width: 767px) {
  .tag {
    position: absolute;
    top: -50px;
    display: block;
  }
}
/*@media screen and (max-width:767px){*/
.page_phone .tag {
  position: absolute;
  top: -50px;
  display: block;
}

/*}*/
/* --------------------------------------
 * 共用元件--元件
 * -------------------------------------- */
/*活動標*/
.Area_logo {
  z-index: 103;
  position: absolute;
}

.Area_logo a {
  display: block;
}

.Area_logo img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .Area_logo {
    top: 1vw;
    left: 1.8vw;
    width: 13%;
    -webkit-transform: none;
    transform: none; /*width: 14%; filter: drop-shadow(0 5px 7px rgba(0,0,0,0.4));*/
  }
}
@media screen and (min-width: 768px) {
  .Area_logo {
    top: 60px;
    left: 50.4%;
    width: 96px;
    -webkit-transform: translateX(-592px);
    transform: translateX(-592px);
  }
}
/*@media screen and (max-width:767px){*/
.page_phone .Area_logo {
  top: 0%;
  left: 2%;
  width: 19%;
}

/*}*/
/*分享*/
.Area_topshare {
  display: none;
}

@media screen and (max-width: 767px) {
  .Area_topshare {
    z-index: 50;
    position: absolute;
    display: block;
  }
  .Area_topshare a {
    display: block;
    display: inline-block;
    height: 30px;
    margin-left: 1%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
  .Area_topshare {
    top: 1vw;
    right: 1vw;
    width: 30%;
    text-align: right;
  }
  /*分享icon*/
  .Area_topshare .fbShare,
  .Area_topshare .lineShare {
    width: 40%;
    height: 30px;
    background-color: rgba(78, 61, 17, 0.6);
    border-radius: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
  }
  /*用SVG格式(改顏色搜尋【fill%3A%23】)*/
  .Area_topshare .fbShare {
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20112.2%20112.2%22%20style%3D%22enable-background%3Anew%200%200%20112.2%20112.2%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M70.2%2C58.3h-10V95H45V58.3h-7.2V45.4H45v-8.3c0-6%2C2.8-15.3%2C15.3-15.3l11.2%2C0v12.5h-8.2c-1.3%2C0-3.2%2C0.7-3.2%2C3.5%20v7.6h11.3L70.2%2C58.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
  .Area_topshare .fbShare:hover {
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20112.2%20112.2%22%20style%3D%22enable-background%3Anew%200%200%20112.2%20112.2%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cpath%20fill%3D%22%23ffe089%22%20d%3D%22M70.2%2C58.3h-10V95H45V58.3h-7.2V45.4H45v-8.3c0-6%2C2.8-15.3%2C15.3-15.3l11.2%2C0v12.5h-8.2c-1.3%2C0-3.2%2C0.7-3.2%2C3.5%20v7.6h11.3L70.2%2C58.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
  .Area_topshare .lineShare {
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22line_icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20240%20240%22%20style%3D%22enable-background%3Anew%200%200%20240%20240%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M119.9%2C32.8c-51.3%2C0-93.1%2C33.8-93.1%2C75.6c0%2C37.3%2C33.1%2C68.9%2C78%2C74.7c3%2C0.7%2C7.2%2C2.1%2C8.2%2C4.6%20c0.9%2C2.4%2C0.5%2C6.1%2C0.3%2C8.4c0%2C0-1.2%2C6.6-1.4%2C7.9c-0.3%2C2.6-1.9%2C9.3%2C8.2%2C5.1s53.7-31.7%2C73.2-54.2c13.5-15%2C20.1-29.9%2C19.8-46.7%20C213%2C66.6%2C171.2%2C32.8%2C119.9%2C32.8z%20M87%2C130.6c0%2C1.2-0.9%2C1.9-1.9%2C1.9H59c-0.5%2C0-0.9-0.3-1.2-0.5s-0.5-0.7-0.5-1.2V90.2%20c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9v32.2h17.7c0.9%2C0%2C1.9%2C0.7%2C1.6%2C1.6C87%2C124%2C87%2C130.6%2C87%2C130.6z%20M102.8%2C130.8%20c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-6.6c-1.2%2C0-1.9-0.9-1.9-1.9V90.2c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9V130.8z%20M148.8%2C131%20c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-6.6c-0.3%2C0-0.3%2C0-0.5%2C0c-0.3%2C0-0.3%2C0-0.3%2C0c-0.3-0.3-0.3-0.3-0.5-0.5l-18.7-25.2v24.1%20c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-6.6c-1.2%2C0-1.9-0.9-1.9-1.9V90.7c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c0.3%2C0%2C0.3%2C0.3%2C0.3%2C0.3l18.7%2C25.2V90.2%20c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c0.9%2C0%2C1.9%2C0.9%2C2.8%2C2.1L148.8%2C131L148.8%2C131z%20M184.1%2C96.3c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-17.7v6.7h17.7%20c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9v6.6c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-17.7v6.7h17.7c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9v6.6c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-26.2%20c-0.5%2C0-0.9-0.3-1.2-0.5s-0.5-0.7-0.5-1.2V90c0-0.5%2C0.3-0.9%2C0.5-1.2c0.3-0.3%2C0.7-0.5%2C1.2-0.5h26.2c0.9%2C0%2C1.6%2C0.9%2C1.9%2C1.4V96.3%20L184.1%2C96.3z%22%2F%3E%20%3C%2Fsvg%3E%20");
  }
  .Area_topshare .lineShare:hover {
    background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22line_icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20240%20240%22%20style%3D%22enable-background%3Anew%200%200%20240%20240%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23ffe089%22%20d%3D%22M119.9%2C32.8c-51.3%2C0-93.1%2C33.8-93.1%2C75.6c0%2C37.3%2C33.1%2C68.9%2C78%2C74.7c3%2C0.7%2C7.2%2C2.1%2C8.2%2C4.6%20c0.9%2C2.4%2C0.5%2C6.1%2C0.3%2C8.4c0%2C0-1.2%2C6.6-1.4%2C7.9c-0.3%2C2.6-1.9%2C9.3%2C8.2%2C5.1s53.7-31.7%2C73.2-54.2c13.5-15%2C20.1-29.9%2C19.8-46.7%20C213%2C66.6%2C171.2%2C32.8%2C119.9%2C32.8z%20M87%2C130.6c0%2C1.2-0.9%2C1.9-1.9%2C1.9H59c-0.5%2C0-0.9-0.3-1.2-0.5s-0.5-0.7-0.5-1.2V90.2%20c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9v32.2h17.7c0.9%2C0%2C1.9%2C0.7%2C1.6%2C1.6C87%2C124%2C87%2C130.6%2C87%2C130.6z%20M102.8%2C130.8%20c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-6.6c-1.2%2C0-1.9-0.9-1.9-1.9V90.2c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9V130.8z%20M148.8%2C131%20c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-6.6c-0.3%2C0-0.3%2C0-0.5%2C0c-0.3%2C0-0.3%2C0-0.3%2C0c-0.3-0.3-0.3-0.3-0.5-0.5l-18.7-25.2v24.1%20c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-6.6c-1.2%2C0-1.9-0.9-1.9-1.9V90.7c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c0.3%2C0%2C0.3%2C0.3%2C0.3%2C0.3l18.7%2C25.2V90.2%20c0-1.2%2C0.9-1.9%2C1.9-1.9h6.6c0.9%2C0%2C1.9%2C0.9%2C2.8%2C2.1L148.8%2C131L148.8%2C131z%20M184.1%2C96.3c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-17.7v6.7h17.7%20c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9v6.6c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-17.7v6.7h17.7c1.2%2C0%2C1.9%2C0.9%2C1.9%2C1.9v6.6c0%2C1.2-0.9%2C1.9-1.9%2C1.9h-26.2%20c-0.5%2C0-0.9-0.3-1.2-0.5s-0.5-0.7-0.5-1.2V90c0-0.5%2C0.3-0.9%2C0.5-1.2c0.3-0.3%2C0.7-0.5%2C1.2-0.5h26.2c0.9%2C0%2C1.6%2C0.9%2C1.9%2C1.4V96.3%20L184.1%2C96.3z%22%2F%3E%20%3C%2Fsvg%3E%20");
  }
}
/*注意事項*/
.Area_msg {
  color: #fff !important;
}

@media screen and (max-width: 767px) {
  .Area_msg {
    color: #eaf2f2 !important;
  }
}
/*產品標示*/
.Area_msg_PDmark {
  color: #eaf2f2 !important;
}

/*APPLE-APP警語*/
.Area_msg_apple {
  color: #eaf2f2 !important;
}

/*注意事項*/
.Area_bgfooter {
  margin-top: 100px;
  text-align: left;
  color: #164a75;
  background-color: transparent;
}

.Area_bgfooter .box {
  margin: 0 auto;
  padding: 60px 160px;
}

.Area_bgfooter p {
  margin: 0;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
}

.Area_bgfooter ul,
.Area_bgfooter ol {
  margin-top: 1.2rem;
}

.Area_bgfooter ul ol,
.Area_bgfooter ul ul {
  margin-top: 0.5rem;
}

.Area_bgfooter li {
  margin-bottom: 1.2rem;
  font-size: 18px;
  line-height: 1.8rem;
  text-align: justify;
  word-break: break-all;
}

.Area_bgfooter li p {
  margin-top: 1.2rem;
  font-size: 24px;
}

.Area_bgfooter li a {
  display: inline;
  color: #e9db00;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .Area_bgfooter {
    margin-top: 50px;
  }
  .Area_bgfooter .box {
    width: 90%;
    padding: 5%;
  }
  .Area_bgfooter p {
    font-size: 24px;
  }
  .Area_bgfooter ul,
  .Area_bgfooter ol {
    margin-top: 1rem;
    padding-left: 8%;
  }
  .Area_bgfooter ul ol,
  .Area_bgfooter ul ul {
    margin-top: 0rem;
  }
  .Area_bgfooter li {
    margin-bottom: 1rem;
    font-size: 16px;
    line-height: 1.7rem;
  }
  .Area_bgfooter li p {
    margin-top: 1rem;
    font-size: 16px;
  }
}
/*可拖移廣告icon*/
.Area_hammerAD {
  z-index: 300;
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  -webkit-transform: translate3d(0, 200px, 0);
          transform: translate3d(0, 200px, 0); /*background-color: rgba(0,0,0,0.5);*/
}

.Area_hammerAD .box {
  position: relative;
  margin-right: 10px;
  opacity: 1;
}

.Area_hammerAD img {
  width: 100%;
  height: auto;
}

.Area_hammerAD .closeButton a {
  display: block;
  cursor: pointer;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font: bold 20px/1em "Century Gothic";
  color: #FFF;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .Area_hammerAD {
    display: none;
    width: 90px;
  }
  .Area_hammerAD .closeButton a {
    top: 0;
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  .Area_hammerAD {
    display: block;
    width: 22%;
  }
  .Area_hammerAD .closeButton a {
    top: 1vw;
    right: 1vw;
  }
}
/*回版頭*/
#gotopBtn {
  display: none !important;
} /*把系統手機版原本的Gotop關掉*/
#gotop {
  display: none;
  position: fixed;
  z-index: 201;
  right: 0;
  padding: 14px 6px 3px 10px;
  font: 12px/30px Verdana;
  text-align: center;
  color: #fff;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-transform: translateX(200%);
          transform: translateX(200%);
  bottom: 90px;
  bottom: calc(90px + constant(safe-area-inset-bottom) * 0.6);
  bottom: calc(120px + env(safe-area-inset-bottom) * 0.6);
}

#gotop::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 19px;
  width: 0;
  height: 0;
  border: 4px solid #fff;
  border-color: transparent transparent #fff;
}

#gotop::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50px 0 0 50px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.8);
}

#gotop.cate-open {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

/*白色*/
#gotop {
  color: #000;
}

#gotop::before {
  border-color: transparent transparent #000;
}

#gotop::after {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0 1px 0 rgb(242, 242, 242), 0 0 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 0 rgb(242, 242, 242), 0 0 10px rgba(0, 0, 0, 0.2);
}

/*PC錨點選單*/
/*
@media screen and (max-width:767px){
  .Area_pcmenu { margin: 3vw auto;}
  .Area_pcmenu .box { border-radius: 2vw; overflow-y: hidden; white-space: nowrap; -webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; -o-transition:0s; transition:0s;
               -webkit-overflow-scrolling: touch;
                -moz-overflow-scrolling: touch; 
                 -ms-overflow-scrolling: touch; 
                  -o-overflow-scrolling: touch; 
                   overflow-scrolling: touch;}
  .Area_pcmenu ul { }
  .Area_pcmenu li { padding: 0 3%; width: auto; }
  .Area_pcmenu li a { font-size: 4.4vw; line-height: 3rem;}
  .Area_pcmenu li:after { top: 35%; left: -2%; height: 30%;}
  .Area_pcmenu.cate-fixed .box { width: 100%;}
}*/
/*選單_保留區*/
/*【程式切換】cate-fixed置頂後*/
/*.cantantBase2 li {  padding:0 15px;}*/
/*PC黏人精-分會場*/
/* .fixarea {
      -webkit-transform: rotate3d(0,0,0,0deg) translate3d(-150px,0,0);
      transform: rotate3d(0,0,0,0deg) translate3d(-150px,0,0);
      -webkit-transform-origin:top left;
      transform-origin:top left;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
      } */
/*浮出*/
/*動畫
.fix_top_box:hover a {-13px
  -webkit-animation-name: fix_top_box-play;  
          animation-name: fix_top_box-play;  
  -webkit-animation-duration: 0.3s;  
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: infinite;    
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
  @-webkit-keyframes fix_top_box-play {   
    0%   { -webkit-transform: translate3d(0,0%,0) transform: translate3d(0,0%,0);}
    100% { -webkit-transform: translate3d(0,-3%,0); transform: translate3d(0,-3%,0);}
  }
  @keyframes fix_top_box-play { 
    0%   { -webkit-transform: translate3d(0,0%,0) transform: translate3d(0,0%,0);}
    100% { -webkit-transform: translate3d(0,-3%,0); transform: translate3d(0,-3%,0);}
  }*/
/*主會場BN背景動畫*/
/*動畫
.fixarea .fix_top_box::after { 
                                    -webkit-animation-name: fix_topbg-play;  
                                            animation-name: fix_topbg-play;  
                                    -webkit-animation-duration: 0.4s;  
                                            animation-duration: 0.4s;
                                    -webkit-animation-timing-function: steps(3);
                                            animation-timing-function: steps(3);
                                    -webkit-animation-iteration-count: infinite;    
                                            animation-iteration-count: infinite;
                                    -webkit-animation-direction: alternate;
                                            animation-direction: alternate;
                                    -webkit-animation-play-state: paused;
                                            animation-play-state: paused;}
.fixarea .fix_top_box:hover::after { 
                                    -webkit-animation-play-state: running;
                                            animation-play-state: running;}
    @-webkit-keyframes fix_topbg-play {
       from { background-position: 0%; }
         to { background-position: -300%; }
    }
    @keyframes fix_topbg-play {
       from { background-position: 0%; }
         to { background-position: -300%; }
    }*/
/*SVG*/
/*PC黏人精-區塊錨點*/
/*浮層嘿嘿*/
.blackBox {
  display: none;
  z-index: 99999;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.75);
}

.blackBox * {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.blackBox a {
  text-decoration: none;
}

/*浮層基本*/
.blackBox .box .button {
  border-top: 1px solid #d6d6d6;
  text-align: center;
  font-size: 1.25rem;
  line-height: 3.5rem;
  font-weight: bold;
}

.blackBox .box .but-close {
  clear: both;
  width: 100%;
}

.blackBox .box .but-close a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #333;
}

.blackBox .box h3 span.close {
  position: absolute;
  top: 6px;
  right: 5px;
  display: block;
  border: 2px solid #333;
  border-radius: 5px;
  width: 63px;
  height: 33px;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
}

.blackBox .box h3 span.close a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #333;
}

.blackBox .Boxclose {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.blackBox .box h4 {
  height: 3rem;
  font-size: 0.8rem;
  font-weight: 100;
  text-align: center;
  color: #000;
}

/*IT用*/
.blackBox_IT {
  display: block;
  z-index: inherit;
  position: static;
  width: auto;
  height: auto;
  background: none;
}

/*通知浮層*/
.agreeArea {
  z-index: 1;
  position: relative;
  top: 5%;
  margin: 0 auto 30px;
  width: 94%;
  max-width: 700px;
  font-family: "Century Gothic", "微軟正黑體", sans-serif; /*text-align:justify; word-break:break-all;*/
}

.agreeArea img {
  width: 100%;
  height: auto;
}

.agreeArea .box {
  border-radius: 10px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  overflow: hidden;
}

.agreeArea .box .txtArea {
  height: 60vh;
  overflow: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.agreeArea .box h3 {
  margin: 0;
  padding: 0;
  height: 3rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 3rem;
  text-align: center;
  color: #000;
  background-color: #ffd710;
}

.agreeArea .box p {
  margin: 10px auto;
  margin-top: 1rem;
  padding: 0 0 0 24px;
  text-align: center;
  font-size: 1em;
  text-align: left;
  line-height: 1.2em;
  color: #000;
}

.agreeArea .box p b {
  display: block;
  padding-bottom: 0px;
}

.agreeArea .box .qrcodeimg {
  text-align: center;
}

.agreeArea .box .qrcodeimg a {
  color: #006afe;
}

.agreeArea .box .qrcodeimg img {
  width: 100%;
  height: auto;
}

.agreeArea .box .agree_table table {
  margin: 20px auto;
  border-collapse: collapse;
  width: 90%;
  text-align: center;
}

.agreeArea .box .agree_table th {
  padding: 5px;
  border: 1px solid #CCC;
  width: 33%;
  font-size: 0.9em;
}

.agreeArea .box .agree_table td {
  padding: 5px;
  border: 1px solid #CCC;
  font-size: 0.9em;
}

.agreeArea .box .agree_table th a {
  color: #c70026;
  text-decoration: underline;
}

.agreeArea .box .xxx {
  display: block;
  width: 80%;
  height: 40px;
  font-size: 1.5em;
  text-align: center;
  line-height: 40px;
  color: #FFF;
  background-color: #7048A0;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 10px;
  font-weight: bold;
  border-radius: 10px;
}

.agreeArea .box ul,
.agreeArea .box ol {
  margin: 0;
  text-align: left;
}

.agreeArea .box li {
  margin: 0 20px 10px 0px;
  font-size: 0.9em;
}

.agreeArea .box table {
  margin: 0 5%;
  width: 90%;
  border-collapse: collapse;
}

.agreeArea .box th {
  padding: 5px;
  border: 1px solid #CCC;
  background: #eee;
  font-size: 0.8em;
}

.agreeArea .box td {
  padding: 5px;
  border: 1px solid #CCC;
  font-size: 0.8em;
  vertical-align: top;
}

.agreeArea .box table ul,
.agreeArea .box table ol {
  padding: 0 0 0 20px;
}

.agreeArea .box table li {
  margin: 0 0 10px 0px;
}

/*浮層輪播*/
.agreeArea .box_pic {
  padding: 5% 5% 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.agreeArea .box_pic .pic_swiper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.agreeArea .box_pic .pic_swiper li {
  margin: 0;
  padding: 0;
}

/*商品大圖*/
.agreeArea .box_pic .box_picimg {
  position: relative;
  overflow: hidden;
}

.agreeArea .box_pic .box_picimg .pagination {
  padding: 0 10px;
  text-align: right;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transform: translateZ(0) scale(0.8);
  transform: translateZ(0) scale(0.8);
}

.agreeArea .box_pic .box_picimg .pagination span {
  display: inline-block;
  padding: 0 10px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.7);
}

/*商品列表*/
.agreeArea .box_pic .box_piclist {
  padding-top: 2%;
}

.agreeArea .box_pic .box_piclist li {
  background-color: #000;
  cursor: pointer;
}

.agreeArea .box_pic .box_piclist li img {
  opacity: 0.75;
}

.agreeArea .box_pic .box_piclist li.cate-active img {
  opacity: 1;
}

/*樣式--圖片放大*/
.agree_piczoom .Boxclose {
  cursor: pointer;
}

.agree_piczoom .agreeArea {
  pointer-events: none;
}

.agree_piczoom .box {
  position: relative;
  top: -8vh;
  overflow: visible;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: none;
}

.agree_piczoom .box img {
  width: 100%;
  height: auto;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/*關閉btn*/
.agree_piczoom .box .but-close {
  position: fixed;
  top: 10px;
  right: 10px;
  width: auto;
}

.agree_piczoom .box .but-close a {
  display: block;
}

.agree_piczoom .box .but-close a i {
  display: inline-block;
  position: relative;
  top: 3px;
  left: 0;
  width: 44px;
  height: 44px;
}

.agree_piczoom .box .but-close a i {
  -webkit-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.agree_piczoom .box .but-close a i::before,
.agree_piczoom .box .but-close a i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 6%;
  background-color: rgb(255, 255, 255);
}

.agree_piczoom .box .but-close a i::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.agree_piczoom .box .but-close a i::after {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

/*分享浮層*/
.floatBox {
  position: relative;
  margin: 2% auto;
  padding: 2% 0;
  width: 700px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  position: relative;
  border-radius: 20px;
}

.floatBox img {
  width: 100%;
  height: auto;
}

.floatBox .go_bt {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.floatBox .go_bt:hover {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}

.floatBox .closeButton a {
  display: block;
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: solid 2px #999999;
  font: bold 40px/1em "Century Gothic";
  color: #FFF;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  z-index: 2;
}

.floatBox .closeButton:hover {
  background-color: #666;
  text-decoration: none;
}

.floatBox .title {
  display: inline-block;
  margin: 0 0 10px 0;
  border-bottom: 1px solid #ffd800;
  font: bold 45px/1.4em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  letter-spacing: -0.05em;
  color: #ffd800;
  text-align: center;
}

.floatBox .box_ {
  margin: 0 auto;
  width: 90%;
}

.floatBox .box_:after {
  content: "";
  display: block;
  clear: both;
}

.floatBox .box_btn {
  margin: 20px auto 0;
  width: 80%;
}

.floatBox .box_btn a {
  display: block;
  margin: 3% 0;
}

.floatBox .box_btn img {
  width: 100%;
}

.floatBox .box_btn .btn {
  margin: 0 auto;
  width: 60%;
}

.floatBox .box_btn2 a {
  float: left;
  margin: 0 1%;
  width: 48%;
}

@media screen and (max-width: 767px) {
  .floatBox {
    padding: 5% 0;
    width: 90%;
    height: auto;
  }
  .floatBox .closeButton a {
    display: block;
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 2px #999999;
    font: bold 30px/1em "Century Gothic";
    color: #FFF;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    z-index: 2;
  }
  .floatBox .closeButton:hover {
    background-color: #666;
    text-decoration: none;
  }
  .floatBox .title {
    margin: 0 5% 3vw;
    font-size: 6vw;
    line-height: 1.4em;
  }
  .floatBox .box_btn {
    margin: 2% auto 0;
  }
  .floatBox .box_btn .btn {
    margin: 0 auto;
    width: 80%;
  }
}
/*適用商品btn*/
.floatBox .box_buy a {
  display: block;
  margin: 20px auto 0;
  padding: 10px 40px;
  border-radius: 25px;
  width: 20%;
  color: #000;
  font: bold 24px/1em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  background-color: #DABA82;
}

@media screen and (max-width: 767px) {
  .floatBox .box_buy a {
    margin: 3vw auto 0;
    padding: 1.5vw 5vw;
    width: 35%;
    font-size: 4.5vw;
    line-height: 5.5vw;
  }
}
/*輸入框*/
.floatBox .input {
  margin: 0 auto;
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 20px;
  background-color: #fff;
  -webkit-box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.7);
          box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.7);
}

.floatBox .input input {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  width: 100%;
  height: 70px;
  font-size: 40px;
  line-height: 70px;
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  text-align: left;
  background-color: transparent;
}

/* Safari 和 Chrome，常用於iOS下移除內建樣式 + 取消選取藍框*/
.floatBox .input input {
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media screen and (max-width: 767px) {
  .floatBox .input {
    padding: 1vw;
    width: 100%;
    border-radius: 10px;
  }
  .floatBox .input input {
    padding: 0 2vw;
    height: 12vw;
    font-size: 5.5vw;
    line-height: 12vw;
  }
}
/*活動紀錄查詢浮層*/
.refArea {
  width: 700px;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
}

.refArea .closeBN a {
  z-index: 2;
  position: absolute;
  top: -20px;
  right: -20px;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: solid 2px #999999;
  font: bold 40px/1em "Century Gothic";
  color: #FFF;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.refArea .closeBN a:hover {
  background-color: #666;
  text-decoration: none;
}

.refArea .title {
  margin: 0 50px 10px;
  border-bottom: 1px solid #ffd800;
  font: bold 45px/2em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  letter-spacing: -0.05em;
  color: #ffd800;
  text-align: center;
}

.refArea .title2 {
  margin: 20px auto 0px;
  font: bold 28px/1em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
}

.refArea .title3 {
  margin-top: 10px;
  font: bold 18px/1em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
}

.refArea .box_txt {
  padding: 10px 40px;
  font: 18px/1.7rem "微軟正黑體", "Microsoft JhengHei", "Century Gothic";
  color: #fff;
  text-align: left;
  letter-spacing: 1px;
}

.refArea .ref_Date ul {
  margin: 0 auto;
  padding: 10px 50px;
}

.refArea .ref_Date li {
  position: relative;
  display: inline-block;
  margin: 5px;
  padding: 0px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  text-shadow: rgba(0, 0, 0, 0.15) 1px 1px;
  color: #333;
  letter-spacing: -0.05em;
  text-align: center;
  background-color: #979797;
  text-align: center;
  -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.15), 0px 0px 0px 5px rgba(255, 255, 255, 0.1) inset;
          box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.15), 0px 0px 0px 5px rgba(255, 255, 255, 0.1) inset;
}

.refArea .ref_Date li .month {
  margin: 5px auto 0 auto;
  border-bottom: #333 solid 1px;
  width: 80%;
  margin-top: 8px;
  font: bold 20px/1.2em "Century Gothic";
}

.refArea .ref_Date li .date {
  margin: 0;
  margin-top: 0px;
  font: bold 20px/1em "Century Gothic";
}

/*填色
.refArea .ref_Date li.opendate { background-color:#8D0000; box-shadow: 0px 0px 3px 3px rgba(0%,0%,0%,0.15),0px 0px 0px 5px rgba(100%,100%,100%,0.1) inset;color:#fff;  }*/
/*背景*/
.refArea .ref_Date li {
  background: url(ref_Date_bg.png?t=1750139048536) no-repeat top center;
  background-size: 100%;
}

.refArea .ref_Date li i {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: url(ref_Date_on.png?t=1750139048536) no-repeat top center;
  background-size: 100%;
}

.refArea .ref_Date li.opendate i {
  display: block;
}

.refArea .ref_List table {
  margin: 0 auto;
  padding: 10px 0;
}

.refArea .ref_List .table2 {
  font: bold 20px/1.2em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  letter-spacing: -0.05em;
  color: #FFF;
  text-align: center;
  background-color: #999;
}

.refArea .ref_List .table3 {
  font: bold 20px/1.2em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
  letter-spacing: 0.0001em;
  color: #000;
  text-align: center;
  background-color: #FFF;
}

.refArea .ref_List table td,
.refArea .ref_List table td {
  border: 1px solid #340d4d;
  font: bold 20px/1.5em "微軟正黑體", "Microsoft JhengHei", "Century Gothic";
}

.refArea .ref_List .txtsmall {
  padding: 40px;
  padding-top: 10px;
  font: 12px/18px "微軟正黑體", "Microsoft JhengHei", "Century Gothic";
  color: #fff;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .refArea {
    width: 90%;
  }
  .refArea .closeBN a {
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    font-size: 30px;
  }
  .refArea .title {
    margin: 0 5%;
    font-size: 30px;
  }
  .refArea .title2 {
    margin: 10px auto 0px;
    font-size: 20px;
  }
  .refArea .title3 {
    margin: 10px auto 0px;
    font-size: 14px;
  }
  .refArea .box_txt {
    padding: 10px 20px;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    text-align: left;
  }
  .refArea .ref_Date ul {
    margin: 0 auto;
    padding: 10px 20px 20px;
  }
  .refArea .ref_Date li {
    margin: 3px;
    width: 40px;
    height: 40px;
  }
  .refArea .ref_Date li .month {
    font-size: 12px;
    line-height: 1.3em;
    margin-top: 4px;
  }
  .refArea .ref_Date li .date {
    margin-top: 2px;
    font-size: 12px;
  }
  .refArea .ref_List .table2 {
    font-size: 12px;
  }
  .refArea .ref_List .table3 {
    font-size: 12px;
  }
  .refArea .ref_List .table2 td,
  .refArea .ref_List .table3 td {
    font-size: 12px;
    line-height: 1.2em;
  }
  .refArea .ref_List .txtsmall {
    padding: 20px;
    padding-top: 10px;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    text-align: left;
  }
}
/*投票活動用*/
.refArea .ref_Date.for_vote {
  padding: 0 0 10px 0;
}

.refArea .votebox_Date {
  margin: 10px auto 10px;
  padding: 2% 1% 2%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 90%;
  text-align: center;
  font: 18px/18px "Century Gothic", "Microsoft JhengHei", Helvetica;
  letter-spacing: 0px;
  color: #333;
  background-color: #fbfbfb;
}

.refArea .votebox_Date:after {
  content: "";
  display: block;
  clear: both;
}

.refArea .votebox_Date1 {
  margin-bottom: 0;
}

.refArea .votebox_Date2 {
  margin-top: 0;
  background-color: #FFEC93;
}

.refArea .votebox_Date .votebox_Date_title {
  float: left;
  width: 20%;
}

.refArea .votebox_Date .votebox_Date_title b {
  display: block;
  margin-top: 14px;
  margin-bottom: 5px;
  color: #333;
}

.refArea .votebox_Date ul {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 80%;
}

.refArea .votebox_Date li {
  float: left;
  margin: 0;
  margin-left: 1%;
  padding: 0;
  width: 65px;
  height: 65px;
  border: none;
  background-color: transparent;
  text-shadow: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

@media screen and (max-width: 767px) {
  .refArea .votebox_Date {
    font: 12px/12px "Century Gothic", "Microsoft JhengHei", Helvetica;
  }
  .refArea .votebox_Date .votebox_Date_title {
    width: 23%;
  }
  .refArea .votebox_Date .votebox_Date_title b {
    margin-top: 30px;
  }
  .refArea .votebox_Date ul {
    width: 77%;
  }
  .refArea .votebox_Date li {
    margin-bottom: 1%;
    width: 40px;
    height: 40px;
  }
  .refArea .votebox_Date li .month {
    margin-top: 5px;
  }
}
/*
 * Autumn
 * 你可能會喜歡機制edmBgw.js-v1.1
 *******************************************************************
 *  --2020.03.27--延遲讀圖調整設定,輪播改v5.2.1版本(v1.1)
 *  --2019.01.06--將edmBgw.js incude在您可能會喜歡區塊語法的後面即可，不一定要緊接著(v1.0)
 *  --2019.01.06--簡易模組化公版#bt_0_layout_b268_ (PD_layout-v1.0)(v1.0)
 *******************************************************************
 */
/*基本款*/
/* --------------------------------------
 * 共用動畫
 * -------------------------------------- */
/*3D旋轉**/
.rotator {
  -webkit-animation: rotate3d 20s ease 0s inifite normal;
  animation: rotate3d 20s ease 0s inifite normal;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@-webkit-keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  20% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  20% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
.rotator_01 {
  -webkit-animation: rotation 20s ease 0s inifite normal;
  animation: rotation 20s ease 0s inifite normal;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*
 *******************************************************************
 * 模組化入稿公版 PD_layout-v20221212-15:00 - by tsshih
 * 模組化入稿公版 PD_layout-v20241206-18:23 - by jerryshen
 * 模組化入稿公版 PD_layout-v20250106-14:00 - by tsshih
 *******************************************************************
 */
/*旋轉畫面鎖定文字不縮放*/
html {
  -webkit-text-size-adjust: none;
}

/*字體*/
.PD_layout {
  font-size: 16px;
  font-family: "Microsoft JhengHei", system-ui, Helvetica, Arial;
}
.PD_layout .PD p del,
.PD_layout .PD p .money,
.PD_layout .PD p .Price {
  font-family: Arial, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
}

/*基本款*/
.PD_layout {
  position: relative;
  margin: 0 auto;
  text-align: center;
  /*套輪播時修正*/
}
.PD_layout,
.PD_layout * {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.PD_layout a {
  position: initial;
  display: block;
  text-decoration: none;
  color: #000;
}
.PD_layout ul {
  margin: 0 auto;
  padding: 20px;
  list-style: none;
}
.PD_layout ul {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.PD_layout ul {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  border-radius: 15px;
}
.PD_layout ul::after {
  content: "";
  display: block;
  clear: both;
}
.PD_layout li {
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  border-top: solid 1px #d1d1d1;
  border-right: solid 1px #d1d1d1;
}
.PD_layout li:hover {
  z-index: 5;
}
.PD_layout li {
  counter-increment: num;
}
.PD_layout .PD_slide {
  min-width: 100%;
}
.PD_layout .PD_slide::before {
  display: none;
  pointer-events: none;
  content: "0" counter(num) ". ";
  color: #dad8d9;
  font-style: italic;
  font-family: Times;
  font-size: 3em;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.005em;
}
.PD_layout .PD_slide:nth-of-type(n+10)::before {
  content: counter(num) ". ";
}
.PD_layout .PD a {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.PD_layout .PD img {
  width: 100%;
  height: auto;
}
.PD_layout .PD_img {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0.5em;
}
.PD_layout .PD_logo {
  display: none;
}
.PD_layout .PD_into {
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0.5em;
}
.PD_layout .PD_into .PD_into_PDgo {
  margin: 0.375em auto 0;
}
.PD_layout .PD h3,
.PD_layout .PD h4,
.PD_layout .PD p {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 1em;
}
.PD_layout .PD h3 {
  padding: 0;
  max-height: 1.9em;
  font-weight: 700;
  line-height: 1.9em;
  color: #DD2726;
}
.PD_layout .PD h3 span {
  display: inline-block; /*display: -webkit-box;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
}
.PD_layout .PD h4 {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5em;
}
.PD_layout .PD:hover h4 {
  color: #D62672;
}
.PD_layout .PD h4 b,
.PD_layout .PD h4 span {
  display: block;
  max-height: 1.5em;
  overflow: hidden;
}
.PD_layout .PD h4 span {
  display: inline-block; /*display: -webkit-box;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
}
.PD_layout .PD h4 br {
  display: none;
}
.PD_layout .PD p {
  height: 2em;
  line-height: 2em;
  color: #D62672;
}
.PD_layout .PD p del {
  padding-right: 0.25em;
  color: #5E5E5E;
}
.PD_layout .PD p .money {
  font-weight: 700;
}
.PD_layout .PD p .Price {
  font-size: 1.8425em;
  font-weight: 800;
}
.PD_layout .PD p small {
  font-size: 0.9em;
}
.PD_layout .PD p b,
.PD_layout .PD p .Price,
.PD_layout .PD p small {
  letter-spacing: -0.01em;
}
.PD_layout .PD .PD_go,
.PD_layout .more {
  display: none;
}
@media screen and (max-width: 767px) {
  .PD_layout ul {
    padding: 0.54em;
  }
  .PD_layout li::before {
    font-size: 2.5em;
    font-size: 32px\0 ;
  }
  .PD_layout .PD_slide::before {
    font-size: 2em;
  }
  .PD_layout .PD_into {
    padding: 0.3125em;
  }
  .PD_layout .PD_img {
    padding: 0.25em;
  }
  .PD_layout .PD h3 {
    font-size: 0.875em;
  }
  .PD_layout .PD h4 {
    font-size: 0.8125em;
  }
  .PD_layout .PD p {
    height: 1.875em;
    line-height: 1.875em;
  }
  .PD_layout .PD p b,
  .PD_layout .PD p del {
    font-size: 0.8125em;
  }
  .PD_layout .PD p .Price {
    font-size: 1.5em;
  }
  .PD_layout .PD p small {
    font-size: 0.75em;
  }
}
.PD_layout ul.swiper-wrapper {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.PD_layout ul.swiper-wrapper .PD_slide.swiper-slide {
  min-width: auto;
}
.PD_layout .PD_slide.swiper-slide {
  min-width: auto;
}

/* --------------------------------------
 *【容器樣式】  品數[data-pd-style="0"]=去ul背景、li間距
 * -------------------------------------- */
.PD_layout[data-pd-style=off] ul {
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  grid-gap: 0;
  width: 100%;
}
.PD_layout[data-pd-style=off] ul li {
  border: none;
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_img img {
    border-radius: 0.5em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_img img {
    border-radius: 1em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_img img {
    border-radius: 1.5em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_img img {
    border-radius: 2em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_img img {
    border-radius: 20em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_img img {
    border-radius: 0.25em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_img img {
    border-radius: 0.5em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_img img {
    border-radius: 0.75em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_img img {
    border-radius: 1em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_slide, .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_img img {
    border-radius: 20em;
  }
}

/* --------------------------------------
 *【佈局】  品數[data-pd-li-num="even"]=單數 [data-pd-li-num="odd"]=雙數
 * -------------------------------------- */
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-li-num=even] li:first-child {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .PD_layout[data-pd-li-num=even] li:first-child a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .PD_layout[data-pd-li-num=even] li:first-child a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .PD_layout[data-pd-li-num=even] li:first-child .PD_into {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 50%;
  }
  .PD_layout[data-pd-li-num=even] li:first-child .PD_img { /*margin: 0.25em; width: calc(50% - 0.5em);*/
    width: 50%;
  }
}
/* --------------------------------------
 *【佈局】20220818新增
 * 第一顆BN_PC[data-fs-bn-pc*="true"]、BN_Phone[data-fs-bn-phone*="true"]
 * 最後一顆BN_PC[data-ls-bn-pc*="true"]、BN_Phone[data-ls-bn-phone*="true"]
 * -------------------------------------- */
@media screen and (min-width: 768px) {
  .PD_layout ul {
    padding: 20px 0;
  }
  .PD_layout[data-pd-col-pc="2"] li:nth-child(even) {
    border-right: none;
  }
  .PD_layout[data-pd-col-pc="2"] li:nth-child(1) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="2"] li:nth-child(2) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="3"] li:nth-child(3n) {
    border-right: none;
  }
  .PD_layout[data-pd-col-pc="3"] li:nth-child(1) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="3"] li:nth-child(2) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="3"] li:nth-child(3) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="4"] li:nth-child(4n) {
    border-right: none;
  }
  .PD_layout[data-pd-col-pc="4"] li:nth-child(1) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="4"] li:nth-child(2) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="4"] li:nth-child(3) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="4"] li:nth-child(4) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="4 wide"] li {
    border: none;
  }
  .PD_layout[data-pd-col-pc="5"] li:nth-child(5n) {
    border-right: none;
  }
  .PD_layout[data-pd-col-pc="5"] li:nth-child(1) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="5"] li:nth-child(2) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="5"] li:nth-child(3) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="5"] li:nth-child(4) {
    border-top: none;
  }
  .PD_layout[data-pd-col-pc="5"] li:nth-child(5) {
    border-top: none;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout ul {
    padding: 2vw 0;
  }
  .PD_layout[data-pd-col-phone="1"] li:nth-child(1) {
    border-top: none;
  }
  .PD_layout[data-pd-col-phone="1"] li {
    border-right: none;
  }
  .PD_layout[data-pd-col-phone="2"] li:nth-child(even) {
    border-right: none;
  }
  .PD_layout[data-pd-col-phone="2"] li:nth-child(1) {
    border-top: none;
  }
  .PD_layout[data-pd-col-phone="2"] li:nth-child(2) {
    border-top: none;
  }
  .PD_layout[data-pd-col-phone="3"] li:nth-child(3n) {
    border-right: none;
  }
  .PD_layout[data-pd-col-phone="3"] li:nth-child(1) {
    border-top: none;
  }
  .PD_layout[data-pd-col-phone="3"] li:nth-child(2) {
    border-top: none;
  }
  .PD_layout[data-pd-col-phone="3"] li:nth-child(3) {
    border-top: none;
  }
  .PD_layout[data-pd-li-num=even] li:nth-child(odd) {
    border-right: none;
  }
  .PD_layout[data-pd-li-num=even] li:nth-child(even) {
    border-right: solid 1px #d1d1d1;
  }
  .PD_layout[data-pd-li-num=even] li:nth-child(2) {
    border-top: solid 1px #d1d1d1;
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-fs-bn-pc*=true] li:first-child, .PD_layout[data-ls-bn-pc*=true] li:last-child {
    background-color: transparent;
  }
  .PD_layout[data-fs-bn-pc*=true] li.PD_slide:first-child, .PD_layout[data-ls-bn-pc*=true] li.PD_slide:last-child {
    padding: 0;
    border-radius: 0;
    border: none;
  }
  .PD_layout[data-fs-bn-pc*=true] li:first-child:hover, .PD_layout[data-ls-bn-pc*=true] li:last-child:hover {
    -webkit-filter: brightness(105%);
            filter: brightness(105%);
    -webkit-transform: none;
            transform: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD_img, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD_img {
    width: 100%;
    padding: 0;
  }
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD_logo, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD_logo {
    display: none !important; /*visibility: hidden;*/
  }
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD h3, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD h3,
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD h4, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD h4,
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD h4, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD h4,
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD p, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD p,
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD_btn, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD_btn,
  .PD_layout[data-fs-bn-pc*=true] li:first-child .PD_into, .PD_layout[data-ls-bn-pc*=true] li:last-child .PD_into {
    display: none !important; /*visibility: hidden;*/
  }
  .PD_layout[data-fs-bn-pc*=true] li:first-child::before, .PD_layout[data-ls-bn-pc*=true] li:last-child::before {
    content: attr(data-WH);
    font: bolder 2em white;
    color: white;
    display: inline;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-fs-bn-phone*=true] li:first-child, .PD_layout[data-ls-bn-phone*=true] li:last-child {
    background-color: transparent;
  }
  .PD_layout[data-fs-bn-phone*=true] li.PD_slide:first-child, .PD_layout[data-ls-bn-phone*=true] li.PD_slide:last-child {
    padding: 0;
    border-radius: 0;
    border: none;
  }
  .PD_layout[data-fs-bn-phone*=true] li:first-child:hover, .PD_layout[data-ls-bn-phone*=true] li:last-child:hover {
    -webkit-filter: brightness(105%);
            filter: brightness(105%);
    -webkit-transform: none;
            transform: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD_img, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD_img {
    display: none !important; /*visibility: hidden;*/
  }
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD_into, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD_into {
    padding: 0;
  }
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD h3, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD h3,
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD h4, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD h4,
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD p, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD p,
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD_btn, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD_btn,
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD_go, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD_go {
    display: none !important; /*visibility: hidden;*/
  }
  .PD_layout[data-fs-bn-phone*=true] li:first-child .PD_logo, .PD_layout[data-ls-bn-phone*=true] li:last-child .PD_logo {
    display: block;
    width: 100%;
  }
  .PD_layout[data-fs-bn-phone*=true] li:first-child::before, .PD_layout[data-ls-bn-phone*=true] li:last-child::before {
    content: attr(data-WH);
    font: bolder 1.8em white;
    color: white;
    display: inline;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
  }
}
/*樣式: li大小 */
@media screen and (min-width: 768px) {
  .PD_layout[data-fs-bn-pc="true 1"] ul li:first-child {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .PD_layout[data-fs-bn-pc="true 2"] ul li:first-child {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .PD_layout[data-fs-bn-pc="true 3"] ul li:first-child {
    grid-column-start: 1;
    grid-column-end: 4;
  }
  .PD_layout[data-fs-bn-pc="true 4"] ul li:first-child {
    grid-column-start: 1;
    grid-column-end: 5;
  }
  .PD_layout[data-fs-bn-pc="true 5"] ul li:first-child {
    grid-column-start: 1;
    grid-column-end: 6;
  }
  .PD_layout[data-ls-bn-pc="true 1"] ul li:last-child {
    grid-column-start: -1;
    grid-column-end: -2;
  }
  .PD_layout[data-ls-bn-pc="true 2"] ul li:last-child {
    grid-column-start: -1;
    grid-column-end: -3;
  }
  .PD_layout[data-ls-bn-pc="true 3"] ul li:last-child {
    grid-column-start: -1;
    grid-column-end: -4;
  }
  .PD_layout[data-ls-bn-pc="true 4"] ul li:last-child {
    grid-column-start: -1;
    grid-column-end: -5;
  }
  .PD_layout[data-ls-bn-pc="true 5"] ul li:last-child {
    grid-column-start: -1;
    grid-column-end: -6;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-fs-bn-phone="true 1"] ul li:first-child {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .PD_layout[data-fs-bn-phone="true 2"] ul li:first-child {
    grid-row-start: 0;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3; /*aspect-ratio: 960/300;*/
  }
  .PD_layout[data-ls-bn-phone="true 1"] ul li:last-child {
    grid-column-start: -1;
    grid-column-end: -2;
  }
  .PD_layout[data-ls-bn-phone="true 2"] ul li:last-child {
    grid-column-start: -1;
    grid-column-end: -3; /*aspect-ratio: 960/300;*/
  }
  .PD_layout[data-ls-bn-phone="true none"] ul li:last-child {
    display: none;
  }
}
/*點擊事件: li點擊 */
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-point-event="none first"] ul li:first-child {
    pointer-events: none;
  }
  .PD_layout[data-pd-point-event="none last"] ul li:last-child {
    pointer-events: none;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-point-event="none first"] ul li:first-child {
    pointer-events: none;
  }
  .PD_layout[data-pd-point-event="none last"] ul li:last-child {
    pointer-events: none;
  }
}
/* --------------------------------------
 *【佈局】  電腦版[data-pd-col-pc=""]  手機版[data-pd-col-phone=""] 
 * -------------------------------------- */
@media screen and (min-width: 768px) {
  .PD_layout ul {
    display: grid;
    grid-template-columns: auto;
    padding-left: 35px;
    padding-right: 35px;
    grid-gap: 0px;
  }
  .PD_layout[data-pd-col-pc="2"] ul {
    grid-template-columns: repeat(2, auto);
  }
  .PD_layout[data-pd-col-pc="3"] ul {
    grid-template-columns: repeat(3, auto);
  }
  .PD_layout[data-pd-col-pc="4"] ul {
    grid-template-columns: repeat(4, auto);
  }
  .PD_layout[data-pd-col-pc="5"] ul {
    grid-template-columns: repeat(5, auto);
  }
  .PD_layout[data-pd-col-pc="6"] ul {
    grid-template-columns: repeat(6, auto);
  }
  .PD_layout[data-pd-col-pc="7"] ul {
    grid-template-columns: repeat(7, auto);
  }
  .PD_layout[data-pd-col-pc="8"] ul {
    grid-template-columns: repeat(8, auto);
  }
  .PD_layout[data-pd-col-pc*="4 wide"] ul {
    grid-template-columns: repeat(4, auto);
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 40px;
  }
  .PD_layout[data-pd-col-pc*="5 wide"] ul {
    grid-template-columns: repeat(5, auto);
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 40px;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout ul {
    display: grid;
    grid-template-columns: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    grid-gap: 0em;
  }
  .PD_layout[data-pd-col-phone="2"] ul {
    grid-template-columns: repeat(2, auto);
  }
  .PD_layout[data-pd-col-phone="3"] ul {
    grid-template-columns: repeat(3, auto);
  }
  .PD_layout[data-pd-col-phone="4"] ul {
    grid-template-columns: repeat(4, auto);
  }
  .PD_layout[data-pd-col-phone="5"] ul {
    grid-template-columns: repeat(5, auto);
  }
  .PD_layout[data-pd-col-phone*="2 wide"] ul {
    grid-template-columns: repeat(2, auto);
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
    row-gap: 1em;
  }
  .PD_layout[data-pd-col-phone*="3 wide"] ul {
    grid-template-columns: repeat(3, auto);
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
    row-gap: 1em;
  }
}
/*交叉調整--品數*/
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="2"][data-pd-li-num=even] li:first-child {
    width: 100%;
  }
}
/*寬鬆版*/
/* --------------------------------------
 *【佈局】主軸方向 無=直 row=橫 row-reverse橫反向 pc-row=PC橫 pc-row-reverse=PC橫反向 phone-row=Phone橫 phone-row-reverse=Phone橫反向
 * -------------------------------------- */
/*forRWD*/
.PD_layout[data-pd-direction=row] .PD a,
.PD_layout[data-pd-direction=row-reverse] .PD a {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.PD_layout[data-pd-direction=row] .PD_img,
.PD_layout[data-pd-direction=row-reverse] .PD_img {
  width: 50%;
}

.PD_layout[data-pd-direction=row] .PD_into,
.PD_layout[data-pd-direction=row-reverse] .PD_into {
  width: 50%;
}

.PD_layout[data-pd-direction=row] .PD a {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.PD_layout[data-pd-direction=row-reverse] .PD a {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

/*forPC*/
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-direction=pc-row] .PD a,
  .PD_layout[data-pd-direction=pc-row-reverse] .PD a {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .PD_layout[data-pd-direction=pc-row] .PD_img,
  .PD_layout[data-pd-direction=pc-row-reverse] .PD_img {
    width: 50%;
  }
  .PD_layout[data-pd-direction=pc-row] .PD_into,
  .PD_layout[data-pd-direction=pc-row-reverse] .PD_into {
    width: 50%;
  }
  .PD_layout[data-pd-direction=pc-row] .PD a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .PD_layout[data-pd-direction=pc-row-reverse] .PD a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
/*forPhone*/
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-direction=phone-row] .PD a,
  .PD_layout[data-pd-direction=phone-row-reverse] .PD a {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .PD_layout[data-pd-direction=phone-row] .PD_img,
  .PD_layout[data-pd-direction=phone-row-reverse] .PD_img {
    width: 50%;
  }
  .PD_layout[data-pd-direction=phone-row] .PD_into,
  .PD_layout[data-pd-direction=phone-row-reverse] .PD_into {
    width: 50%;
  }
  .PD_layout[data-pd-direction=phone-row] .PD a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .PD_layout[data-pd-direction=phone-row-reverse] .PD a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
/* --------------------------------------
 *【佈局】品底色 無=白(預) 0=透明 BN=純BN(RWD共用) BN-AWD=純BN(PC/MB不共用)  PDBN=公版+BN(RWD共用) PDBN-AWD=公版+BN(PC/MB不共用)
 * -------------------------------------- */
.PD_layout[data-pd-li=off] li {
  background-color: transparent;
}

.PD_layout[data-pd-li*=BN] li {
  background-color: transparent;
}

.PD_layout[data-pd-li*=BN] li:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-filter: brightness(105%);
          filter: brightness(105%);
}

.PD_layout[data-pd-li*=BN] .PD_into,
.PD_layout[data-pd-li*=BN] .PD_img {
  padding: 0;
}

.PD_layout[data-pd-li*=BN-AWD] .PD_logo {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-li*=BN-AWD] .PD_img {
    display: none !important;
  }
  .PD_layout[data-pd-li*=BN-AWD] .PD_logo {
    display: block !important;
  }
}
.PD_layout[data-pd-li=BN] .PD h3,
.PD_layout[data-pd-li=BN] .PD h4,
.PD_layout[data-pd-li=BN] .PD p,
.PD_layout[data-pd-li=BN-AWD] .PD h3,
.PD_layout[data-pd-li=BN-AWD] .PD h4,
.PD_layout[data-pd-li=BN-AWD] .PD p {
  display: none;
}

/* --------------------------------------
 *【主圖區】
 * -------------------------------------- */
/*圓角*/
/*交叉調整--間距+主軸方向*/
.PD_layout[data-pd-img="0"]:not([data-pd-direction*=row]) .PD_img img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.PD_layout[data-pd-img="0"][data-pd-direction=row] .PD_img img {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.PD_layout[data-pd-img="0"][data-pd-direction=row-reverse] .PD_img img {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

@media screen and (min-width: 768px) {
  .PD_layout[data-pd-img="0"][data-pd-direction=pc-row] .PD_img img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .PD_layout[data-pd-img="0"][data-pd-direction=pc-row-reverse] .PD_img img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .PD_layout[data-pd-img="0"][data-pd-direction=phone-row] .PD_img img,
  .PD_layout[data-pd-img="0"][data-pd-direction=phone-row-reverse] .PD_img img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-img="0"][data-pd-direction=pc-row] .PD_img img,
  .PD_layout[data-pd-img="0"][data-pd-direction=pc-row-reverse] .PD_img img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .PD_layout[data-pd-img="0"][data-pd-direction=phone-row] .PD_img img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .PD_layout[data-pd-img="0"][data-pd-direction=phone-row-reverse] .PD_img img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
/*主圖間距*/
.PD_layout[data-pd-img="0"] .PD_img {
  padding: 0;
}

@media screen and (min-width: 768px) {
  .PD_layout[data-pd-img="1"] .PD_img {
    padding: 0.5em;
  }
  .PD_layout[data-pd-img="2"] .PD_img {
    padding: 1em;
  }
  .PD_layout[data-pd-img="3"] .PD_img {
    padding: 1.5em;
  }
  .PD_layout[data-pd-img="4"] .PD_img {
    padding: 2em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-img="1"] .PD_img {
    padding: 0.25em;
  }
  .PD_layout[data-pd-img="2"] .PD_img {
    padding: 0.5em;
  }
  .PD_layout[data-pd-img="3"] .PD_img {
    padding: 0.75em;
  }
  .PD_layout[data-pd-img="4"] .PD_img {
    padding: 1em;
  }
}
/*交叉調整--主軸方向+品數*/
@media screen and (min-width: 768px) {
  .PD_layout:not([data-pd-direction*=row]) .PD_img,
  .PD_layout[data-pd-direction=phone-row] .PD_img,
  .PD_layout[data-pd-direction=phone-row-reverse] .PD_img {
    padding-bottom: 0;
  }
  .PD_layout[data-pd-direction=row] .PD_img,
  .PD_layout[data-pd-direction=pc-row] .PD_img {
    padding-right: 0;
  }
  .PD_layout[data-pd-direction=row-reverse] .PD_img,
  .PD_layout[data-pd-direction=pc-row-reverse] .PD_img {
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout:not([data-pd-direction*=row]):not([data-pd-li-num=even]) .PD_img,
  .PD_layout[data-pd-direction=pc-row]:not([data-pd-li-num=even]) .PD_img,
  .PD_layout[data-pd-direction=pc-row-reverse]:not([data-pd-li-num=even]) .PD_img {
    padding-bottom: 0;
  }
  .PD_layout[data-pd-direction=row-reverse] .PD_img,
  .PD_layout[data-pd-direction=phone-row-reverse] .PD_img {
    padding-left: 0;
  }
  .PD_layout[data-pd-li-num=even]:not([data-pd-direction*=row]) li:not(:first-child) .PD_img {
    padding-bottom: 0;
  }
  .PD_layout[data-pd-li-num=even] li:first-child .PD_img {
    padding-right: 0;
  }
  .PD_layout[data-pd-li-num=even][data-pd-direction=pc-row] li:not(:first-child) .PD_img,
  .PD_layout[data-pd-li-num=even][data-pd-direction=pc-row-reverse] li:not(:first-child) .PD_img {
    padding-bottom: 0;
  }
}
/* --------------------------------------
 *【元件】品牌LOGO
 * -------------------------------------- */
/*顯示*/
.PD_layout[data-pd-pdlogo] .PD .PD_logo {
  display: inline-block;
}

/*樣式: 1=矩型 2=膠囊型 3=圓型*/
.PD_layout[data-pd-pdlogo="1"] .PD .PD_logo,
.PD_layout[data-pd-pdlogo="2"] .PD .PD_logo,
.PD_layout[data-pd-pdlogo="3"] .PD .PD_logo,
.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo {
  margin: 0 auto;
  margin-bottom: 0.25em;
  text-align: center;
  width: auto;
}

.PD_layout[data-pd-pdlogo="1"] .PD .PD_logo {
  height: 3.75em;
}

.PD_layout[data-pd-pdlogo="2"] .PD .PD_logo {
  height: 3em;
}

.PD_layout[data-pd-pdlogo="3"] .PD .PD_logo {
  height: 4.375em;
}

.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo {
  height: 3.75em;
}

.PD_layout[data-pd-pdlogo="2"] .PD .PD_logo img {
  border-radius: 10em;
  background-color: #fff;
}

.PD_layout[data-pd-pdlogo="3"] .PD .PD_logo img {
  border-radius: 10em;
}

.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo img {
  border-radius: 1em;
  border: 1px solid #dadada;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.PD_layout[data-pd-pdlogo="1"] .PD .PD_logo img,
.PD_layout[data-pd-pdlogo="2"] .PD .PD_logo img,
.PD_layout[data-pd-pdlogo="3"] .PD .PD_logo img,
.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo img {
  width: auto;
  height: 100%;
  -webkit-box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.1);
}

.PD_layout[data-pd-pdlogo="2"] .PD .PD_logo img {
  padding: 0 2em;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-pdlogo="1"] .PD .PD_logo {
    height: 4.25em;
  }
  .PD_layout[data-pd-pdlogo="2"] .PD .PD_logo {
    height: 3em;
  }
  .PD_layout[data-pd-pdlogo="3"] .PD .PD_logo {
    height: 4.25em;
  }
  .PD_layout[data-pd-pdlogo="4"] .PD .PD_logo {
    height: 4.25em;
  }
}
/*交叉調整-佈局直式上推-橫式不動*/
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-pdlogo="1"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="1"][data-pd-direction=phone-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="1"][data-pd-direction=phone-row-reverse] .PD .PD_logo {
    margin-top: -2.375em;
  }
  .PD_layout[data-pd-pdlogo="2"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="2"][data-pd-direction=phone-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="2"][data-pd-direction=phone-row-reverse] .PD .PD_logo {
    margin-top: -2em;
  }
  .PD_layout[data-pd-pdlogo="3"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="3"][data-pd-direction=phone-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="3"][data-pd-direction=phone-row-reverse] .PD .PD_logo {
    margin-top: -2.6875em;
  }
  .PD_layout[data-pd-pdlogo="4"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="4"][data-pd-direction=phone-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="4"][data-pd-direction=phone-row-reverse] .PD .PD_logo {
    margin-top: -2.375em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-pdlogo="1"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="1"][data-pd-direction=pc-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="1"][data-pd-direction=pc-row-reverse] .PD .PD_logo {
    margin-top: -2.4375em;
  }
  .PD_layout[data-pd-pdlogo="2"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="2"][data-pd-direction=pc-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="2"][data-pd-direction=pc-row-reverse] .PD .PD_logo {
    margin-top: -1.8125em;
  }
  .PD_layout[data-pd-pdlogo="3"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="3"][data-pd-direction=pc-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="3"][data-pd-direction=pc-row-reverse] .PD .PD_logo {
    margin-top: -2.4375em;
  }
  .PD_layout[data-pd-pdlogo="4"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="4"][data-pd-direction=pc-row] .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="4"][data-pd-direction=pc-row-reverse] .PD .PD_logo {
    margin-top: -2.4375em;
  }
  .PD_layout[data-pd-pdlogo="1"][data-pd-li-num=even]:not([data-pd-direction*=row]) li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="1"][data-pd-li-num=even][data-pd-direction=pc-row] li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="1"][data-pd-li-num=even][data-pd-direction=pc-row-reverse] li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="2"][data-pd-li-num=even]:not([data-pd-direction*=row]) li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="2"][data-pd-li-num=even][data-pd-direction=pc-row] li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="2"][data-pd-li-num=even][data-pd-direction=pc-row-reverse] li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="3"][data-pd-li-num=even]:not([data-pd-direction*=row]) li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="3"][data-pd-li-num=even][data-pd-direction=pc-row] li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="3"][data-pd-li-num=even][data-pd-direction=pc-row-reverse] li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="4"][data-pd-li-num=even]:not([data-pd-direction*=row]) li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="4"][data-pd-li-num=even][data-pd-direction=pc-row] li:first-child .PD .PD_logo,
  .PD_layout[data-pd-pdlogo="4"][data-pd-li-num=even][data-pd-direction=pc-row-reverse] li:first-child .PD .PD_logo {
    margin-top: 0;
  }
}
/*沒有主圖時*/
.PD_layout[data-pd-pdlogo][data-pd-pdimg=off] .PD .PD_logo {
  margin-top: 0;
}

/*對齊*/
.PD_layout[data-pd-pdlogo-ta=left] .PD .PD_logo {
  margin-left: 0;
}

.PD_layout[data-pd-pdlogo-ta=right] .PD .PD_logo {
  margin-right: 0;
}

/* --------------------------------------
 *【字級】
 * -------------------------------------- */
/*電腦版[data-pd-fs-pc=""] 100~900 預設=400*/
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-fs-pc="100"] {
    font-size: 0.75em;
  }
  .PD_layout[data-pd-fs-pc="200"] {
    font-size: 0.875em;
  }
  .PD_layout[data-pd-fs-pc="300"] {
    font-size: 1em;
  }
  .PD_layout[data-pd-fs-pc="400"] {
    font-size: 1.125em;
  }
  .PD_layout[data-pd-fs-pc="500"] {
    font-size: 1.25em;
  }
  .PD_layout[data-pd-fs-pc="600"] {
    font-size: 1.5em;
  }
  .PD_layout[data-pd-fs-pc="700"] {
    font-size: 1.875em;
  }
  .PD_layout[data-pd-fs-pc="800"] {
    font-size: 2.25em;
  }
  .PD_layout[data-pd-fs-pc="900"] {
    font-size: 3em;
  }
}
/*手機版[data-pd-fs-phone=""] 100~900 預設=300*/
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-fs-phone="100"] {
    font-size: 0.5em;
  }
  .PD_layout[data-pd-fs-phone="200"] {
    font-size: 0.75em;
  }
  .PD_layout[data-pd-fs-phone="300"] {
    font-size: 0.875em;
  }
  .PD_layout[data-pd-fs-phone="400"] {
    font-size: 1em;
  }
  .PD_layout[data-pd-fs-phone="500"] {
    font-size: 1.125em;
  }
  .PD_layout[data-pd-fs-phone="600"] {
    font-size: 1.25em;
  }
  .PD_layout[data-pd-fs-phone="700"] {
    font-size: 1.5em;
  }
  .PD_layout[data-pd-fs-phone="800"] {
    font-size: 1.875em;
  }
  .PD_layout[data-pd-fs-phone="900"] {
    font-size: 2.25em;
  }
}
/* --------------------------------------
 *【元件】
 * -------------------------------------- */
/*隱藏*/
.PD_layout[data-pd-pd=off] .PD,
.PD_layout[data-pd-pdimg=off] .PD_img,
.PD_layout[data-pd-into=off] .PD_into,
.PD_layout[data-pd-h3=off] .PD h3,
.PD_layout[data-pd-h4=off] .PD h4,
.PD_layout[data-pd-p=off] .PD p,
.PD_layout[data-pd-p=off-del] .PD p del {
  display: none;
}

/*文字對齊*/
.PD_layout[data-pd-ta=left] {
  text-align: left;
}

.PD_layout[data-pd-ta=right] {
  text-align: right;
}

/*商品文案主軸方向*/
.PD_layout[data-pd-into=center] .PD_into {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.PD_layout[data-pd-into=between] .PD_into {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.PD_layout[data-pd-into=evenly] .PD_into {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

/*number序號*/
.PD_layout[data-pd-number] .PD_slide::before {
  display: block;
}

.PD_layout[data-pd-number*=false] .PD_slide::before {
  display: none;
}

.PD_layout[data-pd-number*=-r] .PD_slide::before {
  position: relative;
}

.PD_layout[data-pd-number*=-a] .PD_slide::before {
  position: absolute;
}

.PD_layout[data-pd-number*=top] .PD_slide::before {
  top: 0;
}

.PD_layout[data-pd-number*=right] .PD_slide::before {
  right: 0;
}

.PD_layout[data-pd-number*=bottom] .PD_slide::before {
  bottom: 0;
}

.PD_layout[data-pd-number*=left] .PD_slide::before {
  left: 0;
}

.PD_layout[data-pd-number*=col-center] .PD_slide::before {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.PD_layout[data-pd-number*=row-center] .PD_slide::before {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/*h3特標*/
.PD_layout[data-pd-h3="1"] .PD h3,
.PD_layout[data-pd-h3="2"] .PD h3,
.PD_layout[data-pd-h3="3"] .PD h3,
.PD_layout[data-pd-h3="4"] .PD h3,
.PD_layout[data-pd-h3="6"] .PD h3 {
  margin-bottom: 0.5em;
  padding: 0 1em;
  color: #fff;
  background-color: #DD2726;
}

.PD_layout[data-pd-h3="2"] .PD h3 {
  border-radius: 2em;
}

.PD_layout[data-pd-h3="3"] .PD h3 {
  border-radius: 0 2em 0 2em;
}

.PD_layout[data-pd-h3="4"] .PD h3 {
  position: relative;
}

.PD_layout[data-pd-h3="4"] .PD h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.3em;
  height: 100%;
  background-color: #fff;
  opacity: 0.4;
}

.PD_layout[data-pd-h3="4"] .PD h3::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border: 0.95em solid transparent;
  border-left-width: 0;
  border-right-color: #fff;
}

.PD_layout[data-pd-h3="5"] .PD h3 {
  margin-bottom: 0.5em;
  padding: 0;
}

.PD_layout[data-pd-h3="5"] .PD h3 span {
  display: inline-block;
  padding: 0 0.5em;
  max-width: 85%;
  border-radius: 4px;
  color: #000;
  background-color: rgba(255, 255, 255, 0.9);
}

.PD_layout[data-pd-h3="6"] .PD h3 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5em;
  overflow: visible;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 3em;
  max-height: none;
  height: 3.4em;
  line-height: 1.2em;
  text-align: center;
}

.PD_layout[data-pd-h3="6"] .PD h3 span {
  display: block;
  overflow: hidden;
  height: 2.4em;
}

.PD_layout[data-pd-h3="6"] .PD h3::before,
.PD_layout[data-pd-h3="6"] .PD h3::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3125em 0.75em;
  border-color: #DD2726;
  border-bottom-color: transparent;
}

.PD_layout[data-pd-h3="6"] .PD h3::before {
  left: 0;
  border-right-color: transparent;
}

.PD_layout[data-pd-h3="6"] .PD h3::after {
  right: 0;
  border-left-color: transparent;
}

.PD_layout[data-pd-h3="7"] .PD h3 span {
  display: inline-block;
  padding: 0 1.25em;
  max-width: 85%;
  border-radius: 2em;
  color: #000;
  background-color: rgba(218, 218, 218, 0.9);
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
  max-height: 1.8em;
}

/*h4品牌品名*/
.PD_layout[data-pd-h4="1"] .PD h4 {
  display: block;
  max-height: 1.5em;
  overflow: hidden;
}

.PD_layout[data-pd-h4="1"] .PD h4 {
  display: inline-block; /*display: -webkit-box;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
}

.PD_layout[data-pd-h4="1"] .PD h4 b,
.PD_layout[data-pd-h4="1"] .PD h4 span {
  display: inline;
  font-weight: inherit;
}

.PD_layout[data-pd-h4="2"] .PD h4 {
  display: block;
  overflow: hidden;
}

.PD_layout[data-pd-h4="2"] .PD h4 {
  display: block; /*display: -webkit-box;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
}

.PD_layout[data-pd-h4="2"] .PD h4 b,
.PD_layout[data-pd-h4="2"] .PD h4 span {
  display: block;
  font-weight: inherit;
}

.PD_layout[data-pd-h4="3"] .PD h4 span {
  display: block;
  max-height: 3em;
  height: 3em;
  overflow: hidden;
}

.PD_layout[data-pd-h4="3"] .PD h4 span {
  display: inline-block; /*display: -webkit-box;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-h4="2"] .PD h4 {
    display: block;
    overflow: hidden;
  }
  .PD_layout[data-pd-h4="2"] .PD h4 {
    display: inline-block; /*display: -webkit-box;*/
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
  }
  .PD_layout[data-pd-h4="2"] .PD h4 b,
  .PD_layout[data-pd-h4="2"] .PD h4 span {
    display: inline;
    font-weight: inherit;
  }
}
/*p價錢*/
/* --------------------------------------
 *【元件】按鈕
 * -------------------------------------- */
/*顯示*/
.PD_layout[data-pd-btn-pdgo] .PD .PD_btn,
.PD_layout[data-pd-btn-more] .more {
  display: block;
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD_slide,
.PD_layout[data-pd-btn][data-pd-btn-more] .PD_slide {
  padding-bottom: 3em;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD_slide,
  .PD_layout[data-pd-btn][data-pd-btn-more] .PD_slide {
    padding-bottom: 2.75em;
  }
}
/*樣式:  無=矩型*/
.PD_layout[data-pd-btn] .PD_btn {
  width: calc(100% - 0.5em);
  overflow: hidden;
}

.PD_layout[data-pd-btn] .PD_btn span,
.PD_layout[data-pd-btn] .PD_btn.more span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  padding-right: 0.25em;
  height: auto;
  overflow: hidden;
  -webkit-transform: skewX(-7.5deg);
  transform: skewX(-7.5deg);
}

.PD_layout[data-pd-btn] .PD_btn b {
  z-index: 1;
  position: relative;
  display: block;
  padding: 0 0 0 0.125em;
  height: 2em;
  line-height: 2em;
  overflow: hidden;
  font-weight: 800;
  font-size: 1.125em;
  color: #fff;
  vertical-align: middle;
}

.PD_layout[data-pd-btn] .PD_btn i {
  position: relative;
  top: 0.825em;
  display: block;
  border-top: 0.125em solid #000000;
  border-right: 0.125em solid #000000;
  width: 0.625em;
  height: 0.625em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.PD_layout[data-pd-btn] .PD_btn {
  background-color: #FF005D;
  background-image: repeating-linear-gradient(45deg, #FF004B -2%, #FF005D 120%);
  background-position: right top;
  background-size: 100% 100%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.PD_layout[data-pd-btn] .PD_slide:hover .PD_btn {
  background-size: 500% 100%;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn] .PD_btn b {
    height: 2.25em;
    line-height: 2.25em;
    font-size: 0.875em;
  }
  .PD_layout[data-pd-btn] .PD_btn i {
    top: 0.75em;
    border-top: 0.125em solid #000000;
    border-right: 0.125em solid #000000;
    width: 0.5em;
    height: 0.5em;
  }
}
/*搶購*/
.PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn {
  position: absolute;
  bottom: 0.25em;
  bottom: -2.25em\0 ;
  right: 0.25em;
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn b::before {
  content: "";
  position: relative;
  top: 0.075em;
  display: inline-block;
  margin-right: 0.2em;
  width: 1em;
  height: 1em;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn b::before {
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cg%3E%3Cpath%20style%3D%22fill%3A%23ffffff%3B%22%20d%3D%22M10.97%2C19.91L10.97%2C19.91c-1.01-0.02-1.83%2C0.79-1.83%2C1.8c-0.01%2C1.01%2C0.8%2C1.83%2C1.8%2C1.84%20c1%2C0.01%2C1.82-0.8%2C1.83-1.81c0-0.01%2C0-0.01%2C0-0.02C12.77%2C20.73%2C11.96%2C19.92%2C10.97%2C19.91z%20M23.34%2C6.79%20c-0.15-0.21-0.4-0.34-0.67-0.33H7.5C7.13%2C4.99%2C6.85%2C3.85%2C6.77%2C3.47C6.38%2C1.83%2C5.6%2C1%2C4.45%2C1H0.83C0.37%2C1%2C0%2C1.38%2C0%2C1.83%20c0%2C0.46%2C0.36%2C0.83%2C0.82%2C0.84c0%2C0%2C0.01%2C0%2C0.02%2C0h3.62c0.1%2C0%2C0.43%2C0%2C0.7%2C1.17c0.33%2C1.47%2C3.46%2C13.74%2C3.6%2C14.27%20c0.09%2C0.37%2C0.42%2C0.63%2C0.8%2C0.63h9.74c0.36%2C0%2C0.69-0.24%2C0.78-0.59l3.39-10.6C23.54%2C7.29%2C23.5%2C7.01%2C23.34%2C6.79z%20M17.31%2C19.91%20L17.31%2C19.91c-1-0.02-1.82%2C0.79-1.83%2C1.8c-0.01%2C1.01%2C0.8%2C1.83%2C1.8%2C1.84c1%2C0.01%2C1.82-0.8%2C1.83-1.81c0-0.01%2C0-0.01%2C0-0.02%20C19.11%2C20.73%2C18.31%2C19.91%2C17.31%2C19.91z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn b::after {
  content: "立即搶購";
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.25em;
    bottom: -2.25em\0 ;
  }
}
/*看更多*/
.PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more {
  position: absolute;
  bottom: 0.25em;
  left: 0.25em;
}

.PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more b::after {
  content: "看更多";
}

/*搶購+看更多*/
.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn,
.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more {
  width: calc(50% - 0.25em);
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn b::after {
  content: "搶購";
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more {
  background-image: none;
  background-color: #49495c;
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more b {
  color: #9797bf;
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more i {
  border-color: #9797bf;
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover b {
  color: #333;
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover i {
  border-color: #000;
}

/*樣式:  0=白底矩型*/
.PD_layout[data-pd-btn*=box-0] .PD_btn {
  background: #fff;
}

.PD_layout[data-pd-btn*=box-0] .PD_btn b {
  color: #000;
}

.PD_layout[data-pd-btn*=box-0] .PD_btn i {
  border-color: #000;
}

.PD_layout[data-pd-btn*=box-0][data-pd-btn-pdgo] .PD .PD_btn b::before {
  display: none;
}

/*樣式:  1=圓角矩型*/
.PD_layout[data-pd-btn*=box-1] .PD_btn {
  border-radius: 0.375em;
}

.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn {
  border-radius: 0 0.375em 0.375em 0;
}

.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more {
  border-radius: 0.375em 0 0 0.375em;
}

/*樣式:  2=膠囊型*/
.PD_layout[data-pd-btn*=box-2] .PD_btn {
  border-radius: 3em;
}

.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn {
  border-radius: 0 3em 3em 0;
}

.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more {
  border-radius: 3em 0 0 3em;
}

/*樣式:  3=線框*/
.PD_layout[data-pd-btn*=box-3] .PD_btn,
.PD_layout[data-pd-btn*=box-3] .PD_btn.more {
  overflow: visible;
}

.PD_layout[data-pd-btn*=box-3] .PD_btn span,
.PD_layout[data-pd-btn*=box-3] .PD_btn.more span {
  overflow: visible;
  -webkit-transform: none;
  transform: none;
}

.PD_layout[data-pd-btn*=box-3] .PD_btn span::before,
.PD_layout[data-pd-btn*=box-3] .PD_btn.more span::before {
  content: "";
  position: absolute;
  top: -0.35em;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.PD_layout[data-pd-btn*=box-3] .PD_btn b {
  font-size: 1em;
  color: #000;
}

.PD_layout[data-pd-btn*=box-3] .PD_btn i {
  font-size: 0.875em;
  border-color: #000;
}

.PD_layout[data-pd-btn*=box-3] .PD_btn {
  background-color: transparent;
  background-image: none;
}

.PD_layout[data-pd-btn*=box-3] .PD_slide:hover .PD_btn b {
  color: #D62672;
}

.PD_layout[data-pd-btn*=box-3] .PD_slide:hover .PD_btn i {
  border-color: #D62672;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn*=box-3] .PD_slide {
    padding-bottom: 2.25em;
  }
  .PD_layout[data-pd-btn*=box-3] .PD_btn b {
    height: 2.25em;
    line-height: 2.25em;
    font-size: 0.875em;
  }
  .PD_layout[data-pd-btn*=box-3] .PD_btn i {
    top: 0.875em;
  }
}
/*搶購*/
.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo] .PD .PD_btn {
  position: absolute;
  bottom: 0.15em;
  bottom: -2.35em\0 ;
  right: 0.25em;
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo] .PD .PD_btn b::before {
  display: none;
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo] .PD .PD_btn b::after {
  padding-left: 0.5em;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.15em;
  }
}
/*看更多*/
.PD_layout[data-pd-btn*=box-3][data-pd-btn-more] .PD_btn.more {
  position: absolute;
  bottom: 0.15em;
  bottom: -2.35em\0 ;
  left: 0.25em;
}

/*搶購+看更多*/
.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn,
.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more {
  width: calc(50% - 0.25em);
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #ccc;
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn b::after {
  content: "搶購";
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more {
  background-color: transparent;
  background-image: none;
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more b {
  color: #000;
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more i {
  border-color: #000;
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover b {
  color: #D62672;
}

.PD_layout[data-pd-btn*=box-3][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover i {
  border-color: #D62672;
}

/*樣式:  無4=純文字(搶購時段) */
.PD_layout[data-pd-btn*=box-4][data-pd-btn-pdgo] .PD .PD_btn {
  background-color: #000;
  background-image: none;
}

.PD_layout[data-pd-btn*=box-4][data-pd-btn-pdgo] .PD .PD_btn i,
.PD_layout[data-pd-btn*=box-4][data-pd-btn-pdgo] .PD .PD_btn b::before {
  display: none;
}

.PD_layout[data-pd-btn*=box-4][data-pd-btn-pdgo] .PD .PD_btn b::after {
  content: "08:00開搶";
}

/*樣式:  line-1=線框矩型*/
.PD_layout[data-pd-btn*=line-1] .PD_btn {
  background: transparent;
  border: 1px solid #000;
}

.PD_layout[data-pd-btn*=line-1] .PD_btn b {
  color: #000;
}

.PD_layout[data-pd-btn*=line-1] .PD_btn i {
  border-color: #000;
}

.PD_layout[data-pd-btn*=line-1][data-pd-btn-pdgo] .PD .PD_btn b::before {
  display: none;
}

/*樣式:  icon-共用設定 -r=相對定位 -a=絕對定位*/
.PD_layout[data-pd-btn*=icon-] .PD_btn {
  position: relative;
  top: inherit;
  right: inherit;
  bottom: inherit;
  left: inherit;
}

.PD_layout[data-pd-btn*=icon-] .PD_btn {
  border-radius: 5em;
  width: 2.25em;
  height: 2.25em;
}

.PD_layout[data-pd-btn*=icon-] .PD_btn b {
  padding: 0;
  width: 100%;
  height: 100%;
}

.PD_layout[data-pd-btn*=icon-] .PD_btn span {
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

.PD_layout[data-pd-btn*=icon-] .PD_btn i {
  display: none;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn*=icon-] .PD_btn {
    border-radius: 5em;
    width: 2em;
    height: 2em;
  }
}
/*看更多*/
.PD_layout[data-pd-btn*=icon-][data-pd-btn-more] .PD_btn.more {
  display: none;
}

/*定位*/
.PD_layout[data-pd-btn*=-r] .PD_btn {
  position: relative;
}

.PD_layout[data-pd-btn*=-a] .PD_btn {
  position: absolute;
}

.PD_layout[data-pd-btn*=top] .PD_btn {
  top: 0.25em;
}

.PD_layout[data-pd-btn*=right] .PD_btn {
  right: 0.25em;
}

.PD_layout[data-pd-btn*=bottom] .PD_btn {
  bottom: 0.25em;
}

.PD_layout[data-pd-btn*=left] .PD_btn {
  left: 0.25em;
}

.PD_layout[data-pd-btn*=col-center] .PD_btn {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.PD_layout[data-pd-btn*=row-center] .PD_btn {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/*佔位空間*/
.PD_layout[data-pd-btn*=-r][data-pd-btn-pdgo] .PD_slide,
.PD_layout[data-pd-btn*=-r][data-pd-btn-more] .PD_slide {
  padding-bottom: 2.5em;
}

.PD_layout[data-pd-btn*=-a][data-pd-btn-pdgo] .PD_slide,
.PD_layout[data-pd-btn*=-a][data-pd-btn-more] .PD_slide {
  padding-bottom: 0;
}

/*樣式:  icon-2=三角icon*/
.PD_layout[data-pd-btn*=icon-2] .PD_btn {
  border-radius: 0;
  width: 2.75em;
  height: 2.75em;
  background-color: transparent;
  background-image: none;
}

.PD_layout[data-pd-btn*=icon-2] .PD_btn b {
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-size: 1em;
  line-height: 1.4em;
}

.PD_layout[data-pd-btn*=icon-2] .PD_btn span {
  width: 100%;
  height: 100%;
  text-align: right;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

.PD_layout[data-pd-btn*=icon-2] .PD_btn i {
  display: none;
}

/*搶購*/
.PD_layout[data-pd-btn*=icon-1][data-pd-btn-pdgo] .PD .PD_btn b::before {
  content: "";
  position: relative;
  top: 0;
  display: block;
  padding-right: 0;
  width: 100%;
  height: 100%;
  background-size: auto 60%;
  background-repeat: no-repeat;
  background-position: 45% 50%;
}

.PD_layout[data-pd-btn*=icon-1][data-pd-btn-pdgo] .PD .PD_btn b::after {
  content: "";
}

/*樣式:  icon-2=三角icon*/
.PD_layout[data-pd-btn*=icon-2] .PD_btn {
  border-radius: 0;
  width: 2.75em;
  height: 2.75em;
  background-color: transparent;
  background-image: none;
}

.PD_layout[data-pd-btn*=icon-2] .PD_btn b {
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-size: 1em;
  line-height: 1.4em;
}

.PD_layout[data-pd-btn*=icon-2] .PD_btn span {
  width: 100%;
  height: 100%;
  text-align: right;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

.PD_layout[data-pd-btn*=icon-2] .PD_btn i {
  display: none;
}

/*三角形*/
.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=bottom][data-pd-btn*=right] .PD .PD_btn b::before {
  -webkit-transform: rotate(45deg) translateX(2em) scale(1.414);
          transform: rotate(45deg) translateX(2em) scale(1.414);
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=bottom][data-pd-btn*=left] .PD .PD_btn b::before {
  -webkit-transform: rotate(135deg) translateX(2em) scale(1.414);
          transform: rotate(135deg) translateX(2em) scale(1.414);
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=top][data-pd-btn*=right] .PD .PD_btn b::before {
  -webkit-transform: rotate(-45deg) translateX(2em) scale(1.414);
          transform: rotate(-45deg) translateX(2em) scale(1.414);
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=top][data-pd-btn*=left] .PD .PD_btn b::before {
  -webkit-transform: rotate(-135deg) translateX(2em) scale(1.414);
          transform: rotate(-135deg) translateX(2em) scale(1.414);
}

/*定位*/
.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=top] .PD_btn.PD_btn {
  top: 0;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=right] .PD_btn.PD_btn {
  right: 0;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=bottom] .PD_btn.PD_btn {
  bottom: 0;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn*=left] .PD_btn.PD_btn {
  left: 0;
}

/*搶購*/
.PD_layout[data-pd-btn*=icon-2][data-pd-btn-pdgo] .PD .PD_btn b::before {
  content: "";
  background-image: none;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn-pdgo] .PD .PD_btn b::before {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn-pdgo] .PD .PD_btn b::after {
  content: "GO";
  z-index: 1;
  position: absolute;
  font-family: "Century Gothic", "Helvetica Neue", "Microsoft JhengHei", "Microsoft YaHei", Helvetica, Arial;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn-pdgo][data-pd-btn*=top] .PD .PD_btn b::after {
  top: 0;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn-pdgo][data-pd-btn*=bottom] .PD .PD_btn b::after {
  bottom: 0;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn-pdgo][data-pd-btn*=right] .PD .PD_btn b::after {
  right: 0.1em;
}

.PD_layout[data-pd-btn*=icon-2][data-pd-btn-pdgo][data-pd-btn*=left] .PD .PD_btn b::after {
  left: 0.1em;
}

/*樣式:  icon-3=GOicon*/
.PD_layout[data-pd-btn*=icon-3] .PD_btn {
  background-color: rgba(0, 0, 0, 0.28);
  background-image: none;
}

.PD_layout[data-pd-btn*=icon-3] .PD_btn b {
  padding: 0;
  font-size: 1em;
}

.PD_layout[data-pd-btn*=icon-3] .PD_btn span {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

.PD_layout[data-pd-btn*=icon-3] .PD_btn i {
  display: block;
  top: -0.4em;
  border-top: none;
  border-bottom: 0.0625em solid #fff;
  border-right: 0.0625em solid #fff;
  width: 0.5em;
  height: 0.5em;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn*=icon-3] .PD_btn b {
    font-size: 0.75em;
  }
  .PD_layout[data-pd-btn*=icon-3] .PD_btn b {
    font-size: 0.75em;
  }
}
/*搶購*/
.PD_layout[data-pd-btn*=icon-3][data-pd-btn-pdgo] .PD .PD_btn b::before {
  display: none;
}

.PD_layout[data-pd-btn*=icon-3][data-pd-btn-pdgo] .PD .PD_btn b::after {
  content: "GO";
}

/*看更多*/
.PD_layout[data-pd-btn*=icon-3][data-pd-btn-more] .PD_btn.more {
  display: none;
}

/*樣式:  icon-4=搶購icon*/
.PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] .PD_slide {
  padding-bottom: 1.5em;
}

.PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] .PD .PD_btn {
  position: absolute;
  bottom: 0.5em;
  bottom: -2.25em\0 ;
  right: 0.5em;
}

.PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] h3 {
  margin-bottom: 0.5em;
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn*=icon-4][data-pd-direction=phone-row] .PD_img {
    width: 35%;
  }
  .PD_layout[data-pd-btn*=icon-4][data-pd-direction=phone-row] .PD_into {
    width: 65%;
    text-align: left;
  }
  .PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] .PD_slide {
    padding-bottom: 0em;
  }
  .PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] h4 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    max-height: 2.8em;
  }
  .PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] h3 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin: 0;
  }
  .PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] p {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.5em;
    bottom: -2.25em\0 ;
  }
}
.PD_layout[data-pd-btn*=icon-4] .PD_btn {
  border-radius: 5em;
  width: 2.5em;
  height: 2.5em;
}

.PD_layout[data-pd-btn*=icon-4] .PD_btn {
  background-color: #de3a58;
  background-image: none;
}

.PD_layout[data-pd-btn*=icon-4] .PD_btn b {
  padding: 0;
  font-size: 1em;
  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;
}

.PD_layout[data-pd-btn*=icon-4] .PD_btn span {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transform: skewX(0deg);
  transform: skewX(0deg);
}

.PD_layout[data-pd-btn*=icon-4] .PD_btn i {
  display: none; /*top: -0.4em; border-top: none; border-bottom: 0.0625em solid #fff; border-right: 0.0625em solid #fff; width: 0.5em; height: 0.5em;*/
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn*=icon-4] .PD_btn b {
    font-size: 0.85em;
  }
}
/*搶購*/
.PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] .PD .PD_btn b::before {
  display: none;
}

.PD_layout[data-pd-btn*=icon-4][data-pd-btn-pdgo] .PD .PD_btn b::after {
  content: "搶購";
}

/*看更多*/
.PD_layout[data-pd-btn*=icon-4][data-pd-btn-more] .PD_btn.more {
  display: none;
}

/* --------------------------------------
 *【元件】(特殊放最後)文案區內的搶購按鈕
 * -------------------------------------- */
.PD_layout[data-pd-btn] .PD_into .PD_into_PDgo {
  display: none;
  position: relative;
  top: auto;
  bottom: auto;
  right: auto;
  left: auto;
}

.PD_layout[data-pd-btn] .PD_into .PD_into_PDgo b {
  padding-left: 0.5em;
}

.PD_layout[data-pd-btn] .PD_into .PD_into_PDgo b::after {
  content: "立即搶購";
}

@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn] .PD .PD_into_PDgo {
    bottom: 0.25em;
  }
}
/*橫式*/
.PD_layout[data-pd-btn][data-pd-btn-intopdgo][data-pd-direction=row] .PD,
.PD_layout[data-pd-btn][data-pd-btn-intopdgo][data-pd-direction=row-reverse] .PD {
  margin-bottom: 0;
}

/*顯示*/
.PD_layout[data-pd-btn][data-pd-btn-intopdgo] .PD_into .PD_into_PDgo {
  display: block;
}

/*樣式:  無4=純文字(搶購時段) */
.PD_layout[data-pd-btn*=box-4][data-pd-btn-intopdgo] .PD .PD_btn {
  background-color: #000;
  background-image: none;
}

.PD_layout[data-pd-btn*=box-4][data-pd-btn-intopdgo] .PD .PD_btn i,
.PD_layout[data-pd-btn*=box-4][data-pd-btn-intopdgo] .PD .PD_btn b::before {
  display: none;
}

.PD_layout[data-pd-btn*=box-4][data-pd-btn-intopdgo] .PD .PD_btn b::after {
  content: "08:00開搶";
}

/* --------------------------------------
 *【機制】時間高亮
 * -------------------------------------- */
.PD_layout.PD_layout-highlightDate .PD_slide {
  pointer-events: none;
  -webkit-filter: brightness(0.5);
          filter: brightness(0.5);
}

.PD_layout.PD_layout-highlightDate .PD_slide.cate-hover {
  pointer-events: initial;
  -webkit-filter: brightness(1);
          filter: brightness(1);
}

.PD_layout.PD_layout-highlightDate .PD_slide .setDate {
  display: none;
}

/*文字調整*/
.PD_layout .PD_img {
  padding: 0.5em;
}

.PD_layout .PD_into {
  padding: 0.3125em;
  padding-bottom: 0.5em;
}

.PD_layout .PD h3 {
  font-size: 15px;
  font-weight: 800;
}

.PD_layout[data-pd-h3="5"] .PD h3 span {
  word-break: keep-all;
  text-overflow: ellipsis;
}

.PD_layout[data-pd-h3="5"] .PD h3 {
  margin-bottom: 0.25em;
}

.PD_layout .PD h4 {
  margin-bottom: 0.35em;
  font-size: 15px;
}

.PD_layout .PD p b,
.PD_layout .PD p del {
  font-size: 14px;
}

.PD_layout .PD p .money {
  font-size: 16px;
}

.PD_layout .PD p .Price {
  font-size: 28px;
  font-weight: 800;
}

.PD_layout .PD p small {
  font-size: 12px;
  font-weight: 800;
}

@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="3"] ul,
  .PD_layout[data-pd-col-pc="4"] ul,
  .PD_layout[data-pd-col-pc="5"] ul {
    padding: 20px;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="3"] ul {
    padding: 0.2em 0;
  }
  .PD_layout[data-pd-col-phone="3"] .PD h3,
  .PD_layout[data-pd-col-phone="3"] .PD h4 {
    font-size: 14px;
  }
  .PD_layout[data-pd-col-phone="3"] .PD .Price {
    font-size: 22px;
  }
  .PD_layout[data-pd-col-phone="3"] .PD p b,
  .PD_layout[data-pd-col-phone="3"] .PD p del,
  .PD_layout[data-pd-col-phone="3"] .PD p .money {
    font-size: 11px;
  }
  .PD_layout[data-pd-col-phone="3"] .PD_into {
    padding-left: 0;
    padding-right: 0;
  }
  .PD_layout[data-pd-col-phone="3"] .PD p b {
    display: none;
  }
}
/*BN公版調整*/
.PD_layout[data-pd-li=BN] ul,
.PD_layout[data-pd-li=BN-AWD] ul,
.PD_layout[data-pd-li=PDBN] ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  background-color: transparent;
}

.PD_layout[data-pd-li=BN] li,
.PD_layout[data-pd-li=BN-AWD] li,
.PD_layout[data-pd-li=PDBN] li {
  border: none;
}

@media screen and (min-width: 768px) {
  .PD_layout[data-pd-li=BN] ul,
  .PD_layout[data-pd-li=BN-AWD] ul,
  .PD_layout[data-pd-li=PDBN] ul {
    padding: 0 35px;
    grid-gap: 10px;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-li=BN] ul,
  .PD_layout[data-pd-li=BN-AWD] ul,
  .PD_layout[data-pd-li=PDBN] ul {
    padding: 0 0.5em;
    grid-gap: 0.2em;
  }
}
/*移除公版設定*/
.PD_layout[data-pd-style=off] ul {
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  width: 100%;
}

.PD_layout[data-pd-style=off] ul li {
  border: none;
}

/*圓角*/
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_img img {
    border-radius: 0.5em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_img img {
    border-radius: 1em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_img img {
    border-radius: 1.5em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_img img {
    border-radius: 2em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_img img {
    border-radius: 20em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="1"] .PD_img img {
    border-radius: 0.25em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="2"] .PD_img img {
    border-radius: 0.5em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="3"] .PD_img img {
    border-radius: 0.75em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="4"] .PD_img img {
    border-radius: 1em;
  }
  .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_slide,
  .PD_layout[data-pd-style=off][data-pd-br="50%"] .PD_img img {
    border-radius: 20em;
  }
}
/*輪播移除公版設定*/
.swiper_remove_box_style ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  background-color: transparent;
  grid-gap: 0;
}

.swiper_remove_box_style ul li {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0;
  padding: 0;
  min-width: auto;
  background-color: #fff;
  border: none;
}

.swiper_remove_box_style ul li,
.swiper_remove_box_style ul li .PD_img img {
  border-radius: 10px;
}

/* --------------------------------------
 *【版型】特殊
 * -------------------------------------- */
/*PD_layout-add2cart*/
.PD_layout-add2cart[data-pd-btn][data-pd-btn-more] .PD_btn.more b::after {
  content: "加入購物車";
}

/*PD_layout-PD_layout-coupon*/
.PD_layout-coupon[data-pd-btn][data-pd-btn-more] .PD_btn.more b::after {
  content: "領折價券";
}

/*領折價券(BN翻牌)*/
.PD_layout-BNcoupon .more {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.PD_layout-BNcoupon .more a {
  width: 100%;
  height: 100%;
}

.PD_layout-BNcoupon .PD_img::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: 100%;
}

.PD_layout-BNcoupon .PD_img::after {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: center 85%;
  transform-origin: center 85%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.PD_layout-BNcoupon .cate-hover .PD_img::after {
  background-image: url(Area_coupon_on.png?t=1750139048537);
}

.PD_layout-BNcoupon .cate-hover .PD_img::after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.PD_layout-BNcoupon .cate-hover .more {
  display: none;
}

.PD_layout-BNcoupon2 .more {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.PD_layout-BNcoupon2 .more a {
  width: 100%;
  height: 100%;
}

.PD_layout-BNcoupon2 a::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: 100%;
}

.PD_layout-BNcoupon2 a::after {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: center 85%;
  transform-origin: center 85%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.PD_layout-BNcoupon2 .cate-hover a::after {
  background-image: url(Area_coupon_on2.png?t=1750139048537);
}

.PD_layout-BNcoupon2 .cate-hover a::after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.PD_layout-BNcoupon2 .cate-hover .more {
  display: none;
}

.PD_layout-BNcoupon2.PD_layout ul {
  background: none;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc="4"] .PD h4 {
  font-size: 1.5em;
  color: #484848;
  margin-top: 0.75em;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc="5"] .PD h4 {
  font-size: 1.25em;
  color: #484848;
  margin-top: 0.75em;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc*="4 wide"] .PD h4 {
  font-size: 1.5em;
  color: #484848;
  margin-top: 0.75em;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc*="5 wide"] .PD h4 {
  font-size: 1.25em;
  color: #484848;
  margin-top: 0.75em;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc="4"] .PD .PD_logo {
  height: 25%;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc="5"] .PD .PD_logo {
  height: 20%;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc*="4 wide"] .PD .PD_logo {
  height: 25%;
}

.PD_layout.PD_layout-BNcoupon2[data-pd-col-pc*="5 wide"] .PD .PD_logo {
  height: 20%;
}

@media screen and (max-width: 767px) {
  .PD_layout.PD_layout-BNcoupon2[data-pd-col-pc="4"] .PD h4,
  .PD_layout.PD_layout-BNcoupon2[data-pd-col-pc="5"] .PD h4,
  .PD_layout.PD_layout-BNcoupon2[data-pd-col-pc*="4 wide"] .PD h4,
  .PD_layout.PD_layout-BNcoupon2[data-pd-col-pc*="5 wide"] .PD h4 {
    font-size: 4vw;
  }
}
/* --------------------------------------
  * BN+公版  PD_layout-PDBN_01
  * -------------------------------------- */
.PD_layout-PDBN_01 {
  text-align: left;
}

.PD_layout-PDBN_01 .PD h3,
.PD_layout-PDBN_01 .PD h4,
.PD_layout-PDBN_01 .PD p {
  position: absolute;
  width: 100%;
}

.PD_layout-PDBN_01 a,
.PD_layout-PDBN_01 .PD:hover h4 {
  color: #fff;
}

.PD_layout-PDBN_01 .PD h3 {
  color: #ffe29c;
}

.PD_layout-PDBN_01 .PD p del {
  color: #949494;
}

.PD_layout-PDBN_01 .PD p .money,
.PD_layout-PDBN_01 .PD p .Price,
.PD_layout-PDBN_01 .PD p b,
.PD_layout-PDBN_01 .PD p small {
  color: #fff;
  background: -webkit-linear-gradient(90deg, #DFC08F 20%, #fff 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (min-width: 768px) {
  .PD_layout-PDBN_01 .PD h3,
  .PD_layout-PDBN_01 .PD h4,
  .PD_layout-PDBN_01 .PD p {
    padding: 0 50px;
  }
  .PD_layout-PDBN_01 .PD h3 {
    top: 36px;
    font-size: 32px;
  }
  .PD_layout-PDBN_01 .PD h4 {
    top: 86px;
    font-size: 24px;
  }
  .PD_layout-PDBN_01 .PD p {
    top: 120px;
    font-size: 24px;
  }
  .PD_layout-PDBN_01 .PD p del {
    font-size: 18px;
  }
  .PD_layout-PDBN_01 .PD p .Price {
    font-size: 46px;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-PDBN_01 .PD h3,
  .PD_layout-PDBN_01 .PD h4,
  .PD_layout-PDBN_01 .PD p {
    padding: 0 8%;
  }
  .PD_layout-PDBN_01 .PD h3 {
    top: 6.5vw;
    font-size: 5.2vw;
  }
  .PD_layout-PDBN_01 .PD h4 {
    top: 14.5vw;
    font-size: 4vw;
  }
  .PD_layout-PDBN_01 .PD p {
    top: 21vw;
    font-size: 4.2vw;
  }
  .PD_layout-PDBN_01 .PD p del {
    font-size: 3.4vw;
  }
  .PD_layout-PDBN_01 .PD p .Price {
    font-size: 7.8vw;
  }
}
/* --------------------------------------
  * PD_layout-BNcoupon2 領折價券(BN翻牌)_文案入稿
  * -------------------------------------- */
.PD_layout.PD_layout-BNcoupon2 li.PD_slide {
  background-color: transparent;
  font-family: "Century Gothic", "微軟正黑體", "Microsoft JhengHei", Helvetica;
}
.PD_layout.PD_layout-BNcoupon2 li.PD_slide::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 146%;
  background-image: url(PD_layout-BNcoupon2.png?t=1750139048537);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}
.PD_layout.PD_layout-BNcoupon2 .PD_slide:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.PD_layout.PD_layout-BNcoupon2 .PD {
  position: absolute;
  top: 0%;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
.PD_layout.PD_layout-BNcoupon2 .PD a {
  width: 100%;
  height: 100%;
  padding-top: 10%;
}
.PD_layout.PD_layout-BNcoupon2 .PD h4 {
  color: #484848;
  margin-top: 0.75em;
}
.PD_layout.PD_layout-BNcoupon2 .PD:hover h4 {
  color: #484848;
}
.PD_layout.PD_layout-BNcoupon2 .PD h4 b {
  display: inline;
}
.PD_layout.PD_layout-BNcoupon2 .PD h4 b.js-PD_txt1 {
  font-size: 1.1em;
}
.PD_layout.PD_layout-BNcoupon2 .PD h4 span.js-PD_txt2 {
  font-size: 1em;
  letter-spacing: -0.05em;
}
.PD_layout.PD_layout-BNcoupon2 .PD h4 b.Discount {
  font-size: 2.7em;
  letter-spacing: -0.02em;
  line-height: 1.25em;
}
.PD_layout.PD_layout-BNcoupon2 .PD h4 small.Dis_unit {
  font-size: 1.1em;
  letter-spacing: -0.01em;
  line-height: 1.25em;
}
.PD_layout.PD_layout-BNcoupon2 .PD .PD_logo img {
  -webkit-box-shadow: none;
          box-shadow: none;
}
@media screen and (min-width: 768px) {
  .PD_layout.PD_layout-BNcoupon2 .PD .PD_img {
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout.PD_layout-BNcoupon2 ul {
    grid-gap: 0.5em;
    padding: 0 1em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 {
    font-size: 1.25em;
    color: #484848;
    margin-top: 0.75em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 b.js-PD_txt1 {
    font-size: 1em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 b.Discount {
    font-size: 2.9em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD .PD_img {
    padding-top: 9vw;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD .PD_logo {
    height: 2.5em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD .PD_logo img {
    width: 85%;
    height: auto;
  }
}

/* --------------------------------------
  *【版型】一課
  * -------------------------------------- */
/* --------------------------------------
  * PD_layout-D1_01品牌
  * -------------------------------------- */
.PD_layout-D1_01 .PD_slide {
  background-color: #d5b08b;
}

.PD_layout-D1_01[data-pd-pdlogo="4"] .PD .PD_logo {
  margin-bottom: 0.25em;
}

.PD_layout-D1_01 .PD h4 {
  color: #260e02;
  font-weight: 900;
}

.PD_layout-D1_01 .PD h4 b {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_01 .PD_into {
    padding-bottom: 1em;
  }
  .PD_layout-D1_01 .PD h4 {
    font-size: 1.25em;
  }
  .PD_layout-D1_01 .PD h4 b {
    font-size: 1em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_01 .PD_into {
    padding-bottom: 0.5em;
  }
}
/* --------------------------------------
 *【版型】二課
 * -------------------------------------- */
/* --------------------------------------
 * 公版+CSS共用底圖PD_layout-CSSBG_01
 * -------------------------------------- */
.PD_layout-CSSBG_01 li {
  background-color: transparent;
}
.PD_layout-CSSBG_01 li::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 181%;
  background-image: url(PD_layout-CSSBG_01.png?t=1750139048537);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
}
.PD_layout-CSSBG_01 .PD_slide:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.PD_layout-CSSBG_01 .PD {
  position: absolute;
  top: 0%;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
.PD_layout-CSSBG_01 .PD a {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .PD_layout-CSSBG_01 .PD .PD_img {
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-CSSBG_01 .PD .PD_img {
    padding-top: 9vw;
  }
}

/*共用--輪播基本設定*/
.Area_swiper {
  position: relative;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.Area_swiper_box {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
  padding-bottom: 25px;
}

.Area_swiper_box .PD_layout {
  position: static;
}

.Area_swiper_box .PD_layout ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  background-color: transparent;
  grid-gap: 0;
}

.Area_swiper_box .PD_layout li {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0;
  padding: 0;
  min-width: auto;
  background-color: #fff;
  border: none;
}

.Area_swiper_box .PD_layout li,
.Area_swiper_box .PD_layout li .PD_img img {
  border-radius: 10px;
}

.Area_swiper_box .swiper-pagination {
  bottom: 0 !important;
}

.Area_swiper_box .swiper-pagination-white .swiper-pagination-bullet {
  background: #fff;
}

@media screen and (min-width: 768px) {
  .Area_swiper_box {
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 767px) {
  .Area_swiper_box {
    padding-bottom: 5vw;
  }
  .Area_swiper_box .PD_layout .PD p .Price {
    font-size: 24px;
  }
  .Area_swiper_box .PD_layout .PD p b,
  .Area_swiper_box .PD_layout .PD p del,
  .Area_swiper_box .PD_layout .PD p .money {
    font-size: 14px;
  }
}
/*看更多按鈕*/
.PD_layout-btn ul {
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  grid-gap: 0;
  width: 100%;
}

.PD_layout-btn li {
  border: none;
  text-align: center;
}

.PD_layout-btn li .PD a {
  display: inline-block;
}

.PD_layout-btn li .PD .PD_img,
.PD_layout-btn li .PD h4,
.PD_layout-btn li .PD p {
  display: none;
}

.PD_layout-btn li .PD .PD_into {
  padding: 0;
}

.PD_layout-btn li .PD h3 {
  margin: 0;
  padding: 0.4em 1.6em;
  font-size: 20px;
  line-height: 1em;
  color: #fff;
  background: #000;
  border-radius: 99em;
}

.PD_layout-btn.PD_layout-btn-white li .PD h3 {
  color: #000;
  background: #fff;
} /*按鈕變白色*/
@media screen and (min-width: 768px) {
  .PD_layout-btn {
    padding: 10px 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-btn {
    padding: 2vw 0 4vw;
  }
}
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="2"] .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="3"] .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="4"] .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"] .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide {
  display: none;
}
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="2"].active .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="3"].active .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="4"].active .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"].active .PD_slide,
.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"].active .PD_slide {
  display: list-item;
}

.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="2"] .PD_slide:nth-child(1), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="2"] .PD_slide:nth-child(2) {
  display: list-item;
}

.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="3"] .PD_slide:nth-child(1), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="3"] .PD_slide:nth-child(2), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="3"] .PD_slide:nth-child(3) {
  display: list-item;
}

.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="4"] .PD_slide:nth-child(1), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="4"] .PD_slide:nth-child(2), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="4"] .PD_slide:nth-child(3), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="4"] .PD_slide:nth-child(4) {
  display: list-item;
}

.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"] .PD_slide:nth-child(1), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"] .PD_slide:nth-child(2), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"] .PD_slide:nth-child(3), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"] .PD_slide:nth-child(4), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"] .PD_slide:nth-child(6), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="6"] .PD_slide:nth-child(8) {
  display: list-item;
}

.PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(1), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(2), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(3), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(4), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(5), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(6), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(7), .PD_layout[data-pd-btn-more-bottom="2"][data-pd-toggle-show="8"] .PD_slide:nth-child(8) {
  display: list-item;
}

.PD_layout-btn.active {
  display: none;
}

/* --------------------------------------
 * *側滑公版
 * -------------------------------------- */
.Area_slide {
  margin: 0 auto;
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: auto hidden;
}

.Area_slide .box {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: auto;
  position: relative;
}

.Area_slide .box_ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  position: relative;
  white-space: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.Area_slide .box_bn {
  position: relative;
  z-index: 0;
  height: auto;
}

.Area_slide .box_pd {
  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;
  overflow: hidden;
  z-index: 1;
}

.Area_slide .PD_layout li:hover {
  -webkit-transform: none;
          transform: none;
}

.Area_slide .PD_layout_pd ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 0;
  margin: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  background-color: transparent;
}

.Area_slide .PD_layout_pd li {
  min-width: initial;
  float: left;
  background-color: #fff;
  border-bottom: solid 1px #d1d1d1 !important;
  border-left: solid 1px #d1d1d1 !important;
  border-right: none !important;
  border-top: none;
}

.Area_slide .PD_layout_bn {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.Area_slide .PD_layout_bn ul {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.Area_slide .PD_layout_pd .PD p b {
  display: none;
}

@media screen and (min-width: 768px) {
  .Area_slide {
    width: 960px;
    border-radius: 15px;
  }
  .Area_slide .box_bn {
    width: 274px;
  }
  .Area_slide .box_pd {
    margin-left: -20px;
    border-radius: 15px;
  }
  .Area_slide .PD_layout_pd li {
    width: 250px;
  }
}
@media screen and (max-width: 767px) {
  .Area_slide {
    width: 96vw;
    border-radius: 10px;
  }
  .Area_slide .box_bn {
    width: 45vw;
  }
  .Area_slide .box_pd {
    margin-left: -4vw;
    border-radius: 10px;
  }
  .Area_slide .PD_layout_pd li {
    width: 33vw;
    height: 57vw;
  }
}
/* --------------------------------------
 * PD_layout-D1_02九宮格
 * -------------------------------------- */
.PD_layout-D1_02[data-pd-h3="2"] .PD h3 {
  padding: 0;
}

.PD_layout-D1_02 .PD h4 b {
  display: none;
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_02 .PD h4 {
    font-weight: 900;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_02[data-pd-h3="2"] .PD h3 {
    margin-bottom: 0em;
  }
  /*.PD_layout-D1_02 .PD h4 { font-size: 1em;}*/
  .PD_layout-D1_02 .PD h4 span {
    max-height: none;
    line-height: 2em;
  }
}
/* --------------------------------------
 * (8)橫/D1_02B(排行榜)
 * -------------------------------------- */
.PD_layout-D1_02B .PD_slide {
  background-color: #fff;
}

.PD_layout-D1_02B .PD h3 {
  font-size: 1em;
  margin-top: 1em;
}

.PD_layout-D1_02B .PD h4 {
  font-size: 0.9375em;
  font-weight: 900;
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_02B[data-pd-style=off] ul {
    padding: 0 20px;
    grid-gap: 10px;
  }
  .PD_layout-D1_02B[data-pd-style=off] .PD_into {
    padding: 0.5em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_02B[data-pd-style=off] ul {
    padding: 0 0.5em;
    grid-gap: 0.2em;
  }
}
/* --------------------------------------
 * (1)直/一般品(1排5品)
 * -------------------------------------- */
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD_slide, .PD_layout[data-pd-btn][data-pd-btn-more] .PD_slide {
    padding-bottom: 3em;
  }
  .PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more {
    bottom: 0.7em;
    left: 0.35em;
  }
  .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.7em;
    right: 0.35em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD_slide, .PD_layout[data-pd-btn][data-pd-btn-more] .PD_slide {
    padding-bottom: 2.75em;
  }
  .PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more {
    bottom: 0.575em;
    left: 0.275em;
  }
  .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.575em;
    right: 0.275em;
  }
}
/* --------------------------------------
 * (6)直/D1_01(品牌)
 * -------------------------------------- */
.PD_layout-D1_01 .PD_img img {
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_01 {
    font-size: 1.25em;
  }
  .PD_layout-D1_01[data-pd-style=off] ul {
    padding: 0 20px;
    grid-gap: 10px;
  }
  .PD_layout-D1_01 .PD h3, .PD_layout-D1_01 .PD h4 {
    font-size: 1.25em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo {
    margin-bottom: 0.35em;
    height: 3.4em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo img {
    border-radius: 0.625em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"]:not([data-pd-direction*=row]) .PD .PD_logo, .PD_layout-D1_01 .PD_layout[data-pd-pdlogo="4"][data-pd-direction=phone-row] .PD .PD_logo, .PD_layout-D1_01 .PD_layout[data-pd-pdlogo="4"][data-pd-direction=phone-row-reverse] .PD .PD_logo {
    margin-top: -2.2em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"][data-pd-col-pc="2"] .PD .PD_logo {
    margin-bottom: 0.5em;
    height: 4.25em;
  }
  .Area1220 .PD_layout.PD_layout-D1_01[data-pd-pdlogo="4"][data-pd-col-pc="3"] .PD .PD_logo {
    margin-bottom: 0.5em;
    height: 4.25em;
  }
  .Area960 .PD_layout.PD_layout-D1_01[data-pd-pdlogo="4"][data-pd-col-pc="4"] .PD .PD_logo {
    height: 3em;
  }
  .Area960 .PD_layout.PD_layout-D1_01[data-pd-pdlogo="4"][data-pd-col-pc="4"]:not([data-pd-direction*=row]) .PD .PD_logo,
  .Area960 .PD_layout.PD_layout-D1_01[data-pd-pdlogo="4"][data-pd-col-pc="4"][data-pd-direction=phone-row] .PD .PD_logo,
  .Area960 .PD_layout.PD_layout-D1_01[data-pd-pdlogo="4"][data-pd-col-pc="4"][data-pd-direction=phone-row-reverse] .PD .PD_logo {
    margin-top: -2em;
  }
  /*品數*/
  .PD_layout-D1_01[data-pd-col-pc="4"] ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .PD_layout-D1_01[data-pd-col-pc="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .PD_layout-D1_01[data-pd-col-pc="2"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_01[data-pd-style=off] ul {
    grid-gap: 0.25em;
  }
  .PD_layout-D1_01[data-pd-style=off] .PD h3, .PD_layout-D1_01[data-pd-style=off] .PD h4 {
    font-size: 1em;
    margin-bottom: 0;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo {
    margin-bottom: 0.3em;
    height: 2.12em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"] .PD .PD_logo img {
    border-radius: 0.5em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"]:not([data-pd-direction*=row]) .PD .PD_logo, .PD_layout-D1_01 .PD_layout[data-pd-pdlogo="4"][data-pd-direction=phone-row] .PD .PD_logo, .PD_layout-D1_01 .PD_layout[data-pd-pdlogo="4"][data-pd-direction=phone-row-reverse] .PD .PD_logo {
    margin-top: -1.3725em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"][data-pd-col-phone="3"] ul {
    padding: 0 0.4em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"][data-pd-col-phone="2"] ul {
    padding: 0 0.5em;
  }
  .PD_layout-D1_01.PD_layout[data-pd-pdlogo="4"][data-pd-col-phone="2"] .PD .PD_logo {
    height: 3em;
  }
  /*品數*/
  .PD_layout-D1_01[data-pd-col-phone="4"] ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .PD_layout-D1_01[data-pd-col-phone="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .PD_layout-D1_01[data-pd-col-phone="2"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* --------------------------------------
 * PD_layout-D1_03 熱門推薦
 * -------------------------------------- */
.PD_layout-D1_03.PD_layout ul {
  padding: 0 35px;
  grid-gap: 10px;
}

.PD_layout-D1_03 ul::before {
  content: "熱門推薦：";
  font-weight: 900;
  position: relative;
}

.PD_layout-D1_03 .PD_slide {
  border-radius: 10em;
  background-color: #e13550;
}

.PD_layout-D1_03 .PD h3 {
  color: #fff;
}

.PD_layout-D1_03 .PD h3 span::before {
  content: "#";
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_03.PD_layout ul {
    grid-template-columns: repeat(6, 1fr);
  }
  .PD_layout-D1_03 ul::before {
    top: 0.2em;
  }
  .PD_layout-D1_03 .PD_into {
    padding: 0 1em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_03.PD_layout ul {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .PD_layout-D1_03 ul::before {
    top: 0.2em;
  }
  .PD_layout-D1_03 .PD_into {
    padding: 0 0.5em;
  }
}
/* --------------------------------------
 * (9)橫/D1_03(熱門推薦)
 * -------------------------------------- */
@media screen and (min-width: 768px) {
  .PD_layout-D1_03 ul {
    padding: 0 35px;
    grid-gap: 10px;
  }
  .PD_layout-D1_03[data-pd-style=off] .PD_into {
    padding: 0 1em;
  }
  .PD_layout-D1_03 .PD h3 {
    font-size: 1em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_03[data-pd-style=off] ul {
    padding: 0 0.5em;
    grid-gap: 0.2em;
  }
  .PD_layout-D1_03[data-pd-style=off] .PD_into {
    padding: 0 0.5em;
  }
  .PD_layout-D1_03 .PD h3 {
    font-size: 0.875em;
  }
}
/* --------------------------------------
 * 特殊(6) 直/領折價券(BN翻牌)_文案入稿
 * -------------------------------------- */
.PD_layout.PD_layout-BNcoupon2 li.PD_slide {
  font-family: Arial, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
}

.PD_layout.PD_layout-BNcoupon2 .PD h4 span.js-PD_txt2 {
  display: none;
}

@media screen and (min-width: 768px) {
  /*1220-預設-4品設定*/
  .PD_layout-BNcoupon2 .cate-hover a::after {
    -webkit-transform: scaleY(1.03);
            transform: scaleY(1.03);
  }
  .PD_layout.PD_layout-BNcoupon2 li.PD_slide::after {
    padding-bottom: 110%;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD a {
    padding-top: 4%;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD .PD_logo {
    margin-bottom: 0.5em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 {
    line-height: 1.5;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 b.Discount {
    font-size: 3em;
    line-height: 1.05;
  }
  .PD_layout.PD_layout-BNcoupon2[data-pd-col-pc*="4 wide"] .PD .PD_logo {
    height: 27%;
  }
  /*1220-3品設定*/
  .Area1220 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 ul {
    grid-template-columns: repeat(3, auto);
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 40px;
  }
  .Area1220 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD a {
    padding-top: 6%;
  }
  .Area1220 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD .PD_logo {
    margin-bottom: 2.5em;
  }
  .Area1220 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD h4 b.js-PD_txt1 {
    font-size: 2.3em;
  }
  .Area1220 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD h4 b.Discount {
    font-size: 5.5em;
    line-height: 1.25em;
  }
  .Area1220 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD h4 small.Dis_unit {
    font-size: 1.8em;
  }
  .Area1220 .PD_layout[data-pd-col-pc*="5 wide"].PD_layout-BNcoupon2 .PD h4 b.Discount {
    font-size: 2.85em;
  }
  .Area1220 .PD_layout[data-pd-col-pc*="5 wide"].PD_layout-BNcoupon2 .PD .PD_logo {
    height: 22.5%;
  }
  /*960-3品設定*/
  .Area960 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 ul {
    grid-template-columns: repeat(3, auto);
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 40px;
  }
  .Area960 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD a {
    padding-top: 3%;
  }
  .Area960 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD .PD_logo {
    margin-bottom: 1.5em;
  }
  .Area960 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD h4 b.js-PD_txt1 {
    font-size: 2.05em;
  }
  .Area960 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD h4 b.Discount {
    font-size: 5.35em;
  }
  .Area960 .PD_layout[data-pd-col-pc*="3 wide"].PD_layout-BNcoupon2 .PD h4 small.Dis_unit {
    font-size: 1.8em;
  }
  /*960-4品設定*/
  .Area960 .PD_layout-BNcoupon2 .cate-hover a::after {
    -webkit-transform: scaleY(1.03);
            transform: scaleY(1.03);
  }
  .Area960 .PD_layout.PD_layout-BNcoupon2 li.PD_slide::after {
    padding-bottom: 110%;
  }
  .Area960 .PD_layout.PD_layout-BNcoupon2 .PD a {
    padding-top: 2%;
  }
  .Area960 .PD_layout.PD_layout-BNcoupon2 .PD h4 {
    line-height: 1;
  }
  .Area960 .PD_layout.PD_layout-BNcoupon2 .PD h4 b.Discount {
    font-size: 2.4em;
    line-height: 1.1;
  }
  .Area960 .PD_layout.PD_layout-BNcoupon2 .PD h4 b.js-PD_txt1 {
    letter-spacing: -0.05em;
  }
  .Area960 .PD_layout[data-pd-col-pc*="4 wide"].PD_layout-BNcoupon2 .PD .PD_logo {
    height: 23%;
    margin-top: 0.15em;
  }
}
@media screen and (max-width: 767px) {
  /*預設-2品設定*/
  .PD_layout.PD_layout-BNcoupon2 li.PD_slide::after {
    padding-bottom: 110%;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD a {
    padding-top: 3%;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 {
    line-height: 1.05;
    margin-top: 0.95em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 b.Discount {
    line-height: 1.1;
    font-size: 2.75em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 b.js-PD_txt1 {
    font-size: 1.2em;
    letter-spacing: -0.05em;
  }
  .PD_layout.PD_layout-BNcoupon2 .PD h4 small.Dis_unit {
    font-size: 1.05em;
  }
  .PD_layout[data-pd-col-phone="2"].PD_layout-BNcoupon2 .PD .PD_logo {
    width: 90%;
    height: 40%;
    margin-bottom: 0.35em;
  }
  /*3品設定*/
  .PD_layout[data-pd-col-phone="3"].PD_layout-BNcoupon2 .PD a {
    padding-top: 1%;
  }
  .PD_layout[data-pd-col-phone="3"].PD_layout-BNcoupon2 .PD h4 {
    margin-top: 0.3em;
  }
  .PD_layout[data-pd-col-phone="3"].PD_layout-BNcoupon2 .PD h4 b.Discount {
    font-size: 2.25em;
  }
  .PD_layout[data-pd-col-phone="3"].PD_layout-BNcoupon2 .PD h4 b.js-PD_txt1 {
    font-size: 1.1em;
  }
  .PD_layout[data-pd-col-phone="3"].PD_layout-BNcoupon2 .PD .PD_logo {
    width: 90%;
    height: 35%;
    margin-bottom: 0.3em;
  }
}
/* --------------------------------------
 * (新增)直/D1_02(九宮格)
 * -------------------------------------- */
.PD_layout.PD_layout-D1_02 {
  background-color: #cacaca;
}

.PD_layout.PD_layout-D1_02 .PD_into {
  padding-top: 0.25em;
}

.PD_layout.PD_layout-D1_02 .PD h3 {
  background-color: #ff005d;
}

.PD_layout.PD_layout-D1_02 .PD h4 b {
  display: none;
}

.PD_layout.PD_layout-D1_02 .PD h3 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.PD_layout.PD_layout-D1_02 .PD h4 {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

@media screen and (min-width: 768px) {
  /*預設-3品設定*/
  .PD_layout.PD_layout-D1_02 {
    padding: 1.2em 1.2em;
    border-radius: 1.2em;
  }
  .PD_layout.PD_layout-D1_02 .PD h3 {
    margin: 0 1em;
    line-height: 1.8;
    font-size: 1.2em;
  }
  .PD_layout.PD_layout-D1_02 .PD h4 {
    line-height: 0.95;
    font-size: 1.5em;
    margin-bottom: 0.25em;
  }
  .PD_layout.PD_layout-D1_02 .PD_img {
    padding-top: 0.3em;
  }
  /*960-2品設定*/
  .Area960 .PD_layout.PD_layout-D1_02[data-pd-col-pc="2"] {
    padding: 1.5em 1.5em 1.8em;
  }
  /*預設-3品設定*/
  .Area1220 .PD_layout.PD_layout-D1_02 {
    padding: 1.7em 1.7em;
    border-radius: 1.5em;
  }
  .Area1220 .PD_layout.PD_layout-D1_02 .PD h4 {
    line-height: 1.1;
  }
}
@media screen and (max-width: 767px) {
  /*2品設定*/
  .PD_layout.PD_layout-D1_02[data-pd-col-phone="2"] {
    padding: 0.65em 0.75em 0.75em;
  }
  .PD_layout.PD_layout-D1_02[data-pd-col-phone="2"] ul {
    padding: 0.2em;
  }
  .PD_layout.PD_layout-D1_02[data-pd-col-phone="2"] .PD_img {
    padding-top: 0.2em;
  }
  /*預設-3品設定*/
  .PD_layout.PD_layout-D1_02 {
    padding: 0.65em 0.5em 0.75em;
    border-radius: 0.75em;
  }
  .PD_layout.PD_layout-D1_02 ul {
    width: 100%;
  }
  .PD_layout.PD_layout-D1_02 .PD h3 {
    margin: 0 0.25em;
    letter-spacing: -0.05em;
    max-height: 1.85em;
    line-height: 1.85em;
    font-size: 0.875em;
  }
  .PD_layout.PD_layout-D1_02 .PD h4 {
    line-height: 1.1;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 0.1875em;
  }
  .PD_layout.PD_layout-D1_02 .PD h4 span {
    line-height: 1.1;
  }
  .PD_layout.PD_layout-D1_02 .PD_img {
    padding-top: 0.35em;
  }
}
/* --------------------------------------
 * (新增)橫/D1_02C(攻略品牌)
 * -------------------------------------- */
.PD_layout-D1_02C .PD_slide:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.PD_layout-D1_02C.PD_layout .PD a {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 0.8em; /*gap: 0.2rem;*/
}

.PD_layout-D1_02C.PD_layout .PD h3 {
  background-color: #6d7f9c;
}

.PD_layout-D1_02C .PD .PD_img {
  width: 33%;
}

.PD_layout-D1_02C .PD .PD_into {
  width: 65%;
}

.PD_layout-D1_02C .PD_into .PD_into_PDgo {
  margin: 0 auto;
}

.PD_layout-D1_02C[data-pd-btn] .PD_into .PD_into_PDgo b::after {
  content: "看更多";
}

.PD_layout-D1_02C[data-pd-btn] .PD_btn span, .PD_layout-D1_02C[data-pd-btn] .PD_btn.more span {
  -webkit-transform: none;
          transform: none;
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_02C {
    font-size: 1.35em;
  }
  .PD_layout-D1_02C ul {
    padding: 10px 15px;
  }
  .PD_layout-D1_02C .PD h3 {
    font-size: 1em;
    margin-top: 0.25em;
  }
  .PD_layout-D1_02C .PD h4 {
    font-size: 0.9375em;
  }
  /*品數*/
  .PD_layout-D1_02C[data-pd-col-pc="2"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_02C {
    font-size: 1.25em;
  }
  .PD_layout-D1_02C ul {
    padding: 0 0.5em;
  }
  .PD_layout-D1_02C .PD .PD_img {
    width: 30%;
  }
  .PD_layout-D1_02C .PD .PD_into {
    width: 68%;
  }
  .PD_layout-D1_02C .PD_into .PD_into_PDgo {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    margin-bottom: -0.2em;
  }
  .PD_layout-D1_02C .PD_into {
    padding-bottom: 0.3125em;
  }
  .PD_layout-D1_02C .PD h3 {
    font-size: 0.875em;
  }
  .PD_layout-D1_02C .PD h4 {
    font-size: 0.8125em;
    margin-bottom: 0;
  }
  .PD_layout-D1_02C[data-pd-btn] .PD_btn b {
    font-size: 1em;
  }
  .PD_layout-D1_02C[data-pd-btn] .PD_btn i {
    top: 0.9em;
  }
}
/* --------------------------------------
 * (新增)橫/D1_05(特殊按鈕-搶)
 * -------------------------------------- */
.PD_layout-D1_05[data-pd-btn][data-pd-btn-pdgo] .PD_slide {
  padding-bottom: 0;
}

.PD_layout-D1_05 .PD_into {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.PD_layout-D1_05 .PD p {
  margin-top: 1.625em;
  height: 4em;
}

.PD_layout-D1_05 .PD p del {
  display: block;
  line-height: 1.4;
}

/*按鈕*/
.PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5] .PD_btn {
  background-color: #da0000;
  background-image: none;
  width: 14.2%;
  height: 2.375em;
  border-radius: 0.4em;
}

.PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn span {
  -webkit-transform: skewX(-7.5deg);
          transform: skewX(-7.5deg);
}

.PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn i {
  display: block;
  border-width: 0.2em;
}

.PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn b {
  width: auto;
  font-size: 1.75em;
  font-weight: 600;
  line-height: 1.275;
  font-family: Noto Sans CJK SC, "Microsoft JhengHei", Helvetica;
}

.PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn b::before {
  display: none;
}

.PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn b::after {
  content: "搶";
}

/*橫向搶新增看更多*/
.PD_layout-D1_05.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn {
  width: 14.2%;
}

.PD_layout-D1_05.PD_layout[data-pd-btn*=icon-][data-pd-btn-more] .PD_btn.more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100em 100em 100em 0;
  width: 22%;
  height: 1.8em;
  background: #713026;
  bottom: 0.5em;
  left: 0.5em;
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_05.PD_layout[data-pd-btn*=icon-][data-pd-btn-more] .PD_btn.more {
    width: 87px;
    bottom: 0.25em;
    left: 0.25em;
  }
}
.PD_layout-D1_05.PD_layout[data-pd-btn*=icon-][data-pd-btn-more] .PD_btn.more span {
  padding: 0;
}
.PD_layout-D1_05.PD_layout[data-pd-btn*=icon-][data-pd-btn-more] .PD_btn.more b {
  font-size: 1.1em;
  line-height: 1.1em;
  color: #fff;
}
.PD_layout-D1_05.PD_layout[data-pd-btn*=icon-][data-pd-btn-more] .PD_btn.more b::after {
  content: "看更多>";
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_05 .PD_into {
    padding-left: 0.5em;
  }
  .Area1220 .PD_layout-D1_05 .PD p {
    margin-top: 3em;
  }
  .PD_layout-D1_05 .PD p .Price {
    font-size: 38px;
  }
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD_into {
    padding-bottom: 0.2em;
  }
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.975em;
  }
  /*品數*/
  .PD_layout-D1_05[data-pd-col-pc="2"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-D1_05 .PD p {
    margin-top: 1em;
  }
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5] .PD_btn {
    width: 15%;
  }
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD_into {
    padding-bottom: 0.2em;
  }
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.975em;
    right: 0.35em;
  }
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn i {
    top: 0.95em;
    width: 0.6em;
    height: 0.6em;
  }
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn b {
    line-height: 1.35;
  }
}
/* --------------------------------------
 * 直/D1_06(特殊按鈕-搶) PD_layout-D1_06 (閃電搶)
 * -------------------------------------- */
.PD_layout.PD_layout-D1_06 .PD h4 b,
.PD_layout.PD_layout-D1_06 .PD p del,
.PD_layout.PD_layout-D1_06 .PD p b,
.PD_layout.PD_layout-D1_06 .PD p .js-PD_unit {
  display: none;
}

.PD_layout.PD_layout-D1_06 .PD_into {
  padding-left: 0;
  padding-right: 0;
}

.PD_layout.PD_layout-D1_06 .PD_into h3 {
  z-index: 5;
  position: relative;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 2;
  order: 2;
  margin-bottom: 0;
  padding: 0 0.9em;
  max-height: 100%;
  height: 34px;
}

.PD_layout.PD_layout-D1_06 .PD_into h3::before {
  z-index: -1;
  content: "";
  position: absolute;
  bottom: 0;
  left: 7.7vw;
  width: 0;
  height: 0;
  border-top: 8px solid #ffff02;
  border-right: 6px solid rgba(0, 0, 0, 0);
  border-left: 6px solid rgba(0, 0, 0, 0);
}

.PD_layout.PD_layout-D1_06 .PD_into h3 span {
  position: relative;
  z-index: 2;
  color: #000;
  padding-bottom: 0;
  letter-spacing: -0.05em;
  max-width: 100%;
  max-height: 1.9em;
  line-height: 2;
  border-radius: 0.5em;
  background-color: #ffff02;
}

.PD_layout.PD_layout-D1_06 .PD_into h4 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 1;
  order: 1;
  margin-bottom: 0;
  padding: 0 0.5em 0.3em 0.9em;
}

.PD_layout.PD_layout-D1_06 .PD_into h4 span {
  display: block;
}

.PD_layout.PD_layout-D1_06 .PD_into p {
  z-index: 4;
  position: relative;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 3;
  order: 3;
  margin-top: 0.5vw;
  padding-left: 7%;
  left: 1em;
  width: calc(100% - 1em);
  height: 10vw;
  line-height: 1.5;
}

.PD_layout.PD_layout-D1_06 .PD_into p::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 1px;
  right: 0em;
  background: url("btn3_2.png?t=1750139048537");
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(100% - 1px);
  background-position: top right 6%;
  height: 9vw;
}

.PD_layout.PD_layout-D1_06 .PD_into p::after {
  z-index: -2;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border: solid 1px #f5264e;
  border-right: none;
  border-radius: 5em 0 0 5em;
  width: calc(100% - 1px);
  height: 9vw;
  background: linear-gradient(110deg, #fff 73%, #f5264e 50%);
}

.PD_layout.PD_layout-D1_06 .PD_into p .Price {
  font-size: 6.5vw;
  -webkit-filter: drop-shadow(3px 0px 0px #fff);
  filter: drop-shadow(3px 0px 0px #fff);
}

@media screen and (min-width: 768px) {
  /*960-預設-4品設定*/
  .PD_layout.PD_layout-D1_06 ul {
    padding: 20px 0;
  }
  .PD_layout.PD_layout-D1_06 .PD p {
    padding-left: 1.25em;
  }
  .PD_layout.PD_layout-D1_06 .PD_into h3 {
    height: 36px;
  }
  .PD_layout.PD_layout-D1_06 .PD_into h3::before {
    left: 34px;
    border-top-width: 9px;
  }
  .PD_layout.PD_layout-D1_06 .PD_into p {
    margin-top: 0;
    height: 3.25em;
    line-height: 3.25em;
  }
  .PD_layout.PD_layout-D1_06 .PD_into p::before {
    height: 3em;
  }
  .PD_layout.PD_layout-D1_06 .PD_into p::after {
    height: 3em;
  }
  .PD_layout.PD_layout-D1_06 .PD_into p .Price {
    font-size: 32px;
  }
  /*960-品設定*/
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-pc="2"] .PD_into p::before {
    background-position: top right 18%;
  }
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-pc="3"] .PD_into p::before {
    background-position: top right 12%;
  }
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-pc="4"] .PD_into p::before {
    background-position: top right 4%;
  }
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-pc="5"] .PD_into p::before {
    background-position: top right -6.5%;
  }
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-pc="5"] .PD_into p {
    padding-left: 0.75em;
  }
  /*1220-品設定*/
  .Area1220 .PD_layout.PD_layout-D1_06[data-pd-col-pc="2"] .PD_into p::before {
    background-position: top right 20.5%;
  }
  .Area1220 .PD_layout.PD_layout-D1_06[data-pd-col-pc="3"] .PD_into p::before {
    background-position: top right 16%;
  }
  .Area1220 .PD_layout.PD_layout-D1_06[data-pd-col-pc="4"] .PD_into p::before {
    background-position: top right 11%;
  }
  .Area1220 .PD_layout.PD_layout-D1_06[data-pd-col-pc="5"] .PD_into p::before {
    background-position: top right 4.5%;
  }
  .Area1220 .PD_layout.PD_layout-D1_06[data-pd-col-pc="6"] .PD_into p::before {
    background-position: top right -4.5%;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout.PD_layout-D1_06 ul {
    padding: 0.5em 0;
  }
}
/* --------------------------------------
 * (新增)直/D1_07(1帶2)
 * -------------------------------------- */
.PD_layout-D1_07 ul {
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.PD_layout-D1_07 li {
  background-color: #fff;
}

.PD_layout-D1_07.PD_layout li:not(:nth-child(1)) .PD h4,
.PD_layout-D1_07.PD_layout li:not(:nth-child(1)) .PD .PD_logo {
  display: none;
}

/*第一品*/
.PD_layout-D1_07.PD_layout ul::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.5%;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 48.2%;
  background-image: url(PD_layout-D1_07_BG.jpg?t=1750139048537);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.PD_layout-D1_07.PD_layout.PD_layout-no-bg ul::before {
  display: none;
}

.PD_layout-D1_07 li:first-child {
  background-color: transparent;
  text-align: left;
}

.PD_layout-D1_07.PD_layout li:first-child .PD_img {
  margin: 12% 0 24%;
}

.PD_layout-D1_07.PD_layout li:first-child .PD .PD_logo {
  margin: 0;
  position: absolute;
  top: -2%;
  left: -0.75%;
  height: 3.5em;
}

.PD_layout-D1_07.PD_layout li:first-child .PD h3,
.PD_layout-D1_07.PD_layout li:first-child .PD p {
  display: none;
}

.PD_layout-D1_07.PD_layout li:first-child .PD h4 {
  color: #fff;
  position: absolute;
  bottom: -3%;
  left: 0.25%;
  width: 102%;
}

.PD_layout-D1_07.PD_layout li:first-child .PD h4 i {
  position: relative;
  top: -0.375em;
  display: inline-block;
  border-top: 0.125em solid rgba(0, 0, 0, 0);
  border-right: 0.125em solid rgba(0, 0, 0, 0);
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-color: #fff;
}

@media screen and (min-width: 768px) {
  .PD_layout-D1_07 {
    margin: 0 20px;
  }
  .PD_layout-D1_07.PD_layout ul {
    padding: 30px 19px 30px 23px;
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
    background-color: #333333;
  }
  /*第一品*/
  .PD_layout-D1_07.PD_layout li:first-child .PD_img {
    padding-left: 1em;
    padding-right: 1em;
  }
  .PD_layout-D1_07.PD_layout li:first-child .PD h4 {
    font-size: 2.4em;
    margin-bottom: 0;
    line-height: unset;
  }
  /*2+3品*/
  .PD_layout-D1_07 li:not(:nth-child(1)) .PD_into {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-transform-origin: center top;
            transform-origin: center top;
    padding-bottom: 2em;
  }
  /*品數*/
  .PD_layout-D1_07[data-pd-col-pc="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout.PD_layout-D1_07 {
    margin: 0 2%;
  }
  .PD_layout.PD_layout-D1_07 ul {
    padding: 2vw 1.5vw 2vw 1.8vw;
    -webkit-column-gap: 0.2em;
       -moz-column-gap: 0.2em;
            column-gap: 0.2em;
  }
  /*第一品*/
  .PD_layout.PD_layout-D1_07 ul::before {
    top: -1%;
    padding-bottom: 49%;
    background-size: 105%;
  }
  .PD_layout.PD_layout-D1_07 li:first-child .PD_img {
    margin: 14% 0 22%;
  }
  .PD_layout.PD_layout-D1_07 li:first-child .PD .PD_logo {
    top: 0;
    left: 0;
    height: 1.7em;
  }
  .PD_layout.PD_layout-D1_07 li:first-child .PD .PD_logo img {
    padding: 0 0.4em;
  }
  .PD_layout.PD_layout-D1_07 li:first-child .PD h4 {
    font-size: 1em;
    margin-bottom: 0;
    line-height: 1.4;
  }
  .PD_layout.PD_layout-D1_07 li:first-child .PD h4 i {
    top: -0.475em;
  }
  /*2+3品*/
  .PD_layout.PD_layout-D1_07 li:not(:nth-child(1)) .PD_img {
    padding-top: 0.2em;
  }
  .PD_layout.PD_layout-D1_07 li:not(:nth-child(1)) .PD_into {
    padding-top: 0;
    padding-bottom: 0.2em;
  }
  .PD_layout.PD_layout-D1_07 li:not(:nth-child(1)) .PD h3 {
    margin-bottom: 0;
  }
  .PD_layout.PD_layout-D1_07 li:not(:nth-child(1)) .PD p del {
    display: none;
  }
  /*品數*/
  .PD_layout.PD_layout-D1_07[data-pd-col-phone="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* --------------------------------------
 * (新增)橫/D1_04(集點加購)
 * -------------------------------------- */
.PD_layout.PD_layout-D1_04 .PD_slide .PD_into p {
  height: 0;
}

.PD_layout.PD_layout-D1_04 .PD_slide .PD_into p del,
.PD_layout.PD_layout-D1_04 .PD_slide .PD_into p b,
.PD_layout.PD_layout-D1_04 .PD_slide .PD_into p span,
.PD_layout.PD_layout-D1_04 .PD_slide .PD_into p small {
  display: none;
}

.PD_layout.PD_layout-D1_04 .PD_slide .PD_into p span.js-PD_price {
  display: block;
}

@media screen and (min-width: 768px) {
  .PD_layout.PD_layout-D1_04 ul {
    gap: 10px;
  }
  .PD_layout.PD_layout-D1_04 li {
    border-radius: 1em;
    border: none;
    background-color: #fff;
  }
  .PD_layout.PD_layout-D1_04 .PD_btn span {
    -webkit-transform: none;
            transform: none;
  }
  .PD_layout.PD_layout-D1_04 .PD_btn {
    margin: 0;
    width: 80%;
    border-radius: 5em;
  }
  .PD_layout.PD_layout-D1_04 .PD_btn i {
    top: 1.25em;
    left: 0.2em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into {
    padding: 2em 1.5em;
    text-align: left;
    display: grid;
    grid-template-rows: auto auto 1fr;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .PD_layout.PD_layout-D1_04 .PD_into .PD_into_PDgo b {
    font-size: 1.5em;
    padding: 0;
    font-weight: 600;
    font-family: Noto Sans CJK TC;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h3 {
    font-size: 1.15em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h4 {
    margin-top: 0.3em;
    max-height: 5em;
    font-weight: bolder;
    word-break: keep-all;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #2b2b2b;
    overflow: hidden;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h4 b {
    font-size: 1.6em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h4 span {
    display: block;
    font-size: 1.4em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_img {
    padding: 1.3em 0 1.3em 1.5em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into .js-PD_txt3 {
    font-size: 1.8em;
    color: #ef7c22;
    font-weight: bolder;
    font-family: Arial, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into span.js-PD_price {
    width: auto;
    height: 2.2em;
    position: absolute;
    top: 0.9em;
    left: 0.8em;
    background-image: url(Area_point_tag.png?t=1750139048537);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 1.5em;
    text-align: center;
    font-weight: 600;
    line-height: 2.2em;
    overflow: hidden;
    color: #fff;
    font-family: Arial, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
    aspect-ratio: 151/106;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into span.js-PD_price::after {
    content: "";
    display: inline-block;
    width: 20%;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout.PD_layout-D1_04 ul {
    gap: 0.2em;
  }
  .PD_layout.PD_layout-D1_04 li {
    border-radius: 1em;
    border: none;
    background-color: #fff;
  }
  .PD_layout.PD_layout-D1_04 .PD_btn span {
    -webkit-transform: none;
            transform: none;
  }
  .PD_layout.PD_layout-D1_04 .PD_btn {
    margin: 2em 0 0;
    width: 75%;
    border-radius: 5em;
  }
  .PD_layout.PD_layout-D1_04 .PD_btn i {
    top: 0.85em;
    left: 0.2em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into {
    padding: 1em 1em;
    text-align: left;
  }
  .PD_layout.PD_layout-D1_04 .PD_into .PD_into_PDgo b {
    font-size: 1.2em;
    padding: 0;
    height: 1.8em;
    line-height: 1.8;
    font-weight: 600;
    font-family: Noto Sans CJK TC;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h3 {
    font-size: 0.8em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h4 {
    margin-top: 0.3em;
    max-height: 5em;
    font-size: 1em;
    font-weight: bolder;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #2b2b2b;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h4 b {
    font-size: 1em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into h4 span {
    display: block;
    font-size: 0.85em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_img {
    padding: 1em 0 1em 1em;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into .js-PD_txt3 {
    font-size: 1.8em;
    color: #ef7c22;
    font-weight: bolder;
    font-family: Arial, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into #js-PD_txt4 {
    width: 20%;
    height: 23%;
    position: absolute;
    top: 0.65em;
    left: 0.4em;
    background-image: url(Area_point_tag.png?t=1750139048537);
    background-position: center 75%;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 1.2em;
    text-align: center;
    font-weight: 600;
    line-height: 2.5;
    overflow: hidden;
    color: #fff;
    font-family: Arial, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into #js-PD_txt4::after {
    content: "";
    display: inline-block;
    width: 17%;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into span.js-PD_price {
    width: auto;
    height: 2.2em;
    position: absolute;
    top: 0.6em;
    left: 0.6em;
    background-image: url(Area_point_tag.png?t=1750139048537);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 1.5em;
    text-align: center;
    font-weight: 600;
    line-height: 2.2em;
    overflow: hidden;
    color: #fff;
    font-family: Arial, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
    aspect-ratio: 151/106;
  }
  .PD_layout.PD_layout-D1_04 .PD_slide .PD_into span.js-PD_price::after {
    content: "";
    display: inline-block;
    width: 20%;
  }
}
/* --------------------------------------
 * 共用設定--移除公版設定
 * -------------------------------------- */
.remove_box_style ul {
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  grid-gap: 0;
  width: 100%;
}

.remove_box_style ul li {
  border: none;
}

/*
 * Ghvzon
 * 模組化入稿公版 PD_layout-v20221212-15:00
 * klyang
 * 模組化入稿公版 PD_layout-v20240625-11:00
 * lwang
 * 統整移除線上模組化公版設定 / 短促公版特殊設定+變數設定-v20250106
 *******************************************************************
 */
/* --------------------------------------
 * 基礎設定
 *
 * (改)h4字重
 * (改)移除hover效果
 * -------------------------------------- */
@media screen and (max-width: 767px) {
  .PD_layout ul {
    width: 100%;
    border-radius: 10px;
  }
}
@media screen and (min-width: 768px) {
  .PD_layout .PD_slide:hover {
    -webkit-transform: none;
            transform: none;
    -webkit-filter: none;
            filter: none;
  }
  /*  .PD_layout .PD_slide:hover {
    box-shadow: 0 3px 30px rgba(0, 0, 0, 0.4);
  }*/
}
/*@media screen and (max-width: 767px) {
  .PD_layout .PD_slide:hover {
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
  }
}*/
/* --------------------------------------
 *【佈局】品底色 無=白(預) 0=透明 BN=純BN(RWD共用) BN-AWD=純BN(PC/MB不共用)  PDBN=公版+BN(RWD共用) PDBN-AWD=公版+BN(PC/MB不共用)
 *
 * (改)移除hover效果
 * -------------------------------------- */
.PD_layout[data-pd-li*=BN] li:hover {
  -webkit-filter: none;
          filter: none;
}

/* --------------------------------------
 *【元件】文案區
 *
 * (改)新增顏色變數
 * -------------------------------------- */
/*h3特標-換色*/
.PD_layout[data-pd-h3="1"] .PD h3,
.PD_layout[data-pd-h3="2"] .PD h3,
.PD_layout[data-pd-h3="3"] .PD h3,
.PD_layout[data-pd-h3="4"] .PD h3,
.PD_layout[data-pd-h3="6"] .PD h3 {
  color: #fff;
  background-color: #ff005d;
}

/*右上角標籤*/
.PD_layout[data-pd-h3="6"] .PD h3::before,
.PD_layout[data-pd-h3="6"] .PD h3::after {
  content: "";
  border-color: #ff005d;
  border-bottom-color: transparent;
}

.PD_layout[data-pd-h3="6"] .PD h3::before {
  border-right-color: transparent;
}

.PD_layout[data-pd-h3="6"] .PD h3::after {
  border-left-color: transparent;
}

/* --------------------------------------
 *【元件】按鈕
 *
 * (改)新增顏色變數-搶購背景色
 * (改)關閉背景漸層色
 * (改)新增圖片火焰搶設定
 * -------------------------------------- */
/*樣式調整-圖片-火焰搶*/
.PD_layout[data-pd-btn*=box-1],
.PD_layout[data-pd-btn*=box-2] {
  /*搶購-按鈕換色*/
  /*看更多-按鈕換色*/
}
.PD_layout[data-pd-btn*=box-1] .PD_btn,
.PD_layout[data-pd-btn*=box-2] .PD_btn {
  background-color: #ffff02;
  background-image: none;
  border: 2px solid #000;
  border-left: none;
}
.PD_layout[data-pd-btn*=box-1] .PD_btn.PD_go i,
.PD_layout[data-pd-btn*=box-2] .PD_btn.PD_go i {
  margin-right: -46%;
}
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go span:after,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(PD_go_icon01.png?t=1750139048537) center center/contain no-repeat;
  -webkit-transform: skewX(7.5deg);
  transform: skewX(7.5deg);
}
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go b::before,
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go b::after,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go b::before,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go b::after {
  display: none;
}
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more {
  background-color: #fff;
  border: 2px solid #000;
  border-right: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more b,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more b {
  color: #000000;
}
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more i,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more i {
  border-color: #000000;
}
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover b,
.PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover i,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover b,
.PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more:hover i {
  opacity: 0.9;
}

@media screen and (min-width: 768px) {
  /*位置調整*/
  .PD_layout[data-pd-btn*=box-1],
  .PD_layout[data-pd-btn*=box-2],
  .PD_layout[data-pd-btn*=box-4] {
    /*搶購*/
    /*看更多*/
  }
  .PD_layout[data-pd-btn*=box-1].PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn,
  .PD_layout[data-pd-btn*=box-2].PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn,
  .PD_layout[data-pd-btn*=box-4].PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.7em;
    right: 0.35em;
  }
  .PD_layout[data-pd-btn*=box-1].PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more,
  .PD_layout[data-pd-btn*=box-2].PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more,
  .PD_layout[data-pd-btn*=box-4].PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more {
    bottom: 0.7em;
    left: 0.35em;
  }
  /*PC-1220-搶購箭頭位置*/
  .Area1220 .PD_layout[data-pd-btn*=box-1][data-pd-col-pc="4"] .PD_btn.PD_go i,
  .Area1220 .PD_layout[data-pd-btn*=box-2][data-pd-col-pc="4"] .PD_btn.PD_go i {
    margin-right: -37%;
  }
  .Area1220 .PD_layout[data-pd-btn*=box-1][data-pd-col-pc="3"] .PD_btn.PD_go i,
  .Area1220 .PD_layout[data-pd-btn*=box-2][data-pd-col-pc="3"] .PD_btn.PD_go i {
    margin-right: -27%;
  }
  /*PC-960-搶購箭頭位置*/
  .Area960 .PD_layout[data-pd-btn*=box-1][data-pd-col-pc="5"] .PD_btn.PD_go i,
  .Area960 .PD_layout[data-pd-btn*=box-2][data-pd-col-pc="5"] .PD_btn.PD_go i {
    margin-right: -56%;
  }
  .Area960 .PD_layout[data-pd-btn*=box-1][data-pd-col-pc="3"] .PD_btn.PD_go i,
  .Area960 .PD_layout[data-pd-btn*=box-2][data-pd-col-pc="3"] .PD_btn.PD_go i {
    margin-right: -36%;
  }
}
@media screen and (max-width: 767px) {
  /*位置調整*/
  .PD_layout[data-pd-btn*=box-1],
  .PD_layout[data-pd-btn*=box-2],
  .PD_layout[data-pd-btn*=box-4] {
    /*搶購*/
    /*看更多*/
  }
  .PD_layout[data-pd-btn*=box-1].PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn,
  .PD_layout[data-pd-btn*=box-2].PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn,
  .PD_layout[data-pd-btn*=box-4].PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn {
    bottom: 0.6em;
  }
  .PD_layout[data-pd-btn*=box-1].PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more,
  .PD_layout[data-pd-btn*=box-2].PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more,
  .PD_layout[data-pd-btn*=box-4].PD_layout[data-pd-btn][data-pd-btn-more] .PD_btn.more {
    bottom: 0.6em;
  }
  .PD_layout[data-pd-btn*=box-1][data-pd-col-phone="3"] .PD_into,
  .PD_layout[data-pd-btn*=box-2][data-pd-col-phone="3"] .PD_into,
  .PD_layout[data-pd-btn*=box-4][data-pd-col-phone="3"] .PD_into {
    padding-bottom: 0.35em;
  }
  /*MB-搶購箭頭位置*/
  .Area960 .PD_layout[data-pd-btn*=box-1][data-pd-col-phone="3"] .PD_btn.PD_go i,
  .Area960 .PD_layout[data-pd-btn*=box-2][data-pd-col-phone="3"] .PD_btn.PD_go i, .Area1220 .PD_layout[data-pd-btn*=box-1][data-pd-col-phone="3"] .PD_btn.PD_go i,
  .Area1220 .PD_layout[data-pd-btn*=box-2][data-pd-col-phone="3"] .PD_btn.PD_go i {
    margin-right: -65%;
  }
  .Area960 .PD_layout[data-pd-btn*=box-1][data-pd-col-phone="2"] .PD_btn.PD_go i,
  .Area960 .PD_layout[data-pd-btn*=box-2][data-pd-col-phone="2"] .PD_btn.PD_go i, .Area1220 .PD_layout[data-pd-btn*=box-1][data-pd-col-phone="2"] .PD_btn.PD_go i,
  .Area1220 .PD_layout[data-pd-btn*=box-2][data-pd-col-phone="2"] .PD_btn.PD_go i {
    margin-right: -48%;
  }
  /*火焰搶-圖大小*/
  .PD_layout[data-pd-btn*=box-1][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go span:after,
  .PD_layout[data-pd-btn*=box-2][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn.PD_go span:after {
    content: "";
    top: 0.5%;
    height: 99%;
  }
}
/* --------------------------------------
 * 線上模組已移除公版
 * 
 * 【版型】二課
 * 需搭配class="remove_box_style"
 * PD_layout-D2_01 (拱門型)
 * PD_layout-D2_02 (左右錯位)
 * PD_layout-D2_03 (膠囊型去背主圖)
 * PD_layout-D2_04 (編號型刷色背景)
 * PD_layout-D2_06 (圓形主圖無背景)
 * PD_layout-D2_08 (省錢達人錯位型)
 * 【版型】BN
 * PD_layout-PDBN-AWD_01
 * -------------------------------------- */
/* --------------------------------------
 * 看更多按鈕
 *
 * (改)增加白色背景(和公版區相連)+按鈕大小
 * (改)新增顏色變數
 * -------------------------------------- */
.PD_layout-btn ul {
  margin: 0 auto;
  background-color: #fff;
}

/*按鈕換色*/
.PD_layout-btn li .PD h3 {
  color: rgb(255, 255, 255);
  background: #000000;
}

@media screen and (min-width: 768px) {
  .PD_layout-btn {
    padding: 0;
    margin-top: -15px;
  }
  .PD_layout-btn ul {
    padding: 15px 0 20px;
    border-radius: 0 0 15px 15px;
  }
  .PD_layout-btn li .PD h3 {
    padding: 0.5em 3em;
  }
}
@media screen and (max-width: 767px) {
  .PD_layout-btn {
    padding: 0vw;
    margin-top: -2vw;
  }
  .PD_layout-btn ul {
    padding: 4vw 0 4vw;
    border-radius: 0 0 10px 10px;
  }
  .PD_layout-btn li .PD h3 {
    padding: 0.5em 2em;
    font-size: 17px;
  }
}
/*移除公版設定*/
.remove_box_style ul {
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  grid-gap: 0;
  width: 100%;
}

.remove_box_style ul li {
  border: none;
}

/* --------------------------------------
 * 直/D1_06(特殊按鈕-搶) PD_layout-D1_06 (閃電搶)
 *
 * (改)文案置左對齊
 * (改)特標箭頭背景css寫入
 * -------------------------------------- */
.PD_layout.PD_layout-D1_06 .PD_into p::after {
  border: solid 1px #eb2456;
  border-right: none;
  background: linear-gradient(110deg, #fff 73%, #eb2456 50%);
}

@media screen and (max-width: 767px) {
  /*960-手機3品設定*/
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-phone="3"] .PD_into p {
    height: 8vw;
    padding-left: 4%;
  }
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-phone="3"] .PD_into p::before {
    height: 7vw;
  }
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-phone="3"] .PD_into p::after {
    height: 7vw;
    background: linear-gradient(110deg, #fff 69%, #eb2456 50%);
  }
  .Area960 .PD_layout.PD_layout-D1_06[data-pd-col-phone="3"] .PD_into p .Price {
    font-size: 5vw;
  }
}
/* --------------------------------------
 * 橫/D1_05(特殊按鈕-搶) PD_layout-D1_05
 *
 * (改)新增顏色變數
 * -------------------------------------- */
.PD_layout.PD_layout-D1_05 .js-PD_unit {
  display: none;
}

/*按鈕換色*/
.PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5] .PD_btn {
  background-color: #eb2456;
}

@media screen and (max-width: 767px) {
  .PD_layout.PD_layout-D1_05[data-pd-btn*=icon-5][data-pd-btn-pdgo] .PD .PD_btn {
    right: 0.25em;
  }
}
/*
 * Ghvzon
 * 共用元件 js_link-v4.0
 *******************************************************************
 *  --2021.01.12--改用vue(v4.0)
 *******************************************************************
 */
/* --------------------------------------
 * pageRWDLayout RWD分頁用
 * -------------------------------------- */
/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);*/
/*font-family: 'Noto Sans TC', sans-serif; font-weight: 500 400 300 200;*/
/*font-family: "Noto Sans TC","微軟正黑體","Microsoft JhengHei",Helvetica;*/
/*基本*/
body {
  font-size: inherit !important;
}

@media screen and (min-width: 768px) {
  body {
    background: #ff9d00;
  }
}
@media screen and (max-width: 767px) {
  body {
    background: #ff9d00;
    background-size: contain;
  }
}
/*隱藏預載momoLOGO*/
.articleList img.lazy_off {
  background-image: none !important;
}

/*全BOX版面*/
.WRAPPER {
  font-family: "微軟正黑體", system-ui, Helvetica, Arial;
  text-align: left;
}

.WRAPPER {
  z-index: 0;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0; /*overflow:hidden;*/
  width: 100%;
  min-width: 1220px;
}

.WRAPPER img {
  border: 0px;
  vertical-align: top;
}

.WRAPPER a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 767px) {
  .WRAPPER {
    min-width: inherit;
    min-height: 100%;
    overflow: hidden;
  }
  .WRAPPER img {
    width: 100%;
    height: auto;
  }
}
/*PC背景*/
.Area_bgtop {
  z-index: -40;
  position: absolute;
  top: 0;
  left: 50%;
  width: 2000px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}

.Area_bgtop .bgtop_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
}

.Area_bgtop .bgtop_ span {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center top;
}

/*Phone背景*/
.m_Area_bgtop {
  z-index: -40;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.m_Area_bgtop .m_bgtop_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.m_Area_bgtop .m_bgtop_ span {
  position: absolute;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 158%;
  overflow: hidden;
  background-position: center top;
  background-size: 100%;
}

/*版頭*/
.Area_top .go_bt:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
  -webkit-transform: none;
  transform: none;
}

@media screen and (max-width: 767px) {
  .Area_top {
    overflow: hidden;
  }
}
/*主標*/
/*按鈕btn*/
.Area_top .btn_ {
  z-index: 5;
  position: absolute;
}

.Area_top .btn_ a {
  display: block;
}

.Area_top .btn_ a:after {
  content: "";
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 100% center;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .Area_top .btn_ {
    top: 2.5vw;
    right: 0;
  }
}
/*詳情*/
.Area_top .btn_list {
  right: 47px;
  width: 95px;
}
.Area_top .btn_list img {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .Area_top .btn_list {
    top: 11vw;
    right: 1.5vw;
  }
}
/*查詢*/
.Area_top .btn_more {
  right: 154px;
  width: 95px;
}
.Area_top .btn_more img {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .Area_top .btn_more {
    width: 14vw;
  }
}
/*懶人包
.Area_top .btn_guide { position:absolute; top:80px; right:20px;}
.Area_top .btn_guide a { width:90px; height:43px;}
.Area_top .btn_guide a:after { background-image:url(btn_guide.png?t=1750139048537);}
  @media screen and (max-width:767px){
    .Area_top .btn_guide {  top:4vw; right:3vw; }
    .Area_top .btn_guide a { padding:0; width:15vw; height:7vw;}
    .Area_top .btn_guide a:after { background-image:url(m_btn_guide.png?t=1750139048537);}
  }*/
/*閃亮效果
.Area_top .btn_guide:after,
.Area_top .btn_guide:before,
.Area_top .btn_guide { border-radius:100px;
            -webkit-transition: all 0.2s ease;
              -moz-transition: all 0.2s ease;
              -ms-transition: all 0.2s ease;
                -o-transition: all 0.2s ease;
                transition: all 0.2s ease;}
.Area_top .btn_guide:after,
.Area_top .btn_guide:before { background-color:rgba(255,255,255,.5);}
.Area_top .btn_guide:hover::after,
.Area_top .btn_guide:hover::before,
.Area_top .btn_guide:hover { background-color:rgba(255,255,255,.5);}
.Area_top .btn_guide:hover { background-color: transparent;}
.Area_top .btn_guide:after,
.Area_top .btn_guide:before { content: ""; z-index:-1; position:absolute; top:-5%; left:0%; padding:0; box-shadow: none; width:100%; height:110%; -webkit-transform:scale(1); transform:scale(1); opacity:0.8;}
.Area_top .btn_guide:after,
.Area_top .btn_guide:before {-webkit-animation:btn_more-play 1.5s infinite linear;
                    animation:btn_more-play 1.5s infinite linear;}
.Area_top .btn_guide:before { -webkit-animation-delay:.5s; animation-delay:.5s;}
  @-webkit-keyframes btn_more-play {
      75% { -webkit-transform:scale(1.7); transform:scale(1.7); opacity:0;}
      100% { -webkit-transform:scale(1.7); transform:scale(1.7); opacity:0;}
  }
  @keyframes btn_more-play {
      75% { -webkit-transform:scale(1.7); transform:scale(1.7); opacity:0;}
      100% { -webkit-transform:scale(1.7); transform:scale(1.7); opacity:0;}
  }*/
/*版頭銀行*/
.Area_top .box_bank .Area_swiper {
  z-index: 2;
  position: absolute;
  bottom: 56px;
  left: 50%;
  margin: 0;
  padding: 0;
  margin-left: -272px;
  width: 550px;
  height: 100px;
}

.Area_top .box_bank .Area_swiper_box {
  padding-bottom: 0;
}

.Area_top .box_bank li {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.Area_top .box_bank .Area_swiper img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .Area_top .box_bank .Area_swiper {
    top: 62.5vw;
    bottom: inherit;
    left: 13%;
    margin: 0;
    width: 73%;
    height: 12vw;
    overflow: hidden;
  }
}
/*限定文案*/
.box_timetitle {
  position: absolute;
  top: 98px;
  left: 580px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 150px;
  text-align: center;
  color: #fff;
  font-size: 34px;
  line-height: 40px;
  font-weight: 800;
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
}

.box_timetitle .time_day {
  letter-spacing: -0.1rem;
  text-shadow: 0 0 5px #EF9819, 0 0 5px #EF9819, 0 0 1px #EF9819, 0 0 1px #EF9819, 0 0 10px #EF9819;
}

@media screen and (max-width: 767px) {
  .box_timetitle {
    top: 9vw;
    left: 40vw;
    width: 20vw;
    text-align: center;
    color: #fff;
    font-size: 4.3vw;
    line-height: 1;
  }
  .box_timetitle .time_day {
    letter-spacing: 0;
  }
}
/** 倒數 **/
.TimerNick {
  position: absolute;
  top: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.TimerNick .TIMER {
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: #eebb91;
  font-size: 28px;
  line-height: 40px;
  font-weight: 800;
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
}

.TimerNick .icon {
  position: relative;
  top: 6px;
  margin-right: 4px;
  -webkit-filter: drop-shadow(1px 1px 1px rgb(0, 0, 0));
          filter: drop-shadow(1px 1px 1px rgb(0, 0, 0));
}

.TimerNick span {
  float: left;
}

.TimerNick small {
  float: left;
  position: relative;
  top: -1px;
  font-size: 28px;
}

.TimerNick .time_day {
  margin-right: 5px;
  letter-spacing: -0.1rem;
}

.TimerNick .FontStyle {
  position: relative;
  top: -1px;
  font-size: 32px;
  color: #eebb91;
}

.TimerNick .FontStyle b {
  display: inline-block;
  margin: 0;
  width: 20px;
  text-align: center;
  font-weight: 300;
  font-family: "Century Gothic";
}

@media screen and (max-width: 767px) {
  .TimerNick {
    top: -6.5vw;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    text-shadow: none;
  }
  .TimerNick .TIMER {
    font-size: 4.6vw;
    line-height: 5.5vw;
  }
  .TimerNick .icon {
    display: block;
    top: 0.5vw;
    width: 4vw;
    -webkit-filter: none;
            filter: none;
  }
  .TimerNick small {
    top: 0;
    margin: 0;
    font-size: 3vw;
  }
  .TimerNick .time_day {
    position: relative;
  }
  .TimerNick .FontStyle {
    top: 0;
    font-size: 5vw;
  }
  .TimerNick .FontStyle b {
    margin: 0;
    width: 3vw;
    font-family: Helvetica;
  }
}
/** 倒數閃燈 **/
.TIMERLan {
  -webkit-animation: TIMERLan 0.25s infinite alternate linear;
  animation: TIMERLan 0.25s infinite alternate linear;
}

@-webkit-keyframes TIMERLan {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@keyframes TIMERLan {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}
/*倒數秒閃閃*/
.timeout-play {
  -webkit-animation: timeout-play 0.5s -0.4s infinite alternate;
  animation: timeout-play 0.5s -0.4s infinite alternate;
}

@-webkit-keyframes timeout-play {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes timeout-play {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* --------------------------------------
 * Page 頁面
 * -------------------------------------- */
/*Phone置頂滑動選單*/
.NavArea_tabbar {
  margin: 0 auto 5vw;
  width: 94%;
}

.NavArea_tabbar.cate-fixed {
  width: 100%;
}

.NavArea_tabbar .Nav_box {
  border-radius: 8px;
  -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
          box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
}

.NavArea_tabbar .Nav li {
  overflow: visible;
}

/*.NavArea_tabbar .Nav a { display:inline-block;}*/
.NavArea_tabbar.cate-fixed .Nav_box {
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
          box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
}

/*.NavArea.cate-open .Nav li, .NavArea.cate-open .Nav span { width: 50%!important;}*/
/*.NavArea.cate-open .Nav ul { padding: 1%;}*/
/*.NavArea .Nav li, .NavArea.cate-open .Nav span { width: 48%!important;}*/
/* --------------------------------------
 * 共用動畫
 * -------------------------------------- */
/*飄-下上*/
.downtoup-play {
  -webkit-animation-name: downtoup-play;
  animation-name: downtoup-play;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/*飄-上下*/
.downtoup-play_r {
  -webkit-animation-name: downtoup-play;
  animation-name: downtoup-play;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse;
}

@-webkit-keyframes downtoup-play {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -10px);
  }
}
@keyframes downtoup-play {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }
}
/*飄浮*/
.floating-play {
  -webkit-animation: floating-play 6s infinite alternate;
  animation: floating-play 6s infinite alternate;
}

@-webkit-keyframes floating-play {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  25% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  75% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes floating-play {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  25% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  75% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
/*抬高-右邊*/
.raise_l-play {
  -webkit-animation: raise_l-play 1s infinite alternate;
  animation: raise_l-play 1s infinite alternate;
}

@-webkit-keyframes raise_l-play {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
}
@keyframes raise_l-play {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
}
/*抬高-左邊*/
.raise_r-play {
  -webkit-animation: raise_r-play 1s infinite alternate;
  animation: raise_r-play 1s infinite alternate;
}

@-webkit-keyframes raise_r-play {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@keyframes raise_r-play {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
.cantantBase {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  font-family: "Century Gothic", "微軟正黑體", system-ui, Helvetica, Arial;
  width: 100%;
  background: #f9b240;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cantantBase .box {
  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;
  position: relative;
  margin: 0 auto;
  width: 1220px;
  height: 50px;
}
.cantantBase .box .momologo {
  z-index: 2;
  position: relative;
  top: 0;
  left: 13px;
}
.cantantBase .box .momologo:hover a path {
  fill: #EA27C2;
}
.cantantBase .box .momologo a {
  display: block;
  width: 140px;
  height: 21px;
}
.cantantBase .box .momologo a svg {
  width: 140px;
  height: 21px;
}
.cantantBase .box .momologo a path {
  fill: #ffffff;
}
.cantantBase .box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  text-shadow: 0px 0px 1px rgba(42, 42, 42, 0.5176470588);
}
.cantantBase .box ul li {
  position: relative;
  padding: 0 5px;
}
.cantantBase .box ul li a {
  color: #fff;
}
.cantantBase .box ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 100%;
  z-index: auto;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #fbc97a;
}
.cantantBase .box ul li.cate-hover a {
  color: #ffff02;
}
.cantantBase .box ul li:hover a {
  color: #ffff02;
}

/*
 * Ghvzon
 * 導覽/選單高亮組件 navlight-v3.10
 *******************************************************************
 *  --2021.04.01--新增自動擷取選單資料(v3.10)
 *  --2020.02.26--修正頁面到底高亮顯示最後一個改判斷body(v3.8)
 *  --2020.02.18--修正頁面到底高亮顯示最後一個改判斷body(v3.7)
 *  --2019.09.05--修正頁面到底高亮顯示最後一個(v3.6)
 *  --2019.03.26--新增可調整置頂偏移高度(v3.5)
 *  --2019.02.27--修正快速置頂時，高亮顯示錯誤(v3.4)
 *  --2019.01.11--修正回推高度(v3.3)
 *  --2019.01.02--新增高亮選單滑動的色塊(v3.3)
 *  --2018.11.23--新增垂直樣式(v3.2)
 *******************************************************************
 */
/* HTML功能設定
 *******************************************************************
 * 【切換垂直】	在<div class="NavArea">加上Class:NavArea_vertical	
 *
 * 【切換功能】 在<div class="NavArea">修改data屬性
 *              不要展開按鈕       :[data-Btn="off"]
 *              要前置標          :[data-toptext="on"]
 *              要高亮選單滑動的色塊:[data-slidebg="on"]
 *
 * 【一般】<li><a href="javascript:void(0);">一般用<i></i></a></li>
 *
 * 【切換高亮樣式】 在<div class="NavArea">修改data-light值，底線=line 色塊=box 圖標=icon
 *   
 * 【高亮選單滑動的色塊】Nav-slidebg
 *
 *******************************************************************
 */
/*選單外掛*/
.NavArea {
  z-index: 100;
  position: relative;
  display: block;
  margin-bottom: 0px;
  text-align: left;
  font: 16px/44px "Century Gothic", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;
}

.NavArea *,
.NavArea *:before,
.NavArea *:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*【程式切換】cate-open 展開後*/
.NavArea.cate-open {
  z-index: 1000 !important;
}

/*選單_黑底*/
/*【程式切換】cate-open 展開後*/
.NavArea.cate-open .Nav_bg {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.NavArea.cate-open .Nav_bg {
  display: block;
}

/*選單_保留區*/
.NavArea .Nav_target {
  display: none;
  height: 44px;
}

/*【程式切換】cate-fixed置頂後*/
.NavArea.cate-fixed .Nav_target {
  display: block;
}

/*選單_選單區*/
.NavArea .Nav_box {
  position: relative;
  background-color: rgb(255, 255, 255);
}

/*【程式切換】cate-fixed置頂後*/
.NavArea.cate-fixed .Nav_box {
  position: fixed;
  top: 0;
  width: 100%;
  -position: absolute;
  -top: expression(eval(document.documentElement.scrollTop));
  -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
          box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
}

/*前置標*/
.NavArea .Nav_toptext {
  display: none;
  z-index: 10;
  position: absolute;
  top: 0;
  width: 90px;
  height: 100%;
  text-align: center;
  color: #E40580;
  letter-spacing: -0.5px;
}

.NavArea .Nav_toptext a {
  color: inherit;
}

.NavArea .Nav_toptext:after {
  content: "";
  position: absolute;
  top: 11px;
  right: 0px;
  display: block;
  width: 1px;
  height: 22px;
  background-color: #000 !important;
}

/*【程式切換】cate-open 展開後*/
.NavArea.cate-open .Nav_toptext {
  display: none !important;
}

/* 
 * -------------------------------------------
 *【切換樣版】要前置標:[data-toptext="on"]
 * -------------------------------------------
 */
.NavArea[data-toptext=on] .Nav_toptext {
  display: block;
}

/* 
 * -------------------------------------------
 *【切換高亮樣式】[data-light="line"] 高亮: 底線
 * -------------------------------------------
 */
.NavArea[data-light=line] .Nav_toptext:after {
  display: none;
}

.NavArea[data-light=line] .Nav_toptext i {
  z-index: -1;
  position: absolute;
  bottom: 0%;
  left: 50%;
  width: 100%;
  height: 10%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  background-color: #E40580;
}

/* 
 * -------------------------------------------
 *【切換高亮樣式】[data-light="box"] 高亮: 色塊
 * -------------------------------------------
 */
.NavArea[data-light=box] .Nav_toptext:after {
  display: none;
}

.NavArea[data-light=box] .Nav_toptext {
  margin-left: 5px;
  width: 85px;
}

.NavArea[data-light=box] .Nav_toptext,
.NavArea[data-light=box] .Nav_toptext a {
  color: #fff;
}

.NavArea[data-light=box] .Nav_toptext i {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 44px;
  width: 100%;
  height: 70%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid #F2235E !important;
  background-color: #F2235E !important;
}

/* 
 * -------------------------------------------
 *【切換高亮樣式】[data-light="icon"] 高亮: 圖標
 * -------------------------------------------
 */
.NavArea[data-light=icon] .Nav_toptext:after {
  display: none;
}

.NavArea[data-light=icon] .Nav_toptext i {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Im5hdmxpZ2h0X2ljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFNDAwODAiIGQ9Ik0xMCwwQzYuMDIxLDAsMi43OTcsMy4yMjUsMi43OTcsNy4yMDNDMi43OTcsMTIuOTA2LDEwLDIwLDEwLDIwczcuMjAzLTcuMDk0LDcuMjAzLTEyLjc5Nw0KCUMxNy4yMDMsMy4yMjUsMTMuOTc5LDAsMTAsMHogTTEwLDExLjAwNWMtMi4xLDAtMy44MDMtMS43MDMtMy44MDMtMy44MDJDNi4xOTcsNS4xMDMsNy45LDMuNCwxMCwzLjRjMi4xLDAsMy44MDIsMS43MDMsMy44MDIsMy44MDMNCglTMTIuMSwxMS4wMDUsMTAsMTEuMDA1eiIvPg0KPC9zdmc+DQo=") no-repeat center center;
  background-size: 100%;
}

/*按鈕區*/
.NavArea .Nav_Btn {
  z-index: 1;
  position: relative;
}

.NavArea .Nav_Btn b {
  display: none;
  padding: 0 10px;
  opacity: 0.75;
}

.NavArea .Nav_Btn b:before {
  content: attr(data-opentext);
  color: #000;
}

.NavArea .Nav_Btn i {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer; /*box-shadow:-1px 0 3px rgba(150,150,150,0.1);*/
}

.NavArea .Nav_Btn i:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid #000;
  border-width: 0 1px 1px 0;
  width: 20%;
  height: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -70%) rotate(45deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*【程式切換】cate-open 展開後*/
.NavArea.cate-open .Nav_Btn b {
  display: block;
  height: 44px;
}

.NavArea.cate-open .Nav_Btn i:before {
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
  transform: translate(-50%, -30%) rotate(225deg);
}

/* 
 * -------------------------------------------
 *【切換樣版】不要展開按鈕:[data-Btn="off"]
 * -------------------------------------------
 */
.NavArea[data-Btn=off] .Nav_Btn {
  display: none;
}

/*選單*/
.NavArea .Nav {
  position: relative;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  width: calc(100% - 44px);
  height: 44px;
  white-space: nowrap;
  -webkit-transition: 0s;
  transition: 0s;
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/*【程式切換】cate-open 展開後*/
.NavArea.cate-open .Nav {
  overflow-y: initial;
  margin: 0 !important;
  width: 100% !important;
  height: inherit;
}

/* 
 * -------------------------------------------
 *【切換樣版】不要展開按鈕:[data-Btn="off"]
 * -------------------------------------------
 */
.NavArea[data-Btn=off] .Nav {
  width: 100%;
}

/* 
 * -------------------------------------------
 *【切換樣版】要前置標:[data-toptext="on"]
 * -------------------------------------------
 */
.NavArea[data-toptext=on] .Nav {
  margin-left: 90px;
  width: calc(100% - 134px);
}

/* 
 * -------------------------------------------
 *【切換樣版】不要展開按鈕:[data-Btn="off"]要前置標:[data-toptext="on"]
 * -------------------------------------------
 */
.NavArea[data-Btn=off][data-toptext=on] .Nav {
  margin-left: 90px;
  width: calc(100% - 90px);
}

/*選單內容*/
.NavArea .Nav ul {
  position: relative;
  list-style: none outside none;
  white-space: nowrap;
}

.NavArea .Nav li,
.NavArea .Nav li > span,
.NavArea .Nav li > b {
  float: none;
  z-index: 10;
  position: relative;
  display: inline-block;
  padding: 0;
  overflow: hidden;
  width: auto;
  height: 44px;
  font-weight: inherit;
  text-align: center;
}

.NavArea .Nav li > b a:after {
  content: "";
  position: relative;
  top: 3px;
  left: 5px;
  display: inline-block;
  border: 1px solid #000;
  border-width: 0 1px 1px 0;
  width: 7.5px;
  height: 7.5px;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -70%) rotate(-45deg);
}

.NavArea .Nav a {
  display: block;
  position: relative;
  padding: 0 12px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: inherit;
  text-decoration: none;
}

/*【程式切換】cate-hover高亮*/
/*【程式切換】cate-open 展開後*/
.NavArea.cate-open .Nav ul {
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 1%;
  white-space: inherit;
}

.NavArea.cate-open .Nav li,
.NavArea.cate-open .Nav li > span {
  float: left;
  padding: 0 1%;
  width: 33.3% !important;
}

.NavArea.cate-open .Nav li > b {
  float: left;
  width: 100%;
  text-align: left;
}

.NavArea.cate-open .Nav li > b a:after {
  display: none;
}

/* 
 * -------------------------------------------
 *【切換高亮樣式】[data-light="line"] 高亮: 底線
 * -------------------------------------------
 */
.NavArea[data-light=line] .Nav li a i,
.NavArea[data-light=line] .Nav span a i {
  z-index: -1;
  position: absolute;
  bottom: -2%;
  left: 50%;
  width: 100%;
  height: 10%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

/*【程式切換】cate-hover高亮*/
.NavArea[data-light=line] .Nav .cate-hover a {
  color: #E40580;
}

.NavArea[data-light=line] .Nav .cate-hover i {
  background-color: #E40580;
}

/*【程式切換】cate-open 展開後*/
.NavArea[data-light=line].cate-open .Nav li a i,
.NavArea[data-light=line].cate-open .Nav li > span a i {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 44px;
  width: 90%;
  height: 70%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #F6F7F9;
}

/* 
 * -------------------------------------------
 *【切換高亮樣式】[data-light="box"] 高亮: 色塊
 * -------------------------------------------
 */
.NavArea[data-light=box] .Nav ul {
  padding-left: 10px;
}

.NavArea[data-light=box] .Nav li a i,
.NavArea[data-light=box] .Nav li > span a i {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 44px;
  width: 100%;
  height: 70%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*【程式切換】cate-hover高亮*/
.NavArea[data-light=box] .Nav .cate-hover a {
  color: #fff;
}

.NavArea[data-light=box] .Nav .cate-hover i {
  display: block;
  border: 1px solid #F2235E !important;
  background-color: #F2235E !important;
}

/*【程式切換】cate-open 展開後*/
.NavArea[data-light=box].cate-open .Nav ul {
  padding-left: 0;
}

.NavArea[data-light=box].cate-open .Nav li a i {
  width: 90%;
  background-color: #F6F7F9;
}

/* 
 * -------------------------------------------
 *【切換高亮樣式】[data-light="icon"] 高亮: 圖標
 * -------------------------------------------
 */
.NavArea[data-light=icon] .Nav ul {
  padding-left: 10px;
}

/*【程式切換】cate-hover高亮*/
.NavArea[data-light=icon] .Nav .cate-hover a {
  color: #E40580;
}

.NavArea[data-light=icon] .Nav .cate-hover i {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Im5hdmxpZ2h0X2ljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFNDAwODAiIGQ9Ik0xMCwwQzYuMDIxLDAsMi43OTcsMy4yMjUsMi43OTcsNy4yMDNDMi43OTcsMTIuOTA2LDEwLDIwLDEwLDIwczcuMjAzLTcuMDk0LDcuMjAzLTEyLjc5Nw0KCUMxNy4yMDMsMy4yMjUsMTMuOTc5LDAsMTAsMHogTTEwLDExLjAwNWMtMi4xLDAtMy44MDMtMS43MDMtMy44MDMtMy44MDJDNi4xOTcsNS4xMDMsNy45LDMuNCwxMCwzLjRjMi4xLDAsMy44MDIsMS43MDMsMy44MDIsMy44MDMNCglTMTIuMSwxMS4wMDUsMTAsMTEuMDA1eiIvPg0KPC9zdmc+DQo=") no-repeat center center;
  background-size: 100%;
}

/*【程式切換】cate-open 展開後*/
.NavArea[data-light=icon].cate-open .Nav ul {
  padding-left: 0;
}

/*2019.01.02--新增高亮選單滑動的色塊*/
.NavArea .Nav-slidebg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
}

.NavArea .Nav-slidebg.cate-ing {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

/*【程式切換】cate-open 展開後*/
.NavArea.cate-open .Nav-slidebg {
  display: none;
}

/*2018.11.23新增垂直樣式*/
.NavArea_vertical {
  position: absolute;
  left: 0;
  text-align: center;
  font-size: 13px;
  line-height: 16px;
}

/*選單_保留區*/
.NavArea_vertical .Nav_target {
  height: 0;
}

/*選單_選單區*/
.NavArea_vertical .Nav_box {
  width: 44px;
  height: calc(100vh - 50px);
  background-color: transparent;
  height: calc(100vh - 50px - constant(safe-area-inset-bottom));
  height: calc(100vh - 50px - env(safe-area-inset-bottom));
}

/*【程式切換】cate-fixed置頂後*/
.NavArea_vertical.cate-fixed .Nav_box {
  left: 0;
  width: 44px;
}

/*選單*/
.NavArea_vertical .Nav {
  z-index: 2;
  overflow: inherit;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  white-space: inherit;
  color: #fff;
}

/*按鈕區*/
.NavArea_vertical .Nav_Btn {
  display: none;
  z-index: 1;
  position: relative;
}

.NavArea_vertical .Nav_Btn li > b {
  display: none;
  padding: 0 10px;
  opacity: 0.75;
}

.NavArea_vertical .Nav_Btn li > b:before {
  content: attr(data-opentext);
  color: #fff;
}

.NavArea_vertical .Nav_Btn i {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer; /*box-shadow:-1px 0 3px rgba(150,150,150,0.1);*/
}

.NavArea_vertical .Nav_Btn i:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid #fff;
  border-width: 0 1px 1px 0;
  width: 20%;
  height: 20%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -70%) rotate(45deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*選單內容*/
.NavArea_vertical .Nav ul {
  padding-left: 0 !important;
  white-space: inherit;
}

.NavArea_vertical .Nav li,
.NavArea_vertical .Nav li > span,
.NavArea_vertical .Nav li > b {
  display: block;
  height: auto;
}

.NavArea_vertical .Nav a {
  padding: 15px 8px;
}

/*2019.01.02--新增高亮選單滑動的色塊*/
.NavArea_vertical .Nav-slidebg {
  border-left: 2px solid #fff;
  background-color: #660e1d;
}

/*只顯示在手機版*/
@media screen and (min-width: 768px) {
  .NavArea {
    display: none;
    width: 960px;
  }
}
.fixarea {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  z-index: 100;
  position: fixed;
  text-align: center;
  top: 85px;
  left: 20px;
}
.fixarea.fixarea_off {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fixarea .go_bt {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.fixarea .go_bt:hover {
  -webkit-filter: brightness(105%);
          filter: brightness(105%);
}
.fixarea ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fixarea ul:after {
  content: "";
  display: block;
  clear: both;
  position: absolute;
  top: 0;
  left: 0;
  width: 138px;
  height: 100%;
  z-index: -1;
  margin: auto;
  right: 0;
}
.fixarea li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  font-size: 15px;
}
.fixarea li:before, .fixarea li:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.fixarea li:before {
  width: 65%;
  bottom: 0;
  left: 50%;
  height: 1px;
}
.fixarea li a {
  display: block;
  text-decoration: none;
  color: #404040;
}
.fixarea li a:hover {
  color: #1eaabd;
}
.fixarea li.cate-hover a {
  color: #1eaabd;
}
.fixarea .fix_main ul {
  display: grid;
  grid-template-columns: repeat(1 minmax(0, 1fr));
  padding: 0 15px;
}
.fixarea .fix_main li:nth-last-child(1)::before {
  display: none;
}
.fixarea .fix_other_x2 {
  height: 230px;
}
.fixarea .fix_other_x2 ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 15px;
}
.fixarea .fix_other_x2 li:after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 100%;
}
.fixarea .fix_other_x2 li:before {
  width: 100%;
  bottom: 0;
  left: 50%;
  height: 1px;
}
.fixarea .fix_other_x2 li:nth-of-type(2n+2):after, .fixarea .fix_other_x2 li:last-child:after, .fixarea .fix_other_x2 li:last-child::before {
  display: none;
}
.fixarea .fix_other_x2 li:last-child {
  grid-column-start: 1;
  grid-column-end: 3;
}
.fixarea .fix_top {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
  left: 0px;
}
.fixarea .fix_top .fix_top_box {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.fixarea .fix_top .fix_top_box a {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 700px;
          perspective: 700px;
  position: relative;
  display: block;
}
.fixarea .fix_top .fix_top_box a img:nth-child(2),
.fixarea .fix_top .fix_top_box a .start-style {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.fixarea .fix_top .fix_top_box a img:nth-child(2) {
  -webkit-animation: star 5s forwards;
          animation: star 5s forwards;
}
.fixarea .fix_top .fix_top_box a .start-style img {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
@-webkit-keyframes star {
  0%, 40%, 80% {
    opacity: 0;
  }
  20%, 60%, 100% {
    opacity: 1;
  }
}
@keyframes star {
  0%, 40%, 80% {
    opacity: 0;
  }
  20%, 60%, 100% {
    opacity: 1;
  }
}
.fixarea .fix_top .fix_top_box::before, .fixarea .fix_top .fix_top_box::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.fixarea .fix_top .fix_top_box::before {
  background: #ececec;
  width: 100%;
  height: 110px;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 30px 30px 0 0;
}
.fixarea .fix_top::after {
  position: absolute;
  top: 30px;
  right: 19px;
  width: 34px;
  height: 0;
  padding-bottom: 33px;
  background-image: url(fixed_top_deco.png?t=1750139048538);
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
.fixarea .fix_top:hover::after {
  -webkit-animation: rotate 2s ease-in-out infinite;
  animation: rotate 2s ease-in-out infinite;
}
.fixarea .fix_title {
  position: relative;
  z-index: 2;
  background: #ececec;
}
.fixarea .fix_box {
  position: relative;
  margin: 0 auto;
  padding: 0;
  background: #ececec;
}
.fixarea .fix_box li {
  padding: 10px 2px;
}
.fixarea .fix_footer {
  background: #ececec;
  width: 100%;
  height: 30px;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  border-radius: 0 0 50px 50px;
}

.fixarea_tabbar {
  position: fixed;
  z-index: 99;
  top: 200px;
  right: 0px;
  border-radius: 20px 0 0 20px;
  width: 110px;
  background-color: rgba(0, 0, 0, 0.7);
  /*background:url(./fixarea_tabbar_repeat.png?t=1750139048538) repeat-y;*/
  text-align: center;
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.fixarea_tabbar.fixarea_off {
  -webkit-transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
          transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
}
.fixarea_tabbar .go_bt {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.fixarea_tabbar .go_bt:hover {
  -webkit-filter: brightness(105%);
          filter: brightness(105%);
}
.fixarea_tabbar .fix_box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 20px 5px 10px 15px;
}
.fixarea_tabbar .fix_box ul li {
  position: relative;
  margin: 0;
  padding: 10px 0;
  font: bold 15px/20px "微軟正黑體", "Microsoft JhengHei", Arial;
  /*錨點icon--用SVG格式(改顏色搜尋【fill%3A%23】)*/
}
.fixarea_tabbar .fix_box ul li:last-child {
  border-bottom: none;
}
.fixarea_tabbar .fix_box ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
}
.fixarea_tabbar .fix_box ul li a:hover {
  color: #ffff02;
}
.fixarea_tabbar .fix_box ul li i {
  display: block;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg%20id%3D%22navlight_icon%22%20data-name%3D%22navlight%20icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffff02%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M10%2C0A7.17%2C7.17%2C0%2C0%2C0%2C2.8%2C7.2C2.8%2C12.9%2C10%2C20%2C10%2C20s7.2-7.1%2C7.2-12.8A7.17%2C7.17%2C0%2C0%2C0%2C10%2C0Zm0%2C11a3.8%2C3.8%2C0%2C1%2C1%2C3.8-3.8A3.8%2C3.8%2C0%2C0%2C1%2C10%2C11Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center center/contain;
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.fixarea_tabbar .fix_box ul li.cate-hover a {
  color: #ffff02;
}
.fixarea_tabbar .fix_box ul li.cate-hover i {
  opacity: 1;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.fixarea_tabbar .fix_box ul li:not(:last-child):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 1px;
  background-color: rgba(184, 184, 184, 0.7);
}
.fixarea_tabbar .fix_footer {
  position: relative;
  margin: 0 0 10px 10px;
  font: bold 24px/1.5 "微軟正黑體", "Microsoft JhengHei", Arial;
}
.fixarea_tabbar .fix_footer a {
  display: block;
  padding-top: 11px;
  color: #fff;
}
.fixarea_tabbar .fix_footer a::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 8px 5px;
  border-color: transparent transparent #fff transparent;
}
.fixarea_tabbar .fix_footer a:hover {
  color: #ffff02;
}
.fixarea_tabbar .fix_footer a:hover::before {
  border-color: transparent transparent #ffff02 transparent;
}

.fixedfooterArea {
  z-index: 201;
  position: fixed;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 82px;
  text-align: center;
  font-size: 14px;
  line-height: 34px;
  color: #000;
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial;
  background-color: transparent;
  bottom: 55px;
  bottom: calc(55px + constant(safe-area-inset-bottom) * 0.6);
  bottom: calc(55px + env(safe-area-inset-bottom) * 0.6);
  /*把系統手機版原本的地關掉*/
}
.fixedfooterArea a {
  display: block;
  color: #454545;
  text-decoration: none;
}
.fixedfooterArea img {
  width: 100%;
  height: auto;
}
.fixedfooterArea .footerArea {
  display: none !important;
}
.fixedfooterArea .fixedBox_1 {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-animation: fixedBox_1-play 1s 1;
          animation: fixedBox_1-play 1s 1;
}
.fixedfooterArea .fixedBox_1 ul {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none outside none;
  white-space: nowrap;
}
.fixedfooterArea .fixedBox_1 ul li {
  z-index: 1;
  position: relative;
  display: inline-block;
  padding: 0;
  border-radius: 44px;
  height: 34px;
  -webkit-box-shadow: 0 1px 0 rgb(242, 242, 242), 0 0 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 0 rgb(242, 242, 242), 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.95);
}
.fixedfooterArea .fixedBox_1 ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 24px 0 20px;
}
.fixedfooterArea .fixedBox_1 ul li a span {
  width: 24px;
  height: 24px;
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cg%3E%20%3Crect%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3B%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23000%3B%22%20d%3D%22M29.3%2C11.9c0.4-0.6%2C0.5-1.3%2C0.3-1.9c-0.2-0.6-0.6-1.2-1.3-1.5l-3.7-2c-0.6-0.3-1.4-0.4-2.1-0.2%20c-0.7%2C0.2-1.3%2C0.6-1.6%2C1.2l-0.5%2C0.8l-1.8%2C2.8L14%2C18.3l-0.5%2C0.8l-0.6%2C8.2h-8v1.7h19.4v-1.7h-8.6l6.2-3.8%20C24.4%2C19.6%2C26.9%2C15.7%2C29.3%2C11.9z%20M22.6%2C8.3C22.7%2C8.2%2C22.8%2C8%2C23%2C8c0.2%2C0%2C0.4%2C0%2C0.6%2C0.1l3.7%2C2c0.2%2C0.1%2C0.3%2C0.3%2C0.4%2C0.4%20c0.1%2C0.2%2C0%2C0.4-0.1%2C0.5l-0.5%2C0.8L22%2C9.2L22.6%2C8.3z%20M20.9%2C10.9l1.1%2C0.6l-4.3%2C6.8l-1.1-0.6L20.9%2C10.9z%20M17.2%2C24.2l-2.1-1.1l0.3-3.7%20c0.8%2C0.3%2C1.6%2C0.9%2C2.3%2C1.8c1.2%2C0%2C2.3%2C0.2%2C3.1%2C0.8L17.2%2C24.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E);
}

.Fixedfooter {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial;
}
.Fixedfooter_box {
  z-index: 1;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 767px;
  height: 74px;
  height: calc(74px + constant(safe-area-inset-bottom) * 0.6);
  height: calc(74px + env(safe-area-inset-bottom) * 0.6);
}
.Fixedfooter_box {
  background-image: url(Fixedfooter_bg.png?t=1750139048538);
  background-size: cover;
  background-position: center top;
}
.Fixedfooter_box ul {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: grid;
  position: absolute;
  left: 0px;
  bottom: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  text-align: center;
}
.Fixedfooter_box ul[data-num="1"] {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.Fixedfooter_box ul[data-num="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.Fixedfooter_box ul[data-num="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.Fixedfooter_box ul[data-num="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.Fixedfooter_box ul[data-num="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.Fixedfooter_box ul li a {
  position: relative;
  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 nowrap;
          flex-flow: column nowrap;
  color: #fff;
  font: bold 13px/1 "Microsoft JhengHei", "微軟正黑體", Arial;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.Fixedfooter_box ul li a i {
  position: relative;
  display: block;
  margin: 0 auto 4px;
  width: 84%;
  height: 66px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.Fixedfooter_box ul li a span {
  margin-top: -4.3vw;
}
.Fixedfooter_box ul li.cate-hover a {
  color: #fff;
}
.Fixedfooter_box ul li:nth-of-type(1) i {
  background: url("Fixedfooter_icon_1.png?t=1750139048538") center center/contain no-repeat;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(1) i {
  background: none;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(1) i::after {
  content: "";
  background: url("Fixedfooter_icon_1_on.png?t=1750139048538") center center/contain no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-animation: bounce2 2s infinite;
          animation: bounce2 2s infinite;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(1) i.cate-hover:nth-of-type(1) i {
  z-index: 11;
}
.Fixedfooter_box ul li:nth-of-type(2) i {
  background: url("Fixedfooter_icon_2.png?t=1750139048538") center center/contain no-repeat;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(2) i {
  background: none;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(2) i::after {
  content: "";
  background: url("Fixedfooter_icon_2_on.png?t=1750139048538") center center/contain no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-animation: bounce2 2s infinite;
          animation: bounce2 2s infinite;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(2) i.cate-hover:nth-of-type(2) i {
  z-index: 11;
}
.Fixedfooter_box ul li:nth-of-type(3) i {
  background: url("Fixedfooter_icon_3.png?t=1750139048538") center center/contain no-repeat;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(3) i {
  background: none;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(3) i::after {
  content: "";
  background: url("Fixedfooter_icon_3_on.png?t=1750139048538") center center/contain no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-animation: bounce2 2s infinite;
          animation: bounce2 2s infinite;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(3) i.cate-hover:nth-of-type(3) i {
  z-index: 11;
}
.Fixedfooter_box ul li:nth-of-type(4) i {
  background: url("Fixedfooter_icon_4.png?t=1750139048538") center center/contain no-repeat;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(4) i {
  background: none;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(4) i::after {
  content: "";
  background: url("Fixedfooter_icon_4_on.png?t=1750139048538") center center/contain no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-animation: bounce2 2s infinite;
          animation: bounce2 2s infinite;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(4) i.cate-hover:nth-of-type(4) i {
  z-index: 11;
}
.Fixedfooter_box ul li:nth-of-type(5) i {
  background: url("Fixedfooter_icon_5.png?t=1750139048538") center center/contain no-repeat;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(5) i {
  background: none;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(5) i::after {
  content: "";
  background: url("Fixedfooter_icon_5_on.png?t=1750139048538") center center/contain no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-animation: bounce2 2s infinite;
          animation: bounce2 2s infinite;
}
.Fixedfooter_box ul li.cate-hover:nth-of-type(5) i.cate-hover:nth-of-type(5) i {
  z-index: 11;
}
@-webkit-keyframes bounce2 {
  0%, 100% {
    -webkit-transform: translateY(0) scale(1.1);
            transform: translateY(0) scale(1.1);
  }
  50% {
    -webkit-transform: translateY(-1vw) scale(1.1);
            transform: translateY(-1vw) scale(1.1);
  }
}
@keyframes bounce2 {
  0%, 100% {
    -webkit-transform: translateY(0) scale(1.1);
            transform: translateY(0) scale(1.1);
  }
  50% {
    -webkit-transform: translateY(-1vw) scale(1.1);
            transform: translateY(-1vw) scale(1.1);
  }
}
.Fixedfooter_box .bg {
  min-height: 100%;
}
.Fixedfooter_box .bg_transition {
  -webkit-transition: 1s cubic-bezier(0.43, -0.37, 0.4, 1.61);
  transition: 1s cubic-bezier(0.43, -0.37, 0.4, 1.61);
}
.Fixedfooter_box .bg:before {
  display: none;
  pointer-events: none;
  content: "";
  z-index: -1;
  position: absolute;
  bottom: -2vw;
  width: 20%;
  background-size: 100%;
  height: 135%;
  min-height: 84px;
  border-radius: 100px 100px 0 0;
}
.Fixedfooter_box:has(ul[data-num="3"]) .bg_transition::before {
  margin-left: 6.6%;
}
.Fixedfooter_box:has(ul[data-num="4"]) .bg_transition::before {
  margin-left: 2.3%;
}
.Fixedfooter_agree {
  z-index: 0;
  position: fixed;
  left: 0px;
  bottom: 0px;
  margin: 0 0 0 0;
  width: 100%;
  border-radius: 8px;
  -webkit-transform: translateY(150%);
          transform: translateY(150%);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  padding-bottom: 65px;
  padding-bottom: calc(65px + constant(safe-area-inset-bottom) * 0.6);
  padding-bottom: calc(65px + env(safe-area-inset-bottom) * 0.6);
  background: rgba(98, 186, 198, 0.95);
}
.Fixedfooter_agree ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1%;
  width: 100%;
  height: auto;
  margin: 0 0 0 0;
  padding: 3% 3% 7% 3%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}
.Fixedfooter_agree ul li {
  height: 30px;
  border-radius: 50px;
  text-align: center;
  background: #ffffff;
  margin: 4% 3.5%;
}
.Fixedfooter_agree ul li a {
  font: bolder 14px/30px "Microsoft JhengHei", "微軟正黑體", Arial;
  color: #000000;
}
.Fixedfooter_agree ul li.cate-hover {
  background: #ffff02;
}
.Fixedfooter_agree ul li.cate-hover a {
  color: #000000;
}
.Fixedfooter_agree1 {
  max-height: 70vh;
  overflow-y: scroll;
}
.Fixedfooter_agree1 ul li:first-child {
  background: #ffffff;
  grid-column-start: 1;
  grid-column-end: 4;
  border-radius: 7px;
  margin: 1%;
  height: 33px;
}
.Fixedfooter_agree1 ul li:first-child a {
  color: #000000;
}
.Fixedfooter_agree1 ul li.cate-hover {
  background: #ffff02;
}
.Fixedfooter_agree1 ul li.cate-hover a {
  color: #000000;
}
.Fixedfooter.cate-open .Fixedfooter_bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5019607843);
}
.Fixedfooter.cate-open .Fixedfooter_agree.cate-open {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

@-webkit-keyframes floating {
  0% {
    -webkit-filter: brightness(115%);
            filter: brightness(115%);
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

@keyframes floating {
  0% {
    -webkit-filter: brightness(115%);
            filter: brightness(115%);
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}
@-webkit-keyframes bouncing {
  0% {
    translate: 25px -40px;
    opacity: 0;
    scale: 0.6;
    -webkit-transform: rotate3d(0, 3, -1.5, 45deg);
            transform: rotate3d(0, 3, -1.5, 45deg);
  }
  5% {
    translate: 25px -40px;
    opacity: 0.9;
    scale: 0.6;
    -webkit-transform: rotate3d(0, 2, -1.5, 45deg);
            transform: rotate3d(0, 2, -1.5, 45deg);
  }
  100% {
    translate: 0px 0px;
    opacity: 1;
    scale: 1;
    -webkit-transform: rotate3d(0, 0, 10, 5deg);
            transform: rotate3d(0, 0, 10, 5deg);
  }
}
@keyframes bouncing {
  0% {
    translate: 25px -40px;
    opacity: 0;
    scale: 0.6;
    -webkit-transform: rotate3d(0, 3, -1.5, 45deg);
            transform: rotate3d(0, 3, -1.5, 45deg);
  }
  5% {
    translate: 25px -40px;
    opacity: 0.9;
    scale: 0.6;
    -webkit-transform: rotate3d(0, 2, -1.5, 45deg);
            transform: rotate3d(0, 2, -1.5, 45deg);
  }
  100% {
    translate: 0px 0px;
    opacity: 1;
    scale: 1;
    -webkit-transform: rotate3d(0, 0, 10, 5deg);
            transform: rotate3d(0, 0, 10, 5deg);
  }
}
@-webkit-keyframes bouncing2 {
  0% {
    rotate: 5deg;
  }
}
@keyframes bouncing2 {
  0% {
    rotate: 5deg;
  }
}
@-webkit-keyframes fadeIn-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
    visibility: hidden;
  }
}
@keyframes fadeIn-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
    visibility: hidden;
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*活動紀錄-動畫*/
@-webkit-keyframes fixedBox_1-play {
  0% {
    -webkit-transform: translate(0, 50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fixedBox_1-play {
  0% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@media screen and (max-width: 820px) {
  .fixarea, .fixarea_tabbar {
    display: none !important;
  }
}
/*共用--區塊背景*/
.Area_boxstyle--hasBackdrop {
  position: relative;
}

@media screen and (min-width: 768px) {
  .Area_boxstyle {
    /* 區塊大背景 */
    container-type: inline-size;
  }
  .Area_boxstyle.Area_boxstyle--hasBackdrop {
    margin: 180px auto 150px;
  }
  .Area_boxstyle.Area_boxstyle--hasBackdrop:before {
    z-index: -1;
    content: "";
    width: 2000px;
    height: calc(100% + 80px);
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: -30px;
    background: url(Area_boxstyle_hasbg_top.png?t=1750139048538) top center/100% no-repeat, url(Area_boxstyle_hasbg_bottom.png?t=1750139048538) bottom center/100% no-repeat, url(Area_boxstyle_hasbg_center.png?t=1750139048538) bottom center/100% repeat-y;
  }
  .Area_boxstyle.Area_boxstyle--hasBackdrop .Area_boxstyle_box {
    background: url(Area_boxstyle_top_hasbg.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom1.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center1.png?t=1750139048538) center top 115px/100% calc(100% - 140px) no-repeat;
  }
  .Area_boxstyle.Area1220 .Area_boxstyle_box {
    background-size: 960px auto;
  }
  .Area_boxstyle.Area_PD .Area_boxstyle_box {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
  .Area_boxstyle_title {
    margin: 0;
    padding: 0;
    position: absolute;
    inset-block-start: 41px;
    inset-inline-start: 50%;
    z-index: 2;
    font: 46px "Century Gothic", Noto Sans TC, sans-serif, "微軟正黑體", system-ui, Helvetica, Arial;
    color: #000000;
    overflow: hidden;
    width: 40%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align: center;
    font-weight: 700;
  }
  .Area_boxstyle .Area_boxstyle_box1 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 25px;
            padding-block-end: 25px;
    -webkit-padding-start: 18px;
            padding-inline-start: 18px;
    -webkit-padding-end: 18px;
            padding-inline-end: 18px;
    background: url(Area_boxstyle_top1.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom1.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center1.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 25px )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box2 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 25px;
            padding-block-end: 25px;
    -webkit-padding-start: 18px;
            padding-inline-start: 18px;
    -webkit-padding-end: 18px;
            padding-inline-end: 18px;
    background: url(Area_boxstyle_top2.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom2.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center2.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 25px )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box3 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 25px;
            padding-block-end: 25px;
    -webkit-padding-start: 18px;
            padding-inline-start: 18px;
    -webkit-padding-end: 18px;
            padding-inline-end: 18px;
    background: url(Area_boxstyle_top3.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom3.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center3.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 25px )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box4 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 25px;
            padding-block-end: 25px;
    -webkit-padding-start: 18px;
            padding-inline-start: 18px;
    -webkit-padding-end: 18px;
            padding-inline-end: 18px;
    background: url(Area_boxstyle_top4.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom4.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center4.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 25px )) no-repeat;
  }
  .Area_boxstyle .btn_more {
    position: absolute;
    inset-block-start: 40px;
    inset-inline-start: calc(50% + 340px);
    z-index: 101;
  }
}
@container (width = 960px) {
  .Area_boxstyle .Area_boxstyle_box1 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 10px;
            padding-block-end: 10px;
    -webkit-padding-start: 17px;
            padding-inline-start: 17px;
    -webkit-padding-end: 17px;
            padding-inline-end: 17px;
    background: url(Area_boxstyle_top1.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom1.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center1.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 10px )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box2 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 10px;
            padding-block-end: 10px;
    -webkit-padding-start: 17px;
            padding-inline-start: 17px;
    -webkit-padding-end: 17px;
            padding-inline-end: 17px;
    background: url(Area_boxstyle_top2.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom2.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center2.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 10px )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box3 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 10px;
            padding-block-end: 10px;
    -webkit-padding-start: 17px;
            padding-inline-start: 17px;
    -webkit-padding-end: 17px;
            padding-inline-end: 17px;
    background: url(Area_boxstyle_top3.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom3.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center3.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 10px )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box4 {
    -webkit-padding-before: 150px;
            padding-block-start: 150px;
    -webkit-padding-after: 10px;
            padding-block-end: 10px;
    -webkit-padding-start: 17px;
            padding-inline-start: 17px;
    -webkit-padding-end: 17px;
            padding-inline-end: 17px;
    background: url(Area_boxstyle_top4.png?t=1750139048538) top center/contain no-repeat, url(Area_boxstyle_bottom4.png?t=1750139048538) bottom center/contain no-repeat, url(Area_boxstyle_center4.png?t=1750139048538) center top 150px/100% calc(100% - ( 150px + 10px )) no-repeat;
  }
  .Area_boxstyle_title {
    margin: 0;
    padding: 0;
    position: absolute;
    inset-block-start: 41px;
    inset-inline-start: 50%;
    z-index: 2;
    font: 46px "Century Gothic", Noto Sans TC, sans-serif, "微軟正黑體", system-ui, Helvetica, Arial;
    color: #000;
    overflow: hidden;
    width: 60%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align: center;
    font-weight: 700;
  }
  .Area_boxstyle .btn_more {
    position: absolute;
    inset-block-start: 50px;
    inset-inline-start: calc(100% - 100px);
    z-index: 101;
  }
}
@media screen and (max-width: 767px) {
  .Area_boxstyle {
    /* 區塊大背景 */
  }
  .Area_boxstyle.Area_boxstyle--hasBackdrop {
    margin: calc(5vw + 24px) auto calc(5vw + 24px);
  }
  .Area_boxstyle.Area_boxstyle--hasBackdrop:before {
    z-index: -1;
    content: "";
    width: 100vw;
    height: calc(100% - 2vw);
    position: absolute;
    left: 0;
    top: -2vw;
    background: url(m_Area_boxstyle_hasbg_top.png?t=1750139048538) top center/100% no-repeat, url(m_Area_boxstyle_hasbg_bottom.png?t=1750139048538) bottom center/100% no-repeat, url(m_Area_boxstyle_hasbg_center.png?t=1750139048538) bottom center/100% repeat-y;
  }
  .Area_boxstyle.Area_boxstyle--hasBackdrop .Area_boxstyle_title {
    color: #000;
  }
  .Area_boxstyle.Area_boxstyle--hasBackdrop .Area_boxstyle_box {
    background: url(m_Area_boxstyle_top_hasbg.png?t=1750139048538) top center/contain no-repeat, url(m_Area_boxstyle_hasbg_bottom.png?t=1750139048538) bottom center/contain no-repeat, url(m_Area_boxstyle_hasbg_center.png?t=1750139048538) center top 16.5vw/100% calc(100% - 19.5vw) no-repeat;
  }
  .Area_boxstyle_title {
    margin: 0;
    padding: 0;
    position: absolute;
    inset-block-start: 4.7vw;
    inset-inline-start: 50%;
    z-index: 2;
    font: 5.1vw "Century Gothic", Noto Sans TC, sans-serif, "微軟正黑體", system-ui, Helvetica, Arial;
    color: #000;
    overflow: hidden;
    width: 60%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align: center;
    font-weight: 700;
  }
  .Area_boxstyle .Area_boxstyle_box1 {
    -webkit-padding-before: 17vw;
            padding-block-start: 17vw;
    -webkit-padding-after: 5vw;
            padding-block-end: 5vw;
    -webkit-padding-start: 2vw;
            padding-inline-start: 2vw;
    -webkit-padding-end: 2vw;
            padding-inline-end: 2vw;
    background: url(m_Area_boxstyle_top1.png?t=1750139048538) top center/contain no-repeat, url(m_Area_boxstyle_bottom1.png?t=1750139048538) bottom center/contain no-repeat, url(m_Area_boxstyle_center1.png?t=1750139048538) center top 17vw/100% calc(100% - ( 17vw + 5vw )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box2 {
    -webkit-padding-before: 17vw;
            padding-block-start: 17vw;
    -webkit-padding-after: 5vw;
            padding-block-end: 5vw;
    -webkit-padding-start: 2vw;
            padding-inline-start: 2vw;
    -webkit-padding-end: 2vw;
            padding-inline-end: 2vw;
    background: url(m_Area_boxstyle_top2.png?t=1750139048538) top center/contain no-repeat, url(m_Area_boxstyle_bottom2.png?t=1750139048538) bottom center/contain no-repeat, url(m_Area_boxstyle_center2.png?t=1750139048538) center top 17vw/100% calc(100% - ( 17vw + 5vw )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box3 {
    -webkit-padding-before: 17vw;
            padding-block-start: 17vw;
    -webkit-padding-after: 5vw;
            padding-block-end: 5vw;
    -webkit-padding-start: 2vw;
            padding-inline-start: 2vw;
    -webkit-padding-end: 2vw;
            padding-inline-end: 2vw;
    background: url(m_Area_boxstyle_top3.png?t=1750139048538) top center/contain no-repeat, url(m_Area_boxstyle_bottom3.png?t=1750139048538) bottom center/contain no-repeat, url(m_Area_boxstyle_center3.png?t=1750139048538) center top 17vw/100% calc(100% - ( 17vw + 5vw )) no-repeat;
  }
  .Area_boxstyle .Area_boxstyle_box4 {
    -webkit-padding-before: 17vw;
            padding-block-start: 17vw;
    -webkit-padding-after: 5vw;
            padding-block-end: 5vw;
    -webkit-padding-start: 2vw;
            padding-inline-start: 2vw;
    -webkit-padding-end: 2vw;
            padding-inline-end: 2vw;
    background: url(m_Area_boxstyle_top4.png?t=1750139048538) top center/contain no-repeat, url(m_Area_boxstyle_bottom4.png?t=1750139048538) bottom center/contain no-repeat, url(m_Area_boxstyle_center4.png?t=1750139048538) center top 17vw/100% calc(100% - ( 17vw + 5vw )) no-repeat;
  }
  .Area_boxstyle .btn_more {
    position: absolute;
    inset-block-start: 5vw;
    inset-inline-start: calc(100% - 16vw);
    z-index: 101;
    width: 16vw;
  }
}
.Area_boxstyle .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.4;
  border-radius: 20px;
  width: 6px;
  height: 6px;
  -webkit-transition: opacity 0.3s, background-color 0.3s, width 0.3s;
  transition: opacity 0.3s, background-color 0.3s, width 0.3s;
  -webkit-transition-delay: 0.3s, 0.3s, 0s;
          transition-delay: 0.3s, 0.3s, 0s;
}
.Area_boxstyle .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  opacity: 1;
}
.Area_boxstyle .swiper-button-next, .Area_boxstyle .swiper-button-prev {
  color: black;
}
.Area_boxstyle .swiper-button-next::before, .Area_boxstyle .swiper-button-prev::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
  width: calc(var(--swiper-navigation-size) * 1.75);
  height: calc(var(--swiper-navigation-size) * 1.75);
  background: rgba(255, 255, 255, 0.7);
}
.Area_boxstyle .swiper-button-next::after, .Area_boxstyle .swiper-button-prev::after {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

/*輪播樣式調整--按鈕/小圓點/進度條*/
.is-showhover2.Area_boxstyle_button.swiper-button-next::before {
  border-radius: 50% 0 0 50%;
}

.is-showhover2.Area_boxstyle_button.swiper-button-prev::before {
  border-radius: 0 50% 50% 0;
}

.Area_boxstyle_scrollbar.swiper-scrollbar {
  left: 2%;
  width: 96%;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.2);
}

.Area_boxstyle_scrollbar .swiper-scrollbar-drag {
  background: #fff;
}

.Area_boxstyle_scrollbar-white .swiper-scrollbar-drag {
  background: #fff;
}

/**
 * Swiper 5.2.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2019 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 16, 2019
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
          transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.swiper-container-multirow-column > .swiper-wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

.swiper-container-3d {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}

.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {
  --swiper-navigation-color: #000000;
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 0.3s opacity;
  transition: 0.3s opacity;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
          transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
          transform: translate3d(0px, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 8px;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: 0.2s top, 0.2s -webkit-transform;
  transition: 0.2s top, 0.2s -webkit-transform;
  transition: 0.2s transform, 0.2s top;
  transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 0.2s left, 0.2s -webkit-transform;
  transition: 0.2s left, 0.2s -webkit-transform;
  transition: 0.2s transform, 0.2s left;
  transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform;
}

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 0.2s right, 0.2s -webkit-transform;
  transition: 0.2s right, 0.2s -webkit-transform;
  transition: 0.2s transform, 0.2s right;
  transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform;
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-container-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}

.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  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;
  text-align: center;
}

.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s infinite linear;
          animation: swiper-preloader-spin 1s infinite linear;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube {
  overflow: visible;
}

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next + .swiper-slide,
.swiper-container-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}

.swiper-container-flip {
  overflow: visible;
}

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 100px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
@font-face {
  font-family: Microsoft JhengHei;
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: normal;
  src: local(Microsoft JhengHei);
}
@media screen and (min-width: 768px) {
  .Area_PD .PD_layout ul::after {
    position: relative;
    width: 100%;
    background: url(Area_hotPD_bg.png?t=1750139048539) no-repeat center;
    background-size: 96%;
  }
}
@media screen and (max-width: 767px) {
  .Area_PD .PD_layout ul::after {
    position: relative;
    width: 100%;
    background: url(Area_hotPD_bg.png?t=1750139048539) no-repeat center;
    background-size: 96%;
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="5"] ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .PD_layout[data-pd-col-pc="4"] ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .PD_layout[data-pd-col-pc="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="2"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .PD_layout[data-pd-col-phone="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.Area_boxstyle .swiper-button-next::before, .Area_boxstyle .swiper-button-prev::before {
  background: RGB(255 255 255/0);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.Area_boxstyle .swiper-button-next:hover::before,
.Area_boxstyle .swiper-button-prev:hover::before {
  background: rgba(255, 255, 255, 0.7) !important;
}

/*置底注意事項*/
.edm_notice {
  font: 12px/18px Helvetica;
  text-align: center;
  padding: 10px 10px 15px 10px;
  color: #000000;
}
@media screen and (max-width: 767px) {
  .edm_notice {
    padding: 10px 10px 200px 10px;
  }
}

.edm_notice .apple_notice {
  padding: 10px 0px 10px 0px;
}

@media screen and (min-width: 768px) {
  .pc_deco1 {
    z-index: -2;
    position: fixed;
    top: 500px;
    right: 20px;
    width: 100%;
    height: 100%;
  }
  .pc_deco2 {
    z-index: -2;
    position: fixed;
    top: 500px;
    left: 20px;
    width: 100%;
    height: 100%;
  }
}/*# sourceMappingURL=main.min.css.map */