/* ------- */
/* Loading */
/* ------- */
#loading {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 99;
  background-color: #eeeee6;
}
#loading:after {
  position: absolute;
  content: "";
  border: 10px solid #cccccc; /* Light grey */
  border-top: 10px solid #666666; /* 較重的顏色 */
  border-radius: 50%;
  width: 72px;
  height: 72px;
  animation: spin 1s linear infinite;
  top: 50%;
  left: 50%;
  margin: -36px 0 0 -36px;
  box-sizing: border-box;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*====================================*/
#wrap{
	margin: 0 auto;
	width: 100%;
	height: auto;
	position: relative;
	font-size: 1em;
	overflow: hidden;
}
/*====================================*/

.bg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}
/*課程標題圖片*/
.courseTitle{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    display: inline-block;
}
.courseTitle img {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}

/*==============↓學習指引(上方功能鈕)↓==============*/
/*學習指引圖片*/
.menuBtn{
    position: absolute;
    display : block;
    top     : 1%;
    right   : 2%;
    width   : 12%;
    z-index : 2;
    cursor: pointer;
}

.menuBtn:hover{
    transform: scale(1.2);
}


/* 上方功能選單 */
.settingBtnBox{
	position: absolute;
	width:9.5%;
	height:68%;
	top:0%;
	right:1%;
	display:none;
}
.settingBtnBox img{
	width:100%;
}
.settingDown{
	position: absolute;
	width:100%;
	top:-80%;
}
.settingUp{
	position: absolute;
	width:100%;
	top:0%;
	cursor:pointer;
}
.settingBtn{
	position: absolute;
	width:62%;
	left:50%;
	margin-left:-31%;
	cursor:pointer;
}
#settingBtn1{
	top:18%;
}
#settingBtn2{
	top:38%;
}
#settingBtn3{
	top:58%;
}
#settingBtn4{
	top:78%;
}
/* 上方功能畫面 */
.settingPopupBox{
	position: absolute;
	z-index: 99;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.settingPopup{
	position: absolute;
	top:0;
	width:100%;
	height:100%;
	z-index:0;
	display:none;
}

.popup-button-group{
	position:relative;
	top:0;
	width:100%;
    height: 10.5%;
	z-index:1;
	background-color:#bfada3;
}

.popup-button{
	position:relative;
	padding-left:1px;
	height:100%;
	width: 17.87%;
	float:left;	
	cursor:pointer;
}

.close-button{	
	position:relative;
	height:100%;
	width: 5.9%;
	float:right;	
	cursor:pointer;
}

.close-button:after{
	clear:both;
}

.close-button img{
	vertical-align:middle;
	width:100%;
	height:100%;
}

.popup-button img{
	vertical-align:middle;
	width:100%;
	height:100%;
}
/*==============↑學習指引(上方功能鈕)↑==============*/