@charset "utf-8";
@import url("animate.css");
@import url("small_showmsg.css?ts=1");
@import url("effects_block.css");
@import url("form_style.css?ts=11");

/* CSS Document */

html,
body {
	font-size: 18px;
	font-family: Microsoft JhengHei, Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
	padding: 0px;

	scroll-behavior: smooth;
}

body {
	background-image: url(../images/bg/dust_scratches.png );
	/*
	========================================================
	This pattern is downloaded from www.toptal.com/designers/subtlepatterns/ 
	If you need more, that's where to get'em.
	========================================================
	*/
}

a,
a:link,
a:visited,
a:active,
a:hover {
	color: #666666;
	text-decoration: none;
}

img {
	border: 0px;
}

pre {
	white-space: pre-wrap;
	/* Since CSS 2.1 */
	white-space: -moz-pre-wrap;
	/* Mozilla, since 1999 */
	white-space: -pre-wrap;
	/* Opera 4-6 */
	white-space: -o-pre-wrap;
	/* Opera 7 */
	word-wrap: break-word;
	/* Internet Explorer 5.5+ */

	/* 覆蓋瀏覽器預設 */
	padding: 0;
	margin: 0;
	background-color: transparent;
	border: 0;
	color: #757575;

	font-size: 15px;
	line-height: 1.5;
}

.margin_10topbottom {
	margin: 10px 0;
}

/* xs version */
@media (max-width: 768px) {}


/* 
.row{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.row [class="col-"]{
	display: flex;
	flex-direction: column;
}*/


/*
 * Row with equal height columns
 * --------------------------------------------------
 */

.cursor {
	cursor: pointer;
}

.marginTop10px {
	margin-top: 10px;
}

.marginTop20px {
	margin-top: 20px;
}

.margintb20px {
	margin: 20px 0;
}

/*------- under construction START----------*/
.undercon_block {
	/* padding:60px 0; */
	position: relative;
	width: 100%;
}

.undercon_img {
	width: 100%;
}

.undercon_img img {
	max-width: 300px !important;
}

.undercon_chtext {
	margin-top: 20px;
	color: rgba(0, 0, 0, 0.5);
	font-size: 20px;
	font-weight: 600;
}

.undercon_entext {
	color: rgba(0, 0, 0, 0.4);
	margin-top: 10px;
	font-size: 16px;
	font-weight: 600;
}

.undercon_importantchtext {
	margin-bottom: 20px;
	color: rgba(188, 66, 0, 0.9);
	font-size: 20px;
	font-weight: 600;
}

/*------- under construction End----------*/
/* 20230531 張淯瑄 修改 */
.imgAreaContain {
	width: 100%;
	position: relative;
	-webkit-background-size: contain;
	background-size: contain;
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: center;

	overflow: hidden;

	transition: all .5s ease-in-out;
}

.html_title {
	color: var(--footertop-color);
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 0px;
	letter-spacing: 2px;
	line-height: 1.5;

	position: relative;
}

.html_con {
	position: relative;
	width: 100%;
	padding: 20px;
	margin-bottom: 20px;
	min-height: 400px;
	line-height: 1.5;
	letter-spacing: 2px;
}

.html_con img,
.html_con table,
.html_con iframe {
	max-width: 100%;
}

.map_iframe iframe {
	width: 100%;
}

/*------breadcrumb---------*/
.breadcrumb {
	font-size: 14px;
	width: 100%;
	text-align: center;
	border: 0;
	padding: 8px;
	position: relative;
	bottom: 0;
	margin-bottom: 0px;
	list-style: none;
	background: transparent;
}

.breadcrumb>li {
	display: inline-block;
}

.breadcrumb>li {
	max-width: 350px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breadcrumb>li a:hover {
	color: var(--main-color);
}

/*------breadcrumb---------*/
/*------index---------*/
.html_indextitle {
	color: var(--footertop-color);
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	letter-spacing: 2px;
	line-height: 1.5;

	position: relative;
}

/*------index---------*/
/*------news---------*/
.news_containter {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;

	padding: 0 10px 20px;
}

.news_main {
	position: relative;
	width: 100%;
	vertical-align: top;
	padding: 0;
	margin: 0;
}

.news_main li {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: stretch;

	padding: 10px;

	background-color: #fff;

	cursor: pointer;
	transition: all .5s ease-in-out;
}

.news_main li+li {
	border-top: 1px solid var(--line-colorv4);
}

.news_main li:hover {
	background-color: var(--bg6-color);
}

.news_main li:hover .imgAreaContain {
	transform: scale(1.2, 1.2);
}

.nmain_liimg {
	width: 300px;
	overflow: hidden;
}

.nmain_liinfo {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;

	width: calc(100% - 300px);
	padding-left: 15px;
}

.nmain_lcinfo {
	position: relative;
	width: 100%;
}

.nmain_classtag {
	font-size: 14px;
	display: inline-block;

	position: relative;
	color: #fff;
	background-color: var(--footertop-color);
	margin-bottom: 8px;
	padding: 5px;
}

.nmain_btitle {
	font-size: 20px;
	font-weight: 600;
	color: var(--fonts15-color);
	transition: all .5s ease-in-out;
	margin-top: 10px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nmain_desc {
	font-size: 15px;
	color: var(--fonts-color);
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.nmain_othermsg {
	color: var(--fonts20-color);
	font-size: 13px;
	margin-top: 15px;
	text-align: right;
}

.flex_align_top {
	align-self: flex-start;
}

.flex_align_bottom {
	align-self: flex-end;
}

@media (max-width: 600px) {
	.nmain_liimg {
		width: 100%;
	}

	.nmain_liinfo {
		width: 100%;
		padding-left: 0px;
	}

	.nmain_btitle {
		margin-top: 10px;
	}

	.nmain_classtag {
		margin-top: 8px;
	}
}

.part_menu_area {
	position: sticky;
	top: var(--header-height);

	color: var(--fonts18-color);
	width: calc(100% - 20px);
	clear: both;
	background-color: var(--bg6-color);
	border: 1px solid var(--line-colorv5);
	padding: 10px;
	margin: 0 auto;
	margin-bottom: 10px;

	z-index: 10;
}

.part_menu_area ul {
	padding: 0 0 0 10px;
}

.part_menu_area li {
	display: inline-block;
	font-size: 15px;
	height: 20px;
	margin: 0px 8px 10px 0px;
}

.part_menu_area li a {
	transition: all .2s ease-in-out;
}

.part_menu_area li .isAtive,
.part_menu_area li:hover a {
	color: var(--red5-color);
}

.clearfix:after {
	content: ".";
	display: block;
	overflow: hidden;
	height: 0;
	clear: both;
	visibility: hidden;
}

.news_h1title {
	font-size: 28px;
	font-weight: 600;
	margin-top: 15px;
	margin-bottom: 30px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-align: center;
}

#showcon_set {
	letter-spacing: 2px;
	word-wrap: break-word;
	word-break: break-all;
}

.news_bbtnblock {
	width: 100%;
	padding: 10px;
	text-align: center;
}

.newsget_title {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2px;
	display: inline-block;
	padding: 5px 30px 5px 7px;
	color: var(--fonts18-color);
	background: -o-linear-gradient(25deg, var(--bg6-color) 0, var(--bg6-color) 80.5%, var(--bg6-color) 80.5%, transparent 80.6%, transparent 100%);
	background: linear-gradient(65deg, var(--bg6-color), var(--bg6-color) 80.5%, var(--bg6-color) 0, transparent 80.6%, transparent);
	font-weight: 400;
	margin: 0;
}

.newsget_hr {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--bg6-color);
	border-bottom: 1px solid var(--line-colorv5);
}

ul {
	list-style: none;
}

ul.nclass_ul {
	position: relative;
	width: 100%;
}

ul.nclass_ul li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	color: var(--fonts15-color);
	font-size: 15px;
	width: 100%;
	cursor: pointer;
	padding: 10px 5px;
	border-bottom: 1px solid var(--fonts8-color);

	transition: all .5s ease-in-out;
}

ul.nclass_ul li:last-child {
	border-width: 0px;
}

ul.nclass_ul li:hover {
	color: var(--fonts19-color);
}

ul.nclass_ul li.active,
ul.nclass_ul li.active a {
	color: var(--main-color);
}

ul.interest_ul {
	position: relative;
	width: 100%;
}

ul.interest_ul li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	color: var(--fonts15-color);
	font-size: 15px;
	width: 100%;
	cursor: pointer;
	padding: 10px 5px;
	border-bottom: 1px solid var(--fonts8-color);

	transition: all .5s ease-in-out;
}

ul.interest_ul {
	counter-reset: myli 0;
}

ul.interest_ul li:before {
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	background: var(--bg8-color);
	font-size: 13px;
	color: #fff;
	text-align: center;
	font-style: normal;
	margin-top: 5px;
	margin-right: 5px;
	content: counter(myli);
	counter-increment: myli 1;
}

ul.interest_ul li a {
	width: calc(100% - 23px);

	transition: all .5s ease-in-out;
}

ul.interest_ul li:hover a {
	color: var(--red7-color);
}

ul.interest_ul li:last-child {
	border-width: 0px;
}

.newshotget_title {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2px;
	display: inline-block;
	padding: 5px 30px 5px 7px;
	color: #fff;
	background: -o-linear-gradient(25deg, var(--red6-color) 0, var(--red6-color) 80.5%, var(--red6-color) 80.5%, transparent 80.6%, transparent 100%);
	background: linear-gradient(65deg, var(--red6-color), var(--red6-color) 80.5%, var(--red6-color) 0, transparent 80.6%, transparent);
	font-weight: 400;
	margin: 0;
}

.newshotget_hr {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--red6-color);
	border-bottom: 1px solid var(--line-colorv5);
}

ul.hotnews_ul {
	position: relative;
	width: 100%;
}

ul.hotnews_ul li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	color: var(--fonts15-color);
	font-size: 15px;
	width: 100%;
	cursor: pointer;
	padding: 10px 5px;
	border-bottom: 1px solid var(--fonts8-color);

	transition: all .5s ease-in-out;
}

ul.hotnews_ul li:before {
	font-family: 'icomoon' !important;
	content: '\ea57';

	display: inline-block;
	width: 18px;
	font-size: 13px;
	color: var(--red7-color);
	text-align: center;
	font-style: normal;
	margin-right: 5px;
}

ul.hotnews_ul li a {
	width: calc(100% - 23px);

	transition: all .5s ease-in-out;
}

ul.hotnews_ul li:hover a {
	color: var(--red7-color);
}

ul.hotnews_ul li:last-child {
	border-width: 0px;
}

/*------news---------*/
/*------article---------*/
.article_containter {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;

	padding: 0 10px 20px;
}

.acon_left {
	width: 71%;
	padding-right: 5px;
}

.acon_right {
	position: sticky;
	top: var(--header-height);

	width: 29%;
	padding: 10px;
	background-color: #fff;
	overflow: hidden;
}

.widget_title {
	font-size: 16px;
	width: 100%;
	font-weight: 500;
	color: var(--fonts18-color);
	background-color: var(--bg6-color);
	border: 1px solid var(--line-colorv5);
	text-align: center;
	padding: 10px;
	margin-bottom: 5px;
	margin-top: 20px;
}

.widget_title:first-child {
	margin-top: 0px;
}

ul {
	list-style: none;
}

ul.aclass_ul {
	position: relative;
	width: 100%;
}

ul.aclass_ul li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	color: var(--fonts15-color);
	font-size: 15px;
	width: 100%;
	cursor: pointer;
	padding: 10px 5px;
	border-bottom: 1px solid var(--fonts8-color);

	transition: all .5s ease-in-out;
}

