@charset "utf-8";
/* CSS Document */
/* 16px = 1rem = 1em = 100% */ 

/* ============================================= */
/* 基本 Kits */
@import url("css_import/default_content.css");
@import url("css_import/common_content.css");
@import url("css_import/static/header_section.css");
@import url("css_import/static/menu_section.css");
/*@import url("css_import/static/carousel_slide_section.css");*/  /* 標準 Bootstrap5 Carousel_Slide */
@import url("css_import/static/standard_table_RWD.css");

/* ------ 首頁內容 index content ----------------------- */
@import url("css_import/style_index_content/index_content.css");
@import url("css_import/style_index_content/index_zoom_section.css");
/*@import url("css_import/style_index_content/index_content_1.css");*/
/*@import url("css_import/style_index_content/index_content_2.css");*/
/*@import url("css_import/style_index_content/index_content_3.css");*/

/* ------ 內頁內容 subpage content ----------------------- */
@import url("css_import/style_subpage_content/subpage-content.css");
@import url("css_import/style_subpage_content/subpage-content_HFU.css");
/*@import url("css_import/style_subpage_content/subpage-content_1.css");*/
/*@import url("css_import/style_subpage_content/subpage-content_2.css");*/
/*@import url("css_import/style_subpage_content/subpage-content_3.css");*/

/* ------ 登入頁 login ----------------------- */
@import url("css_import/assets/login/login_default.css");

/* ------ 注冊頁 register ----------------------- */
@import url("css_import/assets/register/register_default.css");

/* ------ bootstrap-5 選單 menu ----------------------- */
@import url("css_import/assets/bs5-menu/bs5-menu-standard.css");

/* ------ bootstrap-5 選單 menu ----------------------- */
@import url("css_import/assets/bs5-slider-menu/bs5-slider-menu-standard.css");

/* ------ 頁尾 Copyright + 訪客人數 ----------------------- */
@import url("css_import/assets/copyright-visitor/copyright-visitor.css");

/* ------ 網站導覽頁 sitemap ----------------------- */
@import url("css_import/assets/sitemap/sitemap.css");

/* ------ 列印 print ----------------------- */
@import url("css_import/assets/print/print.css");

/* ------ 首頁轉場 homepage_transition ----------------------- */
@import url("css_import/assets/homepage_transition/ID_page_style.css");
@import url("css_import/assets/homepage_transition/ID_preloader_style.css");
@import url("css_import/assets/homepage_transition/ID_intro_video_container_style.css");

/* ------ 內頁購物SHOP內容 subpage content ----------------------- */
@import url("css_import/assets/shop-HFU/course-content_HFU.css");
@import url("css_import/assets/shop-HFU/course-table-RWD_HFU.css");
/*@import url("css_import/assets/shop-HFU/style_shop_member.css");*/
/*@import url("css_import/assets/shop-HFU/style_shop_rwd-table.css");*/
/*@import url("css_import/assets/shop-HFU/style_shop_all_content.css");*/


/* 基本 Kits */
/* ============================================= */


/* ============================================= */
/* 輔助套件 Kits */
/* ------ Accesskey --------------------- */
@import url("css_import/assets/accesskey/custom_sr-only.css");
@import url("css_import/assets/accesskey/custom_accesskey.css");

/* ------ 動畫 animate ----------------------- */
@import url("css_import/assets/animate/animate.css");

/* ------ 背景動畫 Particles ----------------------- */
@import url("css_import/assets/bg_dynamic/Particles-login-register.css");

/* ------ 聊天室 chatroom ----------------------- */
@import url("css_import/assets/chatroom/font_Icon/iconfont.css");
@import url("css_import/assets/chatroom/chatroom.css");

/* ------ 跑馬燈 marquee ----------------------- */
@import url("css_import/assets/marquee/marquee-left-loop.css");

/* ------ 浮動收合式側邊選單 slide-bar ----------------------- */
@import url("css_import/assets/slide-bar/slide-bar.css");
/* 輔助套件 Kits */
/* ============================================= */


/* ============================================= */
/* 自訂套件 Kits */
@import url("css_import/kit_customize_class/style_class_kit.css");
@import url("css_import/kit_customize_class/style_background_color.css");
/* 自訂套件 Kits */

