body {
	background-color: black;
	padding-top: 82px;
}

template{
	display: none;
}

.nav-avatar{
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
	border:0px;
	border-radius:48px;
	width:80px;
	height:72px;
	
}

/*
.dropdown-menu {
	overflow: hidden;
	overflow-y: auto;
	max-height: calc(100vh - 150px);
}
*/


#navbar-main-menu>.navbar-nav>.nav-item {
	margin: 0px 3%;
}

#navbar-dropdown-menu-courses {
	background-color: #ECEFF1;
	padding: 20px;
}

#navbar-dropdown-menu-courses ul>li:first-child {
	border-bottom: 1px dotted #607D8B;
	color: #607D8B;
	font-size: 14px;
	line-height: 24px;
}

#navbar-dropdown-menu-courses ul>li a {
	color: rgba(0, 0, 0, 0.9);
	font-size: 16px;
	line-height: 32px;
	text-decoration: none;
}

#navbar-dropdown-menu-courses ul>li a:hover {
	color: rgba(0, 0, 0, 0.9);
	text-decoration: none;
}

#navbar-dropdown-menu-courses ul>li:nth-child(n+2) {
	margin: 12px 0px;
}

#navbar-dropdown-menu-courses ul>li:nth-child(n+2):hover {
	background-color: #B7E4E6;
}

@media screen and (min-width: 576px) {
	#navbar-dropdown-menu-courses {
		max-width: 1024px;

		width: 80vw;
	}

	#navbar-dropdown-menu-courses ul>li {
		padding-left: 5px;
	}
}

#footer-nav h5 {
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	line-height: 24px;
}

#footer-nav li {
	margin-top: 24px;
}

#footer-nav li a {
	color: white;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
}

#footer-copyright,
#footer-copyright a,
#footer-copyright a:hover {
	color: #B0BEC5;
	font-size: 12px;
	line-height: 24px;
}

#main-content {
	background-color: rgb(236, 239, 241);
}

.pagination .page-link.prev, .pagination .page-link.next{
	background-color: white;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 24px;
	width: 40px;
}
.pagination .page-link.prev{
	background-image: url(../images/icons/prev.png);
	margin-right:20px;
}
.pagination .page-link.next{
	background-image: url(../images/icons/next.png);
	margin-left:20px;
}

.pagination .page-link, .pagination .page-item{
	background-color: transparent;
	border:none;
	font-size:14px;
	line-height:40px;
	height:40px;
	
}
.pagination .page-link, .pagination a.page-link{
	color: #607D8B
}
.pagination .page-link.active{
	color: #00A8B5;
	text-decoration:underline;
}

.app-container {
	margin: 0px auto;
	max-width: 1680px;
}

/* 網頁按鈕基本樣式 */
.app-btn {
	border: 1px solid #09686D;
	border-radius: 32px;
	color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
	display: inline-block;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 56px;
	padding: 0px 32px;
	text-decoration: none;
}

a.app-btn:hover,
.app-btn:hover {
	background-color: #7BDCE0;
	color: rgba(0, 0, 0, 0.9);
	text-decoration: none;
}

.auth-code.checked{
	background-image: url(../images/icons/checkmark.png);
	background-position: 95% center;
	background-size:24px;
	background-repeat: no-repeat;
}

.login-btn {
	background-color: #00C3CD;
	padding: 0px 48px;
}

