@charset "utf-8";
/* CSS Document */

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tfoot, thead, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;

border: 0;
font-size: 100%;
font-family: Arial,微軟正黑體,Microsoft JhengHei,新細明體,sans-serif;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html{height:100%;}
body{line-height:1; height:100%; background-color:#eee;}
ol, ul{list-style:inherit;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content: none;}
table{border-collapse:collapse; border-spacing:0;}
sup{vertical-align:super;}

p, ul li{font-size:16px; line-height:1.7em;}

img{max-width:100%; max-height:100%;}

.item-link{
    width:100%;
    height:100%;
    font-size:0px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:30;
	}

.list-setting{padding-left:0; list-style:none;}
.list-setting>li{position:relative;}

.btn a{color:#fff!important;}
.btn:hover a{color:#fff!important;}

input{outline:none!important;}
button:focus{outline:none!important;}

table{
    border:0;
    width:100%;
    margin:15px 0 25px;
    padding:0;
    border-collapse:collapse;
    border-spacing:0;
	}

table tr{padding:5px;}

table th, table td{
	font-size:14px;
	color:#606266;
	text-align:left;
	vertical-align:middle;
	line-height:1.3em;
	padding:10px;
	}

table th{font-size:16px; letter-spacing:1px;}

table tbody tr:nth-child(odd){background-color:rgba(203,220,235,0.35);}

.tableProgressbar{min-width:200px;}

.dashTable .progress{height:2rem;}

.divide-row{
	padding-top:5px;
	margin-top:5px;
	border-top:1px dashed rgba(204,204,204,0.75);
	}

.formBox{margin-bottom:10px;}

.formBox>label{
	font-size:16px;
	font-weight:bold;
	color:#333;
	line-height:1em;
	letter-spacing:2px;
	padding:5px 10px 7px;
	position:relative;
	}

.formBox .formBoxContent{position:relative;}

.formBoxContent>input, .formBoxContent>select, .formBoxContent>textarea{padding:6px 10px;}

.formBoxContent>textarea{min-height:120px;}

.mainHeaderContainer{max-width:1280px;}

.main-header{
	width:100%;
	padding:20px 0;
	background-image:linear-gradient(to bottom, #c3110c, #740a03);
	position:fixed;
	top:0;
	left:0;
	z-index:8888;
	}

.main-header .main-header-row{display:flex; justify-content:space-between;}

.mobile-nav-open .main-header-row{justify-content:center;}

.mainTitle h1{
	font-size:20px;
	font-weight:bold;
	color:#fff;
	letter-spacing:2px;
	}

.mobile-nav-open .mainTitle h1{
	font-size:24px;
	padding-top:30px;
	}

.mobileMenuList{
	display:flex;
	flex-direction:column;
    align-items:center;
	}

.lanList{display:flex;}

.lanList li{padding-right:10px; margin-right:10px;}
.lanList li:last-child{padding-right:0; margin-right:0;}

.lanList li::after{
	content:"";
	width:1px;
	height:100%;
	background-color:rgba(255,255,255,0.5);
	position:absolute;
	top:0;
	right:0;
	}

.lanList li:last-child::after{width:0; height:0;}

.lanList li span{
	font-size:18px;
	color:#fff;
	line-height:1em;
	}

/*選單展開按鈕_start*/
.navTrigger{
	display:none;
	cursor:pointer;
	width:40px; 
	height:25px;
	margin:auto;
	position:fixed;
	right:25px;
	top:20px;
	z-index:99999;
	}

.navTrigger>i{
    background-color:#fff;
    border-radius:2px;
    content:'';
    display:block;
    width:100%;
	height:2px;
	}

.navTrigger>i:nth-child(1){
    -webkit-animation:outT 0.8s backwards;
    animation:outT 0.8s backwards;
    -webkit-animation-direction:reverse;
    animation-direction:reverse;
	}
.navTrigger>i:nth-child(2){
    margin: 7px 0;
    -webkit-animation:outM 0.8s backwards;
    animation:outM 0.8s backwards;
    -webkit-animation-direction:reverse;
    animation-direction:reverse;
	}
.navTrigger>i:nth-child(3){
    -webkit-animation:outBtm 0.8s backwards;
    animation:outBtm 0.8s backwards;
    -webkit-animation-direction:reverse;
    animation-direction:reverse;
	}

.navTrigger.active>i:nth-child(1){
	-webkit-animation:inT 0.8s forwards;
	animation:inT 0.8s forwards;
    }
.navTrigger.active>i:nth-child(2){
	-webkit-animation:inM 0.8s forwards;
	animation:inM 0.8s forwards;
	}
.navTrigger.active>i:nth-child(3){
	-webkit-animation:inBtm 0.8s forwards;
	animation:inBtm 0.8s forwards;
	}

@-webkit-keyframes inM{
50%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(45deg);}
}
@keyframes inM{
50%{transform:rotate(0deg);}
100%{transform:rotate(45deg);}
}

@-webkit-keyframes outM{
50%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(45deg);}
}
@keyframes outM{
50%{transform:rotate(0deg);}
100%{transform:rotate(45deg);}
}

@-webkit-keyframes inT{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(9px) rotate(0deg);}
100%{-webkit-transform: translateY(9px) rotate(135deg);}
}
@keyframes inT{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(9px) rotate(0deg);}
100%{transform: translateY(9px) rotate(135deg);}
}

