/*
	---- VARs
*/
:root {

	--ori-font-color: #000000;

	--theme-color: #002147;
	--hl-color: #fdc800;

	--easy-color: #FFFFFF;
	--dark-brown-1: #1b1b1b;

/*  --link-color: #002147;*/
	--link-color: #0000FF;

	--hover-color: #fdc800;

	--hover-color-light: #ffe688;

/* -- Newsletter -- */
	--newsletter-bg-ori: #FFFFFF;
	--newsletter-bg-dark-blue-1: #073763;
	--newsletter-bg-light-blue-2: #c6ddeb;
	--newsletter-bg-dark-brown-1: #a59892;
	--newsletter-bg-dark-brown-2: #4a4840;
	--newsletter-bg-light-brown-1: #d9cdc0;
	--newsletter-bg-light-brown-2: #d9d4d2;
	--newsletter-bg-light-brown-3: #bfb2aa;
	--newsletter-bg-yellow-1: #d99c51;
	--newsletter-bg-black: #000;
	--newsletter-bg-dark-0: #222;
	
	--newsletter-color: #027b83;
	--newsletter-color-2: #ff9900;
	--newsletter-color-3: #b45f06;
	--newsletter-color-4: #cc0100;
	--newsletter-color-5: #980000;
	--newsletter-color-6: #38761d;
	--newsletter-color-red-1: #a50909;
	--newsletter-color-orange-1: #ff9900;
	--newsletter-color-gray-1: #ebe0d7;
	--newsletter-color-blue-1: #0041a5;
	--newsletter-color-dark-blue-1: #1f2d3d;
	--newsletter-color-dark-red-1: #990000;
	--newsletter-color-dark-red-2: #500050;
	--newsletter-color-dark-gray-1: #3b3f44;
	--newsletter-color-dark-brown-1: #402b18;
}

html, body {width: auto!important; overflow-x: hidden!important}

body
{
	font-family: "Roboto", sans-serif;
}

/*======== @Override ========*/
@media (max-width: 576px) {
    .container, .container-sm {
        width: 100%;
        max-width: 100%;
        margin-left: 15px;
    }
}

