@charset "UTF-8";
.mirroria{
	--barHight: 30px;
	--frameBorderWidth: 5px;
	--hoverOffset: 1px; /* 滑入感應區向內加厚，用在grid區塊 */
	--showFrameDur: .2s; /* 滑入後顯示的動畫時長 */
	/* background: #000; */
    overflow: hidden;
	transition: box-shadow var(--showFrameDur);
	user-select: none;
}
.mirroria:not(.phone){
	border-radius: 10px;
}
.mirroria:not(.phone):hover{
	box-shadow: 0 0 5px 0 #aaa;
}
.mirroria_glass{
	width: 100%;
    height: 100%;
	/* filter: url(#glass-distortion); */
	/* filter: url(images/filter.svg#glass-distortion); */
	/* filter: url(images/filter2.svg#liquid-glass-distortion); */
	filter: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8ZmlsdGVyIHg9IjAlIiB5PSIwJSIgaWQ9ImdsYXNzLWRpc3RvcnRpb24iIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgoJCTxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBudW1PY3RhdmVzPSIxIiBiYXNlRnJlcXVlbmN5PSIwLjAwMSAwLjAwNSI+PC9mZVR1cmJ1bGVuY2U+CgkJPGZlR2F1c3NpYW5CbHVyIHJlc3VsdD0ic29mdE1hcCIgc3RkRGV2aWF0aW9uPSI2Ij48L2ZlR2F1c3NpYW5CbHVyPgoJCTxmZURpc3BsYWNlbWVudE1hcCBpbj0iU291cmNlR3JhcGhpYyIgc2NhbGU9IjgwIj48L2ZlRGlzcGxhY2VtZW50TWFwPgoJPC9maWx0ZXI+Cjwvc3ZnPg==#glass-distortion");
	backdrop-filter: blur(1px) saturate(1.6) brightness(1.1);
}
.mirroria_grid{
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
	--fbw: calc(var(--frameBorderWidth) + var(--hoverOffset));
	display: grid;
	grid-template-columns: var(--fbw) auto var(--fbw);
	grid-template-rows: calc(var(--barHight) + var(--hoverOffset)) auto var(--fbw);
	/* box-shadow: inset 2px 2px 8px -1px #fffa; */
	box-sizing: border-box;
}
.mirroria:not(.phone)>.mirroria_glass,
.mirroria:not(.phone)>.mirroria_grid{
	opacity: 0;
	transition: opacity var(--showFrameDur);
}
.mirroria:not(.phone)>.mirroria_grid{
	border: 1px solid #fff6;
	border-radius: 10px;
}
.mirroria:not(.phone):hover>.mirroria_glass,
.mirroria:not(.phone):hover>.mirroria_grid{
	opacity: 1;
}
.mirroria_grid_bar{
	grid-column: 1 / span 3;
	/* background: #dfa; */
	position: relative;
}
.mirroria:not(.phone) .mirroria_grid_bar{
	cursor: move;
}
.mirroria_grid_bar_text{
	text-align: center;
	line-height: 30px;
	color: #fffa;
	text-shadow: 0 0 2px #0006;
	letter-spacing: 2px;
	font-size: 15px;
}
.mirroria.phone .mirroria_grid_bar_text{
	display: none;
}
.mirroria_grid_bar_text:hover{
	color: #fff;
	text-shadow: 0 0 2px #000a;
}
.mirroria_grid_bar_close{
	width: 22px;
	height: 22px;
	cursor: pointer;
	opacity: 0.6;
	position: absolute;
	border-radius: 50%;
	right: var(--frameBorderWidth);
	top: calc(var(--barHight) / 2 - 11px);
	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+CiA8ZyBjbGFzcz0ibGF5ZXIiPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBkPSJtMjU2LDUwNGEyNDgsMjQ4IDAgMSAwIDAsLTQ5NmEyNDgsMjQ4IDAgMSAwIDAsNDk2eiIgZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjIiIGlkPSJzdmdfMyIvPgogIDxwYXRoIGQ9Im0yNTYsNDhhMjA4LDIwOCAwIDEgMSAwLDQxNmEyMDgsMjA4IDAgMSAxIDAsLTQxNnptMCw0NjRhMjU2LDI1NiAwIDEgMCAwLC01MTJhMjU2LDI1NiAwIDEgMCAwLDUxMnptLTgxLC0zMzdjLTkuNCw5LjQgLTkuNCwyNC42IDAsMzMuOWw0Nyw0N2wtNDcsNDdjLTkuNCw5LjQgLTkuNCwyNC42IDAsMzMuOXMyNC42LDkuNCAzMy45LDBsNDcsLTQ3bDQ3LDQ3YzkuNCw5LjQgMjQuNiw5LjQgMzMuOSwwczkuNCwtMjQuNiAwLC0zMy45bC00NywtNDdsNDcsLTQ3YzkuNCwtOS40IDkuNCwtMjQuNiAwLC0zMy45cy0yNC42LC05LjQgLTMzLjksMGwtNDcsNDdsLTQ3LC00N2MtOS40LC05LjQgLTI0LjYsLTkuNCAtMzMuOSwweiIgZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDAgMCkiLz4KIDwvZz4KPC9zdmc+") no-repeat;
	background-size: cover;
	z-index: 1;
}
.mirroria.phone .mirroria_grid_bar_close{
	width: 28px;
	height: 28px;
	opacity: 1;
	box-shadow: 0 0 4px #0008;
}
/* .mirroria_grid_bar_close>img{
	filter: invert(1);
	background-color: #fff3;
	border-radius: 50%;
} */
.mirroria_grid_bar_close:hover{
	opacity: 0.9;
}
.mirroria_grid_l,
.mirroria_grid_r{
	/* background: #fad; */
	cursor: ew-resize;
}
.mirroria_grid_l{}
.mirroria_grid_c{}
.mirroria_grid_r{}
.mirroria_grid_bl{
	cursor: nesw-resize;
}
.mirroria_grid_b{
	/* background: #afd; */
	cursor: ns-resize;
}
.mirroria_grid_br{
	cursor: nwse-resize;
}


.mirroria_content{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: var(--barHight) var(--frameBorderWidth) var(--frameBorderWidth);
    box-sizing: border-box;
    pointer-events: none;
}
.mirroria.phone .mirroria_content{
	padding-top: var(--frameBorderWidth);
	/* padding: var(--barHight) var(--frameBorderWidth) var(--frameBorderWidth); */
}
.mirroria_content::before{
	content: "載入課程資訊中...";
	width: 100%;
    height: 100%;
	background: #adfc;
	color: #222;
	font-size: 20px;
    backdrop-filter: blur(12px) saturate(10);
	box-shadow: inset 2px 2px 1px #fff3, inset -1px -1px 1px 1px #fff3;
	border-radius: 8px;
	display: none;
	justify-content: center;
    align-items: center;
}
.mirroria_content>iframe{
    background: transparent;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}
.mirroria_content.loading>iframe{
	display: none;
}
.mirroria_content.loading::before{
	display: flex;
}