ul.aclass_ul li:last-child {
	border-width: 0px;
}

ul.aclass_ul li:hover {
	color: var(--fonts19-color);
}

ul.aclass_ul li.active,
ul.aclass_ul li.active a {
	color: var(--main-color);
}

.aclass_liname {
	line-height: 1.5;
	letter-spacing: 2px;
	width: calc(100% - 50px);
}

.aclass_nums {
	width: 50px;
	text-align: right;
}

ul.article_main {
	position: relative;
	width: 100%;
	vertical-align: top;
	padding: 0;
	margin: 0;
}

ul.article_main li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	width: 100%;
	margin-right: 0;
	padding: 15px 10px 20px;
	background-color: #fff;
	border-bottom: 1px solid var(--line-colorv4);
	line-height: 1.5;
	letter-spacing: 1px;
	cursor: pointer;

	transition: all .5s ease-in-out;
}

ul.article_main li:hover {
	box-shadow: 0 2px 15px -2px rgb(0 0 0 / 12%), 0 2px 6px -2px rgb(0 0 0 / 5%);
}

.amain_liimg {
	width: 46%;
	overflow: hidden;
}

ul.article_main li:hover .imgAreaContain {
	transform: scale(1.2, 1.2);
}

.amain_liinfo {
	width: 54%;
	padding-left: 15px;
}

.amain_classtag {
	font-size: 15px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: flex-start;
	align-items: center;

	position: relative;
	color: var(--fonts-color);
	margin-bottom: 8px;
}

.amain_inclasstag {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;

	position: relative;
	color: var(--fonts-color);
	margin-top: 10px;
}

.split_symbol {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	justify-content: center;
	align-items: center;

	font-size: 25px;
	width: 10px;
	max-height: 21px;
}

.amain_btitle {
	font-size: 20px;
	font-weight: 600;
	color: var(--fonts15-color);
	transition: all .5s ease-in-out;
	margin-top: 10px;
}

ul.article_main li:hover .amain_btitle {
	color: var(--fonts17-color);
}

.amain_desc {
	font-size: 15px;
	color: var(--fonts-color);
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.amain_othermsg {
	width: 100%;
	text-align: right;
	color: var(--fonts20-color);
	font-size: 13px;
	margin-top: 15px;
	text-align: right;
}

.amain_inothermsg {
	color: var(--fonts20-color);
	font-size: 13px;
	padding: 10px;
	padding-top: 0px;
}

.amin_intitle {
	font-size: 30px;
	font-weight: 500;
	color: var(--fonts15-color);
	text-align: center;
	padding: 10px;
	padding-top: 0px;
	margin-bottom: 10px;
}

.amain_incontent {
	position: relative;
	width: 100%;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 2px 15px -2px rgb(0 0 0 / 12%), 0 2px 6px -2px rgb(0 0 0 / 5%);
	margin-bottom: 10px;
}

.share_block {
	width: 100%;
	padding: 5px;
	margin-bottom: 15px;
	background-color: var(--bg6-color);

	position: sticky;
	top: var(--header-height);
	z-index: 10;
}

.article_h1title {
	font-size: 28px;
	font-weight: 600;
	margin-top: 15px;
	margin-bottom: 30px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-align: center;
}

.shareArea_pos {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	justify-content: start-end;
	align-items: center;
}

.shareBtnPublic {
	font-size: 25px;
	margin-right: 8px;
}

.facebookBtn,
.twitterBtn,
.plurkBtn,
.LineBtn,
.messagesBtn,
.linkBtn {
	color: var(--fonts1-color) !important;
	transition: all .3s ease-in-out;
}

.facebookBtn:hover {
	color: #1877f2 !important;
	background-color: transparent !important;
}

.twitterBtn:hover {
	color: rgb(29, 155, 240) !important;
	background-color: transparent !important;
}

.plurkBtn:hover {
	color: #ff574d !important;
	background-color: transparent !important;
}

.LineBtn:hover {
	color: #00c300 !important;
	background-color: transparent !important;
}

.messagesBtn:hover {
	color: #0066CC !important;
	background-color: transparent !important;
}

.linkBtn:hover {
	color: #BB3D00 !important;
	background-color: transparent !important;
}

.amain_inImg {
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 20px;
}

.amain_arrowblock {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	justify-content: center;
	align-items: center;

	width: 100%;
	margin-bottom: 10px;

	background-color: #fff;

	box-shadow: 0 2px 15px -2px rgb(0 0 0 / 12%), 0 2px 6px -2px rgb(0 0 0 / 5%);
}

.amain_arrleft,
.amain_arrright {
	position: relative;
	width: 50%;
	padding: 10px;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	cursor: pointer;

	transition: all .2s ease-in-out;
}

.amain_arrleft:hover,
.amain_arrright:hover {
	color: var(--fonts17-color);
	background-color: var(--bg6-color);
}

.aain_direction {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	justify-content: center;
	align-items: center;

	font-size: 30px;
	width: 20px;
}

.aain_lefttitle,
.aain_righttitle {
	width: calc(100% - 20px);

	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.aain_lefttitle {
	padding-left: 10px;
}

.aain_righttitle {
	padding-right: 10px;
}

ul.hotarticle_ul {
	position: relative;
	width: 100%;
}

ul.hotarticle_ul li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	align-items: flex-start;

	color: var(--fonts15-color);
	font-size: 15px;
	width: 100%;
	cursor: pointer;
	padding: 10px 5px;

	transition: all .5s ease-in-out;
}

ul.hotarticle_ul li:hover {
	color: var(--fonts19-color);
}

.hoticon {
	width: 20px;
	padding-top: 5px;
}

.hotinfo {
	line-height: 1.5;
	letter-spacing: 2px;
	width: calc(100% - 20px);
}

.hotinfo a {
	color: var(--main-color);
	transition: all .5s ease-in-out;
}

.hotinfo a:hover {
	color: var(--sub-color);
}

.catalog_block {
	color: var(--fonts4-color);
	background: var(--bg7-color);
	padding: 14px 18px 18px;
	display: inline-block;
	min-width: 200px;
	max-width: 100%;
}

.catalog_header {
	font-size: 16px;
	font-weight: 600;
	color: var(--fonts21-color);
	margin-bottom: 5px;
}

.catalog_h2item {
	margin-bottom: 5px;
}

.catalog_h3item {
	margin-bottom: 5px;
	padding-left: 15px;
}

.a_flex {
	margin-bottom: 5px;
	line-height: 1.5;
	letter-spacing: 2px;
}

.aflex_nums {
	width: 25px;
}

.aflex_info {
	width: calc(100% - 25px);
}

.aflex_nums_h3 {
	width: 35px;
}

.aflex_info_h3 {
	width: calc(100% - 35px);
}

.editor_htmlcon a,
.editor_htmlcon a:link,
.editor_htmlcon a:visited,
.editor_htmlcon a:active {
	color: var(--main-color) !important;
	text-decoration: none;
	transition: all .15s ease-in-out;
}

.editor_htmlcon a:hover {
	color: var(--sub-color) !important;
	text-decoration: none;
}
.editor_htmlcon img
{
	max-width:100%;
}

.catalog_h2item a,
.catalog_h3item a {
	transition: all .5s ease-in-out;
	border-bottom: 1px dotted var(--bg7-color) !important;
}

.catalog_h2item a:hover,
.catalog_h3item a:hover {
	border-bottom-color: var(--main-color) !important;
}

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

	.acon_left,
	.acon_right {
		width: 100%;
	}

	.acon_left {
		padding-right: 0px;
	}
}

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

	.amain_liimg,
	.amain_liinfo {
		width: 100%;
	}

	.amain_liinfo {
		padding-left: 0px;
		padding-top: 10px;
	}
}

/*------article---------*/
/*------videos---------*/
.videos_containter {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;

	padding: 0 10px 20px;
}

.videos_main {
	position: relative;
	width: 100%;
	vertical-align: top;
	padding: 0;
	margin: 0;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: flex-start;
	align-items: center;
}

.videos_main li {
	position: relative;
	width: calc(100% / 3 - 20px);

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: stretch;

	padding: 10px;
	margin: 10px;

	background-color: #fff;

	cursor: pointer;
	transition: all .5s ease-in-out;
}

.vmain_liimg {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.play_icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;

	font-size: 40px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.23);
}

.videos_main li:hover .imgAreaContain {
	transform: scale(1.2, 1.2);
}

.vmain_lcinfo {
	position: relative;
	width: 100%;
}

