body{font-family: "Arial","微軟正黑體";background: #FFF; }
button:focus{outline:none}
.container{position: relative;max-width: 80%;}
a:hover{text-decoration: none;}
ul{margin-left: -3%;}
p{font-size: 20px;}
h3{display: flex;align-items: center;font-size: 25px;font-weight: 400;}
h4{line-height: 1.8;}
h6{font-size: 1.8rem;}




/* visual */
header#visual{height: 100vh;position: relative;overflow: hidden;background: url("../images/header-01bg.jpg") no-repeat top center;background-size: 100%;}
header#visual:before{content: "";width: 100%;height: 95vh;position: absolute;top: 0;left: 0;background: url("../images/") no-repeat center;background-size: cover;z-index: 100;}
header#visual .title{z-index: 1000;}
header#visual .title img{width: 60%;margin-left: 5%;margin-top: 5%;}
header#Visual .master_content {position: relative;padding: 0 8% 10% 8%;}



/* First */
section#First{padding: 7% 0 80px 0;position: relative;background: url("../images/BG.jpg") no-repeat top center;background-size: 100%;background-attachment: fixed;}


section#First h3 span{background: #091f5b;box-shadow: 1.3333vw 1.3333vw 0px 0 #71f6fb;color: #fff;display: inline-block;font-size: 6.6667vw;padding: 1.0667vw 2.6667vw 1.8667vw;position: relative;}
section#First h3 span {box-shadow: 10px 10px 0px 0 #71f6fb;font-size: 2.5rem;padding: 12px 20px 15px;}


section#First img{width: 100%;}
section#First p{line-height: 1.7;text-align: justify;padding: 30px 20px 0 10px;}

section#First .title{
    font-size:22px;
    font-weight:bold;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom: 1px dashed #FFF;
}



.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.card{
    background:#eee;
    border-radius:20px;
    padding:30px;
}
section#First .desc {line-height: 1.7;margin-bottom: 0px;font-size: 1.2rem;font-weight: bold;color: #FFF;display: flex;align-items: flex-start;}
section#First .desc strong{width: 145px;}
section#First li::marker {color: #fff;}


section#First .grid {
  display: flex;
  gap: 20px;
}

section#First .grid > div {
  flex: 1;
}

section#First .card {
  padding: 20px;
  border: 2px solid #fff;
  border-radius: 12px;
  height: 100%;
}

section#First .title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
}

section#First .desc {
  display: flex;
}

section#First .desc strong {
  display: inline-block;
  min-width: 100px;
}

section#First .flow{width: 46%;display: block;margin:5% auto;}

/* VVF與VCF的核心定位與差異 */
    .wrap {
      /*max-width: 980px; */
      margin: 0 auto;
    }

    h1 {
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      color: #1e3a8a;
    }

    .table-box {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      margin: 0 100px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    thead th {
      background: #091f5b;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding: 16px 14px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    thead th:first-child {
      text-align: left;
    }

    tbody td {
      padding: 14px;
      border-bottom: 1px solid #e5e7eb;
      text-align: center;
      font-size: 15px;
    }

    tbody td:first-child {
      text-align: left;
      font-weight: 600;
      color: #111827;
      width: 42%;
    }

    tbody tr:nth-child(even) {
      background: #f9fbff;
    }

    .yes,
    .no {
      display: inline-block;
      min-width: 56px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
    }

    .yes {
      background: #dcfce7;
      color: #166534;
    }

    .no {
      background: #fee2e2;
      color: #991b1b;
    }

/* Second */
section#Second{padding: 120px 0 80px 0;position: relative;background: url("../images/Second_BG.png") no-repeat top center;background-size: 100%;background-attachment: fixed;}
section#Second h3 span{    background: #091f5b;
    box-shadow: 1.3333vw 1.3333vw 0px 0 #71f6fb;
    color: #fff;
    display: inline-block;
    font-size: 6.6667vw;
    padding: 1.0667vw 2.6667vw 1.8667vw;
    position: relative;}
section#Second h3 span {
        box-shadow: 10px 10px 0px 0 #71f6fb;
        font-size: 2.5rem;
        padding: 12px 20px 15px;
}

section#Second p{line-height: 1.7;text-align: justify;padding: 30px 20px 0 10px;text-align: center;font-size: 1.5rem;}