/* font-awesome-4.7.0 Icon 字型 */
@import url("css_import/assets/font-awesome-4.7.0/font-awesome-4.7.0.min.css");
/* font-awesome-4.7.0 Icon 字型 */
/* fFont Awesome Pro 5.15.4 Icon 字型 */
@import url("css_import/assets/font-awesome-pro-5/css/all.css");
/* Font Awesome Pro 5.15.4 Icon 字型 */

/* GOOGLE 黑體字型 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
/* font-family: "Noto Serif TC", serif; */ /* 明體 */
/* font-family: "Noto Sans TC", sans-serif; */ /* 黑體 */
/* https://fonts.google.com/noto/specimen/Noto+Sans+TC?preview.script=Hant */
/* GOOGLE 黑體字型 */
/* ============================================= */

/* ============================================= */

:root {
	--Customize_color: #005eb3;
	--Customize_HRcolor: #005eb3;
	--Customize_HRcolor2: #b1420d;
	--Customize_ACcolor: #005eb3;
	--Customize_FCcolor: #005eb3;
	--Customize_Footercolor: #eadfda;
	--Customize_BGcolor: #f3f1ea;
	
	/* =================================== */	
	
	--Customize_TXTcolor: #624e45;
	--Customize_TXT2color: #43352e;
	--Customize_TXTHRcolor: #b1420d;
	
	--Customize_TITLEcolor: #012c61;
	--Customize_SUB_TITLEcolor: #ffb250;
	--Customize_moreHRcolor: #ff4e00;
	
	/* =================================== */
	
	--Customize_Btn_color: #000000;
	--Customize_Btn_HRcolor: #b1420d;
	--Customize_border_color: #005eb3;

	/* =================================== */
	
	--a_linkcolor: #0b5ed7;
	--a_linkHRcolor: #0a58ca;
	
	--a_focuscolor: transparent;
	--a_focusbordercolor: #AA0000; /*#FFBD40*/	
	
	--a_focuscolor2: transparent;
	--a_focusbordercolor2: #AA0000; /*#43B5FC*/
}

/* 登入 + 註冊 */
:root {
	--Customize__shape_color: #75501c;  /*#906323 - HSB-(B減10%)*/
}

:root {
	--TxTsize_75: 75%; /*12px*/
	--TxTsize_81: 81.25%; /*13px*/
	--TxTsize_87: 87.5%; /*14px*/
	--TxTsize_93: 93.75%; /*15px*/
	--TxTsize_100: 100%; /*16px*/
	
	--TxTsize_LG: 93.75%;
	--TxTsize_SM: 87.5%;
	
	--Customize_size_8: 8px;
	--Customize_size_10: 10px;
	--Customize_size_12: 12px;
	--Customize_size_16: 16px;
	--Customize_size_20: 20px;
	--Customize_size_24: 24px;
	--Customize_size_28: 28px;
	--Customize_size_30: 30px;
	--Customize_size_32: 32px;
	--Customize_size_36: 36px;
	--Customize_size_40: 40px;
	--Customize_size_48: 48px;
	--Customize_size_64: 64px;
	--Customize_size_72: 72px;
	--Customize_size_80: 80px;
	--Customize_size_90: 90px;
	--Customize_size_96: 96px;
	--Customize_size_100: 100px;
	--Customize_size_W100: 100%;
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0rem;
	
	/* =================================== */
	
	--border_color: rgba(0, 0, 0, .125);
	--border_bbbcolor: #bbbbbb;
    --Graycolor: #727171;
    --FFFcolor: #FFFFFF;
    --blackcolor: #000000;
    --b2020color: #202020;
	--Gdddcolor: #dddddd;
    --GCCCcolor: #cccccc;
    --G333color: #333333;
	--G444color: #444444;
	--G555color: #555555;
	--G666color: #666666;
	--G777color: #777777;
	--G999color: #999999;
    --G979color: #979797;	
}
/* color: var(--Customize_color); #00305c */
/* background-color: var(--FFFcolor); #FFFFFF */
/* ============================================= */


/* ========================================================================== */
/* 所有 標準 STYLE 內容 CSS 設定 ( 以下 )  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */
/* ========================================================================== */

* {
	font-family: "open sans","微軟正黑體",sans-serif,"Noto Sans TC";
	/*font-family: "Noto Serif TC", serif;*/
}
body {
	font-family: "open sans","微軟正黑體",sans-serif,"Noto Sans TC";
    /*font-family: "Noto Serif TC", serif;*/
    font-size: 100%;
	font-weight: 400;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;    
    color: var(--blackcolor); /*#000000*/
}

