@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url("bootstrap.css");
@import url(fontawesome5.13.0/css/all.min.css);
@import url('font/css/fontello.css'); 
@import url("../../plugins/sweetalert/2-11.0.16/sweetalert2.css");
@import url("../../plugins/pagination-master/css/style.css");
@import url("../../plugins/aos/aos.css");
@import url('https://fonts.googleapis.com/css2?family=Arizonia&display=swap');


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

@font-face {
  font-family: 'fontello';
  src: url('./font/fontello.eot?91255673');
  src: url('./font/fontello.eot?91255673#iefix') format('embedded-opentype'),
       url('./font/fontello.svg?91255673#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
html { position: relative; min-height: calc(100% - 0px);  }
body {    /* Margin bottom by footer height */min-height: 100vh; margin-bottom: 0px; display: flex; flex-direction: column; transition: opacity 0.4s 0.7s; }
body { -webkit-text-size-adjust: none; font-size: 12px; overflow-y: scroll; }
body, td, th { font-family: Verdana, Geneva, sans-serif; }
img { max-width: 100%; height: auto; }
#hiddle { display: none; }
.iframe_ch { display: none; }
.license-box input { display: none; }
select::-ms-expand { display: none; }
select { }
.hide{opacity: 0}
:root{
	--mainGreen:#668144;
	--mainGreenLight:#a9b78d;
	--mainGreenBg: #dee2d5;
	--mainBlueLight:#2695d4;
	--mainOrg: #ff8e31;
}
main{
	flex-grow: 1;
}
a{
	color: inherit;
}

/*div, a, section, article, span, img, h1, h2, h3, h4, h5, h6 { -webkit-user-select: none; -moz-user-select: none; }*/
#rand-img { cursor: pointer; }
#event_left, #event_right { width: 120px; height: 250px; }
.event_left_link a { padding: 5px 0; display: block; font-size: 14px; color: #888; font-family: 'Noto Sans TC', '微軟正黑體'; }
.nodata { font-size: 14px; line-height: 1.8; color: #666; }
.label { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 400; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }
.label-danger { background-color: #ff5d48; }
.center { text-align: center; }
.card_num_block .card_num_label { display: block; font: normal 14px '微軟正黑體'; letter-spacing: 1px; line-height: 25px; cursor: default; }
.card_num { padding: 3px 5px; font: normal 14px '微軟正黑體'; letter-spacing: 1px; color: #555; width: 55px; }
.card_info { font-size: 13px; line-height: 1.4; }
.file input { width: 100%; min-width: 14rem; margin: 0; filter: alpha(opacity=0); opacity: 1; top: 0; right: 0; left: 0; z-index: 5; padding: .0rem 1rem; line-height: 1.5; color: #555; user-select: none; background-color: #fff; border: 1px solid #ccc; border-radius: 0rem; }
.ifile { position: absolute; opacity: 0; filter: alpha(opacity=0); padding: 0; }
.upfile { margin: -5px 0 0; }
.newfilebtn { border: none; padding: 3px 12px; color: #fff; background: #64b0f2; border-radius: 0px; }
/*.swal2-container button, .swal2-modal .swal2-title, .swal2-modal .swal2-content { font-family: 'Century Gothic', '微軟正黑體'; font-size: 20px; }
.swal2-footer, .swal2-footer a{ font-family: 'Century Gothic', '微軟正黑體'; font-size: 20px; }
*/
/*.hide { display: none }*/
.swal2-styled.swal2-confirm{
	min-width: 80px;
	background: var(--mainGreen);

}
.swal2-styled.swal2-cancel{
	min-width: 80px;
	background: #c6002f;
}
.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px #66814440;
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> public <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.btnCustom { height: 36px; padding: 0; border-radius: 9px; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; padding: 0 5px; line-height: 26px; position: relative; background: #d3dbc6; color: #668144; transition: all 0.6s; }
.btnCustom:hover, .btnCustom:focus, .btnCustom.active {  background: #668144; color: #d3dbc6;  outline: none; box-shadow: none }
.btnCustom:disabled {}
.btnCustom.btnGray {  background: #ccc; color: #555; }
.btnCustom.btnGray:hover, .btnCustom.btnGray:focus, .btnCustom.btnGray.active {  background: #999; color: #fff; }
.btnCustom.btnGray:disabled {}
.btnCustom.btnOrg { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; padding: 0 5px; line-height: 26px; position: relative; top: -2px; background: #ff9900; color: #fff; transition: all 0.6s; }
.btnCustom.btnOrg:hover, .btnCustom.btnOrg:focus, .btnCustom.btnOrg.active {opacity: 0.8;}
.btnCustom.btnOrg:disabled {opacity: 0.8;}
.btnCustom-outline { height: 36px; padding: 0; border-radius: 5px; border: solid 1px var(--mainGreen); background: none; font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 30px; letter-spacing: 1px; color: var(--mainGreen); }
.btnCustom-outline:hover, .btnCustom-outline:focus, .btnCustom-outline.active { color: #fff; background: var(--mainGreen); }
.btnCustom-outline:active, .btnCustom-outline:focus { outline: none; box-shadow: none }
.btnCustom-outline:disabled, .btnCustom-outline.disabled { background-color: #001699; color: #fff; }
.btnCustom-outline.btnBlue { height: 36px; padding: 0; border-radius: 0; border: solid 1px #004a9e; background: none; font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 30px; letter-spacing: 1px; color: #004a9e; }
.btnCustom-outline.btnBlue:hover, .btnCustom-outline.btnBlue:focus, .btnCustom-outline.btnBlue.active { color: #fff; background: #004a9e; }
.btnCustom-outline.btnBlue:active, .btnCustom-outline.btnBlue:focus { outline: none; box-shadow: none }
.btnCustom-outline.btnBlue:disabled, .btnCustom-outline.disabled.btnBlue { background-color: #004a9e; color: #fff; }
.btnCustom-outline.btnWhite { border-radius: 0; border: solid 1px #fff; color: #fff; }
.btnCustom-outline.btnWhite:hover, .btnCustom-outline.btnWhite:focus { color: #002254; background: #fff; }
.btnCustom-outline.btnGray { border: solid 1px #999; color: #777; }
.btnCustom-outline.btnGray:hover, .btnCustom-outline.btnGray:focus { color: #fff; background: #999; }
.btnCustom-outline.btnOrange { border-radius: 0; border: solid 1px #e5a300; color: #e5a300; }
.btnCustom-outline.btnOrange:hover, .btnCustom-outline.btnOrange.active, .btnCustom-outline.btnOrange:focus { color: #fff; background: #e5a300; }
.btnCustom-outline.btnRed { border: solid 1px #c6002f; color: #c6002f; }
.btnCustom-outline.btnRed:hover, .btnCustom-outline.btnRed.active, .btnCustom-outline.btnRed:focus { color: #fff; background: #c6002f; }
.btnCustom-outline.googleBtn, .btnCustom-outline.googleBtn:focus { border-radius: 0; border: solid 1px #dd4e41; color: #dd4e41; background: none; }
.btnCustom-outline.googleBtn:hover, .btnCustom-outline.googleBtn.active { color: #fff; background: #dd4e41; }
.btnCustom-outline.facebookBtn, .btnCustom-outline.facebookBtn:focus { border-radius: 0; border: solid 1px #3b5998; color: #3b5998; background: none; }
.btnCustom-outline.facebookBtn:hover, .btnCustom-outline.facebookBtn.active { color: #fff; background: #3b5998; }
.btnCustom-outline.lineBtn, .btnCustom-outline.lineBtn:focus { border-radius: 0; border: solid 1px #02b801; color: #02b801; background: none; }
.btnCustom-outline.lineBtn:hover, .btnCustom-outline.lineBtn.active { color: #fff; background: #02b801; }
.tableRwdContent { display: none }
.tableCustomStyle { color: #555; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; }
.tableCustomStyle thead tr th { border-top: none; color: #fff; font: bold 18px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; background: #67aa11; }
.tableCustomStyle tbody tr td { border-top: none; font: normal 16px 'Century Gothic', '微軟正黑體'; color: #000; background: rgba(255, 255, 255, 0.6); }
.tableCustomStyle tbody tr:nth-child(2n+2) td { background: rgba(234, 242, 223, 0.6); }
.tableCustomStyle tbody tr:last-child td { border-top: none; border-bottom: double 3px #67aa11; }
.tableCustomStyle a { text-decoration: none; color: #6a9a1e; }
.tableCustomStyle a:hover { opacity: 0.6; }
.tableCustomStyle.table td.verticalAlignMmiddle{vertical-align: middle;}
.formCustomStyle { font-family: 'Century Gothic', '微軟正黑體'; }
.formCustomStyle .col-form-label { padding-top: 0px; padding-bottom: 0px; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #555; line-height: 36px; }
.formCustomStyle .form-group input.form-control, .formCustomStyle .form-group select.form-control { height: 36px; padding: 3px 5px; border: none; border-radius: 5px; line-height: 20px;	/*border: solid 1px #004a9e;*/ font: 400 16px 'Century Gothic', '微軟正黑體'; background: #f5f5f5; color: #222; }
.formCustomStyle .form-group input.form-control:focus, .formCustomStyle .form-group select.form-control:focus, .formCustomStyle .form-group textarea.form-control:focus { box-shadow: none; outline: none }
.formCustomStyle .form-group input.form-control-plaintext { font: normal 16px 'Century Gothic', '微軟正黑體'; }
.formCustomStyle .form-group textarea.form-control { border-radius: 5px; border: none;	/*border: solid 1px #004a9e;*/ font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 24px; color: #222; background: #f5f5f5; }
.formCustomStyle.formCustomStyle-borderBottom .form-group input.form-control, .formCustomStyle.formCustomStyle-borderBottom .form-group select.form-control { height: 36px; padding: 3px 5px; border: none; border-bottom: solid 1px #777; border-radius: 0px; font: normal 14px 'Century Gothic', '微軟正黑體'; line-height: 24px; }
.formCustomStyle .parsley-errors-list { color: #ff9e34 }
.formCustomStyle ul.parsley-errors-list { margin-bottom: 0px; }
.formCustomStyle .fileuploader-input .fileuploader-input-button, .formCustomStyle .fileuploader-popup .fileuploader-popup-content .fileuploader-popup-button.button-success { background-color: linear-gradient(135deg, #92b50f 0, #546b00 100%); }
.formCustomStyle .fileuploader-input .fileuploader-input-caption { color: #92b50f; }
.formCustomStyle.whiteForm .col-form-label { color: #fff; }
.formCustomStyle.whiteForm .form-group input.form-control, .formCustomStyle.whiteForm .form-group select.form-control { border: solid 1px #fff; background: rgba(255, 255, 255, 0.2); color: #fff; }
.formCustomStyle.whiteForm .form-group select.form-control { background: #6f6f6f; }
.formCustomStyle.whiteForm .form-group select.form-control option { background: #777; border: #fff }
.formCustomStyle.whiteForm .form-group textarea.form-control { border: solid 1px #fff; background: rgba(255, 255, 255, 0.2); color: #fff; }
.formCustomStyle.whiteForm{}

.cursor-pointer { cursor: pointer; }
.cursor-notallowed{ cursor: not-allowed; }
.tableHeaderHide { display: none }
.maxWidth-100px { max-width: 100px; }
.width-80px{width: 80px;}
.maxWidth-120px{width: 120px;}

.breadcrumb { margin-top: 10px; padding: 0.75rem 1rem 0px 0; margin-bottom: 0; list-style: none; background: none; border-radius: 0rem; }
.breadcrumb>li { float: left; font: normal 14px 'Century Gothic', '微軟正黑體'; }
.breadcrumb>li a { color: #666; }
.breadcrumb>li a:hover { opacity: 0.8; }
.breadcrumb>li+li::before { color: #666; }
.breadcrumb>.active { color: #001699; }

.mainContainer{
	margin-top: 20px;
}
.contentContainer { max-width: 1300px; margin: 0 auto; padding: 30px 0; font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 26px; }
.contentContainer img { max-width: 100% !important; height: auto; }
.contentContainer iframe { max-width: 100% !important; }

a:hover{
	text-decoration: none;
}
.insidePage { }
.insidePage .banner { width: 100%; height: 450px; position: relative; overflow: hidden; }
.insidePage .banner .img { width: 100%; height: 100%; position: absolute; top: 0; }
.insidePage .banner .img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.insidePage .banner .bgCover { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)); z-index: 5; }
.insidePage .banner .title { font: 400 140px 'Arizonia'; color: #fff; text-shadow: 2px 2px 0px var(--mainGreen); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; }
.insidePage .banner .title::before, .insidePage .banner .title::after { content: ''; width: 150px; height: 2px; position: absolute; bottom: -2px; left: 50%; z-index: 15; }
.insidePage .banner .title::before { background: #fff; transform: translateX(-100%); }
.insidePage .banner .title::after { background: var(--mainGreen); }

.listNoItem{
	width: 100%;
	padding: 100px 0 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.listNoItem .noItemIcon{
	margin-bottom: 15px;
	font-size: 40px;
	line-height: 40px;
	color:  var(--mainGreen);
}
.listNoItem .noItemText{
	 font: bold 22px 'Century Gothic', '微軟正黑體';
	 line-height: 22px;
	 letter-spacing: 0.5px;
	 color: #777;
	 text-align: center;
}
.listNoItem .noItemText span{
	margin-top: 5px;
	font: bold 16px 'Century Gothic', '微軟正黑體';
	line-height: 16px;
	display: inline-block;
	color: #aaa;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_header.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.header { position: relative; z-index: 500; }
.header .headerMain{width: 100%; height: 100px; border-bottom: solid 2px #b6dc83; box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); background: #fff; position: relative; z-index: 500;}
.header .headerMain .container { height: 100%; padding-left: 0px; padding-right: 0px; display: flex; align-items: center; position: relative; }
.header .logo { width: 260px; margin-right: 20px; }
.header .headerCourseNav{
	height: 100%;
	margin-right: 15px;
	position: relative;
}
.header .headerCourseNav .mainBtn{
	height: 100%;
	border: none;
	background: none;
	font-size: 18px;
	line-height: 20px;
	letter-spacing: 1px;
	color: #777;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s;
}
.header .headerCourseNav .mainBtn:focus{
	outline: none;
}
.header .headerCourseNav .mainBtn:hover{
	opacity: 0.6;
}
.header .headerCourseNav .mainBtn i{
	margin-right: 5px;
	font-size: 16px;
	color: var(--mainGreen);
	display: inline-block;
}
.header .headerCourseNav .courseNav{

	position: absolute;
	left: 50%;
	top: calc(100% + 2px);
	transform: translateX(-50%) ;
}
.header .headerCourseNav .courseNav .mainNav{
	width: 150px;
	margin-bottom: 0;
	background: #f9f9f9;
	position: relative;
}
.header .headerCourseNav .courseNav .mainNav>li{
}
.header .headerCourseNav .courseNav .mainNav>li>a{
	height: 40px;
	padding: 0 15px;
	border-bottom: solid 1px #ddd;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.5px;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.4s;
}
.header .headerCourseNav .courseNav .mainNav>li:hover>a, 
.header .headerCourseNav .courseNav .mainNav>li>a:hover{
	color: var(--mainGreen);
}
.header .headerCourseNav .courseNav .mainNav>li:hover .secNav{
	left: 100%;
	z-index: -2;
	opacity: 1;
}
.header .headerCourseNav .courseNav .mainNav>li:last-child>a{
	border: transparent;
}
.header .headerCourseNav .courseNav .mainNav>li>a .text{
	width: calc(100% - 15px);
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.header .headerCourseNav .courseNav .mainNav>li>a .icon{
	width: 7px;
	height: 12px;
	display: block;
	position: relative;
	overflow: hidden;
	right: 0;
	transition: all 0.4s;
}
.header .headerCourseNav .courseNav .mainNav>li:hover>a .icon,
.header .headerCourseNav .courseNav .mainNav>li>a:hover .icon{
	right: -5px;
}
.header .headerCourseNav .courseNav .mainNav>li>a .icon::before{
	content: '';
	width: 8px;
	height: 8px;
	border-top: solid 2px #777;
	border-right: solid 2px #777;
	position: absolute;
	left: -3px;
	top: 2px;
	transform: rotate(45deg);
	transition: all 0.4s;
}
.header .headerCourseNav .courseNav .mainNav>li:hover>a .icon::before, 
.header .headerCourseNav .courseNav .mainNav>li>a:hover .icon::before{
	border-color: var(--mainGreen);
}
.header .headerCourseNav .courseNav .mainNav>li.hasSub{}
.header .headerCourseNav .courseNav .mainNav>li.hasSub>a{

}
.header .headerCourseNav .courseNav .secNav{
	width: 100%;
	height: 100%;
	background: #f1f1f1;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	transition: all 0.4s;
	opacity: 0;
}
.header .headerCourseNav .courseNav .secNav>li{}
.header .headerCourseNav .courseNav .secNav>li>a{
	height: 40px;
	padding: 0 15px;
	border-bottom: solid 1px #ddd;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.5px;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.4s;
}
.header .headerCourseNav .courseNav .secNav>li>a:hover{
	color: var(--mainBlueLight);
}


.header .searchContainer { width: 275px; position: relative; }
.header .searchContainer .form-group { margin-bottom: 0; }
.header .searchContainer .searchInput { width: 100%; height: 36px; padding: 0 10px; border: solid 1px var(--mainGreen); border-radius: 20px; font: normal 18px 'Century Gothic', '微軟正黑體'; line-height: 36px; letter-spacing: 0.5px; color: #555; }
.header .searchContainer .searchInput:focus { outline: none; box-shadow: none; }
.header .searchContainer .searchBtn { font-size: 17px; color: var(--mainGreen); position: absolute; right: 5px; top: 50%; transform: translateY(-50%); transition: all 0.4s; }
.header .searchContainer .searchBtn:hover { opacity: 0.6; }
.header .navContainer { margin-left: auto; display: flex; align-items: center; }
.header .navContainer .item { width: 70px; text-align: center; position: relative; transition: all 0.4s; }
.header .navContainer .item:not(:last-child)::after { content: ''; width: 1px; height: 80px; background: #eee; position: absolute; top: 50%; transform: translateY(-50%); right: -0.5px; }
.header .navContainer .item:hover { opacity: 0.6; }
.header .navContainer .item a { display: block; }
.header .navContainer .item i, img { margin-bottom: 10px; font-size: 21px; color: #bdd1a1; display: block; }
.header .navContainer .item img{
	margin-top: -7px;
	margin-left: auto;
	margin-right: auto;
}
.header .navContainer .item i.fa-heart { color: #ffb19b; }
.header .navContainer .item span { font: normal 14px 'Century Gothic', '微軟正黑體'; line-height: 14px; color: #999; display: block; }

.header .cartContainer { width: 80px; height: 105px; background: var(--mainGreen); position: relative; z-index: 1; }
.header .cartContainer::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 40px 0 0; border-color: var(--mainGreen) transparent transparent transparent; position: absolute; bottom: -15px; left: 0; }
.header .cartContainer::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 40px 15px 0; border-color: transparent var(--mainGreen) transparent transparent; position: absolute; bottom: -15px; right: 0; }
.header .cartContainer a { display: block; }
.header .cartContainer i { margin-bottom: 5px; margin-top: 15px; font-size: 45px; line-height: 45px; color: #fff; text-align: center; display: block; transition: all 0.4s; }
.header .cartContainer:hover i { color: #bdd1a1; }
.header .cartContainer span { font: normal 22px 'Century Gothic', '微軟正黑體'; line-height: 22px; color: #fff; text-align: center; display: block; }
.header .container { position: relative; }
.header .memberBox { width: 250px; padding: 5px 20px; border-radius: 15px; background: #f5f5f5; position: absolute; top: -300px; right: 90px; box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3); z-index: 5; transition: all 0.4s; }
.header .memberBox.active { top: 10px; }
.header .memberBox .item { padding-top: 10px; line-height: 40px; text-align: center; }
.header .memberBox .item:not(:last-child) { border-bottom: solid 1px #ddd; }
.header .memberBox .item a { }
.header .memberBox .item i { width: 20px; font-size: 16px; color: var(--mainGreenLight); transition: all 0.4s; }
.header .memberBox .item span { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #777; transition: all 0.4s; }
.header .memberBox .item:hover i, .header .memberBox .item:hover span { color: var(--mainGreen); }

.hdMemberLogContainer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999;}
.hdMemberLogContainer.active { }
.hdMemberLogContainer .bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0); transition: all 0.4s 0.3s; }
.hdMemberLogContainer.active .bg { background: rgba(0, 0, 0, 0.3); transition: all 0.4s 0.001s; }
.hdMemberLogContainer .box, .memberLoginPage .box {
	width: 100%;
	max-width: 420px;
	padding: 25px 40px;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
	transition: all 0.4s 0.001s;
}

.hdMemberLogContainer .box {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 999;
}
.hdMemberLogContainer.active .box { top: 50%; opacity: 1; transition: all 0.4s 0.3s; }
.hdMemberLogContainer .box .logo, .memberLoginPage .box .logo { width: 100%; margin: 0 auto 0px; padding-bottom: 10px; text-align: center; display:flex; align-items: center; justify-content: center;}
.hdMemberLogContainer .box .logo img, .memberLoginPage .box .logo img { width: 200px; }
.hdMemberLogContainer .box .title, .memberLoginPage .box .title { margin-bottom: 20px; font: 600 22px 'Century Gothic', '微軟正黑體'; line-height: 22px; text-align: center; color: #666; }
.hdMemberLogContainer .btnContainer, .memberLoginPage .btnContainer { margin-bottom: 30px; padding-bottom: 10px; border-bottom: solid 1px #ddd; }
.hdMemberLogContainer .btnContainer .item, .memberLoginPage .btnContainer .item { width: 100%; height: 50px; border: solid 1px; border-radius: 8px; margin-bottom: 15px; font: 400 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 48px; text-align: center; position: relative; transition: all 0.4s; }
.hdMemberLogContainer .btnContainer .item.line, .memberLoginPage .btnContainer .item.line { border-color: #02b801; color: #02b801; }
.hdMemberLogContainer .btnContainer .item.line:hover, .memberLoginPage .btnContainer .item.line:hover { color: #fff; background: #02b801; }
.hdMemberLogContainer .btnContainer .item.fb, .memberLoginPage .btnContainer .item.fb { border-color: #3b5998; color: #3b5998; }
.hdMemberLogContainer .btnContainer .item.fb:hover, .memberLoginPage .btnContainer .item.fb:hover { color: #fff; background: #3b5998; }
.hdMemberLogContainer .btnContainer .item.google, .memberLoginPage  .btnContainer .item.google{ border-color: #dd4e41; color: #dd4e41; }
.hdMemberLogContainer .btnContainer .item.google:hover, .memberLoginPage .btnContainer .item.google:hover { color: #fff; background: #dd4e41; }
.hdMemberLogContainer .btnContainer a, .memberLoginPage .btnContainer a { color: inherit; display: block; }
.hdMemberLogContainer .btnContainer span, .memberLoginPage .btnContainer span, { }
.hdMemberLogContainer .btnContainer img, .memberLoginPage .btnContainer img { width: 70px; position: absolute; right: -15px; top: 0px; opacity: 0; transition: all 0.4s; }
.hdMemberLogContainer .btnContainer .item:hover img, .memberLoginPage .btnContainer .item:hover img { opacity: 0.5; }
.hdMemberLogContainer .mailContainer, .memberLoginPage .mailContainer { }
.hdMemberLogContainer .mailContainer form, .memberLoginPage .mailContainer form { }
.hdMemberLogContainer .mailContainer .title, .memberLoginPage .mailContainer .title { margin-bottom: 5px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 16px; text-align: left; color: #666; }
.hdMemberLogContainer .mailContainer .input-group > .form-control, .hdMemberLogContainer .mailContainer .input-group > .form-control-plaintext, 
.memberLoginPage .mailContainer .input-group > .form-control, .memberLoginPage .mailContainer .input-group > .form-control-plaintext { height: 36px; padding: 3px 10px; border: solid 1px #ccc; border-radius: 5px 0 0 5px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 20px; color: #222; }
.hdMemberLogContainer .mailContainer .input-group > .form-control:focus, .hdMemberLogContainer .mailContainer .input-group > .form-control-plaintext:focus,
.memberLoginPage .mailContainer .input-group > .form-control:focus, .memberLoginPage .mailContainer .input-group > .form-control-plaintext:focus { outline: none; box-shadow: none; }
.hdMemberLogContainer .mailContainer .input-group > .form-control, .memberLoginPage .mailContainer .input-group > .form-control { margin-bottom: 5px; }
.hdMemberLogContainer .mailContainer .input-group-append .btn, .memberLoginPage .mailContainer .input-group-append .btn { height: 36px; padding: 0 10px; border-radius: 0px 5px 5px 0px; }
.hdMemberLogContainer .mailContainer .input-group-append .btn:focus, .memberLoginPage .mailContainer .input-group-append .btn:focus { outline: none; box-shadow: none; }
.hdMemberLogContainer .mailContainer .codeInput > .form-control, .memberLoginPage .mailContainer .codeInput > .form-control { height: 36px; padding: 3px 10px; border: solid 1px #ccc; border-radius: 5px; background: #fff; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 20px; color: #222; }
.hdMemberLogContainer .mailContainer .submitBtn, .memberLoginPage .mailContainer .submitBtn { }
.hdMemberLogContainer .input-group.send > .form-control, .hdMemberLogContainer .input-group.send .btnCustom-outline,
.memberLoginPage .input-group.send > .form-control, .memberLoginPage .input-group.send .btnCustom-outline { border-color: #999; }
.hdMemberLogContainer .input-group.send .btnCustom-outline, .memberLoginPage .input-group.send .btnCustom-outline { color: #999; }
.hdMemberLogContainer .input-group.send > input.form-control, .memberLoginPage .input-group.send > input.form-control { border-color: #aaa; }

/* --------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_notice.php <<<-------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------*/

.noticeContainer{
	--textColor: #eee;
	background: #283519;
}
.noticeContainer .notice{
	padding: 16px 0;
	font-size: 14px;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: var(--textColor);
	display: flex;
	flex-direction: column;
	align-items: center;
	

}
.noticeContainer .notice p:last-child{
	margin-bottom: 0;

}
.noticeContainer .notice a{
	color: var(--textColor);
	transition: all 0.4s;
}
.noticeContainer .notice a:hover{
	color: #f9ffa4;
}

/* --------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> index.php <<<-------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------------------------*/

#indexMain { }
#indexMain .bannerContainer { }
#indexMain .navContainer { position: relative; top: -30px; }
#indexMain .navContainer .container { border-radius: 15px; padding: 20px 30px 25px; background: #fff; overflow: hidden; box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.25); }
#indexMain .navContainer .typeContainer { width: 100%; margin-bottom: 10px; display: flex; align-items: center; flex-wrap: nowrap; border-bottom: solid 1px var(--mainGreen); overflow-y: scroll; }
#indexMain .navContainer .typeContainer::-webkit-scrollbar { height: 0px; }
#indexMain .navContainer .typeContainer .item { margin-right: 30px; font: normal 18px 'Century Gothic', '微軟正黑體'; line-height: 30px; letter-spacing: 1px; color: #333; transition: all 0.4s; flex-shrink: 0; }
#indexMain .navContainer .typeContainer .item:hover { color: #fe7c5d; }
#indexMain .navContainer .typeContainer .item a { color: inherit; display: block; }
#indexMain .navContainer .tagContainer { display: flex; align-items: center; }
#indexMain .navContainer .tagContainer .title { width: 56px; margin-right: 20px; font: normal 14px 'Century Gothic', '微軟正黑體'; color: #777; }
#indexMain .navContainer .tagContainer .content { width: calc(100% - 76px); display: flex; align-items: center; overflow-y: scroll; }
#indexMain .navContainer .tagContainer .content::-webkit-scrollbar { height: 0px; }
#indexMain .navContainer .tagContainer .item { min-width: 80px; margin-right: 10px; padding: 0 5px; border-radius: 8px; flex-shrink: 0; font: normal 14px 'Century Gothic', '微軟正黑體'; line-height: 30px; letter-spacing: 0.5px; background: #f5f5f5; text-align: center; transition: all 0.4s; color: var(--mainGreen); }
#indexMain .navContainer .tagContainer .item:hover { background: #e3e8d4; }
#indexMain .navContainer .tagContainer .item a { color: inherit; display: block; }
.courseContainer { margin-top: 20px; }
.courseContainer .container { }
.courseContainer .box { margin-bottom: 50px; }
.courseContainer .titleContainer { border-bottom: 1px solid #c1e295; margin-bottom: 30px; display: flex; align-items: flex-end; }
.courseContainer .titleContainer .icon { width: 45px; margin-right: 5px; }
.courseContainer .titleContainer .title { font: bold 24px 'Century Gothic', '微軟正黑體'; line-height: 20px; color: var(--mainGreen); }
.courseContainer .titleContainer .title:first-letter { font-size: 40px; }
.courseContainer .titleContainer .moreBtn { padding-right: 15px; margin-left: auto; font: normal 14px 'Century Gothic', '微軟正黑體'; line-height: 18px; position: relative; color: #aaa; }
.courseContainer .titleContainer .moreBtn::before, .courseContainer .titleContainer .moreBtn::after { content: ''; width: 6.5px; height: 6.5px; border-top: solid 1px #bbb; border-right: solid 1px #bbb; position: absolute; transform: rotate(45deg); top: 5px; right: 0; transition: all 0.4s; }
.courseContainer .titleContainer .moreBtn::after { top: 5px; right: 7px; }
.courseContainer .titleContainer .moreBtn a { color: inherit; display: block; }
.courseContainer .titleContainer .moreBtn:hover::after { top: 5px; right: 0px; }
.courseContainer .typeList{
	margin-bottom: 30px;

}
.courseContainer .typeList ul{
	display: flex;
	justify-content: center;
	gap: 10px;
}
.courseContainer .typeList li{}
.courseContainer .typeList .btnType{
	width: 90px;
}
.courseContainer .typeList .btnType.active{}

.courseContainer .listContainer { }
.courseContainer .listContainer .item { height: 100%; border-radius: 15px; position: relative; transition: all 0.4s; }
.courseContainer .listContainer .item:hover { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.15); }
.courseContainer .listContainer .item.discount .status{display: block;}
.courseContainer .listContainer .item .status { width: 80px; height: 30px; font: normal 14px 'Century Gothic', '微軟正黑體'; line-height: 30px; letter-spacing: 1px; color: #fff; text-align: center; background: var(--mainGreen); position: absolute; top: -5px; left: 20px; z-index: 5; display: none; }
.courseContainer .listContainer .item .status::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 15px 40px 0 0; border-color: var(--mainGreen) transparent transparent transparent; position: absolute; bottom: -15px; left: 0; }
.courseContainer .listContainer .item .status::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 40px 15px 0; border-color: transparent var(--mainGreen) transparent transparent; position: absolute; bottom: -15px; right: 0; }
.courseContainer .listContainer .item .status .backDec { width: 0; height: 0; border-style: solid; border-width: 0 0 5px 4px; border-color: transparent transparent #384f00 transparent; position: absolute; top: 0; left: -4px; }
.courseContainer .listContainer .item .status.notYet { background: #777; }
.courseContainer .listContainer .item .status.notYet::before { border-color: #777 transparent transparent transparent; }
.courseContainer .listContainer .item .status.notYet::after { border-color: transparent #777 transparent transparent; }
.courseContainer .listContainer .item .status.notYet .backDec { border-color: transparent transparent #333 transparent; }
.courseContainer .listContainer .item .info { height: 100%; border-radius: 15px; overflow: hidden; background: #fafafa; position: relative; z-index: 1; display: flex; flex-direction: column; }
.courseContainer .listContainer .item .img { overflow: hidden; aspect-ratio: 9/6; position:relative; }
.courseContainer .listContainer .item .img img { transition: all 0.4s; }

.courseContainer .listContainer .item:hover .img img { transform: scale(1.14); }
.courseContainer .listContainer .item .content { padding: 20px 15px 15px; flex-grow: 1; position:relative; }
.courseContainer .listContainer .item .tagPhysical { border-radius:5px; padding: 4px 8px; background: #ff9809; color: #fff; position: absolute; display: flex; align-items: center; justify-content: center; font-size:14px; line-height: 16px; font-weight: 400; top: 0px; left: 10px; translate: 0 -50%;}
.courseContainer .listContainer .item .Name { width: 100%; margin-bottom: 10px; font: bold 22px 'Century Gothic', '微軟正黑體'; line-height: 22px; letter-spacing: 1px; color: var(--mainGreen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.4s; }
.courseContainer .listContainer .item .Name a { color: inherit; }
.courseContainer .listContainer .item .time i, .courseContainer .listContainer .item .type i, .courseContainer .listContainer .item .priceOr i, .courseContainer .listContainer .item .priceCurrent i { margin-right: 10px; display: inline-block; width: 13px; font-size: 13px; text-align: center; color: var(--mainGreen); }
.courseContainer .listContainer .item .time, .courseContainer .listContainer .item .type, .courseContainer .listContainer .item .priceOr, .courseContainer .listContainer .item .priceCurrent { font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 24px; letter-spacing: 0.5px; color: #333; }
.courseContainer .listContainer .item .time { }
.courseContainer .listContainer .item .type { }
.courseContainer .listContainer .item .priceOr { }
.courseContainer .listContainer .item .priceOr span { text-decoration: line-through; }
.courseContainer .listContainer .item .bottom { display: flex; height: 50px; align-items: center; }
.courseContainer .listContainer .item .like { width: 100px; font-size: 20px; line-height: 50px; text-align: center; color: #feb199; background: #ffedd4; cursor: pointer; }
.courseContainer .listContainer .item .price { height: 100%; width: calc(100% - 100px); font: normal 30px 'Century Gothic', '微軟正黑體'; line-height: 52px; text-align: center; color: var(--mainGreen); background: #d3dbc6; }
.courseContainer .listContainer .item .price span { font-size: 14px; }
.courseContainer .listContainer .item.groupItem{

}
.courseContainer .listContainer .item.groupItem .bottom{
	margin: 0 10px;
	padding: 10px 0px;
	border-top: 1px solid #dcdcdc;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.courseContainer .listContainer .item.groupItem .tag{
	margin-right: 10px;
	padding: 4px 10px;
	border-radius: 8px;
	border: solid 1px var(--mainOrg);
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.05em;
	color: var(--mainOrg);

}
.courseContainer .listContainer .item.groupItem .priceOri{
	margin-right: 3px;
	line-height: 30px;
	color: #777;
	display: inline-block;
	vertical-align: baseline;
	text-decoration: line-through;
}
.courseContainer .listContainer .item.groupItem .price{
	margin-left: auto;
	
	height: auto;
	width: auto;
	background: none;
	line-height: 30px;

}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> course.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.course { }
.course .navContainer { padding: 20px 0 10px; background: #f8f8f8; }
.course .navContainer .item { padding: 10px 0; display: flex; align-items: center; }
.course .navContainer .item:not(:last-child) { border-bottom: solid 1px #dee2d5; }
.course .navContainer .item .title { width: 70px; font: normal 13px 'Century Gothic', '微軟正黑體'; letter-spacing: 0.2px; color: #777; }
.course .navContainer .item .content { width: calc(100% - 70px); }
.course .navContainer .item .content .swiper-slide { width: auto; }
.course .navContainer .item .content .btn-group-toggle .btn input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; display: inline-block; }
.course .navContainer .item .content .btnCustom { height: 30px; margin: 0; padding: 0 10px; border-radius: 5px; line-height: 28px; background: transparent; color: #444; }
.course .navContainer .item.tag .content .btnCustom { height: 26px; border: solid 1px #ccc; margin-bottom: 10px; font: 400 14px 'Century Gothic', '微軟正黑體'; line-height: 24px; color: #555; }
.course .navContainer .item .content .btnCustom.active { background: #dee2d5; color: var(--mainGreen); }
.course .navContainer .item.tag .content .btnCustom.active { border-color: var(--mainGreen); background: transparent; color: var(--mainGreen); }
.course .courseContainer { min-height: 400px; padding-bottom: 50px; }
/*.course .courseContainer .listContainer { min-height: 400px; }*/
.course .navRwdContainer { display: flex; position: sticky; top: 70px; z-index: 50; }
.course .navRwdContainer .navTypeItem { width: 33.33%;	/*max-width: 300px;*/ margin-bottom: 40px; position: relative; transition: all 0.4s; z-index: 20; }
.course .navRwdContainer .navTypeItem.mianType { }
.course .navRwdContainer .navTypeItem.subType { }
.course .navRwdContainer .navTypeItem.tagType { }
.course .navRwdContainer .navTypeItem.active { }
.course .navRwdContainer .navTypeItem .typeTitle { width: 100%; height: 55px; border-bottom: solid 3px var(--mainGreen); border-left: solid 1px #eee; border-right: solid 1px #eee; display: flex; align-items: center; background: #fafafa; cursor: pointer; }
.course .navRwdContainer .navTypeItem.subType .typeTitle { border-bottom-color: #999; }
.course .navRwdContainer .navTypeItem .typeTitle .title { width: calc(100% - 30px); padding-left: 30px; font: 600 15px 'Century Gothic', '微軟正黑體'; line-height: 57px; letter-spacing: 1px; color: #777; }
.course .navRwdContainer .navTypeItem .typeTitle .icon { width: 16px; height: 16px; margin: 0 17px; position: relative; }
.course .navRwdContainer .navTypeItem .typeTitle .line { width: 16px; height: 16px; position: absolute; top: 0; left: 0; transition: all 0.4s; }
.course .navRwdContainer .navTypeItem .typeTitle .line::before { content: ''; width: 16px; height: 2px; background: var(--mainGreen); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.course .navRwdContainer .navTypeItem .typeTitle .line:last-child { transform: rotate(270deg); }
.course .navRwdContainer .navTypeItem.active .typeTitle .line:last-child { transform: rotate(0deg); }
.course .navRwdContainer .navTypeItem .typeContent { width: 100%; position: absolute; z-index: 20; transition: all 0.4s; overflow: hidden; }
.course .navRwdContainer .navTypeItem .typeContent .itemRow { width: 100%; border: solid 1px #ddd; border-top: none; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f5f5f5; }
.course .navRwdContainer .navTypeItem .typeContent .item { width: 100%; height: 48px; padding-left: 30px; font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 48px; cursor: pointer; position: relative; }
.course .navRwdContainer .navTypeItem .typeContent .item.active { background: transparent; color: var(--mainGreen); }
.course .navRwdContainer .navTypeItem .typeContent .item:hover { background: #eee; }
.course .navRwdContainer .navTypeItem .typeContent .item:not(:last-child)::after { content: ''; width: calc(100% - 40px); height: 1px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); background: #e0e0e0; }
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> courseDetail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.insidePage.courseDetail .banner { width: 100%; height: 300px; position: absolute; z-index: 1}
.insidePage.courseDetail .banner img { -webkit-filter: blur(5px); }

.courseDetail .container { position: relative; z-index: 10; }
.courseDetail .topTitleContainer { height: 110px; margin-top: 50px; margin-bottom: 30px; border-radius: 13px; padding: 20px; background: rgba(255, 255, 255, 0.55); display: flex; flex-direction: column; justify-content: space-between; position:relative; }
.courseDetail .topTitleContainer .tagPhysical { border-radius: 5px; padding: 5px 8px; background: #ff9809; color: #fff; position: absolute; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 16px; font-weight: 400; letter-spacing: 0.05em; top: 0px; left: 20px; translate: 0 -50%;}
.courseDetail .topTitleContainer .title { font: 600 32px 'Century Gothic', '微軟正黑體'; line-height: 32px; color: #3f3f3f; }
.courseDetail .topTitleContainer .bottom { display: flex; justify-content: space-between; align-items: center; }
.courseDetail .topTitleContainer .type { height: 26px; padding: 0 5px; border: solid 1px var(--mainGreen); border-radius: 5px; font: 400 14px 'Century Gothic', '微軟正黑體'; line-height: 24px; color: var(--mainGreen); transition: all 0.4s; }
.courseDetail .topTitleContainer .type a { color: inherit; display: inline-block; }
.courseDetail .topTitleContainer .type:hover { background: var(--mainGreen); color: #fff; }
.courseDetail .topTitleContainer .social { display: flex; }
.courseDetail .topTitleContainer .item { width: 24px; transition: all 0.4s; }
.courseDetail .topTitleContainer .item:not(:last-child) { margin-right: 15px; }
.courseDetail .topTitleContainer .item:hover { opacity: 0.8; }

.courseDetail .vedioContainer { margin-bottom: 50px; border-radius: 15px; display: flex; overflow: hidden; }
.courseDetail .vedioContainer .vedioBox { width: calc(100% - 320px); height: 600px; position: relative; background: #424242; }
.courseDetail .vedioContainer .vedioBox .vedio iframe { width: 100%; height: 600px; }
.courseDetail .vedioContainer .vedioBox .cover {}

.courseDetail .vedioContainer .vedioBox .cover .item { }
.courseDetail .vedioContainer .vedioBox .cover .unbuy, .courseDetail .vedioContainer .vedioBox .cover .start { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; z-index: -1; transition: opacity 0.4s, z-index 0.01s 0.4s; }
.courseDetail .vedioContainer .vedioBox .cover .unbuy.active { z-index: 999; opacity: 1; transition: opacity 0.4s 0.01s; }
.courseDetail .vedioContainer .vedioBox .cover .start.active { z-index: 900; opacity: 1; transition: opacity 0.4s 0.01s; }

.courseDetail .vedioContainer .vedioBox .cover .item>img { width: 100%; height: 100%; object-fit: cover; }
.courseDetail .vedioContainer .vedioBox .cover .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
.courseDetail .vedioContainer .vedioBox .cover .unbuy .content { width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.courseDetail .vedioContainer .vedioBox .cover .unbuy .icon { margin-bottom: 20px; display: flex; justify-content: center; align-items: center; }
.courseDetail .vedioContainer .vedioBox .cover .unbuy .icon .img { width: 150px; height: 150px; border-radius: 50%; border: dashed 2px #fff; background: rgba(255, 255, 255, 0.2); text-align: center; line-height: 138px; overflow: hidden; }
.courseDetail .vedioContainer .vedioBox .cover .unbuy .icon img { width: 72px; }
.courseDetail .vedioContainer .vedioBox .cover .unbuy .text { font: 400 30px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #fff; }
.courseDetail .vedioContainer .vedioBox .cover .start .play { width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; transition: all 0.4s; }
.courseDetail .vedioContainer .vedioBox .cover .start .play::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 34.6px; border-color: transparent transparent transparent var(--mainGreen); display: block; position: absolute; top: 50%; left: 50%; transform: translate(-12px, -50%); }
.courseDetail .vedioContainer .vedioBox .cover .start .play:hover { transform: scale(1.12) translate(-50%, -50%); transform-origin: center; background: rgba(255, 255, 255, 0.7); }
.courseDetail .vedioContainer .vedioBox .cover .next, .courseDetail .vedioContainer .vedioBox .cover .end { position: absolute; width: 100%; height: 50%; top: 50%; left: 1px; transform: translateY(-50%); text-align: center; display: flex; flex-direction: column; justify-content: center; z-index: -1; opacity: 0; transition: opacity 0.4s, z-index 0.01s 0.4s; }
.courseDetail .vedioContainer .vedioBox .cover .next.active, .courseDetail .vedioContainer .vedioBox .cover .end.active { z-index: 800; opacity: 1; transition: opacity 0.4s 0.01s; }
.courseDetail .vedioContainer .vedioBox .cover .next.active .text, .courseDetail .vedioContainer .vedioBox .cover .next.active .btnNext { top: 0; opacity: 1; }
.courseDetail .vedioContainer .vedioBox .cover .next .text { margin-bottom: 20px; font: 600 20px 'Century Gothic', '微軟正黑體'; color: #fff; letter-spacing: 1px; position: relative; z-index: 999; top: 10px; transition: all 0.4s 0.2s; opacity: 0; }
.courseDetail .vedioContainer .vedioBox .cover .next .btnNext { width: 200px; height: 50px; margin: 0 auto; border-radius: 8px; padding-left: 30px; background: transparent; border: solid 1px #eee; color: #fff; font-weight: 600; position: relative; opacity: 0; transition: background 0.4s 0s, color 0.4s 0s, top 0.4s 0.4s, opacity 0.4s 0.4s; top: 10px; }
.courseDetail .vedioContainer .vedioBox .cover .next .btnNext:hover { background: #fff; color: var(--mainGreen); }
.courseDetail .vedioContainer .vedioBox .cover .next .btnNext::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; display: block; position: absolute; top: 50%; left: 50px; transform: translate(0, -50%); }
.courseDetail .vedioContainer .vedioBox .cover .next .btnNext:hover::after { border-color: transparent transparent transparent var(--mainGreen); }
.courseDetail .vedioContainer .vedioBox .cover .end .text { font: 600 20px 'Century Gothic', '微軟正黑體'; color: #fff; letter-spacing: 1px; position: relative; z-index: 999; }
.courseDetail .vedioContainer .vedioBox .vedio { }
.courseDetail .vedioContainer .vedioBox .vedio { }

.courseDetail .vedioContainer .ListContainer { width: 320px; height: 600px; background: #16190f; }
.courseDetail .vedioContainer .ListContainer .listTitle { height: 60px; border-bottom: solid 1px #668144; padding: 0 15px; display: flex; align-items: center; }
.courseDetail .vedioContainer .ListContainer .listTitle .title { margin-right: 15px; font: 600 20px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 20px; color: #fff; }
.courseDetail .vedioContainer .ListContainer .listTitle .sequence { width: 10px; height: 16px; display: flex; justify-content: space-between; cursor: pointer; transition: all 0.4s; }
.courseDetail .vedioContainer .ListContainer .listTitle .sequence.active { transform: rotate(180deg); }
.courseDetail .vedioContainer .ListContainer .listTitle .arrow { width: 4px; height: 16px; position: relative; }
.courseDetail .vedioContainer .ListContainer .listTitle .arrow:last-child { margin-left: 2px; transform: rotate(180deg); }
.courseDetail .vedioContainer .ListContainer .listTitle .arrow::before { content: ''; width: 2px; height: 100%; background: #ccc; position: absolute; top: 0; left: 0; }
.courseDetail .vedioContainer .ListContainer .listTitle .arrow::after { content: ''; width: 2px; height: 8px; position: absolute; background: #ccc; bottom: 0; left: 0; transform: rotate(-30deg); transform-origin: bottom left; }
.courseDetail .vedioContainer .ListContainer .listTitle .arrow:first-child::before, .courseDetail .vedioContainer .ListContainer .listTitle .arrow:first-child::after { background: #b6dc83; }
.courseDetail .vedioContainer .ListContainer .listTitle .totalTime { margin-left: auto; font: 300 14px 'Century Gothic', '微軟正黑體'; color: #ccc; }
.courseDetail .vedioContainer .ListContainer .listTitle .totalTime i { margin-right: 7px; color: #b6dc83; display: inline-block; }
.courseDetail .vedioContainer .ListContainer .listContent { height: calc(100% - 60px); padding: 0 0px; overflow-y: scroll; display: flex; flex-direction: column; }
.courseDetail .vedioContainer .ListContainer .listContent.reverse { }
.courseDetail .vedioContainer .ListContainer .listContent::-webkit-scrollbar { width: 3px; height: 0; }
.courseDetail .vedioContainer .ListContainer .listContent::-webkit-scrollbar-track { background-color: #333; }
.courseDetail .vedioContainer .ListContainer .listContent::-webkit-scrollbar-thumb { border-radius: 20px; background-color: #72756d; }
.courseDetail .vedioContainer .ListContainer .listContent::-webkit-scrollbar-button { height: 2px; background-color: transparent; }
.courseDetail .vedioContainer .ListContainer .listContent::-webkit-scrollbar-corner { background-color: black; }
.courseDetail .vedioContainer .ListContainer .listContent .item { height: 60px; padding: 0 15px; border-left: solid 3px transparent; border-right: solid 3px transparent; display: flex; justify-content: space-between; align-items: center; position: relative; cursor: pointer; flex-shrink: 0; }
.courseDetail .vedioContainer .ListContainer .listContent .item:not(:last-child)::after { content: ''; width: calc(100% - 20px); height: 1px; margin: 0 auto; position: absolute; bottom: 0px; background: #3d3d3d }
.courseDetail .vedioContainer .ListContainer .listContent .item:hover { background: #2c2d2a; }
.courseDetail .vedioContainer .ListContainer .listContent .item.active { border-left-color: var(--mainGreen); }
.courseDetail .vedioContainer .ListContainer .listContent .item.active::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 5px; border-color: transparent transparent transparent var(--mainGreen); display: block; position: absolute; top: 50%; left: 0px; transform: translate(0, -50%); }
.courseDetail .vedioContainer .ListContainer .listContent .title { width: calc(100% - 60px); font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 18px; letter-spacing: 0.5px; color: #fff; transition: all 0.4s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.courseDetail .vedioContainer .ListContainer .listContent .title i { margin-right: 5px; font-size: 12px; line-height: 10px; display: inline-block; transform: scale(0.85); position: relative; top: -0.5px; opacity: 0; }
.courseDetail .vedioContainer .ListContainer .listContent .item.active .title { color: #b6dc83; }
.courseDetail .vedioContainer .ListContainer .listContent .item.lock .title i { opacity: 1}
.courseDetail .vedioContainer .ListContainer .listContent .time { width: 60px; font: 300 14px 'Century Gothic', '微軟正黑體'; color: #ccc; }

.courseDetail .bottomContainer { margin-bottom: 50px; }
.courseDetail .infoContainer { margin-bottom: 50px; }
.courseDetail .infoContainer .nav { height: 50px; margin-top: 0px; margin-bottom: 30px; border-bottom: solid 1px #ccc; display: flex; align-items: center; }
.courseDetail .infoContainer .nav-item { width: 25%; font: bold 18px 'Century Gothic', '微軟正黑體'; line-height: 46px; text-align: center; color: #555; position: relative; transition: background 0.4s; }
.courseDetail .infoContainer .nav-item:not(:last-child)::after { content: ''; width: 1px; height: 30px; background: #eee; position: absolute; top: 50%; right: -0.5px; transform: translateY(-50%); }
.courseDetail .infoContainer .nav-item.active { border-bottom: solid 2px  var(--mainGreen); }
.courseDetail .infoContainer .nav-item:hover { background: rgba(118, 160, 30, 0.05); }
.courseDetail .infoContainer .nav-item a { color: inherit; display: block; }
.courseDetail .infoContainer .nav-item .nav-link { padding: 0; }

.courseDetail .infoContainer .infoContentContainer { }
.courseDetail .infoContainer .infoContentContainer .information { margin-bottom: 40px; }
.courseDetail .infoContainer .infoContentContainer .information .item { display: flex; align-items: flex-start; }
.courseDetail .infoContainer .infoContentContainer .information .item:not(:last-child) { margin-bottom: 15px; }
.courseDetail .infoContainer .infoContentContainer .information .title { width: 60px; border-radius: 5px; margin-right: 12px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 24px; letter-spacing: 0.1px; text-align: center; background: #eee; content: #555; }
.courseDetail .infoContainer .infoContentContainer .information .title i { width: 16px; font-size: 13px; line-height: 13px; color: #76a01e; text-align: center; display: inline-block; position: relative; top: -1px; }
.courseDetail .infoContainer .infoContentContainer .information .text { width: calc(100% - 72px); font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 24px; letter-spacing: 0.3px; content: #555; }
.courseDetail .infoContainer .infoContentContainer .information .text.tagRow { display: flex; flex-wrap: wrap; }
.courseDetail .infoContainer .infoContentContainer .information .tagItem { position: relative; transition: all 0.4s; }
.courseDetail .infoContainer .infoContentContainer .information .tagItem a{ color: inherit; }
.courseDetail .infoContainer .infoContentContainer .information .tagItem:hover{ color: #999; }
.courseDetail .infoContainer .infoContentContainer .information .tagItem:not(:last-child) { margin-right: 11px; }
.courseDetail .infoContainer .infoContentContainer .information .tagItem:not(:last-child)::after { content: ''; width: 1px; height: 10px; position: absolute; top: 50%; right: -5px; transform: translateY(-50%); background: #ccc; }
.courseDetail .infoContainer .infoContentContainer .introduction { }
.courseDetail .infoContainer .infoContentContainer .introduction .title { margin-bottom: 15px; padding-left: 10px; font: 600 17px 'Century Gothic', '微軟正黑體'; line-height: 17px; left: 1px; color: #555; position: relative; }
.courseDetail .infoContainer .infoContentContainer .introduction .title::before { content: ''; width: 2px; height: 14px; background: var(--mainGreen); position: absolute; left: 0px; top: 50%; transform: translateY(-50%); }
.courseDetail .infoContainer .infoContentContainer .introduction .content { }
.courseDetail .infoContainer .infoContentContainer .introduction .content.contentContainer { padding-top: 0; padding-bottom: 0; }

.courseDetail .infoContainer .faqContainer { padding: 0; max-width: 100%; }

.courseDetail .infoContainer .downloadContainer { margin-bottom: -20px; position: relative; }
.courseDetail .infoContainer .downloadContainer .item { width: 100%; height: 150px; margin-bottom: 20px; padding: 15px; border: solid 1px #eee; border-radius: 10px; background: transparent; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.4s; }
.courseDetail .infoContainer .downloadContainer .item:hover { border-color: var(--mainGreenLight); background: #f5f9ec; }
.courseDetail .infoContainer .downloadContainer .item:hover .type { background: var(--mainGreenLight); }
.courseDetail .infoContainer .downloadContainer .item:hover .icon { color: var(--mainGreenLight); }
.courseDetail .infoContainer .downloadContainer .item .img { width: 150px; position: absolute; right: -40px; bottom: -15px; z-index: 1; }
.courseDetail .infoContainer .downloadContainer .title { width: 100%; max-height: 48px; font: bold 18px 'Century Gothic', '微軟正黑體'; line-height: 24px; letter-spacing: 0.5px; color: #525252; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: relative; z-index: 2; }
.courseDetail .infoContainer .downloadContainer .type { padding: 0 9px 0 8px; border-radius: 0px 5px 5px 0px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 22px; letter-spacing: 1px; color: #fff; position: absolute; left: 0; bottom: 30px; background: #ccc; z-index: 2; transition: all 0.4s; }
.courseDetail .infoContainer .downloadContainer .icon { font-size: 20px; color: #ccc; align-self: flex-end; position: relative; z-index: 2; transition: all 0.4s; }
.courseDetail .infoContainer .downloadContainer .downloadCover { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); position: absolute; top: 0; left: 0; z-index: 800; }
.courseDetail .infoContainer .downloadContainer .downloadCover .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.courseDetail .infoContainer .downloadContainer .downloadCover .img { width: 120px; height: 120px; border-radius: 50%; border: dashed 2px #333; margin-bottom: 15px; background: rgba(0, 0, 0, 0.3); text-align: center; line-height: 105px; overflow: hidden; }
.courseDetail .infoContainer .downloadContainer .downloadCover .img img { width: 60px; }
.courseDetail .infoContainer .downloadContainer .downloadCover .text { font: 400 26px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #525252; }

.courseDetail .discussContainer { }
.courseDetail .discussContainer .discussBox { --pW: 35px; border: solid 1px #f5f5f5; }
.courseDetail .discussContainer .discussBox + .discussBox { margin-top: 50px; }
.courseDetail .discussContainer .boxHead { padding: 13px var(--pW); display: flex; align-items: center; background: #f5f5f5; }
.courseDetail .discussContainer .boxHead .title { font: 600 18px 'Century Gothic', '微軟正黑體'; color: #323232; letter-spacing: 0.05em; line-height: 1.2em; flex-grow: 1; }
.courseDetail .discussContainer .time { margin-left: 20px; font: 400 14px '微軟正黑體'; letter-spacing: 0.02em; color: #646464; flex-shrink: 0; }
.courseDetail .discussContainer .boxHead .status { height: 30px; margin-left: 15px; padding: 0 12px; border-radius: 4px; background: #646464; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.05em; flex-shrink: 0; display: flex; align-items: center; }
.courseDetail .discussContainer .boxHead .status i { margin-right: 5px; display: block; font-size: 12px; }
.courseDetail .discussContainer .boxHead .status.checked { background: var(--mainGreen); }
.courseDetail .discussContainer .boxHead .status:not(.checked) i { display: none; }
.courseDetail .discussContainer .boxBody { /*padding: 5px var(--pW) 0;*/ }
.courseDetail .discussContainer .boxBody .contentBox + .contentBox .boxItem { border-top: 1px dashed #f5f5f5; }
.courseDetail .discussContainer .contentBox:first-child .boxItem{
	background: #fbfdf6;
}
.courseDetail .discussContainer .boxItem { padding: 25px var(--pW); }
.courseDetail .discussContainer .boxItem + .boxItem { }
.courseDetail .discussContainer .boxItem .titleBox { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; }
.courseDetail .discussContainer .boxItem .title { font-weight: 600; font-size: 18px; line-height: 1.5em; color: #323232; }
.courseDetail .discussContainer .boxItem .time { }
.courseDetail .discussContainer .boxItem .content { font-size: 16px; line-height: 1.5em; color: #646464; letter-spacing: 0.01em; }
.courseDetail .discussContainer .boxItem .content img { max-width: 100%; height: auto !important; }
.courseDetail .discussContainer .boxItem .funcBox { margin-top: 15px; display: flex; }
.courseDetail .discussContainer .boxItem .funcBox button { border: none; background: none; display: flex; align-items: center; font-weight: 600; font-size: 16px; color: #999; transition: all 0.4s; }
.courseDetail .discussContainer .boxItem .funcBox button:hover { color: #646464; }
.courseDetail .discussContainer .boxItem .funcBox button:focus { outline: none; }
.courseDetail .discussContainer .boxItem .funcBox button i { margin-right: 5px; color: #f90; transition: all 0.4s; }
.courseDetail .discussContainer .boxItem .funcBox button:hover i { color: var(--mainGreen); }
.courseDetail .discussContainer .boxItem .funcBox button + button { margin-left: 15px; }
.courseDetail .discussContainer .editorBox .boxItem { border-top: 1px solid #f5f5f5; padding: 25px var(--pW) 30px; display: flex; flex-direction: column; }
.courseDetail .discussContainer .editorBox form { }
.courseDetail .discussContainer .editorBox .btnGroup { margin-top: 20px; display: flex; align-items: center; justify-content: flex-end; }
.courseDetail .discussContainer .editorBox .btnGroup button { width: 90px; border-radius: 4px; }
.courseDetail .discussContainer .editorBox .btnGroup button + button { margin-left: 10px; }
.courseDetail .discussContainer .editorBox .btnCustom:not(.btnGray) { margin-top: 0; background: var(--mainGreen); color: #fff; font-weight: 600; }
.courseDetail .discussContainer .editorBox .btnCustom:not(.btnGray):hover { opacity: 0.7; }


.courseDetailBody .rightSideContainer { height: 100%; position: relative; }
.courseDetailBody .physicalInfoBox{
	padding: 20px 15px;
	border-radius: 10px;
	background: #f5f5f5;
}
.courseDetailBody .physicalInfoBox .infoText{
	color: var(--mainGreen);
}
.courseDetailBody .physicalInfoBox .infoText i{
	font-size: 16px;
}
.courseDetailBody .physicalInfoBox .infoText .text{
	font-size: 17px;
	font-weight: 600;
}
.courseDetailBody .physicalInfoBox .infoList{
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
}
.courseDetailBody .physicalInfoBox .infoList li{}
.courseDetailBody .physicalInfoBox .infoList span{}
.courseDetailBody .physicalInfoBox .infoNote{

	font-size: 14px;
    color: #ff9809;
}
.courseDetailBody .rightSideContainer .sideBox { position: sticky; top: 20px; }
.courseDetailBody .rightSideContainer .top { margin-bottom: 20px; border-radius: 10px; overflow: hidden; }
.courseDetailBody .rightSideContainer .priceContainer { height: 70px; padding: 0 15px 10px; display: flex; justify-content: space-between; align-items: flex-end; background: #fcfcfc; }
.courseDetailBody .rightSideContainer .text { font: 400 14px 'Century Gothic', '微軟正黑體'; line-height: 14px; }
.courseDetailBody .rightSideContainer .price { font: 400 30px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; line-height: 30px; color: var(--mainGreen); }
.courseDetailBody .rightSideContainer .price span { font: 600 14px 'Century Gothic', '微軟正黑體'; line-height: 30px; }
.courseDetailBody .rightSideContainer .btnContainer { display: flex; }
.courseDetailBody .rightSideContainer .like { width: 100px; font-size: 20px; line-height: 50px; text-align: center; color: #feb199; background: #ffedd4; cursor: pointer; }
.courseDetailBody .rightSideContainer .like i { transition: all 0.4s; }
.courseDetailBody .rightSideContainer .like:hover i { opacity: 0.6 }
.courseDetailBody .rightSideContainer .cartBtn { height: 50px; width: calc(100% - 100px); font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 50px; text-align: center; color: var(--mainGreen); background: #d3dbc6; }
.courseDetailBody .rightSideContainer .cartBtn.alreadyInCart { color: #fff ; background: #ffa184; }
.courseDetailBody .rightSideContainer .cartBtn a { color: inherit; display: block; transition: all 0.4s; }
.courseDetailBody .rightSideContainer .cartBtn button { width: 100%; border:none; background: transparent; color:inherit; transition: all 0.4s; }
.courseDetailBody .rightSideContainer .cartBtn button:focus {
	border: none;
	outline: none;
}
.courseDetailBody .rightSideContainer .cartBtn:hover a, .courseDetailBody .rightSideContainer .cartBtn:hover button { opacity: 0.6 }
.courseDetailBody .rightSideContainer .cartBtn i { font-size: 24px; line-height: 24px; }
.courseDetailBody .rightSideContainer .bottom {}
.courseDetailBody .rightSideContainer .bottom.timeLimit { margin-bottom: 0; }
.courseDetail .timeLimit { width: 100%; height: 50px; margin-bottom: 15px; border-radius: 6px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 50px; letter-spacing: 0.1px; text-align: center; color: #c6002f; background: #ffdee4; }
.courseDetail .timeLimit i { margin-right: 5px; display: inline-block; }
.courseDetail .timeLimit.alreadyBuy { color: #ff9809; background: #ffedd4; }


.modalDateSelect{

}
.modalDateSelect .modal-content{
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 20px 30px;
	border-radius: 25px;
}
.modalDateSelect .modal-header{
	border-bottom: 1px solid none;
	align-items: center;
	justify-content: center;
}
.modalDateSelect .modal-title{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #646464;
}
.modalDateSelect .modal-body{
	padding: 0;
	padding-top: 20px;
	display: flex;
	flex-direction: column;
}
.modalDateSelect .dateList{
	width: 100%;
}
.modalDateSelect .btn-group{
	width: 100%;
	flex-direction: column;
	gap: 10px;
}
.modalDateSelect .btnDateRadio{
	width: 100%;
	min-height: 32px;
	border-radius: 5px !important;
	border: solid 1px #d3dbc6;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;
	transition: all 0.4s;
}
.modalDateSelect .btnDateRadio:not(.active):hover{
	background: var(--mainGreenBg);
}
.modalDateSelect .btnDateRadio.disabled .date, 
.modalDateSelect .btnDateRadio.active .date,
.modalDateSelect .btnDateRadio.disabled .quota, 
.modalDateSelect .btnDateRadio.active .quota{
	color: #fff;
}
.modalDateSelect .btnDateRadio.disabled{
	border-color: transparent;
	background: #bbbbbb;
	pointer-events: none;
}
.modalDateSelect .btnDateRadio.active{
	border-color: transparent;
	background: var(--mainGreen);
}
.modalDateSelect .btnDateRadio .date{
	color: #444;
	font-size: 14px;
}
.modalDateSelect .btnDateRadio .quota{
	color: #777;
	font-size: 13px;
}
.modalDateSelect .btnAddCart{
	width: 200px;
	height: 40px;
	margin-top: 15px;
	border: none;
	border-radius: 5px;
	align-self: center;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> courseGroup.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.courseGroup{}
.courseGroup .courseGroupList{

}
.courseGroup .navContainer{
	padding: 30px 0;
}
.courseGroup .courseGroupList .listRow{
	--gutter: 4px;
	
	margin: 0 calc(var(--gutter) * -1) calc(var(--gutter) * -2);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.courseGroup .courseGroupList .listCol{
	padding: 0 var(--gutter);
	margin-bottom: calc(var(--gutter) * 2);
	
}
.courseGroup .courseGroupList .listItem{
	padding: 5px 10px;
	border: solid 1px transparent;
	border-radius: 5px;
	background: transparent;
	font-size: 18px;
	color: #646464;
	transition: all 0.4s;
}
.courseGroup .courseGroupList .listItem:not(.active):hover{
	border-color: var(--mainGreenLight) ;
	color: var(--mainGreen);
}
.courseGroup .courseGroupList .listItem:not(.active):focus{
	outline: none;
}
.courseGroup .courseGroupList .listItem.active{
	background: var(--mainGreenBg);
	color: var(--mainGreen);
}
.courseGroup .courseContainer{
	padding-top: 50px;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> groupDetail.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.groupDetail{}
.groupDetail .groupContentList{
	border-radius: 12px;
	padding: 30px 20px;
	background: #f5f5f5;
}
.groupDetail .groupContentList .listTitle{
	margin-bottom: 15px;
	font-size: 20px;
	color: #333333;
	letter-spacing: 0.03em;
}
.groupDetail .groupContentList .itemList{
	--gutter: 5px;
}
.groupDetail .groupContentList .listRow{
	margin: 0 calc(var(--gutter) * -1) calc(var(--gutter) * -2);
}
.groupDetail .groupContentList .listCol{
	padding: 0 var(--gutter);
	margin-bottom: calc(var(--gutter) * 2);
}
.groupDetail .groupContentList .item{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.groupDetail .groupContentList .item:hover{}
.groupDetail .groupContentList .item:hover .itemImg img{
	transform: scale(1.05);
}
.groupDetail .groupContentList .item .itemImg{
	aspect-ratio: 9/6;
	overflow: hidden;
}
.groupDetail .groupContentList .item .itemImg img{
	
	transition: all 0.4s;
}
.groupDetail .groupContentList .item .name{
	max-height: 3.6em;
	margin-top: 8px;
	margin-bottom: auto;
	font-size: 16px;
	letter-spacing: 0.03em;
	line-height: 1.2em;
	color: var(--mainGreen);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.groupDetail .groupContentList .item .price{
	margin-top: 5px;
	font-size: 14px;
	line-height: 1em;
	text-align: right;	
	color: var(--mainOrg);
}
.groupDetail .infoTitle{
	padding-bottom: 8px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 25px;
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	color: var(--mainGreen);
}
.groupDetail .infoContainer{
	margin-top: 35px;
}
.groupDetail .infoContainer .infoContent{
	font-size: 16px;
	color: #646464;
}
.groupDetail .recommentContainer{
	margin-top: 35px;
}

.groupDetail .rightSideContainer .top{
	
	background: #fcfcfc;
	overflow: visible;
}
.groupDetail .rightSideContainer .sideInfoContainer{
	padding: 20px 15px 15px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.groupDetail .rightSideContainer .sideInfoContainer .title{
	font-size: 18px;
	color: var(--mainGreen);
	font-weight: 600;
	letter-spacing: 0.05em;
}
.groupDetail .rightSideContainer .sideInfoContainer .activityTag{
	margin-top: 8px;
	padding: 3px 15px 3px 0;
	font-size: 13px;
	background: var(--mainGreen);
	color: #fff;
	position: relative;
	align-self: flex-start;
}
.groupDetail .rightSideContainer .sideInfoContainer .activityTag::before{
	content:'';
	width: calc(100% + 20px);
	height: 100%;
	background: var(--mainGreen);
	position: absolute;
	top: 0;
	right: 0;
}
.groupDetail .rightSideContainer .sideInfoContainer .activityTag::after{
	content:'';
	width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 0 4px 5px;
   border-color: transparent transparent #3a5118 transparent;
   position: absolute;
   top: -4px;
   left: -20px;
}
.groupDetail .rightSideContainer .sideInfoContainer .activityTag .text{
	position: relative;
	z-index: 1;
}
.groupDetail .rightSideContainer .sideInfoContainer .slogan{
	margin-top: 10px;
	font-size: 16px;
	color: #646464;
}
.groupDetail .rightSideContainer .sideInfoContainer .slogan i{
	margin-right: 3px;
	color: #969696;
	display: inline-block;
}
.groupDetail .rightSideContainer .sideInfoContainer .slogan .colorDiff{
	color: var(--mainOrg);
}
.groupDetail .rightSideContainer .sideInfoContainer .priceContainer{
	height: auto;
	margin-top: 20px;
	padding: 0;
}
.groupDetail .rightSideContainer .sideInfoContainer .priceContainer .priceOri{
	font-size: 13px;
	color: #646464;
	text-decoration: line-through;
}
.groupDetail .rightSideContainer .sideInfoContainer .priceContainer{}
.groupDetail .rightSideContainer .cartBtn, .groupDetail~.rightSideContainer .cartBtn{
	
	width: 100%;
}
.groupDetail .rightSideContainer .cartBtn{
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.groupDetail .recommentContainer{
	margin-bottom: 50px;
}
.groupDetail .recommentSlider .item{
	border-radius: 12px;
	display: block;
	background: #f5f5f5;
	overflow: hidden;
}
.groupDetail .recommentSlider .item:hover .goBtn{
	background: var(--mainGreen);
	color: #fff;
}
.groupDetail .recommentSlider .item .topInfo{
	padding: 15px 20px 
}
.groupDetail .recommentSlider .item .groupName{
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 600;
	color: var(--mainGreen);
}
.groupDetail .recommentSlider .item .contentList{
	display: flex;
	justify-content: space-between;
	position: relative;
}
.groupDetail .recommentSlider .item .subItem{
	width: calc(50% - 8px);
}
.groupDetail .recommentSlider .item .subItemImg{
	aspect-ratio: 9/6;
}
.groupDetail .recommentSlider .item .subName{
	max-height: 3.6em;
	margin-top: 3px;
	font-size: 16px;
	line-height: 1.2em;
	color: #646464;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.groupDetail .recommentSlider .item .decIcon{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: solid 2px var(--mainGreen);
	background: rgba(255,255,255,0.8);
	color: var(--mainGreen);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);

}
.groupDetail .recommentSlider .item .otherInfo{
	margin-top: 5px;
	text-align: right;
	font-size: 14px;
	color: #969696;
}
.groupDetail .recommentSlider .item .otherInfo i{
	margin-right: 2px;
	display: inline-block;
	color: var(--mainGreen);
}
.groupDetail .recommentSlider .item .bottomInfo{
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #eeeeee;
}
.groupDetail .recommentSlider .item .leftPrice{}
.groupDetail .recommentSlider .item .price{
	font: 400 30px 'Century Gothic', '微軟正黑體';
	line-height: 30px;
	color: var(--mainGreen);
}
.groupDetail .recommentSlider .item .price span{
	font-size: 14px;
}
.groupDetail .recommentSlider .item .priceOri{
	margin-top: 0px;
	font-size: 12px;
	line-height: 12px;
	color: #969696;
	text-decoration: line-through;
}
.groupDetail .recommentSlider .item .goBtn{
	width: 100px;
	padding: 5px;
	border: solid 1px var(--mainGreen);
	border-radius: 5px;
	font-size: 16px;
	line-height: 20px;
	color: var(--mainGreen);
	text-align: center;
	transition: all 0.4s;
}
.groupDetail .recommentSlider .swiperControlBtns{
	margin-top: 20px;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;

}
.groupDetail .recommentSlider .swiperControlBtns button{
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	color: #fff;
	position: relative;
	top: 0;
	transition: all 0.4s;
}
.groupDetail .recommentSlider .swiperControlBtns button:focus{
	outline: none;
}
.groupDetail .recommentSlider .swiperControlBtns button:not(.swiper-button-disabled):hover{
	top: -4px;
}
.groupDetail .recommentSlider .swiperControlBtns button.swiper-button-disabled{
	opacity: 0.4;
}
.groupDetail .recommentSlider .swiperControlBtns .swiperBtnPrev{
	background: #969696;
}
.groupDetail .recommentSlider .swiperControlBtns .swiperBtnNext{
	margin-left: 10px;
	background: var(--mainGreen);
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> cartList.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cartList { margin-bottom: 45px; }
.cart .cartNav { width: 920px; margin: 30px auto 50px; display: flex; }
.cart .cartNav .item { height: 45px; background: #ddd; color: #555; text-align: center; font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 45px; letter-spacing: 2px; }
.cart .cartNav .item.active { background: var(--mainGreen); color: #fff; }
.cart .cartNav .item.cartNavList { width: calc((100% + 20px) / 3); margin-right: -10px; clip-path: polygon(5px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); }
.cart .cartNav .item.cartNavInfo { width: calc((100% + 20px) / 3); margin-right: -10px; clip-path: polygon(calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0% 100%, 20px 50%, 0% 0%); }
.cart .cartNav .item.cartNavBuild { width: calc((100% + 20px) / 3); clip-path: polygon(calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 20px 50%, 0 0); }
.cartList .productListContainer { border: solid 1px var(--mainGreen); border-radius: 15px; background: #f4f4f4; overflow: hidden; }
.cartList .productListContainer .title { height: 50px; font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 50px; color: #fff; letter-spacing: 2px; text-align: center; background: var(--mainGreen) }
.cartList .productListContainer .productList { padding: 0 15px; }
.cartList .productListContainer .productList .item { padding: 20px 0; display: flex; position: relative; align-items: flex-end; }
.cartList .productListContainer .productList .item:not(:last-child) { border-bottom: solid 1px #fff; }
.cartList .productListContainer .productList .img { width: 100px; height: 68px; margin-right: 15px; align-self:center; }
.cartList .productListContainer .productList .img img { width: 100%; height: 100%; object-fit: cover; }
.cartList .productListContainer .productList .content { width: calc(100% - 100px - 75px); /*height: 68px;*/ display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; }
.cartList .productListContainer .productList .name { font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 20px; letter-spacing: 0.5px; color: #555; transition: all 0.4s; display:flex; overflow: hidden; }
.cartList .productListContainer .productList .name:hover { opacity: 0.8; }
.cartList .productListContainer .productList .name a { color: inherit; }
.cartList .productListContainer .productList .name .tagPhysical{
	width: 45px;
	height: 20px;
	border-radius: 5px;
	background: #ff8e31;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 12px;
}
.cartList .productListContainer .productList .name .text{
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 
}
.cartList .productListContainer .productList  .groupName{
	margin: 15px 0 10px;
}
.cartList .productListContainer .productList .groupName span{ 
	max-width: 100%;
    padding: 3px 5px;
    border-radius: 4px;
    border: solid 1px var(--mainOrg);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: var(--mainOrg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.cartList .productListContainer .productList .timeLimit { font: 400 14px 'Century Gothic', '微軟正黑體'; line-height: 14px; letter-spacing: 0.5px; color: #c6002f; }
.cartList .productListContainer .productList .timeLimit.physical{
	color: var(--mainGreen);
}
.cartList .productListContainer .productList .timeLimit i { margin-right: 3px; display: inline-block; font-size: 12px; }

.cartList .productListContainer .productList .price { width: 85px; margin-left: auto; font: 400 24px 'Century Gothic', '微軟正黑體'; line-height: 24px; letter-spacing: 0.3px; text-align: right; color: var(--mainGreen); }
.cartList .productListContainer .productList .price span { margin-right: 1px; font-size: 14px; line-height: 24px; display: inline-block; }
.cartList .productListContainer .productList .delete { position: absolute; top: 18px; right: 0; color: #969696; cursor: pointer; font-size: 14px; transition: all 0.4s; }
.cartList .productListContainer .productList .delete:hover { transform: rotate(180deg); color: #c6002f; }
.cartList .rebateContainer{
	width: 100%; height: 50px; margin-bottom: 15px; border: solid 1px #ff9809; border-radius: 12px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 50px; letter-spacing: 0.1px; text-align: center; color: #828282; background: #fff9f2;
}
.cartList .rebateContainer i { margin-right: 8px; display: inline-block; color: #ff9809; }
.cartList .rebateContainer span { padding: 0 4px; font-weight: 600; color: #ff9809; display: inline-block;}
.cart .subtotalContainer { border: solid 1px #999; border-radius: 15px; background: #f4f4f4; overflow: hidden; }
.cart .subtotalContainer .title { height: 50px; font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 50px; color: #fff; letter-spacing: 2px; text-align: center; background: #999; }
.cart .subtotalContainer .content { padding: 0 15px; }
.cart .subtotalContainer .discount { padding: 15px 0; border-bottom: solid 1px #ddd; }
.cart .subtotalContainer .discount form { display: flex; flex-direction: column; }
.cart .subtotalContainer .discount .form-group { margin-bottom: 5px; }
.cart .subtotalContainer .discount input { height: 36px; border-radius: 8px; border: solid 1px #aaa; color: #333; transition: all 0.4s; }
.cart .subtotalContainer .discount input:focus { outline: none; box-shadow: none; border: }
.cart .subtotalContainer .discount.codeError input{
	border-color: #c6002f;
	background: #f7ecec;
}
.cart .subtotalContainer .discount.codeSuccess input{
	border-color: var(--mainGreen);
	background: #f3f7ec;
}
.cart .subtotalContainer .discount.codeError .promo_codes_error{
	margin-top: 5px;
	font: 400 13px 'Century Gothic', '微軟正黑體';
	line-height: 13px;
	color: #c6002f;
	display: inline-block;
}
.cart .subtotalContainer .discount .btn.submitBtn { width: 100px; height: 30px; padding: 0; border: none; margin-left: auto; border-radius: 5px; background: #ddd; font: 400 14px 'Century Gothic', '微軟正黑體'; line-height: 28px; color: #555; transition: all 0.4s; }
.cart .subtotalContainer .discount .btn.submitBtn:hover { background: #555; color: #ddd; }
.cart .subtotalContainer .priceList { padding: 15px 0; border-bottom: solid 1px #ddd; }
.cart .subtotalContainer .priceItem { display: flex; justify-content: space-between; font: 400 15px 'Century Gothic', '微軟正黑體'; line-height: 15px; }
.cart .subtotalContainer .priceItem:not(:last-child) { margin-bottom: 8px; }
.cart .subtotalContainer .priceItem .subTitle { }
.cart .subtotalContainer .priceItem .price { }
.cart .subtotalContainer .subtotal { margin-top: 15px; display: flex; justify-content: space-between; align-items: flex-end; }
.cart .subtotalContainer .subtotal .subTitle { font: 400 15px 'Century Gothic', '微軟正黑體'; line-height: 24px; }
.cart .subtotalContainer .subtotal .price { margin-left: auto; margin-bottom: 5px; font: 400 24px 'Century Gothic', '微軟正黑體'; line-height: 24px; letter-spacing: 0.3px; text-align: right; color: #c6002f; }
.cart .subtotalContainer .subtotal .price span { margin-right: 1px; font-size: 14px; line-height: 24px; display: inline-block; }
.cart .subtotalContainer .btnContainer { width: 200px; margin: 0 auto; padding: 15px 0; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> memberNav.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cartInfo { margin-bottom: 45px; }
.cartInfo .memberInfoContainer { border: solid 1px var(--mainGreen); border-radius: 15px; background: #f4f4f4; overflow: hidden; }
.cartInfo .memberInfoContainer .title { height: 50px; font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 50px; color: #fff; letter-spacing: 2px; text-align: center; background: var(--mainGreen) }
.cartInfo .memberInfoContainer .memberInfo { padding: 15px 20px; }
.cartInfo .formCustomStyle { font-family: 'Century Gothic', '微軟正黑體'; }
.cartInfo .formCustomStyle .form-group input.form-control, .cartInfo .formCustomStyle .form-group select.form-control { padding: 2px 5px; border: solid 1px #ddd; background: #fff; }
.cartInfo .formCustomStyle .form-group textarea.form-control { border: solid 1px #ddd; background: #fff; resize: none; }
.cartInfo .formCustomStyle .form-group .form-control.cursor-notallowed { opacity: 0.6; }
.cartInfo .subtotalContainer .productList { padding: 0px 0; border-bottom: solid 1px #ddd; }
.cartInfo .subtotalContainer .productItem { padding: 20px 0; display: flex; }
.cartInfo .subtotalContainer .productItem:not(:last-child) { border-bottom: dashed 1px #ddd; }
.cartInfo .subtotalContainer .productItem .img { width: 100px; height: 68px; margin-right: 10px; align-self: center; }
.cartInfo .subtotalContainer .productItem .img img { width: 100%; height: 100%; object-fit: cover; }
.cartInfo .subtotalContainer .productItem .productContent { width: calc(100% - 110px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartInfo .subtotalContainer .productItem .groupName { 
	max-width: 100%;
	margin: 10px 0 6px;
	padding: 3px 5px;
    border-radius: 4px;
    border: solid 1px var(--mainOrg);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: var(--mainOrg);
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
    align-self: flex-start;
 }
.cartInfo .subtotalContainer .productItem .name { font: 600 18px 'Century Gothic', '微軟正黑體'; }
.cartInfo .subtotalContainer .productItem .sessionInfo { font: 400 14px 'Century Gothic', '微軟正黑體'; line-height: 14px; letter-spacing: 0.5px; color: var(--mainGreen); }
.cartInfo .subtotalContainer .productItem .sessionInfo i{ margin-right: 0px; display: inline-block; font-size: 12px; }

.cartInfo .subtotalContainer .productItem .price { margin-left: auto; margin-bottom: 5px; font: 400 20px 'Century Gothic', '微軟正黑體'; line-height: 20px; letter-spacing: 0.3px; text-align: right; color: #525252; }
.cartInfo .subtotalContainer .productItem .price span { margin-right: 1px; font-size: 14px; line-height: 20px; display: inline-block; }
.cartInfo .subtotalContainer .subtotal { margin-bottom: 20px; }
.cartInfoForm .btn-group-toggle .btnCustom-outline{
	height: auto;
	min-height: 36px;
	padding: 6px 0;
	line-height: 1.2em;
	display: flex;
    align-items: center;
    justify-content: center;
}
.cartInfoForm .btn-group-toggle .btnCustom-outline:hover{
	background: var(--mainGreenLight);
}
.cartInfoForm .btn-group-toggle .btnCustom-outline.active:hover{
	background: var(--mainGreen);
}
.cartInfoForm .btn-group-toggle .btnCustom-outline:focus, .cartInfoForm .btn-group-toggle .btnCustom-outline.focus{
	outline: none; box-shadow: none;
}
.uniNumberInput{
	display: none;
}
.uniNumberInput.active{
	display: block;
}
.uniNumberInput .{
	font: 400 13px '微軟正黑體';
    line-height: 13px;
    letter-spacing: 0.2px;
    color: #c6002f;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> cartBuild.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cartBuild { margin-bottom: 45px; }
.cartBuild .buildContentContainer { border: solid 1px var(--mainGreen); border-radius: 15px; background: #f3f3f3; overflow: hidden; }
.cartBuild .buildContentContainer .title { height: 50px; font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 50px; color: #fff; letter-spacing: 2px; text-align: center; background: var(--mainGreen) }
.cartBuild .buildContentContainer .content { padding: 15px 20px; }
.cartBuild .buildContentContainer .text { margin-bottom: 20px; font: 600 15px 'Century Gothic', '微軟正黑體'; line-height: 20px; color: #242424; }
.cartBuild .buildContentContainer .text a { color: #c6002f; transition: all 0.4s; }
.cartBuild .buildContentContainer .text a:hover { opacity: 0.8; }
.cartBuild .buildContentContainer .info { }
.cartBuild .buildContentContainer .infoItem { padding: 10px 0; display: flex; justify-content: space-between; align-items: flex-end; }
.cartBuild .buildContentContainer .infoItem:not(:last-child) { border-bottom: solid 1px #fff; }
.cartBuild .buildContentContainer .infotitle { font: 400 15px 'Century Gothic', '微軟正黑體'; color: #626262; }
.cartBuild .buildContentContainer .infoContent { font: 400 17px 'Century Gothic', '微軟正黑體'; letter-spacing: 0.5px; color: #333; }
.cartBuild .buildContentContainer.fail { border-color: #c6002f; }
.cartBuild .buildContentContainer.fail .title { background: #c6002f; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> memberLogin.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberLoginPage{
	padding: 80px 0;
	background-image: url(../../images/front/loginBg.png);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
}
	
.memberLoginPage .container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> memberNav.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.memberCenter .navContainer { height: 50px; margin-top: 30px; margin-bottom: 50px; border-bottom: solid 1px #ccc; display: flex; align-items: center; }
.memberCenter .navContainer .item { width: 25%; font: bold 18px 'Century Gothic', '微軟正黑體'; line-height: 46px; text-align: center; color: #555; position: relative; transition: all 0.4s; }
.memberCenter .navContainer .item:not(:last-child)::after { content: ''; width: 1px; height: 30px; background: #eee; position: absolute; top: 50%; right: -0.5px; transform: translateY(-50%); }
.memberCenter .navContainer .item.active { border-bottom: solid 2px  var(--mainGreen); }
.memberCenter .navContainer .item:hover { background: rgba(118, 160, 30, 0.05); }
.memberCenter .navContainer .item a { color: inherit; display: block; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member-info.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.mamberInfo .infoContainer { max-width: 600px; margin: 0 auto 50px; }
.mamberInfo .infoContainer .form-group .col-form-label span { color: #ffb19b; }
.mamberInfo .infoContainer .form-group .form-control.cursor-notallowed { opacity: 0.6; }
.mamberInfo .infoContainer .form-group small{font-size: 12px; color: #969696}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member-course.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#mamberCourse .courseContainer { margin-bottom: 60px; }
#mamberCourse .courseContainer .item { position: relative; overflow: hidden; }
#mamberCourse .courseContainer .item .buttonBox { margin: 10px 0 20px; }
#mamberCourse .courseContainer .item .buttonBox .btnCustom { width: calc(100% - 30px); max-width: 300px; height: 40px; margin: 0 auto; font: normal 18px 'Century Gothic', '微軟正黑體'; line-height: 40px; letter-spacing: 1px; text-align: center; }
#mamberCourse .courseContainer .item.expire .coverBox { display: flex; }
#mamberCourse .courseContainer .item .coverBox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 20; display: none; flex-direction: column; }
#mamberCourse .courseContainer .item .coverBox .icon { flex-grow: 1; display: flex; justify-content: center; align-items: center; }
#mamberCourse .courseContainer .item .coverBox .icon .img { width: 150px; height: 150px; border-radius: 50%; border: dashed 2px #fff; background: rgba(255, 255, 255, 0.2); text-align: center; line-height: 138px; overflow: hidden; display:flex; align-items:center; justify-content:center; }
#mamberCourse .courseContainer .item .coverBox .icon img { width: 72px; }
#mamberCourse .courseContainer .item:hover .coverBox .icon img { transform: scale(1); }
#mamberCourse .courseContainer .item .coverBox .text { font: 600 20px 'Century Gothic', '微軟正黑體'; line-height: 30px; text-align: center; letter-spacing: 0.5px; color: #fff; }
#mamberCourse .courseContainer .item .coverBox .buttonBox { margin-top: 30px; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member-like.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#mamberlike .courseContainer { margin-bottom: 60px; }
#mamberlike .courseContainer .listContainer .item { transition: all 0.6s; }
#mamberlike .courseContainer .listContainer .item.remove { opacity: 0; }
#mamberlike .courseContainer .listContainer .item .price { height: 50px; }
#mamberlike .courseContainer .listContainer .item .price span { font-size: 20px; line-height: 50px; }
#mamberlike .courseContainer .listContainer .item .price .notBuy { font: normal 20px 'Century Gothic', '微軟正黑體'; line-height: 50px; display: block; cursor: pointer; }
#mamberlike .courseContainer .listContainer .item .price span.alreadyBuy { }
#mamberlike .courseContainer .listContainer .item.notBuy .notBuy { display: block; }
#mamberlike .courseContainer .listContainer .item.notBuy .alreadyBuy { display: none; }
#mamberlike .courseContainer .listContainer .item.alreadyBuy .notBuy { display: none; }
#mamberlike .courseContainer .listContainer .item.alreadyBuy .alreadyBuy { display: block; }
#mamberlike .courseContainer .listContainer .item.alreadyBuy .price { color: #777; background: #ccc; }
/*#mamberlike .noLikeContainer{
	font: 600 30px 'Century Gothic', '微軟正黑體';
	line-height: 40px;
	color: #666;
	text-align: center;
}
#mamberlike .noLikeContainer span{
	font: 600 22px 'Century Gothic', '微軟正黑體';
	line-height: 30px;
	color: #999;
	text-align: center;
}*/

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member-order.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.orderTypeContainer { width: 100%; max-width: 300px; margin-bottom: 40px; position: relative; transition: all 0.4s; z-index: 20; }
.orderTypeContainer.active { }
.orderTypeContainer .typeTitle { width: 100%; height: 46px; display: flex; align-items: center; background: var(--mainGreen); cursor: pointer; }
.orderTypeContainer .typeTitle .title { width: calc(100% - 50px); padding-left: 50px; font: 600 15px 'Century Gothic', '微軟正黑體'; line-height: 50px; letter-spacing: 1px; text-align: center; color: #fff; }
.orderTypeContainer .typeTitle .icon { width: 16px; height: 16px; margin: 0 17px; position: relative; }
.orderTypeContainer .typeTitle .line { width: 16px; height: 16px; position: absolute; top: 0; left: 0; transition: all 0.4s; }
.orderTypeContainer .typeTitle .line::before { content: ''; width: 16px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.orderTypeContainer .typeTitle .line:last-child { transform: rotate(270deg); }
.orderTypeContainer.active .typeTitle .line:last-child { transform: rotate(0deg); }
.orderTypeContainer .typeContent { width: 100%; position: absolute; z-index: 20; transition: all 0.4s; overflow: hidden; }
.orderTypeContainer .typeContent .itemRow { width: 100%; border: solid 1px #ddd; border-top: none; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f5f5f5; }
.orderTypeContainer .typeContent .item { width: 100%; height: 48px; font: normal 16px 'Century Gothic', '微軟正黑體'; text-align: center; line-height: 48px; cursor: pointer; position: relative; }
.orderTypeContainer .typeContent .item.active { background: transparent; color: var(--mainGreen); }
.orderTypeContainer .typeContent .item:hover { background: #eee; }
.orderTypeContainer .typeContent .item:not(:last-child)::after { content: ''; width: calc(100% - 40px); height: 1px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); background: #e0e0e0; }
.empty { padding: 0px 0 100px; text-align: center; }
.empty .icon { margin-bottom: 15px; font-size: 150px; line-height: 150px; color: #e5e5e5; }
.empty .text { font: 400 20px 'Century Gothic', '微軟正黑體'; letter-spacing: 2px; color: #626262; }
.mamberOrder .orderList { margin-bottom: 50px; }
.mamberOrder .orderList .orderWarningNote { width: 100%; height: 50px; margin-bottom: 15px; border-radius: 6px; font: 400 16px 'Century Gothic', '微軟正黑體'; line-height: 50px; letter-spacing: 0.1px; text-align: center; color: #c6002f; background: #ffdee4; }
.mamberOrder .orderList .orderWarningNote i { margin-right: 5px; display: inline-block; }
.mamberOrder .orderList .item { }
.mamberOrder .orderList .item .itemHead { }
.mamberOrder .orderList .item .itemHead .top { height: 66px; padding: 0 20px; border-radius: 15px 15px 0 0; background: #dce4d2; display: flex; justify-content: space-between; align-items: center; }
.mamberOrder .orderList .item .itemHead .number { font: 600 22px 'Century Gothic', '微軟正黑體'; color: var(--mainGreen); cursor: pointer; position: relative; }
.mamberOrder .orderList .item .itemHead .triangle { width: 0; height: 0; border-style: solid; border-width: 0 8px 10px 8px; border-color: transparent transparent var(--mainGreen) transparent; position: absolute; top: 50%; right: -20px; transform: translateY(-50%) rotate(180deg); transition: all 0.4s; }
.mamberOrder .orderList .item.active .itemHead .triangle { transform: translateY(-50%) rotate(0deg); }
.mamberOrder .orderList .item .itemHead .status { width: 100px; height: 36px; border-radius: 8px; font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 36px; text-align: center; background: var(--mainGreen); color: #fff; }
.mamberOrder .orderList .item .itemHead .status.unpay { background: #ff9637; }
.mamberOrder .orderList .item .itemHead .status.cancel { background: #999; }
.mamberOrder .orderList .item .itemHead .status.return { background: #ea3737; }
.mamberOrder .orderList .item .itemHead .bottom { height: 50px; padding: 0 20px; border-bottom: solid 1px #eee; display: flex; justify-content: space-between; align-items: center; background: #f5f5f5; flex-wrap: wrap; }
.mamberOrder .orderList .item .itemHead .headBottomItem { display: flex; align-items: baseline; font: 400 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 0.5px; }
.mamberOrder .orderList .item .itemHead .time, .mamberOrder .orderList .item .itemHead .payment{ width: 60%; }
.mamberOrder .orderList .item .itemHead .time { }
.mamberOrder .orderList .item .itemHead .payment { }
.mamberOrder .orderList .item .itemHead .subTitle { margin-right: 10px; font: 400 14px 'Century Gothic', '微軟正黑體'; color: #888; }
.mamberOrder .orderList .item .itemHead .text { }
.mamberOrder .orderList .item .itemMain { overflow: hidden; transition: all 0.4s; }
.mamberOrder .orderList .item .itemMain .invoiceInfo{
	padding: 15px 15px;
	background: #eee;
}
.mamberOrder .orderList .item .itemMain .invoiceInfo .title{
	margin-bottom: 10px;
	font: 600 15px 'Century Gothic', '微軟正黑體';
	line-height: 15px;
	color: #333;
}
.mamberOrder .orderList .item .itemMain .invoiceInfo .top{
	margin-bottom: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
.mamberOrder .orderList .item .itemMain .invoiceInfo .name{
	margin-right: 10px;
	font: 400 17px 'Century Gothic', '微軟正黑體';
	line-height: 17px;
	letter-spacing: 0.5px;
	color: var(--mainGreen);
}
.mamberOrder .orderList .item .itemMain .invoiceInfo .num{
	font: 400 15px 'Century Gothic', '微軟正黑體';
	line-height: 17px;
	color: #757575;
}
.mamberOrder .orderList .item .itemMain .invoiceInfo .add{
	font: 400 15px 'Century Gothic', '微軟正黑體';
	line-height: 15px;
	color: #757575;
}

.mamberOrder .orderList .item .itemMain .productList { padding: 15px 20px 20px; background: #f9f9f9; display: flex; flex-direction:column; gap:15px }
.mamberOrder .orderList .item .itemMain .productItem { min-height: 80px; display: flex; align-items: center; flex-wrap:wrap; }
.mamberOrder .orderList .item .itemMain .productItem:not(:last-child) { border-bottom: solid 1px #eee; }
.mamberOrder .orderList .item .itemMain .productItem .img { margin-right: 20px; width: 100px; height: 50px; overflow: hidden; align-self:center; }
.mamberOrder .orderList .item .itemMain .productItem .img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.mamberOrder .orderList .item .itemMain .productItem .titleBox{width: calc(100% - 220px); margin-right: 20px; }
.mamberOrder .orderList .item .itemMain .productItem .title { font: 400 18px 'Century Gothic', '微軟正黑體'; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #626262; transition: all 0.4s; display:flex; flex-direction:column; }
.mamberOrder .orderList .item .itemMain .productItem .title a { color: inherit; }
.mamberOrder .orderList .item .itemMain .productItem .title a:hover { opacity: 0.6; }

.mamberOrder .orderList .item .itemMain .productItem .title .tagPhysical{
	width: 45px;
	height: 20px;
	border-radius: 5px;
	background: #ff8e31;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 12px;
}
.mamberOrder .orderList .item .itemMain .productItem .title .text{
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 
}
.mamberOrder .orderList .item .itemMain .productItem .timeLimit { font: 400 14px 'Century Gothic', '微軟正黑體'; line-height: 14px; letter-spacing: 0.5px; color: #c6002f; }
.mamberOrder .orderList .item .itemMain .productItem .timeLimit.physical{
	color: var(--mainGreen);
}
.mamberOrder .orderList .item .itemMain .productItem .title .groupName{
	max-width: 100%;
	margin-top: 6px;
    padding: 3px 5px;
    border-radius: 4px;
    border: solid 1px var(--mainOrg);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.05em;
    color: var(--mainOrg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: flex-start;
}
.mamberOrder .orderList .item .itemMain .productItem .price { width: 80px; font: 400 18px 'Century Gothic', '微軟正黑體'; text-align: right; }
.mamberOrder .orderList .item .itemMain .productItem .noteBox{
	width: 100%;
	margin-top: 10px;
	padding: 12px;
	border-radius: 5px;
	border: solid 1px #dcdcdc;
	background: #efefef;
}
.mamberOrder .orderList .item .itemMain .productItem .noteTitle{
	font-size: 13px;
	font-weight: 600;
	color: #323232;

}
.mamberOrder .orderList .item .itemMain .productItem .noteContent{
	margin-top: 8px;
	font-size: 14px;
	color: #646464;
}
.mamberOrder .orderList .item .itemMain .discountList{ padding: 0 20px; background: #e9e9e9; }
.mamberOrder .orderList .item .itemMain .discountItem{ height: 40px; display: flex; align-items: center; }
.mamberOrder .orderList .item .itemMain .discountItem:not(:last-child) { border-bottom: solid 1px #fff; }
.mamberOrder .orderList .item .itemMain .discountItem .title{
	width: calc(100% - 100px);
	margin-right: 20px;
	font: 400 15px 'Century Gothic', '微軟正黑體';
	line-height: 15px;
	letter-spacing: 0.5px;
	text-align: right;
	color: #626262;
}
.mamberOrder .orderList .item .itemMain .discountItem .price{ width: 80px; font: 400 18px 'Century Gothic', '微軟正黑體'; text-align: right; }
/*
discountList
discountItem
title
price*/
.mamberOrder .orderList .item .itemFoot { height: 66px; padding: 0 20px; border-radius: 0px 0px 15px 15px; background: #f1f1f1; display: flex; justify-content: space-between; align-items: center; }
.mamberOrder .orderList .item .itemFoot .itemBtn { width: 100px; height: 36px; border-radius: 8px; font: 600 18px 'Century Gothic', '微軟正黑體'; line-height: 36px; text-align: center; background: #999; color: #fff; cursor: pointer; transition: all 0.4s;}
.mamberOrder .orderList .item .itemFoot .itemBtn.rePay { background: #c6002f ; }
.mamberOrder .orderList .item .itemFoot .itemBtn:hover{opacity: 0.6;}
.mamberOrder .orderList .item .itemFoot .priceTotal { margin-left: auto; font: 600 24px 'Century Gothic', '微軟正黑體'; line-height: 24px; letter-spacing: 0.5px; color: #fd9d7f; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> faq.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.faqContainer { max-width: 1100px; margin: 0 auto; padding: 50px 0 80px; }
.faqContainer .item { }
.faqContainer .item .quesContainer { height: auto; padding: 20px 15px 10px; border-bottom: solid 1px var(--mainGreen); display: flex; align-items: center; cursor: pointer; }
.faqContainer .item .quesContainer .titleContainer { width: calc(100% - 20px); margin-right: auto; display: flex; align-items: baseline; }
.faqContainer .item .quesContainer .num { font: 600 24px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: #98b756; }
.faqContainer .item .quesContainer .title { font: 600 18px 'Century Gothic', '微軟正黑體'; color: #626262; }
.faqContainer .item .quesContainer .icon { width: 16px; height: 16px; margin: 0 17px; position: relative; }
.faqContainer .item .quesContainer .line { width: 16px; height: 16px; position: absolute; top: 0; left: 0; transition: all 0.4s; }
.faqContainer .item .quesContainer .line::before { content: ''; width: 16px; height: 2px; background: #98b756; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faqContainer .item .quesContainer .line:last-child { transform: rotate(270deg); }
.faqContainer .item.active .quesContainer .line:last-child { transform: rotate(0deg); }
.faqContainer .item .ansContainer { overflow: hidden; transition: all 0.4s; }
.faqContainer .item .ansContainer .ansBox { padding: 30px 15px; background: #fafafa; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> contact.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.contact .contactContainer { max-width: 600px; margin: 50px auto 50px; }
.contact .contactContainer .form-group .col-form-label span { color: #ffb19b; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> privacy.php / terms.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.articlePrivacy .contentContainer .title, .articleTerms .contentContainer .title { margin-bottom: 15px; font: 600 22px 'Century Gothic', '微軟正黑體'; letter-spacing: 1px; color: var(--mainGreen); }
.articlePrivacy .contentContainer .subTtitle, .articleTerms .contentContainer .subTtitle { font: 600 17px 'Century Gothic', '微軟正黑體'; letter-spacing: 0.5px; color: var(--mainGreenLight); }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> links.php  <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#links {}
#links .linkList{
	max-width: 1420px;
	margin: 80px auto 40px;
}
#links .linkList .linkRow{}
#links .linkList .linkCol{
	margin-bottom: 40px;
}
#links .linkList .item{
	border: solid 1px #f5f5f5;
	position: relative;
	transition: all 0.4s;
	background: #fdfdfd;
}
#links .linkList .item:hover{
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}
#links .linkList .item .img{
	overflow: hidden;
	transition: all 0.4s;
	display: block;
}
#links .linkList .item:hover .img{
	filter: blur(1px);
}
#links .linkList .item .img img{
	transition: all 0.4s;
}
#links .linkList .item:hover .img img{
	transform: scale(1.12);
	
}
#links .linkList .item .content{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background: rgba(255, 255, 255, 0.8);
	transition: all 0.4s;
}
#links .linkList .item:hover .content{
	opacity: 1;
}
#links .linkList .item .title{
	font: 600 18px 'Century Gothic', '微軟正黑體';
	line-height: 23px;
	letter-spacing: 0.5px;
	color: var(--mainGreen);
	display: block;
	opacity: 0;
	transition: all 0.4s 0.1s;
}
#links .linkList .item:hover .title{
	opacity: 1;
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_footer.php <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.footer { width: 100%; height: 200px; background: var(--mainGreenLight); }
.footer .container { height: 100%; padding: 0; display: flex; }
.footer .logoContainer { width: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--mainGreen); }
.footer .logoContainer .logo { width: 150px; margin-bottom: 10px; }
.footer .logoContainer .mail { font: normal 16px 'Century Gothic', '微軟正黑體'; letter-spacing: 0.5px; color: var(--mainGreenLight); }
.footer .rightContainer { width: calc(100% - 220px); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.footer .rightContainer .infoContainer { display: flex; align-items: flex-end; }
.footer .rightContainer .idaLogo { width: 280px; margin-right: 30px; padding-left: 20px; position: relative; bottom: -3px; }
.footer .rightContainer .socialContainer { width: 180px; display: flex; justify-content: space-between; }
.footer .rightContainer .socialContainer .item { width: 28px; transition: all 0.4s; }
.footer .rightContainer .socialContainer .item.mail { width: 28px; height: 28px; border-radius: 50%; background: var(--mainGreen); font-size: 16px; text-align: center; line-height: 28px; color: var(--mainGreenLight); }
.footer .rightContainer .socialContainer .item:hover { opacity: 0.8; }
.footer .rightContainer .socialContainer .item a { color: inherit; }
.footer .rightContainer .navContainer { margin-left: auto; }
.footer .rightContainer .navContainer .top, .footer .rightContainer .navContainer .bottom { display: flex; justify-content: flex-end; }
.footer .rightContainer .navContainer .item { font: normal 16px 'Century Gothic', '微軟正黑體'; line-height: 42px; letter-spacing: 1px; color: #fff; transition: all 0.4s; }
.footer .rightContainer .navContainer .item:hover { color: var(--mainGreen); }
.footer .rightContainer .navContainer .item:not(:last-child) { margin-right: 30px; }
.footer .rightContainer .navContainer .item a { color: inherit; }
.footer .rightContainer .copyright { height: 51px; border-top: solid 1px var(--mainGreen); font: normal 13px 'Century Gothic', '微軟正黑體'; line-height: 50px; text-align: right; color: var(--mainGreen); }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> goTop <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.goTopContainer { width: 100%; height: 80px; position: absolute; bottom: 210px; transform: translateY(50%); z-index: 10; }
.goTopCircle { width: 80px; height: 80px; border-radius: 50%; border: solid 1.5px #001699; background: #001699; position: relative; left: 50%; transform: translateX(-50%); transition: all 0.4s; }
.goTopCircle:hover { background: #eee; }
.goTopContent { text-align: center; position: relative; top: 50%; transform: translate(0, -50%); }
.goTopContent a { color: #fff; display: block; transition: all 0.4s; }
.goTopCircle:hover .goTopContent a { color: #001699; }
.goTopIcon { width: 22px; height: 22px; border-top: solid 3px #fff; border-right: solid 3px #fff; position: relative; left: 50%; top: 5px; transform: translateX(-50%) rotate(-45deg); transition: all 0.4s; }
.goTopCircle:hover .goTopIcon { border-color: #001699; }
.goTopText { font: normal 18px 'Marcellus', '微軟正黑體'; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> goTop <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.sideLoginLink{
	position: fixed;
	right: -10px;
	bottom: 320px;
	transition: all 0.4s;
	z-index: 100;
}
.sideLoginLink:hover{
	right: 0px;
}
.sideLoginLink a{
	width: 60px;
	height: 60px;
	padding-left: 1px;
	padding-right: 10px;
	border-radius: 15px 0 0 15px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--mainGreenLight);
	transition: all 0.4s;
}

.sideLoginLink a:hover{
	padding-right: 0px;
	background: var(--mainGreen);
}
.sideLoginLink a:hover .defaultIcon::before{
	background: #fff;
}
.sideLoginLink .defaultIcon{

}
.sideLoginLink .defaultIcon::before{
	content:'';
	width: 30px;
	height: 30px;
	display: block;
	background: var(--mainGreen);
	mask-image: url(../../images/front/icon-login.svg);
	mask-size: contain;
	mask-position: center center;
	transition: all 0.4s;
}
.sideLoginLink .text{
	margin-top: 3px;
	font-size: 12px;
	line-height: 1em;
	
}

.socialSidebarContainer{
	display: flex;
	position: fixed;
	right: -80px;
	bottom: 80px;
	opacity: 0.6;
	transition: all 0.4s;
	z-index: 100;
}
.socialSidebarContainer:hover{
	opacity: 1;
}
.socialSidebarContainer.openMenu{
	right: 0;
	opacity: 1;
}
.socialSidebarContainer .controlBtn{
	width: 50px;
	height: 150px;
	border: none;
	border-radius: 15px 0 0 15px;
	background: var(--mainGreen);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}
.socialSidebarContainer .controlBtn:focus{
	outline: none;
}
.socialSidebarContainer .controlBtn i{
	margin-bottom: 8px;
	display: block;
	font-size: 16px;
}
.socialSidebarContainer .controlBtn .test{
	display: block;
	writing-mode: vertical-lr;
	font-size: 17px;
	letter-spacing: 0.15em;
}
.socialSidebarContainer .socialLinks{
	width: 80px;
	border-radius: 0 0 0 15px;
	background: #f5f5f5;
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
}
.socialSidebarContainer .socialLinks ul{
	width: 100%;
}
.socialSidebarContainer .socialLinks ul li{
	width: 100%;
	position: relative;
}
.socialSidebarContainer .socialLinks ul li:not(:last-child)::after{
	content: '';
	width: 15px;
	height: 1px;
	background: rgba(0,0,0,0.15);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}
.socialSidebarContainer .socialLinks ul li a{
	width: 100%;
	height: 70px;
	display: flex;
	color: var(--mainGreen);
	opacity: 0.7;
	align-items: center;
	justify-content: center;
	font-size: 35px;
	transition: all 0.4s;
}
.socialSidebarContainer .socialLinks ul li a:hover{
	opacity: 1;
}
.socialSidebarContainer .socialLinks ul li a i{}

.wechatModal{}
.wechatModal .modal-content{
	border-radius: 30px;
}
.wechatModal .modal-header{
	padding: 20px 30px 10px;
	display: flex;
}
.wechatModal .modal-header .modal-title{
	font-weight: 400;
	color: #777;
}
.wechatModal .modal-header .close{
	font-size: 20px;
}
.wechatModal .modal-body{
	padding: 30px 30px 40px;
}
.wechatModal .modal-body img{
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
	display: block;
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> other <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.colorImportant{
	color: #c6002f;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> loading <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}
@keyframes loadingTextAni {
  	0%{
  		color: #ddd;
  		top: 0px;
  	}
  	10%{
  		color: #b3d66b;
  		top: 0px;
  	}
  	20%{color: #b3d66b;
  		top: -2px;
  	}
  	30%{
  		color: #b3d66b;
  		top: 0px;
  	}
  	40%{color: #ddd;}
  	50%{color: #ddd;}
  	60%{color: #ddd;}
  	70%{color: #ddd;}
  	80%{color: #ddd;}
  	90%{color: #ddd;}
	100%{color: #ddd;}
}
.loadingContainer{
	padding: 50px 0;
}
.loadingContainer .text { padding-top: 15px; text-align: center; color: #999; font: 400 20px 'Century Gothic', '微軟正黑體'; display: flex; justify-content: center; }
.loadingContainer .text .item { padding: 1px; -webkit-animation: loadingTextAni 1200ms linear 0ms infinite; position: relative; }
.loadingContainer .text .item:nth-child(2) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 1) infinite; }
.loadingContainer .text .item:nth-child(3) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 2) infinite; }
.loadingContainer .text .item:nth-child(4) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 3) infinite; }
.loadingContainer .text .item:nth-child(5) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 4) infinite; }
.loadingContainer .text .item:nth-child(6) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 5) infinite; }
.loadingContainer .text .item:nth-child(7) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 6) infinite; }
.loadingContainer .text .item:nth-child(8) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 7) infinite; }
.loadingContainer .text .item:nth-child(9) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 8) infinite; }
.loadingContainer .text .item:nth-child(10) { -webkit-animation: loadingTextAni 1200ms linear calc(120ms * 9) infinite; }
.sk-folding-cube { margin: 20px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #b3d66b; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); }
.sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); }
.sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); }
.sk-folding-cube .sk-cube2:before, .sk-folding-cube .sk-cube4:before { background-color: #f1f1f1; }
.sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pageLoading <<<------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@keyframes pageLoadingTextAni {
  	0%{
  		color: #eee;
  		top: 0px;
  	}
  	10%{
  		color: #b3d66b;
  		top: 0px;
  	}
  	20%{color: #b3d66b;
  		top: -2px;
  	}
  	30%{
  		color: #b3d66b;
  		top: 0px;
  	}
  	40%{color: #eee;}
  	50%{color: #eee;}
  	60%{color: #eee;}
  	70%{color: #eee;}
  	80%{color: #eee;}
  	90%{color: #eee;}
	100%{color: #eee;}
}

.pageLoading { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; }
.pageLoading .bg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); position: absolute; top: 0; left: 0; }
.pageLoading .loadingContainer { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
.pageLoading .sk-folding-cube .sk-cube2:before, .pageLoading .sk-folding-cube .sk-cube4:before { background-color: #fff; }
.pageLoading .loadingContainer .text .item { padding: 1px; -webkit-animation: pageLoadingTextAni 1200ms linear 0ms infinite; position: relative; }
.pageLoading .loadingContainer .text .item:nth-child(2) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 1) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(3) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 2) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(4) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 3) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(5) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 4) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(6) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 5) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(7) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 6) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(8) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 7) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(9) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 8) infinite; }
.pageLoading .loadingContainer .text .item:nth-child(10) { -webkit-animation: pageLoadingTextAni 1200ms linear calc(120ms * 9) infinite; }



/* -------------->>> ie-decide.php ie瀏覽器限制 <<<----------------*/
.modal_browse { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); }
.wrap { max-width: 800px; margin: 100px auto 0 auto; font-size: 1.2em; text-transform: capitalize; line-height: 1.5; text-align: center; background: #FFF4F4; padding: 50px 30px; }
.wrap .text { text-align: left; }
.wrap a { display: block; text-transform: capitalize; }
.wrap h2 { font-size: 19px; text-decoration: underline; color: #e25600; margin: 0; }
.wrap h3 { font-size: 10px; color: #aaa; margin: 0; }
.wrap img { margin: auto; }