@charset "utf-8";
body { margin: 0; padding: 0;}

/**************************************************
= header 上方登入選單
********************/
header{ position: absolute !important;  top: 0; right: 0px; z-index: 1; vertical-align: middle; text-align: right; font-size: .8rem;}
header>a,header>div { display: inline-block; padding: 5px 12px; cursor: pointer; color:#4670bb; -moz-transition:all 200ms ease-in; -webkit-transition:all 200ms ease-in; -o-transition:all 200ms ease-in; transition:all 200ms ease-in;line-height: 1.3em; vertical-align: -webkit-baseline-middle;}
header .dropbtn { background-color: rgba(0,0,0,0); color: inherit; border: none; cursor: pointer;}
header button{ font-family: inherit;}
header .dropdown { position: relative; display: inline-block;}
header .dropdown i{ padding:0 0 0 7px;}
header .dropdown svg { width: 1.2em; height: 1.2em; vertical-align: middle; margin-left: 5px;}
header .dropdown-content { display: none; position: absolute; margin-left: -12px; min-width: 90px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;margin-top: 5px;background: rgba(255,255,255,0.7);}
header .dropdown-content a { color: inherit; text-align:center; padding: 5px; text-decoration: none; display: block;}
header .dropdown-content a:hover {background-color: rgb(198, 213, 236);}
header .dropdown:hover .dropdown-content { display: block;}
header .dropdown.active .dropdown-content { display: block !important;}
header .fontsize{ display: inline-block; cursor: default;}
header .fontsize button{ margin:0 3px; width:24px;height:23px; letter-spacing: 0em; border-radius: 2px; font-weight: 600; cursor: pointer;line-height: 1.2em;}
@media (max-width :767px){
header {position: relative !important; right: 0;}
header .fontsize{display:none;}
}

/**************************************************
= theme 上方主圖
********************/
.theme{height:180px;width: 100%; background: url(../img/headerbg.jpg);background-position: center top;}
.logo {height: 180px; display: -webkit-box !important;  display: -ms-flexbox !important;  display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;  font-size: 2rem; color: inherit; padding-left: 8%;}
.logo img{max-width: 420px;max-height: 120px;}

@media (max-width :768px){
.theme{height:180px;width: 100%; /*background: url(../img/headerbg2.jpg);*/background-position: right;}
.logo { padding-left:50px; background: rgba(255,255,255,0.6);}
}
@media (max-width :520px){
.theme{ height: 180px;}
.logo { padding:0 20px;}
.logo img { max-width: 100%; max-height: 90px;}
}

/**************************************************
= navbar 橫式選單
********************/
/*.navbar li a { height: 45px; }*/
.navbar ul{ max-width: 1600px;}
.navbar li ul li a{ line-height: 2.2em; display:block;}
.navbar ul li ul{ display: block; visibility:hidden; opacity:0; width: 0; text-align: center; background: #ffffff; }
.navbar ul li:hover ul, 
.navbar ul li a.active+.navrwd+.menuhidden, 
.navbar ul li a.active:hover+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:focus+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:active+.navrwd+.menuhidden{ display: table; max-width:200px; visibility: visible; opacity:1; }
.navbar ul li ul.noItem,
.navbar ul li a.active+.navrwd+.menuhidden.noItem,
.navbar ul li a.active:hover+.navrwd+.menuhidden.noItem,
.navbar ul li.navbar-item.active a:focus+.navrwd+.menuhidden.noItem,
.navbar ul li.navbar-item.active a:active+.navrwd+.menuhidden.noItem{ background: transparent; display: none;}
.navbar ul li a:hover+.navrwd+.menuhidden, .navbar .menuhidden:hover{ display: table;}
.navbar .menu-web{ display: block;}
.navbar .menu-web a:last-child{ border-bottom: none;}
.navbar .menu-mobile{ display: none;}
.navbar ul li ul.menuhidden.overflowRight { right: 0;}


@media screen and (max-width: 767px) {
.navbar ul li ul{ display: none; visibility: visible; opacity:1;}
.navbar ul li:hover ul{ height: auto; visibility: visible; opacity:1; padding: 0px;}
.navbar ul li:hover ul, 
.navbar ul li a.active+.navrwd+.menuhidden, 
.navbar ul li a.active:hover+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:focus+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:active+.navrwd+.menuhidden{ display: inline;}
.navbar .menu-web{ display: none;}
.navbar .menu-mobile{ display: block;}
}
@media screen and (max-width: 520px){
.navbar ul li:hover ul{ display:none;}
.navbar ul li a.active+.navrwd+.menuhidden, 
.navbar ul li a.active:hover+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:focus+.navrwd+.menuhidden, 
.navbar ul li.navbar-item.active a:active+.navrwd+.menuhidden,.navbar .menuhidden.navbar-menu{ display: block; width: 100%; max-width: 100%;}
}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg{ min-height:676px;background-position-y: bottom; padding-top: 280px; }
.connect{ margin: 20px auto; list-style: none;width: 83%;}
.footerbg .freego {padding: 5px 0;}
.footerbg .text { float: left; padding:0 20px;font-size: 0.9rem;line-height: 1.6em; letter-spacing: 0.05em;}
.footerbg a {color: #ffffff;}
.footerbg .text .title{min-width: 60px;}
.connect-links{text-decoration: underline}
.connect-links,.connect .text.connect-explorer{color:#cfcfcf;}
.connect-links:hover{text-decoration: none;color:#fffbfb;}
.copyright {padding: 5px 5px 5px 0; background-color:inherit; width: 100%;text-align: right; color:#94fffc;font-size: 0.8rem;position: absolute; bottom: 0;}
@media (max-width :520px){
.footerbg { padding-top: 180px;}
.connect{ margin: 0 auto;  width: 100%;}
.connect-explorer{ display: none;}
}

/**************************************************
= module title 模組標題
********************/
.module-title-bg { background: url(../img/title.png); background-position:0 bottom; background-repeat:repeat-x;}
.module-title {position: relative;color:#2c58a5;font-weight: 600;font-size: 1.2rem;/*height: 55px;*/ text-align: center;  line-height: 2rem; display: table;  margin: 0 auto; padding-left: 0px; padding-right: 0px;  padding-top: 15px;}
.module-title-bg::before { position: absolute;  content: "";  width:35px; height: 35px; background: url(../img/title-icon.png); background-repeat: no-repeat; margin-left: -35px; margin-top: 0px;}
/* nav-Vertical 直式選單 ********************/
.nav-Vertical ul { list-style: none; margin: 0; padding: 0;}
.nav-Vertical ul li .sub-menu-item{ display: block; background: #eaf0fa; padding: 10px 15px;color: #4670bb; text-decoration: none; border-bottom: 1px solid #b2c3e1; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer;}
.nav-Vertical ul li .sub-menu-item:hover { background:#4670bb;color:#ffffff; }
.nav-Vertical ul li .sub-menu-item a:hover,.nav-Vertical ul li .sub-menu-item a:focus,.nav-Vertical ul li .sub-menu-item a:active,.nav-Vertical ul li .sub-menu-item .active,.nav-Vertical ul li .sub-menu-item:hover a{color:#ffffff;}
.nav-Vertical ul li .menu-arrow svg{ fill:#133b83; width: 16px;}
.nav-Vertical ul li .menu-arrow:hover svg{ fill: #ffffff;}
.nav-Vertical ul li ul li .sub-menu-item{ background:#d7e0ef; border-left: 4px solid transparent; padding: 10px 15px 10px 20px;}
.nav-Vertical ul li ul li ul li .sub-menu-item{ background:#eefefd; border-left: 4px solid transparent; padding: 10px 20px 10px 30px;}
.nav-Vertical ul li ul li .sub-menu-item:hover,
.nav-Vertical ul li ul li ul li .sub-menu-item:hover {background: #6b8fcb; color: #ffffff;border-left: 4px solid #4670bb;}

/* sitemap 導覽頁 ********************/
.ct-sitemap li{list-style: none;}
.sitemap-top { line-height: 1.8em;}
.sitemap-title { background:#4670bb;color: #ffffff; padding-left: 15px;padding-right: 15px;font-weight: bold;}
.sitemap-title span{line-height: 25px; padding:0 8px 0 0;}
.sitemap-block { box-shadow: 3px 4px 0px rgb(202, 207, 216); background: #ffffff; letter-spacing: 0.06em;}
.sitemap-block a { display: block;}
.sitemap-item a { color: #4670bb; display: inline-block; width: 100%; border-left: 2px solid #b2c3e1; background: #f5f5f5; padding: 6px;  transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.sitemap-item a:hover,.sitemap-item a:focus{background:#f3f6fb;}
.sitemap-item ul ul{padding-left: 25px;}
.sitemap-item ul li { padding: 7px 0 0;}
.sitemap-item ul li span{padding: 0 10px 0 5px;}
.sitemap-icon svg { padding-top: 5px; width: 18px; height: 20px; fill: #ffffff;}

/**** classboard 基礎管理 *****/
.cb_a_link{float: right; margin-bottom: -2px; margin-right: 28px; font-size: 0.9em; color: #fff; font-weight: 600; background-color: #78777f; padding: 2px 6px; border-radius: 4px;}
.cb_a_link:hover{ color: #fff; background-color: #afafaf;}

/**** scheduleclassboard 空間管理 *****/
.classboard.spacemanageleft{ background-color: #3B4476; color: #fff; height: 700px; overflow-y: auto;}
.classboard.spacemanageright{ background-color: #eee; height: 700px; overflow-y: auto;}
/*left select*/
.classboard.spacemanageleft .space_select{background-color:rgba(255,255,255,0.6); margin:25px 20px 20px 20px;}
/*left calendar*/
.classboard.spacemanageleft .calendar-s {max-height: 100%; margin-top: 105px;}
/*.classboard.spacemanageleft .calendar-s .title{ text-align: left; padding: 10px 0 10px 20px; font-size: 1.1rem; margin: 15px 140px 0 70px; border-radius: 100px; background:#48538f;}
.classboard.spacemanageleft .calendar-s .arrow:hover {background: #e7e7e7;}
.classboard.spacemanageleft .calendar-s .arrow-container{position: relative;}
.classboard.spacemanageleft .calendar-s .arrow{ position: absolute; display: block; width: 30px; height: 30px; -webkit-transition: background .3s; transition: background .3s;border-radius: 100%; background-color: #fff; margin-top: 7px;}
.classboard.spacemanageleft .calendar-s .arrow:hover {text-decoration: none; }
.classboard.spacemanageleft .calendar-s .arrow.left { right: 45%;top: 0; }
.classboard.spacemanageleft .calendar-s .arrow.right {right: 35%;top: 0;}
.classboard.spacemanageleft .calendar-s .arrow .icon { display: block; font-size: 1.1rem; border: 2px solid #fff; border-radius: 100%; line-height: 17px; width: 21px; margin: 20px auto; text-align: center;}
.classboard.spacemanageleft .calendar-s .arrow.left .icon { padding-right: 2px;}*/
.classboard.spacemanageleft .sml_top_btn{width:225px; height:45px; font-weight:500; border-radius:100px; background-color:#48538f; padding:5px 5px 5px 18px; margin: auto; user-select: none;}
.classboard.spacemanageleft .sml_top_btn .sml_title{font-size: 1.1rem; display: inline-block;}
.classboard.spacemanageleft .sml_top_btn .sml_left{width: 29px; height: 29px; display: inline-block; border-radius: 100%; background: #fff; fill:#3b4476; margin-left: 30px; padding: 7px; margin-top: 2px;}
.classboard.spacemanageleft .sml_top_btn .sml_left:hover{cursor: pointer; fill:#4670bb;}
.classboard.spacemanageleft .sml_top_btn .sml_right{width: 29px; height: 29px; display: inline-block; border-radius: 100%; background: #fff; fill:#3b4476; margin-left: 8px; padding: 7px; margin-top: 2px;}
.classboard.spacemanageleft .sml_top_btn .sml_right:hover{cursor: pointer; fill:#4670bb;}

.classboard.spacemanageleft .month-s {  margin: 15px auto; text-align: center; user-select: none;}
.classboard.spacemanageleft .month-s a {display: block;font-size: 0.9rem; color: #fff;}
.classboard.spacemanageleft .month-s a:hover {width: 30px;line-height: 30px; background: #48538f; border-radius: 100%; margin: 0 2px; margin: auto;}
.classboard.spacemanageleft .month-s td,.month-s th {width: 45px; height: 45px; text-align: center; font-size: 0.9rem; color: #676a6c; margin: auto;}
.classboard.spacemanageleft .month-s th{color: rgba(255, 255, 255, 0.5);}
.classboard.spacemanageleft .month-s .today {width: 28px; line-height: 28px; color: #E0B756 ; font-weight:600; border-radius: 100%;  margin: auto;}
.classboard.spacemanageleft .month-s .todaychoose {width: 30px; line-height: 30px; background:#E0B756; color: #000; font-weight:600; border-radius: 100%;  margin: auto;}
.classboard.spacemanageleft .month-s a.todaychoose:hover {background: #c49e46;}
.classboard.spacemanageleft .month-s .notodaychoose {width: 30px; line-height: 30px; background:#fff; color: #3B4476; font-weight:600; border-radius: 100%;  margin: auto;}
.classboard.spacemanageleft .month-s a.notodaychoose:hover {background: #ddd;}
.classboard.spacemanageleft .month-s a.n-this-month{color: #515989; line-height: 0; }
.classboard.spacemanageleft .calendar-s .month-arr{ width: 15px; height: 15px; margin: 7px; padding: 1px; fill:#3B4476;}
.classboard.spacemanageleft .calendar-s .month-arr:hover svg{fill:#3e85cc;}

/*right top*/
.classboard.spacemanageright .smr_top{color:#3B4476; font-size:1.2rem; font-weight:600; height: 85px;}
.classboard.spacemanageright .smr_top .smr_top_btn{width:160px; height:36px; font-weight:500; display:inline-block; border-radius:100px; background-color:#FFFFFF; position: absolute; right: 20px;top: 15px; padding:5px 5px 5px 15px;}
.classboard.spacemanageright .smr_top .smr_top_btn .add_plus{width: 25px; height: 25px; display: inline-block; border-radius: 100%; background: #3b4476; fill:#fff; margin-left: 15px; position: absolute; top: 6px;}
.classboard.spacemanageright .smr_top .smr_top_btn .add_plus:hover{cursor: pointer; background: #48538f;}
.classboard.spacemanageright .smr_bottom{overflow-y:auto;height: 600px;}
.classboard.spacemanageright .smr_a_link{float: right; margin-top: -42px; margin-right: 28px; font-size: 0.9em; color: #3b4476;}
.classboard.spacemanageright .smr_a_link:hover{color: #707ab5;}

/*right bottom*/
.classboard.spacemanageright .smr_bottom { position:relative;}
.classboard.spacemanageright .smr_bottom .wrap { overflow-x: hidden; overflow-y: scroll; height: 600px; border-radius: 8px;}
.classboard.spacemanageright .smr_bottom thead {  z-index: 2;background: white;border-bottom: 2px solid #ddd;}
.classboard.spacemanageright .smr_bottom thead th {text-align: center;width: 100%;color:#434546;  padding: 0.2em;vertical-align: top;}
.classboard.spacemanageright .smr_bottom tbody { position: relative;top: 30px; }
.classboard.spacemanageright .smr_bottom table {  background: #fff;  width: 100%;  border-collapse: collapse;  table-layout: fixed;}
.classboard.spacemanageright .smr_bottom .headcol { width: 60px;font-size: 0.8rem;  color:rgb(103, 106, 108);  padding: 0.25rem 0;  text-align: center;  border: 0;position: relative;top: -12px;border-bottom: 1px solid transparent;}
.classboard.spacemanageright .smr_bottom .date{font-size:1.6rem; padding: 4px 2px; font-weight: bold;}
.classboard.spacemanageright .smr_bottom .week{font-size:0.9rem;padding: 0 2px 6px; vertical-align:top; font-weight: bold;}
.classboard.spacemanageright .smr_bottom .allday{font-size:0.9rem;padding: 2px 3px; color: #ffffff; padding-left: 3px;overflow: hidden; white-space: nowrap; border-radius:2px;font-weight: bold;}
.classboard.spacemanageright .smr_bottom tr, .classboard.spacemanageright .smr_bottom tr td { height: 20px;}
.classboard.spacemanageright .smr_bottom td {text-align: center;}
.classboard.spacemanageright .smr_bottom tr:nth-child(odd) td:not(.headcol) {border-bottom: 1px solid #e8e8e8;}
.classboard.spacemanageright .smr_bottom tr:nth-child(even) td:not(.headcol) {border-bottom: 1px solid #eee;}
.classboard.spacemanageright .smr_bottom tr td {  border-right: 1px solid #eee;  padding: 0;  white-space: none; word-wrap: nowrap;}
.classboard.spacemanageright .smr_bottom tbody tr td { position: relative; vertical-align: top; height: 80px;width: auto; }
.classboard.spacemanageright .smr_bottom .weekend { color:#999;}
.classboard.spacemanageright .smr_bottom .checkbox { display: none;}
.classboard.spacemanageright .smr_bottom .past { background: #fafafa;}
.classboard.spacemanageright .smr_bottom .event {color: #9fa3bf; text-align: left; font-size: 0.85rem; z-index: 2;transition: all 0.2s; overflow: hidden;
  white-space: nowrap; position: relative; margin: 3px; height:70px;}
.classboard.spacemanageright .smr_bottom .event-content{ padding: 5px 1px 0 10px;}
.classboard.spacemanageright .smr_bottom .event-content.progress{ color:#1FC2CA; font-size: 1.1rem;font-weight: bold;}
.classboard.spacemanageright .smr_bottom .event-content.normal,
.classboard.spacemanageright .smr_bottom .event-content.reserve{ color:#394079; font-size: 1.1rem;font-weight: bold;}
.classboard.spacemanageright .smr_bottom .event.double { height: 200%;}
.classboard.spacemanageright .smr_bottom .event.triple { height: 300%;}
.classboard.spacemanageright .smr_bottom .event.quadruple { height: 400%;}
.classboard.spacemanageright .smr_bottom .festival{font-size:0.9rem;padding: 2px 3px; color: #ed5565; background: #ffeaea; padding-left: 3px;overflow: hidden; white-space: nowrap; border-radius:2px; font-weight: bold;}
.classboard.spacemanageright .smr_bottom .today { color: #3597d4;}
.classboard.spacemanageright .smr_bottom .now { box-shadow: 0px -2px 0px 0px #e04858; height: 2px; margin-top: 20px; width: 100%; position: absolute; z-index:50;}
.classboard.spacemanageright .smr_bottom .scrollspace{width:8px !important;}
.classboard.spacemanageright .smr_bottom .progressclass{background-color:#394079;}
.classboard.spacemanageright .smr_bottom .normalclass{background-color:#CEE0F2;}
.classboard.spacemanageright .smr_bottom .reserveclass{background-color:#CEF0F2;}

.overview_item{
	width: 230px;
	display: inline-block;
	background-color: #efeff1;
	padding: 10px;
	margin-right: 15px;
	padding-bottom: 0px;
	height: 130px;
}
.overview_item.release_ver{
	border-bottom: 3px solid rgba(70, 112, 187, 0.6);
}
.item_name.release_ver_bg{
	background-color: #314d80;
	width: 205px;
}
.overview_item.install_num{
	border-bottom: 3px solid rgba(79, 76, 123, 0.5);
}
.item_name.install_num_bg{
	background-color: #4f4c7b;
	width: 205px;
}
.item_name{
	display: inline-block;
	background-color:#ff7e66;
	padding: 5px 15px 5px 20px;
	position: relative;
	left: -12px;
	color: #fff;
	top: -5px;
	box-shadow: -2px 2px 0px rgba(187, 187, 187, 0.5);
}
.item_nmb{
	text-align: center;
	font-size: 2.5rem;
	color: #555;
	margin-top: 10px;
}
.item_bottom{
    position: relative;
    top: -8px;
    left: 8%;
    height: 1px;
    width: 85%;
    border-bottom: 2px solid rgba(221, 221, 221, 0.5);
}
.processupdate svg{
	position: relative;
    right: -80%;
    top: -50px;
    width: 2.5rem;
    height: 2.3rem;
    fill: rgba(147, 146, 146, 0.6);
}
.processupdate svg:hover{
	cursor: pointer;
	fill: rgba(63, 61, 61, 0.6);
}
.processupdate svg:active,
.processupdate svg:focus{
	-webkit-animation: rotation 0.5s linear;
	animation: rotation 0.5s linear;
}
@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
	}
}
.processupdate.disabled svg{
	cursor: no-drop;
	fill: rgba(147, 146, 146, 0.6);
	-webkit-animation: not_rotation 0.5s linear;
	animation: not_rotation 0.5s linear;
}
@-webkit-keyframes not_rotation {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(0deg);
	}
}
.buildclass_overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 171.5px;
}
.buildclass_overflow.active{
	background-color: #2b426c;
	color: #fff;
}
.updatecheck{
	position: relative;
	display: none;
}
.updatecheck_text{
	position: absolute;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 5px;
    font-size: 0.95rem;
    border-radius: 3px;
    top: -70px;
    right: -90px;
}
.processupdate:hover + .updatecheck{
	display: block;
}
@media screen and (min-width: 400px) and (max-width: 900px) {
	.overview_item{
		width: 190px;
	}
	.item_name.install_num_bg,
	.item_name.release_ver_bg{
		width: 175px;
	}
	.item_name{
		width: 175px;
		font-size: 0.9rem;
		padding-left: 10px;
	}
}
/*展開*/
.repair-main-block{
	position: relative;
}
.repair-main-block .toggle-btn{
	float: right;
	width: 30px;
	height: 30px;
	margin-left: 0.1em;
	margin-top: 0px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	padding: 10px 0 0 10px;
}
.repair-main-block .toggle-btn:hover svg{
	fill: #0d19a3;
}
.repair-toggle{
	width: 30px;
	height: 30px;
	position: relative;
}
.repair-toggle svg{
	fill: #fff;
	width: 20px;
	height: 20px;
	transform: rotate(180deg);
}
.repair-toggle.sub-open svg{ 
	transform: rotate(0deg);
}