@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Noto+Sans+TC:wght@300;400;700&display=swap');

body{
	color: #595758;
}

#page_wrapper{
	overflow: hidden;
}

/*------------ original ------------*/

.originalbox{
	overflow: hidden;
	/*display: flex;
	align-items: flex-start;
	justify-content: space-between;*/
}

.original_menu{
	position: sticky;
	float: left;
	width: 150px;
	list-style-type: none;
	background-color: #ebebeb;
}

.original_menu li {
	cursor: pointer;
	color: #595758;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 20px;
}

.original_menu li:hover{
	color: #fff;
	background-color: rgba(89,87,88,0.5);
}

.original_menu .on{
	color: #f9dd00;
	background-color: #595758;
}

.original_menu .on:hover{
	color: #f9dd00;
	background-color: #595758;
}

.original_sticky{
	position: fixed;
	top: 200px;
}

.original_in{ width:100%;
	/*float: right;
	width: calc(100% - 200px);*/
}

.inn{
	margin-bottom: 100px;
}



/*------------ tab ------------*/
.list_tab {position:relative; border-bottom:1px solid #88908d; margin-bottom:50px; overflow-x:hidden; overflow-y:hidden;}
.tabs {display:table; position:relative; margin:auto; position:relative;}
.tabs li {display:block; float:left; list-style:none; border-bottom:5px solid #F8F8F8;}
.tabs li a {display:block; text-decoration:none; padding:8px 16px; font-size:16px; color:#8e9291;}
.tabs li a:hover {cursor:pointer !important;}
.tabs li.active {border-bottom-color:#f8dd00;}
.tabs li.active a {color:#595757;}



/*------------ about ------------*/

.about_in{
	margin-bottom: 30px;
}

.about_video{
	overflow: hidden;
	position: relative;
	height: 0;
	padding-top: 30px;
	padding-bottom: 56.25%; 
}

.about_video iframe{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}


/*------------ topic ------------*/

.topic_pic{
	margin-bottom: 30px;
}

.topic_ptop{
	display: block;
	width: 100%;
	margin-bottom: 16px;
}

.topic_pbox{
	display: flex;
	align-items: center;
	justify-content: center;
}

.topic_pleft,
.topic_pright{
	display: block;
	width: calc(50% - 8px);
}

.topic_pleft{
	margin-right: 16px;
}

.topic_btn{
	margin: 30px 0 0 auto;
}

/*------------ history ------------*/

.history_list{
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid #b6b6b6;
	padding-bottom: 50px;
	margin-bottom: 50px;
}

.history_list:last-child{
	border-bottom: none;
	margin-bottom: 0;
}


.history_pic{
	float: left;
	width: 350px;
	display: inline-block;
	margin-right: 5%;
}

.history_intro p{
	height: 110px;
	display: -webkit-box;
	text-align: justify;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.history_name{
	font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important;
	font-size:24px;
	font-weight:500;
	color:#595758;
	margin-bottom: 30px;
}

.history_name::after{
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-bottom: 10px solid #f8dd00;
	border-left: 10px solid transparent;
	background:none;
	left:auto;
	bottom:5px;
	margin-left:5px;
}

.history_btn{
	position: absolute;
	bottom: 30px;
	right: 0;
}




/*------------ home ------------*/

.home_in{
	position: relative;
}

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

.home_btn{
	cursor: pointer;
	position: absolute;
	right: 0;
	bottom: 0;
}




/*------------ faq ------------*/

.faq_q{
	display: block;
	background: #cccccc;
	width: 100%;
	height: 50px;
	position: relative;
	box-sizing: border-box;
	padding-left: 18px;
	margin-bottom: 18px;
}

.faq_qin{
	font-size: 16px;
	line-height: 50px;
	color: #595758;
	padding-right: 20px;
}

.faq_q:hover{
	cursor:pointer;
}

.faq_a{
	position: relative;
	display: block;
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	padding: 18px;
	margin-bottom: 18px;
	margin-top: -18px;
}

.faq_a p{
	font-size: 15px;
	line-height: 24px;
	color:#595758;
}

.plus-minus-toggle{
    cursor: pointer;
    height: 18px;
    width: 18px;
    position: absolute;
    right: 10px;
    top: 24px;
}

.plus-minus-toggle:before,
.plus-minus-toggle:after{
	content: "";
	position: absolute;
	width: 14px;
	height: 2px;
	left: 0;
	top: 0;
	background: #ffffff;
	-webkit-transition: transform 500ms ease;
    -moz-transition: transform 500ms ease;
    -o-transition: transform 500ms ease;
    -ms-transition: transform 500ms ease;
    transition: transform 500ms ease;
}

.plus-minus-toggle:after{
    transform-origin: center;
}

.plus-minus-toggle.collapsed:after{
    -webkit-transform: rotate(90deg); 
	-moz-transform: rotate(90deg);  
	-ms-transform: rotate(90deg); 
	-o-transform: rotate(90deg); 
	transform: rotate(90deg);
}

.plus-minus-toggle.collapsed:before{
    -webkit-transform: rotate(180deg); 
	-moz-transform: rotate(180deg);  
	-ms-transform: rotate(180deg); 
	-o-transform: rotate(180deg); 
	transform: rotate(180deg);
}



@media screen and (max-width:1000px) {
	.original_in{
		width: calc(100% - 180px);
	}

	.topic_ptop{
		margin-bottom: 10px;
	}

	.topic_pleft,
	.topic_pright{
		width: calc(50% - 5px);
	}

	.topic_pleft{
		margin-right: 10px;
	}

	.history_pic{
		width: 300px;
	}

	.history_intro{
		height: 75px;
	}

	
}


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

	.container{
		margin-top: 60px;
	}

	.original{
		width: 100%;
		margin-top: 0;
	}
	
	.original_sticky{
		top: 60px;
		margin-left: -2.5%;
	}

	.original_menu{
		float: none;
		overflow: hidden;
		width: 100%;
		z-index: 10;
	}

	.original_menu li{
		display: inline-block;
		float: left;
		width: calc(100% / 5);
		box-sizing: border-box;
		padding: 10px;
	}

	.original_in{
		float: none;
		width: 100%;
		margin-top: 50px;
		/*margin: auto;*/
	}

	.history_list{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.faq_q{
		height: auto;
		padding: 10px 15px;
	}

    .faq_qin{
    	font-size: 16px;
    	line-height: 24px;
    }

    .faq_a{
    	padding: 15px;
    }

	
}


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

	.original_menu li{
		font-size: 14px;
		padding: 8px;
	}

	.original_menu li span{
		display: block;
		letter-spacing: 0.8px;
		line-height: 20px;
	}

	.history_pic{
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}

	.history_name{
		margin-bottom: 20px;
	}


	.history_intro p{
		height: 68px;
		display: -webkit-box;
		text-align: justify;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.history_btn{
		position: relative;
		bottom: unset;
		margin: 10px 0 0 auto;
	}

	.faq_q{
		margin-bottom: 10px;
	}
	
}