@-webkit-keyframes outT{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(9px) rotate(0deg);}
100%{-webkit-transform: translateY(9px) rotate(135deg);}
}
@keyframes outT{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(9px) rotate(0deg);}
100%{transform: translateY(9px) rotate(135deg);}
}

@-webkit-keyframes inBtm{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(-9px) rotate(0deg);}
100%{-webkit-transform: translateY(-9px) rotate(135deg);}
}
@keyframes inBtm{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(-9px) rotate(0deg);}
100%{transform: translateY(-9px) rotate(135deg);}
}

@-webkit-keyframes outBtm{
0%{-webkit-transform: translateY(0px) rotate(0deg);}
50%{-webkit-transform: translateY(-9px) rotate(0deg);}
100%{-webkit-transform: translateY(-9px) rotate(135deg);}
}
@keyframes outBtm{
0%{transform: translateY(0px) rotate(0deg);}
50%{transform: translateY(-9px) rotate(0deg);}
100%{transform: translateY(-9px) rotate(135deg);}
}
/*選單展開按鈕_end*/

/*小螢幕尺寸選單_start*/
#mobile{display:none;}

.mobileMenuBlock{width:90%; height:100vh; margin:0 auto;}

.mobileMenuList li{width:100%; margin-bottom:20px;}

.mobileMenuList li .box__inner{
	padding:15px 20px;
	text-align:center;
	border-radius:15px;
	background-color:#fff;
	}

.mobileMenuList li span{
	font-size:20px;
	letter-spacing:2px;
	line-height:1em;
	}

.mobileLanList{display:flex; justify-content:center;}

.mobileLanList li{margin-right:15px;}
.mobileLanList li:last-child{margin-right:0;}

.mobileLanList li .box__inner{
	padding:3px 25px;
	border:1px solid #fff;
	border-radius:999em;
	}

.mobileLanList li span{
	font-size:14px;
	color:#fff;
	line-height:1em;
	}

/*小螢幕尺寸選單_end*/

.mainContentSection{padding:30px 0 60px; margin-top:65px;}

.contentContainer{width:90%; max-width:1480px;}

.contentContainer .row{align-items:flex-start;}

.main-sidebar{flex-basis:250px; margin-right:20px;}
.content-wrapper{flex:1;}

.addFlieBox{position:relative;}

.addBtn{
	padding:10px 20px;
	border-radius:999em;
	background-color:#fff;
	box-shadow:0px 5px 5px rgb(0 0 0 / 10%);
	}

.addBtn i{margin-right:10px;}

.addFileList{
    -webkit-transform-origin:top;
    -ms-transform-origin:top;
    transform-origin:top;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition:all 0.4s ease;
    pointer-events:none;
    -webkit-transform:rotateX(90deg);
    box-shadow:0px 5px 5px rgb(0 0 0 / 25%);
    transform:rotateX(90deg);
    position:absolute;
    top:-5px;
    left:-5px;
    z-index:100;
    opacity:0;
	}

