/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 18 2023 | 02:32:19 */
/* 通用*/
* {
	margin: 0;
	padding: 0;
	font-family: 'Helvetica Neue', Helvetica, Arial, '微軟正黑體', 'Microsoft JhengHei';
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}
ul, ol {
    margin-bottom: 0!important;
}
/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto; /* ie8 */
}

/*讀取圖檔 fade in css*/	
img:not(.initial) {
	transition: opacity 1s;
}
img.initial, img.loaded, img.error {
	opacity: 1;
}
img:not([src]) {
	visibility: hidden;
}
.videos{
	border-radius: 10px!important;
}


/*中間內容*/
.center1400 {
	width: 1400px;
	margin: 0 auto;
	padding: 0 50px;
	display: block;
}

.center1200 {
	width: 1200px;
	margin: 0 auto;
	padding: 0 50px;
	display: block;
}
@media screen and (max-width: 1440px){
.center1400 {
	width: 100%;
	max-width:1400px;
	padding: 0 5%;
}		

.center1200 {
	width: 100%;
	max-width:1200px;
	padding: 0 5%;
}
}
/*空間*/
.flex-container {
	display: flex;
	flex-direction: row; /*column 垂直*/
	justify-content: center;

}
.flex-container ul, .flex-container li{
	list-style-type: none;
}
.flex-item-1{
	flex: 1 1 100%;
	padding: 1%;
	justify-content: center;
	
}
.flex-item-2{
	flex: 1 1 50%;
	padding: 1%;
	justify-content: center;
}
.flex-item-3{
	flex: 1 1 33.333%;
	padding: 1%;
	justify-content: center;
}
.flex-item-4{
	flex: 1 1 25%;
	padding: 1%;
	justify-content: center;
}
.flex-item-5{
	flex: 1 1 20%;
	padding: 1%;
	justify-content: center;
}

/*斷行*/
.flex-wrap{
	flex-wrap: wrap;/*多行*/
}
.flex-wrap-reverse{
	flex-wrap: wrap-reverse;/*多行逆向*/
}
/*指向*/
.flex-direction-row-reverse {
	flex-direction: row-reverse;/*逆向*/
}
.flex-direction-column {
	flex-direction: column;/*垂直排列*/
}
.flex-direction-column-reverse {
	flex-direction: column-reverse;/*垂直排列逆向*/
}


@media screen and (max-width: 834px) {
.flex-container {
	flex-wrap:wrap;/*多行*/
}	
.flex-item-1,.flex-item-2,.flex-item-4,.flex-item-5{
	flex: 1 1 25%;
}	
}
@media screen and (max-width: 414px) {
.flex-item-1,.flex-item-2,.flex-item-3,.flex-item-4,.flex-item-5{
	flex: 1 1 50%;
}

}
/* justify-content 左右*/
.flex-j-start
{justify-content: flex-start}
.flex-j-end
{justify-content: flex-end}
.flex-j-center
{justify-content: center}
.flex-j-space-around
{justify-content: space-around}
.flex-j-space-between
{justify-content: space-between}
	
/* align-items 垂直*/
.flex-a-start
{align-items: flex-start}
.flex-a-end
{align-items: flex-end}
.flex-a-center 
{align-items: center}
.flex-a-stretch 
{align-items: stretch}
.flex-a-baseline
{align-items: baseline}	

/* align-content */
.flex-ac-start
{align-content: flex-start}
.flex-ac-end
{align-content: flex-end}
.flex-ac-center 
{align-content: center}
.flex-ac-space-between
{align-content: space-between}
.flex-ac-space-around
{align-content: space-around}
.flex-ac-stretch
{align-content: stretch}