section#Second .wrap{
    display: flex;
    flex-direction: column; /* ⭐ 改這個 */
    gap: 20px; /* 卡片間距 */
    margin: 0 7%;
}

section#Second .card{
    flex:1;
    background:#FFFFFF;
    border-radius:12px;
    padding:28px;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
    border-left:8px solid #0f51bf;
     width: 100%;
}

section#Second .card.blue{
    border-left:8px solid #00aec4;
}

section#Second .title{
    font-size:22px;
    font-weight:bold;
    margin-bottom:6px;
}

section#Second .subtitle{
    color:#6b7280;
    margin-bottom:20px;
}

section#Second .box{
    background:#eef1f5;
    border-radius:6px;
    padding:8px 15px;
    margin-bottom:15px;
}

section#Second .label{
    font-weight:bold;
    margin-bottom:6px;
}

section#Second .note{
    margin-top:10px;
    font-size:22px;
    font-weight:bold;
}

section#Second ol{
    margin:0;
    padding-left:20px;
}




/* 新VCP認證考試路徑 */
.compare-wrap{
  margin:40px auto;
  font-family:"Microsoft JhengHei",sans-serif;
}

.compare-card{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
}

.compare-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;   /* 這行是關鍵 */
}

.compare-table th,
.compare-table td{
  padding:18px 20px;
  text-align:left;
  width:50%;            /* 左右固定等寬 */
}

/* 標題 */
.left-head{
  background:#2f6fc9;
  color:#fff;
}

.right-head{
  background:#2fa8a8;
  color:#fff;
}

/* 內容底色 */
.left-col{
  background:#eaf1fb;
}

.right-col{
  background:#e8f7f7;
}

/* 灰底區塊 */
.left-gray{
  background:#FFFFFF;
}

.right-gray{
  background:#FFFFFF;
}

.compare-table tr:not(:last-child) td{
  border-bottom:1px solid #e5e5e5;
}


section#Second .card-inner{
    display:flex;
    gap:24px;
    align-items:flex-start;
}

section#Second .cert-thumb{
    width:220px;
    flex-shrink:0;
}

section#Second .cert-thumb img{
    width:100%;
    display:block;
    border-radius:8px;
    box-shadow:0 3px 10px rgba(0,0,0,0.12);
    background:#fff;
}

section#Second .cert-content{
    flex:1;
}

section#Second .note{
    margin-top:0;
    margin-bottom:18px;
    font-size:25px;
    font-weight:bold;
    line-height:1.4;
}

section#Second .box:last-child{
    margin-bottom:0;
}

section#Second button{width: 40%; margin: 15px auto 25px auto; display: block;background:#2F7DE1;color:#FFF; border: 4px solid #FFF; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.6rem;height: 72px;}
section#Second button:hover{transform: translateY(5px);opacity: 0.6;}

/* Third */
section#Third{background: #091f5b;padding: 120px 0 80px 0;position: relative;}

section#Third .shadow_Y{    background: #00aec4;
    box-shadow: 1.3333vw 1.3333vw 0px 0 #f4c430;
    color: #fff;
    display: inline-block;
    font-size: 6.6667vw;
    padding: 1.0667vw 2.6667vw 1.8667vw;
    position: relative;}
section#Third .shadow_Y {
        box-shadow: 10px 10px 0px 0 #f4c430;
        font-size: 2.5rem;
        padding: 12px 20px 15px;
}

