@charset "UTF-8";
html {
height:100%;
background: rgb(104,45,145);
background: linear-gradient(90deg, rgba(104,45,145,1) 0%, rgba(122,60,170,1) 30%, rgba(43,150,227,1) 65%, rgba(51,75,150,1) 100%); 
}

body { margin:0; padding:0; font-family:Arial, Helvetica, "Microsoft JhengHei", 微軟正黑體, Heiti, 黑體, sans-serif; font-size:1.1em; color:#333; letter-spacing: 0.1em; line-height:1.45em; text-align:justify;font-weight:400; }

.anchor {
    display: block;
    height: 70px;
    margin-top: -70px;
    visibility: hidden; }

a:link { color: #f47c2a; text-decoration:none; }
a:visited { color: #f47c2a; text-decoration:none;}
a:hover { color: #d44f3c; text-decoration:none;}
a:active { color: #f47c2a; text-decoration:none;}

.lang { font-size:1.15em !important; font-weight:bold; letter-spacing:0 !important; }

h1 { color:#812990; font-size:2em; letter-spacing:5px; padding:0 0 10px 0; }
h2 { color:#52bc73; font-size:1.3em; padding:5px 0 10px 0; margin:0; }
h3 { color:#FFF; font-size:1.18em; display:inline-block; padding: 7px 20px; border-radius:20px; margin:0 0 -5px 0;
 background: rgb(44,175,241);
background: linear-gradient(90deg, rgba(44,175,241,1) 0%, rgba(78,140,204,1) 80%); 
}

h4 { color:#812990; font-size:1.55em; padding:0; margin:0; }
hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin:20px 0; }
hr.courseT { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); margin:40px 0; }

span.remark { color:#333 !important; font-size:14px !important; font-weight:bold !important; vertical-align:super}
span.remark2 { color:inherit !important; font-size:14px !important; font-weight:bold !important; vertical-align:super}

ol { color:#747474; font-size:0.85em;}

ol.courseremark { color:#747474; font-size:0.85em; margin:15px 0 5px 5px; padding:0;}
ol.courseremark li { list-style:none;}

table.T1 { width:100%; border-collapse:collapse; margin: 30px 0 !important;}
table.T1 th { width:12%; font-size:1.3em; font-weight:bold; color:#FFF; vertical-align:middle; padding:10px 10px 10px 20px; 
 background: rgb(138,205,68);
background: linear-gradient(90deg, rgba(138,205,68,1) 90%, rgba(112,189,49,1) 100%); 
 }
table.T1 td { padding:25px 20px; vertical-align:top; background: rgb(249,249,249);
background: linear-gradient(180deg, rgba(249,249,249,1) 0%, rgba(241,241,241,1) 100%);  }
table.T1 tr { border-bottom: 10px solid #FFF;}
table.T1 tr:last-child {border-bottom:none;}
table.T1 ul { margin:0 0 0 25px; padding:0; }
table.T1 ul li { padding: 5px 0;}
table.T1 ul li:first-child { padding: 0;}

table.T2 { width:100%; border-collapse:collapse; margin: 5px 0 25px 0 !important; box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%);}
table.T2 th { white-space: nowrap; font-size:1.1em; font-weight:bold; color:#FFF; vertical-align:middle; padding:10px 20px; 
 background: rgb(138,205,68);
background: linear-gradient(90deg, rgba(138,205,68,1) 90%, rgba(112,189,49,1) 100%); 
 }
table.T2 td { padding:15px 20px; vertical-align:top; background:#FFF; }
table.T2 tr { border-bottom: 1px solid #D8D8D8;}
table.T2 tr:last-child {border-bottom:none;}
table.T2 ul { margin:0 0 0 25px; padding:0; }
table.T2 ul li { padding: 5px 0;}

a.buttonDetails {}

.buttonDetails {
  border-radius: 25px;
  background-color: #f26a25;
  border: none;
  color: #FFFFFF !important;
  text-align: center;
  font-size: 1.2em;
  padding: 10px 30px;
  width: 150px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%);
  margin:15px 0;
}

.buttonDetails span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonDetails span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonDetails:hover span { padding-right: 25px; }
.buttonDetails:hover span:after { opacity: 1; right: 0; }


#wrapper-color { width:100%; background: rgb(204,236,255);
background: linear-gradient(0deg, rgba(204,236,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(204,236,255,1) 90%); }
#wrapper { width:1400px; margin:0 auto; }

#top-wrapper { width:1300px; display:flex; align-items:stretch; padding:0 50px;}

#logo { height:110px; padding:10px 0; flex-grow:1; }
#logo img { width:210px; height:auto; }

#social-media { align-self: center;}
#social-media ul { list-style:none; margin:0; padding:0; }
#social-media ul li { list-style:none; font-size:28px; padding:0 6px; float:left; }
#social-media ul li a { color:#000;}
#social-media ul li a:hover { color:#7b2a90;} 


/*Home Message*/
span.txtbreak {display:block;}
  .employerH {color:#47bfa5 !important; }

  /* Slider Container */
  .quotemessage {
      max-width: 1340px;
      margin: 0 auto;
  }

  .quote-slider {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      margin: 20px 0;
  }


  /* Slides Wrapper (for continuous scroll) */
  .slides-wrapper {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 200%; /* Double width for infinite loop trick */
  }

  /* Individual Slide */
  .slide {
      flex: 0 0 50%; /* 2 slides per view on desktop */
      background-color: #FFF;
      display: flex;
  }

  /* Quote Card Style */
  .quoteDIV {
      flex: 1;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      min-height: 100px;
      margin: 15px;
  }

  .quoteDIV:nth-child(odd) {border-right: 1px #E2E2E2 solid;}

  .quoteTXT {
      color: #34495e;
      margin-bottom: 0rem;
      flex-grow: 1;
  }

  .quoteTitle {
      color: #FFF;
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.25rem;
      text-align: right;
      padding: 10px;
      border-radius: 5px; 
  }

  .quoteTitle.employerBG {
      background: linear-gradient(90deg, rgba(88,204,179,1) 0%, rgba(71,191,165,1) 25%, rgba(16,158,125,1) 100%);
  }

  .quoteTitle.traineeBG {
      background: linear-gradient(90deg, rgba(126,98,191,1) 0%, rgba(96,70,156,1) 25%, rgba(78,23,156,1) 100%);
  }

  /* Navigation Buttons */ /* Overlay nav buttons on slide content */
.slider-nav.on-slide {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;  /* only enable pointer events on buttons */
    z-index: 10;
}

.slider-nav.on-slide .nav-btn {
    pointer-events: auto;
    background: rgba(255,255,255,1);
    color: #E2E2E2;
    border: 2px solid #ECECEC;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background 0.2s;
    margin:5px;
}

.slider-nav.on-slide .nav-btn:hover {
    background: #E2E2E2;
    color: #FFF;
}




#home-content h4 {
  grid-column: 1 / -1; 
  margin: 0;
  padding: 0;
    opacity: 0;
  animation: fadeInUp 0.6s forwards;
}

/* Animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#home-content { width:1400px; padding-bottom: 30px; }/*width:1400px; display:flex; align-items:center;*/}
/*#home-content-txt { width:600px; position:relative; float:left; }
#home-content-txt ul, #home-content-txt ul li { list-style:none; padding:0; margin:0; }
#home-content-img { width:800px; position:relative; float:left;}
#home-content-img img { width:100%;}*/

#home-banner { width:1400px; }
.banner-1 { display:block; }
.banner-2 { display:none;}

#inside-banner {width:1400px; position:relative;}


#inside-content { 
position:relative;
padding:50px 100px;
width:1200px;
min-height:300px;
border-radius:10px;
background-color:rgb(255 255 255 / 70%);
box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%);
}

.space { height:40px;}


#promo { 
width:100%; 
display:flex; 
flex-direction:row; 
justify-content: flex-start;
align-items:stretch;
gap:45px;
margin-bottom:40px;
}
.promo-item { box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%); flex-grow:0; align-self:stretch; text-align:center; padding:10px; font-weight:bold; letter-spacing:0;}



footer { padding:10px 0 0 0; text-align:center; font-size:13px;  color:#FFF; min-height:50px; }

 #myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: #FFF solid 2px;
  outline: none; /* Remove outline */
  background-color: #3f66b0; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px 10px; /* Some padding */
  border-radius: 50%; /* Rounded corners */
  font-size: 25px; /* Increase font size */
}

#myBtn:hover {
  background-color:#692e92; /* Add a dark-grey background on hover */
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:12;
  }

#nav-wrapper { width:100%; z-index:12;  }
/* menu*/
.topnav {
  overflow: hidden;
  border-radius:30px;
  padding: 0 80px;
 background: rgb(230,230,230);
background: linear-gradient(0deg, rgba(230,230,230,1) 0%, rgba(251,251,251,1) 100%);
box-shadow: 0 5px 10px 0px rgb(68 72 110 / 30%);
}

.topnav a {
  float: left;
  display: block;
  color:#45496d;
  text-align: center;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 18px;
  font-weight:bold;
  border-right: dotted 1px #CCC;
  margin:0;
  line-height:30px;
}

.topnav .active {
 background: rgb(104,45,145);
background: linear-gradient(0deg, rgba(104,45,145,1) 0%, rgba(170,60,144,1) 100%); 
  color:#FFF;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {    
  font-size: 18px;
  font-weight:bold;   
  border: none;
  outline: none !important;
  text-decoration: none;
  color: #45496d;
  padding: 15px 30px;
  background-color: inherit;
  font-family:inherit;
  /*font-family:Arial, Helvetica, "Microsoft JhengHei", 微軟正黑體, Heiti, 黑體, sans-serif;*/
  margin: 0;
  border-right: dotted 1px #CCC;
  cursor:pointer;
  font-weight:bold;
  line-height:30px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 12;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 16px 30px;
  text-decoration: none;
  display: block;
  text-align: left;
  border: none;
  font-weight:bold;
  border-top: solid 1px #CCC !important;
}




.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #f68425;
  color: #FFF;
}

.dropdown-content a:hover {
  background-color: #f68425;
  color: #FFF;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media only screen and (min-width: 801px) and (max-width: 1399px) {

#wrapper-color { width:100%;}	
#top-wrapper { width: calc(100% - 10px); display:flex; align-items:stretch; padding:5px;}
#wrapper {width : 98%}	
footer { width:100%;}
.topnav { padding: 0 30px;}
.topnav a { padding: 16px 20px; }
#home-content { width:100%;}	
#home-content-txt { width:45%; position:relative; float:left; }
#home-content-txt ul, #home-content-txt ul li { list-style:none; padding:0; margin:0; }
#home-content-txt ul li img { width:95%; }
#home-content-img { width:55%; position:relative; float:left;}
#home-content-img img { width:100%;}

#home-banner { width:100%; }
#home-banner img { width:100%; }


#inside-banner { width:100%; position:relative;}
#inside-banner img { width:100%; }
.banner-1 { display:block;}
.banner-2 { display:none; }

#inside-content { 
position:relative;
padding:50px 40px;
width: calc(100% - 80px);
min-height:300px;
border-radius:10px;
background-color:rgb(255 255 255 / 70%);
box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%);
}

table.T2 th { }
}


@media screen and (max-width: 800px) {

/*Home Message*/
.quotemessage {
      max-width: 90vw;
      padding: 0 6px;
  }

  .quote-slider {
      border-radius: 6px;
      margin: 12px 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
      overflow: hidden; /* keep hiding overflow to mask extra slides */
      width: 100%; /* ensure full width */
      max-width: 100vw;
  }

  .slides-wrapper {
      display: flex;
      width: 100%; /* important for 1 slide visible */
      transition: transform 0.5s ease-in-out;
      will-change: transform;
  }

  .slide {
      display: flex;
      flex-shrink: 0; /* prevent shrinking */
      flex-direction: column;
      flex-basis: 100%; /* or flex: 0 0 100%; equivalent */
      width: 100%; 
      min-width: 100%;
      margin: 0; /* no margin to avoid overflow */
  }

  .quoteDIV {
      padding: 1rem;
      min-height: 100px;
      margin: 0; /* remove margin to avoid clipping */
      border: 1px solid #E2E2E2;
  }
  
  .quoteTitle {
      font-size: 0.85rem;
      padding: 6px;
      border-radius: 4px;
      letter-spacing: 0;
  }

  .quoteTXT {
      font-size: 1rem;
      margin-bottom: 0rem;
  }

  .slider-nav.on-slide .nav-btn {
      width: 32px;
      height: 32px;
      font-size: 1rem;
  }

#wrapper, footer { width:100%;}
footer { box-sizing: border-box; }

#top-wrapper { width: calc(100% - 10px); display:flex; align-items:stretch; padding:5px;}
#logo { height:100px; padding:0; flex-grow:1; }
#logo img { width:190px; height:auto; }

#social-media { align-self: center;}
#social-media ul { list-style:none; margin:0; padding:0; }
#social-media ul li { list-style:none; font-size:28px; padding:0 6px; float:left; }
#social-media ul li a { color:#000;}
#social-media ul li a:hover { color:#7b2a90;} 

#home-content { width:100%; /*box-sizing: border-box; padding:20px; display:flex; flex-direction:column; align-content:center; justify-content: center;*/}
/*#home-content-txt { width:100%; align-self:center;}
#home-content-txt ul, #home-content-txt ul li { list-style:none; padding:0; margin:0; }
#home-content-txt ul li img { width:95%; margin:0 auto;}
#home-content-img { width:100%;}
#home-content-img img { width:100%; }*/

#home-banner { width:100%; }
#home-banner img { width:100%; }

#inside-banner { width:100%; position:relative;}
#inside-banner img { width:100%; }
.banner-1 { display:none;}
.banner-2 { display:block; }

#inside-content { 
position:relative;
padding:50px 30px;
width: calc(100% - 60px);
min-height:300px;
border-radius:0px;
background-color:rgb(255 255 255 / 70%);
box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%);
}


table.T2 th { display:none;}
table.T2 td:before {content: attr(data-title); display:block; color:#52bc73; font-size:1.1em; line-height:30px; font-weight:bold !important; }
table.T2 tr, table.T2 td { display:block; text-align:left !important; }

.topnav { border-radius:0; padding: 0; }

  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
	
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;color:#FFF;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

.dropdown-content {
  top:0;
}

#promo { 
flex-direction:column; 
}

}