body{font-family: "Arial","微軟正黑體";background-color: #f7f4e7;overflow-x: hidden;background-attachment: fixed;background-image: url(../images/bgi_grid_02.svg);    background-repeat: repeat-y; 
    background-size: 100%;
    background-position: center 0px;}
button:focus{outline:none}
.container{position: relative;max-width: 80%;}
a:hover{text-decoration: none;}
section{padding: 100px 0;}
p{font-size: 1.1rem;}
h3{display: flex;align-items: center;font-size: 25px;font-weight: 400;}
h4{line-height: 1.8;}
h6{font-size: 1.8rem;}


footer div.LogoArea {display: flex;justify-content: center;}
section#form {
    padding: 100px 30px;
    position: relative;
    height: 930px;
}

/* visual */
.IOSLogo{position: absolute;top: 5%;left: 5%;}
header {height: 100vh;position: relative;overflow: hidden;}


.hero {
  position: relative;
  overflow: hidden;
}
.lock{position: absolute;right: 2%;bottom: 10%;width: 40%;}

/* 橘色線條圓圈動畫 */
.circleA{
  position: absolute;right: 28%;bottom: 20%;
}
.circleB{
  position: absolute;right: 10%;bottom: 35%;
}
.circle-animation {

  width: 50px;
  height: 50px;
  border: 2px solid orange;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
  z-index: 1;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* First */
section#First{padding: 0;position: relative;background: url("../images/") no-repeat top center;background-size: 100%;background-attachment: fixed;background-image: url(../images/bgi_grid_02.svg);    background-repeat: repeat-y; 
    background-size: 100%;
    background-position: center 0px;}



.vertical-line-wrap {
  display: flex;
  justify-content: center;
}



.vertical-line {
  width: 2px;
  height: 120px;
  background-color: rgba(0,0,0,.9);
  transform: scaleY(0);
  transform-origin: top;
  animation: lineLoop 2.5s ease-in-out infinite;
}

