.container {position: relative;max-width: 1200px;margin: 0 auto;padding: 0 24px;z-index: 1;}
.twoo_box.container{
    display: grid;
    grid-template-columns: 39% 52%;
    gap: 9%;
    align-items: center;
}
.site-header { padding: 20px 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(0,0,0,0.05); }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 32px; height: 32px; background: #7B61FF; border-radius: 8px; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; }
.logo-text { font-size: 20px; font-weight: 800; color: #1a1a1a; letter-spacing: 0.5px; }
.back-btn { padding: 8px 20px; border: 1px solid #e2e8f0; border-radius: 30px; font-size: 14px; font-weight: 500; color: #4a5568; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 8px; }
.back-btn:hover { background: #7B61FF; color: white; border-color: #7B61FF; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(123, 97, 255, 0.2); }
.hero-section { padding: 120px 0 80px; text-align: center; position: relative; overflow: hidden; }
.hero-bg-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; background: radial-gradient(ellipse at center, rgba(123,97,255,0.1) 0%, rgba(255,255,255,0) 70%); z-index: -1; pointer-events: none; }
.project-tags {display: flex;justify-content: flex-end;gap: 12px;margin-bottom: 2rem;padding-bottom: 2rem;animation: fadeInUp 0.8s ease backwards;border-bottom: #efefef 1px solid;}
.tag { padding: 6px 16px; background: rgba(123, 97, 255, 0.1); color: #7B61FF; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.main-title {font-size: 2.4rem;font-weight: 900;color: #111827;margin-bottom: 24px;letter-spacing: -1.5px;line-height: 1.2;animation: fadeInUp 0.8s ease 0.1s backwards;text-align: left;}
.hero-subtitle {font-size: 18px;color: #6b7280;max-width: 600px;margin: 0 auto 60px;animation: fadeInUp 0.8s ease 0.2s backwards;text-align: left;}
.hero-image-wrap {position: relative;width: min(570px , 100%);margin: 0 auto;border-radius: 24px;box-shadow: 0 30px 60px rgba(0,0,0,0.08);transform: translateY(0);transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);animation: fadeInUp 0.8s ease 0.3s backwards;background: white;padding: 12px;}
.hero-image-wrap:hover { transform: translateY(-10px); }
.browser-chrome { display: flex; gap: 6px; padding: 10px 14px; background: #f1f5f9; border-radius: 12px 12px 0 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #ff5f56; }
.dot-y { background: #ffbd2e; }
.dot-g { background: #27c93f; }
.show-pro-img img{width:100%;}
.show-pro-img .slick-slider{margin-bottom:0;}
.hero-img { border-radius: 0 0 12px 12px; width: 100%; height: auto; display: block; border: 1px solid #f1f5f9; }
.info-section {padding: 5rem 0;background: white;border-bottom: 1px solid #f3f4f6;}
.info-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 80px; }
.section-title { font-size: 28px; font-weight: 800; color: #111827; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; }
.title-decorator { width: 8px; height: 28px; background: linear-gradient(180deg, #7B61FF 0%, #a78bfa 100%); border-radius: 4px; }
.project-desc { font-size: 17px; color: #4b5563; line-height: 1.8; text-align: justify; }
.project-desc span { display: block; margin-bottom: 20px; }
.meta-card {background: #fafafa;border-radius: 20px;padding: 40px;border: 1px solid #f3f4f6;}
.meta-list { list-style: none; }
.meta-item { display: flex; flex-direction: column; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px dashed #e5e7eb; }
.meta-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.meta-label { font-size: 13px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.meta-value { font-size: 16px; font-weight: 700; color: #1f2937; }
.launch-btn { display: inline-flex; justify-content: center; align-items: center; width: 100%; padding: 16px; margin-top: 30px; background: #7B61FF; color: white; border-radius: 12px; font-weight: 700; font-size: 16px; transition: all 0.3s; box-shadow: 0 10px 20px rgba(123, 97, 255, 0.2); }
.launch-btn:hover { background: #6045e2; transform: translateY(-3px); box-shadow: 0 15px 25px rgba(123, 97, 255, 0.3); }
.design-system-section { padding: 100px 0; background: #fcfcfd; }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.color-palette { display: flex; gap: 24px; margin-top: 40px; }
.color-item { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.color-swatch { height: 120px; border-radius: 16px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: transform 0.3s; }
.color-swatch:hover { transform: scale(1.05); }
.c-primary { background: #2D6A4F; }
.c-secondary { background: #52B788; }
.c-accent { background: #D8F3DC; }
.color-hex { font-size: 14px; font-weight: 600; color: #4b5563; text-transform: uppercase; text-align: center; }
.typography-showcase { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f3f4f6; }
.font-family { font-size: 24px; font-weight: 800; color: #111827; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #f3f4f6; }
.font-weights { display: flex; flex-direction: column; gap: 16px; }
.fw-item { display: flex; align-items: center; justify-content: space-between; }
.fw-label { font-size: 14px; color: #6b7280; }
.fw-sample { font-size: 20px; color: #111827; }
.fw-regular { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-bold { font-weight: 700; }
.showcase-section {padding: 5rem 0;background: #111827;color: white;position: relative;}
.showcase-section.colorstyle01{background: #0f6f58;}
.showcase-section.colorstyle02{background: #1d2077;}
.showcase-section.colorstyle03{background: #22120a;}
.showcase-section.colorstyle04{background: #715e4d;}
.showcase-header { text-align: center; margin-bottom: 80px; }
.showcase-title {font-size: 40px;font-weight: 800;margin-bottom: 10px;}
.showcase-subtitle {color: #ffffff;font-size: 18px;}
.full-page-mockup { max-width: 1000px; margin: 0 auto 100px; background: rgba(255,255,255,0.05); padding: 20px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); }
.fpm-img {width: 100%;border-radius: 0;}
.scollJJ{height:600px;overflow-y: scroll;}
..scollJJ {overflow-y: auto;width: calc(90% - 1px);height: 68%;top: 5%;left: 3%;}

.scollJJS {max-height: 450px;overflow-y: scroll;}
.scollJJ::-webkit-scrollbar { width: 5px; }
.scollJJ::-webkit-scrollbar-track { background: #807b7b;}
.scollJJ::-webkit-scrollbar-thumb { background:#dbdbdb; }


.mobile-displays { display: flex; justify-content: center; gap: 40px; }
.mobile-device { width: 320px; background: white; padding: 12px; border-radius: 40px; border: 14px solid #1f2937; box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; }
.mobile-notch {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 80px;height: 10px;background: #1f2937;border-radius: 0 0 16px 16px;z-index: 10;}
.mobile-img { width: 100%; border-radius: 24px; display: block; }
.next-project { padding: 80px 0; text-align: center; background: #fcfcfd; }
.np-label { font-size: 14px; font-weight: 700; color: #7B61FF; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
.np-title { font-size: 48px; font-weight: 900; color: #111827; transition: color 0.3s; display: inline-block; cursor: pointer; }
.np-title:hover { color: #7B61FF; }

.backimg{position:absolute;top:0;left: 0;z-index: 0;opacity: 0.1;}


/* ========================================= */
/* 主題色彩設定：seetstyle-01 (成大定位實驗室) */
/* ========================================= */
.seetstyle-01 .main-title { color: #111827; }
.seetstyle-01 .section-title { color: #111827; }
.seetstyle-01 .hero-bg-glow { background: radial-gradient(ellipse at center, rgba(107,114,128,0.1) 0%, rgba(255,255,255,0) 70%); }
.seetstyle-01 .tag { background: rgba(55, 65, 81, 0.08); color: #374151; }
.seetstyle-01 .title-decorator { background: linear-gradient(180deg, #374151 0%, #9ca3af 100%); }
.seetstyle-01 .launch-btn {background: #2e3192;color: white;box-shadow: 0 10px 20px rgba(55, 65, 81, 0.2);}
.seetstyle-01 .launch-btn:hover { background: #1f2937; box-shadow: 0 15px 25px rgba(55, 65, 81, 0.3); }
.seetstyle-01 .c-primary {background: #2e3192;}
.seetstyle-01 .c-secondary { background: #6B7280; }
.seetstyle-01 .c-accent { background: #F3F4F6; }
.seetstyle-01 .showcase-section { background: #111827; color: white; }
.seetstyle-01 .np-label { color: #374151; }
.seetstyle-01 .np-title { color: #111827; }
.seetstyle-01 .np-title:hover { color: #374151; }

/* ========================================= */
/* 主題色彩設定：seetstyle-02 (貴族世家)      */
/* ========================================= */
.seetstyle-02 .main-title { color: #3E2723; }
.seetstyle-02 .section-title { color: #3E2723; }
.seetstyle-02 .hero-bg-glow { background: radial-gradient(ellipse at center, rgba(245, 124, 0, 0.08) 0%, rgba(255,255,255,0) 70%); }
.seetstyle-02 .tag { background: rgba(245, 124, 0, 0.1); color: #E65100; }
.seetstyle-02 .title-decorator { background: linear-gradient(180deg, #F57C00 0%, #FFB74D 100%); }
.seetstyle-02 .launch-btn { background: #F57C00; color: white; box-shadow: 0 10px 20px rgba(245, 124, 0, 0.2); }
.seetstyle-02 .launch-btn:hover { background: #E65100; box-shadow: 0 15px 25px rgba(245, 124, 0, 0.3); }
.seetstyle-02 .c-primary { background: #2D1E16; }
.seetstyle-02 .c-secondary { background: #212121; }
.seetstyle-02 .c-accent { background: #F57C00; }
.seetstyle-02 .showcase-section { background: #2D1E16; color: white; }
.seetstyle-02 .np-label { color: #F57C00; }
.seetstyle-02 .np-title { color: #3E2723; }
.seetstyle-02 .np-title:hover { color: #F57C00; }

/* ========================================= */
/* 主題色彩設定：seetstyle-03 (Reami shop)     */
/* ========================================= */
.seetstyle-03 .main-title { color: #111827; }
.seetstyle-03 .section-title { color: #111827; }
.seetstyle-03 .hero-bg-glow { background: radial-gradient(ellipse at center, rgba(156, 163, 175, 0.15) 0%, rgba(255,255,255,0) 70%); }
.seetstyle-03 .tag { background: rgba(17, 24, 39, 0.08); color: #111827; }
.seetstyle-03 .title-decorator { background: linear-gradient(180deg, #111827 0%, #6B7280 100%); }
.seetstyle-03 .launch-btn { background: #111827; color: white; box-shadow: 0 10px 20px rgba(17, 24, 39, 0.2); }
.seetstyle-03 .launch-btn:hover { background: #374151; box-shadow: 0 15px 25px rgba(17, 24, 39, 0.3); }
.seetstyle-03 .c-primary {background: #c2a68c;}
.seetstyle-03 .c-secondary {background: #777c6d;}
.seetstyle-03 .c-accent {background: #ece1d3;}
.seetstyle-03 .showcase-section { background: #111827; color: white; }
.seetstyle-03 .np-label { color: #6B7280; }
.seetstyle-03 .np-title { color: #111827; }
.seetstyle-03 .np-title:hover { color: #6B7280; }

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
.info-grid, .ds-grid { grid-template-columns: 1fr; gap: 40px; }
.main-title { font-size: 40px; }
.mobile-displays { flex-wrap: wrap; }
}

@media (max-width: 768px) {
.hero-section { padding: 80px 0 40px; }
.main-title { font-size: 32px; }
.meta-card { padding: 24px; }
.showcase-title { font-size: 32px; }
.np-title { font-size: 32px; }
.mobile-device { width: 280px; border-width: 10px; }
}