* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .my-banner-container {
            max-width: 100%;
            width: 100%;
        }
        
        .banner-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            margin-bottom: 40px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .banner-link {
            display: block;
            width: 100%;
            text-decoration: none;
            color: inherit;
        }
        
        .banner {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 0 10px;
            cursor: pointer;
	    margin-top:2px;
        }
        
        .banner-link:hover .banner {
            transform: scale(1.02);
            filter: brightness(1.05);
            z-index: 10;
        }
        
        .banner-link:hover .banner::after {
            content: "↗";
            position: absolute;
            right: 15px;
            top: 60%;
            transform: translateY(-50%);
            font-size: 18px;
            opacity: 0.8;
            z-index: 3;
        }
        
        .banner-content {
            display: flex;
            align-items: center;
            width: 100%;
        }
        
        .icon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .text-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1;
        }
        
        .banner-main-text {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 3px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }
        
        .banner-sub-text {
            font-size: 12px;
            font-weight: 500;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            z-index: 2;
        }
        
        .snow-bg::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 100%);
            z-index: 1;
        }

	/*winter*/
        
        .banner-1 {
            background: 
                linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%),
                radial-gradient(circle at 20% 80%, #ffeb3b 0%, transparent 20%),
	        linear-gradient(to bottom, #e1f5fe 0%, #b3e5fc 100%);
            color: #01579b;
	}
        

        
        .banner-2 {
            background: 
                linear-gradient(135deg, #81d4fa 0%, #4fc3f7 100%),
                radial-gradient(circle at 10% 10%, white 2%, transparent 3%),
                radial-gradient(circle at 30% 40%, white 2%, transparent 3%),
                radial-gradient(circle at 70% 20%, white 2%, transparent 3%),
                radial-gradient(circle at 80% 60%, white 2%, transparent 3%),
                radial-gradient(circle at 40% 80%, white 2%, transparent 3%);
            background-size: 100% 100%, 10px 10px, 8px 8px, 12px 12px, 6px 6px, 9px 9px;
            color: #01579b;
        }
        
        .banner-2.snow-bg::before {
            background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
        }
        
        .banner-3 {
            background: 
                linear-gradient(135deg, #29b6f6 0%, #0288d1 100%),
                linear-gradient(45deg, transparent 30%, white 30%, white 35%, transparent 35%, transparent 65%, white 65%, white 70%, transparent 70%),
                linear-gradient(-45deg, transparent 30%, white 30%, white 35%, transparent 35%, transparent 65%, white 65%, white 70%, transparent 70%);
            background-size: 100% 100%, 40px 40px, 40px 40px;
            color: white;
        }
        
        .banner-3.snow-bg::before {
            background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
        }
        
        .banner-4 {
            background: 
                linear-gradient(135deg, #4fc3f7 0%, #81d4fa 100%),
                linear-gradient(45deg, transparent 70%, #388e3c 70%, #388e3c 72%, transparent 72%),
                linear-gradient(-45deg, transparent 70%, #388e3c 70%, #388e3c 72%, transparent 72%),
                linear-gradient(45deg, transparent 40%, #388e3c 40%, #388e3c 42%, transparent 42%),
                linear-gradient(-45deg, transparent 40%, #388e3c 40%, #388e3c 42%, transparent 42%),
                linear-gradient(45deg, transparent 10%, #388e3c 10%, #388e3c 12%, transparent 12%),
                linear-gradient(-45deg, transparent 10%, #388e3c 10%, #388e3c 12%, transparent 12%);
            background-size: 100% 100%, 60px 60px, 60px 60px, 40px 40px, 40px 40px, 20px 20px, 20px 20px;
            color: #01579b;
        }
        
        .banner-4.snow-bg::before {
            background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 100%);
        }
        
        .banner-5 {
            background: 
                linear-gradient(135deg, #0288d1 0%, #0277bd 100%),
                radial-gradient(circle at 20% 30%, transparent 20%, #b3e5fc 20%, #b3e5fc 25%, transparent 25%),
                radial-gradient(circle at 50% 70%, transparent 20%, #b3e5fc 20%, #b3e5fc 25%, transparent 25%),
                radial-gradient(circle at 80% 40%, transparent 20%, #b3e5fc 20%, #b3e5fc 25%, transparent 25%);
            background-size: 100% 100%, 40px 40px, 30px 30px, 35px 35px;
            color: white;
        }
        
        .banner-5.snow-bg::before {
            background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 100%);
        }

        .info-box {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            max-width: 300px;
            margin: 0 auto;
        }
        
        .info-box h2 {
            color: #01579b;
            margin-bottom: 15px;
            font-size: 1.5rem;
        }
        
        .info-box p {
            margin-bottom: 15px;
            line-height: 1.6;
            color: #546e7a;
        }
        
        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        
        .feature {
            background: #e1f5fe;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            color: #01579b;
        }
        
        /* 響應式設計 */
        @media (max-width: 400px) {
            .container {
                padding: 15px;
            }
            
            .banner-container {
                max-width: 100%;
            }
            
        }


.banner-1,
.banner-2,
.banner-3,
.banner-4,
.banner-5,.autumn-banner-1 {
    position: relative;
    overflow: hidden;
}

.banner-1::before,.banner-2::before,.banner-3::before,.banner-4::before,.banner-5::before,
.autumn-banner-1.autumn-bg::before,.autumn-banner-2.autumn-bg::before,.autumn-banner-3.autumn-bg::before,.autumn-banner-4.autumn-bg::before,.autumn-banner-5.autumn-bg::before
,
.spring-banner-1.spring-bg::before,.spring-banner-2.spring-bg::before,.spring-banner-3.spring-bg::before,.spring-banner-4.spring-bg::before,.spring-banner-5.spring-bg::before,
.summer-banner-1.summer-bg::before,.summer-banner-2.summer-bg::before,.summer-banner-3.summer-bg::before,.summer-banner-4.summer-bg::before,.summer-banner-5.summer-bg::before
{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );
    transform: rotate(45deg);
    animation: winter-shine 3s infinite;
    z-index: 1;
}

@keyframes winter-shine {
    0% {
        transform: rotate(45deg) translateX(-100%);
    }
    100% {
        transform: rotate(45deg) translateX(100%);
    }
}

/* icon emoji */
.banner-1 .icon,.banner-2 .icon,.banner-3 .icon,.banner-4 .icon,.banner-5 .icon,
.autumn-banner-1 .icon,.autumn-banner-2 .icon,.autumn-banner-3 .icon,.autumn-banner-4 .icon,.autumn-banner-5 .icon,
.spring-banner-1 .icon,.spring-banner-2 .icon,.spring-banner-3 .icon,.spring-banner-4 .icon,.spring-banner-5 .icon,
.summer-banner-1 .icon,.summer-banner-2 .icon,.summer-banner-3 .icon,.summer-banner-4 .icon,.summer-banner-5 .icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px; /* emoji 大小 */
}

/* winter animation effect */
.banner-1 .icon {
    animation: winter-bounce 2s infinite;
}
.banner-2 .icon {
    animation: winter-swing 3s infinite;
}
.banner-3 .icon {
    animation: winter-pulse 2s infinite;
}
.banner-4 .icon {
    animation: winter-float 4s infinite;
}
.banner-5 .icon {
    animation: winter-spin 3s infinite;
}

/* animation */
@keyframes winter-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes winter-swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    75% {
        transform: rotate(-10deg);
    }
}

@keyframes winter-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes winter-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-6px) rotate(5deg);
    }
    66% {
        transform: translateY(4px) rotate(-3deg);
    }
}

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

/*End of winter*/

/*autumn*/
.autumn-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    z-index: 1;
}

.autumn-banner-1 {
    background:
        linear-gradient(135deg, #FFD1A4 0%, #ffa726 100%),
        radial-gradient(circle at 20% 30%, #ffe0b2 3%, transparent 4%),
        radial-gradient(circle at 80% 70%, #ffcc80 2%, transparent 3%);
    background-size: 100% 100%, 60px 60px, 55px 55px;
    color: #e65100;
}
.autumn-banner-1 .icon {
    animation: winter-spin 5s infinite;
}

.autumn-banner-3 {
    background:
        linear-gradient(135deg, #ff9800 0%, #fb8c00 100%),
        radial-gradient(circle at 30% 40%, #ffd54f 3%, transparent 4%),
        radial-gradient(circle at 70% 60%, #ffb74d 2%, transparent 3%);
    background-size: 100% 100%, 50px 50px, 45px 45px;
    color:#FFD1A4 /*#ef6c00*/;
}
.autumn-banner-3 .icon {
    animation: winter-bounce 2s infinite;
}

.autumn-banner-2 {
    background:
        linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%),
        radial-gradient(circle at 25% 35%, #bcaaa4 3%, transparent 4%),
        radial-gradient(circle at 75% 65%, #a1887f 2%, transparent 3%);
    background-size: 100% 100%,55px 55px,50px 50px;
    color: #f5f5f5;
}
.autumn-banner-2 .icon {
    animation: winter-pulse 2s infinite;
}

.autumn-banner-5 {
    background:
        linear-gradient(135deg, #FFBB77 0%, #ff8f00 100%),
        radial-gradient(circle at 40% 30%, #ffecb3 3%, transparent 4%),
        radial-gradient(circle at 60% 70%, #ffe082 2%, transparent 3%);
    background-size: 100% 100%, 55px 55px, 50px 50px;
    color: #ff6f00;
}
.autumn-banner-5 .icon {
    animation: winter-float 3s infinite;
}

.autumn-banner-4 {
    background:
        linear-gradient(135deg, #795548 0%, #5d4037 100%),
        radial-gradient(circle at 20% 20%, #a1887f 3%, transparent 4%),
        radial-gradient(circle at 80% 80%, #8d6e63 2%, transparent 3%);
    background-size: 100% 100%, 70px 70px, 65px 65px;
    color: #d7ccc8;
}
.autumn-banner-4 .icon {
    animation: winter-swing 3s infinite;
}

/*spring */
.spring-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    z-index: 1;
}

.spring-banner-1 {
    background: 
        linear-gradient(135deg, #ffb7c5 0%, #ff9eb5 100%),
        radial-gradient(circle at 20% 30%, #ffebee 3%, transparent 4%),
        radial-gradient(circle at 80% 70%, #fce4ec 2%, transparent 3%);
    background-size: 100% 100%, 60px 60px, 55px 55px;
    color: #880e4f;
}

.spring-banner-1 .icon {
    animation: winter-bounce 2s infinite;
}

.spring-banner-2 {
    background: 
        linear-gradient(135deg, #a5d6a7 0%, #81c784 100%),
        radial-gradient(circle at 30% 40%, #e8f5e9 3%, transparent 4%),
        radial-gradient(circle at 70% 60%, #c8e6c9 2%, transparent 3%);
    background-size: 100% 100%, 50px 50px, 45px 45px;
    color: #1b5e20;
}

.spring-banner-2 .icon {
    animation: winter-swing 3s infinite;
}

.spring-banner-3 {
    background: 
        linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%),
        radial-gradient(circle at 40% 30%, #f3e5f5 3%, transparent 4%),
        radial-gradient(circle at 60% 70%, #e1bee7 2%, transparent 3%);
    background-size: 100% 100%, 55px 55px, 50px 50px;
    color: #4a148c;
}

.spring-banner-3 .icon {
    animation: winter-pulse 2s infinite;
}

.spring-banner-4 {
    background: 
        linear-gradient(135deg, #81d4fa 0%, #4fc3f7 100%),
        radial-gradient(circle at 25% 35%, #e1f5fe 3%, transparent 4%),
        radial-gradient(circle at 75% 65%, #b3e5fc 2%, transparent 3%);
    background-size: 100% 100%, 45px 45px, 40px 40px;
    color: #01579b;
}

.spring-banner-4 .icon {
    animation: winter-spin 4s infinite;
}

.spring-banner-5 {
    background: 
        linear-gradient(135deg, #80deea 0%, #4dd0e1 100%),
        radial-gradient(circle at 20% 20%, #e0f7fa 3%, transparent 4%),
        radial-gradient(circle at 80% 80%, #b2ebf2 2%, transparent 3%);
    background-size: 100% 100%, 70px 70px, 65px 65px;
    color: #006064;
}

.spring-banner-5 .icon {
    animation: winter-float 3s infinite;
}

/* summer */
.summer-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    z-index: 1;
}

.summer-banner-1 {
    background:
        linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%),
        radial-gradient(circle at 20% 30%, #b3e5fc 3%, transparent 4%),
        radial-gradient(circle at 80% 70%, #81d4fa 2%, transparent 3%);
    background-size: 100% 100%, 60px 60px, 55px 55px;
    color: #01579b;
}

.summer-banner-1 .icon {
    animation: winter-bounce 2s infinite;
}

.summer-banner-2 {
    background:
        linear-gradient(135deg, #ffd54f 0%, #ffca28 100%),
        radial-gradient(circle at 30% 40%, #fff9c4 3%, transparent 4%),
        radial-gradient(circle at 70% 60%, #ffecb3 2%, transparent 3%);
    background-size: 100% 100%, 50px 50px, 45px 45px;
    color: #ff6f00;
}

.summer-banner-2 .icon {
    animation: winter-swing 3s infinite;
}

.summer-banner-3 {
    background:
        linear-gradient(135deg, #ef5350 0%, #e53935 100%),
        radial-gradient(circle at 40% 30%, #ffcdd2 3%, transparent 4%),
        radial-gradient(circle at 60% 70%, #ef9a9a 2%, transparent 3%);
    background-size: 100% 100%, 55px 55px, 50px 50px;
    color: #b71c1c;
}

.summer-banner-3 .icon {
    animation: winter-pulse 2s infinite;
}

.summer-banner-4 {
    background:
        linear-gradient(135deg, #66bb6a 0%, #4caf50 100%),
        radial-gradient(circle at 25% 35%, #c8e6c9 3%, transparent 4%),
        radial-gradient(circle at 75% 65%, #a5d6a7 2%, transparent 3%);
    background-size: 100% 100%, 45px 45px, 40px 40px;
    color: #1b5e20;
}

.summer-banner-4 .icon {
    animation: winter-float 4s infinite;
}

.summer-banner-5 {
    background:
        linear-gradient(135deg, #ffb74d 0%, #ffa726 100%),
        radial-gradient(circle at 20% 20%, #ffe0b2 3%, transparent 4%),
        radial-gradient(circle at 80% 80%, #ffcc80 2%, transparent 3%);
    background-size: 100% 100%, 70px 70px, 65px 65px;
    color: #e65100;
}

.summer-banner-5 .icon {
    animation: winter-spin 3s infinite;
}

/* hot-tag  */
.hot-tag {
    position: absolute;
    right: 8px;
    top: 20px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: white;
    font-size: 12px;
    font-weight: normal;
    padding: 2px 4px;
    border-radius: 6px;
    animation: hot-pulse 1.5s infinite;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255, 82, 82, 0.3);
}

@keyframes hot-pulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 2px 8px rgba(255, 82, 82, 0.3);
    }
    50% {
        transform: translateY(-50%) scale(1.15);
        box-shadow: 0 4px 12px rgba(255, 82, 82, 0.5);
    }
}

/* hot tag types */
.hot-tag.new {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    animation: hot-pulse 1.2s infinite;
}

.hot-tag.limited {
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    animation: hot-pulse 1s infinite;
}

.hot-tag.discount {
    background: linear-gradient(135deg, #9c27b0, #ba68c8);
    animation: hot-pulse 0.8s infinite;
}

/*special offer*/
.article-spec-container {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.article-spec {
  width: 95%;
  max-width: 500px;
  padding: 15px 20px;
  border: 2px solid #e2e8f0;
  background-color: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.spec-title {
  text-align: center;
  font-weight: 600;
  color: #2c5282;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 1.1em;
}

.spec-item {
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  padding: 3px 0;
}

.spec-item:last-child {
  margin-bottom: 0;
}

.spec-logo {
  margin-right: 10px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.spec-link {
  font-size: 0.90em;
  color: #2c5282;
  text-decoration: none;
  transition: all 0.3s ease;
  line-height: 1.2;
  position: relative;
  padding-left: 0;
}

.spec-link:hover {
  color: #1a365d;
  font-size: 0.88em;
  padding-left: 5px;
}

.spec-link:hover + .spec-logo,
.spec-item:hover .spec-logo {
  transform: scale(1.2);
}

.spec-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #1a365d;
  transition: width 0.3s ease;
}

.spec-link:hover::after {
  width: 100%;
}

@keyframes subtleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

.spec-item:hover {
  animation: subtleBounce 0.4s ease;
}


/*sidebar heading*/
.sidebar-right-wrap h3, .sidebar-alt-wrap h3{ 
  text-align:center;
  border-radius:8px;
  background:radial-gradient(rgb(255,255,255) 0%,rgb(232,232,232) 100%);
  height:2.2em;
  padding: 5px 0;
  margin-bottom:0px !important;
  font-size:1.2em !important;
}
.headlikesidebar{
  text-align:center;
  border-radius:8px;
  background:radial-gradient(rgb(255,255,255) 0%,rgb(232,232,232) 100%);
  padding: 5px 0;
  margin-bottom:20px;
}
/*coupon*/
.wpcd-coupon{
  margin-bottom:40px !important;}