#features-section { background: #fff; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; position: relative; z-index: 2; padding: 0; }
#features-section .iframebox { display: grid; grid-template-columns: repeat(4,1fr); }
#features-section .feature-item { padding: 60px 40px; text-align: center; border-right: 1px solid #eaeaea; transition: background 0.3s ease; }
#features-section .feature-item:last-child { border-right: none; }
#features-section .feature-item:hover { background: #faf9f6; }
#features-section .feature-icon {position: relative;width: 48px;height: 48px;margin: 5px auto 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: #EAF3F8;color: #2C85B8;border: #4688ad 2px solid;}
#features-section .feature-icon:before{content:"";position: absolute;width: 170%;aspect-ratio: 1/1;border: rgb(44 133 184 / 33%) 1px solid;border-radius: 6666px;}
#features-section .feature-title {font-size: 1.2rem;font-weight: 600;margin-bottom: 10px;color: #1a1a1a;text-align: center;}
#features-section .feature-desc {font-size: 0.9rem;color: #666;line-height: 1.5;text-align: center;}
#hotspots-section {padding: 120px 0;background: #f8f8f8;}
#hotspots-section .iframebox { display: flex; align-items: center; gap: 80px; }
#hotspots-section .text-content { flex: 1; }
#hotspots-section .hero-desc-margin { margin-bottom: 30px; }
#hotspots-section .stats-container { display: flex; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; }
#hotspots-section .stat-number-wrapper {font-size: 2rem;font-weight: 400;color: #2C85B8;line-height: 1;margin-bottom: 2px;display: flex;align-items: baseline;}

#hotspots-section .stat-number-wrapper span {display: inline-block;font-size: 2.45rem;color: #2C85B8;font-weight: 700;line-height: 1.5;}
#hotspots-section .stat-label { font-size: 0.95rem; color: #666; font-weight: 500; letter-spacing: 0.05em; }
#hotspots-section .image-wrapper {flex: 1.2;position: relative;border-radius: 24px;box-shadow: 0 30px 60px rgba(0,0,0,0.08);}
#hotspots-section .image-wrapper img {width: 100%;object-fit: cover;transition: transform 0.7s ease;aspect-ratio: 1024/795;border: #ffffff 6px solid;}
#hotspots-section .image-wrapper:hover img {}
#hotspots-section .hotspot { position: absolute; z-index: 10; display: flex; align-items: center; cursor: pointer; }
#hotspots-section .hotspot-1 {top: 25%;left: 75%;}
#hotspots-section .hotspot-2 {top: 55%;left: 29%;}
#hotspots-section .hotspot-3 {top: 80%;left: 76%;}
#hotspots-section .dot {width: 16px;height: 16px;background: #fff;border: 3px solid #2C85B8;border-radius: 50%;box-shadow: 0 0 0 6px rgba(255,255,255,0.4);position: relative;transition: transform 0.3s ease;animation: floatUpDown 2s ease-in-out infinite;}
#hotspots-section .dot::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 4px;height: 4px;background: #2C85B8;border-radius: 50%;}
#hotspots-section .hotspot:hover .dot {transform: scale(1.2);box-shadow: 0 0 0 8px rgba(255,255,255,0.6);}
#hotspots-section .dot-line {position: absolute;top: 50%;width: 60px;left: -60px;height: 1px;background: #2C85B8;transform: translateY(-50%);opacity: 1;transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);}
#hotspots-section .hotspot-1 .dot-line { left: 16px; }
#hotspots-section .info-card { position: absolute; left: 86px; top: 50%; transform: translateY(-50%) translateX(-170%); background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); padding: 16px 24px; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); opacity: 1; pointer-events: none; transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); width: max-content; border: #2c85b8 2px solid; }
#hotspots-section .hotspot-1 .info-card { transform: translateY(-50%) translateX(-10%); }
#hotspots-section .info-title { font-weight: 600; font-size: 1rem; color: #1a1a1a; margin-bottom: 4px; }
#hotspots-section .info-desc { font-size: 0.85rem; color: #666; }

@keyframes floatUpDown {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}