@keyframes lineLoop {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  20% {
    transform: scaleY(1);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

.about-content__item-image {flex: 0 0 40%;}
.about-content__item-image img {max-width: 100%;height: auto;display: block;}
.about-content__item-text {flex: 1;line-height: 1.6;}
.about-content__item-wrap {width: 65vw;margin: 0 auto;align-items: center;background-color: #f9f9f9;padding: 2rem 6.5rem;border-radius: 3rem;gap: 4rem;overflow: hidden;margin-bottom: 5rem;}


.hero {
  display: flex;

  height: 100vh;
}
.hero_hover:hover{
  color: #000 !important;
}
.hero_h2{font-size: 3.5rem;background-color: #000;color: #FFF;}

.QAhero_hover:hover{
  color: #000 !important;
  text-decoration: underline;
}

/* 左側文字區 */
.hero-left {
  width: 35%;
  min-width: 320px;
  background-color: #fb8b1e; /* 主色 */
  color: #000;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-left h1 {
  font-size: 40px;
  margin-bottom: 24px;
}

.hero-left p {
  line-height: 1.8;
  margin-bottom: 40px;
  font-size: 1.5rem;
}

.hero-links {
  display: flex;
  gap: 20px;
}

.btn {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
}

/* 右側圖片區 */
.hero-right {
  flex: 1;
  background-image: url("../images/main.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: left;
  display: block;
}

#philosophy{box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);border: 2px solid #000;padding-bottom: 180px;}


.triangle{width: 58%;position: absolute;right: 5%;top: 4%;}
.key{position: absolute;top: 140px;right: -50px;width: 70%;display: block;}

.feature-card{background: #fff;border-radius: 20px;padding: 10px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);border: 1px solid #e8f5f2;}
.icon-box {width: 56px;height: 56px;border-radius: 14px;display: flex;align-items: center;justify-content: center;}
.icon-box img {width: 28px;}
.bg-blue {background-color: #e9f4ff;}
.bg-purple {background-color: #f3e9ff;}
.bg-green {background-color: #e9fbf5;}

.underline{    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    position: absolute;
    background-image: repeating-linear-gradient(90deg, rgba(38, 38, 38, .5), rgba(38, 38, 38, .5) 2px, transparent 2px, transparent 5px);}

 .line{border-bottom: 1px solid #000;}   
 .line:hover{color: #e99441;border-bottom: 1px solid #e99441;}

.OGmk{background:#e99441;color: #FFF;padding: 3px 5px;border-radius: 5px;}
.trophy{position: absolute;top: -160px;right: -50px;width: 30%;display: block;}
/* old */

#First .Text{text-align: center;}
#First .badge {display: inline-block;padding: 0.5rem 1.5rem;border-radius: 50px;font-size: 1.2rem;font-weight: normal;position: relative;text-align: center;display: flex;align-items: flex-start;justify-content: center;width: 50%;background: #e9fbfb;border: 2px solid #35cbca;color: #2bbfbd;}
#First .badge_B {display: inline-block;padding: 0.5rem 1.5rem;border-radius: 50px;font-size: 1.2rem;font-weight: normal;position: relative;text-align: center;display: flex;align-items: flex-start;justify-content: center;width: 50%;background: #2bbfbd;border: 2px solid #35cbca;color: #FFF;}

.Out_linkA{padding: 5px 3px;border-radius: 5px;color: #FFF;background:#e99441;}
.Out_linkA:hover{color: #FFF;background:#e9b641;}
.Out_link{padding: 5px 3px;border-radius: 5px;color: #28a4a3;background:#d4f2f4;}
.Out_link:hover{color: #28a4a3;background:#b1e3e6;}

#First ul{margin-left: -38px;}
#First li{font-size: 20px;padding-bottom: 10px; position: relative;list-style: none;padding-left: 30px;margin-bottom: 10px;}
#First li::before {content: "";position: absolute;left: 0;top: 10px;width: 20px;height: 20px;background-image: url(../images/check.svg); background-size: contain;background-repeat: no-repeat;}
 



.hand{position: absolute;top: -150px;right: -250px;width: 55%;display: block;}




/* Second */
section#Second{background: #f8e9d4;padding: 50px 0 80px 0;position: relative;background-image: url(../images/bgi_grid_01.svg);    background-repeat: repeat-y;    background-color: rgb(255, 102, 20) !important;
    background-size: 100%;
    background-position: center 0px;}

.course-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:30px 25px 35px;
  position:relative;
  height:100%;
}
.course-top{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:12px;
  border-radius:20px 20px 0 0;
}
.blue{background:#6c757d;}
.purple{background:#fb8b1e;}
.gray{background:#E33B3A;}

.badge-tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:20px;
  font-size:14px;
  font-weight:bold;
  margin-bottom:15px;
}
.badge-blue{background:#eef0f2;color:#6c757d;}
.badge-purple{background:#fff2cc;color:#fb8b1e;}
.badge-gray{background:#fff1f1;color:#E33B3A;}

.course-title{
  font-size:22px;
  font-weight:bold;
}
.course-desc{
  color:#666;
  font-size:15px;
  margin-bottom:20px;
}
.course-list li{
  margin-bottom:12px;
  list-style:none;
}
.course-list i{
  margin-right:8px;
}

.btn-outline-custom{
  border:2px solid #1aa3e8;
  color:#1aa3e8;
  border-radius:30px;
  padding:10px 0;
}
.btn-purple{
  background:#fb8b1e;
  color:#fff;
  border-radius:30px;
  padding:12px 0;
}
.btn-gray{
  background:#6c757d;
  color:#fff;
  border-radius:30px;
  padding:12px 0;
}
.btn-red{
  background:#E33B3A;
  color:#fff;
  border-radius:30px;
  padding:12px 0;
}



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






/* 三大核心優勢 */
.feature-list {list-style: none;padding-left: 0;}
.feature-list li {padding-left: 26px;color: #555;font-size: 0.95rem;}
.feature-list-first {position: relative;font-size: 1.2rem !important;color: #000 !important;padding-top: 10px;font-weight: bold;}
.feature-list-first::before {content: "✔";position: absolute;left: 0;top: 0;color: #2bbfbd;font-weight: bold;padding-top: 10px;}

/* 大標*/
section#Discount h2{position: relative;}
section#Discount h2::before{content: "";position: absolute;left: -40px;top: 20px;width: 30px;height: 30px;background-image: url(../images/star.svg);background-size: contain;background-repeat: no-repeat;}
section#Discount h2::after{content: "";position: absolute;right: -38px;top: 20px;width: 30px;height: 30px;background-image: url(../images/star.svg);background-size: contain;background-repeat: no-repeat;}
#Discount .badge_B {display: inline-block;padding: 0.5rem 1.5rem;border-radius: 50px;font-size: 1.2rem;font-weight: normal;position: relative;text-align: center;display: flex;align-items: flex-start;justify-content: center;width: 50%;background: #2bbfbd;border: 2px solid #35cbca;color: #FFF;}


/* QA*/
.feature-subtitle {color: #9cc9b8;font-weight: 600;}

.feature-icon img{width: 48px;}
.feature-desc{color: #4db6ac;font-weight: 600;margin-bottom: 25px;}
.faq{max-width: 1100px;margin: 40px auto;background: #fff;border-radius: 12px;padding: 30px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.faq-title {text-align: center;color: #2abfc6;font-size:2rem;margin-bottom: 30px;font-weight: bold;}
.faq-item {border-top: 1px solid #e0e0e0;padding-top: 20px;margin-top: 20px;}
.faq-question {display: flex;align-items: center;gap: 12px;font-size: 1.5rem;font-weight: 600;color: #2abfc6;padding-left: 2%;}
.faq-answer {background: #fff1f1;padding: 20px;border-radius: 8px;margin-top: 12px;display: flex;gap: 12px;}
.icon {width: 20px;height: 20px;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 {text-decoration: underline;}



.feature {
  display: flex;
  background: #e5e7eb;
  border-radius: 18px;
  margin-bottom: 32px;
  overflow: hidden;
}

.feature-left {
  background: #6c757d;
  width: 300px;
  padding: 30px 20px;
  text-align: center;
  position: relative;
}


.feature .icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.icon img {
  width: 50px;
}

.feature-left h3 {
  font-size: 20px;
  margin: 0;
  font-weight: bold;
}

.feature-right {
  flex: 1;
  padding: 30px 40px;
  font-size: 17px;
  line-height: 1.8;
  color: #000;
}






/* btnLink */
section#btnLink{position: relative;background-color: #d4f2f4;}


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


/* form */
section#form {position: relative;}
section#form:before{content: "";width: 100%;height: 95vh;position: absolute;top: 20%;right: -25%;background: url("../images/running.png") no-repeat center;background-size: 40%;z-index: 100;}
section#form:after{content: "";width: 100%;height: 95vh;position: absolute;top: 1%;right: 30%;background: url("../images/clock.png") no-repeat center;background-size: 30%;z-index: 100;}

#Form1 ul{width:45%;padding: 10px 21px;list-style: none;clear: both;background: #fff;border-radius: 5px;display: block;margin:20px auto 0 auto;align-items: center;}
#Form1 ul li{margin: 20px 0;border: 1px solid #ced4da;border-radius: 0.25rem;text-align: center;}
#Form1 ul li input{width: 100%;height: 60px;border:0;border-radius: 8px;padding: 0 12px;font-size:24px;}
#Form1 ul li.send input{background: #ffca45;color: #000;font-size: 30px;cursor: pointer; transition: 0.2s;}
#Form1 ul li.send input:hover{background: #000000;color: #FFF;}
#Form1 ul li.send{border: 0;}
#Form1 ul li.send img{width: 30%;display: block;margin: auto;}
#Form1 ul li.area{background: #fff;border-radius: 8px;padding:10px 10px 0;}
#Form1 ul li.area p{text-align: left;padding: 0;margin: 0 0 5px;color: #000 !important;font-weight: 400;font-size: 24px;}
#Form1 ul li.area input{width: auto;height: auto;padding: 0;margin-right: 2px;}
#Form1 ul li.area label{margin-right: 5px;font-size: 24px;}






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

.container{max-width: 100%;}


/* visual */
header {height: 80vh;}
.lock{position: absolute;right: 2%;top:5%;width: 50%;}

.hero {
  justify-content: center;
}
.hero_h2{font-size: 2.5rem;}
.hand{display: none;}


/* 橘色線條圓圈動畫 */
.circleA{
  position: absolute;right: 35%;top:10%;
}
.circleB{
  position: absolute;right: 10%;top:15%;
}
.circle-animation {
  width: 30px;
  height: 30px;
}
.key{display: none;}
.triangle{width: 90%;position: absolute;right: 0%;top: 55%;}
.trophy{display: none;}
/* 右側圖片區 */
.hero-right {
  display: none;
}


/* form */
#Form1 ul{width:100%;padding: 10px 21px;list-style: none;clear: both;background: #fff;border-radius: 5px;display: block;margin:20px auto 0 auto;align-items: center;}
#Form1 ul li.send img{width: 100%;display: block;margin: auto;}


section#Form1 {padding: 100px 0 !important;}
section#Form1 .container {padding: 15px;}
section#Form1 .form-btn { margin: 0 auto 10px; }
section#Form1 .form-btn.big {width: 96%;}
section#Form1 .form-btn.sm {width: 96%;margin: 10px 0;}
section#Form1 .master-title h3{font-size: 1.6rem !important;}
section#Form1 .master-title + ul li {list-style: none;color: #fff;font-size: 1.2rem;} 

section#form {
    padding: 100px 30px;
    position: relative;
    height:auto;
}


}