:root{
    --color: #09a9cb;
	--logo: #0083cb;
	--button: #f15a29;
	
}
*, *::before, *::after{
    box-sizing: border-box;
}

body{
    margin: 0px;
    padding: 0px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
	color: #000;
	background: #f8fafb;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
b{font-weight: 500;}
p{ text-align: justify; text-justify: inter-character; margin: 20px 0;}
p a{ color: var(--color); font-weight: 400;}
p a:hover{text-decoration: none;}
img{ width: 100%;}
a{ transition: 0.3s cubic-bezier(.7,0,.3,1);}
ul{ padding-left: 25px;}
ul li{ margin: 20px 0; }

ul.lis_number li{list-style: decimal; padding-left: 5px;}
ul.lis_style li{ margin: 12px 0; line-height: 1.6; font-size: 16px;}
ul.lis_number li::marker{ font-weight: 500;}
.list_subhead{ display: block;}

.web{ display: block;}
.mo{ display: none;} 

.p_space{ height: 30px; width: 100%;}


.container{
	width: 100%;
	padding: 60px 40px;
	max-width: 1500px;
	margin: 0 auto;
}
.gen_btu{
	padding: 10px 20px;
  background: var(--color);
  color: #fff;
  border: none;
  border-radius: 3px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.gen_btu:hover{
	background: #13c2e7;
}

.logo{ width: 280px;}

.lang{ display: flex; gap: 5px;}
.lang .gen_btu{
	padding: 5px 15px;
  background: none;
  color: var(--color);
  border: 1px solid var(--color);
	font-size: 14px;
	font-weight: 400;
	opacity: 0.5;
}
.lang .gen_btu:hover{ background: var(--color); color: #fff; opacity: 1;}
.lang .gen_btu.current{ cursor: default; background: none; color: var(--color); pointer-events: none; opacity: 1;}

.page_wapper .container{padding-top: 20px;}
.page_grid{ display: flex;}
.left_menu{	flex: 0 0 25%;}
.intro{ flex: 0 0 75%;}
.intro h3{ font-weight: 700;}
.left_menu ul {
  position: sticky;
  top: 50px;
  padding: 0px 40px 0px 0px;
	margin-top: 0px;
}
.left_menu ul li{ list-style: none; margin-bottom: 5px; margin-top: 0px;}
.left_menu ul li a{ display: block; font-weight: 500; text-decoration: none; line-height: 1.4; background: #fff; padding: 20px 20px; color: #000;}
.left_menu ul li a:hover{ color: var(--color);}

.left_menu ul li a.gen_btu{ color: #fff; background: var(--color); font-weight: 700; border-radius: 0px; display: flex; align-items: center; text-transform: uppercase;}
.left_menu ul li a.gen_btu:hover{ background: #13c2e7;}

.top_header .container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40px 40px;
}

.top_banner { margin-bottom: 50px;}

.intro h1{ margin: 0px 0px 40px; line-height: 1.3; letter-spacing: -0.5px; color: var(--color); font-size: 35px;  padding-left: 15px;  border-left: 5px solid var(--color);}

.subhead{ font-size: 25px; color: var(--color); }

.row_flex{ display: flex; gap: 25px; flex-wrap: wrap;}
.col_4{flex : 1;}

.intro .row_flex{ margin: 30px 0;}
.intro .row_flex h3{ margin: 15px 0; line-height: 1.4; font-size: 18px;}
.intro .row_flex p{ text-align: left; font-size: 16px; line-height: 1.6; margin: 15px 0;}


.col_2{ flex: 1;}
.course_des{ gap: 30px;}
.course_des .col_2{ background: #ebf4f8; padding: 25px 35px;}
.course_des .col_2 h4{ font-size: 25px;  text-align: center;  margin: 5px 0 30px;  line-height: 1.6;}
.course_des ul{ padding-left: 25px;}
.course_des ul li{ margin: 12px 0; line-height: 1.4; font-weight: 400;}

.text_flex_c{ display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin-top: 20px;}
.center_line{ height: 1px; position: relative;  flex: 1 1 auto;  min-width: 2%; background: var(--color);}
.text_flex_c h5{ margin: 0px; padding: 0 10px; text-align: center; font-size: 18px; color: var(--color);}

.page_divd{ display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; margin: 50px 0 0; overflow: hidden; width: 100%;}
.page_divd .center_line{ display: none;}
.div_pic{ width: 100%;  margin-bottom: 39px;  display: flex; justify-content: center; overflow: hidden;}
.div_pic img{ flex: 0 0 650%; max-width: 5800px; min-width: 5000px;}

.subscride .gen_btu{
	background: none;
	color: var(--color);
	border: 1px solid var(--color);
  display: inline-flex;
  gap: 10px;
  font-weight: 700;
  align-items: center;
  font-size: 16px;
  text-transform: uppercase;
  padding: 10px 25px;
}
.subscride .gen_btu svg{
	fill: var(--color);
	transition:  0.5s cubic-bezier(.7,0,.3,1);;
}
.subscride .gen_btu:hover{ background: var(--color); color: #fff;}
.subscride .gen_btu:hover svg{ fill:#fff;}
.subscride h3{
	max-width: 500px;
  line-height: 1.5;
  font-size: 20px;
  font-weight: 300;
}
.subscride h3 b{ font-weight: 700;}

.footer .col_2{ display: flex;}
.footer .col_2:nth-child(2){ justify-content: flex-end; }
.footer .container{	padding-top: 20px; padding-bottom: 80px;}
.footer_items{ display: flex; flex-direction: column; justify-content: flex-end;}
.footer_items p{ text-align: right; margin: 5px 0; line-height: 1.4; font-size: 15px;}
.footer_items p a{ color: #666; text-decoration: none; padding: 0 5px; font-size: 14px;}
.footer_items p a:hover{color: #000; text-decoration: underline;}
.footer_items p a:last-child{padding-right: 0px;}
.footer .btu_row{ margin: 0px;}
.footer h3{ color: #000;}


.course_detaill h1{ margin-top: 0px;}

.row_ta_flex{display: flex;  gap: 10px;  align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--color);}
.row_ta_flex:first-child{ border-top: 1px solid var(--color);}

.course_table{ gap: 30px;}
.ta_col_1{flex: 0 0 110px;  display: flex;  align-items: center;  gap: 5px;  flex-wrap: nowrap;  font-weight: 500;}
.ta_col_1 svg{ height: 32px; width: 32px;}
.intro .row_flex.course_table p{  margin: 4px 0;}
.intro .row_flex.course_table p small{ line-height: 1.4; display: inline-block;}

.call_act{ margin: 60px 0; display: flex; justify-content: center; gap: 10px;}
.call_act .gen_btu{
	display: flex;
  font-weight: 700;
  align-items: center;
  font-size: 20px;
  padding: 15px 40px;
}

.intro .gen_btu{ font-weight: 700;}
.enrol ul{ margin: 25px 0;}
.enrol ul li{ margin: 10px 0; line-height: 1.4;}

.lis_line{ padding-left: 15px;}
.lis_line li{ padding-left: 10px;}
.lis_line li::marker{ content: "-"; font-weight: 700;}

.btu_row{ margin: 30px 0;}

.form_row{ margin: 25px 0;}
.form_section{ padding-bottom: 2px;}
.form_container{ display: flex;}
.label{ flex: 0 0 350px; font-weight: 500; line-height: 1.4; margin-bottom: 10px;}
.from_items{ line-height: 1.4; flex: auto;}
.form_flex{ display: flex; column-gap: 20px; flex-wrap: wrap; row-gap: 10px;}
.flex_inline{ display: flex; column-gap: 5px;}

.sub_flex_col{ display: flex; flex-direction: column; width: 100%;}
.inline_eq{ flex: 1;}
.sub_label{ margin-bottom: 5px; font-weight: 400;}
select, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="password"]{
	width: 100%;
	padding: 5px 10px;
	font-size: 18px;
	border: 1px solid #ccc;
  border-radius: 3px;
}

.divd_line{
	margin: 40px 0;
  width: 100%;
  height: 1px;
  background-color: #bfdbe1;
}

.alert{ color: red; font-size: 16px; margin-top: 5px;}
.alert i{ margin-right: 5px;}

.lis_style_wdiv{ padding: 0;}
.lis_style_wdiv li{ list-style: none; padding: 30px 0 38px; border-bottom: 1px solid #bfdbe1; margin: 0px;}
.lis_style_wdiv li:first-child{ border-top: 1px solid #bfdbe1;}
.icon_subtitle{ display: flex; align-items: center; gap: 15px; font-weight: 500;}
.lis_style_wdiv .btu_row{ margin: 15px 0 0 ;}
.lis_style_wdiv p{line-height: 1.8; text-align: left; margin-top: 10px;}
.underline{ padding-bottom: 0px; border-bottom: 1px solid #000; display: inline-block; margin: 5px 0 8px; font-weight: 500;}

.txt_link_icon{ display: inline-flex; align-items: center; font-weight: 700;}



/* --------------------------- Mobile --------------------------- */
@media(max-width: 1200px){ 
	.web{ display: none;}
	.mo{ display: block;}
	
	.form_container{ display: block;}
	.form_row{ margin: 30px 0;}
}

@media(max-width: 1030px){ 
	.page_grid{ flex-direction: column;}
	.left_menu ul{ padding: 0px; margin-bottom: 40px; display: flex; gap: 5px;}
	.left_menu ul li{ background: #fff; flex: 1;}
	.left_menu ul li a{ display: flex; align-items: center; height: 100%; padding: 15px 20px; font-size: 16px;}
	
	.footer .row_flex{ flex-direction: column;}
	.footer .col_2{ justify-content: center; text-align: center;}
	.subscride h3{ max-width: 510px;}
	.footer .col_2:nth-child(2){ justify-content: center; margin-top: 30px;}
	.footer_items{ justify-content: center;}
	.footer_items p{ text-align: center;}
}

@media(max-width: 786px){ 
	.container{ padding: 60px 25px;}
	.top_header .container{ padding: 40px 25px;}
	
	.col_4{ flex: 0 0 calc(50% - 12.5px);}
	.page_wapper .container{ padding-top: 0px;}
	
	.intro .course_des, .intro .course_table{display: block;}
	.intro .course_des .col_2{ margin-bottom: 30px;}
	.intro .course_table .col_2{ margin: 60px 0;}
	
	.call_act .gen_btu{ width: 100%; justify-content: center;}
	
	.div_pic{ width: 100%;}
	
}

@media(max-width: 586px){ 
	.intro .row_flex{ display: block;}
	.intro .row_flex .col_4{margin-bottom: 60px;}
	.intro .photo_img{overflow: hidden;  aspect-ratio: 1.6;  display: flex;  align-items: center;  margin-bottom: 20px;}
	.intro .photo_img img{object-fit: cover;}
	
	.left_menu ul{ display: block;}
	.left_menu ul li a{ line-height: 32px; font-size: 18px;}
	
	.top_header .container{ display: block;}
	.logo{ margin: auto;}
	.lang{ margin-top: 30px; justify-content: center;}
	
	.page_divd .center_line { display: none;}
}