/* 螢幕等高 */
.vh100 {
	height: 100vh;
}
/*置中*/
.center {
	margin: 0 auto;
}
/* 浮動float*/
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}
/* 定位 */
.rel {
	position: relative;
}
.abs {
	position: absolute;
}
.fix {
	position: fixed;
}
.z1 {
	z-index: 1;
}
.z2 {
	z-index: 2;
}
.z3 {
	z-index: 3;
}
.z4 {
	z-index: 4;
}
.z5 {
	z-index: 5;
}
.z6 {
	z-index: 6;
}
.z7 {
	z-index: 7;
}
.z8 {
	z-index: 8;
}
.z-1 {
	z-index: -1;
}
.z99 {
	z-index: 99;
}
.z999 {
	z-index: 999;
}
.z9999 {
	z-index: 9999;
}
/* 背景色 */
.bgwhite {
	background-color: #fff;
}
.bggray5 {
	background-color: #f7f7f8;
}
.bggray30 {
	background-color: #ced1d4;
}
.bggray50 {
	background-color: #ADB3B7;
}
.bggraybd {
	background-color: #5b6770;
}
.bgbk {
	background-color: #1B1D1D;
}
.bgblack10 {
	background-color: rgba(0,0,0,0.10);
}
.bgblack30 {
	background-color: rgba(0,0,0,0.30);
}
.bgblack50 {
	background-color: rgba(0,0,0,0.30);
}
.bggold {
	background-color: #bda999;
}
.bggoldd {
	background-color: #998376;
}
.bgred {
	background-color: #ba282a;
}
.bgyred {
	background-color: #d82c2c;
}
.bgcomplexion {
	background-color: #faf5f0;
}
.bgbrown {
	background-color: #a28265;
}
.bgorange {
	background-color: #f7965b;
}
.bgpurple {
	background-color: #7e308e;
}
.bgyellow {
	background-color: #f8c733;
}
.bggreen {
	background-color: #00c7b1;
}
/* 螢光 */
.bgshockgren {
	background-color: #c7eb1e;
}
.bgshockyel {
	background-color: #f6ff3b;
}
.bgshockpnk {
	background-color: #db337a;
}


/* 分隔線 */
.line {
	border-top: 1px inset #bda999;
	margin: 3% 0 1% 0;
	padding: 1% 0;
	clear: both;
}
.linew {
	border-top: 1px solid #fff;
	margin: 1% 0;
	padding: 1% 0;
	clear: both;
}
.linewb {
	border-top: 5px solid #fff;
	margin: 3% 0 1% 0;
	padding: 1% 0;
	clear: both;
}
.lineg {
	border-top: 2px solid #CED1D4;
	margin: 3% 0 1% 0;
	padding: 1% 0;
	clear: both;
}
/* 垂直分隔線 */
.vline {
	border-right: 1px inset #CED1D4;
	margin: 0 6%;
	padding: 8% 0;
	float:left;
}
.vlinew {
	border-right: 1px solid #fff;
	margin: 0 6%;
	padding: 8% 0;
	float:left;
}
.vlinews {
	border-right: 1px solid #fff;
	margin: 0 4%;
	padding: 5% 0;
	float:left;
}

/* 外框 */
.framew {
	border: 1px inset #fff;
}
.frameg {
	border: 1px inset #CED1D4;
}
.framesg {
	border: 1px solid;
}

/* 字色 */
.tred {
	color: #ba282a!important;
}
.tgold {
	color: #bda999!important;
}
.tgoldd {
	color: #998376!important;
}
.tgold2 {
	color: #f9e1a4!important;
}
.tbgray {
	color: #5B6770!important;
}
.tgray30 {
	color: #CED1D4!important;
}
.tgray50 {
	color: #ADB3B7!important;
}

.twhite {
	color: #fff!important;
}
.tbrown {
	color: #b48e6c!important;
}
.tblack {
	color: #1B1D1D!important;
}

.tlorange {
	color: #ffcc88!important;
}
.torange {
	color: #f7965b!important;
}
.tblue {
	color: #66CCFF!important;
}

