@charset "utf-8";
:root {
    --common-font-size: 18px;
    --common-line-height: 1.4;
    --common-font-weight: 400;
    --common-color: #000000;
    
    --maxLayout: 1500;
	--maxInner: 1400;
	--paddingLR: clamp(25px, (50 / var(--maxLayout) * 100VW), 50px);	
    --paddingT: clamp(70px, (80 / var(--maxLayout) * 100VW), 80px);
    --paddingB: clamp(70px, (80 / var(--maxLayout) * 100VW), 80px);	
	--topH: 100px;
}
:root .fa {
	margin-left: 1px;
	font-size: 24px;
}
input:focus {
    outline: none;
}
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-attachment: scroll;
    background-image: url(/images/select-switch.png);
    background-repeat: no-repeat;
    background-size: 15px auto;
    background-position: right 15px center;
    text-align: left;
}
select::-ms-expand {
    display: none;
}
a{
	text-decoration: none;
	color: inherit;
}
a:hover{cursor: pointer;}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-webkit-overflow-scrolling: touch;
	word-break: break-word;
	color: var(--common-color);
	font-family: 'Roboto', 'Noto Sans TC',  'Noto Sans SC', sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
}
body, .cs{
	font-size: var(--common-font-size);
	line-height: var(--common-line-height);	
	font-weight: var(--common-font-weight);
}
body.lock{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
html,
body,
body *:not(.fa),
body *:not(.fa):after,
body *:not(.fa):before {	
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
i, a, .cs{
	padding: 0;
	margin: 0;
	list-style: none;
	border-style: none;
	font-style: normal;
	border: 0px;
}
html,
body{
	min-width:100%;
}
img:not(#codeimg):not(.noauto) {
    height: auto !important;
}
html,
body,
.w100,
.w100-only-child *:not(.no-w100),
.layout-full,
.article,
.layout-pn{
	float: left;
	width: 100%;
}
.h100{
	height: 100%;
}
.lh-1{
	line-height:1;
}
.ulbox,
.ulbox-subs ul{
	list-style:none;
	padding:0; 
	margin:0;
}
.flexbox,
.flex-and-child,
.flex-and-child *:not(.no-flex),
.flex-only-child *:not(.no-flex),
.layout-pn,
.layout-pn .pagination,
.layout-pn .pagination .num,
.layout-pn .pagination .button,
.layout-full:not(.no-flex),
.nav-switch{
	display: flex;
	align-items: center;	
	justify-content: center;
	flex-wrap: wrap;
}
.flex-col{
	display: flex;
	flex-direction: column;
}
.flexbox.column{flex-direction: column;}
.flexbox.sbet,
.flex-col.sbet{
	justify-content: space-between;
}
.flexbox.jcs,
.flex-and-child .jcs,
.flex-only-child .jcs{
	justify-content: flex-start;
}
.flexbox.jce,
.flex-col.jce,
.flex-and-child .jce,
.flex-only-child .jce{justify-content: flex-end;}
.flexbox.vttop,
.flex-and-child .vttop,
.flex-only-child .vttop{
	align-items:flex-start;
	align-content:flex-start;
}
.flexbox.vtend,
.flex-col.vtend,
.flex-and-child .vtend,
.flex-only-child .vtend{
	align-items:flex-end;
	align-content:flex-end;
}
.flexbox.fs{
	align-items:flex-start;
	align-content:flex-start;
	justify-content: flex-start;
}
.flexbox.str{
	align-items: stretch;
	align-content: stretch;
}
.flexfill{
	flex:1;
	min-width: 1px;
}
a, a:after, a:before,
.trans, .trans:after, .trans:before,
.button-hb hr, .button-hb:before, .button-hb:after{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.trans.no, .trans.no:after, .trans.no:before{
	transition: none;
}
.scrollin,
.scrollin-top,
.scrollin-op,
.scrollin-l,
.scrollin-r,
.scrollin-fixed,
.zoom-out{
	visibility: hidden;
}
body.nav-on{
	overflow: hidden;
}

.layout-full {
	min-width: calc(var(--maxLayout) * 1px);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.layout-center {
	width: calc(var(--maxLayout) * 1px);
}
.pd-lr-1{
	padding-right: var(--paddingLR);
	padding-left: var(--paddingLR);
}
.pd-t-1{
	padding-top: var(--paddingT);
}
.pd-b-1{
	padding-bottom: var(--paddingB);
}

.article{
        line-height: 1.8;
}
.article ul,
.article ol {
        padding: 0;
}
.article ul {
        list-style-type: disc;
}
.article li {
        margin-left: 25px;
}
.article a {
        text-decoration: underline;
        color: #0071ba;
}
.article a:hover {
      text-decoration: underline;
      color: #2e3190;
    }
.article h3{
        font-size: 26px;
        font-weight: 700;
        color: #757575;
        margin:20px 0px 0px;
}

.hide-ex{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sr-only,
.visually-hidden {	
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.grid-container {
	display: grid;
	align-items: stretch;
}

.display-none{ 
	display: none; 
}
.no-max100{
	max-width: none!important;
}
.overflow-hidden{ 
	overflow: hidden;
}

/* 下拉捲軸用 */
.nav-sdrop {
    /* 限制最大高度為視窗高度減去頂部高度 */
    max-height: calc(100vh - var(--topH));
    /* 超出時顯示垂直捲軸 */
    overflow-y: auto;
    
    /* 確保捲軸不會破壞圓角 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #999 transparent; /* Firefox */
}
/* 自定義捲軸樣式 (Webkit) */
.nav-sdrop::-webkit-scrollbar {
    width: 8px;
}
.nav-sdrop::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}
.nav-sdrop::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 10px;
    border: 2px solid #efefec;
}
.lh-2{
}
.font-1{
}
.font-style1 {
	font-size: min(max(6vw, 30px), 40px);
	font-weight: 700;
}
.bg-lg{background: linear-gradient(50deg, rgba(0,93,182,1) 0%, rgba(0,130,199,1) 100%);}

.layout-full.middle {
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: flex-start;
}
.layout-full.top{
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 5;
	min-height: var(--topH);
	padding-right: 80px;
	padding-left: 80px;
}
.layout-full.top::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #FFF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e4e4e4;
}

.nav-box{
	margin-left: auto;
	margin-right: 60px;
}
.main-nav{
	z-index: 3;
}
.nav-Opt1{	
	column-gap: 60px;
}
.nav-Opt1__item.switch{
	position: relative;
}
.nav-Opt1__item.active{
	z-index: 1;
}
.nav-Opt1__box{
}
.nav-Opt1__box:hover{
	color: #757575;
}

.nav-other{
	column-gap: 25px;
}
.lang-box{
	position: relative;
	height: 64px;
}
.lang-box-switch{
	cursor: pointer;
}
.lang-box-switch .text{
	margin-left: 10px;
	margin-right: 10px;	
}
.lang-box-nav{
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0 15px;
	width: 100px;
	background-color: #757575;
}
.lang-box-nav li:not(:last-child){
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255 255 255 / 0.15);
}
.lang-box-nav li a{
	color: #ffffff;
	text-align: center;
	height: 48px;
}
.lang-box-nav li a:hover {
	opacity: 0.6;
}
.layout-full.bottom {
	color: rgba(0 0 0 / 0.7);
	min-height: 60px;
	background-color: #ededed;
	text-align: center;
	font-size: 16px;
	padding-top: 15px;
	padding-bottom: 15px;
}
.block-title {
	font-size: 30px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 55px;
}



.sidebar-box{
	position: fixed;
	z-index: 4;
	right: 15px;
	bottom: 15px;
	gap: 10px;
}
.back-top{
	transform: translateY(-10px);
	opacity: 0;
	visibility: hidden;
}
.back-top.show{
	transform: translateY(0);opacity: 1;visibility: visible;
}

.nav-switch {
	display: none;
	z-index: 5;
	color: #000000;
	column-gap: 10px;
}
.nav-switch .button-hb {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-end;
    width: 28px;
    height: 20px;    
}
.nav-switch .button-hb hr,
.nav-switch .button-hb:before,
.nav-switch .button-hb:after {
    border: none;
    display: block;
    height: 1px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    color: inherit;
    background-color: currentcolor;
}
.nav-switch .button-hb:before,
.nav-switch .button-hb:after {
    content: '';
}
html > body.nav-on .nav-switch .button-hb:before {
    width: 80%;
}
html > body.nav-on .nav-switch .button-hb hr {
    width: 60%;
}
html > body.nav-on .nav-switch .button-hb:after {
}

.layout-pn {
	margin-top: clamp(60px, (70 / var(--maxLayout) * 100vw), 70px);
	column-gap: 20px;
}
.layout-pn .pagination{
	gap: 8px;
}
.layout-pn .pagination .button {
	line-height: 1;
	width: 30px;
	height: 40px;
	position: relative;
}
.layout-pn .pagination .button:hover{
	color: #cacaca;
}

.rwd-table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

/*編輯器左右捲軸表格*/
@keyframes swipe {
  0% {
    right: 0px;
  }
  50% {
    right: 20px;
  }/
  100% {
    right: 0px;
  }
}
.for-sroll-table {
	overflow-x: auto;
	display: flex;
	table-layout: fixed;
	position: relative;
}
.for-sroll-table.swipe:after{
	content: "";
	height: 15px;
	width: 80px;
	position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(/plugins/swipe.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	animation: swipe 2s infinite;
}
.for-sroll-table *{
	max-width: none;
}
.for-sroll-table > table {
	width: 100%;
	table-layout: fixed;
}

.W-1920px{}
@media screen and (max-width: 1920px) {
}

.W-1500px{}
@media screen and (max-width: 1500px) {
.layout-full{
	min-width: inherit;
}
.layout-full.top{
	padding-right: var(--paddingLR);
	padding-left: var(--paddingLR);
}
}

.W-1100px{}
@media screen and (max-width: 1100px) {
 /* 重置捲軸相關樣式 */
.nav-sdrop {   
    max-height: none;
    overflow-y: visible;
    scrollbar-width: auto;
    scrollbar-color: initial;
}
.nav-sdrop::-webkit-scrollbar {
    width: auto;
}
.nav-sdrop::-webkit-scrollbar-track {
    background: initial;
    border-radius: initial;
}
.nav-sdrop::-webkit-scrollbar-thumb {
    background-color: initial;
    border-radius: initial;
    border: initial;
}

.nav-switch{
	display: flex;
}

.layout-full.top{
	position: sticky;
}

.nav-box{
	position: fixed;
	width: 100vw;
	height: calc(100vh - var(--topH) );
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	touch-action: none;      /* 防止觸摸事件 */
	user-select: none;       /* 防止文字選擇 */
	-webkit-tap-highlight-color: transparent;  /* 防止點擊高亮 */
	transform: translateX(-10px);
	left: 0px;
	top: var(--topH);
	z-index: 3;
}
body.nav-on .nav-box{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: auto;      /* 恢復觸摸事件 */
    user-select: auto;       /* 恢復文字選擇 */
	
	transform: translateX(0);
}
body.nav-on .layout-full.top::before{
	border-bottom: none;
}
.main-nav {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: #fff;
	overflow: auto;
	overflow-x: hidden;
	padding: 0 var(--paddingLR) 60px;
	align-items: flex-start;
	align-content: flex-start;
}
.nav-Opt1,
.nav-Opt1 li,
.nav-Opt1 li a{
    width: 100%;
}
.nav-Opt1 {	
}
.nav-Opt1__item{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e4e4e4;
}
.nav-Opt1__box{
	height: 78px;
}

.nav-other {
    column-gap: 20px;
}
.lang-box{
	display: none;
	width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	touch-action: none;      /* 防止觸摸事件 */
	user-select: none;       /* 防止文字選擇 */
	-webkit-tap-highlight-color: transparent;  /* 防止點擊高亮 */
}
.nav-switch__icon{
	display: block;
}
.nav-lang{
	display: flex;
	margin-top: 30px;
	margin-bottom: 20px;
	column-gap: 30px;
}
.nav-lang__item:not(:last-child)::after{
	content: "";
	height: 17px;
	width: 1px;
	margin-right: 25px;
	margin-left: 25px;
	background-color: #e4e4e4;
}
}

.W-800px{}
@media screen and (max-width: 800px) {
.rwd-table > th{
	display: none;
}
.rwd-table > tbody > tr{
	display: flex;
	flex-direction: column;
}
.rwd-table.rtlb > tbody > tr{
	flex-direction: column-reverse;
}

:root{
	--topH: 80px;
}
}

.W-480px{}
@media screen and (max-width: 480px) {
:root{
	--topH: 65px;
}
.top-logo{
	width: 190px;
}
.nav-other{
	column-gap: 15px;
}
.nav-switch .button-hb{
    width: 24px;
}
.sidebar-box{
	width: 35px;
}
}