*
{
	font-family: 微軟正黑體;
}

html , body
{
	font-family: 微軟正黑體;
	width: 100%;
	margin: 0;
	min-height: 100vh;
}

html
{
	overflow-x: hidden;
}

body
{
	background: white;
	position: relative;
}

a
{
	text-decoration: none;
}

img
{
	display: block;
}

button , select , input[type="radio"] , input[type="checkbox"] ,
input[type="submit"] , label , a
{
	cursor: pointer;
}

input , button , select , textarea
{
	background: transparent;
	outline: none;
	border: none;
	box-sizing: border-box;
}

textarea
{
	padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
button , input[type="button"]
{
	-webkit-appearance: none !important;
	-moz-appearance:none !important;
	appearance: none !important;
}

input[type="number"]
{
	-moz-appearance:textfield;
}

input[type="number"] , input[type="text"] , input[type="password"] ,
select
{
	min-height: 30px;
}

input[type="submit"] , input::placeholder
{
	font-size: 16px;
}

input[type="file"]
{
	font-size: 16px;
	cursor: pointer;
}

table
{
	border-spacing: 0;
	border-collapse: collapse;
}

span
{
	vertical-align: middle;
}

/*****     共同     *****/
.Notice
{
	color: red;
	display: none;
	font-size: 13px;
	text-align: left;
}

.Notice.active
{
	display: block;
}

.NoData /* 沒有資料 */
{
	text-align: center;
	font-size: 15px;
}

/*****     共同框架     *****/
.ContentContainer
{
	color: #081836;
	min-height: calc(100vh - 140px);
	width: calc(100% - 310px);
	margin: 0 0 0 250px;
	padding: 30px 30px 50px 30px;
	transition: all 0.3s ease-in-out;
	position: relative;
}

.ContentContainer.active
{
	width: calc(100% - 60px);
	margin: 0;
}

/*     display:grid 4格     */
.GridBlockBox
{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.GridBlock
{
	border: 1px solid rgba(255,255,255,0.5);
	background: rgba(0,0,0,0.1);
	padding: 10px;
}

.GridBlockTopic
{
	width: 100%;
	margin: 0 0 10px 0;
}

.GridBlockList
{
	width: 100%;
	display: block;
}

.GridBlockList:not(:last-child)
{
	margin: 0 0 3px 0;
}

/*     搜尋     */
.Search
{
	margin: 0 0 10px 0;
}

/*     純顯示資訊表格     */
.Information
{
	width: 100%;
}

.InformationTit
{
	text-align: center;
	width: calc(100% + 20px);
	margin: 0 0 0 -10px;
	font-size: 18px;
	border-spacing: 10px 0;
	border-collapse: separate;
}

.InformationTitCell
{
	background: #292929;
	border-radius: 10px 10px 0 0;
	padding: 10px 5px;
}

.InformationName
{
	color: white;	
	width: 100%;	
}

.InformationScroll
{
	width: 100%;
	overflow: auto;
}

.InformationTableBox
{
	width: 100%;
}

.InformationTableBox table
{
	width: 100%;
	text-align: center;
	table-layout: fixed;
	word-break: break-all;
}

.InformationTableBox table , .InformationTableBox tbody:nth-child(2n-1) tr
{
	background: white !important;
}

.InformationTableBox thead , .InformationTableBox tbody , .InformationTableBox tr
{
	width: 100%;
}

.InformationTableBox th , .InformationTableBox td
{
	border: 1px solid #d6d6d6;
	min-width: 56px;
	padding: 10px 5px;
}

.InformationTableBox th
{
	white-space: nowrap;
}

.InformationTableBox tfoot tr:first-child td
{
	border-top: 1px solid #b9b9b9;
}

.InformationTableBox tbody tr:nth-child(2n-1)
{
	background: #ECECEC;
}

.InformationTableBox tbody.foreach:nth-child(2n) tr
{
	background: #ECECEC !important;
}

.InformationTableBox tr:hover
{
	background: rgba(0,0,0,0.1);
}

.InformationTableBox .Ipt , .InformationTableBox .Sel , .InformationTableBox .Textarea
{
	display: block;
}

.InformationTableBox .Ipt input , .InformationTableBox .Sel select , .InformationTableBox .Textarea textarea
{
	width: 100%;
}

.InformationTableBox img
{
	width: 100%;
	display: inline-block;
	margin: 0 0 -4px 0;
	max-width: 150px;
}

/*     Information需要做切換資訊     */
.Information.tab .InformationTitCell
{
	cursor: pointer;
	opacity: 0.5;
}

.Information.tab .InformationTitCell.active
{
	opacity: 1;
}

.Information.tab .InformationTableBox
{
	display: none;
}

.Information.tab .InformationTableBox.active
{
	display: block;
}

/*     需點擊查看詳細     */
.InformationTableBox.detail tbody tr:nth-child(2n-1)
{
	background: transparent;
}

.InformationTableBox.detail tbody:nth-child(2n-1)
{
	background: #ECECEC;
}

.InformationTableBox.detail tbody:hover
{
	background: rgba(0,0,0,0.1);
}

.DetailTr
{
	display: none;
}

.DetailTr.active
{
	display: table-row;
}

.DetailBoxTable
{
	background: transparent;
	border-collapse: separate;
	border-spacing: 1px;
	width: 100%;
}

.DetailBoxTable > div > div > div
{
	background: transparent;
	padding: 8px 5px;
	vertical-align: top;
	text-align: left;
}

.DetailBoxCell1
{
	width: 120px;
	min-width: 120px;
}

.DetailBoxCell2
{
	width: calc(100% - 120px);
}

.DetailBoxCell2 .Ipt , .DetailBoxCell2 .Sel , .DetailBoxCell2 .Sel select ,
.DetailBoxCell2 .Textarea , .DetailBoxCell2 .Textarea textarea
{
	width: 100%;
}

.DetailBoxCell2 .Ipt input[type="number"] , .DetailBoxCell2 .Ipt input[type="text"] , .DetailBoxCell2 .Ipt input[type="password"]
{
	min-width: 100%;
}

/*     區塊元素     */
.Block
{
	width: 100%;
}

.BlockTit , .BlockTxt
{
	display: block;
	width: 100%;
}

.Block .Textarea textarea
{
	min-width: 500px;
	min-height: 150px;
}

.BlockImg
{
	width: 100%;
}

.BlockImg img
{
	width: auto;
	max-width: 50%;
}

/*     行內區塊元素     */
.InlineBlock
{
	display: inline-block;
	vertical-align: middle;
}

.InlineBlockTit , .InlineBlockTxt
{
	display: inline-block;
	vertical-align: middle;
}

.InlineBlockTit
{
	margin-right: 5px;
}

.InlineBlockImg
{
	display: inline-block;
	width: 500px;
}

.InlineBlockImg img
{
	width: auto;
	max-width: 100%;
}

/*     編輯頁面     */
.EditBtnBox
{
	background: rgba(0,0,0,0.1);
	padding: 20px 20px;
	margin: 80px 0 0 0;
	width: calc(100% - 40px);
	text-align: right;
}

.EditBtn
{
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	font-size: 18px;
	padding: 6px 15px;
}

.EditBtn , .EditBtn.blue
{
	color: white;
	background: #0d73ba;
}

.EditBtn.red
{
	color: white;
	background: #c4272c;
}

.EditBtn:not(:last-child)
{
	margin: 0 15px 0 0;
}

.EditBtn:hover
{
	opacity: 0.9;
}

.BlockLine input[type="submit"] , .EditBtn input[type="submit"]
{
	opacity: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.EditBtn i , .EditBtn span
{
	display: inline-block;
	vertical-align: middle;
}

/*****     共同零件     *****/
/*     開關     */
.SwitchHorizontal , .SwitchHorizontalSlider
{
	height: 30px;
}

.SwitchHorizontal
{
	position: relative;
	display: inline-block;
	min-width: 75px;
}

.SwitchHorizontal:not(:last-child)
{
	margin: 0 5px 0 0;
}

.SwitchHorizontal input[type="checkbox"]
{
	display: none;
	width: 0;
	height: 0;
}

.SwitchHorizontalSlider
{
	background: #4D4D4D;
	position: relative;
	cursor: pointer;
	/* top: 0;
	left: 0;
	right: 0;
	bottom: 0; */
	-webkit-transition: .3s;
	transition: 0.3s;
	border-radius: 999rem;
}

.SwitchHorizontal input[type="checkbox"]:checked + .SwitchHorizontalSlider
{
	background: #59AD2F;
}

.SwitchHorizontalSlider:before
{
	background: white;
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	top: 50%;
	transform: translateY(-50%);
	left: 4px;
	border-radius: 50%;
}

.SwitchHorizontal input[type="checkbox"]:checked + .SwitchHorizontalSlider:before
{
	right: 4px;
	left: unset;
}

.SwitchHorizontalTxt
{
	color: white;
	width: calc(100% - 40px);
	padding: 0 10px 0 30px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	z-index: 5;
}

.SwitchHorizontal input[type="checkbox"]:checked + .SwitchHorizontalSlider .SwitchHorizontalTxt
{
	padding: 0 30px 0 10px;
}

/*     Input & Select & Textarea     */
.Ipt , .Sel , .Textarea
{
	border: 1px solid #CCCCCC;
	background: white;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
	border-radius: 2px;
	display: inline-block;
	margin: 0 5px 0 0;
}

.Ipt , .Sel , .Textarea:not(:last-child)
{
	margin: 0 5px 5px 0;
}

.Ipt , .Sel
{
	vertical-align: middle;
}

/*     Input     */
.Ipt input[type="number"] ,
.Ipt input[type="text"] ,
.Ipt input[type="password"]
{
	min-width: 300px;
	font-size: 15px;
	padding: 5px 0 5px 5px;
}

.Ipt input[name="sStartTime"] ,
.Ipt input[name="sEndTime"] ,
.Ipt input[name="sShowStartTime"] ,
.Ipt input[name="sShowEndTime"]
{
	min-width: 150px;
}

/*     Select     */
.Sel select
{
	min-width: 80px;
	font-size: 15px;
	padding: 5px 0 5px 5px;
}

/*     Textarea     */
.Textarea
{
	vertical-align: top;
}

.Textarea Textarea
{
	min-width: 150px;
	min-height: 60px;
	font-size: 15px;
	padding: 5px 0 5px 5px;
}

/*     Radio     */
.IptRadio
{
	display: inline-block;
	vertical-align: middle;
}

.IptRadio:not(:last-child)
{
	margin: 0 15px 0 0;
}

.IptRadio input[type="radio"]
{
	margin: 0;
}

/*     Checkbox     */
.IptCheckbox
{
	display: inline-block;
	vertical-align: middle;
	margin: -4px 0 0 0;
}

.IptCheckbox:not(:last-child)
{
	margin: 0 15px 0 0;
}

.IptCheckbox input[type="checkbox"]
{
	margin: 0;
	width: 16px;
	height: 16px;
}

.IptCheckbox span , .IptCheckbox input[type="checkbox"]
{
	vertical-align: middle;
}

/*     箭頭     */
.AfterArrow
{
	border-top: 2px solid white;
	border-right: 2px solid white;	
	display: inline-block;
	width: 10px;
	height: 10px;
}

.AfterArrow.right
{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

/*     按鈕     */
.TableBtn , .TableBtnIcon ,
.TableBtnFont , .TableBtnBg
{
	margin: 0 0 5px 0;
	border-radius: 3px;
	padding: 3px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.TableBtn , .TableBtnFont
{
	font-size: 16px;
}

.TableBtn , .TableBtn.blue ,
.TableBtnFont , .TableBtnFont.blue
{
	color: #004ec4;
}

.TableBtn.red , .TableBtnFont.red
{
	color: #db1d1d;
}

.TableBtnIcon , .TableBtnBg
{
	font-size: 15px;
	min-width: 20px;
	min-height: 16px;
}

.TableBtnIcon , .TableBtnIcon.blue ,
.TableBtnBg , .TableBtnBg.blue
{
	background: #004ec4;
	color: white;
}

.TableBtnIcon.red , .TableBtnBg.red
{
	background: #db1d1d;
	color: white;
}

.TableBtnIcon:hover , .TableBtnBg:hover
{
	opacity: 0.8;
}

.TableBtn:not(:last-child) ,
.TableBtnIcon:not(:last-child) ,
.TableBtnFont:not(:last-child) ,
.TableBtnBg:not(:last-child)
{
	margin: 0 8px 5px 0;
}

.TableBtn:hover , .TableBtnFont:hover
{
	text-decoration: underline;
}

/*     新增按鈕     */
.BtnAdd
{
	background: #FFE4BD;
	color: black;
	border-radius: 5px;
	padding: 5px 15px;
	font-size: 16px;
	display: inline-block;
}

.BtnAdd:hover
{
	background: #fcdbad;
}

/*     分類按鈕     */
.BtnKind
{
	background: linear-gradient(to bottom, #2F2F2F 0%,#030303 100%);
	color: #F1E0BB;
	padding: 5px 10px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	font-size: 16px;
	border-radius: 3px;
}

.BtnKind:not(:last-child)
{
	margin: 0 5px 0 0;
}

.BtnKind.active
{
	background: linear-gradient(to bottom, #845924 0%,#F7E6C0 100%);
	color: white;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

/*     隨便按鈕     */
.BtnAny , .BtnAny2
{
	background: linear-gradient(to bottom, #27a6e0 0%,#0156bf 100%);
	color: white;
	text-align: center;
	padding: 5px 15px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	font-size: 16px;
	box-sizing: border-box;
	border-radius: 5px;
}

.BtnAny2
{
	background: linear-gradient(to bottom, #c1272d 0%,#7a0009 100%);
}

.BtnAny:not(:last-child) , .BtnAny2:not(:last-child)
{
	margin: 0 7px 0 0;
}

.BtnAny input[type="submit"]
{
	padding: 6px;
	font-size: 15px;
}

.BtnAny:hover
{
	opacity: 0.9;
}

/*****     登入頁     *****/
.loginBox
{
	background: linear-gradient(to bottom, #1a1a1a 0%,#534741 100%);
	width: 100%;
	height: 100vh;
}

.loginContainer
{
	/* background: #F2F2F2; */
	height: 100vh;
	width: 900px;
	margin: 0 calc(50% - 450px);
	text-align: center;
	position: relative;
}

.loginInner
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.loginWebName
{
	color: white;
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 80px 0;
}

.loginTable
{
	width: 200px;
	border-spacing: 0 20px;
	margin: 0 0 20px 0;
}

.loginCellIcon
{
	color: white;
	font-size: 24px;
	min-width: 50px;
	text-align: center;
}

.loginCellWrite
{
	width: calc(100% - 50px);
}

.loginCellWrite .Ipt
{
	width: 100%;
}

.loginRem
{
	color: white;
	width: 100%;
	margin: 0 0 40px 0;
}

.loginRem input , .loginRem span
{
	vertical-align: middle;
	display: inline-block;
}

.loginRem input
{
	width: 21px;
	height: 21px;
}

.loginRem span
{
	font-size: 18px;
}

.loginBtn
{
	background: linear-gradient(to bottom, #fbebc6 0%,#d0ad6a 100%);
	color: black;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	display: block;
	padding: 8px 0 !important;
	font-size: 16px;
}

/*****     Header     *****/
header
{
	background: linear-gradient(to bottom, #1B1B1B 0%,#463C37 100%);
	color: white;
	width: calc(100% - 250px);
	margin: 0 0 0 250px;
	transition: all 0.3s ease-in-out;
	position: relative;
}

header::after
{
	background: linear-gradient(to right, #a37027 0%,#e4c283 35%,#8b5c23 60%,#e6c690 100%);
	width: 100%;
	height: 5px;
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: -5px;
	z-index: 2;
}

header.active
{
	width: 100%;
	margin: 0;
}

.headerContainer
{
	width: 100%;
	text-align: right;
	padding: 10px 0;
	position: relative;
}

.headerCircle , .headerSwitch , .headerLangBox ,
.headerCtrlBox , .headerCtrlContainer , .headerInf
{
	display: inline-block;
	vertical-align: middle;
}

.headerBtnNav
{
	margin: 0 10px 0 0;
	cursor: pointer;
	position: absolute;
	font-size: 30px;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

.headerPageTit
{
	text-align: left;
	word-break: break-all;
	position: absolute;
	font-size: 24px;
	top: 50%;
	left: 60px;
	transform: translateY(-50%);
}

.headerCtrlBtn
{
	display: none;
}

.headerCircle
{
	background: #4D4D4D;
	color: white;
	margin: 0 10px 0 0;
	border-radius: 999rem;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	cursor: pointer;
}

.headerCircle .fa-volume-up
{
	display: none;
}

.headerCircle .fa-volume-mute
{
	display: inline-block;
}

.headerCircle.active .fa-volume-up
{
	display: inline-block;
}

.headerCircle.active .fa-volume-mute
{
	display: none;
}

.headerSwitch
{
	margin: 0 10px 0 0;
}

.headerInf
{
	background: #29666E;
	color: white;
	cursor: pointer;
	position: relative;
	border-radius: 5px 0 0 5px;
	font-size: 16px;
	z-index: 5;
}

.headerInf.active
{
	border-radius: 5px 0 0 0;
}

.headerInfName
{
	padding: 5px 10px;
	border-radius: 5px 0 0 0;
}

.headerInfName i
{
	vertical-align: middle;
	text-align: left;
	width: 20px;
	font-size: 18px;
}

.headerInfMenu
{
	background: #29666E;
	width: 100%;
	text-align: left;
	position: absolute;
	opacity: 0;
	z-index: -2;
	transition: all 0.2s ease-in-out;
	border-radius: 0 0 0 5px;
	display: none;
}

.headerInf.active .headerInfMenu
{
	opacity: 1;
	z-index: 1;
	display: block;
}

.headerInfMenuList
{
	width: 100%;
}

.headerInfMenuList a
{
	color: white;
	border-top: 1px solid #1f5258;
	display: block;
	padding: 5px 0 5px 38px;
	width: calc(100% - 38px);
}

.headerInfMenuList a:last-child
{
	border-radius: 0 0 0 5px;
}

.headerInfMenuList a:hover
{
	background: #245a61;
}

.headerCtrlBtnClose
{
	display: none;
}

.headerCtrlBg
{
	display: none;
}

/*****     Nav     *****/
nav
{
	background: black;
	width: 250px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	transition: all 0.3s ease-in-out;
	overflow-y: scroll;
}

nav::-webkit-scrollbar
{
	display: none;
}

nav.active
{
	left: -250px;
	z-index: -1;
}

.navContainer
{
	width: 100%;
}

.navWebName
{
	width: 100%;
	text-align: center;
	font-size: 20px;
}

.navWebName > div
{
	width: 100%;
	padding: 15px 0;
}

.navWebName a
{
	color: #D8B87A;
}

.navMenu
{
	width: 100%;
}

.navMenuBlock
{
	width: 100%;
	cursor: pointer;
}

.navMenuTopic
{
	position: relative;
	width: calc(100% - 40px);
	padding: 10px 20px;
	font-size: 18px;
}

.navMenuTopic:hover
{
	background: rgba(163,122,61,.4);
}

.navMenuTopic.active
{
	background: rgba(163,122,61,.5);
}

.navMenuTopic i , .navMenuTopicName , .navMenuTopic .AfterArrow
{
	vertical-align: middle;
	display: inline-block;
}

.navMenuTopic .AfterArrow
{
	border-top: 2px solid #FBEBC6;
	border-right: 2px solid #FBEBC6;
}

.navMenuTopic i
{
	color: #FBEBC6;
	font-size: 20px;
}

.navMenuTopicName
{
	color: #FBEBC6;
	width: calc(100% - 55px);
}

.navMenuTopic .AfterArrow
{
	position: absolute;
	top: calc(50% + 1px);
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	right: 20px;
}

.navMenuTopic.active .AfterArrow
{
	transform: translateY(-50%) rotate(135deg);
	-webkit-transform: translateY(-50%) rotate(135deg);
}

.navMenuListBox
{
	/* background: rgba(255,255,255,.3); */
	width: 100%;
	display: none;
}

.navMenuTopic.active +.navMenuListBox
{
	display: block;
}

.navMenuList
{
	font-size: 16px;
	width: calc(100% - 40px);
	padding: 0 0 0 40px;
	text-align: left;
	position: relative;
}

.navMenuList::after
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	content: '';
	width: 7px;
	height: 100%;
	display: block;
}

.navMenuList:hover
{
	background: linear-gradient(to right, rgba(163,122,61,.3) 0%,rgba(0,0,0,.3) 100%);
}

.navMenuList.active
{
	background: linear-gradient(to right, rgba(163,122,61,.3) 0%,rgba(0,0,0,.3) 100%);
}

.navMenuList.active::after
{
	background: linear-gradient(to bottom, #f8e8b4 0%,#b47a1d 100%);
}

.navMenuListName
{
	color: #FBEBC6;
	display: block;
	width: calc(100% - 40px);
	padding: 10px 20px;
}

/*****     聊天室     *****/
.chatUserBox , .chatMsgBox , .chatCanBox
{
	float: left;
}

.chatTopic
{
	width: 100%;
	font-weight: 600;
	margin: 0 0 10px 0;
}

.chatUserBox
{
	width: 220px;
	overflow-y: scroll;
}

.chatUserBox::-webkit-scrollbar ,
.chatMsgInner::-webkit-scrollbar ,
.chatCanBox::-webkit-scrollbar ,
.chatRoomInner2::-webkit-scrollbar
{
	width: 5px;
	background-color: transparent;
}

.chatUserBox::-webkit-scrollbar-thumb ,
.chatMsgInner::-webkit-scrollbar-thumb ,
.chatCanBox::-webkit-scrollbar-thumb ,
.chatRoomInner2::-webkit-scrollbar-thumb
{
	background: #4d4d4d;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);	
}

.chatUserScroll
{
	width: 100%;
	height: calc(100vh - 162px);
}

.chatUser
{
	width: calc(100% - 10px);
	padding: 5px;
	cursor: pointer;
}

.chatUser:not(:last-child)
{
	margin: 0 0 10px 0;
}

.chatUser:hover
{
	opacity: 0.9;
}

.chatUser.active
{
	color: white;
	background: rgba(0,0,0,0.5);
}

.chatMsgBox
{
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
	width: calc(100% - 480px);
	margin: 0 20px;
	border-radius: 10px;
	display: none;
}

.chatMsgBox.active
{
	display: block;
}

.chatMsgUptBox
{
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
	width: 100%;
	border-radius: 10px;
}

.chatMsgContainer
{
	width: 100%;
	border-radius: 10px 10px 0 0;
	padding: 0 0 10px 0;
}

.chatMsgTop
{
	background: #292929;
	width: 100%;
	text-align: center;
	border-radius: 10px 10px 0 0;
}

.chatMsgInner
{
	width: 100%;
	overflow-y: scroll;
	margin: 10px 0 0 0;
}

.chatMsgScroll
{
	width: 100%;
	height: calc(100vh - 278px);
}

.chatMsgUser
{
	color: white;
	width: 100%;
	padding: 10px 0;
}

.serviceList
{
	width: 80%;
}

.serviceList:not(:last-child)
{
	margin-bottom: 15px;
}

.serviceList.AdmMsg
{
	margin-left: 20%;
}

.serviceListInf
{
	width: 100%;
}

.serviceList.UserMsg .serviceListInf
{
	padding: 0 0 0 12px;
}

.serviceList.AdmMsg .serviceListInf
{
	padding: 0 12px 0 0;
}

.serviceListName
{
	font-size: 12px;
	margin: 0 0 5px 0;
}

.serviceListNameTxt
{
	color: #081836;
}

.serviceList.AdmMsg .serviceListNameTxt
{
	text-align: right;
}

.serviceListBot
{
	width: 100%;
}

.serviceList.UserMsg .serviceListBot
{
	text-align: left;
}

.serviceList.AdmMsg .serviceListBot
{
	text-align: right;
}

.serviceListMsgBox , .serviceListTime
{
	display: inline-block;
	vertical-align: bottom;
}

.serviceListMsgBox
{
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
	max-width: calc(100% - 80px);
	padding: 4px 8px;
	border-radius: 5px;
	position: relative;
	min-height: 16px;
}

.serviceList.UserMsg .serviceListMsgBox
{
	background: #E8E8E8;
	margin: 0 5px 0 0;
}

.serviceList.AdmMsg .serviceListMsgBox
{
	background: #4A6EA4;
	margin: 0 0 0 5px;
}

.serviceListMsgBox::after
{
	width: 0;
	height: 0;
	content: '';
	position: absolute;	
	border-style: solid;
	z-index: 2;
	top: 7px;
}

.serviceList.UserMsg .serviceListMsgBox::after
{
	border-color: transparent #E8E8E8 transparent transparent;
	border-width: 5px 8px 5px 0;	
	left: -6px;
}

.serviceList.AdmMsg .serviceListMsgBox::after
{
	border-color: transparent transparent transparent #4A6EA4;
	border-width: 5px 0 5px 8px;
	right: -6px;
}

.serviceListMsg
{
	font-size: 15px;
	word-break: break-all;
}

.serviceList.service .serviceListMsg
{
	color: #333333;
}

.serviceList.AdmMsg .serviceListMsg
{
	color: white;
}

.serviceListTime
{
	width: 120px;
	height: 16px;
	position: relative;
}

.serviceListTimeTxt
{
	color: #bbbbbb;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	font-size: 12px;
}

.chatMsgSend
{
	background: #d6d6d6;
	border-radius: 0 0 10px 10px;
	padding: 10px;
	width: calc(100% - 20px);
}

.chatMsgSendMsg
{
	padding: 0 10px 0 0;
}

.chatMsgSend .Textarea , .chatMsgSend .Textarea textarea
{
	width: 100%;
}

.chatMsgSend .BtnAny
{
	width: 60px;	
}

.chatCanBox
{
	width: 220px;
	position: relative;
	overflow-y: scroll;
}

.chatCanScroll
{
	width: 100%;
	height: calc(100vh - 162px);
}

.chatCanBlock
{
	background: rgba(0,0,0,0.1);
	width: 100%;
	cursor: pointer;
}

.chatCanBlock:not(:last-child)
{
	margin: 0 0 10px 0;
}

.chatCanSort
{
	width: calc(100% - 10px);
	padding: 5px;
}

.chatCanSort:hover
{
	background: rgba(0,0,0,0.2);
}

.chatCanListBox
{
	width: 100%;
	display: none;
}

.chatCanSort.active +.chatCanListBox
{
	display: block;
}

.chatCanList
{
	background: rgba(0,0,0,0.2);
	color: white;
	font-size: 15px;
	width: calc(100% - 10px);
	padding: 5px;
}

.chatCanList:not(:last-child)
{
	border-bottom: rgba(0,0,0,0.3);
}

.chatCanList:hover
{
	background: rgba(0,0,0,0.4);
}

.chatCanListBox
{
	width: 100%;
}

.chatCanBox::after
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	clear: both;
}

/*****     會員層級     *****/
.familyBox
{
	width: 100%;
	border-spacing: 20px;
	/* animation: familyDisplay 0.5s ease-in-out; */
}

@keyframes familyDisplay
{
	from
	{
		transform: scale(0);
	}

	to
	{
		transform: scale(1);
	}
}

.familyTable:not(:last-child)
{
	margin: 0 0 -20px 0;
}

.familOneBox
{
	width: 100%;
	margin: 0 0 10px 0;
}

.familOne
{
	display: block;
	width: 200px;
	position: relative;
}

.familOne:not(:last-child)
{
	margin: 0 0 30px 0;
}

.familyTable
{
	position: relative;
}

.familOne:not(:first-child)::after , .familyTable::after
{
	border-left: 1px solid #808080;
	border-bottom: 1px solid #808080;
	position: absolute;
	content: '';
	display: block;
	left: -28px;
	border-radius: 0 0 0 5px;
	width: 55px;
	height: 55px;
}

.familOne:not(:first-child)::after 
{
	left: -55px;
	top: -30px;
}

.familyTable::after
{
	left: -35px;
	top: -10px;
}

.familBlock
{
	color: black;
	border: 1px solid #808080;
	border-radius: 5px;
	padding: 5px;	
	vertical-align: top !important;
	cursor: pointer;		
	font-size: 14px;
	transition: all 0.1s ease-in-out;
}

.familBlockInner
{
	width: calc(100% - 10px);	
}

.familBlock:hover
{
	background: rgba(0,0,0,0.1);
}

.familBlockLine
{
	width: 100%;
}

.familBlockLine:not(:last-child)
{
	margin: 0 0 5px 0;
}

.familBlockLineTit , .familBlockLineTxt
{
	display: inline-block;
	word-break: break-all;
}

/*****     下注按鈕     *****/
.BetBtnBox
{
	text-align: center;
	width: 100%;
}

.BetBtnTable
{
	background: unset !important;
	table-layout: unset !important;
	width: 100%;	
	border-collapse: separate;
	border-spacing: 10px;
	margin: -5px 0;
}

.BetBtnTd
{
	background: #656565;
	border: 1px solid #656565;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,.16);
	box-sizing: border-box;	
	border-radius: 15px;
	padding: 0 !important;
	min-width: unset !important;
	cursor: pointer;
}

.BetBtnBox .InformationTableBox .BetBtnTd.empty
{
	border: unset;
	background: unset;
	box-shadow: unset;
}

.BetBtnTd.active
{
	background: lightskyblue;
	border: 1px solid lightskyblue;
}

.BetBtn
{
	width: 100%;
}

.BetBtnNum
{
	width: 100%;
	box-sizing: border-box;
	padding: 5px 10px;
}

.BetBtnBox .InformationTableBox .BetBtnNumImgTable
{
	background: unset !important;
	max-width: 100%;
	margin: 0 auto;
	width: unset;
}

.BetBtnNumImgTable tbody:nth-child(2n-1) tr
{
	background: unset !important;
}

.BetBtnBox .InformationTableBox .BetBtnNumImg
{
	width: 32px !important;
	min-width: unset !important;
	border: unset !important;
	padding: 2px 3px;
}

.BetBtnNumImg img
{
	width: 100% !important;
}

.BetBtnNumTxt
{
	color: white;
	font-size: 18px;
	font-weight: 600;
	width: 100%;
	padding: 4px 0;
}

.BetBtnTd.active .BetBtnNumTxt
{
	color: #333333;
}

.BetBtnOdds
{
	width: 100%;
	border-radius: 0 0 15px 15px;
}

.BetBtnOddsTxt
{
	color: white;
	font-size: 16px;
	width: 100%;
	padding: 2px 0;
}

.BetBtnTd.active .BetBtnOddsTxt
{
	color: #333333;
}

/***************     百家     ***************/
/*****     共用零件     *****/
.GameTxtBox
{
	width: 28px;
	height: 28px;
	border-radius: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	box-sizing: border-box;
}

.GameTxt
{
	color: white;
	font-size: 22px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	box-sizing: border-box;
}

.GameBigCircle
{
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin: 0 auto;
	box-sizing: border-box;
}

.GameBigCircle.Blue
{
	border: 3px solid #0054BE;
}

.GameBigCircle.Red
{
	border: 3px solid #CA0328;
}

.GameSmallCircle
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: 0 auto;
	box-sizing: border-box;
}

.GameSmallCircle.Blue
{
	border: 2px solid #0054BE;
}

.GameSmallCircle.Red
{
	border: 2px solid #CA0328;
}

.GameDot
{
	border-color: white;
	border-style: solid;
	border-width: 2px;
	border-radius: 50%;
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
}

.GameDot.Blue
{
	background: #0054BE;
	bottom: 0;
	right: 0;
}

.GameDot.Red
{
	background: #CA0328;
	top: 0px;
	left: 0;
}

.LftTop
{
	top: 0;
	left: 0;
}

.LftBot
{
	bottom: 0;
	left: 0;
}

.RgtTop
{
	top: 0;
	right: 0;
}

.RgtBot
{
	bottom: 0;
	right: 0;
}

.GameHo
{
	background: unset !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%,-50%);
	box-sizing: border-box;
}

.GameHo.green , .GameHo.BgGreen
{
	background-image: url('../../../images/hGreen.png') !important;
}

.GameHo.red , .GameHo.BgRed
{
	background-image: url('../../../images/hRed.png') !important;
}

.GameHo.blue , .GameHo.BgBlue
{
	background-image: url('../../../images/hBlue.png') !important;
}

/*****     遊戲控制     *****/
.ContentContainer.end_games_ctrl_1
{
	min-height: calc(100vh - 80px);
	padding: 10px 30px;
}

.end_games_ctrl_1 .BtnAny, .end_games_ctrl_1 .BtnAny2
{
	padding: 5px;
}

.endgamectrlInfoBox
{
	display: inline-block;
	vertical-align: middle;
	font-size: 22px;
}

.endgamectrlInfoBox .special
{
	font-size: 26px;
}

.end_games_ctrl_1 .InformationTableBox th, .end_games_ctrl_1 .InformationTableBox td
{
	padding: 5px;
}

/*     控制項目     */
.endgameCtrlBox
{
	border: 3px solid #CCCCCC;
	background: #ECECEC;
	border-bottom: unset;
	border-right: unset;
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
}

.endgameCtrlBlock
{
	border-bottom: 3px solid #CCCCCC;
	border-right: 3px solid #CCCCCC;
	background: linear-gradient(to bottom, #27a6e0 0%,#0156bf 100%);
	padding: 80px 10px;
	box-sizing: border-box;
	font-size: 16px;
	cursor: pointer;
}

/* .endgameCtrlBlock:not(:last-child)
{
	border-right: 1px solid #CCCCCC;
} */

.endgameCtrlBlock.red
{
	background: linear-gradient(to bottom, #fd3c44 0%,#cb0428 100%);
}

.endgameCtrlBlock.green
{
	background: linear-gradient(to bottom, #00812B 0%,#006120 100%) !important;
}

.endgameCtrlBtn
{
	/* width: 10vw; */
	border-radius: 5px;	
	margin: 0 auto;	
}

.endgameCtrlBlock.spe .endgameCtrlBtn
{
	margin: 0 auto 5px auto;
}

.endgameCtrlBtnTxt
{
	color: white;
}

.endgameCtrlBtnTxt2
{
	color: rgba(255,255,255,.7);
}

.endgamesJumpIpt
{
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 5px 0;
}

.endgamesJumpIpt input
{
	font-size: 16px;
	text-align: center;
}

/*     選牌     */
.endgamesctrlPlayerPickTopic
{
	margin: 0 0 10px 0;
}

.endgamesctrlPlayerPickBox
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 300px;
	margin: 0 auto;
}

.endgamesctrlPlayerPick
{
	border: 5px solid transparent;
	width: auto;
	max-width: calc((100% - 15px)/2);
	box-sizing: border-box;
	padding: 6px;
	border-radius: 10px;
}

.endgamesctrlPlayerPick:first-child
{
	margin: 0 15px 10px 0;
}

.endgamesctrlPlayerPick:nth-child(2)
{
	margin: 0 0 10px 0;
}

.endgamesctrlPlayerPick:nth-child(3)
{
	margin: 0;
}

.endgamesctrlPlayerPick.active
{
	border: 5px solid #CA0328;	
}

.endgamesctrlPlayerPick:last-child
{
	transform: rotate(90deg);
}

/*     A區塊     */
.endgamesctrlAsBox
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 10px 0;
}

.endgamesctrlAs
{
	border: 5px solid transparent;
	width: 120px;
	max-width: calc((100% - 30px)/3);
	margin: 0 15px 15px 15px;
	box-sizing: border-box;
	padding: 6px;
	border-radius: 10px;
	cursor: pointer;
}

/* .endgamesctrlAs:not(:nth-child(4n))
{
	margin: 0 15px 15px 15px;
} */

.endgamesctrlAs.active
{
	border: 5px solid #CA0328;
}

/*     花色子牌     */
.endgamesctrlFlowerBox
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.endgamesctrlFlower
{
	width: 120px;
	max-width: calc((100% - 30px)/3);
	margin: 0 15px 15px 15px;
}

/* .endgamesctrlFlower:not(:nth-child(4n))
{
	margin: 0 15px 15px 15px;
} */

.endgamesctrlBtnBox
{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.endgamesctrlBtn:not(:last-child)
{
	border-right: 1px solid #d6d6d6;
}

/*****     聊天顯示     *****/
.chatRoomBox2
{
	width: 100%;
}

.chatRoomInner2
{
	overflow-y: scroll;
	max-height: calc(100vh - 165px);
}

.chatRoomList2
{
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px;
	word-break: break-all;
}

.chatRoomList2:not(:last-child)
{
	margin: 0 0 10px 0;
}

.chatRoomListTxt2
{
	font-size: 36px;
}

.chatroomContTxt
{
	font-size: 36px;
}

.chatroomContImg
{
	width: 36px;
	display: inline-block;
}

/*****     牌路     *****/
.endgamewatchBox
{
	width: 100%;
}

.endgamewatchBox .endgamesctrlPlayerPickBox
{
	max-width: 11vw;
}

.endgamewatchBox .endgamesctrlPlayerPick
{
	/* border: unset; */
	padding: 0;
}

.endgamewatchBox .endgamesctrlPlayerPick:first-child
{
	margin: 0 15px 0 0;
}

.endgamewatchBox .endgamesctrlPlayerPick:nth-child(2)
{
	margin: 0 0 0 0;
}

.endgamewatchBox .endgamesctrlPlayerPick
{
	width: calc((100% - 15px)/2);
}

.endgamewatchInner
{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	box-sizing: border-box;
	text-align: center;
}

/*      文字狀態      */
.StatusBox
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 621px;
	height: 201px;
	text-align: center;
}

.StatusMsg
{
	color: #FBEBC6;
	width: 100%;
	font-size: 40px;
	font-weight: bold;
	position: absolute;
	top: calc(50% - 30px);
	left: 50%;
	transform: translate(-50%, -50%);
}

/*    最後一局      */
.LastBox
{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
}

.LastTxt
{
	color: #292929;
	/* color: #333333; */
	font-size: 30px;
	font-weight: bold;
	padding: 20px 0;
}

/*     各路 共同     */
.RoadBox
{
	
}

.RoadRow
{
	background: white;
	border: 1px solid #8d8c8c;
	border-bottom: unset;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
}

.RoadRow:last-child
{
	border-bottom: 1px solid #8d8c8c;
}

.RoadItem
{
	position: relative;
	box-sizing: border-box;
}

.RoadItem:not(:last-child)
{
	border-right: 1px solid #8d8c8c;
}

/*     其他路     */
.RoadBox.big .RoadRow , .RoadBox.bigEye .RoadRow
{
	border-bottom: unset;
}

/*     小路 & 蟑螂路     */
.RoadFourBox
{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}

.RoadFourBlock
{
	width: calc((100% - 2px)/2);
	position: relative;
	box-sizing: border-box;
}

.RoadFourBlock:first-child
{
	margin: 0 2px 2px 0;
}

.RoadFourBlock:nth-child(3)
{
	margin: 0 2px 0 0;
}

.RoadFourBlock:nth-child(2)
{
	margin: 0 0 2px 0;
}

/*     問路區塊     */
.gameAskBox
{
	width: 240px;
	box-sizing: border-box;
}

.gameAskBlock
{
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px;
}

.gameAskBlock.blue
{
	background: linear-gradient(to bottom, #27a6e0 0%,#0156bf 100%); 
}

.gameAskBlock.red
{
	background: linear-gradient(to bottom, #fd3c44 0%,#cb0428 100%);
}

.gameAskTit
{
	color: white;
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 8px 0;
	box-sizing: border-box;
}

.gameAskIconBox
{
	background: #03203c;
	border-radius: 999rem;
	box-sizing: border-box;
	width: 100%;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gameAskIconBlock
{
	width: calc(100%/3);
	box-sizing: border-box;
	position: relative;
}

.gameAskIconBox .GameBigCircle ,
.gameAskIconBox .GameSmallCircle ,
.gameAskIconBox .GameHo
{
	width: 15px;
	height: 15px;
	margin: 0 auto;
}

.gameAskIconBox .GameHo
{
	position: unset;
	top: unset;
	left: unset;
	z-index: 1;
	transform: unset;
}

/*     大小路區塊     */
.gameRoadBox
{
	width: calc(100% - 240px);
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.gameRoadBlock.first .RoadRow ,
.gameRoadBlock.third .RoadRow
{
	border-right: unset;
}

/*     倒數     */
.gameTimeBox
{
	/* position: absolute;
	top: 30px;
	left: 30px;
	z-index: 5; */
	margin: 0 0 40px 0;
}

.gameTimeBox.active
{
	/* left: 360px; */
}

.gameTimeBlock , .gameTime
{
	width: 100px;
	height: 100px;
}

.gameTimeBlock
{
	padding: 10px;
	opacity: 0.3;
}

.gameTimeBlock
{
	background: rgba(0, 0, 0, 6.4);
	border-radius: 50%;
	position: relative;
	margin: 0 auto 20px 0;
}

.gameTime
{
	border: 8px solid #29ABE2;
	/* background: rgba(0, 0, 0, .8); */
	border-radius: 50%;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.gameTimeTxt
{
	color: white;
	font-size: 45px;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 15;
}

.gameTotalBet
{
	text-align: left;
}

.gameTotalBetTxt
{
	background: black;
	border: 1px solid white;
	border-radius: 30px;
	padding: 10px 20px;
	display: inline-block;
}

.gameTotalBetTxt span
{
	color: white;
	font-size: 20px;
	font-weight: bold;
}

/*****     及時投注     *****/
.endgameswatch0Search
{
	position: relative;
}

.endgameswatch0Box
{
	width: 100%;
	position: relative;
}

.endgameswatch0Box .gameTimeBlock , .endgameswatch0Box .gameTime
{
	width: 80px;
	height: 80px;
}

.endgameswatch0Box .gameTimeBlock
{
	margin: 0;
}

.endgameswatch0Box .gameTimeBox
{
	margin: 0 0 15px 0;
}

.endgameswatch0Box .gameTotalBet
{
	position: absolute;
	top: 0;
	left: 150px;
	z-index: 5;
}

.endgameswatch0Box .gameTotalBetTxt
{
	border-radius: 30px;
	padding: 5px 10px;
}

.endgameswatch0Box .gameTotalBetTxt span
{
	font-size: 16px;
}

.endgameswatch0Search .LastBox
{
	position: absolute;
	top: 50%;
	right: 0;
	left: unset;
	transform: translateY(-50%);
	z-index: 99;
}

.endgameswatch0Search .LastTxt
{
	padding: 0;
}

.endgameswatch0Box .StatusBox
{
	width: auto;
	height: unset;
	top: unset;
	left: 150px;
	bottom: 0;
	transform: unset;
}

.endgameswatch0Box .StatusMsg
{
	color: #292929;
	top: 0;
	position: unset;
	transform: unset;
	left: unset;
	font-size: 30px;
}

/*****     視訊     *****/
.endgamesstreambox
{
	width: 100%;
	position: relative;
	min-height: calc(100vh - 198px);
	box-sizing: border-box;
}

.endgamesstreambox .LastTxt
{
	color: white;
}

.endgamesstreambox .gameTimeBox
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 15;
	margin: unset;
}

.endgamesstreambox .gameTimeBlock , .endgamesstreambox .gameTime
{
	width: 15vh;
	height: 15vh;
}

.endgamesstreambox .gameTimeBlock
{
	padding: 5vh;
}
/* 
.endgamesstreambox .gameTimeBlock
{
	background: rgba(0, 0, 0, .8);
	border-radius: 50%;
	position: relative;
	margin: 0 auto 20px 0;
} */

.endgamesstreambox .gameTime
{
	border: 2vh solid #29ABE2;
}

.endgamesstreambox .gameTimeTxt
{
	font-size: 100px;
}

.gameVideoBox
{
	aspect-ratio: 16 / 9;
	width: 100%;
	margin:auto;
	position: relative;
	transform: rotateY(180deg);
	/* height: 100%; */
}

.end_chatroom_0
{
	background-color: #030303;
}

.SwitchWin {
	font-size:xx-large;
}
.SwitchTie {
	font-size:xx-large;
}
.SwitchLose{
	font-size:xx-large;
}

.SwitchWin.active {
	border: solid;
	border-color: blue;
	border-width:6px;
}
.SwitchTie.active {
	border: solid;
	border-color: green;
	border-width:6px;
}
.SwitchLose.active{
	border: solid;
	border-color: red;
	border-width:6px;
}