@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url("/css/font-awesome.css");
@import url("/css/animate.css");
@import url("/css/bootstrap4-Mfix.css");
@import url("/css/hover.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
html, body {
  width: 100%;
  height: auto;
  overflow-X: hidden;
}
body {
  font-size: 100%;
}
* {
  transition: all .3s;
  -webkit-transition: all .3s;
}
/*:before{ content:"\f146";font-family: 'FontAwesome'; }*/
.btnTop {
  background: #CCC \9;
  background: rgba(0, 0, 0, .2);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 15px;
  cursor: pointer;
  z-index: 99;
  color: #FFF;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  display: none;
  z-index: 999;
}
.btnTop:before {
  content: "\f106";
  font-family: 'FontAwesome';
  font-size: 20px;
  color: #FFF;
  display: block;
  width: 100%;
  height: 25px;
  padding-top: 0;
}
.btnTop:hover {
  background: rgba(0, 0, 0, .4);
}
.img-response {
  max-width: 100%;
  height: auto;
}
/*------------item-inline-block------------*/
.item-inline-block {
  letter-spacing: -5px;
}
.item-inline-block > * {
  display: inline-block !important;
  letter-spacing: 1px;
  vertical-align: top;
}
/*------------item-table-cell------------*/
.item-table-cell {
  display: table;
}
.item-table-cell > * {
  display: table-cell !important;
  vertical-align: top;
}
/*------------item-flex------------*/
.item-flex {
  display: flex !important;
  display: -webkit-flex !important;
  flex-flow: row wrap
}
.item-flex > * {
  flex: 1;
  -webkit-flex: 1
}
.empty {
  display: inline-block;
}
@media screen and (max-width: 640px) {
  .vertical-xs {
    display: block !important;
  }
  .vertical-xs > * {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }
  .empty {
    display: block;
    height: 1px;
  }
}
.show {
  display: block !important;
}
.hide {
  display: none !important;
}
.space-br {
  display: inline-block;
}
@media screen and (max-width: 640px) {
  .hide-xs {
    display: none !important;
  }
  .show-xs {
    display: block !important;
  }
  .space-br {
    display: block;
    line-height: 0;
  }
}
.wrap {
  width: 100%;
  height: auto;
  position: relative;
  font-family: 'Noto Sans TC', "微軟正黑體", Microsoft Yahei;
  line-height: 1.6;
  background: #fff;
}
/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 版頭 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/
.header {
  width: 100%;
  position: relative;
  height: auto;
  overflow: hidden;
}
.header span img {
  width: 100%;
  height: auto;
}
.header .center {
  width: 100%;
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
  z-index: 1;
}
.header .center img {
  width: 100%;
  height: auto;
}
.logo {
    background: #916df9;
    max-width: 240px;
    padding: 10px 30px;
    border-radius: 50px;
}

/*白色LOGO+底色*/
/*
.header .logo {
    background-color: #3e4864;
    position: absolute;
    top: 0;
    width: 100%;
}
.logo a {
    display: inline-block;
}
.logo img {
    width: 250px;
    height: auto;
    padding: 10px;
}
*/
/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/
.container-wrap {
  width: 100%;
  margin: 0 auto;
}
:root {
  --deep: #101a3d;
  --blue: #2667d8;
  --sky: #eaf5ff;
  --purple: #8b5cf6;
  --cyan: #14b8c9;
  --line: #dfe8f5;
  --muted: #64748b;
  --soft: #f5f9ff;
  --card: #ffffff;
}
* {
  box-sizing: border-box
}
body {
  margin: 0;
  font-family: "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  color: var(--deep);
  background: linear-gradient(180deg, #f8fbff 0%, #fff 38%, #f7fbff 100%)
}
.page-wrap {
  overflow: hidden
}
.container-xl {
  max-width: 1180px
}
.section {
  padding: 76px 0
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #eae7ff;
    color: #a489fb;
    font-weight: 800;
    font-size: 14px;
}
.section-title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: .02em;
  text-align: center;
  margin: 0 0 42px
}
.section-title span {
  background: linear-gradient(90deg, #2667d8, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.glass {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(210, 224, 245, .8);
  box-shadow: 0 24px 70px rgba(31, 86, 160, .12)
}
.hero {
  padding: 26px 0 64px
}
.hero-panel {
  position: relative;
  border-radius: 34px;
  min-height: 470px;
  padding: 58px;
  overflow: hidden;
  background: radial-gradient(circle at 78% 25%, rgba(117, 168, 255, .22), transparent 28%), radial-gradient(circle at 92% 86%, rgba(139, 92, 246, .18), transparent 32%), linear-gradient(135deg, #fff 0%, #f8fbff 58%, #eef6ff 100%);
  border: 1px solid #c9dcff;
  box-shadow: 0 28px 80px rgba(38, 103, 216, .13)
}
.hero-panel:before {
  content: "";
  position: absolute;
  inset: auto -80px -140px auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(38, 103, 216, .08), rgba(139, 92, 246, .16));
  filter: blur(3px)
}
.hero h1 {
  font-size: 54px;
  font-weight: 950;
  line-height: 1.15;
  margin: 20px 0 16px;
  letter-spacing: .02em
}
.hero h2 {
  font-size: 24px;
  font-weight: 850;
  line-height: 1.5;
  margin: 0 0 26px
}
.hero p {
  font-size: 18px;
  line-height: 1.9;
  color: #52617b;
  margin: 0
}
.hero .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 66px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 850;
    margin-top: 30px;
    letter-spacing: .08em;
    background: linear-gradient(135deg,#8e45e8,#6a66ff);
    box-shadow: 0 14px 28px rgba(120,80,230,.25);
}
.hero .btn:hover {
    color: #fff;
}
.hero-img-placeholder {
    position: relative;
    z-index: 1;
    /* aspect-ratio: 1.22/1; */
    width: 100%;
    /* border-radius: 28px; */
    /* border: 2px dashed #b9cdf4; */
    /* background: linear-gradient(135deg,rgba(255,255,255,.65),rgba(229,241,255,.8)); */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8aa1c4;
    font-weight: 800;
    /* box-shadow: inset 0 0 60px rgba(38,103,216,.06); */
}

.pain-section {
  background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%)
}
.pain-card {
  height: 100%;
  padding: 34px 28px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid #e5edf8;
  box-shadow: 0 18px 45px rgba(15, 40, 90, .08);
  text-align: center;
  transition: .25s
}
.pain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(38, 103, 216, .14)
}
.icon-orb {
    width: 84px;
    height: 84px;
    border-radius: 28px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    font-size: 36px;
    color: #4e3bc2;
    background: linear-gradient(135deg, #eef5ff, #f6efff);
    box-shadow: inset 0 0 0 1px #dbe8ff;
}
.pain-card h3 {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 16px
}
.pain-card p {
    font-size: 18px;
    color: #39445a;
    line-height: 1.75;
    margin: 0;
}
.compare-section{
    background:#f8faff;
}

.compare-card {
    max-width: 1080px;
    margin: 0px auto 110px;
    background: #fff;
    border-radius: 32px;
    font-size: 18px;
    padding: 18px;
    box-shadow: 0 24px 70px rgba(79,70,229,.10);
}

.compare-head, .compare-row {
    display: grid;
    grid-template-columns: .8fr 1.2fr 1.35fr;
    gap: 14px;
    align-items: stretch;
}
.compare-head{
    margin-bottom:14px;
}

.compare-head > div{
    padding:24px 20px;
    border-radius:22px;
    background:#f1f5ff;
    text-align:center;
    font-weight:900;
    color:#334155;
}

.compare-head span{
    font-size:14px;
    color:#64748b;
    font-weight:600;
}

.compare-head .premium{
    color:#fff;
    background:linear-gradient(135deg,#4f46e5,#8b5cf6);
    box-shadow:0 14px 35px rgba(99,102,241,.28);
}

.compare-head .premium span{
    color:rgba(255,255,255,.85);
}

.compare-row{
    margin-bottom:14px;
}

.compare-row:last-child{
    margin-bottom:0;
}

.compare-row > div{
    min-height:92px;
    padding:24px 22px;
    border-radius:22px;
    display:flex;
    align-items:center;
    line-height:1.7;
}

.compare-row .label{
    background:#f8fafc;
    font-weight:900;
    color:#0f172a;
}

.compare-row .old{
    background:#f8fafc;
    color:#64748b;
}

.compare-row .new{
    position:relative;
    background:linear-gradient(135deg,#f5f3ff,#eef2ff);
    color:#4f46e5;
    font-weight:800;
    box-shadow:inset 0 0 0 1px rgba(99,102,241,.12);
}

.compare-row .new::before{
    content:"✓";
    width:26px;
    height:26px;
    min-width:26px;
    margin-right:12px;
    border-radius:50%;
    background:#6366f1;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:900;
}

/* 手機版：改成卡片式，不硬塞三欄 */
@media(max-width:768px){

    .compare-card{
        padding:0;
        background:transparent;
        box-shadow:none;
        border-radius:0;
    }

    .compare-head{
        display:none;
    }

    .compare-row{
        display:block;
        background:#fff;
        border-radius:26px;
        padding:18px;
        margin-bottom:22px;
        box-shadow:0 16px 40px rgba(79,70,229,.10);
    }

    .compare-row > div{
        min-height:auto;
        border-radius:18px;
        padding:18px 20px;
    }

    .compare-row .label{
        background:linear-gradient(135deg,#4f46e5,#8b5cf6);
        color:#fff;
        font-size:20px;
        justify-content:center;
        margin-bottom:12px;
    }

    .compare-row .old{
        position:relative;
        display:block;
        margin-bottom:10px;
        padding-top:44px;
        background:#f8fafc;
    }

    .compare-row .old::before{
        content:"現行方案";
        position:absolute;
        top:14px;
        left:20px;
        font-size:13px;
        font-weight:800;
        color:#94a3b8;
    }

    .compare-row .new{
        display:flex;
        align-items:flex-start;
        padding-top:44px;
    }

    .compare-row .new::after{
        content:"專屬獨立資料庫";
        position:absolute;
        top:14px;
        left:20px;
        font-size:13px;
        font-weight:900;
        color:#6366f1;
    }
}



.target-card {
  height: 100%;
  border-radius: 28px;
  padding: 38px 26px;
  background: #fff;
  border: 1px solid #e4edf8;
  box-shadow: 0 18px 45px rgba(15, 40, 90, .08);
  text-align: center
}
.target-illus {
    width: 86px;
    height: 86px;
    border-radius: 26px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    font-size: 42px;
    color: #3e65df;
    background: linear-gradient(135deg, #eef6ff, #f7efff);
    box-shadow: 0 14px 35px rgba(38, 103, 216, .1);
}
.target-card h3 {
  font-size: 22px;
  font-weight: 950;
  margin-bottom: 16px
}
.target-card p {
    line-height: 1.75;
    margin: 0;
    color: #39445a;
    font-size: 18px;
}
.cta-panel {
  border-radius: 34px;
  padding: 54px;
  background: linear-gradient(135deg, #2667d8, #8b5cf6);
  color: #fff;
  text-align: center;
  box-shadow: 0 26px 70px rgba(87, 96, 230, .22)
}
.cta-panel h2 {
  font-size: 34px;
  font-weight: 950;
  margin-bottom: 14px
}
.cta-panel p {
  opacity: .92;
  margin: 0;
  line-height: 1.8
}


/* =========================
升級方案聯絡表單
========================= */

.upgrade-contact-section{
padding:100px 20px;
background:
radial-gradient(circle at top right,#eef2ff 0%,transparent 35%),
linear-gradient(180deg,#f8faff 0%,#ffffff 100%);
}

.upgrade-contact-section .part-title {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.5;
    color: #0f172a;
    margin-bottom: 60px;
}
.upgrade-contact-section .part-title span {
    background: linear-gradient(90deg,#4f46e5,#8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 42px;
}

.upgrade-contact-section .contact{
max-width:1000px;
margin:auto;
background:#fff;
border-radius:32px;
padding:50px;
box-shadow:
0 20px 60px rgba(79,70,229,.08),
0 5px 20px rgba(0,0,0,.04);
}

.upgrade-contact-section .table-from{
width:100%;
border:none;
}

.upgrade-contact-section .table-from tr{
display:flex;
flex-direction:column;
margin-bottom:24px;
}

.upgrade-contact-section .table-from th {
    width: 100%!important;
    text-align: left!important;
    font-size: 18px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
    border: none;
}

.upgrade-contact-section .table-from td{
width:100%;
border:none;
padding:0;
}

.upgrade-contact-section input[type=text],
.upgrade-contact-section input[type=email],
.upgrade-contact-section select,
.upgrade-contact-section textarea{
width:100%;
border:1px solid #dbe3f3;
border-radius:16px;
background:#fff;
padding:15px 18px;
font-size:18px;
transition:.25s;
}

.upgrade-contact-section textarea{
min-height:180px;
resize:vertical;
}

.upgrade-contact-section input:focus,
.upgrade-contact-section textarea:focus,
.upgrade-contact-section select:focus{
border-color:#7c5cff;
box-shadow:0 0 0 4px rgba(124,92,255,.12);
outline:none;
}

.upgrade-contact-section .phone-block{
gap:20px;
}

.upgrade-contact-section .phone-block > div{
flex:1;
}

.upgrade-contact-section .select{
position:relative;
}

.upgrade-contact-section .arr{
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
pointer-events:none;
}

.upgrade-contact-section .state {
    padding: 20px;
    border-radius: 16px;
    background: #f8faff;
    justify-content: center;
    display: flex;
}

.upgrade-contact-section .state label{
display:flex;
align-items:flex-start;
gap:12px;
cursor:pointer;
}

.upgrade-contact-section .state p {
    margin: 0;
    font-size: 16px;
    color: #64748b;
    line-height: 1.8;
}

.upgrade-contact-section .state a{
color:#6366f1;
font-weight:600;
}

.upgrade-contact-section input[type=checkbox]{
width:20px;
height:20px;
margin-top:3px;
accent-color:#6366f1;
}

.upgrade-contact-section #sendArea{
width:100%;
}

.upgrade-contact-section #submitBtn{
width:100%;
height:58px;
border:none;
border-radius:16px;
color:#fff;
font-size:18px;
font-weight:800;
background:
linear-gradient(
135deg,
#5b5cf6,
#8b5cf6
);
box-shadow:
0 12px 30px rgba(99,102,241,.28);
transition:.25s;
}

.upgrade-contact-section #submitBtn:hover{
transform:translateY(-2px);
box-shadow:
0 18px 40px rgba(99,102,241,.35);
}

@media(max-width:768px){

.upgrade-contact-section{
    padding:70px 15px;
}

.upgrade-contact-section .contact{
    padding:30px 24px;
    border-radius:24px;
}

.upgrade-contact-section .part-title{
    font-size:30px;
}

.upgrade-contact-section .phone-block{
    flex-direction:column;
}

}




@media (max-width:991px) {
  .hero-panel {
    padding: 34px
  }
  .hero h1 {
    font-size: 38px
  }
  .hero h2 {
    font-size: 20px
  }
  .section-title {
    font-size: 28px
  }
 
}
/*----------------------------- 注意事項文字 -----------------------------------  */
/* ul { width:80%; margin:0 auto; color:#a3a3a3; list-style:decimal; padding-left:30px;}
 ul li{ margin-bottom:10px; font-size:15px; color:#333333; line-height:1.5;}
*/
@media screen and (max-width: 640px) {}