@charset "utf-8";

@font-face {
    font-family: MyCustomFont;
    src        : local("Microsoft JhengHei"), local("微軟正黑體");
}

/* 修正粗體 */
@font-face {
    font-family  : fontFixed;
    unicode-range: U+7db0, U+78A7, U+7B75;
    /* ASCII (碧筵綰) */
    font-style   : normal;
    font-weight  : bold;
    src          : local("Yu Gothic"), local("MS Gothic");
}

/* 一般粗細的時候改回微軟正黑 */
@font-face {
    font-family  : fontFixed;
    unicode-range: U+7db0, U+78A7, U+7B75;
    /* ASCII (碧筵綰) */
    font-style   : normal;
    font-weight  : normal;
    src          : local("Microsoft JhengHei"), local("微軟正黑體");
}

/* 英文數字專用 */
@font-face {
    font-family  : MyCustomFont;
    /* 同樣的 font-family */
    unicode-range: U+00-7F, U+00C0-U+00FF, U+2150-U+2169;
    /* ASCII,羅馬數字*/
    src          : local("Arial");
}

body {
    margin     : 0px;
    padding    : 0px;
    height     : 100%;
    width      : 100%;
    color      : #333;
    font-family: fontFixed, MyCustomFont, sans-serif;
    overflow   : hidden;
}

h1 {
    margin: 0;
}

a {
    color          : inherit;
    text-decoration: none;
    cursor         : pointer;
    outline        : none;
}

a:focus {
    outline         : 0px solid #ff7600;
    background-color: rgba(255, 255, 255, 0.05);
}

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

ul {
    margin         : 0px;
    padding        : 0px;
    list-style-type: none;
}

img {
    border  : 0;
    behavior: url("css/iepngfix.htc");
    filter  : progid: DXImageTransform.Microsoft.AlphaImageLoader (enabled=true);
}

video {
    outline: none;
    display: block;
}

iframe {
    display : block;
    border  : 0;
}

.not-active {
    pointer-events: none;
    cursor        : default;
}

.color_red {
    color: #CC3300 !important;
}

/*-----------------------外層架構----------------------*/
#WrapperBox {
    position        : relative;
    z-index         : 1;
    margin          : 0 auto;
    overflow : hidden;
}

/*-----------------------主要架構----------------------*/
/* loading畫面 */
#LoadingBox {
    position        : absolute;
    width           : 100%;
    height          : 100%;
    background-color: #eeeee6;
    z-index         : 30;
}

#LoadingBox:after {
    position     : absolute;
    content      : "";
    border       : 10px solid #cccccc;
    /* Light grey */
    border-top   : 10px solid #666666;
    /* Blue */
    border-radius: 50%;
    width        : 50px;
    height       : 50px;
    animation    : spin 1s linear infinite;
    top          : 50%;
    left         : 50%;
    margin-top   : -25px;
    margin-left  : -25px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* 課程資訊內容 */
.mask-box {
    display : none;
    position: absolute;
    bottom  : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    z-index : 20;
    overflow: hidden;
}

.btn-close {
    position: absolute;
    top     : 5%;
    right   : 6%;
    width   : 6%;
    z-index : 3;
}

.btn-close img {
    position: relative;
    width   : 100%;
    height  : auto;
    display : block;
}

.btn-close:hover {
    transform: scale(0.9);
}

.mask-boxPage {
    position: relative;
    width   : 100%;
    height  : 100%;
    z-index : 2;
}

.mask-box iframe {
    position: absolute;
    left    : 0%;
    top     : 0%;
    height  : 100%;
    width   : 100%;
}
/* 課程內容 */
.container {
    position: relative;
    width   : 100%;
    height  : 100%;
    z-index : 10;
}

.container .container-Video,
.container .container-Img img {
    position: relative;
    width   : 100%;
    height  : auto;
}

/* 提示語 */
.bottom {
    position  : absolute;
    width     : 100%;
    height    : 5.2%;
    text-align: left;
    bottom    : 1%;
    left      : 0;
    z-index : 9;
}
.bottom.act {
    z-index : 11;
}
.bottom .tips {
    position        : relative;
    display         : inline-block;
    color           : #40261b;
    padding         : 0 0.5em;
    border-radius   : 0 1em 1em 0;
    background-color: rgba(255, 255, 255, 0.6);
    margin          : 0 0 0 1em;
    top             : 50%;
    transform       : translateY(-50%);
    font-size       : 16px;
    font-weight     : bold;
    opacity         : 0;
    transition : All 0.4s ease-in-out;
}

.bottom .tips::before {
    position        : absolute;
    content         : "";
    width           : 0.5em;
    height          : 100%;
    background-color: #40261b;
    top             : 0;
    left            : -0.5em;
}

.bottom.act .tips {
    opacity: 1;
}
@media (min-width: 980px) {
    .bottom .tips {
        font-size: 22px;
    }
}

/* 課程標題 課程資訊鈕 */

#btn-nav00 {
    position: absolute;
    display : block;
    top     : 1%;
    right   : 2%;
    width   : 12%;
    z-index : 2;
    cursor: pointer;
}

#btn-nav00 img {
    position: relative;
    width   : 100%;
    height  : auto;
    display : block;
}


#btn-nav00:hover img {
    transform: scale(1.1);
}

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

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


/* 上方功能選單 */
.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%;
}
/*==============↑學習指引(上方功能鈕)↑==============*/