.custom-hero-container { height: 30vw; background-color: #03459a; }
.custom-hero-container .item-1-wrap { top: -90px; left: -5vw; width: 38vw; height: 38vw; }
.custom-hero-container .item-2-wrap { top: -50px; right: -6vw; width: 30vw; height: 30vw; }
.custom-hero-container .item-3-wrap { top: 200px; left: 60vw; width: 20vw; height: 20vw; }
.custom-hero-container .item-1-wrap .shape-demo { background-color: #edde3d3b; }
.custom-hero-container .item-2-wrap .shape-demo { background-color: #22b3c665; }
.custom-hero-container .item-3-wrap .shape-demo { background-color: #e98e6a58; }
/* 中型螢幕 (1200px ~ 1400px) */
@media (max-width:1400px) {
.custom-hero-container { height: 30vw; }
.custom-hero-container .item-1-wrap { top: -90px; left: -5vw; width: 38vw; height: 38vw; }
.custom-hero-container .item-2-wrap { top: -50px; right: -20px; width: 30vw; height: 30vw; }
.custom-hero-container .item-3-wrap { top: 60px; right: 32vw; width: 26vw; height: 26vw; }
}
/* 小型螢幕 / 筆電 (768px ~ 1200px) */
@media (max-width:1200px) {
.custom-hero-container { height: 40vw; }
.custom-hero-container .item-1-wrap { top: -30px; left: -5vw; width: 38vw; height: 38vw; }
.custom-hero-container .item-1-wrap .shape-demo { background-color: #edde3d7c; filter: blur(2px); }
.custom-hero-container .item-2-wrap { top: -20px; right: -20px; width: 30vw; height: 30vw; }
.custom-hero-container .item-2-wrap .shape-demo { background-color: #2259c6b4; filter: blur(1px); }
.custom-hero-container .item-3-wrap { top: 90px; left: 50vw; width: 32vw; height: 32vw; }
.custom-hero-container .item-3-wrap .shape-demo { background-color: #e98e6aad; filter: blur(1px); }
}
/* 手機模式 (768px 以下) */
@media (max-width:768px) {
.custom-hero-container { height: 46vw; }
.custom-hero-container .item-3-wrap { display: none !important; }
.custom-hero-container .item-1-wrap { top: -40px; left: -50px; width: 52vw; height: 52vw; }
.custom-hero-container .item-2-wrap { top: -20px; right: -40px; width: 42vw; height: 42vw; }
}
/* 極小手機模式 (520px 以下) */
@media (max-width:520px) {
.custom-hero-container { height: 46vw; }
.custom-hero-container .item-3-wrap { display: none !important; }
.custom-hero-container .item-1-wrap { top: -10px; left: -30px; width: 52vw; height: 52vw; opacity: 0.4; }
.custom-hero-container .item-2-wrap { top: -20px; right: -40px; width: 42vw; height: 42vw; opacity: 0.4; }
}