.addFlieBox-open .addFileList{
	pointer-events:auto;
    -webkit-transform:rotateX(0deg);
    transform:rotateX(0deg);
    opacity:1;
    }

.addFileList li{border-bottom:1px solid rgba(204,204,204,0.5);}

.addFileList li:hover button{
	background-color:#ddd;
	}

.addFileBtn{
	width:100%;
	padding:10px 15px;
	text-align:left;
	border-radius:0;
	background-color:#fff;
	}

.sidebarListBlock{
	padding:15px 10px;
	border-radius:15px;
	background-color:#fff;
	box-shadow:0px 5px 5px rgb(0 0 0 / 20%);
	}

.sidebarList>li{
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:1px dashed #ccc;
	}

.sidebarList>li:last-child{
	padding-bottom:0;
	margin-bottom:0;
	border-bottom:none;
	}

.sidebarList li>a{
	padding:10px;
	display:flex;
	align-items:center;
	}

.iconBox{
	width:20px;
	margin-right:7px;
	display:flex;
	justify-content:center;
	align-items:center;
	}

.iconBox i{color:#999;}

.sidebarList li span{
	font-size:18px;
	color:#333;
	line-height:1em;
	padding-top:2px;
	}

.has-drop::after{
	content:"\f104";
	font-size:18px;
	font-family:'Font Awesome 6 Free';
	font-weight:900;
	color:#b8c7ce;
	transition:all 0.5s ease;
	position:absolute;
	top:5px;
	right:15px;
	}

.active::after{transform:rotate(-90deg);}

.sidebarSubList{
	padding:10px 10px 0;
	transition:all 0.5s ease;
	display:none;
	}

.has-drop.active .sidebarSubList{display:block;}

.sidebarList>li:hover>a{background-color:#ddd;}

.sidebarSubList>li:hover span{color:#740a03;}

.content-wrapper{
	min-height:500px;
	padding:20px 0 30px;
	}

.arcDecorateBlock{
	border-radius:15px;
	background-color:#fff;
	box-shadow:0px 5px 5px rgb(0 0 0 / 20%);
	}

.in__BlockTitle h3{font-size:24px; font-weight:bold;}

.in__BlockTable thead{border-bottom:1px solid #ddd;}

.tableName{min-width:300px;}

.tableName span{font-size:15px; font-weight:bold;}

.readInfo-s, .tableRemark-s{margin-top:5px; display:none;}

.readInfo-s{font-size:13px;}

.tableRemark-s .remarkBox{
	width:35px;
	height:35px;
	margin-right:15px;
	border:1px solid #ccc;
	background-color:#ddd;
	}

.remarkBox{
	width:25px;
	height:25px;
	border-radius:999em;
	transition:all 0.4s ease;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	position:relative;
	}

.remarkBox i{font-size:12px;}

.remarkBox:hover{background-color:#ccc;}

.accountBlock{flex-basis:350px;}
.historyBlock{flex:1;}

.accountBlock, .historyBlock{padding:20px 0 30px;}

.accountBlock{margin-right:30px;}

.profileImgBox{
    width:100px;
    height:100px;
    margin:0 auto;
    border:5px solid #fff;
    border-radius:999em;
    box-shadow:0 0 5px 5px rgba(0, 0, 0, 0.15);
    overflow:hidden;
	}

.profileInfoBlock{padding:0 20px;}

.profileInfoBlock label{font-size:16px; font-weight:bold;}

.profileBtnBlock{display:flex; justify-content:center;}

.fixedTable{min-width:960px;}

@media screen and (max-width:1200px){
	.uploadInfo{display:none;}
	.accountBlock{flex-basis:100%;}
	.historyBlock{flex:100%; margin-top:30px;}
	}

@media screen and (max-width:980px){
	.readInfo{display:none;}
	.tableRemark{display:none;}
	.readInfo-s{display:block;}
	.tableRemark-s{display:flex;}
	}

@media screen and (max-width:768px){
	.lanListBox{display:none;}
	.main-sidebar{display:none;}
	.navTrigger{display:block;}
	.content-wrapper{border-left:none;}
	}