/*deals-section*/
#deals-section {padding: 120px 0;background: #ffffff;}
#deals-section .bento-grid {display: grid;grid-template-columns: repeat(4,1fr);grid-auto-rows: 280px;gap: 24px;padding-top: 40px;}
#deals-section .bento-card { border-radius: 30px; overflow: hidden; position: relative; background: #fff; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: transform 0.4s ease,box-shadow 0.4s ease; display: flex; flex-direction: column; }
#deals-section .bento-card.bordecolor{border: #e5e5e5 2px solid;}
#deals-section .bento-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
#deals-section .card-large {grid-column: span 2;grid-row: span 2;background: linear-gradient(135deg,#f5f7fa 0%,#e4e8ec 100%);overflow: visible;}
#deals-section .card-large img{border-radius: 20px 20px 20px 20px;}
#deals-section .card-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; z-index: 0; transition: transform 0.7s ease; }
#deals-section .bento-card:hover .card-bg-img { transform: scale(1.05); }
#deals-section .card-large.bento-card:hover img{transform: scale(1);}
#deals-section .card-large:before{/* content:""; */width: 100%;height: 110%;position: absolute;border: rgb(44 133 184) 2px solid;z-index: 2;top: -25px;left: -25px;border-radius: 20px 10px 20px;}

/* 焦點卡片樣式設計 */
#deals-section .card-focal .card-bg-img { opacity: 0.95; }
#deals-section .focal-tag { background: #1a1a1a; color: #fff; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); border: none; }
#deals-section .focal-info-box { background: rgba(255,255,255,0.95); backdrop-filter: blur(15px); padding: 32px; border-radius: 20px; width: 90%; max-width: 420px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275); margin-top: auto; }
#deals-section .card-focal:hover .focal-info-box { transform: translateY(-10px); }
#deals-section .focal-action {display: flex;align-items: center;gap: 12px;margin-top: 20px;}
#deals-section .focal-action-text { font-weight: 700; color: #1a1a1a; font-size: 0.95rem; letter-spacing: 0.05em; transition: color 0.3s ease; }
#deals-section .focal-info-box .focal-action{}
#deals-section .card-focal:hover .focal-action-text { color: #2C85B8; }
#deals-section .focal-btn { width: 40px; height: 40px; background: #1a1a1a; }
#deals-section .card-focal:hover .focal-btn { background: #2C85B8; transform: scale(1.1) rotate(-45deg); }


#deals-section .card-bg-contain {object-fit: cover;opacity: 0;top: 0;}
#deals-section .card-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
#deals-section .card-content-contact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 30px; }