.tlbluepurple {
	color: #a6b5f0!important;
}
.tbluepurple {
	color: #a57ded!important;
}
.tturquoise {
	color: #00e0c7!important;
}
.tgreen {
	color: #00C7B1!important;
}
.tpurple {
	color: #9332a7!important;
}
/* 螢光 */
.tshockgren {
	color: #c7eb1e!important;
}
.tshockyel {
	color: #f6ff3b!important;
}
.tshockpnk {
	color: #db337a!important;
}
.tshockblue {
	color: #45beff!important;
}

/*文字陰影*/
.tshadow {
	text-shadow:2px 1px 7px #000000;
}
.twshadow {
	text-shadow:2px 1px 7px #fff;
}

/*文字對齊*/
.tcter {
	text-align: center;
}
.tlef {
	text-align: left;
}
.trht {
	text-align: right;
}
.tjustify{
	text-align: justify;
}

.thcter{
	vertical-align: middle;
	}
/* 字級&行距 */

.hb0 {
	font-size: 5.4em!important;
	color:#5B6770;
}
.hb1 {
	font-size: 4em!important;
	color:#5B6770;
}
.hb2 {
	font-size: 2.7em!important;
	color:#5B6770;
}
.hb3 {
	font-size: 2em!important;
	color:#5B6770;
}
.hb4 {
	font-size: 1.6em!important;
	color:#5B6770;
}
.hb5 {
	font-size: 1.4em!important;
	color:#5B6770;
}

p {font-size: 1.2em!important;
	color:#5B6770;
	margin: 0}

/************************************************************************************
smaller than 768 直視portrait
*************************************************************************************/
@media screen and (max-width: 768px)  and (orientation: portrait){
.hb0, .hb1, .hb2, .hb3, .hb4, .hb5, p{
	line-height: 1.2em!important;
}	
.hb0, .hb1 {
    font-size: 3.5em!important;
}		
}

/************************************************************************************
smaller than 375 直視portrait
*************************************************************************************/
@media screen and (max-width: 375px) and (orientation: portrait)
.hb0, .hb1 {
    font-size: 3em!important;
}
}



/************************************************************************************
smaller than 768 直視portrait
*************************************************************************************/
@media screen and (max-width: 768px)  and (orientation: portrait){
.lh0, .lh1, .lh2 {
    line-height: 1.2em!important;
}
}
/* 字級間距 */
.ls1 {
	letter-spacing: 0.1em!important;
}
.ls2 {
	letter-spacing: 0.2em!important;
}
.ls3 {
	letter-spacing: 0.3em!important;
}
.ls5 {
	letter-spacing: 0.5em!important;
}
.ls7 {
	letter-spacing: 0.7em!important;
}
/* 字級高度間距 */
.lh0 {
	line-height: 1.2em!important;
}
.lh1 {
	line-height: 1.5em!important;
}
.lh2 {
	line-height: 2em!important;
}
/* 字粗細 */
.fw3 {font-weight: 300!important;}
.fw5 {font-weight: 500!important;}
.fw6 {font-weight: bold!important;}

/* 上標 */
.tsuper {
    font-size: 0.6em;
    vertical-align: super;
}

/*垂直間隔*/
.ht1{ padding-bottom:1vh!important;}
.ht2{ padding-bottom:2vh!important;}
.ht3{ padding-bottom:3vh!important;}
.ht4{ padding-bottom:4vh!important;}
.ht5{ padding-bottom:5vh!important;}
.ht7{ padding-bottom:7vh!important;}
.ht9{ padding-bottom:9vh!important;}
.ht11{ padding-bottom:11vh!important;}
.ht21{ padding-bottom:21vh!important;}
.ht25{ padding-bottom:25vh!important;}
.ht30{ padding-bottom:30vh!important;}
.ht35{ padding-bottom:35vh!important;}
.ht40{ padding-bottom:40vh!important;}
.ht45{ padding-bottom:45vh!important;}
.ht50{ padding-bottom:50vh!important;}