.vmain_btitle {
	font-size: 20px;
	font-weight: 600;
	color: var(--fonts15-color);
	transition: all .5s ease-in-out;
	margin-top: 10px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vmain_desc {
	font-size: 15px;
	color: var(--fonts-color);
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.vdetial_con {
	position: relative;
	width: 100%;
	background-color: #fff;
	padding: 10px;
}

.vdetial_con iframe {
	max-width: 100%;
}

.vmain_detial_btitle {
	font-size: 20px;
	font-weight: 600;
	color: var(--fonts15-color);
	transition: all .5s ease-in-out;
	margin-top: 10px;
}

.vmain_detial_desc {
	font-size: 15px;
	color: var(--fonts-color);
}

@media (max-width: 868px) {
	.videos_main li {
		width: calc(100%/2 - 20px);
	}
}

@media (max-width: 600px) {
	.videos_main li {
		width: 100%;
	}
}

/*------videos---------*/
/*------ask---------*/
.ask_con {
	position: relative;
	width: 100%;
	background-color: #fff;
	padding: 10px;
}

.ask_coursetitle {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 2px;
	text-align: center;
	color: var(--fonts15-color);
	margin-bottom: 10px;
}

.ask_courseteacher {
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-align: center;
	color: var(--fonts15-color);
	margin-bottom: 10px;
}

/*------ask---------*/
/*------link---------*/
.link_containter {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;

	padding: 0 10px 20px;
}

.link_main {
	position: relative;
	width: 100%;
	vertical-align: top;
	padding: 0;
	margin: 0;
}

.link_main li {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: stretch;

	padding: 10px;

	background-color: #fff;

	cursor: pointer;
	transition: all .5s ease-in-out;
}

.vmain_liinfo {
	color: var(--fonts1-color);
	width: calc(100% - 15px);
	border: 1px solid var(--sub6-color);
	border-left: 10px solid var(--sub6-color);
	padding: 10px;

	cursor: pointer;
	transition: all .5s ease-in-out;
}

.link_main li:hover .vmain_liinfo {
	color: #fff;
	background-color: var(--sub6-color);
}

/*------link---------*/
/*------buy---------*/
.buy_containter {
	position: relative;
	width: calc(100% - 20px);

	padding: 10px;

	background-color: #fff;
	margin: 10px;
	margin-bottom: 20px;
}

.buy_fonts {
	color: var(--fonts1-color);
	line-height: 1.5;
	letter-spacing: 2px;
}

.buy_ftitle {
	font-size: 20px;
	font-weight: 600;
	color: var(--fonts4-color);
	line-height: 1.5;
	letter-spacing: 2px;
	text-align: left;
	margin: 10px 0;
}

.buys_name {
	font-size: 16px;
	color: var(--fonts12-color);
	margin-bottom: 5px;
}

.buy_edblock {
	position: relative;
	width: 100%;
	margin-bottom: 10px;
}

.editor_inline {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: flex-start;
	align-items: center;
}

.buy_edblock_v1 {
	position: relative;
	width: calc(50% - 20px);
	margin: 10px;
}

.import_required {
	color: var(--red-color);
}

@media screen and (max-width: 500px) {
	.buy_edblock_v1 {
		width: 100%;
		margin: 0px;
		margin-bottom: 10px;
	}
}

.buy_introduce_title {
	color: var(--fonts12-color);
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
	line-height: 1.5;
	letter-spacing: 2px;
}

.buy_introduce_desc {
	color: var(--fonts12-color);
	font-size: 16px;
	text-align: center;
	margin-bottom: 10px;
	line-height: 1.5;
	letter-spacing: 2px;
}

.plan_price {
	-ms-flex-align: start;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;

}

.pprice_left {
	color: var(--fonts1-color);
	position: relative;
	top: 10px;
	font-size: 14px;
	font-weight: 600;
	margin-right: 4px;
}

.pprice_middle {
	color: var(--red1-color);
	font-size: 45px;
	font-weight: 500;
}

.pprice_right {
	color: var(--fonts1-color);
	font-size: 13px;
	-ms-flex-item-align: end;
	align-self: flex-end;
	margin-left: 4px;
	padding-bottom: 8px;
}

/*------buy---------*/
/*------forum---------*/
.cpost_block {
	position: relative;
	width: calc(100% - 20px);

	margin: 10px;
}

/*------forum---------*/
/*------shop---------*/
.shop_containter {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;

	padding: 0 10px 20px;
}

.scon_full {
	width: 100%;
	padding: 10px;
	overflow: hidden;
}

.scon_left {
	width: 245px;
	margin-right: 5px;

	background: rgb(255, 255, 255, 0.8);
	box-shadow: 1px 1px 5px rgb(0 0 0 / 30%);
}

.scon_right {
	width: calc(100% - 250px);
	padding: 10px;
	overflow: hidden;
}

.sconl_classblock {
	position: relative;
}

.sconl_search {
	padding: 10px;
}

.sconl_classtitle {
	color: #ffffff;
	font-size: 16px;
	background-color: var(--fonts21-color);
	padding: 10px;
	margin-bottom: 0;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 2px;
}

ul.class_nav {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.class_nav>li {
	position: relative;
	display: block;
	padding: 10px;

	transition: all .15s ease-in-out;
}

ul.class_nav>li a {
	display: block;
	width: 100%;
}

ul.class_nav>li+li {
	border-top: 1px solid var(--line-colorv6);
}

ul.class_nav>li:hover {
	background-color: var(--bg-color);
}

ul.shop_sort_list {
	font-size: 14px;
	padding: 0;
	margin: 0;
	list-style: none;

	max-width: 100%;
	margin-bottom: 15px;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

ul.shop_sort_list li {
	padding: 8px;
	color: var(--fonts9-color);
	background-color: var(--fonts2-color);

	transition: all .15s ease-in-out;
}

ul.shop_sort_list li a {
	color: var(--fonts9-color);
}

ul.shop_sort_list li:hover {
	background-color: var(--fonts10-color);
}

ul.shop_sort_list li.active {
	background-color: var(--fonts15-color);
}

ul.shop_sort_list li.active a {
	color: #fff;
}

ul.shop_sort_list>li+li {
	border-left: 1px solid var(--line-colorv6);
}

@media screen and (max-width: 500px) {
	ul.shop_sort_list {
		font-size: 13px;
	}
}

ul.shop_selllist {
	padding: 0;
	margin: 0;
	list-style: none;

	max-width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: flex-start;
	align-items: stretch;
}

ul.shop_selllist.v_grid li {
	position: relative;
	width: calc(100% / 3);
}

ul.shop_selllist.v_index li {
	width: 25%;
}

.v_grid .shop_pblock {
	width: calc(100% - 14px);
	margin: 7px;
	background-color: #fff;
	overflow: hidden;
}

.v_grid .shop_pimg {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.v_grid .one_img {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.v_grid .second_img {
	position: absolute;
	opacity: 0;
	visibility: hidden;
}

.v_grid .shop_pblock:hover .one_img {
	opacity: 0;
	visibility: hidden;
}

.v_grid .shop_pblock:hover .second_img {
	top: 0;
	opacity: 1;
	visibility: visible;
}

.v_grid .shop_pblock:hover .scale_img {
	transform: scale(1.2, 1.2);
}

.v_grid .shop_pname {
	color: var(--fonts4-color);
	font-size: 15px;
	font-weight: 600;
	padding: 10px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.v_grid .shop_price {
	font-size: 15px;
	font-weight: 600;
	padding: 0px 10px;
	color: var(--red5-color);
}

.v_grid .shop_pbtn {
	padding: 10px;
	text-align: right;
}

.v_grid .shop_price_urdel {
	color: var(--fonts11-color);
	text-decoration: line-through;
	margin-left: 5px;
}

/*list*/
ul.shop_selllist.v_list li {
	position: relative;
	width: 100%;
}

.v_list .shop_pblock {
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	border-bottom: 1px solid var(--line-colorv6);

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	align-items: stretch;
	justify-content: center;
}

.v_list .shop_pimg {
	position: relative;
	width: 140px;
	overflow: hidden;
}

.v_list .one_img {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.v_list .second_img {
	position: absolute;
	opacity: 0;
	visibility: hidden;
}

.v_list .shop_pblock:hover .one_img {
	opacity: 0;
	visibility: hidden;
}

.v_list .shop_pblock:hover .second_img {
	top: 0;
	opacity: 1;
	visibility: visible;
}

.v_list .shop_pblock:hover .scale_img {
	transform: scale(1.2, 1.2);
}

.v_list .shop_listcon {
	width: calc(100% - 280px);
}

.v_list .shop_pname {
	color: var(--fonts4-color);
	font-size: 15px;
	font-weight: 600;
	padding: 10px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.v_list .shop_price {
	font-size: 15px;
	font-weight: 600;
	padding: 0px 10px;
	color: var(--red5-color);
}

.v_list .shop_pbtn {
	width: 140px;
	padding: 10px;
	text-align: right;

	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	align-items: flex-end;
	justify-content: center;
}

.v_list .shop_price_urdel {
	color: var(--fonts11-color);
	text-decoration: line-through;
	margin-left: 5px;
}

/*list*/
.moblie_classblockicon {
	position: absolute;
	font-size: 15px;
	top: 60px;
	left: 245px;
	padding: 10px;
	color: #fff;
	background: var(--fonts10-color);
	box-shadow: 1px 1px 5px rgb(0 0 0 / 30%);

	writing-mode: vertical-rl;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
}

.moblie_classblockicon i {
	display: inline-block;
	transition: all .3s ease-in-out;
}

.moblie_classblockicon.in {
	left: 245px;
}

.moblie_classblockicon.in i {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

@media screen and (max-width: 1020px) {
	ul.shop_selllist.v_index li {
		width: calc(100% / 3);
	}
}

@media screen and (max-width: 767px) {
	.scon_right {
		width: 100%;
	}

	.scon_left {
		position: fixed;
		top: 20px;
		left: -245px;
		z-index: 900;
		height: calc(100% - 20px);

		background-color: #fff;
		box-shadow: 1px 0px 2px rgb(0 0 0 / 30%);
	}

	.scon_mobile_lefty {
		overflow-y: auto;
		height: calc(100% - 51px);
	}

	.moblie_classblockicon {
		opacity: 1;
		visibility: visible;
	}

	.scon_left.in {
		visibility: visible;
		opacity: 1;

		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		-webkit-animation-name: classMenuFadeInDown;
		animation-name: classMenuFadeInDown;
	}

	.scon_left.out {
		visibility: visible;
		opacity: 1;

		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		-webkit-animation-name: classMenuFadeInUp;
		animation-name: classMenuFadeInUp;
	}

	ul.shop_selllist.v_grid li {
		width: 50%;
	}
}

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

	ul.shop_selllist.v_grid li {
		width: 100%;
	}

	ul.shop_selllist.v_index li {
		width: 50%;
	}
}

@-webkit-keyframes classMenuFadeInDown {
	0% {
		opacity: 0;
		left: -245px;
	}

	100% {
		opacity: 1;
		left: 0px;
	}
}

@keyframes classMenuFadeInDown {
	0% {
		opacity: 0;
		left: -245px;
	}

	100% {
		opacity: 1;
		left: 0px;
	}
}

@-webkit-keyframes classMenuFadeInUp {
	0% {
		left: 0px;
	}

	100% {
		left: -245px;
	}
}

@keyframes classMenuFadeInUp {
	0% {
		left: 0px;
	}

	100% {
		left: -245px;
	}
}

.shopview_block {
	font-size: 14px;

	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	align-items: center;
	justify-content: center;

	padding: 5px;
	margin: 0 auto;
	background-color: var(--bg7-color);
	border-bottom: 1px solid var(--border1-color);
}

.shopview_grid,
.shopview_list {
	padding: 8px;
	transition: all .15s ease-in-out;
}

.shopview_grid.active,
.shopview_grid:hover,
.shopview_list.active,
.shopview_list:hover {
	color: #fff;
	background-color: var(--fonts-color);
}

/*------shop---------*/
/*------member---------*/
.member_block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	margin: 20px;
	margin-bottom: 30px;
}

.mb_left {
	width: 250px;
}

.mb_right {
	width: calc(100% - 250px);
}

.mbleft_s1 {
	margin: 10px;

	position: relative;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(0 0 0 / 12%);
}

.mbls1_top {
	position: relative;
	height: 90px;
	background-color: var(--sub8-color);
}

.mbls1_bottom {
	position: relative;
	background-color: var(--fonts7-color);
	padding: 20px 10px;
	padding-top: 35px;
}

.mbls1_member {
	position: absolute;
	bottom: -30px;
	left: calc(50% - 43px);
	width: 86px;
	height: 86px;
	background-color: var(--fonts6-color);
	border: 4px solid #fff;
	border-radius: 50%;

	-webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%);
	box-shadow: 0px 2px 3px rgb(0 0 0 / 15%);

	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.mbls1_member img {
	max-width: 40px;
}

.mbls1_title {
	font-size: 14px;
	color: var(--sub7-color);
	text-align: center;
	letter-spacing: 2px;
	line-height: 1.5;
}

.mb1s1_ul {
	font-size: 14px;
	margin-top: 20px;
	margin-bottom: 10px;
}

.mbls1_list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	padding: 8px 2px;

	border-bottom: 1px solid var(--tag1-color);
}

.mbls1_lleft {
	color: var(--sub-color);
	font-weight: 600;
	width: 50%;
	text-align: left;
}

.mbls1_lright {
	width: 50%;
	text-align: right;
}


.mbleft_s2 {
	margin: 10px;

	position: relative;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(0 0 0 / 12%);
}

.mbleft_s2title {
	color: #fff;
	background-color: var(--sub6-color);
	padding: 5px;
}

.mbleft_s2con {
	padding: 5px;
	background-color: #fff;
}

.mbls2c_list {
	position: relative;
	cursor: pointer;
	margin: 10px 0;
	padding: 8px 4px;
	border-bottom: 1px solid rgb(0 0 0 / 12%);

	transition: all .4s ease-in-out;
}

.mbls2c_list:hover {
	color: var(--fonts-color);
}

.mbls2c_list i {
	position: absolute;
	right: 5px;
	bottom: 12px;

	display: none;
}

.mbls2c_list.active i {
	display: block;
}


.editor_table {
	width: 100%;
	position: relative;
	border: 1px solid var(--fonts8-color);

	margin-top: 10px;
}

.editor_tr {
	font-size: 15px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	width: 100%;
	position: relative;
	border-bottom: 1px solid var(--fonts8-color);
}

.editor_tr:last-child {
	border-bottom-width: 0px;
}

.editor_ltd {
	color: var(--footertop-color);
	text-align: center;
	font-weight: 600;
	width: 80px;
	background-color: var(--fonts9-color);
	padding: 12px 0px;
}

.editor_rtd {
	color: var(--fonts1-color);
	width: calc(100% - 80px);
	background-color: #fff;
	padding: 12px 4px;
	padding-left: 10px;
}

.editorv1_btn {
	font-size: 13px;
	position: relative;

	text-align: center;
	border-radius: 5px;
	padding: 3px 5px;
	margin-left: 5px;
	background-color: var(--header-color);
	color: #FFF;
	cursor: pointer;

	-webkit-user-select: none;

	-webkit-transition: all ease-out 0.2s;
	transition: all ease-out 0.2s;
}

.editorv1_btn:hover {
	background-color: var(--main-color);

	-webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
	box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
}

.e_important {
	font-size: 13px;
	color: var(--red1-color);
	margin-top: 8px;
}

/* 20230526 張淯瑄 add */
.editor_block_in_v2_messageBlock {
	width: calc(100% - 40px);
	padding: 5px;
	margin: 0px 20px;
	background-color: #ffedaf;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
}

.editor_block_in_v2_messageBlock_icon {
	width: 65px;
	font-size: .8em;
	color: #fff;
	margin-right: 6px;
	background-color: #efae09;
	padding: 4px;
	text-align: center;
}

.editor_block_in_v2_messageBlock_text {
	width: calc(100% - 65px);
	padding: 4px;
	font-size: .8em;
	color: #202026;
	font-weight: 400;
	text-align: left;
}

.editor_block_in_v2_messageBlock_text span {
	color: #d60c18;
}

/*------手機----*/
.mb_block {
	display: none;
}

.top_mb_l {
	width: 160px;
}

.top_mb_r {
	width: calc(100% - 160px);
	background-color: #fff;
	padding: 4px 10px;
}

.mb_mbleft_s1 {
	height: 100%;
	position: relative;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(0 0 0 / 12%);
	border-right-width: 0px;
}

.mb_mbls1_top {
	position: relative;
	height: 45px;
	background-color: var(--sub8-color);
}

.mb_mbls1_bottom {
	position: relative;
	background-color: var(--fonts7-color);
	height: calc(100% - 45px);
	padding: 15px 10px;
	padding-top: 35px;
}

.mb_mbls1_member {
	position: absolute;
	bottom: -30px;
	left: calc(50% - 33px);
	width: 66px;
	height: 66px;
	background-color: var(--fonts6-color);
	border: 4px solid #fff;
	border-radius: 50%;

	-webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%);
	box-shadow: 0px 2px 3px rgb(0 0 0 / 15%);

	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.mb_mbls1_member img {
	max-width: 30px;
}

.mb_mbls1_title {
	font-size: 14px;
	color: var(--sub7-color);
	text-align: center;
	letter-spacing: 2px;
	line-height: 1.5;
}

.mb_mbls1_list {
	font-size: 16px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	padding: 8px 2px;

	border-bottom: 1px solid var(--tag1-color);
}

.mb_mbls1_lleft {
	color: var(--sub-color);
	font-weight: 600;
	width: 50%;
	text-align: left;
}

.mb_mbls1_lright {
	width: 50%;
	text-align: right;
}


.top_mb_full {
	width: 100%;
	position: relative;
	margin-top: 10px;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mb_member_menu {
	font-size: 16px;
	color: var(--fonts1-color);
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
	background-color: #fff;
	border: 1px solid var(--fonts-color);
	border-bottom-width: 3px;

	-webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
	box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);

	cursor: pointer;
	-webkit-user-select: none;

	transition: all linear 0.2s;
}

.mb_member_menu.active,
.mb_member_menu:hover {
	color: #fff;
	background-color: var(--fonts1-color);
}

/*------手機----*/
@media (max-width: 700px) {

	.mb_left,
	.mb_right,
	.mb_dwpageleft,
	.mb_dwpageright {
		width: 100%;
	}

	.web_block {
		display: none;
	}

	.mb_block {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: wrap;
	}

}

/*------member---------*/
/*------fq---------*/
.panel-default>.panel-heading {
	color: #fff;
	background-color: var(--fonts15-color);
	border-color: var(--fonts21-color);

	transition: all .15s ease-in-out;
}

.panel-default>.panel-heading:hover {
	background-color: var(--fonts18-color);
}

.panel-heading .accordion-toggle:before {
	content: "-";
	color: #fff;
	font-size: 1.1em;
	float: right;
}

.panel-heading .accordion-toggle.collapsed:before {
	content: "+";
	color: #fff;
	font-size: 1.1em;
	float: right;
}

/*------fq---------*/
.blocl_overflowhidden {
	overflow: hidden;
}

/*------footer------*/
.footer_block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	align-items: top;
	z-index:2;
	color: #fff;
	padding: 10px;
	padding-top: 20px;
	background-color: var(--footertop-color);
}

.footer_left {
	width: calc(100% / 3);
	padding-right: 15px;
}
/* 20230530 張淯瑄 add */
.footer_down {
	border-top: 1px solid #c3c3c3;
	padding: 10px 0PX;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2px;
	width: 100%;
	display: flex;
}

.footer_up{
	width: 100%;
}

.footer_right {
	width: calc( 100% - (calc(100% / 3)) );
}

/* 20230530 張淯瑄 add */
.flf_sname {
	font-size: 12px;
}

ul.footermiddle,
ul.footerright {
	margin-top: 0;
	margin-bottom: 10px;

	margin-block-start: 0px;
	padding-inline-start: 0px;
}

ul.footerright {
	margin-bottom: 5px;
}

.fm_li {
	font-size: 16px;
	position: relative;
	letter-spacing: 2px;
	list-style-type: none;
	line-height: 2;
	text-align: left;
}

.fm_li.fphone:before {
	font-family: 'icomoon';
	content: "\e9b3";
	position: absolute;
	left: 0px;
	top: 0px;
	color: var(--tag-color);
}

.fm_li.fmail:before {
	font-family: 'icomoon';
	content: "\e992";
	position: absolute;
	left: 0px;
	top: 0px;
	color: var(--tag-color);
}

.fm_li.faddr:before {
	font-family: 'icomoon';
	content: "\e993";
	position: absolute;
	left: 0px;
	top: 0px;
	color: var(--tag-color);
}

.fm_li label {
	font-size: 16px;
	font-weight: 500;
	padding-left: 24px;
	margin-right: 5px;
}

.footer_block a {
	color: #fff;
	transition: all .15s ease-in-out;
}

.footer_block a:hover {
	text-decoration: underline;
}

.fr_li {
	font-size: 16px;
	position: relative;
	letter-spacing: 2px;
	list-style-type: none;
	line-height: 2;
	text-align: left;
	margin: 5px;

	font-size: 16px;
	font-weight: 500;
	display: inline-block;
}

.footer_btn {
	display: inline-block;
	font-size: 28px;
	border-radius: 5px;
	cursor: pointer;
	margin: 10px 5px;
	margin-bottom: 20px;

	transition: all .15s ease-in-out;

	color: var(--tag-color);
}

.footer_btn:hover {
	color: #fff;
}

.footer_full {
	color: var(--tag-color);
	font-size: 15px;
	width: 100%;
	text-align: center;
	border-top: 1px solid var(--tag-color);
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.5;
	letter-spacing: 2px;
}

@media (max-width: 1050px) {
	.footer_left {
		width: 340px;
	}

	.footer_right {
		width: calc(100% - 340px);
	}

	/* .footer_right {
		width: 100%;
	} */
}

@media (max-width: 768px) {
	.footer_left {
		width: 100%;
	}

	.footer_middle {
		width: 100%;
		margin-top: 20px;
	}

	.footer_right {
		width: 100%;
		margin-top: 20px;
	}
}


/* ================================================
* spin loading icon
* built at https://loading.io/spinner/custom/279283
* License under cc0
================================================ */
#loadingMask {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9999;

	visibility: hidden;
}

.loadingFx {
	position: absolute;
	width: 50vw;
	height: fit-content;

	margin: auto;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;

	color: #FFF;
	letter-spacing: 5px;
}


@keyframes lds-spin {
	0% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

@-webkit-keyframes lds-spin {
	0% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

.lds-spin {
	position: relative;
}

.lds-spin div>div {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #9acdec;
	-webkit-animation: lds-spin 1.7s linear infinite;
	animation: lds-spin 1.7s linear infinite;
}

.lds-spin div:nth-child(1)>div {
	left: 160px;
	top: 88px;
	-webkit-animation-delay: -1.53s;
	animation-delay: -1.53s;
}

.lds-spin>div:nth-child(1) {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 172px 100px;
	transform-origin: 172px 100px;
}

.lds-spin div:nth-child(2)>div {
	left: 146.249223568px;
	top: 130.320538144px;
	-webkit-animation-delay: -1.36s;
	animation-delay: -1.36s;
}

.lds-spin>div:nth-child(2) {
	-webkit-transform: rotate(36deg);
	transform: rotate(36deg);
	-webkit-transform-origin: 158.249223568px 142.320538144px;
	transform-origin: 158.249223568px 142.320538144px;
}

.lds-spin div:nth-child(3)>div {
	left: 110.24922356799999px;
	top: 156.47606915199998px;
	-webkit-animation-delay: -1.19s;
	animation-delay: -1.19s;
}

.lds-spin>div:nth-child(3) {
	-webkit-transform: rotate(72deg);
	transform: rotate(72deg);
	-webkit-transform-origin: 122.24922356799999px 168.47606915199998px;
	transform-origin: 122.24922356799999px 168.47606915199998px;
}

.lds-spin div:nth-child(4)>div {
	left: 65.75077643200001px;
	top: 156.47606915199998px;
	-webkit-animation-delay: -1.02s;
	animation-delay: -1.02s;
}

.lds-spin>div:nth-child(4) {
	-webkit-transform: rotate(108deg);
	transform: rotate(108deg);
	-webkit-transform-origin: 77.75077643200001px 168.47606915199998px;
	transform-origin: 77.75077643200001px 168.47606915199998px;
}

.lds-spin div:nth-child(5)>div {
	left: 29.750776431999995px;
	top: 130.320538144px;
	-webkit-animation-delay: -0.85s;
	animation-delay: -0.85s;
}

.lds-spin>div:nth-child(5) {
	-webkit-transform: rotate(144deg);
	transform: rotate(144deg);
	-webkit-transform-origin: 41.750776431999995px 142.320538144px;
	transform-origin: 41.750776431999995px 142.320538144px;
}

.lds-spin div:nth-child(6)>div {
	left: 16px;
	top: 88px;
	-webkit-animation-delay: -0.68s;
	animation-delay: -0.68s;
}

.lds-spin>div:nth-child(6) {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transform-origin: 28px 100px;
	transform-origin: 28px 100px;
}

.lds-spin div:nth-child(7)>div {
	left: 29.750776431999995px;
	top: 45.679461856px;
	-webkit-animation-delay: -0.51s;
	animation-delay: -0.51s;
}

.lds-spin>div:nth-child(7) {
	-webkit-transform: rotate(216deg);
	transform: rotate(216deg);
	-webkit-transform-origin: 41.750776431999995px 57.679461856px;
	transform-origin: 41.750776431999995px 57.679461856px;
}

.lds-spin div:nth-child(8)>div {
	left: 65.75077643200001px;
	top: 19.523930848000006px;
	-webkit-animation-delay: -0.34s;
	animation-delay: -0.34s;
}

.lds-spin>div:nth-child(8) {
	-webkit-transform: rotate(252deg);
	transform: rotate(252deg);
	-webkit-transform-origin: 77.75077643200001px 31.523930848000006px;
	transform-origin: 77.75077643200001px 31.523930848000006px;
}

.lds-spin div:nth-child(9)>div {
	left: 110.24922356799999px;
	top: 19.523930848000006px;
	-webkit-animation-delay: -0.17s;
	animation-delay: -0.17s;
}

.lds-spin>div:nth-child(9) {
	-webkit-transform: rotate(288deg);
	transform: rotate(288deg);
	-webkit-transform-origin: 122.24922356799999px 31.523930848000006px;
	transform-origin: 122.24922356799999px 31.523930848000006px;
}

.lds-spin div:nth-child(10)>div {
	left: 146.249223568px;
	top: 45.679461856px;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.lds-spin>div:nth-child(10) {
	-webkit-transform: rotate(324deg);
	transform: rotate(324deg);
	-webkit-transform-origin: 158.249223568px 57.679461856px;
	transform-origin: 158.249223568px 57.679461856px;
}

.lds-spin div:nth-child(11)>div {
	left: 160px;
	top: 88px;
	-webkit-animation-delay: 0.17s;
	animation-delay: 0.17s;
}

.lds-spin>div:nth-child(11) {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transform-origin: 172px 100px;
	transform-origin: 172px 100px;
}

.lds-spin {
	width: 111px !important;
	height: 111px !important;
	-webkit-transform: translate(-55.5px, -55.5px) scale(0.555) translate(55.5px, 55.5px);
	transform: translate(-55.5px, -55.5px) scale(0.555) translate(55.5px, 55.5px);
}

/*------course---------*/
.course_containter {
	position: relative;
	width: calc(100% - 20px);

	margin: 10px;
	margin-bottom: 20px;

	min-height: 300px;
}

.course_flex {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: flex-start;
	align-items: center;
}

.course_list {
	width: calc(100% - 16px);
	position: relative;
	text-align: left;
	background: #fff;
	margin: 8px;
	/* padding:10px; */
	border-radius: 5px;
	box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px;
	cursor: pointer;

	transition: all .5s ease-in-out;
}

.course_list:hover {
	background-color: var(--bg1-color);
}

.course_title {
	font-weight: 600;
	color: var(--fonts15-color);
	/* margin-bottom:10px; */
	padding: 10px;
	background-color: #D3D3D3;
}

.course_tname {
	font-size: 15px;
	color: var(--fonts1-color);
	padding: 10px 10px 0px 10px;
}

.course_btn {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: flex-end;
	align-items: center;

	padding: 15px 10px 10px 10px;
	/* margin-top:15px; */
}

.course_notin {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;

	margin-top: 15px;

	color: var(--red6-color);

}

.welcome_fonts {
	color: var(--sub-color);
	text-align: center;
}

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

	.course_list {
		width: calc(100% - 16px);
	}
}

/*------course---------*/
/* 20230505 張淯瑄 add */
.mb10 {
	margin-bottom: 10px;
}

/* 20230505 張淯瑄 add */
/*------buycheck---------*/
/* 20230511 張淯瑄 add */
#order {
	width: 620px;
	margin: 0 auto;
}

.subtitle {
	color: var(--footertop-color);
	font-weight: 600;
}

.content_box {
	border: 1px solid #d3d5d7;
	font-size: 16px;
	margin-bottom: 20px;
	background-color: #fff;
}

.content_group {
	padding: 15px 20px;
}

.content_group p {
	font-weight: 600;
	color: var(--footertop-color);
}

.content_item {
	display: inline-flex;
	justify-content: space-between;
	padding: 5px 0px;
	font-weight: 600;
}

.member_item {
	display: flex;
	justify-content: space-between;
	padding: 5px 0px;
	font-weight: 600;
}

.content_group .carrier_item:last-child {
	margin-bottom: 0px;
}

.msg_box {
	padding: 15px 20px;
	margin-bottom: 20px;
	background-color: #E5E5E5;
	font-size: 16px;
	font-weight: 600;
}

.tab {
	position: relative;
	display: flex;
}

ul.tab li {
	width: 100%;
	text-align: center;
	cursor: pointer;
	padding: 5px;
	font-weight: 600;
	color: var(--footertop-color);
	line-height: 40px;
	border-bottom: 1px solid #d3d5d7;
}

ul.tab li:hover {
	color: #d60c18;
}

ul.tab li.active {
	color: #d60c18;
	border-bottom: 3px solid #d60c18;
}

.cue {
	cursor: pointer;
	padding-left: 19px;
	width: 100%;
	font-size: 14px;
	color: #757575;
}

.carrier {
	cursor: pointer;
	width: calc(100% - 20px);
	color: var(--footertop-color);
	margin: 0px;
	font-weight: 600;
}

.carrier_item {
	margin-bottom: 15px;
}

.input_label {
	cursor: pointer;
	color: var(--footertop-color);
	width: calc(100% - 20px);
	font-weight: 600;
}

.addr_content {
	width: 100%;
	display: flex;
}

.city_addr,
.area_addr {
	margin-right: 10px;
}

.full_addr {
	Flex-grow: 1;
}

.price_box {
	position: sticky;
	bottom: 0px;
	width: 100%;
	padding: 15px;
	z-index: 1;
	background-color: #E5E5E5;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.price {
	font-weight: 600;
	color: var(--footertop-color);
	font-size: 20px;
	padding: 16PX 0px;
}

.hint {
	color: #d60c18;
	font-size: 14px;
	display: none;
}

.error {
	border: 1px solid #d60c18 !important;
}

.input-disabled {
	pointer-events: none;
	opacity: 0.6;
	/* 可選：使禁用的元素半透明以示區別 */
}

@media (max-width: 767px) {
	#order {
		width: 100%;
	}

	.content_item {
		display: block;
		padding: 5px 0px;
		font-weight: 600;
	}

	.addr_content {
		width: 100%;
		display: block;
	}

	.city_addr,
	.area_addr {
		margin: 0px 0px 10px 0px;
	}
}

/*------buycheck---------*/
/*------buyok---------*/
.ok_icon {
	color: green;
	font-size: 48px;
	text-align: center;
}

.ok_text {
	font-weight: 600;
	text-align: center;
}

/*------buyok---------*/
/* 20230526 張淯瑄 add */
/*---------------*/
.noticeTxt {
	color: #FFB182;
}

/*---------------*/
/* 20230530 張淯瑄 add */
/*---------------*/
.index_preface {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.index_preface div{
	padding: 10px;
	background-color: white;
	letter-spacing: 2px;
	line-height: 1.5;
	
	margin: 50px;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 30%);
}

.index_preface div span{
	color:rgba( 188,66,0, 0.9 );
}

.index_preface div span a{
	color:rgba( 188,66,0, 0.9 );
	font-size:22px;
	font-weight: 600;
}
/*---------------*/
/* 20231121 張淯瑄 add */
/*---------------*/
.index_adv{
	margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    padding: 0px 10px;

}
.footer_img {
	width: 25%;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}

.footer_down .footer_word {
	margin-left: 10px;
	width: 100%;
}

@media (max-width: 768px) {
	.index_preface div{
		margin: 30px 10px;

	}
}
.mechanism_main{
	width: 100%;
	display: flex;
	justify-content: center;
}
.mechanism_item_img{
	width: 100%;
	max-width: 90px;
	margin: 0px 10px;
}
.mechanism_item_img a{
	width: 100%;
	display: flex;
	justify-content: center;
}
.mechanism_item_img img{
	width: 100%;
}
.news_main_231127 {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.news_main_231127 li {
	position: relative;
	width: calc(100% / 3 - 20px);

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: stretch;

	padding: 10px;
	margin: 0px 10px 10px;

	background-color: #fff;

	cursor: pointer;
	transition: all .5s ease-in-out;
}
.news_main_231127 li:nth-child(-n+2) {
	width: calc(100% / 2 - 20px);
}

.news_main_231127 li:hover .imgAreaContain {
	transform: scale(1.2, 1.2);
}

.nmain_liimg_231127 {
	width: 100%;
	overflow: hidden;
}

.nmain_liinfo_231127 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: end;
	align-items: center;

	width:100%;

}

.nmain_lcinfo {
	position: relative;
	width: 100%;
}

.nmain_classtag_231127 {
	font-size: 14px;
	display: inline-block;

	position: relative;
	color: #fff;
	background-color: var(--footertop-color);
	margin: 8px 0px;
	padding: 5px;
}

.nmain_btitle_231127 {
	font-size: 20px;
	font-weight: 600;
	color: var(--fonts15-color);
	transition: all .5s ease-in-out;
	margin-top: 10px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nmain_desc_231127 {
	font-size: 15px;
	color: var(--fonts-color);
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.nmain_othermsg_231127 {
	color: var(--fonts20-color);
	font-size: 13px;
	margin-top: 15px;
	text-align: right;
}


.aindexmain_231127{
	width: 100%;
	position:relative;
}
ul.article_indexmain_231127
{
	position:relative;
	padding: 0;
	margin: 0;
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
ul.article_indexmain_231127 li
{
	width:calc( ( 100% / 3 ) - 20px );
	flex-shrink: 0;
	position: relative;
    overflow: hidden;
    border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
    background: #fff;
	margin:10px;
	
	cursor:pointer;
	
	transition: all .5s ease-in-out;
}
.aindexmain_liimg
{
	width:100%;
	overflow:hidden;
}
ul.article_indexmain_231127 li:hover .imgAreaContain
{
	transform: scale(1.2,1.2);
}
.aindexmain_liinfo
{
	width:100%;
	padding:20px;
}
.aindexmain_classtag
{
	font-size:15px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	
	justify-content: flex-start;
	align-items: center;
	
	position:relative;
	color: var(--fonts-color);
    margin-bottom: 8px;
}
.aindexmain_btitle
{
	font-size:20px;
	font-weight:600;
	color:var( --fonts15-color );
	transition: all .5s ease-in-out;
	margin-top:10px;
	
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	overflow:hidden;
	-webkit-box-orient: vertical;
}
ul.article_indexmain_231127 li:hover .aindexmain_btitle
{
	color:var( --fonts17-color );
}
.aindexmain_desc
{
	font-size:15px;
	color:var( --fonts-color );
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	overflow:hidden;
	-webkit-box-orient: vertical;
}
.aindexmain_time
{
	font-size:14px;
	color:var( --fonts1-color );
}
.aindexmain_more
{
	font-size:15px;
	text-align:right;
	margin-top:20px;
	line-height:1.5;
	letter-spacing:2px;
	transition: all .5s ease-in-out;
}
@media (max-width:768px) {
	ul.article_indexmain_231127 li
	{
		width:calc( ( 100% / 2 ) - 20px );
	}
	.news_main_231127 li{
		width:calc( ( 100% / 2 ) - 20px );
	}

}
@media (max-width:500px) {
	ul.article_indexmain_231127 li
	{
		width:calc( 100% - 20px );
	}
	.news_main_231127 li{
		width:calc( 100% - 20px );
	}
	.news_main_231127 li:nth-child(-n+2) {
		width:calc( 100% - 20px );
	}
}

/*---------------*/
/* 20230531 張淯瑄 add */
/*---------------*/
.not_plan {
	position: sticky;
    bottom: 0px;
    width: 100%;
    padding: 15px;
    z-index: 1;
    background-color: #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.not_plan_text {
	font-weight: 600;
    color: var(--footertop-color);
    font-size: 20px;
    padding: 16PX 0px;
	
}
/*---------------*/
/* 20230612 張淯瑄 add */
/*---------------*/
.book_content
{
	position:relative;
	width:100%;
	padding:10px;
	line-height:2;
	letter-spacing:2px;
}
.book_h3
{
	font-size:16pt;
	text-align:center;
	font-weight:600;
}
.book_h4
{
	color: #007AB0;
	font-size:16pt;
	text-align:center;
	font-weight:600;
	line-height:1.5;
	letter-spacing:1px;
}
.book_h5
{
	font-size:13pt;
	text-align:left;
	font-weight:600;
	line-height:1.5;
	letter-spacing:1px;
}
.indent_fonts
{
	font-size:13pt;
	text-indent:2em;
}
.book_listflex
{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start; 
	
	font-size:12pt;
}
.book_listno
{
	width:35px;
}
.book_listfonts
{
	width:calc( 100% - 35px );
	text-align:justify;
}
.book_listno_lv2
{
	width:50px;
}
.book_listfonts_lv2
{
	width:calc( 100% - 50px );
	text-align:justify;
}
.book_listno_sec
{
	width:50px;
}
.book_listfonts_sec
{
	width:calc( 100% - 50px );
	text-align:justify;
}
.book_fullfonts
{
	width:100%;
	text-align:justify;
}
.paragraph_style span{
	font-weight: 700;
	color: #0e1318;			
}
/*---------------*/
/* 20230626 張淯瑄 add */
/*---------------*/
.aindexmain{
	padding: 0px 10px 0px 0px;
}
.aindexmain_block
{
	position:relative;
	width:100%;
	overflow-x: auto;
}
ul.article_indexmain
{
	position:relative;
	padding: 0;
	margin: 0;
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: nowrap;
}
ul.article_indexmain li
{
	width:calc( ( 100% / 3 ) - 20px );
	flex-shrink: 0;
	position: relative;
    overflow: hidden;
    border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
    background: #fff;
	margin:10px;
	
	cursor:pointer;
	
	transition: all .5s ease-in-out;
}
.aindexmain_liimg
{
	width:100%;
	overflow:hidden;
}
ul.article_indexmain li:hover .imgAreaContain
{
	transform: scale(1.2,1.2);
}
.aindexmain_liinfo
{
	width:100%;
	padding:20px;
}
.aindexmain_classtag
{
	font-size:15px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	
	justify-content: flex-start;
	align-items: center;
	
	position:relative;
	color: var(--fonts-color);
    margin-bottom: 8px;
}
.aindexmain_btitle
{
	font-size:20px;
	font-weight:600;
	color:var( --fonts15-color );
	transition: all .5s ease-in-out;
	margin-top:10px;
	
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	overflow:hidden;
	-webkit-box-orient: vertical;
}
ul.article_indexmain li:hover .aindexmain_btitle
{
	color:var( --fonts17-color );
}
.aindexmain_desc
{
	font-size:15px;
	color:var( --fonts-color );
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	overflow:hidden;
	-webkit-box-orient: vertical;
}
.aindexmain_time
{
	font-size:14px;
	color:var( --fonts1-color );
}
.aindexmain_more
{
	font-size:15px;
	text-align:right;
	margin-top:20px;
	line-height:1.5;
	letter-spacing:2px;
	transition: all .5s ease-in-out;
}
@media screen and (max-width: 875px) {
	ul.article_indexmain li
	{
		width:350px;
		flex-shrink: 0;
	}
}
.class_group{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 0px;
	flex-wrap: wrap;
}
.class_item{
	margin: 0px 10px;
	font-size: 15px;
	position: relative;
	transition: all 0.25s ease ;
	margin-bottom: 5px;
	line-height: 1.5;
	letter-spacing: 2px;
}
.class_item::after{
	content: '';
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 0%;
	height: 2px;
	background-color: var(--main-color);
	transition: all 0.25s ease ;
}
.class_item.active::after{
	width: 100%;
}
.class_item:hover::after{
	width: 100%;
	transition: all 0.25s ease ;
}
.list_plan_ul
{
    position: relative;
	width:100%;
	overflow-x:auto;
	display: flex;
	justify-content: center;
}
.lplan_flex
{
	display: inline-flex;
	padding:20px 0;
	width: 100%;
	flex-wrap: wrap;
}
.list_plan_li
{
    margin:10px;
	
	position: relative;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    min-height: 400px;
    width: calc(50% - 20px);
    background-color: rgb(255, 255, 255);
    border: 1px solid #fff;
    box-shadow: rgb(0 0 0 / 12%) 0px 2px 5px;
    border-radius: 15px;
    padding: 20px 10px;
	
	padding-top:40px;
}
@media (max-width:768px) {
	.list_plan_li{
		width: calc(100% - 20px);
	}
}
.lplan_title
{
	color:var( --fonts1-color );
	font-size:18px;
	display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
	letter-spacing:2px;
	line-height:1.5;
	
	flex-wrap: wrap;
}
.lplan_cost
{
	width:100%;
	font-size:16px;
	display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
	letter-spacing:2px;
	line-height:1.5;
	margin-top:10px;
	
	flex-wrap: wrap;
}
.lplan_bigtitle
{
	width:100%;
	font-size:20px;
	font-weight:600;
	letter-spacing:2px;
	line-height:1.5;
	margin-top:20px;
}
.lpt_sm
{
	width:100%;
	font-size:15px;
	text-align:center;
}
.lpt_v1, .lpt_v2, .lpt_v3
{
	font-size:20px;
	font-weight:600;
}
.lpt_v1
{
	color:var( --main-color );
}
.lpt_v2
{
	color:var( --mainv2-color );
}
.lpt_v3
{
	color:var( --sub1-color );
}

.plan_sflex
{
	display: flex;
    -ms-flex-align: start;
    justify-content: center;
    align-items: center; 
}
.lplan_money
{
	width:100%;
	font-size:16px;
	display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
	letter-spacing:2px;
	line-height:1.5;
	margin-bottom:10px;
	/* text-decoration: line-through; */
	
	flex-wrap: wrap;
}
.lplan_mcloror
{
	color:var( --red1-color );
}
.plan_price
{
	display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}
.pprice_left
{
	color:var( --fonts1-color );
	position: relative;
    top: 10px;
    font-size: 14px;
    font-weight: 600;
	margin-right:4px;
}
.pprice_middle
{
	color:var( --red1-color );
	font-size: 45px;
    font-weight: 500;
}
.pprice_right
{
	color:var( --fonts1-color );
	font-size: 13px;
    -ms-flex-item-align: end;
    align-self: flex-end;
	margin-left:4px;
    padding-bottom: 8px;
}

.plan_info
{
	min-height:217px;
	margin-top:15px;
	margin-bottom:10px;
}
.plan_info ul
{
	padding-left:6px;
}
.plan_info ul li
{
	position: relative;
    padding: 5px 0 5px 25px;
    font-size: 14px;
	letter-spacing:1px;
    line-height: 1.5;
    color: var( --fonts1-color );
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
}
.plan_info ul li:before {
    position: absolute;
    left: 0;
    display: block;
    content: "\e92b";
    font-family: 'icomoon' !important;
    font-size: 18px;
    color: var( --green-color );
}

.plan_numinfo
{
	width:100%;
}
.plan_numinfo ul {
    counter-reset: list-counter; /* 初始化计数器 */
}
.plan_numinfo ul li
{
	position: relative;
    padding: 5px 0 5px 30px;
    font-size: 16px;
	letter-spacing:1px;
    line-height: 1.5;
    color: var( --fonts1-color );
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
}
.plan_numinfo ul li:before {
	counter-increment: list-counter; /* 每个 li 增加计数器 */
    position: absolute;
    left: 0;
    display: block;
    content: counter(list-counter) ". "; /* 输出递增数字 */
    font-size: 18px;
    color: var( --green-color );
}

.btn_block
{
	margin-top:20px;
	margin-bottom:10px;
}
.buy_btn
{
    font-size: 14px;
    position: relative;
	
	min-width: 185px;
	text-align:center;
    border-radius: 5px;
    padding: 8px 10px;
    background-color: var( --main-color );
    color: #FFF;
    cursor: pointer;
	border-width:0px;
    
    -webkit-user-select: none;
    
    -webkit-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;
}
.buy_btn:hover
{
    background-color: var( --main-color );
	
	-webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
    box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
}
.buy_btn_important
{
    font-size: 14px;
    position: relative;
	
	min-width: 185px;
	text-align:center;
    border-radius: 5px;
    padding: 8px 10px;
    background-color: #e03f19;
    color: #FFF;
    cursor: pointer;
	border-width:0px;
    
    -webkit-user-select: none;
    
    -webkit-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;
}
.buy_btn_important:hover
{
    background-color: #c13616;
	
	-webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
    box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
}
.buy_btn2
{
    font-size: 14px;
    position: relative;
	
	min-width: 185px;
	text-align:center;
    border-radius: 5px;
    padding: 8px 10px;
    background-color: #0092D2;
    color: #FFF;
    cursor: pointer;
	border-width:0px;
    
    -webkit-user-select: none;
    
    -webkit-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;
}
.buy_btn2:hover
{
    background-color: #0092D2;
	
	-webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
    box-shadow: 0px 2px 3px rgb(0 0 0 / 33%);
}
.coming{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: 1px;
}
.more{
	text-align: center;
	letter-spacing: 1px;
	font-weight: 600;
}
/* 20230721 張淯瑄 add */
.qa_btn_box{
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 768px) {
	.qa_btn_box{
		padding: 10px 0px 0px;
	}
}
	

.msgerror_box {
	padding: 15px 20px;
	margin-bottom: 20px;
	color:#e03f19;
	background-color: #f8c8bc;
	font-size: 16px;
	font-weight: 600;
}

/*-- float btn---*/
.floatisFixed
{
	position: fixed;
    bottom: 20%;
    right: 0;
    margin-right: 0;
	z-index:100;
	
	
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.08), 0 2px 5px 0 rgba(0,0,0,0.12);
}
.list_unstyled
{
	padding-left: 0;
	list-style: none;
	background: #fff;
}
.float_item
{
	font-size:12px;
	letter-spacing:1px;
	color: var( --fonts-color );
	text-align: center;
	position: relative;
	padding: 5px 0;
	border: 0;
	width:60px;
	
	cursor:pointer;
	
	transition: all .3s ease-in-out;
}
.top_only
{
	border-top:1px solid #ddd;
}
.flitem_icon
{
	font-size:20px;
	text-align:center;
}
.float_item:hover
{
	color: #fff;
	background-color:var( --fonts-color );
}
.float_item:hover a
{
	color: #fff;
}
#gotop_v1
{
	display: none;
}
/*-- float btn---*/


.download_btn
{
	margin:10px 0;
}

.ps_containt
{
	width:100%;
	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: stretch;
}
.ps_cl
{
	width:30%;
}
.ps_cr
{
	width:70%;
	min-height:800px;
}
.fv_btitle
{
	font-size:15px;
	padding:8px 5px;
	background-color:#f1f1f1;
	font-weight:600;
}
.fv_stitle
{
	font-size:15px;
	position:relative;
	
	border-bottom:1px solid #c3c3c3;
	padding:8px 5px;
	
	cursor:pointer;
}
.now_setname
{
	display:none;
	position:absolute;
	top:35%;
	right:0px;
}
.fv_stitle.active .now_setname, .fv_stitle:hover .now_setname
{
	display:block;
}

/* 20230927 chisheng add */
.warning{
    
    font-size: 24px;
	font-weight:600;
    letter-spacing: 2px;
	line-height:1.5;
    text-align: center; /* 文字置中 */
    padding: 10px; /* 警語區塊內的內距 */
  }
.warning p{
    padding: 5px;
    background-color: #e03f19; /* 紅色相關的顏色，可以自行更改 */
    color: white; /* 文字顏色設定為白色 */
	margin-bottom:10px;
	border-radius:10px;
	box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px;
} 
.warning span{
	font-size: 22px;
}
.warning a {
	display: inline-block;
  	padding: 10px 20px;
  	font-size: 24px;
  	font-weight: bold;
  	text-align: center;
  	text-decoration: none;
  	color: #fff;
  	background-color: rgb(255, 56, 86);
  	border: 2px solid #000;
  	/* border-radius: 10px; */
  	box-shadow: 5px 5px 0px #000;
  	transition: all 0.3s ease;
}
.warning a:hover {
	background-color: #fff;
	color: rgb(255, 56, 86);
	border: 2px solid rgb(255, 56, 86);
	box-shadow: 5px 5px 0px rgb(255, 56, 86);
	
}


.warning_v1{
    
    font-size: 16px;
	font-weight:600;
    letter-spacing: 2px;
	line-height:1.5;
    text-align: center; /* 文字置中 */
    padding: 5px; /* 警語區塊內的內距 */
	background-color: #e03f19; /* 紅色相關的顏色，可以自行更改 */
	color: white; /* 文字顏色設定為白色 */
  }


/* 20231030 張淯瑄 add */
.video_slogen{
	font-size: 18px;
	padding: 10px 0px;
}
.video_slogen a{
	color: var(--main-color);
	transition: all .3s;
}
.video_slogen a:hover{
	text-decoration: underline;
}
.change_btn_box{
	width: 100%;
	display: flex;
	margin-bottom: 5px;
}
.iframe_btn{
	cursor: pointer;
    display: block;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    padding: 5px;
    text-align: center;
	background-color: #fff;
	border: 1px solid #e7e7e7;
	border-bottom: 3px solid #e7e7e7;
	transition: all .3s;
}
.iframe_btn.active{
	color: var(--main-color);
    border-bottom: 3px solid var(--main-color);
}
.iframe_btn:hover{
	color: var(--main-color);
    border-bottom: 3px solid var(--main-color);
}
#cr_iframe #pdfIframe{
	height: calc( 100% - 42px );
}
/* 20231103 張淯瑄 add */
.shortcut_box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.shortcut_card{
	width: 25%;
	padding: 10px 15px;
}
.shortcut_title{
	font-size: 18px;
	font-weight: 900;
	color: #000;
	text-align: center;
	margin-bottom: 10px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shortcut{
	width: 100%;
	border: 1px solid #4F1935;
	background-color: #D6A892;
	height: 100px;
	border-radius: 20px 0px 20px 0px;
}
.shortcut.none{
	display: none;
}
.shortcut a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 18px;
	font-weight: 600;
	color: #000;
	text-align: center;
}
@media (max-width: 768px) {
	.shortcut_box{
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.shortcut_card{
		width: 300px;
		padding: 10px 15px;
		flex-shrink: 0;
	}
	.shortcut_card.none{
		display: none;
	} 
}
.shortcut_box2{
	width: 90%;
	margin: 0px auto;

}
.shortcut_arrow_title{
	width: 100%;
	font-size: 20px;
	font-weight: 900;
	color: #000;
	text-align: center;
	margin-bottom: 10px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shortcut_arrow_card{
	width: 25%;
	padding: 10px 15px;
}
.arrow_box{
	width: 50%;
	padding: 10px 0px 0px 0px;
	display: flex;
	flex-wrap: wrap;
}
.shortcut_arrow_card2{
	width: 50%;
	padding: 0px 15px 10px 15px;
}
.shortcut_arrow{
	width: 100%;
	background-color: #FACD00;
	height: 120px;
	position: relative;
}
.shortcut_arrow::before{
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 60px 0px 60px 50px;
	border-color: transparent transparent transparent #F6F6F6;
}
.shortcut_arrow::after{
	content: "";
	position: absolute;
	top: 0px;
	right: -50px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 60px 0px 60px 50px;
	border-color: transparent transparent transparent #FACD00;
	z-index: 1;
}
.shortcut_arrow a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	text-align: center;
	padding-left: 50px;
}
.shortcut_arrow2{
	width: 100%;
	background-color: #3E2C8F;
	height: 120px;
	position: relative;
}
.shortcut_arrow2::before{
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 60px 0px 60px 50px;
	border-color: transparent transparent transparent #F6F6F6;
}
.shortcut_arrow2::after{
	content: "";
	position: absolute;
	top: 0px;
	right: -20px;
	width: 20px;
	height: 120px;
	background-color: #3E2C8F;
	border-radius: 0px 10px 10px 0px;
}
.shortcut_arrow2 a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	padding-left: 50px;
}
.shortcut_arrow_card3{
	width:	calc(50% / 3);
	padding: 10px 15px;
}
.shortcut_arrow_card3 .shortcut_arrow_title{
	font-size: 16px;
}
@media (max-width: 768px) {
	.shortcut_box2{
		width: 100%;	
	}
	.shortcut_box{
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.shortcut_arrow_card,.shortcut_arrow_card3{
		width: 250px;
		padding: 10px 15px;
		flex-shrink: 0;
	}
	.arrow_box{
		width: 500px;
		flex-shrink: 0;
	}
	.shortcut_arrow a{
		font-size: 18px;
	}
	.shortcut_arrow_title,.shortcut_arrow_card3 .shortcut_arrow_title{
		font-size: 22px;
	}
}
/* 20231117 張淯瑄 add */
.video{
	position: relative;
    /* width: 560px;
    height: 315px; */
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.video:hover .video-button {
    bottom: 0px;
    opacity: 1;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.imgAreaContain {
    width: 100%;
    position: relative;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    transition: all .5s ease-in-out;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.video-button {
    position: absolute;
    bottom: -40px;
    background-color: rgb(0 0 0 / 40%);
    height: 40px;
    width: 100%;
    opacity: 0;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.video_progressbar{
    width: 50%;
    height: 5px;
    background-color: #a2a2a2;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.video_progressbar_in{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    border-radius: 4px;
    background-color: red;
    transform-origin: left center;
    transform: scaleX(0);
}
.video_buffer {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    border-radius: 4px;
    background-color: #ccc;
    transform-origin: left center;
    transform: scaleX(0);
}
.video_time{
    font-size: 14px;
    color: #fff;
}
.video_btn {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
}
.minimize {
    display: none;
}
@media screen and (max-width: 768px){
    .video {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .video_btn{
        font-size: 14px;
    }
    
}

/* -------- question ------- */
.testec_area
{
	background-color:#fff;
	padding:8px;
	box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px;
}

.info_msg {
    color: #e03f19;
    font-size: 12px;
    margin-top: 5px;
}

.hr-line-dashed {
    border-top: 1px dashed #e7eaec;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 20px 0;
}

/*問卷樣式*/
.question_blockset
{
	background-color:#f4f5f5;
	padding:5px;
	margin-top:5px;
}

.quest_editor_block
{
	border-radius: 3px;
	background-color: #FFF;
    position: relative;
	border: 1px solid #EDEEEE;
	padding:5px;
	margin:8px 0;
	margin-bottom:12px;
}
.q_editor_flex
{
	width:100%;
	position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.qe_flex_left
{
	width:calc( 100% - 110px );
}
.qe_flex_right
{
	width:110px;
}
.q_editor_flexv1
{
	width:100%;
	position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
	margin:5px 0;
}
.qe_flex_leftv1
{
	color:#bdbdbd;
	width:50px;
	text-align:center;
	font-size:24px;
}
.qe_flex_isanswer
{
	color:#01B468;
}
.qe_flex_middlev1
{
	width:calc( 100% - 100px );
}
.qe_flex_rightv1
{
	width:50px;
}
.list_block
{
	background-color:#fff;
	margin-top:15px;
}
.editorbtn_block
{
	border-top:1px solid #dadce0;
	padding:5px;
	padding-top:10px;
	margin:5px 0;
	text-align:right;
}

.quesbtn_block
{
	transition: all .15s ease-in-out;
}
.top_tab
{
	background-color:#fff;
	width:100%;
	position:fixed;
	top:0px;
	padding:5px 0;
	z-index:100;
}

/*問卷詳細*/
.qd_tilte
{
	position:relative;
}
/* .qd_tilte:after
{
	content:'';
	position:absolute;
	bottom:-4px;
	left:0px;
	width:100%;
	border:1px solid #D0D0D0;
} */
.question_detial_block1
{
	text-align:right;
	font-size:16px;
	margin-top:20px;
	margin-bottom:15px;
	letter-spacing:1px;
}
.qd_score
{
	font-size:38px;
	font-family: 'Noto Sans TC', sans-serif;
	color:#FF5151;
}

.question_detial_li
{
	width:100%;
	position: relative;
    margin:15px 0;
	margin-bottom:30px;
}

.qdl_con
{
	width:100%;
	position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.qdl_title
{
	font-size:17px;
	font-weight:600;
}
.qql_con_left
{
	color: #bdbdbd;
    width: 50px;
    text-align: center;
    font-size: 24px;
}
.qqlcl_flex_isanswer
{
	color:#01B468;
}
.qqlcl_flex_isanswererror
{
	color:#FF5151;
}
.qql_con_right
{
    width: calc( 100% - 50px );
	padding-top:10px;
}
/* -------- question ------- */
/* quest */
.marginTop20px{
    margin-top: 20px;
}

.quest_btitle{
    width: 100%;
    font-size: 24px;
    font-weight: 600;
}
.quest_btitle_word{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 1px;
    color: #666;
}
.quest_btitle_box{
    margin-bottom: 32px;
    text-align: center;
}
.quest_list,.quest_box{
    width: 100%;
    position: relative;
}
.quest_item{
    width: 100%;
    position: relative;
    margin: 15px 0;
    margin-bottom: 30px;
}
.qdl_title {
    font-size: 17px;
    font-weight: 600;
}
.qdl_con {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.qql_con_left {
    color: #bdbdbd;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.qe_flex_isanswer {
    color: #01B468;
}
.qql_con_right {
    width: calc( 100% - 50px );
    padding-top: 5px;
    padding-bottom: 7px;
    font-size: 16px;
    line-height: 2;
}
.submit_box{
    position: sticky;
    bottom: 0px;
    width: 100%;
    padding: 10px 0px;
    z-index: 1;
    box-shadow: 0px -1px 10px rgb(0 0 0 / 30%);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.progress_bar_block{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.progress_bar_box{
    width: 320px;
    display: flex;
    align-items: center;
}
.progress_bar{
    flex: 1 1 95%;
    height: 8px;
    border-radius: 4px;
    background-color: rgb(236, 235, 235);
    overflow: hidden;
    position: relative;
}
.progress_bar_in{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    border-radius: 4px;
    background-color: var(--main-color);
    transition: transform 0.2s linear 0s;
    transform-origin: left center;
    transform: scaleX(0);
}

.schedule{
    flex: 1 1 5%;
    font-size: 16px;
    margin-left: 10px;
    color: var(--main-color);
}
.submit_btn{
    cursor: pointer;
    padding: 6px 20px;
    font-size: 16px;
    border: 1px solid rgba(0, 0, 0, 0.43);
    border-radius: 5px;
    background-color: #333;
    color: #FFF;
}
/* quest */
/* questok */
.questok_img{
    width: 100%;
    text-align: center;
}
.questok_img img{
    max-width: 300px;
}
.center{
    text-align: center;
}
.quest_main{
    width: 100%;
    margin-bottom: 20px;
	background-color:#fff;
	border:1px solid #c3c3c3;
}
.questok_title{
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.questok_title span{
    color: var(--main-color);
    font-size: 24px;
}
.questok_text{
    font-size: 18px;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.back_btn_box{
    width: 100%;
    text-align: center;
    padding-top: 20px;
}
.back_btn{
    padding: 5px 10px;
    border: 1px solid var(--main-color);
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    color: var(--main-color);
    transition: 0.25s ease;
}
.back_btn:hover{
    background-color: var(--main-color);
    color: #FFF;
}
/* questok */

.qdl_con
{
	width:100%;
	position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.qdl_title
{
	font-size:17px;
	font-weight:600;
}
.qql_con_left_v1
{
	color: #bdbdbd;
    width: 50px;
    text-align: center;
    font-size: 24px;
}
.qqlcl_flex_isanswer
{
	color:#01B468;
}
.qqlcl_flex_isanswererror
{
	color:#FF5151;
}
.qql_con_right_v1
{
    width: calc( 100% - 50px );
	padding-top:10px;
}

.import_fons
{
	font-weight:600;
	color:#e03f19;
}



/*-- 20231124 float img---*/
.float_imgtitle
{
	font-size:14px;
	width:100px;
	color:#fff;
	background-color:var( --main-color );
	padding:5px;
	text-align:center;
}
.floatisFixed_img
{
	position: fixed;
    top: 180px;
    right: 0;
    margin-right: 0;
	z-index:100;
	
	
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.08), 0 2px 5px 0 rgba(0,0,0,0.12);
}
.list_unstyled_img
{
	padding-left: 0;
	list-style: none;
	background: #fff;
}
.float_item_img
{
	font-size:12px;
	letter-spacing:1px;
	color: var( --fonts-color );
	text-align: center;
	position: relative;
	padding: 5px 0;
	border: 0;
	width:100px;
	
	cursor:pointer;
	
	transition: all .3s ease-in-out;
}
.float_item_img img
{
	max-width:100%;
}
/*-- 20231124 float img---*/

/*-- 20231129 chisheng add---*/
.html_indextitlev1 {
	color: var(--footertop-color);
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	letter-spacing: 2px;
	line-height: 1.5;

	position: relative;
}
.max_top
{
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;
}
.maxtop_left
{
	width:400px;
}
.maxtop_right
{
	width:calc( 100% - 420px );
	background-color:#fff;
	margin:10px;
}

.mtr_down {
	padding: 10px 0PX;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2px;
	width: 100%;
	display: flex;
}

.mtr_img {
	width: 25%;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}

.mtr_word {
	margin-left: 10px;
	width: 100%;
	font-weight:600;
	padding:5px;
}
@media screen and (max-width: 600px) {

	.maxtop_left,
	.maxtop_right {
		width: 100%;
		margin:10px;
	}
}
/* 20231222 張淯瑄 add */
.cer_btn_box{
	width: 100%;
	padding: 25px 50PX;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/* justify-content: space-around; */
}
.cer_btn{
	/* width: 300px;
	height: 250px; */
	margin: 25px 40px;
	width: calc(50% - 80px);
	height: 250px;
	border-radius: 32px;
	background-color: #fff;
	border: 3px solid var(--main-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
	font-size: 24px;
	box-shadow: 2px 2px 10px #c3c3c3;
	font-weight: 600;
	color:#0092D2;
}
.cer_btn i{
	font-size: 48px;
}
.cer_btn span{
	font-size: 16px;
	padding-top: 10px;
}
.cer_btn:hover{
	background-color: var(--main-color);
	color: #fff;
}
.cerb_incon
{
	padding:5px;
}
@media  (max-width: 768px) {
	.cer_btn_box{
		padding: 20px;
	}
	.cer_btn{
		margin: 10px 20px;
		width: calc(100% - 40px);
		height: 180px;
	}
}
.testmsg_title
{
	width: 100%;
	font-size:25px;
	font-weight:600;
	padding:10px;
}
.testmsg_box_full{
	width: 100%;
	margin: 0px auto 20px;
	background-color: #fff;
	border: 1px solid #e7e7e7;
	box-shadow: 5px 5px 5px #b8b8b8;
}
.testmsg_box{
	width: 100%;
	max-width: 700px;
	margin: 0px auto 20px;
	background-color: #fff;
	border: 1px solid #e7e7e7;
	box-shadow: 5px 5px 5px #b8b8b8;
}
.testmsg{
	width: 100%;
	padding: 15px 20px;;
}
.quest_box{
	width: 100%;
	margin-bottom: 10px;
}
.quest_box p{
	margin: 0px 0px 5px;
}
.add_button {
	height: 40px;
	width: 40px;
	margin: 0px auto;
	background: #0092D2;
	border-radius: 50%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
	transition: all .2s ease-out;
	cursor: pointer;
}
.add_button:hover {
	transform: scale(1.1);
	transition: all .2s ease-out;
}
.buy_edblock_v2 {
    position: relative;
    width: calc(33% - 20px);
    margin: 10px;
}


.caption_block
{
    font-size: 15px;
    color:#a95400;
    padding: 10px;
    margin: 5px 0px;
    background-color: #ffedaf;
    line-height: 1.5;
    letter-spacing: 2px;
}


.course_flexblock
{
	width:100%;
	position:relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;
	
	background:#fff;
	margin-bottom:10px;
}

.cf_block
{
	width:100%;
	padding:10px;
}
.cf_left
{
	width:300px;
}
.cf_right
{
	width:calc( 100% - 300px );
	padding:10px;
	letter-spacing:2px;
	line-height:1.5;
}
.cf_btitle
{
	font-weight:600;
	border-bottom:1px solid #d5d5d5;
	text-align:center;
	padding:5px;
}
.cf_body
{
	padding:10px;
	text-align:center;
	font-size:28px;
	font-weight:600;
	color:#e03f19;
}
.cf_bfonts1
{
	color:#666;
	font-weight:500;
	font-size:18px;
}

.cfr_title
{
	font-weight:600;
	font-size:20px;
	margin-bottom:5px;
}
.cfr_con
{
	font-size:16px;
}
@media screen and (max-width: 600px) {
	
	.cf_left
	{
		width:100%;
		padding:10px;
	}
	.cf_right
	{
		width:100%;
	}
}

/*-----v1breadcrumb-----*/
.v1breadcrumb ul {
    display: flex;
    gap: 0 .5em;
    width: 100%;
    flex-wrap: wrap;
	padding:5px;
	
	border-bottom: 1px dotted gray;
}
.v1breadcrumb ul li {
    display: block;
    flex: 0 0 fit-content;
    font-size: 14px;
}
.v1breadcrumb ul>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0";
}
/*-----v1breadcrumb-----*/

/*------certification---------*/
.cerif_containter {
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;

	padding: 15px;
}

.cerif_full {
	width: 100%;
	padding: 10px;
	overflow: hidden;
}

.cerif_left {
	
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top:  var(--header-height);
	
	width: 260px;
	margin-right: 5px;

	border: 1px solid silver;
	background: rgb(255, 255, 255, 0.8);
	box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
}

.cerif_right {
	width: calc(100% - 265px);
	padding: 10px;
	padding-top:0px;
	overflow: hidden;
}

.cerif_header
{
	font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
    padding: 15px 10px;
    background: #ccc linear-gradient(to bottom, #eee 5%, #ccc 100%);
    text-align: center;
    position: relative;
}

.cerif_classblock {
	position: relative;
}

.cerif_classtitle {
	color: #666;
	font-size: 16px;
	font-weight:600;
	background: linear-gradient(to bottom, #fff 0%, #f6f6f6 47%, #ededed 100%);
	border:1px solid #ddd;
	padding: 10px;
	margin-bottom: 0;
	text-align: left;
	line-height: 1.5;
	letter-spacing: 2px;
}

ul.cerif_nav {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.cerif_nav>li {
	position: relative;
	display: block;
	padding: 10px 15px;

	transition: all .15s ease-in-out;
}

ul.cerif_nav>li a {
	display: block;
	width: 100%;
	font-size:14px;
}

ul.cerif_nav>li+li {
	border-top: 1px solid var(--line-colorv6);
}

ul.cerif_nav>li:hover, ul.cerif_nav>li.active {
	background-color: var(--bg-color);
}

.icon_position
{
	display:none;
	
	position:absolute;
	top:35%;
	right:5px;
}

ul.cerif_nav li.active .icon_position
{
	display:block;
}

/*mobile*/
.moblie_cerifblockicon {
	position: absolute;
	font-size: 15px;
	top: 120px;
	left: 245px;
	padding: 10px;
	color: #fff;
	background: var(--fonts10-color);
	box-shadow: 1px 1px 5px rgb(0 0 0 / 30%);

	writing-mode: vertical-rl;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
}

.moblie_cerifblockicon i {
	display: inline-block;
	transition: all .3s ease-in-out;
}

.moblie_cerifblockicon.in {
	left: 245px;
}

.moblie_cerifblockicon.in i {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

@media screen and (max-width: 767px) {
	.cerif_right {
		width: 100%;
	}

	.cerif_left {
		position: fixed;
		top: 20px;
		left: -260px;
		z-index: 900;
		height: calc(100% - 20px);

		background-color: #fff;
		box-shadow: 1px 0px 2px rgb(0 0 0 / 30%);
	}

	.cerif_mobile_lefty {
		overflow-y: auto;
		height: calc(100% - 51px);
	}

	.moblie_cerifblockicon {
		opacity: 1;
		visibility: visible;
	}

	.cerif_left.in {
		visibility: visible;
		opacity: 1;

		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		-webkit-animation-name: classMenuFadeInDown;
		animation-name: classMenuFadeInDown;
	}

	.cerif_left.out {
		visibility: visible;
		opacity: 1;

		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		-webkit-animation-name: classMenuFadeInUp;
		animation-name: classMenuFadeInUp;
	}
}

@-webkit-keyframes classMenuFadeInDown {
	0% {
		opacity: 0;
		left: -245px;
	}

	100% {
		opacity: 1;
		left: 0px;
	}
}

@keyframes classMenuFadeInDown {
	0% {
		opacity: 0;
		left: -245px;
	}

	100% {
		opacity: 1;
		left: 0px;
	}
}

@-webkit-keyframes classMenuFadeInUp {
	0% {
		left: 0px;
	}

	100% {
		left: -245px;
	}
}

@keyframes classMenuFadeInUp {
	0% {
		left: 0px;
	}

	100% {
		left: -245px;
	}
}

/*------certification---------*/


/*------20240718 add---------*/
.v100_flex
{
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;
}
.v100_flist
{
	width:calc( 50% - 20px );
	border:1px solid #c3c3c3;
	margin:10px;
	background-color:#fff;
}
.v100_title
{
	padding:10px;
	text-align:center;
	background-color:#eaeaea;
	border-bottom:1px solid #c3c3c3;
}

.v100_body
{
	padding:10px;
}
.v100_blist
{
	position: relative;
	width: 100%;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;
	padding:10px 0;
	
	border-bottom:1px solid #c3c3c3;
}
.v100_bltfull
{
	width:100%;
}
.v100_bltopleft
{
	width:60%;
}
.v100_bltopright
{
	width:40%;
	text-align:right;
}
.v100_blbtmleft
{
	width:60%;
	padding:5px 0;
}
.v100_blbtmright
{
	width:40%;
	text-align:right;
	padding:5px;
}
/*------20240718 add---------*/