.login-btn:hover {
	border: 1px solid #8FA7F7;
	background-image: linear-gradient(180deg, #9BE6E9 0%, #8FA7F7 100%);
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu a::after {
	transform: rotate(90deg);
	position: absolute;
	left: 0px;
	top: .8em;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	right: 100%;
	margin-left: .1rem;
	margin-right: .1rem;
}

.pw-hint{
	font-size: 12px;
	color:#999999;
	line-height: 15px;
	position: relative;
	top:-8px;
}
.pw-err{
	font-size: 12px;
	color:red;
	line-height: 15px;
	position: relative;
	top:-8px;
}

.show-pw{
	position:relative;
	height: 0px;
	width:98%;
	text-align: right;
}

.show-pw input{
	display: none;
}
.show-pw label{
	position:relative;
	top:24px;
	opacity:0.5;
	cursor: pointer;
}

/*Alvin 20230713*/
.noModal-pw-hint{
	font-size: 12px;
	color:#999999;
	line-height: 15px;
	position: relative;
	top:4px;
}
.noModal-pw-err{
	font-size: 12px;
	color:red;
	line-height: 15px;
	position: relative;
	top:4px;
}

.noModal-show-pw{
	position:relative;
	height: 0px;
	width:98%;
	text-align: right;
}

.noModal-show-pw input{
	display: none;
}
.noModal-show-pw label{
	position:relative;
	top:6px;
	opacity:0.5;
	cursor: pointer;
}



/* 網頁按鈕基本樣式 END */


/* modals */

.auth-modal-content {
	margin: 0px auto;
	width: 90%;
}

.modal-content {
	margin: 0px auto;
	width: 90%;
}

.modal h3 {
	color: #4059AD;
	font-weight: normal;
	font-size: 28px;
	line-height: 40px;
	letter-spacing: 2px;
	text-align: center;
}

.sso-btn {
	background-color: white;
	background-position: 10% center;
	background-repeat: no-repeat;
	background-size: 20px;
	border: 1px solid #AEBFC7;
	color: #4D646F;
	cursor: pointer;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 40px;
	height: 40px;
	margin: 18px auto;
	text-align: center;
}

.sso-btn.fb {
	background-image: url(../images/icons/fb-c.png);
}

#signup-btn iframe , #signin-btn iframe {
	top:-2px !important;
	left:-2px !important;
	width:110% !important;
	
}

.sso-btn.gl {
	/*background-image: url(../images/icons/gl-c.png);*/
	overflow:hidden;
}

.middle-line {
	color: #AEBFC7;
	display: flex;
	flex-direction: row;
	font-size: 14px;
	line-height: 20px;
	margin: 24px auto;
	text-align: center;
}

.middle-line:before,
.middle-line:after {
	content: "";
	flex: 1 1;
	border-bottom: 1px solid #AEBFC7;
	margin: auto;
}

.middle-line:before {
	margin-right: 24px;
}

.middle-line:after {
	margin-left: 24px;
}

.modal input, .modal select {
	border: 1px solid #859EAB;
	height: 40px;
	margin: 16px auto;
}

.modal .app-btn {
	display: block;
	padding: 0px 48px;
	margin: 32px auto 12px auto;
	text-align: center;
}


.forget-pw-btn {
	color: #09686D;
	font-size: 14px;
	line-height: 24px;
	margin: 9px auto;
	text-align: right;
}

.forget-pw-btn a {
	color: #09686D;
	text-decoration: none;
}

.signup-btn {
	color: #4D646F;
	font-size: 14px;
	line-height: 32px;
	text-align: center;
}

.signup-btn a {
	color: #09686D;

	text-decoration: underline;
}

.modal .terms {
	color: #4D646F;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.modal .terms a {
	color: #00A8B5;
	text-decoration: underline;
}

.modal .sso-txt {
	color: #607D8B;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.modal .terms a {
	color: #00A8B5;
	text-decoration: underline;
}

.modal .modal-footer {
	background-color: #EEEEEE;
	justify-content: normal;
}

.verify-content {
	margin: 0px auto;
	width: 80%;
}

.verify-txt {
	color: #4D646F;
	font-size: 14px;
	line-height: 20px;
	padding-top: 24px;
}

.verify-renew-btn {
	background-image: url(../images/icons/renew.png);
	background-position: right center;
	background-repeat: no-repeat;
	color: #607D8B;
	font-size: 14px;
	display: inline-block;
	padding-right: 24px;
}

/* modals end  */

/* profile nav */
.profile-nav {
	font-size: 24px;
	line-height: 36px;
}

.profile-nav>li {
	border-radius: 4px;
	margin: 12px 0px;
	text-indent: 12px;
}
.profile-nav>li a, .profile-nav>li a:hover{
	color: #4D646F;
	text-decoration: none;
}
.profile-nav>li a:hover{
	color: white;
}
.profile-nav>li.focus a, .profile-nav>li.focus a:hover{
	color: white;
}
.profile-nav>li:hover {
	color: white;
	background-color: #09686D;
}
.profile-nav>li:hover, .profile-nav>li.focus {
	color: white;
	background-color: #09686D;
}

/* 課程卡 */
.course-card {
	border-radius: 15px;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
}

.course-card .cover img {
	border-radius:  15px 15px 0px 0px;
	visibility: hidden;
}


.course-card:hover .cover img {
	visibility: visible;
}

.course-card .cover {
	border-radius:  15px 15px 0px 0px;
	background-size: cover;
	background-position: center;
}


@media screen and (max-width: 768px) {
	.course-card .cover, .course-card .cover img {
		border-radius:  15px 0px 0px 15px;
	}
}

.course-card a,
.course-card a:hover {
	color: #263238;
	text-decoration: none;
}

.course-card a h6 {
	color: #4059AD;
	font-size: 14px;
	font-weight: normal;
	line-height: 32px;
	margin: 0px;
	padding: 0px;
}

.course-card a .card-title {
	font-size: 18px;
	height: 24px;
	line-height: 24px;

}

.course-card a .card-text {
	color: #455A64;
	font-size: 16px;
	line-height: 24px;
	height: 72px;
}

.course-card .sub {
	color: #455A64;
	font-size: 14px;
	line-height: 32px;
	height: 32px;
}

/* 課程卡 END */

/* 輪播業鈕客制 */

.carousel-indicators {
	padding-top: 32px;
}

.carousel-indicators [data-bs-target] {
	background-color: #AEBFC7;
	border-radius: 4px;
	flex: 0 0 auto;
	height: 8px;
	margin-left: 7px;
	margin-right: 7px;
	width: 48px;
}

.carousel-indicators .active {
	background-color: #00C3CD;
}

.carousel-control-prev,
.carousel-control-next {
	background-color: white;
	border-radius: 80px;
	height: 80px;
	width: 80px;
}

.carousel-control-prev {
	margin-left: -270px;
}

.carousel-control-next {
	margin-right: -270px;
}

.carousel-control-prev-icon {
	background-image: url(../images/sliders/prev.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 37px;
}

.carousel-control-next-icon {
	background-image: url(../images/sliders/next.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 37px;
}


/* 輪播業鈕客制 END */

#home-kv .txt1 {
	font-size: 44px;
	line-height: 55px;
}

#home-kv .txt2 {
	font-size: 22px;
	line-height: 40px;
}

@media screen and (max-width: 768px) {
	#home-kv .txt1 {
		font-size: 32px;
		line-height: 42px;
	}

	#home-kv .txt2 {
		font-size: 16px;
		line-height: 32px;
	}

	.carousel-control-prev {
		margin-left: -180px;
	}
	
	.carousel-control-next {
		margin-right: -180px;
	}
}