/*文字陰影*/
.tshad {
	text-shadow: 1px 1px 8px rgba(0,0,0,0.5)!important;
}

/*文字刪除線*/
.tline-through {
	text-decoration: line-through;
}
.tline-under {
	text-decoration: underline;
}


/*按鈕*/
a {
  color: #01c7b1;
	text-decoration: none!important;
}
a:hover,a:focus{color: #01c7b1;
}

.opbtnyet { /*未開放*/
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	cursor: no-drop;
	color: #ADB3B7!important;
	background-color: #CED1D4;
	border: 2px solid #CED1D4;
	white-space: nowrap;
	padding: .75em 4em; margin-bottom: 5px;
	line-height: 1.42857143;
	border-radius: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	/*漸變*/
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
}
.opbtnyet:hover {
	color: #ADB3B7;
	text-decoration: none;	
}
.opbtna{/*文字按鈕*/
	display: inline-block;
	text-decoration: none;
	color: #00C7B1!important;
	/*漸變*/
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
}
.opbtna:hover {
	color: #00E0C6!important;
	text-decoration: none;	
}

.opbtnS { /*小按鈕*/
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #fff!important;
	background-image: none;
	border: 1px solid transparent;
	white-space: nowrap;
	padding: 8px 20px;
	line-height: 1.42857143;
	border-radius: 3px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	/*漸變*/
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	/*陰影*/
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.opbtnS:hover {
	opacity: 0.8;
	color: rgba(210,210,210,0.82)!important;
	text-decoration: none;	
	/*陰影*/
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.9);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}
.opbtn { /*按鈕架構*/
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #1B1D1D!important;
	background-color: #00C7B1;
	border: 2px solid #00C7B1;
	white-space: nowrap;
	padding: .75em 4em; margin-bottom: 5px;
	line-height: 1.42857143;
	border-radius: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	/*漸變*/
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;

}
.opbtn:hover {
	/*-webkit-filter: brightness(0.85);*/
	/*filter: brightness(0.85);*/
	background-color: #00E0C6;
	border: 2px solid #00E0C6;
	text-decoration: none;	
	color: #1B1D1D!important;
	/*陰影*/
}



.opbtnWL { /*白線*/
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #fff!important;
	background-color: rgba(0,0,0,0);
	border: 2px solid rgba(255,255,255,1.00);
	white-space: nowrap;
	padding: 0.75em 4em; 
	margin-bottom: 5px;
	line-height: 1.42857143;
	border-radius: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	/*漸變*/
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	/*陰影*/
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.opbtnWL:hover {
	color: #fff!important;
	text-decoration: none;	
	background: rgba(255, 255, 255, 0.2);
	/*陰影*/
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.9);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

.opbtnW { /*白*/
	display: inline-block;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #1b1d1d!important;
	background-color: rgba(255,255,255,1);
	border: 2px solid rgba(255,255,255,1.00);
	white-space: nowrap;
	padding: .75em 4em; 
	margin-bottom: 5px;
	line-height: 1.42857143;
	border-radius: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	/*漸變*/
	-webkit-transition: all .5s ease 0s;
	-moz-transition: all .5s ease 0s;
	-ms-transition: all .5s ease 0s;
	-o-transition: all .5s ease 0s;
	transition: all .5s ease 0s;
	/*陰影*/
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.opbtnW:hover {
	opacity: 0.8;
	color: #fff!important;
	background-color: #1b1d1d;
	border: 2px solid #1b1d1d;
	text-decoration: none;	
		background: rgba(255, 255, 255, 0.2);

	/*陰影*/
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.9);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}


/*框粗*/
.border-bold{
	border-width: 3px;	
}
.border-bold:hover {
	border-width: 3px;	
}
/*框圓角*/
.border-radius{
	border-radius: 10px;	
}

/*通用end*/