@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%); 
}


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*/
.quotemessage {
  display: grid; align-items: stretch;
  grid-template-columns: 1fr 1fr; /* Creates 2 equal columns */
  gap: 25px; /* Space between columns */
  margin-bottom: 80px; /* Space between sections */
  margin-top: 0;
  padding: 0 30px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards;  
}

.quotemessage.employer { animation-delay: 0.0s; }
.quotemessage.trainee { animation-delay: 0.3s; }

.quoteDIV {
  background-color: #FFF; 
  box-shadow: 0 0px 30px 0px rgb(68 72 110 / 15%);
  padding: 20px;
  border-radius: 10px;
  height: 100%; 
  display: flex;
  flex-direction: column;
}

.quoteTXT {
  font-style: normal;
  flex-grow: 1; 
  padding: 10px 10px 0 10px;
}

.quoteTitle {
  font-weight: bold;
  text-align: right; 
/*background: #cdf2f7;
background: linear-gradient(30deg, rgba(205, 242, 247, 1) 0%, rgba(67, 188, 237, 1) 50%, rgba(57, 95, 165, 1) 100%);*/
  color: #FFF; 
  font-weight: bold; 
  border-radius: 5px;  
  padding: 8px;
  margin-top: auto; 
}

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

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

h4 { color:#812990; font-size:1.55em; padding:0; margin:0; }
.employerH {color:#47bfa5 !important;}


#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 {
    grid-template-columns: 1fr; 
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    padding: 0 15px; 
    margin-bottom: 60px; 
    }
.quoteDIV {
  padding: 20px;
  border-radius: 10px;
  height: auto; 
  display: flex;
  flex-direction: column;
}

.quoteTXT {padding-bottom: 20px;}

#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; 
}

}