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


* {margin:0px; padding:0px;}

body, html {background:#f8f8f8; font-size:16px; line-height:24px; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; font-weight:400; color:#595758; max-width:100vw; overflow-x:hidden;}
a:link, a:active, a:hover, a:focus, a:visited {outline:none; cursor:pointer !important;}

.se-pre-con {position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999999; background: url(../images/loading.gif) center no-repeat #f7f7f7;}

.cleardiv {clear:both;}
.montsrt {font-family: 'Montserrat',Arial,sans-serif; font-weight:300;}


 
/*------------ 全站共用 ------------*/
.lv_h1_cneng {display:block; position:relative; font-size:35px; height:35px; font-weight:700; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; color:#595758; margin-top: 5px; letter-spacing:2px; margin-bottom:50px;}
.lv_h1_cneng .montsrt {font-family: 'Montserrat',Arial,sans-serif !important; font-size:20px; margin-left:15px; letter-spacing:4px;}
.lv_h1_cneng::after {content:""; width:56px; height:6px; background:#f9dd00; position:absolute; left:0px; top:41px;}
.lv_h1_engcn {display:block; position:relative; font-size:35px; height:35px; font-weight:700; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; color:#595758; letter-spacing:4px; margin-bottom:50px;}
.lv_h1_engcn .zhtw {font-size:20px; margin-left:15px; letter-spacing:2px; font-weight:400; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important;}
.lv_h1_engcn.montsrt {font-family: 'Montserrat',Arial,sans-serif !important;}
.lv_h1_engcn::after {content:""; width:56px; height:6px; background:#f9dd00; position:absolute; left:0px; top:41px;}

.lv_h2 {display:block; position:relative; font-size:24px; font-weight:500; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; color:#595758; margin-bottom:35px;}
.lv_h2 .montsrt {display:block; margin-bottom:12px; font-size:18px; color:#88908d; letter-spacing:4px;}
.lv_h2::after {content:""; width:56px; height:3px; background:#f9dd00; position:absolute; left:0px; bottom:-7px;}

.lv_h3 {font-size:20px; line-height:40px; font-weight:500; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; color:#595758;}

.lv_h4 {font-size:24px; font-weight:500; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; color:#595758; text-align:center; margin-bottom:50px; position:relative;}
.lv_h4:before {position: absolute; content: ''; width: 60px; height: 4px; top:140%; left:50%; background:#f9dd00;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.nml_input {display:block; width:100%; height:50px; position:relative; box-sizing:border-box; background:#CCCCCC; padding-left:15px; margin-bottom:18px; border:0px; font-size:16px; line-height:50px; color:#595758; outline:none; border-radius:0px;}

/*input readonly 樣式*/
input:-moz-read-only{color:#88908d;cursor: default;}
input:read-only{color:#88908d;cursor: default;}


.tr {display:block; position:relative;}
.validate {display:none; height:50px; width:150px; box-sizing:border-box; position:absolute; right:0px; top:0px; z-index:2; background:#BD8145; color:white; font-size:16px; line-height:50px; text-align:center;}

.btn {display:block; width:170px; height:46px; font-size:17px !important; line-height:46px !important; font-weight:400 !important; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; text-align:center; background:#595758; color:#f9dd00 !important; border:0px; text-decoration:none; outline:none; transition: ease 0.4s;}
.btn:hover {background:rgba(89, 87, 87, 0.9); cursor:pointer !important;}

#page_wrapper {display:block; width:100%; position:relative; margin-top:160px;}
#page_kv {display:block; width:100%; height:400px; margin-bottom:30px; position:relative; background-size:cover; background-position:center; background-repeat:no-repeat;}
#page_kv .page_title {display:table; position:absolute; margin-left:5px; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#page_kv .page_title p {display:block; position:relative; font-size:30px; font-weight:700; color:white; letter-spacing:5px;}
#page_kv .page_title p::after {content: ""; width:300px; height:50px; position:absolute; background-image:url(../images/pagekv_title_icon.svg); background-size:cover; background-repeat:no-repeat; top:-25px; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

#page_layout {display:block; width:95%; max-width:1100px; margin:auto; position:relative;}

#breadcrumbs {display:block; position:relative; margin-bottom:100px;}
#breadcrumbs li {display:inline-table; vertical-align:middle; padding-right:20px; font-size:17px; color:#88908d;}
#breadcrumbs li::after {content:"/"; margin-left:20px;}
#breadcrumbs li a {font-size:17px; text-decoration:none; color:#88908d;}
#breadcrumbs li a:hover {border-bottom:1px solid #f9dd00; cursor:pointer !important;}
#breadcrumbs li.thispage {color:#595758; font-weight:400;}
#breadcrumbs li.thispage::after {display:none;}

.inpage_lnk {display:table; color:#595758; border-bottom:1px solid #f9dd00; text-decoration:none;}
.inpage_lnk::after {content: ""; width:17px; height:17px; background-image:url(../images/inpage_lnk.svg); background-size:cover; background-repeat:no-repeat; position:absolute; margin-top:4px; margin-left:4px;}

.download_lnk {display:table; color:#595758; border-bottom:1px solid #f9dd00; text-decoration:none;}
.download_lnk::after {content: ""; width:15px; height:15px; background-image:url(../images/download_lnk.svg); background-size:cover; background-repeat:no-repeat; position:absolute; margin-top:6px; margin-left:4px;}



/*------------ header ------------*/
header {position:fixed; top:0px; z-index:999; width:100%; background:#f3f3f3;}
header .hd_logo {display:block; width:160px; height:70px; margin:20px auto; transition: ease 0.4s;}
header .hd_logo img {display:block; width:100%; height:auto;}
header .hd_logo img.logomb {display:none;}
header .hd_logo_scrol {width:120px; height:53px; margin:10px auto;}

header .navcon {display:block; width:100%; height:50px; background:#595758; position:relative;}
header .nav {display:block; width:100%; max-width:1100px; margin:auto; position:relative;}
header .nav li {display:block; float:left; width:calc(100%/8); height:50px; position:relative; overflow:visible;}
header .nav li a {display:block; width:100%; height:50px; font-size:18px; line-height:50px; color:white; text-align:left; text-decoration:none;}
header .nav li a:hover {color:#f9dd00;}
header .nav li.srch_mbno {background:#f9dd00;}
header .nav li.srch_mbno a {color:#595758; text-align:center;}
header .nav li.srch_mbno a:hover {color:black;}
header .nav li.srch_mbno a .material-icons {vertical-align:middle; font-size:22px;}
header .nav ul.sub {display:block; width:100%; background:rgba(255,255,255,0.9);}
header .nav ul.sub li {display:block; float:none; width:100%; height:50px;}
header .nav ul.sub li a {font-size:17px; line-height:50px; color:#595758; text-align:center;}
header .nav ul.sub li a:hover {color:black;}

header #mbmnu, header .top_mb_lnks, header .nav li.pcno {display:none;}

header .top_lnks {display:block; position:absolute; top:20px; right:50px;}
header .top_lnks a {display:inline-block; vertical-align:middle; font-size:16px; padding:0px 10px; color:#595758; text-decoration:none; border-right:1px solid #595758;}
header .top_lnks a:last-child {border-right:0px;}
/* header .top_lnks a:hover {color:black; text-decoration:underline; text-decoration-color:#f9dd00;} */
header .top_lnks a:hover:after {content:''; height:1px; background:#f9dd00; display:block;}

#search_con {display:none; width:70vw; height:70vh; background:white; position:relative;}
#search_con .cencon {width:90%; position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#search_con .cencon .nml_input {max-width:500px; margin:0px auto 18px auto;}
#search_con .cencon .btn {margin:60px auto 0px auto;}

#search_con_b {width:90%; max-width:1000px; margin:auto;}
#search_con_b .cencon .nml_input {max-width:500px; margin:0px auto 18px auto;}
#search_con_b .cencon .btn {margin:60px auto 0px auto;}



/*------------ footer ------------*/
footer {display:block; width:100%; position:relative; background:#EBEBEB; padding-top:80px; margin-top:250px;}

.back_to_top {display:block; width:75px; height:75px; position:fixed; z-index:998; right:20px; bottom:20px; background:#595758; font-size:18px; line-height:24px; color:white; font-weight:400; text-align:center; border-radius:50px; box-sizing:border-box; padding-top:15px;}
.back_to_top:hover {cursor:pointer !important; bottom:23px;}

footer .roof {display:block; width:100%; max-width:1300px; position:absolute; top:-50px; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
footer .rof_lt {display:block; width:17%; max-width:180px; height:auto; position:absolute; top:0px; left:0px;}
footer .rof_mid {display:block; width:65%; max-width:680px; margin:auto;}
footer .rof_rt {display:block; width:17%; max-width:180px; height:auto; position:absolute; top:0px; right:0px;}

footer .mid_info {display:block; width:95%; max-width:1100px; margin:20px auto; position:relative;}
footer .mid_info .line {display:inline-block; vertical-align:top; width:1px; border-right:1px dashed #595758; margin:0px 5%; max-height:300px;}
footer .mid_info .blocks {display:inline-block; vertical-align:top; width:44%;}
footer .mid_info span.yht {display:block; width:90%; max-width:380px; margin:auto;}
footer .mid_info span.xht {display:block; width:90%; max-width:420px; height:auto; margin:auto;}
footer .mid_info p {font-size:16px; line-height:30px; color:#595758; margin-bottom:20px; text-align:justify;}
footer .mid_info p font {display:inline-block; width:35px; margin-right:6px;}
footer .mid_info .title {display:table; font-size:22px; font-weight:400; color:#595758; border-bottom:2px solid #595758; margin-bottom:40px; text-align:center;}
footer .mid_info .btmbtn {display:block; height:46px; margin-top:40px;}
footer .mid_info .btn {display:inline-block; width:40%; max-width:170px; margin:0px 15px;}

footer .ftcopy {display:block; position:relative; background:#f8f8f8; margin-top:100px; padding:50px 0px;}
footer .ftcenter {display:block; width:95%; max-width:1100px; margin:auto; position:relative;}
footer .sns {display:block; float:left;}
footer .sns a {display:inline-block; width:45px; height:45px; margin-right:5px;}
footer .sns a img {display:block; width:100%; height:auto;}
footer .rtcopys {display:block; float:right;}
footer .rtcopys span {display:block; float:right;}
footer .rtcopys a {display:inline-block; margin-left:10px; font-size:14px; color:#595758; border-bottom:1px solid #f8f8f8; text-decoration:none;}
footer .rtcopys a:hover {border-bottom:1px solid #f9dd00;}
footer .rtcopys p {clear:both; font-size:14px; color:#595758;}



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

	body, html {font-size:15px; line-height:22px;}

	/*------------ 全站共用 ------------*/
	.lv_h1_cneng {font-size:28px; height:auto;line-height: 1.2}
	.lv_h1_cneng .montsrt {font-size:16px; margin-left:10px; letter-spacing:1px;}
	.lv_h1_cneng::after {top:auto;bottom:-10px;}
	.lv_h1_engcn {font-size:28px; height:28px;}
	.lv_h1_engcn .zhtw {font-size:15px; margin-left:10px;}
	.lv_h1_engcn::after {top:35px;}

	.lv_h2 .montsrt {font-size:16px; margin-bottom:6px; letter-spacing:1px;}
	.lv_h2 {font-size:20px;}

	.lv_h3 {font-size:18px; line-height:36px;}

	.lv_h4 {font-size:20px;}

	.btn {width:140px; height:35px; font-size:15px !important; line-height:35px !important;}

	.nml_input {height:35px; font-size:15px; line-height:35px;}
	.validate {height:35px; width:120px; font-size:15px; line-height:35px;}

	#page_wrapper {margin-top:60px;}
	#page_kv {height:250px; margin-bottom:10px; background-size:180%;}
	#page_kv .page_title {margin:0px;}
	#page_kv .page_title p {font-size:24px; font-weight:500;}
	#page_kv .page_title p::after {width:240px; height:40px; top:-15px;}

	#breadcrumbs {margin-bottom:50px;}
	#breadcrumbs li {font-size:14px; padding-right:5px;}
	#breadcrumbs li::after {margin-left:5px;}
	#breadcrumbs li a {font-size:14px;}

	.inpage_lnk {border-bottom:0px; text-decoration:underline; text-decoration-color:#f9dd00; text-underline-offset:3px;}
	
	
	
	

	/*------------ header ------------*/
	header {background:#595758; height:60px;}
	header .hd_logo {width:120px; height:50px; margin:5px 0px 0px 5px;}
	header .hd_logo img {height:50px; width:auto;}
	header .hd_logo img.logopc {display:none;}
	header .hd_logo img.logomb {display:block;}
	
	header .navcon {display:block; width:100vw; height:calc(100vh - 140px); position:absolute; top:60px; right:0px; padding-bottom:80px; overflow:scroll;}
	header .nav {display:block; width:90%; margin:auto;}
	header .nav li {display:block; width:100%; position:relative; padding:0px; height:auto;}
	header .nav li a {display:block; width:90%; margin:auto; font-size:17px; line-height:50px; text-align:left; border-bottom:1px solid #858585;}
	header .nav li:last-child {border-bottom:0px;}
	header .nav ul.sub {background:none;}
	header .nav ul.sub li a {box-sizing:border-box; padding-left:17px; color:#e5e5e5; font-size:16px; text-align:left; border-bottom:1px solid #6f6f6f;}

	header .nav li.pcno {display:block;}

	header .top_lnks {display:none;}
	header .top_mb_lnks {display:block; position:absolute; top:10px; right:70px;}
	header .top_mb_lnks a {display:inline-block; vertical-align:middle; margin-left:20px; font-size:16px; color:white; text-decoration:none;}
	header .top_mb_lnks a .material-icons {padding-top:8px;}
	
	header .nav .arrow {
		width: 15px;
		height: 15px;
		display: inline-block;
		position: absolute;
		top:22px;
		right:10%;
	}
	header .nav .arrow span {
		top: 8px;
		position: absolute;
		width: 9px;
		height: 2px;
		background-color:white;
		display: inline-block;
		-webkit-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	header .nav .arrow span:first-of-type {
		left: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	header .nav .arrow span:last-of-type {
		right: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header .nav .arrow.active span:first-of-type {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		background:#f9dd00;
	}
	header .nav .arrow.active span:last-of-type {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		background:#f9dd00;
	}
	
	header #mbmnu {display:block; position:absolute; right:17px; top:17px; width:30px; height:25px;}
	header #mbmnu span {display:block; width:30px; height:3px; background:white;}
	header #mbmnu span:first-child {position:absolute; top:2px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
	header #mbmnu span:nth-child(2) {position:absolute; top:11px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
	header #mbmnu span:nth-child(3) {position:absolute; top:20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

	header #mbmnu.open span:first-child {top:13px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
	header #mbmnu.open span:nth-child(2) {display:none;}
	header #mbmnu.open span:nth-child(3) {top:13px; -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
	
	header .nav .srch_mbno {display:none;}

	#search_con {width:90vw; height:90vh;}



	/*------------ footer ------------*/
	.back_to_top {width:55px; height:55px; font-size:15px; line-height:18px; padding-top:8px;}
	footer {padding-top:30px; margin-top:100px;}
	footer .roof {top:-20px;}
	footer .mid_info {margin:auto; display: none;}
	footer .mid_info .line {display:block; width:100%; height:1px; border-right:0px; border-bottom:1px dashed #595758; margin:15px auto;}
	footer .mid_info .blocks {display:block; width:100%; margin:0px auto;}
	footer .mid_info p {font-size:14px; line-height:20px; margin-bottom:10px;}
	footer .mid_info .title {font-size:16px; margin-bottom:15px;}
	footer .mid_info .btmbtn {margin-top:20px;}
	footer .mid_info .btn {font-size:14px; line-height:35px; height:35px;}

	footer .ftcopy {margin-top:0px; padding:30px 0px;}
	footer .sns {display:table; float:none; margin:0px auto 15px auto;}
	footer .sns a {width:40px; height:40px;}
	footer .rtcopys {float:none;}
	footer .rtcopys span {display:table; float:none; margin:0px auto 10px auto;}
	footer .rtcopys p {text-align:center; margin-bottom:50px;}



	
}