.h-line { border-top: #555555 solid 1px; }
.h-line-dark { border-top: #4a4a4a solid 1px; }
.h-line-thick { background-color: #4a4a4a; height: 3px; }
.h-line-dashed { border-top: #4a4a4a dashed 1px; }

table {
    border-collapse: collapse;
}

table.with_border>thead>tr>th,
table.with_border>tbody>tr>td {
    border: 1px solid #efefef;
}

table.small_cell>thead>tr>th,
table.small_cell>tbody>tr>td {
    padding: 2px;
}

table.middle_cell>thead>tr>th,
table.middle_cell>tbody>tr>td {
    padding: 2px 5px;
}

tr.hl_row>th,
tr.hl_row>td,
table.with_border>thead>tr.hl_row th,
table.with_border>tbody>tr.hl_row td {
    background-color: var(--hl_row);
    border: 1px solid var(--hl_cell);
}

tr.watch_row>th,
tr.watch_row>td,
th.watch_cell,
td.watch_cell {
    color: var(--control-color);
    font-weight: bolder;
}

table.hover_tb>tbody>tr:hover>td,
table.hover_tb>thead>tr.hl_row:hover>th,
table.hover_tb>tbody>tr.hl_row:hover>td,
table.hover_tb.with_border>thead>tr.hl_row:hover>th,
table.hover_tb.with_border>tbody>tr.hl_row:hover>td {
    transition: 0.4s;
    background-color: var(--hover_row);

    color: var(--theme-color);
}

th.remark_cell,
td.remark_cell,
tr.watch_row>th.remark_cell,
tr.watch_row>td.remark_cell,
table.hover_tb>tr.hl_row:hover>th.remark_cell,
table.hover_tb>tr.hl_row:hover>td.remark_cell,
table.hover_tb>tr:hover>th.remark_cell,
table.hover_tb>tr:hover>td.remark_cell {
    background-color: var(--control-color);
    color: #fff;
}

th.shiny_cell,
td.shiny_cell,
tr.watch_row>th.shiny_cell,
tr.watch_row>td.shiny_cell,
table.hover_tb>tr.hl_row:hover>th.shiny_cell,
table.hover_tb>tr.hl_row:hover>td.shiny_cell,
table.hover_tb>tr:hover>th.shiny_cell,
table.hover_tb>tr:hover>td.shiny_cell {
    background-color: var(--shiny_color);
    color: var(--theme-color);
}

th.left_sep_cell,
td.left_sep_cell,
table.with_border>thead>tr>th.left_sep_cell,
table.with_border>tbody tr>td.left_sep_cell {
    border-left: 2px solid var(--control-color);
}

tr.final_row>th,
tr.final_row>td,
table.with_border>thead>tr.final_row>th,
table.with_border>tbody>tr.final_row>td {
    border-top: 2px solid var(--control-color);
}

.mt-2{margin-top: 2px;}
.mt-3{margin-top: 3px;}
.mt-5{margin-top: 5px;}
.mt-10{margin-top: 10px;}
.mt-15{margin-top: 15px;}
.mt-20{margin-top: 20px;}
.mt-25{margin-top: 25px;}
.mt-30{margin-top: 30px;}
.mt-35{margin-top: 35px;}
.mt-40{margin-top: 40px;}
.mt-50{margin-top: 50px;}
.mt-60{margin-top: 60px;}
.mt-70{margin-top: 70px;}
.mt-80{margin-top: 80px;}
.mt-90{margin-top: 90px;}
.mt-100{margin-top: 100px;}
.mt-110{margin-top: 110px;}
.mt-120{margin-top: 120px;}
.mt-130{margin-top: 130px;}
.mt-140{margin-top: 140px;}
.mt-150{margin-top: 150px;}
.mt-160{margin-top: 160px;}
.mt-170{margin-top: 170px;}
.mt-180{margin-top: 180px;}
.mt-190{margin-top: 190px;}
.mt-200{margin-top: 200px;}
.mt-250{margin-top: 250px;}
.mt-300{margin-top: 300px;}
.mt-350{margin-top: 350px;}
.mt-400{margin-top: 400px;}
.mt-450{margin-top: 450px;}
.mt-500{margin-top: 500px;}

.mr-2{margin-right: 2px;}
.mr-3{margin-right: 3px;}
.mr-5{margin-right: 5px;}
.mr-10{margin-right: 10px;}
.mr-15{margin-right: 15px;}
.mr-20{margin-right: 20px;}
.mr-25{margin-right: 25px;}
.mr-30{margin-right: 30px;}
.mr-35{margin-right: 35px;}
.mr-40{margin-right: 40px;}
.mr-50{margin-right: 50px;}
.mr-60{margin-right: 60px;}
.mr-70{margin-right: 70px;}
.mr-80{margin-right: 80px;}
.mr-90{margin-right: 90px;}
.mr-100{margin-right: 100px;}
.mr-110{margin-right: 110px;}
.mr-120{margin-right: 120px;}
.mr-130{margin-right: 130px;}
.mr-140{margin-right: 140px;}
.mr-150{margin-right: 150px;}
.mr-160{margin-right: 160px;}
.mr-170{margin-right: 170px;}
.mr-180{margin-right: 180px;}
.mr-190{margin-right: 190px;}
.mr-200{margin-right: 200px;}
.mr-250{margin-right: 250px;}
.mr-300{margin-right: 300px;}
.mr-350{margin-right: 350px;}
.mr-400{margin-right: 400px;}
.mr-450{margin-right: 450px;}
.mr-500{margin-right: 500px;}

.mb-2{margin-bottom: 2px;}
.mb-3{margin-bottom: 3px;}
.mb-5{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;}
.mb-25{margin-bottom: 25px;}
.mb-30{margin-bottom: 30px;}
.mb-35{margin-bottom: 35px;}
.mb-40{margin-bottom: 40px;}
.mb-50{margin-bottom: 50px;}
.mb-60{margin-bottom: 60px;}
.mb-70{margin-bottom: 70px;}
.mb-80{margin-bottom: 80px;}
.mb-90{margin-bottom: 90px;}
.mb-100{margin-bottom: 100px;}
.mb-110{margin-bottom: 110px;}
.mb-120{margin-bottom: 120px;}
.mb-130{margin-bottom: 130px;}
.mb-140{margin-bottom: 140px;}
.mb-150{margin-bottom: 150px;}
.mb-160{margin-bottom: 160px;}
.mb-170{margin-bottom: 170px;}
.mb-180{margin-bottom: 180px;}
.mb-190{margin-bottom: 190px;}
.mb-200{margin-bottom: 200px;}
.mb-250{margin-bottom: 250px;}
.mb-300{margin-bottom: 300px;}
.mb-350{margin-bottom: 350px;}
.mb-400{margin-bottom: 400px;}
.mb-450{margin-bottom: 450px;}
.mb-500{margin-bottom: 500px;}

.ml-2{margin-left: 2px;}
.ml-3{margin-left: 3px;}
.ml-5{margin-left: 5px;}
.ml-10{margin-left: 10px;}
.ml-15{margin-left: 15px;}
.ml-20{margin-left: 20px;}
.ml-25{margin-left: 25px;}
.ml-30{margin-left: 30px;}
.ml-35{margin-left: 35px;}
.ml-40{margin-left: 40px;}
.ml-50{margin-left: 50px;}
.ml-60{margin-left: 60px;}
.ml-70{margin-left: 70px;}
.ml-80{margin-left: 80px;}
.ml-90{margin-left: 90px;}
.ml-100{margin-left: 100px;}
.ml-110{margin-left: 110px;}
.ml-120{margin-left: 120px;}
.ml-130{margin-left: 130px;}
.ml-140{margin-left: 140px;}
.ml-150{margin-left: 150px;}
.ml-160{margin-left: 160px;}
.ml-170{margin-left: 170px;}
.ml-180{margin-left: 180px;}
.ml-190{margin-left: 190px;}
.ml-200{margin-left: 200px;}
.ml-250{margin-left: 250px;}
.ml-300{margin-left: 300px;}
.ml-350{margin-left: 350px;}
.ml-400{margin-left: 400px;}
.ml-450{margin-left: 450px;}
.ml-500{margin-left: 500px;}

.pAll-1{padding: 1px;}
.pAll-2{padding: 2px;}
.pAll-3{padding: 3px;}
.pAll-4{padding: 4px;}
.pAll-5{padding: 5px;}
.pAll-10{padding: 10px;}
.pAll-20{padding: 20px;}
.pAll-30{padding: 30px;}
.pAll-40{padding: 40px;}
.pAll-50{padding: 50px;}
.pAll-60{padding: 60px;}
.pAll-70{padding: 70px;}
.pAll-80{padding: 80px;}
.pAll-90{padding: 90px;}
.pAll-100{padding: 100px;}
.pAll-150{padding: 150px;}
.pAll-200{padding: 200px;}
.pAll-250{padding: 250px;}
.pAll-300{padding: 300px;}
.pAll-350{padding: 350px;}
.pAll-400{padding: 400px;}
.pAll-450{padding: 450px;}
.pAll-500{padding: 500px;}

.pt-2{padding-top: 2px;}
.pt-3{padding-top: 3px;}
.pt-5{padding-top: 5px;}
.pt-10{padding-top: 10px;}
.pt-15{padding-top: 15px;}
.pt-20{padding-top: 20px;}
.pt-25{padding-top: 25px;}
.pt-30{padding-top: 30px;}
.pt-35{padding-top: 35px;}
.pt-40{padding-top: 40px;}
.pt-50{padding-top: 50px;}
.pt-60{padding-top: 60px;}
.pt-70{padding-top: 70px;}
.pt-80{padding-top: 80px;}
.pt-90{padding-top: 90px;}
.pt-100{padding-top: 100px;}
.pt-110{padding-top: 110px;}
.pt-120{padding-top: 120px;}
.pt-130{padding-top: 130px;}
.pt-140{padding-top: 140px;}
.pt-150{padding-top: 150px;}
.pt-160{padding-top: 160px;}
.pt-170{padding-top: 170px;}
.pt-180{padding-top: 180px;}
.pt-190{padding-top: 190px;}
.pt-200{padding-top: 200px;}
.pt-250{padding-top: 250px;}
.pt-300{padding-top: 300px;}
.pt-350{padding-top: 350px;}
.pt-400{padding-top: 400px;}
.pt-450{padding-top: 450px;}
.pt-500{padding-top: 500px;}

.pr-2{padding-right: 2px;}
.pr-3{padding-right: 3px;}
.pr-5{padding-right: 5px;}
.pr-10{padding-right: 10px;}
.pr-15{padding-right: 15px;}
.pr-20{padding-right: 20px;}
.pr-25{padding-right: 25px;}
.pr-30{padding-right: 30px;}
.pr-35{padding-right: 35px;}
.pr-40{padding-right: 40px;}
.pr-50{padding-right: 50px;}
.pr-60{padding-right: 60px;}
.pr-70{padding-right: 70px;}
.pr-80{padding-right: 80px;}
.pr-90{padding-right: 90px;}
.pr-100{padding-right: 100px;}
.pr-110{padding-right: 110px;}
.pr-120{padding-right: 120px;}
.pr-130{padding-right: 130px;}
.pr-140{padding-right: 140px;}
.pr-150{padding-right: 150px;}
.pr-160{padding-right: 160px;}
.pr-170{padding-right: 170px;}
.pr-180{padding-right: 180px;}
.pr-190{padding-right: 190px;}
.pr-200{padding-right: 200px;}
.pr-250{padding-right: 250px;}
.pr-300{padding-right: 300px;}
.pr-350{padding-right: 350px;}
.pr-400{padding-right: 400px;}
.pr-450{padding-right: 450px;}
.pr-500{padding-right: 500px;}

.pb-2{padding-bottom: 2px;}
.pb-3{padding-bottom: 3px;}
.pb-5{padding-bottom: 5px;}
.pb-10{padding-bottom: 10px;}
.pb-15{padding-bottom: 15px;}
.pb-20{padding-bottom: 20px;}
.pb-25{padding-bottom: 25px;}
.pb-30{padding-bottom: 30px;}
.pb-35{padding-bottom: 35px;}
.pb-40{padding-bottom: 40px;}
.pb-50{padding-bottom: 50px;}
.pb-60{padding-bottom: 60px;}
.pb-70{padding-bottom: 70px;}
.pb-80{padding-bottom: 80px;}
.pb-90{padding-bottom: 90px;}
.pb-100{padding-bottom: 100px;}
.pb-110{padding-bottom: 110px;}
.pb-120{padding-bottom: 120px;}
.pb-130{padding-bottom: 130px;}
.pb-140{padding-bottom: 140px;}
.pb-150{padding-bottom: 150px;}
.pb-160{padding-bottom: 160px;}
.pb-170{padding-bottom: 170px;}
.pb-180{padding-bottom: 180px;}
.pb-190{padding-bottom: 190px;}
.pb-200{padding-bottom: 200px;}
.pb-250{padding-bottom: 250px;}
.pb-300{padding-bottom: 300px;}
.pb-350{padding-bottom: 350px;}
.pb-400{padding-bottom: 400px;}
.pb-450{padding-bottom: 450px;}
.pb-500{padding-bottom: 500px;}

.pl-2{padding-left: 2px;}
.pl-3{padding-left: 3px;}
.pl-5{padding-left: 5px;}
.pl-10{padding-left: 10px;}
.pl-15{padding-left: 15px;}
.pl-20{padding-left: 20px;}
.pl-25{padding-left: 25px;}
.pl-30{padding-left: 30px;}
.pl-35{padding-left: 35px;}
.pl-40{padding-left: 40px;}
.pl-50{padding-left: 50px;}
.pl-60{padding-left: 60px;}
.pl-70{padding-left: 70px;}
.pl-80{padding-left: 80px;}
.pl-90{padding-left: 90px;}
.pl-100{padding-left: 100px;}
.pl-110{padding-left: 110px;}
.pl-120{padding-left: 120px;}
.pl-130{padding-left: 130px;}
.pl-140{padding-left: 140px;}
.pl-150{padding-left: 150px;}
.pl-160{padding-left: 160px;}
.pl-170{padding-left: 170px;}
.pl-180{padding-left: 180px;}
.pl-190{padding-left: 190px;}
.pl-200{padding-left: 200px;}
.pl-250{padding-left: 250px;}
.pl-300{padding-left: 300px;}
.pl-350{padding-left: 350px;}
.pl-400{padding-left: 400px;}
.pl-450{padding-left: 450px;}
.pl-500{padding-left: 500px;}

.fill{width: 100%;}
.full_size{max-width: 100%;}

.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}

.v-top{vertical-align: top;}
.v-middle{vertical-align: middle;}
.v-bottom{vertical-align: bottom;}

.fl{float: left;}
.fl-half{float: left; width: 50%;}
.fr{float: right;}
.fr-half{float: right;; width: 50%;}
.ClearBoth{clear: both;}

.pointer{cursor: pointer;}

.block{display: block;}
.hide{display: none;}
.bold{font-weight: bold;}

.required{color: #BF0000;}

.row.center_row {margin: auto;}

.circle_bk,
.circle_btn {
    width: 150px; /* 設定寬度 */
    height: 150px; /* 設定高度，與寬度相等 */
    border: 5px solid var(--control-color); /* 設定邊框顏色和粗細 */
    border-radius: 50%; /* 使 div 變成圓形 */

    display: flex; /* 使用 Flexbox 來居中內容 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 確保文本內容也水平居中 */
    margin: auto;
}

.circle-content-wrapper {
    display: flex;
    flex-direction: column; /* 使子元素垂直排列 */
}

.circle_btn {
    cursor: pointer;
    transition: 0.4s;
}

.circle_btn:hover {
    background-color: var(--control-color);
    color: var(--easy-color);
}

.form-group-gap{margin-top: 30px;}
.form-group-smallgap{margin-top: 10px;}

.form-group.with_border
{
	border: 1px solid var(--hl-color);

	border-radius: 5px;
}

.form-group.with_gap
{
	margin: 20px 0;
	padding: 20px;
}

.other_msg{display: none;}

.container.no_left_right_padding
{
	padding-left: 0;
	padding-right: 0;
}

.cus_top_nav
,.breadcrumb.cus_top_nav
{
	position: relative;

	top: 20px;

/*	margin-top: 30px;*/
}

.cus_top_nav *
,.breadcrumb.cus_top_nav *
{
	font-size: 12pt;
}

.breadcrumb.in_content *
{
	color: var(--theme-color);
}

.icon_mid
{
	font-size: 18pt;
}

.inline_bk
{
	display: inline-block;
}

.text_after_icon
{
	display: inline-block;

	margin-left: 10px;
}

.no-border
{
	border: 0;
}

.no-bg
{
	background-color: transparent;
}

.btn
{
	transition: 0.4s;
}

.btn.cool
{
/*	background-color: #e90539;*/
/*    border: 2px solid #e90539;*/
	border: 1px solid #C58905;

	color: var(--theme-color);

	background-color: var(--hl-color);
}

.btn.cool:hover
{
    /*background-color: #52e905;
    border: 2px solid #52e905;
    color: var(--easy-color);*/

    background-color: var(--hover-color-light);
}

.btn.dark_brown_1
{
/*	background-color: #e90539;*/
/*    border: 2px solid #e90539;*/
	border: 1px solid var(--dark-brown-1);

	color: var(--easy-color);

	background-color: var(--dark-brown-1);
}

.btn.dark_brown_1:hover
{
	color: var(--dark-brown-1);

	background-color: var(--easy-color);
}

.light-link
{
/*	color: var(--hl-color);

	border-bottom: 1px solid var(--hl-color);
*/
	color: var(--link-color);

	border-bottom: 1px solid var(--link-color);

	cursor: pointer;

/*	padding:3px;*/
}

.light-link:hover
{
/*	color: var(--hover-color);

	border-bottom: 2px solid var(--hover-color);
*/
	color: var(--link-color);

	border-bottom: 2px solid var(--link-color);

/*	font-weight: bolder;*/

	font-weight: normal;
}

.light-link.reverse
{
	color: var(--hl-color);

	border-bottom: 1px solid var(--hl-color);
}

.light-link.reverse:hover
{
	color: var(--hl-color);

	border-bottom: 2px solid var(--hl-color);
}

.white-link {
	color: var(--easy-color);

	border-bottom: 1px solid var(--easy-color);
}

.white-link:hover {
	color: var(--hl-color);

	border-bottom: 2px solid var(--hl-color);
}

.easy-link
{
	text-decoration-thickness: 1px;

	text-decoration: underline;
}

.humble-link-01 {
	color: #696969;
	text-decoration: underline;
}

.humble-link-01:hover {
	color: #0000FF;
}


.link_text
{
	color: var(--link-color);

	text-decoration: none;
    border-bottom: 1px solid var(--link-color);
}

.link_text:hover
{
	text-decoration: underline;

	text-decoration-thickness: 1px;
}

.link_text.reverse
{
	color: var(--hl-color);

	border-bottom: 1px solid var(--hl-color);
}

.link_text.easy
{
	color: var(--easy-color);

	border-bottom: 1px solid var(--easy-color);
}

.easy-text {
	color: var(--easy-color);
}

.page-banner h1
{
	line-height: 30px;
}

/* ---- Contact_List_2 ----  */

.Contact_List_2 li
{
	margin-top: 20px;
}

.Contact_List_2 li>a>i
{
	font-size: 22pt;
}

.Contact_List_2 li>a>span
{
	display: inline-block;

	margin-left: 20px;

	font-size: 18pt;
}

.Submit_BK
{
	margin-top: 30px;
}

.Msg_Submit
{
	mergin-top: 10px;
}

/*
    ---- Login Button ----
    
    <button class="btn btn-primary btn-block fa-lg gradient-custom-4 mb-3 login_btn" type="button">

*/
.login_btn
{
/*    position: relative;*/
}

.login_btn .login_btn_tb
{
/*    width: 100%;*/

    margin: auto;

    margin-top: -3px;
}

.login_btn .login_btn_tb td
{
    vertical-align: middle;
}

.login_btn .login_btn_tb td.icon_cell
{
    width: 80px;

    text-align: center;
}

.login_btn .login_btn_tb td.text_cell
{
    text-align: left;
}

.login_btn .lbl_txt
{
    position: absolute;

    width: calc(100% - 50px);

    top: 8px;
    left: 50px;
}

.login_btn .icon_wrap
{
    display: block;

    width: 25px;
    height: 25px;

    margin: auto;

    background: #FFFFFF;

    border-radius: 5px;
}

.login_btn .icon_wrap .icon_img
{
    display: inline-block;

    width: 100%;
    height: 100%;

    background-size: 90% 90%;
    background-position: center center;
    background-repeat: no-repeat;
}

.login_btn .icon_wrap .icon_img.google
{
    background-image:url("../../images/icon/google-1.png");
}

/*
	---- nivoSlider ----
*/

/*.nivoSlider img{height:100% !important;} 
.nivo-main-image{height:100% !important;}*/

.nivoSlider img{height: 500px !important;} 
.nivo-main-image{height: 500px !important;}

.nivoSlider .nivo-caption>.Cus_Slider_Cap
{
/*	height: 500px !important;*/
	background-size: cover;
	background-position: center center;
}

.Cus_Slider_Cap.larger
{
/*	min-height: 400px !important;*/

/*	min-height: auto !important;*/

/*	height: auto !important;*/

/*	margin: 30px 0;*/

/*	padding: 120px 30px 60px 30px;*/

/*	min-height: auto !important;*/
	
	padding: 60px 30px;

	background-size: cover;
	background-position: center center;

	color: var(--easy-color);
}

.Cus_Slider_Cap.larger h1
,.Cus_Slider_Cap.larger h2
{
	color: var(--easy-color);
}

/*.Cus_Slider_Cap.larger.no-bg
{
	padding: 120px 30px;
}*/

.Cus_Slider_Wrap
{
	position: relative;

	margin-top: 80px;
}

.Cus_Slider_Wrap .Cus_Slider_Cap.larger
{
	position: relative;

/*	min-height: calc(100vh - 80px);*/

	margin: 0;
}

/*
	================
	[Special List]
	================

	Ref: https://web.dev/creative-list-styling/

	HTML Example:

	<div class="spec_list no_reverse click_list">
		<h1>How to clean your fish tank</h1>
		<ol role="list">
			<li>AAA</li>
			<li>BBB</li>
			<li>CCC</li>
			<li>DDD</li>
		</ol>
	</div>

*/

.spec_list {
	max-width: 600px;
	margin: 0 auto;
}

.spec_list.full_size
{
	max-width: 100%;
/*	margin: 0 auto;*/
}

.spec_list>ol {
	list-style: none;
	padding: 0;
}

.spec_list>ol>li *
{
	display: block;
}

.spec_list.click_list>ol>li
{
	cursor: pointer;
}

.spec_list>ol li + li {
	margin-top: 1rem;
}

.spec_list>ol>li {
	display: flex;
	align-items: center;
	gap: 1rem;

	/*
	background: aliceblue;
	padding: 1.5rem;
	border-radius: 1rem;
	width: calc(100% - 2rem);
	*/

/*	background: #d7e5f5;*/

	background: transparent;
	border-right: 3px solid var(--theme-color);
	border-bottom: 3px solid var(--theme-color);

	border-top: 1px solid var(--theme-color);
	border-left: 1px solid var(--theme-color);

	padding: 10px;
	border-radius: 5px;
/*	width: calc(100% - 20px);*/

	margin: 0 auto;

	font-size: 11pt;
	color: #999999;

	box-shadow: 0.25rem 0.25rem 0.75rem rgb(0 0 0 / 0.1);
}

.spec_list>ol>li:nth-child(even)
{
	flex-direction: row-reverse;

/*	background: lavender;*/

/*	background: #fff9e0;*/

	background: transparent;
	border-right: 3px solid var(--hl-color);
	border-bottom: 3px solid var(--hl-color);

	border-top: 1px solid var(--hl-color);
	border-left: 1px solid var(--hl-color);

	margin-right: -2rem;
	margin-left: 2rem;

}

.spec_list>ol>li::before {
	counter-increment: list-item;
	content: counter(list-item);

/*	font-size: 3rem;
	font-weight: 700;
	width: 2em;
	height: 2em;
	background: var(--theme-color);
	*/

	background: transparent;
	border: 2px solid var(--theme-color);

	color: var(--theme-color);
	font-size: 14pt;
	font-weight: 700;
	width: 50px;
	height: 50px;


	flex: 0 0 auto;
	border-radius: 50%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

.spec_list>ol>li:hover
{
	background: #d7e5f5;

	transition: all .6s ease;
	-webkit-transition: all .6s ease;
}

.spec_list>ol>li:nth-child(even):hover
{
	background: #fff9e0;
}

/* ---- None Reverse-Row List */
.spec_list.no_reverse>ol>li:nth-child(even) {
	flex-direction: row;
	/*margin-right: 0;
	margin-left: 0;*/

	margin-right: auto;
	margin-left: auto;
}

/*
	==== [Main_Menu] ====
	==== [Main_Menu] ====
	==== [Main_Menu] ====
*/

.header-bottom
{
	background-color: var(--theme-color);

	color: var(--easy-color);
}

.header-area a
{
	color: var(--easy-color);
}

.sub-menu a
{
	color: var(--theme-color);
}

.main-menu nav>ul>li>a
{
	padding: 25px 0;

	font-size: 12pt;
}

.header-logo
, .stick .header-logo
{
	margin-top: 0;
}

.header-bottom .TopBar-Align
{
	height: 80px;
}

.header-bottom .TopBar-Align>tbody>tr>td
{
	vertical-align: middle;
}

/*.header-bottom>.container*/
/*#Header_Container*/
.header-bottom>.container
{
	height: 80px;

	width: 100%;
	max-width: 100%;
}

.header-logo
{
	margin-left: 10px;
}

/*
	==== [Main Language Select] ====
	==== [Main Language Select] ====
	==== [Main Language Select] ====
*/

#Main_Lang_Wrapper
{
	/*position: absolute;
	right: 10px;
	top: -15px;

	right: 0px;
	top: 0px;*/

	position: absolute;

	right: 90px;
	top: 0px;

	height: 100%;
}

.Sel_Main_Lang
{
	display: none;

	width: 85px;
}

.select2-container.BK_Lang_Selector
{
	position: absolute;
	width: 100px;

	left: 20px;
	top: 26px;
}

.select2-container.BK_Lang_Selector:hover
{
	opacity: 1;
}

.select2-container.BK_Lang_Selector>span.selection>span.select2-selection.select2-selection--single
{
	border: 0;
}

.select2-container.BK_Lang_Selector>span.selection>span.select2-selection.select2-selection--single>span.select2-selection__rendered
{
/*	color: var(--easy-color);*/
/*	color: var(--theme-color);*/

	background-color: var(--theme-color);
	color: var(--easy-color);

	font-size: 12pt;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b 
{
	
}

.select2-results
{
	font-size: 12pt;
}

#Btn_Switch_Lang
{
	position: relative;
	z-index: 999999;

	width: 22px;
	height: 22px;

	background-image: url(../../images/icon/global-nor.png);

	background-size: 22px 22px;

	cursor: pointer;
}

#Btn_Switch_Lang:hover
{
	background-image: url(../../images/icon/global-hl.png);
}

/* ---- Top Block  */
@media screen and (max-width: 1200px)
{
	#Main_Lang_Wrapper
	{
		right: 160px;
	}
}

@media screen and (min-width: 768px)
{
	a.meanmenu-reveal {
	    
	    top: -65px;

	}
}

@media screen and (max-width: 767px)
{
	.slider-area
	, .page-banner-area {
		/*    margin-top: 154px;*/
/*		margin-top: 84px;*/
		margin-top: 67px;
	}

	.header-bottom>.container
	, .header-bottom .TopBar-Align
	{
		height: 67px;
	}

	.header-logo, .stick .header-logo
	{
		width: 130px;

		margin-left: 10px;
	}

	.mean-bar
	{
		top: -18px;

		/*width: 300px;
		margin-left: calc(100% - 300px);*/
	}

	a.meanmenu-reveal {
	    
	    top: -58px;

	}

	.select2-container.BK_Lang_Selector
	{
		top: 20px;

		left: 0px;

		display: none;
	}

	#Btn_Switch_Lang
	{
		left: 90px;

		display: block;
	}

	.Cus_Slider_Wrap
	{
		margin-top: 67px;
	}

	.Cus_Slider_Wrap .Cus_Slider_Cap.larger
	{
		min-height: calc(100vh - 67px);
	}
}

@media screen and (max-width: 500px)
{
	.mean-bar
	{
		width: 100%;
		margin-left: 0;
	}
}

/*
	================
	Fit and Cropped Image
	================

	1. [Fit cover]: using style "background-image"
	=> <div class="fit_bk" style="background-image: url(xxx)"></div>
	=> Image Fixed the div Better

	2. [Crop image]: using div + image
	=> <div class="cropped_bk">
		<img alt="" src=""/>
		</div>
	=> the image will be cropped

*/
.fit_bk
{
	display: block;

	background-size: cover;

	background-position: center center;
}

.cropped_bk
{
	display: block;

    overflow: hidden;
}

.cropped_bk img
{
/*	margin: -10px 0px 0px -180px;*/
	margin: 0px;
}

/*
	================
	Titles
	================
*/

.main_title
{
	font-size: 24pt;
	line-height: 1.5;

	color: var(--theme-color);
}

.page_title
{
/*	width: calc(100% - 100px);*/
	margin: auto;
	padding-top: 100px;
	padding-bottom: 20px;

	border-bottom: 1px solid #DDDDDD;

	font-size: 24pt;
	line-height: 1.5;

	color: var(--theme-color);

	text-align: center;
}

.breadcrumb a
, .breadcrumb li
{
	color: var(--theme-color);
}

.breadcrumb li.split_cell
{
	margin: 0;
}

.bk_title
{
	font-family: inherit;
    font-weight: 300;
/*    font-size: 1em;*/
	font-size: 18pt;
    text-transform: none;
    margin-bottom: 32px;
    letter-spacing: 0;

    line-height: 1.5;
}

/*
	================
	List Block
	================
*/
.List_Block
{
	position: relative;

	width: calc(100% - 40px);
/*	height: 560px;*/

	margin-left: 20px;

	border: 1px solid #cccccc;
}

.List_Block .title_bar
{
	height: 50px;
	line-height: 50px;

	text-align: center;

	background-color: var(--theme-color);
	color: var(--hl-color);

	overflow: hidden;
}

.List_Block .cropped_bk
, .List_Block .fit_bk
{
	height: 250px;
}

.List_Block .content_bk
{
	padding: 30px;

	text-align: center;
}

.List_Block .content_bk .before_ending
{
	overflow: hidden;
}

.List_Block .content_bk .final_bar
{

}

/*
	================
	[Other Custom Def]
	================
*/
.Lbl_Highlight
{
	font-weight: bold;

/*	color: #0460ff;*/

	color: var(--theme-color);
}

.Lbl_Warning,.error
{
	color: #ff0460;
}

.Lbl_Warning_Dark,.error_dark
{
	color: #981e1e;
}

.Lbl_Focus {
	color: #0000FF;
}

.Lbl_Notice {
	color: #8C1AF6;
}

.tip.error
,label.error {
	font-size: 12pt;
}

.Lbl_Title
,.Lbl_Author
{
	font-size: 20pt;

	font-weight: bold;

	color: var(--theme-color);
}

.Lbl_Small
{
	font-size: 10pt;
}


.footer-top-area
, .Lbl_Highlight.easy
, .Lbl_Title.easy
, .Lbl_Author.easy
{
	color: var(--easy-color);
}

.footer-top-area .Lbl_Highlight
, .footer-top-area .Lbl_Title
, .footer-top-area .Lbl_Author
{
	color: var(--hl-color);
}

.footer-top-area .light-link
, .hero-content .light-link
{
	color: var(--hl-color);

	border-bottom: 1px solid var(--hl-color);
}

.footer-top-area .light-link:hover
, .hero-content .light-link:hover
{
	color: var(--hl-color);

	border-bottom: 2px solid var(--hl-color);
}

.easy_BK
{
	max-width: 600px;

	margin: 0 auto;
}

.Iframe_Wrapper
{
	max-width: 640px;
	max-height: 360px;
	margin: 0 auto;
	text-align: center;
}

.info_tb>tbody>tr>td.cell_title
{
/*	text-align: right;*/

	text-align: left;

	color: #0460ff;

	padding-left: 10px;
}

.info_tb.top_title>tbody>tr>td.cell_title
{
	vertical-align: top;
}

.info_tb>tbody>tr>td.cell_title:first-child
{
	padding-left: 0;
}

.info_tb>tbody>tr>td.cell_val
{
	padding-left: 10px;
}

/* ================ [Newsletter]電子報 ================ */

.Lbl_Ori {color: var(--ori-font-color);}

.Logo_Bar { max-width: 100%; max-height: 200px; }

.Lbl_SmallFont {font-size: 10pt;}

.Lbl_Newsletter { color: var(--newsletter-color); }
.Lbl_Newsletter_2 { color: var(--newsletter-color-2); }
.Lbl_Newsletter_3 { color: var(--newsletter-color-3); }
.Lbl_Newsletter_4 { color: var(--newsletter-color-4); }
.Lbl_Newsletter_5 { color: var(--newsletter-color-5); }
.Lbl_Newsletter_6 { color: var(--newsletter-color-6); }

.Lbl_Newsletter_Red_1 { color: var(--newsletter-color-red-1); }
.Lbl_Newsletter_Orange_1 { color: var(--newsletter-color-orange-1); }
.Lbl_Newsletter_Gray_1 { color: var(--newsletter-color-gray-1); }
.Lbl_Newsletter_Blue_1 { color: var(--newsletter-color-blue-1); }
.Lbl_Newsletter_Dark_Blue_1 { color: var(--newsletter-color-dark-blue-1); }
.Lbl_Newsletter_Dark_Gray_1 { color: var(--newsletter-color-dark-gray-1); }
.Lbl_Newsletter_Dark_Brown_1 { color: var(--newsletter-color-dark-brown-1); }
.Lbl_Newsletter_Dark_Red_1 { color: var(--newsletter-color-dark-red-1); }
.Lbl_Newsletter_Dark_Red_2 { color: var(--newsletter-color-dark-red-2); }

.BG_Newsletter_Ori { background-color: var(--newsletter-bg-ori); }
.BG_Newsletter { background-color: var(--newsletter-color); color: #FFFFFF; }
.BG_Newsletter_2 { background-color: var(--newsletter-color-2); }
.BG_Newsletter_Dark_Blue_1 { background-color: var(--newsletter-bg-dark-blue-1); color: #FFFFFF; }
.BG_Newsletter_Light_Blue_2 { background-color: var(--newsletter-bg-light-blue-2); }
.BG_Newsletter_Dark_Brown_1 { background-color: var(--newsletter-bg-dark-brown-1); }
.BG_Newsletter_Dark_Brown_2 { background-color: var(--newsletter-bg-dark-brown-2); color: #FFF; }
.BG_Newsletter_Light_Brown_1 { background-color: var(--newsletter-bg-light-brown-1); }
.BG_Newsletter_Light_Brown_2 { background-color: var(--newsletter-bg-light-brown-2); }
.BG_Newsletter_Light_Brown_3 { background-color: var(--newsletter-bg-light-brown-3); }

.BG_Newsletter_Yellow_1 { background-color: var(--newsletter-bg-yellow-1); }
.BG_Newsletter_Black { background-color: var(--newsletter-bg-black);  color: var(--easy-color); }
.BG_Newsletter_Dark_0 { background-color: var(--newsletter-bg-dark-0); color: var(--easy-color); }

.BG_Newsletter_3 h1
,.BG_Newsletter_3 h2
,.BG_Newsletter_3 h3
,.BG_Newsletter_3 h4
,.BG_Newsletter_3 h5
,.BG_Newsletter_3 h6 {
	color: #FFFFFF;
}

.BG_Newsletter_Default { background-color: #EFEFEF; }
.BG_Newsletter_Light { background-color: #FFFFFF; }

.Div_Newsletter {padding: 30px 0;}

.Newsletter-link
{
	color: var(--newsletter-color-blue-1);

	border-bottom: 1px solid var(--newsletter-color-blue-1);

	cursor: pointer;

	padding:3px;
}

.Newsletter-link:hover
{
/*	color: var(--hover-color);

	border-bottom: 2px solid var(--hover-color);
*/
	color: var(--link-color);

	border-bottom: 2px solid var(--link-color);

/*	font-weight: bolder;*/

	font-weight: normal;
}

.contact_icon {width: 50px;}

/* ================ Video ================ */
.embeded_video,
.embeded_img {
	width: 100%;
	height: 300px;
}

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

    .embeded_img {
        height: auto;
    }
}

.circle-image {
    border-radius: 50%; /* 將圖片變成圓形 */
    object-fit: cover; /* 確保圖片內容按照比例填充 */
}