/*=================================================================
                               通用
=================================================================*/
.breadcrumb {
	background-color: transparent;}
.breadcrumb a {
	color: hsla(218, 56%, 44%, 1);
	color: var(--primary);}

.page {
		margin: 12rem auto 5rem;}
@media (max-width: 992px) {
	.page {
		margin-top: 8.5rem;}}

/*==================================
              文字編輯器
====================================*/
.editor {
	margin-bottom: 5rem;}
.editor ul li {
	list-style: disc;}
.editor ol li {
	list-style: decimal;}
.editor a {
	color: var(--primary);
	color: hsla(218, 56%, 44%, 1);}
.editor p {
	word-break: keep-all;}
.editor img {
	width: 100%;
	height: auto;}

/*== Subtitle ==*/
.page .subtitle {
	position: relative;
	margin: 2rem auto;
	padding-left: 3rem;
	font-weight: 700;}
.page .subtitle:before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 2rem;
	height: 2rem;
	background: url(../images/icon/subtitle.svg) no-repeat 0 50%;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);}

/*==================================
                aside
====================================*/
aside {
	position: relative;}
aside:before {
	display: block;
	content: '';
	background: url(../images/bg/aside-bg.svg) no-repeat 0 50%;
	height: 3rem;}
aside .aside_title {
	margin-bottom: 0;
	position: absolute;
	top: 0;
	left: 2%;
  line-height: 30px;
	color: #FFF;}

aside ul {
	background-color: #FFF;
	border: 1px solid #DDD;}
aside ul li {
	width: 100%;}
aside ul a {
	position: relative;
	display: block;
	padding: .5rem 1rem;
	padding-right: 1.5rem;
	border-left: .5rem solid transparent;
	-webkit-transition: .3s ease;
  transition: .1s ease;}
@media (max-width: 992px) {
	aside {
		margin-bottom: 2rem;}
	aside ul a {
		margin: 0;}}
aside ul li:hover,
aside .nav-tabs .nav-item:hover {
	background: transparent;}
aside ul a:hover,
aside ul a:focus,
aside ul li.show a, 
aside ul a.active,
aside .nav-tabs .nav-link:hover,
aside .nav-tabs .nav-link:focus,
aside .nav-tabs .nav-link.active {
	color: hsla(218, 56%, 44%, 1);
	color: var(--primary);
	background: #F2F2F2;
	border-left: .5rem solid hsla(218, 56%, 44%, 1);}
aside ul a:after {
	opacity: 0;
	content: '\f054';
	position: absolute;
	top: 50%;
	right: 5%;
	display: inline-block;
	font-family:"Font Awesome 5 Free";
	font-weight: 700;
	font-size: 1rem;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	-webkit-transition: .3s ease;
	transition: .3s ease;}
aside ul a:hover:after,
aside ul a:focus:after,
aside ul a.active:after {
	opacity: 1;}
@media (max-width: 992px) {
	aside ul a:after {
		content: '\f078';}}


/*=================================================================
                              FAQ
=================================================================*/
.section_faq {
	min-height: 60rem;}

/*==================================
                 Nav
====================================*/
.tab_nav {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;}
.tab_nav .nav-tabs {
	border: 0;}
.tab_nav .nav-link.active {
	color: #FFF;
	background-color: hsla(218, 56%, 44%, 1);
	background-color: var(--primary);}
@media (max-width: 992px){
	.tab_nav .nav-item .nav-link {
		text-align: center;
		border: 0;}}

/*==================================
                 列表
====================================*/
.section_faq .accordion .card {
	padding: 0;
	border: 0;}
.section_faq .accordion>.card>.card-header {
	position: relative;
	margin-bottom: 0;
	padding: 0;
	background-color: #FFF;
	border-bottom: 1px solid rgba(0,0,0,.125);}
@media (max-width: 1200px) {
	.section_faq .accordion .card-header {
		border-bottom: 0;}}
.section_faq .accordion .card-header button {
	display: block;
	position: relative;
	margin-bottom: 0;
	padding: .75rem .75rem;
	font-size: 1.6rem;
	text-align: left;
	border-radius: 0;}
.section_faq .accordion .card-header button[aria-expanded="true"] {
	color: var(--primary);
	color: hsla(218, 56%, 44%, 1);}
.section_faq .accordion .card-header button[data-toggle="collapse"]:after {
  content: "\f105";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 2%;
  margin-right: 6px;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  color: #333;
  pointer-events: none;
	transform: translate(0, -50%);}
.section_faq .accordion .card-header button[aria-expanded="true"]:after {
	content: '\f107';
	color: var(--primary);
	color: hsla(218, 56%, 44%, 1);}
@media (max-width: 1200px) {
	.section_faq .accordion .card-header button[data-toggle="collapse"]:after {
		margin-right: 0;
		right: 3%;}}

.section_faq .accordion .collapse {
	border-top: 0;}
.section_faq .accordion .card-body {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 1.5rem;
	color: #666;
	background-color: #FFF;}
.section_faq .accordion .card-body ul {
	margin: 1rem auto 0;}
.section_faq .accordion .card-body ul li a {
	display: inline-block;
	min-width: clamp(30rem, 33rem, 34rem);
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;}
.section_faq .card-header button p {
	display: inline-block;
	max-width: 95%;
	line-height: 1.5;
	text-indent: -2.5rem;
  padding-left: 5rem;}
@media (max-width: 1200px) {
	.section_faq .accordion .card-header button {
    display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;}
	.section_faq .card-header button p {
		max-width: 90%;}}

.section_faq .accordion .card-body .editor {
	margin-bottom: 0;}


/*=================================================================
                              download
=================================================================*/
@media screen and (max-width: 991px) {
  .page_download .table tbody tr td ul {
    text-indent: 0;}}

/*==================================
                 Nav
====================================*/
.page_download .tab_nav ul li {
	width: calc( 100% / 3 );
	text-align: center;}
@media (max-width: 992px) {
	.page_download .tab_nav ul li {
		width: calc( 100% / 3 );}}
@media (max-width: 480px) {
	.page_download .tab_nav ul li {
		width: 50%;}}

.tag_dld,
.tag_youtube {
	width: 3.5rem;}

/*=================================================================
                              achievement
=================================================================*/
/*==================================
                 列表
====================================*/
.section_picture .card {
	border: 0;}
.section_picture figure {
	position: relative;}
.section_picture figcaption {
	opacity: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: hsla(0, 0%, 0%, .4);
	-webkit-transition: .3s;
	transition: .3s;}
.section_picture figure:hover figcaption {
	opacity: 1;}
.section_picture figcaption i {
	margin: auto;}
.section_picture .card-body {
	padding: 1rem 0;}
.section_picture .card-title {
	margin-bottom: 0;
	padding-bottom: 1.5rem;
	min-height: 6.5rem;
	border-bottom: 1px solid #DDD;}
.section_picture .btn {
	margin: 1rem auto;
	padding: 0;
	color: #333;	
	font-size: 1.8rem;}
.section_picture .btn:hover,
.section_picture .btn:focus {
	text-decoration: none;
	color: hsla(218, 56%, 44%, 1);
	color: var(--primary);}
.section_picture .btn i {
	-webkit-transition: .3s;
	transition: .3s;}
.section_picture .btn:hover i {
	padding-left: .5rem;}


@media screen and (max-width: 991px) {
  .page_achievement .table tbody tr td ul {
    text-indent: 0;}}


/*=================================================================
                           Online user
=================================================================*/
.section_onlineUser {
	position: relative;
	padding: 1em 4em;
	min-height: 100vh;
	background: url(../images/bg/bg.jpg) no-repeat 50% top / cover;}
@media (max-width: 992px) {
	.section_onlineUser {
		padding: 1em;}}
/*.section_onlineUser:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: hsla(0, 0%, 0%, 0.3);}*/
.section_onlineUser a {
	color: hsla(218, 56%, 44%, 1);
	color: var(--primary);
	text-decoration: underline;}


/*.section_onlineUser .online_logo {
	margin-right: 1rem;
	width: 20rem;}*/
.section_onlineUser .online_title {
	margin: 1rem auto 2rem;
	color: #FFF;
	text-align: center;
	text-shadow: black 0.1em 0.1em 0.2em;}

/*== 登入框 ==*/
.section_onlineUser .code_wrap {
	display: -ms-inline-flex;
	display: inline-flex;}
@media (max-width: 992px) {
	.section_onlineUser .code_wrap {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;}}
.section_onlineUser .code_input {
	margin-right: 1rem;}
.section_onlineUser .code_img {
	display: inline-block;
	background-color: #EEE;
  border: 1px solid #CCC;}


.section_onlineUser ul li:not(:last-child) {
  padding-right: .5rem;
  border-right: 1px solid #333;}
.section_onlineUser ul li a {
  padding: 0 .5rem;}


/*== 下方 ==*/
.section_onlineUser .online_copyright {
	opacity: .8;
	margin: 2rem 1.5rem 0;
  padding: .75rem 0;	
	font-size: 1.6rem;
	text-align: center;
  background: #F6F6F6;}
@media (max-width: 480px) {
	.section_onlineUser .online_copyright {
		margin: 2rem 0 0;
		padding: 1rem;}}
.section_onlineUser .info {
	padding: 2rem;
	text-align: left;}
.section_onlineUser .online_copyright ul {
	margin-bottom: 0;
	text-align: center;}
.section_onlineUser .online_copyright ul li {
	margin-right: 1rem;
	float: left;}
.section_onlineUser .online_copyright ul li img {
	width: 15rem;}
@media (max-width: 480px) {
	.section_onlineUser .online_copyright ul li:not(:last-child) {
		float: none;
		border: 0;}}