/* 課程 */
.course-list {margin: 0 auto;}
.course-card {display: flex;background: #fff;border-radius: 16px;overflow: hidden;box-shadow: 0 8px 20px rgba(0,0,0,0.08);margin-bottom: 32px;}
/* 課程左側 */
section#Third .course-left {width: 200px;padding: 32px;color: #fff;position: relative;overflow: hidden;}
.course-left.dark {background: linear-gradient(135deg, #0f51bf, #0f51bf);}
.course-left.blue {background: linear-gradient(135deg, #00aec4, #0298ab);}
.badge {display: inline-block;font-size: 20px;padding: 6px 12px;border-radius: 6px;margin-bottom: 20px;}
.badge.yellow {background: #f4c430;color: #000;}
.badge.lightblue {background: #f4c430;color: #003b66;}
.course-left h2 {font-size: 32px;margin: 0 0 10px;}
.subtitle {font-size: 14px;opacity: 0.9;padding: 0;}
.days {font-size: 36px;font-weight: bold;margin-top: 40px;}
.days span {font-size: 16px;margin-left: 4px;}
.bg-icon {
  position: absolute;
  right: -30px;
  bottom: -37px;
  width: 180px;
  opacity: 0.3;
  pointer-events: none;
}
/* 課程右側 */
.course-right {flex: 1;padding: 32px 40px;}
.course-right h3 {font-size: 1.5rem;margin-bottom: 12px;font-weight: bold;color: #0f51bf;}
section#Third .desc {line-height: 1.7;margin-bottom: 24px;font-size: 25px;font-weight: bold;}
.info{font-size: 1.2rem;}
.Link{color: #000;border-bottom: 2px dashed #2172de;}
.title_BG{color: #FFF;padding: 5px;border-radius: 3px;}
.title_BG_blue{background: #0f51bf;}
.title_BG_green{background: #00aec4;}

/* 最佳學習路徑 */
section#Third .wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 40px 40px 60px;
      text-align: center;
    }

    .sub-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
      color: #111;
    }

    .main-title {
      font-size: 68px;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 1px;
      margin-bottom: 28px;
      color: #111;
    }

    .dots {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 38px;
    }

    .dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }

    .dot.blue {
      background: #57b7cf;
    }

    .dot.pink {
      background: #d85d7f;
    }

    .steps {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    .step-card {
      position: relative;
      flex: 1;
      min-width: 320px;
      background: rgba(255, 255, 255, 1);
      border: 3px solid #5eb2c9;
      border-radius: 24px;
      min-height: 180px;
      padding: 54px 30px 32px;
      text-align: left;
      overflow: visible;
    }

    .step-badge {
      position: absolute;
      top: -36px;
      left: 30px;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: #00aec4;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      line-height: 1.1;
      text-align: center;
    }

    .step-badge span {
      font-size: 14px;
      letter-spacing: 1px;
      display: block;
    }

    .step-title {
      color: #00aec4;
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 14px;
    }

    .step-text {
      font-size: 18px;
      line-height: 1.7;
      font-weight: 600;
      color: #222;
    }

    .step-illust {
      position: absolute;
      right: 24px;
      top: 18px;
      opacity: 0.28;
      font-size: 72px;
      pointer-events: none;
    }

    .cta {
      margin-top: 12px;
      background: linear-gradient(90deg, #0f51bf 0%, #00aec4 100%);
      color: #fff;
      font-size: 32px;
      font-weight: 800;
      text-align: center;
      padding: 22px 40px;
      position: relative;
      width: 40%;
      margin-left: auto;
      margin-right: auto;
      clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
    }
    .arrow{
        position:absolute;
        right:-35px;
        top:50%;
        z-index: 1000;
        transform:translateY(-50%);
        width:60px;
        height:40px;

        clip-path: polygon(
            0 35%, 
            60% 35%, 
            60% 0, 
            100% 50%, 
            60% 100%, 
            60% 65%, 
            0 65%
        );
    }
/* Discount */
section#Discount{padding: 100px;position: relative;background: #FFFFFF;}


/* QA*/
section#Discount h2 {font-size: 32px;margin-bottom: 40px;}
section#Discount .faq-wrapper {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;}
section#Discount .faq-column {border-top: 1px solid #ccc;}
section#Discount .faq-item {border-bottom: 1px solid #ccc;}
section#Discount .faq-question {display: flex;justify-content: space-between;align-items: center;padding: 18px 0;cursor: pointer;}
section#Discount .faq-question span {font-size: 18px;font-weight: 600;line-height: 1.5;}
section#Discount .faq-icon {font-size: 28px;font-weight: 300;color: #0066ff;transition: transform 0.3s ease;}
section#Discount .faq-item.active .faq-icon {transform: rotate(45deg);}
section#Discount .faq-answer {max-height: 0;overflow: hidden;transition: max-height 0.4s ease;display: flex;gap: 6px;}
section#Discount .faq-answer p {font-size: 16px;margin: 0;padding: 0 0 50px 0;color: #0f51bf;line-height: 1.7;}
section#Discount .faq-answer li {line-height: 1.7;color: #0f51bf;}
.faq-answer {
  max-height: 0;
  overflow: hidden;
}

.icon.q{background: #2abfc6;padding-top: 3px;}

.icon {width: 28px;height: 28px;border-radius: 50%;color: #fff;font-weight: bold;display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;}
.icon.a {background: #4bb6e8;}
.faq-answer p {margin: 0;line-height: 1.7;}
.faq-answer a {color: #007acc;}




/* btnLink */
section#btnLink{padding: 10% 0 80px 0;position: relative;}
section#btnLink:before {content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/UCOM.jpg") no-repeat center;background-size: cover;z-index: 0;background-attachment: fixed;
}
section#btnLink button{width: 100%; margin: 15px auto 25px auto; display: block;background:#2F7DE1;color:#FFF; border: 4px solid #FFF; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.6rem;height: 72px;}
section#btnLink button:hover{transform: translateY(5px);opacity: 0.6;}
section#btnLink .row{margin: 0;}

/* 左邊卡片 */
section#btnLink .ai-card {background: #fff;border-radius: 12px;overflow: hidden;box-shadow: 0 8px 20px rgba(0,0,0,0.15);font-family: "Noto Sans TC", sans-serif;padding: 0;}
section#btnLink .ai-image img {width: 100%;}
section#btnLink .ai-features {list-style: none;padding: 16px 20px 20px;margin: 0 auto;width: 55%;}
section#btnLink .ai-features li {font-size: 2rem;color: #FFF;margin-bottom: 10px;padding-left: 28px;position: relative;margin-left: 20px;font-weight: bold;text-shadow: 0 1px 0 rgba(255,255,255,0.1),
0 2px 4px rgba(0,0,0,0.4),0 4px 10px rgba(0,0,0,0.5);text-align: center;}
section#btnLink .ai-features li::before {content: "✔";color: #e60012;font-weight: bold;position: absolute;left: 0;top:0;}

section#btnLink .ai-features li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}
section#btnLink .ai-features li::before {
  position: static;
  transform: none;
}


@media(min-width: 1441px){.container {max-width: 1320px;}}
@media(max-width: 1440px){}

@media(max-width: 767px){

.container{max-width: 100%;}


/* visual */
header#visual{height: 35vh;}
header#visual .title img{width: 100%;display: block;margin: 1% auto 0;}

/* First */
section#First {background: url(../images/TITLE_BG.png) no-repeat center;}
.table-box {margin: 0;}
section#First .flow{width: 100%;}
.grid {flex-direction: column;}
section#First h3 span {font-size: 1.5rem;}
/* Second */
section#Second{padding: 0 0 80px 0;}
section#Second .wrap {flex-direction: column;}
section#Second .card{width:100%;}

section#Second .card-inner{flex-direction:column;}
section#Second .cert-thumb{width:100%;max-width:260px;margin:0 auto 10px;}

section#Second .note{text-align:center;}
section#Second button{width: 100%;}

/*Third*/
.course-card {flex-direction: column;}
.course-left {width: 100%;padding: 24px;}
.course-left h2 {font-size: 28px;}
.days {margin-top: 24px;font-size: 32px;}
.course-right {padding: 24px;}
.course-right h3 {font-size: 20px;}
.info {flex-direction: column;gap: 20px;}


/* Discount */
section#Discount{padding: 5px;}
section#Discount .faq-wrapper {grid-template-columns: 1fr;}
section#Third .course-left {width: 100%;}
.arrow {position: absolute;left: 50%;top: 100%;transform: translateX(-50%) rotate(90deg);width: 60px;height: 40px;background: #000;clip-path: polygon(
        0 35%, 
        60% 35%, 
        60% 0, 
        100% 50%, 
        60% 100%, 
        60% 65%, 
        0 65%
    );
}
.cta {width: 100%;}

/* btnLink */
#btnLink .card{flex-direction: column;}
section#btnLink .btn{width: 100%;}
section#btnLink button{font-size: 1.2rem;}
section#btnLink .ai-features {width: 100%;}
section#btnLink .ai-features li {font-size: 1.6rem;text-align: left;}
section#btnLink .ai-features li::before {position: absolute;left: 0;top: 0;}

section#btnLink .ai-features li {
  display: flex;
  justify-content: left;
  gap: 0;
  padding-left: 0;
  align-items: flex-start
}
section#btnLink .ai-features li::before {
  position: static;
  transform: none;
}

}