@charset "utf-8";
/* CSS Document */
html, body{
	width: 100%;
	height: 100%;
	display: block;
	margin:0;
	padding:0;
	position: relative;
	font-size: 1rem;
	line-height: 1.5rem;
	font-family: 'Noto Sans TC', '微軟正黑體', 'Arial', sans-serif;
	background-image: url(../images/bg.jpg);
}


a{	color: inherit; text-decoration: none;}
a:focus{ text-decoration: none;}
a:hover{ text-decoration: none; color:#ca7c00;}



::selection {
background: #94a28a;
color: #fff;
}
::-moz-selection {
background: #94a28a;
color: #fff;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}


/* srollbar */
::-webkit-scrollbar {
    width: 5px;
    background-color: #ffffff;
}

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0px 0 0px 10px;
    padding-left: 20px;
    background-color: honeydew;
    box-shadow: 0 0 3px #94a28a inset;
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #94a28a;

}


.fw-400{font-weight: 400;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}

.c-ffffff{color:#ffffff;}
.c-94a28a{color:#94a28a;}
.c-fef9ee{color:#fef9ee;}
.c-d7dcd3{color:#d7dcd3;}
.c-5b5b5b{color:#5b5b5b;}
.c-aeaf51{color:#aeaf51;}
.c-66a5cb{color:#66a5cb;}
.c-c78588{color:#c78588;}
.c-e7b550{color:#e7b550;}
.c-856aa5{color:#856aa5;}
.c-ca7c00{color:#ca7c00;}
.c-556f43{color:#556f43;}
.c-dddddd{color:#dddddd;}

.bg-ffffff{background-color:#ffffff!important;}
.bg-94a28a{background-color:#94a28a!important;}
.bg-fef9ee{background-color:#fef9ee!important;}
.bg-d7dcd3{background-color:#d7dcd3!important;}
.bg-5b5b5b{background-color:#5b5b5b!important;}
.bg-aeaf51{background-color:#aeaf51!important;}
.bg-66a5cb{background-color:#66a5cb!important;}
.bg-c78588{background-color:#c78588!important;}
.bg-e7b550{background-color:#e7b550!important;}
.bg-856aa5{background-color:#856aa5!important;}
.bg-ca7c00{background-color:#ca7c00!important;}

.border-ffffff{border-color:#ffffff !important;}
.border-94a28a{border-color:#94a28a !important;}
.border-fef9ee{border-color:#fef9ee !important;}
.border-d7dcd3{border-color:#d7dcd3 !important;}
.border-5b5b5b{border-color:#5b5b5b !important;}
.border-aeaf51{border-color:#aeaf51 !important;}
.border-66a5cb{border-color:#66a5cb !important;}
.border-c78588{border-color:#c78588 !important;}
.border-e7b550{border-color:#e7b550 !important;}
.border-856aa5{border-color:#856aa5 !important;}
.border-ca7c00{border-color:#ca7c00 !important;}

.btn-000000{background-color: #000000;color: #ffffff;}
.btn-000000:focus,.btn-000000:hover{color:#ffffff!important;}

.btn-94a28a{background-color: #94a28a;color: #ffffff;}
.btn-94a28a:focus,.btn-94a28a:hover{background-color: #aeaf51!important;color:#ffffff!important;}

.btn-outline-94a28a{border-color: #94a28a;background-color: transparent;color:#94a28a;}
.btn-outline-94a28a:focus,.btn-outline-94a28a:hover{background-color: #94a28a!important;color:#ffffff!important;}

.btn-aeaf51{background-color: #aeaf51;color: #ffffff;}
.btn-aeaf51:focus,.btn-aeaf51:hover{background-color: #556f43!important;color:#ffffff!important;}

.btn-outline-aeaf51{border-color: #aeaf51;background-color: transparent;color:#aeaf51;}
.btn-outline-aeaf51:focus,.btn-outline-aeaf51:hover,.btn-outline-aeaf51.active{background-color: #aeaf51!important;color:#ffffff!important;}

.btn-5b5b5b{background-color: #5b5b5b;color: #ffffff;}
.btn-5b5b5b:focus,.btn-5b5b5b:hover{background-color: #aeaf51!important;color:#ffffff!important;}

.btn-outline-5b5b5b{border-color: #5b5b5b;background-color: transparent;color:#5b5b5b;}
.btn-outline-5b5b5b:focus,.btn-outline-5b5b5b:hover{background-color: #5b5b5b!important;color:#ffffff!important;}

.btn-ca7c00{background-color: #ca7c00;color: #ffffff;}
.btn-ca7c00:focus,.btn-ca7c00:hover{background-color: #a16300!important;color:#ffffff!important;}

.btn-outline-ca7c00{border-color: #ca7c00;background-color: transparent;color:#ca7c00;}
.btn-outline-ca7c00:focus,.btn-outline-ca7c00:hover{background-color: #ca7c00!important;color:#ffffff!important;}

.btn-556f43{background-color: #556f43;color: #ffffff;}
.btn-556f43:focus,.btn-556f43:hover{background-color: #94a28a!important;color:#ffffff!important;}

.btn-outline-556f43{border-color: #556f43;background-color: transparent;color:#556f43;}
.btn-outline-556f43:focus,.btn-outline-556f43:hover{background-color: #ca7c00!important;color:#ffffff!important;}


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


.btn-guru-round{
	position: relative;
	padding:.3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn-guru-round:before{
	content:'';
	width: 100%;
	padding-bottom: 100%;
	display: block;
	position: absolute;
	left: 0;right: 0;
	top: 0;bottom:0;
	margin:auto;
	background-image: url(../images/btn-round-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: -1;
}
.btn-guru-square{
	position: relative;
	padding:.3rem;
	background-image: url(../images/btn-square-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
.btn-guru-square:hover{
	color:#ffffff;
}
.btn-guru-square2{
	position: relative;
	padding:.5rem;
	background-image: url(../images/btn-square2-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
.btn-guru-square2:hover{
	color:#ffffff;
}
.btn-guru-square-deco{
	position: relative;
	padding:.3rem;
	background-image: url(../images/btn-square-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: .3s .03s;
}
.btn-guru-square-deco:focus,
.btn-guru-square-deco:hover{
	color:#ffffff;
}
.btn-guru-square-deco:before{
	content:'';
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	left: -30px;
	top: 0;bottom: 0;
	margin:auto 0;
	background-image: url(../images/deco-01.png);
	background-position: right -10px center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: .3s .03s;
}
.btn-guru-square-deco:hover:before{
	background-position: right -6px center;
}
.btn-guru-square-deco:after{
	content:'';
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	right: -30px;
	top: 0;bottom: 0;
	margin:auto 0;
	background-image: url(../images/deco-01.png);
	background-position: right -10px center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: .3s .03s;
	transform: rotateY(180deg);
}
.btn-guru-square-deco:hover:after{
	background-position: right -6px center;
}

.btn-guru-square-deco-l{
	position: relative;
	padding:.3rem;
	background-image: url(../images/btn-square-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: .3s .03s;
}
.btn-guru-square-deco-l:focus,
.btn-guru-square-deco-l:hover{
	color:#ffffff;
}
.btn-guru-square-deco-l:before{
	content:'';
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	left: -30px;
	top: 0;bottom: 0;
	margin:auto 0;
	background-image: url(../images/deco-01.png);
	background-position: right -10px center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: .3s .03s;
}
.btn-guru-square-deco-l:hover:before{
	background-position: right -6px center;
}

.btn-guru-square-deco-r{
	position: relative;
	padding:.3rem;
	background-image: url(../images/btn-square-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: .3s .03s;
}
.btn-guru-square-deco-r:focus,
.btn-guru-square-deco-r:hover{
	color:#ffffff;
}
.btn-guru-square-deco-r:after{
	content:'';
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	right: -30px;
	top: 0;bottom: 0;
	margin:auto 0;
	background-image: url(../images/deco-01.png);
	background-position: right -10px center;
	background-size: contain;
	background-repeat: no-repeat;
	transition: .3s .03s;
	transform: rotateY(180deg);
}
.btn-guru-square-deco-r:hover:after{
	background-position: right -6px center;
}

/*.btn-follow{
	border-color: #c78588;
	color:#c78588;
}
.btn-follow:hover{
	border-color: #856aa5;
	color:#856aa5;
}
.btn-follow>span:before{
	content:'\F59E';
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
}
.btn-follow:focus,
.btn-follow.active{
	border-color: #c78588;
	background-color: #c78588;
	color:#ffffff;
}*/






/*共用樣式*/
.form-switch .form-check-input:checked{
	background-color: #94a28a;
	border-color: #94a28a;
}
.form-check-input:focus,
.form-control:focus{
	border-color: #aeaf51;
	box-shadow: 0 0 0 0.25rem rgba(148,162,138,0.25);
}
.form-check-input:checked{
	border-color: #aeaf51;
	background-color: #aeaf51;
}
input.form-control:disabled{
	background-color: #ffffff;
	color:#aaaaaa;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
	background-color: #aeaf51;
}


/*select2*/
.select2-container--default .select2-selection--multiple{
	border-color: #dee2e6;
	min-height: 37.6px;
	width: 100%!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
	font-size: .9rem;
	background-color: #e8ece6;
	border-color: #94a28a;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
	/*padding-left: 5px;*/
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
	border-color: #dee2e6;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	border-color: #94a28a;
	font-size: .8rem;
	border-right: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
	color:#ffffff;
	background-color: #94a28a;
}


















/*wrap & side-btn ============================================*/
.wrap{
	width: 100%;
	min-height: 100%;
	display: block;
	position: relative;
}

.side-btn{
	width: 40px;
	position: fixed;
	right: 5px;
	bottom:80px;
	display: none;
	z-index: 60;
}
.side-btn .btn-goTop{
	width: 40px;
	height: 40px;
	line-height: 20px;
	font-size: 1.5rem;
	color:#ca7c00;
	transition: .3s .03s;
}
.side-btn .btn-goTop:hover{
	color:#ffffff;
}
@media (min-width: 768px) {
	.side-btn{
		right: 10px;
		bottom:50px;
	}
}










/*footer ==========================================*/
.footer{
	width: 100%;
	display: block;
	position: relative;
	background-color: #eaeaef;
}
.footer .footer-copyright{
	width: 100%;
	display: block;
	position: relative;
	padding: .8rem 0;
	border-top: 1px solid #5b5b5b;'
}
.footer .footer-content{
	width: 100%;
	display: block;
	position: relative;
	padding: 1rem 0;
}
.footer .footer-content .footer-logo{
	max-width: 100%;
	width: 160px;
	display: block;
	margin:auto;
}
.footer .footer-content .footer-page{
	max-width: 100%;
	width: 160px;
}
.footer .footer-content .footer-page-list{
	list-style: none;
	padding:0;
}
.footer .footer-content .footer-page-list>li{
	margin-bottom: .3rem;
}
.footer .footer-content .footer-page-list>li>a{
	text-decoration: none;
	transition: .3s .03s;
}
.footer .footer-content .footer-page-list>li>a:hover{
	color:#94a28a;
}
/*social-media*/
.footer .social-media-group{
	width: 100%;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-image: url(../images/leaft-bg.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.footer .social-media-group>div{
	margin-top: -20px;
}
.footer .social-media-group .social-media-btn{
	font-size: 1.5rem;
	margin: 0 .2rem;
	color:#ca7c00;
	transition: .3s .03s;
	text-decoration: none;
}
.footer .social-media-group .social-media-btn:hover{
	color:#ffffff;
}


/*mobile-bottom*/
.mobile-fixedBottom{
	width: 100%;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	background-image: url(../images/leaft-bg.png);
	background-size: 125% auto;
	background-position: center top;
	z-index: 50;
}
.mobile-bottom-btn-group{
	text-align: center;
	display: flex;
}
.mobile-bottom-btn{
	width: 70px;
	height: 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color:#ffffff;
	background-image: url(../images/btn-round-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-decoration: none;
	transition: .3s .03s;
}
.mobile-bottom-btn:focus,
.mobile-bottom-btn:hover{
	transform: scale(1.05);
	color:#ca7c00;
}
.mobile-bottom-btn>i{
	font-size: 1.5rem;
	margin-bottom: -.2rem;
}
.mobile-bottom-btn>span{
	font-size: .6rem;
}
@media (min-width: 768px) {
	.mobile-fixedBottom{
		display: none;
	}
}


/*header ================================================*/
.header{
	width: 100%;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
}
.header>.container-xl{
	background-image: url(../images/header-bg2.png);
	background-position: center bottom;
	background-size: contain;
	background-repeat: repeat no-repeat;
}
.header .navbar{
	padding-top: 0;
}
.header .navbar .navbar-brand.goDown{
	top: -100px;
	transition: 1s;
}
.header .navbar .navbar-brand{
	padding-top: 0;
	text-align: center;
	margin:0 auto;
	position: relative;
	top: 0px;
	transition: 1s;
}
.header .navbar .navbar-brand>img{
	width: 160px;
	display: block;
	position: relative;
	left: 0;right: 0;
	margin:0 auto;
}
.header-link-list{
	display: flex;
	margin-top: -1.5rem;
}
.header-link{
	 width: 30px;
	 height:30px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 position: relative;
	 background-image: none;
	 background-size: contain;
	 font-size: 1.25rem;
	 color:#ffffff;
	 background-color: rgba(148,162,138,.5);
	 /*background-color: rgba(202,124,0,.5);*/
	 border-radius: 50%;
	 transition: .3s .03s;
}
.header-link:hover{
	color:#ca7c00;
	transform: scale(1.05);
}
@media (min-width: 500px) {
	.header>.container-xl{
		background-position: center bottom;
	}
	.header .navbar .navbar-brand>img{
		width: auto;
	}
	.header-link-list{
		display: flex;
		margin-top: -2rem;
	}
	.header-link{
		 width: 50px;
		 height:50px;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 position: relative;
		 background-image: url(../images/btn-round-bg.png);
		 background-color: transparent;
		 background-size: contain;
		 font-size: 1.25rem;
		 color:#ffffff;
	}
}
@media screen and (max-width:350px){
	.header .navbar .navbar-brand>img{
		width: 120px;
	}
	.header-link-list{
		margin-top: -.5rem;
	}
}


/*menu=====================================================*/
#MenuModal .modal-content{
	top: 50px;
}
#MenuModal .modal-header{
	border-bottom: 0;
}
#MenuModal .member-photo{
	width: 80px;
	height: 80px;
	display: block;
	position: relative;
	background-color: #5b5b5b;
	border-radius: 50%;
	left: 0;
	right: 0;
	margin:-50px auto -2rem;
	border:2px solid #58461a;
	background-size: cover;
	background-position: center center;
}
#MenuModal .member-photo:before{
	content:'';
	position: absolute;
	width: 30px;
	height: 80px;
	background-image: url(../images/deco-02.png);
	left: -20px;
	bottom:0;
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
	transform: rotateZ(-10deg);
	pointer-events: none;
}

.login-guest .line-text{
	width: 100%;
	display: block;
	position: relative;
	margin:0;
}
.login-guest .line-text:before{
	content:'';
	width:100%;
	height: 1px;
	background-color: #eaeaef;
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.login-guest .line-text>span{
	display: inline-block;
	position: relative;
	padding:.5rem 1rem;
	background-color: #ffffff;
	z-index: 1;
	font-size: .8rem;
}

.login-guest .social-media-login{
	width: 50px;
	display: inline-block;
	margin:.2rem;
	transition: .3s .03s;
}
.login-guest .social-media-login>img{
	width: 100%;
	transition: .3s .03s;
}
.login-guest .social-media-login:hover{
	transform: scale(1.1);
}


.member-name>strong{
	font-size: 1.15rem;
}
.login-auth{
	width: 100%;
	display: block;
	position: relative;
	padding-bottom: .5rem;
}

#MenuModal .navbar{
	justify-content: center;
}
#MenuModal .navbar .nav-link{
	width: 100px;
	height: 90px;
	padding:.5rem 1rem;
	margin:.2rem;
	color:#ffffff;
	transition: .3s .03s;
}
#MenuModal .navbar .nav-link:hover{
	transform: scale(1.05);
	/*box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;*/
}
#MenuModal .navbar .nav-link>i.bi{
	font-size: 2rem;
	display: block;
}
@media (min-width: 768px) {
	#MenuModal .navbar .nav-link{
		margin:.5rem;
	}
}
#MenuModal  .auth-menu{
	border-top: 1px solid #eaeaef;
	border-bottom: 1px solid #eaeaef;
}
#MenuModal .login-auth .member-point img{
	width: 20px;
}



/*類別下拉*/
#offcanvasCourse{
	height: 100vh;
}
#offcanvasCourse .course-category-pc{
	display: none;
}
#offcanvasCourse .course-category-pc>ul{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding:0;
	margin:0;
	list-style: none;
	flex-wrap: wrap;
}
#offcanvasCourse .course-category-pc>ul>li{
	width: 200px;
	max-width: 30%;
	margin:.5rem;
}
#offcanvasCourse .course-category-pc .course-category-btn{
	display: inline-block;
	width: 100%;
	text-align: center;
	padding:1rem;
	border-radius: 4px;
	font-size: 1.25rem;
	color:#ffffff;
	background-color:#94a28a;
	transition: .3s .03s;
}
#offcanvasCourse .course-category-pc .course-category-btn.active,
#offcanvasCourse .course-category-pc .course-category-btn:focus,
#offcanvasCourse .course-category-pc .course-category-btn:hover{
	/*background-color: #d7dcd3;*/
	background-color: #ca7c00;
}


#offcanvasCourse .course-category-pc .course-category-list>ul{
	display: none;
	position: relative;
	padding:0;
	margin:1rem 0;
	list-style: none;
	text-align: center;
}
#offcanvasCourse .course-category-pc .course-category-list>ul>li{
	display: inline-block;
	padding:.5rem 0;
}
#offcanvasCourse .course-category-pc .course-category-list>ul>li>a{
	display: block;
	padding:.5rem 1rem;
	border:1px solid #dddddd;
	color:#5b5b5b;
	border-radius: 999px;
	transition: .3s .03s;
}
#offcanvasCourse .course-category-pc .course-category-list>ul>li>a:focus,
#offcanvasCourse .course-category-pc .course-category-list>ul>li>a:hover{
	border-color: #94a28a;
	color:#94a28a;
}
#offcanvasCourse .course-category-mobile .accordion-item{
	border:0px solid transparent;
}
#offcanvasCourse .course-category-mobile .accordion-item .accordion-button{
	font-size: 1.2rem;
	padding:1rem 0;
	color:#94a28a;
}
#offcanvasCourse .course-category-mobile .accordion-item .accordion-button>i.bi{
	margin-right: .5rem;
}
#offcanvasCourse .course-category-mobile .accordion-item .accordion-button::after{
	display: none;
}
#offcanvasCourse .course-category-mobile .accordion-item .accordion-button:not(.collapsed){
	background-color: transparent;
	box-shadow: none;
	outline: 0;
	color:#ca7c00;
}
#offcanvasCourse .course-category-mobile .accordion-item .accordion-collapse .list-all{
	padding:.5rem 1rem;
	background-color: #fafafa;
	list-style: none;
	border-radius: .5rem;
}
#offcanvasCourse .course-category-mobile .accordion-item .accordion-collapse .list-all>li{
	display: inline-block;
	padding:.5rem .2rem;
}
#offcanvasCourse .course-category-mobile .accordion-item .accordion-collapse .list-all>li>a{
	display: block;
	padding:0 1rem;
	border:1px solid #dddddd;
	color:#5b5b5b;
	border-radius: 999px;
	transition: .3s .03s;
}

@media (min-width: 768px) {
	#offcanvasCourse{height: 100vh}
	#offcanvasCourse .course-category-pc{display: block;}
	#offcanvasCourse .course-category-mobile{display: none;}
}
@media (min-width: 992px) {
	#offcanvasCourse{	height: 50vh}
}
@media (min-width: 1200px) {
	#offcanvasCourse{	height: 35vh}
}




/*搜尋下拉*/
#offcanvasSearch{
	height: 144px;
}
/*@media (min-width: 992px) {
	#offcanvasSearch{	height: 20vh}
}
@media (min-width: 1200px) {
	#offcanvasSearch{	height: 20vh}
}*/


@media screen and (max-width:990px){


}
@media screen and (max-width:768px){


}
@media screen and (max-width:380px){



}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}