:root {
/* 主要品牌色系 */
--primary-dark-blue: #00266A;
--primary-blue: #0050BA;
--primary-medium-blue: #0672CB;
--primary-deep-blue: #0063B8;
/* 漸層色系 */
--gradient-cyan: #1FFFDD;
--gradient-green: #A7ECB1;
--gradient-yellow: #FEEFCB;
/* 點綴色系 */
--dot-light-blue: #D9F5FD;
--dot-blue: #94DCF7;
--dot-medium-blue: #5CC1EE;
/* 背景漸層色系 */
--bg-gradient-start: #667eea;
--bg-gradient-end: #764ba2;
/* 白色系 */
--white: #ffffff;
--white-90: rgba(255, 255, 255, 0.9);
--white-80: rgba(255, 255, 255, 0.8);
--white-70: rgba(255, 255, 255, 0.7);
--white-60: rgba(255, 255, 255, 0.6);
--white-50: rgba(255, 255, 255, 0.5);
--white-40: rgba(255, 255, 255, 0.4);
--white-30: rgba(255, 255, 255, 0.3);
--white-20: rgba(255, 255, 255, 0.2);
--white-10: rgba(255, 255, 255, 0.1);
--white-95: rgba(255, 255, 255, 0.95);
/* 黑色系 */
--black-10: rgba(0, 0, 0, 0.1);
--black-20: rgba(0, 0, 0, 0.2);
--black-30: rgba(0, 0, 0, 0.3);
/* 其他色系 */
--text-dark: #333;
--text-medium: #555;
--success-green: #27ae60;
--warning-orange: #ff6b6b;
--warning-orange-30: rgba(255, 107, 107, 0.3);
--accent-orange: #feca57;
/* 新區域顏色 */
--section02-bg-start: #0050BA;
--section02-bg-middle: #0D32A3;
--section02-bg-end: #011141;
--card-border: rgba(64, 224, 255, 0.3);
--card-border-hover: rgba(64, 224, 255, 0.6);
--icon-glow: rgba(64, 224, 255, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
/* background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); */
background: #00266a;
padding: 0;
overflow-x: hidden;
}
/* section {
overflow-x: hidden;
} */
a {
text-decoration: none;
}
/* ===== KV HERO VIDEO SECTION ===== */
.kv_hero {
position: relative;
width: 100%;
background: #002565;
z-index: 1;
}
.kv_hero::after {
content: '';
position: absolute;
bottom: -10%;
left: 0;
right: 0;
height: 10em;
/* background: linear-gradient(180deg, rgb(0 51 140 / 0%) 0%, rgb(1 48 136) 22% 24%, rgb(27 85 186) 77%, transparent 100%); */
background: linear-gradient(180deg, rgba(0, 38, 106, 0.00) 9.41%, #00266A 25%, #00266A 80%, rgba(0, 39, 106, 0) 80.17%);
z-index: 10;
pointer-events: none;
}
.kv_video_container {
position: relative;
width: 100%;
background: #002565;
display: flex;
align-items: center;
justify-content: center;
}
/* KV 背景圖片樣式 */
.kv_bg_image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
.kv_bg_desktop {
display: block;
}
.kv_bg_mobile {
display: none;
}
.kv_video_desktop,
.kv_video_mobile {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
transition: opacity 0.8s ease-in-out;
}
.kv_video_desktop video{
width: 100%;
}
.kv_video_mobile video{
width: auto;
height: 100%;
}
/* YouTube API 播放器容器樣式 */
.kv_video_desktop #desktop-video,
.kv_video_mobile #mobile-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
pointer-events: none;
opacity: 1;
object-fit: cover;
}
/* 完全禁用 YouTube iframe 內容的互動 */
.kv_video_container {
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
-webkit-touch-callout: none !important;
overflow: hidden !important;
}
/* 額外的 YouTube UI 隱藏措施 */
.kv_video_container {
/* 確保沒有額外的 UI 元素顯示 */
isolation: isolate;
}
.kv_video_container * {
/* 禁用所有子元素的互動 */
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
/* Desktop: 顯示桌機版影片，隱藏手機版 */
.kv_video_desktop {
display: block;
}
.kv_video_mobile {
display: none;
}
/* Mobile: 顯示手機版影片，隱藏桌機版 */
@media (max-width: 768px) {
.kv_bg_desktop {
display: none;
}
.kv_bg_mobile {
display: block;
}
.kv_video_desktop {
display: none;
}
.kv_video_mobile {
display: block;
}
.kv_hero::after{
bottom: -10%;
height: 9em;
background: linear-gradient(180deg, rgb(0 36 98 / 0%) 9.41%, #00266A 25%, #01266a 80%, rgb(0 38 106 / 0%) 80.17%);
}
}
@media (max-width: 480px) {
.kv_hero::after{
height: 7em;
bottom: -13%;
}
}
/* ===== SECTION_01 樣式 ===== */
.section_01 {
display: flex;
align-items: center;
justify-content: center;
padding: 5% 20px 20px;
position: relative;
overflow: hidden;
margin-top: -20px;
}
.section_01::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/bg_img_1.png'),linear-gradient(176deg, #00266A 38.54%, #024fb9 81.06%);;
background-size: cover;
background-position: center;
/* filter: contrast(110%) contrast(1.2) saturate(1.1) hue-rotate(2deg); */
/* mix-blend-mode: lighten; */
z-index: -1;
}
/* 向下箭頭動畫 - 使用提供的 SVG 圖標 */
.down-arrow {
position: relative;
bottom: -15%;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 90px;
z-index: 10;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTEiIGhlaWdodD0iODMiIHZpZXdCb3g9IjAgMCAxMTEgODMiIGZpbGw9Im5vbmUiPgogIDxwYXRoIGQ9Ik01MS4xOTczIDQ4Ljk3OTVDNTIuMjQxOCA1MC4wMTcyIDUzLjY1NiA1MC42MDA2IDU1LjEzMDkgNTAuNjAwNkM1Ni42MDQgNTAuNjAwNiA1OC4wMTggNTAuMDE3MiA1OS4wNjI1IDQ4Ljk3OTVMNzguNTI1NCAyOS41ODc5SDExMC4yNkw1OS4wNjI1IDgwLjYwMDZDNTguMDE4IDgxLjYzODMgNTYuNjA0IDgyLjIyMTcgNTUuMTMwOSA4Mi4yMjE3QzU0LjE0MDggODIuMjIxNyA1My4xNzc3IDgxLjk1ODYgNTIuMzM0IDgxLjQ3MTdDNTIuMTg5NCA4MS4zODg3IDUyLjA1MDIgODEuMjk4MyA1MS45MTQxIDgxLjIwMjFDNTEuODAxOSA4MS4xMjM1IDUxLjY5MyA4MS4wNDAzIDUxLjU4NTkgODAuOTUzMUM1MS41MTExIDgwLjg5MDYgNTEuNDM1NSA4MC44MjcxIDUxLjM2MjMgODAuNzYwN0w1MS4xOTczIDgwLjYwMDZMMCAyOS41ODc5SDMxLjczNTRMNTEuMTk3MyA0OC45Nzk1WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzI1M182ODUpIi8+CiAgPHBhdGggb3BhY2l0eT0iMC42IiBkPSJNNTMuNDQxNCA4LjMyMjI3QzUzLjg4OTcgOC43Njc1OSA1NC40OTY5IDkuMDE3NTggNTUuMTI5OSA5LjAxNzU4QzU1Ljc2MTkgOS4wMTc1MSA1Ni4zNjgyIDguNzY3MzggNTYuODE2NCA4LjMyMjI3TDY1LjE2ODkgMEg3OC43ODgxTDU2LjgxNjQgMjEuODkyNkM1Ni4zNjgzIDIyLjMzNzYgNTUuNzYxOSAyMi41ODc4IDU1LjEyOTkgMjIuNTg3OUM1NC43MDUgMjIuNTg3OSA1NC4yOTE4IDIyLjQ3NDYgNTMuOTI5NyAyMi4yNjU2QzUzLjg2NzYgMjIuMjMgNTMuODA3NCAyMi4xOTE2IDUzLjc0OSAyMi4xNTA0QzUzLjcwMSAyMi4xMTY3IDUzLjY1NDMgMjIuMDgxMiA1My42MDg0IDIyLjA0MzlDNTMuNTc2MyAyMi4wMTcyIDUzLjU0NCAyMS45ODk0IDUzLjUxMjcgMjEuOTYwOUw1My40NDE0IDIxLjg5MjZMMzEuNDcwNyAwSDQ1LjA4OThMNTMuNDQxNCA4LjMyMjI3WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzI1M182ODUpIiBmaWxsLW9wYWNpdHk9IjAuNiIvPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzI1M182ODUiIHgxPSIxMiIgeTE9IjIwIiB4Mj0iOTAiIHkyPSI5MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMUZGRkREIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC40MzQ2MTMiIHN0b3AtY29sb3I9IiNBN0VDQjEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjg2MzYwOSIgc3RvcC1jb2xvcj0iI0ZFRUZDQiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl8yNTNfNjg1IiB4MT0iNTMuNzAyOCIgeTE9Ii00Ljc2NTM4IiB4Mj0iNjUuNzc3MSIgeTI9Ii0zLjIzMjI3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMxRkZGREQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQzNDYxMyIgc3RvcC1jb2xvcj0iI0E3RUNCMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuODYzNjA5IiBzdG9wLWNvbG9yPSIjRkVFRkNCIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KPC9zdmc+');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
filter: drop-shadow(0 0 8px rgba(31, 255, 221, 0.6));
animation: arrowBounce 2s ease-in-out infinite;
cursor: pointer;
}
@keyframes arrowBounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
opacity: 0.9;
}
40% {
transform: translateX(-50%) translateY(-15px);
opacity: 1;
}
60% {
transform: translateX(-50%) translateY(-8px);
opacity: 1;
}
}
@media (max-width: 768px) {
.down-arrow {
top: -10%;
width: 40px;
height: 40px;
margin-bottom: 10px;
}
.section1 .container {
max-width: 100%;
}
.section1 .section1-swiper {
margin-bottom: 10%;
}
.section1 .section1-product-card {
padding: 0 3%;
}
.section1 .section1-product-card .section1-product-image {
padding: 0 3%;
}
}
/* .section_01::after {
content: '';
position: absolute;
top: -10%;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 38, 106, 0.00) 10.91%, rgba(0, 38, 106, 0.8) 28.2%, rgba(0, 80, 186, 0.6) 76.85%, rgba(97, 44, 176, 0.00) 94.55%);
height: 200px;
} */
.section_01 .container {
max-width: 1200px;
width: 100%;
text-align: center;
color: var(--white);
position: relative;
z-index: 3;
}
.section_01 .title {
font-size: 3.5rem;
font-weight: 600;
line-height: 1.3;
position: relative;
white-space: nowrap;
}
/* 統一標題文字大小（排除 section1_title） */
.section_title,
.section_01 .title,
.section_02 .title .gradient-text,
.section_02 .title .subtitle,
.project-title .gradient-text,
.project-title .subtitle {
font-size: 3.5rem !important;
}
@media (max-width: 1680px) {
.section_title,
.section_01 .title,
.section_02 .title .gradient-text,
.section_02 .title .subtitle,
.project-title .gradient-text,
.project-title .subtitle {
font-size: 3.5vw !important;
}
}
/* 統一響應式標題大小（排除 section1_title） */
@media (max-width: 768px) {
.section_title,
.section_01 .title,
.section_02 .title .gradient-text,
.section_02 .title .subtitle,
.project-title .gradient-text,
.project-title .subtitle,.survey-mobile-title {
font-size: 4vw !important;
}
}
@media (max-width: 480px) {
.section_title,
.section_01 .title,
.section_02 .title .gradient-text,
.section_02 .title .subtitle,
.project-title .gradient-text,
.project-title .subtitle,.survey-mobile-title {
font-size: 4.8vw !important;
}
}
.section_01 .title .gradient-text {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
background: linear-gradient(50deg, var(--gradient-cyan) 40%, var(--gradient-green) 53.72%, var(--gradient-yellow) 64.21%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.section_01 .title .glow-text {
font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑", sans-serif;
color: var(--white);
text-shadow:
0 0 10px var(--white-50),
0 0 20px var(--white-30),
0 0 30px var(--white-20);
filter: drop-shadow(0 0 15px var(--white-40));
animation: glowPulse 3s ease-in-out infinite;
}
/* .section_01_title::after {
content: '';
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #1FFFDD, #A7ECB1, #FEEFCB);
border-radius: 2px;
box-shadow: 0 0 10px rgba(31, 255, 221, 0.5);
} */
.title-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.title-dots .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--white-60);
display: inline-block;
animation: dotPulse 2s infinite ease-in-out;
}
.title-dots .dot:nth-child(1) { animation-delay: 0s; background: var(--dot-light-blue);}
.title-dots .dot:nth-child(2) { animation-delay: 0.2s; background: var(--dot-blue);}
.title-dots .dot:nth-child(3) { animation-delay: 0.4s; background: var(--dot-medium-blue);}
.title-dots .dot:nth-child(4) { animation-delay: 0.6s; background: var(--primary-medium-blue);}
.title-dots .dot:nth-child(5) { animation-delay: 0.8s; background: var(--primary-deep-blue);}
@keyframes dotPulse {
0%, 100% {
opacity: 0.4;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
@keyframes glowPulse {
0%, 100% {
opacity: 0.9;
}
50% {
opacity: 1;
}
}
/* ===== SECTION_02 樣式 ===== */
.section_02 {
background: url('../images/bg_img_2.jpg');
background-size: cover;
background-position: center;
background-blend-mode: overlay;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 20px;
position: relative;
/* overflow: hidden; */
}
.section_02::before {
content: '';
position: absolute;
top: -10%;
left: 0;
right: 0;
height: 10em;
background: linear-gradient(180deg, rgba(0, 38, 106, 0.00) 9.41%, #024fb7 25%, #0250b5 80%, rgba(0, 39, 106, 0) 80.17%);
z-index: 2;
pointer-events: none;
}
/* .section_02::after {
content: '';
position: absolute;
top: -10%;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(97, 44, 176, 0.00) 10.91%, #0251c3 28.2%, #064bb0 76.85%, rgba(127, 35, 79, 0.00) 94.55%);
height: 200px;
} */
.section_02 .container {
max-width: 1200px;
width: 100%;
text-align: center;
color: var(--white);
position: relative;
z-index: 3;
}
.section_02 .title {
margin-bottom: 40px;
display: flex;
flex-direction: column;
gap: 15px;
}
.section_02 .title .gradient-text {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
font-size: 3rem;
font-weight: 700;
background: linear-gradient(50deg, var(--gradient-cyan) 40%, var(--gradient-green) 53.72%, var(--gradient-yellow) 64.21%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
line-height: 1.2;
}
.section_02 .title .subtitle {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
font-size: 3rem;
font-weight: 700;
color: var(--white);
line-height: 1.2;
}
.section_02 .title .subtitle.glow-text {
animation: glowPulse 3s ease-in-out infinite;
}
.section_02 .title-dots {
margin-top: 0;
}
.section_02 .title-dots .dot.active {
background: var(--gradient-cyan);
box-shadow: 0 0 15px var(--gradient-cyan);
}
.section_02 .content {
margin: 0 auto;
}
.plan_card {
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 400px;
}
.plan_card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.plan_card:hover {
transform: translateY(-5px);
}
.plan_card:hover::before {
opacity: 1;
}
.plan_icon {
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.plan_icon::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 100%;
background: radial-gradient(circle, var(--gradient-cyan) 0%, var(--gradient-green) 50%, transparent 60%);
opacity: 0.1;
z-index: -1;
animation: iconGlow 4s ease-in-out infinite;
}
@keyframes iconGlow {
0%, 100% {
opacity: 0.08;
transform: scale(1);
}
50% {
opacity: 0.15;
transform: scale(1.02);
}
}
@keyframes iconGlowMobile {
0%, 100% {
opacity: 0.06;
transform: scale(1);
}
50% {
opacity: 0.12;
transform: scale(1.01);
}
}
.plan_icon img {
width: 100%;
height: 100%;
}
.plan_title_box {
position: relative;
margin-bottom: 20px;
min-width: 70%;
transition: all 0.3s ease;
background: url('data:image/svg+xml,') center/100% 100% no-repeat;
padding: 14px 0;
border-radius: 5rem;
flex-shrink: 0;
}
.plan_title {
background: transparent;
color: var(--white);
font-size: 1.8rem;
font-weight: 600;
white-space: nowrap;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.plan_title span {
position: relative;
z-index: 1;
display: block;
padding: 12px 28px;
text-align: center;
}
/*
.plan_card:hover .plan_title_box {
background: url('data:image/svg+xml,') center/100% 100% no-repeat;
box-shadow:
0 0 25px var(--gradient-cyan),
0 0 15px rgba(64, 224, 255, 0.3);
animation: borderGlow 2s ease-in-out infinite;
transform: scale(1.02);
} */
@keyframes borderGlow {
0%, 100% {
box-shadow:
0 0 25px var(--gradient-cyan),
0 0 15px rgba(64, 224, 255, 0.3);
}
50% {
box-shadow:
0 0 35px var(--gradient-cyan),
0 0 50px rgba(64, 224, 255, 0.6),
0 0 20px rgba(64, 224, 255, 0.4);
}
}
.plan_description {
color: var(--white-90);
line-height: 1.6;
}
.plan_description p {
margin: 0 0 8px 0;
font-size: 1rem;
font-family: "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
}
.plan_description p:last-child {
margin-bottom: 0;
}
/* 響應式設計 */
@media (max-width: 1024px) {
.section_02 .title .gradient-text {
font-size: 2.5rem;
}
.section_02 .title .subtitle {
font-size: 2.5rem;
}
.plan_title{
font-size: 1.5rem;
}
.plan_title_box{
padding: 5px;
}
}
@media (max-width: 768px) {
.section_02 {
padding: 40px 4vw;
margin-top: -5px;
}
.section_02::before {
height: 8em;
top: -8%;
}
.plan_card {
padding: 0;
min-height: unset;
}
.plan_description p {
font-size: 2.5vw;
}
.plan_icon {
margin-bottom: 4vw;
}
.plan_icon::before {
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0.08;
/* filter: blur(1.5px); */
animation: iconGlowMobile 4s ease-in-out infinite;
}
.plan_icon img {
width: 70%;
height: 70%;
}
.plan_title_box {
padding: 10px;
background: url('data:image/svg+xml,') center/100% 100% no-repeat;
}
.plan_title {
min-height: 40px;
}
}
.section_01 .content {
display: flex;
flex-direction: column;
gap: 40px;
margin: 0 auto;
}
.section_01 .text_block {
border-radius: 16px;
}
.section_01 .text_block p {
font-size: 2vw;
line-height: 1.8;
font-weight: bold;
margin:0;
font-family: "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
color: var(--white-95);
}
.section_01 .text_block p:last-child {
margin-bottom: 0;
}
/* 響應式設計 */
@media (max-width: 768px) {
.section_01 {
padding: 8vw 4vw;
}
.section_01 .title {
font-size: 7.5vw;
margin-bottom: 8vw;
white-space: normal;
}
.title-dots {
gap: 2vw;
margin-top: 4vw;
}
.title-dots .dot {
width: 10px;
height: 10px;
}
.section_01 .content {
gap: 6vw;
}
.section_01 .text_block {
padding: 0;
}
.section_01 .text_block p {
font-size: 2.8vw;
line-height: 1.7;
}
}
@media (max-width: 480px) {
.section_01 {
padding: 5vw 0;
}
/* .section_01 .content br{
display: none;
} */
.section_01 .title {
/* font-size: 6vw; */
margin-bottom: 6vw;
}
.section_02 {
padding: 6vw 3vw;
}
.section_02::before {
height: 6em;
top: -6%;
}
.section_02 .title {
gap: 5px;
margin-bottom: 20px;
}
/* .section_02 .title .gradient-text,
.section_02 .title .subtitle {
font-size: 5vw !important;
}
*/
.plan_card {
padding: 4vw 3vw;
min-height: 300px;
}
.col-6 .plan_card {
min-height: 240px;
padding: 3vw 2vw;
}
.plan_title_box {
padding: 8px;
background: url('data:image/svg+xml,') center/100% 100% no-repeat;
}
.plan_title {
font-size: 1.2rem;
min-height: 36px;
}
.col-6 .plan_title_box {
padding: 5px;
background: url('data:image/svg+xml,') center/100% 100% no-repeat;
}
.col-6 .plan_title {
font-size: 0.9rem;
min-height: 28px;
}
.plan_icon {
margin-bottom: 3vw;
}
/* 手機版下方兩個小卡片的特殊樣式 */
.col-6 .plan_card {
padding: 0;
}
.col-6 .plan_icon {
margin-bottom: 3vw;
}
.col-6 .plan_title_box {
padding: 6px;
margin-bottom: 3vw;
background: url('data:image/svg+xml,') center/100% 100% no-repeat;
}
.col-6 .plan_title {
font-size: 1rem;
min-height: 32px;
}
.col-6 .plan_description p {
font-size: 2.7vw;
margin-bottom: 1vw;
}
.title-dots {
gap: 1.5vw;
margin-top: 3vw;
}
.title-dots .dot {
width: 8px;
height: 8px;
}
.section_01 .content {
gap: 4vw;
}
.section_01 .text_block p {
font-size: 3.5vw;
}
.plan_description p {
font-size: 3vw;
}
}
.section1 {
padding: 7em 3%;
position: relative;
background: linear-gradient(360deg, #7F234F 14%, #460AB7 75.02%, #190E75 94.84%);
}
/* Section1 背景效果 */
.section1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/bg_img_5.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
filter: contrast(1.1) brightness(0.9) saturate(1.2);
}
.section1::after {
content: '';
position: absolute;
top: -10%;
left: 0;
right: 0;
bottom: 0;
/* opacity: 0.85; */
z-index: 0;
background: linear-gradient(180deg, rgba(25, 14, 117, 0.00) 10.91%, #0415a1 28.2%, #230e82 76.85%, rgb(34 13 130 / 0%) 94.55%);
height: 200px;
}
/* ===== 通用標題樣式 ===== */
/* 使用方法:
基本使用: 標題文字
帶背景: 標題文字
小尺寸: 標題文字
大尺寸: 標題文字
*/
.universal-title-container {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
position: relative;
text-align: center;
margin-bottom: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
/* 背景變體 */
.universal-title-container.with-bg {
height: clamp(80px, 15vw, 160px);
background: url('../images/title_bg_1.png') center/contain no-repeat;
filter: contrast(1.5);
}
/* 尺寸變體 */
.universal-title-container.small {
height: clamp(60px, 10vw, 120px);
margin-bottom: 30px;
}
.universal-title-container.large {
height: clamp(100px, 20vw, 200px);
margin-bottom: 70px;
}
.universal-title {
margin: 0;
color: #fff;
font-size: clamp(0.8rem, 4vw, 3.2rem);
font-weight: 700;
z-index: 2;
line-height: 1;
width: 90%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* 當有背景時使用絕對定位 */
.universal-title-container.with-bg .universal-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
display: inline-block;
}
/* 標題尺寸變體 */
.universal-title-container.small .universal-title {
font-size: clamp(0.6rem, 4vw, 2.4rem);
}
.universal-title-container.large .universal-title {
font-size: clamp(1rem, 6vw, 4rem);
}
/* 響應式設計 */
@media (max-width: 768px) {
.universal-title-container {
height: clamp(60px, 12vw, 120px);
margin-bottom: 20px;
}
.universal-title-container.with-bg {
height: clamp(80px, 15vw, 160px);
background: url('../images/title_bg_1_xs.png') center/contain no-repeat;
margin-bottom: 5px;
}
.universal-title-container.with-bg .universal-title {
display: flex;
}
.universal-title {
width: 95%;
margin-top: -5px;
font-size: 4vw;
line-height: 0.5;
}
}
/* 保持向後相容性 - 已遷移至 universal-title-container */
.ai-flagship {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
background: linear-gradient(50deg, var(--gradient-cyan) 40%, var(--gradient-green) 53.72%, var(--gradient-yellow) 64.21%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
font-weight: 700;
line-height: normal;
}
h1, h2 {
text-align: center;
color: var(--white);
font-size: 2.5rem;
}
/* ===== SECTION1 桌面版樣式 ===== */
.section1 .section1-swiper {
width: 100%;
height: auto;
margin-bottom: 5%;
position: relative;
z-index: 2;
}
.section1 .section1-swiper-slide {
/* background: var(--white); */
background-image: url(../images/bg_img_5.png) no-repeat center center;
border-radius: 15px;
box-shadow: 0 10px 20px var(--black-20);
overflow: hidden;
display: flex;
align-items: center;
}
.section1 .swiper-3d .swiper-wrapper{
transform-style: flat;
}
.section1 .section1-product-card {
display: flex;
width: 100%;
height: 100%;
}
.section1 .section1-product-image {
flex: 0 0 40%;
overflow: hidden;
}
.section1 .section1-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
transition: transform 0.3s ease;
}
.section1 .section1-product-content {
flex: 0 0 60%;
padding: clamp(15px, 1.5vw, 40px);
display: flex;
flex-direction: column;
justify-content: center;
/* background: linear-gradient(333deg, rgb(163 0 193) 0% 9.23%, rgb(98 12 189) 36.13%, rgb(5 38 207) 57.88%, #4360f3 87.75%); */
background: linear-gradient(333deg, rgb(163 0 193 / 26%) 0% 9.23%, rgb(98 0 223 / 79%) 36.13%, rgba(24, 49, 175, 0.685) 57.88%, #3e5efffc 87.75%);
box-shadow: 8px 5px 20px 0px rgba(3, 4, 55, 0.25);
filter: contrast(1);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1.2px);
position: relative;
}
.section1 .section1-product-features {
list-style: none;
padding-left: 0;
}
.section1 .section1-product-features li {
display: flex;
align-items: flex-start;
padding-left: clamp(35px, 3.5vw, 55px);
padding: clamp(6px, 0.7vw, 12px) 0;
color: var(--text-medium);
position: relative;
text-indent: 0;
min-height: clamp(30px, 3vw, 45px);
}
.section1 .section1-product-features li:before {
content: "";
left: 0;
top: 0;
width: clamp(28px, 2.8vw, 42px);
height: clamp(27px, 2.7vw, 40px);
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.section1 .section1-product-features li .section1-feature-title {
flex: 0 0 clamp(90px, 8vw, 130px);
font-weight: bold;
color: var(--white);
margin-right: clamp(8px, 1vw, 15px);
font-size: clamp(18px, 1.5vw, 28px);
}
.section1 .section1-product-features li .section1-feature-long-title {
flex: 0 0 clamp(90px, 12vw, 160px);
font-weight: bold;
color: var(--white);
margin-right: clamp(8px, 1vw, 15px);
font-size: clamp(18px, 1.8vw, 28px);
}
.section1 .section1-product-features li .section1-feature-description {
flex: 1;
color: var(--white);
word-wrap: break-word;
hyphens: auto;
font-size: clamp(16px, 1.5vw, 26px);
line-height: 1.4;
margin-top: 4px;
}
.section1 .section1-swiper-button-next,
.section1 .section1-swiper-button-prev {
color: var(--white);
background: var(--white-20);
width: 50px;
height: 50px;
border-radius: 50%;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.section1 .section1-swiper-button-next:hover,
.section1 .section1-swiper-button-prev:hover {
background: var(--white-30);
transform: scale(1.1);
}
.section1 .section1-swiper-button-next:after,
.section1 .section1-swiper-button-prev:after {
font-size: 18px;
font-weight: bold;
}
/* ===== 時間軸樣式 ===== */
.section1 .section1-timeline-container {
width: 100%;
margin-top: clamp(30px, 4vw, 70px);
margin-bottom: 5%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.section1 .section1-timeline {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 0 clamp(30px, 4vw, 40px);
flex: 1;
max-width: clamp(600px, 60vw, 1000px);
}
.section1 .section1-timeline-line {
position: absolute;
top: 50%;
left: 50px;
right: 50px;
height: 4px;
background: var(--white-30);
border-radius: 2px;
z-index: 1;
}
.section1 .section1-timeline-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, var(--warning-orange), var(--accent-orange));
border-radius: 2px;
transition: width 0.5s ease;
z-index: 2;
}
.section1 .section1-timeline-item {
position: relative;
z-index: 3;
cursor: pointer;
transition: all 0.3s ease;
}
.section1 .section1-timeline-dot {
width: clamp(16px, 1.6vw, 24px);
height: clamp(16px, 1.6vw, 24px);
border-radius: 50%;
background: var(--white);
border: clamp(3px, 0.3vw, 5px) solid var(--white-50);
transition: all 0.3s ease;
margin: 0 auto;
}
.section1 .section1-timeline-item.active .section1-timeline-dot {
background: var(--warning-orange);
border-color: var(--white);
box-shadow: 0 0 0 8px var(--warning-orange-30);
}
.section1 .section1-timeline-title {
position: absolute;
top: clamp(-70px, -5vw, -80px);
left: 50%;
transform: translateX(-50%);
padding: clamp(6px, 0.6vw, 10px) clamp(12px, 1.2vw, 20px);
border-radius: clamp(15px, 1.5vw, 25px);
font-size: clamp(0.8rem, 0.9vw, 1.1rem);
font-weight: bold;
color: var(--white);
white-space: nowrap;
opacity: 0.7;
transition: all 0.3s ease;
}
.section1 .section1-timeline-item.active .section1-timeline-title {
opacity: 1;
}
.section1 .section1-timeline-tooltip {
position: absolute;
top: 3rem;
left: 50%;
transform: translateX(-50%);
/* background: var(--white); */
padding: 12px 16px;
border-radius: 12px;
font-size: clamp(0.8rem, 0.9vw, 1.1rem);
color: var(--white);
border: 1px solid var(--white);
white-space: normal;
word-wrap: break-word;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 5;
min-width: max-content;
/* min-width: 300px; */
/* max-width: 300px; */
text-align: left;
line-height: 1.4;
}
.section1 .section1-timeline-tooltip::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
.section1 .section1-timeline-item.active .section1-timeline-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(5px);
}
.section1 .section1-timeline-arrow {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 4px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 40px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
position: relative;
z-index: 10;
}
.section1 .section1-timeline-arrow:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.section1 .section1-timeline-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: scale(1);
}
.section1 .section1-timeline-arrow.left {
margin-right: 30px;
}
.section1 .section1-timeline-arrow.right {
margin-left: 30px;
}
.section1 .container{
max-width: 90%;
}
/* ===== 手機版樣式 ===== */
@media screen and (max-width: 767px) {
.section1{
padding: 10px 3%;
}
.section1 .section1-product-features li .section1-feature-title{
flex: 0 0 clamp(72px, 8vw, 130px);
font-weight: bold;
color: var(--white);
margin-right: clamp(2px, 0vw, 15px);
font-size: clamp(15px, 1.8vw, 28px);
}
.section1 .section1-product-features li .section1-feature-description {
flex: 1;
color: var(--white);
word-wrap: break-word;
hyphens: auto;
font-size: clamp(12px, 1.6vw, 26px);
line-height: 1.4;
}
.section1 .section1-swiper-slide {
margin-bottom: 40px;
}
.section1 .remark {
font-size: clamp(10px, 1.3vw, 16px);
}
.section1 .section1-product-features li .section1-feature-long-title{
flex: 0 0 clamp(90px, 13vw, 160px);
}
}
@media (max-width: 990px) {
.section1{
padding: 0.5em 3% 0 3%;
}
.section1 .section1-swiper.mySwiper,
.section1 .section1-timeline-container {
display: none;
}
.section1 .section1-mobile-swiper-container {
display: block;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
z-index: 2;
padding-bottom: 20px;
}
.section1 .swiper-button-next{
right: 0;
}
.section1 .section1-mobile-product-card {
color: #fff;
border-radius: 15px;
margin: 0 27px 30px 27px;
text-align: center;
}
.section1 .section1-mobile-timeline-title {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 15px;
line-height: 1.3;
}
.section1 .section1-mobile-product-image {
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
}
.section1 .section1-swiper {
margin-bottom: 20px;
}
.section1 .section1-mobile-product-image img {
width: 100%;
object-fit: contain;
aspect-ratio: 4 / 3;
padding-top: 20px;
}
.section1 .section1-mobile-product-features {
list-style: none;
text-align: left;
padding-left: 0;
}
.section1 .section1-mobile-product-features li {
display: flex;
align-items: flex-start;
padding: 8px 0;
padding-left: 45px;
position: relative;
min-height: 35px;
}
.section1 .section1-mobile-product-features li:before {
content: "";
position: absolute;
left: 11px;
top: 8px;
width: 25px;
height: 25px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.section1 .section1-mobile-product-features .section1-feature-title {
flex: 0 0 80px;
font-weight: bold;
color: #fff;
margin-right: 10px;
font-size: 2vw;
}
.section1 .section1-mobile-product-features .section1-feature-description {
flex: 1;
color: #fff;
word-wrap: break-word;
hyphens: auto;
font-size: 2vw;
line-height: 1.4;
}
.section1 .section1-mobile-nav-btn {
color: #fff;
background: none;
width: auto;
height: auto;
border-radius: 0;
backdrop-filter: none;
}
.section1 .section1-mobile-nav-btn:after {
font-size: 24px;
font-weight: bold;
color: #fff;
}
.section1 .section1-mobile-nav-btn:hover {
transform: none;
background: none;
}
.section1 .section1-mobile-pagination {
position: static !important;
text-align: center;
}
.section1 .section1-mobile-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.6);
opacity: 1;
margin: 0 4px;
}
.section1 .section1-mobile-pagination .swiper-pagination-bullet-active {
background: white;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}
.section1 .remark {
font-size: 0.8rem;
}
}
@media (min-width: 991px) {
.section1 .section1-mobile-swiper-container {
display: none;
}
}
@media (max-width: 768px) {
.section1 .section1-mobile-timeline-title{
font-size: 1rem;
margin-top: 10px;
}
.section1 .section1-mobile-product-features .section1-feature-title {
font-size: 2.8vw;
}
.section1 .section1-mobile-product-features .section1-feature-description {
font-size: 2.8vw;
}
.section1-mobile-timeline-tooltip{
font-size: 0.95rem;
}
}
@media screen and (max-width: 360px) {
.section1 .section1-mobile-product-features li {
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding-left: 45px;
min-height: 40px;
}
.section1 .section1-mobile-product-features li:before {
left: 0;
top: 4px;
width: 32px;
height: 30px;
}
.section1 .section1-mobile-product-features .section1-feature-title {
flex: none !important;
width: 100%;
margin-bottom: 2px;
font-size: 0.9rem;
}
.section1 .section1-mobile-product-features .section1-feature-description {
flex: none;
width: 100%;
font-size: 0.85rem;
line-height: 1.4;
}
.section1 .remark {
font-size: 0.75rem;
}
}
@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 80%;
}
}
/* ===== SECTION_03 樣式 ===== */
.section_03 {
padding: 80px 20px;
position: relative;
overflow: visible;
}
.section_03::before {
content: '';
position: absolute;
top: -80px;
left: 0;
right: 0;
bottom: -80px;
background-image: url('../images/bg_img_3.jpg');
background-size: cover;
background-position: center;
/* background-attachment: fixed; */
filter: contrast(110%) contrast(1.2) saturate(1.1) hue-rotate(2deg);
opacity: 0.8;
z-index: -1;
}
.section_03::after {
content: '';
position: absolute;
top: -10%;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 80, 186, 0.00) 10.91%, #04103d 28.2%, #01104c 76.85%, rgba(127, 35, 79, 0.00) 94.55%);
height: 200px;
}
.section_03 .container {
max-width: 1500px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* ===== 通用專案標題組件 ===== */
/* 使用方法:
基本使用: ...
居中對齊: ...
左對齊: ...
緊湊間距: ...
大間距: ...
*/
.project-title {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(15px, 2vw, 30px);
margin: 0 auto 30px auto;
color: var(--white);
width: fit-content;
align-items: center;
}
/* 對齊變體 */
.project-title--center {
justify-content: center;
text-align: center;
}
.project-title--left {
justify-content: flex-start;
margin-left: 0;
margin-right: auto;
}
.project-title--left .title_text {
text-align: left;
}
/* 間距變體 */
.project-title--compact {
gap: clamp(10px, 1.5vw, 20px);
margin-bottom: 40px;
}
.project-title--spacious {
gap: clamp(20px, 3vw, 40px);
margin-bottom: 80px;
}
/* 無圖標版本 */
.project-title--text-only {
gap: 0;
}
.project-title--text-only .title_icon {
display: none;
}
.title_icon {
flex-shrink: 0;
width: clamp(80px, 15vw, 250px);
}
.title_icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.title_text {
flex: 1;
text-align: left;
padding-top: clamp(10px, 0.5vw, 10px);
}
.project-title .gradient-text {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
font-size: clamp(0.8rem, 4vw, 3.2rem);
font-weight: 700;
background: linear-gradient(50deg, var(--gradient-cyan) 40%, var(--gradient-green) 53.72%, var(--gradient-yellow) 64.21%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
text-align: left;
line-height: 1.2;
margin-bottom: clamp(5px, 0.8vw, 15px);
}
.project-title .subtitle {
font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑", sans-serif;
font-size: clamp(0.8rem, 4vw, 3.2rem);
font-weight: 700;
display: block;
line-height: 1.2;
margin-bottom: clamp(15px, 2vw, 25px);
white-space: nowrap;
}
.project-title .subtitle.glow-text {
color: var(--white);
text-shadow:
0 0 8px var(--white-40),
0 0 15px var(--white-20),
0 0 25px var(--white-10);
filter: drop-shadow(0 0 12px var(--white-30));
animation: glowPulse 3s ease-in-out infinite;
}
.project-title p {
color: var(--white-90);
font-size: clamp(1rem, 1.8vw, 1.5rem);
font-weight: bold;
line-height: 1.6;
margin-top: clamp(15px, 1.5vw, 25px);
}
/* 通用 project-title 響應式設計 */
@media (max-width: 768px) {
.project-title {
margin: 5% auto 4% auto;
/* gap: clamp(15px, 2vw, 20px); */
text-align: left;
display: block;
}
.title_icon {
width: clamp(200px, 15vw, 250px);
margin: 0 auto;
}
.title_text {
max-width: none;
margin-bottom: 30px;
}
.project-title .gradient-text,
.project-title .subtitle {
font-size: 4vw !important;
}
.project-title p {
font-size: clamp(0.9rem, 3.5vw, 1.2rem);
margin-top: clamp(10px, 2.5vw, 15px);
}
}
@media (max-width: 480px) {
/* .title_icon {
width: 70px;
height: 70px;
} */
.project-title .gradient-text,
.project-title .subtitle {
font-size: 6vw !important;
text-align: center;
}
}
/* 產品選項卡 */
.product_tabs {
display: flex;
justify-content: center;
gap: 10px;
}
.tab_button {
padding: 15px 0;
border: 2px solid #FFFFFF;
border-radius: 8px;
background: transparent;
color: var(--white);
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
width: 380px;
text-align: center;
}
.tab_button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(104, 226, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.tab_button:hover::before {
left: 100%;
}
.tab_button.active {
background: linear-gradient(106deg, #1100A9 -1.34%, #0E50CC 54.68%, #00F6FF 98.57%);
border: 2px solid #1F3DFF;
color: var(--white);
box-shadow: 0 0 20px rgba(104, 226, 255, 0.4);
}
.tab_button:hover {
border-color: var(--gradient-green);
box-shadow: 0 0 15px rgba(104, 226, 255, 0.3);
transform: translateY(-2px);
}
/* 選項卡內容 */
.tab_content_container {
position: relative;
overflow: hidden;
}
.tab_content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: all 0.5s ease;
transform: translateY(20px);
}
.tab_content.active {
opacity: 1;
visibility: visible;
position: relative;
transform: translateY(0);
}
.product_content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
min-height: 600px;
}
/* Dell Pro Max 系列的左圖右文布局 */
.product_content.pro_max_layout {
grid-template-columns: 1fr 1fr;
}
.product_info {
padding: 20px 0;
}
.product_subtitle {
font-size: 1.2vw;
font-weight: 700;
color: var(--gradient-cyan);
margin-bottom: 20px;
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
}
.product_description {
font-size: 1.8vw;
font-weight: 600;
color: var(--white);
margin-bottom: 40px;
line-height: 1.4;
}
.feature_list {
display: flex;
flex-direction: column;
gap: 25px;
}
.feature_item {
position: relative;
display: flex;
align-items: center;
gap: 15px;
}
.feature_title {
padding:13px;
border-radius: 8px;
background: #8D55FF;
color: var(--white);
font-size: 1.2vw;
font-weight: 600;
text-align: center;
width: 230px;
flex-shrink: 0;
}
.feature_description {
color: var(--white-90);
font-size: 1.2vw;
letter-spacing: 0.05rem;
line-height: 1.5;
flex: 1;
}
.product_image {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.product_image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.image_note {
color: var(--white);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
padding-left: 9%;
}
/* 右側浮動選單 */
.float_menu {
position: fixed;
right: 5px;
top: 30%;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
opacity: 0;
transition: all 0.5s ease;
}
body.show-floating-menu .float_menu {
opacity: 1;
visibility: visible;
}
body.hide-floating-menu .float_menu {
opacity: 0;
overflow: hidden;
}
.float_menu_item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 15px;
}
.float_menu_item:hover {
transform: translateX(-10px);
}
.menu_icon {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* backdrop-filter: blur(10px); */
transition: all 0.3s ease;
position: relative;
z-index: 10;
}
.float_menu_item:hover .menu_icon {
transform: scale(1.05);
}
.menu_icon img {
width: 100px;
height: 100px;
filter: brightness(1.2);
}
.menu_tooltip {
position: absolute;
right: 110px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, #6c076d, #0058ff);
color: var(--white);
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border: 2px solid var(--gradient-cyan);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
z-index: 5;
}
.menu_tooltip::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: var(--gradient-cyan);
}
.float_menu_item:hover .menu_tooltip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(-8px);
}
/* 響應式設計 */
@media (max-width: 1240px) {
.feature_title {
width: 160px;
font-size: 1.5vw;
}
.feature_description{
font-size: 1.5vw;
}
}
@media (max-width: 1024px) {
.product_content,
.product_content.pro_max_layout {
grid-template-columns: 1fr;
gap: 20px;
}
.feature_title {
width: 25%;
font-size: 2vw;
}
.feature_description{
font-size: 2vw;
}
/* 手機版統一為上圖下文 */
.product_content.pro_max_layout .product_image {
order: 1;
}
.product_content.pro_max_layout .product_info {
order: 2;
}
.float_menu {
right: 20px;
}
.menu_icon img {
width: 80px;
height: 80px;
}
.menu_tooltip {
right: 90px;
}
}
@media (max-width: 768px) {
.image_note{
font-size: 3.8vw;
}
.section_03 {
padding: 20px 4vw;
}
.product_tabs {
flex-direction: row;
justify-content: center;
gap: 8px;
}
.tab_button {
padding: 12px 5px;
font-size: 3.5vw;
min-width: auto;
}
.product_info {
padding: 10% 3%;
}
.product_subtitle {
font-size: 4vw;
margin-bottom: 10px;
}
.product_description {
font-size: 3.6vw;
margin-bottom:10px;
}
.feature_item {
/* flex-direction: column; */
gap: 10px;
align-items: flex-start;
}
.feature_title {
font-size: 2.5vw;
padding: 10px 8px;
width: 140px;
flex-shrink: 0;
}
.feature_description {
font-size: 2.5vw;
margin-top: 0;
flex: 1;
min-width: 0;
width: 100%;
}
.float_menu {
right: 5px;
top: 20%;
}
}
@media (max-width: 480px) {
/* Section_03 現在使用通用的 project-title 組件 */
.product_subtitle {
font-size: 4vw;
}
.product_description {
font-size: 4.7vw;
}
.feature_title {
font-size: 4.2vw;
width: 200px;
}
.feature_item {
flex-direction: column;
}
.feature_description {
font-size: 4.2vw;
}
.menu_icon img {
width: 60px;
height: 60px;
}
.menu_tooltip {
font-size: 0.9rem;
padding: 10px 16px;
right: 80px;
}
}
/* ===== SECTION_PRODUCTS 產品系列展示樣式 ===== */
.section_products {
padding: 80px 20px;
background: url('../images/bg-line.png'), linear-gradient(360deg, #612CB0 3.27%, #7F234F 84.78%);
background-size: 100%, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
position: relative;
overflow: hidden;
}
.section_products_container {
max-width: 1400px;
margin: 0 auto;
/* position: relative; */
z-index: 1;
}
/* section_products_title 樣式已遷移至 universal-title 組件 */
/* .products_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
align-items: start;
} */
.product_series {
/* text-align: center; */
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
}
.product_series::before{
content: '';
position: absolute;
top: 0;
left: 2%;
right: 0;
bottom: 0;
background-image: url('../images/product_bg1.png');
mix-blend-mode: plus-lighter;
z-index: 0;
background-size: contain;
background-position: top;
background-repeat: no-repeat;
}
.product_image_container {
margin-bottom: 10px;
position: relative;
z-index: 2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 15px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* 確保產品圖片在背景之上，保持清晰 */
.product_main_image {
position: relative;
z-index: 2;
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
transition: transform 0.3s ease;
}
/* 懸停時產品圖片的簡化效果 */
.product_series:hover .product_main_image {
transform: scale(1.05);
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
}
.product_info_container {
position: relative;
z-index: 2;
}
.product_series_title {
font-size: 2.5rem;
font-weight: 700;
color: var(--gradient-green);
margin-bottom: 15px;
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
background: linear-gradient(50deg, var(--gradient-cyan) 40%, var(--gradient-green) 53.72%, var(--gradient-yellow) 64.21%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.product_series_subtitle {
font-size: 1.5rem;
font-weight: 600;
color: var(--white);
margin-bottom: 20px;
line-height: 1.4;
letter-spacing: -0.5px;
}
.product_description_text {
margin-bottom: 25px;
}
.product_description_text p {
font-size: 1.1rem;
color: var(--white-90);
margin-bottom: 8px;
line-height: 1.6;
}
.product_description_text p:last-child {
margin-bottom: 0;
}
.product_series_badge {
border-radius: 25px;
padding: 10px 20px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.product_series_badge span {
font-size: 0.9rem;
color: var(--white-90);
font-weight: 500;
}
/* 響應式設計 */
@media (max-width: 1024px) {
.products_grid {
grid-template-columns: 1fr;
/* gap: 30px; */
}
/* section_products_title 已移除 */
.product_series_title {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.project-title {
margin: 5% auto 4% auto;
}
.section_products {
padding: 20px 4vw;
}
.product_series_badge span{
letter-spacing: 0;
}
.product_series_badge{
padding: 0 5px;
}
/* section_products_title 已移除 */
.product_series_title {
font-size: 4vw;
}
.product_series_subtitle {
font-size: 3.5vw;
margin-bottom: 10px;
}
.product_description_text{
margin-bottom: 10px;
}
.product_description_text p {
font-size: 2.5vw;
}
.section_06{
padding: 0;
}
}
@media (max-width: 480px) {
/* section_products_title 已移除 */
.product_series_title {
font-size: 4vw;
}
.product_series_subtitle {
font-size: 3.8vw;
}
.product_description_text p {
font-size: 3.4vw;
}
.product_description_text br{
display: none;
}
}
/* ===== CTA Buttons 樣式 ===== */
.cta-buttons-section {
margin-top: 60px;
text-align: center;
padding: 40px 20px;
}
.cta-buttons-container {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.cta-button {
display: inline-block;
padding: 15px 35px;
border: 2px solid var(--white);
border-radius: 12px;
background: transparent;
color: var(--white);
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
min-width: 180px;
text-align: center;
backdrop-filter: blur(10px);
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(74deg, #1FFFDD -20.95%, #2F6BE6 24.26%, #AB39F6 82.76%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.cta-button:hover {
color: var(--white);
text-decoration: none;
border-color: transparent;
box-shadow:
0 0 25px rgba(31, 255, 221, 0.4),
0 0 40px rgba(47, 107, 230, 0.3),
0 0 60px rgba(171, 57, 246, 0.2);
transform: translateY(-3px);
}
.cta-button:hover::before {
opacity: 1;
}
@media (max-width: 768px) {
.cta-buttons-container {
flex-direction: column;
align-items: center;
}
.cta-button {
width: 100%;
max-width: 280px;
}
}
/* ===== Section1 CTA Buttons 樣式 ===== */
.section1-cta-buttons {
bottom: clamp(15px, 1.5vw, 25px);
right: clamp(15px, 1.5vw, 25px);
display: flex;
gap: clamp(8px, 0.8vw, 12px);
flex-wrap: wrap;
justify-content: flex-end;
z-index: 10;
}
.section1-cta-button {
display: inline-block;
padding: clamp(6px, 0.6vw, 10px) clamp(12px, 1.2vw, 20px);
background: transparent;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: clamp(0.8rem, 0.95vw, 1.5rem);
border-radius: clamp(40px, 1.5vw, 25px);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-width: clamp(90px, 9vw, 130px);
text-align: center;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(4px, 0.5vw, 8px);
}
.section1-cta-button::after {
content: "»";
font-size: clamp(0.9rem, 1vw, 1.6rem);
font-weight: bold;
color: inherit;
transition: all 0.3s ease;
}
.section1-cta-button:hover {
color: #fff;
text-decoration: none;
background: linear-gradient(74deg, #1FFFDD -20.95%, #2F6BE6 24.26%, #AB39F6 82.76%);
box-shadow: 0 0 15px rgba(253, 255, 255, 0.3);
transform: translateY(-1px);
}
.section1-cta-button:hover::after {
transform: translateX(2px);
color: #fff;
}
.section1-cta-button:before {
content: '';
position: absolute;
border-radius: 20px;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(74deg, #1FFFDD -20.95%, #2F6BE6 24.26%, #AB39F6 82.76%);
transition: left 0.3s ease;
z-index: -1;
opacity: 0;
}
.section1-cta-button:hover:before {
left: 0;
opacity: 1;
}
/* Section1 Product Content 定位 */
.section1 .section1-product-content {
position: relative;
display: flex;
flex-direction: column;
}
/* Mobile 響應式 */
@media (max-width: 768px) {
.section1-cta-buttons {
position: static;
margin-top: 15px;
justify-content: center;
gap: 8px;
}
.section1-cta-button {
min-width: 100px;
padding: 6px 12px;
font-size: 0.7rem;
gap: 4px;
}
.section1-cta-button::after {
font-size: 0.8rem;
}
}
/* ===== Section1 备注文字样式 ===== */
.section1 .remark {
color: var(--white);
font-size: clamp(12px, 1.3vw, 16px);
font-weight: 400;
line-height: 1.4;
margin: 10px 0 0;
font-family: "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
}
/* ===== SECTION_06 樣式 ===== */
.section_06 {
padding: 80px 20px;
position: relative;
overflow: hidden;
background: url('../images/bg_img_6.png'),linear-gradient(178deg, #612CB0 15.41%, #2E0978 82.83%);
background-repeat: no-repeat, no-repeat, no-repeat;
}
.section_06 .container-fluid {
position: relative;
z-index: 2;
}
.description {
color: var(--white-90);
font-size: 2vw;
font-weight: bold;
line-height: 1.8;
margin-top: clamp(20px, 3vw, 40px);
margin-bottom: 0;
font-family: "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
}
@media (max-width: 768px) {
.section_06 {
padding: 20px 4vw;
background-size: cover;
}
/* 調整為與 section_03 相同的手機版排列方式 */
.section_06 .project-title {
margin: 5% auto 4% auto;
}
.description {
font-size: 2.8vw;
margin-top: clamp(15px, 4vw, 25px);
text-align: left;
}
}
@media (max-width: 480px) {
/* Section_06 現在使用通用的 project-title 組件 */
.description {
font-size: 3.5vw;
}
}
/* ===== PLAN2 產品展示模組樣式 ===== */
.plan2 {
max-width: 100%;
padding: 8em 0;
position: relative;
background:
url(../images/bg_img_5.png),
linear-gradient(180deg, #2E0D77 7.39%, #257655 92.61%);
background-size:
cover,
cover;
background-position:
center center,
center center;
background-repeat: no-repeat;
}
.plan2 .p-0 {
position: relative;
z-index: 2;
}
.plan2 .plan2-coverflowSwiper {
width: 100%;
height: auto;
padding-top: 22px;
margin-bottom: 50px;
}
.plan2 .plan2-swiper-slide {
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
background: none;
border-radius: 50px;
}
.plan2 .plan2-coverflow-card {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
aspect-ratio: 20 / 10;
display: flex;
margin: 0 auto;
justify-content: center;
position: relative;
}
.plan2 .plan2-coverflow-card img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
border-radius: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.plan2 .plan2-coverflowSwiper .plan2-swiper-slide-active {
transform: scale(1.2);
z-index: 2;
}
.plan2 .plan2-coverflowSwiper .plan2-swiper-slide-prev,
.plan2 .plan2-coverflowSwiper .plan2-swiper-slide-next {
opacity: 0.7;
}
.plan2 .plan2-timeline-container {
width: 100%;
margin-top: 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.plan2 .plan2-timeline {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 0 50px;
flex: 1;
max-width: 800px;
}
.plan2 .plan2-timeline-line {
position: absolute;
top: 50%;
left: 50px;
right: 50px;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
z-index: 1;
}
.plan2 .plan2-timeline-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, #ff6b6b, #feca57);
border-radius: 2px;
transition: width 0.5s ease;
z-index: 2;
}
.plan2 .plan2-timeline-item {
position: relative;
z-index: 3;
cursor: pointer;
transition: all 0.3s ease;
}
.plan2 .plan2-timeline-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
border: 4px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
margin: 0 auto;
}
.plan2 .plan2-timeline-item.active .plan2-timeline-dot {
background: #ff6b6b;
border-color: white;
box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.3);
}
.plan2 .plan2-timeline-title {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
border-radius: 20px;
/* font-size: clamp(0.8rem, 0.9vw, 1.1rem); */
font-size: clamp(0.8rem, 1.12vw, 2rem);
font-weight: bold;
color: #fff;
white-space: nowrap;
opacity: 0.7;
transition: all 0.3s ease;
}
.plan2 .plan2-timeline-item.active .plan2-timeline-title {
opacity: 1;
transform: translateX(-50%) translateY(-0px);
}
.plan2 .plan2-timeline-tooltip {
position: absolute;
top: 45px;
left: 50%;
transform: translateX(-50%);
padding: 12px 16px;
border-radius: 12px;
font-size: clamp(0.8rem, 0.9vw, 1.1rem);
color: #fff;
white-space: normal;
word-wrap: break-word;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 5;
min-width: max-content;
/* min-width: 300px; */
/* max-width: 300px; */
text-align: left;
border: 1px solid #fff;
line-height: 1.4;
}
.plan2 .plan2-timeline-tooltip::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
.plan2 .plan2-timeline-item.active .plan2-timeline-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(5px);
}
.plan2 .plan2-timeline-arrow {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 4px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 40px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
position: relative;
z-index: 10;
}
.plan2 .plan2-timeline-arrow:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.plan2 .plan2-timeline-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: scale(1);
}
.plan2 .plan2-timeline-arrow.left {
margin-right: 30px;
}
.plan2 .plan2-timeline-arrow.right {
margin-left: 30px;
}
/* Swiper 3D Coverflow 陰影調整 */
.plan2 .swiper-3d .swiper-slide-shadow-left,
.plan2 .swiper-3d .swiper-slide-shadow-right {
display: none !important;
}
/* 或者如果需要保留陰影效果，使用以下設定 */
.plan2 .plan2-coverflow-card::before,
.plan2 .plan2-coverflow-card::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 30%;
pointer-events: none;
z-index: 1;
border-radius: 25px;
}
.swiper-slide .plan2-swiper-slide .swiper-slide-visible .swiper-slide-next{
transform: translate3d(0px, 0px, -600px) rotateX(0deg) rotateY(-50deg) scale(1.2) !important;
}
/* .plan2 .plan2-swiper-slide:not(.swiper-slide-active) .plan2-coverflow-card::before {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
.plan2 .plan2-swiper-slide:not(.swiper-slide-active) .plan2-coverflow-card::after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
} */
/* .swiper-3d .swiper-slide-shadow-left {
background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
} */
/* Plan2 響應式設計 */
@media (max-width: 768px) {
.plan2 {
padding: 0px 4vw;
}
.section_02 .title{
padding-top: 0;
}
.plan2 .plan2-coverflowSwiper,
.plan2 .plan2-timeline-container {
display: none;
}
.plan2 .plan2-mobile-swiper-container {
display: block;
margin-top: 20px;
}
.plan2 .plan2-mobile-product-card {
background: none;
box-shadow: none;
padding: 20px;
margin: 0 27px;
text-align: center;
}
.plan2 .plan2-mobile-product-image {
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
}
.plan2 .plan2-mobile-product-image img {
width: auto;
height: auto;
max-width: 100%;
max-height: auto;
object-fit: contain;
}
.plan2 .plan2-mobile-timeline-title {
font-size: 1rem;
font-weight: bold;
color: #fff;
margin-bottom: 15px;
line-height: 1.3;
}
.plan2 .plan2-mobile-timeline-tooltip {
background: none;
padding: 10px 16px;
font-size: 0.9rem;
color: #ffffff;
margin-bottom: 0;
box-shadow: none;
}
.plan2 .plan2-mobile-nav-btn {
color: white;
background: none;
box-shadow: none;
width: 44px;
backdrop-filter: none;
margin-top: -22px;
z-index: 10;
}
.plan2 .plan2-mobile-nav-btn:after {
font-size: 20px;
font-weight: bold;
color: white;
}
.plan2 .plan2-mobile-nav-btn:hover {
transform: scale(1.1);
}
.plan2 .plan2-mobile-nav-btn.swiper-button-next {
right: 0px;
}
.plan2 .plan2-mobile-nav-btn.swiper-button-prev {
left: 0px;
}
.plan2 .plan2-mobile-pagination {
bottom: 0;
}
.plan2 .plan2-mobile-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5);
opacity: 1;
}
.plan2 .plan2-mobile-pagination .swiper-pagination-bullet-active {
background: white;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}
}
/* iPad 和中等尺寸螢幕（768px - 1024px）的特殊處理 */
@media (min-width: 768px) and (max-width: 1024px) {
.plan2 .plan2-coverflowSwiper {
display: block;
}
.plan2 .plan2-timeline-container {
display: flex;
}
.plan2 .plan2-mobile-swiper-container {
display: none;
}
.plan2 {
padding: 105px 3%;
}
}
@media (min-width: 1025px) {
.plan2 .plan2-mobile-swiper-container {
display: none;
}
}
/* Section_07 到 Section_08 過渡效果 */
.section_07::after {
content: '';
position: absolute;
top: -10%;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(46, 13, 119, 0.00) 10.91%, #2e0978 28.2%, #2d0f74 76.85%, rgb(45 15 116 / 0%) 94.55%);
height: 200px;
}
/* ===== SECTION_08 Dell AI Factory ===== */
.section_08 {
position: relative;
padding: 80px 0;
background:
url('../images/bg_img_6.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/* background-attachment: fixed; */
min-height: 100vh;
display: flex;
align-items: center;
}
/* .section_08::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
} */
.section_08 .container-fluid {
position: relative;
z-index: 2;
}
/* Section_08 現在使用通用的 project-title 組件 */
.section_08 .description {
font-size: clamp(1rem, 2vw, 1.5rem);
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-weight: 400;
margin: 0;
}
.section_08 .content {
display: flex;
justify-content: center;
align-items: center;
}
.section_08 .chart {
border-radius: 20px;
padding: 3%;
}
.section_08 .chart img {
width: 100%;
height: auto;
border-radius: 15px;
}
/* Section_08 響應式設計 */
@media (max-width: 768px) {
.section_08 {
padding: 0;
background-attachment: scroll;
min-height: auto;
}
.section_08 .description {
font-size: clamp(0.9rem, 4vw, 1.2rem);
}
/* .section_08 .chart {
padding: 20px;
margin: 0 20px;
} */
}
@media (max-width: 480px) {
.section_08 {
padding: 20px 0;
}
.section_08 .chart {
padding: 15px;
margin: 0 15px;
}
}
/* ===== PLAN3 產品展示模組樣式 (複製 plan2，漸層不同) ===== */
.plan3 {
max-width: 100%;
padding: 2em 0;
position: relative;
background:
url('../images/bg_img_5.png'),
linear-gradient(360deg, #1F3DFF 3.05%, #51A64C 63.41%);
background-size:
cover,
cover;
background-position: top;
background-repeat: no-repeat;
}
.plan3 .p-0 {
position: relative;
z-index: 2;
}
.plan3 .plan3-coverflowSwiper {
width: 100%;
height: auto;
padding-top: 22px;
margin-bottom: 50px;
}
.plan3 .plan3-swiper-slide {
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
background: none;
border-radius: 50px;
overflow: hidden;
}
.plan3 .plan3-coverflow-card {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
aspect-ratio: 20 / 10;
display: flex;
margin: 0 auto;
justify-content: center;
position: relative;
}
.plan3 .plan3-coverflow-card img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
border-radius: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.plan3 .plan3-coverflowSwiper .plan3-swiper-slide-active {
transform: scale(1.2);
z-index: 2;
}
.plan3 .plan3-coverflowSwiper .plan3-swiper-slide-prev,
.plan3 .plan3-coverflowSwiper .plan3-swiper-slide-next {
opacity: 0.7;
}
.plan3 .plan3-timeline-container {
width: 100%;
margin-top: 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.plan3 .plan3-timeline {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 0 50px;
flex: 1;
max-width: 800px;
}
.plan3 .plan3-timeline-line {
position: absolute;
top: 50%;
left: 50px;
right: 50px;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
z-index: 1;
}
.plan3 .plan3-timeline-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, #ff6b6b, #feca57);
border-radius: 2px;
transition: width 0.5s ease;
z-index: 2;
}
.plan3 .plan3-timeline-item {
position: relative;
z-index: 3;
cursor: pointer;
transition: all 0.3s ease;
}
.plan3 .plan3-timeline-dot {
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
border: 4px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
margin: 0 auto;
}
.plan3 .plan3-timeline-item.active .plan3-timeline-dot {
background: #ff6b6b;
border-color: white;
box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.3);
}
.plan3 .plan3-timeline-title {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
border-radius: 20px;
font-size: clamp(0.8rem, 1.12vw, 2rem);
font-weight: bold;
color: #fff;
white-space: nowrap;
opacity: 0.7;
transition: all 0.3s ease;
}
.plan3 .plan3-timeline-item.active .plan3-timeline-title {
opacity: 1;
transform: translateX(-50%) translateY(-0px);
}
.plan3 .plan3-timeline-tooltip {
position: absolute;
top: 45px;
left: 50%;
transform: translateX(-50%);
padding: 12px 16px;
border-radius: 12px;
font-size: clamp(0.8rem, 0.9vw, 1.1rem);
color: #fff;
white-space: normal;
word-wrap: break-word;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 5;
min-width: max-content;
/* min-width: 300px;
max-width: 300px; */
text-align: left;
border: 1px solid #fff;
line-height: 1.4;
}
.plan3 .plan3-timeline-tooltip::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
.plan3 .plan3-timeline-item.active .plan3-timeline-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(5px);
}
.plan3 .plan3-timeline-arrow {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 4px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 40px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
position: relative;
z-index: 10;
}
.plan3 .plan3-timeline-arrow:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.plan3 .plan3-timeline-arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: scale(1);
}
.plan3 .plan3-timeline-arrow.left {
margin-right: 30px;
}
.plan3 .plan3-timeline-arrow.right {
margin-left: 30px;
}
/* Plan3 3D陰影效果設定 */
.plan3 .swiper-3d .swiper-slide-shadow-left,
.plan3 .swiper-3d .swiper-slide-shadow-right {
display: none !important;
}
/* Plan3 響應式設計 */
@media (max-width: 1200px) {
.plan3 .plan3-timeline,.plan2 .plan2-timeline {
max-width: 70%;
}
}
@media (max-width: 768px) {
.plan3 {
padding: 0 4vw 35px;
}
.plan3::after {
height: 120px;
}
.section_10::before {
height: 120px;
}
.plan3 .plan3-coverflowSwiper,
.plan3 .plan3-timeline-container {
display: none;
}
.plan3 .plan3-mobile-swiper-container {
display: block;
}
.plan3 .plan3-mobile-product-card {
background: none;
box-shadow: none;
padding: 20px;
margin: 0 27px;
text-align: center;
}
.plan3 .plan3-mobile-product-image {
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
}
.plan3 .plan3-mobile-product-image img {
width: auto;
height: auto;
max-width: 100%;
max-height: auto;
object-fit: contain;
}
.plan3 .plan3-mobile-timeline-title {
font-size: 1rem;
font-weight: bold;
color: #fff;
margin-bottom: 15px;
line-height: 1.3;
}
.plan3 .plan3-mobile-timeline-tooltip {
background: none;
padding: 10px 16px;
font-size: 0.9rem;
color: #ffffff;
margin-bottom: 0;
box-shadow: none;
}
.plan3 .plan3-mobile-nav-btn {
color: white;
background: none;
box-shadow: none;
width: 44px;
backdrop-filter: none;
margin-top: -22px;
z-index: 10;
}
.plan3 .plan3-mobile-nav-btn:after {
font-size: 20px;
font-weight: bold;
color: white;
}
.plan3 .plan3-mobile-nav-btn:hover {
transform: scale(1.1);
}
.plan3 .plan3-mobile-nav-btn.swiper-button-next {
right: 0px;
}
.plan3 .plan3-mobile-nav-btn.swiper-button-prev {
left: 0px;
}
.plan3 .plan3-mobile-pagination {
bottom: 0;
}
.plan3 .plan3-mobile-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5);
opacity: 1;
}
.plan3 .plan3-mobile-pagination .swiper-pagination-bullet-active {
background: white;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}
}
/* iPad 和中等尺寸螢幕（768px - 1024px）的特殊處理 */
@media (min-width: 768px) and (max-width: 1024px) {
.plan3 .plan3-coverflowSwiper {
display: block;
}
.plan3 .plan3-timeline-container {
display: flex;
}
.plan3 .plan3-mobile-swiper-container {
display: none;
}
.plan3 {
padding: 105px 3%;
}
}
@media (min-width: 1025px) {
.plan3 .plan3-mobile-swiper-container {
display: none;
}
}
/* Section_09 到 Section_10 過渡效果 */
.plan3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(180deg, rgba(9, 19, 86, 0.00) 0%, rgb(32 56 144 / 24%) 40%, #1f3cfc 100%);
z-index: 1;
pointer-events: none;
}
.section_10::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(180deg, #203cf8 0%, rgb(30 59 247) 60%, rgba(9, 19, 86, 0.00) 100%);
z-index: 1;
pointer-events: none;
}
/* ===== SECTION_10 AI 啟程企業高效環境樣式 ===== */
.section_10 {
position: relative;
overflow: hidden;
background: url('../images/bg_img_10.jpg') center/cover no-repeat;
padding: 0;
}
/* 上方過渡漸層 */
.section_10 .transition_top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background: linear-gradient(180deg, rgba(31, 61, 255, 0.00) 13.04%, #1f3dff00 100%);
z-index: 1;
}
/* 下方過渡漸層 */
.section_10 .transition_bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: linear-gradient(180deg, rgba(9, 19, 86, 0.00) 13.04%, #100A34 90.38%);
z-index: 1;
}
.section_10 .container {
max-width: 1400px;
margin: 0 auto;
padding: 120px 20px;
position: relative;
z-index: 2;
text-align: center;
}
/* section_10 標題使用 universal-title-container 通用組件 */
.section_10 .content {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.section_10 .text {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.section_10 .main_text {
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
font-weight: 600;
color: var(--white);
line-height: 1.8;
margin-bottom: 40px;
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}
.section_10 .disclaimer {
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin: 0;
font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑", sans-serif;
}
/* 手機版響應式設計 */
@media (max-width: 768px) {
.section_10 .container {
padding: 0 4vw;
}
/* section_10 標題使用 universal-title-container 通用組件 */
.section_10 .chart {
padding: 20px;
border-radius: 15px;
}
.section_10 .main_text {
font-size: clamp(1rem, 3.5vw, 1.4rem);
line-height: 1.7;
margin-bottom: 30px;
}
.section_10 .disclaimer {
font-size: clamp(0.8rem, 3vw, 1rem);
line-height: 1.5;
}
.section_10 .transition_top,
.section_10 .transition_bottom {
height: 80px;
}
}
@media (max-width: 480px) {
.section_10 .container {
padding: 0 3vw;
}
/* section_10 標題使用 universal-title-container 通用組件 */
.section_10 .content {
gap: 30px;
}
.section_10 .chart {
padding: 15px;
border-radius: 12px;
}
.section_10 .main_text {
font-size: clamp(0.85rem, 3vw, 1.2rem);
margin-bottom: 25px;
}
.section_10 .disclaimer {
font-size: clamp(0.7rem, 3.5vw, 0.9rem);
}
.section_10 .transition_top,
.section_10 .transition_bottom {
height: 60px;
}
.plan3::after {
height: 80px;
}
.section_10::before {
height: 80px;
}
}
.section_10 .universal-subtitle{
font-size: clamp(1rem, 3vw, 2.8rem);
font-weight: 600;
color: var(--white);
line-height: 1.8;
margin: 0;
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.664);
letter-spacing: 1.5px;
}
/* ===== SURVEY 活動區塊樣式 ===== */
.survey {
position: relative;
padding: 0;
overflow: hidden;
background: url(../images/survey_mobile_bg.jpg) no-repeat center center;
background-size: cover;
}
.survey .container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background: linear-gradient(180deg, #100A34 25%, rgba(16, 10, 52, 0.50) 54.07%, rgba(19, 11, 62, 0.00) 83.16%);
z-index: 3;
}
.survey .container {
max-width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 2;
}
/* 獎品展示區域 */
.survey-content {
position: relative;
width: 100%;
z-index: 3;
}
.award-container {
position: relative;
width: 100%;
max-width: 1920px;
margin: 0 auto;
display: inline-block;
}
.award-bg {
width: 100%;
height: auto;
max-width: 100%;
}
/* 標題覆蓋層 */
.survey-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
display: flex;
align-items: flex-start;
padding: 2% 2%;
pointer-events: none;
}
.survey-overlay * {
pointer-events: auto;
}
/* 標題區域 */
.survey-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
/* width: 100%; */
max-width: 1400px;
margin: 0 auto;
gap: 60px;
}
.survey-title h2 {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
font-size: clamp(2.5rem, 4vw, 4rem);
font-weight: bold;
background: linear-gradient(50deg, var(--gradient-cyan) 40%, var(--gradient-green) 53.72%, var(--gradient-yellow) 64.21%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 20px 0;
line-height: 1.2;
white-space: nowrap;
text-align: left;
}
/* Survey 區塊的點點動畫 - 與 section_01 保持一致 */
.survey .title-dots {
display: flex;
justify-content: left;
gap: 12px;
margin-top: 30px;
}
.survey .title-dots .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--white-60);
display: inline-block;
animation: dotPulse 2s infinite ease-in-out;
}
.survey .title-dots .dot:nth-child(1) { animation-delay: 0s; background: var(--dot-light-blue);}
.survey .title-dots .dot:nth-child(2) { animation-delay: 0.2s; background: var(--dot-blue);}
.survey .title-dots .dot:nth-child(3) { animation-delay: 0.4s; background: var(--dot-medium-blue);}
.survey .title-dots .dot:nth-child(4) { animation-delay: 0.6s; background: var(--primary-medium-blue);}
.survey .title-dots .dot:nth-child(5) { animation-delay: 0.8s; background: var(--primary-deep-blue);}
.survey-info {
flex: 1;
}
.survey-info ul {
list-style: none;
padding-left: 20px;
margin: 0;
text-align: left;
}
.survey-info li {
color: #fff;
text-shadow: 0 0 8px rgb(255 255 255 / 50%);
font-size: clamp(0.9rem, 1.5vw, 1.45rem);
line-height: 1.4;
margin-bottom: 8px;
position: relative;
padding-left: 25px;
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
}
.survey-info li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
font-weight: bold;
}
.survey-info li.notice::before {
content: "";
}
.survey-info li.notice {
padding-left: 0;
}
.survey-info .link {
color: var(--gradient-cyan);
transition: color 0.3s ease;
}
.survey-info .link:hover {
color: var(--gradient-green);
}
/* 獎項圖片 */
.award-item {
position: absolute;
z-index: 5;
max-width: none;
animation: awardGlow 3s ease-in-out infinite;
}
@keyframes awardGlow {
0%, 100% {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2))
drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
transform: scale(1);
}
50% {
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4))
drop-shadow(0 0 20px rgba(255, 255, 255, 0.2))
drop-shadow(0 0 30px rgba(255, 255, 255, 0.1));
transform: scale(1.01);
}
}
.award-item:hover {
animation-play-state: paused;
transform: scale(1.05);
filter: drop-shadow(0 0 25px rgba(31, 255, 221, 1))
drop-shadow(0 0 40px rgba(31, 255, 221, 0.6))
drop-shadow(0 0 60px rgba(31, 255, 221, 0.3));
}
/* 獎項定位 - 使用相對於圖片的百分比定位 */
.award-first {
top: 23%;
right: 15%;
width: 20%;
height: auto;
animation-delay: 0s;
}
.award-second {
bottom: 10%;
left: 8%;
width: 18%;
height: auto;
animation-delay: 1s;
}
.award-third {
top: 62%;
right: 10%;
width: 18%;
height: auto;
animation-delay: 2s;
}
/* 問卷按鈕 */
.survey-button-container {
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
width: auto;
text-align: center;
filter: contrast(1.5);
}
.survey-button {
width: 100%;
height: auto;
max-width: 70%;
cursor: pointer;
margin: 0 auto;
display: block;
transition: all 0.3s ease;
}
.survey-button:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 15px rgba(116, 255, 243, 0.555))
drop-shadow(0 0 25px rgba(31, 255, 221, 0.2))
drop-shadow(0 0 35px rgba(31, 255, 221, 0.1));
}
/* 手機版隱藏桌面版，顯示手機版 */
.survey-mobile {
display: none;
}
.survey-desktop {
display: block;
}
/* ===== 手機版 Survey 樣式 ===== */
.survey-mobile-container {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.survey-mobile-bg {
width: 100%;
height: auto;
display: block;
opacity: 0.8;
}
.survey-mobile-overlay {
padding: 8% 6%;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
.survey-mobile-header {
position: relative;
z-index: 5;
text-align: center;
margin-bottom: 6%;
padding-top: 5%;
}
.survey-mobile-title {
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
font-size: clamp(2rem, 7vw, 3rem);
font-weight: bold;
background: linear-gradient(50deg, var(--gradient-cyan) 40%, var(--gradient-green) 53.72%, var(--gradient-yellow) 64.21%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 5% 0;
line-height: 1.3;
text-shadow: 0 0 20px rgba(31, 255, 221, 0.3);
}
.survey-mobile-dots {
display: flex;
justify-content: center;
gap: 6px;
}
.survey-mobile-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: dotPulse 2s ease-in-out infinite;
}
.survey-mobile-dots .dot:nth-child(1) { animation-delay: 0s; background: var(--dot-light-blue);}
.survey-mobile-dots .dot:nth-child(2) { animation-delay: 0.2s; background: var(--dot-blue);}
.survey-mobile-dots .dot:nth-child(3) { animation-delay: 0.4s; background: var(--dot-medium-blue);}
.survey-mobile-dots .dot:nth-child(4) { animation-delay: 0.6s; background: var(--primary-medium-blue);}
.survey-mobile-dots .dot:nth-child(5) { animation-delay: 0.8s; background: var(--primary-deep-blue);}
.survey-mobile-info {
text-align: center;
}
.survey-mobile-info p {
color: #fff;
font-size: clamp(0.9rem, 3.8vw, 1.2rem);
line-height: 1.6;
margin-bottom: 3%;
font-family: "Noto Sans TC", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
font-weight: 500;
}
.survey-mobile-info .notice {
font-size: clamp(0.8rem, 3vw, 1rem);
margin-top: 3%;
}
.survey-mobile-info .link {
color: var(--gradient-cyan);
transition: color 0.3s ease;
}
.survey-mobile-info .link:hover {
color: var(--gradient-green);
}
.survey-mobile-awards {
display: flex;
flex-direction: column;
align-items: center;
gap: 4%;
margin-bottom: 8%;
}
.award-mobile-row {
display: flex;
gap: 5%;
justify-content: space-between;
width: 100%;
}
.award-mobile-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 20px;
padding: 4% 2%;
animation: awardMobileGlow 3.5s ease-in-out infinite;
}
@keyframes awardMobileGlow {
0%, 100% {
filter: drop-shadow(0 0 8px rgba(31, 53, 255, 0.3))
drop-shadow(0 0 15px rgba(31, 255, 221, 0.15));
transform: scale(1);
}
50% {
filter: drop-shadow(0 0 15px rgba(31, 53, 255, 0.6))
drop-shadow(0 0 25px rgba(31, 255, 221, 0.3))
drop-shadow(0 0 35px rgba(31, 255, 221, 0.1));
transform: scale(1.015);
}
}
.award-mobile-first {
margin-bottom: 4%;
margin-left: auto;
margin-right: auto;
animation-delay: 0s;
}
.award-mobile-second {
animation-delay: 0.5s;
}
.award-mobile-third {
animation-delay: 1s;
}
.award-mobile-img {
width: 90%;
height: auto;
max-width: 100%;
object-fit: contain;
margin-bottom: 3%;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}
.award-mobile-title {
color: #fff;
font-size: clamp(0.8rem, 2.8vw, 1rem);
font-weight: 600;
text-align: center;
line-height: 1.4;
margin-bottom: 2%;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
width: 100%;
}
.award-mobile-title .price-label {
color: var(--gradient-cyan);
font-weight: 700;
text-shadow: 0 0 10px rgba(31, 255, 221, 0.6);
}
.award-mobile-price {
color: var(--gradient-cyan);
font-size: clamp(0.7rem, 2.5vw, 0.85rem);
font-weight: 500;
text-shadow: 0 0 8px rgba(31, 255, 221, 0.5);
text-align: center;
width: 100%;
}
/* 響應式設計 */
@media (max-width: 1024px) {
.survey-overlay {
padding: 1.5% 1.5%;
}
.award-first {
width: 22%;
}
.award-second {
width: 20%;
}
.award-third {
width: 20%;
}
.survey-button {
max-width: 50%;
}
.survey-button:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 15px rgba(31, 255, 221, 0.4))
drop-shadow(0 0 25px rgba(31, 255, 221, 0.2))
drop-shadow(0 0 35px rgba(31, 255, 221, 0.1));
}
}
@media (max-width: 768px) {
/* 隱藏桌面版，顯示手機版 */
.survey-desktop {
display: none;
}
.survey-mobile {
display: block;
}
.survey-mobile-awards{
padding: 0;
}
/* 手機版按鈕容器調整為相對定位 */
.survey-button-container {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-bottom: 5%;
z-index: 5;
width: 100%;
text-align: center;
}
/* 調整手機版布局 */
.survey-mobile-title {
font-size: clamp(1.6rem, 6vw, 2.2rem);
padding-top: 3%;
}
.survey-mobile-overlay {
padding: 0;
}
.survey-mobile-info p {
font-size: clamp(0.85rem, 3.5vw, 1.1rem);
}
.award-mobile-row {
gap: 4%;
}
.award-mobile-title {
font-size: clamp(0.75rem, 2.8vw, 0.95rem);
}
.survey-button-mobile {
font-size: clamp(1rem, 4.2vw, 1.3rem);
padding: 4% 10%;
}
}
@media (max-width: 480px) {
/* 進一步優化小屏幕 */
.survey-button {
max-width: 90%;
}
.survey-button:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 15px rgba(31, 255, 221, 0.4))
drop-shadow(0 0 25px rgba(31, 255, 221, 0.2))
drop-shadow(0 0 35px rgba(31, 255, 221, 0.1));
}
.survey-mobile-title {
font-size: clamp(1.4rem, 5.5vw, 1.9rem);
}
.survey-mobile-dots {
gap: 4px;
}
.survey-mobile-dots .dot {
width: 6px;
height: 6px;
}
.survey-mobile-info p {
font-size: clamp(0.8rem, 3.2vw, 0.95rem);
margin-bottom: 2%;
}
.survey-mobile-info .notice {
font-size: clamp(0.75rem, 3vw, 0.9rem);
}
.award-mobile-row {
gap: 3%;
}
.award-mobile-title {
font-size: clamp(0.7rem, 2.5vw, 0.85rem);
}
}
/* 活動注意事項 Modal 樣式 */
#noticeModal .modal-content {
background: linear-gradient(135deg, rgba(26, 26, 46, 0.85) 0%, rgb(22 33 62 / 61%) 50%, rgb(15 52 96 / 0%) 100%);
border: 2px solid var(--gradient-cyan);
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
#noticeModal .modal-header {
/* background: linear-gradient(135deg, var(--primary-blue), var(--primary-medium-blue)); */
border-bottom: 2px solid var(--gradient-cyan);
border-radius: 10px 10px 0 0;
padding: 20px 30px;
}
#noticeModal .modal-title {
color: var(--gradient-cyan);
font-size: 1.8rem;
font-weight: 700;
text-align: center;
width: 100%;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#noticeModal .btn-close {
background: none;
border: none;
color: var(--white);
opacity: 0.8;
font-size: 1.5rem;
position: absolute;
right: 20px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#noticeModal .btn-close:hover {
opacity: 1;
color: var(--gradient-cyan);
}
#noticeModal .btn-close::before {
content: "×";
font-size: 24px;
line-height: 1;
}
#noticeModal .modal-body {
padding: 30px;
max-height: 60vh;
overflow-y: auto;
}
#noticeModal .notice-list {
list-style: none;
padding: 0;
margin: 0;
color: var(--white);
}
#noticeModal .notice-list li {
margin-bottom: 20px;
padding: 15px 20px 15px 35px;
background: rgba(255, 255, 255, 0.05);
border-left: 4px solid var(--gradient-cyan);
border-radius: 8px;
line-height: 1.6;
font-size: 1rem;
position: relative;
}
#noticeModal .notice-list li::before {
content: "●";
color: var(--gradient-cyan);
font-weight: bold;
position: absolute;
font-size: 10px;
left: 15px;
top: 18px;
text-shadow:
0 0 8px var(--gradient-cyan),
0 0 5px rgba(31, 255, 221, 0.6),
0 0 16px rgba(31, 255, 221, 0.4);
filter: drop-shadow(0 0 6px rgba(31, 255, 221, 0.1));
}
#noticeModal .notice-list li .highlight {
color: var(--gradient-cyan);
font-weight: 600;
background: rgba(141, 85, 255, 0.2);
padding: 2px 6px;
border-radius: 4px;
}
#noticeModal .modal-body::-webkit-scrollbar {
width: 8px;
}
#noticeModal .modal-body::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
#noticeModal .modal-body::-webkit-scrollbar-thumb {
background: var(--gradient-cyan);
border-radius: 4px;
}
#noticeModal .modal-body::-webkit-scrollbar-thumb:hover {
background: #00d4ff;
}
/* Modal 響應式設計 */
@media (max-width: 768px) {
#noticeModal .modal-dialog {
margin: 20px 10px;
max-width: calc(100vw - 20px);
display: flex;
align-items: center;
}
#noticeModal .modal-title {
font-size: 1.5rem;
}
#noticeModal .modal-body {
padding: 20px 15px;
max-height: 50vh;
}
#noticeModal .notice-list li {
font-size: 0.9rem;
padding: 12px 15px 12px 30px;
margin-bottom: 15px;
}
#noticeModal .modal-header {
padding: 15px 20px;
}
#noticeModal .notice-list li::before{
font-size: 8px;
top: 12px;
}
}
@media (max-width: 480px) {
#noticeModal .modal-title {
font-size: 1.3rem;
}
#noticeModal .notice-list li {
font-size: 0.85rem;
padding: 10px 12px 10px 28px;
}
#noticeModal .modal-body {
max-height: 40vh;
}
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
--bs-modal-width: 900px;
}
}
.section1-mobile-cta-buttons {
display: flex;
justify-content: center;
gap: 15px;
}
.section1-mobile-cta-button:hover {
background-color: #005999;
}
@media (max-width: 768px) {
.section1-mobile-cta-buttons {
margin: 15px;
}
.section1-mobile-cta-button {
padding: 10px 20px;
font-size: 14px;
}
}
/* 圖片容器樣式 */
.kv_video_desktop img,
.kv_video_mobile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: none; /* 初始隱藏，影片結束後顯示 */
}