a { color: var(--a_linkcolor); }

a, a:hover { 
	text-decoration: none;
}

a:focus {
    text-decoration: none;    
	outline: thin dotted;
    /*outline: 2px solid var(--a_focusbordercolor);*/
	outline: 2px dashed var(--a_focusbordercolor) !important;
	outline-offset: 0px;    
    color: var(--blackcolor) !important;
	background-color: var(--a_focuscolor2) !important;
    
}
[tabindex="-1"]:focus:not(:focus-visible) {
	text-decoration: none;
	outline: thin dotted !important;
    /*outline: 1px solid var(--a_focusbordercolor);*/
	outline: 2px dashed var(--a_focusbordercolor) !important;
	outline-offset: 0px;
}

a:focus-visible,
a button:focus-visible,
[type="button"]:focus-visible {
	outline: 0;
	box-shadow: none;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
	/*font-size: clamp(87.5%, 3.25vw, 93.75%);*/
	font-size: inherit;
	font-weight: 500;
	/*line-height: inherit;*/
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.list-group {
    list-style: none;
}
/* ============================================= */

/* ============================================= */
/* ------ Container-Custom --------------------- */
/* ============================================= */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}
@media screen and (min-width:576px) {
	.container, .container-sm {
		max-width: 540px
	}
}
@media screen and (min-width: 768px) {
	.container, .container-md, .container-sm {
		max-width: 720px
	}
}
@media screen and (min-width: 992px) {
	.container, .container-lg, .container-md, .container-sm {
		max-width: 960px
	}
}
@media screen and (min-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 1170px; /*1140*/
	}
}
/* ============================================= */
/* ------ Container-Custom0 =100%-100px --------- */
.container-customize0 {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media screen and (min-width: 576px) {
    .container-customize0 {
        max-width: calc(100% - 0px);
    }
}
@media screen and (min-width: 768px) {
    .container-customize0 {
        max-width: calc(100% - 50px);
    }
}
@media screen and (min-width: 992px) {
    .container-customize0 {
        max-width: calc(100% - 100px);
    }
}
@media screen and (min-width: 1200px) {
    .container-customize0 {
        max-width: calc(100% - 200px);
    }
}

/* ============================================= */
/* ------ Container-customize1 =1170 ----------- */
@media screen and (min-width: 1200px) {
	.container-customize1 {
		max-width: 1170px; /*1170 / 1500*/
	}
}
.container-customize1 {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* ============================================= */
/* ------ Container-customize2 =1290 ----------- */
@media screen and (min-width: 1200px) {
	.container-customize2 {
		max-width: 1290px; /*1170 / 1500*/
	}
}
.container-customize2 {
    width: 100%;
    padding-right: 1.125rem;
    padding-left: 1.125rem;
    margin-right: auto;
    margin-left: auto;
}
/* ============================================= */
/* ------ Container-Custom3 =1320 -------------- */
@media screen and (min-width: 1200px) {
	.container-customize3 {
		max-width: 1320px; /*1170 / 1500*/
	}
}
.container-customize3 {
    width: 100%;
    /*padding-right: 15px;
    padding-left: 15px;*/
	padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
}
/* ============================================= */
/* ------ Container-Custom4 =1400 -------------- */
@media screen and (min-width: 1200px) {
	.container-customize4 {
		max-width: 1400px; /*1170 / 1500*/
	}
}
.container-customize4 {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* ============================================= */
/* ------ Container-Custom4 =992 -------------- */
@media screen and (min-width: 1200px) {
	.container-customize-992 {
		max-width: 992px; /*1170 / 1500*/
	}
}
.container-customize-992 {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* ============================================= */
/* ------ Container-Custom4 =100% -------------- */
@media screen and (min-width: 1200px) {
	.container-customize-100 {
		max-width: 100%;
	}
}
.container-customize-100 {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}
/* ============================================= */
/* ------ Container-Custom5 =menu -------------- */
@media screen and (min-width: 1200px) {
	.container-customize-menu {
		max-width: 100%; /*1170 / 1500*/
	}
}
.container-customize-menu {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
/* ============================================= */
/* ------ Container-Custom --------------------- */
/* ============================================= */



/* ========================================================================== */
/* 所有 標準 STYLE 內容 CSS 設定 ( 以上 )  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */
/* ========================================================================== */