html {
	position: relative;
	min-height: 100%;
}

body {
	background: rgb(235, 245, 255);
	font-family: "Arial","Helvetica","微軟正黑體","Microsoft JhengHei","黑體","SimHei","儷黑 Pro","LiHei Pro Medium","蘋果儷中黑","Apple LiGothic Medium","新細明體","PMingLiU","細明體","MingLiU","標楷體","DFKai-sb","sans-serif" !important;
	margin-bottom: 60px;
	font-size: 1.2em;
}

a:link {
	text-decoration: none;
}

.btn-back-to-top {
	z-index: 1000;
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease; 
}

.btn-back-to-top i {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: #ffffff;
    transition: all 0.3s ease; 
}

.btn-back-to-top:hover {
	background: rgba(0, 0, 0, 0.6); 
}

.btn-back-to-top:hover i {
    top: 20px; 
}

.pri-title {
	color: #818181;
}

.palYear {
	font-size: 1.4rem;
	color: #818181;
}

.palYear .custom-select {
	font-size: 1.25rem;
}
 
.unit-title {
	xcolor: #367F86;
	color: #e05c46;
	font-weight: bold;
}




.pal-teaching-video {
	xbackground: #FFDCE0;
	background: #FFFCE9;
	border-radius: 12px;
	height: 100%;
}





.pal-teaching-video .title {
	xcolor: #B22B3C;
	font-weight: bold;
}

.pal-teaching-video1 .title {	color: #B22B3C;	}
.pal-teaching-video2 .title {	color: #38932E;	}
.pal-teaching-video3 .title {	color: #A58911;	}
.pal-teaching-video4 .title {	color: #1384A3;	}



.pal-self-learning {
	background: #D6FFC5;
	border-radius: 12px;
	height: 100%;
}

.pal-self-learning .title {
	color: #37912F;
	font-weight: bold;
}

.pal-firefly-classroom {
	background: #FEFDBC;
	border-radius: 12px;
	height: 100%;
}

.pal-firefly-classroom .title {
	color: #9E8310;
	font-weight: bold;
}

.pal-online-practice {
	background: #D0FFF7;
	border-radius: 12px;
	height: 100%;
}

.pal-online-practice .title {
	color: #1683A2;
	font-weight: bold;
}

.item-img {
	max-width: 80px;
}

.item-img:hover {
	transform: scale(1.1);
} 

.item-text {
	font-size: 0.75em;
	font-weight: bold;
	color: #256F6E;
	padding: 4px;
}

#newsModal .modal-content {
	background: transparent;
	border: 0px;
}

#newsModal .close {
	margin: -50px;	opacity: 1;
}

#newsModal button img {
	width: 50px;
}

#newsModal button img:hover{
	opacity: .8;
}

#newsModalBody {
	text-align: center;
}

.bubble {
    background-color: #37335b;
    border-radius: 18px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5), 3px 3px 0 hsla(0,0%,0%,.1);
    color: #fff;
    display: inline-block;
    padding: 30px 30px;
    position: relative;
	text-align: left;
	width: 90%;
    /*text-shadow: 0 1px 1px hsla(0,0%,100%,.5);*/
}
.bubble:after, .bubble:before {
    border-bottom: 45px solid transparent;
    border-right: 45px solid #37335b;
    bottom: -45px;
    content: '';
    position: absolute;
    right: 125px;
}

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -48px;
    right: 122px;
}

.modal-teaching-video {
	padding-left: 8px;
	color: #FF3399;
}

.modal-self-learning {
	padding-left: 8px;
	color: #FF9933;
}

.modal-firefly-classroom {
	padding-left: 8px;
	color: #FFFF00;
}

.modal-online-practice {
	padding-left: 8px;
	color: #00B0F0;
}

.modal-img-character {
	max-height: 200px;
	padding-top: 10px;
}



@media (min-width: 576px) {
	.modal-dialog {
		max-width: 680px;
		margin: 1.75rem auto;
	}
}

@media (max-width: 700px) {
	.bubble {
		width: 100%;
	}
	
	#newsModalBody h3 {
		font-size: 1.25rem
	}
}