@charset "UTF-8";
/*思源黑體*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,900&display=swap&subset=chinese-traditional');
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,button,a{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	letter-spacing: 0.7px;
	vertical-align: baseline;
	text-decoration: none;
	box-sizing: border-box;
	line-height: 140%;
	font-weight: 400;
}

body {
	color: #263348;
	background:#fff; 
	font: 18px/100% "Noto Sans TC","微軟正黑體",sans-serif;
}

html, body { height: 100%; }

a{
	color:#263348;
	text-decoration:none;
}
button{	background: none; }

h1, h2, h3, h4, h5, h6{ font-weight: 300; font-size:1rem; }

ol, ul {
	list-style: none;
}

table {width:auto; 	border-collapse: collapse; border-spacing: 0; }

input, button, textarea,select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: none;
}
/*reset end*/

/*Input
input[type="text"],
input[type="password"] { width: 100%; min-width: 100px; padding: 10px 10px; height: 40px; line-height: 32px; border: solid 1px #ddd; }*/

/*select
select { width: 100%; min-width: 60px; height: 40px; line-height: 32px; padding: 0 35px 0 10px; vertical-align:middle; color: #434343;
 appearance:none; -moz-appearance:none; -webkit-appearance:none;
 background-image:url(../images/icon_select.png); background-repeat: no-repeat; background-size: auto 12px; background-position: calc(100% - 10px) center; border: solid 1px #ddd;  }
select::-ms-expand { display: none; }*/

/*checkbox
input[type="checkbox"]{ display: none; appearance: none; outline:none; opacity: 0; line-height: 22px; }
input[type="checkbox"] + label { line-height: 32px; cursor: pointer; }
input[type="checkbox"] + label span { display: inline-block; width: 22px; height: 22px;  margin: 0 10px 0 0; padding: 0; vertical-align: middle; cursor: pointer; background: url(../images/icon_check.png) left top no-repeat; background-size: 22px auto;}
input[type="checkbox"]:checked + label span { background: url(../images/icon_check.png) left bottom no-repeat; background-size: 22px auto; }
input[type="checkbox"] + label span.reverse { margin: 0 0 0 10px; }

textarea { width: 100%; min-height: 120px; padding: 10px 10px; border: solid 1px #ddd; overflow-y: auto; resize: none; }*/

.smallT { font-size: 14px; }
.bigT { font-size: 21px; }
.biggerT { font-size: 24px; }
.biggestT { font-size: 28px; }

.tL { text-align: left; }
.tR { text-align: right; }
.tC { text-align: center; }
.tB { font-weight: 500; }

.fL { float:left; }
.fR { float:right; }

.clr {clear:both;}

.web { display:block; }
.mobile { display:none; }

.tBig { font-size: 18px; }
.tBigger { font-size: 21px; }
.botM0 { margin-bottom: 0; }
.botM { margin-bottom: 15px; }
.botM2 { margin-bottom: 30px; }

.red { color: #bd1527; }
.gray { color: #9a9a9a; }

/*img*/
.imgbox { text-align: center; }
.imgbox img { display: block; max-width: 100%; }
.imgbox.full img { width: 100%; }

/*-----------------頁面-----------------*/
.wrapper { padding-top: 64px; }
.pagesize { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.nav {}


/*header*/
.header { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; padding: 8px 0; background: #007d7d; }
.header .logo { display: block; width: 170px; height: 50px; background: url(../images/img_logo.png) left center no-repeat; background-size: auto 50px; }
.headerIn { }
.headerMenu { position: absolute; top: 8px; right: 20px; display: flex; }
.headerMenu a { display: block; line-height: 50px; margin-left: 40px; color: #fff; }


/*footer*/
.footer {  }
.footer_num { height: 36px; background:#dcdcdc; }
.footer_num p { line-height: 36px; font-size: 14px; text-align: right; }
.footer_copyright { padding: 30px 0; color: #fff; background: #007d7d; }
.footer_copyright p { text-align: center; font-size: 18px; font-weight: 500; }
.footer_copyright span { display: inline-block; }


/*btn_top*/
.btn_top { position: fixed; right: 40px; bottom: 0; transition: 0.2s; }
.btn_top a { display: block; width: 96px; height: 44px; background: url(../images/btn_top.png) center; background-size: 100% auto; }



@media screen and (max-width: 767px) {
	.web { display:none; }
	.mobile { display:block; }
	
	.wrapper { padding-top: 60px; }
	.pagesize { padding: 0 10px; }

	/*header*/
	.header { height: 60px; padding: 10px 0; }
	.headerIn {  }
	.header .logo { width: 130px; height: 40px; background-size: auto 40px; }
	.headerNav_btn { position: absolute; top: 10px; right: 10px; display: block; width: 40px; height: 40px; background: url(../images/ban_headerNav.png) center no-repeat; background-size: 30px; }
	.openNav .headerMenu {  }
	.openNav ~ .page {  }
	.openNav ~ .page::after { content: ""; display: block; position: fixed; top: 60px; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); }
	.headerMenu { display: none; position: fixed; z-index: 999; top: 60px; left: 0; right: 0;
	padding: 0 20px; background: #fff; }
	.openNav .headerMenu { display: block; }
	.headerMenu li { border-bottom: solid 1px #7fbebe; }
	.headerMenu li:nth-last-child(1) { border: none; }
	.headerMenu a { margin: 0; font-size: 21px; text-align: center; color: #007d7d; }

}