/* deals-section  */
#deals-section .card-bottom-row {margin-top: auto;display: flex;justify-content: space-between;align-items: flex-end;gap: 16px;margin-bottom: 30px;}
#deals-section .card-tag { display: inline-block; background: #fff; padding: 6px 16px; border-radius: 30px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; color: #2C85B8; width: max-content; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
#deals-section .tag-light { background: #EAF3F8; }
#deals-section .tag-outline { border: 1px solid #eaeaea; color: #2C85B8; }
#deals-section .tag-transparent {background: rgba(255,255,255,0.2);color: #fff;margin-bottom: 2px;box-shadow: none;}
#deals-section .card-title { font-size: 2.2rem; font-weight: 600; color: #1a1a1a; margin-top: auto; margin-bottom: 10px; }
#deals-section .title-white { color: #fff; font-size: 2rem; margin-bottom: 16px; margin-top: 0; }
#deals-section .card-desc , #deals-section .card-desc p {font-size: 0.9rem;color: #555;max-width: 100%;}
#deals-section .desc-full { max-width: 100%; }
#deals-section .desc-white {color: rgba(255,255,255,0.9);font-size: 0.9rem;line-height: 1.8;max-width: 100%;}
#deals-section .desc-white *{color:white;font-size: 0.9rem;}
#deals-section .info-title {font-size: 1.8rem;font-weight: 600;}
#deals-section .info-title-small {font-size: 1.8rem;}
#deals-section .desc-margin { margin-top: 8px; }
#deals-section .action-btn {width: 48px;height: 48px;flex-shrink: 0;background: #2C85B8;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: transform 0.3s ease;position: absolute;right: -20px;bottom: -20px;}
#deals-section .focal-info-box .action-btn { position: relative; right: unset; bottom: unset; }
#deals-section .bento-card:hover .action-btn { transform: scale(1.1) rotate(-45deg); }
#deals-section .btn-light { background: #EAF3F8; color: #2C85B8; }
#deals-section .contact-card {grid-column: span 2;background: #2C85B8;color: #fff;border-radius: 40px 10px 40px 10px;}
#deals-section .contact-info-col { flex: 1; min-width: 250px; }
#deals-section .contact-btn-col { display: flex; flex-direction: column; gap: 12px; min-width: 260px; flex: 1; }
#deals-section .notice-box { display: block; padding: 10px 16px; background: rgba(0,0,0,0.15); border-radius: 8px; font-size: 0.95rem; color: #fff; text-align: center; font-weight: 500; margin-bottom: 4px; }
/* products-section */
#products-section {padding: 120px 0;background: url(/images/46/img_bg.jpg);}
#products-section .product-slider { margin: 0 -15px; }
#products-section .product-card {text-align: center;cursor: pointer;padding: 0 15px;outline: none;position: relative;}
#products-section .product-card:hover .img-box{}
#products-section .img-box {position: relative;border-radius: 16px;overflow: hidden;background: #f8f8f8;aspect-ratio: 4/5;margin-bottom: 20px;display: flex;align-items: center;justify-content: center;padding: 20px;transition: background 0.3s ease;border: #ffffff 3px solid;}
#products-section .product-card:hover .img-box {background: #EAF3F8;box-shadow: 0px 1px 8px rgb(80 80 80 / 8%);}
#products-section .img-box img { max-height: 100%; object-fit: contain; transition: transform 0.5s ease; mix-blend-mode: multiply; }
#products-section .product-card:hover .img-box img { transform: scale(1.08); }
#products-section .product-name { font-weight: 500; font-size: 1.05rem; margin-bottom: 8px; color: #1a1a1a; }
#products-section .slick-dots {display: flex;justify-content: center;list-style: none;margin: 50px 0 0;gap: 4px;padding: 0;position: relative;bottom: unset;}
#products-section .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 8px; height: 8px; padding: 0; cursor: pointer; color: transparent; border: 0; outline: none; background: #e0e0e0; border-radius: 50%; transition: all 0.3s ease; }
#products-section .slick-dots li.slick-active button { background: #2C85B8; width: 24px; border-radius: 4px; }
#products-section .btn-center-wrapper { text-align: center; margin-top: 60px; }
#products-section .slick-dots li button:before{display:none;}
#products-section .slick-dots li { width: auto; height: auto; }


@media (max-width:1680px){
  #hotspots-section .hotspot-1 {top: 25%;left: 61%;}
#hotspots-section .hotspot-2 {top: 55%;left: 29%;}
#hotspots-section .hotspot-3 {top: 80%;left: 76%;}
}
@media (max-width:1200px) {
  #features-section .iframebox {grid-template-columns: repeat(2,1fr);width: 100%;}
  #features-section .feature-item { border-bottom: 1px solid #eaeaea; }
  #features-section .feature-item:nth-child(2n) { border-right: none; }
  #deals-section .bento-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:992px) {
  #hotspots-section { padding: 80px 0; }
  #hotspots-section .iframebox { flex-direction: column; }
  #hotspots-section .image-wrapper { width: 100%; }
  #hotspots-section .stats-container { gap: 20px; }
  #hotspots-section .hotspot-1 {top: 25%;left: 5%;}
#hotspots-section .hotspot-2 {top: 55%;left: 80%;}
#hotspots-section .hotspot-3 {top: 80%;left: 80%;}
  #hotspots-section .image-wrapper img{
    aspect-ratio: 1024 / 1300;
}
}
@media (max-width:768px) {
  #features-section .feature-item { padding: 25px 20px; }
  #deals-section .bento-grid { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  #deals-section .card-large { grid-column: span 2; grid-row: span 2; padding: 20px 20px; }
  #deals-section .card-title { font-size: 1.8rem; }
  #deals-section .card-content { gap: 30px; }
  #deals-section .focal-info-box { width: 100%; }
  #deals-section .contact-card { padding: 30px 20px; }
  #deals-section { padding: 100px 0; }
  #hotspots-section .image-wrapper{display:none;}
}