.custom-hero-container { height: 30vw;  background-color: #1b0a7b;}
.custom-hero-container .item-1-wrap { top: -70px; left: -1vw; width: 32vw; height: 32vw; }
.custom-hero-container .item-2-wrap { top: -70px; right: -25px; width: 32vw; height: 32vw; }
.custom-hero-container .item-3-wrap { top: 150px; left: 24vw; width: 22vw; height: 22vw; }
.custom-hero-container .item-1-wrap .shape-demo { background-color: #6e53e475; }
.custom-hero-container .item-2-wrap .shape-demo { background-color: #2282b2ad; }
.custom-hero-container .item-3-wrap .shape-demo { background-color: #9deb58ad; }
/* 中型螢幕 (1200px ~ 1400px) */
@media (max-width:1400px) {
.custom-hero-container { height: 30vw; }
.custom-hero-container .item-1-wrap { top: -70px; left: -1vw; width: 32vw; height: 32vw; }
.custom-hero-container .item-2-wrap { top: -70px; right: -25px; width: 32vw; height: 32vw; }
.custom-hero-container .item-3-wrap { top: 120px; left: 24vw; width: 22vw; height: 22vw; }
}
/* 小型螢幕 / 筆電 (768px ~ 1200px) */
@media (max-width:1200px) {
.custom-hero-container { height: 40vw; }
.custom-hero-container .item-1-wrap { top: -20px; left: -1vw; width: 32vw; height: 32vw; }
.custom-hero-container .item-1-wrap .shape-demo { background-color: #c053e47c; filter: blur(2px); }
.custom-hero-container .item-2-wrap { top: -20px; right: -25px; width: 32vw; height: 32vw; }
.custom-hero-container .item-2-wrap .shape-demo { background-color: #2282b2ad; filter: blur(1px); }
.custom-hero-container .item-3-wrap { top: 120px; left: 24vw; width: 28vw; height: 28vw; }
.custom-hero-container .item-3-wrap .shape-demo { background-color: #9deb58ad; 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: -25px; left: -40px; width: 44vw; height: 44vw; }
.custom-hero-container .item-2-wrap { top: -25px; right: -45px; width: 44vw; height: 44vw; }
}
/* 極小手機模式 (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: 5px; left: -15px; width: 44vw; height: 44vw; opacity: 0.4; }
.custom-hero-container .item-2-wrap { top: -25px; right: -45px; width: 44vw; height: 44vw; opacity: 0.4; }
}