#home-kv .app-btn {
	border: none;
	font-weight: bold;
	background-color: #00C3CD;
}

#home-kv .app-btn:hover {
	
	background-image: linear-gradient(180deg, #9BE6E9 0%, #8FA7F7 100%);
}

#home-txt {
	color: white;
	margin-top: -100px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
}

@media screen and (max-width: 576px) {
	#home-kv .txt1 {
		font-size: 36px;
	}

	#home-kv .txt2 {
		font-size: 18px;
		line-height: 26px;
	}
}


/*招呼*/

#hello-txt {
	color: black;
	text-align: center;
	
}
#hello-kv .txt2 {
	font-size: 18px;
	line-height: 46px;
	background-image: linear-gradient(180deg, #9BE6E9 0%, #8FA7F7 100%);
}
#hello-kv .hello-close {
	float: right;
	margin-right: 30px;
}

#hello-kv .hello-close:hover {
	cursor: pointer;
  }

/*首頁下方-開始訂閱*/
#subscribe-kv {
	height: 400px;
	background-color: #7BDCE0;
	;
}

#subscribe-kv .txt1 {
	font-size: 44px;
	line-height: 55px;
}

#subscribe-kv .txt2 {
	font-size: 22px;
	line-height: 40px;
}



@media screen and (max-width: 768px) {
	#subscribe-kv .txt1 {
		font-size: 32px;
		line-height: 42px;
	}

	#subscribe-kv .txt2 {
		font-size: 16px;
		line-height: 32px;
	}

}

#subscribe-kv .app-btn {
	border: none;
	font-weight: bold;
	color: white;
	background-color: #09686D;
}

#subscribe-kv .app-btn:hover {
	
	background-image: linear-gradient(180deg, #9BE6E9 0%, #8FA7F7 100%);
}
#subscribe-txt {
	color: black;
	margin-top: -50px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
}
@media screen and (max-width: 576px) {
	#subscribe-kv .txt1 {
		font-size: 32px;
		line-height: 42px;
	}

	#subscribe-kv .txt2 {
		font-size: 16px;
		line-height: 32px;
	}
	
}




#home-coursecards-title {
	color: rgba(58, 75, 83, 0.9);
	font-weight: 400;
	margin-top: 96px;
	text-align: center;
}

#home-coursecards-title .txt1 {
	font-size: 36px;
	font-weight: 400;
	letter-spacing: 3px;
}

#home-coursecards-title .txt2 {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 2px;
}

@media screen and (max-width: 576px) {
	#home-coursecards-title .txt1 {
		font-size: 30px;
	}

	#home-coursecards-title .txt2 {
		font-size: 20px;
	}
}

#home-categories {
	margin: 32px 0px 72px 0px;
}

#home-categories .nav-item {
	margin: 0px 30px;
}

#home-categories .nav-link {
	border-radius: 32px;
	color: #4D646F;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 48px;
	padding: 0px 32px;
	text-decoration: none;
}

#home-categories .nav-link:hover {
	background-color: #4059AD;
	color: white;
}

#home-categories .nav-link.active {
	border: 1px solid #4059AD;
	color: #4059AD;
}

#home-categories .nav-link.active:hover {
	color: white;
}

@media screen and (max-width: 576px) {
	#home-categories .nav-item {
		margin: 12px;
	}

	#home-categories .nav-link {
		padding: 0px 24px;
	}
}

#home-slider-courses .carousel-caption {
	left: 7%;
	text-align: left;
	top: 20%;
}

#home-slider-courses h1 {
	color: #B0BEC5;
	font-size: 44px;
	line-height: 64px;
}

#home-slider-courses h4 {
	color: #B7E4E6;
	font-size: 22px;
	line-height: 40px;
}

#home-slider-courses .photo {
	background-size: cover;
	background-position: center;
}

#home-slider-courses .app-btn {
	background-color: #00C3CD;
}

@media screen and (min-width: 1200px) {
	#home-slider-courses .pagination{
		bottom:0px;
		position: absolute ;
		left:0px;
	}
}
/* 課程介紹 */

#home-course-intro .intro {
	margin-top: 15%;
}

#home-course-intro .intro h2 {
	color: #4059AD;
	line-height: 45px;
	font-size: 36px;
}

#home-course-intro .intro p {
	color: #000000;
	line-height: 32px;
	padding: 12% 0px 24px 0px;
	font-size: 18px;
}

#home-course-intro .intro .app-btn {
	border: 2px solid #09686D;
	border-radius: 24px;
	color: #09686D;
	font-size: 18px;
	line-height: 48px;
}

#home-course-intro .photo {
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	display: block;
	margin: 0px auto;
	width: 96%;
}

#home-course-intro .space {
	height: 180px;
}

#slider-home-coursecards-sm div[itemprop="pagination"]{
	left:0px;
	margin-top:-20px;
	position:absolute;
	top:50%;
	width:100%;
}

#slider-home-coursecards-sm .carousel-control-prev, #slider-home-coursecards-sm .carousel-control-next {
	background-color:transparent;
	border-radius: 40px;
	display:block;
	position: absolute;
	margin: 0px;
	height: 40px;
	width: 40px;
}

#slider-home-coursecards-sm .carousel-control-prev-icon, #slider-home-coursecards-sm .carousel-control-next-icon {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 10px 24px;
}

#slider-home-coursecards-sm .carousel-control-prev{
	left:-20px;
	top:0px;
}

#slider-home-coursecards-sm .carousel-control-next{
	right:-20px;
	top:0px;
}

#slider-home-coursecards-sm .pagination{
	left:0px;
	margin-top:-20px;
	position: absolute;
	top:50%;
	width: 100%;
}

@media screen and (max-width: 1200px) {
	#home-course-intro .intro {
		margin: 6%;
	}

	#home-course-intro .intro p {
		padding-bottom: 12px;
		padding-top: 12px;
	}
}
@media screen and (max-width: 960px) {
	#home-course-intro .photo {
		margin: 0px auto;
		width: 90%;
	}

	#home-course-intro .space {
		height: 54px;
	}
}

@media screen and (max-width: 768px) {
	#home-course-intro .intro h2 {
		font-size: 24px;
		font-weight: normal;
		line-height: 44px;
	}

	#home-course-intro .intro p {
		line-height: 28px;
	}
}

.item-role.focus{
	background-image:url(../images/icons/checked.png);
	background-repeat:no-repeat;
	background-position: 90% center;
	color:#005C5B;

}

/* 所有課程 */
.course-menu h3 a,
.course-menu h3 a:hover {
	color: #09686D;
	font-size: 18px;
	line-height: 26px;
}

.course-menu h5 {
	color: #455A64;
	font-size: 16px;
	font-weight: normal;
	line-height: 24px;
}

.course-menu a,
.course-menu a:hover {
	color: #263238;
	font-size: 18px;
	line-height: 26px;
}

.course-menu ul {
	border-top: 1px solid #90A4AE;
	margin-bottom: 48px;
	padding-top: 12px;
}

.course-menu li {
	font-size: 18px;
	line-height: 26px;
	padding-bottom: 12px;
}


.course-menu li:hover, .course-menu li.focus {
	background-color: #D6DFE3;
}

.course-menu li a,
.course-menu li a:hover {
	color: #263238;
	text-decoration: none;
}

.course-btn {
	color: #00A8B5;
	font-size: 18px;
	line-height: 26px;
	text-align: right;
}


@media print {
	footer {page-break-after: always;}
}